1
00:00:03,740 --> 00:00:11,475
لقد رأينا بالفعل استخدام عمليات الحصول على HTTP في التدريبين السابقين،

2
00:00:11,475 --> 00:00:14,310
حيث سنتمكن من الذهاب وجلب البيانات من

3
00:00:14,310 --> 00:00:17,505
الخادم واستخدامها في تطبيق Angular الخاص بنا.

4
00:00:17,505 --> 00:00:23,159
ولكن هناك حالات حيث تريد أن تكون قادرًا على نشر بيانات جديدة

5
00:00:23,159 --> 00:00:26,160
إلى الخادم، أو تعديل البيانات الموجودة على الخادم،

6
00:00:26,160 --> 00:00:27,950
أو حتى حذف البيانات.

7
00:00:27,950 --> 00:00:30,480
لذلك هذا هو المكان الذي

8
00:00:30,480 --> 00:00:35,895
تمكننا فيه المشاركة، ووضع، وحذف عمليات HTTP من تنفيذ ذلك.

9
00:00:35,895 --> 00:00:41,540
في هذا التمرين، سننظر في استخدام عملية وضع من

10
00:00:41,540 --> 00:00:48,735
عميل HTTP التي تمكننا من تعديل طبق موجود على جانب الخادم.

11
00:00:48,735 --> 00:00:50,715
الآن، لماذا يجب أن نفعل ذلك؟

12
00:00:50,715 --> 00:00:53,500
رأيت أنه في أحد التمارين السابقة،

13
00:00:53,500 --> 00:00:57,230
سمحنا للمستخدم بنشر تعليق على طبق،

14
00:00:57,230 --> 00:01:01,825
ثم تمكنا من إدراج التعليق في كائن الطبق.

15
00:01:01,825 --> 00:01:08,160
الآن، نريد أن تستمر هذه المعلومات الطبق على الخادم،

16
00:01:08,160 --> 00:01:10,570
الطبق المعدل إلى الخادم.

17
00:01:10,570 --> 00:01:15,955
هذا هو المكان الذي يأتي فيه استخدام عملية HTTP PUT لإنقاذنا.

18
00:01:15,955 --> 00:01:18,345
لذلك، باستخدام عملية هتب بوت،

19
00:01:18,345 --> 00:01:23,360
ونحن قادرون على إرسال طبق تعديل مرة أخرى إلى الخادم ثم تعديل

20
00:01:23,360 --> 00:01:26,750
معلومات طبق الموجودة على الخادم بحيث

21
00:01:26,750 --> 00:01:31,460
التعليق المضافة حديثا يمكن أن تستمر على جانب الخادم.

22
00:01:31,460 --> 00:01:35,899
وبالتالي، عندما يتم جلب المعلومات في وقت لاحق،

23
00:01:35,899 --> 00:01:41,770
سيكون التعليق المضافة حديثا هناك كجزء من معلومات طبق.

24
00:01:41,770 --> 00:01:44,770
لذلك، هذا هو ما سوف نستكشفه في هذا التمرين،

25
00:01:44,770 --> 00:01:48,225
حيث سننظر في حفظ التغييرات على الخادم.

26
00:01:48,225 --> 00:01:50,280
إذاً، كيف يمكننا فعل هذا؟

27
00:01:50,280 --> 00:01:53,625
دعونا استكشاف هذا في التمرين.

28
00:01:53,625 --> 00:01:58,730
لتمكيننا من حفظ التغييرات على الطبق إلى الخادم،

29
00:01:58,730 --> 00:02:02,765
اسمحوا لي أن أعرض طريقة جديدة في خدمة الطبق هنا.

30
00:02:02,765 --> 00:02:09,040
الآن، سنضيف طريقة جديدة تسمى PutDish إلى الخادم.

31
00:02:09,040 --> 00:02:11,335
لذا، كيف تعمل طريقة بوتديش؟

32
00:02:11,335 --> 00:02:17,920
لذا، اسمحوا لي أن أعرض طريقة PutDish هنا التي تتلقى بوضوح الطبق المعدل

33
00:02:17,920 --> 00:02:25,370
كمعلمة لها ومن ثم سيعود ملاحظة من نوع طبق.

