פונקציות ענן עבור Firebase

1. סקירה כללית

במעבדת קוד זה, תלמד כיצד להשתמש ב-Firebase SDK עבור Google Cloud Functions כדי לשפר אפליקציית Chat Web וכיצד להשתמש ב-Cloud Functions כדי לשלוח הודעות למשתמשים באפליקציית Chat.

3b1284f5144b54f6.png

מה תלמד

  • צור פונקציות של Google Cloud באמצעות Firebase SDK.
  • הפעל פונקציות ענן על סמך אירועי Auth, Cloud Storage ו-Cloud Firestore.
  • הוסף תמיכה ב-Firebase Cloud Messaging לאפליקציית האינטרנט שלך.

מה אתה צריך

  • כרטיס אשראי. Cloud Functions for Firebase דורשת את תוכנית Firebase Blaze, מה שאומר שתצטרך לאפשר חיוב בפרויקט Firebase שלך ​​באמצעות כרטיס אשראי.
  • עורך IDE / טקסט על פי בחירתך כגון WebStorm , Atom או Sublime .
  • מסוף להפעלת פקודות מעטפת עם NodeJS v9 מותקן.
  • דפדפן כמו Chrome.
  • הקוד לדוגמה. ראה את השלב הבא עבור זה.

2. קבל את הקוד לדוגמה

לשבט את מאגר GitHub משורת הפקודה:

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

ייבא את אפליקציית המתנע

באמצעות ה-IDE שלך, פתח או ייבא את android_studio_folder.png cloud-functions-start ספרייה מספריית דוגמת קוד. ספרייה זו מכילה את קוד ההתחלה של מעבדת הקוד המורכבת מאפליקציית Chat Web פונקציונלית מלאה.

3. צור פרויקט Firebase והגדר את האפליקציה שלך

צור פרויקט

בשנת Firebase Console , לחץ על הוספת פרויקט וקוראים לזה FriendlyChat.

לחץ על צור הפרויקט.

שדרג לתוכנית Blaze

על מנת להשתמש בפונקציות ענן עבור Firebase, תצטרך upgade פרויקט Firebase שלך תוכנית החיוב Blaze . זה ידרוש ממך להוסיף כרטיס אשראי או אמצעי חיוב אחר לחשבון Google Cloud שלך.

לכל הפרויקטים של Firebase, כולל אלה בתוכנית Blaze, עדיין יש גישה למכסות השימוש החינמיות עבור פונקציות ענן. השלבים המתוארים ב-codelab זה ייפלו במסגרת מגבלות השימוש בשכבות החינמיות. עם זאת, אתה תראה חיובים קטנים ( כ 0.03 $ ) מן אחסון ענן אשר משמש לארח את התמונות לבנות פונקציות קלאוד שלך.

אם אין לך גישה לכרטיס אשראי או לא נוח המשך לתוכנית Blaze, שקול להשתמש Suite Emulator Firebase אשר יאפשר לך לחקות פונקציות ענן בחינם במחשב המקומי.

הפעל את Google Auth

כדי לאפשר למשתמשים להיכנס לאפליקציה, נשתמש ב-Google Auth שצריך להפעיל.

בשנת Firebase Console, פתח את קטע Build> אימות> כניסת כרטיסיית שיטה (או לחץ כאן כדי ללכת לשם). לאחר מכן יש להפעיל את כניסת Google ספק ולחץ על שמור. זה יאפשר למשתמשים להיכנס באפליקציית האינטרנט עם חשבונות Google שלהם.

כמו כן, אל תהסס להגדיר את שם פונה לציבור של האפליקציה כדי ידידותי צ'אט:

8290061806aacb46.png

הפעל אחסון בענן

האפליקציה משתמשת ב-Cloud Storage כדי להעלות תמונות. כדי לאפשר אחסון ענן על פרויקט Firebase שלך, לבקר את קטע האחסון ולחץ על הלחצן התחלת עבודה. עבור על השלבים שם, ועבור מיקום Cloud Storage, יהיה ערך ברירת מחדל לשימוש. לחץ על סיום לאחר מכן.

הוסף אפליקציית אינטרנט

ב-Firebase Console, הוסף אפליקציית אינטרנט. לשם כך, ללכת הגדרות הפרויקט ואת לגלול למטה כדי להוסיף את האפליקציה. פיק האינטרנט כפלטפורמה וסמן את התיבה להקמת Firebase אירוח, אז לרשום את היישום ולחץ על הבא לשארית הצעדים, ולבסוף לחיצה על המשך למסוף.

