1. مقدمة

ملف PDF الخاص بالوثيقة متاح |HERE|.

الأمثلة الواردة في المستند متاحة |HERE|.

نقترح هنا تقديم إطارين للعمل باستخدام مثال للعميل/الخادم:

• AngularJS المستخدم للعميل. للتبسيط، سيُشار إليه فيما بعد باسم Angular؛
• Spring 4 المستخدم للخادم. وللتبسيط، سيُشار إليه فيما بعد باسم Spring؛

يتطلب فهم هذا المستند بعض المتطلبات الأساسية:

• مستوى متوسط في لغة Java EE؛
• معرفة بـ JPA (Java Persistence API) الذي سيُستخدم للوصول إلى قاعدة البيانات؛
• معرفة إصدار سابق واحد على الأقل من Spring لفهم فلسفة هذا الإطار؛
• استخدام Maven لتكوين مشاريع Java؛
• معرفة أساسية بالتبادلات HTTP في تطبيق ويب؛
• العلامات الشائعة في لغة HTML؛
• معرفة أساسية بلغة جافا سكريبت؛

سيتم تقديم وشرح المعارف الأخرى اللازمة تدريجيًا خلال دراسة الحالة.

هذا المستند ليس دورة تدريبية وهو غير مكتمل من نواحٍ عديدة. للتعمق في هذين الإطارين، يمكن استخدام المراجع التالية:

• [ref1]: كتاب «Pro AngularJS» الذي ألفه آدم فريمان ونشرته دار Apress. إنه كتاب ممتاز. تتوفر أكواد المصدر الخاصة بالأمثلة الواردة في هذا الكتاب مجانًا على URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/]؛
• [ref2]: الوثائق الرسمية لـ Angular JS [https://docs.angularjs.org/guide]
• [ref3]: كتاب «Spring Data» الصادر عن دار أورايلي [http://shop.oreilly.com/product/0636920024767.do] الذي يشرح استخدام إطار العمل [Spring Data] للوصول إلى البيانات سواء كانت قواعد بيانات علائقية أم لا (NoSQL)؛
• [ref4]: كتاب "Pro Spring3" الصادر عن دار النشر Apress. هذه هي النسخة السابقة من Spring 4، لكن المفاهيم الرئيسية موجودة بالفعل؛
• [ref5]: الوثائق المرجعية لـ Spring 4 [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

المصادر التي استند إليها هذا المستند هي تلك المذكورة أعلاه بالإضافة إلى [http://stackoverflow.com/] الذي لا غنى عنه في جلسات التصحيح العديدة.

1.1. بنية التطبيق

ستتخذ التطبيق قيد الدراسة البنية التالية:

• في [1]، يقوم خادم ويب بتقديم صفحات ثابتة إلى متصفح. تحتوي هذه الصفحات على تطبيق AngularJS مبني على نموذج MVC (النموذج – العرض – وحدة التحكم). النموذج هنا هو في الوقت نفسه نموذج العروض ونموذج المجال الذي يمثله هنا الطبقة [Services]؛
• سيتفاعل المستخدم مع العروض التي تظهر له في المتصفح. وقد تتطلب إجراءاته في بعض الأحيان إرسال استعلام إلى خادم Spring 4 [2]. وسيقوم الخادم بمعالجة الطلب وإرجاع استجابة JSON (JavaScript Object Notation) [3]. وستُستخدم هذه الاستجابة لتحديث العرض المقدم للمستخدم.

1.2. الأدوات المستخدمة

في هذا المستند، الأدوات المستخدمة في التطوير هي التالية:

• Spring Tool Suite لخادم Spring: يمكن تنزيله مجانًا؛
• Webstorm لعميل Angular: يمكن تنزيل نسخة تجريبية لمدة شهر مجانًا؛
• Wampserver لإدارة قاعدة البيانات MySQL 5: يمكن تنزيله مجانًا؛

يتم وصف تثبيت هذه الأدوات وغيرها في الفقرة 6.

1.3. ميزات التطبيق

كود المثال متاح |ICI| في شكل ملف zip قابل للتنزيل.

• يوجد الخادم في المجلدين [rdvmedecins-metier-dao-v2] و [rdvmedecins-webapi-v3]؛
• العميل موجود في المجلد [rdvmedecins-angular-v2]؛
• يوجد البرنامج النصي SQL الخاص بإنشاء قاعدة البيانات MySQL5 في المجلد [database]؛

1.3.1. إنشاء قاعدة البيانات

لاختبار التطبيق، نقوم أولاً بإنشاء قاعدة البيانات باستخدام البرنامج النصي SQL [dbrdvmedecins.sql]. نستخدم أداة [PhpMyAdmin] من WampServer:

• في [1]، نختار الأداة [phpMyAdmin] من WampServer؛
• في [2]، نختار الخيار [Importer]؛

• في [3]، نختار الملف [database/dbrdvmedecins.sql]؛
• في [4]، نقوم بتنفيذه؛
• في [5]، يتم إنشاء قاعدة البيانات.

1.3.2. تشغيل خادم الويب / JSON

باستخدام Spring Tool Suite (STS)، نستورد مشروعي Maven الخاصين بخادم Spring 4:

• في [1] و [2]، نقوم باستيراد مشاريع Maven؛
• في [3]، نحدد المجلد الأصلي للمشروعين المراد استيرادهما؛

• في [3]، المشاريع المستوردة. قد تحتوي المشاريع على أخطاء. يجب أن يستخدم كل منها مُجمِّعًا >=1.7:

لذلك يجب أن يكون JVM >=1.7:

عندما تختفي أخطاء JVM، يمكن تنفيذ المشروع [rdvmedecins-webapi-v3]:

• في [4] و [5] و [6]، نقوم بتنفيذ المشروع [rdvmedecins-webapi-v3] كتطبيق Spring Boot؛

ونحصل عندئذٍ على السجلات التالية في وحدة التحكم الخاصة بـ STS:

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.0.0.RELEASE)

2014-06-05 12:22:34.049  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot                : Starting Boot on Gportpers3 with PID 9296 (D:\data\istia-1314\polys\istia\angularjs-spring4\rdvmedecins-webapi\target\classes started by ST)
2014-06-05 12:22:34.122  INFO 9296 --- [           main] ationConfigEmbeddedWebApplicationContext : Refreshing org.springframework.boot.context.embedded.AnnotationConfigEmbeddedWebApplicationContext@4b4bee22: startup date [Thu Jun 05 12:22:34 CEST 2014]; root of context hierarchy
2014-06-05 12:22:35.083  INFO 9296 --- [           main] o.s.b.f.s.DefaultListableBeanFactory     : Overriding bean definition for bean 'org.springframework.boot.autoconfigure.AutoConfigurationPackages': replacing [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null] with [Generic bean: class [org.springframework.boot.autoconfigure.AutoConfigurationPackages$BasePackages]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null]
...
 s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080/http
2014-06-05 12:22:41.630  INFO 9296 --- [           main] rdvmedecins.web.boot.Boot : Started Boot in 8.0 seconds (JVM running for 8.944)

• السطران 13-14: تم تشغيل التطبيق على خادم Tomcat.

1.3.3. تنفيذ عميل Angular

نفتح المجلد [rdvmedecins-angular-v2] مع WebStorm:

• في [1]، نختار الخيار [Open Directory]؛
• في [2]، نختار الملف [rdvmedecins-angular-v2]؛

• في [3]، شجرة المجلد؛
• في [4]، نختار الصفحة الرئيسية [app.html] للتطبيق؛
• في [5]، يتم فتحها في متصفح حديث؛

• في [6]، صفحة الدخول إلى التطبيق. وهو تطبيق لحجز المواعيد الطبية. وقد تمت مناقشة هذا التطبيق سابقًا في الوثيقة «مقدمة إلى أطر العمل JSF2 وPrimefaces وPrimefaces mobile»؛
• في [7]، مربع اختيار يتيح التبديل بين وضع [debug] أو عدمه. ويتميز هذا الوضع بوجود الإطار [8] الذي يعرض نموذج العرض الحالي؛
• في [9]، مدة انتظار مصطنعة بالميلي ثانية. قيمتها الافتراضية هي 0 (لا انتظار). إذا كانت N هي قيمة مدة الانتظار هذه، فسيتم تنفيذ أي إجراء يقوم به المستخدم بعد فترة انتظار مدتها N ميلي ثانية. وهذا يسمح بمراقبة إدارة الانتظار التي ينفذها التطبيق؛
• في [10]، URL لخادم Spring 4. إذا اتبعنا ما سبق، فسيكون [http://localhost:8080]؛
• في [11] و [12]، يمثلان اسم المستخدم وكلمة المرور لمن يرغب في استخدام التطبيق. يوجد مستخدمان: admin/admin (اسم المستخدم/كلمة المرور) مع دور (ADMIN) و user/user مع دور (USER). الدور ADMIN هو الوحيد الذي يمتلك حق استخدام التطبيق. أما الدور USER فهو موجود فقط لإظهار الرد الذي يقدمه الخادم في حالة الاستخدام هذه؛
• في [13]، الزر الذي يتيح الاتصال بالخادم؛
• في [14]، لغة التطبيق. هناك لغتان: الفرنسية كإعداد افتراضي والإنجليزية.

• في [1]، يتم الاتصال؛

• بمجرد تسجيل الدخول، يمكن اختيار الطبيب الذي ترغب في حجز موعد معه [2] وتحديد يوم الموعد [3]؛
• نطلب في [4] الاطلاع على جدول مواعيد الطبيب المختار لليوم المحدد؛

• بمجرد الحصول على جدول مواعيد الطبيب، يمكن حجز موعد [5]؛

• في [6]، يتم اختيار المريض للموعد وتأكيد هذا الاختيار في [7]؛

بمجرد تأكيد الموعد، يتم إرجاعنا تلقائيًا إلى التقويم حيث يتم الآن تسجيل الموعد الجديد. ويمكن حذف هذا الموعد لاحقًا [7].

تم وصف الوظائف الرئيسية. وهي بسيطة. أما الوظائف التي لم يتم وصفها فهي وظائف التنقل للعودة إلى عرض سابق. لنختتم بإدارة اللغة:

• في [1]، ننتقل من الفرنسية إلى الإنجليزية؛

• إلى [2]، تتحول الواجهة إلى اللغة الإنجليزية، بما في ذلك التقويم؛