الفصل العاشر – Data & backend : استخدام Firebase في Flutter

في عالم تطوير التطبيقات الحديث، أصبحت الحاجة إلى بناء تطبيقات قوية، سريعة، وقابلة للتوسع أمرًا بالغ الأهمية. هنا يأتي دور Flutter و Firebase كحلول رائدة تلبي هذه المتطلبات. Flutter هو إطار عمل مفتوح المصدر لتطوير واجهات المستخدم (UI) من Google، يتيح للمطورين بناء تطبيقات مجمعة أصلاً (natively compiled) ومتعددة المنصات (iOS، Android، Web، Desktop) من قاعدة كود واحدة

. يتميز Flutter بسرعته، إنتاجيته، ومرونته العالية في تصميم واجهات المستخدم الجذابة.

من ناحية أخرى، Firebase هي منصة تطوير تطبيقات شاملة تقدمها Google، توفر مجموعة واسعة من الخدمات الخلفية BaaS (Backend-as-a-Service -) التي تساعد المطورين على بناء تطبيقات عالية الجودة بسرعة أكبر. تشمل هذه الخدمات قواعد البيانات في الوقت الفعلي، المصادقة، التخزين السحابي، التحليلات، والمراسلة السحابية، وغيرها الكثير .

لماذا نستخدم Firebase مع backend ؟

يُعد الجمع بين Flutter و Firebase مزيجًا قويًا يوفر العديد من الفوائد للمطورين:

• سرعة التطوير: يتيح Flutter التطوير السريع لواجهة المستخدم، بينما توفر Firebase خدمات خلفية جاهزة للاستخدام، مما يقلل بشكل كبير من الوقت والجهد اللازمين لبناء التطبيقات.
• تطبيقات متعددة المنصات: يمكن لتطبيقات Flutter التي تستخدم Firebase العمل بسلاسة عبر iOS، Android، والويب، مما يوفر تجربة متسقة للمستخدمين ويقلل من تكاليف التطوير.
• قابلية التوسع: تم تصميم خدمات Firebase لتكون قابلة للتوسع تلقائيًا، مما يعني أن التطبيقات يمكن أن تنمو من عدد قليل من المستخدمين إلى الملايين دون الحاجة إلى إدارة البنية التحتية للخادم.
• مجموعة أدوات شاملة: توفر Firebase مجموعة متكاملة من الأدوات التي تغطي معظم احتياجات التطبيق، من المصادقة وتخزين البيانات إلى التحليلات والإشعارات، مما يقلل من الحاجة إلى دمج خدمات متعددة من جهات خارجية.
• التكامل السلس: توفر FlutterFire، وهي مجموعة من المكونات الإضافية (plugins) الرسمية لـ Flutter، تكاملاً سلسًا وموثوقًا بين Flutter وخدمات Firebase المختلفة .

2. إعداد Firebase في مشروع Flutter

للبدء في استخدام Firebase مع تطبيق Flutter، يجب اتباع الخطوات التالية :

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

• تثبيت محرر أو بيئة تطوير متكاملة (IDE) مفضلة (مثل VS Code أو Android Studio).
• تثبيت Flutter SDK والمكتبات الداعمة والبرامج وحزم SDK الخاصة بالمنصة (iOS/Android).
• تسجيل الدخول إلى Firebase باستخدام حساب Google الخاص بك.

تثبيت أدوات سطر الأوامر

1. تثبيت Firebase CLI: إذا لم تكن قد قمت بذلك بالفعل، قم بتثبيت واجهة سطر الأوامر الخاصة بـ Firebase:
   bash npm install -g firebase-tools
2. تسجيل الدخول إلى Firebase: سجل الدخول إلى Firebase باستخدام حساب Google الخاص بك:
   bash firebase login
3. تثبيت FlutterFire CLI: قم بتثبيت واجهة سطر الأوامر الخاصة بـ FlutterFire من أي دليل:
   bash dart pub global activate flutterfire_cli

تكوين التطبيق للاتصال بـ Firebase

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

flutterfire configure

تهيئة Firebase في التطبيق

1. إضافة المكون الإضافي الأساسي: من دليل(مجلد) مشروع Flutter الخاص بك، قم بتثبيت المكون الإضافي الأساسي لـ Firebase:
   bash flutter pub add firebase_core
2. تحديث التكوين: تأكد من أن تكوين Firebase لتطبيق Flutter الخاص بك محدث:
   bash flutterfire configure
3. استيراد وتهيئة Firebase: في ملف lib/main.dart الخاص بك، قم باستيراد المكون الإضافي الأساسي لـ Firebase وملف التكوين الذي تم إنشاؤه، ثم قم بتهيئة Firebase:

import 'package:firebase_core/firebase_core.dart';import 'firebase_options.dart';
 void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(const MyApp());
 }

4- إعادة بناء التطبيق: أعد بناء تطبيق Flutter الخاص بك:
bash flutter run

إضافة مكونات Firebase الإضافية (Plugins)

للوصول إلى خدمات Firebase المختلفة (مثل Authentication، Firestore، Storage)، تحتاج إلى إضافة المكونات الإضافية (plugins) الخاصة بها. كل مكون إضافي لـ Firebase ينطبق على منصات Apple و Android والويب. لإضافة مكون إضافي، استخدم الأمر التالي، مع استبدال PLUGIN_NAME باسم المكون الإضافي المطلوب (مثال: firebase_auth، cloud_firestore):

flutter pub add PLUGIN_NAME

بعد إضافة أي مكون إضافي، قم بتشغيل flutterfire configure مرة أخرى للتأكد من تحديث التكوين، ثم أعد بناء تطبيقك.

3. خدمات Firebase الرئيسية وأمثلة استخدامها في Flutter

تتضمن Firebase العديد من الخدمات، وسنركز هنا على الأكثر شيوعًا مع أمثلة توضيحية.

3.1. Firebase Authentication (المصادقة)

نظرة عامة: توفر Firebase Authentication خدمات خلفية وحزم SDK سهلة الاستخدام لمصادقة المستخدمين في تطبيقك. تدعم طرق مصادقة متعددة مثل البريد الإلكتروني وكلمة المرور، حسابات Google، Facebook، وغيرها .

إضافة المكون الإضافي:

flutter pub add firebase_auth

التحقق من حالة المصادقة:
يمكنك الاستماع إلى تغييرات حالة المصادقة في الوقت الفعلي باستخدام authStateChanges():

import 'package:firebase_auth/firebase_auth.dart';

FirebaseAuth.instance
      .authStateChanges()
      .listen((User? user) {
        if (user == null) {
          print('User is currently signed out!');
        } else {
          print('User is signed in!');
        }
      });

مثال: تسجيل مستخدم جديد بالبريد الإلكتروني وكلمة المرور:

Future<void> registerUser(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: email,
      password: password,
    );
    print('User registered: ${userCredential.user!.email}');
  } on FirebaseAuthException catch (e) {
    if (e.code == 'weak-password') {
      print('The password provided is too weak.');
    } else if (e.code == 'email-already-in-use') {
      print('The account already exists for that email.');
    }
  } catch (e) {
    print(e);
  }
}

مثال: تسجيل الدخول بالبريد الإلكتروني وكلمة المرور:

Future<void> signIn(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(
      email: email,
      password: password,
    );
    print('User signed in: ${userCredential.user!.email}');
  } on FirebaseAuthException catch (e) {
    if (e.code == 'user-not-found') {
      print('No user found for that email.');
    } else if (e.code == 'wrong-password') {
      print('Wrong password provided for that user.');
    }
  } catch (e) {
    print(e);
  }
}

مثال: تسجيل الخروج:

Future<void> signOut() async {
  await FirebaseAuth.instance.signOut();
  print('User signed out.');
}

3.2. Cloud Firestore (قاعدة البيانات السحابية NoSQL)

نظرة عامة: Cloud Firestore هي قاعدة بيانات NoSQL مرنة وقابلة للتطوير ومستضافة على السحابة لتخزين ومزامنة البيانات. تخزن البيانات في مستندات ومجموعات (collections) وتوفر مزامنة في الوقت الفعلي ودعمًا دون اتصال بالإنترنت .

إضافة المكون الإضافي:

flutter pub add cloud_firestore

مثال: تطبيق قائمة مهام بسيط (CRUD)

import 'package:cloud_firestore/cloud_firestore.dart';

class TodoService {
  final CollectionReference todos = FirebaseFirestore.instance.collection('todos');

  // إضافة مهمة جديدة (Create)
  Future<void> addTodo(String title) {
    return todos.add({
      'title': title,
      'isDone': false,
      'timestamp': Timestamp.now(),
    })
    .then((value) => print("Todo Added"))
    .catchError((error) => print("Failed to add todo: $error"));
  }

  // قراءة المهام (Read) - في الوقت الفعلي
  Stream<QuerySnapshot> getTodos() {
    return todos.orderBy('timestamp', descending: true).snapshots();
  }

  // تحديث حالة المهمة (Update)
  Future<void> updateTodoStatus(String todoId, bool isDone) {
    return todos.doc(todoId).update({
      'isDone': isDone,
    })
    .then((value) => print("Todo Updated"))
    .catchError((error) => print("Failed to update todo: $error"));
  }

