إنشاء نموذج أولي | الوحدة الثانية | الدرس الثالث

إنشاء نموذج أولي هو عنوان الدرس الثالث من الوحدة الثانية التي تحمل اسم “النمذجة الأولية” من مقرر “هندسة البرمجيات”.

ستتعرف في هذا الموضوع على تصميم النظام، والتمييز بين فئات النماذج الأوَّلية، بالإضافة لإنشاء النموذج الأوَّلي باستخدام برنامج بنسل بروجكت، وتحديد دور المُستخدِمين في النمذجة.

لذا قم بقراءة أهداف التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل كافة محتوياتها بعد انتهائك من دراسة الموضوع.

أهداف التعلُّم

• معرفة خطوات تصميم النظام.
• تمييز فئات النماذج الأوَّلية.
• إنشاء النموذج الأوَّلي باستخدام برنامج بنسل بروجكت.
• تحديد دور المُستخدِمين في النمذجة.

هيا لنبدأ!

تصميم النظام (System Design)

مرحلة تصميم النظام تلبي مرحلة التحليل، حيث يتم من خلال هذه المرحلة:

• تحديد عناصر النظام ومكوناته وواجهات النظام.
• تحديد أو تصميم هيكلية النظام ومكونات الأجهزة وأنظمة التشغيل والبرمجة.
• التكامل مع الأنظمة الأخرى ومسائل النظام.

العمليات الرئيسة لمرحلة التصميم The Main Operations of the Design Phase

يتمحور العمل في مرحلة التصميم حول الشكل الذي ستبدو عليه واجهات النظام وكيفية عمل وظائف النظام.

تُركز بعض أجزاء هذه المرحلة على الميزات الفنية للنظام بينما تركز الأجزاء الأخرى على كيفية استجابة النظام وتفاعله مع المستخدم.

العمليات الأخرة المتضمنة أثناء مرحلة التصميم Other Operations Involved During the Design Phase

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

النموذج الأولي Prototype

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

يتم تصميم النماذج الأوَّلية لتمكين المُصمِّمين من التفكير في الحلول بشكلٍ إبداعي، وذلك للتقليل من احتمالات الفشل، وتجنَّب إضاعة الوقت والمال في تطوير الأفكار غير القابلة للتطبيق.

لمعرفة المزيد من المعلومات عن النموذج الأوَّلي، قم بالاطّلاع على الرابط التالي:

نموذج مبدئي – ويكيبيديا

أهمية النموذج الأولي The Importance of Prototype

تساعد النماذج الأولية في:

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

بإمكانك مراجعة محتوى موضوع “إنشاء نموذج أولي” من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:

فئات النماذج الأوَّلية (Prototyping Categories)

هناك طرائق مختلفة للنمذجة، ويجب دائمًا تحديد الطريقة الصحيحة التي تُناسب المنتج والموارد المتاحة للعمل.

يتم تصنيف فئات النماذج الأولية بشكل عام بناء على دقتها، وتنقسم إلى ثلاث فئات وهي:

• فئة الدقة المنخفضة.
• فئة الدقة المتوسطة.
• فئة الدقة العالية.

النموذج الأولي منخفض الدقة Low-Fidelity Prototype

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

النموذج الأولي متوسط الدقة Medium-Fidelity Prototype

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

النموذج الأولي عالي الدقة High-Fidelity Prototype

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

تعليمات النمذجة Modeling Instructions

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

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

بإمكانك مراجعة محتوى موضوع “إنشاء نموذج أولي” بدايةً من عنوان “فئات النماذج الأولية” وحتى هذه النقطة، من خلال الرابط التالي:

سيناريو التطبيق Application Scenario

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

ستُنشئ تطبيقًا لمساعدة السائحين على التنقل من خلال الشاشة ليتمكنوا من قراءة المعلومات حول المواقع السياحية المختلفة التي يمكنهم زيارتها في مديني الرياض وجدة.

إنشاء النموذج الأوَّلي باستخدام برنامج بنسل بروجكت (Creating the Prototype With the Pencil Project Software)

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

لإنشاء نموذج أولي جديد:

1. افتح Pencil Project (بنسل بروجكت)، ثم اضغط على Create a New Document (إنشاء مستند جديد).
2. من لوحة Shapes (الأشكال)، اضغط على Mobile – Android ICS (الهاتف المحمول – أندرويد ICS) لإضافة شكل.
3. اسحب شكل Phone (هاتف) وأفلته في لوحة التصميم.
4. اسحب شكل Status Bar (شريط الإشعارات) وأفلته في الجزء العلوي من شاشة الهاتف بالشّكل الذي يبدو عليه في شاشة الهاتف الحقيقي.
5. من لوحة Shapes (الأشكال)، اضغط على قسم Common (الأشكال الشائعة) لإضافة الشكل.
6. اسحب وأفلت Bitmap Image (صورة نقطية) إلى لوحة التصميم لتحميل صورة.

