أرسل واستقبل إشعارات لتطبيق Flutter باستخدام Firebase Cloud Messaging

1 المقدمة

آخر تحديث : 2022-04-04

يرشدك هذا الدرس التطبيقي حول التعليمات البرمجية خلال عملية تطوير تطبيق متعدد الأنظمة الأساسية باستخدام Firebase Cloud Messaging (FCM) باستخدام Flutter. ستكتب جزءًا واحدًا من تنفيذ التطبيق، ثم تقوم بإنشائه وتشغيله بسلاسة على ثلاث منصات: Android وiOS والويب. ستتعلم أيضًا كيفية دمج FCM في Flutter وكيفية كتابة التعليمات البرمجية لتلقي الرسائل وإرسالها. وأخيرًا، يقدم برنامج Codelab ميزة الكتل الخاصة بالنظام الأساسي لـ FCM HTTP v1 API، والتي تتيح لك إرسال رسالة واحدة لها سلوكيات مختلفة على منصات مختلفة.

المتطلبات المسبقة

الفهم الأساسي للرفرفة.

ما ستتعلمه

  • كيفية إعداد وإنشاء تطبيق Flutter.
  • كيفية إضافة تبعيات FCM.
  • كيفية إرسال رسائل FCM واحدة إلى تطبيقك.
  • كيفية إرسال رسائل FCM للموضوع إلى تطبيقك.

ماذا ستحتاج

  • أحدث إصدار ثابت من Android Studio تم تكوينه باستخدام المكونات الإضافية Dart وFlutter.

يمكنك تشغيل Codelab باستخدام أي من الأجهزة التالية:

بشكل اختياري، لتشغيل الدرس التطبيقي حول التعليمات البرمجية باستخدام النظام الأساسي iOS، تحتاج إلى جهاز iOS وحساب Apple Developer وجهاز macOS مثبت عليه XCode.

2. إعداد الرفرفة

إذا قمت بالفعل بإعداد بيئة تطوير Flutter، فتخط هذا القسم.

لإعداد بيئة تطوير Flutter، اتبع الخطوات التالية:

  1. قم بتنزيل وتثبيت Flutter لنظام التشغيل الخاص بك: تثبيت | رفرفة
  2. تأكد من إضافة أداة Flutter إلى المسار الخاص بك.
  3. قم بإعداد المحرر الخاص بك لـ Flutter كما هو موضح في إعداد المحرر | Flutter تأكد من تثبيت المكونات الإضافية Flutter وDart للمحرر الخاص بك. بالنسبة لبقية الدرس التطبيقي حول البرمجة، ستستخدم Android Studio.
  4. من سطر الأوامر، قم بتشغيل flutter doctor ، الذي يقوم بفحص الإعداد الخاص بك ويسرد أي تبعيات مفقودة تحتاج إلى إصلاح. اتبع الإرشادات لإصلاح أي تبعيات مهمة مفقودة. لاحظ أن بعض التبعيات قد لا تكون ضرورية. على سبيل المثال، إذا كنت لن تقوم بالتطوير لنظام iOS، فلن تكون تبعية CocoaPods المفقودة مشكلة حظر.
  5. قم بتشغيل هذا الأمر لإنشاء تطبيق Flutter الخاص بك في دليل fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter ، ثم قم بتغيير الدلائل إلى fcmflutter .
  1. في Android Studio، انتقل إلى ملف -> فتح ، وابحث عن مسار تطبيق Flutter ثم انقر فوق فتح لفتح المشروع في Android Studio. رمز التطبيق موجود في الملف lib/main.dart .

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

شريط أدوات Android Studio مع تمييز السهم المنسدل لقائمة هدف الإنشاء.

انقر فوق تشغيل زر التشغيل في Android Studio لإطلاق التطبيق.

واجهة المستخدم لتطبيق Flutter التجريبي الذي تم إطلاقه

تهانينا! لقد قمت بإنشاء تطبيق Flutter بنجاح.

3. إعداد Firebase وFlutterFire

لتطوير تطبيق يتكامل مع Firebase Cloud Messaging باستخدام Flutter، تحتاج إلى:

  • مشروع Firebase.
  • واجهة سطر أوامر Firebase العاملة.
  • تثبيت FlutterFire.
  • تطبيق تم تكوينه وإنشاؤه باستخدام flutterfire configure .

