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

۱. مقدمه

این آزمایشگاه کد، شما را در فرآیند توسعه یک برنامه چند پلتفرمی با Firebase Cloud Messaging (FCM) با استفاده از Flutter راهنمایی می‌کند. شما یک بخش از پیاده‌سازی برنامه را خواهید نوشت و سپس آن را به صورت یکپارچه روی سه پلتفرم اندروید، iOS و وب اجرا خواهید کرد. همچنین یاد خواهید گرفت که چگونه FCM را در Flutter ادغام کنید و چگونه برای دریافت و ارسال پیام‌ها کد بنویسید. در نهایت، آزمایشگاه کد، ویژگی بلوک‌های مخصوص پلتفرم FCM HTTP v1 API را معرفی می‌کند که به شما امکان می‌دهد یک پیام واحد ارسال کنید که در پلتفرم‌های مختلف رفتارهای متفاوتی دارد.

پیش‌نیاز

درک اولیه از فلاتر.

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

  • نحوه راه‌اندازی و ایجاد یک برنامه Flutter.
  • نحوه اضافه کردن وابستگی‌های FCM.
  • نحوه ارسال پیام‌های تکی FCM به برنامه شما.
  • نحوه ارسال پیام‌های FCM موضوعی به برنامه شما.

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

شما می‌توانید codelab را با استفاده از هر یک از دستگاه‌های زیر اجرا کنید:

به صورت اختیاری، برای اجرای codelab با استفاده از پلتفرم iOS، به یک دستگاه iOS، یک حساب توسعه‌دهنده اپل و یک دستگاه macOS با XCode نصب شده نیاز دارید.

۲. تنظیمات فلاتر

راه‌اندازی محیط توسعه فلاتر

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

برای راه‌اندازی محیط توسعه Flutter، مراحل زیر را دنبال کنید:

  1. Flutter را برای سیستم عامل خود دانلود و نصب کنید: نصب | Flutter
  2. مطمئن شوید که ابزار Flutter به مسیر شما اضافه شده است.
  3. ویرایشگر خود را برای Flutter همانطور که در بخش «راه‌اندازی ویرایشگر | Flutter» نشان داده شده است، تنظیم کنید. حتماً افزونه‌های Flutter و Dart را برای ویرایشگر خود نصب کنید. برای بقیه‌ی بخش کدنویسی، از اندروید استودیو استفاده خواهید کرد.
  4. از خط فرمان، flutter doctor را اجرا کنید، که تنظیمات شما را اسکن می‌کند و هرگونه وابستگی از دست رفته‌ای را که نیاز به اصلاح دارند، فهرست می‌کند. دستورالعمل‌ها را دنبال کنید تا هرگونه وابستگی مهم از دست رفته را اصلاح کنید. توجه داشته باشید که برخی از وابستگی‌ها ممکن است ضروری نباشند. به عنوان مثال، اگر قصد توسعه برای iOS را ندارید، عدم وجود وابستگی CocoaPods مشکلی ایجاد نمی‌کند.

ایجاد یک پروژه فلاتر

  1. دستورات زیر را برای ایجاد برنامه Flutter خود اجرا کنید و سپس به دایرکتوری آن بروید:
    flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter
    cd fcmflutter
    
  2. در اندروید استودیو، به File -> Open بروید، مسیر برنامه Flutter خود را پیدا کنید و سپس روی Open کلیک کنید تا پروژه در اندروید استودیو باز شود. کد برنامه در فایل lib/main.dart قرار دارد.
  3. در نوار ابزار اندروید استودیو، روی فلش رو به پایین کلیک کنید تا یک دستگاه اندروید انتخاب شود. اگر انتخابگر هدف خالی است، دستگاه‌های مجازی اندروید یا اگر ترجیح می‌دهید برنامه را از یک مرورگر وب یا دستگاه iOS اجرا کنید، مرورگر کروم یا شبیه‌ساز iOS را نصب کنید. ممکن است لازم باشد دستگاه را به صورت دستی اجرا کنید و لیست را برای یافتن دستگاه هدف به‌روزرسانی کنید.

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

روی اجرا کلیک کنید دکمه اجرا در اندروید استودیو برای راه اندازی برنامه.

