1
00:00:03,450 --> 00:00:08,610
في هذا التمرين، سنستخدم عميل HTTP Angular

2
00:00:08,610 --> 00:00:13,870
للتواصل مع خادم JSON الذي قمنا بإعداده بالفعل في التمرين السابق.

3
00:00:13,870 --> 00:00:21,270
سنكون قادرين الآن على تنزيل البيانات من الخادم إلى تطبيقنا الزاوي باستخدام

4
00:00:21,270 --> 00:00:25,200
عميل HTTP ومن ثم الاستفادة من البيانات من أجل

5
00:00:25,200 --> 00:00:29,755
بناء وجهات النظر المختلفة داخل مكوناتنا.

6
00:00:29,755 --> 00:00:34,050
في هذا التمرين، سنقوم بإعادة تكوين خدمة الطبق لتكون قادرة على

7
00:00:34,050 --> 00:00:38,960
الذهاب وجلب البيانات حول الأطباق من خادم JSON.

8
00:00:38,960 --> 00:00:40,545
كجزء من

9
00:00:40,545 --> 00:00:41,920
مهمتك، سوف تكمل اثنين المتبقية،

10
00:00:41,920 --> 00:00:44,735
خدمة الزعيم وخدمة الترويج.

11
00:00:44,735 --> 00:00:51,810
سنرى كيف يمكننا الاستفادة من عميل HTTP الذي سيعيد ملاحظته لنا.

12
00:00:51,810 --> 00:00:55,580
لقد قمنا بالفعل بإعادة تكوين تطبيقنا،

13
00:00:55,580 --> 00:01:02,530
وخاصة الخدمة لتكون قادرة على تقديم الملاحظات إلى مكوناتنا.

14
00:01:02,530 --> 00:01:07,070
ضمن مكوناتنا، نحن نشترك في هذه الملاحظات.

15
00:01:07,070 --> 00:01:10,745
لذا، فإن الجزء الرئيسي من الإعداد

16
00:01:10,745 --> 00:01:15,310
للحصول على البيانات من الخدمة إلى المكون موجود بالفعل.

17
00:01:15,310 --> 00:01:22,195
سنقوم بتعزيزه قليلاً للتعامل مع الأخطاء في التمرين التالي.

18
00:01:22,195 --> 00:01:27,290
خطوتنا الأولى في إعداد تطبيق Angular لاستخدام

19
00:01:27,290 --> 00:01:31,040
عميل HTTP للوصول إلى الخادم هي

20
00:01:31,040 --> 00:01:35,005
تكوين تطبيقنا باستخدام HttpClientModule.

21
00:01:35,005 --> 00:01:38,505
لذلك، للقيام بذلك، افتح app.module.ts.

22
00:01:38,505 --> 00:01:42,030
ثم، هنا، دعونا استيراد

23
00:01:42,030 --> 00:01:57,460
هتبكلينتمودول من الزاوية/كومون/هتب.

24
00:02:00,410 --> 00:02:02,700
بمجرد استيراد ذلك،

25
00:02:02,700 --> 00:02:06,625
فإننا سنمضي قدما وتكوين الديكور نغمودول

26
00:02:06,625 --> 00:02:12,510
في الواردات مع هتبكلينتمودول.

27
00:02:14,890 --> 00:02:23,640
الآن، تطبيقنا جاهز للاستفادة من HttpClientModule للوصول إلى الخادم.

28
00:02:23,640 --> 00:02:28,880
الآن، تأكد من أن خادم JSON قيد التشغيل

29
00:02:28,880 --> 00:02:31,190
ويخدم البيانات بحيث يمكن للتطبيق الخاص بنا

30
00:02:31,190 --> 00:02:34,520
التواصل مع تطبيق خادم JSON.

31
00:02:34,520 --> 00:02:39,055
الآن بعد أن وصلنا

32
00:02:39,055 --> 00:02:46,220
إلى البيانات من جانب الخادم، فمن الممارسات الجيدة إنشاء قيمة خاصة تشير إلى

33
00:02:46,220 --> 00:02:50,840
baseURL الخاص بالخادم الخاص بك

34
00:02:50,840 --> 00:02:55,845
بحيث يمكن تكوينه داخل التطبيق الزاوي الخاص بك عند الاقتضاء.

35
00:02:55,845 --> 00:02:58,325
لذلك، والذهاب إلى المجلد المشترك،

