وظائف السحابة لـ Firebase

في معمل الرموز هذا ، ستتعلم كيفية استخدام Firebase SDK لوظائف Google Cloud لتحسين تطبيق Chat Web وكيفية استخدام Cloud Functions لإرسال إشعارات إلى مستخدمي تطبيق Chat.

3b1284f5144b54f6.png

ماذا ستتعلم

  • أنشئ Google Cloud Functions باستخدام Firebase SDK.
  • Trigger Cloud Functions استنادًا إلى أحداث المصادقة والتخزين السحابي و Cloud Firestore.
  • أضف دعم Firebase Cloud Messaging إلى تطبيق الويب الخاص بك.

ماذا ستحتاج

  • بطاقة ائتمان. تتطلب وظائف السحابة لـ Firebase خطة Firebase Blaze مما يعني أنه سيتعين عليك تمكين الفوترة في مشروع Firebase باستخدام بطاقة ائتمان.
  • محرر IDE / نص من اختيارك مثل WebStorm ، ذرة أو سبحانه .
  • محطة لتشغيل أوامر shell مع تثبيت NodeJS v8.
  • متصفح مثل Chrome.
  • نموذج التعليمات البرمجية. انظر الخطوة التالية لهذا.

استنساخ مستودع جيثب من سطر الأوامر:

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

قم باستيراد تطبيق المبتدئين

باستخدام IDE الخاص بك ، افتح ملف android_studio_folder.png cloud-functions-start الدليل من الدليل نموذج التعليمات البرمجية. يحتوي هذا الدليل على رمز البداية لمختبر الرموز الذي يتكون من تطبيق ويب دردشة يعمل بكامل طاقته.

أنشئ مشروعًا

في وحدة التحكم Firebase انقر على إضافة مشروع والذي يطلق عليه FriendlyChat.

انقر فوق إنشاء مشروع.

قم بالترقية إلى خطة Blaze

من أجل استخدام وظائف السحب لFirebase سيكون لديك لupgade مشروع Firebase الخاص بك إلى خطة الفواتير الحريق . سيتطلب هذا منك إضافة بطاقة ائتمان أو أداة فوترة أخرى إلى حساب Google Cloud الخاص بك.

لا يزال بإمكان جميع مشاريع Firebase ، بما في ذلك تلك الموجودة في خطة Blaze ، الوصول إلى حصص الاستخدام المجانية لوظائف السحابة. تقع الخطوات الموضحة في مختبر الرموز هذا ضمن حدود الاستخدام المجاني للطبقة. ومع ذلك سترى رسوم صغيرة ( حوالي 0.03 $ ) من سحابة التخزين الذي يستخدم لاستضافة الخاص بك سحابة الصور وظائف البناء.

إذا لم يكن لديك الوصول إلى بطاقة الائتمان أو غير مريح الاستمرار في خطة الحريق، النظر في استخدام المحاكي جناح Firebase التي تسمح لك لمحاكاة وظائف السحب مجانا على الجهاز المحلي.

تمكين Google Auth

للسماح للمستخدمين بتسجيل الدخول إلى التطبيق ، سنستخدم مصادقة Google التي يجب تمكينها.

في وحدة التحكم Firebase فتح قسم تطوير> مصادقة> علامة التبويب في طريقة (أو انقر هنا للذهاب الى هناك) تحتاج إلى تمكين جوجل الدخول في موفر وانقر SAVE. سيسمح هذا للمستخدمين بتسجيل الدخول إلى تطبيق الويب بحساباتهم على Google.

كما لا تتردد في تعيين اسم تواجه العام تطبيقك لدية الدردشة:

8290061806aacb46.png

تفعيل التخزين السحابي

يستخدم التطبيق Cloud Storage لتحميل الصور. لتمكين سحابة التخزين على زيارتك مشروع Firebase قسم التخزين وانقر على زر البدء. ثم انقر حصلت عليه عندما تتلقى هذا العقد عن قواعد الأمن.

842ad84821323ef5.png

تتيح لك واجهة سطر أوامر 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 الخاص بك:

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 الاستضافة. يجب الآن تقديم تطبيق الويب من عنوان URL هذا والذي يجب أن يكون بالشكل https: // <project-id> .firebaseapp.com. افتحه. من المفترض أن ترى واجهة مستخدم تعمل لتطبيق الدردشة.

تسجيل الدخول إلى التطبيق باستخدام زر تسجيل الدخول باستخدام GOOGLE وتتردد في إضافة بعض الرسائل والصور بعد:

3b1284f5144b54f6.png

