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

المتطلبات الأساسية

• ثبِّت أداة التعديل أو بيئة التطوير المتكاملة (IDE) المفضّلة لديك.

• ثبِّت Flutter لنظام التشغيل الخاص بك، بما في ذلك ما يلي:

  • حزمة تطوير البرامج (SDK) في Flutter
  • المكتبات المتوافقة
  • البرامج وحِزم تطوير البرامج (SDK) الخاصة بمنصات معيّنة

• سجِّل الدخول إلى Firebase باستخدام حسابك على Google.

إذا لم يكن لديك تطبيق Flutter، يمكنك إكمال البدء: تجربة قيادة لإنشاء تطبيق Flutter جديد باستخدام المحرر أو بيئة التطوير المتكاملة المفضّلة لديك.

الخطوة 1: تثبيت أدوات سطر الأوامر المطلوبة

1. إذا لم يسبق لك إجراء ذلك، ثبِّت واجهة سطر الأوامر Firebase.

2. سجِّل الدخول إلى Firebase باستخدام حسابك على Google من خلال تنفيذ الأمر التالي:

   firebase login
   

3. ثبِّت FlutterFire CLI من خلال تنفيذ الأمر التالي من أي دليل:

   dart pub global activate flutterfire_cli
   

الخطوة 2: ضبط تطبيقاتك لاستخدام Firebase

استخدِم واجهة سطر الأوامر FlutterFire لإعداد تطبيقات Flutter من أجل ربطها بمنصّة Firebase.

من دليل مشروع Flutter، نفِّذ الأمر التالي لبدء عملية إعداد التطبيق:

flutterfire configure

الخطوة 3: إعداد Firebase في تطبيقك

1. من دليل مشروع Flutter، نفِّذ الأمر التالي لتثبيت المكوّن الإضافي الأساسي:

   flutter pub add firebase_core
   

2. من دليل مشروع Flutter، نفِّذ الأمر التالي للتأكّد من أنّ إعدادات Firebase لتطبيق Flutter محدّثة:

   flutterfire configure
   

3. في ملف lib/main.dart، استورِد المكوّن الإضافي الأساسي في Firebase وملف الإعداد الذي أنشأته سابقًا:

   import 'package:firebase_core/firebase_core.dart';
   import 'firebase_options.dart';
   

4. في ملف lib/main.dart أيضًا، عليك إعداد Firebase باستخدام الكائن DefaultFirebaseOptions الذي يصدّره ملف الإعداد:

   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(const MyApp());
   

5. أعِد إنشاء تطبيق Flutter:

   flutter run
   

إذا كنت تفضّل استخدام مشروع تجريبي، يمكنك بدء محاكي Firebase وفي ملف lib/main.dart، يمكنك تهيئة Firebase باستخدام demoProjectId (يجب أن يبدأ بـ demo-):

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

الخطوة 4: إضافة مكوّنات Firebase الإضافية

يمكنك الوصول إلى Firebase في تطبيق Flutter من خلال مكوّنات Firebase الإضافية الخاصة بـ Flutter المختلفة، وهي مكوّن إضافي لكل منتج من منتجات Firebase (على سبيل المثال: Cloud Firestore وAuthentication وAnalytics وما إلى ذلك).

بما أنّ Flutter هو إطار عمل متعدد المنصات، فإنّ كل إضافة Firebase تنطبق على منصات Apple وAndroid والويب. لذلك، إذا أضفت أي إضافة Firebase إلى تطبيق Flutter، سيتم استخدامها في إصدارات تطبيقك على Apple وAndroid والويب.

في ما يلي كيفية إضافة إضافة Firebase Flutter:

1. من دليل مشروع Flutter، نفِّذ الأمر التالي:

   flutter pub add PLUGIN_NAME

2. من دليل مشروع Flutter، نفِّذ الأمر التالي:

   flutterfire configure
   

   يضمن تنفيذ هذا الأمر أنّ إعدادات Firebase في تطبيق Flutter محدّثة، كما أنّه يضيف المكوّنات الإضافية المطلوبة في Gradle إلى تطبيقك على نظام التشغيل Android لكل من Crashlytics وPerformance Monitoring.

3. بعد اكتمال العملية، أعِد إنشاء مشروع Flutter باتّباع الخطوات التالية:

   flutter run
   

اكتملت عملية الإعداد. يتم تسجيل تطبيقات Flutter وإعدادها لاستخدام Firebase.

المكوّنات الإضافية المتاحة

^{1 كان اسم Firebase AI Logic في السابق "Vertex AI in Firebase" مع المكوّن الإضافي firebase_vertexai.}

تجربة تطبيق نموذجي باستخدام "Analytics"

كما هو الحال مع جميع الحِزم، يأتي المكوّن الإضافي firebase_analytics مع برنامج مثال.

1. افتح تطبيق Flutter سبق لك ضبطه لاستخدام Firebase (راجِع التعليمات الواردة في هذه الصفحة).

2. يمكنك الوصول إلى الدليل lib الخاص بالتطبيق، ثم حذف الملف main.dart الحالي.

3. من Google Analytics مستودع البرنامج النموذجي، انسخ الملفَين التاليَين والصقهما في الدليل lib لتطبيقك:

   • main.dart
   • tabs_page.dart

4. شغِّل تطبيق Flutter.

5. انتقِل إلى مشروع تطبيقك على Firebase في Firebase وحدة التحكّم، ثم انقر على إحصاءات Google في شريط التنقّل الأيمن.

   1. انقر على لوحة البيانات. إذا كان Analytics يعمل بشكل سليم، ستعرض لوحة البيانات مستخدمًا نشطًا في لوحة "المستخدمون النشطون في آخر 30 دقيقة" (قد يستغرق ملء هذه اللوحة بعض الوقت).

   2. انقر على DebugView. فعِّل الميزة للاطّلاع على جميع الأحداث التي أنشأها البرنامج النموذجي.

لمزيد من المعلومات حول إعداد Analytics، يُرجى الاطّلاع على أدلة البدء لكل من iOS+‎ وAndroid والويب.

ملاحظات حول إنشاء تطبيقات الويب

توافق Trusted Types

تتيح حزمة تطوير البرامج (SDK) لنظام Firebase من أجل Flutter استخدام Trusted Types للمساعدة في منع هجمات XSS المستنِدة إلى DOM (من جهة العميل). عندما تفعّل ميزة "فرض استخدام الأنواع الموثوق بها" في تطبيقك، تحقن حزمة تطوير البرامج (SDK) من Firebase نصوصها البرمجية في نموذج المستند (DOM) باستخدام سياسات مخصّصة لـ "الأنواع الموثوق بها"، ويتم تسميتها flutterfire-firebase_core وflutterfire-firebase_auth وما إلى ذلك.

إيقاف عملية الحقن التلقائي لحزمة تطوير البرامج (SDK) في JavaScript من Firebase

تُدرِج حزمة تطوير البرامج (SDK) من Firebase Flutter تلقائيًا حزمة تطوير البرامج (SDK) من Firebase JavaScript عند إنشاء تطبيق للويب. إذا كنت لا تريد أن يتم إدخال حزمة تطوير البرامج (SDK) لمنصة Firebase JavaScript تلقائيًا، يمكنك اتّباع الخطوات التالية:

1. تجاهُل النص البرمجي الذي يتم إدخاله تلقائيًا من خلال إضافة السمة التالية داخل علامة <script> في ملف web/index.html ضمن مشروع Flutter:

   <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
   <!-- Put in the names of all the plugins you wish to ignore: -->
   window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
   

2. حمِّل النص البرمجي يدويًا باستخدام أحد البدائل التالية:

   • أضِف حزمة SDK بشكل صريح إلى ملف web/index.html، داخل معاودة الاتصال window.addEventListener:

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.6.0/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.6.0/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • أو يمكنك تنزيل رمز حزمة تطوير البرامج (SDK) لمنصة Firebase JavaScript من النطاق "gstatic"، وحفظه في ملف JavaScript ليتم الاحتفاظ به في مشروعك وتحميله يدويًا:

       // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
       window.addEventListener('load', async function (ev) {
         window.firebase_analytics = await import("./my-analytics.js");
         window.firebase_firestore = await import("./my-firestore.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

الخطوات التالية

• يمكنك الحصول على خبرة عملية من خلال الدرس التطبيقي حول الترميز الخاص بمنصة Firebase وFlutter.

• استعِدّ لإطلاق تطبيقك باتّباع الخطوات التالية:

  • إعداد تنبيهات الميزانية لمشروعك في وحدة تحكّم Google Cloud
  • يمكنك الاطّلاع على لوحة بيانات الاستخدام والفوترة في وحدة تحكّم Firebase للحصول على صورة شاملة عن استخدام مشروعك في عدة خدمات من Firebase.
  • راجِع قائمة التحقّق من إطلاق Firebase.