Objectifs : images, sons, playlists

personnalités	playlist Musique	Oiseaux

Vous allez réaliser à une application qui permet de partager des playlists sur Internet, en passant par les étapes suivantes :

1. gérer des listes d'auteurs, d'images et d'enregistrements entre lesquels l'utilisateur va choisir,
2. lire les images et enregistrements sur le Web, dans un répertoire partagé,
3. réorganiser les listes en liste unique de type JSON (JavaScript Object Notation),
4. lire un catalogue JSON ou une playlist sur Internet et la convertir en liste de dictionnaires,
5. modifier et vérifier un catalogue JSON ou une playlist,
6. changer de catalogue et créer playlist partagée sur le Drive.

Etape 3 : gérer des listes

Description des travaux

• Dans la partie design :
  • Importer des images et bandes son pour compléter celles déjà disponibles,
  • Ajouter un arrangement horizontal avec deux spinners (ou curseurs animés) sous les boutons.
• Dans la partie programmation / blocs :
  • initialiser
    • une variable "titles" avec la liste des auteurs,
    • une variable "images" avec la listes des images,
    • une variable "audios" avec la listes des enregistrements audio.
  • mettre les auteurs (titles) dans la liste des éléments affichés par les spinners (curseurs animés),
  • coder les actions qui correspondent au choix de l'utilisateur quand il sélectionne un auteur, c'est à dire :
    • récupérer l'index de la ligne sélectionnée dans le spinner (ou curseur animé),
    • affecter au bouton (1° ou 2°) l'image correspondante (même index)dans la liste des images,
    • affecter au lecteur (1° ou 2°) le fichier audio correspondant dans la liste des fichiers audios.

Réalisation / Design

Importation des données :

Pour cette version, nous allons utiliser une liste d'images et fichiers audio complémentaires, proposés à cette adresse .
Téléchargez sur votre ordinateur les paires d'images et sons que vous souhaitez : Martin Luther King, Malcolm X, Robert Badinter, Simone Veil, ... A chaque fois il faut choisir l'image (.jpg ou .png) et le fichier son (.mp3) qui vont ensemble. Une fois que vous avez téléchargé ces paires d'images et sons, importez les dans votre projet App Inventor (en bas à droite : bouton "charger fichier" dans l'onglet media).

Vous pouvez aussi choisir vos propres images et sons. Ils doivent être de petite taille, en format portrait (une largeur de 140 pixels suffit). Pour l'instant, la taille totale des fichiers ne doit pas dépassser 2,5 MO. Nous verrons plus loin comment nous affranchir de cette limite.

Composants d'interface :

• Ajoutez un arrangement horizontal, centré, en largeur "remplir parent",
• Dans cet arrangement ajoutez deux curseurs animés (ou spinners) curseurAnime1 et curseurAnime2, en largeur 50%.
• Renommez également les boutons en bouton1 et bouton2, et les lecteurs en lecteur1 et lecteur2, car ils ne sont plus liés à un personnage spécifique.

Réalisation : Blocs et programme

Création des listes : variables titles, images et audios

Nous allons à présent utiliser un nouveau type de variable : les listes.

Leur intérêt est de pouvoir contenir une liste de valeurs, dans notre cas une liste d'auteurs (titles), d'images (images) ou de sons (audios).

Les listes sont associées à une catégorie de blocs spécifiques qui permettent de lire, modifier, ajouter ou supprimer des éléments de la liste. Nous utiliserons ici le bloc qui permet de créer des listes, et celui qui permet d'obtenir ou de récupérer l'élément de la liste qui se trouve à un numéro ou un index particulier.

Commencez par créer ou initialiser 3 listes :

1. titles : dans laquelle on met les noms de personnes,
2. images : dans laquelle on met les noms de fichiers image,
3. audios : dans laquelle on met les noms de fichiers son.

C'est le numéro ou l'index dans la liste qui donne la correspondance entre le nom(titles), l'image et le son.

Définir les noms affichés par les curseurs animés :

Au démarrage de l'application (quand screen1.initialise), on va

1. indiquer que la liste des noms proposés par les curseurs animés est la liste des personnes,
   Pour ça il suffit d'affecter la liste des noms (titles) à la propriété "éléments" du curseur animé.
