1
00:00:03,649 --> 00:00:10,244
حان الوقت للبدء في المهمة الأولى في هذه الدورة.

2
00:00:10,244 --> 00:00:14,564
في هذه المهمة، سوف تعمل مع المكونات الزاوي.

3
00:00:14,564 --> 00:00:18,172
ستقوم بإنشاء مكون جديد يسمى

4
00:00:18,172 --> 00:00:21,690
dishdetaille لإضافته إلى التطبيق الزاوي الخاص بك

5
00:00:21,690 --> 00:00:29,399
، وسوف تقوم بتحديث القالب الخاص به، بحيث يظهر تفاصيل طبق معين.

6
00:00:29,399 --> 00:00:37,645
في وقت سابق، في التمرين السابق، قدمنا بطاقة في مكون القائمة لدينا.

7
00:00:37,645 --> 00:00:41,954
سنقوم بإزالة تلك البطاقة، وبدلاً من ذلك قم بتضمين

8
00:00:41,954 --> 00:00:46,929
مكون dishdetaille بدلاً من تلك البطاقة بحيث

9
00:00:46,929 --> 00:00:53,009
يتمكن مكون dishdetaille من عرض معلوماته

10
00:00:53,009 --> 00:00:56,263
في ذلك الجزء من الشاشة.

11
00:00:56,263 --> 00:01:01,435
مهمتك الأولى هي إنشاء مكون dishdetaille.

12
00:01:01,435 --> 00:01:08,060
في نهاية المهمة الأولى، بمجرد إنشاء مكون dishdetails،

13
00:01:08,060 --> 00:01:11,810
ثم، في ملف قالب مكونات القائمة،

14
00:01:11,810 --> 00:01:18,020
ستقوم باستبدال تلك البطاقة بواسطة محدد

15
00:01:18,020 --> 00:01:19,430
مكون dishdetaille الموجود هناك،

16
00:01:19,430 --> 00:01:23,510
بحيث يتم عرض تفاصيل مكون dishdetaille

17
00:01:23,510 --> 00:01:27,579
بشكل صحيح أسفل القائمة في مكون القائمة.

18
00:01:27,579 --> 00:01:31,564
لقد رأينا بالفعل كيف يمكنك إضافة هذا

19
00:01:31,564 --> 00:01:35,750
المحدد من مكون واحد إلى مكون آخر.

20
00:01:35,750 --> 00:01:37,693
عندما أنشأنا مكون القائمة،

21
00:01:37,693 --> 00:01:41,500
قمنا بتضمين ذلك في مكون التطبيق،

22
00:01:41,500 --> 00:01:48,710
بحيث في نهاية المهمة الأولى، ستكون هذه النتيجة على متصفحك

23
00:01:48,710 --> 00:01:53,454
، حيث بدلاً من البطاقة التي تعرض تفاصيل الطبق،

24
00:01:53,454 --> 00:01:58,920
سترى هذه الكلمات المسماة «يعمل dishdetaille!» في أسفل الصفحة.

25
00:01:58,920 --> 00:02:02,390
بمجرد إكمال هذا، ستقوم بتنزيل

26
00:02:02,390 --> 00:02:09,349
ملف قالب مكونات dishdetaille تم تكوينه مسبقًا مع بعض القطع المفقودة،

27
00:02:09,349 --> 00:02:18,474
ثم استبداله في مكانه في قالب مكون dishdetaille الخاص بك.

28
00:02:18,474 --> 00:02:24,439
بمجرد استبدال قالب مكون dishdetaille المزود

29
00:02:24,439 --> 00:02:31,474
، سترى الصفحة محدثة على هذا النحو.

30
00:02:31,474 --> 00:02:35,692
لذلك، سترى جزأين في الصفحة هنا، واحد الذي يقول

31
00:02:35,692 --> 00:02:39,480
«عرض تفاصيل الطبق هنا.»

32
00:02:39,480 --> 00:02:43,909
سوف تستخدم مكون بطاقة لإنشاء تفاصيل الطبق،

33
00:02:43,909 --> 00:02:47,145
وعرض هذا الطبق هنا.

34
00:02:47,145 --> 00:02:52,009
بالإضافة إلى ذلك، ستعرض أيضًا مجموعة من التعليقات حول الطبق

35
00:02:52,009 --> 00:02:58,444
في الجزء الثاني من هذا المكون هنا.

36
00:02:58,444 --> 00:03:04,270
الآن، للبدء، في تعليمات التعيين،

37
00:03:04,270 --> 00:03:09,710
لقد زودت لك كائن جافا سكريبت جديد

38
00:03:09,710 --> 00:03:11,719
يحتوي على تفاصيل الطبق،

39
00:03:11,719 --> 00:03:15,770
بما في ذلك التعليقات حول هذا الطبق.

40
00:03:15,770 --> 00:03:18,875
أنت ذاهب لاستخدام هذه المعلومات من أجل بناء

