Ecrire et vérifier un catalogue au format JSON

Durée estimée: 45 minutes

leçon à compléter pour permettre de modifier un catalogue sur google drive

Objectifs :

On a vu comment lire un fichier JSON existant, avec les informations attendues.

Notre objectif est à présent de voir comment écrire et modifier un catalogue dans ce format, ce qui suppose de connaitre et appliquer les règles du format JSON. Nous verrons aussi comment vérifier qu'un fichier est conforme au format JSON : cette vérificiation est TOUJOURS indispensable après chque modification.

Point de départ:

Dans ce cours, nous allons apprendre à créer, modifier et vérifier des fichiers textes au format JSON. Nous allons le faire principalement avec des outils disponibles en ligne, sur Internet.

Nous verrons ensuite comment utiliser Google Drive pour lire les catalogues que vous avez modifiés. Nous pourrons alors modifier la version précédente de l'application disponible ici. Mais si vous voulez vous concentrer sur la lecture des catalogues, la version modifiée qui lit directement le catalogue sur Google Drive est disponible ici.

Le format JSON :

Un catalogue contient généralement une liste d'objets ou produits décrits par des propriétés (ex : title, image et audio). Le format d'échange d'un catalogue, (et d'autres données) doit permettre

  • son exploitation automatique par un algorithme,
  • et - de préférence - sa lecture et sa modification par une personne.
Le format JSON répond à ces deux critères. Il est facile à lire, mais applique des règles strictes qui permettent à un algorithme :
  • d'identifier les listes et d'en séparer les éléments,
  • d'identifier les dictionnaires et de séparer les paires (clef : valeur),
  • dans chaque paire (clef : valeur) de distinguer la clef et la valeur.

Vous trouverez une présentation de JSON à cette adresse, les règles qui nous seront utiles sont les suivantes :

  • les listes sont encadrées par des crochets [...].
  • les éléments d'une liste sont séparés par une virgule
  • les dictionnaires sont encadrés par des accolades {...}
  • les paires (clef : valeur) sont séparées par une virgule
  • dans une paire "clef:valeur", la clef et la valeur sont séparées par :
  • Les chaines de caractères sont encadrées par des doubles quotes : Cette règle s'applique aux clefs et aux valeurs si ce sont des chaines de caractères.

L'application de ces règles au catalogue présenté dans la 2° colonne conduit à la version JSON de la colonne de gauche.

indexdescription naturelleéquivalent au format JSON



1




2




3




4



   title : Coluche
   image : Coluche.jpg
   audio : Coluche.mp3


   title : Abbé Pierre
   image : abbePierre.jpg
   audio : appelAbbePierre.mp3


   title : Martin Luther King
   image : King.jpg
   audio : King.mp3


   title : Malcolm X
   image : MalcolmX.jpg
   audio : MalcolmX.mp3
[
  {
    "title":"Coluche",
    "image":"Coluche.jpg",
    "audio":"Coluche.mp3"
  },
  {
    "title":"Abbé Pierre",
    "image":"abbePierre.jpg",
    "audio":"appelAbbePierre.mp3"
  },
  {
    "title":"Martin Luther King",
    "image":"King.jpg",
    "audio":"King.mp3"
  },
  {
    "title":"Malcolm X",
    "image":"MalcolmX.jpg",
    "audio":"MalcolmX.mp3"
  }
]

On a :
  • une liste de 4 éléments séparés par des virgules et encadrée par des crochets.
  • chaque élément est un dictionnaire encadré par des accolades,
  • chaque dictionnaire contient une liste de paires séparées par des virgules
  • dans cahque paire, la clef et la valeur sont séparées par :
  • les clefs et les valeurs qui sont des chaiens de caactère ssont encadrées par des doubles quotes "
