Chức năng đám mây cho Firebase

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

1. Sơ lượt

Trong bảng mã này, bạn sẽ học cách sử dụng SDK Firebase cho Chức năng đám mây của Google để cải thiện ứng dụng Web trò chuyện và cách sử dụng Chức năng đám mây để gửi thông báo cho người dùng ứng dụng Trò chuyện.

3b1284f5144b54f6.png

Những gì bạn sẽ học

  • Tạo các Chức năng đám mây của Google bằng SDK Firebase.
  • Kích hoạt các chức năng đám mây dựa trên các sự kiện Auth, Cloud Storage và Cloud Firestore.
  • Thêm hỗ trợ Nhắn tin qua đám mây của Firebase vào ứng dụng web của bạn.

Những gì bạn cần

  • Một thẻ tín dụng. Chức năng đám mây cho Firebase yêu cầu gói Firebase Blaze, có nghĩa là bạn sẽ phải bật thanh toán cho dự án Firebase của mình bằng thẻ tín dụng.
  • IDE / trình soạn thảo 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 có cài đặt NodeJS v9.
  • Một trình duyệt chẳng hạn như Chrome.
  • Mã mẫu. Xem bước tiếp theo cho điều này.

2. Lấy 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 dành cho người mới bắt đầu

Sử dụng IDE của bạn, mở hoặc nhập android_studio_folder.png thư mục cloud-functions-start từ thư mục mã mẫu. Thư mục này chứa mã bắt đầu cho bảng mã bao gồm một Ứng dụng web trò chuyện đầy đủ chức năng.

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

Tạo dự án

Trong Bảng điều khiển Firebase , nhấp vào Thêm dự án và gọi nó là FriendlyChat .

Nhấp vào Tạo dự án .

Nâng cấp lên gói Blaze

Để sử dụng Chức năng đám mây 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 Blaze . Điều này sẽ yêu cầu bạn thêm thẻ tín dụng hoặc một công cụ thanh toán khác vào tài khoản Google Cloud của mình.

Tất cả các dự án Firebase, bao gồm cả những dự án trong gói Blaze, vẫn có quyền truy cập vào hạn ngạch sử dụng miễn phí cho Chức năng đám mây. Các bước được nêu trong bảng mã này sẽ nằm trong giới hạn sử dụng của cấp miễn phí. Tuy nhiên, bạn sẽ thấy các khoản phí nhỏ ( khoảng 0,03 đô la ) từ Cloud Storage được sử dụng để lưu trữ hình ảnh xây dựng Chức năng đám mây 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 thoải mái khi tiếp tục với gói Blaze, hãy cân nhắc sử dụng Bộ mô phỏng Firebase cho phép bạn mô phỏng Chức năng đám mây miễn phí trên máy cục bộ của mình.

Bật Google Auth

Để cho phép người dùng đăng nhập vào ứng dụng, chúng tôi sẽ sử dụng Google auth cần được bật.

Trong Bảng điều khiển Firebase, mở tab Phần xây dựng > Xác thực > Phương thức đăng nhập (hoặc nhấp vào đây để đến đó). Sau đó, kích hoạt Nhà cung cấp dịch vụ đăng nhập Google và nhấp vào Lưu . Điều 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, vui lòng đặt tên công khai của ứng dụng của bạn thành Trò chuyện thân thiện :

8290061806aacb46.png

Bật lưu trữ đám mây

Ứng dụng sử dụng Cloud Storage để tải ảnh lên. Để bật Lưu trữ đám mây trên dự án Firebase của bạn, hãy truy cập phần Bộ nhớ và nhấp vào nút Bắt đầu . Thực hiện các bước ở đó và đối với vị trí Cloud Storage, sẽ có một giá trị mặc định để sử dụng. Nhấp vào Hoàn tất sau đó.

Thêm ứng dụng web

Trên Bảng điều khiển Firebase, hãy thêm ứng dụng web. Để làm như vậy, hãy chuyển đến Cài đặt dự án và cuộn xuống Thêm ứng dụng . Chọn web làm nền tảng và chọn hộp thiết lập Lưu trữ Firebase, sau đó đăng ký ứng dụng và nhấp vào Tiếp theo trong phần còn lại của các bước, cuối cùng nhấp vào Tiếp tục với 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 Firebase (CLI) sẽ cho phép bạn phân phối ứng dụng web cục bộ và triển khai ứng dụng web cũng như Chức năng đám mây của bạn.

Để 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 chính xác, hãy mở bảng điều khiển và chạy:

firebase --version

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

Cấp quyền cho Firebase CLI bằng cách chạy:

firebase login

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

firebase use --add

Tiếp theo, chọn ID dự án của bạn và 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ờ bạn đã nhập và định cấu hình dự án của mình, 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, điều hướng đến thư mục cloud-functions-start và triển khai ứng dụng web lên máy chủ lưu trữ Firebase bằng cách sử dụng:

