بناء تطبيق React Native متكامل مع Firebase: دليل شامل

10 min read Aldawsari
دقائق القراءة: 10

مقدمة: بناء تطبيقات React Native قوية مع Firebase

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

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

سنغطي في هذا الدليل المحاور التالية بالتفصيل:

  • إنشاء مشروع Firebase جديد.
  • إعداد وتكوين تطبيق React Native جديد.
  • بناء هيكل المجلدات، وتحديد المسارات، وإعداد التنقل.
  • تطبيق واجهة المستخدم لشاشات تسجيل الدخول، والتسجيل، والشاشة الرئيسية.
  • تنفيذ وظائف التسجيل والمصادقة باستخدام Firebase Auth.
  • الحفاظ على حالة تسجيل الدخول للمستخدمين (Persistent Login).
  • كتابة وقراءة البيانات من قاعدة بيانات Firebase Firestore.

دعنا نبدأ رحلتنا في بناء مشروع React Native Firebase المتكامل!

الشكل النهائي للتطبيق المتنقل سيكون كالتالي:

واجهة المستخدم النهائية لتطبيق React Native المدمج مع Firebase

1. إنشاء مشروع Firebase جديد وتكوينه

تُعد Firebase منصة تطوير تطبيقات شاملة تقدمها Google، وتتيح للمطورين بناء تطبيقات جوال وويب بدون الحاجة إلى إدارة خوادم خلفية. إنها تعمل فوق بنية Google Cloud التحتية، مما يوفر قابلية توسع عالية ويوفر الكثير من الوقت والجهد على المطورين. في Firebase، يمكنك تخزين كل ما يحتاجه تطبيقك: المستخدمين، البيانات، الملفات، رموز الإشعارات الفورية، والمزيد. يتم توفير كل هذه المعلومات لعملاء الجوال عبر حزم SDK الخاصة بـ Firebase، والتي تتوافق تمامًا مع React Native، مما يختصر تعقيدات استدعاءات API وتحليل البيانات وإدارة المقابس.

خطوات إنشاء وتكوين مشروع Firebase:

  1. توجه إلى موقع Firebase.com وقم بإنشاء حساب جديد إذا لم يكن لديك واحد.
  2. بمجرد تسجيل الدخول، ستتمكن من إنشاء مشروع جديد في Firebase Console.
  3. قم بإنشاء مشروع جديد وامنحه اسمًا مناسبًا.
  4. في لوحة تحكم Firebase Console، انتقل إلى قسم Authentication ثم Sign-in method. قم بتمكين طريقة المصادقة Email & Password.

    5. تمكين طريقة المصادقة بالبريد الإلكتروني وكلمة المرور في Firebase

  5. أنشئ تطبيق iOS جديدًا بمعرف الحزمة (App ID) com.reactnativefirebase.

    6. إنشاء تطبيق iOS جديد في Firebase مع معرف الحزمة

  6. (اختياري) أنشئ تطبيق Android جديدًا باسم الحزمة (package name) com.reactnativefirebase.
  7. قم بتنزيل ملف التكوين الذي سيتم إنشاؤه في الخطوة التالية إلى جهاز الكمبيوتر الخاص بك. سيكون الملف باسم GoogleService-Info.plist لتطبيق iOS، و google-services.json لتطبيق Android. ستحتاج إلى هذه الملفات لربط تطبيق React Native الخاص بك بـ Firebase.

2. إنشاء وتكوين تطبيق React Native جديد

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

سنعتمد على Firebase Web SDK، المدعوم مباشرة من Google والمتوافق مع كل من Expo و React Native CLI. على الرغم من وجود مكتبة react-native-firebase، إلا أننا لا نوصي بها لعدة أسباب: فهي ليست مدعومة مباشرة من Google، مما يجعل صيانتها أكثر صعوبة، كما أنها لا تعمل مع Expo، وهو ما قد يكون عائقًا لبعض المطورين.

خطوات إعداد بيئة التطوير:

تغطي الخطوات أدناه أيضًا الإرشادات الرسمية لـ React Native حول كيفية إعداد بيئة التطوير الخاصة بك.