لإدراج صورة:

1. اضغط بزر الفأرة الأيمن على شكل Bitmap Image (صورة نقطية)، ثم اختر Action (إجراء)، ثم Load Embedded Image (تحميل الصورة المُضمنة).
2. اختر ملف الصورة.
3. اضغط على Open (فتح) لتحميل الصورة من جهازك.
4. اسحب الصورة وأفلتها في منتصف مُخطَّط الصورة لملائمة شاشة الهاتف.

لإضافة زر:

1. من قسم Mobile – Android ICS (الهاتف المحمول – أندرويد ICS)، اسحب شكل Focused Button(زر مُركّز) وأفلته في منتصف الشاشة.
2. اضغط ضغطًا مزدوجًا وسَمّ الزر Discover (اكتشف).

 كرِّر الخطوات التي اتبعتها عند إضافة الزرّ لإضافة زرّ ثاني عنوانه مكتوب باللغة العربية.

بإمكانك مراجعة محتوى موضوع “إنشاء نموذج أولي” بدايةً من عنوان “سيناريو التطبيق” وحتى نهاية هذا القسم، من خلال الرابط التالي:

تطبيق متعدد الصفحات (Multi-Page Application)

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

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

لإنشاء الشاشة الثانية للتطبيق:

1. من قسم Mobile – Android ICS (الهاتف المحمول – أندرويد ICS)، اسحب وأفلت شكل Phone(هاتف) على يمين شكل الهاتف الأول.
2. اسحب شكل Status Bar (شريط الإشعارات) وأفلته في الجزء العلوي من شاشة الهاتف كما يبدو في الهاتف الحقيقي.
3. أسفل شريط الحالة، أضف شكل Screen Header (ترويسة الشاشة).
4. ثم اضغط ضغطًا مزدوجًا واكتب العنوان Discover Saudi Arabia (اكتشف المملكة العربية السعودية).
5. غيِّر حجم النصّ من شريط Font Editor (محرِّر الخطوط) إلى 11.

كرِّر الخطوات التي اتبعتها عند إضافة الصورة وترويسة الشاشة لجعل الشاشة تبدو كما تظهر على اليمين.

عليك إضافة صورتين لمدينتي الرياض وجِدَّة كما هو موضَّح.

لإدراج شكل نصي:

1. من قسم Mobile – Android ICs (الهاتف المحمول – أندرويد ICS)، اسحب شكل Text (نصّ) وأفلته.
2. اضغط ضغطًا مزدوجًا واكتب RIYADH (الرياض).
3. غيِّر حجم النصّ من شريط Font Editor (مُحرِّر الخطوط) إلى 22.
4. اضغط على Color Palette (لوحة الألوان).
5. ثم اختر اللون بالرمز: #FFFFFF.
6. كرِّر الخطوات لإضافة عنوان الصورة الثانية.

لإنشاء الشاشة الثالثة للتطبيق:

1. من قسم Mobile – Android ICS (الهاتف المحمول – أندرويد ICS)، اسحب وأفلت شكل Phone(هاتف) على يمين شكل الهاتف الثاني.
2. اسحب شكل Status Bar (شريط الإشعارات) وأفلته في الجزء العلوي من شاشة الهاتف كما يبدو على شاشة الهاتف الحقيقي.
3. اسحب وأفلت شكل Text (نصّ).
4. ثم من علامة التبويب Properties (خصائص) غيِّر لون النصّ واكتب AI Masmak (المصمك).
5. كرِّر الخطوتين الأخيرتين لكتابة Boulevard of Riyadh City (بوليفارد مدينة الرياض).

في الختام، أنشئ الشاشة النهائية التي ستعرض صورة ووصفًا موجزًا حول قصر المصمك.

لاحظ أن

لا تنسَ حفظ مشروعك عند الانتهاء.

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

دور المُستخدِمين في النمذجة (The Rule of Users in Prototyping)

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

أفضل الاستراتيجيات للحصول على تغذية راجعة على النماذج الأولية:

Best Strategies for Getting Feedback on Prototyping  

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

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

بإمكانك مراجعة محتوى موضوع “إنشاء نموذج أولي” بدايةً من عنوان “دور المُستخدِمين في النمذجة” وحتى نهاية الموضوع، من خلال الرابط التالي:

اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:

الواجب الإلكتروني

إلى هنا يكون قد انتهى موضوع “إنشاء نموذج أولي”، لا تنسوا مراجعة أهداف التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!

روابط هامة

مقررات الفصل الدراسي الأول