Fulgence Bienvenüe

Ma première appli mobile

TUTO MIT APP INVENTOR — “Mot au hasard”

Objectif

Quand on clique sur Nouveau mot, l’appli appelle l’API :

https://trouve-mot.fr/api/random

et affiche le champ name (ex : “flèche”) dans un Label.

1) DESIGNER (écran de gauche)

A. Créer les composants

Glisser-déposer sur l’écran :

  1. Button
    • Rename : BtnMot
    • Text : Nouveau mot
  2. Label
    • Rename : LabelMot
    • Text : Appuie sur le bouton
    • FontSize : 28 (ou 30)
  3. Web (non visible)
    • Rename : Web1

2) BLOCKS (écran de droite)

A. Créer 3 variables globales

Menu Variables → prendre initialize global name to et renommer :

  1. initialize global mot to ""
  2. initialize global data to create empty list
    • (bloc Lists → create empty list)
  3. initialize global obj to ""

3) Mettre l’adresse de l’API au démarrage

Menu Screen1 → bloc :

when Screen1.Initialize do

À l’intérieur :

  • set Web1.Url to "https://trouve-mot.fr/api/random"

✅ Important : on ne met PAS Web1.Get ici.

4) Quand on clique sur le bouton : appeler l’API

Menu BtnMot → bloc :

when BtnMot.Click do

À l’intérieur :

  1. set LabelMot.Text to "..." (chargement)
  2. call Web1.Get

5) Quand l’API répond : extraire le mot

Menu Web1 → bloc :

when Web1.GotText (url, responseCode, responseType, responseContent) do

A. Vérifier que c’est OK

Mettre :

if get responseCode = 200 then

⚠️ 200 doit être un nombre (bloc bleu), pas “200” en texte.

B. Dans le THEN, mettre ces 4 lignes

1) Décoder le JSON

Menu Web1 :

  • set global data to
    • call Web1.JsonTextDecodeWithDictionaries
      • get responseContent

✅ Le JSON reçu est une liste (ça commence par [)

2) Prendre le 1er élément de la liste

Menu Lists :

  • set global obj to
    • select list item
      • list = get global data
      • index = 1

3) Récupérer la clé « name »

Menu Dictionaries :

  • set global mot to
    • get value for key
      • key = "name"
      • in dictionary = get global obj
      • or if not found = ""

4) Afficher dans le label

  • set LabelMot.Text to get global mot

C. Dans le ELSE (si erreur)

  • set LabelMot.Text to "Erreur API"

✅ Résultat attendu

Quand on clique sur Nouveau mot :

  • Le label passe à ... (chargement)
  • Puis affiche un mot (ex : flèche)