Ionic Firebase

Firebase is a popular tool for mobile and web app development platform. It provides many services to help you in building fast and high-quality apps without managing infrastructure. Initially, this platform was developed by Firebase, Inc. in 2011, and then it was acquired by Google in 2014. It is a powerful Database as a Service (DBaaS) solution, which provides a scalable cloud database to store and sync data for client and server-side development. Firebase is a type of freemium model, not an open-source model. However, you can use its services free until you don't pass the limits of its free tier.

In this section, we are going to learn how to create CRUD (Create, Read, Update, and Delete) applications in Ionic Framework using the AngularFire package to connect our app to Firebase. Let us see step by step to the Ionic app with Firebase.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here. You can skip this step if you already had an Ionic project.

Step 2: Next, navigate to the project and install the AngularFire plugin using the below command. The AngularFire plugin is responsible for communicating the Ionic application to the Firebase project.

$ cd myApp  
$ npm install firebase @angular/fire

Step 3: Create a page todoDetails under the pages folder by using the following command.

$ ionic g page pages/todoDetails
$ ionic g page pages/todoList

Step 4: Create a service page under the services folder by using the following command. The AngularFire service is a provider, which keeps the interaction with the Firebase and your project.

Step 5: Once the AngularFire plugin has been installed, you will need to create a new project in Firebase. To create a project, go to the firebase console, where you can see the following screen after creating the project.

Step 6: Specify the following credential into the src/environment.ts file to communicate your Ionic application with the Firebase app. The credentials will always be different for a different project on the Firebase console.

Environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'AIzaSyALmSXjELPA-_nJkN8s9i47AqxCiZT3ULc',
    authDomain: 'myapp-55340.firebaseapp.com',
    databaseURL: 'https://myapp-55340.firebaseio.com',
    projectId: 'myapp-55340',
    storageBucket: 'myapp-55340.appspot.com',
    messagingSenderId: '498465216710',
    appId: '1:498465216710:web:ed5a716e7fa29f1cb19fc7'
  }
};

To find the above credential go to the Firebase app Setting->General->Your Apps->Config.

Step 7: Open the app.module.ts file and import the following AngularFireModule, AngularFirestoreModule, and Environment, which can be seen in the below code snippets.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AngularFireModule } from '@angular/fire';
import { FirestoreSettingsToken, AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
  AngularFireModule.initializeApp(environment.firebase),
  AngularFirestoreModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    { provide: FirestoreSettingsToken, useValue: {} }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 8: We also want to use the Firestore. For this, go to the Firebase Console->Database->Cloud FireStore. You will see the following image.

Step 9: Next, we need to enable the authentication in your Firebase project. For this, go to the Authentication-> Sign-in method->Anonymous->Enabled.

Step 10: The last thing we need now is to set-up the routing information. Therefore, change the routing information into the app-routing.module.ts file. In this file, the pages and modules have been added automatically as below code snippets.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './pages/todo-list/todo-list.module#TodoListPageModule' },
  { path: 'details', loadChildren: './pages/todo-details/todo-details.module#TodoDetailsPageModule' },
  { path: 'details/:id', loadChildren: './pages/todo-details/todo-details.module#TodoDetailsPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 11: Now, open the todo.service.ts file and insert the following code. The service page store a reference to the todo collection, which is basically a link to the Firestore database. The service connection allows us to receive all information about the current documents as well as allows us to add, update, and delete documents.

Also, we need to use a map() block in the snapshotChanges function. This function is responsible for all types of data changes on the database as well as for accessing the id of the document.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFirestoreCollection, AngularFirestore, DocumentReference } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';

export interface Todo {
  id?: string;
  name: string;
  notes: string;
}

@Injectable({
  providedIn: 'root'
})

export class TodoService {

  private todos: Observable<Todo[]>;
  private todoCollection: AngularFirestoreCollection<Todo>;

  constructor(private db: AngularFirestore) {
    this.todoCollection = this.db.collection<Todo>('todos');
    this.todos = this.todoCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
  }

  getTodos(): Observable<Todo[]> {
    return this.todos;
  }

  getTodo(id: string): Observable<Todo> {
    return this.todoCollection.doc<Todo>(id).valueChanges().pipe(
      take(1),
      map(todo => {
        todo.id = id;
        return todo;
      })
    );
  }

  addTodo(todo: Todo): Promise<DocumentReference> {
    return this.todoCollection.add(todo);
  }

  updateTodo(todo: Todo): Promise<void> {
    return this.todoCollection.doc(todo.id).update({ name: todo.name, notes: todo.notes });
  }

  deleteTodo(id: string): Promise<void> {
    return this.todoCollection.doc(id).delete();
  }
}

