ربط React Native مع Firebase خطوة بخطوة

حين تبدأ مشروع موبايل جديد، غالبًا تكون أمام سؤال عملي جدًا: كيف أبني التطبيق بسرعة من دون أن أضيع وقتًا طويلًا في تجهيز البنية الخلفية؟ هنا يظهر Firebase كخيار شائع لأنه يوفر خدمات جاهزة مثل المصادقة، وقاعدة البيانات السحابية، والتخزين، والإشعارات، وأدوات اختبار مثل المحاكيات، وكل ذلك يمكن ربطه بتطبيق React Native عبر الحزم الرسمية الموصى بها لهذا المسار. React Native Firebase هو المجموعة الموصى بها رسميًا لربط Firebase مع React Native على Android وiOS، كما أن توثيقه يوضح أنه يعمل مع React Native CLI ومع Expo عبر build تطويري، وليس داخل Expo Go الجاهز لأن Expo Go لا يحتوي على الكود الأصلي الذي تحتاجه هذه الحزم.

في هذا المقال سأمشي معك خطوة بخطوة، لكن بطريقة عملية جدًا: سننشئ مشروع Firebase، ثم نربطه بمشروع React Native، وبعدها سننفذ تسجيل الدخول، وقراءة البيانات وكتابتها في Firestore، ورفع الصور إلى Storage، ثم سنلمس جانب الإشعارات والاختبار المحلي. الفكرة ليست فقط أن “يعمل الربط”، بل أن تفهم أين تضع كل ملف، ولماذا تحتاج كل خطوة، وكيف تتجنب الأخطاء التي تظهر عادة في أول يوم ربط. Firebase نفسه يقدّم مسارات إعداد رسمية لكل منصة، وتوثيق React Native Firebase يوصي ببدء العمل بعد تجهيز مشروع Firebase ومشروع React Native بالفعل.

قبل أن تبدأ

قبل أي شيء، تأكد أن بيئة React Native لديك جاهزة للتشغيل محليًا على Android Studio أو Xcode بحسب المنصة التي تستهدفها، لأن دليل React Native الرسمي يشرح إعداد البيئة المحلية باعتبارها خطوة أساسية للتطوير والبناء والتشغيل على المحاكيات والأجهزة الفعلية. كما أن Firebase ستحتاج منك حسابًا في Firebase Console، ومشروعًا جديدًا، ثم تسجيل تطبيق Android و/أو iOS داخله للحصول على ملفات الإعداد الخاصة بكل منصة.

هنا نقطة مهمة جدًا: إذا كنت تستخدم Expo، فاختيارك العملي ليس Expo Go الجاهز، بل build تطويري أو workflow يحتوي على ملفات native قابلة للتعديل، لأن React Native Firebase لا يعمل داخل Expo Go الجاهز. التوثيق الرسمي يذكر أيضًا أن استخدام Expo Config Plugins هو الطريقة الموصى بها لإعداد الحزم التي تحتاج خطوات native، بينما يمكن للحزم التي لا تحتاج تغييرات native أن تعمل مباشرة.

1) أنشئ مشروع Firebase أولًا

ادخل إلى Firebase Console وأنشئ مشروعًا جديدًا. بعد ذلك أضف تطبيق Android إن كنت تستهدف Android، وأضف تطبيق iOS إن كنت تستهدف iPhone أو iPad. Firebase يطلب في Android تسجيل التطبيق داخل المشروع ثم تنزيل ملف google-services.json ووضعه في جذر مجلد التطبيق على مستوى app، بينما في Apple يطلب تسجيل التطبيق ثم تنزيل ملف GoogleService-Info.plist ووضعه داخل المشروع. هذه الملفات ليست أسرارًا حساسة بحد ذاتها، لكنها تربط تطبيقك بمشروع Firebase الصحيح، ولذلك يجب التعامل معها بدقة وعدم خلطها بين بيئات التطوير والإنتاج.

إذا كان لديك أكثر من بيئة، مثل development وproduction، فمن الأفضل أن تنظم ملفات الإعداد بعناية حتى لا يقرأ التطبيق مشروع Firebase الخطأ. توثيق Firebase على Apple يشرح إمكانية دعم أكثر من مشروع داخل تطبيق واحد عبر فصل ملفات GoogleService-Info.plist وربطها بالـ targets المناسبة، وهو أمر مفيد جدًا عندما يبدأ التطبيق يكبر ويحتاج بيئات مختلفة.

2) أنشئ مشروع React Native

يمكنك العمل بمشروع React Native CLI أو Expo، لكن إن أردت أقل تعقيد في البداية فالمسار التقليدي مع CLI يظل واضحًا جدًا، خاصة عندما تكون أول مرة تربط خدمات native مثل Firebase. وثائق React Native توضح أن الهدف من البيئة المحلية هو تمكينك من البناء والتشغيل على المحاكي أو الجهاز، بينما توثيق React Native Firebase يذكر صراحة أنه يدعم React Native CLI وExpo أيضًا، مع اختلاف طريقة الإعداد في كل مسار.

مثال إنشاء مشروع جديد عبر CLI يكون كالتالي:

npx react-native init MyFirebaseApp
cd MyFirebaseApp

أما في Expo، فالمبدأ مختلف قليلًا لأنك لن تعتمد على Expo Go إذا كنت ستستخدم حزم Firebase الأصلية من React Native Firebase. ستحتاج إلى build تطويري أو تهيئة native مناسبة عبر Config Plugins أو الإعداد اليدوي للمجلدات native.

3) ثبّت React Native Firebase

القاعدة الذهبية هنا بسيطة: ابدأ دائمًا بالحزمة الأساسية @react-native-firebase/app، ثم أضف كل خدمة تحتاجها لاحقًا مثل Auth أو Firestore أو Storage أو Messaging. توثيق React Native Firebase يكرر هذا النمط في أكثر من صفحة من صفحات التثبيت، ويذكر أن الحزم الفرعية تعتمد على تثبيت app أولًا.

مثال التثبيت:

yarn add @react-native-firebase/app
yarn add @react-native-firebase/auth
yarn add @react-native-firebase/firestore
yarn add @react-native-firebase/storage
yarn add @react-native-firebase/messaging

ولو كنت على iOS فغالبًا ستحتاج تنفيذ pod install داخل مجلد ios بعد إضافة الحزم، لأن توثيق الحزم الفرعية يذكر هذا ضمن خطوات التثبيت الخاصة بـ iOS.

في كثير من المشاريع، هذه هي اللحظة التي يبدأ فيها التطبيق “يشعر” Firebase لأول مرة، لكن لا تستعجل. النجاح الحقيقي ليس في التثبيت فقط، بل في ربط الملفات الصحيحة، وتشغيل البناء من جديد، والتأكد من أن التطبيق يقرأ إعدادات المشروع السليم. توثيق React Native Firebase يذكر أيضًا أن حزمة app تصبح متاحة تلقائيًا بعد اتباع تعليمات البداية.

4) اربط Android

في Android، الفكرة الأساسية هي أن تضيف ملف google-services.json داخل مجلد التطبيق المناسب، ثم تتأكد من إعدادات Gradle المطلوبة حسب طريقة إعداد مشروعك. Firebase يوضح أن ملف الإعداد يجب تنزيله من لوحة Firebase ثم وضعه داخل مستوى التطبيق، وليس في أي مكان عشوائي داخل المشروع. هذا التفصيل يبدو بسيطًا، لكنه من أكثر أسباب التعطل في البداية، لأن كثيرين يضعون الملف في الجذر العام للمشروع بدل مجلد app.

بنية العمل عادة تكون على هذا الشكل:

MyFirebaseApp/
  android/
    app/
      google-services.json

وفي مشاريع React Native الحديثة، بعد وضع الملف الصحيح، يكون المطلوب إعادة البناء بدل الاكتفاء بتحديث JavaScript فقط، لأن Firebase هنا جزء من الطبقة الأصلية native. توثيق React Native Firebase يكرر عبر صفحات التثبيت أن الخطوة النهائية هي إعادة بناء التطبيق بعد الإعداد.

5) اربط iOS

