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 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. [email protected]
    Saturday, 12 January, 13

    View Slide