4. התקן את ממשק שורת הפקודה של Firebase

ממשק שורת הפקודה של Firebase (CLI) יאפשר לך לשרת את אפליקציית האינטרנט באופן מקומי ולפרוס את אפליקציית האינטרנט ואת פונקציות הענן שלך.

כדי להתקין או לשדרג את ה-CLI הפעל את הפקודה npm הבאה:

npm -g install firebase-tools

כדי לוודא שה-CLI הותקן כהלכה, פתח מסוף והפעל:

firebase --version

ודא את הגירסה של CLI Firebase הוא מעל 4.0.0, כך יש לו את כל התכונות העדכניות ביותר ודרוש לפונקציות ענן. אם לא, לרוץ npm install -g firebase-tools לשדרג כפי שפורט לעיל.

אשר את Firebase CLI על ידי הפעלת:

firebase login

ודא שאתה נמצא cloud-functions-start הספרייה, אז להגדיר את Firebase CLI להשתמש פרויקט Firebase שלך:

firebase use --add

לאחר מכן, בחר את מזהה הפרויקט שלך ובצע את ההוראות. כאשר תתבקש, אתה יכול לבחור כל כינוי, כגון codelab .

5. פרוס והפעל את אפליקציית האינטרנט

כעת, לאחר שייבאת והגדרת את הפרויקט שלך, אתה מוכן להפעיל את אפליקציית האינטרנט בפעם הראשונה! פתח חלון מסוף, נווט אל cloud-functions-start התיקייה, ולפרוס את אפליקציית אינטרנט Firebase אירוח באמצעות:

firebase deploy --except functions

זה פלט המסוף שאתה צריך לראות:

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

פתח את אפליקציית האינטרנט

השורה האחרונה צריכה להציג את כתובת ה- URL אירוח. כעת יש להגיש את אפליקציית האינטרנט מכתובת האתר הזו, שאמורה להיות בצורת https://<project-id>.firebaseapp.com. פתח את זה. אתה אמור לראות את ממשק המשתמש המתפקד של אפליקציית צ'אט.

כניסה לאפליקציית באמצעות לחצן להיכנס עם GOOGLE אל תהסס להוסיף כמה הודעות ותמונות פוסט:

3b1284f5144b54f6.png

אם אתה נכנס לאפליקציה בפעם הראשונה בדפדפן חדש, ודא שאתה מתיר התראות כאשר תתבקש: 8b9d0c66dc36153d.png

נצטרך להפעיל התראות בשלב מאוחר יותר.

אם לחצת בלוק בטעות, אתה יכול לשנות הגדרה זו על ידי לחיצה על כפתור 🔒 מאובטח בצד שמאל של ה- URL של Chrome Omnibar ואת החלפת בבר שליד הודעות:

e926868b0546ed71.png

כעת, נוסיף פונקציונליות כלשהי באמצעות Firebase SDK עבור פונקציות ענן.

6. ספריית הפונקציות

פונקציות ענן מאפשרות לך לקבל בקלות קוד שפועל בענן מבלי שתצטרך להגדיר שרת. אנו נלמד כיצד לבנות פונקציות המגיבות לאירועי Firebase Auth, Cloud Storage ואירועי מסד נתונים של Firebase Firestore. בואו נתחיל עם Auth.

בעת השימוש ב- SDK Firebase עבור פונקציות ענן, קוד הפונקציות שלך יחיה תחת functions הספרייה (כברירת מחדל). קוד הפונקציות שלך הוא גם Node.js אפליקציה ולכן צריך package.json שנותן קצת מידע על תלות אפליקצית רשימות שלך.

כדי להקל עליך, אנחנו כבר יצרנו את functions/index.js הקובץ שבו הקוד שלך ילך. אל תהסס לבדוק את הקובץ הזה לפני שתמשיך הלאה.

cd functions
ls

אם אתה לא מכיר עם Node.js , ללמוד יותר על זה לפני המשך codelab יהיה מועיל.

package.json הקובץ כבר מפרט שתי תלוי דרוש: את Firebase SDK עבור פונקציות ענן ואת SDK של ניהול Firebase . כדי להתקין אותם באופן מקומי, ללכת functions תיקיית ריצה:

npm install

בואו עכשיו נעיף מבט על 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.

נייבא את המודולים הנדרשים ולאחר מכן נכתוב שלוש פונקציות במקום ה-TODOs. נתחיל בייבוא ​​מודולי ה-Node הנדרשים.