34
00:02:25,370 --> 00:02:29,980
لذلك، سيؤدي ذلك إلى إرجاع الطبق الذي تم وضعه في جانب الخادم.

35
00:02:29,980 --> 00:02:33,690
الآن، بمجرد تعديل الطبق على جانب الخادم،

36
00:02:33,690 --> 00:02:36,735
سيتم إرسال معلومات الطبق المعدلة مرة أخرى من قبل الخادم،

37
00:02:36,735 --> 00:02:39,275
ومن ثم سيتم تسليم هذا الطبق المعدل

38
00:02:39,275 --> 00:02:42,330
مرة أخرى إلى العميل بحيث يمكن للعميل دمج ذلك،

39
00:02:42,330 --> 00:02:48,605
ومن ثم تحديث واجهة المستخدم لتعكس التغيير إلى الطبق.

40
00:02:48,605 --> 00:02:52,010
الآن، من الواضح أننا لا نريد أن تعكس التغيير

41
00:02:52,010 --> 00:02:57,300
إلى واجهة المستخدم حتى يتم حفظ معلومات طبق على جانب الخادم.

42
00:02:57,300 --> 00:03:00,245
لذا، هذا هو المكان الذي سنستخدم فيه

43
00:03:00,245 --> 00:03:05,265
طريقة PutDish التي نقدمها في خدمة الطبق.

44
00:03:05,265 --> 00:03:07,730
لذلك، كيف يمكننا تصميم طريقة بوتديش؟

45
00:03:07,730 --> 00:03:15,785
لذا، فإن أول شيء نحتاج إلى القيام به هو إعداد بعض خيارات HTTP بحيث نبلغ

46
00:03:15,785 --> 00:03:21,975
الخادم بما

47
00:03:21,975 --> 00:03:26,565
يتم إرساله في الرسالة هنا.

48
00:03:26,565 --> 00:03:29,880
لذلك، سنقوم بإعداد بعض معلومات الرؤوس هنا.

49
00:03:29,880 --> 00:03:36,345
لذلك، بالنسبة للرؤوس، سنقوم بإعداد HttpHeaders

50
00:03:36,345 --> 00:03:39,060
جديدة هنا، وفي HttpHeaders الجديد،

51
00:03:39,060 --> 00:03:43,050
دعنا نقوم بإعداد الرأس

52
00:03:43,050 --> 00:03:49,940
كنوع المحتوى من نوع التطبيق JSON.

53
00:03:49,940 --> 00:03:56,135
لذلك، نحن نحدد إلى خادمنا أن رسالة الطلب

54
00:03:56,135 --> 00:03:58,730
الواردة تحتوي على المعلومات في

55
00:03:58,730 --> 00:04:02,840
شكل كائن json في نص رسالة الطلب الواردة.

56
00:04:02,840 --> 00:04:04,865
لذلك، فإن الخادم تكون قادرة

57
00:04:04,865 --> 00:04:09,165
على استخراج معلومات طبق من نص الرسالة، تحليلها،

58
00:04:09,165 --> 00:04:13,200
ومن ثم تكون قادرة على الاستمرار في طبق تعديل إلى الخادم،

59
00:04:13,200 --> 00:04:19,260
ومن ثم إرسال معلومات طبق المحدثة من جانب الخادم.

60
00:04:19,260 --> 00:04:22,025
الآن، بمجرد إعداد الخيارات هنا،

61
00:04:22,025 --> 00:04:24,295
سنستخدم

62
00:04:24,295 --> 00:04:29,990
عميل HTTP ثم نقوم

63
00:04:29,990 --> 00:04:36,030
بوضع يحمل الطبق بوضوح في نص الرسالة،

64
00:04:36,030 --> 00:04:47,385
ثم سنقوم بتحديد baseurl+أطباق و+dish.id

65
00:04:47,385 --> 00:04:53,520
، لذلك، هذا هو عنوان URL الذي نرسل عملية وضع لذلك،

66
00:04:57,775 --> 00:05:01,130
لذلك، من معرفة REST API الخاصة بك،

