Maîtrisez Flutter : Créez des Applications Mobiles Multiplateformes Performantes
Maîtrisez Flutter : Créez des Applications Mobiles Multiplateformes Performantes

Interaction avec les API et les Services Backend

Introduction : Le Cœur des Applications Modernes

Bienvenue à cette leçon cruciale de notre parcours "Maîtrisez Flutter". Jusqu'à présent, nous avons appris à construire des interfaces utilisateur magnifiques et réactives. Cependant, la plupart des applications mobiles modernes ne vivent pas en vase clos. Elles ont besoin d'interagir avec le monde extérieur : récupérer des données, envoyer des informations, s'authentifier auprès de services, etc. C'est là qu'interviennent les API (Application Programming Interfaces) et les services backend.

Comprendre comment Flutter communique avec ces services est fondamental pour construire des applications dynamiques, évolutives et réellement utiles. Que vous souhaitiez afficher des articles de blog, gérer des listes de tâches, passer des commandes en ligne ou synchroniser des données entre plusieurs appareils, l'interaction avec un backend est une compétence indispensable.

Dans cette leçon, nous allons explorer les concepts clés des API REST, apprendre à faire des requêtes HTTP en Flutter en utilisant le package http, gérer les réponses (notamment JSON), et intégrer ces interactions dans vos interfaces utilisateur.

1. Fondamentaux des API et des Services Backend

Avant de plonger dans le code Flutter, il est essentiel de comprendre les principes sous-jacents de la communication entre votre application et un serveur.

1.1 Qu'est-ce qu'une API ?

Une API (Application Programming Interface) est un ensemble de règles et de définitions qui permettent à différentes applications de communiquer entre elles. Imaginez-la comme le menu d'un restaurant : il liste ce que vous pouvez commander (les fonctions disponibles) et comment le commander (les paramètres requis). Vous n'avez pas besoin de savoir comment le plat est préparé en cuisine (la logique interne du backend), juste comment le demander et ce que vous obtiendrez.

