تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إرسال إشعارات لتطبيق ويب باستخدام المراسلة السحابية والوظائف السحابية

1. نظرة عامة

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

ماذا ستتعلم

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

ماذا ستحتاج

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

2. احصل على نموذج التعليمات البرمجية

استنساخ مستودع GitHub من سطر الأوامر:

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

يحتوي مستودع firebase-codelabs على نماذج مشاريع لأنظمة أساسية متعددة. يستخدم مختبر الأكواد هذا هذين المستودعات فقط:

تبدأ وظائف السحابة — بدء التعليمات البرمجية التي ستبني عليها في مختبر الرموز هذا. ملاحظة: هذا هو نفس الرمز مثل الرمز النهائي لـ Firebase Web Codelab.
وظائف السحابة — تعليمات برمجية كاملة لنموذج التطبيق النهائي.

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

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

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

3. أنشئ مشروع Firebase وأعد تطبيقك

أنشئ مشروعًا

في Firebase Console ، انقر فوق Add Project وقم بتسميته FriendlyChat .

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

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

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

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

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

تمكين Google Auth

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

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

أيضًا ، لا تتردد في تعيين اسم الواجهة العامة لتطبيقك على Friendly Chat :

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

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

أضف تطبيق ويب

في Firebase Console ، أضف تطبيق ويب. للقيام بذلك ، انتقل إلى إعدادات المشروع وانتقل لأسفل إلى إضافة التطبيق . اختر الويب كنظام أساسي وحدد المربع الخاص بإعداد Firebase Hosting ، ثم قم بتسجيل التطبيق وانقر فوق التالي لبقية الخطوات ، وأخيرًا انقر فوق متابعة إلى وحدة التحكم .

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 الخاص بك:

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

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

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

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

إذا قمت بالنقر فوق حظر بطريق الخطأ ، فيمكنك تغيير هذا الإعداد بالنقر فوق الزر 🔒 Secure الموجود على يسار عنوان URL في Chrome Omnibar وتبديل الشريط بجوار الإشعارات :

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

6. دليل الوظائف

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

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

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

cd functions
ls

إذا لم تكن معتادًا على Node.js ، فسيكون من المفيد معرفة المزيد عنها قبل متابعة برنامج codelab.

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

سنقوم باستيراد الوحدات المطلوبة ثم كتابة ثلاث وظائف بدلاً من TODO. لنبدأ باستيراد وحدات العقدة المطلوبة.

7. استيراد وظائف السحابة ووحدات إدارة Firebase

ستكون هناك حاجة إلى وحدتين خلال مختبر الرموز هذا: تتيح 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() بدون وسيطات.

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

8. نرحب بالمستخدمين الجدد

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

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

يجب أن يظهر هذا على النحو التالي:

في Firebase Console ، انقر فوق قاعدة بيانات Firestore ضمن قسم الإنشاء . يجب أن تشاهد مجموعة الرسائل ومستندًا واحدًا يحتوي على الرسالة التي كتبتها:

كما ترى ، يتم تخزين رسائل الدردشة في Cloud 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 الخاصة طريقة 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

اختبر الوظيفة

بمجرد نشر الوظيفة بنجاح ، ستحتاج إلى مستخدم يقوم بتسجيل الدخول لأول مرة.

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

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

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

9. الاعتدال في الصور

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

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

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

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

قم بتمكين Cloud Vision API

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

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

لتعديل الصور ، سنستخدم مكتبة Google Cloud Vision Client Library لـ Node.js ، @ google-cloud / vision ، لتشغيل الصور من خلال Cloud Vision API لاكتشاف الصور غير الملائمة.

لتثبيت هذه الحزمة في تطبيق 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 ، الذي يقوم بتشغيل التعليمات البرمجية بمجرد إنشاء ملف أو مجلد أو تعديله في حاوية التخزين السحابي. أضف وظيفة 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.');
    });

