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

2
00:00:04,586 --> 00:00:08,713
اسمحوا لي الآن أن أقدم لكم لمحة سريعة عن Angular

3
00:00:08,713 --> 00:00:12,340
وعلاقتها مع البرنامج التفاعلي،

4
00:00:12,340 --> 00:00:16,780
كيف تستفيد Angular من البرمجة التفاعلية.

5
00:00:16,780 --> 00:00:21,988
على وجه الخصوص، مكتبة RxJS وكيف يتم الاستفادة منها بواسطة

6
00:00:21,988 --> 00:00:28,174
Angular لتوفير طريقة تفاعلية لكتابة التطبيقات Angular.

7
00:00:28,174 --> 00:00:33,199
الآن ما نقدمه في هذه المحاضرة هو نظرة عامة سريعة جدًا

8
00:00:33,199 --> 00:00:38,426
على المفهوم العام للبرمجة التفاعلية والملاحظة

9
00:00:38,426 --> 00:00:43,930
والنمط الملحوظ وكيفية تطبيقه في Angular.

10
00:00:43,930 --> 00:00:47,280
البرمجة التفاعلية في حد ذاتها هي

11
00:00:48,460 --> 00:00:52,100
موضوع واسع جدا لا يمكن تغطيته في عشر دقائق.

12
00:00:53,240 --> 00:00:54,410
البرمجة التفاعلية،

13
00:00:54,410 --> 00:00:59,800
إذا كنت بحاجة إلى تغطيتها بالتفصيل الكامل سوف تصبح دورة كاملة في حد ذاتها.

14
00:00:59,800 --> 00:01:01,421
ولسوء الحظ،

15
00:01:01,421 --> 00:01:07,372
ليس لدينا الوقت لتضمين دورة كاملة في هذا المسار بالذات.

16
00:01:07,372 --> 00:01:12,718
لذا بالنظر إلى حقيقة أننا مهتمون بشكل أساسي بكيفية استخدام Angular

17
00:01:12,718 --> 00:01:18,066
للبرمجة التفاعلية لتمكيننا من مضاعفة التطبيقات Angular،

18
00:01:18,066 --> 00:01:21,590
لذلك سنركز على هذا الجانب.

19
00:01:21,590 --> 00:01:22,455
ولكن على طول الطريق،

20
00:01:22,455 --> 00:01:28,340
سأعطيك مقدمة سريعة لمختلف المفاهيم في هذا المجال العام.

21
00:01:28,340 --> 00:01:30,720
إذا كنت مهتمًا بالبرمجة التفاعلية،

22
00:01:30,720 --> 00:01:36,100
فإنني أنصحك بشدة بمتابعة بعض الروابط التي قدمتها

23
00:01:36,100 --> 00:01:40,240
والموارد الإضافية لهذا الدرس بالذات.

24
00:01:40,240 --> 00:01:44,090
لديك إمكانية الوصول إلى الكثير من المواد هناك،

25
00:01:44,090 --> 00:01:48,220
لكننا سنعطيك أسس قوية في البرمجة التفاعلية.

26
00:01:48,220 --> 00:01:51,713
ولكن في هذه الدورة، من هذه النقطة فصاعدًا،

27
00:01:51,713 --> 00:01:57,448
سننظر في كيفية استفادة Angular من نموذج البرمجة التفاعلي

28
00:01:57,448 --> 00:02:00,150
لتصميم تطبيقات Angular.

29
00:02:00,150 --> 00:02:04,818
نحن لن يقتصر فقط على هذا الدرس، ولكن

30
00:02:04,818 --> 00:02:10,266
جميع الدروس اللاحقة سوف نرى أيضا المستخدمة من ملحوظ

31
00:02:10,266 --> 00:02:16,220
ونمط الملاحظة وكيف نكتب التطبيقات التفاعلية في الزاوي.

32
00:02:18,080 --> 00:02:22,800
تدور المناقشة الكاملة حول البرمجة التفاعلية حول

33
00:02:22,800 --> 00:02:27,770
هذا النمط الخاص لهندسة البرمجيات يسمى نمط يمكن ملاحظته.

34
00:02:27,770 --> 00:02:31,970
تتذكر عصابة الأربعة التي ذكرتها لك في واحدة من

35
00:02:31,970 --> 00:02:35,690
المحاضرات السابقة حيث ناقشنا حول إطار وحدة تحكم عرض النموذج

36
00:02:35,690 --> 00:02:38,140
وإطار نموذج عرض النموذج.

37
00:02:38,140 --> 00:02:43,246
نفس عصابة من أربعة كتاب يحتوي على بعض من النمط الذي

38
00:02:43,246 --> 00:02:49,616
تم استخدامه بنجاح كبير في نمط البرمجة التفاعلية.

39
00:02:49,616 --> 00:02:53,570
ويدور نمط المراقب حول المرصد.

40
00:02:53,570 --> 00:02:58,948
لذلك لديك ملاحظات، يمكن ملاحظة سلوكها من قبل المراقبين.

41
00:02:58,948 --> 00:03:02,200
لذلك هذا هو السبب في أن هذا يسمى نمط المراقب.

42
00:03:02,200 --> 00:03:07,180
أنت تعلن بعض الأشياء كما يمكن ملاحظتها أو الموضوعات