رابط کاربری یک اپلیکیشن آزمایشی فلاتر منتشر شده

تبریک! شما با موفقیت یک برنامه Flutter ایجاد کردید.

۳. تنظیمات فایربیس و فلاترفایر

برای توسعه برنامه‌ای که با استفاده از Flutter با Firebase Cloud Messaging ادغام می‌شود، به موارد زیر نیاز دارید:

  • یک پروژه فایربیس.
  • یک رابط خط فرمان (CLI) فایربیسِ کارآمد.
  • نصب FlutterFire.
  • یک برنامه که با flutterfire configure پیکربندی و تولید شده است.

پروژه فایربیس خود را ایجاد کنید

اگر از قبل یک پروژه Firebase دارید، می‌توانید از این مرحله صرف نظر کنید.

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

تبریک! شما با موفقیت یک پروژه Firebase ایجاد کردید.

تنظیم رابط خط فرمان فایربیس

اگر Firebase CLI را تنظیم کرده‌اید، می‌توانید از این مرحله صرف نظر کنید.

برای دانلود و نصب Firebase CLI به مرجع Firebase CLI مراجعه کنید. با استفاده از دستور زیر با حساب گوگل خود وارد Firebase شوید:

firebase login

فلاترفایر را راه‌اندازی کنید

خط فرمان را در پروژه خود در اندروید استودیو باز کنید ( View -> Tool Windows -> Terminal ) و دستورات زیر را برای تنظیم FlutterFire اجرا کنید:

  1. افزونه FlutterFire را نصب کنید:
    flutter pub add firebase_core
    
  2. افزونه FCM را نصب کنید:
    flutter pub add firebase_messaging
    
  3. رابط خط فرمان FlutterFire را راه‌اندازی کنید:
    dart pub global activate flutterfire_cli
    
  4. پروژه Firebase را روی Flutter پیکربندی کنید:
    flutterfire configure --PROJECT_ID
    
    PROJECT_ID با شناسه پروژه Firebase که در مرحله اول ایجاد کردید جایگزین کنید. از کلیدهای جهت‌نما و فاصله برای انتخاب پلتفرم‌ها استفاده کنید یا برای استفاده از پلتفرم‌های پیش‌فرض، Enter را فشار دهید.

این آزمایشگاه کد از پلتفرم‌های پیش‌فرض (اندروید، iOS و وب) استفاده می‌کند، اما شما می‌توانید فقط یک یا دو پلتفرم را انتخاب کنید. در صورت درخواست شناسه بسته iOS، com.flutter.fcm.fcmflutter یا شناسه بسته iOS خودتان را با فرمت [company domain name].[project name] وارد کنید. پس از اتمام دستور، صفحه کنسول Firebase را رفرش کنید. خواهید دید که برنامه‌هایی برای پلتفرم‌های انتخاب شده تحت پروژه Firebase ایجاد شده است.

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

این دستور یک فایل firebase_options.dart در دایرکتوری lib ایجاد می‌کند که شامل تمام گزینه‌های مورد نیاز برای مقداردهی اولیه است.

تنظیم پیام‌رسانی ابری برای iOS

  1. به صفحه توسعه‌دهندگان اپل بروید و در تب Keys روی Create a key کلیک کنید.

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

  1. نام کلید را وارد کنید و سرویس‌های اعلان‌های فوری اپل (APN) را بررسی کنید. یک اسکرین‌شات بریده‌شده از صفحه توسعه‌دهندگان اپل که کادر متنی مربوط به نام کلید جدید را هایلایت می‌کند
  2. فایل کلید را که پسوند .p8 دارد، دانلود کنید. یک اسکرین‌شات بریده‌شده از صفحه توسعه‌دهندگان اپل که دکمه دانلود یک کلید را برجسته می‌کند
  3. در کنسول فایربیس ، به تنظیمات پروژه بروید و تب Cloud Messaging را انتخاب کنید.

تصویری برش خورده از صفحه کنسول فایربیس که اجزای مربوط به تنظیمات پروژه به‌روزرسانی را برجسته می‌کند

