كيفية ربط React بـ Firebase خطوة بخطوة

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

ستتعرف في هذه المقالة خطوة بخطوة على كيفية دمج Firebase مع تطبيقات الويب React (بما في ذلك Vite + TypeScript) ومع React Native و Expo، مع التطرق إلى النقاط الرئيسية: إنشاء المشروع في Firebase، وتكوين SDK، والمصادقة باستخدام البريد الإلكتروني وGoogle، وإدارة حالة الجلسة، واستخدام Context API، والقراءة/الكتابة إلى قاعدة البيانات في الوقت الحقيقي وFirestore.

ما هو Firebase ولماذا يتناسب بشكل جيد مع React؟

Firebase هي منصة من جوجل تقدم مجموعة من خدمات الواجهة الخلفية "كخدمة": المصادقة، وقواعد بيانات NoSQL (قاعدة بيانات Realtime وFirestore)، وتخزين الملفات، والتحليلات، وإرسال الإشعارات، وغيرها. بدلاً من إعداد خادمك الخاص، يمكنك الاستفادة من بنيتها التحتية والوصول إليها من الواجهة الأمامية باستخدام حزم تطوير البرامج الرسمية (SDKs).

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

تاريخياً، بدأ Firebase كقاعدة بيانات في الوقت الفعلي "كخدمة"، ولكن منذ مؤتمر Google I/O 2016، توسع المنتج ليصبح نظامًا خلفيًا متكاملاً للغاية: يمكنك التحقق من هوية المستخدمين، وحفظ بياناتهم في JSON أو مجموعات المستندات، وتخزين الصور، وإرسال الإشعارات، وما إلى ذلك.

يكمن مفتاح دمجها مع React (الويب أو التطبيق الأصلي) في فهم كيفية تهيئة SDK، وكيفية حماية مفاتيحك العامة باستخدام متغيرات البيئة، وكيفية الاستماع إلى التغييرات في جلسة المستخدم، وكيفية هيكلة التطبيق بحيث تتلقى شجرة المكونات حالة المصادقة حيثما تحتاج إليها.

أنشئ مشروعًا في Firebase وقم بتمكين المصادقة

الخطوة الأولى دائماً ما تتضمن لوحة تحكم Firebase. انتقل إلى firebase.google.comسجّل الدخول باستخدام حسابك على جوجل وادخل إلى لوحة التحكم. ومن هناك يمكنك إنشاء مشاريعك وإدارتها.

إلى إنشاء مشروع جديدانقر على "إضافة مشروع" (أو "إنشاء مشروع")، ثم أعطه اسمًا مميزًا، على سبيل المثال auth-firebase-react o react-firebaseاختر البلد أو المنطقة الأنسب لجمهورك، ثم أكّد عملية الإنشاء. إذا كنت بحاجة إلى دليل عملي للبدء، فراجع ابدأ مشاريعك باستخدام Firebase Studioبعد بضع ثوانٍ، ستكون لوحة التحكم الخاصة بك جاهزة.

ستجد داخل المشروع عدة أيقونات لتسجيل التطبيقات: iOS، وAndroid، والويب. بالنسبة لتطبيق React تقليدي (SPA في المتصفح)، يجب عليك اختر أيقونة الموقع الإلكترونيفي React Native، ستحتاج إلى تسجيل تطبيقات iOS و/أو Android باستخدام معرفات الحزم المقابلة لها.

عند تسجيل تطبيق ويب، سيتم عرض كائن تهيئة جافا سكريبت تحتوي على apiKey، و authDomain، عناوين URL لقاعدة البيانات والتخزين، و projectIdإلخ. ويظهر مثال أيضًا مع firebase.initializeApp(config)هذا الجزء هو ما ستقوم بتكييفه لاحقاً مع مشروع React أو React Native الخاص بك.

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

• عنوان البريد الإلكتروني/كلمة المرور، وذلك بتحديد خيار "تمكين" وحفظ التغييرات.
• جوجل بصفتك موفر OAuth، يمكنك أيضًا تفعيل الطريقة واختيار بريدك الإلكتروني الأساسي.