43
00:03:07,180 --> 00:03:12,060
وسيتم مراقبة هذه المرصد من قبل المراقبين. و

44
00:03:12,060 --> 00:03:15,190
الآن, سيقوم المراقبون أنفسهم بالتسجيل

45
00:03:16,280 --> 00:03:19,400
لمشاهدة التغييرات في التغييرات التي يمكن ملاحظتها, و

46
00:03:19,400 --> 00:03:24,010
سيقوم المرصد بإخطار المراقبين كلما حدثت تغييرات.

47
00:03:24,010 --> 00:03:29,781
حتى في هذا النمط المراقب، والطريقة التي سيشارك

48
00:03:29,781 --> 00:03:35,165
بها هؤلاء المراقبون في الملاحظة أو تسجيل أنفسهم مع الملاحظة.

49
00:03:35,165 --> 00:03:40,013
لذلك، هذه هي الطريقة التي يمكن ملاحظتها يعرف أي المراقبين المهتمين في

50
00:03:40,013 --> 00:03:42,430
أي تغييرات في حالتها.

51
00:03:42,430 --> 00:03:46,250
وبالتالي، كلما لاحظ ملاحظة يقول،

52
00:03:46,250 --> 00:03:51,830
تغيير في حالتها، فإنه سيتم على الفور إخطار جميع المراقبين

53
00:03:51,830 --> 00:03:56,660
عن تغيير الدولة والمراقبين في وقت لاحق يمكن

54
00:03:56,660 --> 00:04:02,170
اتخاذ إجراء بناء على هذا الإخطار من التغيير في ملحوظ.

55
00:04:02,170 --> 00:04:06,185
وقد استخدم نمط المراقبين بفعالية كبيرة في العديد من

56
00:04:06,185 --> 00:04:07,212
الظروف المختلفة.

57
00:04:07,212 --> 00:04:12,600
وبالفعل، فإن نموذج البرمجة التفاعلي يستند حوله.

58
00:04:12,600 --> 00:04:15,990
لذا، السؤال الذي يتبادر إلى ذهنك على الفور هو

59
00:04:15,990 --> 00:04:18,280
لماذا نتحدث عن الملاحظات؟

60
00:04:18,280 --> 00:04:21,730
ما هو الاهتمام الخاص بالملاحظة؟

61
00:04:21,730 --> 00:04:26,161
نمط المراقب هو طريقة واحدة لكتابة تطبيقات البرمجيات.

62
00:04:26,161 --> 00:04:29,760
لذلك، ويستند هذا حول تيارات.

63
00:04:29,760 --> 00:04:33,290
لذلك، لديك البيانات التي تتدفق التطبيق الخاص بك.

64
00:04:33,290 --> 00:04:37,826
يمكن عرض هذه البيانات على أنها تيار من القيم التي تتدفق من خلال

65
00:04:37,826 --> 00:04:38,879
التطبيق الخاص بك.

66
00:04:38,879 --> 00:04:44,158
لذا، فإن الدفق هو القناة الأساسية التي

67
00:04:44,158 --> 00:04:47,380
تم تصميم الملاحظات والنمط الملحوظ.

68
00:04:47,380 --> 00:04:51,007
لذلك، أي تيارات يمكنك الاشتراك في هذه التدفقات.

69
00:04:51,007 --> 00:04:55,762
وكلما ظهرت قيمة على الدفق، يمكنك التقاط هذه القيمة ومن

70
00:04:55,762 --> 00:04:58,400
ثم يمكنك الرد على تلك القيمة.

71
00:04:58,400 --> 00:05:02,430
حتى تتمكن من الرد على هذه القيمة، تحتاج إلى الاشتراك في هذا الدفق أو

72
00:05:02,430 --> 00:05:04,710
تحتاج إلى الاشتراك في الملاحظة.

73
00:05:04,710 --> 00:05:08,860
وسيحافظ الملاحظ في كثير من الأحيان على القيم التي تنبعث منها.

74
00:05:08,860 --> 00:05:13,059
وعندما ترى تلك القيم، يمكن للمراقب أن يتفاعل معها.

75
00:05:13,059 --> 00:05:16,413
الآن هذا يعني أيضًا أنه عندما لم تعد مهتمًا،

76
00:05:16,413 --> 00:05:19,660
يمكنك إلغاء الاشتراك بنفسك من جهاز يمكن ملاحظته.

77
00:05:19,660 --> 00:05:23,653
يمكنك القول أنني لست مهتماً بمشاهدتك بعد الآن ثم أختفي

78
00:05:23,653 --> 00:05:28,794
لذا فإن النمط الملحوظ يسمح لك بمراقبة التغييرات بشكل دوري،

79
00:05:28,794 --> 00:05:34,170
إذا كنت تريد ثم التوقف عن المراقبة عندما لم تعد مهتمًا.

80
00:05:34,170 --> 00:05:38,855
لذلك هذا النوع من النموذج تمكنك من تصميم

81
00:05:38,855 --> 00:05:43,135
تطبيقات البرمجيات الخاصة بك بطريقة مثيرة جدا للاهتمام، بطريقة بديهية جدا.

82
00:05:43,135 --> 00:05:45,435
ولكن لتكون قادرة على استخدام هذا النهج،

