2. Mise en place de l'environnement de travail

2.1. Installer les outils

Node.js : télécharger et installer la version 24 (LTS) depuis nodejs.org. [Angular CLI] 22 exige [Node.js] 22.22.3 (ou une version 22 plus récente), 24.15 ou plus, ou 26 et au-delà : une version plus ancienne refuse de lancer la commande [ng]. L'installateur installe aussi [npm], le gestionnaire de paquets de [Node.js]. Vérifier l'installation dans un terminal :

1 2	`node --version npm --version`

Visual Studio Code ([VS Code]) : téléchargeable gratuitement sur code.visualstudio.com. Installer les extensions [Angular Language Service] (la complétion et la vérification dans les gabarits [HTML]) et [Ionic] (les commandes d'[Ionic] et de [Capacitor] dans l'éditeur). Le support de [TypeScript] est déjà intégré à [VS Code].
Chrome : le navigateur dans lequel on développe l'application (google.com/chrome). Ses outils de développement (F12) affichent l'application à la taille d'un téléphone, et permettent aussi de déboguer l'application installée sur le téléphone (cf. annexes).
MySQL 8 (ou MariaDB) : nécessaire au seul serveur JSON. L'installer par exemple via Laragon (sous [Windows]), XAMPP ou directement MySQL Community Server. Un outil d'administration graphique ([HeidiSQL], [phpMyAdmin], [MySQL Workbench], [DBeaver]...) facilite la suite. Ce cours utilise [Laragon].

2.2. Installation du client Ionic

Avec [Flutter], il fallait installer un SDK : le framework, le langage [Dart] et leurs outils, communs à tous les projets. Avec [Ionic], il n'y a pas de SDK à installer : [Angular], [Ionic], [Capacitor], le compilateur [TypeScript] et leurs outils en ligne de commande ([ng], [cap]) sont de simples paquets [npm], déclarés dans le fichier [package.json] de chaque projet et installés dans son dossier [node_modules/]. Chaque projet a ainsi ses propres versions, et deux projets peuvent utiliser des versions différentes d'[Angular] sans se gêner.

Installer le client [Ionic] d'un projet, c'est donc installer ses paquets. Dans [VS Code], ouvrir le dossier du projet (menu Fichier / Ouvrir le dossier, par exemple le dossier [exemples_ionic]), puis une console (menu Terminal / Nouveau terminal), et taper :

1	`npm install`

La commande télécharge les paquets décrits par [package.json] (et leurs propres dépendances : plusieurs centaines de paquets, quelques centaines de mégaoctets), dans les versions exactes notées dans [package-lock.json]. Elle n'est à refaire que si l'on ajoute un paquet ou si l'on change de version.

Les outils du projet se lancent ensuite par [npx], qui exécute la commande d'un paquet installé dans le projet (sans [npx], la console chercherait une commande installée pour tout l'ordinateur). La commande [npx ng version] vérifie l'installation d'[Angular] :

1	`npx ng version`

On obtient un résultat de ce genre (ici sous [Linux] ; sous [Windows], la ligne [Operating System] affiche [win32 x64]) :

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI       : 22.2.1
Angular           : 22.2.1
Node.js           : 24.21.0
Package Manager   : npm 10.9.4
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.2.1            │ ^22.2.1           │
│ @angular/cli              │ 22.2.1            │ ^22.2.1           │
│ @angular/common           │ 22.2.1            │ ^22.2.0           │
│ @angular/compiler         │ 22.2.1            │ ^22.2.0           │
│ @angular/compiler-cli     │ 22.2.1            │ ^22.2.0           │
│ @angular/core             │ 22.2.1            │ ^22.2.0           │
│ @angular/forms            │ 22.2.1            │ ^22.2.0           │
│ @angular/platform-browser │ 22.2.1            │ ^22.2.0           │
│ @angular/router           │ 22.2.1            │ ^22.2.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 6.0.3             │ ~6.0.2            │
└───────────────────────────┴───────────────────┴───────────────────┘