تثبيت Expo CLI:

في نافذة الطرفية (Terminal) الخاصة بك، قم بتشغيل الأمر التالي:

npm install -g expo-cli

إنشاء تطبيق React Native جديد:

قم بإنشاء تطبيق React Native جديد عن طريق تشغيل الأمر:

expo init react-native-firebase

عندما يُطلب منك اختيار قالب، اختر Managed Workflow — Blank.

بدء تشغيل التطبيق:

ابدأ تشغيل التطبيق باستخدام:

yarn ios // أو yarn android

سيؤدي هذا إلى عرض رمز QR يمكنك مسحه ضوئيًا باستخدام تطبيق الكاميرا على iOS، أو تطبيق Expo Go على Android. الآن لدينا تطبيق React Native جديد يعمل على كل من iOS و Android. دعنا نربطه بـ Firebase.

إضافة Firebase SDK إلى مشروع React Native:

قم بإضافة حزمة Firebase إلى مشروعك:

yarn add firebase

إضافة مكتبة React Native Navigation:

قم بإضافة مكتبات التنقل اللازمة للتطبيق:

yarn add @react-navigation/native && yarn add @react-navigation/stack && expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

إضافة مكونات وحزم واجهة المستخدم:

قم بإضافة المكونات والحزم الإضافية التي ستُستخدم في المشروع:

yarn add react-native-keyboard-aware-scroll-view base-64

إنشاء ملف تكوين Firebase:

قم بإنشاء مجلد وملف لتخزين إعدادات Firebase الخاصة بك:

mkdir src src/firebase && touch src/firebase/config.js

أضف تكوين Firebase الخاص بك إلى الملف src/firebase/config.js. يمكنك الحصول على كل هذه المعلومات من Firebase Console -> Project Settings.

الحصول على معلومات تكوين Firebase من إعدادات المشروع

3. بناء هيكل المجلدات وإعداد المسارات والتنقل

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

إنشاء هيكل المجلدات:

قم بتشغيل الأوامر التالية لإنشاء المجلدات اللازمة:

mkdir src/screens src/screens/LoginScreen src/screens/RegistrationScreen src/screens/HomeScreen

إنشاء هيكل الملفات:

بعد إنشاء المجلدات، قم بإنشاء الملفات الأساسية لكل شاشة:

touch src/screens/index.js src/screens/LoginScreen/LoginScreen.js src/screens/LoginScreen/styles.js src/screens/RegistrationScreen/RegistrationScreen.js src/screens/RegistrationScreen/styles.js src/screens/HomeScreen/HomeScreen.js src/screens/HomeScreen/styles.js

إضافة الكود إلى src/screens/index.js:

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

 export { default as LoginScreen } from './LoginScreen/LoginScreen'
 export { default as HomeScreen } from './HomeScreen/HomeScreen'
 export { default as RegistrationScreen } from './RegistrationScreen/RegistrationScreen'

لا تقلق إذا بدا المشروع غير مكتمل في هذه المرحلة؛ كل شيء سيتضح تدريجيًا مع تقدمنا في الشرح.

إعداد المسارات والملاحين (Navigators):

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

قم باستبدال محتوى ملف App.js بالكود التالي (سيتم توفير الكود لاحقًا ضمن الكود المصدري الكامل، أو يمكنك افتراض أنه يحتوي على إعدادات الملاح الأساسية).

4. تطبيق واجهة المستخدم (UI) للشاشات

الآن بعد أن أصبح لدينا الهيكل الأساسي للتطبيق جاهزًا، حان الوقت لتطبيق مكونات واجهة المستخدم لجميع الشاشات. لن نتعمق في تفاصيل تخطيط flex وتصميم React Native في هذا الدليل، حيث أن ذلك يقع خارج نطاق تركيزنا الرئيسي. بدلاً من ذلك، سنركز بشكل أساسي على دمج React Native مع Firebase.

