1
00:00:00,000 --> 00:00:04,598
[MUSIC]

2
00:00:04,598 --> 00:00:10,170
حان الوقت للانتقال إلى المهمة الثالثة في هذه الدورة.

3
00:00:10,170 --> 00:00:13,410
في هذه المهمة، كما كنت قد توقعت بالفعل،

4
00:00:13,410 --> 00:00:17,190
سننظر في أشكال Angular والملاحظة.

5
00:00:17,190 --> 00:00:22,480
هذا هو ما تعلمناه أنا ن هذه الوحدة معينة من الدورة.

6
00:00:22,480 --> 00:00:28,600
في هذه المهمة، ستقوم بتصميم نموذج

7
00:00:28,600 --> 00:00:33,440
ضمن عرض مكونات تفاصيل الطبق الذي سيمكن

8
00:00:33,440 --> 00:00:38,540
المستخدمين من تقديم تعليقاتهم حول طبق معين.

9
00:00:39,640 --> 00:00:45,504
سوف تستخدم نماذج تفاعلية Angular لتصميم النموذج

10
00:00:45,504 --> 00:00:50,127
وستستخدم تغييرات القيمة التي يمكن ملاحظتها من

11
00:00:50,127 --> 00:00:53,623
أجل بدء التحقق من صحة النموذج،

12
00:00:53,623 --> 00:00:59,147
تمامًا كما فعلنا في التمرين الذي أكملته للتو

13
00:00:59,147 --> 00:01:04,109
وستستخدم مكون مادة Angular جديد يسمى

14
00:01:04,109 --> 00:01:07,747
Angular Material مكون المنزلق.

15
00:01:07,747 --> 00:01:13,987
سيتم استخدام مكون شريط التمرير لإدخال تصنيف

16
00:01:13,987 --> 00:01:19,050
للطبق من قبل الشخص الذي يقدم العد.

17
00:01:20,230 --> 00:01:24,620
دعونا ننظر إلى المهام الثلاث في هذه المهمة بمزيد من التفصيل.

18
00:01:26,410 --> 00:01:31,760
حتى هنا، وأنا تظهر لكم أول طبق من القائمة من

19
00:01:31,760 --> 00:01:38,510
أجل توضيح لكم المهام الثلاث التي تحتاج إلى أن تكتمل في هذه المهمة.

20
00:01:38,510 --> 00:01:43,238
لذلك في هذه المهمة، سنقوم بإنشاء نموذج في

21
00:01:43,238 --> 00:01:48,594
قسم التعليق من مكون تفاصيل الطبق الخاص بك.

22
00:01:48,594 --> 00:01:51,579
يحتوي النموذج على حقلين هنا.

23
00:01:51,579 --> 00:01:55,122
حقل الاسم وحقل التعليق.

24
00:01:55,122 --> 00:02:00,570
في حقل الاسم، سيتم إدخال اسم المؤلف للتعليق من قبل المستخدم.

25
00:02:00,570 --> 00:02:04,406
ثم في حقل تعليقهم وهو منطقة نص،

26
00:02:04,406 --> 00:02:10,037
ستسمح للمؤلف بإدخال التعليق الذي يريد إرساله.

27
00:02:10,037 --> 00:02:14,639
وبالإضافة إلى ذلك، من أجل الحصول على تصنيف للطبق،

28
00:02:14,639 --> 00:02:22,010
وسوف نستخدم هذا المكون المواد الزاوي يسمى المنزلق المواد الزاوي.

29
00:02:22,010 --> 00:02:23,730
بالنسبة لمكون شريط التمرير هذا،

30
00:02:25,040 --> 00:02:30,260
يتم توفير رابط إلى الوثائق في الموارد الإضافية.

31
00:02:30,260 --> 00:02:33,541
مكون شريط التمرير هو واضح إلى حد ما لإنشاء.

32
00:02:33,541 --> 00:02:38,788
بالنسبة لمكون شريط التمرير هذا، ستعرض علامات القراد مثل هذا.

