أساسيات معمارية الواجهات الأمامية › فهم المشكلة 2 / 5 السابق التالي

نموذج C4

الدرس 9 من 38 · فهم المشكلة · 7 دقيقة و29 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

الموارد

التفريغ النصي

[00:03] نموذج C4 عبارة عن سلسلة من الرسوم البيانية التي يمكننا استخدامها لتصور بنية مشروعنا بمستويات مختلفة من التفاصيل. تم تطويره من قبل سيمون براون. هو كاتب، معماري، متحدث. يتحدث كثيرا عن نموذج C4. انه يعلم نموذج C4. كتب كتابا رائعا عن معمارية البرمجيات للمطوّرين. سترى ذلك المشار إليها في نهاية الدورة. ونعم، إنه أفضل شخص لشرح نموذج C4 أيضًا. لذلك سأربط إلى مورد آخر حيث يمكننا معرفة المزيد عن نموذج C4 مباشرة من المصدر.

[00:40] في الأساس نموذج C4، يمكنك التفكير في هذا، وهذه هي الطريقة التي يحب سيمون أيضًا شرحها، كخرائط Google للشيفرة الخاص بك. بنفس الطريقة التي يمكنك بها استخدام خرائط جوجل للتكبير والتصغير من منطقة معينة لرؤية المزيد من السياق أو مزيد من التفاصيل، يمكنك أن تفعل الشيء نفسه باستخدام المستويات الأربعة لنموذج C4، الأنواع الأربعة من الرسوم البيانية التي تظهر بنيتنا مع مستويات مختلفة من التفاصيل.

[01:04] المستويات الأربعة هي مخطط السياق، في المستوى الأول. هذا هو الذي رأيناه في الفيديو السابق حيث رأينا مخطط سياق النظام لنظام FullSnack الخاص بنا. ثم في المستوى الثاني، نقوم بالتكبير إلى نظام معين أو نظام برمجي معين، ونقوم بتكبير لرؤية محتوياته، وهذا هو مخطط الحاوية. نحن نرى كل الحاويات داخل نظام برمجي معين. في المستوى الثالث، نقوم بتكبير حاوية معينة لرؤية مكوناتها، وهذا هو مخطط المكون. وفي المستوى الرابع، نفعل نفس الشيء حيث نقوم بتكبير مكون معين لنرى كيف يتم تمثيله كشيفرة.

[01:51] دعونا نفعل لمحة سريعة عن كل واحد من هذه المستويات الأربعة لمعرفة ما هم كل شيء. المستوى الأول، لدينا مخطط سياق النظام، وهذا هو المخطط الذي رأيناه سابقًا حيث نرى النظام الذي نعمل معه، ونظام البرامج كمربع في الوسط ونرى السياق من حوله. السياق هو أساسا شيئين. لدينا مستخدمي النظام والأنظمة الخارجية مثل لدينا هنا.

[02:13] شيء واحد ستلاحظه في جميع مخططات نموذج C4 هو أن كل مربع ليس لديه فقط ملصق يصف، كما تعلمون، ما هو عليه، ولكن أيضًا وصف قصير يصف ما يفعلونه. وأيضًا جميع الأسهم، سترى أن لديهم أيضًا علامات وهذا مهم. C4 هو إزالة الغموض حول، كما تعلمون، عدم معرفة ما يفعله شيء ما في الواقع. الفكرة مع C4 هي أنه يمكنك النظر إلى الرسم البياني وفهم ما يحدث على مستوى عالٍ.

[02:40] هذا النوع من الرسم البياني، المستوى الأول، جيد جدًا للتوثيق. سياق النظام ليس شيئًا يتغير كثيرًا. وبالتالي فإن الاحتمالات هي أن اتصالات النظام الخاص بك ستبقى، وسوف تبقى ذات الصلة ودقيقة لفترة طويلة جدا. كما أنه جيد جدًا للمشاركة مع الأشخاص غير التقنيين، أو أي أصحاب مصلحة مثل رؤساء الوزراء أو ربما الرئيس التنفيذي الذي قد لا يكون تقنيًا، لكنهم يريدون الحصول على فهم لكيفية عمل الأشياء. هذا النوع من الرسم البياني مثالي لحالة الاستخدام الخاصة بنا.

[03:10] في المستوى الثاني، لدينا مخطط الحاوية. هذا هو المكان الذي نمسك فيه بأحد أنظمتنا، نفتحها ونراها ممثلة هنا. لذلك في هذه الحالة نرى حاوية لدينا، آسف، نظامنا يمثل هذا مربع منقط. هنا يمكننا أن نرى نفس السياق حول ذلك. نرى نفس المستخدم ونفس الأنظمة الخارجية. لكننا الآن نرى أيضًا المحتويات، والتي في هذه الحالة عبارة عن حاويات مختلفة.

