1
00:00:03,680 --> 00:00:11,610
الآن بعد أن كان لديك مقدمة الأولى للبرمجة التفاعلية، RxJS،

2
00:00:11,610 --> 00:00:14,880
واستخدام نمط المراقب

3
00:00:14,880 --> 00:00:21,165
وكيف يعزز Angular نمط المراقب ويدعم البرمجة التفاعلية،

4
00:00:21,165 --> 00:00:24,600
دعونا ننتقل إلى أول تمرين لدينا للحصول على أقدامنا

5
00:00:24,600 --> 00:00:29,315
الرطب باستخدام الملاحظات في Angular.

6
00:00:29,315 --> 00:00:35,950
في هذا التمرين، سنقوم بتحديث خدماتنا للاستفادة من الملاحظات،

7
00:00:35,950 --> 00:00:43,999
لأنه عندما ننتقل إلى الوحدة التالية حيث سننظر إلى دعم HTTP في Angular،

8
00:00:43,999 --> 00:00:49,915
سنفهم على الفور أن دعم HTTP في Angular يستند إلى المرصد.

9
00:00:49,915 --> 00:00:54,485
لذلك، انها فكرة جيدة بالنسبة لنا

10
00:00:54,485 --> 00:00:59,870
للتعرف على أنفسنا باستخدام الملاحظة في هذا الدرس نفسه.

11
00:00:59,870 --> 00:01:04,770
لذلك، سنقوم بتحديث الخدمات لتصدير الملاحظات.

12
00:01:04,770 --> 00:01:08,479
بعد ذلك، ضمن مكوناتنا،

13
00:01:08,479 --> 00:01:11,270
سوف نشارك في هذه الملاحظات

14
00:01:11,270 --> 00:01:15,190
والحصول على البيانات المطلوبة لتقديم وجهات النظر.

15
00:01:15,190 --> 00:01:19,340
دعونا نذهب إلى التمرين التالي.

16
00:01:19,340 --> 00:01:21,680
يجب أن تتساءل،

17
00:01:21,680 --> 00:01:25,390
كيف يمكننا الاستفادة من RxJS داخل Angular،

18
00:01:25,390 --> 00:01:28,510
وهل هو متاح بالفعل لنا؟

19
00:01:28,510 --> 00:01:31,730
لذلك ما ستلاحظه هو أنه مع CLI Angular،

20
00:01:31,730 --> 00:01:34,480
عندما تقوم بتسوية تطبيق Angular الخاص بك،

21
00:01:34,480 --> 00:01:37,040
يتم تضمين RxJS تلقائيًا هناك.

22
00:01:37,040 --> 00:01:39,560
لذلك، إذا ذهبت إلى ملف package.json،

23
00:01:39,560 --> 00:01:42,795
فستلاحظ أنه ضمن التبعيات،

24
00:01:42,795 --> 00:01:48,900
يتم تضمين مكتبة RxJS بالفعل داخل التطبيق الخاص بك.

25
00:01:48,900 --> 00:01:53,155
لذلك، كل ما تحتاج إلى استخدامه من RxJS متاح بالفعل لك.

26
00:01:53,155 --> 00:02:00,215
حتى نتمكن من المضي قدما واستخدام مكتبة RxJS على الفور داخل تطبيق Angular الخاص بنا.

27
00:02:00,215 --> 00:02:03,735
إذا كنت تقوم ببناء تطبيق Angular الخاص بك من الصفر،

28
00:02:03,735 --> 00:02:08,450
فأنت بحاجة إلى إجراء تثبيت npm لـ RxJS بشكل صريح.

29
00:02:08,450 --> 00:02:11,135
الذهاب إلى ملف dish.service.js،

30
00:02:11,135 --> 00:02:21,080
اسمحوا لي أولا استيراد

31
00:02:21,080 --> 00:02:27,750
من لدينا «rxjs» الملاحظات.

32
00:02:28,960 --> 00:02:32,045
سنقوم أيضًا باستيراد- الآن،

33
00:02:32,045 --> 00:02:35,235
عند استخدام RxJS داخل تطبيق Angular الخاص بك،

34
00:02:35,235 --> 00:02:37,330
لا يتم تضمين المكتبة بأكملها.

35
00:02:37,330 --> 00:02:41,445
يمكنك فقط استيراد أي أجزاء تحتاج إليها من مكتبة RxJS،

36
00:02:41,445 --> 00:02:43,400
ثم استخدامها داخل تطبيق Angular الخاص بك.

37
00:02:43,400 --> 00:02:52,070
لذلك، عندما يتم إعداد تطبيق Angular الخاص بك أخيراً للنشر،

38
00:02:52,070 --> 00:02:56,030
سيتم تضمين الأجزاء فقط من RxJS المطلوبة في تطبيق Angular الخاص بك.

39
00:02:56,030 --> 00:02:58,055
مشغل التأخير

40
00:02:58,055 --> 00:03:07,815
المشغل تأخير تمكننا من تأخير انبعاث هذا البند من لدينا يمكن ملاحظتها.

41
00:03:07,815 --> 00:03:09,780
الخوض في الأساليب،

42
00:03:09,780 --> 00:03:15,295
سنقوم الآن بتحديث هذه الأساليب للاستفادة من المرصد،

43
00:03:15,295 --> 00:03:18,230
وسوف نعيد وعد عن طريق تحويل

44
00:03:18,230 --> 00:03:21,755
الملاحظة إلى وعدك باستخدام مشغل ToPromess.

45
00:03:21,755 --> 00:03:27,700
لذلك، إذا كنت بالفعل تحتوي على مكونات تستخدم الوعود،

46
00:03:27,700 --> 00:03:30,520
وتريد عدم تعديل المكونات،

47
00:03:30,520 --> 00:03:33,470
فيمكنك ببساطة تحويل عنصر يمكن

48
00:03:33,470 --> 00:03:37,890
ملاحظته إلى وعدك ثم إرسال الوعد إلى مكوناتك.

49
00:03:37,890 --> 00:03:42,265
كما أدركنا، ستصدر الوعود عنصرًا واحدًا فقط،

50
00:03:42,265 --> 00:03:48,000
في حين يمكنك أن ترى أن المرصد يعتمد على التدفقات.

51
00:03:48,000 --> 00:03:51,350
لذلك، هذا هو القيد الذي ستحصل عليه إذا كنت

52
00:03:51,350 --> 00:03:54,560
تستخدم فقط مشغل الوعد اثنين على المرصد

53
00:03:54,560 --> 00:03:58,520
والاستفادة منه لأن مشغل ToPromise

54
00:03:58,520 --> 00:04:03,525
سيمكن ملاحظتك من إصدار قيمة واحدة فقط.

55
00:04:03,525 --> 00:04:09,350
ولكن في الوقت الحالي دعونا نفعل ذلك كخطوة أولى قبل أن

56
00:04:09,350 --> 00:04:14,665
ننتقل إلى التنفيذ الكامل الملحوظ لخدماتنا.

57
00:04:14,665 --> 00:04:17,820
لذلك، والذهاب إلى طريقة getDuses،

58
00:04:17,820 --> 00:04:22,370
وأنا ذاهب للعودة هذه الأطباق.

59
00:04:22,370 --> 00:04:27,950
لذلك, أنا ذاهب لإزالة هذا الجزء ومن ثم أقول, عودة.

60
00:04:27,950 --> 00:04:31,625
إذا كنت تريد أن تنبعث منها قيمة واحدة فقط من ملاحظتك،

61
00:04:31,625 --> 00:04:33,260
فستستخدم الطريقة،

62
00:04:33,260 --> 00:04:38,010
والتي ستأخذ أي قيمة تريد أن تنبعث منها هناك.

63
00:04:38,010 --> 00:04:43,300
هذا يكفي لطلبنا الحالي في الوقت الحالي.

64
00:04:43,300 --> 00:04:46,160
لذلك، نحن ذاهبون للاستفادة من ذلك،

65
00:04:46,160 --> 00:04:52,040
وأيضا نريد تأخير انبعاث القيمة بمقدار ثانيتين.