firebase deploy --except functions

Đây là đầu ra 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 sẽ hiển thị URL Lưu trữ. Ứng dụng web bây giờ sẽ được cung cấp từ URL này, phải có dạng https: // <project-id> .firebaseapp.com. Mở nó ra. Bạn sẽ thấy giao diện người dùng hoạt động của ứng dụng trò chuyện.

Đăng nhập vào ứng dụng bằng cách sử dụng nút ĐĂNG NHẬP VỚI GOOGLE và thoải mái thêm một số thông báo và đăng hình ảnh:

3b1284f5144b54f6.png

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

Sau đó, chúng tôi cần bật thông báo.

Nếu bạn đã vô tình nhấp vào Chặn , bạn có thể thay đổi cài đặt này bằng cách nhấp vào nút 🔒 Bảo mật ở bên trái của URL trong Thanh địa chỉ của Chrome và chuyển đổi thanh bên cạnh Thông báo :

e926868b0546ed71.png

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

6. Thư mục Chức năng

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

Khi sử dụng SDK Firebase cho Chức năng đám mây, mã Chức năng của bạn sẽ nằm trong thư mục functions (theo mặc định). Mã Chức năng của bạn cũng là một ứng dụng Node.js và do đó cần một 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 nơi mã của bạn sẽ chuyển đế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 , tìm hiểu thêm về nó trước khi tiếp tục chương trình codelab sẽ rất hữu ích.

Tệp package.json đã liệt kê hai phần phụ thuộc bắt buộc: SDK Firebase cho các chức năng đám mâySDK quản trị Firebase . Để cài đặt chúng cục bộ, hãy chuyển đến thư mục functions và chạy:

npm install

Bây giờ chúng ta hãy xem index.js :

index.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 tôi sẽ nhập các mô-đun được yêu cầu và sau đó viết ba Hàm thay cho các VIỆC CẦN LÀM. Hãy bắt đầu với việc nhập các mô-đun Node cần thiết.

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

Hai mô-đun sẽ được yêu cầu trong quá trình codelab này: firebase-functions cho phép ghi nhật ký và kích hoạt Chức năng đám mây trong khi firebase-admin cho phép sử dụng nền tảng Firebase trên máy chủ có quyền truy cập quản trị viên để thực hiện các hành động như ghi vào Cloud Firestore hoặc gửi thông báo FCM.

Trong index.js , thay thế TODO đầu tiên bằng những điều sau:

index.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ị viên Firebase có thể được định cấu hình tự động khi triển khai tới môi trường Chức năng đám mây hoặc các vùng chứa Google Cloud Platform khác và điều này xảy ra khi chúng tôi gọi admin.initializeApp() mà không có đối số.

Bây giờ, hãy thêm một Hàm chạy khi người dùng đăng nhập lần đầu tiên vào ứng dụng trò chuyện và chúng tôi 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 trò chuyện

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

11f5a676fbb1a69a.png

Điều này sẽ xuất hiện dưới dạng:

fe6d1c020d0744cf.png

Trong Bảng điều khiển Firebase, nhấp vào Cơ sở dữ liệu Firestore trong phần Xây dựng . Bạn sẽ thấy bộ sưu tập thư và một tài liệu có chứa thư bạn đã viết:

442c9c10b5e2b245.png

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 với các thuộc tính name , profilePicUrl , texttimestamp được thêm vào bộ sưu tập messages .

Thêm tin nhắn chào mừng

Chức năng Đám mây đầu tiên thêm thông báo chào mừng người dùng mới tham gia trò chuyện. Đối với điều này, chúng tôi có thể sử dụng hàm kích hoạt functions.auth().onCreate , sẽ chạy hàm 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 index.js của bạn:

index.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.');
});

Thêm chức năng này vào đối tượng exports đặc biệt là cách Node làm cho chức năng này có thể truy cập được bên ngoài tệp hiện tại và là bắt buộc đối với Chức năng đám mây.

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

Vì đây là một hoạt động không đồng bộ, chúng tôi cần trả lại Lời hứa cho biết khi Cloud Firestore viết xong để các Hàm trên đám mây 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 chúng. Để làm như vậy, hãy chạy điều này trên dòng lệnh:

firebase deploy --only functions

Đây là đầu ra 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 tra chức năng

Khi chức năng đã được triển khai thành công, bạn sẽ cần có người dùng đăng nhập lần đầu tiên.

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

262535d1b1223c65.png

  1. Sau khi bạn đăng nhập, một thông báo chào mừng sẽ tự động được hiển thị:

1c70e0d64b23525b.png

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

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

