Firebase – realtime database!
Real-time applications need to process dynamic data that changes constantly over the time. Implementing this functionality can a hectic stuff, which involves processing the incoming data and presenting it to the client side in real time.
Here we are looking at a cloud-based platform, Firebase, which provides real-time sync along with many other services. There are real-time databases out there like rethink DB, and it’ s worth knowing the difference between the cloud-based sync services and traditional real-time databases.
So let’s try out a simple application using the firebase real-time database, which is only a tip of the iceberg, but might be good starting point for your real-time data adventures.
Create a firebase project to be used in our application. Go to the Firebase console, create and account, and start building the document using the simple to use user interface.
Next create an HTML file, which will be application file.
<!DOCTYPE html>
<html>
<head>
<title>Sample web firebase project!</title>
</head>
<body>
<ul id="list">
<li>The contents will be updated in realtime!</li>
</ul>
<!--firebase scripts here-->
</body>
</html>
Next, we add the firebase library files to our application. The complete setup guide can be found here.
Then we need the firebase-app.js and firebase-database.js script files.
<script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-database.js"></script>
We need to initialize firebase within our application using the public API values we get while creating the project in firebase console.
var config = {
apiKey: "<API_KEY>",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
};
firebase.initializeApp(config);
So we have initialized our firebase code, next we need to get a reference for our database.
var ref = firebase.database().ref();
With the ref variable, we perform various operations on our database. By default, the database we create through the firebase console requires authentication for all read-write operations. For testing purpose, we can turn that OFF. To do that in the firebase console dashboard, go to `RULES` tab and change the values like this
{ “rules”: { “.read”: “true”, “.write”: “auth != null” } }
This enables read operations without authentication and write operations protected. So now we are good to go with read operations. So we need to create some collections in the database and from our client side code, we could get and updated data every time the collections changes. A simple read implementation would look like this
So now we are good to go with read operations. So we need to create some collections in the database and from our client side code, we could get and updated data every time the collections changes. A simple read implementation would look like this
ref.on("value", function (snapshot) {
// value from firebase db
var obj = snapshot.val();
// ul
var list = document.getElementById('list');
// remove elements in list if any
while(list.firstChild){
list.removeChild(list.firstChild);
}
var content = '';
// append the data to the list
for( var key in obj.fruits ){
var node = document.createElement('LI');
content = document.createTextNode( obj.fruits[key].name +' - '+ obj.fruits[key].color );
node.appendChild( content );
list.appendChild( node );
}
}, function (error) {
console.log("Error: " + error.code);
});
And that’s it, we have created a real-time sync application which could be extended in applications, like jekyll, to serve some cool dynamic real-time contents.