Lớp học lập trình web AngularFire

1. Tổng quan

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng AngularFire để tạo ứng dụng web bằng cách triển khai ứng dụng trò chuyện bằng các sản phẩm và dịch vụ của Firebase.

Kiến thức bạn sẽ học được

• Tạo ứng dụng web bằng Angular và Firebase.
• Đồng bộ hoá dữ liệu bằng Cloud Firestore và Cloud Storage cho Firebase.
• Xác thực người dùng bằng tính năng Xác thực Firebase.
• Triển khai ứng dụng web của bạn trên Lưu trữ ứng dụng Firebase.
• Gửi thông báo bằng Giải pháp gửi thông báo qua đám mây của Firebase.
• Thu thập dữ liệu hiệu suất của ứng dụng web.

Bạn cần có

• Một tài khoản GitHub
• Khả năng nâng cấp dự án Firebase của bạn lên Gói giá linh hoạt
• Trình chỉnh sửa IDE/trình chỉnh sửa văn bản mà bạn chọn, chẳng hạn như WebStorm, Sublime hoặc Mã VS
• Trình quản lý gói npm, thường đi kèm với Node.js
• Một thiết bị đầu cuối/bảng điều khiển
• Một trình duyệt bạn chọn, chẳng hạn như Chrome
• Mã mẫu của lớp học lập trình này (Xem bước tiếp theo của lớp học lập trình này để biết cách lấy mã.)

2. Nhận mã mẫu

Tạo kho lưu trữ GitHub

Bạn có thể xem nguồn của lớp học lập trình này tại https://github.com/firebase/codelab-friendlychat-web. Kho lưu trữ chứa các dự án mẫu cho nhiều nền tảng. Tuy nhiên, lớp học lập trình này chỉ sử dụng thư mục angularfire-start.

Sao chép thư mục angularfire-start vào kho lưu trữ riêng:

1. Sử dụng dòng lệnh, tạo một thư mục mới trên máy tính và đổi sang thư mục mới:

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. Sử dụng gói npm giget để chỉ tìm nạp thư mục angularfire-start:

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. Theo dõi các thay đổi cục bộ bằng git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. Tạo một kho lưu trữ mới trên GitHub: https://github.com/new. Đặt tên bất kỳ mà bạn muốn.
   1. GitHub sẽ cung cấp cho bạn một URL kho lưu trữ mới có dạng https://github.com/[user-name]/[repository-name].git hoặc git@github.com:[user-name]/[repository-name].git. Sao chép URL này.
5. Đẩy các thay đổi cục bộ vào kho lưu trữ GitHub mới. Chạy lệnh sau, thay thế URL kho lưu trữ của bạn bằng phần giữ chỗ your-repository-url.

   git remote add origin your-repository-url
   
   git push -u origin main
   

6. Bây giờ, bạn sẽ thấy mã khởi đầu trong kho lưu trữ GitHub.

3. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

1. Đăng nhập vào bảng điều khiển của Firebase.
2. Trong bảng điều khiển của Firebase, hãy nhấp vào Thêm dự án, sau đó đặt tên cho dự án Firebase của bạn là Thân thiện. Ghi nhớ mã dự án cho dự án Firebase của bạn.
3. Bỏ đánh dấu mục Bật Google Analytics cho dự án này
4. Nhấp vào Create Project (Tạo dự án).

Ứng dụng mà bạn sẽ tạo sử dụng các sản phẩm Firebase có sẵn cho các ứng dụng web:

• Xác thực Firebase để dễ dàng cho phép người dùng đăng nhập vào ứng dụng của bạn.
• Cloud Firestore để lưu dữ liệu có cấu trúc trên đám mây và nhận thông báo tức thì khi dữ liệu thay đổi.
• Cloud Storage cho Firebase để lưu tệp trên đám mây.
• Lưu trữ ứng dụng Firebase để tạo, lưu trữ và phân phát ứng dụng.
• Giải pháp gửi thông báo qua đám mây của Firebase để gửi thông báo đẩy và hiển thị thông báo bật lên của trình duyệt.
• Giám sát hiệu suất Firebase để thu thập dữ liệu về hiệu suất của người dùng cho ứng dụng của bạn.

Một số sản phẩm trong số này cần có cấu hình đặc biệt hoặc cần được bật bằng bảng điều khiển của Firebase.

Nâng cấp gói giá Firebase của bạn

Để sử dụng tính năng Lưu trữ ứng dụng, dự án Firebase của bạn phải sử dụng Gói giá linh hoạt, có nghĩa là dự án đó được liên kết với một tài khoản thanh toán Cloud.

• Tài khoản thanh toán Cloud yêu cầu phải có một phương thức thanh toán, chẳng hạn như thẻ tín dụng.
• Nếu bạn mới sử dụng Firebase và Google Cloud, hãy kiểm tra xem bạn có đủ điều kiện nhận một khoản tín dụng 300 USD và tài khoản thanh toán dùng thử miễn phí qua đám mây hay không.

Để nâng cấp dự án lên Gói linh hoạt, hãy làm theo các bước sau:

