كيفية دمج إشعارات البوش في تطبيقات فلاتر باستخدام مراسلة فايربيس السحابية (FCM)

إضافة إشعارات البوش إلى تطبيقات فلاتر: دليل شامل باستخدام مراسلة فايربيس السحابية (FCM)

أصبح إطار عمل فلاتر (Flutter) في وقت قصير أحد أبرز وأشهر الخيارات لتطوير تطبيقات الجوال متعددة المنصات. يُمكّن فلاتر المطورين من بناء واجهات مستخدم أصلية (Native UIs) تتميز بالجمال والدقة البكسلية، مع دعم مثالي لأحجام الشاشات المختلفة وكثافات البكسل واتجاهات العرض المتنوعة. في هذا الدليل الشامل، سنتعلم كيفية إضافة إشعارات البوش (Push Notifications) إلى تطبيق فلاتر باستخدام خدمة مراسلة فايربيس السحابية (Firebase Cloud Messaging – FCM). سنركز في هذا الشرح على إعدادات منصة أندرويد.

ما هي إشعارات البوش (Push Notifications)؟

إشعارات البوش هي رسائل منبثقة تظهر على شاشة المستخدم لتنبيهه بما يحدث داخل التطبيق أو خارجه. تُعد هذه الإشعارات وسيلة حيوية لتعزيز تفاعل المستخدمين مع تطبيقك. على سبيل المثال، إذا قام مستخدم بتثبيت تطبيقك ثم نسي أمره، يمكنك استخدام إشعارات البوش كآلية فعالة لاستعادة اهتمامه والحفاظ عليه. كما تساهم إشعارات البوش في زيادة حركة المرور والوصول إلى تطبيقك.

لماذا نستخدم مراسلة فايربيس السحابية (FCM)؟

مراسلة فايربيس السحابية (FCM) هي خدمة قوية ومجانية تقدمها فايربيس (Firebase) تتيح لك إرسال هذه الإشعارات إلى مستخدمي تطبيقك. توفر FCM خيارات إعداد وتكوين متنوعة لإرسال إشعارات مختلفة إلى جماهير مستهدفة بناءً على الوقت والروتين. نظرًا لجميع هذه المزايا، سنعتمد عليها لإرسال الإشعارات إلى تطبيق فلاتر الخاص بنا.

الخطوة 1: إنشاء مشروع فلاتر جديد

أولاً، سنقوم بإنشاء مشروع فلاتر جديد. يتطلب ذلك تثبيت حزمة تطوير برمجيات فلاتر (Flutter SDK) على نظامك. يمكنك العثور على خطوات بسيطة لتثبيت فلاتر في الوثائق الرسمية. بعد التثبيت بنجاح، يمكنك تشغيل الأمر التالي في الدليل الذي تختاره لإعداد مشروع فلاتر كامل:

flutter create pushNotification

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

flutter run

بعد نجاح عملية البناء، ستحصل على النتيجة التالية على شاشة المحاكي:

الخطوة 2: دمج إعدادات فايربيس مع مشروع فلاتر

في هذه الخطوة، سنقوم بدمج خدمات فايربيس مع مشروع فلاتر الخاص بنا. ولكن أولاً، نحتاج إلى إنشاء مشروع فايربيس. توجد إرشادات الإعداد أيضًا في وثائق فايربيس الرسمية الخاصة بفلاتر. لإنشاء مشروع فايربيس، نحتاج إلى تسجيل الدخول إلى لوحة تحكم فايربيس. هناك، يمكننا ببساطة النقر على زر Add project (إضافة مشروع) لبدء مشروعنا. ستظهر نافذة تطلب إدخال اسم المشروع. هنا، احتفظت باسم المشروع FlutterPushNotification كما هو موضح في لقطة الشاشة أدناه:

يمكننا المتابعة إلى الخطوة التالية بمجرد إنشاء المشروع. بعد إعداد المشروع، سنحصل على لوحة تحكم المشروع كما هو موضح في لقطة الشاشة أدناه:

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