36
00:02:58,325 --> 00:03:05,345
وأنا ذاهب إلى إنشاء ملف جديد هنا اسمه baseurl.ts.

37
00:03:05,345 --> 00:03:07,055
ثم، ضمن هذا الملف،

38
00:03:07,055 --> 00:03:15,995
سوف أقوم بتضمين ثابت وتصديره والثابت المسمى

39
00:03:15,995 --> 00:03:24,355
باسيورل، والذي سأقوم بتعيينه إلى هتب://لوكالهوست: 3000.

40
00:03:24,355 --> 00:03:31,455
لذلك، كما تتذكر، هذا هو BaseUrl الذي يمكن الوصول إليه خادم JSON الخاص بي.

41
00:03:31,455 --> 00:03:35,665
لذلك، المضيف المحلي: 3000/، هناك.

42
00:03:35,665 --> 00:03:37,565
لذلك، مع هذا،

43
00:03:37,565 --> 00:03:40,210
اسمحوا لي حفظ التغييرات على BaseUrl.

44
00:03:40,210 --> 00:03:47,105
الآن، يوفر الزاوي طريقة لتوفير قيم مثل

45
00:03:47,105 --> 00:03:54,990
هذه لبقية التطبيق الخاص بك عن طريق تكوين مزود داخل وحدة التطبيق الخاصة بك.

46
00:03:54,990 --> 00:03:57,510
لذلك، انتقل إلى وحدة التطبيق،

47
00:03:57,510 --> 00:04:04,545
لتمكيننا من توفير ذلك baseURL معين،

48
00:04:04,545 --> 00:04:10,870
سنقوم أولاً باستيراد قيمة BaseUrl في تطبيقنا الزاوي.

49
00:04:10,870 --> 00:04:27,380
لذلك، أود أن أقول استيراد BaseUrl من المشاركة/baseurl.

50
00:04:27,650 --> 00:04:31,790
يمكن الآن إتاحة هذه القيمة

51
00:04:31,790 --> 00:04:35,625
لبقية طلبي بالذهاب إلى مقدمي الخدمات.

52
00:04:35,625 --> 00:04:38,270
ثم، بالإضافة إلى ليدرسرفيس،

53
00:04:38,270 --> 00:04:42,150
إذا قمت بتكوين قيمة مثل هذا،

54
00:04:42,150 --> 00:04:45,965
أود أن أقول توفير

55
00:04:45,965 --> 00:04:56,070
ثم باسيورل، أوسيفالو.

56
00:04:56,540 --> 00:05:03,355
لذا، بهذه الطريقة، سأقوم بتوريد قيمة BaseUrl هذه

57
00:05:03,355 --> 00:05:11,310
كمزود قيمة من داخل وحدة التطبيق إلى بقية تطبيقي الزاوي.

58
00:05:11,310 --> 00:05:12,835
في الخطوة التالية،

59
00:05:12,835 --> 00:05:19,400
سنقوم بتكوين DishService الخاص بنا من أجل السماح لها بالوصول إلى جانب الخادم،

60
00:05:19,400 --> 00:05:21,830
ومن ثم الحصول على البيانات من جانب الخادم،

61
00:05:21,830 --> 00:05:25,475
ومن ثم جعل البيانات متاحة لمكوناتنا.

62
00:05:25,475 --> 00:05:30,170
الآن، نحن ذاهبون للذهاب إلى ديشسرفيس.

63
00:05:30,170 --> 00:05:32,140
ثم، في ديشسرفيس،

64
00:05:32,140 --> 00:05:37,790
لم تعد هناك حاجة لهذه الأطباق من الملف المحلي هناك.

65
00:05:37,790 --> 00:05:40,970
أنا ذاهب لتحميل تلك البيانات من جانب الخادم.

66
00:05:40,970 --> 00:05:46,475
لذلك، أنا ذاهب لإزالة ذلك ومن ثم إضافة في استيراد

67
00:05:46,475 --> 00:05:55,460
هتبكلينت من الزاوي،

68
00:05:55,460 --> 00:06:00,150
كل هتب مشترك،

69
00:06:01,240 --> 00:06:10,130
استيراد باسيورل من،

70
00:06:10,130 --> 00:06:19,015
أذكر أن هذا هو في مشاركة/باسورل.

71
00:06:19,015 --> 00:06:21,715
الآن، داخل ديشسرفيس،

