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

1. Tổng quan

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.
  • Biên tập viên IDE / văn bản của sự lựa chọn của bạ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 v8.
  • 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

Clone kho 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 cloud-functions-start thư mục 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 căn cứ hỏa lực console bấm 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 đám mây Chức năng cho căn cứ hỏa lực bạn sẽ có thể nâng cấp dự án căn cứ hỏa lực của mình vào kế hoạch 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ấp miễn phí. Tuy nhiên bạn sẽ thấy chi phí nhỏ ( khoảng $ 0.03 ) từ Cloud Storage được sử dụng để lưu trữ đám mây của bạn Chức năng xây dựng hình ảnh.

Nếu bạn không có quyền truy cập vào một thẻ tín dụng hoặc không thoải mái khi tiếp tục với kế hoạch Blaze, xem xét sử dụng các căn cứ hỏa lực Emulator Suite mà sẽ cho phép bạn để mô phỏng đám mây Chức năng miễn phí trên máy tính cục bộ của bạn.

Bật Google Auth

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

Trong Console căn cứ hỏa lực mở Phát triển phần> Xác thực> ĐĂNG NHẬP PHƯƠNG PHÁP tab (hoặc bấm vào đây để đi đến đó), bạn cần phải kích hoạt Google Đăng-in cung cấp 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ọ.

Cũng cảm thấy tự do để thiết lập tên phải đối mặt với công chúng về ứng dụng của bạn để thân thiện trò chuyện:

8290061806aacb46.png

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

Ứng dụng sử dụng Cloud Storage để tải ảnh lên. Để kích hoạt tính năng Cloud Storage trong chuyến thăm dự án căn cứ hỏa lực của bạn phần lưu trữ và nhấn vào nút Get Started. Sau đó Click Got Nó khi bạn nhận được từ chối trách nhiệm về các quy tắc an ninh.

842ad84821323ef5.png

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

Hãy chắc chắn rằng phiên bản của căn cứ hỏa lực CLI là 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 Cloud Chức năng. Nếu không, hãy chạy npm install -g firebase-tools để nâng cấp như trên.

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

firebase login

Hãy chắc chắn rằng bạn đang ở trong cloud-functions-start thư mục sau đó thiết lập các căn cứ hỏa lực CLI để sử dụng Dự án căn cứ hỏa lực của bạn:

firebase use --add

Sau đó 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ỳ Alias, như codelab ví dụ.

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ở một bảng điều khiển ở cloud-functions-start thư mục và chạy firebase deploy --except functions này sẽ chỉ triển khai các ứng dụng web để căn cứ hỏa lực lưu trữ:

firebase deploy --except functions

Đây là đầu ra bảng điều khiển 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 Hosting. Ứ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 SIGN-IN VỚI GOOGLE và cảm thấy tự do để thêm một số thông điệp và bài 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 này, chúng tôi cần bạn bật thông báo.

Nếu bạn đã vô tình nhấp Khối bạn có thể thay đổi cài đặt này bằng cách nhấp vào nút 🔒 an toàn ở bên trái của URL trong các Omnibar Chrome và chọn Notifications> Luôn Cho phép trên trang web này:

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 tôi sẽ hướng dẫn bạn cách xây dựng các hàm phản ứng với các sự kiện Firebase Auth, Cloud Storage và Firebase Realtime Database. Hãy bắt đầu với Auth.

Khi sử dụng các căn cứ hỏa lực SDK cho Cloud Chức năng, mã chức năng của bạn sẽ sống dưới functions thư mục (theo mặc định). Đang Chức năng của bạn cũng là một Node.js ứng dụng và do đó cần có một package.json cung cấp cho một số thông tin về ứng dụng của bạn và danh sách phụ thuộc.

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

cd functions
ls

Nếu bạn không quen thuộc với Node.js nó sẽ giúp để tìm hiểu thêm về nó trước khi tiếp tục codelab.

Các tập tin package.json đã liệt kê hai phụ thuộc yêu cầu: các căn cứ hỏa lực SDK cho Cloud Chức năng và các căn cứ hỏa lực SDK quản trị . Để cài đặt chúng tại địa phương chạy npm install từ functions thư mục:

npm install

Hãy bây giờ có một cái nhìn tại các index.js file:

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.

