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

Building mapchats with Firebase

January 12, 2013

Building mapchats with Firebase


January 12, 2013

More Decks by alvinwoon

Other Decks in Technology


  1. - Real time database and synchronization - Data accessible via

    JS or REST - Build real time app with just html/js Saturday, 12 January, 13
  2. 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
  3. //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
  4. //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
  5. 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
  6. 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
  7. 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
  8. Step 1: Find the songs you like Step 2: Search

    for songs on youtube Saturday, 12 January, 13
  9. 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