Cách lưu trữ, cập nhật, xóa và truy xuất dữ liệu từ cơ sở dữ liệu Firebase bằng Angular
Firebase là một nền tảng cung cấp cho bạn vô số dịch vụ để hỗ trợ việc xây dựng và mở rộng ứng dụng. Một số tính năng này bao gồm dịch vụ lưu trữ, lưu trữ dữ liệu và khả năng theo dõi phân tích dữ liệu.
Hướng dẫn này chủ yếu tập trung vào cách tạo và thêm dữ liệu vào cơ sở dữ liệu Firebase cũng như cách thực hiện các thao tác tạo, đọc, ghi và xóa đối với cơ sở dữ liệu từ một ứng dụng Angular cục bộ.
Mục Lục
Cách tạo và thêm dữ liệu vào cơ sở dữ liệu Firebase
Giả sử bạn đã có một ứng dụng Angular được thiết lập và chạy cục bộ, ứng dụng này sẽ cần được kết nối với cơ sở dữ liệu Firebase để lưu trữ và truy cập dữ liệu. Nếu bạn chưa quen với Angular, bạn có thể đọc thêm về các khái niệm Angular, các thành phần và cấu trúc tổng thể của một dự án Angular.
Nếu bạn chưa có Cơ sở dữ liệu Firebase, bạn có thể sử dụng thông tin đăng nhập tài khoản Google của mình để đăng nhập vào Firebase và làm theo lời nhắc. Khi điều này được thiết lập, hãy tạo một dự án:
- Từ trang chủ của Firebase, hãy chọn Đi tới Bảng điều khiển ở góc trên bên phải của trang web.
- Trong “Dự án Firebase của bạn”, hãy chọn Thêm dự án.
- Làm theo lời nhắc để tạo một dự án mới.
- Sau khi hoàn thành, dự án sẽ mở. Ở phía bên trái của màn hình, có một bảng liệt kê các tính năng mà Firebase cung cấp. Di chuột qua các biểu tượng cho đến khi bạn thấy Cơ sở dữ liệu Firestorevà chọn nó.
- Lựa chọn Tạo nên cơ sở dữ liệu, và làm theo lời nhắc để tạo cơ sở dữ liệu.
- Khi chọn các quy tắc bảo mật, hãy chọn Bắt đầu ở chế độ thử nghiệm. Điều này có thể được thay đổi sau đó để đảm bảo dữ liệu được an toàn hơn. Bạn có thể đọc thêm về các quy tắc bảo mật của Firestore theo Tài liệu Firebase.
- Sau khi hoàn thành, cơ sở dữ liệu sẽ mở ra. Cấu trúc cơ sở dữ liệu sử dụng Bộ sưu tập, về cơ bản có khái niệm giống như bảng cơ sở dữ liệu. Ví dụ: nếu bạn cần hai bảng, một bảng để lưu trữ thông tin tài khoản và một bảng để lưu trữ thông tin của người dùng, bạn sẽ tạo hai bộ sưu tập có tên Tài khoản và Người dùng.
- Lựa chọn Bắt đầu bộ sưu tập và thêm ID bộ sưu tập có tên “Người dùng”.
- Thêm bản ghi đầu tiên, với thông tin về một người dùng. Bấm vào Thêm các lĩnh vực để thêm ba trường mới: firstName (string), lastName (string) và vipMember (boolean). ID tài liệu có thể được tạo tự động.
- Nhấp chuột Tiết kiệm.
- Để thêm nhiều bản ghi vào bộ sưu tập “Người dùng”, hãy nhấp vào Thêm tài liệu (thêm tài liệu tương đương với việc thêm bản ghi hoặc người dùng mới). Thêm bốn người dùng khác với ba trường giống nhau.
Cơ sở dữ liệu hiện đã được thiết lập với một số dữ liệu thử nghiệm.
Cách tích hợp Firebase vào ứng dụng Angular của bạn
Để truy cập dữ liệu này trong ứng dụng Angular cục bộ của bạn, trước tiên hãy định cấu hình một số cài đặt ứng dụng để kết nối với cơ sở dữ liệu Firebase:
- Trong Firebase, hãy chuyển đến bảng điều khiển bên trái và nhấp vào Tổng quan dự án.
- Chọn Web nút (biểu thị bằng dấu ngoặc nhọn).
- Đăng ký ứng dụng địa phương của bạn bằng cách thêm tên của ứng dụng.
- Cài đặt Firebase trong ứng dụng Angular cục bộ của bạn.
npm i firebase - Sau đó, Firebase sẽ hiển thị một số chi tiết cấu hình. Lưu các chi tiết này và nhấp vào Tiếp tục đến Bảng điều khiển.
- Dựa trên các thông tin chi tiết được cung cấp ở bước trước, hãy sao chép đoạn mã sau vào environment.prod.ts và environment.ts trong ứng dụng Angular.
export const environment = {
production: true,
firebaseConfig: {
apiKey: "your-api-key",
authDomain: "your-auth-domain",
projectId: "your-project-id",
storageBucket: "your-storage-buckey",
messagingSenderId: "your-messaging-sender-id",
appId: "your-api-id",
measurementId: "your-measurement-id"
}
}; - AngularFirestore từ @ angle / fire / firestore sẽ được sử dụng để định cấu hình Firebase trong Angular. Lưu ý rằng AngularFirestore không tương thích với Angular Phiên bản 9 trở lên. Trong ứng dụng Angular cục bộ, hãy chạy:
npm i @angular/fire - Thêm mô-đun Firestore và môi trường vào phần nhập trong app.module.ts.
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { environment } from "../environments/environment"; - Các mô-đun Firestore cũng cần được đưa vào mảng nhập trong app.module.ts.
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
Cách lấy dữ liệu từ Firebase bằng dịch vụ
Thông thường tốt là bạn nên có một hoặc nhiều services.ts tệp mà bạn sử dụng để tương tác cụ thể với cơ sở dữ liệu. Sau đó, các chức năng bạn thêm vào tệp dịch vụ có thể được gọi trong tệp TypeScript khác, trang hoặc các thành phần khác trong toàn bộ ứng dụng.
- Tạo một tệp có tên service.ts trong src / app / services thư mục.
- Thêm mô-đun AngularFirestore vào phần nhập và đưa nó vào phương thức khởi tạo.
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
})
export class Service {
constructor(private db: AngularFirestore) { }
} - Thêm một hàm trả về một lời hứa chứa danh sách tất cả người dùng. “
this.db.collection('User')“là đề cập đến bộ sưu tập” Người dùng “trong cơ sở dữ liệu.getAllUsers() {
return new Promise<any>((resolve)=> {
this.db.collection('User').valueChanges({ idField: 'id' }).subscribe(users => resolve(users));
})
} - Để sử dụng hàm này trong một tệp TypeScript khác, hãy nhập dịch vụ mới và thêm nó vào phương thức khởi tạo.
import { Service } from 'src/app/services/service
constructor(private service: Service) {} - Nhận danh sách tất cả người dùng sử dụng chức năng được tạo trong tệp dịch vụ.
async getUsers() {
this.allUsers = await this.service.getAllUsers();
console.log(this.allUsers);
}
Cách thêm bản ghi mới vào cơ sở dữ liệu Firebase
Thêm bản ghi mới cho người dùng vào Cơ sở dữ liệu Firebase.
- Trong services.ts, hãy thêm một chức năng mới để tạo một bản ghi mới. Chức năng này nhận ID của người dùng mới và tất cả thông tin chi tiết của họ. Nó sử dụng chức năng thiết lập của Firestore để gửi thông tin đó đến Firebase và tạo một bản ghi mới.
addNewUser(_newId:any, _fName:string, _lName:string, _vip:boolean) {
this.db.collection("User").doc(_newId).set({firstName:_fName,lastName:_lName,vipMember:_vip});
} - Gọi hàm addNewUser () trong một tệp TypeScript khác. Đừng quên nhập dịch vụ và đưa nó vào hàm khởi tạo, như được hiển thị trước đó. Vui lòng sử dụng trình tạo ID ngẫu nhiên để tạo ID mới cho người dùng.
this.service.addNewUser("62289836", "Jane", "Doe", true);
Cách cập nhật dữ liệu trong cơ sở dữ liệu Firebase
Firebase có rất nhiều chức năng khiến nó trở thành một trong những công cụ tốt nhất hiện có. Để cập nhật các trường nhất định trong một bản ghi cụ thể, hãy sử dụng chức năng cập nhật của Firestore.
- Trong tệp service.ts, hãy tạo một hàm có tên updateUserFirstName (). Chức năng này sẽ cập nhật tên đầu tiên của bản ghi người dùng đã chọn. Hàm nhận ID của bản ghi cần được cập nhật và giá trị mới cho tên của người dùng.
updateUserFirstName(_id:any, _firstName:string) {
this.db.doc(`User/${_id}`).update({firstName:_firstName});
} - Để cập nhật nhiều trường cho cùng một bản ghi, chỉ cần mở rộng các trường được nhập vào bên trong chức năng cập nhật của Firestore. Thay vì chỉ firstName, hãy thêm lastName để cập nhật giá trị mới.
updateUserFullName(_id:any, _firstName:string, _lastName:string) {
this.db.doc(`User/${_id}`).update({firstName:_firstName,lastName:_lastName});
} - Bất kỳ chức năng nào ở trên đều có thể được sử dụng trong các tệp TypeScript khác.
this.service.updateUserFirstName("vLBnSegFl1pD7XQ42TBv", "Kay");
this.service.updateUserFullName("vLBnSegFl1pD7XQ42TBv", "Kay", "Jones");
Cách xóa bản ghi khỏi cơ sở dữ liệu Firebase
Để xóa bản ghi, hãy sử dụng chức năng xóa của Firestore.
- Trong tệp service.ts, hãy tạo một hàm có tên là deleteUser (). Hàm này nhận ID của bản ghi cần được xóa.
deleteUser(_id:any) {
this.db.doc(`User/${_id}`).delete();
} - Sau đó, chức năng trên có thể được sử dụng trong các tệp TypeScript khác.
this.service.deleteUser("vLBnSegFl1pD7XQ42TBv");
Truy xuất dữ liệu Firebase bằng truy vấn và bộ lọc
Bộ lọc “ở đâu” có thể lọc các kết quả được trả về dựa trên một điều kiện cụ thể.
- Trong services.ts, hãy tạo một hàm nhận tất cả người dùng VIP (đây là nếu trường vipMember được đặt thành true). Điều này được chỉ ra bởi phần “ref.where (‘vipMember’, ‘==’, true)” của lệnh gọi Firebase bên dưới.
getAllVipMembers() {
return new Promise<any>((resolve)=> {
this.db.collection('User', ref => ref.where('vipMember', '==', true)).valueChanges().subscribe(users => resolve(users))
})
} - Sử dụng chức năng này trong một tệp TypseScript khác.
async getAllVipMembers() {
this.vipUsers = await this.service.getAllVipMembers();
console.log(this.vipUsers);
} - Truy vấn có thể được sửa đổi để thêm các hoạt động khác như Đặt hàng Theo, Bắt đầu Tại hoặc Giới hạn. Sửa đổi hàm getAllVipMembers () trong services.ts để sắp xếp theo họ. Thao tác Order By có thể yêu cầu tạo chỉ mục trong Firebase. Nếu đúng như vậy, hãy nhấp vào liên kết được cung cấp trong thông báo lỗi trong bảng điều khiển.
getAllVipMembers() {
return new Promise<any>((resolve)=> {
this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName')).valueChanges().subscribe(users => resolve(users))
})
} - Sửa đổi truy vấn để chỉ trả về ba bản ghi đầu tiên. Các hoạt động Bắt đầu tại và Giới hạn có thể được sử dụng cho việc này. Điều này hữu ích nếu bạn cần triển khai phân trang, đó là khi một số bản ghi nhất định được hiển thị trên mỗi trang.
getAllVipMembers() {
return new Promise<any>((resolve)=> {
this.db.collection('User', ref => ref.where('vipMember', '==', true).orderBy('lastName').startAt(0).limit(3)).valueChanges().subscribe(users => resolve(users))
})
}
Thêm nhiều dữ liệu hơn vào Firebase và nhiều yêu cầu hơn trong ứng dụng Angular
Có nhiều kết hợp truy vấn khác mà bạn có thể khám phá khi cố gắng truy xuất dữ liệu từ cơ sở dữ liệu Firebase. Hy vọng rằng bây giờ bạn đã hiểu cách thiết lập cơ sở dữ liệu Firebase đơn giản, cách kết nối nó với ứng dụng Angular cục bộ và cách đọc và ghi vào cơ sở dữ liệu.
Bạn cũng có thể tìm hiểu thêm về các dịch vụ khác mà Firebase cung cấp. Firebase là một trong nhiều nền tảng bạn có thể tích hợp với Angular và bất kể bạn đang ở trình độ mới bắt đầu hay nâng cao, luôn có rất nhiều thứ để học.
Đọc tiếp
Thông tin về các Tác giả
