مخططات مفيدة

الدرس 23 من 38 · التصميم · 4 دقيقة و51 ثانية

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

الموارد

• فلوتشارتس
• مخططات التدفق: Mermaid بناء الجملة
• رسومات بيانية للدولة
• مخططات الدولة: Mermaid بناء الجملة
• مخططات الفئة Class
• مخططات الفئة: Mermaid بناء الجملة
• مخططات تسلسلية
• مخططات التسلسل: Mermaid بناء الجملة

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

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

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

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

[01:14] سأقدم لك أيضًا موردًا حيث يمكنك معرفة المزيد عن بناء جملة Mermaid، وهو ما أستخدمه هنا لرسم هذه المخططات وهو ما أحب استخدامه لأنه كما ذكرت سابقًا، عادةً ما تكون هذه المخططات قصيرة العمر. يتغيرون بسرعة كبيرة. Mermaid التي تسمح لي، تسمح لي بتغييرها بسرعة كبيرة. وأنا حقا لا أهتم بالتصميم أو كيف تبدو لطيفة.

[01:35] لذلك سأوصي باستخدام أي. إذا كنت لا تحب Mermaid، فسأوصي باستخدام أي أداة جهد منخفض مثل scalidraw أو TLdraw لرسم هذا النوع من الرسوم البيانية.

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

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

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

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

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

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

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

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