Environnement, Configuration, et HTTP

1. Créer le projet 🆕

Dans Visual Studio Code, lancez la palette de commande, et sélectionner Flutter : Create New Project. Dans le template à choisir, sélectionnez Empty Application.

2. Environnement 🪙

Nous allons utiliser le service REST Countries comme service REST. Créez vous un compte, et trouvez la clé d'API créée par défaut. Elle devrait commencer par rc_live. Cette clé est votre laissez-passer 🪪 pour intéragir avec l'API de REST Countries.

attention

Ce token ne devrait jamais se retrouver sur GitHub. Si par mégarde, ça vous arrive, il faut immédiatement faire une rotation (générer une nouvelle clé et désactiver l'ancienne). Si ça arrive dans votre vie professionnelle, avertissez votre superviseur dans les plus brefs délais.

2.1 .env 🏞️

Nous allons ajouter le token dans un fichier .env qui n'est qu'une liste de clé=valeur.

REST_COUNTRIES_API_KEY=VOTRE_CLÉ_ICI!!!

Pour éviter que .env ne se retrouve dans votre repo git, ajoutons le à votre .gitignore :

// Reste des éléments ignorés

.env

2.2 flutter_dotenv 🐦🏞️

Le package flutter_dotenv va nous permettre d'utiliser les valeurs qui sont dans .env dans notre code.

Suivez les instructions sur la page du package pour compléter son installation. Un exemple est fourni pour utiliser la librairie.

2.3 Bonus : .env.example 🏞️🏞️

Si jamais vous voulez être gentil avec votre futur vous, vous pouvez créer un fichier .env.example qui est une copie de .env, mais sans les valeurs. Ainsi c'est plus rapide de savoir quelles tokens vous devez garder.

REST_COUNTRIES_API_KEY=

astuce

C'est assez standard de devoir utiliser un token pour accéder à un service externe. Par contre, ce qui n'est pas standard, c'est de stocker le token sur le client (votre application). La bonne pratique serait de passer par un serveur (ex : .NET Core, SpringBoot, etc.) pour faire les requêtes, pour éviter que n'importe qui puisse récupérer le token et faire des requêtes en votre nom 🥸. La documentation de flutter_dotenv en fait d'ailleurs mention.

3. Configuration 🧑‍🔧

Maintenant que nous avons terminés de configurer l'environnement,nous sommes prêts à faire nos requêtes HTTP, non? Minute papillon 🦋!

Ça peut arriver que certaines informations soient réutilisées dans différents fichiers. Par exemple, l'URL vers un service externe. Supposons que l'URL du service externe change, c'est assez agaçant de devoir chercher chaque endroit dans le projet qui fait référence à cette URL pour les changer.

Autre cas intéressant : si vous développez un client (ex : React, Flutter) en même temps qu'un serveur REST (ex : .NET Core), comme sera le cas pendant le projet final, vous voudrez souvent vous connecter au serveur de développement local (ex : localhost) au serveur déployé sur internet (ex : monprojet.com). Encore là, c'est important de pouvoir modifier l'URL du serveur à un seul endroit.

La structure de fichiers que nous allons ajouter ressemble à celle-ci :

lib/
└── config/
    └── app_config.dart

config/
└── dev.json

3.1 config/dev.json 👶

C'est ici que nous allons stocker les données. Ajoutez l'URL vers le point de terminaison de l'API.

{
  "API_URL": "https://api.restcountries.com",
  "ENVIRONMENT": "dev"
}

Pour notre cas, nous avons tout ce dont nous avons besoin, mais nous pourrions ajouter d'autres fichiers json au même endroit pour ajouter d'autres configurations. Ex : prod.json qui contiendrait la même structure que dev.json, mais avec d'autres valeurs.

3.2 lib/config/config.dart 🎯

Notre code dart ne peut pas directement lire le contenu du fichier json. C'est pourquoi config.dart fait l'intermédiaire entre les deux.

class AppConfig {
  static const apiUrl = String.fromEnvironment(
    'API_URL',
    defaultValue: 'https://api.restcountries.com',
  );

  static const environment = String.fromEnvironment(
    'ENVIRONMENT',
    defaultValue: 'dev',
  );
}

Quand nous allons vouloir obtenir une de ces valeurs dans notre code dart, il faudra simplement faire comme suit, par exemple :

final url = '${AppConfig.apiUrl}/countries/v5?q=peru&pretty=1';

HTTP

Bon finalement! Nous nous lançons!

DIO est une bibliothèque Dart pour envoyer des requêtes HTTP. Vous créez un client dio et appelez directement ses méthodes get, post, etc.

3. Dépendance 🚬

Depuis le dossier de votre projet Flutter, ajoutez dio :

flutter pub add dio

Envoyer une requête GET

Le projet 01-acces_simple appelle un service qui double un nombre.

Chargement...

await attend la réponse sans bloquer l'interface graphique. La réponse HTTP est un objet Response; son champ data contient le JSON déjà décodé par DIO.

Gérer les erreurs

Une requête peut échouer parce que le réseau est indisponible, que le serveur répond avec une erreur ou que l'URL est invalide. Le projet intercepte cette erreur et informe l'utilisateur avec un SnackBar.

Utilisez les outils de développement de votre IDE et les journaux de débogage pour examiner l'URL, le code HTTP et le contenu de la réponse.