83
00:05:45,435 --> 00:05:48,513
تحتاج إلى الحصول على رأسك حول هذا النهج.

84
00:05:48,513 --> 00:05:55,455
تماما كما رأينا مع نمط رد الاتصال أو رأينا مع استخدام الوعود.

85
00:05:55,455 --> 00:06:01,740
المرصد هو طريقة أخرى لتصميم التطبيقات.

86
00:06:01,740 --> 00:06:06,605
لذلك، يمكن ملاحظته في حد ذاته سيكون كسول جدا وسوف يتسكع فقط هناك.

87
00:06:06,605 --> 00:06:10,360
لذلك، يمكنك إنشاء ملاحظة ومن ثم مجرد تركها هناك.

88
00:06:10,360 --> 00:06:12,496
يصبح الملاحظ نشطًا أو

89
00:06:12,496 --> 00:06:16,777
يصبح ساخنًا عندما يبدأ شخص ما في الاشتراك في المراقب.

90
00:06:16,777 --> 00:06:21,380
حتى في هذه المرحلة، المراقب ركلات إلى العمل ويبدأ تحرير القيم.

91
00:06:21,380 --> 00:06:25,515
لذلك إذا تم تكليف مراقب واحد على الأقل في الملاحظة،

92
00:06:25,515 --> 00:06:29,000
فسيبدأ الملاحظ في بث القيم.

93
00:06:29,000 --> 00:06:36,010
إذا لم يعهد أحد، يمكن ملاحظته سيعود إلى قشرته ويبقى هناك.

94
00:06:36,010 --> 00:06:38,058
لذلك، يمكنك التفكير في الأمر بهذه الطريقة.

95
00:06:38,058 --> 00:06:42,231
حتى إذا كانت تلك الصورة العقلية تساعدك على فهم

96
00:06:42,231 --> 00:06:46,760
كيفية عمل براءة اختراع المراقب، فليكن ذلك.

97
00:06:46,760 --> 00:06:51,939
لذا، سيساعدك ذلك على النظر إلى الطريقة التي نصمم بها تطبيقاتنا

98
00:06:51,939 --> 00:06:56,657
في التمارين التي تتبع ثم الدروس اللاحقة

99
00:06:56,657 --> 00:07:01,116
حيث ندرس HTTP المدعومة Angular بمزيد من التفصيل.

100
00:07:04,490 --> 00:07:11,222
أحد الجوانب الأخرى للملاحظة هو حقيقة أن إلغاء طلب سابق

101
00:07:11,222 --> 00:07:16,172
ثم إعادة المحاولة أمر واضح للغاية مع المرصد.

102
00:07:16,172 --> 00:07:20,660
الوعد الذي رأيته في وقت سابق، بمجرد أن تبدأ في انتظار وعد،

103
00:07:20,660 --> 00:07:23,690
لا يمكنك إلغاء، أنت تنتظر.

104
00:07:23,690 --> 00:07:26,878
الوعد سيحل أو يفشل في نهاية المطاف

105
00:07:26,878 --> 00:07:31,907
، ومن ثم عليك أن تتفاعل بغض النظر عما إذا كنت لم تعد مهتمًا به.

106
00:07:31,907 --> 00:07:36,075
ولكن مع ملاحظة، إذا كنت تستطيع بيع اشتراكك،

107
00:07:36,075 --> 00:07:41,540
ثم أن ما يحدث مع يمكن ملاحظته ليس أي قلق بالنسبة لك على الإطلاق.

108
00:07:41,540 --> 00:07:45,019
وبالتالي لا تحتاج إلى القيام بأي شيء، إذا قمت بإلغاء اشتراكك.

109
00:07:45,019 --> 00:07:50,732
لذا، فإن الإلغاء وإعادة المحاولة في حالة عدم

110
00:07:50,732 --> 00:07:55,599
نجاح المحاكمة السابقة أمر واضح للغاية مع الملاحظة.

111
00:07:55,599 --> 00:08:01,710
سنرى بعض هذه السلوكيات بمزيد من التفصيل في التدريبات التالية. و

112
00:08:03,050 --> 00:08:06,771
هذا يقودنا إلى مفهوم البرمجة التفاعلية.

113
00:08:06,771 --> 00:08:11,071
تستند البرمجة التفاعلية حول نمط المراقب

114
00:08:11,071 --> 00:08:13,550
وأيضا نمط متكرر.

115
00:08:13,550 --> 00:08:14,243
ولكن على أي حال،

116
00:08:14,243 --> 00:08:18,610
فإن نمط المراقب هو السمة المهيمنة للبرمجة التفاعلية.

117
00:08:18,610 --> 00:08:22,670
لذلك في البرمجة التفاعلية، نحن مهتمون بتدفق البيانات.

118
00:08:22,670 --> 00:08:25,780
كيفية تدفق البيانات من خلال التطبيق الخاص بك.

119
00:08:25,780 --> 00:08:29,450
يمكن التعامل مع أي تدفق بيانات على أنه تيار.

120
00:08:29,450 --> 00:08:34,510
لذلك يمكن لتدفق البيانات هذا نشر التغييرات في جميع أنحاء التطبيق الخاص بك.

121
00:08:34,510 --> 00:08:37,940
وبينما يتم نشر التغييرات من خلال التطبيق،

122
00:08:39,140 --> 00:08:43,440
في المراحل الوسيطة يمكنك حتى أخذ دفق معين

123
00:08:43,440 --> 00:08:46,860
وتعديله وإنشاء تيار آخر يخرج من هناك.

124
00:08:46,860 --> 00:08:51,980
لذلك هذا هو ما يمكن ملاحظته نمط يمكننا من رسم.

125
00:08:51,980 --> 00:08:58,000
بحيث يتم بناء نموذج البرمجة بأكمله حول التدفقات أو تدفقات البيانات.

126
00:08:58,000 --> 00:09:04,540
لذلك هذه طريقة أخرى للنظر في حل مشكلتك.

127
00:09:04,540 --> 00:09:10,180
وهذا هو السبب في أنني أؤكد على حقيقة أنك تحتاج إلى الحصول على رأسك حول

128
00:09:10,180 --> 00:09:17,120
لفهم كيفية نمط رد الفعل أو كيف يتم البرمجة التفاعلية في الممارسة العملية.

129
00:09:17,120 --> 00:09:20,810
الآن، غالبا ما تسمع الناس يتحدثون عن شيء يسمى

130
00:09:20,810 --> 00:09:22,290
البرمجة التفاعلية الوظيفية.

131
00:09:22,290 --> 00:09:25,640
إذا كنت معتادا على نموذج البرمجة الوظيفية.

132
00:09:25,640 --> 00:09:28,430
ولكن بالإضافة إلى البرمجة التفاعلية

133
00:09:28,430 --> 00:09:32,400
هي ما يشير إليه الناس في كثير من الأحيان كبرمجة تفاعلية وظيفية.

134
00:09:32,400 --> 00:09:35,670
وبالتالي فإن الزواج بين هذين النهجين.

135
00:09:35,670 --> 00:09:40,340
الآن، سترى استخدام بعض هذه مع Angular

136
00:09:40,340 --> 00:09:43,720
كما تذهب من خلال هذه الدورة بالذات.

137
00:09:43,720 --> 00:09:46,010
وأخيرا، ماذا عن RxJS؟

138
00:09:46,010 --> 00:09:49,890
ما هو الدور الذي تلعبه في هذا النظام البيئي بأكمله؟

139
00:09:49,890 --> 00:09:55,280
RxJS هو تطبيق جافا سكريبت للنمط الملحوظ

140
00:09:55,280 --> 00:09:58,750
وأيضا دعم للبرمجة التفاعلية.

141
00:09:58,750 --> 00:10:03,820
لذلك إذا كنت ستقوم ببرمجة تفاعلية في JavaScript،

142
00:10:03,820 --> 00:10:07,820
فيمكنك الاستفادة من مكتبة RxJS للقيام بذلك.

143
00:10:07,820 --> 00:10:10,790
RxJS واحد فقط من هذا القبيل التنفيذ.

144
00:10:10,790 --> 00:10:15,990
هناك عدد قليل من الآخرين ولكن السبب في أننا مهتمون بـ RxJs على وجه الخصوص

145
00:10:15,990 --> 00:10:20,860
في هذه الدورة هو أن Angular يرفع RxJs

146
00:10:20,860 --> 00:10:23,880
لدعمها للبرمجة التفاعلية.

147
00:10:23,880 --> 00:10:26,190
لذا فإن RxJS هي مكتبة.

148
00:10:26,190 --> 00:10:28,480
إنها مكتبة منفصلة موجودة هناك.

149
00:10:28,480 --> 00:10:35,010
يمكنك استخدام RxJS لأغراض أخرى أيضًا، ولا تتعلق بالضرورة بـ Angular. كانت

150
00:10:35,010 --> 00:10:39,960
هناك تطبيقات تم تطويرها باستخدام RxJS في حد ذاته

151
00:10:39,960 --> 00:10:42,400
لا تتعلق Angular.

152
00:10:42,400 --> 00:10:46,955
ولكن في هذه الدورة، نحن مهتمون بكيفية دمج RxJS مع

153
00:10:46,955 --> 00:10:52,480
Angular لدعم البرمجة التفاعلية في Angular.

154
00:10:52,480 --> 00:10:57,790
لذلك هناك RxJS هي مكتبة تمكنك من القيام ببرمجة غير متزامنة.

155
00:10:57,790 --> 00:11:01,800
لقد تحدثنا عن البرمجة غير المتزامنة التي تعد في وقت سابق.

156
00:11:01,800 --> 00:11:06,300
سنرى برمجة غير متزامنة مع عمليات رد الاتصال في دورة العقدة.

157
00:11:06,300 --> 00:11:11,380
والملاحظة هي طريقة أخرى للنظر في

158
00:11:11,380 --> 00:11:16,530
البرمجة غير المتزامنة، جنبا إلى جنب مع مبرمج مدفوعة بالحدث.

159
00:11:16,530 --> 00:11:20,320
لذا إذا كنت معتادًا على نموذج البرمجة المدفوع بالحدث، فإن

160
00:11:20,320 --> 00:11:24,230
RxJS يناسب تمامًا داخل تلك البيئة.

161
00:11:25,970 --> 00:11:30,290
تم بناء كل شيء حول تسلسلات يمكن ملاحظتها.

