Building mapchats with Firebase

Transcript

1. What is Firebase? Alvin Woon Plurk & TMI Saturday, 12 January, 13
2. - Real time database and synchronization - Data accessible via JS or REST - Build real time app with just html/js Saturday, 12 January, 13
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
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
5. Saturday, 12 January, 13
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
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
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
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
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) { $('<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); }); Saturday, 12 January, 13
11. MAPCHATS .com Social network on Google Maps Saturday, 12 January, 13
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
13. Step 1: Find the songs you like Step 2: Search for songs on youtube Saturday, 12 January, 13
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
15. I dont wanna think! Saturday, 12 January, 13
16. alvin.woon@tmi.vc Saturday, 12 January, 13