تصویری برش خورده از صفحه کنسول فایربیس که تب Cloud Messaging را هایلایت می‌کند

  1. فایل کلید APN مربوط به برنامه iOS را در تب Cloud Messaging آپلود کنید. شناسه کلید APN را از تب Cloud Messaging و شناسه تیم را که می‌توانید در مرکز عضویت اپل پیدا کنید، وارد کنید. تصویری بریده‌شده از صفحه کنسول فایربیس که دکمه‌های آپلود کلید احراز هویت APN را برجسته می‌کند.

۴. آماده‌سازی FCM

قبل از اینکه یک برنامه بتواند از FCM پیام دریافت کند، باید:

  • FlutterFire را مقداردهی اولیه کنید.
  • درخواست مجوزهای اعلان.
  • برای دریافت توکن ثبت نام، در FCM ثبت نام کنید.

مقداردهی اولیه

برای مقداردهی اولیه سرویس، تابع اصلی ( lib/main.dart ) را با این کد جایگزین کنید:

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by flutterfire configure
import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler
 // TODO: Subscribe to a topic

 runApp(MyApp());
}

سپس Tools -> Flutter -> Flutter Pub را اجرا کنید تا به اندروید استودیو بروید و بسته‌های اضافه شده در Setup FlutterFire را بارگذاری کنید و کد را با تنظیم Intellisense مناسب در اندروید استودیو نمایش دهید.

این، FlutterFire را برای پلتفرم فعلی DefaultFirebaseOptions.currentPlatform مقداردهی اولیه می‌کند، که از فایل تولید شده firebase_options.dart وارد شده است. توجه داشته باشید که initializeApp یک تابع ناهمزمان است و کلمه کلیدی await تضمین می‌کند که مقداردهی اولیه قبل از اجرای برنامه کامل شده است.

درخواست مجوز

برنامه برای دریافت اعلان‌ها باید از کاربر اجازه بگیرد. متد requestPermission که توسط firebase_messaging ارائه می‌شود، یک پنجره یا پاپ‌آپ را نشان می‌دهد که از کاربر می‌خواهد مجوز را تأیید یا رد کند.

ابتدا، این کد را در تابع اصلی زیر کامنت TODO: Request permission کپی کنید. settings برگردانده شده به شما می‌گوید که آیا کاربر مجوز را اعطا کرده است یا خیر.

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

سپس، در نوار ابزار اندروید استودیو، از میان گزینه‌های موجود، گزینه Chrome (web) را انتخاب کرده و برنامه را دوباره اجرا کنید.

یک اسکرین‌شات برش‌خورده از نوار ابزار اندروید استودیو به همراه انتخابگر هدف و دکمه‌ی اجرا

سپس، یک تب کروم با یک پنجره بازشو که درخواست مجوز می‌کند، اجرا می‌شود. اگر روی Allow کلیک کنید، در کنسول اندروید استودیو یک گزارش مشاهده خواهید کرد: Permission granted: AuthorizationStatus.authorized . پس از اینکه درخواست مجوز را مجاز یا مسدود کردید، پاسخ شما به همراه برنامه‌تان در مرورگر ذخیره می‌شود و پنجره بازشو دیگر نمایش داده نمی‌شود. توجه داشته باشید که وقتی دوباره برنامه وب را در اندروید استودیو اجرا می‌کنید، ممکن است دوباره از شما درخواست مجوز شود.

اسکرین‌شات بریده‌شده از یک تب کروم با یک پنجره‌ی پاپ‌آپ که درخواست می‌کند

ثبت نام

این کد را در تابع اصلی زیر کامنت TODO: Register with FCM کپی کنید تا در FCM ثبت شود. فراخوانی getToken یک توکن ثبت را برمی‌گرداند که می‌تواند توسط سرور برنامه یا محیط سرور مورد اعتماد برای ارسال پیام به کاربران استفاده شود.

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

در نوار ابزار اندروید استودیو، یک دستگاه اندروید را انتخاب کرده و برنامه را اجرا کنید. در کنسول اندروید استودیو، توکن ثبت نام به صورت زیر چاپ می‌شود:

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

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

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

مراحل اضافی برای دریافت پیام در وب