إذا قمت بتسجيل الدخول إلى التطبيق لأول مرة على متصفح جديد ، فتأكد من السماح بالإشعارات عند مطالبتك بذلك: 8b9d0c66dc36153d.png

سنحتاج منك تمكين الإشعارات في وقت لاحق.

إذا قمت بالنقر قصد كتلة يمكنك تغيير هذا الإعداد عن طريق النقر على زر 🔒 تأمين على يسار URL في Omnibar كروم واختيار الإخطارات> السماح دوما على هذا الموقع:

e926868b0546ed71.png

سنقوم الآن بإضافة بعض الوظائف باستخدام Firebase SDK لوظائف السحابة.

تتيح لك وظائف السحابة الحصول بسهولة على رمز يتم تشغيله في السحابة دون الحاجة إلى إعداد خادم. سنعرض لك كيفية إنشاء وظائف تتفاعل مع أحداث Firebase Auth و Cloud Storage و Firebase Realtime Database. لنبدأ مع Auth.

عند استخدام SDK Firebase عن وظائف الغيمة، سيعيش كود ظائف الخاص تحت functions دليل (افتراضيا). كود ظائف الخاص بك هو أيضا نود.جي إس التطبيق، وبالتالي يحتاج إلى package.json أن يعطي بعض المعلومات حول التطبيق وقوائم التبعيات.

لجعل من الأسهل بالنسبة لك قمنا بالفعل بإنشاء functions/index.js الملف حيث سيذهب التعليمات البرمجية. لا تتردد في فحص هذا الملف قبل المضي قدمًا.

cd functions
ls

إذا كنت لم تكن مألوفة مع نود.جي إس أنها سوف تساعد على معرفة المزيد حول هذا الموضوع قبل مواصلة codelab.

الملف package.json يسرد بالفعل اثنين من تبعيات المطلوبة: من SDK Firebase عن وظائف السحب و Firebase الادارية SDK . لتثبيتها تشغيل محليا 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. أولاً ، دعنا نستورد وحدات العقدة المطلوبة.

سوف تكون هناك حاجة حدتين خلال هذه 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.

يمكن تهيئة Firebase Admin SDK تلقائيًا عند نشرها في بيئة Cloud Functions أو حاويات Google Cloud Platform الأخرى. هذا هو ما نقوم به أعلاه عند استدعاء admin.initializeApp();

الآن دعنا نضيف وظيفة يتم تشغيلها عندما يقوم المستخدم بتسجيل الدخول لأول مرة في تطبيق الدردشة الخاص بك وسنضيف رسالة دردشة للترحيب بالمستخدم.

هيكل رسائل الدردشة