Step 12: Now, we need to display the Firestore Collection List. Open the todo-list.page.ts file and insert the following code snippet. The first page of the app is a list, which shows all the documents of the collection.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Todo, TodoService } from 'src/app/services/todo.service';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.page.html',
  styleUrls: ['./todo-list.page.scss'],
})
export class TodoListPage implements OnInit {
  public todos: Observable<Todo[]>;
  constructor(private todoService: TodoService) { }
  ngOnInit() {
    this.todos = this.todoService.getTodos();
  }
}

Step 13: To create a new List, we have added a FAB button and construct a router link for our items by combining the path with the id of the todo object. So, open the todo.list.page.html file and insert the following code.

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>My List</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button routerLink="/todo">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <ion-list>
    <ion-item button [routerLink]="['./todo', todo.id]" *ngFor="let todo of ( todos | async)">
      {{ todo.name}}
    </ion-item>
  </ion-list>

</ion-content>

Step 14: Open the todo-details.page.ts file and insert the following code. This file contains a logic to perform the CRUD operation with a Firebase document.

import { Component, OnInit } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { Router, ActivatedRoute } from '@angular/router';
import { TodoService, Todo } from 'src/app/services/todo.service';

@Component({
  selector: 'app-todo-details',
  templateUrl: './todo-details.page.html',
  styleUrls: ['./todo-details.page.scss'],
})
export class TodoDetailsPage implements OnInit {

  todo: Todo = {
    name: '',
    notes: ''
  };

  constructor(private activatedRoute: ActivatedRoute, private todoService: TodoService,
              private toastCtrl: ToastController, private router: Router) { }

  ngOnInit() { }

  ionViewWillEnter() {
    const id = this.activatedRoute.snapshot.paramMap.get('id');
    if (id) {
      this.todoService.getTodo(id).subscribe(todo => {
        this.todo = todo;
      });
    }
  }

  addTodo() {
    this.todoService.addTodo(this.todo).then(() => {
      this.router.navigateByUrl('/');
      this.showToast('todo added');
    }, err => {
      this.showToast('There was a some problem in adding your todo :(');
    });
  }

  deleteTodo() {
    this.todoService.deleteTodo(this.todo.id).then(() => {
      this.router.navigateByUrl('/');
      this.showToast('todo deleted');
    }, err => {
      this.showToast('There was a some problem in deleting your todo :(');
    });
  }

  updateTodo() {
    this.todoService.updateTodo(this.todo).then(() => {
      this.showToast('todo updated');
    }, err => {
      this.showToast('There was a some problem in updating your todo :(');
    });
  }

  showToast(msg) {
    this.toastCtrl.create({
      message: msg,
      duration: 2000
    }).then(toast => toast.present());
  }

}

Step 15: Open the todo-details.page.html file and insert the following code. It displays the UI of the app, which is going to store in the Firebase database.

<ion-header>
  <ion-toolbar>
    <ion-title>Todo Details</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label position="stacked">Name</ion-label>
    <ion-input [(ngModel)]="todo.name"></ion-input>
  </ion-item>
     
  <ion-item>
    <ion-label position="stacked">Notes</ion-label>
    <ion-textarea [(ngModel)]="todo.notes" rows="6"></ion-textarea>
  </ion-item>
</ion-content>
<ion-footer *ngIf="!todo.id">
    <ion-toolbar color="success">
      <ion-button expand="full" color="light"  fill="clear" (click)="addTodo()">
        <ion-icon name="checkmark" slot="start"></ion-icon>
        Add Todo
      </ion-button>
    </ion-toolbar>
  </ion-footer>
   
  <ion-footer *ngIf="todo.id">
    <ion-row no-padding text-center>
      <ion-col size="6">
        <ion-button expand="block" color="danger" fill="outline" (click)="deleteTodo()">
          <ion-icon name="trash" slot="start"></ion-icon>
          Delete
        </ion-button>
      </ion-col>
      <ion-col size="6">
        <ion-button expand="block" fill="solid" color="success" (click)="updateTodo()">
          <ion-icon name="save" slot="start"></ion-icon>
          Update
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-footer>

Step 16: Now, you can run your app. It will give the following result.

If you want to observe how your database is working in real-time, then open your Firebase Console in one tab and your app in another tab as below screen.

Now, click the Add button on the below right corner of the UI, you will get the following result.

On this page, fill the details on the Name and Notes field. After that, check your Firebase database where it will be going to store. For example, we have filled the details as given below and click on the add button. The following output appears.

Name = Abhishek

Notes = Firebase is a popular tool for mobile and web app development platform.

The corresponding Firebase Console database looks like the below image.

Again, if you want to delete the database, click on the Abhishek in your app. The following page should be displayed.

If you click the delete button, the following database will be deleted. Next, if you want to update the database, then change the field which you want and click on the Update button. Now, check the database. You will find that your database is updated. It can be seen in the following image.