What is Firebase?      Alvin Woon      Plurk & TMI
- Real time database andsynchronization- Data accessible via JS orREST- Build real time app withjust html/js
Data structure Every piece of data inside your Firebase is also accessible by a unique URL REST, tree-based design. Design...
Let’s say you created an app called ‘chat’       http://chat.firebaseio.com/users       http://chat.firebaseio.com/users/   ...
Write data to Firebase//Initialize Firebasevar db = new Firebase(https://chat.firebaseIO-demo.com);//Add ‘nodejs’ channel ...
Read data from Firebase//Initialize Firebasevar db = new Firebase(https://chat.firebaseIO-demo.com/nodejs/users);//‘listen...
Transaction//Initialize Firebasevar count = new Firebase(https://chat.firebaseIO-demo.com/total_messages);count.transactio...
Query limits//Initialize Firebasevar messageListRef = new Firebase(https://chat.firebaseIO-demo.com/message_list/);var mes...
var dataRef = new Firebase(https://chat.firebaseio-demo.com/);      $(#messageInput).keypress(function (e) {        if (e....
MAPCHATS  Social network on Google Maps                                  .com
Wat?To create a real time, highly addictive andimmersive social networking experience whereevery photos, videos and marker...
Step 1: Find the songs you likeStep 2: Search for songs on youtube
Taiwan’s playbook Taiwan’s entertainment media consumption is increasing at ridiculous rate. Taiwan is also the centre hub...
I dont wanna think!
alvin.woon@tmi.vc
Building Mapchats with Firebase
Upcoming SlideShare
Loading in …5
×

Building Mapchats with Firebase

2,344
-1

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,344
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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’ http://chat.firebaseio.com/users http://chat.firebaseio.com/users/ alvin http://chat.firebaseio.com/users/ alvin/messages http://chat.firebaseio.com/users/
    5. 5. Write data to Firebase//Initialize Firebasevar db = new Firebase(https://chat.firebaseIO-demo.com);//Add ‘nodejs’ channel to chatroomdb.set(nodejs);
    6. 6. Read data from Firebase//Initialize Firebasevar db = new Firebase(https://chat.firebaseIO-demo.com/nodejs/users);//‘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(https://chat.firebaseIO-demo.com/total_messages);count.transaction(function(current_value) {  return current_value + 1;});
    8. 8. Query limits//Initialize Firebasevar messageListRef = new Firebase(https://chat.firebaseIO-demo.com/message_list/);var messageListQuery = messageListRef.limit(100);messageListQuery.on(child_added, function(snapshot){  bla});
    9. 9. 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); });
    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. alvin.woon@tmi.vc
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×