1- نظرة عامة
في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية استخدام دوال Cloud في Firebase لإضافة وظائف إلى تطبيق دردشة على الويب من خلال إرسال إشعارات إلى مستخدمي تطبيق المحادثة.
المعلومات التي ستطّلع عليها
- يمكنك إنشاء دوال Google Cloud باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase.
- يمكنك تشغيل دوال السحابة بناءً على أحداث المصادقة، وCloud Storage، وCloud Firestore.
- أضِف دعم "المراسلة عبر السحابة الإلكترونية من Firebase" إلى تطبيق الويب.
المتطلبات
- بطاقة ائتمان تتطلب الوظائف السحابية في Firebase استخدام خطة Firebase Blaze، ما يعني أنّه يجب تفعيل الفوترة في مشروع Firebase باستخدام بطاقة ائتمان.
- محرِّر IDE/نص من اختيارك، مثل WebStorm أو Atom أو Sublime
- وحدة طرفية لتشغيل أوامر واجهة الأوامر مع تثبيت الإصدار 9 من NodeJS
- متصفح، مثل Chrome.
- نموذج الرمز. يُرجى الاطّلاع على الخطوة التالية لإجراء ذلك.
2- الحصول على الرمز النموذجي
استنسِخ مستودع GitHub من سطر الأوامر:
git clone https://github.com/firebase/friendlychat
استيراد تطبيق إجراء التفعيل
باستخدام بيئة التطوير المتكاملة (IDE)، افتح دليل cloud-functions-start
أو استورِده من نموذج دليل الرموز البرمجية. يحتوي هذا الدليل على رمز البدء للدرس التطبيقي حول الترميز الذي يتألف من تطبيق ويب Chat كامل الوظائف.
3- إنشاء مشروع على Firebase وإعداد تطبيقك
إنشاء مشروع
في وحدة تحكُّم Firebase، انقر على إضافة مشروع وتسميته FriendlyChat.
انقر على إنشاء مشروع.
الترقية إلى خطة Blaze
لاستخدام وظائف السحابة الإلكترونية لبرنامج Firebase، يجب ترقية مشروع Firebase إلى خطة فوترة Blaze. ويتطلّب ذلك إضافة بطاقة ائتمان أو وسيلة فوترة أخرى إلى حسابك على Google Cloud.
سيظل بإمكان جميع مشاريع Firebase، بما في ذلك المشاريع المشاركة في خطة Blaze، الوصول إلى حصص الاستخدام المجانية لوظائف Cloud. تندرج الخطوات الموضّحة في هذا الدرس التطبيقي حول الترميز ضمن حدود استخدام الفئة المجانية. ومع ذلك، ستظهر لك رسوم بسيطة (حوالي 0.03 دولار أمريكي) من Cloud Storage، وهي تُستخدم لاستضافة صور إنشاء دوال السحابة.
إذا لم تكن تملك بطاقة ائتمان أو لم تكن تريد مواصلة استخدام خطة Blaze، يمكنك استخدام حزمة محاكاة Firebase التي تتيح لك محاكاة وظائف السحابة الإلكترونية مجانًا على جهازك المحلي.
تفعيل مصادقة Google
للسماح للمستخدمين بتسجيل الدخول إلى التطبيق، سنستخدم خدمة مصادقة Google التي يجب تفعيلها.
في وحدة تحكُّم Firebase، افتح القسم إنشاء > المصادقة > طريقة تسجيل الدخول (أو انقر هنا للانتقال إلى هناك). بعد ذلك، فعِّل مقدِّم خدمة تسجيل الدخول باستخدام Google وانقر على حفظ. سيتيح ذلك للمستخدمين تسجيل الدخول إلى تطبيق الويب باستخدام حساباتهم على Google.
يمكنك أيضًا ضبط الاسم العلني لتطبيقك على محادثة ودية:
تفعيل Cloud Storage
يستخدم التطبيق Cloud Storage لتحميل الصور. لتفعيل خدمة Cloud Storage في مشروعك على Firebase، انتقِل إلى قسم مساحة التخزين وانقر على زر البدء. اتّبِع الخطوات هناك، وبالنسبة إلى موقع Cloud Storage، ستكون هناك قيمة تلقائية لاستخدامها. انقر على تمّ بعد ذلك.
إضافة تطبيق ويب
أضِف تطبيق ويب على "وحدة تحكُّم Firebase". ولإجراء ذلك، انتقِل إلى إعدادات المشروع وانتقِل للأسفل إلى إضافة تطبيق. اختَر الويب كنظام أساسي وضَع علامة في مربّع إعداد "استضافة Firebase"، ثم سجِّل التطبيق وانقر على التالي لبقية الخطوات، ثم انقر في النهاية على متابعة إلى وحدة التحكّم.
4. تثبيت واجهة سطر أوامر Firebase
ستتيح لك واجهة سطر أوامر Firebase (CLI) عرض تطبيق الويب محليًا ونشر تطبيق الويب ووظائف Cloud.
لتثبيت واجهة سطر الأوامر أو ترقيته، شغِّل الأمر npm التالي:
npm -g install firebase-tools
للتحقّق من تثبيت واجهة سطر الأوامر بشكل صحيح، افتح وحدة تحكُّم وشغِّل:
firebase --version
تأكَّد من أنّ إصدار واجهة سطر الأوامر في Firebase أعلى من 4.0.0 لكي يتضمّن أحدث الميزات المطلوبة لوظائف السحابة الإلكترونية. إذا لم يكن الأمر كذلك، شغِّل npm install -g firebase-tools
للترقية كما هو موضَّح أعلاه.
تفويض واجهة سطر الأوامر لمنصّة Firebase من خلال تنفيذ ما يلي:
firebase login
يُرجى التأكّد من أنّك في دليل cloud-functions-start
، ثم إعداد واجهة سطر الأوامر في Firebase لاستخدام مشروع 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 ولا تتردد في إضافة بعض الرسائل ونشر الصور:
إذا سجّلت الدخول إلى التطبيق للمرة الأولى على متصفّح جديد، احرص على السماح بالإشعارات عندما يُطلب منك ذلك:
وسنحتاج إلى تفعيل الإشعارات في وقت لاحق.
في حال النقر عن طريق الخطأ على حظر، يمكنك تغيير هذا الإعداد من خلال النقر على الزر 🔒 آمن على يمين عنوان URL في الشريط المتعدد الاستخدامات في Chrome وتبديل الشريط بجانب الإشعارات:
والآن، سنضيف بعض الوظائف باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase لوظائف السحابة الإلكترونية.
6- دليل الدوال
تتيح لك Cloud Functions الحصول على رمز برمجي يعمل في السحابة الإلكترونية بسهولة بدون الحاجة إلى إعداد خادم. سنشرح لك طريقة إنشاء الدوال التي تستجيب لأحداث "مصادقة Firebase" و"Cloud Storage" و"قاعدة بيانات Firebase Firestore". لنبدأ بالمصادقة.
عند استخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase للوظائف السحابية، سيظهر رمز الدوال ضمن دليل functions
(تلقائيًا). إنّ رمز الدوال هو أيضًا أحد تطبيقات Node.js، وبالتالي يجب تضمين ملف package.json
يوفّر بعض المعلومات حول تطبيقك ويسرد التبعيات.
لتسهيل الأمر عليك، أنشأنا ملف functions/index.js
الذي سيتم نقل الرمز إليه. يمكنك فحص هذا الملف قبل المتابعة.
cd functions
ls
إذا لم تكن معتادًا على استخدام Node.js، يمكنك الاطّلاع على مزيد من المعلومات عنها قبل مواصلة الدرس التطبيقي حول الترميز.
سبق أن يتضمّن ملف package.json
مرجعين مطلوبين، وهما حزمة تطوير البرامج (SDK) لمنصة Firebase for Cloud Functions وحزمة تطوير البرامج (SDK) لمشرف Firebase. لتثبيت التطبيقات على الجهاز، يُرجى الانتقال إلى مجلد "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.
سنقوم باستيراد الوحدات المطلوبة ثم نكتب ثلاث دوال بدلاً من قوائم المهام. لنبدأ باستيراد وحدات العُقد المطلوبة.
7- استيراد وظائف السحابة الإلكترونية ووحدات "مشرف Firebase"
خلال هذا الدرس التطبيقي حول الترميز، يجب أن تفعِّل firebase-functions
كتابة مشغِّلات Cloud Functions والسجلات، في حين يتيح firebase-admin
استخدام نظام Firebase الأساسي على خادم لديه إذن وصول إداري لتنفيذ إجراءات، مثل الكتابة إلى Cloud Firestore أو إرسال إشعارات عبر خدمة "المراسلة عبر السحابة الإلكترونية من Firebase".
في ملف 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- الترحيب بالمستخدمين الجدد
بنية رسائل Chat
ويتم تخزين الرسائل المنشورة في خلاصة محادثة FriendlyChat في Cloud Firestore. لنلقِ نظرة على بنية البيانات التي نستخدمها للرسالة. لإجراء ذلك، أرسِل رسالة جديدة في المحادثة مضمونها "مرحبًا بالعالم":
يُفترض أن يظهر على النحو التالي:
في "وحدة تحكُّم Firebase"، انقر على قاعدة بيانات 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
الخاص هي طريقة في العقدة لإتاحة الوصول إلى الدالة خارج الملف الحالي، وهي مطلوبة لدوال السحابة.
في الدالة أعلاه، نضيف رسالة ترحيب جديدة يتم نشرها من خلال "برنامج تتبُّع Firebase". إلى قائمة رسائل المحادثة. ويتم إجراء ذلك باستخدام الطريقة add
على مجموعة messages
في Cloud Firestore، حيث يتم تخزين رسائل المحادثة.
بما أنّ هذه العملية غير متزامنة، علينا عرض Promise الذي يشير إلى وقت انتهاء 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 وحذف حسابك من قائمة المستخدمين. وبعد ذلك، سجِّل الدخول مرة أخرى.
- بعد تسجيل الدخول، من المفترض أن تظهر رسالة ترحيب تلقائيًا:
9- الإشراف على الصور
يمكن للمستخدمين تحميل كل أنواع الصور في المحادثة، ومن المهم دائمًا الإشراف على الصور المسيئة، خاصةً على منصات التواصل الاجتماعي العامة. في FriendlyChat، يتم تخزين الصور التي يتم نشرها في المحادثة في Google Cloud Storage.
من خلال دوال السحابة، يمكنك رصد عمليات تحميل الصور الجديدة باستخدام مشغِل functions.storage().onFinalize
. سيتم تنفيذ هذا الإجراء في كل مرة يتم فيها تحميل ملف جديد أو تعديله في Cloud Storage.
للإشراف على الصور، سنتابع العملية التالية:
- تحقَّق مما إذا تم وضع علامة على الصورة على أنّها للبالغين أو عنيفة باستخدام Cloud Vision API.
- إذا تم الإبلاغ عن الصورة، يمكنك تنزيلها على مثيل الدوال قيد التشغيل.
- يمكنك تمويه الصورة باستخدام ImageMagick.
- حمِّل الصورة المموّهة إلى Cloud Storage.
تفعيل Cloud Vision API
بما أنّنا سنستخدم واجهة برمجة التطبيقات Google Cloud Vision API في هذه الوظيفة، عليك تفعيل واجهة برمجة التطبيقات في مشروع Firebase. اتّبِع هذا الرابط، ثم اختَر مشروعك على Firebase وفعِّل واجهة برمجة التطبيقات:
تثبيت الاعتماديات
للإشراف على الصور، سنستخدم مكتبة عميل Google Cloud Vision لنظام 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 الذي يشغِّل الرمز فور إنشاء ملف أو مجلد أو تعديله في حزمة 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'})
، نطلب أن يحصل المثيل على ذاكرة بسعة 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.');
}
في الدالة أعلاه، يتم تنزيل البرنامج الثنائي للصورة من Cloud Storage. بعد ذلك، يتم تمويه الصورة باستخدام أداة 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
). - بعد تسجيل الدخول إلى التطبيق، حمِّل صورة:
- اختَر أفضل صورة مسيئة لتحميلها (أو يمكنك استخدام صورة اللحم يأكل الزومبي!) وبعد بضع لحظات، من المفترض أن تظهر لك إعادة تحميل مشاركتك مع نسخة مموَّهة من الصورة:
10- إشعارات الرسائل الجديدة
في هذا القسم، يمكنك إضافة دالة سحابية ترسل إشعارات إلى المشاركين في المحادثة عند نشر رسالة جديدة.
باستخدام المراسلة عبر السحابة الإلكترونية من Firebase ، يمكنك إرسال الإشعارات بشكل موثوق إلى المستخدمين في الأنظمة الأساسية. لإرسال إشعار إلى مستخدم، تحتاج إلى الرمز المميّز لجهاز خدمة "المراسلة عبر السحابة الإلكترونية من Firebase". يجمع تطبيق الويب للدردشة الذي نستخدمه حاليًا الرموز المميّزة للأجهزة عند فتح التطبيق لأول مرة على متصفّح أو جهاز جديد. يتم تخزين هذه الرموز المميّزة في Cloud Firestore في مجموعة "fcmTokens
".
إذا كنت تريد معرفة كيفية الحصول على رموز جهاز "المراسلة عبر السحابة الإلكترونية من Firebase" من تطبيق ويب، يمكنك الانتقال إلى الدرس التطبيقي حول ترميز الويب من Firebase.
إرسال الإشعارات
لرصد وقت نشر الرسائل الجديدة، ستستخدم مشغِّل functions.firestore.document().onCreate
Cloud Functions الذي يشغِّل الرمز البرمجي عند إنشاء عنصر جديد في مسار معيّن من Cloud Firestore. أضِف الدالة sendNotifications
إلى ملف index.js
:
ملف index.js
// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
async (snapshot) => {
// Notification details.
const text = snapshot.data().text;
const payload = {
notification: {
title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
}
};
// Get the list of device tokens.
const allTokens = await admin.firestore().collection('fcmTokens').get();
const tokens = [];
allTokens.forEach((tokenDoc) => {
tokens.push(tokenDoc.id);
});
if (tokens.length > 0) {
// Send notifications to all tokens.
const response = await admin.messaging().sendToDevice(tokens, payload);
await cleanupTokens(response, tokens);
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- تهانينا
لقد استخدمت حزمة تطوير البرامج (SDK) لمنصّة Firebase for Cloud Functions وأضفت مكوّنات من جهة الخادم إلى تطبيق محادثات.
النقاط التي تناولناها
- إنشاء دوال السحابة الإلكترونية باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase لوظائف السحابة الإلكترونية
- يمكنك تشغيل دوال السحابة بناءً على أحداث المصادقة، وCloud Storage، وCloud Firestore.
- أضِف دعم "المراسلة عبر السحابة الإلكترونية من Firebase" إلى تطبيق الويب.
- تفعيل Cloud Functions باستخدام واجهة سطر الأوامر في Firebase
الخطوات التالية
- تعرَّف على أنواع مشغِّلات الدوال السحابية الأخرى.
- يمكنك استخدام Firebase وCloud Functions مع تطبيقك الخاص.