برنامه‌های وب برای دریافت توکن ثبت و گوش دادن به پیام‌های دریافتی به دو مرحله اضافی نیاز دارند. وب باید یک کلید VAPID را به getToken ارسال کند تا درخواست‌های ارسالی به سرویس‌های web push پشتیبانی‌شده را تأیید کند.

ابتدا، تب Cloud Messaging پروژه Firebase را در کنسول Firebase باز کنید، به پایین صفحه بروید تا به بخش پیکربندی وب برسید تا جفت کلید موجود را پیدا کنید، یا یک جفت کلید جدید ایجاد کنید. برای کپی کردن کلید، روی دکمه برجسته شده کلیک کنید تا بتوانید از آن به عنوان vapidKey استفاده کنید.

یک اسکرین‌شات برش‌خورده از کامپوننت Web Push Certificates در صفحه پیکربندی وب که جفت کلید را هایلایت می‌کند

سپس، کد ثبت نام در بخش ثبت نام را با این کد جایگزین کنید و سپس vapidKey را به‌روزرسانی کنید:

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

سپس، یک فایل firebase-messaging-sw.js در زیر دایرکتوری web/ در ریشه پروژه خود ایجاد کنید. موارد زیر را در firebase-messaging-sw.js کپی کنید تا برنامه وب بتواند رویدادهای onMessage را دریافت کند. برای اطلاعات بیشتر به بخش تنظیم گزینه‌های اعلان در سرویس ورکر مراجعه کنید.

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

پس از آن، در زیر تنظیمات پروژه -> تب عمومی ، به پایین اسکرول کنید و برنامه وب را پیدا کنید، بخش کد firebaseConfig را کپی کرده و در firebase-messaging-sw.js قرار دهید. تصویری برش خورده از کامپوننت وب اپ در صفحه پیکربندی فایربیس

در نهایت، در نوار ابزار اندروید استودیو، در انتخابگر هدف، Chrome (web) را انتخاب کرده و برنامه را اجرا کنید. در کنسول اندروید استودیو، توکن ثبت نام به صورت زیر چاپ می‌شود:

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

توکن ثبت نام را در یک ویرایشگر متن کپی کنید تا بتوانید بعداً از آن برای ارسال پیام استفاده کنید.

مراحل اضافی برای دریافت پیام در iOS

برای دریافت پیام از FCM، دستگاه‌های iOS باید اعلان‌های فوری و حالت‌های پس‌زمینه را در Xcode فعال کنند:

  1. در اندروید استودیو، روی پوشه ios در درخت فایل‌های پروژه کلیک کنید و سپس Tools -> Flutter -> Open iOS module in XCode را انتخاب کنید.
  2. پس از اجرای Xcode، در تب Signing & Capabilities برای پروژه‌ی هدف، گزینه‌های Push Notifications و Background Modes را فعال کنید. برای اطلاعات بیشتر به Configure your app مراجعه کنید.
  3. در نوار ابزار اندروید استودیو، یک دستگاه iOS را در انتخابگر هدف انتخاب کنید و برنامه را اجرا کنید. پس از اعطای مجوز اعلان، توکن ثبت نام در کنسول اندروید استودیو چاپ می‌شود.

برنامه iOS درخواست مجوز برای ارسال اعلان‌ها را دارد

تبریک می‌گوییم، شما با موفقیت برنامه خود را در FCM ثبت کردید. همانطور که در بخش بعدی توضیح داده شده است، آماده دریافت پیام‌ها هستید.

۵. دریافت پیام از FCM

تنظیم کنترل‌کننده‌های پیام

برنامه باید رویدادهای onMessage را هنگام دریافت پیام‌ها در حالت پیش‌زمینه و رویدادهای onBackgroundMessage را هنگام فعال بودن برنامه در پس‌زمینه مدیریت کند.

مدیریت‌کننده پیام پیش‌زمینه

ابتدا، یک کنترلر جریان بعد از کامنت اضافه کنید. TODO: Add stream controller در فایل main.dart اضافه کنید تا پیام‌ها را از کنترل‌کننده رویداد به رابط کاربری منتقل کند.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