في iOS، المنطق مشابه لكن الملف مختلف: ستنزل GoogleService-Info.plist من Firebase Console ثم تضيفه إلى مشروع Xcode. توثيق Firebase على Apple يذكر بوضوح هذه الخطوة، ويشرح أيضًا أن Firebase SDKs تُضاف إلى المشروع عبر طرق تثبيت Apple المعروفة، مثل Swift Package Manager في مشاريع Apple الحديثة.

في مشاريع React Native Firebase، التثبيت في iOS يمر غالبًا عبر pod install بعد إضافة الحزم، لأن الحزم تعتمد على Pods. هذا ليس تفصيلًا تجميليًا؛ إنه جزء أساسي من جعل الأكواد الأصلية تظهر داخل التطبيق وتعمل بشكل صحيح.

6) اختبر أول اتصال للتطبيق مع Firebase

بعد الإعداد، أنصحك أن تبدأ بأبسط شيء ممكن: افتح التطبيق وتأكد أن الحزمة الأساسية تعمل بدون أخطاء. في React Native Firebase، وجود حزمة app يعني أن بقية الخدمات ستبني عليها. الفكرة هنا ليست استعراضًا تقنيًا، بل محاولة لتقليل مساحة الخطأ؛ فإذا كان الأساس سليمًا، يصبح تشخيص أي مشكلة لاحقًا أسهل بكثير.

مثال بسيط جدًا للتأكد من أن التطبيق يبني ويستورد الحزم بنجاح:

import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import firestore from '@react-native-firebase/firestore';

export default function App() {
  const db = firestore();

  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Firebase is ready</Text>
    </SafeAreaView>
  );
}

هذا المثال لا يفعل شيئًا معقدًا، لكنه مهم جدًا لأن مجرد استدعاء الحزمة بنجاح من دون أخطاء بناء يعني أن المسار الأساسي سليم. بعدها يمكنك الانتقال إلى Authentication أو Firestore بثقة أكبر.

7) أضف تسجيل الدخول Firebase Authentication

Firebase Authentication هو غالبًا أول خدمة يستعملها المطور في التطبيقات الحقيقية، لأنه يوفر خدمات خلفية جاهزة لتوثيق المستخدمين، ويدعم كلمات المرور، وأرقام الهاتف، ومزودي الهوية الاجتماعية مثل Google وFacebook وTwitter وغيرها. هذا هو أحد أكثر أجزاء Firebase فائدةً لأنك لا تضطر إلى بناء نظام الجلسات من الصفر في أول يوم.

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

import auth from '@react-native-firebase/auth';

export async function signUp(email, password) {
  try {
    const userCredential = await auth().createUserWithEmailAndPassword(email, password);
    return userCredential.user;
  } catch (error) {
    console.log('Sign up error:', error.message);
    throw error;
  }
}

export async function signIn(email, password) {
  try {
    const userCredential = await auth().signInWithEmailAndPassword(email, password);
    return userCredential.user;
  } catch (error) {
    console.log('Sign in error:', error.message);
    throw error;
  }
}

export async function signOutUser() {
  try {
    await auth().signOut();
  } catch (error) {
    console.log('Sign out error:', error.message);
    throw error;
  }
}

المهم هنا أنك تعامل Firebase Auth كخدمة جاهزة، لا كمنطق معقد داخل الواجهة. أنت ترسل البريد وكلمة المرور، وهو يتولى إدارة الحساب والجلسة. توثيق Firebase حول حالة الجلسة يوضح أن الحالة يمكن أن تُحفظ حتى عند إغلاق النافذة أو تدمير النشاط في React Native، لذلك يحتاج المستخدم إلى تسجيل خروج صريح عندما تريد مسح الجلسة.

ولعرض حالة المستخدم داخل الواجهة، يمكنك الاعتماد على مستمع الحالة:

import { useEffect, useState } from 'react';
import auth from '@react-native-firebase/auth';

export function useAuthState() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged(currentUser => {
      setUser(currentUser);
    });

    return unsubscribe;
  }, []);

  return user;
}

هذه الفكرة مهمة جدًا في التطبيقات الواقعية، لأنك غالبًا تريد إظهار شاشة تسجيل الدخول إذا لم يوجد مستخدم، أو تحويله مباشرة إلى الصفحة الرئيسية إذا كان مسجلًا بالفعل.

