الجزء 7. تقديم نمط MVC (Model-View-Controller).

هذه المادة جزء من سلسلة "مقدمة لتطوير المشاريع". المقالات السابقة:

• حول الشبكات
• حول هندسة البرمجيات
• حول HTTP/HTTPS
• حول أساسيات Maven
• حول servlets (كتابة تطبيق ويب بسيط)
• حول حاويات servlet

في هذه المقالة سوف نتعرف على شيء اسمه MVC. سنتحدث عن ماهية MVC، ونتطرق إلى تاريخها، ونستكشف الأفكار والمفاهيم الأساسية المضمنة في MVC، ونلقي نظرة خطوة بخطوة على كيفية تقسيم التطبيق إلى وحدات نموذجية وعرضية ووحدة تحكم، ونكتب تطبيق ويب صغير يستخدم Spring Boot، وباستخدام Spring MVC كمثال، انظر كيف يتم إرسال البيانات من تعليمات Java البرمجية إلى صفحات HTML. لفهم هذه المادة، عليك أن تكون على دراية بأنماط التصميم، وخاصة المراقب والواجهة. وكن على دراية بطلبات واستجابات HTTP، وافهم أساسيات HTML، واعرف ما هي تعليقات Java التوضيحية. تناول كوبًا من القهوة وتناول وجبة خفيفة، واشعر بالراحة. هيا نبدأ.

تاريخ شركة MVC

تمت صياغة الأفكار الكامنة وراء MVC بواسطة Trygve Reenskaug أثناء عمله في Xerox PARC في أواخر السبعينيات. في تلك الأيام، كان العمل باستخدام أجهزة الكمبيوتر يتطلب درجة علمية ودراسة مستمرة للوثائق الضخمة. كانت المهمة التي حلها Reenskaug مع مجموعة من المطورين الأقوياء هي تبسيط تفاعل المستخدم العادي مع الكمبيوتر. كان من الضروري إنشاء أدوات، من ناحية، ستكون بسيطة للغاية ومفهومة، ومن ناحية أخرى، من شأنها أن تجعل من الممكن التحكم في أجهزة الكمبيوتر والتطبيقات المعقدة. عمل رينسكاوج ضمن فريق قام بتطوير جهاز كمبيوتر محمول "للأطفال من جميع الأعمار" - Dynabook، بالإضافة إلى لغة SmallTalk تحت قيادة آلان كاي. كان ذلك عندما تم وضع مفاهيم الواجهة الودية. في كثير من النواحي، أثر العمل الذي قام به رينسكوج وفريقه على تطور مجال تكنولوجيا المعلومات. إليك حقيقة مثيرة للاهتمام لا تنطبق على MVC مباشرة، ولكنها توضح أهمية هذه التطورات. قال آلان كاي ، "عندما ذهبت إلى شركة Apple لأول مرة، وذلك في عام 1984، كان جهاز Mac معطلاً بالفعل واتصلت بي مجلة Newsweek وسألتني عن رأيي في جهاز Mac. فقلت، "حسنًا، جهاز Mac هو أول جهاز كمبيوتر شخصي جيدة بما فيه الكفاية ليتم انتقادها. لذا، بعد الإعلان عن جهاز الآيفون في عام 2007، أحضره لي وسلمه لي، وقال: "آلان، هل هذا جيد بما يكفي ليتم انتقاده؟" وقلت له: "ستيف، اجعله بهذا الحجم بحجم الكمبيوتر اللوحي وستحكم العالم." وبعد 3 سنوات، في 27 يناير 2010، طرحت شركة Apple جهاز iPad بقطر 9.7 بوصة. بمعنى آخر، اتبع ستيف جوبز نصيحة آلان كاي تمامًا تقريبًا. استمر مشروع رينسكاوج لمدة 10 سنوات. لكن المنشور الأول عن MVC ظهر بعد 10 سنوات أخرى. يذكر مارتن فاولر، مؤلف العديد من الكتب والمقالات حول هندسة البرمجيات، أنه درس MVC باستخدام نسخة عمل من Smalltalk. نظرًا لعدم وجود معلومات حول MVC من المصدر الأصلي لفترة طويلة، ولعدة أسباب أخرى، ظهر عدد كبير من التفسيرات المختلفة لهذا المفهوم. ونتيجة لذلك، يعتبر الكثيرون أن MVC هو نمط التصميم. بشكل أقل شيوعًا، يُطلق على MVC اسم النمط المركب أو مجموعة من الأنماط المتعددة التي تعمل معًا لإنشاء تطبيقات معقدة. ولكن، كما ذكرنا سابقًا، فإن MVC هي في المقام الأول مجموعة من الأفكار/المبادئ/المناهج المعمارية التي يمكن تنفيذها بطرق مختلفة باستخدام أنماط مختلفة... بعد ذلك، سننظر في الأفكار الرئيسية المضمنة في مفهوم MVC.