33
00:02:38,788 --> 00:02:43,033
لذلك يمكنك أن ترى أن لديك واحد، اثنان، ثلاثة، أربعة علامات علامة بالفعل

34
00:02:43,033 --> 00:02:46,300
والخامس هو الحق تحت هذا الإبهام هنا.

35
00:02:46,300 --> 00:02:49,943
لذلك وأيضا عندما تظهر عرض الإبهام،

36
00:02:49,943 --> 00:02:54,346
وسوف تظهر خفض في تصنيف المحدد مثل.

37
00:02:59,650 --> 00:03:06,047
لذا، يجب وضع علامة على هذا في شريحة الزاوي للمكون التي تقوم

38
00:03:06,047 --> 00:03:12,252
بتضمينها في خطهم وهذا سيسمح لك بتحديد التصنيف للطبق.

39
00:03:12,252 --> 00:03:15,820
لذا، هذه هي مهمتك الأولى في هذه المهمة.

40
00:03:16,880 --> 00:03:22,530
مهمتك الثانية هي إضافة التحقق من صحة النموذج لهذا النموذج.

41
00:03:22,530 --> 00:03:28,589
الآن يجب إنشاء هذا النموذج باستخدام الخطوط التفاعلية الزاوي

42
00:03:28,589 --> 00:03:34,200
وأيضا باستخدام تغييرات القيمة التي يمكن ملاحظتها من أجل مراقبة

43
00:03:34,200 --> 00:03:39,377
أي تغييرات على أي من عناصر التحكم هذه النموذج لها.

44
00:03:39,377 --> 00:03:44,226
وعندما يحدث أي تغيير، يجب أن تبدأ على الفور

45
00:03:44,226 --> 00:03:48,831
التحقق من صحة النموذج باستخدام تغييرات القيمة التي يمكن ملاحظتها فقط بالطريقة التي فعلناها في

46
00:03:48,831 --> 00:03:52,730
التمرين الذي أكملته للتو في الدرس السابق.

47
00:03:54,650 --> 00:03:59,370
الآن، التحقق من الصحة التي تحتاج إلى تنفيذها هو أن كل من الاسم

48
00:03:59,370 --> 00:04:02,020
والتعليق حقول مطلوبة.

49
00:04:02,020 --> 00:04:06,029
علاوة على ذلك، يجب أن يحتوي الاسم على حرفين على الأقل.

50
00:04:06,029 --> 00:04:11,671
حتى إذا كنت مجرد كتابة في حرف واحد، ثم يجب أن تظهر رسالة هنا تقول،

51
00:04:11,671 --> 00:04:15,283
يجب أن يكون اسم المؤلف على الأقل حرفين.

52
00:04:15,283 --> 00:04:19,250
الآن إذا بالطبع، نكتب في أكثر، ثم ذلك سوف تختفي.

53
00:04:19,250 --> 00:04:23,494
إذا قمت بإزالة الاسم تمامًا من الحقل،

54
00:04:23,494 --> 00:04:28,760
فستعرض رسالة تقول، اسم المؤلف مطلوب.

55
00:04:28,760 --> 00:04:31,985
لذلك، يجب عرض الرسالة المطلوبة هنا.

56
00:04:31,985 --> 00:04:35,327
لذلك بمجرد كتابة حرفين على الأقل،

57
00:04:35,327 --> 00:04:38,610
ستختفي الرسالة.

58
00:04:38,610 --> 00:04:42,051
الآن لحقل التعليق أيضًا، هذا حقل مطلوب.

59
00:04:42,051 --> 00:04:46,029
لذلك، تحتاج إلى كتابة ما لا يقل عن بضعة أحرف.

60
00:04:46,029 --> 00:04:49,159
لا يوجد أي قيود على عدد الأحرف.

61
00:04:49,159 --> 00:04:54,586
ولكن إذا لم يتم كتابة أي أحرف عند عرض رسالة هنا قائلا،

62
00:04:54,586 --> 00:04:56,980
التعليق كما هو مطلوب.

63
00:04:56,980 --> 00:05:02,966
إذا كان النموذج الخاص بك غير صالح حاليًا، فلن يعمل زر الإرسال.

