I’m very excited by the possibilities Firebase has for mobile apps. Using Onsen UI, AngularJS and Firebase I’ve made a simple app to illustrate how it can be used. Instead of creating my own database, I’ve used the Hacker News API since it already has a lot of data and new items are added frequently so we can try out the live syncing functionality in Firebase.
This project is made available on my GitHub account and can be easily deployed on a mobile device using Cordova. Please try out the app here:
Adding Firebase to an app
To use Firebase in an app the
firebase.js file must be loaded. We can then create a
Firebase object to communicate with the backend.
Accessing Firebase resources
All resources in Firebase are reachable through a URL. For the Hacker News API the top 100 news stories can be fetched through the following URL:
Resources can be accessed using the
When a reference to a Firebase resource has been created, event listeners can be attached to the object to react when the data changes or just to fetch the current data. There are two methods that can be used to attach event listeners:
Firebase.once(eventName, callback) and
Firebase.on(eventName, callback). As the name implies, once will only be executed the first time the event is triggered while
on will keep listening indefinitely.
To remove event listeners the
Firebase.off(eventName, [callback]) is used. The callback function is optional but if it isn’t specified all event listeners for a given event type are removed.
There are four event types in Firebase. To listen for changes in the data,
'value' is used.
'child_moved' can be used to listen for more specific changes. To listen for changes in the
topstories resource the following code can be used:
Running the above code will output a list of IDs. The IDs can be used to fetch stories from the item resource. Thus, the URL for the first resource in the database is:
This makes it extremely easy to create an app that shows the top stories and dynamically update them when they change.
Making a Hacker News App
There is an AngularJS module called AngularFire that provides a
$firebase service that can be used to easily communicate with the backend as well as create data binding between the models in the database and the models in AngularJS.
However, since the app we’re making is very simple I’ve decided to just use the
Firebase object directly without the help of AngularFire. For a bigger project it might be helpful, but I think it’s more instructive to use the API in
firebase.js since it operates at a lower level.
This is a list of the important files in the project:
Firebase object so I can reuse it in my controllers.
I also wrote three controllers.
TopController fetches the top stories from the Hacker News API and updates them whenever they change.
LatestController gets the latest stories and waits for new stories to be added. A main controller called
AppController is used to switch between the two views. Since it’s a parent to the two other controllers, I’ve put some utility methods in it that the child controllers can use.
This is the code for
TopController which shows how easy it is to add an event listener in Firebase and update data dynamically when there’s a change on the database side:
And that’s how easy a Hacker News app is made using AngularJS and Onsen UI. Firebase gives us the power to instantly update the view when a new item is added or the top stories change.
We need your help!
Onsen UI is an open source project and a community effort. There is nothing that makes us happier than getting contributions from the community.
A good place to start is the GitHub issues page. If there’s an issue that you would like to solve, go ahead and fork the repository and make a Pull request. We also appreciate new features. Upon receiving a pull request, we will review it as soon as possible.
Originally published at onsen.io on October 14, 2015.