Trang này được dịch bởi Cloud Translation API.

Gửi thông báo cho ứng dụng web bằng giải pháp Gửi thông báo qua đám mây và Chức năng đám mây

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 Chức năng đám mây cho Firebase để thêm chức năng vào ứng dụng web trò chuyện bằng cách gửi thông báo cho người dùng ứng dụng trò chuyện.

3b1284f5144b54f6.pngS.

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

Tạo Google Cloud Functions bằng cách sử dụng SDK Firebase.
Kích hoạt Chức năng đám mây dựa trên các sự kiện Xác thực, Cloud Storage và Cloud Firestore.
Thêm tính năng hỗ trợ Giải pháp gửi thông báo qua đám mây của Firebase vào ứng dụng web.

Bạn cần có

Thẻ tín dụng. Cloud Functions cho Firebase yêu cầu bạn phải có gói Firebase Blaze, tức là bạn sẽ phải bật tính năng thanh toán trên dự án Firebase của mình bằng thẻ tín dụng.
IDE/trình chỉnh sửa văn bản mà bạn chọn, chẳng hạn như WebStorm, Atom hoặc Sublime.
Một thiết bị đầu cuối để chạy các lệnh shell khi cài đặt NodeJS v9.
Một trình duyệt như Chrome.
Mã mẫu. Xem bước tiếp theo cho quy trình này.

2. Nhận mã mẫu

Sao chép kho lưu trữ GitHub từ dòng lệnh:

git clone https://github.com/firebase/friendlychat

Nhập ứng dụng khởi đầu

Bằng cách sử dụng IDE, hãy mở hoặc nhập thư mục cloud-functions-start từ thư mục mã mẫu. Thư mục này chứa đoạn mã khởi đầu cho lớp học lập trình, bao gồm một Ứng dụng web Chat có đầy đủ chức năng.

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

Tạo dự án

Trong Bảng điều khiển của Firebase, hãy nhấp vào Add Project (Thêm dự án) rồi đặt tên là ConsumerChat.

Nhấp vào Create Project (Tạo dự án).

Nâng cấp lên Gói linh hoạt

Để sử dụng Cloud Functions cho Firebase, bạn sẽ phải nâng cấp dự án Firebase của mình lên gói Thanh toán linh hoạt. Để làm việc này, bạn sẽ phải thêm thẻ tín dụng hoặc một phương thức thanh toán khác vào tài khoản Google Cloud.

Tất cả dự án Firebase, bao gồm cả những dự án trong Gói linh hoạt, vẫn có quyền truy cập vào hạn mức sử dụng miễn phí của Cloud Functions. Các bước được nêu trong lớp học lập trình này sẽ nằm trong hạn mức sử dụng của bậc miễn phí. Tuy nhiên, bạn sẽ thấy một khoản phí nhỏ (khoảng $0,03) từ Cloud Storage dùng để lưu trữ hình ảnh xây dựng Cloud Functions của bạn.

Nếu bạn không có quyền truy cập vào thẻ tín dụng hoặc không muốn tiếp tục với Gói linh hoạt, hãy cân nhắc việc sử dụng Bộ mô phỏng Firebase. Bộ công cụ này sẽ cho phép bạn mô phỏng miễn phí Gói Cloud trên máy cục bộ của mình.

Bật tính năng Xác thực của Google

Để cho phép người dùng đăng nhập vào ứng dụng, chúng ta sẽ sử dụng tính năng Xác thực của Google. Tính năng này cần được bật.

Trong Bảng điều khiển của Firebase, hãy mở phần Tạo > Xác thực > Thẻ Phương thức đăng nhập (hoặc nhấp vào đây để chuyển đến đó). Sau đó, bật Nhà cung cấp dịch vụ đăng nhập của Google rồi nhấp vào Lưu. Lựa chọn này sẽ 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ọ.

Ngoài ra, hãy thoải mái đặt tên hiển thị công khai của ứng dụng thành Thân thiện Chat:

8290061806aacb46.pngS

Bật Cloud Storage

Ứng dụng sử dụng Cloud Storage để tải hình ảnh lên. Để bật Cloud Storage trên dự án Firebase của bạn, hãy truy cập vào phần Bộ nhớ rồi nhấp vào nút Bắt đầu. Làm theo các bước tại đó và đối với vị trí Cloud Storage, sẽ có một giá trị mặc định để sử dụng. Sau đó, nhấp vào Xong.