Với Chức năng đám mây, bạn có thể phát hiện tải lên hình ảnh mới bằng cách sử dụng trình kích hoạt functions.storage().onFinalize . Điều này sẽ chạy mỗi khi một 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:

  1. Kiểm tra xem hình ảnh có bị gắn cờ là Người lớn hoặc Bạo lực hay không bằng cách sử dụng API Cloud Vision .
  2. Nếu hình ảnh đã được gắn cờ, hãy tải xuống hình ảnh đó trên phiên bản Chức năng đang chạy.
  3. Làm mờ hình ảnh bằng ImageMagick .
  4. Tải hình ảnh bị mờ lên Cloud Storage.

Bật API Cloud Vision

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

5c77fee51ec5de49.png

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 khách Google Cloud Vision cho Node.js, @ google-cloud / vision , để chạy hình ảnh thông qua API Cloud Vision 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 Chức năng đám mây của bạn, hãy chạy lệnh npm install --save sau. Đảm bảo rằng bạn 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 cục bộ và thêm chúng dưới dạng phụ thuộc đã khai báo trong tệp package.json của bạn.

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

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

index.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ì chức năng của bạn sẽ chạy bên trong môi trường Google Cloud, nên không cần phải định cấu hình các thư viện Cloud Storage và Cloud Vision: chúng 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. Trình kích hoạt này sẽ chạy mã của bạn ngay sau khi tệp hoặc thư mục được tạo hoặc sửa đổi trong bộ lưu trữ đám mây. Thêm Chức năng blurOffensiveImages vào index.js của bạn:

index.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 tôi đã thêm một số cấu hình của phiên bản Chức năng đám mây sẽ chạy chức năng. Với .runWith({memory: '2GB'}) , chúng tôi yêu cầu phiên bản có bộ nhớ 2GB thay vì mặc định, vì hàm này tốn nhiều bộ nhớ.

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

Làm mờ hình ảnh

Thêm hàm blurImage sau vào index.js của bạn:

index.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 chức năng trên, tệp nhị phân hình ảnh được tải xuống từ Cloud Storage. Sau đó, hình ảnh được làm mờ bằng cách sử dụng công cụ convert của ImageMagick và phiên bản làm mờ được tải lên lại trên Nhóm lưu trữ. Tiếp theo, chúng tôi xóa tệp trên phiên bản Cloud Functions để giải phóng một số dung lượng đĩa và chúng tôi thực hiện việc này vì cùng một phiên bản Cloud Functions có thể được sử dụng lại và nếu các tệp không được dọn dẹp, nó có thể hết dung lượng đĩa. Cuối cùng, chúng tôi thêm boolean vào tin nhắn trò chuyện cho biết hình ảnh đã được kiểm duyệt và điều này sẽ kích hoạt làm mới tin nhắn trên ứng dụng khách.

Triển khai chức năng

Chức năng sẽ chỉ hoạt động sau khi bạn đã triển khai nó. Trên dòng lệnh, chạy firebase deploy --only functions :

firebase deploy --only functions

Đây là đầu ra 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 tra chức năng

Khi chức năng đã được triển khai thành công:

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

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

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

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

Nếu bạn muốn tìm hiểu cách nhận mã thông báo thiết bị FCM trên một ứng dụng web, bạn có thể xem qua Firebase Web Codelab .

Gửi thông báo

Để phát hiện khi nào tin nhắn mới được đăng, bạn sẽ sử dụng trình kích functions.firestore.document().onCreate Cloud Functions, 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 chức năng sendNotifications vào index.js của bạn:

index.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 Chức năng trên, chúng tôi đang thu thập tất cả các mã thông báo thiết bị của người dùng từ cơ sở dữ liệu Cloud Firestore và gửi thông báo cho từng mã thông báo này bằng cách sử dụng hàm admin.messaging().sendToDevice .

Dọn dẹp các mã thông báo

Cuối cùng, chúng tôi muốn loại bỏ các 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 tôi đã từng nhận được từ người dùng không được trình duyệt hoặc thiết bị sử dụng nữa. Ví dụ: điều này xảy ra nếu người dùng đã thu hồi quyền thông báo cho phiên trình duyệt. Để thực hiện việc này, hãy thêm hàm cleanupTokens sau vào index.js của bạn:

index.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 chức năng

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

firebase deploy --only functions

Đây là đầu ra 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 tra chức năng

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

11. Xin chúc mừng!

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

Những gì chúng tôi đã đề cập

  • Tạo các chức năng đám mây bằng cách sử dụng SDK Firebase cho các chức năng đám mây.
  • Kích hoạt các chức năng đám mây dựa trên các sự kiện Auth, Cloud Storage và Cloud Firestore.
  • Thêm hỗ trợ Nhắn tin qua đám mây của Firebase vào ứng dụng web của bạn.
  • Triển khai các Chức năng đám mây bằng Firebase CLI.

Bước tiếp theo

Tìm hiểu thêm