Post
Ask Question

Firebase - Google Alphabet’s Cloud Service Provider

Firebase is a one stop solution for your web or mobile applications on the cloud powered by Firebase’s NoSQL backend and much more.

This article is about “Firebase”, Google’s cloud hosted solution with real time NoSQL database. Note - Firebase was acquired by “Google” in October 2014. It’s dedicated to customers in providing a platform for static hosting, authentication, real time database, custom domain etc.

If you are new to “Firebase”, don’t worry!You are not the only one. Coming to the expectations on this article, it mainly focuses on giving an introduction to “Firebase” with a real world example.

Believe me, in a matter of five minutes you can get your application up and running on “Firebase” cloud platform.

Features of Firebase

  1. Real time database:

    Firebase manages all the user data in a NoSQL database with the data stored in JSON format. Firebase synchronizes all its data to connected clients in any platform/device.

  2. Build Cross platform Apps:

    Firebase lets the customer to focus on their business requirements. Developers have full freedom to choose their preferred programming language or platform for development. Firebase has SDK’s for Android, iOS and JavaScript. One can easily consume the “Firebase” REST service and develop apps too.

  3. Security: All firebase transaction happens over highly a secured SSL connection with a 2048-bit certificate.

  4. Offline mechanism:

    All Firebase based application let you take advantage of its offline capability. The application will continue to work even if the network connectivity gets lost. Once the application gets the connectivity, The Firebase client makes sure to synchronize the internal version of its data with the Firebase server and other connected clients to its best.

Scenarios of usage

If you are wondering what scenarios you can use “Firebase”, here are few.

  1. You wish to quickly design, develop and deploy your application to cloud by utilizing a highly efficient backend storage.

  2. Say you have an application ready. Now you are thinking of a reliable, scalable and low cost backend support for storage.

  3. Upgrade, downgrade with ease with a free email support for paid plans.

  4. Deploy your solution in no time without having to worry about the infrastructure support for managing the application or data.

  5. You would like to allow your application to be usedwhile the users are online or offline, then you are the right candidate for “Firebase”. All firebase operations like setting (nothing but adding), removing or updating can be accomplished without the network connectivity.

Firebase Pricing

We have to understand the pricing tier before we decide and start to deploy our applications on “Firebase”. Here’s the link to understand the pricing tires - https://www.firebase.com/pricing.html,

One can definitely go with a “Free” plan with $0 unlimited users with a storage capacity of 1GB and transfer rate of 10GB.
 
Using the Code

Let us take a look into the sample code and try to understand the usage of “Firebase” operations.

We are going to see a tiny “Movie” App, which lets the user to key in their favorite movie and manage the same. The sample application demonstrates the “CRUD” operation against the configured “Firebase” NoSQL database.

The sample demo application is developed in AngularJS. We will be coding an Angular Controller and Factory for managing the favorite movie list in Firebase.

Below are the JavaScript references for our MovieApp.

  1. <scriptsrc='https://cdn.firebase.com/js/client/2.2.1/firebase.js'/>  
  2. <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js/>  
  3. <script src=https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js/>  

Let us create an Angular module by specifying the name and dependencies. 

var movieFire = angular.module("MovieFire", ["firebase"]);

Below is code snippet of MovieApp controller.Here’s what we need,
  1. All the user to key in and save their favorite movie lists.
  2. Allow user to edit the movie name.
  3. Allow user to delete the movie list item.

We are going to define a scope variable for holding the favorite movies. Every time the Firebase movie DB is being updated (added or edited) with a movie name or any delete operation on the movie, the “on” value change event gets fired. We will be resetting the “movies” scope variable by getting all the key items from Firebase DB and then by looping through and pushing each items (key and value) pair to movies list.

The controller does nothing more than refresh the movie list and make a call to the factory method to perform saving, editing and deleting the movie item.

  1. function MovieController($scope, $firebase, MovieFactory)    
  2. {    
  3.     $scope.favMovies = $firebase(new Firebase('https://moviefire.firebaseio.com/movies'));    
  4.     $scope.movies = [];    
  5.     
  6.     $scope.favMovies.$on('value', function()    
  7.     {    
  8.         $scope.movies = [];    
  9.         var mvs = $scope.favMovies.$getIndex();    
  10.         for (var i = 0; i < mvs.length; i++)    
  11.         {    
  12.             $scope.movies.push({    
  13.                 name: $scope.favMovies[mvs[i]].name,    
  14.                 key: mvs[i]    
  15.             });    
  16.         };    
  17.     });    
  18.     
  19.     $scope.saveToList = function(event)    
  20.     {    
  21.         if (event.which == 13 || event.keyCode == 13)     
  22.         {    
  23.             MovieFactory.saveToList($scope.mvName, $scope.favMovies);    
  24.             movieName.value = '';    
  25.         }    
  26.     }    
  27.     
  28.     $scope.edit = function(index) {    
  29.         MovieFactory.edit(index, $scope.movies[index].key, $scope.movies[index].name);    
  30.     }    
  31.     
  32.     $scope.delete = function(index) {    
  33.         MovieFactory.del(index, $scope.movies[index].key, $scope.movies[index].name);    
  34.     }    
  35. }  

 

Below is code snippet of Angular Factory.

The logic for favorite managing movies are located within this factory. It has dedicated method for saving, editing and deleting a movie item.
  1. movieFire.factory('MovieFactory', function($firebase)    
  2.  {    
  3.     var movieCRUDOperations =    
  4.      {    
  5.         saveToList: function(name, favMovies)     
  6.       {    
  7.             varmvName = name;    
  8.             if (mvName.length > 0)     
  9.             {    
  10.                 favMovies.$add({    
  11.                     name: mvName    
  12.                 });    
  13.             }    
  14.         },    
  15.         edit: function(index, key, name)     
  16.       {    
  17.             var newName = prompt("Update the movie name", name);    
  18.             if (newName && newName.length > 0)     
  19.             {    
  20.                 var updateMovieRef = movieCRUDOperations.buildEndPoint(key, $firebase);    
  21.                 updateMovieRef.$set({    
  22.                     name: newName    
  23.                 });    
  24.             }    
  25.         },    
  26.         del: function(index, key, name) {    
  27.             var response = confirm("Are certain about removing \"" + name + "\" from the list?");    
  28.             if (response == true) {    
  29.                 var deleteMovieRef = movieCRUDOperations.buildEndPoint(key, $firebase);    
  30.                 deleteMovieRef.$remove();    
  31.             }    
  32.         },    
  33.         buildEndPoint: function(key, $firebase) {    
  34.             return $firebase(new Firebase('https://moviefire.firebaseio.com/movies/' + key));    
  35.         }    
  36.     
  37.     }    
  38.     return movieCRUDOperations;    
  39. });    
Firebase Setup on your local machine,
  • Please download and install NodeJS if you don’t have one.
  • Install Firebase command line tools by running the below command,

    npm install -g firebase-tools

  • If you wish to update firebase tools, just run the below command
  • npm update -g firebase-tools

Firebase Create App

It is recommended to create an app and then host the application.

Firebase Initializing

First you need to run the “firebase init” command so that the Firebase create necessary files required for deploying your application.

Always use the existing database than creating a new one as Firebase has some issues in creating on the fly.

Choose an existing Firebase database and hit enter to proceed further. Under “What directory should be the public root?” specify the application folder name ex: movieappdemo and hit enter which will create a firebase.json file. Copy paste or move all your application files to the public root folder. In this case it would be “movieappdemo” folder will contain HTML,CSS and Angular JS script files.

output

Firebase Deploy

In order for the Firebase deployment, you must follow the previous step of initializing the Firebase. First you need to authenticate yourself so you can perform the deployment. Please run the following command to authenticate.

Firebase login

Key in the following command to deploy your application to Firebase.

Firebase deploy

deploy

Firebase NoSQL database preview

Here’s the screenshot of the Firebase NoSQL database consisting of information in JSON format. Every item in the Firebase DB consists of a key and value pair item.

database
 
Firebase Movie App Screenshot

Firebase Movie App

Note: Any issues with the Firebase deployment, please take a look into http://krisviceral.com/firebase/

The latest up to date AngularJS code is also available at GitHub.
References

Below are links which helped me to understand “Firebase”.

The demo app is based on the following open source code.

Read more articles on Cloud Computing:


Similar Articles