قم بإنشاء مشروع Firebase الخاص بك

إذا كان لديك بالفعل مشروع Firebase، فيمكنك تخطي هذه الخطوة.

  1. إذا كان لديك حساب Google، فافتح Firebase وقم بتسجيل الدخول باستخدام حساب Google الخاص بك، ثم انقر فوق الانتقال إلى وحدة التحكم .
  2. في وحدة تحكم Firebase، انقر فوق إضافة مشروع . اتبع التعليمات لإنشاء مشروع. لا تحدد تمكين Google Analytics لهذا المشروع لأنك لن تستخدمه في هذا المشروع.
  3. بعد إنشاء المشروع، انتقل إلى إعدادات المشروع بالنقر فوق رمز الترس بجوار نظرة عامة على المشروع .

لقطة شاشة تم اقتصاصها من Firebase Console لتسليط الضوء على رمز قائمة إعدادات المشروع و

يتم استخدام معرف المشروع لتعريف المشروع بشكل فريد، وقد يكون مختلفًا عن اسم المشروع . سيتم استخدام معرف المشروع لإعداد FlutterFire لاحقًا.

لقطة شاشة تم اقتصاصها من Firebase Console لتسليط الضوء على معرف المشروع

تهانينا! لقد قمت بإنشاء مشروع Firebase بنجاح.

قم بإعداد Firebase CLI

إذا قمت بإعداد Firebase CLI، فيمكنك تخطي هذه الخطوة.

انتقل إلى مرجع Firebase CLI لتنزيل Firebase CLI وتثبيته. قم بتسجيل الدخول إلى Firebase باستخدام حساب Google الخاص بك باستخدام الأمر التالي:

firebase login

قم بإعداد FlutterFire

  1. قم بتثبيت البرنامج الإضافي FlutterFire باستخدام الأمر: flutter pub add firebase_core
  2. قم بتثبيت البرنامج المساعد FCM: flutter pub add firebase_messaging
  3. قم بإعداد FlutterFire CLI: dart pub global activate flutterfire_cli
  4. قم بتكوين مشروع Firebase على Flutter: flutterfire configure --project=fcm4flutter. استخدم مفاتيح الأسهم والمسافة لتحديد الأنظمة الأساسية أو اضغط على Enter لاستخدام الأنظمة الأساسية الافتراضية.

يستخدم هذا الدرس التطبيقي حول التعليمات البرمجية الأنظمة الأساسية الافتراضية (Android وiOS والويب)، ولكن يمكنك اختيار نظام أساسي واحد أو اثنين فقط. إذا طُلب منك معرف حزمة iOS، فأدخل com.flutter.fcm.fcmflutter أو معرف حزمة iOS الخاص بك بتنسيق [company domain name].[project name] . بعد اكتمال الأمر، قم بتحديث صفحة Firebase Console. سترى أنها أنشأت تطبيقات للأنظمة الأساسية المحددة ضمن مشروع Firebase.

لقطة شاشة تم اقتصاصها من Firebase Console تعرض التطبيقات التي تم إنشاؤها للأنظمة الأساسية المحددة

يقوم هذا الأمر بإنشاء ملف firebase_options.dart ضمن دليل lib ، والذي يحتوي على كافة الخيارات المطلوبة للتهيئة.

قم بإعداد خدمة المراسلة السحابية لنظام iOS

  1. انتقل إلى صفحة مطور Apple، وانقر فوق "إنشاء مفتاح" في علامة التبويب "المفاتيح ".

لقطة شاشة مقصوصة لصفحة مطور Apple تسلط الضوء على مكونات الصفحة لإنشاء المفتاح

  1. أدخل اسم المفتاح وتحقق من خدمات Apple Push Notifications (APNs) . لقطة شاشة مقصوصة لصفحة مطور Apple تبرز مربع النص لاسم المفتاح الجديد
  2. قم بتنزيل ملف المفتاح، الذي له ملحق الملف .p8 . لقطة شاشة مقصوصة لصفحة مطور Apple تسلط الضوء على زر تنزيل المفتاح
  3. في وحدة تحكم Firebase ، انتقل إلى إعدادات المشروع الخاصة بالمشروع واختر علامة التبويب Cloud Messaging .

