[Tutorial]: Ionic Tutorials (Ionic and firebase integration: Understanding the concept)

image source
Repository: Ionic Github Repository

Software Requirements:
Visual Studio Code(Or any preferred code editor)

What you will learn:
In this tutorial you would learn about intergrating firebase into an ionic project covering the following concepts

• How to integrate firebase into an ionic project.
• The packages you would need for this
• Common problems faced when integrating

Difficulty: Intermediate

Tutorial
In this tutorial i would be walking you through how to properly integrate firebase into an ionic application which was quite a hectic task for me as my packages were getting mixed up and the official documentation is deprecated.

So lets get to it

What is firebase
Firebase is a google developed platform for the back-end of applications. It makes integration of authentication and storage way easier and helps manage servers regardless of where you application is being used. Firebase helps new developers who arent good at developing a back-end have an alternative that is better than hard-coding the back-end yourself.

What you will need to use firebase in your application.
When i tried using firebase for the first time, i went to the official documentation Here to try to integrate firebase into my application. When i tried this with my ionic 3 application. I couldn't compile my apk anymore and kept falling into a lot of errors while developing. I uninstalled the packages and plugins and found a solution to my problems which is stated below.

Startup
After you have created a firebase app Here

Make sure you have angular and ionic installed then run the following command to use firebase in you app.
While in you application
Choose webapp as you choice not ios while developing with ionic so this would be able to work in both ios and android applications.

Next comes the tricky part.
The reason that i had problems with firebase is that the latest releases changed the way that the promise is resolved from each firebase function. So if you install the latest firebase like this

npm install angularfire2 firebase --save

You would be getting a ton of errors about how promises could not be resolved. In another tutorial i would be talking about how promises work and the the probable reason for this error, but for now use this command to prevent that version error.

npm install angularfire2 firebase promise-polyfill --save

Firebase cannot be used singularly so it is used with angularfire2 which is the package for using firebase in webapps.
The next thing is linking the application to your project.
Head to you app.module.ts file.
When you choose the webapp choice for your application firebase you should get a variable like this.

export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

Note: I changed it from a variable to a constant before adding it to my app.module.ts file.

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';

//These three imports help you get across to the firebase database and user authentication
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';

export const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "your-domain-name.firebaseapp.com",
  databaseURL: "https://your-domain-name.firebaseio.com",
  storageBucket: "your-domain-name.appspot.com",
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),//This is where you initialize firebase in your application
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AngularFireDatabase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

This is the app.module.ts file for a blank starter ionic template generated with this command

ionic start FirebaseIntegration blank

Also take note of the three import at the beginning of the file and where i initiated the app as shown by the comments.
In the next tutorial of this series, i'd be getting into user authentication and database storage using firebase.

To find the code for the app.module.ts file as used in firebase you could head to my Github

See you in the next tutorial