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

Building mapchats with Firebase

alvinwoon
January 12, 2013

Building mapchats with Firebase

alvinwoon

January 12, 2013
Tweet

More Decks by alvinwoon

Other Decks in Technology

Transcript

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  5. Saturday, 12 January, 13

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  16. [email protected]
    Saturday, 12 January, 13

    View full-size slide