الآن بعد أن أكملنا تطوير خادم REST API كامل باستخدام Loopback،
فإن السؤال التالي الفوري الذي سينشأ في ذهنك هو،
كيف يمكننا تكييف تطبيق React للاستفادة من خادم REST API هذا؟
كما فعلنا في الحالات السابقة،
سنحتاج أيضًا إلى إعادة تكوين تطبيق React الخاص بنا للاستفادة على وجه التحديد من
نقاط نهاية REST API
وطلبات REST API المختلفة كما هو موضح بواسطة خادم Loopback الخاص بنا.
للبدء في هذا التمرين، أولاً،
استنساخ مستودع git الذي
يحتوي على إعادة تطبيق مكتمل يتصل بخادم Loopback الخاص بنا.
لذلك، للقيام بذلك، انتقل إلى موقعك المناسب على أجهزة الكمبيوتر الخاصة بك.
سأقوم باستنساخ مستودع git عن طريق
كتابة git clone
https://github.com/jmuppala/conFusion-React-Loopback.git،
ثم استنساخ مستودع git هذا.
بمجرد استنساخ مستودع git،
سننتقل إلى مجلد Confusion-React-Loopback
ثم ننفذ تثبيت الغزل لتثبيت جميع وحدات العقدة لهذا التطبيق.
قبل بدء تشغيل تطبيق React،
تأكد من تكوين خادم Loopback بشكل صحيح.
في خادم الاسترجاع،
في مجلد العميل، قم
بنقل الصور التي قدمناها كملف images.zip،
وفك ضغطه، ثم قم بنقل الصور إلى
مجلد الصور تحت مجلد العميل كما هو موضح هنا.
أيضا، إعادة تسمية الملف root.js كما root.jpباع أو حذف الملف root.js.
نحن لا نحتاج إلى هذا بعد الآن في تطبيقنا لأننا نريد التأكد من أن
خادمنا يقوم بحفظ المحتويات من مجلد العميل.
لذلك، لتحقيق ذلك،
دعونا فتح ملف middleware.json،
وفي ملف middleware.json،
في جزء الملفات،
أضف هذا إلى جزء الملفات من ملف middleware.json الخاص بك.
لذلك، سنقول، استرجاع ثابت ومعلمات: الدولار البنك نقطة نقطة شرطة مائلة العميل»،
مشيرا إلى أن خادم الاسترجاع الخاص بك سيوفر
محتوى ثابت من مجلد العميل هنا.
بعد إجراء هذه التغييرات،
يمكنك تشغيل الخادم الخاص بك.
تأكد من أن خادم MongoDB الخاص
بك قيد التشغيل أيضًا قبل تشغيل خادم Loopback.
ثم، بعد ذلك، سنقوم بعد ذلك بتجميع وإطلاق عميل React الخاص بنا.
الآن، مرة أخرى التأكد من أن خادم MongoDB وخادم Loopback الخاص بك قيد التشغيل،
انتقل إلى المحطة وأضف المحطة الطرفية.
اكتب الغزل تبدأ لبدء تطبيق الاسترجاع لدينا، تطبيق React.
لذلك، عندما يتم تشغيل التطبيق في المتصفح،
ستلاحظ أن تطبيق React القائم على
Loopback يتصرف تمامًا مثل الإصدارات السابقة من تطبيق React.
لذلك، هنا لدينا الصفحة الرئيسية،
ثم لدينا صفحة حول لنا كما نرى هنا،
ثم صفحة القائمة حيث يتم سرد عناصر القائمة هنا،
صفحة اتصل بنا كما هو متوقع.
ثم اسمحوا لي أن أعود إلى الصفحة الرئيسية ثم تسجيل الدخول نفسي كمسؤول.
لذلك، دعونا تسجيل الدخول كمسؤول،
وبعد ذلك سوف تكون قادرة على رؤية المفضلة.
قمت بتسجيل الدخول في وقت سابق ثم قمت بإضافة عنصر واحد إلى المفضلة.
دعنا نذهب الآن إلى القائمة ثم نضيف عنصرًا ثانيًا إلى «المفضلة».
لذلك، هنا سنقوم بإضافة هذا العنصر إلى المفضلة،
وبعد ذلك سوف تكون قادرا على رؤية أن كل من هذه العناصر هي الآن في المفضلة.
وبالمثل، يمكنك حذف العناصر من المفضلة.
لذلك، دعونا المضي قدما وحذف هذا من المفضلة لدينا.
بالعودة إلى عنصر القائمة،
دعنا نضيف تعليقًا إلى أحد الأطباق.
لذلك، اسمحوا لي أن أنقر على هذا الطبق،
وبعد ذلك سنقوم بتقديم تعليق.
لذلك، عندما نرسل تعليقًا،
كما ترون، يتم إضافة التعليق إلى
خادمنا هناك كما
هو متوقع وتظهر النتيجة في صفحة تفاصيل الطبق هنا.
وبالعودة مرة أخرى إلى الصفحة الرئيسية،
نجد أن تطبيق React لدينا قادر الآن على التواصل مع
خادم Loopback ومن ثم الحصول
على البيانات من الخادم والتفاعل مع الخادم كما هو متوقع.
الآن، بالطبع، السؤال الذي قد ينشأ في عقلك هو،
كيف يتواصل تطبيق الاسترجاع هذا مع خادم الاسترجاع؟
الآن، هذا هو المكان الذي نود أن نلاحظ أنه بالنسبة إلى الاسترجاع،
نظرًا لأن خادم Loopback يعرض نقاط نهاية REST API، فإن
تطبيق React الخاص بي قادر على الوصول إلى خادم Loopback في
نقاط النهاية REST API المقابلة ثم التواصل مع الخادم،
كما فعلنا مع خادم REST API الخاص بنا التي نفذناها في وقت سابق.
لذلك، دعونا نمضي قدما ونلقي نظرة على رمز تطبيق React المعدل.
الذهاب إلى رمز التطبيق لدينا،
فإن التغييرات الرئيسية التي ستلاحظ ستكون في ملف ActionCreators.js.
هنا، ستلاحظ أننا نتواصل الآن مع خادم
Loopback بدلاً من خادم REST API الذي كان لدينا في وقت سابق.
لذلك، سيتم الآن الوصول إلى خادم Loopback في
نقطة النهاية api/التعليقات أو نقطة نهاية api/الأطباق وهلم جرا.
لذلك، يتم تحديث جميع طلبات الجلب هذه للوصول إلى خادم Loopback الخاص بنا الفوري.
لذلك، ستلاحظ تغييرات مماثلة هناك.
الآن، بالإضافة إلى تسجيل الدخول إلى خادم Loopback الخاص بنا،
لذلك دعونا نذهب إلى رمز تسجيل الدخول هنا.
لذلك، في مستخدم تسجيل الدخول،
ونحن نشر جلب إلى باسيورل و أبي/العملاء/تسجيل الدخول نقطة النهاية،
وبعد ذلك سنقوم بتوفير بيانات الاعتماد في نص رسالة الطلب التي تخرج.
وردا على ذلك،
سيقوم الخادم بإرسال الاستجابة مرة أخرى.
تحتوي الاستجابة بعد ذلك على معلومات الرمز المميز.
يتم إرسال معلومات الرمز المميز مرة أخرى
في شكل معرف رسالة الرد.
لذا، فإن المعرف نفسه بمثابة الرمز المميز.
لذا، فإن رسالة الرد نفسها،
سأقوم بحفظ هذا في التخزين المحلي الخاص بي كما هو موضح هنا.
نقوم بتوثيق رسالة الاستجابة ومن ثم تخزين ذلك هناك.
تحتوي رسالة الاستجابة هذه، Response.id، على الرمز المميز.
لذلك، يعمل response.id كرمز ويب JSON للوصول إلى خادم الاسترجاع.
لذلك، هذا هو السبب في أنك ستلاحظ أنه في
الحالات التي أحتاج فيها إلى الوصول إلى الخادم، لذلك على سبيل المثال،
سنلاحظ أنه عندما نجلب أو ننشر المفضلة لديك إلى الخادم،
ستلاحظ أن أحصل على الرمز المميز بالقول،
دع الرمز المميز، تحليل JSON،
LocalStorage، GetItem، الرمز المميز هنا،
ثم في حقل رأس التخويل،
قلت أن حقل التخويل يجب أن يكون token.id هنا كما هو موضح هنا.
لذا، هذه هي الطريقة التي سنتمكن من مصادقة أنفسنا إلى خادم Loopback.
لذلك، هنا ترى أنه يقول، BaseUrl، api/المفضلة،
ومن ثم الحصول على قائمة المفضلة من الخادم،
ومن ثم حفظه في متجر redux لدينا.
لذلك، حسنا، لا يزال الكثير من التعليمات البرمجية كما هو،
باستثناء التحديثات التي قمنا بها من أجل
الوصول إلى نقاط نهاية أبي Loopbacks ريست.
الآن، بالنسبة إلى Angular، لدينا SDK Loopback يمكن بناؤه لتطبيق Angular الخاص بنا.
ولكن بالنسبة إلى React، لا يوجد مثل هذا الدعم متوفر من Loopback،
ولذا يجب علينا اللجوء إلى الوصول مباشرة إلى
نقاط النهاية Loopback REST API كما هو موضح هنا باستخدام الجلب،
ومن ثم نحن قادرون على التواصل مع خادم Loopback.
مع هذا الفهم السريع لكيفية
تحديث تطبيق React الخاص بنا للوصول إلى خادم Loopback الخاص بنا،
نقوم بإكمال فحص خادم Loopback.
قضاء بعض الوقت في البحث عن بعض المكونات ومعرفة
كيفية استخدام المعلومات التي تم الحصول عليها من خادم Loopback.
ستلاحظ أن معظم المكونات تبقى تمامًا كما كانت من قبل،
باستثناء بعض التعديلات الطفيفة في المكون المفضل للحصول
على المعلومات من خادم Loopback
ثم استخدمها لتقديم قائمة العناصر المفضلة لديك.
بخلاف ذلك، تقتصر الكثير من التغييرات على ملف ActionCreators.js،
حيث قمنا بتحديث الجلب لاستخدام عنوان URL
لخادم Loopback الخاص بنا ليتمكن من الوصول إلى نقاط النهاية المختلفة لـ REST API.
لذلك، مع هذا، لقد أظهرت لك بسرعة كيف يمكنك بناء التطبيق الخاص بك.
مع هذه المقدمة السريعة لكيفية
الاستفادة من الاسترجاع داخل تطبيقنا،
نأتي إلى نهاية هذا التمرين.