Dans le contexte des applications mobiles, une API est généralement un service web hébergé sur un serveur distant qui expose des endpoints (des URL spécifiques) permettant à votre application Flutter de :

  • Récupérer des données (ex: la liste des produits, le profil d'un utilisateur).
  • Envoyer des données (ex: créer un nouveau compte, soumettre une commande).
  • Modifier des données existantes (ex: mettre à jour un profil).
  • Supprimer des données (ex: supprimer un article).

1.2 Services Backend

Le service backend est la partie de votre application qui tourne sur un serveur distant. Il est responsable de :

  • Stocker les données (dans une base de données comme PostgreSQL, MongoDB, MySQL).
  • Exécuter la logique métier (par exemple, calculer le prix total d'une commande, gérer les permissions utilisateur).
  • Gérer l'authentification et l'autorisation.
  • Fournir les API que votre application Flutter consommera.

Des technologies comme Node.js, Python (Django/Flask), Ruby on Rails, Java (Spring Boot) ou PHP (Laravel/Symfony) sont couramment utilisées pour construire des backends.

1.3 Méthodes HTTP (Verbes)

La communication entre votre application Flutter (le "client") et le service backend (le "serveur") s'effectue le plus souvent via le protocole HTTP (Hypertext Transfer Protocol). HTTP définit plusieurs "méthodes" ou "verbes" pour indiquer le type d'action que le client souhaite effectuer sur une ressource donnée. Les plus courants sont :

  • GET : Utilisé pour récupérer des données du serveur. C'est une requête "lecture seule" qui ne modifie pas le serveur.
    • Exemple : GET /products pour obtenir la liste de tous les produits.
  • POST : Utilisé pour envoyer de nouvelles données au serveur, souvent pour créer une nouvelle ressource.
    • Exemple : POST /products avec les détails d'un nouveau produit dans le corps de la requête.
  • PUT : Utilisé pour mettre à jour une ressource existante sur le serveur. La requête doit contenir la version complète de la ressource mise à jour.
    • Exemple : PUT /products/123 avec les nouvelles informations pour le produit avec l'ID 123.
  • PATCH : Similaire à PUT, mais utilisé pour mettre à jour partiellement une ressource. La requête ne contient que les champs à modifier.
    • Exemple : PATCH /users/456 pour changer uniquement l'adresse e-mail d'un utilisateur.
  • DELETE : Utilisé pour supprimer une ressource spécifique du serveur.
    • Exemple : DELETE /products/123 pour supprimer le produit avec l'ID 123.

1.4 Codes de Statut HTTP

Lorsqu'une requête HTTP est envoyée, le serveur renvoie une réponse qui inclut un code de statut HTTP. Ce code numérique indique le résultat de la requête. Il est crucial de vérifier ces codes pour comprendre si la requête a réussi ou si une erreur est survenue.

Voici les catégories principales :

  • 2xx (Succès) : Indique que la requête a été reçue, comprise et acceptée avec succès.
    • 200 OK : La requête a réussi.
    • 201 Created : Une nouvelle ressource a été créée avec succès (souvent en réponse à un POST).
    • 204 No Content : La requête a réussi, mais il n'y a pas de contenu à renvoyer (souvent pour un DELETE ou PUT sans retour).
  • 4xx (Erreur Client) : Indique que la requête contient une erreur de la part du client.
    • 400 Bad Request : La requête est mal formée.
    • 401 Unauthorized : L'authentification est requise et a échoué ou n'a pas été fournie.
    • 403 Forbidden : Le serveur a compris la requête mais refuse de l'autoriser (permissions insuffisantes).
    • 404 Not Found : La ressource demandée n'existe pas.
  • 5xx (Erreur Serveur) : Indique que le serveur a rencontré une erreur lors du traitement de la requête.
    • 500 Internal Server Error : Une erreur générique du côté serveur.
    • 503 Service Unavailable : Le serveur n'est pas en mesure de traiter la requête (souvent dû à une surcharge ou une maintenance).

1.5 Format des Données : JSON

Le format de données le plus couramment utilisé pour l'échange d'informations avec les API web est le JSON (JavaScript Object Notation). Il est léger, facile à lire pour les humains et facile à analyser pour les machines.

Un objet JSON est une collection de paires clé-valeur (comme une carte ou un dictionnaire), et un tableau JSON est une liste ordonnée de valeurs.

{
  "id": 1,
  "title": "Titre de l'article",
  "body": "Contenu de l'article...",
  "userId": 10,
  "tags": ["flutter", "api", "mobile"],
  "author": {
    "name": "Jean Dupont",
    "email": "jean.dupont@example.com"
  }
}

Flutter dispose de très bons outils intégrés pour travailler avec JSON, que nous explorerons.

2. Pourquoi interagir avec des services Backend ?

L'interaction avec un backend est essentielle pour la plupart des applications réelles. Voici les raisons principales :

  • Persistance des données : Les données créées ou modifiées par l'utilisateur (profils, messages, articles) doivent être stockées de manière permanente et accessibles même après la fermeture de l'application. Le backend gère une base de données pour cela.
  • Logique métier complexe : Certaines opérations (traitement de paiements, algorithmes de recommandation, calculs complexes) sont mieux gérées sur un serveur pour des raisons de sécurité, de performance ou de ressources.
  • Authentification et Autorisation : Gérer les comptes utilisateurs, la connexion, l'inscription et les permissions d'accès aux données est une tâche complexe et sensible, généralement prise en charge par le backend.
  • Données dynamiques et synchronisation : Permettre à plusieurs utilisateurs de voir et interagir avec les mêmes données, ou de synchroniser les données entre plusieurs appareils d'un même utilisateur.
  • Centralisation : Les données sont stockées à un endroit unique, facilitant la maintenance, les mises à jour et l'intégration avec d'autres services.

3. Flutter et l'interaction réseau : Le package http

Flutter n'inclut pas de client HTTP par défaut, mais il fournit un package officiel et très populaire appelé http qui simplifie grandement les requêtes réseau.

3.1 Ajout de la dépendance

Pour utiliser le package http, vous devez d'abord l'ajouter à votre fichier pubspec.yaml :

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # Vérifiez la dernière version sur pub.dev

Après avoir ajouté la dépendance, exécutez flutter pub get dans votre terminal pour télécharger le package.

3.2 Requêtes HTTP de base avec http

Le package http fournit des fonctions simples pour chaque méthode HTTP ( get, post, put, delete, etc.) qui renvoient un Future<Response>.

import 'package:http/http.dart' as http;
import 'dart:convert'; // Pour décoder le JSON

Future<void> fetchData() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');
  final response = await http.get(url);

  if (response.statusCode == 200) {
    // La requête a réussi, traiter la réponse.
    print('Réponse réussie !');
    print('Statut Code: ${response.statusCode}');
    print('Corps de la réponse: ${response.body}');

    // Décoder le corps JSON
    final Map<String, dynamic> data = json.decode(response.body);
    print('Titre de l l\'article: ${data['title']}');
  } else {
    // La requête a échoué.
    print('Erreur lors de la requête: ${response.statusCode}');
    print('Corps de l l\'erreur: ${response.body}');
  }
}

Explication du code :

  • import 'package:http/http.dart' as http;: Importe le package http et lui donne l'alias http.
  • import 'dart:convert';: Nécessaire pour les fonctions de sérialisation/désérialisation JSON (json.decode, json.encode).
  • Uri.parse(...): Il est fortement recommandé d'utiliser Uri.parse() pour créer des objets Uri à partir de chaînes de caractères URL, car cela gère mieux les encodages et les caractères spéciaux.
  • await http.get(url): Effectue une requête GET asynchrone à l'URL spécifiée. La fonction est async et utilise await car les opérations réseau sont bloquantes et doivent être traitées de manière asynchrone.
  • response.statusCode: Contient le code de statut HTTP.
  • response.body: Contient le corps de la réponse du serveur sous forme de chaîne de caractères (généralement du JSON).
  • json.decode(response.body): Convertit la chaîne JSON en un objet Dart (souvent un Map<String, dynamic> ou List<dynamic>).

3.3 Gestion des données : Modèles (Models) et Sérialisation JSON

Travailler directement avec des Map<String, dynamic> est possible mais devient vite fastidieux et sujet aux erreurs pour des applications complexes. La meilleure pratique consiste à créer des classes de modèle (Model classes) qui représentent la structure de vos données JSON.

Cela vous permet de :

  • Accéder aux données de manière typée (post.title au lieu de post['title']).
  • Bénéficier de l'autocomplétion de l'IDE.
  • Rendre votre code plus lisible et maintenable.

Pour faciliter la conversion entre JSON et objets Dart, on utilise souvent des constructeurs nommés et des méthodes d'instance.

Exemple de Modèle Post :

// lib/models/post.dart
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({required this.userId, required this.id, required this.title, required this.body});

  // Factory constructor pour créer une instance de Post à partir d'un JSON Map
  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }

  // Méthode pour convertir une instance de Post en JSON Map (utile pour POST/PUT)
  Map<String, dynamic> toJson() {
    return {
      'userId': userId,
      'id': id,
      'title': title,
      'body': body,
    };
  }
}

Explication :

  • Le factory Post.fromJson(Map<String, dynamic> json) est un constructeur usine. Il permet de construire une instance de Post à partir d'un Map (qui est le résultat de json.decode()). C'est la désérialisation.
  • La méthode Map<String, dynamic> toJson() est utilisée pour convertir un objet Post en un Map qui peut ensuite être encodé en JSON pour être envoyé au serveur. C'est la sérialisation.

Pour des modèles très complexes ou pour éviter d'écrire tout le code boilerplate, des packages comme json_serializable peuvent être utilisés, mais pour commencer, les méthodes manuelles sont suffisantes.

4. Exemple Pratique : Récupérer et Afficher des Données d'une API

Nous allons maintenant mettre en pratique ce que nous avons appris en créant une application Flutter simple qui récupère une liste de "posts" (articles) depuis l'API publique JSONPlaceholder et les affiche dans une ListView.

4.1 Préparation du Projet

  1. Créez un nouveau projet Flutter : flutter create api_example
  2. Ajoutez la dépendance http à pubspec.yaml (comme montré précédemment).
  3. Créez un dossier lib/models et un fichier lib/models/post.dart avec le code de la classe Post ci-dessus.

4.2 Création du Service API

Pour une bonne pratique, nous allons séparer la logique de communication API dans une classe dédiée.

// lib/services/api_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
import '../models/post.dart'; // Importez votre modèle Post

class ApiService {
  static const String _baseUrl = 'https://jsonplaceholder.typicode.com';

  Future<List<Post>> fetchPosts() async {
    final response = await http.get(Uri.parse('$_baseUrl/posts'));

    if (response.statusCode == 200) {
      // Si le serveur retourne un code 200 OK, parsez le JSON
      final List<dynamic> jsonList = json.decode(response.body);
      return jsonList.map((json) => Post.fromJson(json)).toList();
    } else {
      // Sinon, lancez une exception
      throw Exception('Échec du chargement des articles. Statut: ${response.statusCode}');
    }
  }

  Future<Post> createPost(Post newPost) async {
    final response = await http.post(
      Uri.parse('$_baseUrl/posts'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(newPost.toJson()), // Convertit l'objet Post en JSON String
    );

    if (response.statusCode == 201) { // 201 Created pour une nouvelle ressource
      return Post.fromJson(json.decode(response.body));
    } else {
      throw Exception('Échec de la création de l l\'article. Statut: ${response.statusCode}');
    }
  }
}

Explication du ApiService :

  • _baseUrl: Une constante pour l'URL de base de l'API, facilitant les changements et la lecture.
  • fetchPosts():
    • Effectue une requête GET sur l'endpoint /posts.
    • Si le statut est 200, il décode la réponse JSON (qui est un tableau d'objets JSON).
    • Il utilise map pour convertir chaque objet JSON en une instance de Post via le constructeur Post.fromJson().
    • Enfin, toList() convertit l'itérable en une List<Post>.
    • En cas d'erreur, une Exception est levée, qui devra être gérée dans l'UI.
  • createPost(Post newPost):
    • Effectue une requête POST sur l'endpoint /posts.
    • headers: Indique au serveur que le corps de la requête est du JSON.
    • body: jsonEncode(newPost.toJson()): Convertit l'objet Post Dart en une chaîne JSON à envoyer.
    • Attends un statut 201 Created pour le succès de la création.

4.3 Intégration dans l'UI avec FutureBuilder

Nous allons utiliser un FutureBuilder pour gérer l'état asynchrone de la récupération des données (chargement, données disponibles, erreur).

// lib/main.dart
import 'package:flutter/material.dart';
import 'models/post.dart';
import 'services/api_service.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'API Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: PostListPage(),
    );
  }
}

class PostListPage extends StatefulWidget {
  const PostListPage({super.key});

  @override
  State<PostListPage> createState() => _PostListPageState();
}

class _PostListPageState extends State<PostListPage> {
  late Future<List<Post>> _postsFuture;
  final ApiService _apiService = ApiService();

