Aller au contenu principal

Atelier 4 - REST API, Asynchrone et FutureBuilder

Exercice 1 : Premiers pas avec async/await​

Énoncé​

Créez une application qui simule la récupération d'une liste de produits avec un délai. L'application doit afficher un indicateur de chargement, puis la liste des produits.

Objectifs spécifiques​

  1. Créer une fonction Future qui retourne une liste de produits
  2. Utiliser FutureBuilder pour afficher les états
  3. Gérer les trois états : chargement, données, erreur

Produits de test​

List<String> produits = [
  'Laptop Dell XPS 13',
  'iPhone 15 Pro',
  'iPad Air',
  'AirPods Pro',
  'Apple Watch',
];

Exercice 2 : Requêtes HTTP GET​

Énoncé​

Créez une application qui récupère une liste de produits depuis l'API publique Fake Store API (https://fakestoreapi.com/products).

Objectifs spécifiques​

  1. Effectuer une requête GET avec le package http
  2. Parser la réponse JSON
  3. Créer un modèle Product avec la méthode fromJson
  4. Afficher les produits dans une liste avec image et prix

API Endpoint​

GET https://fakestoreapi.com/products

Réponse exemple :

[
  {
    "id": 1,
    "title": "Fjallraven - Backpack",
    "price": 109.95,
    "image": "https://...",
    "category": "electronics",
    "rating": { "rate": 3.9, "count": 120 }
  }
]

Modèle Product​

class Product {
  final int id;
  final String title;
  final double price;
  final String image;
  
  Product({
    required this.id,
    required this.title,
    required this.price,
    required this.image,
  });
  
  factory Product.fromJson(Map<String, dynamic> json) {
    // À implémenter
  }
}

Affichage attendu​

ListTile:
  - Image (leading)
  - Titre
  - Prix (subtitle)

Points d'attention​

  • Gérez les codes de statut HTTP (200 = succès)
  • Décoderez le JSON et créez les objets Product
  • Afficher les erreurs réseau clairement
  • Prévoir un bouton "Réessayer" en cas d'erreur

Exercice 3 : Application météo avec StreamBuilder​

Énoncé​

Créez une application qui affiche les données météo en temps réel avec mise à jour continue toutes les 3 secondes.

Objectifs spécifiques​

  1. Créer un Stream qui émet des mises à jour
  2. Utiliser StreamBuilder pour afficher les données
  3. Gérer l'état active du StreamBuilder

Modèle WeatherData​

class WeatherData {
  final double temperature;
  final String condition;
  final int humidity;
  final double windSpeed;
  final DateTime timestamp;
  
  WeatherData({
    required this.temperature,
    required this.condition,
    required this.humidity,
    required this.windSpeed,
    required this.timestamp,
  });
}

Données de test​

Stream<WeatherData> weatherStream() async* {
  final conditions = ['Ensoleillé', 'Nuageux', 'Pluvieux', 'Orageux'];
  
  while (true) {
    yield WeatherData(
      temperature: 15 + (DateTime.now().second % 10),
      condition: conditions[DateTime.now().second % 4],
      humidity: 30 + (DateTime.now().second % 70),
      windSpeed: 5 + (DateTime.now().second % 20),
      timestamp: DateTime.now(),
    );
    await Future.delayed(const Duration(seconds: 3));
  }
}

Affichage attendu​

Card avec :
  - Icône météo
  - Température (gros texte)
  - Condition
  - Humidité
  - Vitesse du vent
  - Heure de la mise à jour