Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Firebase: Real-Time Database Using AngularJS

DZone's Guide to

Firebase: Real-Time Database Using AngularJS

Firebase provides a powerful real-time database that can be accessed from almost anywhere. You only need to reference a couple libraries to add it to your web app!

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

Today, we're going to talk about Firebase, a powerful Google mobile platform that provides a bunch of tools such as storage, cloud messaging, hosting, and a real-time database that can be accessed via web, iOS, or Android app.

Adding Firebase to Your Web App

I'm going to explain how to insert a JSON object into a real-time database and restore that value using AngularJS. You only need to reference AngularJS, Firebase, and AngularFire libraries in your project.

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.2.0/angularfire.min.js"></script>

Then, we need to add Firebase configuration in our index.html. To do that, we need to go into the Firebase console and get the initialization code, as you can see in the image below.

initcode

Creating Your Data Layer

I will create an AngularJS service to use as a data layer. This service will be responsible for creating our links to the Firebase real-time database. Here, we are going to use two important functions in the firebase library. The first one is ref() from the database() object. This function returns a direct link to the root structure of our documental database. The second function is child(), which allows us to create child reference to this root structure.

 function firebaseDataService() {
     var root = firebase.database().ref();

     var service = {
         root: root,
         requests: root.child('requests')
     };

     return service;
 }

In the example above, we have a path to the root structure and a child of this path call requests .

Using AngularFire to Manipulate the Reference

Now, we have a service to get a link to our database reference, so we are going to use Angular Fire to create an object with access to our database.

function getRequestsByUser(uid) {
    if (!requests) {
        requests = $firebaseArray(firebaseDataService.requests.child(uid).child('userRequests'));
    }
    return requests;
}

In the example above we use $firebaseArray function to create an object, the parameter this function uses is a path reference to Firebase. This object is now linked to our database which means that every time you put or remove an object from this array is going to affect our database in real time. We can use the function $add or $remove to manipulate our database. Our database looks like this:

db

That's it. After doing that, we are ready to go. I have a working example in this link if you want to see the complete implementation. In this example, I created an app that gives you the current time in different places around the world.

For a complete reference of Angular Fire use this link.

For a complete reference of Firebase use this link.

If you found this post useful, please don't forget to press the like button and share it. If you are in doubt, don't hesitate to ask a question. As always, thank you for reading.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
firebase ,mobile ,tutorial ,angularjs

Published at DZone with permission of Ezequiel Reyno. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}