2. et préciser que l'élément affiché au départ est le 1° de la liste pour le 1° curseur, et le 2° pour le 2° :
   Pour ça on affecte 1 et 2 à la propriété "indice de sélection" du 1° et 2° curseur animé.

Afficher l'image et jouer l'audio correspondant à la sélection de l'utilissteur :

La sélection par l'utilisateur, d'un nom sur un des curseurs animés (ou spinner) va déclencher l'évènement : curseurAnime.AprèsSélection.
Lorsque cet évènement se déclenche, il faut :

1. récupérer dans la liste des images, le nom de fichier à afficher, et affecter ce fichier à l'image de fond du bouton (1 ou 2).
2. récupérer dans la liste des audios, le nom de fichier audio à jouer, et affecter ce fichier à la source du lecteur audio (1 ou 2).

Il est important que vous preniez le temps de bien comprendre comment on fait, car la navigation dans les listes vous sera très utile en programmation.

Notez tout d'abord que l'évènement curseurAnime.AprèsSélection renvoie en paramètre le nom sélectionné, mais ça n'est pas cette information qui nous intéresse, c'est le numéro ou l'index de la ligne sélectionnée.

Ce numéro ou index se trouve dans la propriété "curseur_animé.Indice sélection"

On va utiliser cet indice pour aller chercher le nom de l'image à récupérer dans la liste des images, avec le bloc
choisir dans la liste des images, l'élément qui se trouve à l'index sélectionné par le curseur :

Ce qui conduit à l'ajout de l'ensemble des blocs suivants pour les deux curseurs animés :

Tests et mise au point (debug)

Essayez d'identifier la raison et de corriger le problème avant de lire la suite.
...
...

Pour que l'image et le son correspondent à la sélection de chaque curseur animé, sans même avoir effectué de séelction, il faut le dire. On doit faire - au démarage - la même chose que si on avait cliqué sur chacun des curseurs. On peut donc dupliquer le code correspondnat, mais il vaut mieux le mettre dans une procédure et appeler cette proécédure au démarrage et quand on clique sur un curseur.

Résultat

Etape 4 : lire les images et les sons sur le Web

Objectifs : lire les données sur Internet

Notre application fonctionne, mais avec un gros inconvénient : il faut télécharger les fichiers images et sons un par un. Par ailleurs, le volume total est fortement limité et on ne peut pas partager ...

Nous allons traiter ces problèmes un par un, en commençant par lire les données sur Internet. Nous verrons ensuite comment séparer complètement la partie algorithmique de l'application, de la partie "données"

Réalisation :

Le passage de la lecture de fichiers locaux à la lecture de fichiers sur Internet se fait en indiquant à l'application que les données (avec le même nom de fichier) se trouvent sur un répertoire distant à cette adresse .

L'adresse ou URL à récupérer est affichée dans la barre d'adresse du navigateur (flèche rouge).
Cette adresse, complétée par / est enregistrée dans une variable :
Dans notre exemple, l'adresse complétée par / est
http://onvaessayer.org/appinventor/baseApps/unePetiteidee/assets/data/playlist1/
mais elle peut être différente pour vous. Vous devez la récupérer dans la barre d'adresse du navigateur.

Enfin, dans le programme, on va remplacer le nom du fichier par le même nom précédé par l'URL ou l'adresse du répertoire. On le fait avec le bloc "joint".

On fait cette modification pour tous les fichiers images et sons des deux curseurs, ce qui donne la modification suivante à tester.

Une fois ces 3 petites modifications faites (5 lignes au total) et testées, vous pouvez supprimer les images et sons des medias de l'application. Mais ne supprimez pas l'image affichée en entête ou celle utilisée comme icone de l'application.

Etape 5 : réorganiser les listes pour lire un catalogue Web :

Objectif : lire le catalogue des données sur le Web