72
00:06:21,715 --> 00:06:24,960
أنا ذاهب للذهاب وجلب البيانات من جانب الخادم.

73
00:06:24,960 --> 00:06:27,510
لذا، في المُنشئ،

74
00:06:27,510 --> 00:06:31,740
سأقوم بتحديث المُنشئ عن طريق

75
00:06:32,260 --> 00:06:39,615
حقن HttpClient في مُنشئ بلدي هنا.

76
00:06:39,615 --> 00:06:45,275
لذا، الآن، يجب إعداد DishService الخاص بي

77
00:06:45,275 --> 00:06:50,990
للحصول على البيانات من جانب الخادم وإرجاع البيانات إلى طلبي.

78
00:06:50,990 --> 00:06:52,340
الآن، لاحظت أن

79
00:06:52,340 --> 00:06:56,915
طريقة getDubishes قد تم إعدادها بالفعل لإرجاع الملاحظ إلى المكون.

80
00:06:56,915 --> 00:06:58,980
لذلك، تم إعداد هذا الجزء بالفعل.

81
00:06:58,980 --> 00:07:06,080
الآن، ما سيعود إليه هذا هو ما يحصل عليه من

82
00:07:06,080 --> 00:07:13,230
طريقة الحصول على HTTP

83
00:07:13,230 --> 00:07:17,760
التي سنطلق عليها جانب الخادم.

84
00:07:17,760 --> 00:07:21,015
لذلك، من أجل استدعاء جانب الخادم،

85
00:07:21,015 --> 00:07:23,775
وسوف تضطر إلى توفير،

86
00:07:23,775 --> 00:07:25,395
ضمن طريقة الحصول على،

87
00:07:25,395 --> 00:07:30,750
باسيورل التي

88
00:07:30,750 --> 00:07:36,020
حصلت عليها بالفعل، ومن ثم الأطباق.

89
00:07:36,020 --> 00:07:44,000
لذا، بهذه الطريقة، فإن طريقة الحصول على HTTP ستحصل على البيانات من المضيف المحلي: 3000/days.

90
00:07:44,610 --> 00:07:49,760
لذلك، هذا هو عنوان URL من جانب الخادم

91
00:07:49,760 --> 00:07:54,995
الذي يمكنك من خلاله إحضار بيانات الأطباق هنا. هذا هو

92
00:07:54,995 --> 00:08:01,430
سيقوم الخادم الخاص بي بتوفير البيانات في شكل

93
00:08:01,430 --> 00:08:07,660
ملاحظة لهذه الخدمة عند استدعاء طريقة الحصول على HTTP،

94
00:08:07,660 --> 00:08:14,495
وسيتم إرجاعها إلى المكون من خلال طريقة getDubishes.

95
00:08:14,495 --> 00:08:19,580
هذا حول هذا الموضوع الآن، يتم إعداد خدمتي للذهاب

96
00:08:19,580 --> 00:08:24,525
وجلب البيانات من جانب الخادم ثم إرجاع البيانات إلى المكون الخاص بي.

97
00:08:24,525 --> 00:08:29,670
أنا ذاهب لتحديث الأساليب المتبقية أيضا بطريقة مماثلة.

98
00:08:29,670 --> 00:08:36,230
لذا، ما سأفعله للطريقة التالية لطريقة getDish هو،

99
00:08:36,230 --> 00:08:38,760
سأقوم بنسخ

100
00:08:39,190 --> 00:08:48,015
هذا الجزء ثم ببساطة لصقه في مكانه هنا،

101
00:08:48,015 --> 00:08:49,890
وبعد ذلك سنقوم بتحرير ذلك.

102
00:08:49,890 --> 00:08:54,830
الآن، عندما تحتاج إلى الحصول على طبق معين،

103
00:08:54,830 --> 00:08:58,865
لديك معرف الطبق الذي هو متاح لك.

104
00:08:58,865 --> 00:09:03,870
لذلك، سنقول معرف GetDish متاح كمعلمة.

105
00:09:03,870 --> 00:09:05,745
لذلك، إلى الأطباق،

106
00:09:05,745 --> 00:09:10,130
وأنا ذاهب لإضافة معرف كمعلمة أخرى هنا.

107
00:09:10,130 --> 00:09:13,250
الآن، عندما أتلقى الاستجابة ثم

108
00:09:13,250 --> 00:09:18,905
إعادته إلى المكون من خلال استدعاء الأسلوب getDish.

