Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Mapchats with Firebase


Published on

Published in: Technology
  • Be the first to comment

Building Mapchats with Firebase

  1. 1. What is Firebase? Alvin Woon Plurk & TMI
  2. 2. - Real time database andsynchronization- Data accessible via JS orREST- Build real time app withjust html/js
  3. 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
  4. 4. Let’s say you created an app called ‘chat’ alvin alvin/messages
  5. 5. Write data to Firebase//Initialize Firebasevar db = new Firebase(;//Add ‘nodejs’ channel to chatroomdb.set(nodejs);
  6. 6. Read data from Firebase//Initialize Firebasevar db = new Firebase(;//‘listen’ to the users ‘column’ for ‘nodejs’ channeldb.on(child_added, function(snapshot) { //alert is run every time someone join the channel  alert(snapshot.val()+’ has joined the channel’);});
  7. 7. Transaction//Initialize Firebasevar count = new Firebase(;count.transaction(function(current_value) {  return current_value + 1;});
  8. 8. Query limits//Initialize Firebasevar messageListRef = new Firebase(;var messageListQuery = messageListRef.limit(100);messageListQuery.on(child_added, function(snapshot){  bla});
  9. 9. var dataRef = new Firebase(; $(#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.text); });
  10. 10. MAPCHATS Social network on Google Maps .com
  11. 11. Wat?To create a real time, highly addictive andimmersive social networking experience whereevery photos, videos and markers on the mapis an interactive chatroom. All activities arebubbled up for everyone to see to create alively conversation environment.
  12. 12. Step 1: Find the songs you likeStep 2: Search for songs on youtube
  13. 13. 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.
  14. 14. I dont wanna think!
  15. 15.