Ionic Firebase - 芒果文档

📌 相关文章

📜 Ionic Firebase

📅 最后修改于: 2021-01-03 05:08:04 🧑 作者: Mango

ionic 火力基地

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项目中启用身份验证。为此，转到Authentication->登录方法-> Anonymous-> Enabled 。

步骤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;
  private todoCollection: AngularFirestoreCollection;

  constructor(private db: AngularFirestore) {
    this.todoCollection = this.db.collection('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 {
    return this.todos;
  }

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

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

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

  deleteTodo(id: string): Promise {
    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;
  constructor(private todoService: TodoService) { }
  ngOnInit() {
    this.todos = this.todoService.getTodos();
  }
}

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


  
    My List
  



  
    
      
    
  

  
    
      {{ todo.name}}

步骤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数据库中。


  
    Todo Details
  



  
    Name
    
  
     
  
    Notes
    
  


    
      
        
        Add Todo
      
    
  
   
  
    
      
        
          
          Delete
        
      
      
        
          
          Update

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

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

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

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

名字= Abhishek

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

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

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

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