الخطوة 3: تسجيل تطبيق أندرويد في فايربيس

نظرًا لأن عملية التسجيل خاصة بالمنصة، سنقوم بتسجيل تطبيقنا لمنصة أندرويد. بعد النقر على أيقونة أندرويد، سيتم توجيهنا إلى واجهة تطلب Android package name (اسم حزمة أندرويد). لإضافة اسم الحزمة لمشروع فلاتر الخاص بنا، نحتاج أولاً إلى تحديد موقعه. سيكون اسم الحزمة متاحًا في ملف ./android/app/build.gradle لمشروع فلاتر الخاص بك. سترى شيئًا كهذا:

com.example.pushNotification

نحتاج فقط إلى نسخه ولصقه في حقل إدخال اسم حزمة أندرويد كما هو موضح في لقطة الشاشة أدناه:

بعد ذلك، يمكننا ببساطة النقر على زر Register app (تسجيل التطبيق). سيقودنا هذا إلى الواجهة حيث يمكننا الحصول على ملف google-services.json الذي سيربط تطبيق فلاتر الخاص بنا بخدمات جوجل في فايربيس. نحتاج إلى تنزيل الملف ونقله إلى دليل ./android/app لمشروع فلاتر الخاص بنا. الإرشادات موضحة أيضًا في لقطة الشاشة أدناه:

الخطوة 4: إضافة إعدادات فايربيس للملفات الأصلية في مشروع فلاتر

الآن لتمكين خدمات فايربيس في تطبيق أندرويد الخاص بنا، نحتاج إلى إضافة إضافة google-services إلى ملفات Gradle لدينا. أولاً في ملف Gradle على مستوى الجذر (مستوى المشروع) android/build.gradle، نحتاج إلى إضافة قواعد لتضمين إضافة Google Services Gradle. نحتاج إلى التحقق مما إذا كانت التكوينات التالية متاحة أم لا:

buildscript {
    repositories {
        // Check that you have the following line (if not, add it):
        google() // Google's Maven repository
    }
    dependencies {
        ...
        // Add this line
        classpath 'com.google.gms:google-services:4.3.4'
    }
}

allprojects {
    ...
    repositories {
        // Check that you have the following line (if not, add it):
        google() // Google's Maven repository
        ...
    }
}

إذا لم تكن موجودة، نحتاج إلى إضافة التكوينات كما هو موضح في مقتطف الكود أعلاه. الآن في ملف Gradle الخاص بالوحدة النمطية (مستوى التطبيق) android/app/build.gradle، نحتاج إلى تطبيق إضافة Google Services Gradle. لذلك، نحتاج إلى إضافة جزء الكود المميز في مقتطف الكود التالي إلى ملف ./android/app/build.gradle لمشروعنا:

// Add the following line:
apply plugin: 'com.google.gms.google-services'

android {
    // ...
}

الآن، نحتاج إلى تشغيل الأمر التالي حتى يتم إجراء بعض التكوينات التلقائية:

flutter packages get

بهذا نكون قد قمنا بدمج تكوينات فايربيس بنجاح مع مشروع فلاتر الخاص بنا.

الخطوة 5: دمج مراسلة فايربيس (Firebase Messaging) مع فلاتر

أولاً، نحتاج إلى إضافة تبعية firebase-messaging إلى ملف ./android/app/build.gradle. في الملف، نحتاج إلى إضافة التبعيات التالية:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.firebase:firebase-messaging:20.1.0'
}

بعد ذلك، نحتاج إلى إضافة action و category كـ intent-filter ضمن وسم activity في ملف ./android/app/src/main/AndroidManifest.xml:

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK"/>
    <category android:name="android.intent.category.DEFAULT"/>
</intent-filter>

الآن، نحتاج إلى إنشاء ملف جافا يسمى Application.java في المسار /android/app/src/main/java/. ثم، نحتاج إلى إضافة الكود من مقتطف الكود التالي بداخله:

package io.flutter.plugins.pushNotification;

import io.flutter.app.FlutterApplication;
import io.flutter.plugin.common.PluginRegistry;
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin;
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;

public class Application extends FlutterApplication implements PluginRegistrantCallback {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterFirebaseMessagingService.setPluginRegistrant(this);
    }

    @Override
    public void registerWith(PluginRegistry registry) {
        FirebaseMessagingPlugin.registerWith(registry.registrarFor("io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin"));
    }
}

الآن، نحتاج إلى تعيين نشاط Application هذا إلى وسم application في ملف AndroidManifest.xml كما هو موضح في مقتطف الكود أدناه:

<application android:name=".Application"

يكمل هذا إعداد إضافة مراسلة فايربيس في كود أندرويد الأصلي. الآن، سننتقل إلى مشروع فلاتر.

الخطوة 6: تثبيت حزمة مراسلة فايربيس (Firebase Messaging) في فلاتر

هنا، سنستخدم حزمة firebase_messaging، والتي يمكنك العثور عليها هنا. لذلك، نحتاج إلى إضافة الإضافة إلى خيار التبعية في ملف pubspec.yaml. نحتاج إلى إضافة السطر التالي من الكود إلى خيار التبعيات:

  firebase_messaging: ^7.0.3

الخطوة 7: تنفيذ شاشة واجهة مستخدم بسيطة

الآن، داخل فئة الودجت ذات الحالة MyHomePage في ملف main.dart، نحتاج إلى تهيئة مثيل FirebaseMessaging وبعض الثوابت كما هو موضح في مقتطف الكود أدناه:

String messageTitle = "Empty";
String notificationAlert = "alert";
FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

سيستقبل المتغير messageTitle عنوان رسالة الإشعار، وسيتم تعيين notificationAlert للإجراء الذي تم إكماله بمجرد ظهور الإشعار. الآن، نحتاج إلى تطبيق هذه المتغيرات على دالة build داخل جسم ودجت Scaffold كما هو موضح في مقتطف الكود أدناه:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            notificationAlert,
          ),
          Text(
            messageTitle,
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    ),
  );
}

بعد ذلك، نحتاج إلى تشغيل تطبيق فلاتر عن طريق تنفيذ الأمر التالي في طرفية المشروع:

flutter run

سنحصل على النتيجة التي تراها في الصورة أدناه:

في الوقت الحالي، عنوان الإشعار فارغ، والتنبيه هو كما هو محدد. نحتاج إلى تعيين قيمة مناسبة لهما بمجرد استلام رسالة الإشعار. لذلك نحتاج إلى تكوين الكود لاستقبال الإشعار واستخدام رسالة الإشعار لعرضها على الشاشة. لذلك، نحتاج إلى إضافة الكود من مقتطف الكود التالي في دالة initState:

@override
void initState() {
  // TODO: implement initState
  super.initState();
  _firebaseMessaging.configure(
    onMessage: (message) async {
      setState(() {
        messageTitle = message["notification"]["title"];
        notificationAlert = "New Notification Alert";
      });
    },
    onResume: (message) async {
      setState(() {
        messageTitle = message["data"]["title"];
        notificationAlert = "Application opened from Notification";
      });
    },
  );
}

هنا، استخدمنا طريقة configure التي يوفرها مثيل _firebaseMessaging، والتي بدورها توفر دوال الاستدعاء onMessage و onResume. توفر دوال الاستدعاء هذه رسالة الإشعار message كمعامل. سيحتفظ استجابة message بكائن الإشعار ككائن خريطة (map object). يتم تشغيل دالة onMessage عندما يتم استلام الإشعار بينما يكون التطبيق قيد التشغيل في الواجهة الأمامية. يتم تشغيل دالة onResume عندما نستقبل تنبيه الإشعار في شريط إشعارات الجهاز ونفتح التطبيق من خلال إشعار البوش نفسه. في هذه الحالة، يمكن أن يكون التطبيق يعمل في الخلفية أو لا يعمل على الإطلاق.