MVC: الأفكار والمبادئ الأساسية

• VC عبارة عن مجموعة من الأفكار والمبادئ المعمارية لبناء أنظمة معلومات معقدة ذات واجهة مستخدم
• MVC هو اختصار يرمز إلى: Model-View-Controller

إخلاء المسؤولية: MVC ليس نمط تصميم. MVC عبارة عن مجموعة من الأفكار والمبادئ المعمارية لبناء أنظمة معقدة ذات واجهة مستخدم. لكن من أجل الراحة، وحتى لا نقول بشكل متكرر "مجموعة من الأفكار المعمارية..."، سنشير إلى نمط MVC. لنبدأ بالبساطة. ما هو مخفي وراء الكلمات Model-View-Controller؟ عند استخدام نمط MVC لتطوير أنظمة ذات واجهة مستخدم، فإنك تحتاج إلى تقسيم النظام إلى ثلاثة مكونات. ويمكن أيضًا أن يطلق عليها وحدات أو مكونات. أطلق عليهم ما شئت، لكن قم بتقسيم النظام إلى ثلاثة مكونات. كل مكون له غرضه الخاص. نموذج. يسمى المكون/الوحدة الأولى بالنموذج. أنه يحتوي على كل منطق الأعمال للتطبيق. منظر. الجزء الثاني من النظام هو العرض. هذه الوحدة مسؤولة عن عرض البيانات للمستخدم. يتم إنشاء كل ما يراه المستخدم من خلال العرض. مراقب. الرابط الثالث في هذه السلسلة هو وحدة التحكم. يحتوي على الكود المسؤول عن التعامل مع إجراءات المستخدم (يتم التعامل مع جميع إجراءات المستخدم في وحدة التحكم). النموذج هو الجزء الأكثر استقلالية في النظام. مستقلة جدًا لدرجة أنها لا يجب أن تعرف أي شيء عن وحدات العرض والتحكم. النموذج مستقل جدًا لدرجة أن مطوريه قد لا يعرفون شيئًا تقريبًا عن طريقة العرض ووحدة التحكم. الغرض الرئيسي من العرض هو توفير معلومات من النموذج بتنسيق يمكن للمستخدم استهلاكه. القيد الرئيسي للعرض هو أنه يجب ألا يغير النموذج بأي شكل من الأشكال. الغرض الرئيسي من وحدة التحكم هو التعامل مع إجراءات المستخدم. من خلال وحدة التحكم يقوم المستخدم بإجراء تغييرات على النموذج. أو بتعبير أدق، إلى البيانات المخزنة في النموذج. هذا هو الرسم البياني الذي رأيته سابقًا في الدرس: من كل هذا يمكننا استخلاص نتيجة منطقية. يجب تقسيم النظام المعقد إلى وحدات. دعونا نصف بإيجاز الخطوات اللازمة لتحقيق هذا الفصل.

الخطوة 1. افصل منطق عمل التطبيق عن واجهة المستخدم

