السلام عليكم،

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

قد يظن البعض أن ما يقصد بالتصميم هو شكل البرنامج فقط. لكن هذا جزء بسيط منه.

فماذا يقصد بتصميم البرنامج (Software Design)؟

مرحلة التصميم لبرنامج هي عملية تحليلية لمتطلبات البرنامج لاختيار و بناء هيكل البرنامج و أجزاءه و كيفية ترابطها مع بعضها البعض، ينتج عن ذلك مجموعة من الملفات و النماذج و الرسومات البيانية التي يمكن منها برمجة وكتابة شيفرة البرنامج “بالكامل”.

و تنقسم مرحلة التصميم إلى مراحل عديدة من أهمها:

1 - تصميم البنية أو الهيكل Architectural Design

2 - تصميم نماذج البرنامج باستخدام اللغة الرسومية UML - Unified Modeling Lanuage

3 - تصميم واجهة الاستخدام GUI - Graphical User Interface

وهذا شرح موجز لكل مرحلة كما يلي:

  • أولا : تصميم البنية أو الهيكل (Architectural Design)

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

مرتبة و تنظيم ترابط هذه الأجزاء مع بعضها البعض. غالبا لا تتطلب هذه مرحلة الابتكار، فهناك أنواع معروفة و محددة من الهياكل. كل ما يُستلزم في هذه المرحلة أو اختيار الهيكل المناسب للبرنامج. يعتمد اختيار الهيكل على نوع البرنامج و على دراسة جوانب آخرى مهمة كالأداء (performance) والحماية و الأمان (security and safty) و سهولة الصيانة (Maintainability).

من الهياكل المستخدمة:

  1. هيكل الخادم-المخدوم (أو الزبون) (Client-Server Architecture)

و يستخدم في البرامج التي تعمل على أكثر من جهاز أو موزعة على شبكة. مثال: متصفح الانترنت.

  1. هيكل الطبقات (Layered Architecture)

ويستخدم في البرامج التي تنقسم إلى أجزاء واضحة (طبقات). و كل طبقة تعتمد على ما تحتها من طبقات.

مثال: برامج تحويل و إرسال البيانات عبر الشبكة. فتحويل البيانات يستلزم مراحل و كل مرحلة تعتبر طبقة.

  1. هيكل التخرين أو المخرن (Repository Architecture)

و يستخدم في البرامج التي تعتمد على قاعدة (أو قواعد) بيانات كبيرة (Database).

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

ثانيا: تصميم النماذج بالـ UML:

وهي أهم المراحل، حيث أنها زبدة التصميم وفيها الجزء الأكبر من التحليل و التفكير و “الابتكار” في عملية التصميم.

لكن ما هي ال UML؟

https://suar.me/zpvvV

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

من أهم نماذج ال UML:

• نموذج دراسة حالة (سمة) من البرنامج (Usecase Diagram)

• نموذج ترابط الأصناف أو الأجزاء (Class Diagram)

• النماذج الديناميكية (Dynamic Diagrams) ، وتنقسم إلى:

  • نموذج الفعالية بين الأجزاء (Activity Diagram)

  • نموذج التعاون أو الاشتراك (بين الأصناف) (Collaboration Diagram)

  • نموذج تسلسل الأحداث (Sequence Diagram)

  • نموذج المراحل (Statechart)

وهذه بعض الأمثلة:https://suar.me/0ONNj

https://suar.me/yq6lq

و هناك العديد من النماذج الآخرى. (سنتطرق لشرح مفصل عن ال UML في مقال لاحق).

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

ثالثا: تصميم واجهة الاستخدام (GUI Design)

واجهة الاستخدام هي واجهة البرنامج التي يتعامل معها المستخدم. وتشمل بالأساس الجزئ المرئي الذي يتكون عادة من نوافذ و أزرار و حقول كتابة و لون الخلفية و لون الخط… الخ.

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

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

مثال على واجهتين مختلفيتن لبرنامج الآلة الحاسبة:

https://suar.me/KWnv2

على السريع:

ما مدى تأثير كل واجهه على : سرعة الاستخدام، بساطة المظهر، نوع المستخدم؟ (مبتدئ/خبير)

هل لاحظت مدى الفرق؟ :)

هل هناك فروق في جوانب آخرى؟ ما هي؟ :)

والسلام

مصادر الصور:

صورة 1: http://pigseye.kennesaw.edu

صورة 2 و 3: www.csci.csusb.edu/dick/samples/uml2.html

صورة 4: http://trials2.pocketgear.com/Product_images/1/148/calc_ani.gif

صورة 5: http://homepage.mac.com/superpixel/calc/calc.jpg


هذا الموضوع كتبه [ صالح ] بتاريخ الأثنين, أبريل 24th, 2006 في الساعة 6:16 pm في قسم عام.

http://www.swe4arab.net: