تفاعل مع المستخدم بالرسائل داخل التطبيق Flutter و Firebase

تساعدك هذه الخدمة للتفاعل مع المستخدمين النشطين داخل التطبيق عن طريق ارسال رسالة منبثقة داخل التطبيق, تساعد هذه الرسائل على تنبيه المستخدم او مساعدته لاستخدام مميزات التطبيق, على سبيل المثال يمكنك ارسال رسالة لطلب من المستخدمين الاشتراك او يمكن استخدامها لعرض فيديو للمستخدم في فعالية معينة بالاضافة يمكنك استخدامها للتسويق لخدمات جديدة في التطبيق. والمميز في هذه الخدمة يمكنك تخصيصها كمثلا عرض بطاقة او بنر بالاضافة لعرض مودل للمستخدم او اذا كنت تريد عرض صورة فقط.
للبدء في هذا الدرس يجب عليك اتباع تعليمات اضافة Firebase الى مشروع Flutter.

اضف Firebase In-App للمشروع:

اذا اردت استخدم هذه الخدمة من Firebase يجب اضافة هذا dependencies الى ملف pubspec.yaml تلاحظ اننا قمنا ايضا باضافة Firebase Analytics لأنها شرط اساسي لاستخدام هذه الميزة وملاحظة رد فعل المستخدمين باستخدام Events.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: "0.5.0"
  firebase_analytics: ^6.0.0
  firebase_in_app_messaging: ^0.2.0+1

Firebase Console:

الان سنتجه الى موقع Firebase Console للبدء في اضافة Firebase Analytics للمشروع على الموقع بعد ذلك سنقوم بالعودة للتطبيق لاكمال بقية الخطوات.

١. اضغط على In-App Messaging من القائمة الجانبية.
٢. قم بالضغط على تفعيل تحليلات فيربيس Enable Google Analytics.

سيقوم الموقع بتحويلك الى صفحة اخرى تطلبك اختيار مشروع قائم او انشاء جديد. اذا لم يكن لديك اي مشروع في Google Analytics قم بانشاء واحد جديد.

الان تم اتمام عملية انشاء Google Analytics جديد سنتوجة الان الى تطبيق Flutter ونقوم باضافة بعض الاكواد البرمجية.

اضافة In-App Messaging :

افتح صفحة ملف main.dart ثم قم باضافة الاكواد البرمجية التالية.

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseInAppMessaging inAppMessaging = FirebaseInAppMessaging();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text('In-App Messaging example'),
      ),
      body: Builder(builder: (BuildContext context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              AnalyticsEventExample(),
              ProgrammaticTriggersExample(inAppMessaging),
            ],
          ),
        );
      }),
    ));
  }
}

تلاجظ اضافة Firebase Analytics و FirenaseInAppMessaging للبدء في استخدامها لا تنسى ان تقوم باضافتها اذا ظهر لك خطأ.

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_in_app_messaging/firebase_in_app_messaging.dart';

بقية الاكواد البرمجية:

class ProgrammaticTriggersExample extends StatelessWidget {
  const ProgrammaticTriggersExample(this.inAppMessaging);

  final FirebaseInAppMessaging inAppMessaging;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          children: <Widget>[
            const Text(
              "Programmatic Trigger",
              style: TextStyle(
                fontStyle: FontStyle.italic,
                fontSize: 18,
              ),
            ),
            const SizedBox(height: 8),
            const Text("Manually trigger events programmatically "),
            const SizedBox(height: 8),
            RaisedButton(
              onPressed: () {
                inAppMessaging.triggerEvent('post_event');
                Scaffold.of(context).showSnackBar(const SnackBar(
                    content: Text("Triggering event: post_event")));
              },
              color: Colors.blue,
              child: Text(
                "Programmatic Triggers".toUpperCase(),
                style: TextStyle(color: Colors.white),
              ),
            )
          ],
        ),
      ),
    );
  }
}

هنا قمنا بتفعيل Event باستخدام In-App Messaging بشكل آلي.

class AnalyticsEventExample extends StatelessWidget {
  Future<void> _sendAnalyticsEvent() async {
    await MyApp.analytics
        .logEvent(name: 'awesome_event', parameters: <String, dynamic>{
      'int': 42, // not required?
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          children: <Widget>[
            const Text(
              "Log an analytics event",
              style: TextStyle(
                fontStyle: FontStyle.italic,
                fontSize: 18,
              ),
            ),
            const SizedBox(height: 8),
            const Text("Trigger an analytics event"),
            const SizedBox(height: 8),
            RaisedButton(
              onPressed: () {
                _sendAnalyticsEvent();
                Scaffold.of(context).showSnackBar(const SnackBar(
                    content: Text("Firing analytics event: awesome_event")));
              },
              color: Colors.blue,
              child: Text(
                "Log event".toUpperCase(),
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ارسال رسالة اختبار للمستخدم:

توجة الى Firebase Console ثم قم باختيار In-App Messaging من القائمة الجانبية.

الان نحتاج الى FID تجدة في LogCat في اندرويد ستديو تقوم بوضعة في شاشة Test on Devices. يكوت شكل الرسالة كالتي في LogCat

I/FIAM.Headless: Starting InAppMessaging runtime with Installation ID YOUR_INSTALLATION_ID

انتهى الدرس يمكنك استخدام هذه الميزة باكثر من شكل, والاهم ان تستمر في التعلم والتكويد.

####المصادر:
Flutter In-App Messaging Package.
Firebase In-App Messaging