109
00:09:18,905 --> 00:09:21,470
وبالمثل، بالنسبة للطبق المميز،

110
00:09:21,470 --> 00:09:26,355
ستكون طريقة مثيرة للاهتمام بعض الشيء لتكوينه.

111
00:09:26,355 --> 00:09:28,945
الآن، بالنسبة للطبق المميز،

112
00:09:28,945 --> 00:09:32,705
عندما تحتاج إلى الوصول إلى البيانات من جانب الخادم،

113
00:09:32,705 --> 00:09:34,785
ما سأقوم به هو، الآن،

114
00:09:34,785 --> 00:09:41,140
عندما أسأل عن طبق مميز، الآن،

115
00:09:41,140 --> 00:09:45,410
الطريقة التي يتم بها إعداد جانب الخادم هو أنه يمكنني إرسال

116
00:09:45,410 --> 00:09:51,580
معلمة الاستعلام داخل عنوان URL الخاص بي حتى أتمكن من قول الأطباق؟

117
00:09:51,580 --> 00:09:56,615
ثم أقول مميزة مساوية لصحيح.

118
00:09:56,615 --> 00:10:00,290
لذا، بهذه الطريقة، سيعود الخادم الخاص بي

119
00:10:00,290 --> 00:10:06,840
فقط تلك الكائنات التي تم تعيين العلامة المميزة لها إلى true،

120
00:10:06,840 --> 00:10:09,965
أو يتم تعيين الخاصية المميزة إلى true على جانب الخادم.

121
00:10:09,965 --> 00:10:13,770
الآن، هذه هي الطريقة التي يتم بها إعداد جانب الخادم.

122
00:10:13,770 --> 00:10:15,670
الآن، مرة أخرى، بمجرد الحصول على البيانات،

123
00:10:15,670 --> 00:10:20,390
فإنك ببساطة تقوم بتعيين القيمة ثم ترجع ذلك

124
00:10:20,390 --> 00:10:25,490
كعنصر يمكن ملاحظته إلى مكونتي من خلال طريقة الطبق المميزة.

125
00:10:25,490 --> 00:10:30,110
عند الاستعلام عن جانب الخادم باستخدام معلمة الاستعلام،

126
00:10:30,110 --> 00:10:34,155
فإنه سيتم إرجاع صفيف من الكائنات التي تتطابق.

127
00:10:34,155 --> 00:10:39,350
في هذه الحالة، يحدث أن يحتوي الصفيف على عنصر واحد بالضبط هناك.

128
00:10:39,350 --> 00:10:44,230
ولكن عندما أعيد القيمة بعد الحصول على النتيجة،

129
00:10:44,230 --> 00:10:51,865
أحتاج أيضًا إلى تضمين صفر هناك لأن هذا مصفوفة،

130
00:10:51,865 --> 00:10:55,460
لذلك أحتاج إلى إرجاع العنصر الأول من الصفيف.

131
00:10:55,460 --> 00:11:00,050
قبل أن أنسى، اسمحوا لي استيراد

132
00:11:00,050 --> 00:11:10,770
مشغل الخريطة من مشغلي rxjs.

133
00:11:10,770 --> 00:11:14,200
الآن، بالنسبة لآخر واحد، GetDishids،

134
00:11:14,200 --> 00:11:17,570
ما سأقوم به هو الاستفادة من حقيقة أن

135
00:11:17,570 --> 00:11:27,340
لدي بالفعل طريقة getDishids المتاحة لي.

136
00:11:27,340 --> 00:11:31,705
لذلك، عندما ترجع طريقة getDuses،

137
00:11:31,705 --> 00:11:37,610
سأقوم بتعيين ذلك مع مشغل الخريطة

138
00:11:41,280 --> 00:12:00,475
كما dishes.map، dish.dish معرف

139
00:12:00,475 --> 00:12:07,105
لذا، بهذه الطريقة، أنا عائد فقط القيمة التي أحتاجها،

140
00:12:07,105 --> 00:12:10,840
فقط معرفات الطبق من خلال هذه الطريقة هنا.

141
00:12:10,840 --> 00:12:12,765
هذا حول هذا الموضوع

142
00:12:12,765 --> 00:12:19,410
الآن، يتم تحديث خدمة طبق بلدي تماما للذهاب وجلب البيانات من

