Ionic和Firebase集成 _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 = http://www.srcmini.com/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：现在, 你可以运行你的应用程序。它将给出以下结果。