1. Trong bảng điều khiển của Firebase, hãy chọn nâng cấp kế hoạch của bạn.
2. Trong hộp thoại này, hãy chọn Gói linh hoạt, sau đó làm theo hướng dẫn trên màn hình để liên kết dự án của bạn với tài khoản thanh toán Cloud.
   Nếu cần tạo tài khoản thanh toán Cloud, thì bạn có thể phải quay lại quy trình nâng cấp trong bảng điều khiển của Firebase để hoàn tất quá trình nâng cấp.

Thêm một ứng dụng web Firebase vào dự án

1. Nhấp vào biểu tượng web để tạo một ứng dụng web Firebase mới.
2. Đăng ký ứng dụng với biệt hiệu Thân thiện trò chuyện. Không chọn hộp bên cạnh Đồng thời thiết lập Lưu trữ Firebase cho ứng dụng này. Hãy nhấp vào Đăng ký ứng dụng.
3. Ở bước tiếp theo, bạn sẽ thấy một đối tượng cấu hình. Bạn không cần đến ngay bây giờ. Nhấp vào Tiếp tục đến bảng điều khiển.

Thiết lập phương thức xác thực

Để cho phép người dùng đăng nhập vào ứng dụng web bằng Tài khoản Google của họ, bạn sẽ sử dụng phương thức đăng nhập Google.

1. Trong bảng điều khiển của Firebase, hãy chuyển đến mục Xác thực.
2. Nhấp vào Bắt đầu.
3. Trong cột Nhà cung cấp khác, hãy nhấp vào Google > Bật.
4. Trong hộp văn bản Tên công khai của dự án, hãy nhập một tên dễ nhớ, chẳng hạn như My Next.js app.
5. Từ trình đơn thả xuống Email hỗ trợ cho dự án, hãy chọn địa chỉ email của bạn.
6. Nhấp vào Lưu.

Bật Cloud Firestore

Ứng dụng web sử dụng Cloud Firestore để lưu tin nhắn trò chuyện và nhận tin nhắn trò chuyện mới.

Bạn cần bật Cloud Firestore:

1. Trong bảng điều khiển của Firebase, hãy chuyển đến Firestore.
2. Nhấp vào Tạo cơ sở dữ liệu > Tiếp theo > Bắt đầu ở chế độ thử nghiệm > Tiếp theo.
   Ở phần sau của lớp học lập trình này, bạn sẽ thêm các quy tắc bảo mật để bảo mật dữ liệu của mình. Không không phân phối hoặc hiển thị công khai ứng dụng khi chưa thêm Quy tắc bảo mật cho cơ sở dữ liệu.
3. Hãy sử dụng vị trí mặc định hoặc chọn vị trí bạn muốn.
   Đối với ứng dụng thực tế, bạn nên chọn vị trí gần người dùng. Xin lưu ý rằng vị trí này không thể thay đổi sau đó và vị trí này cũng sẽ tự động là vị trí của bộ chứa Cloud Storage mặc định của bạn (bước tiếp theo).
4. Nhấp vào Xong.

Bật Cloud Storage

Ứng dụng web sử dụng Cloud Storage cho Firebase để lưu trữ, tải lên và chia sẻ hình ảnh.

Bạn sẽ cần bật Cloud Storage:

1. Trong bảng điều khiển của Firebase, hãy chuyển đến phần Bộ nhớ.
2. Nhấp vào Bắt đầu > Bắt đầu ở chế độ thử nghiệm > Tiếp theo.
   Trong phần sau của lớp học lập trình này, bạn sẽ thêm các quy tắc bảo mật để bảo mật dữ liệu của mình. Không phân phối hoặc hiển thị công khai ứng dụng khi chưa thêm Quy tắc bảo mật cho Bộ chứa bộ nhớ.
3. Bạn phải chọn vị trí cho bộ chứa của mình (do đã thiết lập Firestore ở bước trước).
4. Nhấp vào Xong.

4. Cài đặt giao diện dòng lệnh của Firebase

Giao diện dòng lệnh (CLI) của Firebase cho phép bạn sử dụng tính năng Lưu trữ Firebase để phân phát ứng dụng web trên máy tính cũng như triển khai ứng dụng web cho dự án Firebase.

1. Cài đặt CLI bằng cách chạy lệnh npm sau:

npm -g install firebase-tools@latest

2. Xác minh rằng CLI đã được cài đặt đúng bằng cách chạy lệnh sau:

firebase --version

Đảm bảo rằng phiên bản Giao diện dòng lệnh (CLI) của Firebase là phiên bản 13.9.0 trở lên.

3. Cho phép Giao diện dòng lệnh (CLI) của Firebase bằng cách chạy lệnh sau:

firebase login

Bạn đã thiết lập mẫu ứng dụng web để lấy cấu hình của ứng dụng cho Lưu trữ Firebase từ thư mục cục bộ của ứng dụng (kho lưu trữ mà bạn đã sao chép trước đó trong lớp học lập trình). Tuy nhiên, để lấy được cấu hình, bạn cần liên kết ứng dụng của mình với dự án Firebase.

4. Hãy đảm bảo rằng dòng lệnh đang truy cập vào thư mục angularfire-start cục bộ của ứng dụng.
5. Liên kết ứng dụng của bạn với dự án Firebase bằng cách chạy lệnh sau:

firebase use --add

6. Khi được nhắc, hãy chọn Mã dự án của bạn, sau đó đặt biệt hiệu cho dự án Firebase của bạn.

