كيفية بناء تطبيق React Native باستخدام Firebase. (الجزء 2)

تم تحديثه في 25 أكتوبر: تم التبديل من استخدام "عمليات الاسترجاعات" إلى "الوعود" - (تم تغيير بنية المجلد ، وحذف ملف api.js ، وتحديث Actions.js و reduer.js)

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

في الجزء 1 ، سجلنا تطبيقنا في Firebase و Facebook ، وقمنا أيضًا بإنشاء تطبيقنا وتثبيت التبعيات المطلوبة. في هذا البرنامج التعليمي ، سننشئ دليل التطبيق وإجراءات إعادة التشغيل ومخفضات السرعة و api.

الآن ، بعد أن خرجنا عن هذا الطريق ، دعنا نبدأ الشفرة!

الخطوة 3: إنشاء بنية المجلد

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

قم بإعداد مجلد التطبيق مع المجلدات والملفات تمامًا مثل الصورة أدناه.

قبل المتابعة ، نحتاج إلى تحديث ملف الفهرس في وحدات المصادقة والمنزل الخاصة بنا.

قم بتحديث كل من ملفات الفهرس بالرمز أدناه.

الخطوة 4: الإعداد

في هذه الخطوة ، سننشئ العظم الخلفي لتطبيقنا

ترتيب
في مجلد التهيئة ، قم بإنشاء ملف constants.js وقم بملئه بمعلومات تهيئة تطبيق Firebase ومعرف تطبيق Facebook الخاص بك.

Firebase
في مجلد التطبيق / config ، قم بإنشاء ملف firebase.js. في هذا الملف ، سنقوم بإنشاء قاعدة منفرد لـ firebase من خلال إنشاء مثيل لـ Firebase SDK وتكوينه باستخدام معلومات تهيئة التطبيق firebase لدينا حتى نتمكن من استيراده من أي مكان في تطبيقنا.

المخفض
المخفضون هم المسؤولون عن تحديث حالة التطبيق لدينا. في مجلد الإرجاع ، قم بإنشاء ملف rootReducer.js. في هذا الملف ، سنستورد المخفضات من وحداتنا ونستخدم وظيفة redux combineReducers لدمجها معًا في كائن حالة واحدة سنستخدمه لاحقًا لإنشاء متجر redux.

متجر
في مجلد الإرجاع ، قم بإنشاء ملف store.js. في هذا الملف ، سننشئ متجرنا المسترجع عن طريق استيراد أداة تخفيض الجذر الخاصة بنا وحقن معززات متجرنا ، مثل Redux Thunk.

الخطوة 5: الخلفية (الإجراءات والمخفض)

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

في مجلد وحدة المصادقة ، قم بتحديث ملف action.js. كل وظيفة في ملف الإجراءات لدينا هي المسؤولة عن استدعاء وظيفة API Firebase المناسبة وتنفيذ الإجراء الصحيح بناءً على الاستجابة التي يتم إرجاعها.

تأخذ وظيفة السجل في بيانات المستخدمين ووظيفة رد الاتصال كمعلمة ، فهي تستخرج كلمة مرور البريد الإلكتروني واسم المستخدم من كائن البيانات وتدعو Firebase createUserWithEmailAndPassword لإنشاء مستخدم جديد. إذا نجحت ، يتم تمرير اسم المستخدم والمعرف الخاص بالمستخدم الذي تم إنشاؤه حديثًا إلى دالة createUser لإنشاء كائن المستخدم في قاعدة بيانات Realtime.

تشبه وظيفة تسجيل الدخول وظيفة التسجيل ولكنها تستدعي Firebase signInWithEmailAndPassword وظيفة لتسجيل دخول المستخدم. إذا نجحت ، يتم إرجاع كائن المستخدم. ثم يتم تمرير كائن المستخدم إلى وظيفة getUser من أجل استرداد كائن المستخدم من قاعدة بيانات Realtime.

المخفض
في مجلد وحدة المصادقة ، قم بتحديث ملف reduer.js. سيستجيب المخفض الخاص بنا لنوعين مختلفين من الإجراءات ، LOGIN_SUCCESS و LOGGED_OUT. يعود الأمر إلى المخفض لتحديد ما إذا كان يحتاج إلى تعديل حالة التطبيق أم لا بناءً على نوع الإجراء.

LOGGED_IN
بالنسبة لنوع الإجراء هذا ، يقوم المخفض بتعيين متغير الحالة isLoggedIn إلى true ، ويقوم بتعيين متغير حالة المستخدم ويخزن كائن المستخدم في AsyncStorage.

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

في الجزء 3 ، سننشئ مشاهدنا ونضخ متجر Redux في التطبيق.

هذا كل ما لدي أيها الناس!

الدروس ذات الصلة

  1. البرنامج التعليمي 1: React Native Redux Boilerplate
  2. البرنامج التعليمي 2: رد رد الأصلية مع عمليات CRUD
  3. كيفية بناء تطبيق React Native باستخدام Firebase. (الجزء 1) (الإعداد)
  4. كيفية بناء تطبيق React Native باستخدام Firebase. (الجزء 3) (الواجهة الأمامية)
  5. كيفية بناء تطبيق React Native باستخدام Firebase. (الجزء 4) (تسجيل الدخول إلى Facebook)
  6. كيفية بناء تطبيق React Native باستخدام Firebase. (الجزء 5) (CRUD)

دروس أخرى

  1. البرنامج التعليمي 4: كيفية إنشاء واجهة برمجة تطبيقات لمصادقة تطبيقات الهواتف المحمولة من Laravel 5.4 JWT
  2. البرنامج التعليمي 5: كيفية إنشاء واجهة برمجة تطبيقات لمصادقة Laravel 5.4 JWT مع التحقق من البريد الإلكتروني
  3. البرنامج التعليمي 6 و 7: كيفية إنشاء وحدة إدارة Laravel 5.4 باستخدام أذونات تستند إلى الأدوار باستخدام حزمة Entrust

تغيير السجل

  1. 25 أكتوبر: تم التبديل من استخدام "عمليات الاسترجاعات" إلى "الوعود" - (تم تغيير بنية المجلد ، وحذف ملف api.js ، وتم تحديث Actions.js و reduer.js)
  2. 11 مايو: أضيفت الخطوة 5 (CRUD)
  3. 9 مايو: تم تحديث وظائف "createUserWithEmailAndPassword" و "تسجيل الدخول" في ملف api.js. (يعمل هذا على إصلاح تغيير فاصل Firebase 5.0 واستدعاء وظيفة createUser فورًا بدلاً من إعادة التوجيه إلى عرض CompleteProfile)