2. Mise en place de l’environnement de travail
2.1. Installer les outils
-
Node.js : télécharger et installer la version 22 (ou plus récente) depuis nodejs.org. Vérifier l’installation dans un terminal :
-
Visual Studio Code (VSCode) : téléchargeable gratuitement sur code.visualstudio.com. Installer l’extension « TypeScript and JavaScript Language Features » (généralement déjà intégrée).
-
[MySQL] 8 : installer par exemple via XAMPP, Laragon (sous Windows) ou directement [MySQL] Community Server. Un outil d’administration graphique (phpMyAdmin, [MySQL] Workbench, DBeaver, HeidiSQL…) facilite la suite. Par la suite, l’outil Laragon est utilisé.
2.2. Installation du client Flutter
Lancez VSCode sans désigner de projet :
- en [1-2], demandez à voir la palette de commandes ;
- en [3], créez un nouveau projet Flutter ;
- en [4], créez une application ;
- en [5-6], désignez un dossier dans lequel sera créé le sous-dossier du projet ;
- en [6], donnez un nom au projet. Ce sera également le nom du dossier créé pour le projet ;
- en [1-3], désignez les cibles du projet [1 – application Android, 2- application de bureau 3 – application web] ;
- en [4], le projet créé. VSCode télécharge automatiquement le SDK de Flutter ;
La commande [flutter doctor] vérifie que tout ce dont [Flutter] a besoin est en place, cible par cible. À lancer dans un terminal VSCode du projet Flutter nouvellement créé :
Lorsque tout est correct, on obtient un résultat de ce genre (les numéros de version varient) :
Chaque ligne commence par un symbole : [√] (tout va bien), [!] (avertissement : un élément manque, ce qui n'empêche pas forcément de travailler) ou [X] (erreur). Pour ce cours, les lignes qui comptent sont [Flutter], [Android toolchain] (compilation pour un téléphone [Android]) et [Connected device] (au moins un appareil détecté, en particulier le téléphone). Les lignes [Chrome] (cible web) et [Visual Studio] (cible Windows) ne concernent que ces cibles : un [!] ou un [X] sur une cible que vous n'utilisez pas peut être ignoré.
Si [Android toolchain] signale « cmdline-tools component is missing », installer les [Android SDK Command-line Tools] (voir ci-après) ; si elle signale « Android license status unknown », accepter les licences (étape 5). La commande [flutter doctor -v] détaille chaque vérification.
Maintenant listez les applications (devices) reconnues par Flutter :
PS ...> flutter devices
Found 4 connected devices:
sdk gphone16k x86 64 (mobile) • emulator-5554 • android-x64 • Android 17 (API 37) (emulator)
Windows (desktop) • windows • windows-x64 • Microsoft Windows [version
10.0.26200.9457]
Chrome (web) • chrome • web-javascript • Google Chrome 153.0.8010.48
Edge (web) • edge • web-javascript • Microsoft Edge 153.0.4234.48
Dans la colonne 2, vous trouvez les identifiants des devices reconnus. Pour lancer l’application Flutter sur l’un d’eux :
Par exemple pour lancer l’application [flutter_application_1] sur le navigateur Edge :
On obtient le résultat suivant dans le navigateur Edge :
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 compiler l'application et l'installer sur ce téléphone, [Flutter] a besoin du SDK [Android], qui s'installe avec [Android Studio], l'environnement de développement de Google. [Android Studio] n'est pas utilisé pour écrire le code - l'éditeur reste [VSCode] - il ne sert ici qu'à installer et à mettre à jour le SDK [Android].
- [Android Studio] : le télécharger gratuitement à l'adresse [https://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 plateforme [Android] récente est installée (la documentation de [Flutter] indique l'API 36 au moment de l'écriture).
- Onglet [SDK Tools] : cocher [Android SDK Command-line Tools (latest)], [Android SDK Build-Tools] et [Android SDK Platform-Tools] (ainsi que [Android Emulator] si vous voulez tester sur un émulateur), puis cliquer sur [Apply]. La documentation de [Flutter] recommande aussi [CMake] et [NDK (Side by side)]. Ce sont les [Android SDK Command-line Tools] qui manquent lorsque [flutter doctor] affiche « cmdline-tools component is missing ».
- Accepter les licences du SDK [Android] en tapant la commande suivante dans un terminal du projet Flutter, puis en répondant [y] à chaque question, jusqu'au message « All SDK package licenses accepted. » :
[Remarque] : avec la version 23.0 des [Android SDK Command-line Tools], la commande ci-dessus peut se terminer aussitôt, sans rien demander, en affichant « The --licenses option is no longer needed ». C'est un problème connu de [Flutter] (issues 191558 et 191487 sur github.com/flutter/flutter). Contournement : dans le [SDK Manager], onglet [SDK Tools], cocher [Show Package Details], remplacer la version 23.0 des [Android SDK Command-line Tools] par la version 22.0, cliquer sur [Apply] puis relancer la commande.
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. Vérifier ensuite que [Flutter] voit l'émulateur, qui doit figurer dans la liste (par exemple [emulator-5554], plateforme [android-x64]) :
PS C:\Data\st-2026\dev\flutter-nestjs-sept-2026\rdvmedecins_flutter_client> flutter devices
Found 4 connected devices:
sdk gphone16k x86 64 (mobile) • emulator-5554 • android-x64 • Android 17 (API 37) (emulator)
Windows (desktop) • windows • windows-x64 • Microsoft Windows [version
10.0.26200.9457]
Chrome (web) • chrome • web-javascript • Google Chrome 153.0.8010.48
Edge (web) • edge • web-javascript • Microsoft Edge 153.0.4234.48
[Remarque] : si [flutter devices] n'affiche pas l'émulateur mais le message « Device emulator-5554 is offline », l'émulateur n'a pas fini de démarrer ou [adb] (l'outil qui relie l'ordinateur à l'appareil, installé avec les [Android SDK Platform-Tools]) 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.
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 se lance dessus avec la commande suivante (voir paragraphe Installation et exécution) :
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. [https://developer.android.com/studio/run/oem-usb]).
- Vérifier que [Flutter] voit le téléphone : il doit apparaître dans la liste affichée par la commande suivante, avec la plateforme [android] :
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]) : ce réglage est décrit au chapitre 5.