الفكرة الرئيسية لـ MVC هي أن أي تطبيق به واجهة مستخدم يمكن تقسيمه إلى وحدتين: وحدة مسؤولة عن تنفيذ منطق الأعمال، وواجهة المستخدم. ستقوم الوحدة الأولى بتنفيذ الوظيفة الرئيسية للتطبيق. هذه الوحدة هي جوهر النظام، حيث يتم تنفيذ نموذج مجال التطبيق. في نموذج MVC، هذه الوحدة هي الحرف M، أي النموذج. تقوم الوحدة الثانية بتنفيذ واجهة المستخدم بأكملها، بما في ذلك منطق عرض البيانات للمستخدم والتعامل مع تفاعل المستخدم مع التطبيق. الهدف الرئيسي من هذا الفصل هو التأكد من إمكانية تطوير واختبار جوهر النظام ("النموذج" في مصطلحات MVC) بشكل مستقل. بعد إجراء هذا الفصل، تبدو بنية التطبيق كما يلي:

الخطوة 2 استخدم نمط المراقب لجعل النموذج أكثر استقلالية ولمزامنة واجهات المستخدم

وهنا لدينا هدفين:

1. تحقيق قدر أكبر من الاستقلالية للنموذج
2. مزامنة واجهات المستخدم

سيساعدك المثال التالي على فهم ما نعنيه بمزامنة واجهات المستخدم. لنفترض أننا نشتري تذكرة فيلم عبر الإنترنت ونرى عدد المقاعد المتوفرة في المسرح. وفي الوقت نفسه، قد يقوم شخص آخر بشراء تذكرة فيلم. إذا اشترى هذا الشخص الآخر تذكرة قبلنا، فإننا نود أن نرى انخفاضًا في عدد المقاعد المتاحة لوقت العرض الذي نفكر فيه. الآن دعونا نفكر في كيفية تنفيذ ذلك ضمن البرنامج. لنفترض أن لدينا جوهر نظامنا (نموذجنا) والواجهة (صفحة الويب لشراء التذاكر). يحاول اثنان من المستخدمين اختيار مقعد في المسرح في وقت واحد. المستخدم الأول يشتري تذكرة. يجب أن تظهر صفحة الويب للمستخدم الثاني أن هذا قد حدث. كيف من المفترض أن يحدث هذا؟ إذا قمنا بتحديث الواجهة من النواة، فإن النواة (نموذجنا) ستعتمد على الواجهة. بينما نقوم بتطوير النموذج واختباره، سيتعين علينا أن نأخذ في الاعتبار الطرق المختلفة لتحديث الواجهة. ولتحقيق ذلك، نحن بحاجة إلى تنفيذ نمط المراقب. يتيح هذا النمط للنموذج إرسال إشعارات التغيير إلى كافة المستمعين. كمستمع للحدث (أو مراقب)، تتلقى واجهة المستخدم الإشعارات ويتم تحديثها. من ناحية، يتيح نمط المراقب للنموذج إبلاغ الواجهة (العرض ووحدة التحكم) بحدوث تغييرات دون معرفة أي شيء عنها فعليًا، وبالتالي يظل مستقلاً. ومن ناحية أخرى، فإنه يجعل من الممكن مزامنة واجهات المستخدم.

الخطوة 3 قم بفصل الواجهة إلى العرض ووحدة التحكم

نواصل تقسيم التطبيق إلى وحدات، ولكن الآن على مستوى أقل في التسلسل الهرمي. في هذه الخطوة، يتم تقسيم واجهة المستخدم (التي قمنا بفصلها إلى وحدة منفصلة في الخطوة 1) إلى طريقة عرض ووحدة تحكم. من الصعب رسم خط صارم بين العرض ووحدة التحكم. إذا قلنا أن العرض هو ما يراه المستخدم، ووحدة التحكم هي الآلية التي تسمح للمستخدم بالتفاعل مع النظام، فقد تشير إلى تناقض. تعد عناصر التحكم، مثل الأزرار الموجودة على صفحة الويب أو لوحة المفاتيح الافتراضية على شاشة الهاتف، جزءًا أساسيًا من وحدة التحكم. ولكنها تكون مرئية للمستخدم كأي جزء من العرض. ما نتحدث عنه حقًا هنا هو الفصل الوظيفي. تتمثل المهمة الرئيسية لواجهة المستخدم في تسهيل تفاعل المستخدم مع النظام. هذا يعني أن الواجهة تحتوي على وظيفتين فقط:

• الإخراج وعرض معلومات النظام بسهولة للمستخدم
• إدخال بيانات وأوامر المستخدم (إبلاغها للنظام)