8) فعّل Google Sign-In أو مزودات الهوية الاجتماعية

Firebase Auth لا يقتصر على البريد وكلمة المرور. التوثيق الرسمي يذكر أنه يدعم مزودي الهوية الاجتماعية، كما أن React Native Firebase يوضح أن تكامل هذه المزودات الاجتماعية متروك للمطور بسبب اختلاف طرق OAuth بين منصة وأخرى. هذا يعني أن Firebase يوفّر الطبقة الخلفية، بينما أنت تنفذ تدفق المصادقة الخارجي المناسب لتطبيقك.

عند استخدام Google Sign-In مثلًا، ستحتاج عادة إلى تفعيل المزود من داخل Firebase Console أولًا. توثيق Firebase على Apple يذكر صراحة أنه يجب تفعيل Google provider من إعدادات Authentication داخل لوحة Firebase قبل استخدام Google Sign-In.

ومن هنا يأتي الجزء العملي: بعد إتمام تسجيل الدخول عبر Google SDK المناسب للمنصة، يمكنك تمرير بيانات الاعتماد إلى Firebase Auth حتى يصير المستخدم معروفًا داخل مشروعك، ثم تبدأ في حفظ بياناته الإضافية داخل Firestore لو أردت.

9) استخدم Cloud Firestore لتخزين البيانات

Cloud Firestore مناسب جدًا عندما تحتاج قاعدة بيانات NoSQL قابلة للتوسع، مع مزامنة لحظية بين الأجهزة، ودعم offline يساعد التطبيق على الاستجابة حتى مع بطء الشبكة أو انقطاعها. توثيق React Native Firebase وFirebase يصف Firestore بهذه الصفات بوضوح، ويشير أيضًا إلى أنه مناسب للتطبيقات التي تحتاج الاستماع المباشر للتغييرات.

تثبيت Firestore يكون هكذا:

yarn add @react-native-firebase/firestore

ثم مثال إضافة وثيقة جديدة:

import firestore from '@react-native-firebase/firestore';

export async function addTodo(title) {
  try {
    const docRef = await firestore().collection('todos').add({
      title,
      completed: false,
      createdAt: firestore.FieldValue.serverTimestamp(),
    });

    return docRef.id;
  } catch (error) {
    console.log('Add todo error:', error.message);
    throw error;
  }
}

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

import firestore from '@react-native-firebase/firestore';

export async function getTodos() {
  try {
    const snapshot = await firestore().collection('todos').get();
    return snapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data(),
    }));
  } catch (error) {
    console.log('Get todos error:', error.message);
    throw error;
  }
}

ثم التعديل:

import firestore from '@react-native-firebase/firestore';

export async function updateTodo(id, data) {
  try {
    await firestore().collection('todos').doc(id).update(data);
  } catch (error) {
    console.log('Update todo error:', error.message);
    throw error;
  }
}

والحذف:

import firestore from '@react-native-firebase/firestore';

export async function deleteTodo(id) {
  try {
    await firestore().collection('todos').doc(id).delete();
  } catch (error) {
    console.log('Delete todo error:', error.message);
    throw error;
  }
}

الجميل في Firestore أنه لا يجعلك تفكر بأسلوب SQL التقليدي في أول يوم. أنت تعمل مع collections وdocuments، وهذا ينسجم مع كثير من تطبيقات الموبايل: مستخدمون، منتجات، طلبات، تعليقات، رسائل، مفضلة، تنبيهات، وغير ذلك.

10) اعرض البيانات في الواجهة بشكل لحظي

إذا كانت البيانات تتغير باستمرار، فالمشاهدة اللحظية هي ما يجعل التطبيق “حيًا”. توثيق React Native Firebase يوضح أن Firestore يدعم الاستماع اللحظي للتغييرات، وأنه يمكن دمجه بسهولة مع FlatList لعرض القوائم بأداء مناسب. هذا ممتاز لصفحات مثل المهام، الرسائل، الطلبات، المنشورات، أو أي قائمة تتغير بشكل متكرر.

مثال شاشة تعرض قائمة مهام من Firestore:

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import firestore from '@react-native-firebase/firestore';

