Quick introduction to Firebase

This is going to be a very short post, why? Well Firebase it’s really simple.

From their landing page:

Scalable real-time backend
Build apps fast without managing servers

That is Firebase, a real-time easy to use back-end, they have a tutorial that should teach you in five minutes the basics (i’t actually less than five minutes).

But well, too many praises, lets play a little bit with this technology.

first thing to do is to sign up for the service (easier with your github account), and create a firebase.

Mine is goingo be named fblab

Image

We’re going to create a jsFiddle with this example:

(you can check the final result here, but if you want to test by yourself the example is pretty easy).

1- Add jQuery as a Framework or extension.

2- Add the Firebase app as an external resource in our jsfiddle:

https://cdn.firebase.com/v0/firebase.js

add external resource

3- Add the following markup:

<h1>Simple list in Firebase</h1>
<!-- input text that contains the chat message -->
<input type="text" id="js-message" />
<input type="button" value="Send" id="js-send" />
<!-- list that just display the chat messages -->
<ul id="js-chat-list"></ul>


4- And the following JavaScript

// this is the Firebase that points to the address that we create in the Firebase site Dashboard
var myDataRef = new Firebase('https://fblab.firebaseio.com/');

// get a reference to the message input text
var messageText = document.getElementById('js-message');

// get the chat user nickname
var username = prompt('Please provide your nickname');

// store a message object to our Firebase
var _sendMessage = function() {
// set anonymous user as anon
if(!username) {
username = 'anon';
}
// if there's no text return, no validation for this basic example
if(!messageText.value) {
return;
}

// save the message to our Firebase endpoint taking advantage of the list capabilities, in this case we are saving an array of message objects
myDataRef.push({nick: username, message: messageText.value});
// reset the message text input
messageText.value = '';
};

// utility function that just print a chat message
var _addToChatList = function(chatMessage) {
// because it is out of the scope of this tutorial lets just append the message to out list with jquery
var liMessage = $('<li/>').append(chatMessage.nick + ' says: ' + chatMessage.message);
$('#js-chat-list').append(liMessage);
};

// add callback to our Firebase for when a new child is attached
// to dive more into the Firebase events go to:
// https://www.firebase.com/docs/reading-data.html
myDataRef.on('child_added', function(snapshot) {
_addToChatList(snapshot.val());
});

// add event listener to the send button
var el = document.getElementById("js-send");
el.addEventListener("click", _sendMessage, false);

As you can see the demo is very simple, although you can get an idea of what you can do with Firebase. Here we have a screenshot of the final result:
chat

Firebase has a free plan for developers, a rest api, and a full api for Java, Objective-C and JavaScript.

I can easily see myself doing my prototypes with Firebase, it was fun.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s