66
00:04:52,040 --> 00:04:55,565
لذلك، أنا ذاهب لتغيير هذا الجزء من التعليمات البرمجية لاستخدام

67
00:04:55,565 --> 00:05:01,895
عامل تأخير لبلدي يمكن ملاحظتها، وذلك باستخدام الأنابيب.

68
00:05:01,895 --> 00:05:09,360
أحتاج إلى تحويل هذا toPromise وإنبعاث الوعد.

69
00:05:09,360 --> 00:05:14,775
حتى الآن، يتم تحديث طريقة getDuses الخاصة بي للاستفادة من ملاحظة،

70
00:05:14,775 --> 00:05:19,665
ومن ثم تحويل ذلك إلى وعد ثم إرسال الوعد إلى المكون الخاص بي.

71
00:05:19,665 --> 00:05:22,710
لذلك لا أحتاج إلى إجراء أي تحديثات للمكون.

72
00:05:22,710 --> 00:05:31,200
دعونا نستخدم نفس الأسلوب لتحديث الطريقتين المتبقيتين من خدمتي هنا.

73
00:05:31,200 --> 00:05:34,455
لذلك أنا فقط ذاهب لنسخ هذا الجزء،

74
00:05:34,455 --> 00:05:42,225
ومن ثم تحديث هذا الجزء،

75
00:05:42,225 --> 00:05:46,140
ثم اتخاذ جزء تأخير منه،

76
00:05:46,140 --> 00:05:54,080
ومن ثم تحديث هذا الجزء لاستخدام التأخير

77
00:05:54,080 --> 00:06:06,300
وتحويل هذه الطريقة توبروميس.

78
00:06:06,300 --> 00:06:10,980
لذلك مع ذلك، يتم تحديث طريقة getDish الخاصة بي أيضًا.

79
00:06:10,980 --> 00:06:17,370
اسمحوا لي أن أفعل نفس الشيء إلى طريقة جيتفيتوريدديش.

80
00:06:17,370 --> 00:06:21,000
مرة أخرى، إذا كنت

81
00:06:21,000 --> 00:06:23,040
تريد، يمكنك كتابة كل شيء.

82
00:06:23,040 --> 00:06:32,270
أنا مجرد كسول لقطع ولصق وتغيير الأجزاء التي

83
00:06:32,270 --> 00:06:42,395
أريد تغييرها وتحويل هذه الطريقة ToPromise.

84
00:06:42,395 --> 00:06:52,800
هذا كل شيء يتم تحديث خدمتي الآن لإرجاع الوعود من ملاحظة هنا.

85
00:06:52,800 --> 00:06:54,405
لذلك، مع هذا التحديث،

86
00:06:54,405 --> 00:06:58,620
يتم تحديث خدمة الطبق الخاص بي للاستفادة من الملاحظة

87
00:06:58,620 --> 00:07:04,215
بدلاً من استخدام القيم مباشرة.

88
00:07:04,215 --> 00:07:10,460
وبالمثل، المضي قدما وتحديث الخدمة الرائدة وخدمة الترقية.

89
00:07:10,460 --> 00:07:13,415
ستلاحظ الآن أنني قمت بالفعل بتحديث

90
00:07:13,415 --> 00:07:17,985
خدمة القائد للاستفادة من المرصد.

91
00:07:17,985 --> 00:07:24,380
وبالمثل، قمت أيضا بتحديث خدمة الترويج للاستفادة من الملاحظات.

92
00:07:24,380 --> 00:07:28,200
حفظ التغييرات ودعونا نذهب ونلقي نظرة على طلبنا.

93
00:07:28,200 --> 00:07:29,890
عندما تذهب إلى المتصفح،

94
00:07:29,890 --> 00:07:34,745
ستلاحظ أن التطبيق الخاص بك ينفذ بالضبط بنفس الطريقة كما كان من قبل

95
00:07:34,745 --> 00:07:41,010
ويجلب البيانات من الخدمات تماما كما كان من قبل.

96
00:07:41,010 --> 00:07:45,160
لذلك ليس الكثير من التغيير داخل التطبيق الخاص بك على هذا النحو.

