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

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

DZone's Guide to

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

In the first of this series of Firebase tutorials, we will learn how to simply create an Angular 4/Ionic 3 mobile app and connect it to Firebase with the Ionic CLI tool.

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

Those who follow me on Twitter already know I’ve been working on a new mobile app using Firebase and Ionic 3 (Twitter: @socialtip_appFacebook). 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.

ionic_screen.png

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.

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:
firebase ,mobile ,angular 4 ,ionic ,ionic framework ,mobile app development

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}