Lire et Écrire du JSON dans Flutter

Lire et Écrire du JSON dans Flutter

1. Objectifs

• À la fin de ce cours, vous serez capable de :
• Comprendre le rôle et l’utilisation de JSON dans les applications Flutter.
• Charger des données JSON à partir d’un fichier ou d’une API.
• Convertir des données JSON en objets Dart (désérialisation).
• Convertir des objets Dart en JSON (sérialisation).
• Utiliser des outils comme json_serializable pour automatiser le processus de conversion.

2. Qu’est-ce que JSON?

• JSON est l’acronyme de JavaScript OBject Notation (Notation Objet issue deJavaScript)
• C’est un format léger d’échange de données
• Il est indépendant du langage de programmation. La syntaxe JSON est dérivée de la syntaxe de notation d’objet de JavaScript, mais le format JSON est uniquement en texte. Lecode de lecture et de génération de données JSON peut être écrit dans n’importe quel langage de programmation.
• Et il est «auto-décrivant» et facile à comprendre
• Le format JSON a été initialement spécifié par Douglas Crockford. C’est un programmeur et entrepreneur américain, notamment connu pour sa forte implication dans le développement du langage JavaScript et pour la création du format JSON.

1. Règles syntaxiques

• Il ne doit exister qu’un seul élément père par document contenant tous les autres : un élément racine.
• Tout fichier JSON bien formé doit être :
• soit un objet commençant par { et se terminant par },
• soit un tableau commençant par [ et terminant par ].
• Cependant ils peuvent être vides, ainsi [] et {} sont des JSON valides.
• Les séparateurs utilisés entre deux paires/valeurs sont des virgules.
• Un objet JSON peut contenir d’autres objets JSON.
• Il ne peut pas y avoir d’éléments croisés.
• Il existe deux types d’éléments :
• Objets (Couples clé-valeur)
• Description : Les objets sont des collections de paires clé-valeur. Chaque clé est une chaîne de caractères, suivie d’un deux-points : et de la valeur associée.
• Syntaxe :

{
  "nom": "Alice",
  "age": 30,
  "ville": "Paris"
}

• Tableaux (Listes de valeurs)
• Description : Les tableaux sont des listes ordonnées de valeurs. Les valeurs peuvent être de n’importe quel type valide en JSON, y compris des objets, des tableaux, des chaînes, des nombres, etc.
• Syntaxe :

[
  "pomme",
  "banane",
  "orange"
]

2. Valeurs possibles

• Primitifs : nombre, booléen, chaîne de caractères, null.
• Tableaux : liste de valeurs (tableaux et objets aussi autorisés) entrées entre crochets, séparées par des virgules.
• Objets : listes de couples « nom »: valeur (tableaux et objets aussi autorisés) entrés entre accolades, séparés par des virgules.

3. Exemple

• Voici un exemple JSON qui définit un objet « employé » contenant un tableau de trois objets d’employés, chacun ayant des propriétés comme « nom », « poste » et « parle » :
• Le format JSON est syntaxiquement identique au code pour créer des objets JavaScript.
• En raison de cette similitude, un programme JavaScript peut facilement convertir les données JSON en objets JavaScript natifs.

{
  "employes": [
    {
      "nom": "Alice","poste": "Développeuse","parle": ["français", "anglais"]
    },
    {
      "nom": "Bob","poste": "Designer","parle": ["anglais", "espagnol"]
    },
    {
      "nom": "Charlie","poste": "Chef de projet","parle": ["français", "allemand"]
    }
  ]
}

• Étant donné que le format JSON est uniquement du texte, il peut facilement être envoyé vers et depuis un serveur et utilisé comme format de données par n’importe quel langage de programmation.
• JavaScript a une fonction intégrée pour convertir une chaîne, écrite au format JSON, en objets JavaScript natifs : JSON.parse().
• Ainsi, si vous recevez des données d’un serveur, au format JSON, vous pouvez les utiliser comme n’importe quel autre objet JavaScript.





3. Lire du JSON dans Flutter

1. Charger un fichier JSON local

• Créer un fichier JSON dans le dossier assets : Exemple : assets/data.json

[
  {
    "id": 1,
    "name": "Apple",
    "price": 1.5
  },
  {
    "id": 2,
    "name": "Banana",
    "price": 0.8
  }
]

• Ajouter le fichier JSON dans le fichier pubspec.yaml :

