Building mapchats with Firebase

Transcript

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

   View Slide

2. - Real time database and synchronization
   - Data accessible via JS or REST
   - Build real time app with just html/js
   Saturday, 12 January, 13
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Saturday, 12 January, 13
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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) {
    $('').text(text).prepend($('').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
    

    View Slide

11. MAPCHATS
    .com
    Social network on Google Maps
    Saturday, 12 January, 13
    

    View Slide

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
    

    View Slide

13. Step 1: Find the songs you like
    Step 2: Search for songs on youtube
    Saturday, 12 January, 13
    

    View Slide

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
    

    View Slide

15. I dont wanna think!
    Saturday, 12 January, 13
    

    View Slide

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

    View Slide