Bí danh rất hữu ích nếu bạn có nhiều môi trường (sản xuất, thử nghiệm, v.v.). Tuy nhiên, đối với lớp học lập trình này, hãy sử dụng bí danh của default.

7. Làm theo các hướng dẫn còn lại trên dòng lệnh.

5. Cài đặt AngularFire

Trước khi chạy dự án, hãy đảm bảo bạn đã thiết lập Angular CLI và AngularFire.

1. Trong bảng điều khiển, hãy chạy lệnh sau:

npm install -g @angular/cli

2. Sau đó, trong bảng điều khiển từ thư mục angularfire-start, hãy chạy lệnh Angular CLI sau đây:

ng add @angular/fire

Thao tác này sẽ cài đặt mọi phần phụ thuộc cần thiết cho dự án của bạn.

3. Khi được nhắc, hãy bỏ đánh dấu ng deploy -- hosting bằng phím cách. Chọn các tính năng sau bằng các phím mũi tên và phím cách:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. Nhấn enter rồi làm theo các lời nhắc còn lại.
5. Tạo một cam kết có thông báo cam kết "Install AngularFire" và đẩy nó vào kho lưu trữ GitHub của bạn.

6. Tạo phần phụ trợ Lưu trữ ứng dụng

Trong phần này, bạn sẽ thiết lập một phần phụ trợ Lưu trữ ứng dụng để theo dõi một nhánh trên kho lưu trữ git.

Đến cuối phần này, bạn sẽ có một phần phụ trợ Lưu trữ ứng dụng kết nối với kho lưu trữ của bạn trên GitHub. Phần phụ trợ này sẽ tự động tạo lại và ra mắt một phiên bản mới của ứng dụng mỗi khi bạn đẩy một cam kết mới đến nhánh main.

1. Chuyển đến trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase:

2. Nhấp vào "Bắt đầu" để bắt đầu quy trình tạo phần phụ trợ. Định cấu hình phần phụ trợ như sau:
3. Làm theo lời nhắc trong bước đầu tiên để kết nối kho lưu trữ GitHub mà bạn tạo trước đó.
4. Đặt chế độ cài đặt triển khai:
   1. Giữ thư mục gốc là /
   2. Đặt nhánh trực tiếp thành main
   3. Bật chế độ phát hành tự động
5. Đặt tên cho phần phụ trợ là friendlychat-codelab.
6. Trong phần "Tạo hoặc liên kết ứng dụng web Firebase", hãy chọn ứng dụng web mà bạn đã định cấu hình trước đó từ trình đơn thả xuống "Chọn một ứng dụng web Firebase hiện có".
7. Nhấp vào "Hoàn tất và triển khai". Sau giây lát, bạn sẽ được đưa đến một trang mới để xem trạng thái của phần phụ trợ Lưu trữ ứng dụng mới!
8. Sau khi phát hành xong, hãy nhấp vào miền miễn phí trong phần "miền". Quá trình này có thể mất vài phút để bắt đầu hoạt động do lan truyền DNS.

Bạn đã triển khai ứng dụng web ban đầu! Mỗi khi đẩy một cam kết mới vào nhánh main của kho lưu trữ GitHub, bạn sẽ thấy một bản dựng và quá trình phát hành mới bắt đầu trong bảng điều khiển của Firebase. Đồng thời, trang web của bạn sẽ tự động cập nhật sau khi quá trình phát hành hoàn tất.

Bạn sẽ thấy màn hình đăng nhập của ứng dụng Thân thiện, màn hình này (chưa!) hoạt động.

Ứng dụng hiện không thể làm gì nhưng với sự trợ giúp của bạn, điều này sẽ sớm được thực hiện!

Bây giờ, hãy xây dựng một ứng dụng trò chuyện theo thời gian thực.

7. Nhập và định cấu hình Firebase

Định cấu hình Firebase

Bạn sẽ cần phải định cấu hình Firebase SDK để cho biết bạn đang sử dụng dự án Firebase nào.

1. Chuyển đến phần Cài đặt dự án trong bảng điều khiển của Firebase
2. Trong thẻ "Ứng dụng của bạn", hãy chọn biệt hiệu của ứng dụng mà bạn cần một đối tượng cấu hình.
3. Chọn "Config" trong ngăn đoạn mã Firebase SDK.

Bạn sẽ thấy có một tệp môi trường /angularfire-start/src/environments/environment.ts được tạo cho bạn.

4. Sao chép đoạn mã đối tượng config, rồi thêm đoạn mã đó vào angularfire-start/src/firebase-config.js.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

Xem chế độ thiết lập AngularFire

Bạn sẽ thấy các tính năng mà bạn đã chọn trong bảng điều khiển đã được tự động thêm vào tệp /angularfire-start/src/app/app.config.ts. Việc này cho phép ứng dụng của bạn sử dụng các tính năng và chức năng của Firebase.

8. Thiết lập tính năng đăng nhập cho người dùng

AngularFire hiện đã sẵn sàng để sử dụng vì nó được nhập và khởi chạy trong app.config.ts. Bây giờ, bạn sẽ triển khai tính năng đăng nhập của người dùng bằng tính năng Xác thực Firebase.

Thêm miền được uỷ quyền

Tính năng Xác thực Firebase chỉ cho phép đăng nhập từ một danh sách các miền do bạn kiểm soát. Thêm miền Lưu trữ ứng dụng miễn phí của bạn vào danh sách miền:

1. Chuyển đến phần Lưu trữ ứng dụng.
2. Kiểm soát miền của phần phụ trợ.
3. Chuyển đến phần Cài đặt xác thực.
4. Chọn thẻ Miền được uỷ quyền.
5. Nhấp vào Thêm miền và dán miền của phần phụ trợ Lưu trữ ứng dụng.

Xác thực người dùng bằng tính năng Đăng nhập bằng Google

Trong ứng dụng, khi người dùng nhấp vào nút Đăng nhập bằng Google, hàm login được kích hoạt. Đối với lớp học lập trình này, bạn muốn cho phép Firebase sử dụng Google làm nhà cung cấp danh tính. Bạn sẽ sử dụng cửa sổ bật lên, nhưng bạn vẫn có thể sử dụng một số phương pháp khác trong Firebase.

1. Trong thư mục con /src/app/services/, hãy mở chat.service.ts.
2. Tìm hàm login.
3. Thay thế toàn bộ hàm bằng mã sau.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

Hàm logout được kích hoạt khi người dùng nhấp vào nút Đăng xuất.

1. Quay lại tệp src/app/services/chat.service.ts.
2. Tìm hàm logout.
3. Thay thế toàn bộ hàm bằng mã sau.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

Theo dõi trạng thái xác thực

Để cập nhật giao diện người dùng cho phù hợp, bạn cần có cách kiểm tra xem người dùng đã đăng nhập hay đăng xuất. AngularFire cung cấp một hàm để lấy đối tượng có thể quan sát và cập nhật mỗi khi trạng thái xác thực thay đổi. Cách này đã được triển khai nhưng bạn vẫn nên xem xét.

1. Quay lại tệp src/app/services/chat.service.ts.
2. Tìm cách chỉ định biến user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Đoạn mã ở trên gọi hàm AngularFire user, hàm này trả về một người dùng có thể quan sát. Tính năng này sẽ kích hoạt mỗi khi trạng thái xác thực thay đổi (khi người dùng đăng nhập hoặc đăng xuất). Các thành phần mẫu Angular trong thân thiện, sử dụng đối tượng có thể quan sát này để cập nhật giao diện người dùng để chuyển hướng, hiển thị người dùng trong thanh điều hướng tiêu đề, v.v.

Kiểm thử hoạt động đăng nhập vào ứng dụng

1. Tạo một cam kết có thông báo cam kết "Thêm phương thức xác thực của Google" rồi đẩy vào kho lưu trữ GitHub.
2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và chờ quá trình phát hành mới của bạn hoàn tất.
3. Trong ứng dụng web, hãy làm mới trang rồi đăng nhập vào ứng dụng bằng nút đăng nhập và Tài khoản Google của bạn. Nếu bạn thấy thông báo lỗi cho biết auth/operation-not-allowed, hãy kiểm tra để đảm bảo rằng bạn đã bật tính năng Đăng nhập bằng Google với tư cách là nhà cung cấp dịch vụ xác thực trong bảng điều khiển của Firebase.
4. Sau khi đăng nhập, ảnh hồ sơ và tên người dùng của bạn sẽ xuất hiện:

9. Viết thông báo vào Cloud Firestore

Trong phần này, bạn sẽ ghi một số dữ liệu vào Cloud Firestore để có thể điền sẵn giao diện người dùng của ứng dụng. Bạn có thể thực hiện việc này theo cách thủ công bằng bảng điều khiển của Firebase, nhưng sẽ thực hiện trong chính ứng dụng để minh hoạ cách ghi cơ bản trên Cloud Firestore.

Mô hình dữ liệu

Dữ liệu trong Cloud Firestore được chia thành các bộ sưu tập, tài liệu, trường và tập hợp con. Bạn sẽ lưu trữ mỗi tin nhắn của cuộc trò chuyện dưới dạng tài liệu trong một bộ sưu tập cấp cao nhất có tên là messages.

Thêm thông báo vào Cloud Firestore

Để lưu trữ tin nhắn trò chuyện do người dùng viết, bạn sẽ sử dụng Cloud Firestore.

Trong phần này, bạn sẽ thêm chức năng để người dùng viết thông báo mới vào cơ sở dữ liệu của mình. Người dùng nhấp vào nút GỬI sẽ kích hoạt đoạn mã dưới đây. Thao tác này sẽ thêm một đối tượng thông báo có nội dung của các trường thông báo vào thực thể Cloud Firestore trong bộ sưu tập messages. Phương thức add() sẽ thêm một tài liệu mới có mã nhận dạng được tạo tự động vào bộ sưu tập.

1. Quay lại tệp src/app/services/chat.service.ts.
2. Tìm hàm addMessage.
3. Thay thế toàn bộ hàm bằng mã sau.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Thử nghiệm tính năng gửi tin nhắn

