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

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

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

3b1284f5144b54f6.png

מה תלמד

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

מה אתה צריך

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

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

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

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

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

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

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

צור פרויקט

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

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

שדרג לתכנית Blaze

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

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

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

הפעל את Google Auth

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

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

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

8290061806aacb46.png

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

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

842ad84821323ef5.png

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

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

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

npm -g install firebase-tools

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

firebase --version

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

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

firebase login

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

firebase use --add

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

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

כעת, לאחר שייבאת והגדרת את הפרויקט שלך, אתה מוכן להפעיל את יישום האינטרנט בפעם הראשונה. פתח קונסולה בבית 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

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

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

e926868b0546ed71.png

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

6. מדריך הפונקציות

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

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

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

cd functions
ls

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

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

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

7. ייבא את מודולי הניהול של פונקציות הענן ו- Firebase

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

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

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

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

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

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) => {
  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 האובייקט היא הדרך של הצומת של קבלה מבחוץ הפונקציה הנגישה של הקובץ הנוכחי נדרשה עבור פונקציות ענן.

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

מכיוון שזהו מבצע אסינכרוני, אנחנו צריכים להחזיר את ההבטחה המציין כאשר כתיבת הענן 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

9. התנהגות התמונות

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

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

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

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

הפעל את ה- Cloud Vision API

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

5c77fee51ec5de49.png

התקן תלות

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

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

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

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

זה יתקין שתי החבילות מקומיות ולהוסיף אותם כמו תלות הכריזה שלך 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.');
    });

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

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

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

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

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

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

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

11. ברכות!

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

מה שסיקרנו

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

הצעדים הבאים

למד עוד