flutter:
  assets:
    - assets/data.json

• Charger le fichier JSON dans Flutter :

import 'dart:convert';
import 'package:flutter/services.dart';

Future<List<dynamic>> loadJsonData() async {
  final String response = await rootBundle.loadString('assets/data.json');
  final data = json.decode(response);
  return data;
}

• Explication des Composants
• Imports :
• dart:convert : Ce package fournit des fonctionnalités pour convertir des données entre les formats JSON et Dart. La fonction json.decode() est utilisée pour décoder une chaîne JSON en un objet Dart.
• flutter/services.dart : Ce module permet d’accéder aux ressources de l’application, y compris les fichiers dans le dossier assets.
• Déclaration de la fonction :
• Future<List<dynamic>> loadJsonData() async : Cette fonction est déclarée comme asynchrone (async), ce qui signifie qu’elle peut effectuer des opérations qui prennent du temps (comme le chargement d’un fichier) sans bloquer l’interface utilisateur. Le type de retour est un Future contenant une liste dynamique (List<dynamic>), ce qui signifie que la fonction renverra une liste d’objets une fois l’opération terminée.
• Chargement du fichier JSON :

final String response = await rootBundle.loadString('assets/data.json');

• rootBundle.loadString() : Cette méthode charge le contenu d’un fichier dans le dossier assets et le renvoie sous forme de chaîne.
• await : Cela indique que l’exécution de la fonction doit attendre la fin de cette opération avant de continuer. Cela garantit que la chaîne est complètement chargée avant de passer à l’étape suivante.
• Décodage du JSON :
• final data = json.decode(response);
• json.decode(response) : Cette fonction prend la chaîne JSON chargée et la convertit en un objet Dart. Dans ce cas, il renvoie une liste ou un objet, selon la structure du JSON.
• Retourner les données :
• return data; : La fonction renvoie les données décodées. Cela peut être une liste de valeurs ou un objet, selon le contenu du fichier JSON.

2. Charger des données JSON depuis une API

Utiliser le package http :


import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<dynamic>> fetchJsonData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load data');
  }
}

4. Convertir JSON en objets Dart (Désérialisation)

• Créer un modèle Dart correspondant au JSON :

class Product {
  final int id;
  final String name;
  final double price;

  Product({required this.id, required this.name, required this.price});

  factory Product.fromJson(Map json) {
    return Product(
      id: json['id'],
      name: json['name'],
      price: json['price'].toDouble(),
    );
  }
}

• Utiliser le modèle :

List parseProducts(String responseBody) {
  final parsed = json.decode(responseBody).cast>();
  return parsed.map((json) => Product.fromJson(json)).toList();
}


4. Convertir des objets Dart en JSON (Sérialisation)
Ajouter une méthode toJson dans la classe :

dart
Copier le code
class Product {
final int id;
final String name;
final double price;

Product({required this.id, required this.name, required this.price});

factory Product.fromJson(Map json) {
return Product(
id: json[‘id’],
name: json[‘name’],
price: json[‘price’].toDouble(),
);
}

Map toJson() {
return {
‘id’: id,
‘name’: name,
‘price’: price,
};
}
}
Convertir en JSON :

dart
Copier le code
Product product = Product(id: 1, name: « Apple », price: 1.5);
String jsonString = json.encode(product.toJson());
print(jsonString);
5. Automatiser avec le package json_serializable
Installer le package : Ajouter dans pubspec.yaml :

yaml
Copier le code
dependencies:
json_annotation: ^4.0.1

dev_dependencies:
build_runner: ^2.0.6
json_serializable: ^5.0.2
Créer une classe avec annotations :

dart
Copier le code
import ‘package:json_annotation/json_annotation.dart’;

part ‘product.g.dart’;

@JsonSerializable()
class Product {
final int id;
final String name;
final double price;

Product({required this.id, required this.name, required this.price});

factory Product.fromJson(Map json) => _$ProductFromJson(json);
Map toJson() => _$ProductToJson(this);
}
Générer le code : Exécuter dans le terminal :

bash
Copier le code
flutter pub run build_runner build
6. Cas pratiques
Application pratique : Liste des produits

Charger une liste de produits depuis un fichier JSON local.
Afficher les produits dans une ListView.
Sauvegarder les données

Convertir une liste d’objets Dart en JSON.
Enregistrer les données localement dans le stockage.