حان الوقت للبدء في المهمة الأولى في هذه الدورة.
في هذه المهمة، سوف تعمل مع المكونات الزاوي.
ستقوم بإنشاء مكون جديد يسمى
dishdetaille لإضافته إلى التطبيق الزاوي الخاص بك
، وسوف تقوم بتحديث القالب الخاص به، بحيث يظهر تفاصيل طبق معين.
في وقت سابق، في التمرين السابق، قدمنا بطاقة في مكون القائمة لدينا.
سنقوم بإزالة تلك البطاقة، وبدلاً من ذلك قم بتضمين
مكون dishdetaille بدلاً من تلك البطاقة بحيث
يتمكن مكون dishdetaille من عرض معلوماته
في ذلك الجزء من الشاشة.
مهمتك الأولى هي إنشاء مكون dishdetaille.
في نهاية المهمة الأولى، بمجرد إنشاء مكون dishdetails،
ثم، في ملف قالب مكونات القائمة،
ستقوم باستبدال تلك البطاقة بواسطة محدد
مكون dishdetaille الموجود هناك،
بحيث يتم عرض تفاصيل مكون dishdetaille
بشكل صحيح أسفل القائمة في مكون القائمة.
لقد رأينا بالفعل كيف يمكنك إضافة هذا
المحدد من مكون واحد إلى مكون آخر.
عندما أنشأنا مكون القائمة،
قمنا بتضمين ذلك في مكون التطبيق،
بحيث في نهاية المهمة الأولى، ستكون هذه النتيجة على متصفحك
، حيث بدلاً من البطاقة التي تعرض تفاصيل الطبق،
سترى هذه الكلمات المسماة «يعمل dishdetaille!» في أسفل الصفحة.
بمجرد إكمال هذا، ستقوم بتنزيل
ملف قالب مكونات dishdetaille تم تكوينه مسبقًا مع بعض القطع المفقودة،
ثم استبداله في مكانه في قالب مكون dishdetaille الخاص بك.
بمجرد استبدال قالب مكون dishdetaille المزود
، سترى الصفحة محدثة على هذا النحو.
لذلك، سترى جزأين في الصفحة هنا، واحد الذي يقول
«عرض تفاصيل الطبق هنا.»
سوف تستخدم مكون بطاقة لإنشاء تفاصيل الطبق،
وعرض هذا الطبق هنا.
بالإضافة إلى ذلك، ستعرض أيضًا مجموعة من التعليقات حول الطبق
في الجزء الثاني من هذا المكون هنا.
الآن، للبدء، في تعليمات التعيين،
لقد زودت لك كائن جافا سكريبت جديد
يحتوي على تفاصيل الطبق،
بما في ذلك التعليقات حول هذا الطبق.
أنت ذاهب لاستخدام هذه المعلومات من أجل بناء
هذين: مكون بطاقة لعرض
تفاصيل الطبق، وقائمة التعليقات هنا.
مهمتك الثانية هي تحديث
ملف TypeScript لتضمين متغير الطبق الجديد هناك،
ثم استخدم متغير الطبق مع مكون البطاقة،
ثم قم بإعداد مكون البطاقة هنا لعرض تفاصيل الطبق.
بمجرد إكمال المهمة الثانية،
في التطبيق الخاص بك سترى أنه،
أسفل القائمة مباشرة، سترى تفاصيل
معلومات طبق معين يتم عرضها في بطاقة مثل هذا هنا،
حتى تتمكن من رؤية العنوان،
والصورة، وأيضا وصف القيام به أدناه هنا.
الآن، بعد إكمال هذا، ثم سوف تنتقل إلى المهمة الثالثة.
في المهمة الثالثة، سوف تستخدم التعليقات التي يتم تضمينها أيضًا داخل
الطبق الذي قدمناه لك في كائن JavaScript،
ثم استخدم ذلك لإنشاء وعرض قائمة بالتعليقات هنا.
في نهاية المهمة الثالثة،
هذا هو ما ستراه يتم عرضه على الجانب الأيمن من الطبق الخاص بك.
يمكنك أن ترى أن لديك رأس هنا مع
كلمة «التعليقات»،
ومن ثم لديك قائمة من التعليقات التي يتم عرضها هنا.
تتوفر المعلومات الخاصة ببناء هذه التعليقات داخل
كائن جافا سكريبت الطبق الذي قدمناه لك. على
وجه الخصوص، لاحظ أن هذا هو التعليق الفعلي،
وهذا هو عدد النجوم المعطاة لهذا التعليق،
وهذا هو المكان الذي نعرض فيه اسم المؤلف مع شرطتين في المقدمة،
ونلاحظ، في النهاية، نعرض التاريخ هنا.
لكي تتمكن من بناء هذا التاريخ هنا،
تحتاج إلى استخدام أنبوب زاوي اسمه التاريخ.
لقد رأينا بالفعل استخدام أنبوب مدمج يسمى الأحرف الكبيرة
في التمرين السابق،
لذلك يمكنك ببساطة استخدام أنبوب التاريخ من أجل إنشاء هذا
التاريخ ليتم عرضه على يمين اسم المؤلف هنا.
لذا، هذه هي التلميحات لتبدأ
بهذه المهمة الثالثة في مهمتك الأولى.
المتعة الانتهاء من المهمة الأولى.
مهما كانت الموارد التي تحتاجها،
فإن ملف قالب نصف مكتمل مسبقًا
وكائن جافا سكريبت
للطبق كلاهما متاحان في التعليمات الخاصة بهذا الواجب.