Trước tiên, 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. Đầu tiên, hãy 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 codelab này, firebase-functions mô-đun cho phép chúng ta viết hàm Mây kích hoạt quy tắc, trong khi firebase-admin mô-đun cho phép chúng ta sử dụng nền tảng căn cứ hỏa lực trên một máy chủ với quyền truy cập admin, ví dụ để ghi vào Cloud Firestore hoặc gửi thông báo FCM.

Trong index.js tập tin, thay thế đầu tiên TODO với những điều sau đây:

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 trên môi trường Chức năng đám mây hoặc các vùng chứa Google Cloud Platform khác. Đây là những gì chúng ta làm ở trên khi gọi admin.initializeApp();

Bây giờ, hãy thêm một Chức năng chạy khi người dùng đăng nhập lần đầu tiên vào ứng dụng trò chuyện của bạ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 ứng dụng giao diện điều khiển căn cứ hỏa lực của bạn bấm vào Cơ sở dữ liệu bên dưới phần Phát triển. 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 thấy, các thông điệp trò chuyện được lưu trữ trong đám mây FireStore như một tài liệu với name , profilePicUrl , texttimestamp thuộc tính thêm vào messages bộ sưu tập.

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

Chức năng đám mây đầu tiên cho biết thêm một thông điệp rằng đón chào những người dùng mới vào chat. Đối với điều này chúng ta có thể sử dụng cò functions.auth().onCreate chạy chức năng mỗi khi một người dùng đăng nhập lần đầu tiên trong ứng dụng căn cứ hỏa lực của bạn. Thêm addWelcomeMessages hoạt động vào bạn index.js file:

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  console.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(),
  });
  console.log('Welcome message written to database.');
});

Thêm chức năng này để đặc biệt exports đối tượng là cách để làm cho các chức năng bên ngoài truy cập của tập tin hiện tại Node và là cần thiết cho đám mây Chức năng.

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 làm điều này bằng cách sử dụng các add phương pháp trên messages thu thập trong Cloud FireStore đó là nơi các thông điệp của trò chuyện được lưu trữ.