الآن نحن مجهزون بالكامل بتطبيق فلاتر. نحتاج فقط إلى تكوين رسالة في مراسلة فايربيس السحابية وإرسالها إلى الجهاز.

الخطوة 8: إنشاء رسالة من لوحة تحكم مراسلة فايربيس السحابية

أولاً، نحتاج إلى العودة إلى لوحة تحكم مراسلة السحاب (Cloud Messaging console) في موقع فايربيس كما هو موضح في الصورة أدناه:

هنا، يمكننا رؤية خيار Send your first message (إرسال رسالتك الأولى) في النافذة، حيث لم نقم بتكوين أي رسائل من قبل. نحتاج إلى النقر عليه وسيؤدي ذلك إلى النافذة التالية:

هنا، يمكننا إدخال العنوان والنص والصورة واسم الإشعار. سيتم توفير العنوان الذي نحدده هنا كعنوان في كائن message في دوال الاستدعاء التي قمنا بتعيينها مسبقًا في مشروع فلاتر. بعد تعيين الحقول المطلوبة، يمكننا النقر على Next (التالي) وسيؤدي ذلك إلى النافذة التالية:

هنا، نحتاج إلى توفير تطبيقنا المستهدف والنقر على Next. بالنسبة للجدولة (Scheduling)، يمكننا الاحتفاظ بالخيار الافتراضي:

بعد ذلك، ستظهر نافذة التحويل (Conversion) التي يمكننا الاحتفاظ بها كافتراضية أيضًا، ثم النقر على زر Next. أخيرًا، ستظهر نافذة نحتاج فيها إلى إدخال البيانات المخصصة (custom data) حيث يمكننا تعيين title و click_action. يتم تشغيل حدث click_action هذا كلما نقرنا على الإشعار الذي يظهر في شريط إشعارات الجهاز. بعد النقر على رسالة الإشعار من شريط الإشعارات، سيتم فتح التطبيق وسيتم تشغيل دالة الاستدعاء onResume، مع تعيين title كما هو مخصص في البيانات المخصصة في لقطة الشاشة أدناه:

الآن، نحن مستعدون لإرسال أول رسالة إشعار إلى الجهاز. أولاً، لنجربها مع الجهاز الذي يعمل في المحاكي. عندما ننقر على زر Review (مراجعة) ونرسل الرسالة، سنحصل على النتيجة التالية في لوحة تحكم مراسلة السحاب وكذلك في المحاكي:

هنا، يمكننا أن نرى أن العنوان وتنبيه الإشعار على شاشة المحاكي يتم تحديثهما بمجرد إرسال رسالة من لوحة التحكم. يمكننا التأكد من أن دالة الاستدعاء onMessage قد تم تشغيلها في التطبيق بعد استلام رسالة الإشعار.

الآن لنجرب مع التطبيق الذي يعمل في الخلفية. عندما نرسل الرسالة من لوحة التحكم، سنحصل على النتيجة كما هو موضح في العرض التوضيحي أدناه:

هنا، بمجرد إرسال الرسالة، نستقبل إشعار بوش في شريط إشعارات الجهاز. ثم، عندما نسحب شريط الإشعارات لأسفل، يمكننا رؤية عنوان رسالة الإشعار ونصها. وبالنقر على رسالة الإشعار، يمكننا تشغيل التطبيق وعرض البيانات المخصصة على الشاشة. هذا يضمن أن دالة الاستدعاء onResume قد تم تشغيلها. وبهذا نكون قد انتهينا! لقد نجحنا في إضافة ميزة إشعارات البوش في تطبيق فلاتر الخاص بنا باستخدام مراسلة فايربيس السحابية.

الخلاصة التقنية

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