ببساطة، قم باستبدال محتويات الملفات التالية بالكود المخصص لواجهة المستخدم (سيتم توفيره في الكود المصدري الكامل):

  • src/screens/LoginScreen/LoginScreen.js
  • src/screens/LoginScreen/styles.js
  • src/screens/RegistrationScreen/RegistrationScreen.js
  • src/screens/RegistrationScreen/styles.js
  • src/screens/HomeScreen/HomeScreen.js
  • src/screens/HomeScreen/styles.js

في هذه المرحلة، يجب أن يعمل تطبيقك بشكل صحيح ويعرض الشاشات التالية (واجهة المستخدم فقط):

واجهات المستخدم لشاشات تسجيل الدخول والتسجيل والشاشة الرئيسية

يمكنك التبديل بين الشاشتين بالنقر على أزرار الروابط في التذييل. الآن بعد أن أصبح لدينا واجهة مستخدم جذابة لتسجيل الدخول والتسجيل، دعنا نرى كيف يمكننا دمج تطبيق React Native (و Expo) الخاص بنا مع Firebase.

5. تسجيل المستخدمين باستخدام Firebase Auth

سنبدأ بإنشاء حساب جديد باستخدام Firebase Auth، حيث يأتي تسجيل الدخول بشكل طبيعي بعد ذلك. لهذا الغرض، سنضيف منطق Firebase لإنشاء حساب جديد باستخدام البريد الإلكتروني وكلمة المرور في ملف RegistrationScreen.js، وذلك عن طريق تنفيذ الدالة onRegisterPress.

في تدفق إنشاء الحساب أعلاه، نقوم بعدة أمور مهمة:

  1. نستدعي واجهة برمجة التطبيقات createUserWithEmailAndPassword من Firebase Auth (السطر 13)، والتي تنشئ حسابًا جديدًا سيظهر في جدول Firebase Console -> Authentication.
  2. إذا كان تسجيل الحساب ناجحًا، فإننا نقوم أيضًا بتخزين بيانات المستخدم في Firebase Firestore (السطر 24). هذا ضروري لتخزين معلومات إضافية للمستخدم، مثل الاسم الكامل، وعنوان URL لصورة الملف الشخصي، وما إلى ذلك، والتي لا يمكن تخزينها في جدول المصادقة.
  3. إذا كان التسجيل ناجحًا، فإننا ننتقل إلى الشاشة الرئيسية (Home Screen)، مع تمرير بيانات كائن المستخدم أيضًا.
  4. إذا حدث أي خطأ، فإننا نعرض تنبيهًا به. يمكن أن تكون الأخطاء مثل عدم وجود اتصال بالشبكة، أو كلمة مرور قصيرة جدًا، أو بريد إلكتروني غير صالح، وما إلى ذلك.

أعد تحميل تطبيقك واختبر عملية التسجيل. إذا نجحت في إنشاء حساب واحد، تحقق من ظهوره في Firebase Console -> Authentication:

عرض المستخدمين المسجلين في لوحة تحكم Firebase Authentication

6. تسجيل الدخول باستخدام Firebase Auth

الآن بعد أن أصبحنا قادرين على إنشاء حسابات جديدة، دعنا نطبق وظيفة تسجيل الدخول. تتولى حزمة Firebase SDK جميع خطوات التفويض والمصادقة اللازمة لتسجيل دخول آمن. افتح ملف LoginScreen.js، وقم باستيراد firebase، وأكمل الدالة onLoginPress.

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

7. الحفاظ على بيانات تسجيل الدخول (Persistent Login Credentials)

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

لحسن الحظ، تتولى حزمة Firebase SDK هذه المهمة لنا، وتتعامل مع جميع المخاوف الأمنية. يتم تمكين تسجيل الدخول المستمر افتراضيًا في Firebase، لذا كل ما نحتاجه هو جلب المستخدم المسجل دخوله حاليًا. افتح ملف App.js ودعنا نطبق ميزة تسجيل الدخول المستمر:

تقوم الدالة onAuthStateChanged بإرجاع المستخدم المسجل دخوله حاليًا. ثم نقوم بجلب جميع بيانات المستخدم الإضافية التي قمنا بتخزينها في Firestore، ونقوم بتعيينها على حالة المكون الحالي. سيؤدي هذا إلى إعادة عرض مكون التطبيق، والذي سيعرض الشاشة الرئيسية (Home screen). لاحظ كيف نستدعي هذا لأول مرة عند تحميل التطبيق بالاستفادة من خطاف useEffect.

