Ionic和Firebase集成

Firebase是用于移动和Web应用程序开发平台的流行工具。它提供了许多服务来帮助你构建快速和高质量的应用程序, 而无需管理基础结构。该平台最初由Firebase, Inc.在2011年开发, 然后于2014年被Google收购。它是一个功能强大的数据库即服务（DBaaS）解决方案, 它提供了可扩展的云数据库来为客户端存储和同步数据。和服务器端开发。 Firebase是一种免费增值模型, 而不是开源模型。但是, 你可以免费使用其服务, 直到你不超过其免费套餐的限制。

在本节中, 我们将学习如何使用AngularFire包在Ionic Framework中创建CRUD（创建, 读取, 更新和删除）应用程序, 以将我们的应用程序连接到Firebase。让我们逐步了解Firebase的Ionic应用程序。

步骤1：创建一个新项目。你可以从此处了解如何在Ionic 4中创建项目。如果你已经有一个Ionic项目, 则可以跳过此步骤。

步骤2：接下来, 导航至项目并使用以下命令安装AngularFire插件。 AngularFire插件负责将Ionic应用程序传达给Firebase项目。

$ cd myApp  
$ npm install firebase @angular/fire

步骤3：使用以下命令在pages文件夹下创建一个页面todoDetails。

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

步骤4：使用以下命令在services文件夹下创建一个服务页面。 AngularFire服务是一个提供程序, 可保持与Firebase和你的项目的交互。

$ ionic g service services/todo

步骤5：安装AngularFire插件后, 你将需要在Firebase中创建一个新项目。要创建项目, 请转到firebase控制台, 在创建项目后, 你可以在其中看到以下屏幕。

步骤6：在src / environment.ts文件中指定以下凭据, 以将Ionic应用程序与Firebase应用程序进行通信。对于Firebase控制台上的其他项目, 凭据将始终是不同的。

环境

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

要找到上述凭据, 请转到Firebase应用程序设置->常规->你的应用程序->配置。

步骤7：打开app.module.ts文件, 并导入以下AngularFireModule, AngularFirestoreModule和Environment, 可以在下面的代码片段中看到它们。

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 {}

步骤8：我们也想使用Firestore。为此, 请转到Firebase控制台->数据库-> Cloud FireStore。你将看到以下图像。

步骤9：接下来, 我们需要在Firebase项目中启用身份验证。为此, 请转到验证->登录方法->匿名->启用。

步骤10：现在我们需要做的最后一件事是设置路由信息。因此, 将路由信息更改为app-routing.module.ts文件。在此文件中, 页面和模块已自动添加为以下代码段。

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 { }

步骤11：现在, 打开todo.service.ts文件并插入以下代码。服务页面存储对todo集合的引用, 该引用基本上是指向Firestore数据库的链接。通过服务连接, 我们可以接收有关当前文档的所有信息, 还可以添加, 更新和删除文档。

另外, 我们需要在snapshotChanges函数中使用map()块。此功能负责数据库上所有类型的数据更改以及访问文档的ID。

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();
  }
}

步骤12：现在, 我们需要显示Firestore集合列表。打开todo-list.page.ts文件, 并插入以下代码段。该应用程序的第一页是一个列表, 其中显示了馆藏的所有文档。

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();
  }
}

步骤13：要创建一个新列表, 我们添加了一个FAB按钮, 并通过将路径与todo对象的ID相结合, 为我们的商品构建了一个路由器链接。因此, 打开todo.list.page.html文件并插入以下代码。

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

步骤14：打开todo-details.page.ts文件并插入以下代码。该文件包含对Firebase文档执行CRUD操作的逻辑。

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());
  }

}

第15步：打开todo-details.page.html文件并插入以下代码。它显示应用程序的UI, 该UI将存储在Firebase数据库中。

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

步骤16：现在, 你可以运行你的应用程序。它将给出以下结果。

如果你想观察数据库的实时运行情况, 请在一个选项卡中打开Firebase控制台, 在另一个选项卡中打开你的应用程序, 如下面的屏幕所示。

现在, 单击UI右下角的“添加”按钮, 你将获得以下结果。

在此页面上, 在“名称和注释”字段中填写详细信息。之后, 检查你的Firebase数据库将要存储在哪里。例如, 我们按照下面的说明填写了详细信息, 然后单击添加按钮。出现以下输出。

名字= Abhishek

注意= Firebase是用于移动和Web应用程序开发平台的流行工具。

相应的Firebase控制台数据库如下图所示。

同样, 如果要删除数据库, 请在应用程序中单击Abhishek。应显示以下页面。

如果单击删除按钮, 以下数据库将被删除。接下来, 如果要更新数据库, 则更改所需的字段, 然后单击“更新”按钮。现在, 检查数据库。你会发现你的数据库已更新。可以在下图中看到。