Three Layer Architecture Part II معمارية الطبقات الثلاث

بعد أن اوضحنا معمارية الطبقات الثلاث في المقالة السابقة Three Layer Architecture Part I , سنقوم الأن بتطبيق هذه الطبقات بالترتيب ونبدأ من الأسفل الى الأعلى Bottom-Up , بحيث نقوم بالبداية بخلق قاعدة البيانات ومن ثم نخلق طبقة التطبيق وبعدها طبقة التعامل مع المستخدم , سوف اقسم العمل الى نقاط متسلسلة لأجل تبسيط الأمر على القارئ.

1 - يتم فتح Sql Server لأجل بناء قاعدة البيانات ونقوم بتسميتها DBCompany وسوف تتألف من جدول واحد نسميه Customer يحوي على عدة حقول , شاهد الصورة التالية التي تبين كود Sql :

* وبعد تنفيذ الكود أعلاه سوف يتم خلق الجدول بالشكل التالي :

* وبعد ذلك نقوم بتعبئة بيانات الجدول وبهذا ننتهي من مرحلة بناء قاعدة البيانات.

2 - يتم خلق تطبيق من نوع WPF ندعوه ThreeLayerArchitecture ونقوم بخلق مشروعين من نوع ClassLibrary كما في الصورة التالية :

 3 - نقوم الأن ببناء الطبقة DAL سوف نعتمد ببناء هذه الطبقة على تقنية Entity Framework بحيث سوف نقوم بأستخدم قاعدة البيانات التي خلقناها في الخطوة رقم 1 , أذن لنقوم بتتبع الخطوات التالية:

* نقوم أولا بخلق ملف جديد نظيفه الى طبقة DAL أنظر اللصورة التالية:

* نقوم بأختيار Model كما في الصورة التالية :

* نقوم بأختيار المودل بالأعتماد على قاعدة بيانات مخلوقة مسبقا :

* نختار نوعية مصدر البيانات كما في الصورة ادناه :

* بعد ألأختيار أعلاه يجب أن نحدد السيرفر الخاص بقاعدة البيانات ونحدد قاعدة البيانات التي خلقناها مسبقا انظر الشكل التالي :

* بعد أختيار السيرفر وتحديد قاعدة البيانات سوف تظهر النافذة في الأسفل وبعدها يجب عليك الضغظ على Next :

* يجب عليك الأن أن تختار الجدول الذي تريد أن يتمثل في Model ومن ثم أضغظ على Finish :

* وفي النهاية سوف يتولد EFModel ويتولد Class Diagram مشابه للجدول الموجود في قاعدة البيانات : 

4 - نقوم ألأن بخلق طبقة BL والتي سوف تتعامل مع طبقة DAL أذن يجب عليك أن تظيف مرجع Reference الخاص بطبقة DAL الى BL وأيضا أضافة مرجع او مكتبة System.Data.Entity الموجودة ضمن مكتبة Net. , شاهد الخطوات التالية لأجل تنفيذ الطبقة :

* يتم أولا خلق Interface ندعوه IDataProvider يحوي على Method تقوم بأرجاع قائمة الموظفين , الكود ممثل في الشكل التالي :

* بعدها يتم خلق Class ندعوه DataProvider نجعلة ينفذ IDataProvider  عمله الرئيسي هو أحضار جميع بيانات الخاصة بجدول Customer من قاعدة البيانات وأرجاعها على شكل IList أن تم أستدعائه :

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

5 - نقوم ألأن ببناء الطبقة PL والتي سوف تتفاعل مع المستخدم يتم اولاً أضافة ملف ندعوه ViewModel ومن ثم نسخ فايل App.Config ولصقه في طبقة العرض PL لتسهيل الوصول واستخدام Entities ويجب أن يكون على الشكل التالي :

* نظيف Class الى ملف ViewModel وندعوه MainViewModel والذي سوف يتعامل مع طبقة BL ويعمل Binding مع View لتحقيق جزء من مبدأ MVVM بالطبع كان بأمكاننا أن تقوم بعزل ViewModel على dll منفرد واقصد خلق ClassLibrary لكن أردت أن أبسط التطوير , انظر الشكل التالي الذي يوضح الكود الخاص به :