8. كتابة وقراءة البيانات من Firebase Firestore

لقد استخدمنا Firestore بالفعل أعلاه، لحفظ معلومات إضافية عن مستخدمينا (الاسم الكامل). في هذا القسم المخصص، سنرى كيف يمكننا كتابة البيانات إلى Firestore، وكيف يمكننا الاستعلام عنها. سنغطي أيضًا كيفية مراقبة (الاستماع إلى) التغييرات في مجموعة Firestore وجعلها تنعكس على الشاشة في الوقت الفعلي. يمكن أن يكون هذا مفيدًا جدًا في التطبيقات التي تتطلب تحديثات فورية، مثل تطبيق دردشة مبني بـ React Native Chat.

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

تطبيق HomeScreen.js:

قم بإعادة كتابة ملف HomeScreen.js بالكود التالي (سيتم توفيره في الكود المصدري الكامل).

تنسيق الشاشة الرئيسية:

قم بتنسيق الشاشة الرئيسية عن طريق استبدال محتوى ملف HomeScreen/styles.js بما يلي (سيتم توفيره في الكود المصدري الكامل).

اختبار الشاشة الرئيسية الجديدة:

أعد تحميل التطبيق ولاحظ الشاشة الرئيسية الجديدة. اكتب بعض النصوص واضغط على زر Add.

قد لا يحدث شيء في البداية!

إنشاء فهرس (Index) على مجموعة entities في Firestore:

ستلاحظ أن قائمة الكيانات لا يتم عرضها. إذا قمت بفحص السجلات (logs)، فسترى تحذيرًا حول “The query requires an index”، متبوعًا بعنوان URL طويل:

رسالة خطأ تشير إلى الحاجة لإنشاء فهرس في Firestore

يخبرنا هذا أنه لا يمكننا الاستعلام عن جدول entities بواسطة authorID وفرز البيانات حسب createdAt بترتيب تنازلي، ما لم نقم بإنشاء فهرس. إنشاء فهرس سهل للغاية – ما عليك سوى النقر على عنوان URL هذا ثم النقر على الزر:

واجهة إنشاء فهرس جديد في Firebase Console

أعد تحميل التطبيق مرة أخرى:

الآن يعمل كل شيء كما هو متوقع:

  • يعرض التطبيق جميع الكيانات في مجموعة entities، بترتيب الإنشاء التنازلي.
  • إضافة كيان جديد يعمل بشكل جيد.
  • تتحدث القائمة في الوقت الفعلي (جرب حذف إدخال مباشرة في قاعدة البيانات، أو إضافة واحد جديد مباشرة من التطبيق).

هذا هو شكل قاعدة بيانات Firestore الخاصة بك الآن:

عرض البيانات المخزنة في قاعدة بيانات Firebase Firestore

هذه هي الطريقة التي تقرأ بها وتكتب من Firestore في React Native. دعنا ننتقل إلى القسم الأخير. جرب التطبيق، عن طريق إضافة كيانات جديدة. هذا هو المشروع النهائي:

الشكل النهائي لتطبيق React Native بعد دمج Firebase

الخلاصة التقنية

تُبسط Firebase بشكل كبير عملية إضافة دعم المصادقة وقاعدة البيانات لأي تطبيق React Native. إن حزمة Firebase SDK قوية للغاية، وتدعم العديد من أنماط قراءة وكتابة البيانات الشائعة. بالإضافة إلى React Native، توفر Firebase SDK دعمًا للعديد من اللغات الأخرى مثل Swift، Kotlin، أو Flutter، مما يجعلها خيارًا متعدد الاستخدامات للمطورين. لقد استعرضنا في هذا الدليل الميزات الأساسية الأكثر شيوعًا في دمج React Native Firebase، ونتطلع في السلسلة القادمة إلى تغطية ميزات أكثر تقدمًا مثل Firebase Storage (تحميل الملفات) والإشعارات الفورية.

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *