14. Annexes

14.1. Installation de Node.js

[Node.js] se télécharge sur nodejs.org : on choisit la version LTS (support à long terme), la 24 au moment de l'écriture. L'installateur [Windows] installe aussi [npm]. [Node.js] est nécessaire à la fois aux projets [Ionic] ([Angular CLI] 22 exige la version 22.22 ou une version plus récente) et au serveur JSON. On vérifie l'installation dans une console :

node --version
npm --version

Si un autre projet exige une version plus ancienne de [Node.js], un gestionnaire de versions permet d'en installer plusieurs et de passer de l'une à l'autre : [nvm-windows] sous [Windows], [nvm] sous [Linux] et [macOS] ([nvm install 24], puis [nvm use 24]).

Sous [Windows], [PowerShell] peut refuser de lancer les commandes [npm] et [npx] (« l'exécution de scripts est désactivée sur ce système ») : la commande [Set-ExecutionPolicy -Scope CurrentUser RemoteSigned] l'autorise pour l'utilisateur courant.

14.2. Installation d'Android Studio et d'un émulateur

[Android Studio] se télécharge sur developer.android.com/studio. On ne s'en sert pas pour écrire le code, mais pour installer le SDK [Android], fournir un JDK, et créer un émulateur (le détail est au chapitre « Mise en place de l'environnement de travail ») :

• au premier lancement, l'assistant installe le SDK [Android] ;
• menu More Actions / SDK Manager, onglet SDK Tools : cocher « Android SDK Platform-Tools » ([adb]), « Android Emulator » et « Android SDK Command-line Tools » ;
• créer les variables d'environnement [ANDROID_HOME] (le dossier du SDK) et [JAVA_HOME] (le sous-dossier [jbr] d'[Android Studio]), dont [Capacitor] a besoin pour construire l'application ;
• menu More Actions / Virtual Device Manager : créer un téléphone virtuel (par exemple un « Pixel »), avec une image système récente. Le bouton ▶ le lance ; [adb devices] le voit alors, sous le nom [emulator-5554]. On peut aussi le lancer sans ouvrir [Android Studio] : [npx cap run android] propose les émulateurs créés, même arrêtés, et démarre celui qu'on choisit ; ou, en ligne de commande, le programme [emulator] du SDK : [emulator -list-avds] donne le nom des émulateurs, [emulator -avd <nom>] en lance un (sous [Windows] : [%ANDROID_HOME%\emulator\emulator.exe]).

Pour un vrai téléphone : dans ses Paramètres / À propos du téléphone, toucher sept fois « Numéro de build » fait apparaître les « Options pour les développeurs », où l'on active le « Débogage USB ». Relié à l'ordinateur, le téléphone demande d'autoriser l'ordinateur ; [adb devices] le voit alors.

Le projet [Android] fabriqué par [Capacitor] (le dossier [android/]) s'ouvre dans [Android Studio] par [npx cap open android]. On y trouve, entre autres, la fenêtre [Logcat] (les messages de l'application et du système, dont ceux des greffons de [Capacitor]), et le bouton [Run], qui fait la même chose que [npx cap run android].

14.3. Installation de Visual Studio Code

[Visual Studio Code] se télécharge sur code.visualstudio.com. Le support de [TypeScript] et de [JavaScript] y est intégré. Dans le panneau des extensions (Ctrl-Maj-X), on installe :

• l'extension [Angular Language Service] (de l'équipe d'[Angular]) : la complétion et la vérification dans les gabarits [HTML] (les propriétés et les méthodes de la classe, les entrées des composants, les attributs des composants d'[Ionic]), la navigation d'un gabarit vers le code de sa classe (F12), et l'affichage des erreurs de compilation des gabarits au fil de la frappe ;
• l'extension [Ionic] (de l'équipe d'[Ionic]) : un panneau qui lance l'application dans le navigateur ou sur un appareil [Android], gère les greffons de [Capacitor], et signale les mises à jour des paquets d'[Ionic] et de [Capacitor] ;
• facultativement, l'extension [Prettier], qui met en page le code à l'enregistrement, selon les règles du fichier [.prettierrc] des projets.

On ouvre un projet par le menu Fichier / Ouvrir le dossier (le dossier [exemples_ionic], par exemple), et une console par le menu Terminal / Nouveau terminal ; c'est là qu'on tape [npm install], [npm start], [npx ng build], [npx cap run android]... Le fichier [.vscode/launch.json] des projets permet aussi de lancer l'application par F5 : [VS Code] exécute alors [npm start], ouvre [Chrome] sur l'application, et l'on peut poser des points d'arrêt directement dans le code [TypeScript], dans l'éditeur.