97
00:07:45,160 --> 00:07:46,850
فإنه يؤدي بالضبط نفس الشيء.

98
00:07:46,850 --> 00:07:51,035
لذلك، لاحظ أنه من خلال استبدال وعودك بالملاحظة،

99
00:07:51,035 --> 00:07:55,370
لم يكن هناك الكثير من التغيير داخل التطبيق الخاص بك كما تتوقع ذلك.

100
00:07:55,370 --> 00:07:58,460
الآن، دعنا نَذْهبُ خطوة أخرى إلى الأمام.

101
00:07:58,460 --> 00:08:04,540
سنسمح الآن لخدماتنا بإرجاع المرصد،

102
00:08:04,540 --> 00:08:08,240
وسنقوم بتحديث المكونات للاستفادة من المرصد.

103
00:08:08,240 --> 00:08:09,835
السبب كما ذكرت،

104
00:08:09,835 --> 00:08:13,790
هو أنه عندما نقوم بتحديث خدماتنا لاستخدام

105
00:08:13,790 --> 00:08:18,420
خدمة HTTP للانتقال إلى خادم لجلب البيانات،

106
00:08:18,420 --> 00:08:25,345
فإننا نلاحظ أنه في Angular، ستعود أساليب HTTP بالملاحظة.

107
00:08:25,345 --> 00:08:30,260
يمكن للخدمات ببساطة تمرير الملاحظات إلى مكوناتنا والسماح

108
00:08:30,260 --> 00:08:33,080
للمكونات الاشتراك في هذه الملاحظات والاستفادة

109
00:08:33,080 --> 00:08:36,215
من البيانات التي يحصلون عليها بذلك.

110
00:08:36,215 --> 00:08:41,020
لذا، ستكون هذه خطوة وسيطة بالنسبة لنا للوصول إلى تلك المرحلة.

111
00:08:41,020 --> 00:08:45,275
سوف نحصل على نظرة على هتب في الوحدة التالية.

112
00:08:45,275 --> 00:08:48,234
بالعودة إلى خدماتنا،

113
00:08:48,234 --> 00:08:52,460
يمكنك الآن إزالة ToPromise أولاً عن طريق إزالة

114
00:08:52,460 --> 00:08:55,400
مشغل ToPromise لأننا لا نحتاج إليه

115
00:08:55,400 --> 00:08:59,660
بعد الآن، وبعد ذلك سنقوم ببساطة بإزالة ToPromise من هذا،

116
00:08:59,660 --> 00:09:04,110
واستيراد يمكن ملاحظته، ثم السماح بدلاً من ذلك

117
00:09:04,110 --> 00:09:09,044
بطريقتنا بإرجاع

118
00:09:09,044 --> 00:09:16,140
الملاحظات بدلاً من الوعود .

119
00:09:16,140 --> 00:09:17,615
لذلك كما ذكرت،

120
00:09:17,615 --> 00:09:21,420
مهما كان الوعد يمكن القيام به يمكن ملاحظته أيضا.

121
00:09:22,810 --> 00:09:28,400
لذلك، دعونا تحديث كل هذه لإرجاع الملاحظات.

122
00:09:28,400 --> 00:09:32,695
افعل الشيء نفسه مع الخدمتين المتبقيتين.

123
00:09:32,695 --> 00:09:36,680
ستلاحظ الآن أنني قمت أيضًا بتحديث خدمة القائد

124
00:09:36,680 --> 00:09:40,725
ببساطة لإرجاع المرصد بدلاً من الوعود،

125
00:09:40,725 --> 00:09:43,984
كما تم

126
00:09:43,984 --> 00:09:47,735
تحديث خدمة الترويج بشكل مماثل للعودة إلى الملاحظة بدلاً من الوعود.

127
00:09:47,735 --> 00:09:52,460
الآن ما يعنيه هذا هو أننا بحاجة للذهاب وتحديث مكوناتنا

128
00:09:52,460 --> 00:09:57,590
للاستفادة من الملاحظات بدلا من الوعود كما فعلنا في وقت سابق.

