[MUSIC]
اسمحوا لي الآن أن أقدم لكم لمحة سريعة عن Angular
وعلاقتها مع البرنامج التفاعلي،
كيف تستفيد Angular من البرمجة التفاعلية.
على وجه الخصوص، مكتبة RxJS وكيف يتم الاستفادة منها بواسطة
Angular لتوفير طريقة تفاعلية لكتابة التطبيقات Angular.
الآن ما نقدمه في هذه المحاضرة هو نظرة عامة سريعة جدًا
على المفهوم العام للبرمجة التفاعلية والملاحظة
والنمط الملحوظ وكيفية تطبيقه في Angular.
البرمجة التفاعلية في حد ذاتها هي
موضوع واسع جدا لا يمكن تغطيته في عشر دقائق.
البرمجة التفاعلية،
إذا كنت بحاجة إلى تغطيتها بالتفصيل الكامل سوف تصبح دورة كاملة في حد ذاتها.
ولسوء الحظ،
ليس لدينا الوقت لتضمين دورة كاملة في هذا المسار بالذات.
لذا بالنظر إلى حقيقة أننا مهتمون بشكل أساسي بكيفية استخدام Angular
للبرمجة التفاعلية لتمكيننا من مضاعفة التطبيقات Angular،
لذلك سنركز على هذا الجانب.
ولكن على طول الطريق،
سأعطيك مقدمة سريعة لمختلف المفاهيم في هذا المجال العام.
إذا كنت مهتمًا بالبرمجة التفاعلية،
فإنني أنصحك بشدة بمتابعة بعض الروابط التي قدمتها
والموارد الإضافية لهذا الدرس بالذات.
لديك إمكانية الوصول إلى الكثير من المواد هناك،
لكننا سنعطيك أسس قوية في البرمجة التفاعلية.
ولكن في هذه الدورة، من هذه النقطة فصاعدًا،
سننظر في كيفية استفادة Angular من نموذج البرمجة التفاعلي
لتصميم تطبيقات Angular.
نحن لن يقتصر فقط على هذا الدرس، ولكن
جميع الدروس اللاحقة سوف نرى أيضا المستخدمة من ملحوظ
ونمط الملاحظة وكيف نكتب التطبيقات التفاعلية في الزاوي.
تدور المناقشة الكاملة حول البرمجة التفاعلية حول
هذا النمط الخاص لهندسة البرمجيات يسمى نمط يمكن ملاحظته.
تتذكر عصابة الأربعة التي ذكرتها لك في واحدة من
المحاضرات السابقة حيث ناقشنا حول إطار وحدة تحكم عرض النموذج
وإطار نموذج عرض النموذج.
نفس عصابة من أربعة كتاب يحتوي على بعض من النمط الذي
تم استخدامه بنجاح كبير في نمط البرمجة التفاعلية.
ويدور نمط المراقب حول المرصد.
لذلك لديك ملاحظات، يمكن ملاحظة سلوكها من قبل المراقبين.
لذلك هذا هو السبب في أن هذا يسمى نمط المراقب.
أنت تعلن بعض الأشياء كما يمكن ملاحظتها أو الموضوعات
وسيتم مراقبة هذه المرصد من قبل المراقبين. و
الآن, سيقوم المراقبون أنفسهم بالتسجيل
لمشاهدة التغييرات في التغييرات التي يمكن ملاحظتها, و
سيقوم المرصد بإخطار المراقبين كلما حدثت تغييرات.
حتى في هذا النمط المراقب، والطريقة التي سيشارك
بها هؤلاء المراقبون في الملاحظة أو تسجيل أنفسهم مع الملاحظة.
لذلك، هذه هي الطريقة التي يمكن ملاحظتها يعرف أي المراقبين المهتمين في
أي تغييرات في حالتها.
وبالتالي، كلما لاحظ ملاحظة يقول،
تغيير في حالتها، فإنه سيتم على الفور إخطار جميع المراقبين
عن تغيير الدولة والمراقبين في وقت لاحق يمكن
اتخاذ إجراء بناء على هذا الإخطار من التغيير في ملحوظ.
وقد استخدم نمط المراقبين بفعالية كبيرة في العديد من
الظروف المختلفة.
وبالفعل، فإن نموذج البرمجة التفاعلي يستند حوله.
لذا، السؤال الذي يتبادر إلى ذهنك على الفور هو
لماذا نتحدث عن الملاحظات؟
ما هو الاهتمام الخاص بالملاحظة؟
نمط المراقب هو طريقة واحدة لكتابة تطبيقات البرمجيات.
لذلك، ويستند هذا حول تيارات.
لذلك، لديك البيانات التي تتدفق التطبيق الخاص بك.
يمكن عرض هذه البيانات على أنها تيار من القيم التي تتدفق من خلال
التطبيق الخاص بك.
لذا، فإن الدفق هو القناة الأساسية التي
تم تصميم الملاحظات والنمط الملحوظ.
لذلك، أي تيارات يمكنك الاشتراك في هذه التدفقات.
وكلما ظهرت قيمة على الدفق، يمكنك التقاط هذه القيمة ومن
ثم يمكنك الرد على تلك القيمة.
حتى تتمكن من الرد على هذه القيمة، تحتاج إلى الاشتراك في هذا الدفق أو
تحتاج إلى الاشتراك في الملاحظة.
وسيحافظ الملاحظ في كثير من الأحيان على القيم التي تنبعث منها.
وعندما ترى تلك القيم، يمكن للمراقب أن يتفاعل معها.
الآن هذا يعني أيضًا أنه عندما لم تعد مهتمًا،
يمكنك إلغاء الاشتراك بنفسك من جهاز يمكن ملاحظته.
يمكنك القول أنني لست مهتماً بمشاهدتك بعد الآن ثم أختفي
لذا فإن النمط الملحوظ يسمح لك بمراقبة التغييرات بشكل دوري،
إذا كنت تريد ثم التوقف عن المراقبة عندما لم تعد مهتمًا.
لذلك هذا النوع من النموذج تمكنك من تصميم
تطبيقات البرمجيات الخاصة بك بطريقة مثيرة جدا للاهتمام، بطريقة بديهية جدا.
ولكن لتكون قادرة على استخدام هذا النهج،
تحتاج إلى الحصول على رأسك حول هذا النهج.
تماما كما رأينا مع نمط رد الاتصال أو رأينا مع استخدام الوعود.
المرصد هو طريقة أخرى لتصميم التطبيقات.
لذلك، يمكن ملاحظته في حد ذاته سيكون كسول جدا وسوف يتسكع فقط هناك.
لذلك، يمكنك إنشاء ملاحظة ومن ثم مجرد تركها هناك.
يصبح الملاحظ نشطًا أو
يصبح ساخنًا عندما يبدأ شخص ما في الاشتراك في المراقب.
حتى في هذه المرحلة، المراقب ركلات إلى العمل ويبدأ تحرير القيم.
لذلك إذا تم تكليف مراقب واحد على الأقل في الملاحظة،
فسيبدأ الملاحظ في بث القيم.
إذا لم يعهد أحد، يمكن ملاحظته سيعود إلى قشرته ويبقى هناك.
لذلك، يمكنك التفكير في الأمر بهذه الطريقة.
حتى إذا كانت تلك الصورة العقلية تساعدك على فهم
كيفية عمل براءة اختراع المراقب، فليكن ذلك.
لذا، سيساعدك ذلك على النظر إلى الطريقة التي نصمم بها تطبيقاتنا
في التمارين التي تتبع ثم الدروس اللاحقة
حيث ندرس HTTP المدعومة Angular بمزيد من التفصيل.
أحد الجوانب الأخرى للملاحظة هو حقيقة أن إلغاء طلب سابق
ثم إعادة المحاولة أمر واضح للغاية مع المرصد.
الوعد الذي رأيته في وقت سابق، بمجرد أن تبدأ في انتظار وعد،
لا يمكنك إلغاء، أنت تنتظر.
الوعد سيحل أو يفشل في نهاية المطاف
، ومن ثم عليك أن تتفاعل بغض النظر عما إذا كنت لم تعد مهتمًا به.
ولكن مع ملاحظة، إذا كنت تستطيع بيع اشتراكك،
ثم أن ما يحدث مع يمكن ملاحظته ليس أي قلق بالنسبة لك على الإطلاق.
وبالتالي لا تحتاج إلى القيام بأي شيء، إذا قمت بإلغاء اشتراكك.
لذا، فإن الإلغاء وإعادة المحاولة في حالة عدم
نجاح المحاكمة السابقة أمر واضح للغاية مع الملاحظة.
سنرى بعض هذه السلوكيات بمزيد من التفصيل في التدريبات التالية. و
هذا يقودنا إلى مفهوم البرمجة التفاعلية.
تستند البرمجة التفاعلية حول نمط المراقب
وأيضا نمط متكرر.
ولكن على أي حال،
فإن نمط المراقب هو السمة المهيمنة للبرمجة التفاعلية.
لذلك في البرمجة التفاعلية، نحن مهتمون بتدفق البيانات.
كيفية تدفق البيانات من خلال التطبيق الخاص بك.
يمكن التعامل مع أي تدفق بيانات على أنه تيار.
لذلك يمكن لتدفق البيانات هذا نشر التغييرات في جميع أنحاء التطبيق الخاص بك.
وبينما يتم نشر التغييرات من خلال التطبيق،
في المراحل الوسيطة يمكنك حتى أخذ دفق معين
وتعديله وإنشاء تيار آخر يخرج من هناك.
لذلك هذا هو ما يمكن ملاحظته نمط يمكننا من رسم.
بحيث يتم بناء نموذج البرمجة بأكمله حول التدفقات أو تدفقات البيانات.
لذلك هذه طريقة أخرى للنظر في حل مشكلتك.
وهذا هو السبب في أنني أؤكد على حقيقة أنك تحتاج إلى الحصول على رأسك حول
لفهم كيفية نمط رد الفعل أو كيف يتم البرمجة التفاعلية في الممارسة العملية.
الآن، غالبا ما تسمع الناس يتحدثون عن شيء يسمى
البرمجة التفاعلية الوظيفية.
إذا كنت معتادا على نموذج البرمجة الوظيفية.
ولكن بالإضافة إلى البرمجة التفاعلية
هي ما يشير إليه الناس في كثير من الأحيان كبرمجة تفاعلية وظيفية.
وبالتالي فإن الزواج بين هذين النهجين.
الآن، سترى استخدام بعض هذه مع Angular
كما تذهب من خلال هذه الدورة بالذات.
وأخيرا، ماذا عن RxJS؟
ما هو الدور الذي تلعبه في هذا النظام البيئي بأكمله؟
RxJS هو تطبيق جافا سكريبت للنمط الملحوظ
وأيضا دعم للبرمجة التفاعلية.
لذلك إذا كنت ستقوم ببرمجة تفاعلية في JavaScript،
فيمكنك الاستفادة من مكتبة RxJS للقيام بذلك.
RxJS واحد فقط من هذا القبيل التنفيذ.
هناك عدد قليل من الآخرين ولكن السبب في أننا مهتمون بـ RxJs على وجه الخصوص
في هذه الدورة هو أن Angular يرفع RxJs
لدعمها للبرمجة التفاعلية.
لذا فإن RxJS هي مكتبة.
إنها مكتبة منفصلة موجودة هناك.
يمكنك استخدام RxJS لأغراض أخرى أيضًا، ولا تتعلق بالضرورة بـ Angular. كانت
هناك تطبيقات تم تطويرها باستخدام RxJS في حد ذاته
لا تتعلق Angular.
ولكن في هذه الدورة، نحن مهتمون بكيفية دمج RxJS مع
Angular لدعم البرمجة التفاعلية في Angular.
لذلك هناك RxJS هي مكتبة تمكنك من القيام ببرمجة غير متزامنة.
لقد تحدثنا عن البرمجة غير المتزامنة التي تعد في وقت سابق.
سنرى برمجة غير متزامنة مع عمليات رد الاتصال في دورة العقدة.
والملاحظة هي طريقة أخرى للنظر في
البرمجة غير المتزامنة، جنبا إلى جنب مع مبرمج مدفوعة بالحدث.
لذا إذا كنت معتادًا على نموذج البرمجة المدفوع بالحدث، فإن
RxJS يناسب تمامًا داخل تلك البيئة.
تم بناء كل شيء حول تسلسلات يمكن ملاحظتها.
وتوفر لك مكتبة RxJS نوعًا أساسيًا واحدًا يسمى «Observable».
وحول هذا النوع الأساسي، لديك بعض
أنواع الأقمار الصناعية التي يتم إنشاؤها تسمى كمراقبين، جدولة، والمواضيع.
كل هذه تمكنك من القيام البرمجة التفاعلية.
علاوة على ذلك، يدعم RxJS أيضًا مجموعة كاملة من المشغلين.
يدعم المشغلين والفواصل، آسف.
تلك كانت زلة لساني
يدعم RxJS المشغلين
والمشغلين المستوحاة من مشغلي صفيف جافا سكريبت.
إذا كنت معتادًا على مشغلي صفيف JavaScript مثل الخريطة
، فسيبدو مشغلي RxJS مألوفًا جدًا لك.
يمكنك التعامل مع
قيم يمكن ملاحظتها والقيم التي صورة يمكن ملاحظتها تمامًا مثل مصفوفة، لذلك السبب
يجد العديد من مشغلي الصفيف طريقهم إلى RxJS والبرمجة التفاعلية أيضًا.
وبالتالي فإن المستخدمين خريطة، تصفية، والحد
وغيرها من مشغلي الصفيف سوف تجد أيضا مكانا في RxJS والبرمجة التفاعلية.
وهذا ما يسمح لك بالتعامل مع الأحداث غير المتزامنة كمجموعات.
لذلك، عندما كنت ترغب في الانتظار
لحدث غير متزامن، سيكون مشابهًا للاشتراك في حدث يمكن ملاحظته.
لذلك عندما تنبعث القيمة التي يمكن ملاحظتها، فأنت على استعداد للقبض على القيمة ومن
ثم التصرف وفقًا لذلك.
أنت تعرف متى سيحدث هذا الإنبعاث
لذلك هذا هو الجزء غير المتزامن الذي يدخل في اللعب مع استخدام RxJS.
وكما ذكرت بالفعل، فإن السبب في اهتمامنا بـ RxJS هو أن
Angular يستفيد من مكتبة RxJS
للقيام بدعمها للبرمجة التفاعلية.
الزاوي نفسه لديه عدد من بنيت في الملاحظات،
كما سنرى في فترة قصيرة.
عندما تصل إلى عالم البرمجة التفاعلية، سوف تسمع في كثير من الأحيان الناس يتحدثون
عن الملاحظ ثم سوف تسمع الناس يتحدثون عن المشغلين
وبعد ذلك سوف تسمع أيضا الناس يتحدثون عن الرسوم البيانية الرخام.
الآن، الرسوم البيانية الرخامية هي وسيلة
لتمثيل البرمجة التفاعلية باستخدام المرصد.
لذلك إذا كان لديك ملاحظة،
ثم إذا قمت بعرض هذا يمكن ملاحظته كدالة من الوقت،
لذلك إذا كان هذا المحور يمثل وظيفة من الزمن، فإن الملاحظة
سوف تنبعث منها بشكل دوري قيم مثل هذا، واحدا تلو الآخر.
لذلك إذا قمت بتنظيم هذه القيم على طول تسلسل،
كدالة من الزمن، لذلك سترى القيم التي تنبعث مثل هذا.
هناك أيضا احتمال أنك يمكن أن تواجه خطأ.
في هذه الحالة، تحتاج إلى التعامل مع الخطأ بشكل مناسب.
إذا قمت بمعالجة الخطأ بشكل مناسب،
يمكنك المتابعة أو قد تتوقف عند هذه النقطة.
وبالمثل، عندما يكمل جهاز يمكن ملاحظته جميع تكراراته،
فسيتم وضع علامة عليه كإكمال للملاحظة.
لذلك تحتاج إلى أن تكون قادرًا على التعامل مع حدث الإكمال في ملاحظة.
بالنظر إلى هذا الوقت السلوك المشروح للملاحظة، يمكنك بعد ذلك أخذ
القيم التي يمكن ملاحظتها وتطبيق المشغلين على تلك الملاحظة.
الآن يمكن عرض هذه القيم كمصفوفة.
إذا كان ذلك يساعدك على فهم أفضل، فيمكنك مشاهدته كمجموعة من القيم.
الآن، يمكن تشغيل هذه القيم باستخدام عوامل تشغيل مختلفة.
لذلك هذا هو المكان الذي الخريطة الخاصة بك، والتصفية، والحد الخاص بك والعديد من المشغلين التي
تدعمها أي مكتبات البرامج التفاعلية النموذجية مثل RxJS.
تمكنك من تحويل
مجموعة واحدة من القيم التي تحصل عليها من يمكن ملاحظتها إلى مجموعة أخرى من القيم.
وبالتالي، ينتهي بك الأمر إلى إنشاء جديد يمكن ملاحظته.
وسيتألف هذا الجديد الذي يمكن ملاحظته من
القيم المحولة من الأصل الذي يمكن ملاحظته.
لذلك هذا هو السبب في أنني تظهر هذه القيم المحولة كمستطيلات هنا.
فقط لإعطائك انطباعا بصريا عن ما نحاول القيام به
مع المشغل.
لذا فأنت تأخذ قيمة ثم تحولها إلى قيمة مختلفة.
وهذا التسلسل من تلك القيم المختلفة التي
تحصل عليها عن طريق تحويل القيم المنبعثة من قبل يمكن ملاحظتها.
سوف تصبح نفسها سلسلة أخرى من القيم، وبالتالي،
سوف تصبح أخرى يمكن ملاحظتها.
حتى تتمكن من اشتقاق واحد يمكن ملاحظته من آخر يمكن ملاحظته.
ولكن هذا الثاني يمكن ملاحظته يعتمد على أول واحد لذلك يعتمد.
يتم كتابة سلوكها، أول واحد من خلال استخدام هذا المشغل.
سنرى أمثلة على ذلك ونحن نذهب من خلال بعض التدريبات
في هذا الدرس والدروس اللاحقة.
ماذا عن Angular و RxJS، كيف يجتمعون معًا؟
الزاوي، كما ذكرنا سابقا، يدعم عددا من الملاحظات من تلقاء نفسها.
ويتيح لك هذا الدعم للملاحظة في Angular القيام ببعض
البرمجة التفاعلية داخل تطبيق Angular الخاص بك.
لذلك، على سبيل المثال، أشكال في Angular،
رأينا أشكال تفاعلية بالفعل في أحد الدروس السابقة.
عند هذه النقطة، لم أذكر الكلمة التي يمكن ملاحظتها بشكل صريح هناك.
ولكن الآن بعد أن عرفنا أنه يمكن ملاحظته، سنعود إلى النموذج التفاعلي،
ثم نقوم ببعض التحويل إلى النموذج التفاعلي.
النماذج نفسها تصبح ملاحظتها في Angular.
وأي تغييرات في قيم أي من عناصر النموذج،
يمكن إخراجها، وملاحظاتها من خلال الاشتراك
في الملاحظة التي يوفرها إطار Angular لنا.
وبالمثل، فإن HTTP، الذي سنواجهه في الوحدة التالية من هذه الدورة،
سوف يستند أيضا حول المرصد.
لذلك عندما تذهب خدمتك وتجلب البيانات من خادم، فإن مكتبة HTTP،
أو وحدة HTTP في Angular، تدعم الملاحظات.
لذلك كلما قمت بتنفيذ أي من الطرق، أو الحصول على، أو وضع، أو نشر
، أو حذف، باستخدام HTTP، فإنها سوف تعطي لك ملاحظتها
والتي يمكنك بعد ذلك الاشتراك داخل خدمتك.
ومن ثم تحويله في وقت لاحق، ومن ثم إعطائه إلى المكونات الخاصة بك،
ويمكن للمكونات الاشتراك في الملاحظات.
يتم توفير الخدمة عن طريق تحويل تدفقات HTTP.
وهذا هو المكان الذي
تصبح فيه البرمجة التفاعلية وتدفق البيانات من خلال تطبيق Angular الخاص بك واضحة للغاية.
وبالمثل، هناك AsyncPipe، والتي سوف تواجهها في وقت لاحق في هذه الدورة.
وأيضا تغيير الكشف بنيت حول المرصد في Angular.
سترى بعض الأمثلة على ذلك في بقية هذه الدورة.
الآن، نعود إلى السؤال الذي رأيناه في الشريحة السابقة.
كيف تأخذ ملاحظته وتحويله إلى آخر يمكن ملاحظته؟
في ما يلي مثال ستواجهه في التمرين الذي يتبع هذه المحاضرة.
حتى هنا، لدينا معلمة الطريق
داخل مكون القائمة لدينا، والذي يستخدم معلمة
الطريق لتوفير قيمة الطبق المحدد إلى مكون تفاصيل الطبق.
لذا تصبح معلمة المسار قابلة للملاحظة.
تحتوي وحدة جهاز التوجيه Angular على خدمة ActivatedRoute للنشاط التي
تدعم مجموعة من المرصد وواحدة من بينها هي المعلمات التي يمكن ملاحظتها.
ترتبط المعلمات التي يمكن ملاحظتها بمعلمات المسار.
وبالتالي فإن أي تغييرات على المعلمات،
في عنوان URL الذي تواجهه سوف تنبعث كما يمكن ملاحظتها.
الآن، لذلك عندما تحصل على الملاحظة، بحيث يمكنك أن ترى،
يمكنك الوصول إلى هذا يمكن ملاحظته من خلال قول معلمات الطريق هذه في شفرتك.
لذا فإن المعلمات نفسها يمكن ملاحظتها هنا.
الآن، إلى هذه المعلمات يمكن ملاحظتها،
يمكنك تطبيق مشغل مثل مشغل هنا يسمى switchmap.
سنرى إستخدام هذا في المقتطفات
يأخذ مشغل switchmap المعلمات التي يمكن ملاحظتها.
ثم يحول المعلمات التي يمكن ملاحظتها إلى آخر يمكن ملاحظتها وهو طبق.
يأخذ قيمة المعلمات، ثم يستخرج قيمة المعرف من المعلمات،
والتي تمنحك الوصول إلى معلمة المسار أو المعرف أو
المعلمة التي قمت بتحديدها، ثم يستخدم ذلك للذهاب وجلب الطبق.
لذلك في كل مرة تتغير المعلمة، وسوف يؤدي إلى جلب طبق جديد.
وهكذا في كل مرة تتغير المعلمة،
وهو ما يعادل انبعاث قيمة جديدة من خلال المعلمات التي يمكن ملاحظتها.
يتم تحويل ذلك إلى جلب الطبق الجديد
الذي هو معرف المقابلة.
وبالتالي فإن الطبق سوف تصبح بعد ذلك أخرى يمكن ملاحظتها.
الآن، عندما يصبح هذا الطبق يمكن ملاحظته متاحًا، يمكنك الاشتراك في هذا
الطبق ملاحظته هنا، والحصول على قيمة الطبق.
وعندما تحصل على قيمة الطبق، يمكنك أخذ قيمة الطبق، ومن ثم
إنشاء متغير الطبق الخاص بك ضمن مكون تفاصيل الطبق الخاص بك إلى قيمة الطبق.
وبالتالي، فإن أي تغيير في معلمة المسار ينتشر من خلال هذا
المشغل switchmap إلى ملاحظة،
والتي عند ملاحظتها من خلال المشتركين،
ستمكنك من تحويل ذلك وتعيين ذلك إلى طبق آخر.
وعندما يحدث ذلك، يمكن تحديث وجهة نظرك مع
الطبق الجديد الذي تم الحصول عليه من الخدمة.
حتى الآن، ترى كيف تتدفق البيانات من خلال معلمة المسار،
من خلال مشغل switchmap، وإلى ما
يؤدي إلى تغيير وجهة نظر مكون تفاصيل الطبق الخاص بك.
هذا هو السبب في أن البرمجة المستندة إلى
الملاحظة أو البرمجة التفاعلية في Angular تصبح مفيدة جدًا
لتنفيذ ميزات معينة داخل تطبيق Angular الخاص بك.
و هذا مثال على ذلك.
سنرى استخدام هذا المثال بالذات في
التمرين الذي يتبع هذه المحاضرة.
ظننت أنني سأجعل من
السهل عليك تذكر كل هذا فقط عن طريق غناء هذه القصيدة للملاحظين
[ موسيقى]
يجب أن تغني هذا لحن,
يمكنك أن تدعوني آل من قبل بول سايمون من الشهرة سايمون وغارفنكل.
إذا كنت تستدير وتقول، من هو (بول سايمون)؟
آسف، جيل مختلف
[ موسيقى]