این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

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

این Codelab دنباله‌ای برای Firebase Web Codelab است که در آن یاد می‌گیرید چگونه یک برنامه چت با استفاده از Firebase Web SDK بسازید. اگر می‌خواهید با ساختن یک برنامه چت، نحوه استفاده از پلتفرم Firebase را در وب بیاموزید، ابتدا Firebase Web Codelab را دنبال کنید. اگر قبلاً نحوه استفاده از پلتفرم Firebase و CLI را می‌دانید و می‌خواهید در مورد Firebase SDK برای عملکردهای ابری بیاموزید، در جای مناسبی هستید. ما در زیر به شما نشان خواهیم داد که چگونه می توانید نرم افزار Firebase Web Codelab کامل شده را شبیه سازی کنید.

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

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

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

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

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

مخزن GitHub را از خط فرمان کلون کنید:

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

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

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

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

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

در Firebase Console بر روی Add Project کلیک کنید و آن را FriendlyChat بنامید.

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

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

برای استفاده از توابع Cloud برای Firebase و Cloud Storage برای Firebase، پروژه Firebase شما باید در طرح قیمت‌گذاری (Blaze) باشد، به این معنی که به یک حساب Cloud Billing مرتبط است.

حساب Cloud Billing به یک روش پرداخت مانند کارت اعتباری نیاز دارد.
اگر تازه وارد Firebase و Google Cloud هستید، بررسی کنید که آیا واجد شرایط دریافت اعتبار 300 دلاری و یک حساب آزمایشی رایگان Cloud Billing هستید یا خیر.
اگر این نرم‌افزار کد را به‌عنوان بخشی از یک رویداد انجام می‌دهید، از سازمان‌دهنده خود بپرسید که آیا اعتبارات Cloud موجود است یا خیر.

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

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

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

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

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

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

در Firebase Console، بخش Build > Authentication > Sign-in tab را باز کنید (یا برای رفتن به آنجا اینجا را کلیک کنید ). سپس، Google Sign-in Provider را فعال کنید و روی Save کلیک کنید. این به کاربران اجازه می دهد تا با حساب های Google خود در برنامه وب وارد شوند.

همچنین، در صورت تمایل نام عمومی برنامه خود را روی چت دوستانه تنظیم کنید:

Cloud Storage را برای Firebase تنظیم کنید

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

در اینجا نحوه راه اندازی Cloud Storage برای Firebase در پروژه Firebase آمده است:

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

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

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

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

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

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

npm -g install firebase-tools

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

firebase --version

مطمئن شوید که نسخه Firebase CLI بالاتر از 4.0.0 باشد تا تمام آخرین ویژگی های مورد نیاز برای Cloud Function ها را داشته باشد. اگر نه، npm install -g firebase-tools اجرا کنید تا همانطور که در بالا نشان داده شده است ارتقا دهید.

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

firebase login

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

firebase use --add

سپس ID پروژه خود را انتخاب کنید و دستورالعمل ها را دنبال کنید. وقتی از شما خواسته شد، می‌توانید هر نام مستعاری مانند 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 باشد، ارائه شود. بازش کن باید رابط کاربری کاربردی یک برنامه چت را ببینید.

با استفاده از دکمه SIGN-IN WITH GOOGLE به برنامه وارد شوید و با خیال راحت چند پیام اضافه کنید و تصاویر را پست کنید:

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

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

اگر تصادفاً روی Block کلیک کرده‌اید، می‌توانید این تنظیم را با کلیک کردن روی دکمه 🔒 ایمن در سمت چپ URL در Chrome Omnibar و تغییر دادن نوار کنار اعلان‌ها تغییر دهید:

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

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

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

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

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

cd functions
ls

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

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

npm install

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

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

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

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

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

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

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Firebase Admin SDK می‌تواند به‌طور خودکار هنگام استقرار در یک محیط Cloud Functions یا سایر کانتینرهای Google Cloud Platform پیکربندی شود، و این زمانی اتفاق می‌افتد که admin.initializeApp() بدون آرگومان فراخوانی کنیم.

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

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

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

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

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

در Firebase Console بر روی Firestore Database در قسمت Build کلیک کنید. باید مجموعه پیام ها و یک سند حاوی پیامی که نوشته اید را ببینید:

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

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

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

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

افزودن این تابع به شی exports ویژه، روش Node برای دسترسی به تابع خارج از فایل فعلی است و برای توابع ابری مورد نیاز است.

در عملکرد بالا، ما یک پیام خوشامدگویی جدید ارسال شده توسط "Firebase Bot" را به لیست پیام های چت اضافه می کنیم. ما این کار را با استفاده از روش add در مجموعه messages در Cloud Firestore انجام می‌دهیم، جایی که پیام‌های چت در آن ذخیره می‌شوند.

از آنجایی که این یک عملیات ناهمزمان است، باید 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

تابع را تست کنید

هنگامی که عملکرد با موفقیت اجرا شد، باید کاربری داشته باشید که برای اولین بار وارد سیستم شود.

