1. Giriş

Belgenin PDF dosyası, |BURADA| adresinde mevcuttur.

Belgedeki örnekler |BURADA| adresinde mevcuttur.

Burada, bir istemci/sunucu örneği kullanarak iki çerçeveyi tanıtmayı amaçlıyoruz:

İstemci için kullanılan AngularJS. Basitlik açısından bundan sonra Angular olarak anılacaktır;
Sunucu tarafında Spring 4 kullanılmaktadır. Basitlik açısından bundan sonra Spring olarak anılacaktır;

Bu belgeyi anlamak için bazı ön koşullar gereklidir:

Java EE konusunda orta düzeyde bilgi;
veritabanına erişim için kullanılacak JPA (Java Persistence API) bilgisi;
bu çerçevenin felsefesini anlamak için Spring'in en az bir önceki sürümüne ilişkin bilgi;
Java projelerini yapılandırmak için Maven kullanımı;
bir web uygulamasında HTTP iletişimleri hakkında temel bilgi;
HTML dilinde yaygın olarak kullanılan etiketler;
Javascript diline ilişkin temel bilgi;

Gerekli diğer bilgiler, vaka çalışması ilerledikçe tanıtılacak ve açıklanacaktır.

Bu belge bir ders değildir ve birçok açıdan eksiktir. Her iki çerçeveyi daha derinlemesine incelemek için aşağıdaki kaynaklardan yararlanılabilir:

[ref1]: Adam Freeman tarafından yazılan ve Apress yayınevi tarafından basılan "Pro AngularJS" kitabı. Bu, mükemmel bir kitaptır. Bu kitaptaki örneklerin kaynak kodları, URL [http://www.apress.com/downloadable/download/sample/sample_id/1527/] adresinden ücretsiz olarak edinilebilir;
[ref2]: Angular'ın resmi belgeleri JS [https://docs.angularjs.org/guide]
[ref3]: O'Reilly yayınevinden çıkan "Spring Data" kitabı ([http://shop.oreilly.com/product/0636920024767.do]), ilişkisel olsun ya da olmasın (NoSQL) verilere erişim için [Spring Data] çerçevesinin kullanımını anlatır;
[ref4]: Apress yayınevinden çıkan "Pro Spring 3" kitabı. Bu, Spring 4'ün önceki sürümüdür ancak temel kavramlar burada da yer almaktadır;
[ref5]: Spring 4 referans belgeleri [http://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/spring-framework-reference.pdf].

Bu belgenin hazırlanmasında yukarıda belirtilen kaynakların yanı sıra, sayısız hata ayıklama seansları için vazgeçilmez olan [http://stackoverflow.com/] de kullanılmıştır.

1.1. Uygulamanın mimarisi

İncelenen uygulama aşağıdaki mimariye sahip olacaktır:

[1]'te bir web sunucusu, bir tarayıcıya statik sayfalar sunar. Bu sayfalar, AngularJS modeline dayalı bir uygulamayı (MVC – Model – Görünüm – Denetleyici) içerir. Buradaki model, hem görünümlerin hem de [Services] katmanı ile temsil edilen alanın modelidir;
Kullanıcı, tarayıcıda kendisine sunulan görünümlerle etkileşime girecektir. Yaptığı işlemler bazen Spring 4 [2] sunucusuna sorgu gönderilmesini gerektirecektir. Sunucu, bu isteği işleyecek ve JSON (JavaScript Nesne Notasyonu) [3] yanıtını döndürecektir. Bu yanıt, kullanıcıya sunulan görünümü güncellemek için kullanılacaktır.

1.2. Kullanılan araçlar

Bu belgede kullanılan geliştirme araçları şunlardır:

Spring sunucusu için Spring Tool Suite: ücretsiz olarak indirilebilir;
Angular istemcisi için Webstorm: bir aylık deneme sürümü ücretsiz olarak indirilebilir;
MySQL 5 veritabanı yönetimi için Wampserver: ücretsiz olarak indirilebilir;

Bu araçların ve diğerlerinin kurulumu 6. paragrafta açıklanmaktadır.

1.3. Uygulamanın özellikleri

Örnek kod, indirilebilir bir dosya olarak |ICI| altında mevcuttur.

sunucu, [rdvmedecins-metier-dao-v2] ve [rdvmedecins-webapi-v3] klasörlerinde yer almaktadır;
istemci, [rdvmedecins-angular-v2] klasöründe yer almaktadır;
MySQL5 veritabanını oluşturan SQL komut dosyası, [database] klasöründedir;

1.3.1. Veritabanının Oluşturulması

Uygulamayı test etmek için önce SQL ve [dbrdvmedecins.sql] komut dosyalarını kullanarak veritabanını oluşturuyoruz. [PhpMyAdmin] ve WampServer araçlarını kullanıyoruz:

[1]'te, WampServer'ten [phpMyAdmin] aracını seçiyoruz;
[2]'te, [Importer] seçeneği seçilir;

[3]'te, [database/dbrdvmedecins.sql] dosyasını seçin;
[4]'te, dosyayı çalıştırın;
[5]'te, veritabanı oluşturulur.

1.3.2. Web sunucusunun kurulumu / JSON

Spring Tool Suite (STS) ile Spring 4 sunucusunun iki Maven projesini içe aktarıyoruz:

[1] ve [2] dosyalarında Maven projelerini içe aktarıyoruz;
[3]'te, içe aktarılacak iki projenin üst klasörünü belirleriz;

[3] dosyasında, içe aktarılan projeler. Projelerde hatalar olabilir. Her birinin >=1.7 sürümünde bir derleyici kullanması gerekir:

Bu nedenle JVM >=1.7 sürümü gereklidir:

JVM ile ilgili hatalar ortadan kalktığında, [rdvmedecins-webapi-v3] projesini çalıştırabilirsiniz:

[4], [5] ve [6]'te [rdvmedecins-webapi-v3] projesini bir Spring Boot uygulaması olarak çalıştırıyoruz;

Bunun üzerine STS konsolunda aşağıdaki günlük kayıtlarını alıyoruz:

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: 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. satırlar: Uygulama bir Tomcat sunucusunda başlatıldı.

1.3.3. Angular istemcisinin uygulanması

[rdvmedecins-angular-v2] klasörünü WebStorm ile açıyoruz:

[1]'te, [Open Directory] seçeneğini seçiyoruz;
[2]'te, [rdvmedecins-angular-v2] dosyasını seçiyoruz;

[3]'te, klasör ağacı;
[4]'te, uygulamanın ana sayfası olan [app.html] seçilir;
[5]'te, bu sayfa güncel bir tarayıcıda açılır;

[6]'te, uygulamanın giriş sayfası. Bu, doktorlar için randevu alma uygulamasıdır. Bu uygulama, "JSF2, Primefaces ve Primefaces mobile çerçevelerine giriş" başlıklı belgede daha önce ele alınmıştır;
[7]'te, [debug] modunda olup olmayacağını belirleyen bir onay kutusu bulunmaktadır. Bu mod, geçerli görünümün şablonunu görüntüleyen [8] çerçevesinin varlığıyla karakterize edilir;
[9]'te, milisaniye cinsinden yapay bir bekleme süresi. Varsayılan değeri 0'dır (bekleme yok). N bu bekleme süresinin değeri ise, kullanıcının her eylemi N milisaniyelik bir bekleme süresinden sonra yürütülür. Bu, uygulama tarafından uygulanan bekleme yönetimini görmeyi sağlar;
[10]'te, Spring 4 sunucusunun URL'i yer alır. Yukarıdakileri takip edersek, bu [http://localhost:8080]'tir;
[11] ve [12]'te ise uygulamayı kullanmak isteyen kişinin kullanıcı adı ve şifresi yer almaktadır. İki kullanıcı vardır: bir rolü (ADMIN) olan admin/admin (kullanıcı adı/şifre) ve bir rolü (USER). Yalnızca ADMIN rolüne sahip kullanıcılar uygulamayı kullanma hakkına sahiptir. USER rolü, bu kullanım durumunda sunucunun ne yanıt verdiğini göstermek amacıyla eklenmiştir;
[13], sunucuya bağlanmayı sağlayan düğme;
[14]'te ise uygulamanın dili gösterilmektedir. İki dil seçeneği vardır: varsayılan olarak Fransızca ve İngilizce.

[1]'te, bağlantı kurulur;

Giriş yaptıktan sonra, randevu almak istediğiniz doktoru [2] ve randevu gününü [3] seçebilirsiniz;
seçilen doktorun seçilen gün için randevu takvimini görmek için [4] komutunu girin;

doktorun randevu takvimini aldıktan sonra, bir randevu aralığı rezerve edebilirsiniz [5];

[6] komutuyla randevuya gidecek hasta seçilir ve bu seçim [7] komutuyla onaylanır;

Randevu onaylandıktan sonra, otomatik olarak takvime geri dönülür ve yeni randevu artık takvime kaydedilmiştir. Bu randevu daha sonra [7] ile silinebilir.

Temel işlevler açıklanmıştır. Bunlar basittir. Açıklanmayanlar ise önceki bir görünüme dönmek için kullanılan gezinme işlevleridir. Son olarak dil yönetimine geçelim:

[1]'te Fransızca'dan İngilizce'ye geçilir;

'den [2]'e, görünüm İngilizceye geçer, takvim de dahil;