Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

كيف يمكن لاستخدام مخططات الحالة أن تجعلك مبرمج أفضل على شبكة الإنترنت

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

لماذا استخدام مخطط الحالة ؟

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

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

من ناحية أخرى، إذا كنت تنشئ موقعًا على الويب حيث يتعين عليك التعامل مع عمليات انتقالية خاصة، فيمكن أن يكون مخطط الحالة مفيدًا بشكل كبير:

  1. التعامل مع مدخلات المستخدم الخاصة، حيث ما يختارونه يقرر الحالة التالية. (على سبيل المثال ، النماذج أو القوائم التي تحتوي على قوائم منسدلة أو ديناميكية.)
  2. مواقع AJAX-y حيث لا يتغير عنوان URL حتى بعد إجراء المستخدم الهام. (المحتوى يتغير، عنوان URL لا يتغير.)

كيف يمكنك إنشاء مخططات الحالة؟

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

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

يتكون مخطط الحالة من:

  • خطوط أسهم مُعلمة لإظهار مدخلات / إجراءات المستخدم (التحويل).
  • الدوائر المعلمة لإظهار العرض الناتج للمحتوى (حالة التطبيق).
  • حالة البدء بدائرة ذات حدود مزدوجة.
  • الحالات النهائية (ولكن ليس عندما يكون التطبيق قائمًا على الويب. انظر أدناه للحصول على تفسير.)

يمكنك مشاهدة مثال بسيط أدناه مباشرةً - والذي سيتم توسيعه لاحقًا في هذه المقالة:

فيما يلي خطوات إنشاء مخططات الحالة (مع وجود اتجاهات نحو التطبيقات المستندة إلى موقع الويب):

  1. قم بعمل قائمة بجميع المدخلات الممكنة من قبل مستخدم التطبيق، من كل حالة فردية.
  2. ارسم حالة البداية - دائرة الحدود المزدوجة المسماة بـ "S". مع موقع الويب، تكون حالة البدء هي الصفحة الرئيسية وشاشتها الافتراضية.
  3. ارسم دوائر للحالة أو الحالة الفرعية الفريدة المحتملة. بالنسبة إلى المواقع الثابتة، تعد كل صفحة ويب حالة منفصلة. إذا كان لتطبيقك على الويب حالات فرعية مختلفة لنفس عنوان URL، فأنت بحاجة إلى رسم دوائر منفصلة للحالة.
  4. لكل إجراء محتمل من حالة البدء، ارسم الأسهم المسماة (التحولات) إلى دائرة الحالة المحتملة التالية.
  5. كرر هذا لكل حالة حتى يكون لديك مخطط الحالة الكامل للتطبيق.
  6. لا تنس التحولات الدائرية. على سبيل المثال، من حالة ما إلى نفس الحالة (ربما بسبب إعادة النقر على نفس الرابط مرتين).
  7. يمكن تمثيل التحولات المتكررة بمجموعة من الحالات المتصلة بشكل قصير نوعاً ما، كما سيتم مناقشته أدناه.
  8. تحتوي مخططات الحالة لتطبيقات غيرالويب دائمًا على حالة"نهاية". ومع ذلك، يُقال أن الويب "عديم الحالة" لأنه في كل مستعرض ويب، تكون كل حالة مفردة هي حالة النهاية.  يمكنك اتخاذ إجراء والخروج، أو اتخاذ إجراء آخر ثم المغادرة، وما إلى ذلك. بالنسبة لتطبيقات الويب، ليست هناك حاجة لرسم حالة الإنهاء.

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

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

كيف تطبق مخططات الحالة على التطبيقات القائمة على الويب؟

بالنسبة إلى موقع الويب الثابت الذي لا يستخدم ميزات AJAX-y (أي، أي ميزة لا يتغير فيها عنوان URL)، يكون رسم الحالة سهلًا إلى حد ما ولكنه غير ضروري بشكل عام. على سبيل المثال، يؤدي موقع الويب الثابت الذي ترتبط فيه كل صفحة بكل صفحة أخرى إلى رسم تخطيطي يُشار إليه أحيانًا على أنه رسم بياني"متصل بالكامل". عادة ما تكون مثل مخططات الحالة عديمة الجدوى هذه لأنه لا يوجد تعامل خاص لتصورها. كل حالة مرتبطة بكل حالة أخرى)

وحينما تكون مخططات الحالة مفيدة للاستخدام يكون ذلك بالنسبة للمواقع الديناميكية - خصوصًا تلك التي تتميز بميزات AJAX-y (مثل القوائم المنسدلة، المنزلقات، الأكورديون، المعارض، إلخ). في الحالة الأخيرة، قد لا يتغير عنوان URL في المستعرض، لكن محتوى الصفحة يفعل ذلك جزئيًا. يصعب تصور جميع الحالات الممكنة والانتقالات (الإجراءات) لأن "الصفحة" يمكن أن تضاعف الحالات الفرعية.

مخطط الحالة (أو مجموعة من المخططات التفصيلية بشكل متزايد) تأتي في غاية السهولة في هذه الحالة - خاصة إذا كان هناك فريق من المبرمجين (وأحيانا المصممين) للعمل بها.

مثال على استخدام مخطط الحالة