يتم تخزين الرسائل المرسلة إلى موجز دردشة FriendlyChat في Cloud Firestore. دعنا نلقي نظرة على بنية البيانات التي نستخدمها للرسالة. للقيام بذلك ، انشر رسالة جديدة في الدردشة نصها "Hello World":

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. فتح التطبيق في المتصفح الخاص بك باستخدام URL استضافة (في شكل https://<project-id>.firebaseapp.com ).
  2. مع مستخدم جديد، قم بتسجيل الدخول لأول مرة في التطبيق الخاص بك باستخدام زر تسجيل الدخول.

262535d1b1223c65.png

  1. بعد تسجيل الدخول ، من المفترض أن يتم عرض رسالة ترحيب تلقائيًا:

1c70e0d64b23525b.png

يمكن للمستخدمين تحميل جميع أنواع الصور في الدردشة ، ومن المهم دائمًا تعديل الصور المسيئة ، خاصة في المنصات الاجتماعية العامة. في FriendlyChat الصور التي يتم نشرها للدردشة يتم تخزينها في سحابة التخزين جوجل .

مع وظائف الغيمة، يمكنك الكشف عن تحميل صورة جديدة باستخدام functions.storage().onFinalize الزناد. سيتم تشغيل هذا في كل مرة يتم فيها تحميل ملف جديد أو تعديله في Cloud Storage.

لتعديل الصور ، سنخوض العملية التالية:

  1. معرفة ما اذا كان يتم وضع الصورة كما الكبار أو عنيفة باستخدام API سحابة الرؤية
  2. إذا تم وضع علامة على الصورة ، فقم بتنزيلها على مثيل Functions قيد التشغيل
  3. طمس الصورة باستخدام يماغيماغيك
  4. قم بتحميل الصورة غير الواضحة إلى Cloud Storage

قم بتمكين Cloud Vision API

نظرًا لأننا سنستخدم Google Cloud Vision API في هذه الوظيفة ، يجب عليك تمكين واجهة برمجة التطبيقات في مشروع Firebase الخاص بك. اتبع هذا الرابط ، حدد مشروع Firebase وتمكين API:

5c77fee51ec5de49.png

تثبيت التبعيات

لتعديل الصور ، سنحتاج إلى بعض حزم Node.js:

  • مكتبة العميل جوجل الغيمة رؤية للنود.جي إس: @ جوجل سحابة / رؤية لتشغيل صورة من خلال API سحابة الرؤية للكشف عن صور غير لائقة.
  • مكتبة نود.جي إس يسمح لنا لتشغيل العمليات: الطفل عملية الوعد لتشغيل يماغيماغيك منذ أداة سطر الأوامر يماغيماغيك تأتي مثبتة مسبقا على جميع الحالات وظائف.

لتثبيت هذه الحزم اثنين إلى سحابة التطبيق وظائف الخاص بك، قم بتشغيل التالية npm install --save الأوامر. تأكد من أن القيام بذلك من functions الدليل.

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

سيؤدي هذا إلى تثبيت حزم اثنين محليا وإضافتها تبعيات أعلن في حياتك package.json الملف.

استيراد وتكوين التبعيات

لاستيراد تبعيات اثنين التي تم تثبيتها وبعض وحدات نود.جي إس الأساسية ( 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.');
}

في الوظيفة المذكورة أعلاه ، يتم تنزيل ملف الصورة الثنائي من التخزين السحابي. ومن ثم عدم وضوح الصورة باستخدام يماغيماغيك في 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. فتح التطبيق في المتصفح الخاص بك باستخدام URL استضافة (في شكل https://<project-id>.firebaseapp.com ).
  2. بمجرد تسجيل الدخول إلى التطبيق ، قم بتحميل صورة: 4db9fdab56703e4a.png
  3. اختيار أفضل صورة مسيئة للتحميل (أو يمكنك استخدام هذا الجسد تناول الكسول !) وبعد لحظات قليلة سترى آخر تحديث الخاص بك مع نسخة واضحة من الصورة: 83dd904fbaf97d2b.png

في هذا القسم ، ستضيف وظيفة سحابية ترسل إشعارات إلى المشاركين في الدردشة عند نشر رسالة جديدة.

باستخدام Firebase سحابة التراسل (FCM)، يمكنك إرسال إشعارات للمستخدمين في منصة عبر وسيلة يمكن الاعتماد عليها. لإرسال إشعار إلى مستخدم ، تحتاج إلى رمز جهاز FCM الخاص به. يجمع تطبيق الدردشة على الويب الذي نستخدمه بالفعل الرموز المميزة للجهاز من المستخدمين عندما يفتحون التطبيق لأول مرة على متصفح أو جهاز جديد. يتم تخزين هذه الرموز في سحابة Firestore في fcmTokens المجموعة.

إذا كنت ترغب في معرفة كيفية الحصول على الرموز جهاز FCM على تطبيق ويب يمكنك الذهاب من خلال الويب Codelab Firebase .

إرسال الإخطارات

للكشف عندما يتم نشر الرسائل الجديدة التي سوف تستخدم في 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. مرة واحدة وقد نشرت وظيفة بنجاح، افتح التطبيق في المتصفح الخاص بك باستخدام URL استضافة (في شكل https://<project-id>.firebaseapp.com ).
  2. إذا قمت بتسجيل الدخول إلى التطبيق لأول مرة ، فتأكد من السماح بالإشعارات عند مطالبتك بذلك: 8b9d0c66dc36153d.png
  3. أغلق علامة تبويب تطبيق الدردشة أو اعرض علامة تبويب مختلفة: لا تظهر الإشعارات إلا إذا كان التطبيق في الخلفية. إذا كنت ترغب في معرفة كيفية تلقي الرسائل أثناء التطبيق الخاص بك هو في المقدمة إلقاء نظرة على وثائق لدينا .
  4. باستخدام متصفح مختلف (أو نافذة التصفح المتخفي) ، سجّل الدخول إلى التطبيق وانشر رسالة. من المفترض أن ترى إشعارًا معروضًا بواسطة المتصفح الأول: 45282ab12b28b926.png

لقد استخدمت Firebase SDK للوظائف السحابية وأضفت مكونات من جانب الخادم إلى تطبيق دردشة.

ما غطينا

  • تأليف وظائف السحابة باستخدام Firebase SDK لوظائف السحابة.
  • Trigger Cloud Functions استنادًا إلى أحداث المصادقة والتخزين السحابي و Cloud Firestore.
  • أضف دعم Firebase Cloud Messaging إلى تطبيق الويب الخاص بك.
  • تم نشر وظائف السحابة باستخدام Firebase CLI.

الخطوات التالية

يتعلم أكثر