64
00:05:02,966 --> 00:05:08,006
ولكن بمجرد أن يصبح النموذج صالحًا، سيعمل زر الإرسال الخاص بك

65
00:05:08,006 --> 00:05:10,707
ويجب أن يمكّنك من إرسال الخط.

66
00:05:10,707 --> 00:05:15,160
لذلك، هذه هي المهمة الثانية في مهمتك.

67
00:05:16,170 --> 00:05:23,060
المهمة الصعبة في مهمتك هي أنه بمجرد أن يحتوي النموذج على معلومات صحيحة،

68
00:05:23,060 --> 00:05:28,240
يجب عليك عرض معاينة لما قمت بإرساله للتو في النموذج.

69
00:05:28,240 --> 00:05:33,310
اسمحوا لي أن اكتب في شيء أكثر معنى هنا، بحيث

70
00:05:33,310 --> 00:05:38,460
تبدو معاينة مثيرة للاهتمام.

71
00:05:38,460 --> 00:05:43,550
لذلك ترى أنه بمجرد كتابة معلومات صالحة في النموذج الخاص بك،

72
00:05:43,550 --> 00:05:48,440
يجب أن تظهر معاينة لما

73
00:05:48,440 --> 00:05:53,210
سيبدو عليه التعليق إذا تمت إضافته إلى قائمة التعليقات تلك للطبق.

74
00:05:53,210 --> 00:05:57,712
لاحظ الآن أنه في المعاينة، لم يتم عرض التاريخ بعد.

75
00:05:57,712 --> 00:06:01,046
لذا، هذا شيء آخر يجب أن تضعه في اعتبارك.

76
00:06:01,046 --> 00:06:08,027
إذا أصبح النموذج غير صالح، فستختفي المعاينة.

77
00:06:08,027 --> 00:06:13,020
ولكن بمجرد أن يصبح النموذج صالحًا، ستظهر المعاينة مرة أخرى.

78
00:06:13,020 --> 00:06:18,850
لذلك، هذا شيء يجب عليك تصميمه بشكل مناسب باستخدام قائمة ND

79
00:06:18,850 --> 00:06:26,190
ثم التأكد من أن النموذج صالح قبل عرض هذه المعلومات هناك.

80
00:06:26,190 --> 00:06:27,044
لذلك، هذا هو المعاينة.

81
00:06:27,044 --> 00:06:30,676
الآن عندما ينقر المستخدم على زر إرسال،

82
00:06:30,676 --> 00:06:34,370
ثم هناك عدد قليل من الأشياء التي تحتاج إلى القيام بها.

83
00:06:34,370 --> 00:06:39,344
عندما ينقر المستخدم على زر إرسال، ثم سيتم

84
00:06:39,344 --> 00:06:44,589
إضافة هذا التعليق إلى قائمة التعليقات التي لديك لهذا الطبق معين.

85
00:06:44,589 --> 00:06:50,943
لذلك، اسمحوا لي أن انقر على زر إرسال وستلاحظ على الفور أن النموذج

86
00:06:50,943 --> 00:06:56,490
قد تمت إضافته في قائمة التعليقات لهذا الطبق معين.

87
00:06:56,490 --> 00:07:01,349
لذلك، ترى أن التعليق الأخير الذي أدخلته للتو تمت إضافته هنا.

88
00:07:01,349 --> 00:07:05,632
لاحظ أيضًا أنه

89
00:07:05,632 --> 00:07:13,140
تمت إضافة تاريخ النموذج إلى التعليق هنا.

90
00:07:13,140 --> 00:07:18,612
لذلك من المفترض أن تأخذ القيم من نموذج النموذج

91
00:07:18,612 --> 00:07:24,084
ثم نسخها إلى نموذج بيانات، ثم تدفع التعليق

92
00:07:24,084 --> 00:07:30,009
إلى شعاع كائن جافا سكريبت من التعليقات لكائن الطبق.

93
00:07:30,009 --> 00:07:34,553
لذلك، هذا شيء تحتاج إلى القيام به باستخدام طريقة دفع الصفيف

94
00:07:34,553 --> 00:07:36,960
لصفيف كائن JavaScript.

95
00:07:36,960 --> 00:07:41,534
علاوة على ذلك، يجب تكوين التاريخ تلقائيًا

96
00:07:41,534 --> 00:07:43,574
وإضافته إلى نموذج البيانات هذا.

97
00:07:43,574 --> 00:07:48,510
تذكر أن نموذج النموذج لا يحتوي على التاريخ، ولكن

98
00:07:48,510 --> 00:07:54,800
نموذج البيانات المشتق من فئة التعليق التي قمنا بتصميمها،

99
00:07:54,800 --> 00:08:01,500
يحتوي نموذج البيانات على المؤلف، والتصنيف، والتعليق والتاريخ.

100
00:08:01,500 --> 00:08:05,642
لذلك، تحتاج إلى إضافة التاريخ إلى نموذج البيانات.

101
00:08:05,642 --> 00:08:11,261
لذا، هذا هو المكان الذي ستستفيد فيه من

102
00:08:11,261 --> 00:08:16,370
فئة تاريخ Java Script مع تحويله إلى

103
00:08:16,370 --> 00:08:24,060
سلسلة ISO قبل تخزينه في حقل التاريخ لنموذج بيانات التعليق الخاص بك.

104
00:08:24,060 --> 00:08:29,164
الآن لقد قدمت لك روابط لأمثلة عن كيفية

105
00:08:29,164 --> 00:08:34,268
إنشاء التاريخ وكيف تقوم الكابينة بتحويل التاريخ إلى

106
00:08:34,268 --> 00:08:39,148
سلسلة ISO في وثائق هذا الواجب،

107
00:08:39,148 --> 00:08:44,158
وكذلك في الموارد الإضافية لهذا العنصر.

108
00:08:44,158 --> 00:08:48,904
لذا، يرجى البحث عن ذلك لفهم كيف من المفترض أن

109
00:08:48,904 --> 00:08:52,530
تضيف التاريخ إلى حقل التعليق هذا هناك.

110
00:08:52,530 --> 00:08:56,989
وبمجرد أن يتم دفع التعليق إلى مجموعة من التعليقات،

111
00:08:56,989 --> 00:09:02,176
ثم أنها سوف تنضم إلى بقية التعليقات لهذا الطبق معين.

112
00:09:02,176 --> 00:09:06,600
عليك أن تتذكر أننا لا نقوم بحفظ هذا إلى جانب الخادم،

113
00:09:06,600 --> 00:09:09,129
لأننا لا نملك جانب الخادم.

114
00:09:09,129 --> 00:09:13,330
لذلك إذا قمت بإعادة تحميل صفحتك، فسيختفي هذا التعليق.

115
00:09:13,330 --> 00:09:15,040
و هذا مقبول تماما.

116
00:09:15,040 --> 00:09:19,417
في هذه المرحلة، نحن لا نحاول حفظ التغييرات على

117
00:09:19,417 --> 00:09:23,810
الطبق مرة أخرى إلى الخادم من خلال خدمة الطبق لدينا.

118
00:09:23,810 --> 00:09:27,542
سنفعل ذلك في واحدة من الدورات اللاحقة.

119
00:09:27,542 --> 00:09:31,811
لذلك في هذه اللحظة، إذا قمت بإعادة تحميل هذه الصفحة، فإن التعليق الذي قمت بإدخاله فقط

120
00:09:31,811 --> 00:09:35,240
سيختفي، ولكن هذا مقبول تمامًا.

121
00:09:35,240 --> 00:09:38,670
لذا، هذه هي المهمة الثالثة في مهمتك.

122
00:09:39,720 --> 00:09:45,197
بعد إكمال جميع المهام الثلاث، تأكد من أن كل شيء يعمل

123
00:09:45,197 --> 00:09:50,602
بشكل صحيح قبل إرسال حل التعيين إلى نظامهم.

124
00:09:50,602 --> 00:09:54,269
[ موسيقى]