162
00:11:30,290 --> 00:11:37,160
وتوفر لك مكتبة RxJS نوعًا أساسيًا واحدًا يسمى «Observable».

163
00:11:37,160 --> 00:11:39,810
وحول هذا النوع الأساسي، لديك بعض

164
00:11:39,810 --> 00:11:44,390
أنواع الأقمار الصناعية التي يتم إنشاؤها تسمى كمراقبين، جدولة، والمواضيع.

165
00:11:44,390 --> 00:11:47,520
كل هذه تمكنك من القيام البرمجة التفاعلية.

166
00:11:48,620 --> 00:11:54,445
علاوة على ذلك، يدعم RxJS أيضًا مجموعة كاملة من المشغلين.

167
00:11:55,745 --> 00:11:59,345
يدعم المشغلين والفواصل، آسف.

168
00:11:59,345 --> 00:12:02,545
تلك كانت زلة لساني

169
00:12:03,872 --> 00:12:06,642
يدعم RxJS المشغلين

170
00:12:06,642 --> 00:12:11,292
والمشغلين المستوحاة من مشغلي صفيف جافا سكريبت.

171
00:12:11,292 --> 00:12:15,892
إذا كنت معتادًا على مشغلي صفيف JavaScript مثل الخريطة

172
00:12:18,202 --> 00:12:22,232
، فسيبدو مشغلي RxJS مألوفًا جدًا لك.

173
00:12:22,232 --> 00:12:25,372
يمكنك التعامل مع

174
00:12:25,372 --> 00:12:30,340
قيم يمكن ملاحظتها والقيم التي صورة يمكن ملاحظتها تمامًا مثل مصفوفة، لذلك السبب

175
00:12:30,340 --> 00:12:36,170
يجد العديد من مشغلي الصفيف طريقهم إلى RxJS والبرمجة التفاعلية أيضًا.

176
00:12:36,170 --> 00:12:40,250
وبالتالي فإن المستخدمين خريطة، تصفية، والحد

177
00:12:40,250 --> 00:12:46,440
وغيرها من مشغلي الصفيف سوف تجد أيضا مكانا في RxJS والبرمجة التفاعلية.

178
00:12:46,440 --> 00:12:51,890
وهذا ما يسمح لك بالتعامل مع الأحداث غير المتزامنة كمجموعات.

179
00:12:51,890 --> 00:12:55,092
لذلك، عندما كنت ترغب في الانتظار

180
00:12:55,092 --> 00:12:59,770
لحدث غير متزامن، سيكون مشابهًا للاشتراك في حدث يمكن ملاحظته.

181
00:12:59,770 --> 00:13:03,684
لذلك عندما تنبعث القيمة التي يمكن ملاحظتها، فأنت على استعداد للقبض على القيمة ومن

182
00:13:03,684 --> 00:13:05,550
ثم التصرف وفقًا لذلك.

183
00:13:05,550 --> 00:13:07,960
أنت تعرف متى سيحدث هذا الإنبعاث

184
00:13:07,960 --> 00:13:13,220
لذلك هذا هو الجزء غير المتزامن الذي يدخل في اللعب مع استخدام RxJS.

185
00:13:14,550 --> 00:13:19,480
وكما ذكرت بالفعل، فإن السبب في اهتمامنا بـ RxJS هو أن

186
00:13:19,480 --> 00:13:22,750
Angular يستفيد من مكتبة RxJS

187
00:13:23,900 --> 00:13:27,840
للقيام بدعمها للبرمجة التفاعلية.

188
00:13:27,840 --> 00:13:31,080
الزاوي نفسه لديه عدد من بنيت في الملاحظات،

189
00:13:31,080 --> 00:13:32,369
كما سنرى في فترة قصيرة.

190
00:13:33,430 --> 00:13:38,430
عندما تصل إلى عالم البرمجة التفاعلية، سوف تسمع في كثير من الأحيان الناس يتحدثون

191
00:13:38,430 --> 00:13:42,230
عن الملاحظ ثم سوف تسمع الناس يتحدثون عن المشغلين

192
00:13:42,230 --> 00:13:45,830
وبعد ذلك سوف تسمع أيضا الناس يتحدثون عن الرسوم البيانية الرخام.

193
00:13:45,830 --> 00:13:49,290
الآن، الرسوم البيانية الرخامية هي وسيلة

194
00:13:50,390 --> 00:13:53,730
لتمثيل البرمجة التفاعلية باستخدام المرصد.

195
00:13:53,730 --> 00:13:55,710
لذلك إذا كان لديك ملاحظة،

196
00:13:56,830 --> 00:14:02,070
ثم إذا قمت بعرض هذا يمكن ملاحظته كدالة من الوقت،

197
00:14:02,070 --> 00:14:06,710
لذلك إذا كان هذا المحور يمثل وظيفة من الزمن، فإن الملاحظة

198
00:14:06,710 --> 00:14:12,090
سوف تنبعث منها بشكل دوري قيم مثل هذا، واحدا تلو الآخر.

199
00:14:12,090 --> 00:14:16,896
لذلك إذا قمت بتنظيم هذه القيم على طول تسلسل،

200
00:14:16,896 --> 00:14:21,540
كدالة من الزمن، لذلك سترى القيم التي تنبعث مثل هذا.