نلاحظ من الكود أعلاه أن MainViewModel يستلم instance من نوع IDataProvider والذي بدوره يستدعي Method الموجودة داخل طبقة BL ومن ثم يذهب الى طبقة DAL لأرجاع قائمة بالأسماء, ويتسائل القارئ من أين  Constructor الخاص MainViewModel استلم كائن او مثيل من نوع IDataProvider , أنا سوف أجيبك في الخطوة التالي :

* يتم تعبئة DataContext لل MainWindow بمحتويات MainViewModel وهذا حسب هيكلية نمط MVVM بأن كل View لهViewModel أنظر الشكل التالي الذي يوضح الفكرة ويجيبك على السؤال السابق  :

* الأن نقوم برسم الواجه الرسوميةGUI بواسطة لغة XAML والتي سوف تحوي على ListBox ندخل بداخلها Customers من ViewModel , وقد وضعنا Style خاص لأجل أضهار العناصر بشكل جميل أضافة الى تزويد حدث معين عند وصول الماوس لأي عنصر في ListBox يتغير شكله:

* وعند تنفيذ البرنامج سوف تنتج النافذة التالية :

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

الخاتمة 

تتعدد معماريات وتصاميم الأنظمة بالأعتماد على حجم وتعقيد المشروع المقترح , فنلاحظ الكثير من مصممين ومطوري الأنظمة يلجأوا الى عائلة المعماريات والتي تشمل معمارية الطبقات الثلاث التي ركزنا عليها في بحثنا مع وجود الكثير من المعماريات التي تعطي تصاميم ومعماريات جيدة ولجميع الأغراض ومثال أخر معمارية المستويات الثلاث 3tier او المتعددة Ntier .ومن خلال التطبيق أعلاه شاهدنا كيفية عزل الأكواد ضمن طبقات وكيفية الأنتقال مابين الطبقات مما يسهل الأختبار والوصول الى الخطأ.وأوضحنا جزء بسيط حول نمط MVVM .يمكنكم تحمل البرنامج من الرابط التالي : http://sdrv.ms/Zk4DqN      

Three Layer Architecture Part I معمارية الطبقات الثلاث

المقدمة

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

المحتوى

Layer Architecture :

وهي معمارية توجد ضمن التصنيف الهيكلي Structure , تعمل على تقليل الأقتران (loose coupling) مابين الطبقات من خلال عزل الأكواد في طبقات مستقلة مما يعطي أمكانية تغليف المعلومات الداخلية داخل كل طبقة وعدم كشفها الى الطبقات الأخرى.تعتبر هذه المعمارية من المعماريات المهمة وذلك لأنها تضمن سهولة الصيانة وألأختبار وأيجاد الأخطاء بسهولة   بسبب تحديد الأكواد ضمن طبقات محددة, وتوفر هذه المعمارية مبدأ الأستقلالية مابين الطبقات بحيث يمكنك ان تظيف مكون معين لأحد الطبقات من دون التأثير على الطبقات الأخرى.تحوي معمارية الطبقات على ثلاث طبقات أساسية أنظر الرسم التالي:

 

1 - طبقة العرض (PL):

وهي الطبقة التي تمثل الواجهة الرسومية GUI والتي يتعامل معها المستخدم بصورة مباشرة , وتكون هذه الطبقة على عدة أنواع حسب نوعية التطبيق فأذا كان التطبيق عبارة عن Web فتكون هذه الطبقة مبنية بتقنية Asp .Net او Silverlight اما أذا كان التطبيق مخصص لتطبيقات ويندوز فتكون هذه الطبقة مبنية بتقنية WPF او WinForm 

2 - طبقة التطبيق (BL):

وهي نواة التطبيق تحوي على جميع الأوامر والوظائف المنطقية التي تحدد سير العمليات المنطقية وتحدد تدفق العمل , تعتبر هذه الطبقة كطبقة وسيطة بين المستخدم الذي يتعامل مع طبقة العرض  وطبقةالوصول الى البيانات التي تتعامل مع قاعدة البيانات. طبقة BL تمنع طبقة العرض PL من الوصول المباشر الى طبقة الوصول الى البيانات DAL مما يزيد من أمنية التطبيق.يعتمد بناء هذه الطبقة على مدى تعقيد الوظائف المنطقية والتطبيقية للنظام ويمكنك أن تعتمد على تقنيات تساعدك في بناءهذه الطبقة ومنها تقنية تدفق العمل Work Flow .

3 - طبقة الوصول الى البيانات (DAL):

وهي الطبقة التي تحوي على عمليات التعامل مع البيانات من خلال الأرجاع والأرسال والتحديث والوصول الأمن الى مخزن البيانات , وهناك عدة تقنيات لبناء هذه الطبقة التي تساعدنا الى الوصول الى قواعدة البيانات ومن هذه التقنيات Entity framework , NHibernate وهي تقنيات تمثل جسر بين لغات الكائنية المنحى OOP وقواعد البيانات العلائقية RDB ,وتدخل هذه التقنيات ضمن منهجية Object Relation Mapping ORM.

ملاحظة 

يمكنك أن تقوم بأضافة طبقة أخرة تدعى Service Layer SL , وذلك عندما يتعامل تطبيقك مع بيانات وخدمات موجودة على الغيمة Cloud او تطبيقات أخرى , او عندما تزود خدمات الى تطبيقات أخرى.ويمكنك أن تستخدم تقنية Windows Communication Foundation WCF لبناء هذه الطبقة.

الفرق بين الطبقات layers والمستويات tiers :

layers :هي توصف المجموعة المنطقية التي تتألف من الوظائف والمكونات في التطبيق واقصد أنها تمثل الطبقات المنطقية مثل PL,BL,DAL  التي أوضحناها سابقا.

 tiers : توصف التوزيع الفيزيائي واقصد توزيع المكونات على السيرفرات والشبكات, فعندما نقوم ببناء الطبقات الثلاث Layers فأنك بالفعل تقوم بخلق ثلاث صيغ Dynamic-link library فكل طبقة سوف تحوي على dll خاص بها فأذا قمت بنشر ملفات dll على جهاز واحد فأنك عملت مستوى واحد 1tier لكن أذا نشرت كل dll على جهاز حاسوب فأنك حققت معمارية 3tier وهي أيضا معمارية مهمة تصنف ضمن تصنيف النشر والتوزيع Deployment ويمكنك أضافة الكثير من المستويات وأقصد السيرفرات . 

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

في المقالة القادمة سوف نركز على تطبيق معمارية الطبقات الثلاث .

MVVM مقدمة حول نمط

المقدمة

تزايد النمو للواجهات الرسومية GUI وظهور مبدأ separation of concerns والذي يركز على تقليل تعقيد الأكواد من خلال أستخدام الطبقات, أدى بضلاله الى تطوير الأنماط المتعلقة بطبقة العرض Presentation Patterns لتقليل التعقيد على المطور والوصول الى الأمثلية ومحصلة هذا التطور ظهور في عام 1979 نمط (Model-View-Controller (MVC والذي أعطى طرق جديدة للتعامل مع الواجهات الرسومية وترتيب ألأكواد ضمن طبقات منعزلة وتحقيق مبدأ SOC المذكور أعلاه وقد تنوع النمط MVC على مر السنين بحيث تولدت الكثير من الأنماط المشابه لعمله.وفي بداية التسعينات ظهر الكتاب الذي أعطى لنا حلول شائعة لمشاكل شائعة يعاني منها المطوريين بأستمرار وقد الفه الملوك الأربعة GOF تصميم الأنماط  .وفي عام 1994 قام Mike Potel من شركة IBM بأظهار النمط (Model-View-Presenter (MVP الذي تم تنفيذه مباشرة على تطبيقات ++Java,C.وبعد هذه الفترة وتحديدا في 2004 قام Martin Fowler بتحليل النمط MVP وطور بعض مكوناته واعطى تسمية جديدة (Presentation Model (PM واطلق نمطين اساسيين منه وهما (Supervising Controller and Passive View) وتميز النمطين بأعطاء تصور رائع حول منهجية الكائنية المنحى OOP وخاصية Binding وبعده مباشرة بعام واحد أطلق John Gossman اول شرارة لنمط (Model-View-ViewModel (MVVM وبعده بفترة قصيرة قام Josh Smith بوضع مقاله في MSDN تربط النمط MVVM مع تقنية WPF , واعطى توضيح رائع بأن نمط MVVM هو نمط يأخذ فكرته الأساسية من النمط PM لكن مع أضافة بعض التغيرات والصفات التي تلائم تقنية WPF/Silverlight. قامت شركة مايكروسوفت بأستخدام الأنماط  وتطويرها بما يتناسب مع تقنياتها فنلاحظ في تقنية Asp.Net تم التركيز على النمط MVC واما النمط PM نلاحظ حضوره في (Composite Application Blocks (CABالذي استخدم مع تقنية WinForms , واما النمط MVVM فقد استخدم لتقنية WPF/Silverlight/WPF8

المحتوى

سوف نركز في بحثنا حول نمط MVVM بحيث سوف  نتطرق اولا حول المكونات الرئيسية أنظر الشكل التالي :

1 . Model :

يمثل البيانات Data والأكواد المنطقية الخاصة بعمليات المشروع Business Logic ويمكننا أن نفصل BLogic في طبقة منعزلة تسمى Business Layer وبالطبع يعتمد على حجم وتعقيد العمليات المنطقية للمشروع , تحوي هذه الطبقة على Entities التي تقوم بخزن البيانات في داخلها ويتم ملأئها من خلال تعبئتها يدويا او عن طريق ربطها بقاعدة بيانات ويتم الربط عن طريق DAL او يمكن أن تعبأ بواسطة Service معين.

2 . ViewModel :

وهو يمثل المنطق الخاص بطبقة العرض PL بحيث يحوي على جميع الأكواد المنطقية التي تدعم الواجهات الرسومية ومهامها.يعتمد VM في عمله على خاصية Notification,Command,Binding الى أخره للتعامل مع طبقة View ,ويركز على أخبار View بكافة التغيرات ان حدثت والعكس صحيح.يستخدم VM عدة Interface لأتمام عمله فمثلا يستخدم INotifyPropertyChanged لأجل الأخبار في حالة اي تغيير يحدث , ICommand لأجل أثارة الحدث Event من دون استخدام Code behind مع مساعدة كلاس يدعى RelayCommand ,وأيضا يفضل أن يوضع في VM التحقق من صحة الأدخال Validation وذلك لأجل عزل جميع UI logic عن طبقة View.ويتميز VM بأنه يعطي الفرصة للمطور والمختبر بأن يقوموا بأختبار الكود مباشرة من خلاله ومن دون الحاجة الى بناء الواجه الرسومية المتمثلة View , والذي بدوره يعطي تدفق عمل متوازي للمطور والمصمم.

3. View :

وهي طبقة العرض UI والتي تعتمد على لغة XAML في بناء الواجهات الجميلة .نمط MVVM يركز على مبدأ وهو أن كل View يتبع ViewModel لأجل التبسيط وعمل هذه التبعية من خلال خاصية DataContex الموجودة في View بحيث يتم تعبئتها بوضع كل محتويات ال VM في داخلها مما يعطي قابلية ربط العناصر الموجودة في VM سواء كانت Property , Commands بالعناصر الموجودة في View سواء كانت ListBox,TextBlock.ومن محاسن نمط MVVM انه يعطي مفهوم Code behind clear ويعني بأنك لا تحتاج الى كتابةالأكواد #C في ملف Main بل هذه الأكواد سوف تذهب الى VM ويبقى في View فقط كود XAML .

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

* Button يسمى Show عند الضغط عليه مباشرة يظهر قائمة بالأسماء.

* ListBox تحوي أسماء ألموظفين .

الخطوات التالية يمكنك تتبعها لبناء التطبيق :

1. يتم خلق فايلين الأول ندعوه Model والثاني ViewNodel كما في الصورة التالية :

2. في داخل فايل Model يتم خلق class ندعوه DataService يحوي على على Properties وهي CustomerName,Specialty وايضا يتم بناء مجموعة من الأشخاص وذلك من خلال أستخدام ObservableCollection ويتم تعبئتها يدويا بالكائنات .

3. في داخل فايل ViewModel يتم خلق class ندعوه MainViewModel

ينفذ مباشرة INotifyPropertyChanged الذي يعتمد على event PropertyChanged الذي يقوم بأخبار اي تغيرات تطرأ على View ولهذا يجب ان يمرر اسم كلا من Property التي نريد أن نراقبها الى هذا event لعمل Notification , ونلاحظ من الكود أعلاه وجود العنصرين CustomerName,Specialty اضافة الى قائمة Cusomers التي يتم أرجاعها الى listBox في View عن طريق Binding.

ونلاحظ من الكود في الأسفل تنفيذ ShowCommand بحيث يكون من نوع ICommand ويتم بنائه بالأعتماد على كلاس يدعى RelayCommand الذي ينفذ العمليتان الرئيسيتان وهي Execute,CanExecute بحيث اذ ارجع CanExecute قيمة True يتم مباشرة تنفيذ Execute وتفعيل Button ,واما اذا كانت القيمة false يتم وضع الزر disable .ويمكنك الأستعانة بأدوات MVVMlight التي تعطي امكانية بعدم كتابة الكود الخاص ب RelayCommand او INotifyPropertyChanged ولكننا قمنا في تطبيقنا بكتابة الكود لتوضيح MVVM Pure بدون اي ادوات او framework أضافي.

4. يتم الدخول الى MainWindow لأجل كتابة كود XAML بحيث يتم أولا تعيين VM الى View من خلال خاصية DataContext وقد تم الوصول الى ملف ViewModel عن طريق أستخدام xmln ووضع مختصر vm للوصول اليه. الرسم التالي يوضح العمل :

نأتي الى خلق listBox ونعيين لها القائمة Customers الموجودة في VM هذه العملية تدعى Binding أنظر الرسم التالي الذي يوضح هذه الخاصية :

وبعد ذلك نقوم برسم Button نسميه Show ونعينه الى ShowCommand الموجود في VM

بعد تنفيذ البرنامج سوف نحصل على النافذة التالي :

وعند الضغط على الزر Show مباشرة يتم تفعيل event وعمل أخبار الى VM وتنفيذ ShowCommand الذي ينفذ العمليتان Execute,CanExecute وفي النهاية يتم أرجاع من Model القائمة وعبر خاصية Binding تحدث محتويات ListBox بالأسماء.أنظر النتيجة النهائية :

الخاتمة :

تساعدنا الأنماط الى حل الكثير من المشاكل التي تواجهنا في المشاريع , ويجب أن نعرف أن جميع الأنماط تظهر الى الوجود بالأعتماد على الأنماط السابقة وهذا ما شاهدناه عند قرائتنا لتاريخ الأنماط المتعلقة بطبقة العرض , بحيث نلاحظ أن الأب لهذه الأنماط هو نمط MVC بحيث كان ظهوره سبب بظهور الأنماط التي ساعدتنا في بناء واجهات رسومية مرتبة ومنفصلة وجميلة , وأخر هذه الأنماط النمط MVVM الذي يعتبر أحدث نمط من أنماط Presentation Patterns والذي تميز بكثير من المميزات ومنها أفضل طريقة لأجل databinding , قابلية الأختبار العالية, نظافة الكود الداخلي Code behind, تحقيق مبدأ Seperation of Concerns من خلال التقسيم  (View, ViewModel, Model).ويمكنك ان تستخدم MVVM نقي بدون اي اضافات او تستخدم MVVMframework والتي توجد على عدة انواع .

يمكنك تحميل التطبيق من خلال الرابط التالي :
http://sdrv.ms/YWoKv8