143
00:12:19,410 --> 00:12:27,840
موقع الخادم ومن ثم توفير البيانات إلى مكوناتي في بلدي.

144
00:12:27,840 --> 00:12:30,230
تطبيق الزاوي هنا.

145
00:12:30,230 --> 00:12:31,775
في الخطوة التالية،

146
00:12:31,775 --> 00:12:34,645
سأذهب إلى مكون القائمة.

147
00:12:34,645 --> 00:12:37,085
ثم داخل مكون القائمة،

148
00:12:37,085 --> 00:12:45,400
سأستخدم واجهة الحقن المتوفرة من خلال

149
00:12:45,400 --> 00:12:53,900
النواة الزاوي لحقن هذا baseURL التي حصلت عليها هناك.

150
00:12:53,900 --> 00:12:56,340
إذاً، كيف نستفيد من ذلك؟

151
00:12:56,340 --> 00:13:00,665
ضمن منشئ المكون الخاص بي،

152
00:13:00,665 --> 00:13:03,530
سأذهب وأقول،

153
00:13:05,520 --> 00:13:12,910
"@Inject" لذا، أذكر أننا قد أنشأنا

154
00:13:12,910 --> 00:13:20,675
هذا baseURL كمزود لهذه القيمة في وحدة التطبيق في وقت سابق.

155
00:13:20,675 --> 00:13:27,425
لذلك، يمكن الآن حقن baseurl في المكون مثل هذا هنا.

156
00:13:27,425 --> 00:13:29,120
الآن، عندما يكون لديك خدمة،

157
00:13:29,120 --> 00:13:31,170
فأنت تقوم بحقن خدمات مثل هذه هنا،

158
00:13:31,170 --> 00:13:32,875
ولكن عندما يكون لديك قيمة،

159
00:13:32,875 --> 00:13:38,050
فإنك تقوم بحقن القيمة باستخدام الديكور "@Inject".

160
00:13:38,050 --> 00:13:45,935
هنا، نحن نحدد قيمة الموفر التي حددناها هناك.

161
00:13:45,935 --> 00:13:48,720
قلنا، تقديم: Baseurl هناك،

162
00:13:48,720 --> 00:13:50,580
لذلك هذه هي القيمة التي نوفرها هنا.

163
00:13:50,580 --> 00:13:53,470
ثم، وأنا أعلن هذا على أنه باسورل الخاص.

164
00:13:53,470 --> 00:13:55,660
حتى الآن، ضمن شفرتي هنا،

165
00:13:55,660 --> 00:14:02,910
هذا باسيورل متاح لتكوين كل ما أحتاجه داخل طلبي هنا.

166
00:14:02,910 --> 00:14:04,985
بينما ما زلت هنا،

167
00:14:04,985 --> 00:14:14,450
سأقوم بإزالة هذا الطبق المحدد الذي لا يتم استخدامه أيضًا داخل طلبي.

168
00:14:15,300 --> 00:14:21,190
ثم، هذه الطريقة أيضا أنا لا تستخدم مع طلبي،

169
00:14:21,190 --> 00:14:27,925
لذلك اسمحوا لي أن تفعل قليلا من التنظيف بينما ما زلت هنا.

170
00:14:27,925 --> 00:14:30,635
ستبقى الطريقة التي نعالج بها البيانات التي حصلنا عليها من الخدمة كما هي بالضبط.

171
00:14:30,635 --> 00:14:34,565
لأن خدمتي لا تزال تعود ويمكن ملاحظتها،

172
00:14:34,565 --> 00:14:38,055
وأنا أشترك في الملاحظة داخل هذا المكون.

173
00:14:38,055 --> 00:14:40,765
لذلك، هذا الجزء لا يتغير على الإطلاق.

174
00:14:40,765 --> 00:14:47,645
الآن، السبب في أنني حقن baseurl داخل المكون الخاص بي هو أنه،

175
00:14:47,645 --> 00:14:50,935
في قالب بلدي هنا،

176
00:14:50,935 --> 00:14:53,985
وأنا الحصول على صورة الطبق هنا.

177
00:14:53,985 --> 00:15:00,625
الآن، ولكن يجب الحصول على صورة الطبق هذه من الخادم الخاص بي هناك،

178
00:15:00,625 --> 00:15:03,270
من خادم JSON هناك.

179
00:15:03,270 --> 00:15:08,800
لذلك، أنا بحاجة للذهاب في ومن ثم تحديث هذا المصدر ليقول،