1. Tạo một cam kết có thông báo xác nhận "Đăng cuộc trò chuyện mới lên Firestore" và đẩy thông báo đó vào kho lưu trữ GitHub của bạn.
2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và chờ quá trình phát hành mới của bạn hoàn tất.
3. Làm mới friendlyChat. Sau khi đăng nhập, hãy nhập một thông báo chẳng hạn như "Xin chào!" rồi nhấp vào GỬI. Thao tác này sẽ ghi thông báo vào Cloud Firestore. Tuy nhiên, bạn sẽ không thấy dữ liệu trong ứng dụng web thực tế vì bạn vẫn cần triển khai việc truy xuất dữ liệu (phần tiếp theo của lớp học lập trình).
4. Bạn có thể xem thông báo mới thêm trong Bảng điều khiển của Firebase. Mở giao diện người dùng của bộ Trình mô phỏng. Trong phần Build (Tạo), nhấp vào Firestore Database (Cơ sở dữ liệu khôi phục lại) (hoặc nhấp vào đây và bạn sẽ thấy bộ sưu tập thông báo cùng với thông báo mới thêm:

10. Đọc tin nhắn

Đồng bộ hoá thông báo

Để đọc thông báo trong ứng dụng, bạn cần thêm một đối tượng có thể quan sát, đối tượng này sẽ kích hoạt khi dữ liệu thay đổi, sau đó tạo một thành phần trên giao diện người dùng để hiển thị thông báo mới.

Bạn sẽ thêm mã để theo dõi các thông báo mới được thêm vào từ ứng dụng. Trong mã này, bạn sẽ truy xuất ảnh chụp nhanh của bộ sưu tập messages. Bạn sẽ chỉ hiển thị 12 tin nhắn cuối cùng của cuộc trò chuyện để tránh hiển thị nhật ký quá lâu khi tải.

1. Quay lại tệp src/app/services/chat.service.ts.
2. Tìm hàm loadMessages.
3. Thay thế toàn bộ hàm bằng mã sau.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

Để theo dõi thông báo trong cơ sở dữ liệu, bạn tạo truy vấn trên một bộ sưu tập bằng cách sử dụng hàm collection để chỉ định bộ sưu tập chứa dữ liệu mà bạn muốn nghe. Ở mã trên, bạn đang nghe các thay đổi trong bộ sưu tập messages, nơi lưu trữ các tin nhắn trò chuyện. Bạn cũng đang áp dụng giới hạn bằng cách chỉ nghe 12 tin nhắn gần đây nhất bằng cách dùng limit(12) và sắp xếp các tin nhắn theo ngày bằng orderBy('timestamp', 'desc') để nhận được 12 tin nhắn mới nhất.

Hàm collectionData sử dụng ảnh chụp nhanh nâng cao. Hàm callback sẽ được kích hoạt khi có bất kỳ thay đổi nào đối với các tài liệu khớp với truy vấn. Điều này có thể xảy ra nếu một tin nhắn bị xoá, sửa đổi hoặc thêm vào. Bạn có thể đọc thêm về vấn đề này trong tài liệu về Cloud Firestore.

Kiểm thử việc đồng bộ hoá thư

1. Tạo một cam kết có thông báo cam kết "Show new audiences in the UI" (Hiện các cuộc trò chuyện mới trong giao diện người dùng) và đẩy vào kho lưu trữ GitHub.
2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và chờ quá trình phát hành mới của bạn hoàn tất.
3. Làm mới friendlyChat. Các thông báo mà bạn đã tạo trước đó trong cơ sở dữ liệu sẽ hiển thị trong giao diện người dùng thân thiện (xem bên dưới). Vui lòng viết thư mới; thư sẽ xuất hiện ngay lập tức.
4. (Không bắt buộc) Bạn có thể thử tự xoá, sửa đổi hoặc thêm thông báo mới ngay trong phần Firestore của bộ Trình mô phỏng; mọi thay đổi sẽ được phản ánh trong giao diện người dùng.

Xin chúc mừng! Bạn đang đọc tài liệu trên Cloud Firestore trong ứng dụng!

11. Thêm các tính năng sử dụng AI

Bạn sẽ dùng AI của Google để thêm các tính năng hỗ trợ hữu ích vào ứng dụng trò chuyện.

Nhận khoá API AI của Google

1. Chuyển đến Google AI Studio rồi nhấp vào Tạo khoá API
2. Chọn dự án Firebase bạn đã tạo cho lớp học lập trình này. Lời nhắc là dành cho một dự án Google Cloud, nhưng mỗi dự án Firebase là một dự án Google Cloud.
3. Nhấp vào Tạo khoá API trong dự án hiện có
4. Sao chép khoá API thu được

Cài đặt tiện ích

Tiện ích này sẽ triển khai một hàm đám mây được kích hoạt mỗi khi một tài liệu mới được thêm vào bộ sưu tập messages trong Firestore. Hàm này sẽ gọi Gemini và viết phản hồi của nó trở lại trường response trong tài liệu.

1. Nhấp vào Cài đặt trong bảng điều khiển của Firebase trên trang tiện ích Tạo Chatbot bằng API Gemini.
2. Làm theo lời nhắc. Khi bạn đến bước Định cấu hình tiện ích, hãy đặt các giá trị thông số sau:
   • Nhà cung cấp API Gemini: Google AI
   • Khoá API AI của Google: Dán khoá bạn đã tạo trước đó rồi nhấp vào Tạo khoá bí mật.
   • Đường dẫn đến bộ sưu tập trên Firestore: messages
   • Trường câu lệnh: text
   • Trường phản hồi: response
   • Trường đơn đặt hàng: timestamp
   • Bối cảnh: Keep your answers short, informal, and helpful. Use emojis when possible.
3. Nhấp vào cài đặt tiện ích
4. Chờ tiện ích này cài đặt xong

Thử nghiệm tính năng AI

Thân thiện đã có mã để đọc câu trả lời từ tiện ích AI. Bạn chỉ cần gửi một tin nhắn trò chuyện mới để dùng thử tính năng này!

1. Mở friendlyChat và gửi tin nhắn.
2. Sau giây lát, bạn sẽ thấy một cửa sổ phản hồi bật lên cùng với tin nhắn của mình. Thiết bị này có một ghi chú ✨ ai generated ở cuối để làm rõ việc ứng dụng được tạo bằng AI tạo sinh chứ không phải người dùng thực sự.

12. Gửi hình ảnh

Bây giờ, bạn sẽ thêm một tính năng chia sẻ hình ảnh.

Mặc dù Cloud Firestore là lựa chọn phù hợp để lưu trữ dữ liệu có cấu trúc, nhưng Cloud Storage thì phù hợp hơn để lưu trữ tệp. Cloud Storage cho Firebase là dịch vụ lưu trữ tệp/blob và bạn sẽ sử dụng dịch vụ này để lưu trữ mọi hình ảnh mà người dùng chia sẻ bằng ứng dụng của chúng tôi.

Lưu hình ảnh vào Cloud Storage

Đối với lớp học lập trình này, bạn đã thêm cho mình một nút kích hoạt hộp thoại bộ chọn tệp. Sau khi chọn một tệp, hàm saveImageMessage sẽ được gọi và bạn có thể lấy thông tin tham chiếu đến tệp đã chọn. Hàm saveImageMessage sẽ thực hiện những việc sau:

1. Tạo một tin nhắn trò chuyện "phần giữ chỗ" trong nguồn cấp dữ liệu trò chuyện để người dùng thấy ảnh động "Đang tải" trong khi bạn tải hình ảnh lên.
2. Tải tệp hình ảnh lên Cloud Storage theo đường dẫn này: /<uid>/<file_name>
3. Tạo một URL có thể đọc được công khai cho tệp hình ảnh.
4. Cập nhật tin nhắn trò chuyện bằng URL của tệp hình ảnh mới tải lên thay cho hình ảnh tải tạm thời.

Bây giờ, bạn sẽ thêm chức năng gửi hình ảnh:

1. Quay lại tệp src/chat.service.ts.
2. Tìm hàm saveImageMessage.
3. Thay thế toàn bộ hàm bằng mã sau.

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);

    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

