שלח הודעות עבור אפליקציית אינטרנט באמצעות הודעות ענן ופונקציות ענן

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

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

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

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

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

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

הפעל את Google Auth

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

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

כמו כן, אל תהסס להגדיר את השם הפונה לציבור של האפליקציה שלך ל- Friendly Chat :

8290061806aacb46.png

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

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

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

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

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

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

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

npm -g install firebase-tools

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

firebase --version

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

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

firebase login

ודא שאתה נמצא בספריית cloud-functions-start , ולאחר מכן הגדר את Firebase CLI לשימוש ב-Firebase Project שלך:

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

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

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

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

3b1284f5144b54f6.png

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

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

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

e926868b0546ed71.png

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

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

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

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

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

cd functions
ls

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

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

שני מודולים יידרשו במהלך מעבדת הקוד הזה: Firebase firebase-functions מאפשרת כתיבת טריגרים ויומנים של Cloud Functions בעוד Firebase 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.

ניתן להגדיר את Firebase Admin SDK באופן אוטומטי בעת פריסה לסביבת Cloud Functions או קונטיינרים אחרים של Google Cloud Platform, וזה קורה כאשר אנו קוראים admin.initializeApp() ללא ארגומנטים.

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

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

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

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

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

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

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

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

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

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

  1. בדוק אם התמונה מסומנת כ-Adult או Violent באמצעות Cloud Vision API .
  2. אם התמונה סומנה, הורד אותה במופע Functions הפועל.
  3. טשטש את התמונה באמצעות ImageMagick .
  4. העלה את התמונה המטושטשת ל-Cloud Storage.

הפעל את Cloud Vision API

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

5c77fee51ec5de49.png

התקנת תלות

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

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

כאשר הפונקציה מופעלת, התמונה מופעלת דרך 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});
  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. לאחר מכן התמונה מטושטשת באמצעות כלי convert של ImageMagick, והגרסה המטושטשת מועלית מחדש ב- Storage Bucket. לאחר מכן, אנו מוחקים את הקובץ במופע של 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 שלו. אפליקציית האינטרנט של הצ'אט בה אנו משתמשים כבר אוספת אסימוני מכשיר ממשתמשים כשהם פותחים את האפליקציה בפעם הראשונה בדפדפן או במכשיר חדש. אסימונים אלו מאוחסנים ב-Cloud Firestore באוסף fcmTokens .

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

שלח הודעות

כדי לזהות מתי מתפרסמות הודעות חדשות, תשתמש 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);
      functions.logger.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) {
     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.

הצעדים הבאים

למד עוד