Ionic Firebase

2025年3月17日 | 阅读 7 分钟

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 和您的项目的交互。

步骤 5： 安装 AngularFire 插件后，您需要在 Firebase 中创建一个新项目。要创建一个项目，请转到 Firebase 控制台，在那里您可以在创建项目后看到以下屏幕。

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

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

要找到上面的凭据，请转到 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： 现在，您可以运行您的应用程序。它将给出以下结果。