1. مقدمه

نسخه PDF سند در |ICI| موجود است.

نمونه‌های موجود در سند در |ICI| در دسترس هستند.

در اینجا، هدف ما معرفی دو فریم‌ورک با استفاده از یک مثال کلاینت/سرور است:

• AngularJS برای کلاینت استفاده می‌شود. برای سادگی، از این پس با نام Angular به آن اشاره خواهد شد؛
• Spring 4 برای سرور استفاده می‌شود. به منظور سادگی، از این پس با نام Spring نامیده می‌شود؛

درک این سند نیازمند پیش‌نیازهای خاصی است:

• سطح متوسط در 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» منتشر شده توسط O'Reilly [http://shop.oreilly.com/product/0636920024767.do]، که نحوه استفاده از فریم‌ورک [Spring Data] برای دسترسی به داده‌ها، چه از پایگاه‌های داده رابطه‌ای و چه غیر آن (NoSQL)، را توضیح می‌دهد؛
• [ref4]: کتاب «Pro Spring 3» منتشر شده توسط 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 نشانهٔ شیء) [3] را بازمی‌گرداند. این پاسخ برای به‌روزرسانی نمای نمایش‌داده‌شده به کاربر استفاده می‌شود.

1.2. ابزارهای مورد استفاده

در این سند، ابزارهای توسعه زیر استفاده شده‌اند:

• Spring Tool Suite برای سرور Spring: به‌صورت دانلود رایگان در دسترس است؛
• WebStorm برای کلاینت Angular: یک نسخه آزمایشی یک‌ماهه به‌صورت رایگان برای دانلود در دسترس است؛
• Wampserver برای مدیریت پایگاه داده MySQL 5: قابل دانلود رایگان؛

نصب این ابزارها و سایر ابزارها در بخش ۶ توضیح داده شده است.

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 مورد نیاز است:

هنگامی که دیگر خطایی در 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)

• خطوط ۱۳–۱۴: برنامه روی سرور 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]، نما به انگلیسی، از جمله تقویم، تغییر می‌کند؛