كيفية استخدام هندسة النظم لبناء تطبيق ويب ناجح

إذا فهمت كيف يعمل ، فمن الأسهل بناءه

لقد أكملت أخيرًا تصميمك في Adobe XD أو Figma أو Sketch أو InVision ، لكنك ما زلت تعاني من فكرة كيفية تنفيذ الوظيفة. لا تقلق ، لقد اعتقدنا لبعض الوقت أن الطريقة الوحيدة لبناء تطبيقات الويب هي البدء بتصميم UI / UX جنبًا إلى جنب مع رسومات النماذج الأولية.

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

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

هذه التقنيات لها العديد من الفوائد ، ولكن أهمها مدى سرعة التعبير عن الأفكار وفهم كيفية عمل الأشياء.

بنهاية هذه المقالة ، ستتمكن من استخدام بعض تقنيات SE هذه لإنشاء تطبيقات أفضل.

فيما يلي أربع تقنيات SE عملية وذات صلة يمكنك تطبيقها.

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

مثال عملي - منصة التعلم عبر الإنترنت

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

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

إليك بعض النصائح الجيدة التي يجب أن تكون على دراية بها في المراحل الأولى من التطبيق.

1. لا تبدأ بتصميم مفصل

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

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

2. ابدأ بالمشكلة

حدد المشكلة أولاً: البيئة المحيطة ، ومن هم أصحاب المصلحة ، والسلوك ، وسياق التطبيق (النطاق).

نحن لا نبني التطبيقات بناءً على الحلول ، بل نبنيها نظرًا لوجود مشكلة أو مشكلة أو تحدٍ يجب حله. في معظم الحالات ، لا يهتم العميل بالحل ، إلا أنه يعمل. يجب تحديد الحل عندما يفهم المطورون كيف يتصرف التطبيق ويتفاعل.

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

ضع في اعتبارك أن المشكلة تخبرنا أن هناك حاجة ، لكنها لا تقدم أي حلول. المشكلة هي ما يطلق عملية التنمية. لذا ابدأ بالمشكلة أولاً قبل البدء بالحلول.

دعونا نرى ما هي التقنيات التي يمكننا استخدامها لوصف منصة التعلم عبر الإنترنت الخاصة بنا.

1. مخطط السياق

عرّف الحدود

الغرض من مخطط السياق هو تحديد الحدود داخل التطبيق ، أو أجزاء من التطبيق ، وتوفير فهم واضح للكيانات التي يتفاعل معها.

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

توضيح التطبيقات المعقدة

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

2. استخدم مخطط الحالة

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

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

صِف التفاعلات

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

تفصيل حالة استخدام (إجراء)

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

من أجل وصف السلوك ، يمكننا اتخاذ إجراء واحد ، وتوضيحه من خلال الرسوم البيانية مثل النشاط ، وآلة الحالة ، ومخططات التسلسل وما إلى ذلك.

على سبيل المثال ، يمكننا إنشاء مخطط نشاط لوصف الخطوات اللازمة لتنفيذ إجراء "تحميل المحتوى". يوجد مثال على ذلك في القسمين 3 و 4.

ركز على سيناريوهات حالة الاستخدام المختلفة

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

3. مخطط النشاط

صف السلوك

الغرض من مخطط النشاط هو وصف تسلسل الأنشطة اللازمة لتحقيق حالة الاستخدام. حالة الاستخدام المحددة هي "تحميل المحتوى" من مخطط حالة الاستخدام ، كما هو موضح أعلاه.

أنت حر في تحديد حالة الاستخدام التي تريد التوسع فيها والتوسع فيها - النقطة ليست في عمل مخطط نشاط لكل حالة استخدام ، ولكن تلك التي يصعب فهمها أو تنفيذها.

صف الخطوات للوصول إلى الهدف

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

التعبير عن الأفكار من خلال التصميم

عندما كنت أعمل في فريق ، سلمني أحد كبار المهندسين مخطط نشاط لميزة يريد تنفيذها. أصبحت عملية التطوير بأكملها أسهل كثيرًا لأنه لم يكن عليّ تخمين كيف يتصرف التطبيق ، فقد تم وصف السلوك بالفعل من خلال مخطط النشاط.

بشكل عام ، إنها أداة رائعة للتعبير عن الأفكار والأفكار للناس بدلاً من الاعتماد فقط على التواصل اللفظي.

4. مخطط الدولة والآلة

حدد الدول

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

كلاهما تقنيات مفيدة لوصف سلوك التطبيق ، ومفيدة للعملاء والمطورين لاكتساب فهم مشترك لكيفية عمل الأشياء.

افكار اخيرة

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

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

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

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

إليك بعض المقالات الأخرى التي كتبتها حول نظام الويب البيئي جنبًا إلى جنب مع نصائح وحيل البرمجة الشخصية.

  • دليل عملي لوحدات ES6
  • كيفية تنفيذ طلبات HTTP باستخدام Fetch API
  • مقارنة بين Angular و React
  • عزز مهاراتك باستخدام طرق JavaScript المهمة هذه
  • العقل الفوضوي يؤدي إلى كود فوضوية
  • المطورين الذين يرغبون باستمرار في تعلم أشياء جديدة
  • تعلم مفاهيم الويب الأساسية هذه
  • برمجة أسرع عن طريق إنشاء أوامر bash مخصصة

يمكنك أن تجدني على ميديوم حيث أنشر أسبوعيًا. أو يمكنك متابعتي على Twitter ، حيث أنشر نصائح وحيل تطوير الويب ذات الصلة.