الآن بعد أن أكملنا تطوير خادم Rest API كامل باستخدام LoopBack،
فإن السؤال التالي الفوري الذي سينشأ في ذهنك هو،
كيف يمكننا تكييف تطبيق Angular للاستفادة من خادم Rest API هذا؟
كما فعلنا في الحالات السابقة،
سنحتاج أيضًا إلى إعادة تكوين تطبيق Angular الخاص بنا للاستفادة على وجه التحديد من
نقاط نهاية واجهة برمجة تطبيقات Rest
وطلبات واجهة برمجة تطبيقات Rest المختلفة التي يتعرض لها خادم LoopBack الخاص بنا.
الآن، هذا هو المكان الذي سنستفيد من
SDK LoopBack التي يمكن بناؤها تلقائيًا بالنسبة لنا باستخدام وحدة Node.
سنلقي نظرة على خوادم LoopBack الخاصة بنا،
ونقاط النهاية المختلفة لـ Rest API وننشئ SDK تلقائيًا،
والذي يمكننا بعد ذلك دمجه في
تطبيقنا Angular ثم نتمكن من التواصل مع خادم LoopBack الخاص بنا،
سواء للمصادقة أو أيضًا من تبادل البيانات.
للبدء في هذا التمرين، قم
أولاً باستنساخ مستودع git الذي
يحتوي على تطبيق Angular مكتمل جزئيًا يتصل بخادم LoopBack الخاص بنا.
لذلك، للقيام بذلك، انتقل إلى موقعك المناسب على جهاز الكمبيوتر الخاص بك.
لذا، أنا هنا في مجلد Coursera Angular الخاص بي.
سأقوم باستنساخ مستودع git عن طريق
كتابة git clone
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git،
ثم استنساخ مستودع git هذا.
بمجرد استنساخ مستودع git،
سننتقل إلى مجلد LoopBack الارتباك Angular6 ثم نقوم
بإجراء تثبيت NPM لتثبيت
جميع وحدات العقدة لهذا التطبيق Angular المكتمل جزئيًا.
لإنشاء مجموعة تطوير برامج LoopBack تلقائيًا لخادم LoopBack الخاص بنا،
سنأخذ مساعدة وحدة عقدة LoopBack SDK Builder هذه.
لذا، فإن هذا LoopBack SDK Builder
هو وحدة عقدة يحركها المجتمع والتي تم تطويرها بالفعل
من LoopBack SDK Angular الرسمية التي أطلقها مطورو LoopBack.
دعم الاسترجاع سك الزاوي جس الزاوي.
لذلك، تم تعديل هذا في هذا Loopback SDK Builder
لدعم Angular اثنين وحول التطبيقات.
لذا، فإن LoopBack SDK Builder،
وحدة العقدة نفسها بمجرد تثبيتها في مجلد مشروع الخادم الخاص بك،
ثم يمكنك الاستفادة من LoopBack SDK Builder
لتمرير تلقائيًا من خلال تطبيق LoopBack الذي قمت بإنشائه بالفعل.
سيؤدي ذلك تلقائيًا إلى بناء كل ما
نحتاجه للبدء في تطبيق Angular الخاص بنا.
لذلك، فإنه يبني مجموعة تطوير البرمجيات.
لذلك، ضمن مجموعة تطوير البرامج،
يقوم LoopBack SDK Builder بتصدير
جميع الواجهات، وجميع النماذج للبيانات المختلفة التي سنقوم بتخزينها على
خادم LoopBack الخاص بنا وكذلك
جميع خدمات API التي يمكن استخدامها داخل تطبيق Angular الخاص بك.
لذلك، تأتي النماذج وخدماتك تلقائيًا للركوب بمجرد إنشاء SDK.
الآن انها مجرد مسألة دمج هذا سك في التطبيق الزاوي لدينا،
ومن ثم البدء بسرعة.
نظرًا لأننا قمنا بالفعل ببناء تطبيق Angular الخاص بنا في دورة سابقة،
سأقوم بتعديل هذا التطبيق للاستفادة من
SDK LoopBack الذي سنقوم بتصديره من هذا LoopBack SDK Builder.
في الخطوة السابقة،
قمت للتو بتثبيت
تطبيق Angular المكتمل جزئيًا والذي
تم تكييفه بالفعل للاستفادة من SDK LoopBack.
لذلك، دعونا المضي قدما وبناء
لوباك سك ومن ثم نشره في التطبيق الزاوي لدينا،
ومن ثم المضي قدما وتجميع التطبيق الزاوي لدينا والبدء معها.
لإعداد LoopBack SDK،
انتقل إلى مجلد خادم LoopBack في علامة التبويب الطرفية أو في إطار الأوامر.
حتى هنا أنا في مجلد خادم LoopBack الخاص بي.
لذلك، في هذا المجلد،
اسمحوا لي المضي قدما وتثبيت هذا LoopBack
SDK Builder.
مرة واحدة يتم تثبيت باني،
دعونا المضي قدما وبناء لوباك سك.
لإنشاء SDK LoopBack،
سنأخذ مساعدة أداة سطر الأوامر LB-SDK التي تقوم وحدة LoopBack SDK
بتكوين تلقائيًا لنا.
لذلك، للوصول إلى ذلك، سنقول،. /وحدات العقدة.
لذلك، في وحدات العقدة،
هناك مجلد a.bin الذي يتم إنشاؤه تلقائيا كلما قمت
بتثبيت وحدات عقدة مختلفة في المجلد هناك.
لذلك، للذهاب إلى مجلد the.bin،
ونحن سوف الوصول إلى هذا الأمر لب-سك هناك،
أن يحصل على تثبيت تلقائيا،
ثم سوف ندعو هذا الخادم العرض. /server.js،
ونحن بحاجة إلى تحديد المسار إلى تطبيق Angular الذي قمنا بتهيئته للتو.
لذا، فإن تطبيقي الزاوي موجود حاليًا في
مستنداتي Coursera الزاوي الارتباك مجلد LoopBack الزاوي.
لذا، دعني أنسخ ذلك الجزء
ثم اسمحوا لي أن أذهب إلى محطة بلدي أو نافذة الأوامر
حيث أحاول تكوين بلدي LoopBack SDK.
لذلك، في موجه،
لأنه في مجلد المستندات،
سأقوم بكتابة المسار الكامل لهذا بدءا من المجلد الجذر الخاص بي في جهاز Mac الخاص بي.
إذا كنت تستخدم Windows الخاص بهم،
فتأكد من أن هذا المسار يشير إلى المسار الكامل الذي يبدأ من نقطتين C أو D،
أيهما محرك الأقراص الذي تقوم بتثبيته على جهاز Windows.
لذا، فإن المسار الكامل إلى مجلد LoopBack الزاوي الخاص بك
، ثم سنقول،
/SRC، المجلد المصدر هناك، ثم التطبيق.
بعد ذلك، سنقوم بنشر SDK في
المجلد المشترك في المجلد الفرعي SDK هناك.
نريد أن يقوم هذا LoopBack SDK Builder
بنشر إصدار الويب NG2 تلقائيًا من SDK.
لذلك، هذا هو الإصدار الذي سيدعم
تطبيقات الويب وتطبيقنا الزاوي في هذه الحالة.
إذا كنت تقوم بإنشاء هذا لتطبيق برنامج نصي أصلي، فستقول،
NG2 الأصلي لإنشاء SDK لتطبيق Native Script.
نظرًا لأنني أقوم ببناء تطبيق Angular الخاص بي
، سأقول فقط، على الويب NG2،
ثم السماح لـ Loopback SDK Builder تلقائيًا
بإنشاء مجموعة تطوير البرامج ثم نشره
في مجلد تطبيقات/مشاركة/sdk الخاص بي.
لذلك، بعد بضع ثوانٍ،
يتم إنشاء SDK ونشره في تطبيق Angular الخاص بي.
الآن قبل أن أبدأ تطبيق Angular الخاص بي،
دعني أبدأ خادم LoopBack الخاص بي، وقبل
أن أفعل ذلك سأذهب إلى علامة تبويب محطة أخرى
هنا ثم بدء تشغيل خادم MongoDB الخاص بي،
لذا سأقول،
Mongod —dbpaths = البيانات، ثم
بدء تشغيل خادم MongoDB الخاص بي.
أولاً، دعني أبدأ خادم LoopBack الخاص بي.
لذلك، في بداية NPM الفورية،
ويجب أن يكون خادم LoopBack الخاص بي قيد التشغيل وتشغيله في فترة قصيرة.
ثم، انتقل الآن إلى تطبيق LoopBack الخاص بي،
دعني أفتح هذا التطبيق في
رمز Visual Studio الخاص بي حتى نتمكن من إلقاء نظرة على شفرة المصدر.
بمجرد فتح طلبي في التعليمات البرمجية Visual Studio،
اسمحوا لي أن تأخذ ذلك في نافذة سطح المكتب الجديد.
ثم، اسمحوا لي أيضا أن أبدأ بلدي نشر التطبيق الزاوي
عن طريق كتابة نغسيرفر في موجه وانتظر بلدي تطبيق الزاوي للحصول على تجميعها.
بمجرد تجميع تطبيق Angular الخاص بي وتطبيقه،
دعني أذهب إلى متصفح،
ثم أولاً الخروج من هذا التطبيق Angular.
الذهاب إلى المتصفح،
اسمحوا لي أن فتح علامة تبويب جديدة هنا،
ثم اكتب في المضيف المحلي: 4200 وسترى
تطبيق الزاوي المنتشر إلى نافذة المتصفح هذه هنا
، ويمكنك أن ترى أن
الصفحة الرئيسية، صفحة حول لنا مع جميع البيانات،
ثم القائمة وأيضا المفضلة.
حاليا الذي لا يظهر أي شيء لأنه
لم يتم تسجيل أي مستخدم وصفحة الاتصال، تماما كما كان من قبل.
حتى لتسجيل الدخول، اسمحوا لي تسجيل الدخول كمستخدم وبعد ذلك سوف أكتب
في اسم المستخدم وكلمة المرور الخاصة بي هنا، وبعد ذلك
بمجرد تسجيل الدخول ثم سوف تكون قادرة على رؤية أنه عندما أذهب إلى
المفضلة، سيتم عرض المفضلة لهذا المستخدم معين هنا.
تماما كما كان من قبل، يمكننا كتابة التعليقات ثم إرسال التعليقات،
ومن ثم أيضا إضافة عناصر إلى المفضلة وهلم جرا.
يتم
دعم جميع الوظائف التي رأيتها مع الإصدارات السابقة من تطبيق Angular أيضًا في هذا الإصدار من تطبيق Angular.
أيضا لخادم LoopBack الخاص بك لتكون قادرة على تقديم الصور،
سيتم تخزين كل هذه البيانات في رمز الخادم الخاص بك في مجلد العميل من رمز الخادم.
لذلك، في مجلد العميل الخاص بخادم LoopBack الخاص بي،
لاحظ أنني قمت بإنشاء هذا المجلد الفرعي
المسمى الصور ثم قمت بتخزين كافة الصور في المجلد الفرعي.
الآن، من أجل تقديم هذه الصور وأيضًا لاستخدام
مجلد العميل كمجلد عمومي لخادم LoopBack الخاص بي،
ثم في بعض التغييرات التي أحتاج إلى إجراؤها على خادم LoopBack الخاص بي.
الآن، أول شيء عليك القيام به هو،
انتقل إلى مجلد التمهيد وفي مجلد التمهيد،
سترى هذا الملف root.js هنا،
والذي يحتوي على هذه المعلومات هنا.
الآن، يمكنك إما حذف ملف root.js
أو ببساطة إعادة تسمية الملف root.js إلى شيء آخر.
حتى هنا، ترى أنني قمت بإعادة تسمية هذا الملف إلى root.jpeed مع تمديد جباع.
الآن، يجب ألا يحتوي هذا الملف على ملحق the.js بعد الآن.
لذلك، أي شيء آخر غير امتداد the.js على ما يرام.
لذا، ما يعنيه هذا هو أنه في هذه الحالة،
لن يقوم خادم LoopBack الخاص بي، عند بدء التشغيل بتنفيذ التعليمات البرمجية في هذا المجلد.
الآن، عندما تنظر إلى التعليمات البرمجية في ملف root.js الذي تم تكوينه في وقت سابق،
رأيت أن جهاز التوجيه تم تكوينه بحيث،
عند الوصول إلى الخط المائل الذي هو المجلد الجذر من الخوادم الخاصة بك،
ثم أنها سوف تخدم ببساطة حتى الخوادم حالة LoopBack وبالفعل،
هذا ما رأيناه لدينا خادم LoopBack خدمة
وقت التشغيل وآخر وقت إعادة تشغيل لخادمنا.
نحن لا نريد أن نفعل
ذلك، بدلاً من ذلك نريد أن يكون خادم LoopBack قادرًا على استخدام كل ما
نضعه في مجلد العميل كمجلد عمومي وبالتالي
يمكن نشر أي تطبيق عميل إلى
مجلد العميل الخاص بخادم LoopBack الخاص بي ويجب
الوصول إليه عند الوصول إلى LoopBack في نقاط نهاية الخط المائل القياسية الخاصة به.
لذلك، هذا هو جذر مجلد الخادم.
لذلك، للقيام بذلك، أول شيء عليك القيام به هو
تغيير اسم ملفات root.js هذا إلى الجذر.
على سبيل المثال، يمكنك ببساطة إعادة تسمية ذلك إلى
root.jbaed أو يمكنك فقط حذف هذا الملف.
لن تكون هناك حاجة إلى هذا الملف في هذا الإصدار من خادم LoopBack الخاص بي.
الآن، ليس ذلك فقط،
الجزء الثاني الذي تحتاج إلى إعادة تكوينه هو الذهاب إلى ملف middleware.json هنا.
ملف midleware.json.
في ملف midleware.json،
إذا قمت بالتمرير لأسفل،
سترى أنه هنا، في
الأصل سيحتوي هذا ببساطة على ملفات: ثم هدفين فارغ هنا.
الآن، في هذا الدعامة الفارغة هنا،
ما عليك سوى إضافة هذا الرمز هنا،
والذي يقول الاسترجاع #static وتقول params$!.. /العميل.
لذا، سيشير هذا إلى خادم LoopBack الخاص بي إلى
أنه
يجب استخدام مجلد العميل المتوفر هنا كمجلد عمومي ثابت لخادم LoopBack الخاص بي.
لذلك، يمكن الوصول إلى أي شيء وضع في مجلد العميل من الخادم الخاص بي.
لذلك، هذا هو التغيير الإضافي الذي تحتاج إلى القيام به إلى ملف middleware.json.
لذلك، بمجرد إجراء هذين التغييرين،
سيتم تكوين خادم LoopBack الخاص بك لخدمة البيانات بما
في ذلك الصور التي ستقوم بوضعها في
المجلد الفرعي للصور تحت مجلد العميل هنا.
لذا، تأكد من نسخ الصور إلى مجلد العميل هنا والثاني هو
الانتقال إلى ملف middleware.json في مجلد الخادم،
ثم قم بتحديث هذا الجزء.
وبمجرد القيام بذلك، يمكن الوصول إلى هذه الصور ببساطة عن طريق الوصول إلى
/صور/اسم ملف الصورة للوصول إلى
هذه الصور لأن أطباقنا
، والقادة، والعروض الترويجية تتطلب ملفات الصور
هذه وبالتالي سوف تكون متاحة لنا من
خادم LoopBack وأيضا كل ما تضعه في مجلد العميل.
على سبيل المثال، يمكنك إعداد مجلد التوزيع
لتطبيق Angular الخاص بك وببساطة نسخ
محتويات مجلد التوزيع بالكامل إلى مجلد العميل هنا،
ثم إذا قمت بالوصول إلى خادم LoopBack في
نقطة النهاية الجذر القياسية،
فسيكون تطبيق Angular الخاص بك يتم تقديمها تلقائيًا بواسطة خادم LoopBack الخاص بك.
لذا، هذه هي التغييرات التي تحتاج إلى إجرائها على خادم LoopBack الخاص بك.
بالطبع، يجب أن تكون فضوليًا حول كيفية إنشاء SDK هذا
بالضبط، حيث يتم تثبيت SDK هذا بالضبط وكيف يمكنني بالفعل
الاستفادة منه داخل تطبيق Angular الخاص بي.
لذلك، للقيام بذلك، دعونا نذهب إلى تطبيق Angular الخاص بنا وفي المجلد المصدر،
تحت مجلد التطبيق المصدر،
والآن عند فتح المجلد المشترك،
سترى أن هناك مجلد فرعي هنا اسمه SDK وداخل هذا المجلد الفرعي SDK،
ستجد مجموعة كاملة من الملفات هنا،
lb.config.ts، index.ts وداخل مآخذ التخزين
والخدمات وداخل الخدمة،
لديك خدمات مخصصة وخدمات أساسية هنا،
والنماذج المختلفة التي يتم نشرها هنا.
تحتوي النماذج في الواقع على هياكل نموذجية
لنماذجنا المختلفة التي نقوم بتنفيذها.
الآن، هذا هو SDK LoopBack.
تم إنشاء هذا الرمز تلقائيًا لك، وإذا كنت تريد ذلك،
يمكنك ببساطة الدخول ثم
المرور عبر هذه الملفات لمعرفة ما هو متاح هناك.
تأكد من عدم تعديل أي من الملفات الموجودة في
المجلد الفرعي SDK هذا لأن هذا
تم إنشاؤه تلقائيًا من قِبل Loopback SDK Builder،
وسيحتوي ذلك على كل شيء تم تكوينه بحيث
يمكن الوصول إلى خادم LoopBack الخاص بك من تطبيق Angular الخاص بك.
الخدمات التي سأستخدمها كلها متاحة هنا
الآن، كيف نستفيد من هذا؟
لذلك، لمساعدتك على فهم كيفية الاستفادة من هذا،
دعونا زيارة مكون المنزل لدينا ومن ثم نرى كيف يتم تحديث المكون الرئيسي الآن.
لذلك، عندما تذهب إلى مكون المنزل،
ستلاحظ أنني الآن استيراد الأطباق من.. /مشاركة/SDK/نماذج.
لذا، هذه هي النماذج التي يتم تصديرها تلقائيًا إلى
SDK بواسطة منشئ Loopback SDK الخاص بي.
لذلك، هذا هو المكان الذي سيتم تعريف نموذج أطباقي هناك.
لذا، أنا فقط ذاهب إلى الاستفادة من نموذج الأطباق.
وبالمثل، فإن الخدمة نفسها متوفرة مثل هذا DischeSAPI،
كما ترون هنا وهذا DischeSapi هو في.. /مشاركة/sdk/services المجلد هنا.
وبالمثل، فإن الترقيات والترقيات API,
وقادة وقادة API.
لذلك، يتم إنشاء كل هذه تلقائيًا بالنسبة لي بواسطة منشئ Loopback SDK.
الآن، ثم تذهب إلى التعليمات البرمجية،
ستلاحظ الآن أنني سوف أعلن الطبق كأطباق،
والترويج والترقيات، والزعيم ك/قادة.
هذه النماذج الثلاثة هي النماذج التي يتم تصديرها بواسطة منشئ SDK Loopback.
لاحظ أيضًا كيف قمت بإعادة تكوين الخدمات الثلاث هنا.
الآن، تشير خدمة الطبق إلى واجهة برمجة التطبيقات للأطباق،
وخدمات الترويج التي تشير إلى العروض الترويجية API،
والخدمة الرائدة لواجهة برمجة التطبيقات لقادة API،
وتلاحظ أيضًا كيف يمكنني الوصول إلى خدمة الطبق هنا.
لذلك، سأقول أن خدمة الطبق هذه تجد واحدة وحيث ظهرت مساوية لصحيح.
لذا، هذا هو المكان الذي تتذكر فيه أنه في مستكشف واجهة برمجة تطبيقات LoopBack الخاص بي،
كنت قد كتبت هذا في الفلتر هناك،
ثم حاولت العثور على الأطباق هناك.
لذا، هذا هو بالضبط ما أفعله هنا أيضًا في شفرتي هنا.
لذلك، هذا فيندون، ثم الموردة مع هذا،
سوف تجد عنصر واحد ثم يعود ذلك هنا،
وبعد ذلك أنا تعيين كل إلى هذا الطبق هنا
وبقية بلدي تطبيق الزاوي يعمل بالضبط بنفس الطريقة كما كان من قبل.
الآن، لاحظ أيضًا أنه في المُنشئ،
لاحظ كيف قمت بتكوين هذا يسمى تهيئة LoopBack.
الآن، لإجراء تهيئة LoopBack في كل مكون تستخدمه،
تحتاج إلى استيراد هذا التكوين LoopBack من مجلد SDK المشترك هنا وأيضًا،
إصدار واجهة برمجة التطبيقات هذا الذي أعلنه.
لقد قمت بتحديث هذا الملف baseurl.ts.
حتى في مجلد عنوان URL الأساسي،
لقد قمت بتحديث هذا إلى اسمي القولون جهاز الكمبيوتر الخاص بي 3،000.
لذلك، هذا واحد تأكد من استبدال هذا مع
عنوان إب أو اسم الكمبيوتر المحدد الذي كنت قيد التشغيل.
لذلك، تأكد من تحديث عنوان URL الأساسي هنا وإصدار واجهة برمجة التطبيقات هنا هو ببساطة سلسلة.
قول واجهة برمجة التطبيقات هنا.
لذلك سيتم استخدام هذين في ملف component.ts منزلي.
لذلك أنا استيراد هذا الإصدار أبي هنا و لوباباككونفيغ.
و باسيورل أنا بالفعل
حقن في بلدي منشئ هنا بحيث هو متاح بالفعل هنا،
ومن ثم في بلدي منشئ مكون بلدي،
وأنا بحاجة إلى القيام بهذه العبارات اثنين هنا.
لذا، سنقول، «LoopBack تعيين عنوان URL
الأساسي إلى عنوان URL الأساسي» وهو نفس العنوان الذي قمت
بحقنه هناك ثم ننظر مرة أخرى إلى إصدار واجهة برمجة التطبيقات إلى إصدار واجهة برمجة التطبيقات هنا.
لذلك هذين أحتاج إلى تكوين في مكون منزلي
وأيضا أي مكون آخر حيث يمكنني الوصول إلى خادم LoopBack الخاص بي، ولست
بحاجة إلى تكوين هذا.
الآن، يقترح منشئ LoopBack SDK أننا بحاجة إلى
القيام بذلك في كل واحد من المكونات هنا.
أيضا، ستلاحظ أنه إذا ذهبت إلى ملف module.ts التطبيق في ملف module.ts التطبيق،
فقد أزلت جميع مدخلات جميع الخدمات الأخرى وبدلاً من ذلك أقوم
باستيراد هذا هنا يسمى وحدة متصفح SDK من مشاركة SDK هنا.
وحدة متصفح SDK هنا،
وإذا ذهبت إلى المدخلات هنا،
سترى أنني قمت بتكوين وحدة متصفح SDK هذه. Forroot هنا في المدخلات.
لذلك يتم تكوين وحدة متصفح SDK هذه تلقائيًا عندما نبني LoopBack SDK الخاصة بنا
ونحتاج فقط إلى استيراد ذلك إلى
ملف module.ts الخاص بنا ونلاحظ أيضًا أن مقدمي الخدمة،
هذا هو المكان الذي قمنا بتكوين خدماتنا،
لا يحتوي على أي من الخدمات بعد الآن لأن ذلك
كجزء من SDK LoopBack الخاص بي،
لذا فإن الشيء الوحيد الذي أقوم بتوفيره هو عنوان URL الأساسي هنا.
لقد أزلت جميع تلك الأخرى من ملف module.ts التطبيق الخاص بي هنا.
لذا، هذا تغيير واحد ستلاحظه.
وبالمثل، إذا ذهبت إلى ملف حول component.ts، ملف
dishDetaille
component.ts، ملف component.ts المفضل وكذلك ملف مكون القائمة.
لذلك دعونا ننظر إلى ملف.ts مكون القائمة.
لذلك سترى هنا مرة أخرى أنا استيراد هذا
أربعة ثم في عنصر القائمة بلدي أقول،
أطباق خدمات طبق أبي ومن ثم أنا
تكوين لوبباككونفيغ مجموعة باسيورل سيتابي الإصدار.
لقد فعلت ذلك بالفعل في مستودع Angular الذي قدمته
لك للتطبيق الزاوي لخادم
LoopBack، وسترى أيضًا أنني قمت ببعض التعديلات هنا.
حتى إذا كنت ترغب في العثور على جميع العناصر من خدمة الطبق لذلك كنت أقول ببساطة
dishService.Find والتي سوف يعود
جميع الأطباق التي هي هناك في بلدي خادم الاسترجاع هنا.
إذاً هذا ما أسترده هنا
وبالتالي فإن بقية التعليمات البرمجية يجب أن تبدو مألوفة هنا إلا أن هنا أدعو
الأطباق يساوي الأطباق ومجموعة من الأطباق هنا.
لذلك هذا هو التغيير الذي ستراه في مكون القائمة.
الآن، يجب أن تتساءل كيف تعمل مصادقة المستخدم في هذه الحالة.
لمصادقة المستخدم، اسمحوا لي أن ألفت انتباهكم إلى
مكانين حيث يمكنني الاستفادة من مصادقة المستخدم.
دعونا أولا انتقل إلى مكون تسجيل الدخول.
لذا، في مكون تسجيل الدخول،
سترى أنه في مكون تسجيل الدخول أقوم باستيراد هذين الاثنين هنا،
واجهة برمجة تطبيقات العميل وهي الخدمات التي تسمح لي بإجراء
مصادقة المستخدم وتسجيل الدخول وتسجيل الخروج،
وكذلك أقوم باستيراد نموذج العميل
والوصول إلى نموذج الرمز المميز في مكون تسجيل الدخول،
سترى أنه من خلال خدمة Auth الآن ليست سوى واجهة برمجة تطبيقات العميل،
وستلاحظ أيضًا أنه في مكون تسجيل الدخول عند إرسال نموذج تسجيل الدخول،
أدعو هذا authService.Login.
وظيفة تسجيل الدخول هذه المتوفرة من خلال API العميل.
أذكر عندما حاولنا تسجيل الدخول باستخدام مستكشف واجهة برمجة تطبيقات LoopBack rest،
كنا نستخدم نقطة نهاية العميل لتسجيل الدخول إلى النظام.
لذلك هذا هو بالضبط ما أفعله في التعليمات البرمجية هنا.
لذلك سنقول هذا authService.Login وهنا ترى
أنه يأخذ هذه المعلمات المجانية هنا،
واسم المستخدم وكلمة المرور ككائن جافا سكريبت الأول هنا،
وبعد ذلك أنا أيضا تحديد هذا user.dember.،.
تذكر هو العلم من مربع الاختيار تذكرني الذي لدينا في حوار مكونات تسجيل الدخول هناك.
لذلك، عندما يتحقق المستخدم من أنه في معلومات المستخدم سوف
تستمر تلقائيا من قبل سك.
خدمة المصادقة التي يتم توفيرها داخل SDK.
لذا، ترى الآن أنني لست بحاجة إلى
تنفيذ أي خدمة تخويل
متاحة تلقائيًا لي من خلال
واجهة برمجة تطبيقات العميل المتوفرة كخدمة هنا.
لذلك، هذه هي الطريقة التي أقوم بتسجيل دخول المستخدم هنا،
وعندما يقوم المستخدم بتسجيل الدخول في هذا سيعود
كائن جافا سكريبت ومن كائن جافا سكريبت أحصل على
res.user.. المستخدم يزود معلومات المستخدم بالنسبة لي وأنا
ببساطة إرسال هذا إلى بلدي هيدركومبوننت هنا.
حتى الذهاب إلى هيدركومبوننت.
لذا دعنا نذهب إلى مكون الرأس،
وفي ملف HeaderComponent.ts،
سترى أنه مرة أخرى هنا أقوم باستيراد واجهة برمجة تطبيقات
العميل والعميل هنا، وستلاحظ أيضًا أنه في واجهة برمجة تطبيقات العميل،
أحدد هنا ملاحظة أنني أقول
هذا العميل هو هذا AuthService جيتكاشيدكرنت.
لذلك إذا تم تأمين المستخدم في
المستخدمين المسجلين حاليا يتم إرسال معلومات في AuthService التي ليست سوى واجهة برمجة تطبيقات العميل.
لذلك، عندما أدعو هذا getCachedCurrent هذا سيعود المستخدم الذي تم تسجيل دخوله حاليًا.
إذا لم يتم تسجيل دخول أي مستخدم،
سيؤدي ذلك إلى إرجاع قيمة فارغة.
لذلك هذه إحدى الطرق التي يمكنني التحقق منها لمعرفة ما إذا كان المستخدم قد قام بتسجيل الدخول حاليًا أم لا.
لذا، إذا تم تسجيل دخول المستخدم حاليًا،
فسيحصل هذا العميل على معلومات حول العميل الذي تم تحميله.
معلومات العميل بما في ذلك الاسم الأول واسم العائلة
والبريد الإلكتروني وملف تعريف المستخدم الآخر ستكون متاحة لهذا الكائن.
لذلك، هنا أنا التحقق للتأكد من أن هذا.customer ليست فارغة.
إذا لم يكن فارغًا، فسأحفظ اسم المستخدم إلى
هذا.customer.username وبهذه الطريقة عند
تعيين اسم المستخدم،
فسيعكس رأسي في شريط الأدوات في HeaderComponent اسم المستخدم هناك.
الآن، لتسجيل الخروج من المستخدم كل ما أفعله هو أنا تعيين اسم المستخدم
ومتغيرات العميل إلى فارغة ثم أنا ببساطة دعا authService.log،
أوثسيرفيسز هو كوستومرابي.لوغوت، وهذا هو كيف يمكنني تسجيل الخروج من المستخدم.
عندما يقوم المستخدم بتسجيل الخروج،
يتم تدمير بيانات الاعتماد الخاصة به.
الآن، يتم الاعتناء بكل هذا تلقائيًا من خلال خدمة واجهة برمجة تطبيقات العملاء
المتوفرة في SDK LoopBack الذي قمت بإنشائه هناك للتو.
لذلك، لاحظت أن كيف يقوم LoopBack SDK Builder ببناء
الخدمات والنماذج وكل ما أحتاجه وفي تطبيق Angular الخاص بي،
أنا فقط أقوم باستيراد تلك ثم الاستفادة
منها لتكوين تطبيق Angular الخاص بي.
لذا، بمجرد إنشاء
SDK LoopBack باستخدام LoopBack SDK Builder، يتم
تنفيذ المكونات وقوالب العرض الخاصة بهم التي تجلس كل ما تبقى.
يتم بناء الخدمات تلقائيا بالنسبة لي من قبل لوباك سك منشئ،
يتم بناء النماذج تلقائيا بالنسبة لي وكل ما أحتاج إلى القيام به هو
مجرد استيراد تلك إلى جميع المكونات حيث أحتاج إلى الاستفادة منها.
لذا، لاحظ كيف تم تحديث هذا التطبيق Angular للاستفادة من SDK LoopBack.
الآن إذا كنت تريد المزيد من المعلومات حول كيفية استخدام LoopBack SDK،
فيمكنك أيضًا التحقق من الوثائق التي يوفرها LoopBack SDK Builder.
لذلك، إذا ذهبت إلى منشئ LoopBack SDK،
يتوفر رابط لهذا في الموارد الإضافية لهذا الدرس،
وفي منشئ LoopBack SDK،
سيكون لديك جميع المعلومات التي تحتاجها
للاستفادة من SDK الذي تم إنشاؤه بواسطة منشئ LoopBack SDK.
لذلك إذا ذهبت إلى وثائق ويكي.
في وثائق ويكي الكثير من الشرح لكيفية استخدام منشئ LoopBack SDK
أو SDK الذي تم إنشاؤه بواسطة منشئ LoopBack SDK معطى هنا.
لذا، ذهبت للتو من خلال هذه الوثائق لمعرفة كيفية
الاستفادة من SDK الذي تم إنشاؤه بواسطة LoopBack SDK Builder،
ثم إعادة تكوين تطبيق Angular الخاص بي للاستفادة من
ذلك للتفاعل مع خادم LoopBack الخاص بي.
لذلك مع هذا، قمت بإظهار ذلك بسرعة
لك كيف يمكنك بناء تطبيق Angular الخاص بك
والاستفادة من SDK الذي تم إنشاؤه بواسطة LoopBack SDK Builder من
أجل الوصول إلى خادم LoopBack الخاص بك من داخل تطبيق Angular الخاص بك.
سيكون نهج مماثل مناسبًا أيضًا للتطبيق الأيوني الخاص بك.
بالنسبة لتطبيق Native Script، يمكنك إنشاء SDK باستخدام NG2 الأصلي في
سطر الأوامر بدلاً من ويب NG2 كما استخدمناه عند إنشاء SDK هذا.
مع هذه المقدمة السريعة لكيفية الاستفادة من
LoopBack SDK Builder لبناء SDK ومن
ثم الاستفادة منه في تطبيق Angular الخاص بنا،
فإنها تأتي إلى نهاية هذا التمرين.