برای اضافه کردن وابستگی rxdart، این دستور را از دایرکتوری پروژه اجرا کنید:

flutter pub add rxdart

در مرحله بعد، Tools -> Flutter -> Flutter Pub را اجرا کنید تا به اندروید استودیو بروید و بسته rxdart.dart را بارگذاری کنید و کد را با تنظیمات Intellisense مناسب در اندروید استودیو نمایش دهید.

سپس، یک کنترل‌کننده رویداد اضافه کنید تا به پیام‌های پیش‌زمینه گوش دهد. این TODO: Set up foreground message handler گزارش‌ها را چاپ کرده و پیام را در کنترل‌کننده جریان منتشر می‌کند.

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

پس از آن، ویجت State اصلی که در انتهای فایل main.dart قرار دارد را با کد زیر جایگزین کنید، که یک مشترک به کنترلر جریان در ویجت State اضافه می‌کند و آخرین پیام را روی ویجت نمایش می‌دهد.

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

مدیریت پیام‌های پس‌زمینه برای اندروید/iOS

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

تابع هندلر را بعد از کامنت ایجاد کنید. TODO: Define the background message handler خارج از تابع اصلی و فراخوانی آن در تابع اصلی بعد از کامنت TODO: Set up background message handler .

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

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

از نسخه ۱۱.۲.۸ نرم‌افزار firebase_messaging در FlutterFire، مدیریت پیام‌های پس‌زمینه در پلتفرم‌های مبتنی بر وب نیاز به یک جریان کاری متفاوت دارد. بنابراین، باید یک مدیریت‌کننده پیام جداگانه در service worker web/firebase-messaging-sw.js اضافه کنید.

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

سرور برنامه را تنظیم کنید

  1. مخزن کد سرور https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server را کلون کنید و آن را در اندروید استودیو به عنوان یک پروژه جدید باز کنید. سرور یک پروژه جاوا مبتنی بر Gradle با وابستگی به firebase-admin SDK است که قابلیت ارسال پیام FCM را فراهم می‌کند.
  2. یک حساب کاربری سرویس فایربیس تنظیم کنید که به فایربیس ادمین SDK اجازه دهد تا فراخوانی‌های مربوط به APIهای FCM را مجاز کند. تنظیمات پروژه را در کنسول فایربیس باز کنید و تب حساب‌های سرویس را انتخاب کنید. 'جاوا' را انتخاب کنید و برای دانلود قطعه پیکربندی، Generate new private key کلیک کنید. یک اسکرین‌شات برش‌خورده که قطعه کد پیکربندی SDK ادمین مربوط به کامپوننت حساب‌های سرویس در صفحه تنظیمات پروژه را برجسته می‌کند.
  3. نام فایل را به service-account.json تغییر دهید و آن را در مسیر src/main/resources پروژه سرور کپی کنید.

ارسال پیام آزمایشی

در فایل FcmSender.java ، sendMessageToFcmRegistrationToken یک پیام اعلان (notification) به همراه یک داده (data payload) ایجاد می‌کند. توکن ثبت‌نام (registration token) نمونه برنامه‌ای را که پیام به آن ارسال می‌شود، هدف قرار می‌دهد.

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }
  1. توکن ثبت اندروید را که از بخش ثبت کپی کرده‌اید، کپی کرده و آن را در مقدار مربوط به متغیر registrationToken قرار دهید.
  2. روی اجرا کلیک کنید دکمه اجرا در اندروید استودیو برای اجرای تابع اصلی و ارسال پیام به کاربر از طریق FCM. تصویری برش خورده از آیکون Run که در کنار تابع اصلی FcmSender.java در اندروید استودیو نشان داده شده است.

وقتی برنامه اندروید در پس‌زمینه است، پیام در نوار اعلان‌ها ظاهر می‌شود.

اسکرین‌شات بریده‌شده از پیامی که در نوار اعلان‌های اندروید ظاهر می‌شود

وقتی برنامه اندروید در پیش‌زمینه (foreground) است، در کنسول اندروید استودیو یک گزارش با عنوان «مدیریت یک پیام پیش‌زمینه» (Handling a foreground message) مشاهده خواهید کرد. محتوای پیام همچنین در رابط کاربری (UI) نمایش داده می‌شود، زیرا رابط کاربری (UI) برای پیام‌های جدید به کنترلر جریان (stream controller) متصل شده است.