تحدد هذه الوظائف كيفية تقسيم واجهة المستخدم إلى وحدات. في النهاية، تبدو بنية النظام كما يلي: وهكذا نصل إلى تطبيق يتكون من ثلاث وحدات تسمى النموذج والعرض ووحدة التحكم. دعونا نلخص:

1. وفقًا لمبادئ نموذج MVC، يجب تقسيم النظام إلى وحدات.
2. يجب أن تكون الوحدة الأكثر أهمية واستقلالية هي النموذج.
3. النموذج هو جوهر النظام. وينبغي أن يكون من الممكن تطويره واختباره بشكل مستقل عن واجهة المستخدم.
4. ولتحقيق ذلك، في الخطوة الأولى من التقسيم، نحتاج إلى تقسيم النظام إلى نموذج وواجهة مستخدم.
5. بعد ذلك، باستخدام نمط المراقب، نقوم بتعزيز استقلالية النموذج ومزامنة واجهات المستخدم.
6. الخطوة الثالثة هي تقسيم واجهة المستخدم إلى وحدة تحكم وعرض.
7. كل ما هو مطلوب لتلقي بيانات المستخدم في النظام موجود في وحدة التحكم.
8. كل ما هو مطلوب لتوصيل المعلومات إلى المستخدم موجود في طريقة العرض.

هناك شيء آخر مهم يجب مناقشته قبل أن تتمكن من شرب الشوكولاتة الساخنة.

قليلاً عن كيفية تفاعل العرض ووحدة التحكم مع النموذج

عن طريق إدخال المعلومات من خلال وحدة التحكم، يقوم المستخدم بتغيير النموذج. أو على الأقل، يقوم المستخدم بتغيير بيانات النموذج. عندما يتلقى المستخدم معلومات من خلال عناصر الواجهة (عبر العرض)، يتلقى المستخدم معلومات حول النموذج. كيف يحدث هذا؟ ما هي الوسائل التي يتفاعل بها العرض ووحدة التحكم مع النموذج؟ بعد كل شيء، لا يمكن لفئات العرض استدعاء أساليب فئات النموذج مباشرة لقراءة/كتابة البيانات. وإلا فلن نتمكن من القول بأن النموذج مستقل. النموذج عبارة عن مجموعة من الفئات المرتبطة ارتباطًا وثيقًا والتي لا ينبغي للعرض ولا لوحدة التحكم الوصول إليها. لتوصيل النموذج بالعرض ووحدة التحكم، نحتاج إلى تنفيذ نمط تصميم الواجهة. واجهة النموذج هي الطبقة الموجودة بين النموذج وواجهة المستخدم، والتي من خلالها يتلقى العرض بيانات منسقة بشكل ملائم، ويقوم جهاز التحكم بتغيير البيانات عن طريق استدعاء الطرق الضرورية على الواجهة. في النهاية، كل شيء يبدو مثل هذا:

MVC: ماذا نكسب؟

الهدف الرئيسي لنموذج MVC هو فصل تنفيذ منطق الأعمال (النموذج) عن تصوره (العرض). يزيد هذا الفصل من احتمالات إعادة استخدام التعليمات البرمجية. تتجلى فوائد MVC بشكل أكبر عندما نحتاج إلى تقديم نفس البيانات بتنسيقات مختلفة. على سبيل المثال، كجدول أو رسم بياني أو مخطط (باستخدام طرق عرض مختلفة). في الوقت نفسه، دون التأثير على كيفية تنفيذ طرق العرض، يمكننا تغيير كيفية استجابتنا لإجراءات المستخدم (نقرات الأزرار، وإدخال البيانات). إذا اتبعت مبادئ MVC، فيمكنك تبسيط تطوير البرامج وزيادة إمكانية قراءة التعليمات البرمجية وتحسين قابلية التوسعة وقابلية الصيانة. في المقالة الأخيرة من سلسلة "مقدمة لتطوير المشاريع"، سنلقي نظرة على تطبيق MVC المبني باستخدام Spring MVC. الجزء 8. لنكتب تطبيقًا صغيرًا باستخدام Spring Boot