7. ייבא את המודולים של Cloud Functions ו-Firebase Admin

שני מודולים יידרשו במהלך codelab זה: firebase-functions מאפשרת כתיבת פונקציות ענן טריגרים ויומני בעוד firebase-admin מאפשרת באמצעות פלטפורמת Firebase בשרת עם גישת מנהל לעשות פעולות כגון כתיבת ענן Firestore או שליחת הודעות FCM.

בשנות ה index.js הקובץ, להחליף את הראשון TODO עם הבאה:

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 Admin Firebase יכול להיות מוגדר באופן אוטומטי כאשר נפרסו לסביבת פונקציות ענן או מכולות בפלטפורמת הענן של Google אחרות, וזה קורה כאשר אנו קוראים admin.initializeApp() ללא נימוקים.

כעת, בואו נוסיף פונקציה שפועלת כאשר משתמש נכנס בפעם הראשונה באפליקציית הצ'אט, ונוסיף הודעת צ'אט כדי לקבל את פני המשתמש.

8. ברוכים הבאים משתמשים חדשים

מבנה הודעות הצ'אט

הודעות שפורסמו לעדכון הצ'אט של FriendlyChat מאוחסנות ב-Cloud Firestore. בואו נסתכל על מבנה הנתונים בו אנו משתמשים עבור הודעה. כדי לעשות זאת, פרסם הודעה חדשה לצ'אט עם הכיתוב "שלום עולם":

11f5a676fbb1a69a.png

זה אמור להופיע כ:

fe6d1c020d0744cf.png

בשנת Firebase Console, לחץ על מסד Firestore תחת הסעיף בנה. אתה אמור לראות את אוסף ההודעות ומסמך אחד המכיל את ההודעה שכתבת:

442c9c10b5e2b245.png

כפי שאתה יכול לראות, הודעות צ'אט מאוחסנות ענן Firestore כמסמך עם name , profilePicUrl , text , וכן timestamp תכונות שנוספו messages אוספות.

הוספת הודעות קבלת פנים

פונקצית הענן הראשונה מוסיפה הודעה מברכת משתמשים חדשים פקה. לשם כך, אנו יכולים להשתמש ההדק functions.auth().onCreate , אשר מפעילה את הפונקציה בכל פעם שמשתמש נכנס בפעם הראשונה ביישום Firebase. מוסיפים את addWelcomeMessages לתפקד לתוך שלך index.js הקובץ:

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

הוספת פונקציה זו אל מיוחד exports האובייקט היא הדרך של הצומת של קבלה מבחוץ הפונקציה הנגישה של הקובץ הנוכחי נדרשה עבור פונקציות ענן.

בפונקציה שלמעלה, אנו מוסיפים הודעת קבלת פנים חדשה שפורסמה על ידי "Firebase Bot" לרשימת הודעות הצ'אט. אנו עושים זאת באמצעות add השיטה על messages גבייה ענן Firestore, וזו בדיוק המטרה של הודעות של הצ'אט מאוחסנים.

מכיוון שזהו מבצע אסינכרוני, אנחנו צריכים להחזיר את ההבטחה המציין כאשר ענן Firestore יש בכתיבה מוגמרת ולכן פונקציות קלאוד לא לבצע מוקדם מדי.

פרוס פונקציות ענן

פונקציות ענן יהיו פעילות רק לאחר שתפרוס אותן. כדי לעשות זאת, הפעל את זה בשורת הפקודה:

firebase deploy --only functions

זה פלט המסוף שאתה צריך לראות:

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

בדוק את הפונקציה