لقطة شاشة مقصوصة لصفحة Firebase Console التي تسلط الضوء على مكونات إعدادات مشروع التحديث

لقطة شاشة مقصوصة لصفحة Firebase Console التي تسلط الضوء على علامة التبويب Cloud Messaging

  1. قم بتحميل ملف مفتاح APNs لتطبيق iOS في علامة التبويب Cloud Messaging . أدخل معرف مفتاح APNs من علامة التبويب Cloud Messaging ومعرف الفريق، الذي يمكن العثور عليه في مركز عضوية Apple. لقطة شاشة مقصوصة لصفحة Firebase Console التي تسلط الضوء على الأزرار الخاصة بتحميل مفتاح مصادقة APNs

4. إعداد 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

 runApp(MyApp());
}

ثم قم بتشغيل الأدوات -> Flutter -> Flutter Pub احصل على Android Studio لتحميل الحزم المضافة في Set up FlutterFire ، وعرض الكود مع إعداد Intellisense المناسب في Android Studio.

يؤدي هذا إلى تهيئة 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}');
 }

بعد ذلك، على شريط أدوات Android Studio، حدد Chrome (web) من محدد الهدف ثم قم بتشغيل التطبيق مرة أخرى.

لقطة شاشة مقصوصة لشريط أدوات Android Studio مع محدد الهدف وزر التشغيل

بعد ذلك، يتم تشغيل علامة تبويب Chrome مع نافذة منبثقة تطلب الإذن. إذا قمت بالنقر Allow ، فسترى سجلاً في وحدة تحكم Android Studio: Permission granted: AuthorizationStatus.authorized . بعد السماح بطلب الإذن أو حظره، يتم تخزين استجابتك مع تطبيقك في المتصفح، ولا تظهر النافذة المنبثقة مرة أخرى. لاحظ أنه عند تشغيل تطبيق الويب مرة أخرى على Android Studio، قد تتم مطالبتك بالإذن مرة أخرى. لقطة شاشة تم اقتصاصها لعلامة تبويب Chrome مع نافذة منبثقة تطلب ذلك

تسجيل

انسخ هذا الرمز إلى الوظيفة الرئيسية الموجودة أسفل التعليق 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');
}

على شريط أدوات Android Studio، حدد جهاز Android وقم بتشغيل التطبيق. في وحدة تحكم Android Studio، تتم طباعة رمز التسجيل على النحو التالي:

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 من أجل السماح بإرسال الطلبات إلى خدمات دفع الويب المدعومة.

أولاً، افتح علامة التبويب Cloud Messaging لمشروع Firebase في Firebase Console، ثم قم بالتمرير لأسفل إلى قسم تكوين الويب للعثور على زوج المفاتيح الحالي، أو قم بإنشاء زوج مفاتيح جديد. انقر فوق الزر المميز لنسخ المفتاح بحيث يمكن استخدامه كمفتاح vapidKey.

لقطة شاشة مقصوصة لمكون شهادات Web Push في صفحة تكوين الويب التي تسلط الضوء على زوج المفاتيح

بعد ذلك، استبدل رمز التسجيل في قسم التسجيل بهذا الرمز ثم قم بتحديث 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: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

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

// todo Set up background message handler

بعد ذلك، ضمن إعدادات المشروع -> علامة التبويب عام ، قم بالتمرير لأسفل وابحث عن تطبيق الويب ، وانسخ قسم كود firebaseConfig والصقه في firebase-messaging-sw.js . لقطة شاشة مقصوصة لمكون تطبيق الويب في صفحة تكوين Firebase

