4. Uygulamanın Kullanımı

Şimdi uygulamayı IDE, STS (sunucu için) ve Webstorm (istemci için) dışında çalıştırmak istiyoruz.

4.1. Web hizmetinin bir Tomcat sunucusuna dağıtılması

2.11.9 numaralı paragrafta Tomcat için bir WAR arşivi oluşturmayı görmüştük. Bu işlemi burada tekrarlıyoruz. Öncelikle, mevcut yapıyı korumak amacıyla Eclipse projesini [rdvmedecins-webapi-v3]'ten [rdvmedecins-webapi-v4]'e kopyalıyoruz.

[pom.xml] dosyası şu şekilde değiştirilir:


    <modelVersion>4.0.0</modelVersion>
    <groupId>istia.st.spring4.mvc</groupId>
    <artifactId>rdvmedecins-webapi-v4</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>rdvmedecins-webapi-v3</name>
    <description>Gestion de RV Médecins</description>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.0.0.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>istia.st.spring4.rdvmedecins</groupId>
            <artifactId>rdvmedecins-metier-dao-v2</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
</dependencies>

Değişiklikler iki yerde yapılmalıdır:

5. satır: bir war arşivi (Web ARchive) oluşturulacağı belirtilmelidir;
23-27. satırlar: [spring-boot-starter-tomcat] artefaktına bir bağımlılık eklenmelidir. Bu artefakt, Tomcat'in tüm sınıflarını projenin bağımlılıkları arasına ekler;
26. satır: Bu artefakt [provided]'tir, yani ilgili arşivler oluşturulan WAR dosyasına yerleştirilmeyecektir. Aslında bu arşivler, uygulamanın çalışacağı Tomcat sunucusunda bulunacaktır;

Ayrıca web uygulamasını yapılandırmak gerekir. [web.xml] dosyası yoksa, bu işlem [SpringBootServletInitializer] sınıfından miras alan bir sınıfla yapılır:

[ApplicationInitializer] sınıfı şu şekildedir:


package rdvmedecins.web.config;

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.context.web.SpringBootServletInitializer;

public class ApplicationInitializer extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(AppConfig.class);
    }

}

6. satır: [ApplicationInitializer] sınıfı, [SpringBootServletInitializer] sınıfını genişletir;
8. satır: [configure] yöntemi yeniden tanımlanmıştır (7. satır);
9. satır: Projeyi yapılandıran [AppConfig] sınıfı sağlanır;

Bu işlem tamamlandıktan sonra, Maven projesini güncellemek gerekebilir (ben de bunu yapmak zorunda kaldım): [clic droit sur projet / Maven / Update project] veya [Alt-F5].

Projeyi çalıştırmak için şu adımları uygulayabilirsiniz:

[1]'te, projeyi Eclipse'te kayıtlı sunuculardan birinde çalıştırın;
[2]'te, varsayılan olarak mevcut olan [tc Server Developer] seçilir. Bu, Tomcat'in bir varyantıdır;

Aşağıdaki sonuç elde edilir:

Bu normaldir. Web hizmetinin yöntemleri arasında URL ve [/] bulunmadığını hatırlayalım. URL ve [/getAllMedecins] denendiğinde şu yanıt alınır:

Bu normaldir. Web hizmeti korumalıdır.

Şimdi Webstorm'da [rdvmedecins-angular-v2] istemcisini çalıştıralım:

[1]'te, yeni web hizmeti [http://localhost:8080/rdvmedecins-webapi-v4]'in URL değerini giriyoruz. Aşağıdaki sonucu elde ediyoruz:

Uygulamayı IDE STS dışında çalıştırmak için çeşitli çözümler mevcuttur. İşte bunlardan biri.

