توابع ابر برای Firebase

1. بررسی اجمالی

در این لبه کد، نحوه استفاده از Firebase SDK برای توابع Google Cloud را برای بهبود یک برنامه وب چت و نحوه استفاده از توابع ابری برای ارسال اعلان‌ها به کاربران برنامه چت را یاد خواهید گرفت.

3b1284f5144b54f6.png

چیزی که یاد خواهید گرفت

  • با استفاده از Firebase SDK توابع Google Cloud ایجاد کنید.
  • عملکردهای Cloud را بر اساس رویدادهای Auth، Cloud Storage و Cloud Firestore فعال کنید.
  • پشتیبانی Firebase Cloud Messaging را به برنامه وب خود اضافه کنید.

آنچه شما نیاز دارید

  • یک کارت اعتباری. Cloud Functions برای Firebase به طرح Firebase Blaze نیاز دارد، به این معنی که باید صورت‌حساب پروژه Firebase خود را با استفاده از کارت اعتباری فعال کنید.
  • ویرایشگر IDE / متن انتخابی خود را مانند WebStorm ، اتم یا بلندمرتبه .
  • ترمینالی برای اجرای دستورات پوسته با نصب NodeJS v9.
  • مرورگری مانند کروم.
  • کد نمونه برای این کار مرحله بعدی را ببینید.

2. کد نمونه را دریافت کنید

کلون مخزن گیتهاب از خط فرمان:

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

برنامه شروع را وارد کنید

با استفاده از IDE خود، آن را باز یا وارد کنید android_studio_folder.png cloud-functions-start دایرکتوری را از دایرکتوری کد نمونه. این دایرکتوری حاوی کد شروع برای codelab است که از یک برنامه وب چت کاملاً کاربردی تشکیل شده است.

3. یک پروژه Firebase ایجاد کنید و برنامه خود را راه اندازی کنید

پروژه ایجاد کنید

در فایربیس کنسول ، با کلیک بر روی اضافه کردن پروژه و پاسخ آن را FriendlyChat.

کلیک کنید ایجاد پروژه.

به طرح Blaze ارتقا دهید

به منظور استفاده از توابع Cloud برای فایربیس، شما باید به upgade پروژه فایربیس خود را به طرح صدور صورت حساب فروغ . برای این کار باید یک کارت اعتباری یا ابزار صورت‌حساب دیگری را به حساب Google Cloud خود اضافه کنید.

همه پروژه‌های Firebase، از جمله پروژه‌های موجود در طرح Blaze، همچنان به سهمیه‌های استفاده رایگان برای عملکردهای ابری دسترسی دارند. مراحل ذکر شده در این کد لبه در محدوده استفاده از لایه رایگان قرار می گیرند. با این حال، شما به اتهام کوچک (نگاه کنید به مورد 0.03 $ ) از ذخیره سازی ابر استفاده شده است که برای میزبانی ابر تصاویر توابع ساخت خود را.

اگر شما دسترسی به یک کارت اعتباری نیست و یا ناراحت کننده ادامه با طرح فروغ هستند، در نظر با استفاده از فایربیس شبیه ساز سوئیت که به شما اجازه به تقلید توابع ابر به صورت رایگان بر روی دستگاه محلی خود را.

Google Auth را فعال کنید

برای اینکه به کاربران اجازه ورود به برنامه را بدهیم، از Google auth استفاده می‌کنیم که باید فعال شود.

در فایربیس کنسول، باز کردن بخش ساخت> را تایید> وارد سیستم شوید در تب روش (یا اینجا کلیک کنید برای رفتن وجود دارد). سپس، فعال کردن Google وارد شوید ارائه دهنده و روی Save کلیک کنید. این به کاربران امکان می‌دهد با حساب‌های Google خود در برنامه وب وارد شوند.

همچنین، در صورت تمایل به مجموعه ای به نام روبرو عمومی از برنامه خود را به دوستانه گپ:

8290061806aacb46.png

Cloud Storage را فعال کنید

این برنامه از فضای ذخیره سازی ابری برای آپلود تصاویر استفاده می کند. برای فعال کردن ذخیره سازی ابر در پروژه Firebase خود، بازدید از بخش ذخیره سازی و کلیک بر روی دکمه مطلع آغاز شده است. مراحل را در آنجا طی کنید، و برای مکان Cloud Storage، یک مقدار پیش فرض برای استفاده وجود خواهد داشت. کلیک کنید انجام پس از آن.

یک برنامه وب اضافه کنید

در کنسول Firebase، یک برنامه وب اضافه کنید. برای این کار، به تنظیمات پروژه و پایین حرکت به اضافه کردن برنامه است. انتخاب وب به عنوان پلت فرم و جعبه برای راه اندازی فایربیس میزبانی را بررسی کنید، پس از آن ثبت نام برنامه و روی Next کلیک کنید برای باقی مانده از مراحل، در نهایت با کلیک بر روی ادامه به کنسول.

4. رابط خط فرمان Firebase را نصب کنید

رابط خط فرمان Firebase (CLI) به شما این امکان را می دهد که برنامه وب را به صورت محلی ارائه دهید و برنامه وب و عملکردهای ابری خود را مستقر کنید.

برای نصب یا ارتقاء CLI دستور npm زیر را اجرا کنید:

npm -g install firebase-tools

برای تأیید اینکه CLI به درستی نصب شده است، یک کنسول را باز کنید و اجرا کنید:

firebase --version

اطمینان حاصل کنید که نسخه ای از فایربیس CLI بالاتر از 4.0.0 به طوری که آن را تا تمام شدن امکانات را برای توابع ابر مورد نیاز است. اگر نه، اجرا npm install -g firebase-tools به روز رسانی در بالا نشان داده.

مجوز Firebase CLI را با اجرای:

firebase login

اطمینان حاصل کنید که شما را در می cloud-functions-start دایرکتوری، و سپس راه اندازی فایربیس CLI به استفاده از پروژه Firebase خود:

firebase use --add

سپس ID پروژه خود را انتخاب کنید و دستورالعمل ها را دنبال کنید. وقتی از شما خواسته، شما می توانید هر نام مستعار مانند را انتخاب کنید، codelab .

5. برنامه وب را مستقر و اجرا کنید

اکنون که پروژه خود را وارد و پیکربندی کرده اید، برای اولین بار آماده اجرای برنامه وب هستید! باز کردن یک پنجره ترمینال، حرکت به cloud-functions-start پوشه، و استقرار برنامه وب به فایربیس میزبانی با استفاده از:

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 باشد، ارائه شود. بازش کن باید رابط کاربری کاربردی یک برنامه چت را ببینید.

ورود به سیستم به برنامه با استفاده از دکمه ورود به سیستم با گوگل و در صورت تمایل به اضافه کردن برخی از پیام ها و تصاویر ارسال:

3b1284f5144b54f6.png

اگر برای اولین بار در یک مرورگر جدید وارد برنامه می‌شوید، مطمئن شوید که در صورت درخواست، اعلان‌ها را مجاز می‌کنید: 8b9d0c66dc36153d.png

در مرحله بعد باید اعلان‌ها را فعال کنیم.

اگر شما به طور تصادفی بلوک کلیک، شما می توانید این تنظیمات را با کلیک کردن بر روی دکمه 🔒 امن در سمت چپ از URL در Omnibar کروم و روشن نیست در ستون کنار اعلانها تغییر دهید:

e926868b0546ed71.png

اکنون، ما با استفاده از Firebase SDK برای توابع ابری، برخی از عملکردها را اضافه خواهیم کرد.

6. فهرست توابع

Cloud Functions به شما این امکان را می دهد که به راحتی کدی داشته باشید که بدون نیاز به راه اندازی سرور در Cloud اجرا شود. نحوه ساخت توابعی که به رویدادهای پایگاه داده Firebase Auth، Cloud Storage و Firebase Firestore واکنش نشان می دهند را توضیح خواهیم داد. بیایید با Auth شروع کنیم.

هنگام استفاده از فایربیس SDK برای توابع ابر، کد توابع خود را در زیر زندگی functions دایرکتوری (به طور پیش فرض). کد توابع خود را نیز از Node.js برنامه و در نتیجه نیاز به یک package.json است که به برخی از اطلاعات در مورد برنامه شما و لیست وابستگیها.

برای اینکه آن را برای شما راحت تر، ما در حال حاضر ایجاد functions/index.js فایل که در آن کد خود را خواهد رفت. قبل از حرکت به جلو، این فایل را بررسی کنید.

cd functions
ls

اگر شما آشنا با نه Node.js و ، یادگیری بیشتر در مورد آن پیش از ادامه codelab مفید خواهد بود.

package.json فایل در حال حاضر لیست دو وابستگی های مورد نیاز: در فایربیس SDK برای توابع ابر و فایربیس محیط مدیریت 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 ها می نویسیم. بیایید با وارد کردن ماژول های Node مورد نیاز شروع کنیم.

7. ماژول های Cloud Functions و Firebase Admin را وارد کنید

دو ماژول خواهد شد در طول این codelab مورد نیاز: firebase-functions را قادر می سازد نوشتن ابر توابع محرک و سیاهههای مربوط در حالی که firebase-admin را قادر می سازد با استفاده از پلت فرم فایربیس در سرور با دسترسی مدیر به انجام اقدامات مانند نوشتن به ابر 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.

فایربیس محیط مدیریت SDK را می توان به طور خودکار پیکربندی زمانی که به یک محیط توابع ابر یا دیگر ظروف پلتفرم ابری گوگل مستقر شده، و این اتفاق می افتد زمانی که ما در پاسخ admin.initializeApp() بدون آرگومان.

اکنون، اجازه دهید یک تابع اضافه کنیم که وقتی کاربر برای اولین بار در برنامه چت وارد می شود، اجرا می شود، و یک پیام چت برای خوش آمدگویی به کاربر اضافه می کنیم.

8. به کاربران جدید خوش آمدید

ساختار پیام های چت

پیام‌های ارسال شده به فید چت FriendlyChat در Cloud Firestore ذخیره می‌شوند. بیایید به ساختار داده ای که برای پیام استفاده می کنیم نگاهی بیندازیم. برای انجام این کار، یک پیام جدید به چت با عنوان "Hello World" ارسال کنید:

11f5a676fbb1a69a.png

این باید به صورت زیر ظاهر شود:

fe6d1c020d0744cf.png

در فایربیس کنسول، با کلیک بر روی پایگاه Firestore زیر بخش ساخت. باید مجموعه پیام‌ها و یک سند حاوی پیامی که نوشته‌اید را ببینید:

442c9c10b5e2b245.png

همانطور که می بینید، پیام های چت در ابر Firestore به عنوان یک سند با ذخیره شده name ، profilePicUrl ، text ، و timestamp از ویژگی های اضافه شده به messages مجموعه است.

افزودن پیام های خوش آمد گویی

اولین تابع ابر می افزاید: یک پیام است که کاربران جدید استقبال به چت. برای این کار، ما می توانیم ماشه استفاده functions.auth().onCreate ، اجرا می شود که تابع هر بار که کاربر در برای اولین بار در برنامه فایربیس. اضافه کردن 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. با یک کاربر جدید، ثبت نام در برای اولین بار در برنامه شما با استفاده از دکمه ورود به سیستم.
  • اگر شما در حال حاضر به وارد شوید، برنامه شما می توانید باز فایربیس کنسول تایید و حذف حساب خود را از لیست کاربران. سپس، دوباره وارد شوید.

262535d1b1223c65.png

  1. پس از ورود به سیستم، یک پیام خوش آمدگویی باید به طور خودکار نمایش داده شود:

1c70e0d64b23525b.png

9. تعدیل تصاویر

کاربران می توانند همه نوع تصاویر را در چت آپلود کنند و همیشه مهم است که تصاویر توهین آمیز را تعدیل کنند، به خصوص در پلتفرم های اجتماعی عمومی. در FriendlyChat، تصاویری که در حال به چت منتشر شده به ذخیره شده گوگل ابر ذخیره سازی .

با استفاده از توابع ابر، شما می توانید ارسال تصویر جدید با استفاده از تشخیص functions.storage().onFinalize ماشه. هر بار که فایل جدیدی در Cloud Storage آپلود یا اصلاح می شود، این کار اجرا می شود.

برای تعدیل تصاویر، مراحل زیر را طی می کنیم:

  1. بررسی کنید که آیا تصویر به عنوان بزرگسالان و یا خشونت آمیز پرچم با استفاده از API ابر چشم انداز .
  2. اگر تصویر علامت گذاری شده است، آن را در نمونه در حال اجرا دانلود کنید.
  3. تاری تصویر را با استفاده از ImageMagick .
  4. تصویر تار شده را در فضای ذخیره‌سازی ابری آپلود کنید.

Cloud Vision API را فعال کنید

از آنجایی که ما از Google Cloud Vision API در این عملکرد استفاده خواهیم کرد، باید API را در پروژه firebase خود فعال کنید. دنبال این لینک ، پس از آن پروژه Firebase خود را انتخاب کنید و فعال کردن API:

5c77fee51ec5de49.png

وابستگی ها را نصب کنید

به تصاویر در حد متوسط، ما در کتابخانه گوگل ابر دید مشتری برای Node.js. استفاده کنید، @ گوگل-ابر / چشم انداز ، به اجرا تصاویر از طریق API ابر چشم انداز برای تشخیص تصاویر نامناسب.

برای نصب این بسته به برنامه توابع ابر خود را، اجرا در بر داشت زیر 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 ابر توابع ماشه، اجرا می شود که کد خود را به عنوان به زودی به عنوان یک فایل یا پوشه ایجاد می شود و یا تغییر در یک سطل ابر ذخیره سازی. اضافه کردن 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.');
}

در تابع فوق، باینری تصویر از فضای ذخیره سازی ابری دانلود می شود. تصویر به پس از آن مبهم با استفاده از ImageMagick را در convert ابزار و نسخه تاری دوباره آپلود بر روی سطل ذخیره سازی است. در مرحله بعد، فایل موجود در نمونه توابع Cloud را حذف می کنیم تا مقداری فضای دیسک آزاد شود، و این کار را انجام می دهیم زیرا همان نمونه توابع Cloud می تواند دوباره استفاده شود و اگر فایل ها پاک نشوند، ممکن است فضای دیسک تمام شود. در نهایت، یک Boolean به پیام چت اضافه می‌کنیم که نشان می‌دهد تصویر تعدیل شده است، و این باعث به‌روزرسانی پیام در مشتری می‌شود.

استقرار تابع

این تابع فقط پس از استقرار آن فعال خواهد شد. در خط فرمان، اجرا 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. اعلان های پیام جدید

در این بخش، یک Cloud Function اضافه می‌کنید که هنگام ارسال پیام جدید، اعلان‌هایی را برای شرکت‌کنندگان در چت ارسال می‌کند.

با استفاده از فایربیس ابر پیام (FCM)، شما قابل اعتماد می تواند به کاربران ارسال اطلاعیه در سراسر سیستم عامل. برای ارسال اعلان به یک کاربر، به نشانه دستگاه FCM او نیاز دارید. برنامه وب چت که ما از آن استفاده می کنیم، از قبل هنگام باز کردن برنامه برای اولین بار در مرورگر یا دستگاه جدید، نشانه های دستگاه را از کاربران جمع آوری می کند. این نشانه ها در ابر Firestore در ذخیره شده fcmTokens مجموعه است.

اگر شما می خواهم به یاد بگیرند که چگونه برای به دست آوردن نشانه دستگاه FCM در یک برنامه وب، شما می توانید از طریق رفتن فایربیس وب Codelab .

ارسال اعلان ها

برای تشخیص پیام های جدید ارسال شده، شما با استفاده از 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 برای توابع Cloud استفاده کرده اید و اجزای سمت سرور را به یک برنامه چت اضافه کرده اید.

آنچه را پوشش داده ایم

  • نوشتن توابع ابری با استفاده از Firebase SDK برای توابع ابری.
  • عملکردهای Cloud را بر اساس رویدادهای Auth، Cloud Storage و Cloud Firestore فعال کنید.
  • پشتیبانی Firebase Cloud Messaging را به برنامه وب خود اضافه کنید.
  • توابع Cloud را با استفاده از Firebase CLI اجرا کنید.

مراحل بعدی

بیشتر بدانید