129
00:09:57,590 --> 00:10:01,885
الآن من أجل الوعد، رأينا أننا بحاجة إلى

130
00:10:01,885 --> 00:10:07,430
استخدام.then للحصول على النتيجة عندما يتم تنفيذ عزم الوعد.

131
00:10:07,430 --> 00:10:12,495
مع ملاحظة، يتم تحويل.then إلى.subric.

132
00:10:12,495 --> 00:10:16,715
ستبقى الطريقة التي تستهلك بها البيانات كما هي تمامًا.

133
00:10:16,715 --> 00:10:19,890
لذلك مع هذا التغيير الطفيف داخل مكوناتك،

134
00:10:19,890 --> 00:10:25,480
ستتمكن المكونات الآن من التعامل مع المرصد بدلاً من الوعود.

135
00:10:25,480 --> 00:10:31,085
لذلك، والذهاب إلى جميع المكونات الأربعة التي تستفيد من الخدمات،

136
00:10:31,085 --> 00:10:37,185
أولا، دعونا نذهب إلى ملف menu.component.ts.

137
00:10:37,185 --> 00:10:39,280
في ملف menu.component.ts،

138
00:10:39,280 --> 00:10:42,080
ستلاحظ على الفور الخط الأحمر المتعرج هناك،

139
00:10:42,080 --> 00:10:48,100
تحت ذلك الحين من الواضح لأننا لا نعيد وعد.

140
00:10:48,100 --> 00:10:50,090
بدلا من ذلك نحن نعيد ملاحظتها.

141
00:10:50,090 --> 00:10:55,245
حتى مجرد تحويل ذلك ثم للاشتراك وهذا كل شيء. أصبح

142
00:10:55,245 --> 00:10:59,225
مكون القائمة الخاص بك الآن قادرًا

143
00:10:59,225 --> 00:11:04,910
على استهلاك القيم القابلة للملاحظة التي تنبعث من القيم القابلة للملاحظة.

144
00:11:04,910 --> 00:11:10,890
قم بإجراء نفس التغيير على ملف.component.ts حول ملف

145
00:11:10,890 --> 00:11:16,760
dishdetail.component.ts وملف home.component.ts.

146
00:11:16,760 --> 00:11:22,520
بعد تحديث ملفات Tapscott المكون المتبقي،

147
00:11:22,520 --> 00:11:27,245
دعنا نذهب وننظر إلى سلوك تطبيقنا في المتصفح.

148
00:11:27,245 --> 00:11:32,920
انتقل إلى المتصفح، ستلاحظ أي فرق في سلوك تطبيقنا.

149
00:11:32,920 --> 00:11:36,170
يتم تحديث هذا الإصدار من تطبيق Angular الخاص بنا لاستخدام

150
00:11:36,170 --> 00:11:40,275
الملاحظات بدلاً من الوعود.

151
00:11:40,275 --> 00:11:42,620
لذلك، المكون الرئيسي هنا،

152
00:11:42,620 --> 00:11:46,085
حول المكون يؤدي بالضبط بنفس الطريقة كما كان من قبل،

153
00:11:46,085 --> 00:11:49,800
ومكون القائمة يفعل بالضبط نفس الشيء.

154
00:11:49,800 --> 00:11:54,785
أيضا عنصر تفاصيل الطبق سوف تتصرف بالضبط بنفس الطريقة كما كان من قبل.

155
00:11:54,785 --> 00:11:57,960
مع هذا، نكمل هذا التمرين.

156
00:11:57,960 --> 00:12:01,430
في هذا التمرين، اتخذنا خطواتنا الأولى نحو استخدام

157
00:12:01,430 --> 00:12:05,030
الملاحظات داخل تطبيق Angular الخاص بنا من خلال تحديث

158
00:12:05,030 --> 00:12:08,330
الخدمات والمكونات المقابلة

159
00:12:08,330 --> 00:12:12,185
للاستفادة من الملاحظات بدلاً من الوعود.

160
00:12:12,185 --> 00:12:18,640
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع الرسالة RxJS الجزء الأول.