La colonne [Requested Version] reprend les versions demandées par [package.json] ; la colonne [Installed Version], celles qu'[npm] a effectivement installées. Celles d'[Ionic] et de [Capacitor] ne figurent pas dans ce tableau, réservé aux paquets d'[Angular] ; la commande [npm ls --depth=0] les liste toutes. La commande [npx cap doctor] est le pendant, pour [Capacitor], de [flutter doctor] :

1	`npx cap doctor`

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 8.5.2
  @capacitor/core: 8.5.2
  @capacitor/android: 8.5.2
  @capacitor/ios: 8.5.2

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 8.5.2
  @capacitor/core: 8.5.2
  @capacitor/android: 8.5.2

[Capacitor] compare les versions installées dans le projet aux dernières versions publiées. Le paquet [@capacitor/ios] n'est pas installé : ce cours ne vise que [Android] (une application [iOS] se construit sur un [Mac], avec [Xcode]). Une fois le projet [Android] créé ([npx cap add android], cf. exemple 01), la commande vérifie aussi ce projet.

Il reste à lancer l'application, dans la même console :

1	`npm start`

puis à ouvrir l'adresse [http://localhost:8100] dans [Chrome] : on y voit le menu des 25 exemples (cf. exemple 01). Il n'y a pas, comme avec [Flutter], d'appareil à choisir : dans le navigateur, l'application est servie par [ng serve] ; sur [Android], elle est construite puis installée par [Capacitor].

L'outil [@ionic/cli] (facultatif). L'équipe d'[Ionic] publie aussi un outil en ligne de commande, qu'on installe pour tout l'ordinateur :

npm install -g @ionic/cli
ionic start
ionic serve
ionic capacitor run android -l --external

ligne 1 : installe la commande [ionic] ;
ligne 2 : crée un nouveau projet [Ionic] + [Angular] + [Capacitor] à partir d'un modèle ([blank] : une page vide, [tabs] : des onglets, [sidemenu] : un menu latéral), en posant quelques questions ;
ligne 3 : lance le serveur de développement (il appelle lui-même [ng serve]) ;
ligne 4 : construit l'application, l'installe sur un appareil [Android] et la recharge à chaque modification du code ([-l], « live reload ») ; [--external] fait écouter le serveur de développement sur l'adresse de l'ordinateur dans le réseau local, que le téléphone peut joindre.

Ce n'est qu'une commodité : [ionic] ne fait qu'enchaîner les commandes [ng] et [cap], et il lui faut, dans le projet, un fichier [ionic.config.json] (que crée [ionic start], ou [ionic init] pour un projet existant). Les projets de ce cours n'en ont pas : ils ont été créés avec [ng new] (cf. exemple 01), et l'on utilise directement [ng] et [cap], qui font partie du projet. C'est la façon la plus transparente de voir ce qui se passe, et celle qui ne dépend d'aucun outil installé sur l'ordinateur.

Nous décrivons maintenant comment installer les outils pour le développement [Android].

2.3. Android Studio et les outils de ligne de commande Android

La cible mobile de ce cours est un téléphone [Android]. Pour construire l'application [Android] et l'installer sur ce téléphone, [Capacitor] a besoin du SDK [Android] et d'un JDK (le compilateur [Java], dont se sert l'outil de construction [Gradle]), qui s'installent avec [Android Studio], l'environnement de développement de [Google]. [Android Studio] n'est pas utilisé pour écrire le code (l'éditeur reste [VS Code]) : il sert ici à installer et à mettre à jour le SDK [Android], à créer des émulateurs et, à l'occasion, à ouvrir le projet [Android] fabriqué par [Capacitor] ([npx cap open android]).

[Android Studio] : le télécharger gratuitement à l'adresse developer.android.com/studio puis l'installer. Au premier lancement, l'assistant propose une installation standard : l'accepter, il télécharge le SDK [Android].
Ouvrir le [SDK Manager] d'[Android Studio] (menu [Tools / SDK Manager] lorsqu'un projet est ouvert, ou [More Actions / SDK Manager] depuis l'écran d'accueil) : c'est lui qui installe et met à jour les composants du SDK [Android].
onglet [SDK Platforms] : vérifier qu'une plate-forme [Android] récente est installée. [Capacitor] 8 compile les applications pour l'API 36 ([Android] 16) ;
onglet [SDK Tools] : cocher [Android SDK Build-Tools], [Android SDK Platform-Tools] (qui contient [adb], l'outil qui relie l'ordinateur à l'appareil), [Android Emulator] (si l'on veut tester sur un émulateur) et [Android SDK Command-line Tools (latest)] (dont l'outil [sdkmanager]), puis cliquer sur [Apply].
Accepter les licences du SDK [Android] : [Android Studio] les fait accepter à chaque installation d'un composant. Si la construction de l'application échoue plus tard sur une licence non acceptée, on les accepte toutes avec l'outil [sdkmanager] des [Android SDK Command-line Tools], en répondant [y] à chaque question, jusqu'au message « All SDK package licenses accepted. » (sous [Windows], dans [PowerShell]) :

1	`& "$env:LOCALAPPDATA\Android\Sdk\cmdline-tools\latest\bin\sdkmanager.bat" --licenses`

Le JDK : [Capacitor] 8 demande un JDK 21 ou plus récent. Inutile d'en installer un : [Android Studio] est livré avec le sien, le [JBR] (« JetBrains Runtime »), dans son sous-dossier [jbr]. Dans les versions récentes d'[Android Studio], c'est un [Java] 25 : il demande une petite retouche du projet [Android] fabriqué par [Capacitor] (passer à [Gradle] 9.1), indiquée à l'exemple 01.
Les variables d'environnement. [Capacitor] ([npx cap run android]) lance lui-même la construction [Gradle] et l'outil [adb] ; il doit savoir où sont le SDK et le JDK. Sous [Windows], dans Paramètres / Système / Informations système / Paramètres avancés du système / Variables d'environnement, créer deux variables de l'utilisateur :
[ANDROID_HOME] : le dossier du SDK [Android], par défaut [C:\Users\<nom>\AppData\Local\Android\Sdk] (le [SDK Manager] l'affiche en haut de sa fenêtre, [Android SDK Location]) ;
[JAVA_HOME] : le dossier du JDK d'[Android Studio], par défaut [C:\Program Files\Android\Android Studio\jbr].

Ajouter aussi à la variable [Path] le dossier [%ANDROID_HOME%\platform-tools], pour pouvoir taper [adb] dans une console. Si [Android Studio] n'est pas installé à l'emplacement par défaut, la commande [npx cap open android] demande en plus la variable [CAPACITOR_ANDROID_STUDIO_PATH] : le chemin du programme [studio64.exe]. Les nouvelles variables ne sont vues que par les consoles ouvertes APRÈS leur création : il faut relancer [VS Code]. On vérifie dans une nouvelle console :

1 2	`adb version & "$env:JAVA_HOME\bin\java" -version`

2.4. Préparer un émulateur Android

À défaut de téléphone, on peut tester l'application sur un émulateur [Android] : un téléphone virtuel qui s'exécute dans une fenêtre de l'ordinateur. [Android Studio] installe le programme [Android Emulator] (s'il a été coché dans le [SDK Manager], cf. ci-dessus) mais pas d'appareil virtuel prêt à l'emploi : il faut en créer un.

[Prérequis] : la virtualisation doit être activée dans le [BIOS] de l'ordinateur et, sous [Windows], la fonctionnalité [Plateforme de l'hyperviseur Windows] doit être cochée ([Panneau de configuration / Programmes / Activer ou désactiver des fonctionnalités Windows]), ce qui demande un redémarrage. Sans cela, l'émulateur ne démarre pas ou reste très lent ;
ouvrir le [Device Manager] d'[Android Studio] : [More Actions / Virtual Device Manager] depuis l'écran d'accueil, ou [Tools / Device Manager] lorsqu'un projet est ouvert (selon la version : [View / Tool Windows / Device Manager]) ;
cliquer sur [Create Device], choisir un modèle (par exemple [Pixel 8]) puis [Next]. Choisir une image système [Android] récente pour le processeur [x86_64] et la télécharger avec le lien [Download] situé à côté, puis [Next] et [Finish] ;
démarrer l'émulateur avec le bouton [Play] du [Device Manager] ;
attendre que l'écran d'accueil d'[Android] soit affiché dans la fenêtre de l'émulateur : le premier démarrage peut durer plusieurs minutes.

On vérifie ensuite que l'ordinateur voit l'émulateur. Deux commandes le permettent :

1 2	`adb devices npx cap run android --list`

ligne 1 : [adb] liste les appareils reliés à l'ordinateur, un par ligne : leur identifiant (par exemple [emulator-5554] pour le premier émulateur) suivi de leur état, qui doit être [device] ;
ligne 2 : dans le dossier d'un projet [Capacitor] ([exemples_ionic], par exemple), [Capacitor] liste les appareils sur lesquels il peut installer l'application : les appareils branchés et démarrés, mais aussi les émulateurs créés dans [Android Studio], même arrêtés (il sait les démarrer). C'est le pendant de [flutter devices].

[Remarque] : si [adb devices] affiche l'émulateur avec l'état [offline], l'émulateur n'a pas fini de démarrer, ou [adb] est dans un état incohérent. Essayer dans l'ordre : (1) attendre l'écran d'accueil puis relancer la commande ; (2) redémarrer [adb] avec les trois commandes suivantes (sous [Windows], dans [PowerShell]), la dernière devant afficher [device] et non [offline] ; (3) dans le [Device Manager], menu [⋮] de l'appareil, choisir [Cold Boot Now], voire [Wipe Data] en dernier recours.

1
2
3

& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" kill-server
& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" start-server
& "$env:LOCALAPPDATA\Android\Sdk\platform-tools\adb.exe" devices

Si le problème persiste, vérifier avec [where.exe adb] qu'aucun autre [adb], d'une version différente, ne se trouve dans le [Path] : deux versions d'[adb] qui se disputent la connexion provoquent ce symptôme.

Une fois l'émulateur reconnu, l'application s'y installe et s'y lance par la commande suivante, dans le dossier du projet, après [npx ng build] et [npx cap sync android] (cf. exemple 01) ; [--target] désigne l'appareil par son identifiant, sans quoi la commande demande lequel choisir :

1	`npx cap run android --target emulator-5554`

Sur l'émulateur, l'ordinateur qui le fait tourner a l'adresse [10.0.2.2] : c'est là que l'application cherchera le serveur JSON (cf. exemple 22).

2.5. Préparer le téléphone Android

Pour exécuter l'application sur un vrai téléphone [Android], celui-ci doit accepter d'être piloté depuis l'ordinateur :

activer les options pour les développeurs : ouvrir [Paramètres / À propos du téléphone] puis appuyer plusieurs fois (7 en général) sur [Numéro de build] jusqu'à ce que le téléphone indique que vous êtes développeur. Les intitulés exacts varient selon le fabricant ;
activer le [Débogage USB] dans les [Options pour les développeurs] (menu ajouté par l'étape précédente) ;
brancher le téléphone à l'ordinateur avec un câble USB qui transfère des données (pas seulement de la charge) et accepter, sur le téléphone, la demande d'autorisation du débogage USB. Sous [Windows], si le téléphone n'est pas reconnu, installer le pilote USB de son fabricant (« OEM USB drivers », cf. developer.android.com/studio/run/oem-usb) ;
vérifier que l'ordinateur voit le téléphone : il doit apparaître, avec l'état [device], dans la liste affichée par [adb devices] (l'état [unauthorized] signifie que la demande d'autorisation n'a pas été acceptée sur le téléphone), et dans celle de [npx cap run android --list].

Le téléphone accèdera au serveur [NestJS] par l'adresse IP de l'ordinateur sur le réseau local (et non par [localhost], qui, pour lui, est le téléphone lui-même) : ce réglage est décrit à l'exemple 22 et au chapitre « Déploiement ».