180
00:15:08,800 --> 00:15:13,020
باسيورل بالإضافة إلى صورة طبق.

181
00:15:13,020 --> 00:15:18,180
لذلك، أحتاج إلى توفير عنوان URL الكامل لتلك الصورة هناك.

182
00:15:18,180 --> 00:15:26,995
لذا، يجب أن يكون ذلك، httlp://localhost:3000/images/، أيا كان.

183
00:15:26,995 --> 00:15:29,640
لذلك، هذا هو السبب في أنني بحاجة إلى توفير

184
00:15:29,640 --> 00:15:34,605
قيمة باسيورل بالإضافة إلى صورة الطبق هنا.

185
00:15:34,605 --> 00:15:37,470
لذلك، هذا أنا ذاهب إلى أرفق بين علامات الاقتباس،

186
00:15:37,470 --> 00:15:43,395
لذلك هذه هي الطريقة تعبير مثل هذا داخل الاستيفاء سوف تعمل بشكل صحيح.

187
00:15:43,395 --> 00:15:48,935
لذا، أرفق هذا ضمن علامات الاقتباس ثم قم بتزويده كقيمة مصدر،

188
00:15:48,935 --> 00:15:54,730
ثم ترى أنك تستخدم BaseUrl بالإضافة إلى صورة الطبق،

189
00:15:54,730 --> 00:16:00,725
وdish.image، تحتوي خاصية الصورة على عنوان URL الجزئي فقط.

190
00:16:00,725 --> 00:16:05,645
لذلك، فإنه يحتوي على الصور مائلة واسم الملف image.png.

191
00:16:05,645 --> 00:16:14,640
لذا، هذا هو السبب في أنني بحاجة إلى إلحاق http://localhost:3000/،

192
00:16:14,640 --> 00:16:23,220
إلى خاصية صورة الطبق تلك بحيث أقوم بإنشاء عنوان URL الكلي لصورتي.

193
00:16:23,220 --> 00:16:27,385
لذلك، مع هذا، يتم الآن إعداد مكون القائمة الخاص بي بالكامل

194
00:16:27,385 --> 00:16:32,000
للحصول على كافة البيانات من جانب الخادم.

195
00:16:32,000 --> 00:16:37,100
الآن، وبالمثل، أود أن أقترح عليك تحديث

196
00:16:37,100 --> 00:16:43,440
مكون تفاصيل الطبق وأيضا مكون المنزل.

197
00:16:43,440 --> 00:16:45,790
الذهاب إلى مكون تفاصيل الطبق،

198
00:16:45,790 --> 00:16:48,050
استخدم الحقن هناك،

199
00:16:48,050 --> 00:16:52,885
ثم الذهاب إلى المنشئ،

200
00:16:52,885 --> 00:16:57,685
في المنشئ، والآن أحتاج إلى استخدام

201
00:16:57,685 --> 00:17:13,690
حقن baseURL و baseURL هناك،

202
00:17:13,690 --> 00:17:24,185
وهكذا، يتم إعداد مكون تفاصيل الطبق الخاص بي الآن للحصول على البيانات من خدمة الطبق.

203
00:17:24,185 --> 00:17:26,620
لذلك، فإن هذا الجزء لم يعد يتغير،

204
00:17:26,620 --> 00:17:29,780
فإنه لا يزال هو نفسه تماما لأن خدمة الطبق بلدي هو ببساطة

205
00:17:29,780 --> 00:17:34,395
إرجاع ملحوظ وأنا الاشتراك في ذلك يمكن ملاحظتها هنا.

206
00:17:34,395 --> 00:17:40,065
أنا أيضا بحاجة إلى تحديث ملف قالب مكونات تفاصيل الطبق،

207
00:17:40,065 --> 00:17:43,310
لذلك الذهاب بالمثل إلى مصدر الصورة هنا،

208
00:17:43,310 --> 00:17:52,645
وأود أن أضيف باسيورل بالإضافة إلى صورة الطبق ومن ثم وضع ذلك ضمن الاقتباسات هناك.

209
00:17:52,645 --> 00:17:57,565
وبالمثل، الذهاب إلى مكون المنزل، نفس الشيء.

210
00:17:57,565 --> 00:18:02,830
سأقوم بعمل حقنة،

211
00:18:02,830 --> 00:18:09,320
وفي المنشئ