Kiểm thử việc gửi hình ảnh

1. Tạo một cam kết với thông báo cam kết "Add khả năng đăng hình ảnh" và đẩy nó vào kho lưu trữ GitHub.
2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và chờ quá trình phát hành mới của bạn hoàn tất.
3. Làm mới friendlyChat. Sau khi đăng nhập, hãy nhấp vào nút tải hình ảnh lên ở dưới cùng bên trái rồi chọn một tệp hình ảnh bằng bộ chọn tệp. Nếu bạn đang tìm kiếm một hình ảnh, hãy sử dụng hình ảnh đẹp về một cốc cà phê này.
4. Một thông báo mới sẽ xuất hiện trong giao diện người dùng của ứng dụng cùng với hình ảnh bạn đã chọn:

Nếu thử thêm một hình ảnh khi chưa đăng nhập, thì bạn sẽ thấy thông báo lỗi cho biết rằng bạn phải đăng nhập để thêm hình ảnh.

13. Show notifications (Hiện thông báo)

Bây giờ, bạn sẽ thêm tính năng hỗ trợ cho thông báo của trình duyệt. Ứng dụng sẽ thông báo cho người dùng khi có tin nhắn mới được đăng trong cuộc trò chuyện. Giải pháp gửi thông báo qua đám mây của Firebase (FCM) là một giải pháp nhắn tin trên nhiều nền tảng, cho phép bạn gửi tin nhắn và thông báo một cách đáng tin cậy mà không mất phí.

Thêm trình chạy dịch vụ FCM

Ứng dụng web cần một trình chạy dịch vụ có chức năng nhận và hiển thị thông báo trên web.

Trình cung cấp dịch vụ nhắn tin chắc hẳn đã được thiết lập khi thêm AngularFire, hãy đảm bảo rằng mã sau đây có trong phần nhập của /angularfire-start/src/app/app.module.ts

provideMessaging(() => {
    return getMessaging();
}),

app/app.module.ts

Trình chạy dịch vụ chỉ cần tải và khởi chạy SDK Giải pháp gửi thông báo qua đám mây của Firebase. SDK này sẽ đảm nhận việc hiển thị thông báo.

Nhận mã thông báo thiết bị FCM

Khi thông báo được bật trên một thiết bị hoặc trình duyệt, bạn sẽ được cấp một mã thiết bị. Mã thông báo thiết bị này là thứ bạn dùng để gửi thông báo đến một thiết bị hoặc trình duyệt cụ thể.

Khi người dùng đăng nhập, bạn sẽ gọi hàm saveMessagingDeviceToken. Tại đây, bạn sẽ lấy mã thông báo thiết bị FCM từ trình duyệt và lưu vào Cloud Firestore.

chat.service.ts