לאחר פריסת הפונקציה בהצלחה, יהיה עליך משתמש שייכנס בפעם הראשונה.

  1. פתח את היישום שלך בדפדפן שלך באמצעות אתר שמארחת (בצורת https://<project-id>.firebaseapp.com ).
  2. עם משתמש חדש, היכנס בפעם הראשונה את היישום שלך באמצעות הלחצן הכניסה.
  • אם נכנסת כבר אל, יישום, תוכל לפתוח Firebase קונסולת אימות ומחק את החשבון שלך מהרשימה של משתמשים. לאחר מכן, היכנס שוב.

262535d1b1223c65.png

  1. לאחר הכניסה, הודעת פתיחה אמורה להופיע באופן אוטומטי:

1c70e0d64b23525b.png

9. ניהול תמונות

משתמשים יכולים להעלות את כל סוגי התמונות בצ'אט, ותמיד חשוב למתן תמונות פוגעניות, במיוחד בפלטפורמות חברתיות ציבוריות. בשנת FriendlyChat, התמונות מתבצע פרסום בצ'אט מאוחסנים לתוך Google Cloud Storage .

עם פונקציות ענן, אתה יכול לזהות להעלאת תמונות חדשות באמצעות functions.storage().onFinalize ההדק. זה יפעל בכל פעם שקובץ חדש מועלה או משתנה ב-Cloud Storage.

כדי למתן תמונות, נעבור את התהליך הבא:

  1. בדוק אם התמונה למבוגים בלבד או אלימים באמצעות API חזון קלאוד .
  2. אם התמונה סומנה, הורד אותה במופע Functions הפועל.
  3. טשטש את התמונה באמצעות ImageMagick .
  4. העלה את התמונה המטושטשת ל-Cloud Storage.

הפעל את Cloud Vision API

מכיוון שנשתמש ב-Google Cloud Vision API בפונקציה זו, עליך להפעיל את ה-API בפרויקט Firebase שלך. בצע קישור זה , ולאחר מכן בחר פרויקט Firebase שלך ולאפשר API:

5c77fee51ec5de49.png

התקנת תלות

לתמונות מתונות, נשתמש בספריית הלקוח Google Cloud חזון Node.js, @ google-ענן / חזון , לרוץ תמונות באמצעות API חזון קלאוד לזהות תמונות לא הולמות.

כדי להתקין את החבילה הזו לתוך האפליקציה פונקציות קלאוד שלך, להפעיל את הבאים npm install --save הפקודה. ודא כי אתה עושה את זה מן functions הספרייה.

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

זה יתקין את החבילה מקומית ולהוסיף אותם כתלות הכריזה שלך package.json קובץ.

ייבוא ​​והגדר תלות

כדי לייבא את התלות שהותקנו וכמה מודולים הליבה Node.js ( path , os ו- fs ) כי נצטרך בסעיף זה, להוסיף את השורות הבאות בראש שלך index.js הקובץ:

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');

מכיוון שהפונקציה שלך תפעל בתוך סביבת Google Cloud, אין צורך להגדיר את ספריות Cloud Storage ו-Cloud Vision: הן יוגדרו אוטומטית לשימוש בפרויקט שלך.

זיהוי תמונות לא מתאימות

אתה תהיה באמצעות functions.storage.onChange הדק פונקציות קלאוד, אשר מריץ את הקוד שלך בהקדם קובץ או תיקייה נוצר או שונה בתוך דלי אחסון ענן. מוסיפים את blurOffensiveImages פונקציה לתוך שלך index.js הקובץ:

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

שימו לב שהוספנו תצורה מסוימת של מופע Cloud Functions שיריץ את הפונקציה. עם .runWith({memory: '2GB'}) , אנחנו מבקשים כי למשל מקבל 2GB של זיכרון במקום ברירת המחדל, כי פונקציה זו צורכת זיכרון רב.

כאשר הפונקציה מופעלת, התמונה מופעלת דרך ממשק ה-API של Cloud Vision כדי לזהות אם היא מסומנת כמבוגרת או אלימה. אם התמונה מתגלה כבלתי הולם על פי קריטריונים אלה, אנחנו טשטוש התמונה, אשר נעשתה blurImage הפונקציה כפי שנראה הבא.

טשטוש התמונה

מוסיפים את הבאים blurImage הפונקציה שלך index.js הקובץ:

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

בפונקציה שלמעלה, הורדת התמונה הבינארית מ-Cloud Storage. התמונה מטושטשת מכן באמצעות של ImageMagick convert כלי, ואת הגרסה המטושטשת היא שהועלתה מחדש על דלי החפצים. לאחר מכן, אנו מוחקים את הקובץ במופע של Cloud Functions כדי לפנות שטח בדיסק, ואנו עושים זאת מכיוון שניתן לעשות שימוש חוזר באותו מופע של Cloud Functions, ואם לא מנקים קבצים, עלול להיגמר לו שטח הדיסק. לבסוף, אנו מוסיפים סמל בוליאני להודעת הצ'אט המציינת שהתמונה טופלה, וזה יפעיל רענון של ההודעה בלקוח.

פרוס את הפונקציה

הפונקציה תהיה פעילה רק לאחר שתפרוס אותה. בשורת הפקודה, לרוץ firebase deploy --only functions :

firebase deploy --only functions

זה פלט המסוף שאתה צריך לראות:

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

בדוק את הפונקציה

לאחר פריסת הפונקציה בהצלחה:

  1. פתח את היישום שלך בדפדפן שלך באמצעות אתר שמארחת (בצורת https://<project-id>.firebaseapp.com ).
  2. לאחר הכניסה לאפליקציה, העלה תמונה: 4db9fdab56703e4a.png
  3. בחר תמונה פוגענית המיטב כדי להעלות (או שאתה יכול להשתמש זה לאכול בשר זומבי !) ואחרי כמה רגעים, אתה צריך לראות רענון הפוסט שלך עם גרסה מטושטשת של התמונה: 83dd904fbaf97d2b.png

10. הודעות חדשות

בחלק זה, תוסיף פונקציית ענן ששולחת התראות למשתתפים בצ'אט כאשר הודעה חדשה מתפרסמת.

שימוש Firebase Cloud Messaging (FCM), אתה יכול לשלוח הודעות באופן מהימן למשתמשים בפלטפורמות. כדי לשלוח הודעה למשתמש, אתה צריך אסימון מכשיר FCM שלו. אפליקציית האינטרנט של הצ'אט בה אנו משתמשים כבר אוספת אסימוני מכשיר ממשתמשים כשהם פותחים את האפליקציה בפעם הראשונה בדפדפן או במכשיר חדש. אסימונים אלה המאוחסנים בענן Firestore ב fcmTokens האוסף.

אם אתה רוצה ללמוד איך לקבל אסימונים מכשיר FCM על יישום אינטרנט, אתה יכול לעבור את Firebase אינטרנט Codelab .

שלח הודעות

כדי לזהות מתי הודעות חדשות מתפרסמות, אתה תהיה באמצעות functions.firestore.document().onCreate הדק פונקציות קלאוד, אשר מריץ את הקוד שלך כשחפץ חדש נוצר נתיב נתון של קלאוד firestore. מוסיפים את sendNotifications לתפקד לתוך שלך index.js הקובץ:

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

בפונקציה הנ"ל, אנו נאספים כל האסימונים המכשיר של המשתמש ממסד הנתונים ענן Firestore ושליחת הודעה לכל אחד מהם באמצעות admin.messaging().sendToDevice פונקציה.

נקה את האסימונים

לבסוף, אנו רוצים להסיר את האסימונים שאינם תקפים עוד. זה קורה כאשר האסימון שקיבלנו פעם מהמשתמש אינו בשימוש על ידי הדפדפן או המכשיר יותר. לדוגמה, זה קורה אם המשתמש ביטל את הרשאת ההתראה עבור הפעלת הדפדפן. כדי לעשות זאת, להוסיף את הדברים הבאים cleanupTokens לתפקד שלך index.js הקובץ:

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);
}

