Firebase – Real-Time Database using Angular 4 + Ionic 3

What’s up guys, Eze is here. Those who follow me on Twitter (if you are not a follower you better do it now @skielo) already know I’ve been working on a new mobile app using Firebase and Ionic 3 (Twitter: @socialtip_app, Facebook). I have several post talking about Firebase and how to use almost all its functionalities from an AngularJS app, in case you missed it you can check it here. Today I want to show you how easy is to get up and running an Angular 4 / Ionic 3 mobile app and connect it to Firebase. This will be the first out of a series of post  where we are going to find out more about those tools.

The skeleton of our app

I want to show you first how to create a new Angular 4 / Ionic 3 mobile app from the scratch. To do that we will need to install in our machines the ionic cli tool. The installation of this tool it’s really simple we just need run the following command npm install -g ionic. Please be sure you have a node version higher than 4 because it’s a requirement for this tool to run. In addition to this we will require Cordova installed as well so you will need run this command too npm install -g cordova.

This tool will provide us lots of functionalities that we are going to use during the development of our app but first we need to create the scaffolding of our app, by executing the following command ionic start app_name blank –v2 the Ionic cli will create a new Angular 4 / Ionic 3 app. The parameter blank indicates to the cli that we want to use a blank template and the parameter –v2 indicates we want a version 2 app if you don’t include this the cli will create an AnguarJs app. We can see our app running by executing ionic serve command.

ionic_screen.png

Adding Angular Fire 2 and Firebase to our project

We already have the basics of our project it’s time to add the reference to Angular Fire 2 and Firebase and we will do it by running the following command inside our project folder  npm install angularfire2 firebase –save. This command is going to install all the necessary files in our project. So now it’s time to dive into our app.module.ts in order to configure our Firebase project. First we need import AngularFireModule and then export the configuration we get from Firebase.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Databaseservice } from "../providers/databaseservice";
import { AngularFireModule } from "angularfire2";

export const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
storageBucket: '',
messagingSenderId: ''
};

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Databaseservice
]
})

export class AppModule {}

Creating a Database layer

Now we have configured Firebase to our project so it’s time to create our database layer in order to have access to our database. Again we are going to use Angular cli by typing ionic generate provider databaseservice. This time the command is going to generate a new service but you need to take care of something else which is include the database service in the providers Array in order to allow Angular to inject this new service so we need to add it  in the AppComponent as I did below.

 

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseObjectObservable, AngularFireAuth, FirebaseListObservable } from 'angularfire2';

@Injectable()

export class Databaseservice {
   constructor(private_af: AngularFire) {
   }

   publiclistAccounts(): FirebaseListObservable<any[]>{
      returnthis._af.database.list('/accounts');
   }
}

And that’s it, after doing that we are ready to go. This AngularFire object will give us access to all Firebase functionality. In this example I’m using the databaseobject in particular the list method. As you can see we need pass the path reference to this method and the return will be an FirebaseListObservable object that will let us work with our database.

Using our Database layer

It’s now time to use our Database layer. As I did before I’ll inject it directly using the constructor and for the sake of this demo I’ll call the method to get the data directly in the constructor as well.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Databaseservice } from "../../providers/databaseservice";
import { FirebaseListObservable } from "angularfire2";

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})

export class HomePage {
 accounts:FirebaseListObservable<any[]>
 constructor(publicnavCtrl: NavController, publicdb: Databaseservice) {
   this.accounts = this.db.listAccounts();
 }
}
To complete our view I’ll use the Ionic list component. This component is a mobile like formatted list and as you can see we use the same Angular syntax and also you will find Ionic syntax is really similar to Html so you won’t have too much troubles.
<ion-header>
   <ion-navbar>
      <ion-title>
         List test
       </ion-title>
   </ion-navbar>
</ion-header>

<ion-content padding>
    This is just a list test.
    <ion-list>
      <ion-item class="text" *ngFor="let item of accounts | async">
         {{item.$value}}
      </ion-item>
   </ion-list>
</ion-content>

If you want to see the full code working together I have a working example here. As I told you at the begging of this post I’m working on a mobile app (www.socialtipapp.com) which use the whole Firebase toolbox: Real-Time Database, Authentication, Storage, Cloud Messages, Cloud Functions and much more. Believe guys it’s gonna be awesome.

IMG_2164

For a complete reference of Angular Fire 2 use this link.

For a complete reference of Firebase use this link

For a complete reference of Ionic 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 and as always thank you for reading.