الجزء 7. مقدمة لنمط MVC (نموذج عرض وحدة التحكم).

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

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

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

تاريخ شركة MVC

تمت صياغة أفكار MVC بواسطة Trygve Reenskaug أثناء عمله في Xerox PARC في أواخر السبعينيات. في تلك الأيام، كان من المستحيل العمل مع جهاز كمبيوتر دون الحصول على درجة أكاديمية ودراسة مستمرة للوثائق الضخمة. كانت المشكلة التي حلها Reenskaug مع مجموعة من المطورين الأقوياء هي تبسيط تفاعل المستخدم العادي مع الكمبيوتر. كان من الضروري إنشاء أدوات، من ناحية، ستكون بسيطة للغاية ومفهومة، ومن ناحية أخرى، من شأنها أن تجعل من الممكن إدارة الكمبيوتر والتطبيقات المعقدة. عمل Reenskaug ضمن فريق قام بتطوير جهاز كمبيوتر محمول "للأطفال من جميع الأعمار" - Dynabook، بالإضافة إلى لغة SmallTalk تحت قيادة Alan Kay. في ذلك الوقت تم وضع مفاهيم الواجهة الودية. أثر عمل رينسكاوج مع فريقه بشكل كبير على تطوير مجال تكنولوجيا المعلومات. دعونا نقدم حقيقة مثيرة للاهتمام لا تتعلق مباشرة بـ MVC، ولكنها توضح أهمية تلك التطورات. في عام 2007، بعد تقديم هاتف Apple iPhone، قال آلان كاي: «عندما ظهر جهاز Macintosh، سألت مجلة Newsweek عن رأيي فيه. قلت: هذا هو أول حاسوب شخصي يستحق النقد. بعد العرض، جاء ستيف جوبز وسأل: هل يستحق iPhone النقد؟ وقلت، اجعلها خمس في ثماني بوصات وسوف تغزو العالم. وبعد ثلاث سنوات، في 27 يناير 2010، قدمت شركة أبل جهاز 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