Cách sử dụng truy vấn Firebase phức tạp trong Angular
Giải quyết lỗi ‘truy vấn yêu cầu lập chỉ mục’ và làm cho các truy vấn Firebase của bạn hoạt động hài hòa với ứng dụng Angular của bạn.
Một trong những tính năng của Firebase là bạn có thể tạo cơ sở dữ liệu NoSQL được lưu trữ trên đám mây. Bạn cũng có thể tích hợp cơ sở dữ liệu này vào các ứng dụng mà bạn phát triển và bạn có thể lưu trữ, cập nhật và xóa dữ liệu bên trong cơ sở dữ liệu.
Bạn cũng có thể truy vấn cơ sở dữ liệu Firebase từ ứng dụng Angular của mình. Firebase yêu cầu bạn lập chỉ mục các tổ hợp trường cho một truy vấn sử dụng nhiều trường. Điều này cho phép Firebase dễ dàng tra cứu chúng khi bạn gọi truy vấn vào một thời điểm khác.
Mục Lục
Thiết lập ứng dụng Angular và cơ sở dữ liệu Firebase của bạn
Trước khi viết các truy vấn Firebase, bạn cần tạo ứng dụng Angular và Cơ sở dữ liệu Firebase. Bạn cũng sẽ cần phải định cấu hình ứng dụng Angular để kết nối với cơ sở dữ liệu của bạn.
- Nếu bạn không có ứng dụng Angular hiện có, bạn có thể sử dụng ng mới lệnh để tạo một dự án mới với tất cả các tệp Angular cần thiết.
ng new new-angular-app - Tạo Cơ sở dữ liệu Firebase mới cho ứng dụng Angular bằng cách đăng nhập vào Firebase và làm theo lời nhắc để tạo dự án Firebase mới.
- Trong Cơ sở dữ liệu Cloud Firestore mới của bạn, hãy tạo hai bộ sưu tập (còn được gọi là bảng) cho một “Sản phẩm” và “Nhà cung cấp”. Một nhà cung cấp có thể cung cấp nhiều sản phẩm. Mỗi sản phẩm cũng được kết nối với nhà cung cấp bằng cách sử dụng trường “providerId”.
- Nhập dữ liệu sau vào bảng “Sản phẩm”. Nhập các trường tên, productId và nhà cung cấpId dưới dạng chuỗi. Nhập giá và các trường InStock dưới dạng số.
ID tài liệu Lĩnh vực product1 - tên: “Ribbons”
- giá: 12,99
- inStock: 10
- productId: “P1”
- nhà cung cấpId: “S1”
product2 - tên: “Bóng bay”
- giá: 1,5
- inStock: 2
- productId: “P2”
- nhà cung cấpId: “S1”
product3 - tên: “Giấy”
- giá: 2,99
- inStock: 20
- productId: “P3”
- nhà cung cấpId: “S1”
product4 - tên: “Bảng”
- giá: 199
- inStock: 1
- productId: “P4”
- nhà cung cấpId: “S2”
Dưới đây là một ví dụ cho thấy điều này sẽ trông như thế nào:
- Nhập dữ liệu sau vào bảng “Nhà cung cấp”. Nhập tất cả các trường dưới dạng chuỗi.
ID tài liệu Lĩnh vực nhà cung cấp1 - tên: “Nhà cung cấp hàng thủ công và mỹ nghệ”
- địa điểm: “California, Hoa Kỳ”
- nhà cung cấpId: “S1”
nhà cung cấp2 - tên: “Bàn tuyệt vời”
- địa điểm: “Sydney, Australia”
- nhà cung cấpId: “S2”
Đây là mục nhập nhà cung cấp1 sẽ trông như thế nào:
- Cài đặt góc cạnh / lửa vào ứng dụng của bạn.
npm i @angular/fire - Trong Firebase, hãy mở Thiết lập dự án. Nhấp vào biểu trưng dấu ngoặc nhọn để thêm Firebase vào ứng dụng Angular của bạn.
- Firebase sẽ cung cấp cho bạn chi tiết cấu hình mà bạn có thể sử dụng để kết nối ứng dụng Angular của mình với Cơ sở dữ liệu Firebase.
- Thay thế nội dung trong môi trường / môi trường.ts với đoạn mã sau. Bạn sẽ cần thay đổi các giá trị trong firebaseConfig. Thay đổi những điều này để phù hợp với cấu hình mà Firebase đã cung cấp cho bạn ở bước trước.
export const environment = {
production: false,
firebaseConfig: {
apiKey: "AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM",
authDomain: "muo-firebase-queries.firebaseapp.com",
projectId: "muo-firebase-queries",
storageBucket: "muo-firebase-queries.appspot.com",
messagingSenderId: "569911365044",
appId: "1:569911365044:web:9557bfef800caa5cdaf6e1"
}
}; - Nhập môi trường từ bên trên, cùng với các mô-đun Angular Firebase vào src / app / app.module.ts.
import { environment } from "../environments/environment";
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from "@angular/fire/compat/firestore"; - Thêm mô-đun Firebase vào mảng nhập:
AngularFirestoreModule,
AngularFireModule.initializeApp(environment.firebaseConfig)
Cách viết một truy vấn Firebase phức tạp trong một tệp dịch vụ
Bạn có thể truy vấn các bảng trong cơ sở dữ liệu Firebase của mình bằng cách sử dụng tệp dịch vụ.
- Tạo một thư mục mới có tên là “dịch vụ”. Bên trong thư mục, tạo một tệp mới có tên “service.ts”.
- Thêm nhập, hàm tạo và lớp AngularFirestore vào tệp.
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
@Injectable({
providedIn: 'root'
})
export class Service {
constructor(private db: AngularFirestore) { }
} - Trong ví dụ truy vấn này, liệt kê các sản phẩm dựa trên tên của Nhà cung cấp. Ngoài ra, lọc danh sách để chỉ hiển thị mặt hàng có số lượng tồn kho thấp nhất. Vì Firebase không phải là một Cơ sở dữ liệu hợp lý, chúng tôi sẽ cần truy vấn hai bảng riêng biệt bằng cách sử dụng nhiều hơn một truy vấn.
- Để làm điều này, hãy tạo một hàm mới có tên getSupplier (), để xử lý truy vấn đầu tiên. Hàm sẽ trả về hàng trong bảng “Nhà cung cấp” khớp với tên.
getSupplier(name: string) {
return new Promise<any>((resolve)=> {
this.db.collection('Supplier', ref => ref.where('name', '==', name)).valueChanges().subscribe(supplier => resolve(supplier))
})
} - Tạo một hàm khác được gọi là getProductsFromSupplier (). Truy vấn này truy vấn cơ sở dữ liệu cho Sản phẩm được liên kết với một nhà cung cấp cụ thể. Ngoài ra, truy vấn cũng sắp xếp các kết quả theo trường “inStock” và chỉ hiển thị bản ghi đầu tiên trên danh sách. Nói cách khác, nó sẽ trả lại sản phẩm cho một nhà cung cấp cụ thể, với số lượng “inStock” thấp nhất.
getProductsFromSupplier(supplierId: string) {
return new Promise<any>((resolve)=> {
this.db.collection('Product', ref => ref.where('supplierId', '==', supplierId).orderBy('inStock').startAt(0).limit(1)).valueChanges().subscribe(product => resolve(product))
})
} - bên trong src / app / app.component.ts tệp, nhập dịch vụ.
import { Service } from 'src/app/services/service'; - Thêm một phương thức khởi tạo bên trong lớp AppComponent và thêm dịch vụ vào phương thức khởi tạo.
constructor(private service: Service) { } - Tạo một chức năng mới được gọi là getProductStock(). Chức năng này sẽ in sản phẩm có số lượng tồn kho thấp nhất mà một nhà cung cấp cụ thể cung cấp. Đảm bảo gọi hàm mới trong ngOnInit () và khai báo một biến để lưu trữ kết quả.
products: any;
ngOnInit(): void {
this.getProductStock();
}
async getProductStock() {}
- Bên trong getProductStock () , sử dụng hai truy vấn từ tệp dịch vụ. Sử dụng truy vấn đầu tiên để lấy hồ sơ của nhà cung cấp dựa trên tên. Sau đó, sử dụng nhà cung cấpId làm đối số cho truy vấn thứ hai, truy vấn này sẽ tìm sản phẩm từ nhà cung cấp đó, với số lượng tồn kho thấp nhất.
let supplier = await this.service.getSupplier('Arts and Crafts Supplier');
this.products = await this.service.getProductsFromSupplier(supplier[0].supplierId); - Xóa nội dung trong src / app / app.component.html và thay thế nó bằng tệp sau:
<h2> Products with lowest stock from "Arts and Crafts Supplier" </h2>
<div *ngFor="let item of products">
<p> Name: {{item.name}} </p>
<p> Number in stock: {{item.inStock}} </p>
<p> Price: ${{item.price}} </p>
</div> - Chạy ứng dụng trong trình duyệt web bằng cách sử dụng ng phục vụ yêu cầu.
ng serve - Mở trang web của bạn bằng bất kỳ trình duyệt web nào. Theo mặc định, Angular lưu trữ ứng dụng tại localhost: 4200.
- Dữ liệu của bạn sẽ không hiển thị trên màn hình một cách chính xác. Nhấp chuột phải vào trang web và nhấp vào Quan sát để mở các công cụ dành cho nhà phát triển của trình duyệt của bạn.
- Điều hướng đến Bảng điều khiển chuyển hướng. Một lỗi sẽ hiển thị để cho bạn biết rằng truy vấn sẽ yêu cầu một chỉ mục.
Cách tạo chỉ mục tổng hợp cho truy vấn của bạn
Firebase tạo chỉ mục cho các truy vấn có thể chứa nhiều trường. Theo tài liệu Firebase, điều này hoạt động như một bản đồ để Firebase có thể tra cứu vị trí của các trường có trong truy vấn.
- Trong bảng điều khiển, nhấp vào liên kết hiển thị lỗi.
- Đăng nhập vào tài khoản Firebase của bạn.
- Một lời nhắc sẽ hiển thị yêu cầu bạn tạo chỉ mục cho truy vấn Firebase. Bấm vào Tạo chỉ mục.
- Firebase sẽ lập chỉ mục các trường mà truy vấn của bạn sử dụng. Chờ trong vài phút cho đến khi trạng thái chuyển từ “Tòa nhà” thành “Đã bật”.
- Làm mới trình duyệt web của bạn. Truy vấn sẽ chạy và trả về kết quả chính xác trên trang chủ. Nếu bạn mở trình gỡ lỗi bảng điều khiển bằng các công cụ dành cho nhà phát triển của trình duyệt, lỗi sẽ không còn nữa.
Truy vấn cơ sở dữ liệu Firebase của bạn
Firebase cho phép bạn tạo cơ sở dữ liệu NoSQL trên đám mây. Sau đó, bạn có thể tích hợp cơ sở dữ liệu đó vào các ứng dụng Angular mà bạn đang phát triển. Bạn có thể tạo các loại truy vấn khác nhau để lưu trữ, cập nhật hoặc xóa dữ liệu. Bạn cũng có thể tạo một truy vấn sử dụng nhiều trường cùng một lúc.
Khi bạn tạo một truy vấn sử dụng nhiều trường, việc cố gắng chạy nó sẽ tạo ra lỗi. Bạn sẽ cần lập chỉ mục kết hợp trường được sử dụng trong truy vấn để Firebase có thể dễ dàng tra cứu bất cứ khi nào bạn chạy truy vấn.
Bạn cũng có thể tìm hiểu về các cách khác để thiết lập Cơ sở dữ liệu NoSQL, chẳng hạn như cách thiết lập cơ sở dữ liệu bằng MongoDB.