Les sons et les images sont lus sur le Web, mais le catalogue (c'est à dire les listes de personnes, images et audios) reste défini dans l'application et n'est pas modifiable : il faut également lire ce catalogue sur le Web, au démarrage de l'application. C'est un catalogue partagé.

C'est ce que l'on va faire ici, mais on doit répondre à deux questions différentes :

• celle de l'organisation des données (question traitée dans cette étape),
• celle de la lecture sur Internet de fichiers textes,(question traitée dans l'étape suivante).

Organisation des données : regroupement des 3 listes, utilisation des dictionnaires

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 ça nous allons utiliser une notion que l'on désigne sous le terme de "dictionnaire". Chaque élément de notre nouvelle liste est un objet décrit par 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 chaque clef a une valeur, un peu comme dans un dictionnaire, où les mots sont les clefs et les définitions sont les valeurs.

Comme pour les listes App Inventor propose un composant "dictionnaire" avec des blocs. La procédure make a dictionary permet de créer un dictionnaire avec ses 3 propriétés ou clefs : title, image et audio.

On aurait pu faire quelque chose de similaire avec les listes
Mais c'est mieux avec les dictionnaires, car on peut désigner chaque propriété ou clef par son nom. On ne risque donc pas de se mélanger les pinceaux, comme avec les index de listes. Avec la clef, on sait ce que contient chaque ligne, même si elles sont dans le désordre.

L'accès aux éléments d'un dictionnaire est donc différent de l'accès aux élements d'une liste :

• 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 humaine c'est plutôt sympa, car le nom de la clef permet de savoir 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 :

Etape 6 : lire un catalogue (JSON) sur le Web et le décoder :

Description textuelle des dictionnaires et des objets : JSON

Nous avons regroupé les données dans une seule liste dont chaque élément est un dictionnaire avec 3 clefs : title, image et audio. Ca correspond à un catalogue ou un fichier texte illustré ci-dessous.

	description textuelle	App Inventor
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" }]

Voyons d'abord comment lire ce catalogue qui est un fichier texte au format JSON. Nous verrons ensuite la raison des crochets, accolades et virgules qui correspondent au format JSON.

Lire le contenu du catalogue (fichier texte)

Dans notre exemple, on a choisi de mettre le nom du fichier catalogue tracks.json dans la variable JSONCatalog et d'enregistrer ce fichier sur le Web au même endroit que les images et les sons, à l'URL définie dans la variable dataDirectoryURL.
On va lire ce fichier dans un composant Web qui se trouve dans la catégorie connectivité dans la partie Design.

• Ajoutez un composant Web depuis le design : c'est un composant invisible.
• Ajoutez également un composant Notificateur dans la catégorie Interface utilisateur. Il nous permettra d'afficher des alertes en cas d'erreur.

Ensuite, vous allez

1. commencer par mettre de côté les blocs qui sont dans l'évènement Screen1.Intialise.
   On reprendra ces blocs plus bas, après avoir lu le catalogue,
2. renseigner la propriété Web.URL avec l'URL du catalogue : c'est la jointure des variables dataDirectoryURL et de JSONCatalog,
3. préciser au composant Web que vous voulez récupérer le contenu des fichiers (plutôt que les enregistrer)en fixant la propriété enregistrer réponse à faux,
4. puis appeler la procédure Web.obtenir pour lire le ficher catalogue.

La demande de lecture de données sur le Web peut prendre du temps et le retour n'est jamais certain, donc on n'attend pas la réponse (c'est une procédure dite "asynchrone"). L'arrivée du fichier demandé va déclencher l'évènement quand Web1.Texte reçu que l'on ajoute aux blocs.

Avant d'aller plus loin, on va vérifier si ça a bien marché en affichant le code et le contenu de la réponse avec un message d'alerte.

Testez : si tout s'est bien passé, vous devez avoir :

• code reponse : 200
• suivi de l'affichage du ficher texte à l'URL demandé

Dans le programme:

• on va vérifier que le code réponse est égal à 200 (nominal) avant de continuer les traitements.
• Puis on va décoder le texte (JSON) pour le convertir en liste et dictionnaires avec la procédure JsonTextDecodeWithDictionaries.

Si tout s'est bien passé, nous avons maintenant reconstitué la liste de dictionnaires dans la variable tracks. On peut donc :

• remplacer l'initialisation des données de tracks par une liste vide,

• remettre dans le script de l'évènement quand Web1.Texte reçu les blocs que nous avions mis de côté dans le script de l'évènement quand Screen1.Initialise,

Conclusion : Blocs modifiés pour la lecture du Web catalogue

Au final, les blocs modifiés pour lire le catalogue sur le Web, sont ceux de la parte supérieure, dont la version finale est affichéeci-dessous :

Dans cette version de l'application, le catalogue enregistré sur le Web sera lu par tous les utilisateurs de votre application à chaque démarage. Vous pourrez donc partager avec eux de nouveaux contenus sans avoir à modifier l'application : La partie algorithmie est maintenant indépendante de la partie données.

Nous allons voir maintenant comment modifier le cataloge en respectant les règles JSON qui permettent à l'application de le décoder.

Etape 7 : écrire ou modifier un catalogue au format JSON :

Un catalogue contient généralement une liste d'objets ou produits décrits par des propriétés (pour nous : title, image et audio). On demande au catalogue

• d'être facile à lire et à modifier,
• et d'être exploitable de façon automatique par 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.

Il existe plusieurs solutions pour répondre à ces exigences, principalement XML et JSON. Dans le cas du format JSON dont vous trouverez une présentation video à cette adresse, les principales règles 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.

[
  {
    "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"
  }
]

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

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"}]

   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.

   Etape 8 : autres catalogues playlist ou chant des oiseaux

   Changer de catalogue

   L'algorithme et les données sont bien séparées. Le nom du répertoire et celui du catalogue JSON sont définis dans 2 variables.

   Pour lire un autre catalogue, il suffit de modifier ces deux variables pour qu'elles correspondent à un autre catalogue déjà préparé. On va aussi changer l'image principale pour qu'elle corresponde au nouveau catalogue, ce qui fait 3 variables :

   Nous avons préparé deux catalogues complémentaires. Pour y accéder, il suffit de modifier les 3 variables (et nous verrons plus bas comment définir leur contenu) :

   • une playlist musicale :
     
   • et un catalogue sur les oiseaux et leur chant :
     
   
   Et voilà!

   personnalités	playlist Musique	Oiseaux

   Préparer un catalogue et un jeu de données

   Les 3 catalogues ont exactement la même structure avec des contenus différents. Vous savez déjà : comment rédiger un catalogue avec

   • la liste [...] de dictionnaires {...},{...}, {...}
   • 3 paires de (clefs:valeurs) dans chaque dictionnaire, :
     la clef "title" pour le nom du morceau, la clef "audio" pour le son et la clef "image" pour l'image.
   et comment vérifier que son format est correct avec des outils comme JSON Editor on line

   Nous allons voir maintenant plusieurs solutions pour accéder au catalogue JSON et aux données images et audios.
   Dans le premier catalogue, le catalogue, les images et audio sont des fichiers, enregistrés dans un serveur à l'adresse datadirectoryURL. Mais vous n'avez probablement pas de serveur ...!
   Donc ça ne va pas marcher pour vous.

   On va donc voir deux autres solutions :

   • La playlist musicale où toutes les données sont enregistréees sur Google drive (catalogue JSON, images et audios),
   • le chant des oiseaux où le catalogue JSON est enregistré sur Google Drive, mais où les images et audios sont lues sur Internet à l'endroit où elles sont (sans avoir à les copier).
   L'utilisation de Google Drive, va changer la manière d'écrire l'adresse des images et fichiers audios, car l'accès aux fichiers dans Google Drive se fait avec un identifiant indépendant du répertoire dans lequel vous avez mis ce fichier.

   Playlist musicale : Préparer un jeu de données sur Google Drive

   Nous allons d'abord voir le cas où le catalogue les images et fichiers audios sont tous sur Google Drive.

   Préparation des données pour la playlist musicale

   Des fichiers de musique mp3 et la pochette de l'album ont été enregistrés dans un répertoire playlistMusic sur Google Drive (Vous pouvez recopier ce répertoire sur votre propre Drive pour vous exercer, mais vous pouvez aussi réutiliser ces donnés avec leur identifiant, sans les recopier).

   

   Le répertoire et les fichiers qu'il contient doivent être partagés et accessibles en lecture par toute personne disposant du lien.
   On configure ces droits d'accès avec clic droit + "partager" puis sur "modifier", dans la case "obtenir le lien".

   En complément des images et des bandes son, le répertoire contient un catalogue au format JSON dont la structure est identique au catalogue précédent avec :

   • une liste [...] de dictionnaires {...},{...}, {...}
   • avec 3 paires de (clefs:valeurs) dans chaque dictionnaire, :
     • la clef "title" pour le nom du morceau,
     • la clef "audio" pour la fin de l'URL du fichier son,
     • et la clef "image" pour la fin de l'URL du fichier image.
   Dans le cas de Google Drive l'adresse ou l'URL d'un fichier n'est pas définie dans une arborescence, comme dans un serveur. Google Drive utilise un Id de fichier ou fileId. L'avantage c'est que cet id ne change pas quand on déplace ou renomme le fichier. L'inconvénient c'est qu'on ne manipule pas le fichier par son nom. Ce fileId correspond à la chaine de caractères associée aux clefs audio et image :

   "title": "Coffee At Midnight",
   "audio": "1aKd2Wd9iKV1LLSg7UzM5p2OwIaVaLFrg",
   "image": "1UPIzY4LRcKvgyfNrnHla4PGggIbvMINC"

   L'adresse complète du fichier sera : https://drive.google.com/uc?export=viewd&id= suivi du fileId.

   Pour construire cette adresse dans le programme, on va mettre la 1° partie dans la variable dataDirectoryURL et le fileId dans la clef image ou la clef audio du catalogue. Comme avant, l'assemblage des deux est déjà fait dans le programme, il n'y a rien à changer :
   l'assemblage des deux parties est déjà fait avec les blocs :

   Récupérer le fileId d'un fichier sur Google Drive :

   Pour récupérer le fileId de chaque fichier, dans le Drive, cliquez droit sur le fichier, puis cliquez sur "obtenir le lien" et "copier le lien", par exemple :
   "https://drive.google.com/file/d/1UPIzY4LRcKvgyfNrnHla4PGggIbvMINC/view?usp=sharing"

   Le FileId se trouve dans la partie médiane entre /file/d/ et /view
   ici : 1UPIzY4LRcKvgyfNrnHla4PGggIbvMINC

   Nota : quand vous récupérez le lien, Vérifiez que le fichier est partagé par tous les utilisateurs disposant du lien.

   Ecrire le catalogue

   Pour chaque élément du catalogue vous devez récupérer le fileId des fichiers audio et image et les mettre comme valeurs associées aux clefs image et audio.

   "title": "Coffee At Midnight",
   "audio": "1aKd2Wd9iKV1LLSg7UzM5p2OwIaVaLFrg",
   "image": "1UPIzY4LRcKvgyfNrnHla4PGggIbvMINC"

   A la fin, n'oubliez surtout pas de vérifier votre fichier JSON (par exemple avec JSON Editor on line).

   Renseigner les variables JSONCatalog et dataDirectoryURL

   Dans le programme, mettez

   • le fileId du catalogue lui même dans la variable JSONCatalog,
   • https://drive.google.com/uc?export=viewd&id= dans la variable dataDirectoryURL,
   • et le fileId de l'image à afficher en haut de l'écran dans la variable topImage.
   

   Chants d'oiseaux : utiliser les données à la source

   Ecriture du catalogue (chants d'oiseaux)

   Au lieu d'utiliser des images et des sons copiés dans le drive, il est possible de lire directement les données là où elles sont sur Internet, sans avoir à les copier. C'est ce que l'on va faire pour les images et les sons dans le catalogue du chant des oiseaux.

   

   Pour l'alouette Lulu

   • L'image est à l'adresse http://www.web-ornitho.com/images/alouettelulu.jpg
   • et le chant à l'adresse http://www.web-ornitho.com/chants/alouette.lulu.wav
   Ce qui nous donne :

   {
   "image":"http://www.web-ornitho.com/images/alouettelulu.jpg",
   "title":"Alouette Lulu",
   "audio":"http://www.web-ornitho.com/chants/alouette.lulu.wav"
   }

   Au passage, vous remarquerez au passage que dans les adresses http, les blancs sont remplacés par %20 ou par +, ce qui correspond à l'encodage URI abordé dans les notions générales du cours. Les espaces et d'atres caractères comme / - si on les avait laissés - auraient été traités comme des séparateurs dans l'adresse Internet.

   Mise à jour des variables JSONCatalog et dataDirectoryURL

   Par rapport aux deux exemples précédents, le catalogue, les images et les sons ne sont pas au même endroit. On ne peut donc pas définir dataDirectoryURL comme préfixe commun à l'adresse de toutes les données. on va donc :

   • mettre une chaine vide dans la variable dataDirectoryURL,
   • mettre le nom complet dans la variable JSONCatalog avec son fileId,
   • et faire de même que pour la variable topImage avec son fileId.
   Comme l'adresse des images et des sons du catalogue sont aussi des adreesses complètes, il n'y a pas non plus de préfixe à ajouter

   Résultat / synthèse

   Cette version du programme se distingue seulement des deux autres par le changement de 3 variables.

   Etape 9 : catalogue de catalogues

   Chaque catalogue de données est défini par 3 variables : dataDirectoryURL, JSONCatalog et topImage. Pour donner à l'utlisateur le choix entre les 3 catalogues, on peut faire la même chose que pour le choix dans les playlists :

   • en ajoutant un spinner ou curseur animé,
   • et en regroupant les 3 variables dans un dictionnaire, avec une clef pour chaque variable et une clef supplémentaire playlistName pour donner un nom à chaque playlist.
     puis on met les 3 dictionnaires dans une nouvelle liste : la variable listOfCatalogs:

   La liste des éléments à afficher par le curseur animé doit être renseignée avec la liste des noms de playlist (clef playlistName). On peut dfinir et appeler une procédure, comme on l'a déjà fait pour la liste des titres titles

   Mais il y a une manière plus élégante pour le faire : c'est d'utiliser, le bloc list by walking key pathdans les blocs dictionnaires, celui qui permet de construire une liste en naviguant au prmeier niveau dans l'aborescence de la variable listOfPlaylists et enrécupérant au 2° niveau la valeur de la clefplaylistName.
   Les variables dataDirectoryURL et JSONCatalog étant lues dans le dictionnaire, on peut les intiliaser à une liste vide.

   Résultat / synthèse

   

   Droits de reproduction / Copyright

   Beaucoup de sons et d'images en ligne sont soumis à un droit de reproduction ou copyright. Le fait d'inclure - sans autorisation -ces images dans vos applications est en infraction avec ce droit. Donc vous devez être prudents sur le choix des sons et images que vous insérez dasn vos applications. Si vous voulez inclure des images ou des sons sous copyright, vous devez obtenir l'autorisation du détenteur des droits. Donc c'est plus facile de rechercher des sources libres d'utilisation.

   Plusieurs sites Web en proposent, dont les suivants :

   • Wikimedia commons une source très riche media gratuits et en open source. Tous les fichiers de ce site peuvent être utilisés dans vos applis.
   • www.free-sfx.com/.
   • www.freesound.org
   • www.freesfx.co.uk

   Auto-contrôle

   

   1 point

   combien dure une milliseconde ?

   mille secondes

   1/0 de seconde

   1/100 de seconde

   1/1000 de seconde

   Vérifier la réponse
   

   1 point

   Dans une application App Inventor app, le fait de secouer le smartphone est :

   un évènement

   un paramètre

   un appel à une fonction

   Vérifier la réponse
   

   1 point

   Qu'est-ce que l'icône d'une application ?

   Une image qui apparait dans l'interface utilisateur.

   La personne dont parle l'application.

   L'image qui apparait sur l'appareil après l'installation de l'application.

   Le titre qui apparait en haut de l'écran.

   Vérifier la réponse

   Pour votre Portfolio

   Dans la catégorie "Creative Projects" de votre portfolio, allez à la page 2.07 : Une petite idée, Projets et répondez aux questions suivantes :

   1. Dans cette leçon, vous avez créé votre propre application sound board app. Décrivez cette application : le thème si il y en a un et les musiques ou discours que l' on peut jouer.
   2. Décrivez comment vous avez conçu l'interface utilisateur (design) et indiquez les composants utilisés ?
   3. Maintenant que vous avez de l'expérience dans la construction d'applications, que pensez vous de la programmation :
      Est-ce que c'est une activité créative ?
      De quelle manière vous permet elle de vous exprimer ?