[MUSIC]
في التمرين السابق، قمنا بالفعل بتكوين
Firebase الخلفية كخدمة مع المشروع الجديد.
وقم أيضًا بإعداد الكثير من البيانات في قاعدة البيانات الخاصة بنا، ثم قم بإعداد وحدة التخزين الخاصة بنا
وتكوين خادم Firebase الخاص بنا ليكون بمثابة الواجهة الخلفية لتطبيق React الخاص بنا.
في هذا التمرين، سننظر إلى نسخة معدلة من تطبيق React الخاص بنا،
والذي يستخدم الواجهة الخلفية لـ Firebase كخدمة من أجل
الحصول على البيانات وكذلك تخزين المعلومات للمستخدمين على الخادم.
أيضًا، سنستفيد من دعم المصادقة الذي
يوفره Firebase لمصادقة المستخدمين.
كل من استخدام نهج البريد الإلكتروني وكلمة المرور، وأيضا استخدام حساب غوغل.
للبدء في هذا التمرين، انتقل إلى موقع مناسب على جهاز الكمبيوتر الخاص بك،
ثم استنساخ مستودع Git المعطى، لقد قدمت
لك إصدار Firebase من تطبيق React الخاص بنا.
لذلك اكتب بوابة استنساخ https://github.com/jmuppala/conFusion-Rea -
CT-firebase.Git.
ثم استنساخ مستودع Git.
وبمجرد استنساخ مستودع Git إلى جهاز الكمبيوتر الخاص بك، ثم الانتقال
إلى مجلد Confusion-React-FireBase الذي سيتم إنشاؤه في هذه المرحلة.
وبعد ذلك ستلاحظ أن مجموعة من الملفات مثبتة بالفعل هناك.
دعونا نمضي قدما والقيام بتثبيت الغزل لتثبيت جميع
وحدات العقدة التي يعتمد عليها هذا التطبيق الزاوي.
سيقوم هذا الإصدار أيضًا بتثبيت وحدات عقدة إضافية تسمى Firebase.
وسوف أشرح أكثر قليلا عن هذه الوحدات عقدة في وقت لاحق في هذا التمرين.
بمجرد اكتمال تثبيت المشروع، افتح المشروع في محرر.
ثم في المشروع، انتقل إلى المصدر> مجلد فيريباس
ثم افتح ملف config.js.
وفي ملف config.js، سترى مجموعة من تكوين فيريباس
التي تحتاج إلى إعدادها مع تكوين خادم فيريباس الخاص بك.
كما رأينا في التمرين السابق، يمكننا الحصول على كل هذه المعلومات عند
النقر على هذا الزر هنا يسمى إضافة Firebase إلى تطبيق الويب الخاص بك.
ثم قم بنسخ هذه المعلومات
ثم قم بلصق هذه المعلومات في ملف config.js الخاص بك.
لاستبدالها بتكوين خوادم Firebase المحددة
لكل هذه المعلومات.
وبمجرد الانتهاء من ذلك، يمكنك بدء تشغيل
تطبيق React الخاص بك عن طريق كتابة بداية الغزل في المطالبة.
بمجرد تجميع تطبيق React الخاص بك، وهكذا
هنا سترى الصفحة الرئيسية، الصفحة حول، كما نرى هنا.
والقائمة
وصفحة الاتصال
دعونا تسجيل الدخول أنفسنا،
اسمحوا لي أن أعود إلى الصفحة الرئيسية وبعد ذلك سنقوم بتسجيل الدخول أنفسنا.
لذلك عند النقر على زر تسجيل الدخول،
سترى النموذج النموذجي هنا مع البريد الإلكتروني ومعلومات كلمة المرور.
سترى أيضًا زر أولي هنا يسمى «تسجيل الدخول» باستخدام Google.
لذلك اسمحوا لي بتسجيل الدخول باستخدام حساب غوغل الخاص بي.
لذلك عند النقر على تسجيل الدخول مع غوغل، فإنه سيتم فتح
نافذة متصفح أخرى حيث سيطلب منك الإذن باستخدام حساب غوغل الخاص بك.
ثم سترى، في الزاوية اليمنى، سترى على الفور اسمك
يتم عرضه هنا، ومع زر تسجيل الدخول تحولت الآن إلى زر الخروج.
لذلك، في هذه المرحلة، يجب أن تكون قادرا على رؤية المفضلة لديك.
وفي هذه الحالة، بما أننا لا نملك أي مفضلة،
لذا ستكون فارغة في هذه المرحلة.
اسمحوا لي أن أعود إلى القائمة ومن ثم إضافة اثنين من العناصر إلى المفضلة.
لذلك سأضيف هذا الطبق إلى المفضلة، لذلك عندما أنقر على هذا الطبق،
سترى على الفور رمز تتحول إلى قلب مملوء.
واسمحوا لي أيضا اختيار طبق واحد آخر وإضافته إلى المفضلة.
الإعلان ثم الآن عندما تذهب إلى المفضلة, سترى اثنين
من الأطباق المضافة إلى المفضلة لديك, كما كنت تتوقع.
ومرة أخرى، يمكنك حذف الأطباق عن طريق النقر على
الصليب حذف لإزالة العنصر من قائمة المفضلة لديك، كما هو موضح هنا.
الآن يمكننا أيضا إضافة، كما تعلمون، يمكننا الذهاب إلى أي طبق
ومن ثم إضافة تعليقات حول هذا الطبق.
لذلك اسمحوا لي أن أضيف في تعليق هنا.
وفي اللحظة التي تقدم فيها التعليق، سترى على الفور أن
تعليقك سيتم عرضه هنا مع اسم المؤلف المدرج أيضًا هنا.
ومع ذلك التاريخ كما هو موضح هنا
لذلك، يمكنك أن ترى أن تقديم المستخدم من التعليقات
سيتم دعمه لأي طبق معين.
لذا، هذه هي الطريقة التي يعمل بها تطبيقك مع
Firebase مثل الواجهة الخلفية كخدمة.
الآن، بالطبع، يجب أن تتساءل، كيف يمكننا إعادة تصميم تطبيقنا
للاستفادة من Firebase بدلاً من استخدام
خادم Express MongoDB القياسي الذي قمنا ببنائه في وقت سابق؟
من أجل تكوين التطبيق الخاص بك للاتصال مع خادم فيريباس،
تحتاج إلى تثبيت وحدة فيريباس.
توفر الوحدة النمطية Firebase، كما ترى هنا، الأداة
والبنية التحتية التي تمكنك من الاتصال بخادم Firebase.
ولتثبيت هذا في التطبيق الخاص
بك، تكتب في تثبيت ناقص حفظ فيريباس.
الآن كيفية الاستفادة من هذه؟
وسوف أوضح أنه من خلال تشغيل بسرعة لك من خلال التعليمات البرمجية المعدلة
حيث نستخدم فيريباس لتعديل التطبيق الذي قمنا بتطويره في
وقت سابق للاستفادة من خادم فيريباس كما الخلفية كخدمة.
دعونا نأخذ جولة سريعة من خلال تطبيق React المعدل لدينا لفهم
كيفية إعادة تكوينه للتواصل مع خادم Firebase لدينا.
سنبدأ رحلتنا في ملف package.json.
وفي ملف package.json،
ستلاحظ أنني أضفت في وحدة Firebase npm في هذا.
وهكذا عند استنساخ مستودع Git والقيام بتثبيت الغزل،
يتم تثبيت وحدة Firebase تلقائيًا في التطبيق الخاص بك.
إذا كنت تقوم بتكوين تطبيق React جديد
للتواصل مع الخادم،
فأنت بحاجة إلى تثبيت وحدة Firebase بشكل صريح في التطبيق الخاص بك.
الآن بعد ذلك، ستلاحظ تغييرات في مجلد Firebase.
هنا رأينا بالفعل ملف التكوين.
الملف الآخر الذي ستلاحظه هنا يسمى firebase.js.
الآن هذا هو المكان الذي نقوم بتكوين تطبيقنا للتواصل مع
خادم Firebase.
لذلك نحن استيراد التكوين هنا.
ثم استيراد فيريباس من فيريباس.
ثم تقوم بتوليد التطبيق هنا عن طريق توفير التهيئة إلى firebase،
لذلك هذا هو المكان الذي تقوم فيه بتوفير جميع معلومات التكوين
بحيث يمكن للعميل التواصل مع خادم Firebase.
بالإضافة إلى ذلك، أقوم بتصدير عدد قليل من هذه الصادرات من
هنا تسمى المصادقة، fireauth وهلم جرا.
هذه سوف أستخدم في منشئي العمل من
أجل التواصل مع خادم Firebase الخاص بي.
الآن بعد ذلك، ستكون التعديلات الرئيسية في ملف ActionCreators.
الآن لم أضف في أي إجراءات جديدة، ولكن بدلاً من ذلك
يتم تعديل جميع الاتصالات مع الخادم الآن للتواصل مع خادم Firebase الخاص بنا.
لذلك بدلا من استخدام الجلب، كما فعلنا في وقت سابق،
ونحن الآن في طريقنا لاستخدام فايرستور.
كما ترون، لقد استوردت المصادقة، فايرستور،
فيريوث، و فيريباستور من وحدة فيريباس التي
قمت بإعدادها في وقت سابق في مجلد فيريباس.
ثم كل هذه ستمكنني من التواصل مع خادم Firebase الخاص بي. من
أجل جلب مجموعة من Firebase الخاص بي،
نقول ببساطة firestore.collection، ومن ثم توفير اسم المجموعة.
ثم يمكنك إضافة إلى المجموعة بالقول، إضافة، كما ترون هنا،
والذي يأخذ العنصر المحدد الذي تضيفه إلى مجموعتك هناك.
إذن هذه هي الوثيقة التي نضيفها إلى مجموعتنا.
لذلك هذا هو للتعليق آخر، كما ترون هنا.
وعندما تقوم بنشر ذلك، ستقوم بتزويدك مرة أخرى بـ DoCref،
وهو المرجع إلى المستند،
والذي يمكنك استخدامه بعد ذلك للذهاب وجلب المستند من الخادم الخاص بك.
الآن الطريقة التي يعمل بها Firebase هي أنه
سيوفر المعرف بشكل منفصل عن المحتويات الفعلية للمستندات.
لذلك يحتفظ Firebase بالمعرف وبيانات المستند نفسها بشكل منفصل.
لذلك هنا لا بد لي من الجمع بين الاثنين معا في
كائن جافا سكريبت هنا، ودعا التعليق هنا.
لذلك كما ترى من المستند، لذلك لاحظت أنه عندما أقوم
بإدراج عنصر في مجموعة، فإنه يقوم بإرجاع DoCref هنا.
ومن DoCref، يمكنني الحصول على هوية المستند.
وهكذا ما أفعله هنا هو أنني ذاهب
وجلب الوثيقة المقابلة هنا.
وبعد ذلك مرة واحدة يتم جلب الوثيقة، الآن، بطبيعة الحال، يجب أن تكون الوثيقة موجودة،
لذلك يجب أن يكون هذا صحيحا دائما، لأننا قد أدرجت للتو الوثيقة.
ولكن فقط من أجل الاكتمال، أقوم بفحص صريح لذلك.
وبعد ذلك يتم
الحصول على البيانات الموجودة في المستند بقول doc.data، كما ترون هنا.
ثم يتم الحصول على معرف المستند بواسطة doc.id،
لذا فإن هذين منفصلين.
ولكن ضمن شفرة React الخاصة بنا، قمنا دائمًا بتخزين المعرف
والبيانات معًا كمستند JSON واحد هنا، أو كائن JavaScript هنا.
لهذا السبب أنا الجمع بين الاثنين معا
في كائن جافا سكريبت واحد هنا من خلال القيام بذلك.
سترى لي مرارا وتكرارا القيام بذلك، على سبيل المثال،
للترقيات جريئة وهلم جرا، وأيضا في أكتيونكريتورس.
ثم بعد ذلك أقوم بإضافة التعليق إلى مخزن Redux الخاص بي هنا،
وما تبقى من الشفرة على هذا النحو.
وبالمثل، لجلب الأطباق،
سترى كيف نجلب العديد من الأطباق من Firebase.
لذلك نحن نرى أطباق firestore.collection الحصول على الأطباق والحصول عليها.
الآن عندما تحصل على ذلك، ثم سوف تعطيني قيمة
لقطة، وهي لقطة للحالة الراهنة لهذه المجموعة، ومن ذلك،
يجب أن أذهب واسترداد كل طبق.
وبعد ذلك أنا أعيد بناء مجموعة من الأطباق الخاصة بي هنا.
الآن لاحظ أنه، كما قلت، معرف والبيانات منفصلة، لذلك
أنا بحاجة إلى الجمع بينهما معا، لأن هذه هي الطريقة التي أستخدم بها البيانات في
تطبيق React الخاص بي، لذلك أنا دفع ذلك في مجموعة الأطباق.
ثم في النهاية إرجاع الأطباق التي سيتم بعد ذلك إدراجها في
متجر Redux الخاص بي هنا.
لذلك تم إجراء هذا النوع من التغييرات في ActionCreators.
الآن سيتم التعامل مع عملية تسجيل الدخول والخروج أسفل هنا.
لذلك بالنسبة لتسجيل الدخول، المصادقة التي قمنا باستيرادها من firebase،
المصادقة هي التي تسمح لي بإجراء تسجيل الدخول والخروج.
لذلك إذا كنت تقوم بتسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور،
فإنه يوفر مع هذه الطريقة تسمى SigninWitheMailandPassword.
ثم تقوم بتوفير البريد الإلكتروني وكلمة المرور كمعلمتين هنا.
وبعد ذلك سوف تمكنك من تسجيل الدخول.
وعند تسجيل الدخول، يوفر المصادقة هذا الكائن يسمى CurrentUser على المصادقة.
لذلك يمكنك الحصول على معلومات المستخدم عن طريق قول auth.currentUser هنا.
وأيضا أنا تخزين معلومات المستخدم في قاعدة البيانات الخاصة بي.
الآن أنا لا تتبع صراحة أي رمز
وأشياء من هذا القبيل لأن ذلك يتم تعقبها تلقائيا من قبل المصادقة بالنسبة لي،
والتي يتم توفيرها من قبل وحدة نم فيريباس.
لذلك أنا فقط الاستفادة من ذلك لتتبع الاستخدام الحالي.
إذا كان المستخدم الحالي فارغًا، فأنا أعلم أن عميلي
ليس لديه أي مستخدم قام بتسجيل الدخول إلى الخادم.
وبالمثل، لتسجيل الخروج من المستخدم أقول ببساطة Auth.Signout.
الآن مرة أخرى، وثائق كيفية الاستفادة من
وحدة Npm Filebase متوفرة في وثائق Firebase.
لذلك يمكنك بسهولة البحث عن ذلك لفهم كيفية الاستفادة من
Firebase للاستفادة من جميع
هذه الوظائف المختلفة المتوفرة من وحدة Firebase npm.
أيضا، للمفضلات، ونحن إما نشر المفضلة، وهكذا
تحتاج إلى نشر العناصر، لذلك كنت أقول إضافة،
وعندما كنت في حاجة للحصول على عنصر، وسوف أقول الحصول على.
ويمكنك حتى الحصول على عنصر من مستند معين في المجموعات.
إذا كنت تريد مستند معين في المجموعة، فستقول .doc.
ومن ثم تقوم بتزويد معرف المستند هنا.
لذلك هذه هي الطريقة التي يمكنك الحصول على وثيقة محددة.
أيضا حذف المفضلة، وجلب المفضلة وهلم جرا.
الآن من أجل تخزين المفضلة في Firebase،
يتم تخزين المفضلة كمعرف المستخدم ومعرف الطبق هنا.
الآن فايرستور نفسها ليس لديها أي طريقة لملء
معلومات الطبق في معرف الطبق.
لذلك أنا مجرد جلب جميع المعلومات طبق،
لذلك هذا هو كل المفضلة هو زوج، المستخدم وطبق معرف الزوج.
لذلك أنا فقط جلب ذلك إلى المفضلة لدي هنا.
ولكن هذا يعني أيضًا أنني بحاجة إلى تعديل مكون المفضلة الخاص بي حتى
يتمكن من استخدام معرف الطبق ثم فهرسة الأطباق
المخزنة في متجر Redux الخاص بي، والحصول على معلومات الطبق.
أو سيكون البديل هو الذهاب إلى الخادم ثم جلب المعلومات.
ولكن بما أن لدي بالفعل البيانات حول الأطباق في متجر Redux الخاص بي،
لأنني قد فعلت بالفعل أطباق جلب لجلب جميع المعلومات
حول الأطباق.
أنا فقط ذاهب مباشرة إلى كائن الأطباق في بلدي ريدوس مزق
وجلب هذه المعلومات.
لذلك هذا يعني أيضا أن هناك تعديلات على المكون الرئيسي.
في المكون الرئيسي، ستلاحظ أنه عندما أفعل المفضلة هنا
لتفاصيل الطبق، سيكون لدي ببساطة لمقارنة الطبق إلى ذلك DisHid.
وبالتالي فإن الطبق هنا في المفضلة هو ديسد نفسه، لذلك
أنا فقط بحاجة إلى القيام المقارنة.
لذلك سيكون هناك تغيير طفيف على هذا الخط في ديشيد.
وأيضا ستلاحظ أنه عندما أدعو المفضلة،
بالإضافة إلى توريد المفضلة لديهم،
وأنا أيضا توريد الأطباق باعتبارها واحدة من الدعائم لبلدي المفضلة.
لذلك هذا هو تغيير آخر ستلاحظه في المكون الرئيسي.
وبالمثل، في المكون المفضل،
ستلاحظ أنه داخل المكون المفضل أسفل هنا،
ستلاحظ أنه عندما أقوم بتقديم المكون المفضل.
ثم، هنا في هذه الوظيفة هنا، المفضلة كونست،
ما أفعله هو أنني ذاهب إلى الأطباق المفضلة،
والأطباق هي مجموعة من جميع ديشيدس هنا، لذلك أنا خريطة من خلال ذلك.
لذا انظر إلى كل DisHid، ثم من الأطباق،
قمت بتصفية هذا الطبق الخاص.
ثم حصلت على DisHid، لذلك
هنا سترى لي باستخدام مرشح مصفوفة JavaScript هنا.
فإنه سيتم تصفية تلك المعلومات طبق محددة ومن
ثم تقديم هذا الطبق معين.
لذلك هذا هو العمل الإضافي الذي أحتاج إلى القيام به
في المكون المفضل لدي من أجل تقديم كل من الأطباق هناك.
لذلك، مثل هذا النوع من التعديلات الطفيفة ستلاحظ في اثنين من المكونات،
وتحديدا تفاصيل الطبق، والمفضل والمكون الرئيسي.
هذا هو المكان الذي تم فيه إجراء بعض التغييرات الطفيفة من أجل تسهيل
تطبيق React لتكون قادرة على الاستفادة من خادم Firebase.
لذلك هذا هو استعراض سريع لكيفية
تعديل تطبيق React الخاص بي للتواصل مع خادم Firebase الخاص بي.
الآن، كما هو الحال مع Angularfire، كان لدينا Angularfire أيضًا
، والذي كان يوفر لنا طريقة للاستفادة مع Firebase للتواصل مع الخادم.
رد فعل ليس لديها أي مثل هذا النظير، لذلك أنا مباشرة باستخدام
وحدة نم فيريباس التي توفر القاعدة الأساسية للوصول إلى خادم فيريباس.
ثم الاستفادة من الوظائف التي يوفرها للتواصل مع
خادم Firebase الخاص بي.
قضاء بعض الوقت مرة أخرى في الذهاب من خلال هذا الرمز لفهم كيفية
الاستفادة من وحدات Firebase npm من أجل التواصل
مع خادم Firebase الذي قمت بإعداده في التمرين السابق.
مع هذا، لقد أعطيتك لمحة سريعة عن كيفية إعداد
تطبيق React الخاص بك للتفاعل مع Firebase الخلفية كخدمة، ومن
ثم تكون قادرة على دعم العمليات المختلفة لديك داخل التطبيق الخاص بك.
الآن، مع هذا، أكملت هذا التمرين الخاص حيث
أوضحت في هذا الدرس حول النهاية الخلفية كخدمة
وأظهرت أيضًا Firebase كمثال على الواجهة الخلفية كخدمة.
[ موسيقى]