[03:30] لذلك في C4، الحاويات هي تطبيقات، بما في ذلك تطبيقات الويب وتطبيقات الهاتف المحمول وواجهات برمجة التطبيقات وقواعد البيانات أيضًا، وهما النوعان الأكثر شيوعًا من الحاويات التي ستراها في مخطط الحاويات. ونرى نفس الاتفاقيات حيث نرى أوصاف صناديقنا وتسميات الأسهم عبر جميع الحاويات المختلفة.

[03:53] هذا النوع من الرسم البياني مفيد أيضًا للتوثيق لأن هذا قد يتغير في كثير من الأحيان أكثر من السياق، من اتصال النظام نفسه، ولكنه لا يتغير في كثير من الأحيان. لذلك هذا جيد جدًا وجيد أيضًا للأشخاص غير التقنيين لأننا ما زلنا لا نتحدث عن تقنيات معينة هنا بخلاف مجرد وصف هنا. سترى أن هناك مستوى صغير يصف الأطر أو كومة من تلك التكنولوجيا بالذات. ولكن هذا هو فقط لتوجيه الناس، وليس حقا أن نفهم حقا ما الفرق بين الزاوي ورد فعل هو.

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

[04:49] لتطبيقات الواجهة الأمامية على وجه الخصوص، أجد مخطط المكون قليلاً، ليس دقيقًا، وليس مفيدًا كما أقول، من أنظمة الواجهة الخلفية. لذلك لدي بعض التعديلات الصغيرة التي سنتحدث عنها في الوحدة التالية عندما نبدأ في تصميم نظامنا. ولكن في الوقت الحالي، اعلم فقط أن هذه هي الطريقة التي يبدو بها مخطط المكون القياسي C4.

[05:08] نحن نتبع نفس الاتفاقيات من قبل، وهذا أكثر توجهًا نحو الأشخاص التقنيين مثل مهندسي البرمجيات أو المطورين. أيضا، كنت لا تريد أن ترسم واحدة من هذه لجميع الحاويات الخاصة بك. أنت لا تريد أن تكتب هذه للتوثيق لأن هذا يحصل عفا عليها الزمن بسرعة كبيرة. يتغير الشيفرة الخاص بك في كثير من الأحيان، لذلك ستحتاج إلى تحديث هذا.

[05:31] وأيضا، ليس هناك طريقة جيدة حقا لأتمتة تطوير هذا لأن هذا لا يمثل كل من وحدات التحكم الخاصة بك، وجميع الطبقات الخاصة بك في التطبيق الخاص بك، لأن ذلك سيكون مجرد الساحقة جدا. هذا يمثل تلك الرئيسية الخاصة بك، تلك التي هي أكثر أهمية. لذلك توليد هذا تلقائيا من الشيفرة ليست حقا واضحة وفي الكثير من الحالات، وليس من الضروري حقا.

[05:52] أنت تريد فقط القيام بذلك عندما نحاول، على سبيل المثال، شرح شيء ما أو توصيل تغيير ترغب في إجراؤه في المعمارية. ربما تقوم بتجميع وثيقة تصميم أو وثيقة اكتشاف حيث تحاول أن تشرح لفريق التطوير كيف تعمل الأشياء على مستوى عالٍ وما هي التغييرات التي ترغب في إجراؤها. ولكن أبعد من ذلك، لا تحتاج إلى الاحتفاظ بأحد مخططات المستوى الثالث هذه لجميع الحاويات الخاصة بك.

[06:17] وأخيرًا، في المستوى الرابع، نرى مخططات الشيفرة، وهذه يمكن أن تكون أي نوع من المخططات التي تمثل كيفية عمل الأشياء على مستوى الشيفرة. هذه الحالة، لدينا رسم تخطيطي للفئة، لكن يمكن أن يكون رسم تخطيطي لعلاقات الكيان، يمكن أن يكون رسم تخطيطي للمكونات، وهكذا. ومرة أخرى، سنرى الطريقة التي أحب بها تمثيل المستوى الرابع لأنظمة الواجهة الأمامية في الوحدة التالية عندما نتحدث عن تقسيم الأشياء إلى وحدات ومكونات.

[06:41] هذا هو في الأساس المستويات الأربعة لنموذج C4 باختصار. إذا كنت ترغب في معرفة المزيد عن نموذج C4، فلا يوجد مكان أفضل من C4model.com، الموقع الرسمي، وليس هناك شخص أفضل من سيمون براون لشرحها. لذلك يمكنك الذهاب إلى أي من المحادثات العديدة على YouTube. يمكنك البحث في Google Simon Brown C4 على YouTube وستجد الكثير من محادثات المؤتمر.

[07:04] كل منهم كبيرة لأن سيمون هو متحدث رائع ويوضح هذا الشكل بشكل جيد حقا. لكننا سنستمر في الحديث عن هذا الأمر طوال بقية الدورة لأننا سنشير إلى طرق أخرى لتصور تطبيق الواجهة الأمامية على وجه التحديد. وإذا كنت ترغب في قراءة مقالة كتبتها تتحدث عن كيفية إجراء التعديلات التي أود إجراؤها على نموذج C4 لأنظمة الواجهة الأمامية، فأنا أربط ذلك في الوصف أيضًا.