export default function TodosScreen() {
  const [loading, setLoading] = useState(true);
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    const subscriber = firestore()
      .collection('todos')
      .orderBy('createdAt', 'desc')
      .onSnapshot(snapshot => {
        const data = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data(),
        }));

        setTodos(data);
        setLoading(false);
      });

    return () => subscriber();
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={{ padding: 12, borderBottomWidth: 1, borderColor: '#eee' }}>
            <Text style={{ fontSize: 16, fontWeight: '600' }}>{item.title}</Text>
            <Text>{item.completed ? 'Completed' : 'Pending'}</Text>
          </View>
        )}
      />
    </View>
  );
}

هذا النمط جميل جدًا لأنه يوفّر عليك إعادة التحميل اليدوي. بمجرد تغير البيانات في Firestore، ستصل التحديثات إلى الواجهة تلقائيًا، وهذا من الأسباب الأساسية التي تجعل Firestore محبوبًا في تطبيقات React Native.

11) ارفع الصور والملفات باستخدام Firebase Storage

إذا كان تطبيقك يحتوي على صور ملف شخصي، صور منتجات، أو ملفات مرفوعة من المستخدم، فخدمة Storage هي المكان الطبيعي لهذا النوع من البيانات. التوثيق الرسمي يصف Storage بأنه مناسب لتخزين المحتوى الذي ينشئه المستخدم مثل الصور والفيديوهات، ويذكر أن البيانات تُخزن داخل Google Cloud Storage bucket مع دعم رفع وتنزيل وإدارة الملفات.

تثبيت Storage:

yarn add @react-native-firebase/storage

مثال رفع صورة من جهاز المستخدم:

import storage from '@react-native-firebase/storage';

export async function uploadAvatar(filePath, userId) {
  try {
    const reference = storage().ref(`avatars/${userId}.jpg`);
    await reference.putFile(filePath);
    const url = await reference.getDownloadURL();
    return url;
  } catch (error) {
    console.log('Upload error:', error.message);
    throw error;
  }
}

وفي الاستخدام العملي، يمكنك بعد الحصول على رابط الصورة أن تحفظه داخل Firestore في وثيقة المستخدم، فيصبح عندك الربط التقليدي: Auth للتعريف بالمستخدم، Firestore للبيانات النصية والمنطقية، وStorage للملفات والوسائط. هذا الفصل بين الخدمات يجعل التطبيق أسهل في الصيانة، وأوضح في البنية.

12) أضف Firebase Cloud Messaging للإشعارات

الإشعارات واحدة من أقوى حالات استخدام Firebase في الموبايل. توثيق React Native Firebase يوضح أن Messaging يوفّر تكاملًا أصليًا مع Firebase Cloud Messaging على Android وiOS، وأنه يسهّل التواصل من الخادم إلى الجهاز ومن الجهاز إلى الجهاز. كما يشير إلى دعم أساسي للإشعارات المحلية أيضًا.

تثبيت Messaging:

yarn add @react-native-firebase/messaging

مثال جلب token الخاص بالجهاز:

import messaging from '@react-native-firebase/messaging';

export async function getFcmToken() {
  try {
    const token = await messaging().getToken();
    return token;
  } catch (error) {
    console.log('FCM token error:', error.message);
    throw error;
  }
}

في التطبيق الحقيقي، ستحتاج عادة إلى حفظ هذا token داخل Firestore أو إرساله إلى خادمك حتى تستطيع استهداف الجهاز بالإشعارات لاحقًا. وعلى iOS، قد تحتاج أيضًا إلى إعدادات إضافية مرتبطة بـ APNs ضمن Firebase بحسب سيناريو الإشعارات الذي تعتمد عليه. توثيق Firebase يوضح أن إعداد إشعارات Apple يتطلب رفع مفتاح APNs في إعدادات Cloud Messaging عند الحاجة.

13) اختبر كل شيء قبل الإنتاج

