في هذا التمرين، سنستخدم عميل HTTP Angular
للتواصل مع خادم JSON الذي قمنا بإعداده بالفعل في التمرين السابق.
سنكون قادرين الآن على تنزيل البيانات من الخادم إلى تطبيقنا الزاوي باستخدام
عميل HTTP ومن ثم الاستفادة من البيانات من أجل
بناء وجهات النظر المختلفة داخل مكوناتنا.
في هذا التمرين، سنقوم بإعادة تكوين خدمة الطبق لتكون قادرة على
الذهاب وجلب البيانات حول الأطباق من خادم JSON.
كجزء من
مهمتك، سوف تكمل اثنين المتبقية،
خدمة الزعيم وخدمة الترويج.
سنرى كيف يمكننا الاستفادة من عميل HTTP الذي سيعيد ملاحظته لنا.
لقد قمنا بالفعل بإعادة تكوين تطبيقنا،
وخاصة الخدمة لتكون قادرة على تقديم الملاحظات إلى مكوناتنا.
ضمن مكوناتنا، نحن نشترك في هذه الملاحظات.
لذا، فإن الجزء الرئيسي من الإعداد
للحصول على البيانات من الخدمة إلى المكون موجود بالفعل.
سنقوم بتعزيزه قليلاً للتعامل مع الأخطاء في التمرين التالي.
خطوتنا الأولى في إعداد تطبيق Angular لاستخدام
عميل HTTP للوصول إلى الخادم هي
تكوين تطبيقنا باستخدام HttpClientModule.
لذلك، للقيام بذلك، افتح app.module.ts.
ثم، هنا، دعونا استيراد
هتبكلينتمودول من الزاوية/كومون/هتب.
بمجرد استيراد ذلك،
فإننا سنمضي قدما وتكوين الديكور نغمودول
في الواردات مع هتبكلينتمودول.
الآن، تطبيقنا جاهز للاستفادة من HttpClientModule للوصول إلى الخادم.
الآن، تأكد من أن خادم JSON قيد التشغيل
ويخدم البيانات بحيث يمكن للتطبيق الخاص بنا
التواصل مع تطبيق خادم JSON.
الآن بعد أن وصلنا
إلى البيانات من جانب الخادم، فمن الممارسات الجيدة إنشاء قيمة خاصة تشير إلى
baseURL الخاص بالخادم الخاص بك
بحيث يمكن تكوينه داخل التطبيق الزاوي الخاص بك عند الاقتضاء.
لذلك، والذهاب إلى المجلد المشترك،
وأنا ذاهب إلى إنشاء ملف جديد هنا اسمه baseurl.ts.
ثم، ضمن هذا الملف،
سوف أقوم بتضمين ثابت وتصديره والثابت المسمى
باسيورل، والذي سأقوم بتعيينه إلى هتب://لوكالهوست: 3000.
لذلك، كما تتذكر، هذا هو BaseUrl الذي يمكن الوصول إليه خادم JSON الخاص بي.
لذلك، المضيف المحلي: 3000/، هناك.
لذلك، مع هذا،
اسمحوا لي حفظ التغييرات على BaseUrl.
الآن، يوفر الزاوي طريقة لتوفير قيم مثل
هذه لبقية التطبيق الخاص بك عن طريق تكوين مزود داخل وحدة التطبيق الخاصة بك.
لذلك، انتقل إلى وحدة التطبيق،
لتمكيننا من توفير ذلك baseURL معين،
سنقوم أولاً باستيراد قيمة BaseUrl في تطبيقنا الزاوي.
لذلك، أود أن أقول استيراد BaseUrl من المشاركة/baseurl.
يمكن الآن إتاحة هذه القيمة
لبقية طلبي بالذهاب إلى مقدمي الخدمات.
ثم، بالإضافة إلى ليدرسرفيس،
إذا قمت بتكوين قيمة مثل هذا،
أود أن أقول توفير
ثم باسيورل، أوسيفالو.
لذا، بهذه الطريقة، سأقوم بتوريد قيمة BaseUrl هذه
كمزود قيمة من داخل وحدة التطبيق إلى بقية تطبيقي الزاوي.
في الخطوة التالية،
سنقوم بتكوين DishService الخاص بنا من أجل السماح لها بالوصول إلى جانب الخادم،
ومن ثم الحصول على البيانات من جانب الخادم،
ومن ثم جعل البيانات متاحة لمكوناتنا.
الآن، نحن ذاهبون للذهاب إلى ديشسرفيس.
ثم، في ديشسرفيس،
لم تعد هناك حاجة لهذه الأطباق من الملف المحلي هناك.
أنا ذاهب لتحميل تلك البيانات من جانب الخادم.
لذلك، أنا ذاهب لإزالة ذلك ومن ثم إضافة في استيراد
هتبكلينت من الزاوي،
كل هتب مشترك،
استيراد باسيورل من،
أذكر أن هذا هو في مشاركة/باسورل.
الآن، داخل ديشسرفيس،
أنا ذاهب للذهاب وجلب البيانات من جانب الخادم.
لذا، في المُنشئ،
سأقوم بتحديث المُنشئ عن طريق
حقن HttpClient في مُنشئ بلدي هنا.
لذا، الآن، يجب إعداد DishService الخاص بي
للحصول على البيانات من جانب الخادم وإرجاع البيانات إلى طلبي.
الآن، لاحظت أن
طريقة getDubishes قد تم إعدادها بالفعل لإرجاع الملاحظ إلى المكون.
لذلك، تم إعداد هذا الجزء بالفعل.
الآن، ما سيعود إليه هذا هو ما يحصل عليه من
طريقة الحصول على HTTP
التي سنطلق عليها جانب الخادم.
لذلك، من أجل استدعاء جانب الخادم،
وسوف تضطر إلى توفير،
ضمن طريقة الحصول على،
باسيورل التي
حصلت عليها بالفعل، ومن ثم الأطباق.
لذا، بهذه الطريقة، فإن طريقة الحصول على HTTP ستحصل على البيانات من المضيف المحلي: 3000/days.
لذلك، هذا هو عنوان URL من جانب الخادم
الذي يمكنك من خلاله إحضار بيانات الأطباق هنا. هذا هو
سيقوم الخادم الخاص بي بتوفير البيانات في شكل
ملاحظة لهذه الخدمة عند استدعاء طريقة الحصول على HTTP،
وسيتم إرجاعها إلى المكون من خلال طريقة getDubishes.
هذا حول هذا الموضوع الآن، يتم إعداد خدمتي للذهاب
وجلب البيانات من جانب الخادم ثم إرجاع البيانات إلى المكون الخاص بي.
أنا ذاهب لتحديث الأساليب المتبقية أيضا بطريقة مماثلة.
لذا، ما سأفعله للطريقة التالية لطريقة getDish هو،
سأقوم بنسخ
هذا الجزء ثم ببساطة لصقه في مكانه هنا،
وبعد ذلك سنقوم بتحرير ذلك.
الآن، عندما تحتاج إلى الحصول على طبق معين،
لديك معرف الطبق الذي هو متاح لك.
لذلك، سنقول معرف GetDish متاح كمعلمة.
لذلك، إلى الأطباق،
وأنا ذاهب لإضافة معرف كمعلمة أخرى هنا.
الآن، عندما أتلقى الاستجابة ثم
إعادته إلى المكون من خلال استدعاء الأسلوب getDish.
وبالمثل، بالنسبة للطبق المميز،
ستكون طريقة مثيرة للاهتمام بعض الشيء لتكوينه.
الآن، بالنسبة للطبق المميز،
عندما تحتاج إلى الوصول إلى البيانات من جانب الخادم،
ما سأقوم به هو، الآن،
عندما أسأل عن طبق مميز، الآن،
الطريقة التي يتم بها إعداد جانب الخادم هو أنه يمكنني إرسال
معلمة الاستعلام داخل عنوان URL الخاص بي حتى أتمكن من قول الأطباق؟
ثم أقول مميزة مساوية لصحيح.
لذا، بهذه الطريقة، سيعود الخادم الخاص بي
فقط تلك الكائنات التي تم تعيين العلامة المميزة لها إلى true،
أو يتم تعيين الخاصية المميزة إلى true على جانب الخادم.
الآن، هذه هي الطريقة التي يتم بها إعداد جانب الخادم.
الآن، مرة أخرى، بمجرد الحصول على البيانات،
فإنك ببساطة تقوم بتعيين القيمة ثم ترجع ذلك
كعنصر يمكن ملاحظته إلى مكونتي من خلال طريقة الطبق المميزة.
عند الاستعلام عن جانب الخادم باستخدام معلمة الاستعلام،
فإنه سيتم إرجاع صفيف من الكائنات التي تتطابق.
في هذه الحالة، يحدث أن يحتوي الصفيف على عنصر واحد بالضبط هناك.
ولكن عندما أعيد القيمة بعد الحصول على النتيجة،
أحتاج أيضًا إلى تضمين صفر هناك لأن هذا مصفوفة،
لذلك أحتاج إلى إرجاع العنصر الأول من الصفيف.
قبل أن أنسى، اسمحوا لي استيراد
مشغل الخريطة من مشغلي rxjs.
الآن، بالنسبة لآخر واحد، GetDishids،
ما سأقوم به هو الاستفادة من حقيقة أن
لدي بالفعل طريقة getDishids المتاحة لي.
لذلك، عندما ترجع طريقة getDuses،
سأقوم بتعيين ذلك مع مشغل الخريطة
كما dishes.map، dish.dish معرف
لذا، بهذه الطريقة، أنا عائد فقط القيمة التي أحتاجها،
فقط معرفات الطبق من خلال هذه الطريقة هنا.
هذا حول هذا الموضوع
الآن، يتم تحديث خدمة طبق بلدي تماما للذهاب وجلب البيانات من
موقع الخادم ومن ثم توفير البيانات إلى مكوناتي في بلدي.
تطبيق الزاوي هنا.
في الخطوة التالية،
سأذهب إلى مكون القائمة.
ثم داخل مكون القائمة،
سأستخدم واجهة الحقن المتوفرة من خلال
النواة الزاوي لحقن هذا baseURL التي حصلت عليها هناك.
إذاً، كيف نستفيد من ذلك؟
ضمن منشئ المكون الخاص بي،
سأذهب وأقول،
"@Inject" لذا، أذكر أننا قد أنشأنا
هذا baseURL كمزود لهذه القيمة في وحدة التطبيق في وقت سابق.
لذلك، يمكن الآن حقن baseurl في المكون مثل هذا هنا.
الآن، عندما يكون لديك خدمة،
فأنت تقوم بحقن خدمات مثل هذه هنا،
ولكن عندما يكون لديك قيمة،
فإنك تقوم بحقن القيمة باستخدام الديكور "@Inject".
هنا، نحن نحدد قيمة الموفر التي حددناها هناك.
قلنا، تقديم: Baseurl هناك،
لذلك هذه هي القيمة التي نوفرها هنا.
ثم، وأنا أعلن هذا على أنه باسورل الخاص.
حتى الآن، ضمن شفرتي هنا،
هذا باسيورل متاح لتكوين كل ما أحتاجه داخل طلبي هنا.
بينما ما زلت هنا،
سأقوم بإزالة هذا الطبق المحدد الذي لا يتم استخدامه أيضًا داخل طلبي.
ثم، هذه الطريقة أيضا أنا لا تستخدم مع طلبي،
لذلك اسمحوا لي أن تفعل قليلا من التنظيف بينما ما زلت هنا.
ستبقى الطريقة التي نعالج بها البيانات التي حصلنا عليها من الخدمة كما هي بالضبط.
لأن خدمتي لا تزال تعود ويمكن ملاحظتها،
وأنا أشترك في الملاحظة داخل هذا المكون.
لذلك، هذا الجزء لا يتغير على الإطلاق.
الآن، السبب في أنني حقن baseurl داخل المكون الخاص بي هو أنه،
في قالب بلدي هنا،
وأنا الحصول على صورة الطبق هنا.
الآن، ولكن يجب الحصول على صورة الطبق هذه من الخادم الخاص بي هناك،
من خادم JSON هناك.
لذلك، أنا بحاجة للذهاب في ومن ثم تحديث هذا المصدر ليقول،
باسيورل بالإضافة إلى صورة طبق.
لذلك، أحتاج إلى توفير عنوان URL الكامل لتلك الصورة هناك.
لذا، يجب أن يكون ذلك، httlp://localhost:3000/images/، أيا كان.
لذلك، هذا هو السبب في أنني بحاجة إلى توفير
قيمة باسيورل بالإضافة إلى صورة الطبق هنا.
لذلك، هذا أنا ذاهب إلى أرفق بين علامات الاقتباس،
لذلك هذه هي الطريقة تعبير مثل هذا داخل الاستيفاء سوف تعمل بشكل صحيح.
لذا، أرفق هذا ضمن علامات الاقتباس ثم قم بتزويده كقيمة مصدر،
ثم ترى أنك تستخدم BaseUrl بالإضافة إلى صورة الطبق،
وdish.image، تحتوي خاصية الصورة على عنوان URL الجزئي فقط.
لذلك، فإنه يحتوي على الصور مائلة واسم الملف image.png.
لذا، هذا هو السبب في أنني بحاجة إلى إلحاق http://localhost:3000/،
إلى خاصية صورة الطبق تلك بحيث أقوم بإنشاء عنوان URL الكلي لصورتي.
لذلك، مع هذا، يتم الآن إعداد مكون القائمة الخاص بي بالكامل
للحصول على كافة البيانات من جانب الخادم.
الآن، وبالمثل، أود أن أقترح عليك تحديث
مكون تفاصيل الطبق وأيضا مكون المنزل.
الذهاب إلى مكون تفاصيل الطبق،
استخدم الحقن هناك،
ثم الذهاب إلى المنشئ،
في المنشئ، والآن أحتاج إلى استخدام
حقن baseURL و baseURL هناك،
وهكذا، يتم إعداد مكون تفاصيل الطبق الخاص بي الآن للحصول على البيانات من خدمة الطبق.
لذلك، فإن هذا الجزء لم يعد يتغير،
فإنه لا يزال هو نفسه تماما لأن خدمة الطبق بلدي هو ببساطة
إرجاع ملحوظ وأنا الاشتراك في ذلك يمكن ملاحظتها هنا.
أنا أيضا بحاجة إلى تحديث ملف قالب مكونات تفاصيل الطبق،
لذلك الذهاب بالمثل إلى مصدر الصورة هنا،
وأود أن أضيف باسيورل بالإضافة إلى صورة الطبق ومن ثم وضع ذلك ضمن الاقتباسات هناك.
وبالمثل، الذهاب إلى مكون المنزل، نفس الشيء.
سأقوم بعمل حقنة،
وفي المنشئ
أقوم بحقن baseurl،
والذهاب إلى ملف قالب المكونات الرئيسية،
وبالمثل حيث أستخدم صورة الطبق هنا،
لذلك سأقول، BaseUrl بالإضافة إلى صورة الطبق،
ثم أرفقه ضمن علامات الاقتباس هنا،
ثم حفظ التغييرات.
إذاً، هذا كل شيء يتم تحديث طلبي الآن لاستخدام
الخادم للحصول على البيانات للأطباق.
لذلك، دعونا نذهب ونرى التطبيق في المتصفح.
الذهاب إلى المتصفح،
يمكنك الآن أن ترى أنه داخل المتصفح الخاص
بي، يتم تقديم الطبق الخاص بي بالضبط كما كان من قبل،
ومن ثم الذهاب إلى مكون القائمة،
ترى أن القائمة تجعل بالضبط كما كان من قبل ومكون تفاصيل الطبق،
كما يتم تقديم تفاصيل الطبق بالضبط كما كان من قبل.
لذلك، مع التغيير الذي أدخلناه عن طريق الوصول إلى البيانات من جانب الخادم،
ونحن قادرون على جلب البيانات من جانب الخادم ومن ثم
تقديم البيانات داخل تطبيق Angular الخاص بنا.
من أجل إقناعك بأن البيانات يتم الحصول عليها بالفعل من خادم JSON الخاص بي،
دعنا نذهب إلى المحطة الطرفية ثم نرى السجل على نافذة المحطة الطرفية هناك.
الذهاب إلى المحطة حيث يتم تشغيل خادم JSON الخاص بي،
يمكنك أن ترى أنني قمت بالفعل بتنفيذ مجموعة من طلبات Git
من موقع الخادم الخاص بي للحصول على جميع البيانات التي أحتاجها داخل طلبي.
لذلك، في الواقع بلدي التطبيق الزاوي هو الآن جلب جميع البيانات
من موقع الخادم لجميع الأطباق داخل بلدي تطبيق الزاوي.
الآن، يمكنك استخدام نفس النهج لتحديث
أحدث خدمة وأيضا خدمة الترويج،
ولكن سوف نؤجل ذلك حتى المهمة النهائية في هذه الدورة،
ولكن هذا قد يكمل هذا التمرين.
في هذا التمرين، تعلمنا كيفية
الاستفادة من عميل HTTP من أجل الحصول على البيانات من
موقع الخادم ومن ثم استخدام البيانات في بناء
طرق العرض داخل مكونات تطبيق Angular الخاص بنا.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة هتب الجزء الأول.