Thêm ứng dụng web

Trên Bảng điều khiển của Firebase, hãy thêm một ứng dụng web. Để thực hiện việc này, hãy chuyển đến phần Cài đặt dự án rồi di chuyển xuống mục Thêm ứng dụng. Chọn web làm nền tảng và chọn hộp để thiết lập tính năng Lưu trữ Firebase, sau đó đăng ký ứng dụng và nhấp vào Tiếp theo để thực hiện các bước còn lại, cuối cùng nhấp vào Tiếp tục đến bảng điều khiển.

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

Giao diện dòng lệnh (CLI) của Firebase sẽ cho phép bạn phân phát ứng dụng web cục bộ cũng như triển khai ứng dụng web và Cloud Functions.

Để cài đặt hoặc nâng cấp CLI, hãy chạy lệnh npm sau:

npm -g install firebase-tools

Để xác minh rằng CLI đã được cài đặt đúng cách, hãy mở một bảng điều khiển và chạy:

firebase --version

Đảm bảo phiên bản CLI của Firebase cao hơn 4.0.0 để có tất cả các tính năng mới nhất cần thiết cho Cloud Functions. Nếu không, hãy chạy npm install -g firebase-tools để nâng cấp như trình bày ở trên.

Uỷ quyền Giao diện dòng lệnh (CLI) của Firebase bằng cách chạy:

firebase login

Đảm bảo bạn đang ở trong thư mục cloud-functions-start, sau đó thiết lập Giao diện dòng lệnh (CLI) của Firebase để sử dụng Dự án Firebase của bạn:

firebase use --add

Tiếp theo, hãy chọn Mã dự án của bạn rồi làm theo hướng dẫn. Khi được nhắc, bạn có thể chọn bất kỳ Bí danh nào, chẳng hạn như codelab.

5. Triển khai và chạy ứng dụng web

Bây giờ, sau khi nhập và định cấu hình dự án, bạn đã sẵn sàng chạy ứng dụng web lần đầu tiên! Mở cửa sổ dòng lệnh, chuyển đến thư mục cloud-functions-start rồi triển khai ứng dụng web cho dịch vụ lưu trữ Firebase bằng cách sử dụng:

firebase deploy --except functions

Đây là kết quả trên bảng điều khiển mà bạn sẽ thấy:

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

Mở ứng dụng web

Dòng cuối cùng phải hiển thị URL lưu trữ. Ứng dụng web hiện sẽ được phân phát từ URL này, có dạng https://<project-id>.firebaseapp.com. Mở tệp đó. Bạn sẽ thấy giao diện người dùng đang hoạt động của ứng dụng nhắn tin.

Đăng nhập vào ứng dụng này bằng cách dùng nút ĐĂNG NHẬP BẰNG GOOGLE. Bạn có thể thêm một số tin nhắn và đăng hình ảnh:

3b1284f5144b54f6.pngS.

Nếu bạn đăng nhập vào ứng dụng này lần đầu trên một trình duyệt mới, hãy đảm bảo bạn cho phép thông báo khi được nhắc: 8b9d0c66dc36153d.png.

Chúng tôi sẽ cần bật thông báo sau này.

Nếu đã vô tình nhấp vào Chặn, bạn có thể thay đổi chế độ cài đặt này bằng cách nhấp vào nút 🔒 Secure ở bên trái của URL trong Chrome Omnibar rồi bật/tắt thanh bên cạnh mục Thông báo:

e926868b0546ed71.pngs

Bây giờ, chúng ta sẽ thêm một số chức năng bằng cách sử dụng Firebase SDK cho Cloud Functions.

6. Thư mục hàm

Chức năng đám mây cho phép bạn dễ dàng có mã chạy trên Đám mây mà không cần phải thiết lập máy chủ. Chúng tôi sẽ hướng dẫn cách tạo các hàm phản ứng với các sự kiện trong cơ sở dữ liệu của Firebase Auth, Cloud Storage và Firebase Firestore. Hãy bắt đầu với Xác thực.

Khi sử dụng Firebase SDK for Cloud Functions, mã Hàm của bạn sẽ nằm trong thư mục functions (theo mặc định). Mã Hàm của bạn cũng là ứng dụng Node.js nên cần có package.json để cung cấp một số thông tin về ứng dụng của bạn và liệt kê các phần phụ thuộc.

Để giúp bạn dễ dàng hơn, chúng tôi đã tạo tệp functions/index.js để chứa mã của bạn. Vui lòng kiểm tra tệp này trước khi tiếp tục.

cd functions
ls

Nếu bạn chưa quen với Node.js, thì việc tìm hiểu thêm về nút này trước khi tiếp tục lớp học lập trình có thể giúp ích cho bạn.

Tệp package.json đã liệt kê hai phần phụ thuộc bắt buộc: SDK Firebase cho Cloud Functions và SDK dành cho quản trị viên của Firebase. Để cài đặt các ứng dụng trên máy tính, hãy chuyển đến thư mục functions rồi chạy:

npm install

Bây giờ, hãy xem tệp index.js:

chỉ mục.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Chúng ta sẽ nhập các mô-đun được yêu cầu, sau đó viết ba Hàm thay cho TODO. Hãy bắt đầu bằng việc nhập các mô-đun Nút bắt buộc.

7. Nhập các chức năng đám mây và mô-đun Quản trị Firebase

Cần có 2 mô-đun trong lớp học lập trình này: firebase-functions cho phép viết các điều kiện kích hoạt và nhật ký Cloud Functions, trong khi firebase-admin cho phép sử dụng nền tảng Firebase trên máy chủ có quyền quản trị để thực hiện các thao tác như ghi vào Cloud Firestore hoặc gửi thông báo FCM.

Trong tệp index.js, hãy thay thế TODO đầu tiên bằng đoạn mã sau:

chỉ mục.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

SDK quản trị của Firebase có thể được tự động định cấu hình khi được triển khai trong môi trường Cloud Functions hoặc các vùng chứa Google Cloud Platform khác. Điều này xảy ra khi chúng ta gọi admin.initializeApp() mà không có đối số.

Bây giờ, hãy thêm một Hàm sẽ chạy khi người dùng đăng nhập lần đầu tiên vào ứng dụng trò chuyện. Chúng ta sẽ thêm một tin nhắn trò chuyện để chào mừng người dùng đó.

8. Chào mừng người dùng mới

Cấu trúc tin nhắn trong Chat

Các tin nhắn đăng lên nguồn cấp dữ liệu trò chuyện của friendlyChat được lưu trữ trong Cloud Firestore. Hãy cùng xem cấu trúc dữ liệu mà chúng ta sử dụng cho một thông báo. Để làm việc này, hãy đăng một tin nhắn mới có nội dung "Hello World" ("Xin chào thế giới") lên cuộc trò chuyện:

11f5a676fbb1a69a.pngS

Thông tin này sẽ xuất hiện như sau:

fe6d1c020d0744cf.png.

Trong Bảng điều khiển của Firebase, hãy nhấp vào Firestore Database (Cơ sở dữ liệu khôi phục) trong mục Build (Tạo). Bạn sẽ thấy tập hợp thông báo và một tài liệu chứa thông báo mà bạn đã viết:

442c9c10b5e2b245.pngS

Như bạn có thể thấy, tin nhắn trò chuyện được lưu trữ trong Cloud Firestore dưới dạng tài liệu, trong đó các thuộc tính name, profilePicUrl, text và timestamp được thêm vào bộ sưu tập messages.

Thêm thư chào mừng

Chức năng đám mây đầu tiên sẽ thêm một tin nhắn chào mừng người dùng mới vào cuộc trò chuyện. Để làm được điều này, chúng ta có thể sử dụng trình kích hoạt functions.auth().onCreate. Trình kích hoạt này sẽ chạy hàm này mỗi khi người dùng đăng nhập lần đầu tiên trong ứng dụng Firebase. Thêm hàm addWelcomeMessages vào tệp index.js:

chỉ mục.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

Việc thêm hàm này vào đối tượng exports đặc biệt là cách của Nút để làm cho hàm này có thể truy cập được bên ngoài tệp hiện tại và là yêu cầu bắt buộc đối với Cloud Functions.

Trong hàm trên, chúng ta sẽ thêm tin nhắn chào mừng mới do " Bot Firebase" đăng vào danh sách tin nhắn trò chuyện. Chúng ta thực hiện việc này bằng cách sử dụng phương thức add trong tập hợp messages trong Cloud Firestore, đây là nơi lưu trữ tin nhắn của cuộc trò chuyện.

Vì đây là một hoạt động không đồng bộ nên chúng ta cần trả về Promise (Lời hứa) cho biết thời điểm Cloud Firestore ghi xong để các Cloud Functions không thực thi quá sớm.

Triển khai các chức năng đám mây

Chức năng đám mây sẽ chỉ hoạt động sau khi bạn triển khai. Để thực hiện việc này, hãy chạy trên dòng lệnh:

firebase deploy --only functions

Đây là kết quả trên bảng điều khiển mà bạn sẽ thấy:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlypchat-1234/overview

Kiểm thử hàm

Sau khi triển khai chức năng này thành công, bạn cần phải có người dùng đăng nhập lần đầu tiên.

Mở ứng dụng trong trình duyệt bằng URL lưu trữ (ở dạng https://<project-id>.firebaseapp.com).
Với người dùng mới, hãy đăng nhập lần đầu tiên trong ứng dụng của bạn bằng nút Đăng nhập.

Nếu đã đăng nhập vào ứng dụng, bạn có thể mở Xác thực bảng điều khiển Firebase và xóa tài khoản của mình khỏi danh sách người dùng. Sau đó, hãy đăng nhập lại.

262535d1b1223c65.pngS

Sau khi bạn đăng nhập, tin nhắn chào mừng sẽ tự động hiển thị:

1c70e0d64b23525b.png.

9. Kiểm duyệt hình ảnh

Người dùng có thể tải mọi loại hình ảnh trong cuộc trò chuyện lên và điều quan trọng là bạn phải kiểm duyệt các hình ảnh phản cảm, đặc biệt là trên các nền tảng mạng xã hội công cộng. Trong BodyChat, những hình ảnh đang được xuất bản trong cuộc trò chuyện sẽ được lưu trữ vào Google Cloud Storage.

Với Cloud Functions, bạn có thể phát hiện những hình ảnh mới được tải lên bằng cách sử dụng trình kích hoạt functions.storage().onFinalize. Dịch vụ này sẽ chạy mỗi khi có tệp mới được tải lên hoặc sửa đổi trong Cloud Storage.

Để kiểm duyệt hình ảnh, chúng tôi sẽ thực hiện quy trình sau:

Kiểm tra xem hình ảnh có bị gắn cờ là Người lớn hay Bạo lực hay không bằng Cloud Vision API.
Nếu hình ảnh đã bị gắn cờ, hãy tải hình ảnh xuống trên bản sao Hàm đang chạy.
Làm mờ hình ảnh bằng ImageMagick.
Tải hình ảnh đã làm mờ lên Cloud Storage.

Bật Cloud Vision API

Vì chúng tôi sẽ sử dụng API Google Cloud Vision trong chức năng này, nên bạn phải bật API trên dự án Firebase của mình. Truy cập vào đường liên kết này, sau đó chọn dự án Firebase của bạn và bật API:

5c77fee51ec5de49.pngs

Cài đặt phần phụ thuộc

Để kiểm duyệt hình ảnh, chúng tôi sẽ sử dụng Thư viện ứng dụng Google Cloud Vision cho Node.js, @google-cloud/vision, để chạy hình ảnh thông qua Cloud Vision API nhằm phát hiện hình ảnh không phù hợp.

Để cài đặt gói này vào ứng dụng Cloud Functions, hãy chạy lệnh npm install --save sau. Hãy nhớ thực hiện việc này từ thư mục functions.

npm install --save @google-cloud/vision@2.4.0

Thao tác này sẽ cài đặt gói trên máy và thêm chúng dưới dạng phần phụ thuộc được khai báo trong tệp package.json.

Nhập và định cấu hình phần phụ thuộc

Để nhập các phần phụ thuộc đã cài đặt và một số mô-đun cốt lõi Node.js (path, os và fs) mà chúng ta cần trong phần này, hãy thêm các dòng sau vào đầu tệp index.js:

chỉ mục.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

Vì hàm của bạn sẽ chạy trong môi trường Google Cloud, nên bạn không cần phải định cấu hình thư viện Cloud Storage và Cloud Vision: các thư viện này sẽ được định cấu hình tự động để sử dụng dự án của bạn.

Phát hiện hình ảnh không phù hợp

Bạn sẽ sử dụng trình kích hoạt functions.storage.onChange Cloud Functions. Hàm này sẽ chạy mã của bạn ngay khi một tệp hoặc thư mục được tạo hoặc sửa đổi trong bộ chứa Cloud Storage. Thêm hàm blurOffensiveImages vào tệp index.js:

chỉ mục.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

Lưu ý rằng chúng ta đã thêm một số cấu hình của thực thể Cloud Functions sẽ chạy hàm này. Với .runWith({memory: '2GB'}), chúng ta yêu cầu thực thể này có 2 GB bộ nhớ thay vì mặc định, vì hàm này tiêu tốn nhiều bộ nhớ.

Khi hàm được kích hoạt, hình ảnh sẽ được chạy qua Cloud Vision API để phát hiện xem hình ảnh có bị gắn cờ là người lớn hay bạo lực hay không. Nếu phát hiện hình ảnh là không phù hợp dựa trên các tiêu chí này, chúng ta sẽ làm mờ hình ảnh đó. Việc này được thực hiện trong hàm blurImage như chúng ta sẽ thấy ở phần tiếp theo.

Làm mờ hình ảnh

Thêm hàm blurImage sau vào tệp index.js:

chỉ mục.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

Trong hàm trên, tệp nhị phân hình ảnh được tải xuống từ Cloud Storage. Sau đó, hình ảnh sẽ được làm mờ bằng công cụ convert của ImageMagick, và phiên bản được làm mờ sẽ được tải lên lại trên Bộ chứa lưu trữ. Tiếp theo, chúng ta xoá tệp trên thực thể Cloud Functions để giải phóng một số dung lượng ổ đĩa và chúng ta làm việc này vì chính phiên bản Cloud Functions đó có thể được dùng lại và nếu các tệp không được dọn dẹp, thì tệp đó có thể sẽ hết dung lượng ổ đĩa. Cuối cùng, chúng ta thêm một boolean vào tin nhắn trò chuyện để cho biết hình ảnh đã được kiểm duyệt và thao tác này sẽ kích hoạt quá trình làm mới tin nhắn trên ứng dụng.

Triển khai hàm

Hàm sẽ chỉ hoạt động sau khi bạn triển khai. Trên dòng lệnh, hãy chạy firebase deploy --only functions:

firebase deploy --only functions

Đây là kết quả trên bảng điều khiển mà bạn sẽ thấy:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Kiểm thử hàm

Sau khi triển khai hàm này thành công:

Mở ứng dụng trong trình duyệt bằng URL lưu trữ (ở dạng https://<project-id>.firebaseapp.com).
Sau khi đăng nhập vào ứng dụng này, hãy tải ảnh lên:
Chọn hình ảnh phản cảm đẹp nhất của bạn để tải lên (hoặc bạn có thể sử dụng thây ma ăn thịt này!) và sau vài phút, bạn sẽ thấy bài đăng làm mới bằng phiên bản hình ảnh được làm mờ:

10. Thông báo tin nhắn mới

Trong phần này, bạn sẽ thêm một Chức năng đám mây gửi thông báo cho những người tham gia cuộc trò chuyện khi có tin nhắn mới được đăng.

Bằng cách sử dụng Giải pháp gửi thông báo qua đám mây của Firebase (FCM), bạn có thể tin cậy gửi thông báo cho người dùng trên nhiều nền tảng. Để gửi thông báo cho người dùng, bạn cần có mã thông báo thiết bị FCM của họ. Ứng dụng web Chat mà chúng tôi đang sử dụng đã thu thập mã thông báo của thiết bị từ người dùng trong lần đầu tiên họ mở ứng dụng này trên một trình duyệt hoặc thiết bị mới. Những mã thông báo này được lưu trữ trên Cloud Firestore trong bộ sưu tập fcmTokens.

Nếu muốn tìm hiểu cách nhận mã thông báo thiết bị FCM trên ứng dụng web, bạn có thể tham khảo Lớp học lập trình về Firebase Web.

Gửi thông báo

Để phát hiện thời điểm đăng tin nhắn mới, bạn sẽ sử dụng trình kích hoạt functions.firestore.document().onCreate Cloud Functions. Hàm này sẽ chạy mã của bạn khi một đối tượng mới được tạo tại một đường dẫn nhất định của Cloud Firestore. Thêm hàm sendNotifications vào tệp index.js:

chỉ mục.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

Trong Hàm trên, chúng ta sẽ thu thập tất cả người dùng mã thông báo thiết bị từ cơ sở dữ liệu Cloud Firestore và gửi thông báo đến từng mã trong số này bằng hàm admin.messaging().sendToDevice.

Xoá mã thông báo

Cuối cùng, chúng ta muốn xoá những mã thông báo không còn hợp lệ. Điều này xảy ra khi mã thông báo mà chúng ta nhận được từ người dùng không còn được trình duyệt hoặc thiết bị sử dụng nữa. Ví dụ: trường hợp này xảy ra nếu người dùng đã thu hồi quyền gửi thông báo cho phiên duyệt web. Để thực hiện việc này, hãy thêm hàm cleanupTokens sau vào tệp index.js:

chỉ mục.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

Triển khai hàm

Hàm này sẽ chỉ hoạt động sau khi bạn triển khai. Để triển khai hàm, hãy chạy hàm này trong dòng lệnh:

firebase deploy --only functions

Đây là kết quả trên bảng điều khiển mà bạn sẽ thấy:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Kiểm thử hàm

Sau khi triển khai hàm này thành công, hãy mở ứng dụng trong trình duyệt bằng URL lưu trữ (ở dạng https://<project-id>.firebaseapp.com).
Nếu bạn đăng nhập vào ứng dụng này lần đầu tiên, hãy đảm bảo bạn cho phép thông báo khi được nhắc:
Đóng thẻ ứng dụng nhắn tin hoặc hiển thị một thẻ khác: Thông báo chỉ xuất hiện nếu ứng dụng đang chạy trong nền. Nếu bạn muốn tìm hiểu cách nhận thông báo khi ứng dụng đang chạy trên nền trước, hãy xem tài liệu của chúng tôi.
Đăng nhập vào ứng dụng bằng một trình duyệt khác (hoặc cửa sổ Ẩn danh), rồi đăng tin nhắn. Bạn sẽ thấy thông báo xuất hiện trong trình duyệt đầu tiên:

11. Xin chúc mừng!

Bạn đã sử dụng Firebase SDK cho Cloud Functions và thêm các thành phần phía máy chủ vào một ứng dụng trò chuyện.

Nội dung đã đề cập

Tạo Hàm đám mây bằng cách sử dụng SDK Firebase cho Hàm đám mây.
Kích hoạt Chức năng đám mây dựa trên các sự kiện Xác thực, Cloud Storage và Cloud Firestore.
Thêm tính năng hỗ trợ Giải pháp gửi thông báo qua đám mây của Firebase vào ứng dụng web.
Triển khai Chức năng đám mây bằng Giao diện dòng lệnh (CLI) của Firebase.

Các bước tiếp theo

Tìm hiểu về các loại điều kiện kích hoạt khác của Hàm đám mây.
Sử dụng Firebase và Cloud Functions với ứng dụng của riêng bạn.

Gửi thông báo cho ứng dụng web bằng giải pháp Gửi thông báo qua đám mây và Chức năng đám mây

1. Tổng quan

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

Bạn cần có

2. Nhận mã mẫu

Nhập ứng dụng khởi đầu

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

Tạo dự án

Nâng cấp lên Gói linh hoạt

Bật tính năng Xác thực của Google

Bật Cloud Storage

Thêm ứng dụng web

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

5. Triển khai và chạy ứng dụng web

Mở ứng dụng web

6. Thư mục hàm

chỉ mục.js

7. Nhập các chức năng đám mây và mô-đun Quản trị Firebase

chỉ mục.js

8. Chào mừng người dùng mới

Cấu trúc tin nhắn trong Chat

Thêm thư chào mừng

chỉ mục.js

Triển khai các chức năng đám mây

Kiểm thử hàm

9. Kiểm duyệt hình ảnh

Bật Cloud Vision API

Cài đặt phần phụ thuộc

Nhập và định cấu hình phần phụ thuộc

chỉ mục.js

Phát hiện hình ảnh không phù hợp

chỉ mục.js

Làm mờ hình ảnh

chỉ mục.js

Triển khai hàm

Kiểm thử hàm

10. Thông báo tin nhắn mới

Gửi thông báo

chỉ mục.js

Xoá mã thông báo

chỉ mục.js

Triển khai hàm

Kiểm thử hàm

11. Xin chúc mừng!

Nội dung đã đề cập

Các bước tiếp theo

Tìm hiểu thêm