أخيرًا، على شريط أدوات Android Studio، حدد Chrome (web) في محدد الهدف وقم بتشغيل التطبيق. في وحدة تحكم Android Studio، تتم طباعة رمز التسجيل على النحو التالي:

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. في Android Studio، انقر بزر الماوس الأيمن على اسم المشروع ثم حدد Flutter -> Open iOS Module in Xcode . لقطة شاشة تم اقتصاصها
  2. بعد إطلاق Xcode، قم بتمكين الإشعارات الفورية وأوضاع الخلفية في علامة التبويب Signing & Capabilities لهدف المشروع. راجع تكوين تطبيقك لمزيد من المعلومات.
  3. على شريط أدوات Android Studio، حدد جهاز iOS في محدد الهدف وقم بتشغيل التطبيق. بعد منح إذن الإعلام، تتم طباعة رمز التسجيل في وحدة تحكم Android Studio.

لقطة شاشة مقصوصة لتطبيق iOS تطلب الإذن لإرسال الإشعارات

تهانينا، لقد قمت بتسجيل تطبيقك بنجاح مع FCM. أنت جاهز لتلقي الرسائل، كما هو موضح في القسم التالي.

5. تلقي الرسائل من 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 .

بعد ذلك، قم بتشغيل الأدوات -> Flutter -> Flutter Pub. انتقل إلى Android Studio لتحميل حزمة rxdart.dart وعرض الكود مع إعدادات Intellisense المناسبة في Android Studio.

ثم قم بإضافة معالج حدث للاستماع إلى الرسائل الأمامية بعد التعليق 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);
 });

بعد ذلك، استبدل عنصر واجهة مستخدم الحالة الأصلي في الملف main.dart بهذا الرمز، الذي يضيف مشتركًا إلى وحدة التحكم في التدفق في عنصر واجهة مستخدم الحالة ويعرض الرسالة الأخيرة على عنصر واجهة المستخدم.

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),
         ],
       ),
     ),
   );
 }
}

معالج الرسائل الخلفية لنظام Android/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());
}

معالج رسائل الخلفية للويب

اعتبارًا من الإصدار 11.2.8 من FlutterFire firebase_messaging ، يتطلب التعامل مع رسائل الخلفية على الأنظمة الأساسية المستندة إلى الويب تدفقًا مختلفًا. لذلك، تحتاج إلى إضافة معالج رسائل منفصل في عامل الخدمة web/firebase-messaging-sw.js .

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

قم بإعداد خادم التطبيق

  1. قم باستيراد رمز خادم البداية عن طريق فتح مشروع https://github.com/FirebaseExtending/firebase_fcm_flutter/tree/main/server في Android Studio. الخادم عبارة عن مشروع Java يستند إلى Gradle ويعتمد على Firebase-admin SDK، والذي يوفر وظيفة إرسال رسائل FCM.
  2. قم بإعداد حساب خدمة Firebase الذي يسمح لـ Firebase Admin SDK بتفويض المكالمات إلى واجهات برمجة تطبيقات FCM. افتح إعدادات المشروع في وحدة تحكم Firebase وحدد علامة التبويب حسابات الخدمة . اختر "Java" وانقر فوق Generate new private key لتنزيل مقتطف التكوين. لقطة شاشة تم اقتصاصها تسلط الضوء على مقتطف تكوين Admin SDK لمكون حسابات الخدمة في صفحة إعدادات المشروع
  3. أعد تسمية الملف إلى service-account.json وانسخه إلى مسار src/main/resources لمشروع الخادم.

إرسال رسالة اختبار

في ملف FcmSender.java ، يقوم sendMessageToFcmRegistrationToken بإنشاء رسالة إعلام تحتوي على حمولة بيانات. يستهدف رمز التسجيل مثيل التطبيق الذي يتم إرسال الرسالة إليه.

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. انسخ رمز تسجيل Android المنسوخ من قسم التسجيل، وألصقه في قيمة المتغير registrationToken .
  2. انقر فوق تشغيل زر التشغيل في Android Studio لتشغيل الوظيفة الرئيسية وإرسال الرسالة إلى المستخدم من خلال FCM. لقطة شاشة مقصوصة لأيقونة "تشغيل" التي تظهر بجوار وظيفة FcmSender.java الرئيسية في Android Studio

عندما يكون تطبيق Android في الخلفية، تظهر الرسالة في علبة الإشعارات.

لقطة شاشة مقصوصة لرسالة تظهر في علبة إشعارات Android

عندما يكون تطبيق Android في المقدمة، سترى سجلاً في وحدة تحكم Android Studio: "التعامل مع رسالة المقدمة". يتم أيضًا عرض محتوى الرسالة في واجهة المستخدم نظرًا لأن واجهة المستخدم مشتركة في وحدة تحكم الدفق للرسائل الجديدة.

لقطة شاشة مقصوصة لمحتوى الرسالة المعروضة في تطبيق Android

إذا قمت بلصق رمز التسجيل المميز وأرسلت الرسالة من خادم التطبيق أو بيئة خادم موثوقة أخرى، فسترى سلوكًا مشابهًا:

  • عندما يكون تطبيق الويب في الخلفية (على سبيل المثال، عندما يكون مخفيًا بنافذة أخرى أو عندما تكون علامة تبويب أخرى نشطة)، سترى إشعار ويب.

لقطة شاشة تم اقتصاصها لإشعار الويب المعروض في متصفح Chrome

  • عندما يكون تطبيق الويب في المقدمة، يمكنك عرض السجل في وحدة تحكم Chrome عن طريق النقر بزر الماوس الأيمن على الويب وتحديد Inspect . يتم عرض محتوى الرسالة أيضًا في واجهة المستخدم. لقطة شاشة تم اقتصاصها لوحدة تحكم Chrome مع سجلات التصحيح

6. أرسل رسالة موضوعية

تتيح ميزة تجاوز النظام الأساسي لـ FCM HTTP v1 API لطلب إرسال رسالة أن يكون له سلوكيات مختلفة على منصات مختلفة. إحدى حالات استخدام هذه الميزة هي عرض محتوى مختلف لرسائل الإعلام بناءً على النظام الأساسي. يتم استخدام الميزة بشكل كامل عند استهداف أجهزة متعددة (والتي قد تمتد عبر منصات متعددة) من خلال رسائل الموضوع. يرشدك هذا القسم عبر الخطوات اللازمة لجعل تطبيقك يتلقى رسالة موضوع مخصصة لكل نظام أساسي.

الاشتراك في موضوع من العميل

للاشتراك في موضوع ما، اتصل بالطريقة messaging.subscribeToTopic في نهاية الوظيفة الرئيسية في ملف main.dart لتطبيق Flutter.

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

[اختياري] اشترك في موضوع من خادم الويب

يمكنك تخطي هذا القسم إذا كنت لا تقوم بالتطوير على منصة الويب.

لا يدعم FCM JS SDK حاليًا الاشتراك في الموضوع من جانب العميل. وبدلاً من ذلك، يمكنك الاشتراك باستخدام واجهة برمجة تطبيقات إدارة المواضيع من جانب الخادم الخاصة بـ Admin SDK. يوضح هذا الرمز الاشتراك في الموضوع من جانب الخادم باستخدام Java Admin SDK.

 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());
 }

افتح خادم التطبيق وانقر فوق تشغيل زر التشغيل في Android Studio لتشغيل الوظيفة الرئيسية في ملف FcmSubscriptionManager.java :

لقطة شاشة مقصوصة لأيقونة "تشغيل" التي تظهر بجوار الوظيفة الرئيسية FcmSubscriptionManager.java في Android Studio

أرسل رسالة تتضمن تجاوز النظام الأساسي إلى موضوع ما

أنت الآن جاهز لإرسال رسالة تجاوز النظام الأساسي للموضوع. في مقتطف الكود التالي:

  • يمكنك إنشاء طلب إرسال برسالة أساسية وعنوان " A new app is available ".
  • تقوم الرسالة بإنشاء إشعار عرض بعنوان " A new app is available " على أنظمة iOS والويب.
  • تقوم الرسالة بإنشاء إشعار عرض بعنوان " A new Android app is available " على أجهزة Android.
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(); . انقر فوق تشغيل زر التشغيل في Android Studio لإرسال رسالة الموضوع.

7. الملخص وما هو التالي

للتلخيص، لقد تعلمت كيفية المشاركة في تطوير التطبيقات متعددة المنصات باستخدام Flutter وFCM، والذي يتضمن إعداد البيئة وتكامل التبعية واستقبال الرسائل وإرسالها. للتعمق أكثر، راجع المواد التالية:

مختبرات البرمجة

مراجع