في التمرين السابق،
قمنا بالفعل بتكوين الواجهة الخلفية Firebase
كخدمة مع المشروع الجديد، كما قمنا بإعداد الكثير من
البيانات في قاعدة البيانات الخاصة بنا ثم قم بإعداد وحدة التخزين الخاصة بنا
وتكوين خادم Firebase الخاص بنا ليكون بمثابة الواجهة الخلفية لتطبيق Angular الخاص بنا.
في هذا التمرين، سننظر إلى نسخة معدلة من
تطبيقنا Angular الذي يستخدم الواجهة الخلفية Firebase
كخدمة من أجل الحصول على البيانات
وكذلك تخزين المعلومات للمستخدمين على الخوادم.
أيضًا، سنستفيد من
دعم المصادقة الذي يوفره Firebase لمصادقة المستخدمين
باستخدام نهج البريد الإلكتروني وكلمة المرور وكذلك باستخدام حساب Google.
للبدء في هذا التمرين،
انتقل إلى موقع مناسب على جهاز الكمبيوتر الخاص بك
ثم استنساخ مستودع Git المحدد حيث
قدمت لك إصدار Angular Firebase من تطبيقنا Angular.
لذا اكتب، git clone
https://github.com/jmuppala/confusion-Angular6-Firebase.git
ثم استنساخ
مستودع Git وبمجرد استنساخ مستودع Git إلى جهاز الكمبيوتر الخاص بك،
ثم الانتقال إلى
مجلد Angular Firebase الذي سيتم إنشاؤه في هذه المرحلة
ثم لاحظ أن مجموعة من الملفات مثبتة بالفعل هناك.
دعونا نمضي قدما ونقوم بتثبيت npm لتثبيت
جميع وحدات العقدة التي يعتمد عليها هذا التطبيق Angular.
سيقوم هذا الإصدار أيضًا بتثبيت
وحدتي عقدة إضافيتين تسمى Firebase ثم Angular fire اثنين.
وسوف أشرح أكثر قليلا عن هذه الوحدات عقدة اثنين في وقت لاحق في هذا التمرين.
بمجرد اكتمال تثبيت المشروع،
افتح المشروع في محرر ثم في المشروع،
انتقل إلى مجلد البيئات المصدر
ثم افتح ملف.ts invironment.ts وفي ملف البيئة،
سترى مجموعة من تكوين Firebase التي
تحتاج إلى إعدادها باستخدام تكوين خادم فيريباس الخاصة.
كما رأينا في التمرين السابق،
يمكننا الحصول على كل هذه المعلومات عند النقر على
هذا الزر هنا
المسمى «إضافة Firebase إلى تطبيق الويب الخاص بك» ثم نسخ هذه المعلومات ثم لصق
هذه المعلومات في ملف البيئة الخاص بك لاستبدالها مع تكوين خوادم Firebase
لكل هذه المعلومات وبمجرد الانتهاء منها،
يمكنك بدء تشغيل تطبيق Angular الخاص بك عن طريق كتابة «ng service» في المطالبة.
بمجرد تجميع تطبيق Angular الخاص بك باستخدام «ng
serve»، انتقل إلى متصفح ثم اكتب localhost: 4200 للتحميل في
تطبيق Angular الخاص بك وستلاحظ أن تطبيق Angular الخاص بك يتم تجميعه
ثم تحميله في متصفحك تمامًا كما كان من قبل.
لذا، بمجرد تشغيل تطبيق Angular الخاص بك وتشغيله،
ستلاحظ أن هذا الإصدار من تطبيق Angular سيستفيد من
خادم Firebase
الذي قمت بإعداده في التمرين السابق، وهكذا سترى صفحة «Home»، صفحة
«About» كما نرى هنا و
« القائمة» وصفحة «الاتصال» ومن الواضح بما أننا لم يتم تسجيل الدخول حاليًا،
فإن صفحة «المفضلة» تعرض خطأ يقول أنه لم يتم تسجيل دخول أي مستخدم.
لذلك، دعونا تسجيل الدخول أنفسنا.
اسمحوا لي أن أعود إلى «الصفحة الرئيسية» وبعد ذلك سنقوم بتسجيل الدخول أنفسنا.
لذلك، عند النقر على زر تسجيل الدخول،
سترى النموذج النموذجي هنا مع البريد الإلكتروني ومعلومات كلمة المرور.
سترى أيضا زر إضافي هنا يسمى «تسجيل الدخول مع جوجل».
لذلك اسمحوا لي بتسجيل الدخول باستخدام حسابي في Google.
لذلك، عند النقر على «تسجيل الدخول باستخدام Google»،
فسيتم فتح نافذة متصفح أخرى حيث سيطلب منك
التفويض باستخدام حساب Google الخاص بك بواسطة خادم Firebase هذا.
لذلك، اسمحوا لي أن المضي قدما والتصريح
بهذا التطبيق وبعد ذلك بمجرد الانتهاء من التفويض،
ثم سترى أن
تطبيق Angular القائم على Firebase الخاص بك
سوف تبدأ وعلى الزاوية اليمنى، سترى على الفور اسمك يتم
عرضه هنا ومع «تسجيل الدخول» تحولت الآن إلى زر «تسجيل الخروج».
لذلك، في هذه المرحلة،
يجب أن تكون قادرا على رؤية المفضلة لديك
وفي هذه الحالة بما أننا ليس لدينا أي المفضلة،
لذلك سوف تكون فارغة في هذه المرحلة.
اسمحوا لي أن أعود إلى «القائمة» ثم إضافة اثنين من العناصر إلى «المفضلة».
لذلك، سأضيف هذا الطبق إلى المفضلة.
لذلك، عندما أنقر على هذا الطبق،
سترى على الفور رمز تتحول إلى قلب مملوء واسمحوا لي أيضا اختيار
طبق واحد آخر
وإضافته إلى «المفضلة» ثم الآن عندما تذهب إلى «المفضلة»،
سترى اثنين من الأطباق المضافة إلى
المفضلة لديك كما تفعل نتوقع ومرة أخرى،
يمكنك حذف الأطباق عن طريق النقر على «حذف» تبديل هنا ثم انقر
على الصليب لإزالة العنصر من قائمة المفضلة الخاصة بك كما هو موضح هنا.
الآن، يمكننا أيضا إضافة كما أدركت،
يمكننا الذهاب إلى أي طبق ومن ثم إضافة تعليقات حول هذا الطبق.
لذلك، اسمحوا لي أن أضيف في تعليق
هنا لحظة تقديم التعليق،
سترى على الفور أن التعليقات الخاصة بك سيتم عرضها هنا مع
اسم المؤلف تعليق المدرجة أيضا في هنا ومع التاريخ كما هو موضح هنا.
لذلك، يمكنك أن ترى أن تقديم المستخدم
من التعليقات سيتم دعمه لأي طبق معين.
اسمحوا لي أن أضيف في واحد أكثر المفضلة وحتى هذا المستخدم سوف يكون اثنين من المفضلة.
اسمحوا لي «تسجيل الخروج» هذا المستخدم.
ارجع إلى «الصفحة الرئيسية» ثم «تسجيل الخروج» هذا المستخدم.
الآن سنقوم بتسجيل الدخول باستخدام حساب آخر.
لذلك، أود أن أقوم بإعداد
حساب كلمة مرور البريد الإلكتروني هذا
في وقت سابق، وهكذا سنقوم بتسجيل الدخول كمستخدم آخر وبمجرد تسجيل دخول المستخدم الآخر،
اسمحوا لي مرة أخرى انتقل إلى «القائمة» وإضافة بضعة عناصر إلى
المفضلة لهذا المستخدم معين
وذلك عندما تعود إلى «المفضلة»،
سترى هذه العناصر المدرجة للمستخدم الثاني.
الآن، وبالمثل بالنسبة لهذا المستخدم،
اسمحوا لي مرة أخرى تقديم تعليق آخر من قبل هذا المستخدم.
ذلك-
وسترى أن التعليقات المقدمة من قبل المستخدم الثاني تضاف أيضا في التطبيق.
لذا، هذه هي الطريقة التي يعمل بها تطبيق Angular الخاص بك
مع Firebase كخلفية كخدمة.
الآن بالطبع يجب أن تتساءل،
كيف نقوم بإعادة تصميم تطبيق Angular الخاص بنا للاستفادة من Firebase بدلاً
من استخدام خادم Standard Express بالإضافة إلى MongoDB الذي قمنا ببنائه في وقت سابق؟
من أجل تكوين تطبيق Angular الخاص بك للتواصل مع خادم Firebase،
هناك نوعان من وحدات العقدة التي تحتاج إلى تثبيتها في
تطبيق Angular الخاص بك واحد منهم هو وحدة Firebase.
توفر وحدة Firebase كما ترى هنا الأدوات والبنية التحتية التي تمكنك من التواصل
مع خادم Firebase وتثبيت هذا في التطبيق الخاص بك،
تكتب، تثبيت npm ناقص حفظ Firebase.
الآن جنبا إلى جنب مع هذا،
هناك وحدة أخرى تسمى النار الزاوي 2.
وبالتالي فإن النار الزاوي 2.
أيضا، مرة أخرى لقد قدمت وصلات لهاتين الوحدتين في الموارد الإضافية.
AngularFire 2 هي المكتبة الرسمية
لدعم Firebase و Angular وكما ترون،
فهو دعم قائم على الملاحظة لملفات Angular.
لذا، يعمل هذا على الإضافة إلى وحدة Firebase npm ثم
يمنحك واجهة قائمة يمكن ملاحظتها يمكننا استخدامها في تطبيق Angular الخاص بك.
لذلك، سنكون الاستفادة من AngularFire 2.
لذلك، للاستفادة من AngularFire2،
تحتاج إلى تثبيت كل من فيريباس وكذلك أنغولارفير 2.
لذلك، في لقطة واحدة،
قم بتثبيت كل من هذه في تطبيق Angular الخاص بك.
الآن، يقوم إصدار تطبيق Angular الذي قدمته لك تلقائيًا
بتثبيت كل منهما كما سترى عند فحص ملف package.json.
الآن، كيفية الاستفادة من هذين،
وسوف أوضح أنه من خلال تشغيل بسرعة لك من خلال
التعليمات البرمجية المعدلة للخدمات واثنين من المكونات حيث
نستخدم فيريباس و AngularFire2
لتعديل التطبيق الزاوي الذي قمنا بتطويره في
وقت سابق للاستفادة من خادم فيريباس كما الخلفية كخدمة.
من أجل فهم المزيد حول كيفية
الاستفادة من فيريباس و أنغولارفير 2 داخل التطبيق الزاوي
لدينا، أول محطة لدينا هي في ملف package.json.
حتى في ملف package.json،
ستلاحظ أنني قمت بتثبيت AngularFire2 هنا وأيضا قمنا بتثبيت
Firebase لاستخدامها في هذا الإصدار من تطبيق Angular الذي أقوم بتوفيره لك.
لذا، لاحظ أنه سيتم تثبيت هذين الاثنين تلقائيًا عند كتابة «npm
install» بعد استنساخ مستودع git هذا الذي قدمته لك.
إذا كنت تبدأ بتطبيق Angular جديد،
فيجب عليك تثبيت كل من AngularFire 2 بالإضافة إلى Firebase
من أجل الاستفادة من استخدام Firebase كواجهة خلفية كخدمة.
الآن بعد تثبيت هذين الاثنين،
دعونا نتعلم كيف نستفيد من هذه ضمن خدماتنا.
لذا، فإن أفضل طريقة لتعلم كيفية الاستفادة من كل من
هذه هي زيارة بعض الخدمات التي قمنا
بتكوينها في تطبيقنا وفهم كيفية
الاستفادة من استخدام AngularFire2 و Firebase.
لذلك، سنبدأ مع ملف dish.service.ts.
لذا، إذا ذهبت إلى ملف dish.service.ts،
ستلاحظ أنه هنا،
في خدمة الطبق هذه،
سترى لي استيراد هذا AngularFireStore، AngularFireStoreDocument،
و AngularFirestoreCollection من AngularFire إلى Firestore هنا.
لذا، فإن ذلك يجلب كل ما أحتاجه من وحدة AngularFireStore npm الخاصة بي،
ستلاحظ أيضًا أنني أستورد كل شيء من
FireBase/App كما Firebase إلى خدمة الطبق الخاصة بي هنا.
لذلك، بمجرد أن نستورد هذين الاثنين،
دعونا نلقي نظرة سريعة على كيفية إعادة تكوين خدمة الطبق لدينا هنا.
لذلك، إذا ذهبت إلى خدمة الطبق،
ستلاحظ أنني لم أعد أستخدم عميل HTTP.
بدلا من ذلك، أنا حقن أفس الذي هو أنغولارفيستور في منشئ هنا.
و AngularFireStore هو الذي يعطيني
الوصول إلى الواجهة الخلفية فيريباس كخدمة.
الآن، تذكر أيضًا أننا قمنا بالفعل بتكوين جميع تفاصيل
الخادم الخاص بنا وكذلك مشروع filestore في ملف environment.ts في وقت سابق.
لذا، يجب أن
تكون قد قمت بتكوين هذه المعلومات بالفعل حول كيفية استفادة تطبيق Angular
الخاص بك من مشروع Firestore المستند إلى
خادم Firestore الخاص بك للوصول إلى البيانات التي قمت بتكوينها هناك.
لذا، سيعطيني هذا الوصول إلى سحابة
Firestore الخاصة بي داخل مشروع Firebase الذي قمت بإعداده.
الآن، أوثسرفيس هو بالطبع نفس أوثسيرفيس التي
استخدمناها من قبل، ولكن تم تعديلها للاستفادة من دعم الزاوي لفيريباس.
سنقوم بزيارة AuthService لمعرفة كيفية تحديثه.
الآن، سوف أوثسرفيس تعطينا الوصول إلى
هذه الطريقة تسمى جيتاوثستات والتي سوف تعود في ملحوظ.
هذا يمكن ملاحظته، عندما نشترك في ذلك،
سوف تعطينا المعلومات كمستخدم الذي يحتوي على معلومات المستخدم.
لذلك، سأحصل على ذلك ثم قم بإعداد CurrentUser في طلبي
كمستخدم تم إرجاعه بواسطة هذا الملاحظة هنا.
لذلك، عندما نزور
أوثسيرفيس، سوف نتعلم ما سيعود هذا جيتاوثستات بالنسبة
لنا وبالتالي
يمكن الحصول على معلومات كيرنتوسر من أي من
الخدمات الأخرى لأننا بالفعل حقن أوثسرفيس في هنا.
الآن، دعونا نلقي نظرة على كيفية تنفيذ طريقة getDuses هنا.
الآن، في وقت سابق في طريقة getDuses،
كنا نستخدم عميل HTTP للوصول إلى الخادم في URL الأساسي +/الأطباق.
الآن في هذه الحالة،
للوصول إلى مجموعة في خادم Firebase الخاص بي، سنقول هذا.afs.
لذلك، هذا هو ما يوفر AngularFire2 بالنسبة لنا.
AFS كما ترون هو AngularFireStore التي قمنا بحقنها هنا وهكذا نقول
هذا.afs.collection وهنا سوف نحدد المجموعة المحددة التي نصل إليها هنا.
أذكر أننا قمنا بإعداد الأطباق، والترقيات،
ومجموعات القادة على خادم Firebase الخاص بي.
لذلك، وهذا يعطيني مباشرة الوصول
إلى مجموعة الأطباق الخاصة بي هنا ومن مجموعة الأطباق،
ويمكنني إما أن تفعل. ValueChanges التي
ستعيد جميع المعلومات في مجموعة الأعمال بالنسبة لي،
أو يمكنني أن أفعل. SnapshotChanges التي
ستعود معلومات إضافية بما في ذلك معرف من الأطباق.
لذا، إذا بدلاً من القيام بـ
SnapshotChanges، إذا قلت ValueChanges،
فستعود فقط إلى معلومات الطبق ولكنها لن تعيد
معرفات الأطباق ولكن بما أنني سأحتاج إلى معرفات أطباقي،
لذلك هذا هو السبب في أنني أستخدم.SnapshotChanges في هذه الحالة.
لذا، عندما يتم استدعاء.SnapshotChanges،
سيعود هذا كما ترى ملاحظته
والتي أقوم بتعيينها وبالتالي فإن قيمة الإرجاع التي تسمى كإجراءات وهذه الإجراءات
، مرة أخرى، ستكون قابلة للملاحظة والتي سأقوم بتعيين كل إجراء في
هذه الإجراءات ثم استخراج البيانات من الإجراء الذي هو عاد إلى هنا.
وبالتالي فإن الإجراء هو القيمة التي يتم إرجاعها من لكل من الإجراءات
وهذا الإجراء يحتوي على حمولة ويحتوي داخل ذلك حقل مظلم هنا.
الآن، هذا شيء قد برزت من خلال قراءة
وثائق AngularFire2
وهكذا عندما نسمي وظيفة البيانات هذه على هذا الإجراء .payload.doc،
وهذا سيعطيني البيانات.
البيانات الخاصة بهذا الطبق المحدد التي يتم
الحصول عليها من مجموعة الأطباق الخاصة بي على جانب الخادم.
لذلك سيتم إرجاع كل وثيقة في هناك هنا
ثم أحصل على معرف لذلك عن طريق قول action.payload.doc.id
لذلك هذا هو المكان الذي سيتم
حمل معرف ذلك وبعد ذلك سوف انضم إلى الاثنين معا وإرجاع
هذا كوثيقة طبق مرة أخرى إلى مكوناتي المختلفة من هناك،
وسوف استدعاء هذا الأسلوب getDuses.
لذلك، كما تذكر،
من مكون القائمة،
وأنا استدعاء طريقة جيتدايوسيس من أجل الحصول
على معلومات حول جميع الأطباق في مجموعتي.
جمع. لذلك، سيتم إعادة بناء كل من هذه الأطباق التي يتم إرجاعها كمستند في
كائن جافا سكريبت مع معرف إدراجها هنا وأيضا
البيانات التي يتم استخراجها من هذا الإجراء payload.doc.data.
الآن هذا هو الشيء الذي تتعلم من خلال قراءة وثائق AngularFire2.
الآن، بما أنني قد فعلت هذا الجزء بالفعل،
فأنا أعرض لك الشفرة الدقيقة التي من المفترض أن
تستخدمها لاستخراج البيانات ثم تقديم
هذه البيانات مرة أخرى إلى المكون الخاص بك الذي سيقوم باستدعاء طريقة getDubishes هنا.
لذلك، من خلال القيام بذلك لكل واحد من الوثائق هناك،
سيتم إعادة بناء هذه الوثيقة إلى
كائن الطبق الذي
نستخدمه في تطبيق Angular الخاص بنا، وبالتالي نحن قادرون على الوصول إلى المعرف.
إذا قمت فقط بإجراء تغييرات في القيمة،
فستعيد ببساطة جميع المستندات نفسها ولكن بدون معرفات المستندات.
لذلك، يجب القيام بهذا العمل الإضافي داخل خدمتك من أجل
إرجاع المعلومات بالطريقة الصحيحة
بحيث يمكن لـ MyComponents الاستفادة من هذه المعلومات.
وبالمثل، لطريقة getDish،
لذلك لاحظ كيف يمكنني الوصول إلى المعلومات لطبق معين.
مرة أخرى، سنقول هذا.afs ثم ستلاحظ أن أنا
saying.doc ثم هنا لطريقة the.doc،
وأنا توريد أطباق مائلة ثم معرف طبق معين.
الآن، والسبب في أنني قدمت معرف،
والمعرف هنا يأتي كمعلمة لطريقة getDish هنا.
الآن، من أجل توفير هذا المعرّف،
أحتاج إلى أن أكون قادرًا على توفير هذا المعرّف في
طريقة getDusies حتى عندما يتم إنشاء القائمة الخاصة بي،
سيكون لكل طبق معرّف مرتبط به هناك.
يتم تمرير هذا المعرف هنا ولذا فإنني سوف الوصول إلى المستند في هذه المرحلة.
لذلك، يسمح لك AngularFire2 بالوصول إلى
مستند معين داخل مجموعة من خلال قول شرطة مائلة لاسم المجموعة،
بالإضافة إلى معرف المستند أو يمكنك أن تقول هذا.afs.collection أطباق تماما كما سمعت،
وجمع الأطباق و then.doc ومن ثم توفير المستند والمعرف داخل الأقواس هناك.
لذلك، هذه طريقة أخرى لمعالجة طبق معين.
مرة أخرى، أشترك في SnapshotChanges وهذا سيعود إلى إجراء يتم
تعيينه مرة أخرى بنفس التنسيق
لإنشاء كائن الطبق هنا مع المعرف هنا.
الآن، يحتفظ Firebase بالمعرف منفصلاً عن المستند
نفسه ولهذا السبب يجب علي القيام
بإعادة البناء هذه بشكل صريح من أجل الحصول على
مستند الطبق بطريقة قابلة للاستخدام بواسطة MyComponents.
ثم قمت ببناء الخادم الخاص بي باستخدام Express و MongoDB،
كان المعرف موجودًا تلقائيًا في المستند نفسه، لذا كان من
السهل جدًا استرداد ذلك وإعادته إلى جانب العميل.
الآن، لجيتفيتوريدديش،
أذكر أن لجيتفيتوريدديش،
ونحن نبحث عن تلك الأطباق حيث يتم تعيين ميزة إلى صحيح.
الآن، هذا هو المكان الذي يسمح لنا AngularFire2
ببناء استعلام وتوفير هذا الاستعلام هنا لهذه المجموعة.
هنا أقول هذا.afs أطباق جمع هنا،
لذلك ما زلت أستخدم المجموعة ولكن بعد ذلك ننظر
إلى المعلمة الثانية لهذه المكالمة هنا.
هذا يقول المرجع حيث يشير المرجع إلى كل مستند موجود في هذه المجموعة.
هذا المرجع يقول المرجع وهذا هو المكان الذي يمكنني
استخدام هذا الاستعلام إعداد يسمع حتى الذي يقول.
لذلك، وهذا يعني أن كل واحد من الوثائق حيث ظهرت،
كما ترون، بناء الجملة من السهل إلى حد ما لمتابعة هنا الذي يقول أين ظهرت.
الآن، لاحظ أن يتم توفير هذه الميزة كسلسلة هنا،
ثم التالي،
المشغل يساوي حتى يمكنك أن تقول أكبر من، أقل من،
أكبر من أو يساوي أقل من أو يساوي أي واحد من هذه الأشياء،
ولكن لاحظ أن ذلك يجب أن يكون داخل الاقتباسات هنا ثم سوف يقول صحيح.
لذلك، أينما تم تعيين الخاصية المميزة للمستند إلى true،
استخرج كل تلك.
لذلك، فإن هذا الاستعلام استخراج فقط تلك الوثائق
من مجموعة الأطباق حيث يتم تعيين الميزة إلى true،
ومن ثم إرجاع فقط تلك الوثائق
من تلك المجموعة هنا، ومن هناك أنا ذاهب التغييرات لقطة وهذا
سيعود مجموعة من الوثائق ومن هناك سوف خريطة لهم
في وثائق طبق الفردية وبعد ذلك منذ أن
ضمنت أن واحدة فقط من تلك الوثائق سوف يكون لها ميزة تعيين إلى true.
لذلك، سوف يعود واحد منهم فقط لكنه سيعود كمصفوفة.
لذلك، لهذا السبب أنا بناء هذا
مع قوس مربع صفر العنصر الأول من الصفيف،
وبالفعل سوف تحتوي على عنصر واحد فقط لأن عنصر واحد فقط في مجموعتي
سوف تتطابق مع هذا الاستعلام المحدد الذي قمت بإعداده هنا مع الموجة هنا.
هناك إعدادات استعلام أخرى هنا يمكنك أيضا استخدام شيء يسمى النظام من قبل.
لذلك، يمكنك طلب المجموعة بواسطة خاصية معينة،
ومجموعة أخرى من خيارات الاستعلام المتوفرة.
الآن، يتم دعم هذا من قبل Firebase على سحابة Firestore،
وهذا ما يمكننا الاستفادة منه باستخدام AngularFire2 لتصميم
الشفرة في تطبيق Angular الخاص بك لإجراء الاستعلام من جانب العميل نفسه.
لذلك، وهذا هو الذهاب الى العودة طبق ميزة محددة.
الآن، مرة أخرى getDishid ستكون مشابهة لما قمنا به في وقت سابق.
لذلك، لا تعديل هناك.
الآن، لبوستكوممنت مرة أخرى
لأن فيريباس مع سحابة فيريستور بيتا،
ليس لديها مفهوم السكان،
وهلم جرا التي رأيناها في وقت سابق.
لذا، ما سأقوم به للتعليقات هو أنني سأقوم بنشر هذه التعليقات
كمجموعة يتم وضعها داخل كل طبق نفسه.
لذلك، سيكون لكل طبق مجموعته الخاصة من التعليقات حول هذا الطبق المحدد.
عندما أقوم بنشر التعليق، سأستخدم DisHid،
ثم معلومات التعليق.
لذلك، ما أفعله هنا هو أنني ذاهب لأول مرة
الاستعلام عن الأطباق ومن ثم الحصول على هذا الطبق معين.
لذلك، يمكنك أن ترى أنني أستخدم الطريقة الأخرى للاستعلام عن مستند معين.
لذلك، هنا أنا أقول هذا afs.collection ('أطباق') .doc Dishid.
لذلك، يمكنني استخدام هذه الطريقة للوصول إلى مستند معين إذا أردت ذلك.
الطريقة الأخرى بالطبع كنت قد رأيت بالفعل مع
طريقة getDish حيث أقول أطباق doc شرطة مائلة بالإضافة إلى معرف.
لذلك، طريقتان مختلفتان لمعالجة مستند
معين داخل مجموعة هنا ثم Dished ثم جمع والتعليقات.
لذا، بهذه الطريقة تقول في
هذه المجموعة لهذه الوثيقة المحددة مع ذلك DishID،
هناك مجموعة يتم تضمينها في
هذا المستند وأن المجموعة تحتوي على تعليقات الاسم.
لذلك، هذا هو تعشيش مجموعة
داخل وثيقة التي هي في اتصال مستوى أعلى آخر.
لذا، يسمح بهذا النوع من التعشيش للمجموعات بواسطة
Firebase Cloud Store Beta حتى 100 مستوى عميق إذا كنت ترغب في الاختيار.
لذلك، داخل هذه المجموعة،
وأنا ذاهب لإضافة.
لذا، كيف يمكنك إضافة مستند إلى مجموعة؟
لإضافة مستند إلى مجموعتك،
يمكنك استخدام طريقة الإضافة في مجموعة هنا.
لذلك، يمكنك أن ترى أنه في تعليقات المجموعة،
أقوم بإضافة هنا ثم
هذا هو المستند الفعلي الذي سيتم إضافته هنا.
لذلك، في المستند نفسه،
سترى أن لدي خاصية المؤلف هنا حيث قمت بإعداد المعرف الحالي،
وأيضا أنا إعداد الاسم الأول للمؤلف هنا،
أنا فقط تخدم المرة الأولى هنا حتى هنا أقول هذا اسم عرض المستخدم الحالي.
إذا كان اسم العرض صحيحًا، فسأقوم بتعيينه على اسم عرض المستخدم الحالي.
إذا لم يكن لدى حساب المستخدم اسم عرض كما هو مرتبط به،
فسأستخدم ببساطة بريد المستخدم الحالي هذا كخاصية الاسم الأول هنا.
لذا، فإن هذا المستند الذي يحتوي على التعليق،
يحمل تلقائيًا حقل الاسم الأول هذا
وهذا ما سأستخدمه لتقديم
المعلومات عند تقديم التعليقات في مكون DishDetaille الخاص بي.
لذلك، لاحظ أنني في الواقع تكرار المعلومات هنا في كل من التعليقات.
ولكن لا بأس، نظرًا لأن هذه يتم تخزينها
كمستندات Json على Firebase، فلا بأس
من تكرار بعض المعلومات في التعليقات هنا.
ولكن إذا كنت تريد المزيد من التفاصيل عن المستخدم الحالي،
لديك بالفعل إشارة إلى معرف المستخدم هنا حتى تتمكن من الذهاب فعلا وجلب
المستند لمستخدم معين ومن ثم
الحصول على مزيد من المعلومات للمستخدم إذا اخترت.
الآن، عندما استخدمت Mongo DB بالإضافة إلى Mongo،
رأيت أنني سأستخدم فقط معرف المستخدم الحالي
للمؤلف ثم سأستخدم التعبئة لملء هذه المعلومات.
الآن سحابة فيريستور بيتا في هذه اللحظة ليس لديها
أي مفهوم لهذا ملء بقدر ما أستطيع أن أرى من الوثائق،
وربما نسخة مستقبلية قد تدعم طريقة لسحب
المعلومات من وثيقة أخرى
وتعبئتها تلقائيا في المستند الحالي.
عندما يحدث ذلك، يجب تعديل هذا الرمز للاستفادة من ذلك.
ولكن الآن كما أراها،
لا تملك Firestore beta القدرة على
ملء المعلومات من مستند آخر في المستند الحالي.
لذلك هذا هو السبب في أنني مجرد تكرار فقط تلك
المعلومات التي أنا حقا بحاجة عندما أقدم التعليق في
بلدي عنصر ديشديتيل هنا ثم أسفل
هنا يمكنك أن ترى أن لدي التقييم والتعليق هنا وبعد ذلك أيضا،
لاحظ أن أنا خلق
هذين حقول إضافية في تعليقي هنا تسمى «CreateDat» و «UpdateDat».
لاحظ كيف أضع الطابع الزمني ل «CreateDat».
فيريباس، الآن ما هو هذا فيريباس أنا باستخدام هنا،
هذا فيريباس هو بالضبط ما استوردته هنا من التطبيق فيريباس.
لذلك يوفر لي كما ترون هنا أسفل هنا،
أن يوفر لي نفس قيمة حقل فيريستور.
لذا فإن هذه المكالمة إلى الطابع الزمني لخادم قيم firestorm،
ستعيد الطابع الزمني الحالي بالنسبة
لي وهذه هي المعلومات التي سأقوم بتخزينها في «CreateDat».
الآن، عندما أدرجت جميع المستندات هنا،
رأيت أنني قمت بإنشاء حقل «CreateDat» هذا يدويًا لكل مستند من المستندات.
الآن هذه طريقة للقيام بنفس الشيء من داخل
الكود الزاوي الخاص
بنا في جانب العميل ونفس الشيء لحقل «UpdateDat» الذي ستراه هنا.
لذلك، عندما تقوم بنشر تعليق جديد،
ترى أن هذه هي الطريقة التي ستضيف بها تعليقًا جديدًا إلى ذلك الخادم.
الآن، هذا يعود وعدا وهكذا هذه هي المعلومات
التي أستخدمها هنا لبناء هذا الوعد هنا.
ثم هذه الطريقة الأخرى هنا قائلا «getComments»،
هذا «getComments كما ترون هو الوصول إلى أطباق جمع AFS،
doc Dished ثم جمع التعليقات والإشعار أنه هنا،
لن أطلب كل معرف التعليقات
نفسه الذي لن أستخدمه في بلدي Angular عريضة على أي حال،
لذلك بدلاً من استخدام تغييرات اللقطة،
أستخدم فقط تغييرات القيمة وهذا سيعيد
جميع المستندات الموجودة في مجموعة التعليقات هذه لهذه الوثيقة الخاصة بـ
Dished من مجموعة الأطباق هنا والتي سيتم إرجاعها
وهذه التعليقات التي سأقدم في مكون ديستيل الخاص بي.
الآن، في Mongos، رأيت أن حقيقة أنني قمت بتضمين UserID تعني
أنني يمكن أن أقوم بتجميع هذه المعلومات الآن مع Firebase،
لا توجد طريقة لملء المعلومات الشائعة هنا،
لذلك هذا هو السبب في أنني ذاهب بشكل صريح ثم ملء التعليقات في
dishdetaille لجلب جميع التعليقات حول
هذا الطبق معين عندما أقوم بتقديمها في مكون dishdetail.
لذلك ترى، أنه اضطررت إلى ضبط
رمز Angular قليلاً من أجل التعامل مع حقيقة أن
Firebase لا يدعم بعض الأشياء التي يدعمها mongos
على الأقل في اللحظة التي لا تدعم فيها Cloud Firestore beta هذه الأشياء،
لذا اضطررت إلى العمل للتعامل مع ما Firebase يسمح لي
بتخزين واسترداد من موقع خادم Firebase.
الآن، من المثير للاهتمام بالنسبة لنا أن نقوم بزيارة سريعة لخدمة المصادقة هنا.
خدمة المصادقة هنا مرة أخرى،
لاحظ أنه في خدمة المصادقة هنا أنا استيراد هذا AngularFireAuth من
AngularFire إلى npm submodule هنا.
لذلك، هنا يمكنك أن ترى أنني استيراد AngularFireAuth وهذا
يعطيني الوصول إلى جانب المصادقة من Firebase.
الآن، دعونا نرى كيف تعمل مصادقة Firebase بالفعل من تطبيق Angular الخاص بنا.
الآن سنبدأ ذلك من خلال النظر في كيفية تنفيذ تسجيل الدخول.
لذلك، هذا هو المكان الذي أقوم بتنفيذ تسجيل الدخول،
حيث أستخدم البريد الإلكتروني وكلمة المرور.
لذلك، هذا الجزء عندما أقوم باستيراد AngularFireAuth هنا،
لاحظ أن المنشئ أقوم بحقن AngularFireAuth في مُنشئ بلدي.
لذلك هذا سوف
حقن خدمة AngularFireAuth في المنشئ الخاص بي وهذا يعطيني الوصول إلى
مصادقة Firebase على موقع الخادم حتى أتمكن من مصادقة المستخدمين.
لذا، إذا كنت أرغب في مصادقة مستخدم يقوم بتسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور.
وظيفة تسجيل الدخول هذه هي التي سيتم استدعاؤها
عند كتابة البريد الإلكتروني وكلمة المرور الخاصة بي في
مربع حوار تسجيل الدخول الذي أطفو
على السطح ثم انقر على زر الإرسال أو زر
تسجيل الدخول هنا، سيتم استدعاء وظيفة تسجيل الدخول هذه
ومعلومات المستخدم ولكن استردادها من يتم تمرير مكون تسجيل الدخول هنا.
لذلك عندما يتعلق الأمر هنا،
سأستخدم هذا AFauth كما ترون أنا فقط حقنه في المُنشئ،
وهذا يوفر كائن Auth هذا هنا،
والذي يوفر هذه الطريقة المسماة «تسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور».
لذا فإن تسجيل الدخول هذا باستخدام البريد الإلكتروني وكلمة المرور يأخذ معلمتين هنا حيث
تتوقع اسم مستخدم المستخدم أو البريد الإلكتروني وكلمة المرور هنا.
حتى هذه المعلومات اثنين من المعلومات أنا توريد
ذلك كمعلمتين لهذا تسجيل الدخول مع البريد الإلكتروني وكلمة المرور.
لذلك، عند النقر على ذلك سترى أنه
يقول أن أول واحد يجب أن يكون البريد الإلكتروني والثاني يجب أن يكون كلمة المرور.
الآن الطريقة التي قمت بإعدادها،
يحتوي كائن المستخدم هذا الذي يأتي على البريد الإلكتروني في
user.username هنا وكلمة المرور في خاصية كلمة المرور لكائن المستخدم.
لذلك، عندما يتم الحصول على
ذلك، ثم سأقوم بنشر هذه المعلومات وبعد ذلك عندما يتم الانتهاء من ذلك بنجاح،
وهذا يعني أن المستخدم يتم تسجيل الدخول بشكل صحيح،
إذا كان هناك خطأ،
ثم يمكنك التقاط الخطأ هنا الآن أنا
لا أفعل أي شيء على وجه التحديد مع الخطأ قد
طباعة رسالة الخطأ هذه للإشارة إلى أن المستخدم لا يمكن تسجيل الدخول وهكذا.
لذلك، لم أقم بتنفيذ هذا الجزء من الصفقة هنا،
فأنا أتركه هناك فقط إذا كنت ترغب في وحدة التحكم في تسجيل
هذه المعلومات يمكنك القيام بذلك عند حدوث أخطاء.
الآن لتسجيل الخروج، في فيريباس.
مرة أخرى نأخذ مساعدة من AFAuth التي قمنا بحقنها و Auth على ذلك،
وهذا يوفر هذه الطريقة تسمى «تسجيل الخروج»،
والتي عند استدعاؤها سيتم تسجيل الخروج من
المستخدم الذي تم تسجيل دخوله حاليًا وهكذا تكون إحدى الطرق للتعامل مع هذا.
الآن، يجب أن تتساءل كيف أتعامل مع جزء تسجيل الدخول إلى Google.
الآن يتم التعامل مع هذا أيضا مع AFauth حتى وحدة AngularFire2 التي أستخدمها،
تزود هذه المعلومات لهذه الأساليب بالنسبة لنا من خلال
وحدة Firebase التي تستخدم أيضا في AngularFire2،
وبالتالي فإن هذا يوفر هذه الطريقة تسمى تسجيل الدخول مع البوب وعندما
نقوم بتسجيل الدخول مع pop- هنا لاحظ ما أقوم بتحديده هنا.
لذلك، أنا أقول «جديد فيريباس.auth.googleAuthProvider».
الآن، يمكنك أيضا القيام FireBase.Auth.FacebookAuthProvider وغيرها.
لذلك، كما رأيت من التمرين السابق،
يسمح لك Firebase بإجراء تسجيل دخول من طرف ثالث باستخدام إما Google و
Facebook و GitHub و Twitter.
حتى تتمكن من تكوين هذه بشكل مناسب،
حيث قمت بتشغيل إذن Google فقط.
إذن هذه هي الطريقة التي سأقوم بإعدادها لاستخدام
إذن Google الخاص بي هنا وهذا السطر المفرد من الشفرة الذي أربطته هنا،
هو السطر الذي يسبب المنبثقة للمتصفح الذي يقترح لي تفويض
Firebase باستخدام تفويض Google باستخدام حساب Google الخاص بي هنا.
لذلك هذا هو الجزء الثاني الذي قمت بإعداده هنا.
لذلك لاحظ أن خدمة المصادقة قد
تبسطت بشكل كبير مقارنة بما فعلناه مع الإصدار السابق من هذا التطبيق.
حتى تتمكن من مقارنة الإصدارين لمعرفة كيف يختلف هذا عن الآخر.
الآن، ليس فقط أن هذا AFauth الذي قمنا بحقنه هنا،
جزء AngularFireAuth الذي قمنا بحقنه هنا،
يوفر أيضًا هذا يمكن ملاحظته باسم «AuthState».
هذا AuthState يمكن ملاحظتها، ويمكن الاشتراك في هذا «AuthState» يمكن ملاحظته،
كما ترون هنا،
والتي أعلنت هنا على أنها FireBase.User يمكن ملاحظتها.
لذلك هذه هي المعلومات التي يتم تطبيقها هنا وأيضا يمكننا إعداد
متغير آخر هنا يسمى المستخدم الحالي الذي هو من نوع مستخدم فيريباس هنا.
لذا، فإن هذا AfAuthState هو أمر
يمكن ملاحظته يمكنني الاشتراك فيه وكلما تغير هذا
AuthState، يقوم AuthState بتتبع حالة المصادقة
للمستخدم ما إذا كان المستخدم قد قام بتسجيل الدخول أو تسجيل الخروج وإذا قام المستخدم بتسجيل الدخول،
فإن هذا سيعود لي معلومات المستخدم ومن
معلومات المستخدم يمكننا استرداد الكثير من المعلومات بما في ذلك اسم العرض والبريد
الإلكتروني ومعرف الملف الشخصي ثم
الصورة الرمزية للمستخدم إذا تم إعداده لحسابات معينة.
كل هذه سيتم توفيرها لنا تلقائيا من قبل المستخدم.
لذلك، عند النقر على «المستخدم» ثم نقطة،
سترى أنه يوفر كل هذه المعلومات بالنسبة لنا.
لذلك هو اسم العرض البريد الإلكتروني،
سواء تم التحقق من البريد الإلكتروني أم لا وهلم جرا.
لذا بعض الأشياء التي تهمنا بشكل خاص.
عنوان URL للصور الذي يمكن استخدامه لاسترداد المعلومات الرمزية للمستخدم،
معرف الموفر الذي يحدد من
يقدم هذه المعلومات لك هذا سيكون إما معرف Facebook،
معرف Google و GitHub ID وهلم جرا ومعلومات إضافية حتى رمز التحديث.
لذلك ترى مجموعة من المعلومات
التي يتم توفيرها لك من خلال كائن المستخدم الذي يتم
إرجاعه من قبل هذا Authstate عند الاشتراك فيه،
وأيضا اسمحوا لي أن ألفت انتباهك إلى معرف المستخدم،
وهذا هو ما يمكن استخدامه لفهرسة المستخدم في تطبيقنا.
لذلك هذه هي خدمة المصادقة بالطريقة التي قمت
بإعدادها لاستخدام مصادقة Firebase في هذا التطبيق.
لذا، تغييرين قد انعكست لك لإظهار
كيفية تعديل خدماتي لاستخدام Firebase.
الكثير من التحديثات التي قمت بها لتطبيق Angular الخاص بي كلها
في الخدمات من أجل الاستفادة من Firebase المثبتة.
لذلك، بسبب الطفل منظم من تطبيق Angular،
كانت المكونات ببساطة تعتمد
على الخدمات والخدمات كانت تلك التي نتحدث إليها في النهاية الخلفية.
لذا، فإن الكثير من التحديثات التي قمت بها
لتطبيق Angular الخاص بي تتضمن فقط تحديث هذه الخدمات
لاستخدام واجهة Firebase الخلفية من Google كخدمة مع وحدتي npm،
Firebase و AngularFireAuth هنا.
لذلك، سترى أن الكثير من التحديثات يقتصر على
جميع هذه الخدمات التي لدي في مجلد الخدمات من تطبيق Angular الخاص بي.
بالطبع، كنت بحاجة إلى إجراء القليل من
التعديلات الدنيا في مكون dishdetaille
ومكون الرأس من أجل جعلها تعمل مع Firebase.
يمكنك القيام بزيارة سريعة إلى headercomponent.ts،
و headercomponent.html و disdetailcomponent.tsfile لمعرفة كيف
تغيرت الشفرة بين الإصدار السابق
والإصدار الحالي من تطبيق Angular،
الإصدار السابق، أعني الإصدار الذي استخدمناه ل
التواصل مع
خادم X plus Plus Mongo DB الذي استخدمناه في التمرين السابق.
الآن، مكان آخر حيث تريني إجراء تعديلات،
ومن المثير للاهتمام، هو في الخدمة المفضلة.
في الخدمة المفضلة،
الطريقة التي قمت بتخزين المفضلة للمستخدم،
هي أن المفضلة هي مجموعة على
موقع الخادم الخاص بي والمفضلة نفسها تحتوي على وثائق.
يحتوي كل مستند على معرف المستخدم ومعرف الطبق.
لذلك، يمكن أن يكون لمستخدم معين
مستندات متعددة كل منها يخزن معرف المستخدم ومعرف الطبق.
لذلك، مجموعة منهم معا سوف تحدد جميع المفضلة لمستخدم معين.
لقد وجدت أن هذه طريقة أفضل لتنظيم هذه البيانات في Firebase.
في MongoDB بالإضافة إلى mongos،
رأيت أنني قد أدرجت في مجموعة من معرفات الأطباق في
وثيقة المفضلة ثم حدد المخطط المفضل بهذه الطريقة.
هنا، أستخدم
مستند منفصل واحد لتتبع كل من المفضلة لكل من المستخدمين.
الآن، لأن Firebase يدعم الاستعلام، لذلك،
يمكنني الاستعلام عن Firebase واستخراج جميع المستندات التي تحتوي على نفس معرفات
المستخدم، والتي تتطابق مع المستخدم الذي قام بتسجيل الدخول حاليًا ثم
استخراج معرفات الطبق المقابلة من المفضلة.
ثم سأذهب ثم استعلام الخادم الخاص بي
والحصول على معلومات الطبق لكل من تلك الأطباق.
لذلك، فإنه ينطوي على رحلات متعددة إلى الخادم من أجل الحصول على
كل ما عندي من المعلومات الأطباق المفضلة قبل أن أتمكن من تقديم قائمتي المفضلة.
ولكن، هذه هي أفضل طريقة يمكنني الحصول على Firebase للعمل مع تطبيق Angular الخاص بي.
ربما، في تاريخ مستقبلي،
قد يمتد Firebase Cloud Firestone
للسماح بشيء مثل ملء ما قمنا به باستخدام mongo.
في هذه الحالة، سأقوم بتحديث الشفرة لاستخدام هذه الطريقة
للحصول على جميع معلومات الطبق تلقائيًا.
لذلك، سيتم نقل عبء بناء هذا المستند المركب إلى موقع الخادم.
الآن، موكلي يقوم بالكثير من العمل هنا.
الآن، عندما تذهب هنا،
سترى أنه في طريقة GetFavorites،
سترى كيف يمكنني الوصول إلى المفضلة هنا.
لذلك، عندما أفعل «Getfavorites» أنا الاستعلام عن
هذه المجموعة من المفضلة ولكن لاحظ أن هنا،
أقول «المرجع أين هو معرف المستخدم هذا».
معرف المستخدم هذا أحصل هنا.
لذا، في منشئ الخادم المفضل
لدي، أشترك في خدمة Auth هذه في حالة Get Auth في خدمة Auth.
لذلك، في خدمة المصادقة إذا ذهبت،
سترى هذه الطريقة تسمى Get Auth الدولة هنا.
ترجع حالة Get Auth this.AuthState،
والتي قمت بتعريفها هناك.
لذلك، سيكون هذا ملحوظا كما ترون لي أعلن هنا.
لذلك، هذا يمكن ملاحظته هو الذي
سأستخدمه داخل خدمتي المفضلة ثم اشترك في ذلك.
لذلك، في أي وقت تتغير معلومات المستخدم هذا سوف ينعكس تلقائيا في هنا.
لذلك، رأيت أنه حتى في التطبيق السابق كنت قد استخدمت ملاحظتها،
من أجل عكس معلومات المستخدم في مكون الرأس الخاص بي.
نوع مماثل من النهج،
الذي أستخدمه في مكون المفضلة هنا،
للحصول على معرف المستخدم للمستخدم الذي قام بتسجيل الدخول حاليًا.
لذلك، عند الاستعلام عن مجموعة المفضلة،
وسوف الاستعلام واستخراج فقط تلك الوثائق حيث يطابق المستخدم هذا.
ثم أنا فقط باستخدام التغييرات القيمة هنا.
لذلك، أنا فقط استخراج جميع الوثائق،
أنني لا يهمني معرف وثيقة المفضلة نفسها في هذه اللحظة.
لذلك، أنا فقط استخراج كل منهم واستخدامها.
إذا لم يتم تسجيل دخول المستخدم وكما ترون
أنا رمي خطأ هنا مع القول يمكن ملاحظته،
«لا يوجد مستخدم تسجيل الدخول» وهذا هو ما يتم عرضه في خطابي المفضل هناك.
الآن، يتم تحديث إيسفافوريتس أيضا هنا
ولكن في إيسفافوريتس ما أفعله هو أنا ذاهب إلى دب.
الآن هنا، وسوف الوصول إلى قاعدة البيانات بالقول،
«دب يساوي firebase.firestore».
أذكر أنني استيراد فيريباس هنا،
استيراد نجمة كما فيريباس هنا.
لا يوفر لي Angular Firestore نفسه طريقة
للقيام باستعلامات مركبة متعددة هنا.
لا توفر لي فايرستور الزاوي أو النار الزاوي القيام بذلك.
لذلك، لهذا السبب لا بد لي من اللجوء إلى استخدام فيريباس فيريستور.
لذلك، عندما أقول فيريباس فيريستور،
وهذا يعطيني إشارة إلى قاعدة بيانات فيريستور ومن ثم يمكنني الذهاب إلى قاعدة البيانات هذه
ومن ثم أقول «مجموعة دب المفضلة» وبعد ذلك يمكنني القيام باستعلامات متعددة هنا.
لذلك، أنا أقول، .where المستخدم هو هذا.wheredish هو معرف الطبق.
لذلك، إذا كنت ترغب في الحصول على المفضلة محددة.
للتحقق مما إذا كان طبق معين هو المفضل للمستخدم، أحصل على
ذلك المستند المحدد حيث يتطابق المستخدم والطبق مع هذين،
إذا لم يتطابقان ثم سيعود مع فارغة.
لذلك، أن أستخرج ثم أعد هذه القيمة هنا.
الآن، ثم أنا نشر المفضلة،
ترى كيف أفعل هذا أنا أقول هذه مجموعة AFS المفضلة وسأقول «إضافة».
انظر إلى المستند الذي أقوم بتخزينه في المفضلة.
يحتوي المستند نفسه على معرف المستخدم ومعرف الطبق.
لذلك، هذه قطعتين من المعلومات المرفقة هنا وإذا
لم يكن ثم أنها سوف ترفض الوعد مع أي مستخدم تسجيل الدخول هنا.
وبالمثل، لحذف المفضلة التي قمت بتنفيذها هنا.
قضاء بعض الوقت مرة أخرى في الذهاب من خلال هذا الرمز لفهم كيف قمت
بالاستفادة من فيريباس و الزاوي النار إلى وحدات نبم
من أجل التواصل مع خادم فيريباس الخاص بي الذي قمت بإعداده في التمرين السابق.
مع هذا، لقد أعطيتك لمحة سريعة عن
كيفية إعداد تطبيق Angular الخاص بك للتفاعل مع
Firebase الخلفية كخدمة ومن ثم تكون
قادرة على دعم العمليات المختلفة التي لديك داخل تطبيق Angular الخاص بك.
كما أوضحت سابقًا،
يبدو هذا التطبيق Angular تمامًا مثل
الإصدار السابق من تطبيق Angular حيث كنا
نستخدم إصدارنا الخاص من خادم Express MongoDB.
الآن، مع هذا أكمل هذا التمرين الخاص حيث أوضحت في
هذا الدرس حول النهاية الخلفية كخدمة وأظهرت أيضًا
Firebase كمثال على الواجهة الخلفية كخدمة.