ارسال التنبيهات للمستخدم باستخدام Firebase

تعلمنا في الدرس السابق طريقة اضافة Firebase الى تطبيق Flutter واليوم باذن الله سنتعلم كيفية استخدام التنبيهات للتطبيق وطريقة عملها, تحتاج التنبيهات في التطبيق لارسال معلومات للمستخدم مثلا ورود رسالة جديدة او هناك تحديث جديد او تم اضافة مقالة جديدة في الموقع او التطبيق الخ٫٫ , مفيدة ومهمة وايضا سهلة للاستخدام. سنبدأ الدرس بتعلم طريقة اضافتها لتطبيق Flutter ثم سنقوم باختبار التنبيهات عن طريق Firebase Console.

انشئ تطبيق Flutter :

قم بانشاء تطبيق جديد باستخدام محرر الاكواد المفضل لديك بعد ذلك قم باضافة التالي الى ملف pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_core: "^0.5.0"
  firebase_messaging: "^7.0.0"

تهيئة الاندرويد:

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

تهيئة IOS:

نحتاج الى بعض الخطوات لتفعيل FMC على اجهزة IOS واهم المتطلبات.
١. حساب مطور ابل فعال.
٢. جهاز ايفون او ايباد.

الان تحتاج الى تفعيل Push Notifications و Background Modes من خلال Xcode. اتجة الى مسار المشروع ثم قم بفتح /ios/Runner.xcworkspace في Xcode.
١. قم باختيار مشروعك.
٢.اختار Project Targert. ٣. اختر تبويب Signing & Capabilities.

تفعيل Push Notifications:

الان سنحتاج الى اضافة قابلية ارسال تنبيهات "Push Notifications" ويمكن ذلك عن طريق خيار "Capability".
١- اضغط على "+ Capability".
٢- ابحث عن "Push Notifications".

عند اختيارك لها سيقوم النظام بعرض جميع الامكانيات المفعلة في تطبيقك.

اذا لم تجد هذا الخيار فربما تم تفعيله مسبقاً.

تفعيل Background Modes:

الان سنقوم بتفعيل خيارين في "Background Modes" :
١. Background Fetch.
٢. Remote Notifications.
بنفس طريقة اضافة "Push Notifications" سنقوم بالبحث عن Background Modes في Capability وسنقوم باضافتها.
عند اختيارك للامكانية "Background Modes" تأكد من تفعيل "Background Fetch" و "Remote Notifications".

ربط APNs مع FCM :

الان سنقوم بالقيام ببعض الخطوات الاضافية وهي ربط APNs مع FMC عن طريق Fierbase Console وسنحتاج الى اكثر من خطوة للقيام بذلك:
١. تسجيل مفتاح.
٢. تسجيل معرف للتطبيق.
٣. انشاْ ملف الارتباط.

جميع هذه الخطوات مطلوبة وتستطيع تنفيذها عن طريق حساب المطورين في Apple. اذا توجهت الى موقع المطورين انتقل الى تبويب Certificates, Identifiers & Profiles

١. تسجيل مفتاح:

المفتاح الذي ستقوم بانشاءه يقوم باعطاء الصلاحيات للـFCM للوصول الى خدمة ابل لارسال التنبيهات "Apple Push Notifications". يمكنك تسمية المفتاح باي شئ يناسبك.

بعد ذلك قم بضغط Continue سيتوجة الموقع الى صفحة جديدة. ستجد في الصفحة Key Id قم بنسخة وايضاً قم بتحميل الملف الاخر.

الان سنقوم باضافة هذه المعلومات في Firebase Console.
١. افتح Firebase Console.
٢. توجة الى Project Settings.
٣. قم باختيار Cloud Messaging.
٤. اختر IOS Applications.
بعد ذلك قم برفع الملف الذي قمت بتحميله وايضا اضافة الرقم الذي نسخته.

٢. تسجيل معرف للتطبيق:

لتجعل التنبيهات تعمل اثناء اصدار التطبيق, يجب عليك انشاء معرف تطبيق جديد. وللقيام بهذه الخطوات اتبع مايلي:
١. اضغط على Identifiers. ٢. اضغط على علامة الزائد لتسجيل التطبيق.
٣. اختر "App IDs" ثم اضغط "Continue".
٤. اضغط على خيار "App" ثم اضغط متابعة.

يسمح لك معرف التطبيق بربط التطبيق عن طريق Bundle Id وهو نص فريد من نوعه مشابة للـ"Package Name" في اندرويد. تجد هذا Bundle Id في Xcode.
الان توجه مرة اخرى لموقع مطورين ابل ثم قم بانشاء Identifier.
١. اكتب وصف له.
٢. اكتب Bundle Id الذي نسخته من Xcode.
٣. مرر للأسفل ثم قم بتفعيل خيار Push Notifications.

٣.انشاء مف ارتباط.

الملف السابق يسمح لك بالتواصل بين Apple و تطبيقك. وبما ان التنبيهات تعمل فقط على جهاز حقيقي فهذا الملف يؤكد ان تطبيقك مثبت بشكل سليم على جهاز IOS.
في Profile قم باختيار "IOS App Development" ثم اضغط "Continue". اذا قمت باتباع الخطوة الثانية بشكل صحيح سيظهر لك ملف التعريف في القائمة المنسدلة.

ايضا اضغط "Continue" في الشاشةة التالية. بعد ذلك قم باختيار مستخدم تريد ربط الشهادة السابقة له. ولإنشاء شهادة جديدة قم باتباع التعليمات في هذا الرابط Apple وعند الانتهاء من تحميل الشهادة قم برفعها الى Apple Developer من خلال قائمة "Certificates".
الان يمكنك استخدام التنبيهات في الاصدار وايضا في التطوير على جهاز حقيقي لكن يتبقى فقط خطوات اضافتها للـXcode, اذهب الى Xcode ثم قم باختيار Target Project بعد ذلك اختر "Signing & Capabilities" اذا كنت رابط Xcode بحسابك سيقوم Xcode بعرض الـProfile الذي قمت بانشاءه اما اذا لم تكن رابط Xcode فيجب عليك اذافتها يديوياً.

ارسال تنبيه اختبار:

الان وبعد هذه الخطوات الطويلة للدرس سنقوم باضافة FCM الى تطبيق Flutter وبعد ذلك سنقوم بارسال تنبه اختبار من Firebase Console الى جهاز اندرويد.
افتح ملف main.dart في تطبيق Flutter ثم قم بنسخ الكود التالي:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

  Future<String> getToken() async {
    String token = await _firebaseMessaging.getToken();
    return token;
  }

  @override
  void initState() {
    super.initState();
    getToken().then((value) => print(value));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          // widgets...
          ),
    );
  }
}

سنقوم من خلال الشفرة السابقة من الحصول على Token للمستخدم بعد ذلك سنقوم بارسال التنبيهات عن طريق هذا Token. يجب عليك تخزين هذا الــToken للمستخدم في Firestore او اي قواعد بيانات اخرى لان هذا يعتبر العنوان للمستخدم حتى تصل له التنبيهات.
في هذا الدرس لن نقوم بتخزين Token لان تركيز الدرس هو فقط على تهيئة Flutter مع FCM. في الصورة المتحركة التالية سنقوم بارسال رسالة اختبار من Firebase الى محاكي Android.