في برنامج تعليمي قادم ، سأوضح لك كيفية كتابة jQuery  للتأثيرات التي أستخدمها في نموذج AboutMe. تحتوي الصفحة المباشرة على بعض مواطن الخلل في CSS التي تحتاج إلى تسويتها أولاً. أود أيضًا إضافة المزيد من الميزات المستندة إلى jQuery إذا كان هناك ما يكفي من الوقت. هذه الميزات الإضافية ستكون موضوع مثالنا.

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

ميزات التطبيق المطلوبة

إذا نظرت إلى معرض "العربات الحالية" في يسار الصورة أعلاه، أو في الصفحة المباشرة، سترى أن هذا هو في الأساس نفس مفهوم معرض الصور. انقر فوق الارتباط وستظهر تفاصيل تلك "العربة". ومع ذلك، عندما قمت ببناء الصفحة المباشرة، لم تكن هناك برامج تعليمية jQuery حول كيفية قذف النص في المزيج، من أجل كل "إطار" من المعرض. كان علي أن أخرج بشيفرتي الخاصة.

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

في الوقت الحالي، تحتوي الصفحة فقط على "العربات الحالية"، ولكن يجب تحتوي "العربات السابقة" أيضًا. فيما يلي قائمة بالمتطلبات الوظيفية لما يجب أن تكون عليه منطقة العرض:

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

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

خلق مخطط الحالة

لإنشاء مخطط الحالة، يجب علينا أولاً تحديد كل حالة والمدخلات، والإجراء الفريد الممكن:

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

ملاحظة: في هذه المرحلة، نحن مهتمون فقط بما يحدث في معرض C.V. في مخطط الحالة، لا نهتم بالإجراءات التي تؤثر على أجزاء أخرى من صفحة الويب. نحن نعرض فقط الإجراءات / ردود الفعل التي تؤثر على معرض C.V.

هنا مخطط حالة عينة للوظيفة المذكورة أعلاه.

بعض الملاحظات حول هذا المخطط:

  1. لأغراض هذه المناقشة، إنه ليس بكل تلك الاهمية ماهي في الواقع كل تسمية. هنا، تمثل كل منها موقعًا إلكترونيًا أقوم إما بالكتابة حاليًا أو اعتدت الكتابة عنه.
  2. انها ليست معقدة كما تبدو. ركز فقط على عملية انتقال واحدة في كل مرة وسيكون واضحًا ما يحدث. [هنا، تكون تسميات الإجراءات هي نفس تصنيفات الحالة. ليس هذا هو الحال دائمًا.] عادةً ما يكون الأمر أكثر وضوحًا عند رسم مخطط الحالة بنفسك، وإضافة دوائر جديدة للحالة وأسهم انتقال واحدة تلو الأخرى.
  3. يتم تمثيل التحويلات، وتعرف أيضًا باسم إجراءات المستخدم، بواسطة الأسهم المسماة. (عادةً ما تكون العلامات عبارة عن نص كامل، وليس النماذج القصيرة المستخدمة هنا.)
  4. تمثل الحالات، التي تعرف باسم ردود الفعل، دوائر. دائمًا ما يتم تمييز حالة البدء بدائرة مزدوجة و "S".
  5. يتم استخدام نماذج قصيرة لكلا النوعين من العلامات، للحفاظ على المخطط أقل فوضى.
  6. يتم ترميز الحالات والحالات الفرعية بالألوان استنادًا إلى ما إذا كانت ذات طبيعة أولية أو ثانوية. على سبيل المثال، يمثل اللون الأزرق حالات أولية (وعمليات انتقالية). يمكنك الانتقال من حالة البدء إلى أي حالة زرقاء بنقرة واحدة على الرابط المناسب. لا يمكنك الانتقال إلى حالة أرجواني (ثانوي) من "البدء" دون المرور أولاً عبر حالة أساسية.
  7. نظرًا لوجود قدر كبير من الانتقال المتكرر (أي من أي عنصر عربة إلى آخر)، يتم عرض مجموعات التحويلات مع أحد السهام المحددة السميكة (التعبئة باللون الأزرق أو الأرجواني).  على سبيل المثال، أثناء عرض تفاصيل العربة FF (مجلد العمل المستقل)، يمكنك النقر فوق أي من عناصر العربة المدرجة في عرض CG (العربات الحالية)، بما في ذلك FF نفسه. أو يمكنك النقر على "علامة التبويب" CG وإعادة تعيين العرض. لا يمكنك الانتقال من إطار العربة الحالية إلى إطار العربة "السابق"، وليس العكس.
  8. يتضمن السهم القصير، الذي تم تحديده باللون الأزرق التحولات التي تعود إلى الحالة الافتراضية لـ CG. لا يتضمن السهم القصير ذو اللون الأرجواني المحدد انتقالات تعود إلى الحالة الافتراضية لـ PG. (وهذا لأن هذه التحولات تظهر بالفعل بشكل صريح. إنها لم تكن من أجل CG لأن المخطط سيكون فوضوياً للغاية).

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

على سبيل المثال، قد يكون المخطط أعلاه يحتوي على مخطط حالة رئيسي يحتوي على العقد S، و CG، و PG. ثم سيكون هناك اثنين من مخططات الحالة التفصيلية. يمكن أن يكون للمرء S ،CG والحالات الفرعية المقابلة التي تمثل مختلف العربات. يحتوي المخطط التفصيلي الآخرعلى S، و PG، و الحالات الفرعية المرافقة.

افكار اخيرة

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.