اضافة Firebase الى تطبيق Flutter

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

انشئ تطبيق Flutter :

قم بانشاء تطبيق Flutter جديد عن طريق موجة الاوامر او باستخدام اي محرر اكواد انت تستخدمة.

flutter create firebase_example

انشاء مشروع Firebase:

قبل البدء في تثبيت Fiebase على الانظمة نحتاج الى مشروع Fierbase لربطه بتطبيق Flutter وللقيام بذلك سنتوجة الى موقع Firebase Conso;e بعد ذلك سنقوم بانشاء مشروع جديد عن طريق الضغط على Add Project

اضغط على Continue بعد ذلك سيظهر لك خطوات اخرى اختيارية تقترح عليك تفعيل بعض الخدمات وهي:

• Firebase Crashlytics
• Firebase Predictions
• Firebase Cloud Messaging
• Firebase In-App Messaging
• Firebase Remote Config
• Firebase A/B Testing

بعد ذلك اضغط على Create Project ستظهر لك شاشة انتظار تقوم بالعمل على انشاء المشروع الجديد.

اضافة Firebase الى Android:

الان في منتصف الشاشة في صفحة Overview قم بالضغط على شعار Android سينقلك الى صفحة جديدة كما في الصورة التالية

• في مربع النص الاول قم بكتابة Package Name لتطبيقك يجب عليك تحديدة مسبقاً.
• App Nick Name الكنية للمشروع هنا يكون اختياري٫
• SHA-1 : سنقوم الان بتعلم كيفية الحصول عليه عن طريق الاندرويد ستديو.
  افتح ملف المشروع في Android Studio من خلال Terminal Tab قم بالدخول على مسار android.

cd android
./gradlew signingReport

الان سيقوم بطباعة لك قائمة من البيانات يهمنا فقط SHA1 سنقوم بنسخة في حقل SHA-1 ونضغط Register App.

Variant: profile
Config: debug
Store: /Users/ahmedaljoaid/.android/debug.keystore
Alias: AndroidDebugKey
MD5: C4:055F:98:65:69:DB
SHA1: E0:28:9D:41:40:D4:69:2C:4B:38:7B:76:0D:02:DD:B9
SHA-256: FC:22:76:9D:B0:0E:E8:5B:68:A1:D4:7C:BF:77:268A:3F:CE:B4:D0:81:90:86:CB:8A:77
Valid until: Monday, January 14, 2047

اضافة ملف Firebase الى Android:

الان سيقوم الموقع بتوجيهك الى صفحة جديدة يوجد فيها بعض الخطوات سنستعرضها معا ونشرحها بشكل مفصل٫

1. اضغط على Download لتحميل ملف التهيئة لمشروع Firebase.

• يمكنك تحميل الملف مرة اخرى وفي اي وقت.
• تأكد ان الملف بالاسم الكامل بدون اضافات مثلا اذا حملت اكثر من مره النظام يضيف (2) بعد اسم الملف.

2. قم باضافة الملف في مسار android/app كما موضح في الصورة.
3. اضافة Google Services الى ملف Gradel كما في الخطوات التالية: عند الضغط على Next سيقوم بعرض صفحة تعليمات كما في الصورة التالية

• افتح ملف android/build.gradle وقم باضافة التالي

buildscript {

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

    // ...

    dependencies {
      // ...

      // Add the following line:
      classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin
    }
}

allprojects {
    // ...

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

• افتح ملف android/app/build.gradle وقم باضافة التالي:

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

android {
  // ...
}

// ...

4. توجة الى مشروع Flutter وقم بتفعيل هذا الامر flutter packages get.
5. اكمل بيقية الخطوات بالضغط على Next.

اضافة Firebase الى IOS:

١. قم بالضغط على ايقونة IOS من صفحة Overview في موقع Firebase للبدء. سيقوم الموقع بتوجيهك الى صفحة كما في الصورة التالية

• IOS Bundle Id : تجده في General Tab في Xcode.
• App Nickname : كنية التطبيق. اختياري.
• App Store Id : اختياري ايضا.

بعد تعبئة البيانات تضغط Next.

٢. تحميل ملف Firebase:
الان ستظهر لك صورة توضح لك طريقة تحميل الملف واين يتم وضعة في التطبيق.

1. اضغط على Download لتحميل ملف التهيئة لمشروع Firebase.

• يمكنك تحميل الملف مرة اخرى وفي اي وقت.
• تأكد ان الملف بالاسم الكامل بدون اضافات مثلا اذا حملت اكثر من مره النظام يضيف (2) بعد اسم الملف. ٢. افتح Xcode وقم بنقل الملف الذي قمت بتحميلة الى المسار runner/runner. ٣. قم بالعودة الى الموقع واكمل بقية الخطوات بالضغط على Next.

اضافة FlutterFire الى مشروعك :

تساعدك هذه الحزمة المبرمجة خصيصا لدعم Flutter للتعامل مع جميع خدمات Firebase عن طريق تطبيقات Flutter بما في ذلك خدمات التنبيهات والتنبيهات داخل التطبيق ايضا قواعد البيانات وتتبع الاخطاْ الخ. سنقوم الان باضافة FlutterFire الى مشروعنا٫.
١. في ملف pubspec.yaml قم باضافة التالي:

dependencies:
  flutter:
    sdk: flutter
  # Add the dependency for the Firebase Core Flutter SDK
  firebase_core: ^0.5

٢. بعد اضافة المكون الرئيسي الان يمكنك استخدام اي منتج من Firebase فقط قم باضافتة الى الى pubspec.yaml مثل

dependencies:
  flutter:
    sdk: flutter
  # Check that you have this dependency (added in the previous step)
  firebase_core: ^0.4.0+9

  # Add the dependency for the FlutterFire plugin for Google Analytics
  firebase_analytics: ^5.0.2

  # Add the dependencies for any other Firebase products you want to use in your app
  # For example, to use Firebase Authentication and Cloud Firestore
  firebase_auth: ^0.14.0+5
  cloud_firestore: ^0.12.9+5

تهيئة Firebase :

قبل البدء في استخدام اي من خدمات Firebase تحتاج الى تهيئتها باستخدام السطر التالي

await Firebase.initializeApp();

هذا السطر يجب استدعاءة قبل دالة main في مشروعك٫

الان اصبح تطبيقك مهي~ لاستخدام اي منتجات Firebase ويمكنك الاطلاع على جميع المنتجات المدعومة من Flutter بزيارة هذا الرابط FlutterFire

المصادر :

FlutterFire.
Firebase IOS.
Firebase Android.