Firebase: Real-Time Database Using Angular 4 and Ionic 3

Those who follow me on Twitter already know I’ve been working on a new mobile app using Firebase and Ionic 3 (Twitter: @socialtip_app, Facebook). I have several posts talking about Firebase and how to use almost all of 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 with an Angular 4/Ionic 3 mobile app and connect it to Firebase. This will be the first out of a series of posts 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 scratch. To do that we will need to install the Ionic CLI tool onto our machines. The installation of this tool is 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 to be installed as well, so you will need run this command too:  npm install -g cordova .

This tool will provide us with 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, you 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 the Ionic serve command.

Adding Angular Fire 2 and Firebase to Our Project

We already have the basics of our project, so it’s time to add the reference to Angular Fire 2 and Firebase. We will do this 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 that we have configured Firebase to our project 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 to include the database service in the provider's 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 database object, in particular, the list method. As you can see, we need to pass the path reference to this method and the return will be a 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 you will also find Ionic syntax is really similar to HTML so you won't have too much trouble).

<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 beginning of this post, I'm working on a mobile app (www.socialtipapp.com) which uses the whole Firebase toolbox: Real-Time Database, Authentication, Storage, Cloud Messages, Cloud Functions, and much more. Believe me guys, it's gonna be awesome.

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.