<Ionic /> Zero to Hero — Part-5-A : Let’s Integrate Firebase !

PS : In this part we will heavily depend “AngularJS Fundamental” + “Firebase” So in case you didn’t have the chance to read, please do because all the terms and terminologies has been explained there!

Now, Let’s accumulate everything you learned, saw, and heard in the past articles, whether it was about Ionic or Firebase, and let’s build something they put in evidence the power of the two platforms.

In this first part of this Article we will do the following :

1 — Create a new blank Ionic app !

2 — Add and form an basic I/O App.

3 — Integrate Firebase.

4 — Rewrite Everything !

So let’s hit the Road !

1 — Create a new blank Ionic app :

Head strictly to your command line of choice with ionic installed globally like we talked about in the past articles and write the following command :

By now the ionic scaffold app (ran through your system create the folder named by ionic_firebase and add all needed files)

2 — Add I/O Functionalities :

Now let’s run through some basic code writing, fire up your favorite code editor ( using Github Atom in my case ) and head directly to your WWW folder.

1 . Head to you both index.html + script/app.js and change the app name from : starter to ionic_fire like so :

Change the App Name

2. Let’s suppose that we will have a multi page ionic app, then we need routing, so let’s configure that using the existing exciting ui.router pre-added by ionic framework, and will do that in the app.js file in the configuration function, like so :

Creating Simple Routing

Here’s the code if you want to follow with me!

let’s digest the code above :

  1. Config Function : where all our routes will going to live !
  2. $urlRouterProvider / $stateProvider : Will be our routing providers ( an AngularJS term ) where $urlRouterProvider with its method (otherwise ) will map to a certain given route if we can’t route to a specific route.
  3. State : The ui. router state has a “name” so we can route to it directly and a “url” and “templateUrl” that maps to a .html page and a “controller” a. js file that will manage our page (for more info please check the serial port 3 for that).

Now let’s fill out the gaps in both home.html and homeCtrl.js files respectively!

Very Simple UI.

Simple logic either, simple addMe() function that adds a certain person that have a first/last name to an array! — nothing simpler — here’s how it looks :

Ionic memory saving the Data

Fairly simple and good looking ;), made it write it ? Let’s celebrate then !!!

3 — Let’s Add Firebase !

Now thing are starting to get a bit hotter!! We will need a place to persist our data and hold it, a place where we can have a Database + all needed Configuration related to it outside of the box! We need a BAAS(Backend As A Service).

So, we’re in a Hybrid like app, we’re using JavaScript ( if you didn’t realize that by now, well you’re in the wrong article) and Ionic use AngularJS ( which is obvious) so then we will need AngularFire !

Let’s add now some dependencies references to our index.html page so it will look pretty much like this :

PS : Now Let’s i will suppose you followed the instruction for creating a Firebase mentioned in the article above that deal with Firebase!

1 . Let’s Add a Factory for our Data !

Where :

<your-firebase-ref> : Is you own firebase Application name.

$firebaseArray : Is you synchronized data, hosted in Firebase Servers.

2 . Let’s Create a new Factory for Data management :

And change also our homeCtrl.js because we changed our Data source + we created a Firebase Ref, so now the homeCtrl.js will look like so :

Now, after we have finished the Firebase integration, let’s make some data entering :

Real Time Data Transaction between Ionic and FIrebase

Now let’s Test the Delete functionality and see if we’re having it in Real time :

Deleting data in Real Time with Ionic and Firebase


Well, it’s looks like everything is set and now we have simple I/O functionalities in our Ionic app with Firebase integration ready for production.

For more Firebase + Ionic integration, keep on following me on my Medium Blog :)


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.