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 ?

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

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.

On aurait pu faire quelque chose de similaire avec les listes
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.

• 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.

• 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

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

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,

• 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

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.

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.

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.

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)

Bilan des modifications :