201
00:14:22,680 --> 00:14:26,350
هناك أيضا احتمال أنك يمكن أن تواجه خطأ.

202
00:14:27,750 --> 00:14:30,990
في هذه الحالة، تحتاج إلى التعامل مع الخطأ بشكل مناسب.

203
00:14:30,990 --> 00:14:32,510
إذا قمت بمعالجة الخطأ بشكل مناسب،

204
00:14:32,510 --> 00:14:37,830
يمكنك المتابعة أو قد تتوقف عند هذه النقطة.

205
00:14:37,830 --> 00:14:41,520
وبالمثل، عندما يكمل جهاز يمكن ملاحظته جميع تكراراته،

206
00:14:41,520 --> 00:14:44,730
فسيتم وضع علامة عليه كإكمال للملاحظة.

207
00:14:44,730 --> 00:14:49,570
لذلك تحتاج إلى أن تكون قادرًا على التعامل مع حدث الإكمال في ملاحظة.

208
00:14:49,570 --> 00:14:54,500
بالنظر إلى هذا الوقت السلوك المشروح للملاحظة، يمكنك بعد ذلك أخذ

209
00:14:54,500 --> 00:15:00,240
القيم التي يمكن ملاحظتها وتطبيق المشغلين على تلك الملاحظة.

210
00:15:00,240 --> 00:15:04,680
الآن يمكن عرض هذه القيم كمصفوفة.

211
00:15:04,680 --> 00:15:10,120
إذا كان ذلك يساعدك على فهم أفضل، فيمكنك مشاهدته كمجموعة من القيم.

212
00:15:10,120 --> 00:15:15,140
الآن، يمكن تشغيل هذه القيم باستخدام عوامل تشغيل مختلفة.

213
00:15:15,140 --> 00:15:21,630
لذلك هذا هو المكان الذي الخريطة الخاصة بك، والتصفية، والحد الخاص بك والعديد من المشغلين التي

214
00:15:21,630 --> 00:15:26,560
تدعمها أي مكتبات البرامج التفاعلية النموذجية مثل RxJS.

215
00:15:26,560 --> 00:15:29,010
تمكنك من تحويل

216
00:15:29,010 --> 00:15:33,590
مجموعة واحدة من القيم التي تحصل عليها من يمكن ملاحظتها إلى مجموعة أخرى من القيم.

217
00:15:33,590 --> 00:15:36,640
وبالتالي، ينتهي بك الأمر إلى إنشاء جديد يمكن ملاحظته.

218
00:15:36,640 --> 00:15:39,170
وسيتألف هذا الجديد الذي يمكن ملاحظته من

219
00:15:39,170 --> 00:15:42,830
القيم المحولة من الأصل الذي يمكن ملاحظته.

220
00:15:42,830 --> 00:15:48,294
لذلك هذا هو السبب في أنني تظهر هذه القيم المحولة كمستطيلات هنا.

221
00:15:48,294 --> 00:15:52,861
فقط لإعطائك انطباعا بصريا عن ما نحاول القيام به

222
00:15:52,861 --> 00:15:54,170
مع المشغل.

223
00:15:54,170 --> 00:15:58,620
لذا فأنت تأخذ قيمة ثم تحولها إلى قيمة مختلفة.

224
00:15:58,620 --> 00:16:01,640
وهذا التسلسل من تلك القيم المختلفة التي

225
00:16:01,640 --> 00:16:06,400
تحصل عليها عن طريق تحويل القيم المنبعثة من قبل يمكن ملاحظتها.

226
00:16:06,400 --> 00:16:11,390
سوف تصبح نفسها سلسلة أخرى من القيم، وبالتالي،

227
00:16:11,390 --> 00:16:12,880
سوف تصبح أخرى يمكن ملاحظتها.

228
00:16:12,880 --> 00:16:16,820
حتى تتمكن من اشتقاق واحد يمكن ملاحظته من آخر يمكن ملاحظته.

229
00:16:16,820 --> 00:16:19,335
ولكن هذا الثاني يمكن ملاحظته يعتمد على أول واحد لذلك يعتمد.

230
00:16:19,335 --> 00:16:26,600
يتم كتابة سلوكها، أول واحد من خلال استخدام هذا المشغل.

231
00:16:26,600 --> 00:16:31,730
سنرى أمثلة على ذلك ونحن نذهب من خلال بعض التدريبات

232
00:16:31,730 --> 00:16:37,210
في هذا الدرس والدروس اللاحقة.

233
00:16:37,210 --> 00:16:41,450
ماذا عن Angular و RxJS، كيف يجتمعون معًا؟

234
00:16:41,450 --> 00:16:48,540
الزاوي، كما ذكرنا سابقا، يدعم عددا من الملاحظات من تلقاء نفسها.

235
00:16:48,540 --> 00:16:53,375
ويتيح لك هذا الدعم للملاحظة في Angular القيام ببعض

236
00:16:53,375 --> 00:16:59,070
البرمجة التفاعلية داخل تطبيق Angular الخاص بك.

237
00:16:59,070 --> 00:17:02,210
لذلك، على سبيل المثال، أشكال في Angular،

238
00:17:02,210 --> 00:17:06,340
رأينا أشكال تفاعلية بالفعل في أحد الدروس السابقة.

239
00:17:06,340 --> 00:17:11,040
عند هذه النقطة، لم أذكر الكلمة التي يمكن ملاحظتها بشكل صريح هناك.

240
00:17:11,040 --> 00:17:15,725
ولكن الآن بعد أن عرفنا أنه يمكن ملاحظته، سنعود إلى النموذج التفاعلي،

241
00:17:15,725 --> 00:17:18,440
ثم نقوم ببعض التحويل إلى النموذج التفاعلي.

242
00:17:18,440 --> 00:17:21,460
النماذج نفسها تصبح ملاحظتها في Angular.

243
00:17:21,460 --> 00:17:26,337
وأي تغييرات في قيم أي من عناصر النموذج،

244
00:17:26,337 --> 00:17:30,605
يمكن إخراجها، وملاحظاتها من خلال الاشتراك

245
00:17:30,605 --> 00:17:36,280
في الملاحظة التي يوفرها إطار Angular لنا.

246
00:17:36,280 --> 00:17:41,934
وبالمثل، فإن HTTP، الذي سنواجهه في الوحدة التالية من هذه الدورة،

247
00:17:41,934 --> 00:17:46,500
سوف يستند أيضا حول المرصد.

248
00:17:46,500 --> 00:17:52,720
لذلك عندما تذهب خدمتك وتجلب البيانات من خادم، فإن مكتبة HTTP،

249
00:17:52,720 --> 00:17:56,750
أو وحدة HTTP في Angular، تدعم الملاحظات.

250
00:17:56,750 --> 00:17:59,780
لذلك كلما قمت بتنفيذ أي من الطرق، أو الحصول على، أو وضع، أو نشر

251
00:17:59,780 --> 00:18:04,160
، أو حذف، باستخدام HTTP، فإنها سوف تعطي لك ملاحظتها

252
00:18:04,160 --> 00:18:07,730
والتي يمكنك بعد ذلك الاشتراك داخل خدمتك.

253
00:18:07,730 --> 00:18:11,495
ومن ثم تحويله في وقت لاحق، ومن ثم إعطائه إلى المكونات الخاصة بك،

254
00:18:11,495 --> 00:18:13,958
ويمكن للمكونات الاشتراك في الملاحظات.

255
00:18:13,958 --> 00:18:18,410
يتم توفير الخدمة عن طريق تحويل تدفقات HTTP.

256
00:18:18,410 --> 00:18:21,780
وهذا هو المكان الذي

257
00:18:21,780 --> 00:18:27,800
تصبح فيه البرمجة التفاعلية وتدفق البيانات من خلال تطبيق Angular الخاص بك واضحة للغاية.

258
00:18:27,800 --> 00:18:32,840
وبالمثل، هناك AsyncPipe، والتي سوف تواجهها في وقت لاحق في هذه الدورة.

259
00:18:32,840 --> 00:18:38,631
وأيضا تغيير الكشف بنيت حول المرصد في Angular.

260
00:18:38,631 --> 00:18:44,310
سترى بعض الأمثلة على ذلك في بقية هذه الدورة.

261
00:18:44,310 --> 00:18:49,110
الآن، نعود إلى السؤال الذي رأيناه في الشريحة السابقة.

262
00:18:49,110 --> 00:18:53,615
كيف تأخذ ملاحظته وتحويله إلى آخر يمكن ملاحظته؟

263
00:18:53,615 --> 00:19:01,465
في ما يلي مثال ستواجهه في التمرين الذي يتبع هذه المحاضرة.

264
00:19:01,465 --> 00:19:07,415
حتى هنا، لدينا معلمة الطريق

265
00:19:07,415 --> 00:19:12,410
داخل مكون القائمة لدينا، والذي يستخدم معلمة

266
00:19:12,410 --> 00:19:17,710
الطريق لتوفير قيمة الطبق المحدد إلى مكون تفاصيل الطبق.

267
00:19:17,710 --> 00:19:20,250
لذا تصبح معلمة المسار قابلة للملاحظة.

268
00:19:20,250 --> 00:19:24,905
تحتوي وحدة جهاز التوجيه Angular على خدمة ActivatedRoute للنشاط التي

269
00:19:24,905 --> 00:19:30,435
تدعم مجموعة من المرصد وواحدة من بينها هي المعلمات التي يمكن ملاحظتها.

270
00:19:30,435 --> 00:19:33,996
ترتبط المعلمات التي يمكن ملاحظتها بمعلمات المسار.

271
00:19:33,996 --> 00:19:37,615
وبالتالي فإن أي تغييرات على المعلمات،

272
00:19:37,615 --> 00:19:43,620
في عنوان URL الذي تواجهه سوف تنبعث كما يمكن ملاحظتها.

273
00:19:43,620 --> 00:19:47,521
الآن، لذلك عندما تحصل على الملاحظة، بحيث يمكنك أن ترى،

274
00:19:47,521 --> 00:19:53,010
يمكنك الوصول إلى هذا يمكن ملاحظته من خلال قول معلمات الطريق هذه في شفرتك.

275
00:19:53,010 --> 00:19:55,415
لذا فإن المعلمات نفسها يمكن ملاحظتها هنا.