یک اسکرین‌شات بریده‌شده از محتوای پیام نمایش داده‌شده در برنامه اندروید

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

  • وقتی برنامه وب در پس‌زمینه است (مثلاً وقتی توسط پنجره دیگری پنهان شده یا تب دیگری فعال است)، یک اعلان وب مشاهده خواهید کرد.

تصویر برش خورده از یک اعلان وب که در مرورگر کروم نشان داده شده است

  • وقتی برنامه وب در پیش‌زمینه است، می‌توانید با کلیک راست روی وب و انتخاب Inspect ، گزارش را در کنسول کروم مشاهده کنید. محتوای پیام نیز در رابط کاربری نمایش داده می‌شود. تصویری برش خورده از کنسول کروم به همراه گزارش‌های اشکال‌زدایی

۶. ارسال پیام موضوعی

ویژگی لغو پلتفرم API مربوط به FCM HTTP نسخه ۱، امکان نمایش رفتارهای متفاوت درخواست ارسال پیام را در پلتفرم‌های مختلف فراهم می‌کند. یکی از کاربردهای این ویژگی، نمایش محتوای پیام اعلان متفاوت بر اساس پلتفرم است. این ویژگی بیشتر در هنگام هدف قرار دادن چندین دستگاه (که ممکن است چندین پلتفرم را در بر بگیرند) با پیام‌رسانی موضوعی مورد استفاده قرار می‌گیرد. این بخش شما را با مراحلی آشنا می‌کند که برنامه شما می‌تواند یک پیام موضوعی سفارشی برای هر پلتفرم دریافت کند.

مشترک شدن در یک موضوع از طرف مشتری

برای اشتراک در یک موضوع، این کد را در تابع اصلی زیر کامنت کپی کنید. TODO: Subscribe to a topic :

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[اختیاری] در یک موضوع از سرور برای وب مشترک شوید

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

کیت توسعه نرم‌افزار FCM JS در حال حاضر از اشتراک موضوع سمت کلاینت پشتیبانی نمی‌کند. در عوض، می‌توانید با استفاده از API مدیریت موضوع سمت سرور Admin SDK مشترک شوید. این کد در فایل FcmSubscriptionManager.java اشتراک موضوع سمت سرور را با Java Admin SDK نشان می‌دهد. قبل از اجرای آن، حتماً توکن ثبت نام FCM خود را اضافه کنید:

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

سرور برنامه را باز کنید و روی Run کلیک کنید دکمه اجرا در اندروید استودیو برای اجرای تابع main در فایل FcmSubscriptionManager.java :

تصویری برش خورده از آیکون Run که در کنار تابع اصلی FcmSubscriptionManager.java در اندروید استودیو نشان داده شده است.

ارسال پیام با لغو تنظیمات پلتفرم برای یک موضوع

اکنون آماده ارسال پیام لغو موضوع پلتفرم هستید. در قطعه کد زیر:

  • شما یک درخواست ارسال با یک پیام پایه و عنوان « A new app is available » می‌سازید.
  • این پیام یک اعلان نمایشی با عنوان « A new app is available » در پلتفرم‌های iOS و وب ایجاد می‌کند.
  • این پیام یک اعلان نمایشی با عنوان « A new Android app is available » در دستگاه‌های اندروید ایجاد می‌کند.
private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

در تابع اصلی فایل FcmSender.java ، تابع sendMessageToFcmTopic(); را از حالت کامنت خارج کنید. روی Run کلیک کنید. دکمه اجرا در اندروید استودیو برای ارسال پیام موضوع.

۷. خلاصه و قدم بعدی

به طور خلاصه، شما در مورد توسعه برنامه‌های چند پلتفرمی با استفاده از Flutter و FCM، که شامل راه‌اندازی محیط، ادغام وابستگی‌ها و دریافت و ارسال پیام می‌شود، آموخته‌اید. برای بررسی عمیق‌تر، به مطالب زیر مراجعه کنید:

کدلبز

منابع