Google is committed to advancing racial equity for Black communities. See how.
דף זה תורגם על ידי Cloud Translation API.
Switch to English

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

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

3b1284f5144b54f6.png

מה תלמד

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

מה אתה צריך

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

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

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

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

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

צור פרויקט

במסוף Firebase לחץ על הוסף פרויקט וקרא לו FriendlyChat .

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

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

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

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

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

הפעל את Google Auth

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

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

אל תהסס להגדיר את השם הציבורי של האפליקציה שלך לצ'אט ידידותי :

8290061806aacb46.png

אפשר אחסון בענן

האפליקציה משתמשת בענן אחסון כדי להעלות תמונות. כדי להפעיל אחסון בענן בפרויקט Firebase בקר בקטע אחסון ולחץ על כפתור התחל . לאחר מכן לחץ על Got It כאשר אתה מקבל את כתב הוויתור על כללי האבטחה.

842ad84821323ef5.png

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

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

npm -g install firebase-tools

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

firebase --version

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

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

firebase login

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

firebase use --add

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

כעת לאחר שייבאת והגדרת את הפרויקט שלך אתה מוכן להפעיל את אפליקציית האינטרנט בפעם הראשונה. פתח קונסולה בתיקיית cloud-functions-start והפעל את firebase deploy --except functions זה רק יפרוס את אפליקציית האינטרנט לאירוח 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

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

אם לחצתם בטעות על חסום תוכלו לשנות הגדרה זו על ידי לחיצה על כפתור 🔒 מאובטח משמאל לכתובת האתר באומניבר של כרום ובחירת התראות> אפשר תמיד באתר זה :

e926868b0546ed71.png

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

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

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

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

cd functions
ls

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

הקובץ package.json כבר מפרט שני תלות נדרשת: SDK של Firebase לפונקציות ענן ו- SDK של מנהל מערכת Firebase . כדי להתקין אותם להתקין npm install באופן מקומי מתיקיית 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. ראשית בוא נייבא את מודולי הצומת.

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

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

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

במסוף האפליקציות של Firebase לחץ על מסד נתונים בקטע פיתוח . אתה אמור לראות את אוסף ההודעות ומסמך אחד המכיל את ההודעה שכתבת:

442c9c10b5e2b245.png

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

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

פונקציית הענן הראשונה מוסיפה הודעה שמקבלת בברכה משתמשים חדשים לצ'אט. לשם כך אנו יכולים להשתמש functions.auth().onCreate ההדק 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) => {
  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.');
});

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

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

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

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

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

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

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

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

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

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

אפשר את ממשק ה- API של Cloud Vision

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

5c77fee51ec5de49.png

התקן תלות

כדי למתן את התמונות נצטרך כמה חבילות Node.js:

  • ספריית הלקוחות של Google Cloud Vision עבור Node.js: @ google-cloud / vision להפעלת התמונה דרך ה- Cloud Vision API כדי לאתר תמונות לא הולמות.
  • ספריית Node.js המאפשרת לנו להריץ תהליכים: ילד-תהליך-הבטחה להפעיל את ImageMagick מכיוון שכלי שורת הפקודה ImageMagick מותקן מראש בכל מופעי ה- Functions.

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

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

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

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

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

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

מכיוון שהפונקציה שלך תפעל בתוך סביבת 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 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.');
    });

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

כאשר הפונקציה מופעלת, התמונה מועברת דרך ה- API של Cloud Vision כדי לזהות אם היא מסומנת כמבוגרת או אלימה. אם התמונה מזוהה כבלתי הולמת על סמך קריטריונים אלה אנו מטשטשים את התמונה blurImage בפונקציית 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});
  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.');
}

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

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

הפונקציה תהיה פעילה רק לאחר פריסתה. בשורת הפקודה הפעל 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

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

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

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

שלח התראות

כדי לזהות מתי מתפרסמות הודעות חדשות, תשתמש functions.firestore.document().onCreate Cloud Functions ההדק שמפעיל את הקוד שלך כאשר אובייקט חדש נוצר בנתיב נתון של Cloud 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);
      console.log('Notifications have been sent and tokens cleaned up.');
    }
  });

בפונקציה שלמעלה אנו אוספים את כל אסימוני המכשיר של המשתמשים ממסד ה Cloud 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) {
     console.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens who 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 :

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

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

מה סיקרנו

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

הצעדים הבאים

למד עוד