Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building mapchats with Firebase

A7b1a2be3c567007aaa43d7e8b663cdf?s=47 alvinwoon
January 12, 2013

Building mapchats with Firebase



January 12, 2013

More Decks by alvinwoon

Other Decks in Technology


  1. What is Firebase? Alvin Woon Plurk & TMI Saturday, 12

    January, 13
  2. - Real time database and synchronization - Data accessible via

    JS or REST - Build real time app with just html/js Saturday, 12 January, 13
  3. Data structure Every piece of data inside your Firebase is

    also accessible by a unique URL REST, tree-based design. Design your app with this in mind. This is non-relational, no-join data structure Nested children allow you to structure your data Saturday, 12 January, 13
  4. http://chat.firebaseio.com/users http://chat.firebaseio.com/users/alvin http://chat.firebaseio.com/users/alvin/messages http://chat.firebaseio.com/users/alvin/messages/latest Let’s say you created an app

    called ‘chat’ Saturday, 12 January, 13
  5. Saturday, 12 January, 13

  6. //Initialize Firebase var db = new Firebase('https://chat.firebaseIO- demo.com'); //Add ‘nodejs’

    channel to chatroom db.set('nodejs'); Write data to Firebase Saturday, 12 January, 13
  7. //Initialize Firebase var db = new Firebase('https://chat.firebaseIO- demo.com/nodejs/users'); //‘listen’ to

    the users ‘column’ for ‘nodejs’ channel db.on('child_added', function(snapshot) { //alert is run every time someone join the channel alert(snapshot.val()+’ has joined the channel’); }); Read data from Firebase Saturday, 12 January, 13
  8. Transaction //Initialize Firebase var count = new Firebase('https://chat.firebaseIO- demo.com/total_messages'); count.transaction(function(current_value)

    { return current_value + 1; }); Saturday, 12 January, 13
  9. Query limits //Initialize Firebase var messageListRef = new Firebase('https:// chat.firebaseIO-demo.com/message_list/');

    var messageListQuery = messageListRef.limit(100); messageListQuery.on('child_added', function(snapshot) { bla }); Saturday, 12 January, 13
  10. var dataRef = new Firebase('https://chat.firebaseio- demo.com/'); $('#messageInput').keypress(function (e) { if

    (e.keyCode == 13) { var name = $('#nameInput').val(); var text = $('#messageInput').val(); dataRef.push({name: name, text: text}); $('#messageInput').val(''); } }); function printChatMessage(name, text) { $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv')); $('#messagesDiv')[0].scrollTop = $('#messagesDiv') [0].scrollHeight; }; dataRef.on('child_added', function(snapshot) { var message = snapshot.val(); printChatMessage(message.name, message.text); }); Saturday, 12 January, 13
  11. MAPCHATS .com Social network on Google Maps Saturday, 12 January,

  12. Wat? To create a real time, highly addictive and immersive

    social networking experience where every photos, videos and markers on the map is an interactive chatroom. All activities are bubbled up for everyone to see to create a lively conversation environment. Saturday, 12 January, 13
  13. Step 1: Find the songs you like Step 2: Search

    for songs on youtube Saturday, 12 January, 13
  14. Taiwan’s playbook Taiwan’s entertainment media consumption is increasing at ridiculous

    rate. Taiwan is also the centre hub for the world’s mandarin pop music and culture About half of Taiwan’s online users say they trust recommendations and reviews. Attictv is good with analyzing Latin-centric music data. They need more Chinese videos as data source. Saturday, 12 January, 13
  15. I dont wanna think! Saturday, 12 January, 13

  16. alvin.woon@tmi.vc Saturday, 12 January, 13