Sử dụng Cloud Firestore trong Angular với AngularFire

Learn how to interface with the new Cloud Firestore database in Angular 2+ using the AngularFire2 library.

Cloud Firestore vừa được công bố là một database mới để lấp đầy khoảng trống mà database thời gian thực của Firebase có thể không phải là công cụ tốt nhất. Cloud Firestore là một NoSQL, database dựa trên tài liệu. Tại folder root của database là tập hợp (ví dụ: todos, người sử dụng, các file) và bộ sưu tập chỉ có thể chứa tài liệu. Tài liệu chứa các cặp key-value và có thể chứa các bộ sưu tập của riêng chúng, được gọi là bộ sưu tập con . Do đó, điều này giúp dễ dàng hơn trong việc xây dựng các ứng dụng có nhu cầu phân cấp phức tạp hơn so với cây JSON phẳng được cung cấp với database thời gian thực Firebase truyền thống.

Dưới đây là những điều cơ bản của việc sử dụng tương tác với Cloud Firestore trong dự án Angular 2+. Bạn cần có tài khoản Firebase và để kích hoạt database mới.

Cài đặt

Đầu tiên, hãy cài đặt các gói Firebase cần thiết ( firebase & anglefire2 ) vào dự án Angular của bạn:

$ yarn add firebase angularfire2

# or, using npm:
$ npm install firebase angularfire2

Và sau đó thêm cả AngularFireModule và AngularFirestoreModule vào module ứng dụng của bạn:

app.module.tsc

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

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

Lưu ý ta gọi phương thức enablePersistence trên AngularFirestoreModule để tự động bật bộ nhớ đệm local trên Chrome, Safari và Firefox, điều này sẽ cho phép ứng dụng luôn khả dụng khi offline .

Và với điều này, cấu hình ứng dụng Firebase của bạn sẽ nằm trong file enviroment.ts như sau:

/enviroments/enviroment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'your-project-id.firebaseapp.com',
    databaseURL: 'https://your-project-id.firebaseio.com',
    projectId: 'your-project-id',
    storageBucket: 'your-project-id.appspot.com',
    messagingSenderId: 'XXXXXXXXXXXX'
  }
};

Cách sử dụng cơ bản

Bây giờ ứng dụng của ta đã được cấu hình với Firebase, ta có thể bắt đầu thử nghiệm với database . Ta sẽ chứng minh một vài trong số các hoạt động CRUD xung quanh ý tưởng của một ứng dụng todo đơn giản có chứa một bộ sưu tập và các văn bản todos trong đó bộ sưu tập có chứa một mô tả và một lĩnh vực hoàn thành.

Trước tiên, bạn cần đưa AngularFirestore có thể tiêm vào thành phần của bạn :

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';

@Component({ ... })
export class AppComponent {
  constructor(private afs: AngularFirestore) {
    // ...
  }
}

Để có quyền truy cập vào một bộ sưu tập, bạn tạo một tham chiếu đến bộ sưu tập đó bằng thông tin như sau:

this.todoCollectionRef = this.afs.collection('todos'); // a ref to the todos collection

Việc tạo tham chiếu đến tập hợp không thực hiện bất kỳ lệnh gọi mạng nào và an toàn khi tham chiếu các tập hợp không tồn tại, vì tập hợp sẽ được tạo tự động nếu cần. Một bộ sưu tập không có bất kỳ tài liệu nào cũng sẽ tự động bị xóa.

Sau đó, bạn có thể nghe các thay đổi trên tài liệu của bộ sưu tập bằng cách gọi valueChanges () trên tham chiếu bộ sưu tập:

this.todo$ = this.todoCollectionRef.valueChanges();

Phương thức valueChanges trả về một tài liệu có thể quan sát được trong bộ sưu tập. Ngoài ra còn có một snapshotChanges , phương thức cũng trả về id cũng như metadata về tài liệu của ta . Đọc tiếp một ví dụ bằng cách sử dụng snapshotChanges để thay thế.

Dưới đây là do bắt đầu ứng dụng todo của ta , sẽ nhận được các tài liệu bên trong bộ sưu tập todos từ database :

app.component.ts

import { Component } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection
} from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
export interface Todo {
  description: string;
  completed: boolean;
}
@Component({ ... })
export class AppComponent {
  todoCollectionRef: AngularFirestoreCollection<Todo>;
  todo$: Observable<Todo[]>;

Và ta có thể hiển thị các mục việc cần làm của bạn trong mẫu với một cái gì đó đơn giản như sau:

app.component.html

<ul>
  <li *ngFor="let todo of todo$ | async"
      [class.completed]="todo.completed">
    {{ todo.description }}
  </li>
</ul>

Thêm mặt hàng

Để thêm một tài liệu mới vào một bộ sưu tập, chỉ cần gọi thêm vào tham chiếu bộ sưu tập:

addTodo(todoDesc: string) {
  if (todoDesc && todoDesc.trim().length) {
    this.todoCollectionRef.add({ description: todoDesc, completed: false });
  }
}

Nhờ tham chiếu bộ sưu tập todo của ta được nhập vào giao diện Todo của ta , trình biên dịch TypeScript sẽ biết hình dạng của dữ liệu sẽ được chuyển bằng cách sử dụng phương thức add .

Cập nhật và xóa các mục

Để cập nhật hoặc xóa một tài liệu trong bộ sưu tập, ta cũng cần id của tài liệu, id này không được trả về với phương thức valueChanges . Ta sẽ thay đổi cách triển khai của bạn một chút để sử dụng phương thức snapshotChanges và cũng bao gồm id cho mỗi tài liệu việc làm:

app.component.ts

import { Component } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection
} from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
export interface Todo {
  id?: string;
  description: string;
  completed: boolean;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todoCollectionRef: AngularFirestoreCollection<Todo>;
  todo$: Observable<Todo[]>;

Ta lập bản đồ trên những gì có thể quan sát được trả về bởi snapshotChanges để extract id của tài liệu cùng với dữ liệu của nó.

Các hành động được trả về bởi snapshotChanges thuộc loại DocumentChangeAction và chứa một loại và một trọng tải . Loại được thêm , sửa đổi hoặc loại bỏ và tải trọng chứa id, metadata và dữ liệu của tài liệu.

Với điều này tại chỗ, mọi thứ vẫn hoạt động như cũ và giờ đây ta có thể dễ dàng thực hiện cập nhật và xóa các tài liệu cần làm cũng như các thay đổi được phản ánh ngay lập tức vào mẫu của ta :

app.component.ts (một phần)

updateTodo(todo: Todo) {
  this.todoCollectionRef.doc(todo.id).update({ completed: !todo.completed });
}

deleteTodo(todo: Todo) {
  this.todoCollectionRef.doc(todo.id).delete();
}

Học nhiều hơn nữa

Tham khảo repo Github của AngularFire2 và tài liệu Cloud Firestore để tìm hiểu thêm về API và các phương pháp có sẵn.
Xem bài đăng này của ta để tìm hiểu về cách sử dụng database thời gian thực Firebase trong Angular.

Tags:

Các tin liên quan