  // حذف مهمة (Delete)
  Future<void> deleteTodo(String todoId) {
    return todos.doc(todoId).delete()
    .then((value) => print("Todo Deleted"))
    .catchError((error) => print("Failed to delete todo: $error"));
  }
}

// مثال على استخدامها في واجهة المستخدم (جزء من Widget)
/*
StreamBuilder<QuerySnapshot>(
  stream: TodoService().getTodos(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (snapshot.hasError) {
      return Text('Something went wrong');
    }
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Text("Loading");
    }
    return ListView(
      children: snapshot.data!.docs.map((DocumentSnapshot document) {
        Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
        return ListTile(
          title: Text(data['title']),
          trailing: Checkbox(
            value: data['isDone'],
            onChanged: (bool? value) {
              TodoService().updateTodoStatus(document.id, value!);
            },
          ),
          onLongPress: () {
            TodoService().deleteTodo(document.id);
          },
        );
      }).toList(),
    );
  },
);
*/

3.3. Firebase Realtime Database (قاعدة البيانات في الوقت الفعلي)

نظرة عامة: Firebase Realtime Database هي قاعدة بيانات مستضافة على السحابة تخزن البيانات بتنسيق JSON وتزامنها في الوقت الفعلي مع كل عميل متصل. على عكس Firestore، هي قاعدة بيانات شجرية (tree-like) وليست قائمة على المستندات والمجموعات [7].

إضافة المكون الإضافي:

flutter pub add firebase_database

مثال: قراءة وكتابة البيانات

import 'package:firebase_database/firebase_database.dart';

class RealtimeDbService {
  final DatabaseReference _dbRef = FirebaseDatabase.instance.ref();

  // كتابة البيانات (Set)
  Future<void> writeUserData(String userId, String name, String email) async {
    await _dbRef.child('users/$userId').set({
      'name': name,
      'email': email,
      'timestamp': ServerValue.timestamp,
    });
    print('User data written successfully!');
  }

  // تحديث البيانات (Update)
  Future<void> updateUserName(String userId, String newName) async {
    await _dbRef.child('users/$userId').update({
      'name': newName,
    });
    print('User name updated successfully!');
  }

  // قراءة البيانات لمرة واحدة (Get)
  Future<void> readUserDataOnce(String userId) async {
    final snapshot = await _dbRef.child('users/$userId').get();
    if (snapshot.exists) {
      print('User data: ${snapshot.value}');
    } else {
      print('No data available for user $userId.');
    }
  }

  // الاستماع إلى البيانات في الوقت الفعلي (Listen)
  Stream<DatabaseEvent> getUserDataStream(String userId) {
    return _dbRef.child('users/$userId').onValue;
  }

  // حذف البيانات (Delete)
  Future<void> deleteUserData(String userId) async {
    await _dbRef.child('users/$userId').remove();
    print('User data deleted successfully!');
  }
}

3.4. Cloud Storage (التخزين السحابي)

نظرة عامة: Cloud Storage for Firebase مصمم لمساعدتك في تخزين وتقديم المحتوى الذي ينشئه المستخدمون، مثل الصور ومقاطع الفيديو، بسرعة وسهولة. يوفر تخزينًا قويًا وقابلًا للتوسع للملفات [8].

إضافة المكون الإضافي:

flutter pub add firebase_storage

مثال: رفع صورة ملف شخصي

import 'dart:io';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart'; // يتطلب إضافة حزمة image_picker

Future<String?> uploadProfileImage(String userId) async {
  final ImagePicker _picker = ImagePicker();
  final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

  if (image != null) {
    File file = File(image.path);
    try {
      final storageRef = FirebaseStorage.instance.ref();
      final uploadTask = storageRef.child("profile_images/$userId.jpg").putFile(file);

      final TaskSnapshot snapshot = await uploadTask.whenComplete(() {});
      final String downloadUrl = await snapshot.ref.getDownloadURL();
      print('Image uploaded successfully! Download URL: $downloadUrl');
      return downloadUrl;
    } on FirebaseException catch (e) {
      print('Error uploading image: $e');
      return null;
    }
  } else {
    print('No image selected.');
    return null;
  }
}

// مثال على تنزيل ملف:
Future<void> downloadImage(String imageUrl, String fileName) async {
  final ref = FirebaseStorage.instance.refFromURL(imageUrl);
  final Directory appDocDir = await getApplicationDocumentsDirectory();
  final File downloadToFile = File('${appDocDir.path}/$fileName');

  try {
    await ref.writeToFile(downloadToFile);
    print('File downloaded to ${downloadToFile.path}');
  } on FirebaseException catch (e) {
    print('Error downloading file: $e');
  }
}

// مثال على حذف ملف:
Future<void> deleteImage(String imagePath) async {
  final storageRef = FirebaseStorage.instance.ref().child(imagePath);
  try {
    await storageRef.delete();
    print('Image deleted successfully!');
  } on FirebaseException catch (e) {
    print('Error deleting image: $e');
  }
}

3.5. Firebase Cloud Messaging (FCM) (المراسلة السحابية)

نظرة عامة: FCM هو حل مراسلة عبر الأنظمة الأساسية يتيح لك إرسال الرسائل والإشعارات بشكل موثوق به إلى المستخدمين عبر الأجهزة المختلفة .

إضافة المكون الإضافي:

flutter pub add firebase_messaging

مثال: استقبال الإشعارات

لإعداد استقبال الإشعارات، تحتاج إلى تهيئة FCM في تطبيقك والحصول على رمز الجهاز (FCM token). يمكنك بعد ذلك الاستماع إلى الرسائل الواردة:

import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  print("Handling a background message: ${message.messageId}");
}

void setupFCM() async {
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  // طلب إذن الإشعارات (خاص بـ iOS)
  NotificationSettings settings = await FirebaseMessaging.instance.requestPermission(
    alert: true,
    badge: true,
    sound: true,
  );

  // الحصول على رمز الجهاز (FCM token)
  String? token = await FirebaseMessaging.instance.getToken();
  print("FCM Token: $token");

  // الاستماع إلى الرسائل عندما يكون التطبيق في المقدمة
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('Got a message whilst in the foreground!');
    print('Message data: ${message.data}');

    if (message.notification != null) {
      print('Message also contained a notification: ${message.notification!.title}');
    }
  });

  // الاستماع إلى تفاعل المستخدم مع الإشعارات (عند النقر عليها)
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    print('A new onMessageOpenedApp event was published!');
    print('Message data: ${message.data}');
  });
}

3.6. Firebase Crashlytics (الإبلاغ عن الأعطال)

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

إضافة المكون الإضافي:

flutter pub add firebase_crashlytics

مثال: تسجيل الأخطاء وتتبع الأعطال

بعد تهيئة Firebase و Crashlytics، سيتم الإبلاغ عن الأعطال تلقائيًا. يمكنك أيضًا تسجيل الأخطاء غير الفادحة يدويًا:

import 'package:firebase_crashlytics/firebase_crashlytics.dart';

void initializeCrashlytics() {
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;
  // يمكنك أيضًا تسجيل الأخطاء التي تحدث داخل Future
  PlatformDispatcher.instance.onError = (error, stack) {
    FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
    return true;
  };
}

// تسجيل خطأ غير فادح
void logNonFatalError() {
  try {
    throw Exception('This is a non-fatal error example.');
  } catch (e, s) {
    FirebaseCrashlytics.instance.recordError(e, s, reason: 'Non-fatal error');
  }
}

// إجبار على عطل للاختبار
void causeCrash() {
  FirebaseCrashlytics.instance.crash();
}

4. أفضل الممارسات والنصائح

• الأمان وقواعد Firebase Security Rules: من الضروري جدًا إعداد قواعد أمان Firebase (Security Rules) بشكل صحيح لحماية بياناتك. تحدد هذه القواعد من يمكنه قراءة وكتابة البيانات في قواعد بياناتك وتخزينك. يجب أن تكون هذه القواعد محكمة وتتبع مبدأ الحد الأدنى من الامتيازات.
• استخدام Firebase Local Emulator Suite: للتطوير والاختبار، استخدم Firebase Local Emulator Suite. يتيح لك هذا المحاكي تشغيل خدمات Firebase محليًا على جهازك، مما يوفر بيئة تطوير معزولة ويقلل من تكاليف استخدام الخدمات السحابية أثناء التطوير [11].
• إدارة التبعيات (dependencies): حافظ على تحديث مكونات FlutterFire الإضافية إلى أحدث الإصدارات للاستفادة من أحدث الميزات وإصلاحات الأخطاء.

5. الخلاصة

يوفر Firebase، عند دمجه مع Flutter، حلاً شاملاً وقويًا لتطوير تطبيقات الهاتف المحمول والويب. من خلال خدماته المتنوعة مثل المصادقة، قواعد البيانات، التخزين، والإشعارات، يمكن للمطورين بناء تطبيقات غنية بالميزات وقابلة للتوسع بكفاءة عالية. إن سهولة التكامل، والمزامنة في الوقت الفعلي، وقابلية التوسع التلقائية تجعل من Firebase خيارًا ممتازًا لأي مشروع Flutter.