  @override
  void initState() {
    super.initState();
    _postsFuture = _apiService.fetchPosts(); // Lance la requête au démarrage
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Articles de l\'API'),
      ),
      body: Center(
        child: FutureBuilder<List<Post>>(
          future: _postsFuture, // Le Future que nous attendons
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              // Pendant le chargement des données
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              // Si une erreur survient
              return Text('Erreur: ${snapshot.error}');
            } else if (snapshot.hasData) {
              // Si les données sont disponibles
              final List<Post> posts = snapshot.data!;
              return ListView.builder(
                itemCount: posts.length,
                itemBuilder: (context, index) {
                  return Card(
                    margin: const EdgeInsets.all(8.0),
                    elevation: 2.0,
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            posts[index].title,
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(height: 8),
                          Text(
                            posts[index].body,
                            style: const TextStyle(fontSize: 14),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              );
            } else {
              // Cas par défaut (pas de données, pas d'erreur, pas en attente)
              return const Text('Aucun article à afficher.');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // Exemple d'ajout d'un nouveau post
          final newPost = Post(
            userId: 1,
            id: 101, // L'ID peut être ignoré par certains APIs ou généré côté serveur
            title: 'Mon Super Nouvel Article',
            body: 'Ceci est le contenu de mon article créé depuis Flutter.',
          );
          try {
            final createdPost = await _apiService.createPost(newPost);
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Article créé: ${createdPost.title}')),
            );
            // Recharger la liste pour afficher le nouvel article (si l'API le permet)
            setState(() {
              _postsFuture = _apiService.fetchPosts();
            });
          } catch (e) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Erreur de création: $e')),
            );
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Explication de l'intégration UI :

  • PostListPage est un StatefulWidget car son état (les données des posts) va changer.
  • _postsFuture : C'est une variable de type Future<List<Post>> qui retiendra le résultat de notre appel API. Elle est initialisée dans initState() pour lancer la requête dès que le widget est créé.
  • ApiService _apiService = ApiService(); : Une instance de notre classe de service pour appeler ses méthodes.
  • FutureBuilder<List<Post>> :
    • future: Prend le Future que nous voulons observer (_postsFuture).
    • builder: C'est une fonction qui est appelée chaque fois que l'état du Future change.
      • snapshot.connectionState == ConnectionState.waiting: Le Future est en cours d'exécution. Nous affichons un CircularProgressIndicator.
      • snapshot.hasError: Le Future s'est terminé avec une erreur. Nous affichons le message d'erreur.
      • snapshot.hasData: Le Future s'est terminé avec succès et a des données. Nous utilisons ListView.builder pour afficher la liste des posts. snapshot.data! contient la liste des Post que nous avons récupérée.
  • FloatingActionButton: Ajouté pour démontrer la méthode createPost. Quand on clique dessus, un nouveau post est envoyé à l'API. Si la création réussit, un SnackBar s'affiche et la liste est rechargée.

5. Gestion Avancée et Bonnes Pratiques

5.1 Authentification et Tokens

La plupart des API réelles nécessitent une authentification. Les méthodes courantes incluent :

  • Clés API : Simples mais moins sécurisées, souvent passées en tant que paramètre d'URL ou en-tête.
  • Tokens OAuth2 / JWT (JSON Web Tokens) : Le client s'authentifie une première fois (généralement avec un nom d'utilisateur/mot de passe), le serveur renvoie un token JWT. Ce token est ensuite inclus dans l'en-tête Authorization de chaque requête subséquente pour prouver l'identité de l'utilisateur. Le token doit être stocké en toute sécurité sur l'appareil (par exemple, avec shared_preferences ou flutter_secure_storage).

5.2 Gestion des Erreurs Robuste

Notre exemple gère une erreur simple en affichant un texte. Dans une application réelle, vous voudriez :

  • Des messages d'erreur plus conviviaux : Traduire les erreurs techniques pour l'utilisateur.
  • Des gestionnaires d'erreurs centralisés : Intercepter les erreurs HTTP (401 pour non autorisé, 404 pour non trouvé, 500 pour erreur serveur) et y réagir de manière appropriée (redirection vers la page de connexion, affichage d'un message spécifique).
  • Mécanismes de nouvelle tentative : Permettre à l'utilisateur de réessayer une opération qui a échoué temporairement (problème réseau).

5.3 Séparation des préoccupations (SoC)

Notre ApiService est un bon début. Pour des applications plus grandes, envisagez :

  • Dépôt (Repository) Pattern : Une couche entre votre UI et vos sources de données (API, base de données locale). Le Repository décide d'où récupérer les données (cache, réseau) et masque la complexité de l'API à la logique métier de votre application.
  • State Management : Pour des cas plus complexes que de simples affichages, utilisez des solutions de gestion d'état comme Provider, Riverpod, Bloc/Cubit ou GetX pour gérer l'état de chargement, les erreurs et les données de manière plus prévisible et testable.

5.4 Autres Packages HTTP

Bien que http soit excellent pour commencer, d'autres packages offrent des fonctionnalités supplémentaires pour des besoins plus avancés :

  • Dio : Un client HTTP très puissant avec des fonctionnalités avancées comme les intercepteurs (pour ajouter automatiquement des en-têtes d'authentification), la gestion des erreurs, les téléchargements/uploads de fichiers, les annulations de requêtes.
  • Chopper : Un générateur de code HTTP qui simplifie la définition des API REST en utilisant des annotations.

5.5 Sécurité

  • Toujours utiliser HTTPS : Assurez-vous que l'URL de votre API commence par https:// pour crypter les communications et prévenir les attaques de type "man-in-the-middle".
  • Ne pas stocker les informations sensibles en clair : Les clés API, mots de passe, etc., ne doivent jamais être codés en dur dans votre application. Utilisez des variables d'environnement ou des services de configuration sécurisés.

Conclusion

Félicitations ! Vous avez maintenant une solide compréhension de la manière dont les applications Flutter interagissent avec les API et les services backend. Nous avons couvert :

  • Les concepts fondamentaux des API REST, des méthodes HTTP et des codes de statut.
  • L'importance de la sérialisation/désérialisation JSON et la création de modèles de données en Dart.
  • L'utilisation pratique du package http pour effectuer des requêtes réseau.
  • L'intégration des données asynchrones dans votre UI avec FutureBuilder.
  • Les bonnes pratiques et les pistes pour des scénarios plus avancés.

Cette compétence est sans doute l'une des plus importantes pour tout développeur Flutter souhaitant créer des applications réelles. Prenez le temps de pratiquer avec différentes API et de construire des interfaces utilisateur qui gèrent les différents états (chargement, succès, erreur) de manière élégante. C'est en expérimentant que vous maîtriserez pleinement l'interaction avec les services backend.