2. Tìm hàm saveMessagingDeviceToken.
3. Thay thế toàn bộ hàm bằng mã sau.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
 
        // This will fire when a message is received while the app is in the foreground.
        // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
        onMessage(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

Tuy nhiên, mã này sẽ không hoạt động lúc đầu. Để ứng dụng của bạn có thể truy xuất mã thông báo của thiết bị, người dùng cần cấp cho ứng dụng quyền hiển thị thông báo (bước tiếp theo của lớp học lập trình).

Yêu cầu quyền hiển thị thông báo

Khi người dùng chưa cấp cho ứng dụng của bạn quyền hiển thị thông báo, bạn sẽ không được cấp mã thông báo của thiết bị. Trong trường hợp này, bạn sẽ gọi phương thức requestPermission(). Phương thức này sẽ hiển thị hộp thoại trình duyệt yêu cầu quyền này ( trong các trình duyệt được hỗ trợ).

1. Quay lại tệp src/app/services/chat.service.ts.
2. Tìm hàm requestNotificationsPermissions.
3. Thay thế toàn bộ hàm bằng mã sau.

chat.service.ts

// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
    console.log('Requesting notifications permission...');
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      // Notification permission granted.
      await this.saveMessagingDeviceToken();
    } else {
      console.log('Unable to get permission to notify.');
    }
}

Nhận mã thông báo của thiết bị

1. Tạo một cam kết với thông báo cam kết "Add khả năng đăng hình ảnh" và đẩy nó vào kho lưu trữ GitHub.
2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và chờ quá trình phát hành mới của bạn hoàn tất.
3. Làm mới friendlyChat. Sau khi đăng nhập, hộp thoại cấp quyền gửi thông báo sẽ xuất hiện:
4. Nhấp vào Cho phép.
5. Mở bảng điều khiển JavaScript trên trình duyệt của bạn. Bạn sẽ thấy thông báo sau: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
6. Sao chép mã thông báo thiết bị của bạn. Bạn sẽ cần những dữ liệu này cho giai đoạn tiếp theo của lớp học lập trình.

Gửi thông báo đến thiết bị của bạn

Giờ đây khi đã có mã thông báo thiết bị, bạn có thể gửi thông báo.

1. Mở thẻ Gửi thông báo qua đám mây trong bảng điều khiển của Firebase.
2. Nhấp vào "Thông báo mới"
3. Nhập tiêu đề thông báo và nội dung thông báo.
4. Ở bên phải màn hình, hãy nhấp vào "gửi tin nhắn thử nghiệm"
5. Nhập mã thông báo thiết bị mà bạn đã sao chép từ Bảng điều khiển JavaScript của trình duyệt, sau đó nhấp vào dấu cộng ("+")
6. Nhấp vào "kiểm tra"

Nếu ứng dụng của bạn chạy trên nền trước, bạn sẽ thấy thông báo trong bảng điều khiển JavaScript.

Nếu ứng dụng của bạn chạy trong nền thì một thông báo sẽ xuất hiện trong trình duyệt, như trong ví dụ sau:

14. Quy tắc bảo mật của Cloud Firestore

Xem các quy tắc bảo mật cơ sở dữ liệu

Cloud Firestore sử dụng một ngôn ngữ quy tắc cụ thể để xác định quyền truy cập, tính bảo mật và việc xác thực dữ liệu.

Khi thiết lập dự án Firebase ở đầu lớp học lập trình này, bạn đã chọn sử dụng các quy tắc bảo mật mặc định "Chế độ thử nghiệm" để không hạn chế quyền truy cập vào kho dữ liệu. Trong bảng điều khiển của Firebase, trong thẻ Quy tắc của mục Cơ sở dữ liệu, bạn có thể xem và sửa đổi các quy tắc này.

Hiện tại, bạn sẽ thấy các quy tắc mặc định, không hạn chế quyền truy cập vào kho dữ liệu. Tức là bất kỳ người dùng nào cũng có thể đọc và ghi vào bất kỳ tập hợp nào trong kho dữ liệu của bạn.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Bạn sẽ cập nhật các quy tắc để hạn chế mọi thứ bằng cách sử dụng các quy tắc sau:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

Các quy tắc bảo mật sẽ tự động cập nhật cho bộ công cụ Trình mô phỏng.

Xem quy tắc bảo mật của Cloud Storage

Cloud Storage cho Firebase sử dụng một ngôn ngữ quy tắc cụ thể để xác định quyền truy cập, tính bảo mật và việc xác thực dữ liệu.

Khi thiết lập dự án Firebase ở đầu lớp học lập trình này, bạn chọn sử dụng quy tắc bảo mật mặc định trong Cloud Storage, quy tắc này chỉ cho phép những người dùng đã xác thực sử dụng Cloud Storage. Trong bảng điều khiển của Firebase, trong thẻ Quy tắc của mục Bộ nhớ, bạn có thể xem và sửa đổi các quy tắc. Bạn sẽ thấy quy tắc mặc định cho phép mọi người dùng đã đăng nhập đọc và ghi bất kỳ tệp nào trong bộ chứa bộ nhớ của mình.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Bạn sẽ cập nhật các quy tắc để thực hiện những việc sau:

• Cho phép mỗi người dùng chỉ ghi vào thư mục cụ thể của riêng họ
• Cho phép mọi người đọc từ Cloud Storage
• Đảm bảo rằng các tệp đã tải lên là hình ảnh
• Giới hạn kích thước hình ảnh được tải lên ở mức tối đa là 5 MB

Có thể triển khai việc này bằng các quy tắc sau:

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

15. Xin chúc mừng!

Bạn đã sử dụng Firebase để tạo một ứng dụng web trò chuyện theo thời gian thực!

Nội dung đã đề cập

• Firebase App Hosting
• Xác thực Firebase
• Cloud Firestore
• Firebase SDK cho Cloud Storage
• Giải pháp gửi thông báo qua đám mây của Firebase
• Giám sát hiệu suất Firebase

Các bước tiếp theo

Tìm hiểu thêm

• firebase.google.com

16. [Không bắt buộc] Thực thi bằng tính năng Kiểm tra ứng dụng

Tính năng Kiểm tra ứng dụng của Firebase giúp bảo vệ các dịch vụ của bạn khỏi lưu lượng truy cập không mong muốn và bảo vệ phần phụ trợ của bạn khỏi hành vi lạm dụng. Trong bước này, bạn sẽ thêm tính năng xác thực thông tin đăng nhập và chặn các ứng dụng trái phép bằng tính năng Kiểm tra ứng dụng và reCAPTCHA Enterprise.

Trước tiên, bạn cần bật tính năng Kiểm tra ứng dụng và reCaptcha.

Bật reCaptcha Enterprise

1. Trong bảng điều khiển Cloud, hãy tìm và chọn reCaptcha Enterprise trong phần Bảo mật.
2. Bật dịch vụ theo lời nhắc và nhấp vào Create Key (Tạo khoá).
3. Nhập tên hiển thị như được nhắc, rồi chọn loại nền tảng là Trang web.
4. Thêm các URL được triển khai của bạn vào Danh sách miền và đảm bảo rằng bạn bỏ chọn tùy chọn "Sử dụng thử thách hộp đánh dấu".
5. Nhấp vào Tạo khoá rồi lưu trữ khoá đã tạo ở nơi để giữ an toàn. Bạn sẽ cần đến nó sau trong bước này.

Bật tính năng kiểm tra ứng dụng

1. Trong bảng điều khiển của Firebase, hãy tìm phần Tạo trên bảng điều khiển bên trái.
2. Nhấp vào Kiểm tra ứng dụng, sau đó nhấp vào thẻ Phương thức đăng nhập để chuyển đến phần Kiểm tra ứng dụng.
3. Nhấp vào Đăng ký và nhập khoá reCaptcha Enterprise khi được nhắc, sau đó nhấp vào Lưu.
4. Trong Chế độ xem API, hãy chọn Bộ nhớ rồi nhấp vào Thực thi. Làm tương tự đối với Cloud Firestore.

Giờ đây, quy trình Kiểm tra ứng dụng phải được thực thi! Hãy làm mới ứng dụng rồi thử xem hoặc gửi tin nhắn trò chuyện. Bạn sẽ nhận được thông báo lỗi:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Điều này có nghĩa là tính năng Kiểm tra ứng dụng sẽ chặn các yêu cầu chưa được xác thực theo mặc định. Bây giờ, hãy thêm tính năng xác thực vào ứng dụng của bạn.

Chuyển đến tệp environment.ts rồi thêm reCAPTCHAEnterpriseKey vào đối tượng environment.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

Thay thế giá trị của key bằng mã thông báo reCaptcha Enterprise của bạn.

Sau đó, hãy chuyển đến tệp app.module.ts rồi thêm các mục nhập sau:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

Cũng trong tệp app.module.ts đó, hãy thêm nội dung khai báo biến toàn cục sau đây:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

Trong quá trình nhập, hãy thêm hoạt động khởi chạy Kiểm tra ứng dụng bằng ReCaptchaEnterpriseProvider và đặt isTokenAutoRefreshEnabled thành true để cho phép các mã thông báo tự động làm mới.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

Để cho phép kiểm thử cục bộ, hãy đặt self.FIREBASE_APPCHECK_DEBUG_TOKEN thành true. Khi bạn làm mới ứng dụng trong localhost, thao tác này sẽ ghi lại mã gỡ lỗi trong bảng điều khiển tương tự như sau:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

Bây giờ, hãy chuyển đến Apps View (Chế độ xem ứng dụng) của ứng dụng Kiểm tra ứng dụng trong bảng điều khiển của Firebase.

Nhấp vào trình đơn mục bổ sung rồi chọn Quản lý mã gỡ lỗi.

Sau đó, nhấp vào Thêm mã gỡ lỗi và dán mã gỡ lỗi từ bảng điều khiển của bạn khi được nhắc.

Chuyển đến tệp chat.service.ts rồi thêm nội dung nhập sau:

import { AppCheck } from '@angular/fire/app-check';

Trong cùng tệp chat.service.ts, hãy chèn tính năng Kiểm tra ứng dụng cùng với các dịch vụ Firebase khác.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

1. Tạo một cam kết có thông báo xác nhận (commit) "Chặn ứng dụng khách trái phép bằng tính năng Kiểm tra ứng dụng" và đẩy ứng dụng đó vào kho lưu trữ GitHub của bạn.
2. Mở trang Lưu trữ ứng dụng trong bảng điều khiển của Firebase và chờ quá trình phát hành mới của bạn hoàn tất.

Xin chúc mừng! Giờ đây, tính năng Kiểm tra ứng dụng đã hoạt động được trong ứng dụng của bạn.