14.4. Les outils de développement de Chrome

Les outils de développement de [Chrome] sont, pour une application [Ionic], ce que [Flutter DevTools] est pour une application [Flutter]. On les ouvre par F12 (ou Ctrl-Maj-I). Leurs onglets les plus utiles :

• la barre d'émulation des appareils (Ctrl-Maj-M) : l'application à la taille d'un téléphone (un modèle de la liste, ou des dimensions données), avec les événements tactiles. C'est ainsi qu'on développe, avant de passer sur [Android] ;
• « Elements » : l'arbre des éléments HTML de la page, et, pour chacun, ses styles CSS (modifiables en direct). L'icône en forme de flèche, en haut à gauche, permet de cliquer sur un élément de la page pour le trouver dans l'arbre. On y voit les balises [<ion-...>] et, à l'intérieur de chacune, son « shadow DOM » : les éléments HTML qui la composent. C'est l'outil qui répond à la question « pourquoi cet élément n'est-il pas à sa place ? » ;
• « Console » : les messages de l'application ([console.log()]) et les erreurs, avec le fichier et la ligne [TypeScript] d'où elles viennent ;
• « Sources » : le code [TypeScript] de l'application (grâce aux « source maps » de la configuration [development]), où l'on pose des points d'arrêt ;
• « Network » (Réseau) : les requêtes HTTP de l'application, avec leurs entêtes et leurs corps : on y voit le cookie du jeton partir et revenir (dans le navigateur) ;
• « Application » : le stockage de la page ([localStorage], où le greffon [@capacitor/preferences] range ses valeurs dans un navigateur) et ses cookies.

L'extension [Angular DevTools] (à installer depuis le [Chrome Web Store]) ajoute un onglet « Angular » : l'arbre des composants [Angular] de l'écran, et, pour chacun, ses entrées, ses signaux et ses propriétés, modifiables en direct ; son onglet « Profiler » montre ce qu'[Angular] a mis à jour, et en combien de temps, après chaque événement.

Les mêmes outils déboguent l'application installée sur l'émulateur ou sur le téléphone. Dans le [Chrome] de l'ordinateur, on ouvre l'adresse [chrome://inspect] : la page liste les appareils reliés par [adb], et, pour chacun, les WebView des applications en cours d'exécution dont le débogage est permis (c'est le cas des applications [Capacitor] construites en mode « debug », celui de [npx cap run android]). Le lien « inspect » ouvre une fenêtre des outils de développement, reliée à la WebView de l'application, avec l'écran du téléphone recopié à gauche : on y retrouve les onglets « Elements », « Console », « Sources », « Network »... Les requêtes faites par [CapacitorHttp] passant par le code natif d'[Android], elles n'apparaissent pas toutes dans l'onglet « Network » : la fenêtre [Logcat] d'[Android Studio] les affiche.

14.5. Installation de MySQL avec Laragon

Le serveur JSON a besoin de [MySQL] (ou [MariaDB]). [Laragon] (laragon.org) en installe un sous [Windows], prêt à l'emploi, avec l'outil d'administration [HeidiSQL]. Après installation :

• le bouton « Démarrer tout » lance le serveur [MySQL], sur le port 3306 ;
• l'utilisateur [root] n'a pas de mot de passe : ce sont les valeurs par défaut du fichier [.env.example] du serveur ;
• dans [HeidiSQL] (bouton « Base de données »), le menu Fichier / Exécuter un fichier SQL exécute le script [database/dbrdvmedecins2.sql].

Sous [Linux] ou [macOS], on installe [MySQL] ou [MariaDB] avec le gestionnaire de paquets du système, et l'on exécute le script avec le client en ligne de commande : [mysql -u root -p < database/dbrdvmedecins2.sql].

14.6. Installation de curl

[curl] est livré avec [Windows] 10 et 11, [macOS] et la plupart des distributions [Linux]. On vérifie sa version :

curl --version

L'option [--json], utilisée dans ce document, existe depuis la version 7.82 (2022). Avec une version plus ancienne, on remplace [--json @fichier] par [-H "Content-Type: application/json" -d @fichier], ou l'on installe une version récente depuis curl.se.

Sous [PowerShell], il faut taper [curl.exe] et non [curl] : dans [PowerShell], [curl] est un alias d'une autre commande ([Invoke-WebRequest]), qui ne comprend pas les options de [curl]. L'invite de commandes ([cmd]) n'a pas ce problème.