Notez :
  1. qu'il n'y a pas de virgule après la dernière paire d'un objet ou après le dernier élément d'une liste
  2. que les retours à la ligne et les indentations ne comptent pas. L'exemple du tableau est équivalent à
    [{"title":"Coluche","image":"Coluche.jpg","audio":"Coluche.mp3"},{"title":"Abbé Pierre",
    "image":"abbePierre.jpg","audio":"appelAbbePierre.mp3"},{"title":"Martin Luther King",
    "image":"King.jpg","audio":"King.mp3"},{"title":"Malcolm X","image":"MalcolmX.jpg",
    "audio":"MalcolmX.mp3"}]

    N7JSONEditorOnline.PNG Ces règles doivent être appliquées avec la plus grande rigueur
    Comme on se trompe systématiquement plusieurs fois quand on écrit un fichier JSON il faut TOUJOURS contrôler et valider vos fichiers JSON à chaque fois que vous les avez modifiés. Vous pouvez le faire par exemple avec Firefox, mais nous vous recommandons des outils commeJSON editor online .

    Les 2 exemples suivants comprennent 2 ou 3 erreurs, vous devez savoir les trouver et les corriger.

    [
      {
        "title":"Coluche",
        "image":"Coluche.jpg",
        "audio":"Coluche.mp3"
      },{
        "title":"Abbé Pierre",
        "image":"abbePierre.jpg"
        "audio":"appelAbbePierre.mp3"
      },{
        "title":"Martin Luther King",
        "image":"King.jpg",
        "audio":"King.mp3",
      }{
        "title":"Malcolm X",
        "image":"MalcolmX.jpg",
        "audio":"MalcolmX.mp3"}
    ]
    [{
      "title":"Coluche",
      "image":"Coluche.jpg",
      "audio":"Coluche.mp3"
    },{
      "title":"Abbé Pierre",
      "image":abbePierre.jpg",
      "audio":"appelAbbePierre.mp3",
    },{
      "title":"Martin Luther King",
      "image":"King.jpg",
      "audio":"King.mp3"
    },{
      "title":"Malcolm X",
      "image":"MalcolmX.jpg",,
      "audio":"MalcolmX.mp3"
    }]
    Vous pouvez vous aider des outils et cliquer sur la croix rouge qui indique la présence d'une erreur.

    Exercices avec Google Drive :

    Dans les leçons précédentes, nous avons utilisé un serveur avec un nom de domaine (onvaessayer.org) et une arborescence de fichiers. Vous pouvez faire la me^me chise si vous avez un serveur, mais ce n'est probablement pas le cas. A la place, vous pouvez utiliser Google Drive : c'est ce que nous allons voir ici.

    La amanière dont Google permet d'adresser et de partager les fichiers est différente de celle utilisée dans un serveur. Le fichier n'est aps identifié pr son nom dans une arborescence, mais par un identifiant unique, précédé d'une adresse que l'on met dans la variable dataDirectoryURL, qui est toujours la même :
    https://drive.google.com/uc?export=viewd&id=
    Dans notre cas, l'identifiant du catalogue que l'on range dans la variable JSONcatalog est :
    1HwBR-SBdEHIKask5pwkKBhB3QpZzEpsQ
    Les adresses suivantes permettent de faire avec Google Drive, ce que l'on a fait dans les leons précédentes avec un serveur. N7DriveURLs.PNG

    Le catalogue lui même a été modifié avec les identifiants des fichiers image et son qui sont également sur google Drive, avec un identifiant :

    [
    	{
    		"title":"Coluche",
    		"image":"1bNtmrNMMKphvQ0i0060PUkPV8W-Vj6YQ",
    		"audio":"1mqlJ122IaUCX3wa4XOJq6JgZpkrdpErQ"
     	},
    	{
    		"title":"Abbé Pierre",
    		"image":"1aam9gK-DyqRWhB4q3bF4izPGuNimQ9nP",
    		"audio":"1yYYCV-j_db9FFyp0kDLrS4lfdkTD0tl9"
     	},
    	{
    		"title":"Martin Luther King",
    		"image":"1n1GwerYXtDaNMkwttYQ2hydF20X0WZzO",
    		"audio":"1aQbaUEXA8szW03XuR5Ldur66LTudYb44"
     	},
    	{
    		"title":"Malcolm X",
    		"image":"1DE-BYbzab1MEj5p-XZkBq01Ma-GvNWv5",
    		"audio":"1pr7yZj4P2J5tFz-zdoQnNtDTtnL5x3rq"
     	},
    	{
    		"title":"Robert Badinter",
    		"image":"1p56Isz_3cBQj-k0QKZUOcKy0J_rnDh_t",
    		"audio":"1bLJ0Vfetn90VyPiwZYo2HErYfhDtMQJi"
     	},
    	{
    		"title":"Simone Veil",
    		"image":"1KxhEx22Po77APyJtqoE29uReTKfpIRaT",
    		"audio":"1CMZqwy08zmuE5QDqPPz3Vt_fp8urdIbQ"
     	}
    ]