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

1. نظرة عامة

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

3b1284f5144b54f6.png

ماذا ستتعلم

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

ماذا ستحتاج

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

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

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

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

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

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

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

أنشئ مشروعًا

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

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

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

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

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

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

تمكين Google Auth

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

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

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

8290061806aacb46.png

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

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

أضف تطبيق ويب

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

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 وتتردد في إضافة بعض الرسائل والصور بعد:

3b1284f5144b54f6.png

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

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

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

e926868b0546ed71.png

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

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

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

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

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

cd functions
ls

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

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

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

سوف تكون هناك حاجة حدتين خلال هذه codelab: firebase-functions تمكن الكتابة الغيمة وظائف مشغلات والسجلات بينما firebase-admin يتيح استخدام منصة Firebase على ملقم مع وصول المشرف على القيام إجراءات مثل الكتابة إلى سحابة 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 الادارية SDK تلقائيا عند نشرها في بيئة وظائف السحب أو غيرها من الحاويات جوجل سحابة منصة، وهذا يحدث عندما ندعو admin.initializeApp() بدون وسائط.

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

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

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

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

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) => {
  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 Bot" إلى قائمة رسائل الدردشة. نحن نفعل ذلك باستخدام add الأسلوب على messages مجموعة في سحابة Firestore، وهو حيث يتم تخزين رسائل الدردشة.

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

262535d1b1223c65.png

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

1c70e0d64b23525b.png

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

يمكن للمستخدمين تحميل جميع أنواع الصور في الدردشة ، ومن المهم دائمًا تعديل الصور المسيئة ، خاصة في المنصات الاجتماعية العامة. في 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

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

إلى صور معتدلة، سوف نستخدم مكتبة عميل جوجل الغيمة رؤية للنود.جي إس، @ جوجل سحابة / الرؤية ، لتشغيل الصور من خلال API سحابة الرؤية للكشف عن صور غير لائقة.

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

npm install --save @google-cloud/vision@2.4.0

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

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

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

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

انشر الوظيفة

لن تكون الوظيفة نشطة إلا بعد نشرها. على سطر الأوامر، تشغيل firebase deploy --only functions :

firebase deploy --only functions

هذا هو إخراج وحدة التحكم الذي يجب أن تراه:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

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

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

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

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

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

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

11. مبروك!

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

ما غطينا

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

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

يتعلم أكثر