6. Annexes

Nous présentons ici comment installer les outils utilisés dans ce document sur des machines windows 7.

6.1. Installation de STS (Spring Tool Suite)

Nous allons installer SpringSource Tool Suite [http://www.springsource.com/developer/sts], un Eclipse pré-équipé avec de nombreux plugins liés au framework Spring et également avec une configuration Maven pré-installée.

• aller sur le site de SpringSource Tool Suite (STS) [1], pour télécharger la version courante de STS [2A] [2B],

• le fichier téléchargé est un installateur qui crée l'arborescence de fichiers [3A] [3B]. En [4], on lance l'exécutable,
• en [5], la fenêtre de travail de l'IDE après avoir fermé la fenêtre de bienvenue. En [6], on fait afficher la fenêtre des serveurs d'applications,

• en [7], la fenêtre des serveurs. Un serveur est enregistré. C'est un serveur VMware compatible Tomcat.

L'utilisation de STS dans le cadre de l'application est expliquée au paragraphe 1.3.2.

6.2. Installation de [WampServer]

[WampServer] est un ensemble de logiciels pour développer en PHP / MySQL / Apache sur une machine Windows. Nous l'utiliserons uniquement pour le SGBD MySQL.

• sur le site de [WampServer] [1], choisir la version qui convient [2],
• l'exécutable téléchargé est un installateur. Diverses informations sont demandées au cours de l'installation. Elles ne concernent pas MySQL. On peut donc les ignorer. La fenêtre [3] s'affiche à la fin de l'installation. On lance [WampServer],

• en [4], l'icône de [WampServer] s'installe dans la barre des tâches en bas et à droite de l'écran [4],
• lorsqu'on clique dessus, le menu [5] s'affiche. Il permet de gérer le serveur Apache et le SGBD MySQL. Pour gérer celui-ci, on utiliser l'option [PhpPmyAdmin],
• on obtient alors la fenêtre ci-dessous,

Nous donnerons peu de détails sur l'utilisation de [PhpMyAdmin]. Nous montrons au paragraphe 1.3.1, comment l'utiliser pour créer la base de données de l'application.

6.3. Installation de [Webstorm]

[WebStorm] (WS) est l'IDE de JetBrains pour développer des applications HTML / CSS / JS. Je l'ai trouvé parfait pour développer des applications Angular. Le site de téléchargement est [http://www.jetbrains.com/webstorm/download/]. C'est un IDE payant mais une version d'évaluation de 30 jours est téléchargeable. Il existe une version personnelle et une version étudiante peu onéreuses.

Son utilisation dans le cadre de l'application est décrite au paragraphe 1.3.3. Pour installer des bibliothèques JS au sein d'une application, WS utilise un outil appelé [bower]. Cet outil est un module de [node.js], un ensemble de bibliothèques JS. Par ailleurs, les bibliothèques JS sont cherchées sur un site Git, nécessitant un client Git sur le poste qui télécharge.

6.3.1. Installation de [node.js]

Le site de téléchargement de [node.js] est [http://nodejs.org/]. Téléchargez l'installateur puis exécutez-le. Il n'y a rien de plus à faire pour le moment.

6.3.2. Installation de l'outil [bower]

L'installation de l'outil [bower] qui va permettre le téléchargement des bibliothèques Javascript peut se faire de différentes façons. Nous allons la faire à partir de la console :

C:\Users\Serge Tahé>npm install -g bower
C:\Users\Serge Tahé\AppData\Roaming\npm\bower -> C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.7 C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower
├── stringify-object@0.2.1
├── is-root@0.1.0
├── junk@0.3.0
...
├── insight@0.3.1 (object-assign@0.1.2, async@0.2.10, lodash.debounce@2.4.1, req
uest@2.27.0, configstore@0.2.3, inquirer@0.4.1)
├── mout@0.9.1
└── inquirer@0.5.1 (readline2@0.1.0, mute-stream@0.0.4, through@2.3.4, async@0.8
.0, lodash@2.4.1, cli-color@0.3.2)

• ligne 1 : la commande [node.js] qui installe le module [bower]. Pour que la commande marche, il faut que l'exécutable [npm] soit dans le PATH de la machine (voir paragraphe ci-après) ;

6.3.3. Installation de [Git]

Git est un système de gestion de versions de logiciel. Il existe une version windows appelée [msysgit] et disponible à l'URL [http://msysgit.github.io/]. Nous n'allons pas utiliser [msysgit] pour gérer des versions de notre application mais simplement pour télécharger des bibliothèques JS qui se trouvent sur des sites de type [https://github.com] qui nécessitent un protocole d'accès spécial et qui est fourni par le client [msysgit]

L'assistant d'installation propose différentes étapes dont les suivantes :

Pour les autres étapes de l'installation, vous pouvez accepter les valeurs par défaut proposées.

Une fois, l'installation de Git terminée, vérifiez que l'exécutable est dans le PATH de votre machine : [Panneau de configuration / Système et sécurité / Système / Paramètres systèmes avancés] :

La variable PATH ressemble à ceci :

D:\Programs\devjava\java\jdk1.7.0\bin;D:\Programs\ActivePerl\Perl64\site\bin;D:\Programs\ActivePerl\Perl64\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\server\bin;...;D:\Programs\javascript\node.js\;D:\Programs\utilitaires\Git\cmd

Vérifiez que :

• le chemin du dossier d'installation de [node.js] est bien présent (ici D:\Programs\javascript\node.js) ;
• le chemin de l'excéutable du client Git est bien présent (ici D:\Programs\utilitaires\Git\cmd) ;

6.3.4. Configuration de [Webstorm]

Vérifions maintenant la configuration de [Webstorm]

Ci-dessus, sélectionnez l'option [1]. La liste des modules [node.js] déjà installés apparaît en [2]. Cette liste ne devrait contenir que la ligne [3] du module [bower] si vous avez suivi le processus d'installation précédent.

6.4. Installation d'un émulateur pour Android

Les émulateurs fournis avec le SDK d'Android sont lents ce qui décourage de les utiliser. L'entreprise [Genymotion] offre un émulateur beaucoup plus performant. Celui-ci est disponible à l'URL [https://cloud.genymotion.com/page/launchpad/download/]

(février 2014).

Vous aurez à vous enregistrer pour obtenir une version à usage personnel. Téléchargez le produit [Genymotion] avec la machine virtuelle VirtualBox ;

Installez puis lancez [Genymotion]. Téléchargez ensuite une image pour une tablette ou un téléphone :

• en [1], ajoutez un terminal virtuel ;
• en [2], choisissez un ou plusieurs terminaux à installer. Vous pouvez affiner la liste affichée en précisant la version d'Android désirée [3] ainsi que le modèle de terminal [4] ;

• une fois le téléchargement terminé, vous obtenez en [5] la liste des terminaux virtuels dont vous disposez pour tester vos applications Android ;

6.5. Installation du plugin Chrome [Advanced Rest Client]

Dans ce document, on utilise le navigateur Chrome de Google (http://www.google.fr/intl/fr/chrome/browser/ ). On lui ajoutera l'extension [Advanced Rest Client]. On pourra procéder ainsi :

• aller sur le site de [Google Web store] (https://chrome.google.com/webstore) avec le navigateur Chrome ;
• chercher l'application [Advanced Rest Client] :

• l'application est alors disponible au téléchargement :

• pour l'obtenir, il vous faudra créer un compte Google. [Google Web Store] demande ensuite confirmation [1] :

• en [2], l'extension ajoutée est disponible dans l'option [Applications] [3]. Cette option est affichée sur chaque nouvel onglet que vous créez (CTRL-T) dans le navigateur.