67
00:05:01,130 --> 00:05:05,960
سترى لماذا نقوم بعملية وضع إلى نقطة النهاية هذه.

68
00:05:05,960 --> 00:05:09,500
ثم المعلمة الثانية هي الطبق نفسه الذي

69
00:05:09,500 --> 00:05:13,990
نتلقاه كمعلمة واردة إلى طريقة PutDish،

70
00:05:13,990 --> 00:05:23,770
ثم المعلمة الثالثة هي HttPoptions التي قمنا بإعدادها منذ فترة قصيرة.

71
00:05:23,770 --> 00:05:26,790
ثم، بمجرد الحصول على ذلك،

72
00:05:26,790 --> 00:05:29,775
سنكون قادرين على توجيه

73
00:05:29,775 --> 00:05:37,405
أي خطأ إلى طريقة HandleError لدينا سماع، هذا كل شيء.

74
00:05:37,405 --> 00:05:43,550
لذا، فإن هذه المكالمة إلى وضع على جانب الخادم ستمكن

75
00:05:43,550 --> 00:05:46,880
معلومات الطبق لتكون مستمرة على جانب الخادم ومن ثم

76
00:05:46,880 --> 00:05:50,430
سيقوم الخادم بإرجاع معلومات الطبق المحدثة إلينا،

77
00:05:50,430 --> 00:05:55,805
ومن ثم سنعود ذلك مرة أخرى إلى المكون الخاص بنا

78
00:05:55,805 --> 00:06:01,705
حيث يمكن للمكون ثم استخدام ذلك لتقديم معلومات طبق محدثة.

79
00:06:01,705 --> 00:06:04,835
لذلك، هذا هو التعديل الذي نقوم به لخدمة الطبق.

80
00:06:04,835 --> 00:06:08,220
الآن، انتقل إلى مكون dishdetail،

81
00:06:08,450 --> 00:06:11,130
في مكون dishdetail،

82
00:06:11,130 --> 00:06:18,185
دعني أعرض متغير آخر هنا

83
00:06:18,185 --> 00:06:21,590
يسمى dishcopy الذي سيحتفظ

84
00:06:21,590 --> 00:06:26,570
بنسخة من الطبق المعدل حتى يتم نشره على الخادم.

85
00:06:26,570 --> 00:06:29,890
لذلك، سوف تحتوي على طبق معدلة.

86
00:06:29,890 --> 00:06:33,875
لذلك، الذهاب إلى المعلمات الطريق هنا.

87
00:06:33,875 --> 00:06:41,305
لذلك، ما نقوم به هو في أي وقت يتم تعديل معلومات طبق هنا في معلمات الطريق،

88
00:06:41,305 --> 00:06:46,355
أيضا جنبا إلى جنب مع حفظ معلومات الطبق إلى هذا. dish،

89
00:06:46,355 --> 00:06:52,470
وسوف أيضا حفظ نسخة إلى طبق

90
00:06:52,470 --> 00:06:55,980
أيضا بحيث كل من طبق و

91
00:06:55,980 --> 00:07:01,460
dishcopy تحتوي على نسخة طبق الأصل من نفس الطبق هنا.

92
00:07:01,460 --> 00:07:04,370
لذلك، هذا هو التعديل الذي سنقوم به هنا.

93
00:07:04,370 --> 00:07:06,990
الآن، في طريقة onSubmit،

94
00:07:06,990 --> 00:07:09,665
لذلك لدينا هنا طريقة onSubmit هنا،

95
00:07:09,665 --> 00:07:13,310
حيث نقوم بتعديل الكائن هنا.

96
00:07:13,310 --> 00:07:20,220
لذلك، هنا، لاحظت أننا كنا في الأصل دفع التعليق إلى كائن طبق هنا،

97
00:07:20,220 --> 00:07:24,945
بدلا من ذلك، ونحن سوف تدفع الآن التعليق إلى كائن ديسكوبي.

98
00:07:24,945 --> 00:07:29,405
السبب في أنني أفعل هذا هو أنني أريد أولا تعديل كائن ديسكوبي،

99
00:07:29,405 --> 00:07:32,285
ثم أريد أن نشر ذلك إلى الخادم،