Vì đây là một hoạt động không đồng bộ, chúng ta cần phải trả lại Promise chỉ khi Cloud FireStore ghi đã kết thúc, do đó chức năng không thoát khỏi việc thực hiện quá sớm.

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 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 của bạn bằng cách sử dụng URL lưu trữ (theo hình thức https://<project-id>.firebaseapp.com ).
  2. Với một người dùng mới, đăng nhập lần đầu tiên trong ứng dụng của bạn bằng cách sử dụng nút Đăng nhập.

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 những hình ảnh đang được công bố để trò chuyện được lưu trữ vào Google Cloud Storage .

Với Cloud Chức năng, bạn có thể phát hiện cập nhật hình ảnh mới bằng cách sử dụng functions.storage().onFinalize cò. Đ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 các hình ảnh được gắn cờ là dành cho người lớn hoặc bạo lực bằng cách sử dụng API của Cloud Vision
  2. Nếu hình ảnh đã bị gắn cờ, hãy tải xuống trên phiên bản Hàm đang chạy
  3. Làm mờ hình ảnh sử dụ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. Làm theo liên kết này , chọn dự án căn cứ hỏa lực của bạn và cho phép các API:

5c77fee51ec5de49.png

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

Để kiểm duyệt hình ảnh, chúng tôi sẽ cần một vài gói Node.js:

  • Thư viện Khách hàng Google Cloud Vision cho Node.js: @ google-cloud / tầm nhìn để chạy các hình ảnh thông qua API của Cloud Vision để phát hiện những hình ảnh không phù hợp.
  • Một thư viện Node.js cho phép chúng ta chạy các quá trình: con-process-lời hứa để chạy ImageMagick kể từ khi công cụ dòng lệnh ImageMagick được cài sẵn trên tất cả các trường hợp chức năng.

Để cài đặt hai gói này vào ứng dụng Chức năng Cloud Print của bạn, chạy sau npm install --save lệnh. Hãy chắc chắn rằng bạn làm điều này từ functions thư mục.

npm install --save @google-cloud/vision@0.12.0 child-process-promise@2.2.1

Điều này sẽ cài đặt hai gói trong nước và thêm chúng như phụ thuộc khai báo trong bạn package.json tập tin.

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

Để nhập hai phụ thuộc đã được cài đặt và một số module Node.js lõi ( path , osfs ) mà chúng ta sẽ cần trong phần này thêm dòng sau vào phía trên cùng của bạn index.js file:

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision();
const spawn = require('child-process-promise').spawn;

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ẽ được sử dụng functions.storage.onChange Mây Chức năng kích hoạt chạy mã của bạn trong thời gian sớm như một tập tin hoặc thư mục được tạo ra hoặc sửa đổi trong một cái xô Cloud Storage. Thêm blurOffensiveImages Chức năng vào bạn index.js file:

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 image = {
        source: {imageUri: `gs://${object.bucket}/${object.name}`},
      };

      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(image);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.types.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        console.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      console.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 chức năng dụ Cloud sẽ chạy chức năng, với .runWith({memory: '2GB'}) chúng tôi đang yêu cầu rằng các trường hợp bị 2GB bộ nhớ hơn là mặc định, điều này sẽ giúp như thế này chức năng là bộ nhớ chuyên sâu.

Khi chức năng được kích hoạt, hình ảnh được chạy qua API Cloud Vision để phát hiện xem hình ảnh có bị gắn cờ là người lớn hoặc 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 đang làm mờ hình ảnh được thực hiện trong blurImage chức năng mà chúng ta sẽ xem tiếp theo.

Làm mờ hình ảnh

Thêm dòng sau blurImage chức năng trong bạn index.js file:

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});
  console.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await spawn('convert', [tempLocalFile, '-channel', 'RGBA', '-blur', '0x24', tempLocalFile]);
  console.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  console.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  console.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  console.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 sử dụng mờ ImageMagick của convert công cụ và phiên bản mờ là tái tải lên trên Bucket lưu trữ. Sau đó, chúng tôi xóa tệp trên phiên bản Chức năng đám mây để giải phóng một số dung lượng ổ đĩa, chúng tôi làm điều này vì cùng một phiên bản Hàm đám mây tương tự có thể được sử dụng lại và nếu tệp không được dọn dẹp, nó có thể hết đĩ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, điều này sẽ kích hoạt làm mới tin nhắn trên máy 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à kết quả đầu ra của 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 của bạn bằng cách sử dụng URL lưu trữ (theo hình thức 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 tấn công tốt nhất của bạn để tải lên (hoặc bạn có thể sử dụng thịt ăn Zombie !) Và sau một vài phút, bạn sẽ thấy làm mới bài viết của bạn với một 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 một tin nhắn mới được đăng.

Sử dụng căn cứ hỏa lực Cloud Messaging (FCM), bạn có thể gửi thông báo cho người dùng của bạn trong một nền tảng chéo và 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. Những thẻ được lưu trữ trong đám mây FireStore trong fcmTokens bộ sưu tập.

Nếu bạn muốn tìm hiểu làm thế nào để có được thẻ thiết bị FCM trên một ứng dụng web mà bạn có thể đi qua các căn cứ hỏa lực Web Codelab .

Gửi thông báo

Để phát hiện khi có thư mới được đăng tải, bạn sẽ được sử dụng functions.firestore.document().onCreate Mây Chức năng kích hoạt chạy mã của bạn khi một đối tượng mới được tạo ra tại một con đường nhất định của Cloud FireStore. Thêm sendNotifications hoạt động vào bạn index.js file:

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);
      console.log('Notifications have been sent and tokens cleaned up.');
    }
  });

Trong chức năng trên, chúng tôi đang thu thập thẻ thiết bị tất cả người dùng từ cơ sở dữ liệu đám mây FireStore và gửi một thông báo đến từng sử dụng admin.messaging().sendToDevice chức năng.

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

Cuối cùng, chúng tôi muốn xóa các mã thông báo không còn hợp lệ nữa. Đ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 của mình. Để thực hiện điều này add sau cleanupTokens hoạt động trong bạn index.js file:

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) {
     console.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

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 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 đã triển khai thành công, mở ứng dụng của bạn trong trình duyệt của bạn bằng cách sử dụng URL lưu trữ (theo hình thức 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 làm thế nào để nhận được tin nhắn trong khi ứng dụng của bạn là ở mặt trước có một cái nhìn tại tài liệu hướng dẫn 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.
  • Các chức năng đám mây đã triển khai bằng Firebase CLI.

Bước tiếp theo

Tìm hiểu thêm