برنامه خود را با استفاده از URL میزبانی (به شکل https://<project-id>.firebaseapp.com ) در مرورگر خود باز کنید.
با یک کاربر جدید، برای اولین بار در برنامه خود با استفاده از دکمه ورود به سیستم وارد شوید.

اگر قبلاً وارد برنامه شده اید، می توانید احراز هویت کنسول Firebase را باز کنید و حساب خود را از لیست کاربران حذف کنید. سپس، دوباره وارد شوید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

از آنجایی که عملکرد شما در محیط Google Cloud اجرا می شود، نیازی به پیکربندی کتابخانه های Cloud Storage و Cloud Vision نیست: آنها به طور خودکار برای استفاده از پروژه شما پیکربندی می شوند.

تشخیص تصاویر نامناسب

شما از تریگر functions.storage.onChange Cloud Functions استفاده خواهید کرد که به محض ایجاد یا تغییر فایل یا پوشه در یک سطل 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.');
    });

توجه داشته باشید که ما برخی از پیکربندی‌های نمونه توابع ابری را اضافه کرده‌ایم که عملکرد را اجرا می‌کند. با .runWith({memory: '2GB'}) ، ما درخواست می کنیم که نمونه به جای حافظه پیش فرض، 2 گیگابایت حافظه دریافت کند، زیرا این تابع حافظه فشرده است.

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

تار شدن تصویر

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

index.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

در تابع بالا، تصویر باینری از فضای ذخیره‌سازی ابری دانلود می‌شود. سپس تصویر با استفاده از ابزار convert ImageMagick تار می شود و نسخه تار شده مجدداً در Storage Bucket آپلود می شود. در مرحله بعد، فایل موجود در نمونه توابع ابری را حذف می کنیم تا مقداری فضای دیسک آزاد شود، و این کار را انجام می دهیم زیرا همان نمونه توابع ابری می تواند دوباره استفاده شود و اگر فایل ها پاک نشوند، ممکن است فضای دیسک تمام شود. در نهایت، یک 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

تابع را تست کنید

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

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

10. اعلان های پیام جدید

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

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

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

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

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

index.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

در تابع بالا، ما در حال جمع‌آوری توکن‌های دستگاه کاربران از پایگاه داده Cloud Firestore و ارسال اعلان به هر یک از آنها با استفاده از تابع admin.messaging().sendToDevice هستیم.

توکن ها را پاک کنید

در نهایت، می‌خواهیم توکن‌هایی را که دیگر معتبر نیستند حذف کنیم. این زمانی اتفاق می‌افتد که رمزی که زمانی از کاربر دریافت کرده‌ایم دیگر توسط مرورگر یا دستگاه استفاده نمی‌شود. به عنوان مثال، اگر کاربر مجوز اعلان جلسه مرورگر را لغو کرده باشد، این اتفاق می افتد. برای انجام این کار، تابع cleanupTokens زیر را در فایل index.js خود اضافه کنید:

index.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

استقرار تابع

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

firebase deploy --only functions

این خروجی کنسولی است که باید ببینید:

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

✔  Deploy complete!

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

تابع را تست کنید

هنگامی که عملکرد با موفقیت اجرا شد، برنامه خود را با استفاده از URL میزبانی (به شکل https://<project-id>.firebaseapp.com ) در مرورگر خود باز کنید.
اگر برای اولین بار به برنامه وارد می‌شوید، مطمئن شوید که در صورت درخواست، اعلان‌ها را مجاز می‌کنید:
برگه برنامه چت را ببندید یا برگه دیگری را نمایش دهید: اعلان‌ها فقط در صورتی ظاهر می‌شوند که برنامه در پس‌زمینه باشد. اگر می‌خواهید نحوه دریافت پیام‌ها را در حالی که برنامه‌تان در پیش‌زمینه است یاد بگیرید، به مستندات ما نگاهی بیندازید.
با استفاده از یک مرورگر دیگر (یا یک پنجره ناشناس)، وارد برنامه شوید و یک پیام ارسال کنید. شما باید یک اعلان نمایش داده شده توسط اولین مرورگر را ببینید:

11. تبریک!

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

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

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

مراحل بعدی

درباره سایر انواع ماشه عملکرد Cloud بیاموزید.
از Firebase و توابع Cloud با برنامه خود استفاده کنید.

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

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

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

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

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

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

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

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

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

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

Cloud Storage را برای Firebase تنظیم کنید

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

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

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

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

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

index.js

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

index.js

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

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

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

index.js

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

تابع را تست کنید

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

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

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

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

index.js

تشخیص تصاویر نامناسب

index.js

تار شدن تصویر

index.js

استقرار تابع

تابع را تست کنید

10. اعلان های پیام جدید

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

index.js

توکن ها را پاک کنید

index.js

استقرار تابع

تابع را تست کنید

11. تبریک!

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

مراحل بعدی

بیشتر بدانید