פרוס את הפונקציה

הפונקציה תהיה פעילה רק לאחר שתפרוס אותה, וכדי לפרוס אותה, הפעל זאת בשורת הפקודה:

firebase deploy --only functions

זה פלט המסוף שאתה צריך לראות:

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

בדוק את הפונקציה

  1. לאחר הפונקציה הטמיעה בהצלחה, פותחים את האפליקציה שלך בדפדפן שלך באמצעות אתר שמארחת (בצורת https://<project-id>.firebaseapp.com ).
  2. אם אתה נכנס לאפליקציה בפעם הראשונה, ודא שאתה מתיר התראות כאשר תתבקש: 8b9d0c66dc36153d.png
  3. סגור את לשונית אפליקציית הצ'אט או הצג כרטיסייה אחרת: התראות מופיעות רק אם האפליקציה נמצאת ברקע. אם אתה רוצה ללמוד איך לקבל הודעות בזמן שהאפליקציה לא בחזית, יש להסתכל על התיעוד שלנו .
  4. באמצעות דפדפן אחר (או חלון גלישה בסתר), היכנס לאפליקציה ופרסם הודעה. אתה אמור לראות הודעה שמוצגת על ידי הדפדפן הראשון: 45282ab12b28b926.png

11. מזל טוב!

השתמשת ב-Firebase SDK עבור פונקציות ענן והוספת רכיבים בצד השרת לאפליקציית צ'אט.

מה שכיסינו

  • עריכת פונקציות ענן באמצעות Firebase SDK עבור פונקציות ענן.
  • הפעל פונקציות ענן על סמך אירועי Auth, Cloud Storage ו-Cloud Firestore.
  • הוסף תמיכה ב-Firebase Cloud Messaging לאפליקציית האינטרנט שלך.
  • פרוס פונקציות ענן באמצעות Firebase CLI.

הצעדים הבאים

למד עוד