Tomcat [http://tomcat.apache.org/download-80.cgi] sürümünü (Temmuz 2014) indirin:

[1]'ten sıkıştırılmış bir sürümü seçip [2]'te açın. STS'e geri dönün:

[Servers] sekmesinde, [rdvmedecins-webapi-v4] uygulamasına sağ tıklayıp [Browse Deployment Location] seçeneğini seçin;
[4]'te: [rdvmedecins-webapi-v4] klasörünü kopyalayın;

[5]'te, [rdvmedecins-webapi-v4] klasörünü Tomcat'ın [webapps] klasörüne yapıştırın;
[6] klasörüne, [startup.bat] komut dosyasını çalıştırın (STS'e entegre edilmiş Tomcat sunucusunun kapatılmış olması gerekir). Tomcat günlüklerini görüntülemek için DOS penceresi açılır. Günlüklerde, [rdvmedecins-webapi-v4] uygulamasının başlatıldığı görülmelidir.

Bunu doğrulamak için, Webstorm'da Angular istemcisi [rdvmedecins-angular-v2]'i yeniden çalıştırın:

[1]'te, yeni web hizmeti [http://localhost:8080/rdvmedecins-webapi-v4]'in URL değerini girin. Aşağıdaki sonuç elde edilir:

4.2. Angular istemcisinin Tomcat sunucusuna dağıtımı

Web hizmeti Tomcat'e dağıtıldığına göre, şimdi de Angular istemcisini bir sunucuya dağıtacağız. Bu, web hizmetini halihazırda barındıran sunucu olabilir. Biz bu yolu izleyeceğiz.

Öncelikle, [rdvmedecins-angular-v2] istemcisini [rdvmedecins-angular-v3] olarak kopyalayacağız ve aşağıdaki değişiklikleri yapacağız:

[1]'e dönüştürdük; tüm içerik [app] klasörüne taşındı;
[1]'e, proje için gerekli olan çeşitli kütüphaneleri (CSS ve JS) içeren [bower-components] klasörü silinmiştir. Tüm bu öğeler [lib] ve [2] klasörlerine kopyalandı;
[1] klasöründe, [app.html] dosyası [index.html] olarak yeniden adlandırıldı;

[index.html] dosyası, kullanılan kaynakların yol değişikliklerini yansıtacak şekilde değiştirilmiştir:


<!DOCTYPE html>
<html ng-app="rdvmedecins">
<head>
  <title>RdvMedecins</title>
...
  <!-- CSS -->
  ...
  <link href="lib/bootstrap-theme.min.css" rel="stylesheet"/>
  <link href="lib/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<!-- [appCtrl] denetleyicisi, [app] şablonu -->
<body ng-controller="appCtrl">
<div class="container">
  ...
</div>
<!-- Bootstrap çekirdeği JavaScript ================================================== -->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-select.min.js"></script>
<script type="text/javascript" src="lib/footable.js"></script>
<!-- AngularJS -->
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="lib/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="lib/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-translate.min.js"></script>
<script type="text/javascript" src="lib/angular-base64.min.js"></script>
<!-- modüller -->
...
<!-- hizmetler -->
...
<!-- yönergeler -->
...
<!-- denetleyiciler -->
....
</body>
</html>

Ayrıca, kullanıcının URL adresini yazmasını önlemek amacıyla [loginCtrl] denetleyicisi, doğru sunucuya yönlendirecek şekilde değiştirilmiştir:


// kimlik bilgileri
app.serverUrl = "http://localhost:8080/rdvmedecins-webapi-v4";
app.username = "admin";
app.password = "admin";

Bu işlem tamamlandıktan sonra, [index.html] dosyasını çalıştıralım:

Ardından web hizmetine bağlanalım. Çalışması gerekir. Bunu doğruladıktan sonra Tomcat sunucusunu durduralım. STS'in yerleşik sunucusunu yeniden kullanacağız.

STS içinde, [rdvmedecins-angular-v3/app] klasörünün tüm içeriğini [rdvmedecins-webapi-v4] projesinin [webapp] klasörüne kopyalayalım (Navigator sekmesi) [1]:

Bunu yaptıktan sonra, [2]'i, STS'in VMware sunucusunu başlatıp, ardından URL'i ve [http://localhost:8080/rdvmedecins-webapi-v4/app/index.html]'i isteyelim:

[3]'te bir erişim hakkı sorunu var. Web hizmetini koruduğumuz için bu şaşırtıcı değil. [/app/index.html] dosyasına erişimin serbest olduğunu belirtmemiz gerekiyor. Eclipse'e geri dönelim:

Erişim haklarının [SecurityConfig] sınıfında tanımlandığını hatırlıyoruz. Bu sınıfı şu şekilde değiştirelim:


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // CSRF
        http.csrf().disable();
        // şifre, Authorization: Basic xxxx başlığıyla iletilir
        http.httpBasic();
        // HTTP OPTIONS yöntemi herkes için yetkilendirilmelidir
        http.authorizeRequests() //
                .antMatchers(HttpMethod.OPTIONS, "/", "/**").permitAll();
        // [app] klasörüne herkes erişebilir
        http.authorizeRequests() //
                .antMatchers(HttpMethod.GET, "/app", "/app/**").permitAll();
        // uygulamayı yalnızca ADMIN rolü kullanabilir
        http.authorizeRequests() //
                .antMatchers("/", "/**") // tüm URL
                .hasRole("ADMIN");
}

11-12. satırlar: Herkese [app] klasörünü ve içeriğini okuma izni veriyoruz. Bunu yapmak için önceki satırlardan yararlanıyoruz.

Şimdi, STS'teki Tomcat sunucusunu yeniden başlatıp URL ve [http://localhost:8080/rdvmedecins-webapi-v4/app/index.html] dosyalarını tekrar isteyelim:

Bu sefer başarılı oldu.

4.3. CORS başlıkları

Belki de CORS başlıklarını yönetmek için ne kadar uğraştığımızı hatırlıyorsunuzdur. Önceki örnekte:

web hizmeti URL [http://localhost:8080/rdvmedecins-webapi-v4] adresindedir;
HTML istemcisi ise URL ve [http://localhost:8080/rdvmedecins-webapi-v4/app] adreslerinde;

Dolayısıyla, HTML istemcisi ve web hizmeti aynı [http://localhost:8080] sunucusunda bulunuyor. Bu durumda CORS ile ilgili herhangi bir çakışma söz konusu değildir, çünkü bu tür çakışmalar yalnızca istemci ve sunucu aynı etki alanında olmadığında ortaya çıkar. Bunu doğrulayabilmemiz gerekir. STS'e geri dönelim:

CORS başlıklarının oluşturulup oluşturulmayacağı, [ApplicationModel] sınıfında tanımlanan bir boole değeri tarafından kontrol edilir:


    // yapılandırma verileri
    private boolean CORSneeded = true;

Yukarıdaki boole değerini false olarak ayarlıyoruz, web hizmetini yeniden başlatıyoruz ve URL [http://localhost:8080/rdvmedecins-webapi-v4/app/index.html]'i tekrar sorguluyoruz. Uygulamanın çalıştığını görüyoruz.

4.4. Angular istemcisinin bir Android tablete dağıtılması

[Phonegap] [http://phonegap.com/] aracı, bir mobil uygulama (Android, IoS, Windows 8, ...) için çalıştırılabilir bir dosya oluşturmaya olanak tanır. Bunu başarmanın çeşitli yolları vardır. Biz en basitini kullanıyoruz: Phonegap sitesinde bulunan çevrimiçi bir araç olan [http://build.phonegap.com/apps].

[1]'e girmeden önce bir hesap oluşturmanız gerekebilir;
[1]'te işe başlıyoruz;
[2]'te, yalnızca bir Phonegap uygulamasına izin veren ücretsiz bir plan seçin;

[3] adımında, [4] adlı sıkıştırılmış uygulamayı indirin (4.2. paragrafta oluşturulan [app] klasörü sıkıştırılmıştır);

[5] dosyasına dönüştürün, uygulamaya bir ad verin;
[6] adımında uygulama derlenir. Bu işlem 1 dakika sürebilir. Farklı mobil platformların simgeleri derleme işleminin tamamlandığını gösterene kadar bekleyin;

yalnızca Android [7] ve Windows [8] ikili dosyaları oluşturulmuştur;
Android ikili dosyasını indirmek için [7]'e tıklayın;

[9] dosyasına indirilen [apk] ikili dosyasını ekleyin;

Bir Android tablet için [GenyMotion] emülatörünü başlatın (bkz. paragraf 6.4):

Yukarıda, Android 16 sürümündeki API ile bir tablet emülatörü başlatılıyor. Emülatör başlatıldıktan sonra,

yan taraftaki kilidi (varsa) sürükleyip bırakarak kilidi açın;
fare ile indirdiğiniz [PGBuildApp-debug.apk] dosyasını sürükleyip emülatörün üzerine bırakın. Dosya bu şekilde kurulacak ve çalıştırılacaktır;

URL değerini [1] olarak değiştirmeniz gerekir. Bunun için bir komut penceresinde [ipconfig] komutunu (aşağıdaki 1. satır) yazın; bu komut, bilgisayarınızdaki çeşitli IP adreslerini gösterecektir:


C:\Users\Serge Tahé>ipconfig

Configuration IP de Windows


Carte réseau sans fil Connexion au réseau local* 15 :

   Statut du média. . . . . . . . . . . . : Média déconnecté
   Suffixe DNS propre à la connexion. . . :

Carte Ethernet Connexion au réseau local :

   Suffixe DNS propre à la connexion. . . : ad.univ-angers.fr
   Adresse IPv6 de liaison locale. . . . .: fe80::698b:455a:925:6b13%4
   Adresse IPv4. . . . . . . . . . . . . .: 172.19.81.34
   Masque de sous-réseau. . . . . . . . . : 255.255.0.0
   Passerelle par défaut. . . . . . . . . : 172.19.0.254

Carte réseau sans fil Wi-Fi :

   Statut du média. . . . . . . . . . . . : Média déconnecté
   Suffixe DNS propre à la connexion. . . :

...

Ya IP Wi-Fi adresini (6-9. satırlar) ya da IP yerel ağ adresini (11-17. satırlar) not edin. Ardından bu IP adresini web sunucusundaki URL bölümünde kullanın:

Bunu yaptıktan sonra, web hizmetine bağlanın:

Uygulamayı emülatörde test edin. Çalışması gerekir. Sunucu tarafında, CORS başlıklarının [ApplicationModel] sınıfında izin verilip verilmeyeceği belirlenebilir:


    // yapılandırma verileri
    private boolean CORSneeded = false;

Bu, Android uygulaması için önemli değildir. Uygulama tarayıcıda çalışmaz. Oysa CORS başlıklarının gerekliliği tarayıcıdan kaynaklanır, sunucudan değil.

4.5. Angular istemcisinin bir Android akıllı telefon emülatörüne dağıtılması

Aynı işlemi bir akıllı telefon emülatörü üzerinde tekrarlıyoruz. İstemcimizin küçük ekranlarda nasıl davrandığını kontrol etmek istiyoruz:

[1]'te bir akıllı telefon emülatörü başlatıyoruz;
[2] ve [3]'te, gezinme çubuğu bir menüye katlanmıştır;

[4]'te oturum açılır;
[5]'te, liste ve takvim yan yana değil, üst üste yerleştirilmiştir;

[6]'te, takvimi sorguluyoruz;
[7]'te ekran çok küçük olduğu için zaman aralıklarının bir kısmı gizlenmiş durumda. Bu işlemi [footable] kütüphanesi gerçekleştirmiştir;

[8]'te, önceki ile aynı görünüm, ancak bu sefer bir randevu var.

Sonuç olarak, uygulamamız akıllı telefona oldukça iyi uyum sağlıyor. Elbette daha iyi olabilirdi, ancak yine de kullanılabilir durumda.