واحدة من أفضل العادات التي أنصح بها هي اختبار Firestore وAuth وStorage في بيئة محلية أو شبه محلية قبل أن تفتح المشروع للمستخدمين الحقيقيين. React Native Firebase يوفّر صفحة خاصة بمحاكي Firestore، ويشرح أنه يمكنك وصل التطبيق بالمحاكي لاختبار القراءة والكتابة من دون لمس بيانات الإنتاج. هذا مفيد جدًا عندما تكون تبني شاشة تسجيل أو صفحة تعديل بيانات أو سيناريوهات معقدة وتريد تجنب العبث بقاعدة البيانات الحية.

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

14) استخدم App Check عندما يبدأ التطبيق يكبر

عندما ينمو التطبيق وتبدأ البيانات تصبح أثمن، يصبح من الحكمة التفكير في App Check. توثيق React Native Firebase يشير إلى أن App Check يملك صفحة إعداد خاصة به، وأن التوثيق الرسمي من Firebase يحتوي على مزيد من المعلومات حول الموفرات المختلفة واختبارات CI والتجارب التطويرية. الفكرة هنا هي تقليل إساءة استخدام الواجهة الخلفية ومنع الطلبات غير الشرعية من التطبيقات غير الموثوقة.

لن تحتاج App Check في أول نموذج أولي غالبًا، لكن إدخاله لاحقًا فكرة ممتازة عندما ينتقل مشروعك من “تجربة” إلى “منتج فعلي”.

15) كيف تفكر في بنية المشروع

أكثر الأخطاء شيوعًا ليست في Firebase نفسه، بل في تنظيم الكود. من الأفضل أن تفصل الطبقات بهذا الشكل: ملف/مجلد لخدمات Firebase، ملف للمصادقة، ملف للبيانات، ومكونات UI مستقلة لا تعرف تفاصيل الاستدعاءات الداخلية. بهذه الطريقة تستطيع أن تغيّر طريقة التخزين أو المصادقة لاحقًا من دون أن تنهار الواجهة. وهذا الأسلوب ينسجم مع طبيعة React Native Firebase لأنه يعطيك وصولًا مباشرًا إلى الخدمات الأصلية، لكن من الجيد ألا تخلط هذا الوصول المباشر داخل كل شاشة.

مثال هيكلة بسيطة:

src/
  services/
    auth.js
    firestore.js
    storage.js
  screens/
    LoginScreen.js
    HomeScreen.js
    ProfileScreen.js
  components/
    Button.js
    Input.js

ثم في services/auth.js تضع عمليات الدخول والخروج، وفي services/firestore.js عمليات القراءة والكتابة، وهكذا. هذه التفاصيل الصغيرة هي التي تريحك بعد شهرين، حين تتضخم الشيفرة وتصبح الذاكرة البشرية أقل قدرة على تتبع كل شيء.

16) أخطاء شائعة يقع فيها المبتدئ

الخطأ الأول هو وضع ملف الإعداد في المكان الخاطئ. في Android يجب أن يكون google-services.json داخل المسار الصحيح الخاص بالتطبيق، وفي iOS يجب إضافة GoogleService-Info.plist إلى المشروع كما تشرح مستندات Firebase. الخطأ الثاني هو محاولة استخدام React Native Firebase داخل Expo Go، مع أن التوثيق يقول بوضوح إن Expo Go لا يدعم هذه الحزم لأنها تعتمد على native code غير موجود فيه. الخطأ الثالث هو نسيان إعادة البناء بعد تعديل ملفات native.

الخطأ الرابع هو خلط Firebase JS SDK المخصص للويب مع React Native Firebase من دون فهم الفارق. Firebase JS SDK الحديث يعتمد على modular API ويُوصى به للويب، بينما React Native Firebase هو المسار الموصى به لReact Native native integration. كلاهما تابع لنظام Firebase، لكن مسار الاستخدام في React Native يختلف عن مسار الويب.

الخطأ الخامس هو البناء بسرعة من دون قواعد Security Rules واضحة. قد تبدو قواعد الاختبار سهلة في البداية، لكن Firebase نفسه ينبه إلى أن وضع الاختبار في بعض الخدمات قد يسمح لأي شخص بالقراءة والكتابة، ولذلك يجب مراجعة القواعد قبل الانتقال إلى مرحلة فعلية. هذا مهم جدًا عندما يبدأ التطبيق يستقبل مستخدمين حقيقيين.

17) مثال متكامل صغير يجمع Auth وFirestore

هنا مثال مصغّر يوضح كيف يمكن أن تتعاون الخدمات معًا داخل التطبيق:

import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

export async function registerAndSaveProfile(email, password, displayName) {
  const userCredential = await auth().createUserWithEmailAndPassword(email, password);

  await firestore()
    .collection('users')
    .doc(userCredential.user.uid)
    .set({
      uid: userCredential.user.uid,
      email: userCredential.user.email,
      displayName,
      createdAt: firestore.FieldValue.serverTimestamp(),
    });

  return userCredential.user;
}

هذا النموذج شائع جدًا في التطبيقات الواقعية: تسجل المستخدم في Auth أولًا، ثم تحفظ ملفه الشخصي في Firestore برقم UID نفسه، فيصير من السهل ربط بيانات الحساب كلها ببعضها. هكذا لا تضيع بين طبقة تسجيل الدخول وطبقة البيانات، بل تجمعهما بمنطق واضح وسهل الصيانة. Auth وFirestore مصممان أصلًا للتكامل معًا، وهذا من نقاط القوة الأساسية في Firebase.

18) هل تختار Firestore أم Realtime Database؟

كثيرًا ما يسأل المطور نفسه هذا السؤال. Realtime Database ما يزال متاحًا وله مزامنة لحظية وبيانات JSON ودعم offline، لكن Firestore هو الخيار الذي يفضله كثير من المشاريع الحديثة عندما تحتاج استعلامات أكثر مرونة وتنظيمًا أو مزامنة عبر collections وdocuments. React Native Firebase يوضح أيضًا أن Realtime Database يدعم المزامنة اللحظية والقدرات offline، لذا القرار النهائي يعود إلى شكل بياناتك وطبيعة تطبيقك.

قاعدة عملية بسيطة: إذا كانت بياناتك أقرب إلى “شجرة JSON” بسيطة جدًا وقديمة نسبيًا، فقد يلائمك Realtime Database. أما إذا كنت تريد هيكلة أوضح واستعلامات أغنى وتجربة توسعه أسهل لمعظم التطبيقات الجديدة، فFirestore عادة هو البداية الأفضل. هذا استنتاج عملي مبني على طريقة وصف التوثيق لكل خدمة، وليس قاعدة جامدة تصلح لكل الحالات.

19) نصيحة أخيرة من التجربة

أجمل ما في Firebase مع React Native أنه يختصر الطريق، لكنه لا يلغي الحاجة إلى التفكير المعماري الجيد. لا تجعل كل شيء في الشاشات، ولا تكتب منطق القاعدة داخل الواجهة، ولا تبالغ في مزج الخدمات ببعضها من البداية. ابدأ بخطوات صغيرة: Auth، ثم Firestore، ثم Storage، ثم Messaging، ثم App Check والمحاكيات عند الحاجة. بهذا الأسلوب ستشعر أن التطبيق يكبر معك بهدوء بدل أن ينهار تحت ثقل القرارات السريعة. Firebase صُمم ليخدم حالات استخدام كثيرة في تطبيقات الموبايل والويب، وReact Native Firebase هو الجسر العملي الذي يسمح لك باستغلال هذه الخدمات داخل تطبيق React Native native بشكل منظم.

وفي النهاية، أفضل طريقة لفهم الربط ليست القراءة فقط، بل البناء. أنشئ مشروعًا صغيرًا: شاشة تسجيل، شاشة قائمة مهام، زر رفع صورة، وإشعار بسيط. حين تضع هذه القطع معًا ستفهم Firebase حقًا، وسترى أن الربط بين React Native وFirebase ليس مجرد إعداد تقني، بل طريقة عملية لتسريع تطوير تطبيقات حقيقية بدون أن تفقد السيطرة على البنية.

إذا أردت، أستطيع تحويل هذا المقال إلى نسخة SEO أكثر احترافية بعناوين فرعية محسّنة للكلمات المفتاحية، أو إلى نسخة جاهزة للنشر على مدونة ووردبريس مع تنسيق HTML كامل.