لاحظ أننا أضفنا بعض التكوين لمثيل وظائف السحابة الذي سيشغل الوظيفة. باستخدام .runWith({memory: '2GB'}) ، نطلب أن يحصل المثيل على 2 غيغابايت من الذاكرة بدلاً من الافتراضي ، لأن هذه الوظيفة تستهلك الكثير من الذاكرة.

عند تشغيل الوظيفة ، يتم تشغيل الصورة من خلال 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.');
}

في الوظيفة أعلاه ، يتم تنزيل ملف الصورة الثنائي من التخزين السحابي. يتم بعد ذلك تعتيم الصورة باستخدام أداة convert الخاصة بـ ImageMagick ، ويتم إعادة تحميل النسخة غير الواضحة على حاوية التخزين. بعد ذلك ، نحذف الملف الموجود في مثيل 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

اختبر الوظيفة

بمجرد نشر الوظيفة بنجاح:

افتح تطبيقك في متصفحك باستخدام عنوان URL الخاص بالاستضافة (بصيغة https://<project-id>.firebaseapp.com ).
بمجرد تسجيل الدخول إلى التطبيق ، قم بتحميل صورة:
اختر أفضل صورة هجومية لتحميلها (أو يمكنك استخدام هذا اللحم وهو يأكل Zombie !) وبعد لحظات قليلة ، يجب أن ترى منشورك يتم تحديثه بنسخة غير واضحة من الصورة:

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

اختبر الوظيفة

بمجرد نشر الوظيفة بنجاح ، افتح التطبيق الخاص بك في متصفحك باستخدام عنوان URL للاستضافة (في شكل https://<project-id>.firebaseapp.com ).
إذا قمت بتسجيل الدخول إلى التطبيق لأول مرة ، فتأكد من السماح بالإشعارات عند مطالبتك بذلك:
أغلق علامة تبويب تطبيق الدردشة أو اعرض علامة تبويب مختلفة: لا تظهر الإشعارات إلا إذا كان التطبيق في الخلفية. إذا كنت ترغب في معرفة كيفية تلقي الرسائل أثناء عمل تطبيقك في المقدمة ، فقم بإلقاء نظرة على وثائقنا .
باستخدام متصفح مختلف (أو نافذة التصفح المتخفي) ، سجّل الدخول إلى التطبيق وانشر رسالة. من المفترض أن ترى إشعارًا معروضًا بواسطة المتصفح الأول:

11. مبروك!

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

ما غطينا

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

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

تعرف على أنواع مشغلات وظيفة السحابة الأخرى .
استخدم Firebase و Cloud Functions مع تطبيقك الخاص.

إرسال إشعارات لتطبيق ويب باستخدام المراسلة السحابية والوظائف السحابية

1. نظرة عامة

ماذا ستتعلم

ماذا ستحتاج

2. احصل على نموذج التعليمات البرمجية

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

3. أنشئ مشروع Firebase وأعد تطبيقك

أنشئ مشروعًا

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

تمكين Google Auth

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

أضف تطبيق ويب

4. قم بتثبيت واجهة سطر أوامر Firebase

5. نشر وتشغيل تطبيق الويب

افتح تطبيق الويب

6. دليل الوظائف

index.js

7. استيراد وظائف السحابة ووحدات إدارة Firebase

index.js

8. نرحب بالمستخدمين الجدد

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

إضافة رسائل ترحيب

index.js

نشر وظائف السحابة

اختبر الوظيفة

9. الاعتدال في الصور

قم بتمكين Cloud Vision API

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

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

index.js

كشف الصور غير اللائقة

index.js

طمس الصورة

index.js

انشر الوظيفة

اختبر الوظيفة

10. إخطارات الرسائل الجديدة

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

index.js

نظف الرموز المميزة

index.js

انشر الوظيفة

اختبر الوظيفة

11. مبروك!

ما غطينا

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

يتعلم أكثر