14. Annexes

14.1. Installation de Flutter

Le SDK [Flutter] se télécharge sur docs.flutter.dev (choisir [Windows], puis [Android]). C'est un simple dossier compressé, qu'on décompresse dans un dossier SANS espace ni caractère accentué (par exemple [C:\dev\flutter]), puis on ajoute son sous-dossier [bin] à la variable d'environnement [Path] de l'utilisateur. Le SDK [Dart] est inclus. On vérifie l'installation dans une nouvelle console :

flutter --version
flutter doctor

[flutter doctor] vérifie tout ce dont [Flutter] a besoin : le SDK [Android] et ses licences, [Chrome], [Visual Studio] (pour les applications [Windows]), les appareils connectés, l'accès au réseau. Chaque ligne est précédée d'une coche [√] si tout va bien, d'une croix [X] ou d'un point d'exclamation [!] sinon, avec, en dessous, ce qu'il faut faire. [flutter doctor -v] donne le détail (versions, chemins).

La ligne « Visual Studio » ne concerne que les applications [Windows] (le dossier [windows/] des exemples) : elle peut rester en erreur si l'on ne vise que le téléphone et le web.

Sous [Windows], les projets qui utilisent des paquets à code natif ([shared_preferences]...) exigent le « mode développeur » du système : [flutter pub get] le signale (« Building with plugins requires symlink support »). On l'active dans Paramètres / Système / Espace développeurs (commande [start ms-settings:developers]).

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] et créer un émulateur :

• au premier lancement, l'assistant installe le SDK [Android] ;
• menu More Actions / SDK Manager, onglet SDK Tools : cocher « Android SDK Command-line Tools », dont [Flutter] a besoin ;
• dans une console : [flutter doctor --android-licenses], et accepter les licences ;
• 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 ; [flutter devices] le voit alors, sous le nom [emulator-5554]. On peut aussi le lancer sans ouvrir [Android Studio] : [flutter emulators] donne le nom des émulateurs, [flutter emulators --launch <nom>] en lance un.

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 ; [flutter devices] le voit alors.

14.3. Installation de Visual Studio Code

[Visual Studio Code] se télécharge sur code.visualstudio.com. Dans le panneau des extensions (Ctrl-Maj-X), on installe l'extension [Flutter] (de [Dart Code]), qui installe aussi l'extension [Dart]. Elles apportent :

• la complétion, la vérification du code au fil de la frappe (les règles de [analysis_options.yaml]), la navigation vers la définition d'un widget ou d'une classe, le renommage dans tout le projet ;
• le formatage du code à l'enregistrement ([dart format]) ;
• le choix de l'appareil, en bas à droite de la fenêtre (ou commande « Flutter: Select Device ») ;
• le lancement par F5 (débogage : points d'arrêt, variables) ; chaque enregistrement d'un fichier recharge l'application à chaud ;
• des actions sur les widgets (Ctrl-. sur un widget) : « Wrap with Padding », « Wrap with Column », « Extract Widget »... très pratiques pour remanier un arbre de widgets.

Pour lancer un exemple par F5, on ouvre son fichier [main.dart] avant d'appuyer sur F5 (ou l'on crée un fichier [.vscode/launch.json]). On ouvre un projet par le menu Fichier / Ouvrir le dossier (le dossier [exemples_flutter], par exemple), et une console par le menu Terminal / Nouveau terminal.

14.4. L'outil Flutter DevTools

[Flutter DevTools] est livré avec le SDK. Pendant que l'application tourne, [flutter run] affiche son adresse (« The Flutter DevTools debugger and profiler... is available at: http://127.0.0.1:9101... ») ; dans [VS Code], la commande « Flutter: Open DevTools » l'ouvre dans l'éditeur. Ses onglets les plus utiles :

• « Flutter Inspector » : l'arbre des widgets de l'écran, et, pour chacun, ses propriétés. Le mode « Select Widget Mode » permet de toucher un élément sur le téléphone pour trouver son widget dans l'arbre ; « Show Guidelines » dessine les marges et les alignements. C'est l'outil qui répond à la question « pourquoi ce widget n'est-il pas à sa place ? » ;
• « Performance » et « CPU Profiler » : le temps passé à construire et à dessiner chaque image, pour trouver la cause d'une animation saccadée ;
• « Network » : les requêtes HTTP de l'application, avec leurs entêtes et leurs corps : on y voit le cookie du jeton partir et revenir ;
• « Logging » : ce qu'affiche l'application ([debugPrint]).

14.5. Installation de Node.js

[Node.js] se télécharge sur nodejs.org : on choisit la version LTS (support à long terme). L'installateur [Windows] installe aussi [npm]. Il n'est nécessaire qu'au serveur JSON. On vérifie l'installation dans une console :

node --version
npm --version

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