في علامة التبويب "المستخدمون" (أو "المستخدمون") ستعرض جميع الحسابات التي تسجل من خلال تطبيقك باستخدام Firebase Auth، سواء باستخدام البريد الإلكتروني وكلمة المرور أو باستخدام موفري خدمات خارجيين مثل Google.

قم بإعداد مشروع React باستخدام Vite و TypeScript

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

Un التدفق النموذجي سيكون الأمر كالتالي:

1. قم بإنشاء المشروع باستخدام Vite عن طريق تحديد قالب React + TypeScript.
2. ادخل إلى المجلد الذي تم إنشاؤه حديثًا.
3. تثبيت التبعيات.
4. افتح المشروع في محرر النصوص المفضل لديك (VS Code، على سبيل المثال).

La الحد الأدنى لهيكل المجلد قد يبدو تكامل المصادقة الذي تهتم به على النحو التالي:

• src/components إلى تسجيل الدخول, التسجيل ومكونات أخرى قابلة لإعادة الاستخدام.
• src/hooks لخطافات مخصصة مثل useForm.
• src/firebase أين ستخزن؟ config.ts y services.ts.
• src/context إلى سياق المصادقة وموردك.

بمجرد إنشاء الهيكل الأساسي، يمكنك التبسيط App.tsx وترك الحد الأدنى فقط (عنوان أو حاوية) لإدراج نماذج تسجيل الدخول/التسجيل ومنطق المصادقة.

صمم نماذج تسجيل الدخول والتسجيل في React

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

شكل تسجيل الدخول يتضمن عادةً حقلين:

• البريد الإلكتروني (النوع email o text (مع التحقق).
• كلمة المرور (النوع password).

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

• زر الإرسال التقليدي، مع type="submit"، مما سيؤدي إلى إطلاق onSubmit من الشكل.
• زر تسجيل الدخول إلى جوجل، مع type="button" لمنعه من إرسال النموذج، وبدلاً من ذلك يقوم ببساطة باستدعاء وظيفة تسجيل الدخول إلى جوجل.

El مكون التسجيل إنه مشابه جدًا

على الرغم من أنه عادة ما يحتوي على زر إرسال واحد فقط؛ فإن الحقول الرئيسية هي البريد الإلكتروني وكلمة المرور، ولكن يمكنك إضافة الاسم الكامل أو بيانات أخرى إذا كنت ترغب في تخزينها في Firestore.

إلى تسهيل عمليات الاستيراد إنشاء "أرشيف البراميل" فكرة جيدة. index.ts en src/components حيث تقوم بإعادة تصدير مكوناتك Login y Registerبحيث يمكنك بعد ذلك استيرادها من مسار واحد نظيف.

إدارة حالة النموذج باستخدام خطاف مخصص

هذا شائع جدًا في React تغليف منطق الشكل في خطاف قابل لإعادة الاستخدام. مثال نموذجي على ذلك هو useForm، كما أُعلن في src/hooks/useForm.tsx، والتي تستقبل كائنًا بالحالة الأولية للنموذج وتعيد القيم الحالية، والكائن نفسه، و handleChange نوعي.

يكمن الهدف من كتابتها باستخدام الأنواع العامة في TypeScript يمكنك إعادة استخدام نفس الخطاف مع النماذج التي تحتوي على حقول مختلفة: في تسجيل الدخول، يمكنك فقط أن يكون لديك email y passلكن في شاشات أخرى، يمكنك إضافة الاسم أو رقم الهاتف أو سمات أخرى دون إعادة كتابة المنطق الأساسي.

النمط المعتاد داخل الخطاف يتمثل الهدف في الحفاظ على useState بهدف النموذج، وفي handleChange، استخدم name من المدخلات لتحديث الخاصية المقابلة: شيء من هذا القبيل setForm(prev => ({ ...prev, : target.value })).

في المكون Login.tsxيمكنك تسمية الخطاف على النحو التالي: const { email, pass, form, handleChange } = useForm({ email: '', pass: '' })ثم تقوم بتعيين value={email} o value={pass} إلى المدخلات و onChange={handleChange}وأنت تحدد أ handleSubmit يتصل event.preventDefault() وفي وقت لاحق، إلى وظيفة تسجيل الدخول الخاصة بك في Firebase.

المكون Register.tsx يمكن أن تشترك في نفس الآليات تمامًاتغيير ما يفعله فقط في handleSubmit (إنشاء حساب بدلاً من تسجيل الدخول) ويمكنك حتى استخدام مكون نموذج عام واحد، وتحديد معلمات نصوص الأزرار والوظيفة المراد تنفيذها عند الإرسال.

إعداد Firebase في تطبيق React (Vite + TypeScript)

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

1. قم بتثبيت Firebase من npm مع شيء مثل npm install firebase o yarn add firebaseفي المشاريع التي تستخدم الإصدار المعياري (الإصدار 9 وما بعده)، ستعمل مع عمليات استيراد فردية (على سبيل المثال، getAuth, signInWithEmailAndPasswordإلخ)، مما يحسن من هز الأشجار.
2. أنشئ المجلد src/firebase وملف config.ts حيث تقوم بتهيئة التطبيق. بدلاً من لصق القيم من وحدة التحكم مباشرةً، ضعها في ملف. .env في جذر المشروع. مع Vite، يجب أن تبدأ جميع المتغيرات التي يمكن الوصول إليها من الواجهة الأمامية بـ VITE_ (على سبيل المثال ، VITE_FIREBASE_API_KEY).
3. En config.ts ستقوم بإنشاء كائن التكوين الخاص بك قراءة من import.meta.env وما شابه ذلك، ستقوم بتهيئة التطبيق باستخدام initializeApp وبعد ذلك ستقوم بإنشاء مثيل المصادقة باستخدام getAuth(FirebaseApp)من الشائع إعادة تسمية الثابت الخاص بالتطبيق إلى شيء مثل FirebaseApp لتمييزه بشكل أفضل.

وبهذا، يكون لديك الآن الجزء الأساسي جاهزاً. بحيث تكون بقية الملفات (على سبيل المثال، services.ts) يمكنه استيراد وإعادة استخدام نفس مثيل المصادقة وخدمات Firebase الأخرى.

أنشئ خدمات مصادقة باستخدام Firebase Auth

النمط المعماري الجيد هو قم بتضمين جميع استدعاءات Firebase Auth في ملف الخدماتعلى سبيل المثال src/firebase/services.tsهناك يمكنك تحديد وظائف محددة لكل حالة استخدام: تسجيل الدخول باستخدام جوجل، تسجيل الدخول باستخدام البريد الإلكتروني، التسجيل باستخدام البريد الإلكتروني، مراقبة حالة الجلسة وإغلاق الجلسة.

إلى الوصول عبر جوجل الإجراء المعتاد هو إنشاء نسخة من GoogleAuthProviderقم بتعريف دالة غير متزامنة تستخدم signInWithPopup(FirebaseAuth, googleProvider) وقم بتضمين المكالمة في كتلة try/catchإذا سارت الأمور على ما يرام، من الشيء user يمكنك استخراج بيانات مثل uid, displayName o photoURLعلى الرغم من أن العديد من الأوقات uid كمعرف فريد.

إلى المصادقة باستخدام بيانات الاعتماد (البريد الإلكتروني وكلمة المرور) سيكون لديك دالتان متطابقتان تقريبًا: إحداهما تستدعي createUserWithEmailAndPassword (التسجيل) وآخر يدعو إلى signInWithEmailAndPassword (تسجيل الدخول). كلاهما يستقبل كائنًا مع email y password وإرجاع uid (وإذا لزم الأمر، بقية خصائص المستخدم).

يسمح Firebase Auth أيضًا مراقبة حالة المستخدم مع الوظيفة onAuthStateChanged(FirebaseAuth, callback)من الممارسات الجيدة تغليف هذا الاستدعاء بخدمة تستقبل setSession أو رد اتصال مماثل، بحيث يمكنك من سياقك العام تحديث الحالة بمجرد أن يكتشف Firebase أن المستخدم قد قام بتسجيل الدخول (أو أن الجلسة قد تم إغلاقها).

وظيفة خروج عادةً ما يكون الأمر أبسط من كل شيء: ما عليك سوى الاتصال signOut(FirebaseAuth) وفي منطقك الخاص (عادةً AuthContext)، تقوم بتعيين الحالة إلى "غير مصادق عليه" ومسح أي معلومات مستخدم كنت تقوم بحفظها.

راقب الجلسة وقم بإعداد AuthContext باستخدام React

في تطبيق React معقد نوعًا ما، يكون ذلك مناسبًا مركزة معلومات المصادقة في سياق عالمي. وبالتالي، يمكن لأي مكون معرفة ما إذا كان المستخدم مصادقًا، وما هي بياناته uid وما هي إجراءات تسجيل الدخول/الخروج المتاحة، دون تمرير كل شيء كخصائص عبر الشجرة.

الفكرة هي إنشاء مجلد src/context وداخل ملف authContext.tsxفي هذا القسم، تُعرّف واجهةً تتضمن الخصائص التي سيكشف عنها سياقك: الحالة الحالية (status), userIdوالفعاليات العامة مثل handleLoginWithGoogle, handleLoginWithCredentials, handleRegisterWithCredentials y handleLogout.

إلى الحالة العالمية الأولية يُستخدم الكائن عادةً للإشارة إلى شيء مثل status: 'checking' y userId: null. القيمة checking هذا مفيد لمعرفة أن التطبيق يستعلم من Firebase لمعرفة ما إذا كان المستخدم قد سجل الدخول أم لا، حتى تتمكن من عرض مؤشر تحميل صغير على الشاشة.

في AuthProvider أنت تقوم بإعداد useState مع تلك الحالة الأولية و useEffect وهذا، في عملية العرض الأولى، يستدعي دالة الخدمة التي تغلف onAuthStateChangedمرر له setSessionستقوم هذه الوظيفة، عند اكتشاف Firebase للتغييرات، بتعيين الحالة إلى "مصادق عليه" مع userId المقابل أو "غير مصادق عليه" إذا لم تكن هناك جلسة.

إنه عملي للغاية قم بتعريف دالة مساعدة، على سبيل المثال validateAuth، أنه يتلقى userId يتم إرجاعها بواسطة وظائف تسجيل الدخول/التسجيل في Firebase. إذا كانت سلسلة نصية صالحة، يتم تحديث الحالة إلى "مصادق عليه"؛ وإذا كانت undefined أو إذا حدث شيء غير متوقع، يمكنك استدعاء وظيفة تسجيل الخروج الداخلية لمسح كل شيء.

الوظائف التي يوفرها السياق إنهم يتبعون نمطًا مشتركًا: أولًا يضعون الدولة في checkingثم يقومون باستدعاء خدمة Firebase المقابلة (تسجيل الدخول باستخدام Google، تسجيل الدخول باستخدام بيانات الاعتماد، التسجيل باستخدام بيانات الاعتماد)، فيحصلون على uid وأخيراً، يتصلون validateAuth بهذه القيمة. وبهذه الطريقة، يصبح التدفق بأكمله موحداً.

استخدم سياق المصادقة في المكونات

بمجرد تكوين AuthContext، فقد حان الوقت لدمجه مع النماذج والعرض الرئيسي. Register.tsx أنت مهم useContext و AuthContext، تقوم باستخراج الدالة handleRegisterWithCredentials وتسميه داخلك handleSubmitتمرير البريد الإلكتروني وكلمة المرور اللذين تم الحصول عليهما بواسطة useForm.

• En Login.tsx النهج مشابهيمكنك استخدام السياق للحصول على handleLoginWithCredentials y handleLoginWithGoogleيتم تنفيذ الأول عندما يرسل المستخدم النموذج، ويتم ربط الثاني بـ onClick من زر "تسجيل الدخول باستخدام جوجل".
• في المكون الرئيسي App.tsx أنت تستهلك السياق للقراءة status y userIdإذا كانت الدولة checkingيمكنك عرض رسالة بسيطة "جارٍ التحميل..." أو مؤشر تحميل. إذا كانت الحالة تشير إلى أن المستخدم مصادق عليه وموجود userId، أنت تُظهر نوعًا من HomePageوإلا، ستعرض صفحة المصادقة مع المكونات. Login y Register.

هذا فصل المكونات يتجسد ذلك عادة في شيء مثل مكونين داخليين في App.tsx: HomePage، حيث تُظهر userId وزر لتسجيل الخروج (والذي يستدعي handleLogout) ، و AuthPage، حيث تقوم بعرض نماذج تسجيل الدخول والتسجيل جنبًا إلى جنب أو في علامات تبويب.

بهذه الطريقة ستحصل على تجربة مستخدم واضحةلا يرى المستخدم سوى جزء المصادقة "العام" عندما لا يكون مسجلاً دخوله، ويتم تحويله تلقائيًا إلى الجزء "الخاص" عندما يؤكد Firebase صحة الجلسة. ويحافظ إعادة تحميل المتصفح على هذا السلوك بفضل مراقبة onAuthStateChanged.

دمج Firebase مع React Native و Expo باستخدام Firestore

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

El التدفق العام مع إكسبو سيكون شيئًا من هذا القبيل:

1. تثبيت expo-cli على الصعيد العالمي، تقوم بالتنفيذ expo init react-native-firebase.
2. اختر قالبًا أساسيًا (على سبيل المثال، "سير العمل المُدار - فارغ").
3. ابدأ المشروع بـ yarn ios o yarn androidيمكنك أيضًا تجربتها على هاتفك المحمول عن طريق مسح رمز الاستجابة السريعة (QR) الذي يعرضه خادم إكسبو.

إلى الاتصال بـ Firebase يمكنك تثبيت حزمة تطوير البرامج (SDK) باستخدام yarn add firebase وتقوم باستيراد وحدات مثل @firebase/auth y @firebase/firestoreتقوم بإنشاء ملف src/firebase/config.js، تقوم بتحديد كائن التكوين الخاص بك apiKey, authDomain, databaseURL, projectIdإلخ، وأنت تتصل firebase.initializeApp(config) فقط في حالة عدم وجود تطبيق مُهيأ مسبقًا.

بعد هياكل الشاشات في مجلد src/screensعلى سبيل المثال، مع المجلدات الفرعية LoginScreen, RegistrationScreen y HomeScreenسيكون لكل واحد منهم خاصته الخاصة *.js و styles.js بأنماط تعتمد على StyleSheet.create.

يمكنك حل مشكلة التنقل باستخدام رد فعل الملاحة، التثبيت @react-navigation/native, @react-navigation/stack والتبعيات الموصى بها في الوثائق (معالج الإيماءات، وإعادة التحريك، والشاشات، وسياق المنطقة الآمنة، والعرض المقنع). في App.js أنت تقوم بإعداد NavigationContainer وعلى Stack.Navigator هذا يدل على ذلك Home إذا كان هناك مستخدم مصادق عليه أو Login y Registration غير ذلك.

ال شاشات تسجيل الدخول والتسجيل تم بناؤها باستخدام مكونات أصلية (View, Text, TextInput, TouchableOpacityوإذا كنت ترغب في تحسين التجربة، يمكنك استخدام react-native-keyboard-aware-scroll-view لإدارة لوحة المفاتيح الافتراضية بشكل صحيح عندما يقوم المستخدم بالكتابة.

التسجيل وتسجيل الدخول باستخدام Firebase Auth في React Native

تسجيل المستخدم باستخدام البريد الإلكتروني وكلمة المرور في React Native، يتكرر نفس المنطق كما هو الحال في الويب: تتحقق من تطابق كلمات المرور، ثم تستدعي firebase.auth().createUserWithEmailAndPassword(email, password) وإذا نجحت العملية، فستحصل على uid للمستخدم الجديد.

بالإضافة إلى إنشاء الحساب في المصادقة من الشائع تخزين بيانات المستخدم الإضافية في Firestore، مثل الاسم الكامل والبريد الإلكتروني. وللقيام بذلك، يمكنك إنشاء مجموعة بيانات. users وبعد التسجيل، تقوم بشيء من هذا القبيل firebase.firestore().collection('users').doc(uid).set(data)حيث data يحتوي id, email y fullName، البرتغال ejemplo.

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

تسجيل الدخول باستخدام بيانات الاعتماد يعمل مع ملفات firebase.auth().signInWithEmailAndPassword(email, password)عندما يتم الوفاء بالوعد، تسترد ما وعدت به. uidراجع المجموعة users في متجر فايرستور مع .doc(uid).get() وإذا كان المستند موجودًا، فستسترجع بياناته وتنتقل إلى HomeScreen تمريرها كمعامل.

إذا لم يكن المستند موجودًا (على سبيل المثال، إذا حذفت المستخدم من Firestore ولكنه لا يزال مسجلاً دخوله إلى Auth)، يمكنك عرض رسالة مثل "المستخدم غير موجود" ومنع التطبيق من محاولة المتابعة ببيانات غير متناسقة. كما يتم رصد أي أخطاء في الشبكة أو التحقق من الصحة تلقائيًا. .catch(error => alert(error)).

استمرارية الجلسة وإمكانية الوصول للقراءة/الكتابة في Firestore

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

للقيام بذلك، استخدم firebase.auth().onAuthStateChanged في المكون الجذري (عادةً App.js). في useEffect في البداية، تشترك في رد اتصال يتلقاه المستخدم الحالي؛ وإلا nullتقوم بإجراء استعلام إلى Firestore للحصول على المستند الموجود في المجموعة users مع doc(user.uid)، تقوم بحفظ تلك البيانات في الحالة (setUser) والعلامات التجارية loading كما falseإذا لم يكن هناك مستخدم، فما عليك سوى إدخال loading a false ودع المكدس يظهر Login y Registration.

فيما يتعلق بـ Firestore، مثال نموذجي لديه مجموعة entities حيث يتم تخزين عناصر نصية صغيرة مرتبطة بكل مستخدم (مهام، منشورات، ملاحظات، إلخ). يمكن أن يحتوي كل مستند على حقول مثل: text, authorID y createdAt مع firebase.firestore.FieldValue.serverTimestamp().

في HomeScreen تحديد حالة محلية مع entityText (ما يكتبه المستخدم في TextInputومصفوفة entities لتقديم FlatListتقوم بإنشاء مرجع للمجموعة: const entityRef = firebase.firestore().collection('entities') وفي غضون useEffect اشترك في خدمة الاستماع مع onSnapshot.

تجمع هذه الخدمة بين الفلاتر والفرز.: entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc')استدعاء onSnapshot يسافر querySnapshot.forEach، يقوم بإنشاء مصفوفة newEntities مع المستندات والاتصال setEntities(newEntities)أي تغييرات تطرأ على المجموعة (إضافات، حذف، تعديلات) ستنعكس تلقائيًا في الواجهة.

لإضافة كيانات جديدة تقوم بتعريف دالة onAddButtonPress مما يثبت أن entityText إذا لم يكن فارغًا، فأنشئ الكائن. data مع text, authorID y createdAtوالمكالمات entityRef.add(data)بمجرد حل المشكلة، امسح حقل النص وأخفِ لوحة المفاتيح. شكرًا لمستمع onSnapshotيتم تحديث القائمة تلقائيًا دون الحاجة إلى إعادة تحميل أي شيء.

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