با استفاده از Cloud Messaging و Cloud Functions اعلان‌ها را برای یک برنامه وب ارسال کنید

۱. مرور کلی

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

3b1284f5144b54f6.png

آنچه یاد خواهید گرفت

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

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

  • کارت اعتباری. توابع ابری برای فایربیس به طرح Firebase Blaze نیاز دارند، به این معنی که شما باید با استفاده از کارت اعتباری، پرداخت در پروژه فایربیس خود را فعال کنید.
  • IDE/ویرایشگر متن مورد نظر شما مانند WebStorm ، Atom یا Sublime .
  • یک ترمینال برای اجرای دستورات shell با نصب NodeJS نسخه ۹.
  • یک مرورگر مثل کروم.
  • کد نمونه. برای این مورد به مرحله بعدی مراجعه کنید.

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

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

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

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

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

۳. یک پروژه Firebase ایجاد کنید و برنامه خود را تنظیم کنید

ایجاد پروژه

  1. با استفاده از حساب گوگل خود وارد کنسول فایربیس شوید.
  2. برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال، FriendlyChat ).
  3. روی ادامه کلیک کنید.
  4. در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
  5. (اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
  6. برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
  7. روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.

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

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

  • یک حساب Cloud Billing به یک روش پرداخت، مانند کارت اعتباری، نیاز دارد.
  • اگر در استفاده از فایربیس و گوگل کلود تازه‌کار هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار ۳۰۰ دلاری و یک حساب کاربری رایگان ابری هستید یا خیر.
  • اگر این codelab را به عنوان بخشی از یک رویداد انجام می‌دهید، از برگزارکننده خود بپرسید که آیا امکان استفاده از فضای ابری (Cloud credits) وجود دارد یا خیر.

اگر به کارت اعتباری دسترسی ندارید یا از ادامه‌ی طرح قیمت‌گذاری Blaze ناراحت هستید، استفاده از Firebase Emulator Suite را در نظر بگیرید که به شما امکان می‌دهد توابع ابری را به صورت رایگان روی دستگاه محلی خود شبیه‌سازی کنید.

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

برای ارتقاء پروژه خود به طرح Blaze، مراحل زیر را دنبال کنید:

  1. در کنسول Firebase، گزینه ارتقاء پلن خود را انتخاب کنید.
  2. طرح Blaze را انتخاب کنید. دستورالعمل‌های روی صفحه را دنبال کنید تا یک حساب Cloud Billing به پروژه شما متصل شود.
    اگر به عنوان بخشی از این ارتقا نیاز به ایجاد یک حساب Cloud Billing داشتید، ممکن است لازم باشد برای تکمیل ارتقا، به روند ارتقا در کنسول Firebase برگردید.

فعال کردن گوگل آث

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

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

همچنین، می‌توانید نام عمومی برنامه خود را روی Friendly Chat تنظیم کنید:

۸۲۹۰۰۶۱۸۰۶aacb۴۶.png

راه‌اندازی فضای ذخیره‌سازی ابری برای فایربیس

این برنامه از فضای ابری برای آپلود تصاویر استفاده می‌کند.

در اینجا نحوه تنظیم فضای ذخیره‌سازی ابری برای فایربیس در پروژه فایربیس شما آورده شده است:

  1. در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Storage را انتخاب کنید.
  2. روی شروع به کار کلیک کنید.
  3. مکانی را برای سطل ذخیره‌سازی پیش‌فرض خود انتخاب کنید.
    کاربران در US-WEST1 ، US-CENTRAL1 و US-EAST1 می‌توانند از ردیف «همیشه رایگان» برای Google Cloud Storage بهره‌مند شوند. کاربران در سایر مناطق ، از قیمت‌ها و میزان استفاده از Google Cloud Storage پیروی می‌کنند.
  4. روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
    بدون اضافه کردن قوانین امنیتی برای مخزن ذخیره‌سازی خود، برنامه را به صورت عمومی توزیع یا در معرض نمایش قرار ندهید .
  5. روی ایجاد کلیک کنید.

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

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

۴. رابط خط فرمان فایربیس را نصب کنید

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

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

npm -g install firebase-tools

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

firebase --version

مطمئن شوید که نسخه Firebase CLI بالاتر از ۴.۰.۰ باشد تا تمام ویژگی‌های جدید مورد نیاز برای Cloud Functions را داشته باشد. در غیر این صورت، npm install -g firebase-tools برای ارتقا اجرا کنید، همانطور که در بالا نشان داده شده است.

با اجرای دستور زیر، Firebase CLI را مجاز کنید:

firebase login

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

firebase use --add

در مرحله بعد، شناسه پروژه خود را انتخاب کنید و دستورالعمل‌ها را دنبال کنید. در صورت درخواست، می‌توانید هر نام مستعاری مانند codelab را انتخاب کنید.

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

حالا که پروژه خود را وارد و پیکربندی کرده‌اید، آماده‌اید تا برای اولین بار برنامه وب را اجرا کنید! یک پنجره ترمینال باز کنید، به پوشه 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

برنامه وب را باز کنید

خط آخر باید آدرس میزبانی (Hosting URL) را نمایش دهد. اکنون برنامه وب باید از این آدرس اینترنتی که به شکل https://<project-id>.firebaseapp.com است، ارائه شود. آن را باز کنید. باید رابط کاربری یک برنامه چت را ببینید.

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

3b1284f5144b54f6.png

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

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

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

e926868b0546ed71.png

اکنون، با استفاده از Firebase SDK for Cloud Functions، برخی قابلیت‌ها را اضافه خواهیم کرد.

۶. دایرکتوری توابع

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

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

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

cd functions
ls

اگر با Node.js آشنا نیستید، یادگیری بیشتر در مورد آن قبل از ادامه‌ی کدنویسی مفید خواهد بود.

فایل package.json از قبل دو وابستگی مورد نیاز را فهرست کرده است: Firebase SDK برای توابع ابری و Firebase Admin SDK . برای نصب آنها به صورت محلی، به پوشه functions بروید و دستور زیر را اجرا کنید:

npm install

حالا بیایید نگاهی به فایل index.js بیندازیم:

ایندکس.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.

ما ماژول‌های مورد نیاز را وارد می‌کنیم و سپس سه تابع (Functions) را به جای TODOها می‌نویسیم. بیایید با وارد کردن ماژول‌های Node مورد نیاز شروع کنیم.

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

در طول این کدنویسی به دو ماژول نیاز خواهید داشت: firebase-functions امکان نوشتن تریگرها و لاگ‌های Cloud Functions را فراهم می‌کند در حالی که firebase-admin امکان استفاده از پلتفرم Firebase روی سروری با دسترسی ادمین را برای انجام اقداماتی مانند نوشتن در Cloud Firestore یا ارسال اعلان‌های FCM فراهم می‌کند.

در فایل index.js ، اولین TODO را با کد زیر جایگزین کنید:

ایندکس.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.

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

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

۸. به کاربران جدید خوشامد بگویید

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

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

۴۴۲c۹c۱۰b۵e۲b۲۴۵.png

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

اضافه شدن پیام‌های خوشامدگویی

اولین تابع ابری پیامی اضافه می‌کند که به کاربران جدید در چت خوشامد می‌گوید. برای این کار، می‌توانیم از trigger functions.auth().onCreate استفاده کنیم که هر بار که کاربر برای اولین بار در برنامه Firebase وارد سیستم می‌شود، تابع را اجرا می‌کند. تابع addWelcomeMessages را به فایل index.js خود اضافه کنید:

ایندکس.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 انجام می‌دهیم، جایی که پیام‌های چت ذخیره می‌شوند.

از آنجایی که این یک عملیات ناهمزمان است، باید Promise را برگردانیم که نشان می‌دهد Cloud Firestore چه زمانی نوشتن را تمام کرده است تا توابع Cloud خیلی زود اجرا نشوند.

استقرار توابع ابری

توابع ابری فقط پس از استقرار آنها فعال خواهند شد. برای انجام این کار، این دستور را در خط فرمان اجرا کنید:

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 Console Authentication را باز کنید و حساب خود را از لیست کاربران حذف کنید. سپس دوباره وارد سیستم شوید.

۲۶۲۵۳۵d1b1223c65.png

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

۱c70e0d64b23525b.png

۹. مدیریت تصاویر

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

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

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

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

فعال کردن API Cloud Vision

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

5c77fee51ec5de49.png

نصب وابستگی‌ها

برای مدیریت تصاویر، از کتابخانه کلاینت Google Cloud Vision برای Node.js، @google-cloud/vision ، برای اجرای تصاویر از طریق API Cloud Vision و شناسایی تصاویر نامناسب استفاده خواهیم کرد.

برای نصب این بسته در برنامه Cloud Functions خود، دستور npm install --save زیر را اجرا کنید. مطمئن شوید که این کار را از دایرکتوری functions انجام می‌دهید.

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

این دستور، بسته را به صورت محلی نصب کرده و آن را به عنوان یک وابستگی اعلان‌شده در فایل package.json شما اضافه می‌کند.

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

برای وارد کردن وابستگی‌های نصب‌شده و برخی از ماژول‌های اصلی Node.js ( path ، os و fs ) که در این بخش به آنها نیاز خواهیم داشت، خطوط زیر را به بالای فایل index.js خود اضافه کنید:

ایندکس.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 خود اضافه کنید:

ایندکس.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 گیگابایت حافظه دریافت کند، زیرا این تابع به حافظه زیادی نیاز دارد.

وقتی این تابع فعال می‌شود، تصویر از طریق API مربوط به Cloud Vision اجرا می‌شود تا تشخیص دهد که آیا به عنوان بزرگسال یا خشن علامت‌گذاری شده است یا خیر. اگر تصویر بر اساس این معیارها نامناسب تشخیص داده شود، تصویر را تار می‌کنیم که این کار در تابع blurImage انجام می‌شود، همانطور که در ادامه خواهیم دید.

تار کردن تصویر

تابع blurImage زیر را به فایل index.js خود اضافه کنید:

ایندکس.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

تابع را آزمایش کنید

پس از اینکه تابع با موفقیت مستقر شد:

  1. برنامه خود را با استفاده از URL میزبان (به شکل https://<project-id>.firebaseapp.com ) در مرورگر خود باز کنید.
  2. پس از ورود به برنامه، یک تصویر آپلود کنید: 4db9fdab56703e4a.png
  3. بهترین تصویر توهین‌آمیز خود را برای آپلود انتخاب کنید (یا می‌توانید از این زامبی گوشت‌خوار استفاده کنید!) و پس از چند لحظه، باید پست خود را با نسخه‌ای تار از تصویر، رفرش شده ببینید: 83dd904fbaf97d2b.png

۱۰. اعلان‌های پیام جدید

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

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

اگر می‌خواهید یاد بگیرید که چگونه توکن‌های دستگاه FCM را در یک برنامه وب دریافت کنید، می‌توانید از Firebase Web Codelab استفاده کنید.

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

برای تشخیص زمان ارسال پیام‌های جدید، از تریگر functions.firestore.document().onCreate Cloud Functions استفاده خواهید کرد که کد شما را هنگام ایجاد یک شیء جدید در مسیر مشخص شده از Cloud Firestore اجرا می‌کند. تابع sendNotifications به فایل index.js خود اضافه کنید:

ایندکس.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 خود اضافه کنید:

ایندکس.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. با استفاده از یک مرورگر دیگر (یا یک پنجره ناشناس)، وارد برنامه شوید و پیامی ارسال کنید. باید اعلانی را که توسط مرورگر اول نمایش داده می‌شود، ببینید: ۴۵۲۸۲ab12b28b926.png

۱۱. تبریک می‌گویم!

شما از Firebase SDK برای توابع ابری استفاده کرده‌اید و اجزای سمت سرور را به یک برنامه چت اضافه کرده‌اید.

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

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

مراحل بعدی

اطلاعات بیشتر