276
00:19:55,415 --> 00:19:57,666
الآن، إلى هذه المعلمات يمكن ملاحظتها،

277
00:19:57,666 --> 00:20:02,970
يمكنك تطبيق مشغل مثل مشغل هنا يسمى switchmap.

278
00:20:02,970 --> 00:20:05,830
سنرى إستخدام هذا في المقتطفات

279
00:20:05,830 --> 00:20:09,840
يأخذ مشغل switchmap المعلمات التي يمكن ملاحظتها.

280
00:20:09,840 --> 00:20:17,190
ثم يحول المعلمات التي يمكن ملاحظتها إلى آخر يمكن ملاحظتها وهو طبق.

281
00:20:17,190 --> 00:20:21,861
يأخذ قيمة المعلمات، ثم يستخرج قيمة المعرف من المعلمات،

282
00:20:21,861 --> 00:20:25,493
والتي تمنحك الوصول إلى معلمة المسار أو المعرف أو

283
00:20:25,493 --> 00:20:30,708
المعلمة التي قمت بتحديدها، ثم يستخدم ذلك للذهاب وجلب الطبق.

284
00:20:30,708 --> 00:20:38,265
لذلك في كل مرة تتغير المعلمة، وسوف يؤدي إلى جلب طبق جديد.

285
00:20:38,265 --> 00:20:42,045
وهكذا في كل مرة تتغير المعلمة،

286
00:20:42,045 --> 00:20:47,290
وهو ما يعادل انبعاث قيمة جديدة من خلال المعلمات التي يمكن ملاحظتها.

287
00:20:47,290 --> 00:20:50,850
يتم تحويل ذلك إلى جلب الطبق الجديد

288
00:20:50,850 --> 00:20:53,190
الذي هو معرف المقابلة.

289
00:20:53,190 --> 00:20:56,240
وبالتالي فإن الطبق سوف تصبح بعد ذلك أخرى يمكن ملاحظتها.

290
00:20:56,240 --> 00:21:01,100
الآن، عندما يصبح هذا الطبق يمكن ملاحظته متاحًا، يمكنك الاشتراك في هذا

291
00:21:01,100 --> 00:21:05,850
الطبق ملاحظته هنا، والحصول على قيمة الطبق.

292
00:21:05,850 --> 00:21:10,490
وعندما تحصل على قيمة الطبق، يمكنك أخذ قيمة الطبق، ومن ثم

293
00:21:10,490 --> 00:21:17,742
إنشاء متغير الطبق الخاص بك ضمن مكون تفاصيل الطبق الخاص بك إلى قيمة الطبق.

294
00:21:17,742 --> 00:21:22,468
وبالتالي، فإن أي تغيير في معلمة المسار ينتشر من خلال هذا

295
00:21:22,468 --> 00:21:25,224
المشغل switchmap إلى ملاحظة،

296
00:21:25,224 --> 00:21:28,296
والتي عند ملاحظتها من خلال المشتركين،

297
00:21:28,296 --> 00:21:32,569
ستمكنك من تحويل ذلك وتعيين ذلك إلى طبق آخر.

298
00:21:32,569 --> 00:21:37,236
وعندما يحدث ذلك، يمكن تحديث وجهة نظرك مع

299
00:21:37,236 --> 00:21:41,915
الطبق الجديد الذي تم الحصول عليه من الخدمة.

300
00:21:41,915 --> 00:21:47,106
حتى الآن، ترى كيف تتدفق البيانات من خلال معلمة المسار،

301
00:21:47,106 --> 00:21:50,184
من خلال مشغل switchmap، وإلى ما

302
00:21:50,184 --> 00:21:55,985
يؤدي إلى تغيير وجهة نظر مكون تفاصيل الطبق الخاص بك.

303
00:21:55,985 --> 00:22:01,000
هذا هو السبب في أن البرمجة المستندة إلى

304
00:22:01,000 --> 00:22:05,060
الملاحظة أو البرمجة التفاعلية في Angular تصبح مفيدة جدًا

305
00:22:05,060 --> 00:22:09,070
لتنفيذ ميزات معينة داخل تطبيق Angular الخاص بك.

306
00:22:09,070 --> 00:22:11,034
و هذا مثال على ذلك.

307
00:22:11,034 --> 00:22:15,984
سنرى استخدام هذا المثال بالذات في

308
00:22:15,984 --> 00:22:20,332
التمرين الذي يتبع هذه المحاضرة.

309
00:22:20,332 --> 00:22:22,658
ظننت أنني سأجعل من

310
00:22:22,658 --> 00:22:27,970
السهل عليك تذكر كل هذا فقط عن طريق غناء هذه القصيدة للملاحظين

311
00:22:27,970 --> 00:22:34,948
[ موسيقى]

312
00:22:34,948 --> 00:22:37,469
يجب أن تغني هذا لحن,

313
00:22:37,469 --> 00:22:42,310
يمكنك أن تدعوني آل من قبل بول سايمون من الشهرة سايمون وغارفنكل.

314
00:22:42,310 --> 00:22:46,000
إذا كنت تستدير وتقول، من هو (بول سايمون)؟

315
00:22:46,000 --> 00:22:47,385
آسف، جيل مختلف

316
00:22:47,385 --> 00:22:53,670
[ موسيقى]