100
00:07:32,285 --> 00:07:35,060
وبعد ذلك عندما رد الخادم مرة أخرى مع

101
00:07:35,060 --> 00:07:37,850
معلومات الطبق المعدلة إلى جانب الخادم،

102
00:07:37,850 --> 00:07:41,715
ثم سوف تستمر هذه المعلومات في طبق هنا.

103
00:07:41,715 --> 00:07:44,750
لذلك، بعد القيام بالتنظير هنا،

104
00:07:44,750 --> 00:07:54,735
ثم سنقول هذا.DishService.Putdish،

105
00:07:54,735 --> 00:07:57,900
وبعد ذلك سنقوم بتوريد إلى

106
00:07:57,900 --> 00:08:04,250
بوتديش ديكوبي كمعلمة

107
00:08:04,250 --> 00:08:09,110
لأن ديكوبي يحتوي على نسخة معدلة من الطبق هنا.

108
00:08:09,110 --> 00:08:10,955
لذلك، سوف نقول ديسكوبي،

109
00:08:10,955 --> 00:08:16,600
وبعد ذلك عندما نتلقى الرد من جانب الخادم لذلك،

110
00:08:16,600 --> 00:08:22,255
في الاشتراك، ونحن سوف نقول طبق والحق هناك،

111
00:08:22,255 --> 00:08:26,655
ونحن سوف التعامل مع طبق واردة هنا.

112
00:08:26,655 --> 00:08:31,855
لذلك، هنا، سوف نقول الاشتراك طبق وبعد ذلك سنقول،

113
00:08:31,855 --> 00:08:36,435
هذا. طبق يساوي طبق هنا،

114
00:08:36,435 --> 00:08:45,910
ومن أجل اكتمال،

115
00:08:45,910 --> 00:08:49,380
وسوف تستمر أيضا نفس المعلومات في طبق هنا.

116
00:08:49,380 --> 00:08:52,320
الآن، إذا كان هناك خطأ،

117
00:08:52,320 --> 00:08:54,120
فسيتعين عليك HandleError.

118
00:08:54,120 --> 00:08:57,625
لذلك، إلى

119
00:08:57,625 --> 00:09:03,080
handleError، سنقول، إرميسي، وبعد ذلك في هذه المرحلة،

120
00:09:03,080 --> 00:09:07,040
سنقوم بتعيين أن هذا.dish إلى نول،

121
00:09:07,040 --> 00:09:14,330
ومن ثم هذا الطبق أيضا إلى نول لأنه في الوقت الحالي الطبق غير صالح،

122
00:09:14,330 --> 00:09:19,595
وبعد ذلك سنقول هذا.errmess هو

123
00:09:19,595 --> 00:09:27,755
أي خطأ، هذا كل شيء.

124
00:09:27,755 --> 00:09:31,445
هذا هو التعديل الذي سنقوم به على طريقة onSubmit.

125
00:09:31,445 --> 00:09:34,695
لذلك، باستخدام this.DishService.Putdish الأسلوب،

126
00:09:34,695 --> 00:09:38,500
ونحن نرسل في

127
00:09:38,500 --> 00:09:39,685
طبق المحدثة هنا،

128
00:09:39,685 --> 00:09:43,965
وليس طبق هنا، وبعد ذلك عندما رد الخادم مرة أخرى لنا مع طبق تعديل

129
00:09:43,965 --> 00:09:47,605
، في هذه المرحلة، ونحن سوف تستمر المعلومات في هذا.

130
00:09:47,605 --> 00:09:49,025
بحيث في هذه المرحلة،

131
00:09:49,025 --> 00:09:54,590
سيتم تحديث واجهة المستخدم لدينا مع الإصدار المحدث إلى طبق،

132
00:09:54,590 --> 00:09:57,560
وأنا أيضا استمرار نفس المعلومات إلى طبق،

133
00:09:57,560 --> 00:09:59,180
وبعد ذلك إذا واجهت خطأ،

134
00:09:59,180 --> 00:10:02,585
ثم سأقوم بتعيين هذا. dish إلى فارغة وهذا.discopy إلى فارغة