212
00:18:10,860 --> 00:18:18,080
أقوم بحقن baseurl،

213
00:18:22,380 --> 00:18:27,640
والذهاب إلى ملف قالب المكونات الرئيسية،

214
00:18:27,640 --> 00:18:33,480
وبالمثل حيث أستخدم صورة الطبق هنا،

215
00:18:33,480 --> 00:18:39,700
لذلك سأقول، BaseUrl بالإضافة إلى صورة الطبق،

216
00:18:39,700 --> 00:18:44,815
ثم أرفقه ضمن علامات الاقتباس هنا،

217
00:18:44,815 --> 00:18:48,530
ثم حفظ التغييرات.

218
00:18:52,230 --> 00:18:58,805
إذاً، هذا كل شيء يتم تحديث طلبي الآن لاستخدام

219
00:18:58,805 --> 00:19:04,540
الخادم للحصول على البيانات للأطباق.

220
00:19:04,540 --> 00:19:09,775
لذلك، دعونا نذهب ونرى التطبيق في المتصفح.

221
00:19:09,775 --> 00:19:11,630
الذهاب إلى المتصفح،

222
00:19:11,630 --> 00:19:14,150
يمكنك الآن أن ترى أنه داخل المتصفح الخاص

223
00:19:14,150 --> 00:19:18,480
بي، يتم تقديم الطبق الخاص بي بالضبط كما كان من قبل،

224
00:19:18,480 --> 00:19:20,920
ومن ثم الذهاب إلى مكون القائمة،

225
00:19:20,920 --> 00:19:26,380
ترى أن القائمة تجعل بالضبط كما كان من قبل ومكون تفاصيل الطبق،

226
00:19:26,380 --> 00:19:31,935
كما يتم تقديم تفاصيل الطبق بالضبط كما كان من قبل.

227
00:19:31,935 --> 00:19:38,015
لذلك، مع التغيير الذي أدخلناه عن طريق الوصول إلى البيانات من جانب الخادم،

228
00:19:38,015 --> 00:19:41,075
ونحن قادرون على جلب البيانات من جانب الخادم ومن ثم

229
00:19:41,075 --> 00:19:45,335
تقديم البيانات داخل تطبيق Angular الخاص بنا.

230
00:19:45,335 --> 00:19:51,365
من أجل إقناعك بأن البيانات يتم الحصول عليها بالفعل من خادم JSON الخاص بي،

231
00:19:51,365 --> 00:19:58,590
دعنا نذهب إلى المحطة الطرفية ثم نرى السجل على نافذة المحطة الطرفية هناك.

232
00:19:58,590 --> 00:20:03,620
الذهاب إلى المحطة حيث يتم تشغيل خادم JSON الخاص بي،

233
00:20:03,620 --> 00:20:08,625
يمكنك أن ترى أنني قمت بالفعل بتنفيذ مجموعة من طلبات Git

234
00:20:08,625 --> 00:20:14,030
من موقع الخادم الخاص بي للحصول على جميع البيانات التي أحتاجها داخل طلبي.

235
00:20:14,030 --> 00:20:20,755
لذلك، في الواقع بلدي التطبيق الزاوي هو الآن جلب جميع البيانات

236
00:20:20,755 --> 00:20:27,850
من موقع الخادم لجميع الأطباق داخل بلدي تطبيق الزاوي.

237
00:20:27,850 --> 00:20:31,405
الآن، يمكنك استخدام نفس النهج لتحديث

238
00:20:31,405 --> 00:20:35,035
أحدث خدمة وأيضا خدمة الترويج،

239
00:20:35,035 --> 00:20:40,200
ولكن سوف نؤجل ذلك حتى المهمة النهائية في هذه الدورة،

240
00:20:40,200 --> 00:20:43,380
ولكن هذا قد يكمل هذا التمرين.

241
00:20:43,380 --> 00:20:46,920
في هذا التمرين، تعلمنا كيفية

242
00:20:46,920 --> 00:20:50,420
الاستفادة من عميل HTTP من أجل الحصول على البيانات من

243
00:20:50,420 --> 00:20:54,595
موقع الخادم ومن ثم استخدام البيانات في بناء

244
00:20:54,595 --> 00:20:59,525
طرق العرض داخل مكونات تطبيق Angular الخاص بنا.

245
00:20:59,525 --> 00:21:06,000
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة هتب الجزء الأول.