Skip to content

4. Gebruik van de applicatie

We willen de applicatie nu buiten de IDE, STS (voor de server) en Webstorm (voor de client) in gebruik nemen.

4.1. De webservice op een Tomcat-server implementeren

In paragraaf 2.11.9 hebben we gezien hoe we een WAR-archief voor Tomcat kunnen maken. We herhalen deze handeling hier. Om de bestaande structuur te behouden, dupliceren we eerst het Eclipse-project [rdvmedecins-webapi-v3] naar [rdvmedecins-webapi-v4].

  

Het bestand [pom.xml] wordt als volgt gewijzigd:


    <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 wijzigingen moeten op twee plaatsen worden aangebracht:

  • regel 5: er moet worden aangegeven dat er een WAR-archief (Web ARchive) wordt gegenereerd;
  • regels 23-27: er moet een afhankelijkheid worden toegevoegd voor het artefact [spring-boot-starter-tomcat]. Dit artefact voegt alle Tomcat-klassen toe aan de afhankelijkheden van het project;
  • regel 26: dit artefact is [provided], wat betekent dat de bijbehorende archieven niet in de gegenereerde WAR worden opgenomen. Deze archieven zijn namelijk te vinden op de Tomcat-server waarop de applicatie zal draaien;

Bovendien moet de webapplicatie worden geconfigureerd. Bij gebrek aan het bestand [web.xml] gebeurt dit met een klasse die afstamt van [SpringBootServletInitializer]:

  

De klasse [ApplicationInitializer] ziet er als volgt uit:


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);
    }

}
  • regel 6: de klasse [ApplicationInitializer] is een uitbreiding van de klasse [SpringBootServletInitializer];
  • regel 8: de methode [configure] wordt opnieuw gedefinieerd (regel 7);
  • regel 9: de klasse [AppConfig] wordt opgegeven, die het project configureert;

Als dat gedaan is, kan het nodig zijn om het Maven-project bij te werken (ik moest dat doen): [clic droit sur projet / Maven / Update project] of [Alt-F5].

Om het project uit te voeren, kun je als volgt te werk gaan:

  • in [1] voer je het project uit op een van de servers die zijn geregistreerd in IDE Eclipse;
  • in [2] kiest men [tc Server Developer], dat standaard aanwezig is. Dit is een variant van Tomcat;

Het resultaat is als volgt:

 

Dit is normaal. Bedenk dat de webservice URL en [/] niet in zijn methoden heeft. Wanneer we URL en [/getAllMedecins] proberen, krijgen we het volgende antwoord:

 

Dat is normaal. De webservice is beveiligd.

Laten we nu de client [rdvmedecins-angular-v2] in Webstorm starten:

In [1] voeren we de URL van de nieuwe webservice [http://localhost:8080/rdvmedecins-webapi-v4] in. We krijgen het volgende resultaat:

Image

Om de applicatie buiten de IDE STS uit te voeren, zijn er verschillende oplossingen. Hier is er één.

Download een versie van Tomcat [http://tomcat.apache.org/download-80.cgi] (juli 2014):

Kies in [1] een gezipte versie en pak deze uit in [2]. Ga terug naar STS:

  • in het tabblad [Servers] klik je met de rechtermuisknop op de toepassing [rdvmedecins-webapi-v4] en selecteer je de optie [Browse Deployment Location];
  • in [4]: kopieer de map [rdvmedecins-webapi-v4];
  • in [5]: plak de map [rdvmedecins-webapi-v4] in de map [webapps] van Tomcat;
  • in [6] voer je het commandobestand [startup.bat] uit (de in STS geïntegreerde Tomcat-server moet hiervoor zijn gestopt). Er wordt een venster DOS geopend om de logbestanden van Tomcat weer te geven. Hieruit moet blijken dat de applicatie [rdvmedecins-webapi-v4] is gestart.

Om dit te controleren, voert u de Angular-client [rdvmedecins-angular-v2] opnieuw uit in Webstorm:

In [1] voer je de URL van de nieuwe webservice [http://localhost:8080/rdvmedecins-webapi-v4] in. Je krijgt het volgende resultaat:

Image

4.2. Implementatie van de Angular-client op de Tomcat-server

Nu de webservice op Tomcat is geïmplementeerd, gaan we de Angular-client ook op een server implementeren. Dit kan heel goed dezelfde server zijn waarop de webservice al draait. We kiezen voor deze aanpak.

Allereerst dupliceren we de client [rdvmedecins-angular-v2] naar [rdvmedecins-angular-v3] en brengen we de volgende wijzigingen aan:

  • naar [1]: alles is verplaatst naar de map [app] ;
  • in [1] is de map [bower-components] verwijderd, die de diverse bibliotheken CSS en JS bevatte die nodig waren voor het project. Al deze elementen zijn gekopieerd naar de map [lib] [2];
  • in [1] is het bestand [app.html] hernoemd naar [index.html];

Het bestand [index.html] is aangepast om rekening te houden met de gewijzigde paden van de gebruikte bronnen:


<!DOCTYPE html>
<html ng-app="rdvmedecins">
<head>
  <title>RdvMedecins</title>
...
  <!-- de CSS -->
  ...
  <link href="lib/bootstrap-theme.min.css" rel="stylesheet"/>
  <link href="lib/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<!-- controller [appCtrl], sjabloon [app] -->
<body ng-controller="appCtrl">
<div class="container">
  ...
</div>
<!-- Bootstrap-kern 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>
<!-- modules -->
...
<!-- services -->
...
<!-- richtlijnen -->
...
<!-- controllers -->
....
</body>
</html>

Bovendien is de controller [loginCtrl] aangepast om naar de juiste server te verwijzen, zodat de gebruiker zijn URL niet hoeft in te voeren:


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

Nu dit is gebeurd, voeren we het bestand [index.html] uit:

Vervolgens maken we verbinding met de webservice. Dit zou moeten werken. Nadat we dit hebben gecontroleerd, stoppen we de Tomcat-server. We gaan de ingebouwde server van STS hergebruiken.

Kopieer in STS de volledige inhoud van de map [rdvmedecins-angular-v3/app] naar de map [webapp] van het project [rdvmedecins-webapi-v4] (tabblad Navigator) [1]:

Zodra dit is gebeurd, starten we [2], de server VMware van STS, en vragen we vervolgens de URL [http://localhost:8080/rdvmedecins-webapi-v4/app/index.html] op:

Er is een probleem met de rechten in [3]. Dat is niet verwonderlijk, aangezien we de webservice hebben beveiligd. We moeten aangeven dat het bestand [/app/index.html] vrij toegankelijk is. Laten we teruggaan naar Eclipse:

  

We herinneren ons dat de toegangsrechten zijn gedefinieerd in de klasse [SecurityConfig]. Laten we deze als volgt aanpassen:


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // CSRF
        http.csrf().disable();
        // het wachtwoord wordt doorgegeven via de header Authorization: Basic xxxx
        http.httpBasic();
        // de methode HTTP OPTIONS moet voor iedereen worden toegestaan
        http.authorizeRequests() //
                .antMatchers(HttpMethod.OPTIONS, "/", "/**").permitAll();
        // de map [app] is voor iedereen toegankelijk
        http.authorizeRequests() //
                .antMatchers(HttpMethod.GET, "/app", "/app/**").permitAll();
        // alleen de rol ADMIN mag de applicatie gebruiken
        http.authorizeRequests() //
                .antMatchers("/", "/**") // alle URL
                .hasRole("ADMIN");
}
  • regels 11-12: we geven iedereen toestemming om de map [app] en de inhoud ervan te lezen. Hiervoor baseren we ons op de voorgaande regels.

Laten we nu de Tomcat-server van STS opnieuw opstarten en vervolgens opnieuw de URL [http://localhost:8080/rdvmedecins-webapi-v4/app/index.html] opvragen:

Image

Deze keer is het gelukt.

4.3. De headers CORS

Misschien herinner je je nog dat we flink hebben moeten worstelen met de headers CORS. In het vorige voorbeeld:

  • bevindt de webservice zich op URL [http://localhost:8080/rdvmedecins-webapi-v4];
  • de client HTML bevindt zich op URL [http://localhost:8080/rdvmedecins-webapi-v4/app];

De client HTML en de webservice bevinden zich dus op dezelfde server [http://localhost:8080]. Er zijn dan ook geen conflicten CORS, omdat deze alleen optreden wanneer de client en de server zich niet in hetzelfde domein bevinden. Dit zou moeten kunnen worden gecontroleerd. We gaan terug naar STS:

  

Of de headers CORS al dan niet worden gegenereerd, wordt bepaald door een booleaanse waarde die is gedefinieerd in de klasse [ApplicationModel]:


    // configuratiegegevens
    private boolean CORSneeded = true;

We zetten de bovenstaande booleaanse waarde op false, starten de webservice opnieuw op en vragen de URL [http://localhost:8080/rdvmedecins-webapi-v4/app/index.html] opnieuw op. We zien dat de applicatie werkt.

4.4. Implementatie van de Angular-client op een Android-tablet

Met de tool [Phonegap] [http://phonegap.com/] kun je een uitvoerbaar bestand voor mobiele apparaten (Android, IoS, Windows 8, ...) te genereren op basis van een HTML / JS / CSS-applicatie. Er zijn verschillende manieren om dit te bereiken. Wij gebruiken de eenvoudigste: een online tool op de website van Phonegap [http://build.phonegap.com/apps].

  • Voordat u [1] gebruikt, moet u mogelijk een account aanmaken;
  • in [1] gaan we aan de slag;
  • in [2] kies je een gratis abonnement waarmee je slechts één Phonegap-app mag maken;
  • in [3] download je de gezipte app [4] (de map [app] die in paragraaf 4.2 is aangemaakt, is gezipt);
  • naar [5], geef de applicatie een naam;
  • in [6] wordt de applicatie gebouwd. Dit kan 1 minuut duren. Wacht tot de pictogrammen van de verschillende mobiele platforms aangeven dat het bouwen is voltooid;
  • alleen de Android-binaire bestanden [7] en de Windows-binaire bestanden [8] zijn gegenereerd;
  • klik op [7] om het Android-binaire bestand te downloaden;
  • in [9] het gedownloade binaire bestand [apk];

Start een emulator [GenyMotion] voor een Android-tablet (zie paragraaf 6.4):

 

Hierboven wordt een tabletemulator gestart met Android-versie API 16. Zodra de emulator is gestart,

  • ontgrendel je deze door het grendelje (indien aanwezig) aan de zijkant naar de zijkant te schuiven en vervolgens los te laten;
  • sleep met de muis het gedownloade bestand [PGBuildApp-debug.apk] naar de emulator. Het wordt dan geïnstalleerd en uitgevoerd;

Je moet URL veranderen in [1]. Typ hiervoor in een opdrachtvenster de opdracht [ipconfig] (regel 1 hieronder) in, waardoor de verschillende IP-adressen van uw computer worden weergegeven:


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. . . :

...

Noteer ofwel het wifi-adres IP (regels 6-9), ofwel het adres IP op het lokale netwerk (regels 11-17). Gebruik vervolgens dit adres IP in de URL van de webserver:

 

Zodra dit is gebeurd, maak je verbinding met de webservice:

Test de applicatie op de emulator. Deze zou nu moeten werken. Aan de serverzijde kunt u al dan niet de headers CORS toestaan in de klasse [ApplicationModel]: 


    // configuratiegegevens
    private boolean CORSneeded = false;

Dit maakt voor de Android-app niet uit. Deze draait immers niet in een browser. De vereiste voor de CORS-headers komt namelijk van de browser en niet van de server.

4.5. Implementatie van de Angular-client op de emulator van een Android-smartphone

We herhalen de vorige stap met een smartphone-emulator. We willen controleren hoe onze client zich gedraagt op kleine schermen:

  • in [1] starten we een smartphone-emulator;
  • in [2] en [3] is de navigatiebalk ingeklapt in een menu;
  • in [4] logt men in;
  • in [5] staan de lijst en de kalender onder elkaar in plaats van naast elkaar;
  • in [6] wordt de agenda opgevraagd;
  • in [7] is het scherm te klein, waardoor een deel van de tijdvakken verborgen blijft. Dit is het werk van de bibliotheek [footable];
  • in [8], hetzelfde scherm als hiervoor, maar nu met een afspraak.

Al met al past onze app zich redelijk goed aan de smartphone aan. Het zou zeker beter kunnen, maar het blijft bruikbaar.

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld onder de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 ongewijzigd.