135
00:10:02,585 --> 00:10:06,680
ثم قم بإعداد رسالة الخطأ هنا بشكل مناسب.

136
00:10:06,680 --> 00:10:09,980
إذن هذا كل شيء دعونا حفظ التغييرات ثم انتقل

137
00:10:09,980 --> 00:10:14,100
ونلقي نظرة على تطبيقنا في المتصفح.

138
00:10:14,230 --> 00:10:19,050
حفظ التغييرات، دعونا نعود إلى المتصفح.

139
00:10:19,050 --> 00:10:27,785
انتقل إلى المتصفح، دعونا نذهب الآن إلى القائمة ثم انتقل إلى طبق معين هنا.

140
00:10:27,785 --> 00:10:30,245
بالنسبة للطبق المحدد،

141
00:10:30,245 --> 00:10:32,685
دعنا ننشر تعليقًا هنا.

142
00:10:32,685 --> 00:10:41,870
لذلك، اسمحوا لي أن نشر تعليق هنا مع تصنيف هنا.

143
00:10:44,430 --> 00:10:48,815
لذلك، كما ترى، كما يصبح التعليق صالحًا،

144
00:10:48,815 --> 00:10:52,370
تظهر معاينة التعليق هناك.

145
00:10:52,370 --> 00:10:54,950
دعونا الآن تقديم هذا التعليق.

146
00:10:54,950 --> 00:10:56,520
عند إرسال التعليق،

147
00:10:56,520 --> 00:11:02,160
سترى على الفور أن التعليق قد تم نشره للتو في قائمتي من الأطباق.

148
00:11:02,160 --> 00:11:05,645
الآن، في وقت سابق، إذا قمت بتحديث طريقة العرض،

149
00:11:05,645 --> 00:11:07,880
فسيختفي هذا التعليق.

150
00:11:07,880 --> 00:11:13,250
اسمحوا لي الآن تحديث العرض وبعد ذلك ستلاحظ أن التعليق

151
00:11:13,250 --> 00:11:18,630
سيظل جزءًا من قائمة الأطباق هنا.

152
00:11:18,630 --> 00:11:20,190
لذلك، كما ترون هنا،

153
00:11:20,190 --> 00:11:22,310
لا يزال التعليق موجودًا هنا.

154
00:11:22,310 --> 00:11:27,530
لتظهر لك أيضًا أن التعليق قد استمر بالفعل على جانب الخادم،

155
00:11:27,530 --> 00:11:31,440
دعنا نذهب وننظر إلى سجل الخادم في المحطة الطرفية.

156
00:11:31,440 --> 00:11:33,810
بالعودة إلى المحطات،

157
00:11:33,810 --> 00:11:36,710
سنرى الآن أنه في سجل المحطة،

158
00:11:36,710 --> 00:11:41,910
سترى طريقة PU/disanes/0 جديدة.

159
00:11:41,910 --> 00:11:45,950
لذلك، وهذا يدل على أن طبق تعديل

160
00:11:45,950 --> 00:11:50,050
قد استمر مرة أخرى إلى الخادم هناك الحق وبعد ذلك،

161
00:11:50,050 --> 00:11:53,170
بالطبع حصلنا على الأطباق عن طريق تحديث

162
00:11:53,170 --> 00:11:55,975
واجهة المستخدم ولهذا السبب نحن

163
00:11:55,975 --> 00:11:59,485
جلب معلومات الأطباق مرة أخرى من جانب الخادم.

164
00:11:59,485 --> 00:12:03,640
لذلك، وهذا يدل على أننا قادرون

165
00:12:03,640 --> 00:12:08,580
على استخدام عملية هتب بوت لمواصلة طبق تعديل إلى الخادم،

166
00:12:08,580 --> 00:12:10,810
وبعد ذلك عندما نتلقى الطبق المحدث،

167
00:12:10,810 --> 00:12:14,025
ونحن قادرون على تحديث واجهة المستخدم في المقابل.

168
00:12:14,025 --> 00:12:17,240
مع هذا، نكمل هذا التمرين.

169
00:12:17,240 --> 00:12:21,380
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة،

170
00:12:21,380 --> 00:12:24,300
وحفظ التغييرات على هذا الخادم.