41
00:03:18,875 --> 00:03:21,740
هذين: مكون بطاقة لعرض

42
00:03:21,740 --> 00:03:26,944
تفاصيل الطبق، وقائمة التعليقات هنا.

43
00:03:26,944 --> 00:03:32,699
مهمتك الثانية هي تحديث

44
00:03:32,699 --> 00:03:39,349
ملف TypeScript لتضمين متغير الطبق الجديد هناك،

45
00:03:39,349 --> 00:03:45,379
ثم استخدم متغير الطبق مع مكون البطاقة،

46
00:03:45,379 --> 00:03:52,710
ثم قم بإعداد مكون البطاقة هنا لعرض تفاصيل الطبق.

47
00:03:52,710 --> 00:03:55,400
بمجرد إكمال المهمة الثانية،

48
00:03:55,400 --> 00:03:59,330
في التطبيق الخاص بك سترى أنه،

49
00:03:59,330 --> 00:04:04,699
أسفل القائمة مباشرة، سترى تفاصيل

50
00:04:04,699 --> 00:04:09,590
معلومات طبق معين يتم عرضها في بطاقة مثل هذا هنا،

51
00:04:09,590 --> 00:04:13,520
حتى تتمكن من رؤية العنوان،

52
00:04:13,520 --> 00:04:17,129
والصورة، وأيضا وصف القيام به أدناه هنا.

53
00:04:17,129 --> 00:04:22,519
الآن، بعد إكمال هذا، ثم سوف تنتقل إلى المهمة الثالثة.

54
00:04:22,519 --> 00:04:29,120
في المهمة الثالثة، سوف تستخدم التعليقات التي يتم تضمينها أيضًا داخل

55
00:04:29,120 --> 00:04:35,239
الطبق الذي قدمناه لك في كائن JavaScript،

56
00:04:35,239 --> 00:04:40,819
ثم استخدم ذلك لإنشاء وعرض قائمة بالتعليقات هنا.

57
00:04:40,819 --> 00:04:43,235
في نهاية المهمة الثالثة،

58
00:04:43,235 --> 00:04:48,595
هذا هو ما ستراه يتم عرضه على الجانب الأيمن من الطبق الخاص بك.

59
00:04:48,595 --> 00:04:52,235
يمكنك أن ترى أن لديك رأس هنا مع

60
00:04:52,235 --> 00:04:54,019
كلمة «التعليقات»،

61
00:04:54,019 --> 00:04:58,149
ومن ثم لديك قائمة من التعليقات التي يتم عرضها هنا.

62
00:04:58,149 --> 00:05:03,480
تتوفر المعلومات الخاصة ببناء هذه التعليقات داخل

63
00:05:03,480 --> 00:05:07,699
كائن جافا سكريبت الطبق الذي قدمناه لك. على

64
00:05:07,699 --> 00:05:11,610
وجه الخصوص، لاحظ أن هذا هو التعليق الفعلي،

65
00:05:11,610 --> 00:05:15,505
وهذا هو عدد النجوم المعطاة لهذا التعليق،

66
00:05:15,505 --> 00:05:21,259
وهذا هو المكان الذي نعرض فيه اسم المؤلف مع شرطتين في المقدمة،

67
00:05:21,259 --> 00:05:25,589
ونلاحظ، في النهاية، نعرض التاريخ هنا.

68
00:05:25,589 --> 00:05:28,774
لكي تتمكن من بناء هذا التاريخ هنا،

69
00:05:28,774 --> 00:05:33,600
تحتاج إلى استخدام أنبوب زاوي اسمه التاريخ.

70
00:05:33,600 --> 00:05:37,610
لقد رأينا بالفعل استخدام أنبوب مدمج يسمى الأحرف الكبيرة

71
00:05:37,610 --> 00:05:39,939
في التمرين السابق،

72
00:05:39,939 --> 00:05:45,379
لذلك يمكنك ببساطة استخدام أنبوب التاريخ من أجل إنشاء هذا

73
00:05:45,379 --> 00:05:50,660
التاريخ ليتم عرضه على يمين اسم المؤلف هنا.

74
00:05:50,660 --> 00:05:53,839
لذا، هذه هي التلميحات لتبدأ

75
00:05:53,839 --> 00:05:59,240
بهذه المهمة الثالثة في مهمتك الأولى.

76
00:05:59,240 --> 00:06:02,849
المتعة الانتهاء من المهمة الأولى.

77
00:06:02,849 --> 00:06:04,620
مهما كانت الموارد التي تحتاجها،

78
00:06:04,620 --> 00:06:09,980
فإن ملف قالب نصف مكتمل مسبقًا

79
00:06:09,980 --> 00:06:14,115
وكائن جافا سكريبت

80
00:06:14,115 --> 00:06:18,649
للطبق كلاهما متاحان في التعليمات الخاصة بهذا الواجب.