Organiser les données : les dictionnaires

Durée estimée: 45 minutes

N5listsToDictionary.PNG

Objectif : réorganiser les données

Les sons et les images sont lus sur le Web, mais le catalogue (les listes de personnes, d'images et d'audios) reste défini dans l'application et n'est pas modifiable en dehors du programme. Notre objectif est donc de lire ce catalogue sur le Web, au démarrage de l'application. On pourra ensuite modifier et partager ce catalogue.

Pour le faire, on doit traiter deux questions :

  • celle de l'organisation et du format des données,
  • celle de la lecture sur Internet d'un catalogue.
On va traiter la 1° question avec le regroupement des 3 listes en une seule, et la notion de "dictionnaire".
On verra la 2° dans le cours suivant.

Point de départ:

Pour cette leçon, vous pouvez repartir de la version précédente de l'application ou importer cette version Prenez soin d'enregistrer votre version de travail avec un nouveau nom, par exemple : playlistV5.

ATTENTION : la version dans le repo ne correspnd pas à la bonne

Analyse préliminaire: Organisation des données / regroupement des 3 listes.

Nous allons commmencer en nous posant la question de la manière dont se présente un catalogue dont chaque élément comprend : un titre, une image et une bande audio.

  • Est-ce qu'il vaut mieux 3 listes : une pour les titres, une pour les images et une pour les sons ?
  • Ou une seule liste dont chaque élément contient le titre, l'image et le son ?
3 listes : titles, images,audios1 liste tracks d'objets (title, image, audio)
titles
  Coluche
  Abbé Pierre
  Martin Luther King
  Malcolm X

images
  Coluche.jpg
  abbePierre.jpg
  King.jpg
  MalcolmX.jpg
    
audios
  Coluche.mp3
  appelAbbePierre.mp3
  King.mp3
  MalcolmX.mp3
tracks

  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
C'est la 2° solution qui convient, car toute l'information tient dans une seule liste, et dans cette liste, toute l'information relative à un titre est à un seul endroit. C'est bien plus pratique que de gérer trois listes, avec le risque de se tromper sur les index et mélanger les données.

N5listes3.PNG

Pour regrouper les 3 listes précédentes en une seule - dont chaque élément contient 3 informations - nous allons utiliser la notion de "dictionnaire". Chaque élément de notre nouvelle liste est un "dictionnaire" avec 3 propriétés dont chacune a un nom : title, image et audio.

Le nom de la propriété s'appelle la clef (ou key) et on lui associe une valeur, un peu comme dans un dictionnaire, où les mots sont les clefs et les définitions sont les valeurs.

App Inventor propose un composant "dictionnaire" avec des blocs dédiés. La procédure make a dictionary permet de créer un dictionnaire avec ses clefs (propriétés), ici : title, image et audio.

N5blocDictionnaire.PNG

On aurait pu faire quelque chose de similaire avec les listes N5blocListe.PNG
Mais c'est bien mieux avec les dictionnaires, car chaque propriété a un nom : la clef.

  • dans une liste, on accède à la valeur d'un élément par son numéro ou son index,
  • dans un dictionnaire on accède à la valeur d'un élément par le nom de la propriété ou la clef.
Ca présente plusieurs avantages :
  • l'ordre n'a pas d'importance,
  • la valeur correspondant à une clef ne change pas quand on ajoute ou supprime d'autres valeurs,
  • et pour une personne c'est sympa, car le nom de la clef rappelle de quoi il s'agit.
Dans notre cas, chaque titre, avec son image et son audio va devenir un dictionnaire à 3 clefs, et on va placer ces dictionnaires dans une liste :

  • On reprend les données précédentes et on crée un dictionnaire par ligne avec make a dictionary et 3 clefs : title, image, audio N5listesToDictionnaire.PNG

  • Puis on les regroupe dans une liste affectée à la nouvelle variable tracks. N5listeDeDictionnaires.PNG

Pour l'instant, ne supprimez pas les blocs qui initialisent les anciennes listes. Il faut d'abord modifier le code qui les utilise à deux endroits :
  1. au démarrage, pour définir la liste des titres à afficher par les curseurs
  2. et quand on définit l'image du bouton et l'audio du lecteur, dans les procédures setBouton1 et setBouton2.

Modification 1 : Initialiser les titres affichés par les curseurs animés

La liste des éléments affichés par les curseurs correspond à la liste titles que l'on doit reconstituer à partir de la liste de dictionnaires tracks. On le fait dans la procédure titles avec les instructions suivantes :

  • affecter une liste vide à la variable titles,
  • N5titlesProcedure.PNG
  • puis, dans une boucle sur la liste des tracks, ajouter à la liste titles chacune des valeurs correspondant à la clef title de chaque track :
    Pour chaque track dans la liste tracks
    • ajouter à la liste titles
    • la valeur correspondant à la clef title
Puis on apppelle cette procédure au démarrage, dans l'évènement screen.initialize : N5titlesFromTracks.PNG

Modification 2 : affecter l'image du bouton et l'audio du lecteur

On le fait dans les procédures setBouton1 et setBouton2. Les blocs actuels récupèrent l'image et l'audio à l'index sélectionné dans les listes images et audios. N5setBouton1.PNG

On doit maintenant récupérer l'élément (dictionnaire : title, image, audio) qui se trouve au même index dans notre nouvelle liste tracks. On met ce dictionnaire (title, image, audio) dans une variable locale track : l'élément de tracks à l'index sélectionné dans le curseur. N5trackFromTracks.PNG

Dans cette variable track (title, image, audio), on va récupérer l'image avec la clef image, et le fichier audio avec la clef audio. Pour ça on utilise les blocs suivants. Notez qu'ils permettent d'indiquer une valeur par défaut si la clef demandée n'existe pas. N5trackImageAudioFromKey.PNG

Avec ces blocs, on a récupéré l'image et l'audio. On les utilise pour définir l'image du bouton et la source du lecteur audio avec (en gardant l'URL du répertoire sur Internet)

N5setBouton1Tracks.PNG

Bilan des modifications :

Faites les mêmes actions pour les 2 boutons et lecteurs (attention à ne pas se tromper dans les numéros). et supprimerz les variables (listes) images et audios qui ne sont plus utilisées, pour obtenir finalement : N5Blocs.PNG.PNG