. Objectif
Créer une application MIT App Inventor qui :
- lit les données depuis :
https://proxy-automate.latelier22.fr/api.php
- affiche :
temperatures -> entree_evaporateurtemperatures -> sortie_evaporateur
- affiche le schéma de fonctionnement
- permet d’ouvrir un deuxième écran pour voir le JSON
2. Ce que l’API renvoie
L’API renvoie un JSON de ce type :
{
"ok": true,
"src": "https://automate.latelier22.fr/",
"ts": "2026-03-03T13:48:56+00:00",
"temperatures": {
"entree_evaporateur": 19.3,
"sortie_evaporateur": 19.8
},
"debit_eau_l_h": 56.88208
}
Nous allons lire seulement :
temperatures -> entree_evaporateurtemperatures -> sortie_evaporateur
3. Organisation générale du projet
Tu vas créer :
- Screen1 : écran principal
- ScreenJson : écran pour voir le JSON
4. DESIGNER — Screen1
Sur Screen1, placer les composants comme dans ta capture.
A. Composants visibles
1) Un VerticalArrangement
Il servira à organiser les éléments verticalement.
2) Une première ligne pour la température d’entrée
Ajouter un HorizontalArrangement contenant :
Label1- texte : Température entrée évaporateur
LabelTempEvapIn- texte : T °C
3) Une image du schéma
Ajouter un composant Image
- nom :
ImageSchema - importer l’image dans Media
- choisir cette image comme image du composant
4) Une deuxième ligne pour la température de sortie
Ajouter un autre HorizontalArrangement contenant :
Label2- texte : Température sortie évaporateur
LabelTempEvapOut- texte : T °C
5) Une zone de texte
Ajouter un TextBox
- nom :
TextJson - texte initial : Code réponse
MultiLine = true
Cette zone servira ici à afficher au moins une information de debug.
6) Un bouton
Ajouter un Button
- nom :
Button1 - texte : VOIR JSON
B. Composants non visibles
Ajouter en bas :
1) Web
- nom :
Web1
2) Clock
- nom :
Clock1
Propriétés :
TimerEnabled = trueTimerInterval = 5000
Cela permettra de relire les données toutes les 5 secondes.
5. DESIGNER — ScreenJson
Créer un deuxième écran :
- cliquer sur Add Screen
- nom :
ScreenJson
Sur cet écran, ajouter :
A. Une zone de texte
- composant :
TextBox - nom :
TextBox1 MultiLine = trueWidth = Fill parentHeight = Fill parentou assez grande
B. Un bouton retour
- composant :
Button1 - texte : Retour
6. BLOCKS — Variables globales sur Screen1
Dans Screen1, créer les variables suivantes :
initialize global temperaturesDict to ""
initialize global tempsPair to create empty list
initialize global data to ""
initialize global tempEvapIn to ""
Même si certaines ne servent plus vraiment, tu peux les laisser comme dans ton montage.
7. BLOCKS — Screen1.Initialize
Dans Screen1, créer ce bloc :
when Screen1.Initialize
À l’intérieur, mettre :
set Web1.Url to
https://proxy-automate.latelier22.fr/api.php
call Web1.Get
Ainsi, l’application lit les données dès le démarrage.
8. BLOCKS — Clock1.Timer
Créer :
when Clock1.Timer
À l’intérieur :
call Web1.Get
Ainsi, les données sont rafraîchies toutes les 5 secondes.
9. BLOCKS — lecture des données dans Web1.GotText
Créer :
when Web1.GotText
Ce bloc fournit :
urlresponseCoderesponseTyperesponseContent
Étape 1 : vérifier que la réponse est bonne
Ajouter un if then else avec :
if get responseCode = 200
⚠️ 200 doit être un nombre bleu.
Étape 2 : dans le THEN, décoder le JSON
Ajouter :
set global data to
call Web1.JsonTextDecodeWithDictionaries
get responseContent
Cela transforme le texte JSON en dictionnaire exploitable.
Étape 3 : afficher une info dans TextJson
Dans ton exemple, tu affiches :
set TextJson.Text to get responseCode
Tu peux garder exactement cela si tu veux reproduire ta capture.
Donc ajouter :
set TextJson.Text to get responseCode
Étape 4 : afficher la température entrée évaporateur
Ajouter :
set LabelTempEvapIn.Text to
join
get value at key path
make a list
"temperatures"
"entree_evaporateur"
in dictionary get global data
or if not found ""
" °C"
Important
Dans make a list, il faut exactement :
"temperatures""entree_evaporateur"
Étape 5 : afficher la température sortie évaporateur
Ajouter :
set LabelTempEvapOut.Text to
join
get value at key path
make a list
"temperatures"
"sortie_evaporateur"
in dictionary get global data
or if not found ""
" °C"
Important
Dans make a list, il faut exactement :
"temperatures""sortie_evaporateur"
Étape 6 : dans le ELSE
Si la réponse n’est pas bonne :
set TextJson.Text to "Erreur API"
10. BLOCKS — bouton VOIR JSON sur Screen1
Créer :
when Button1.Click
À l’intérieur :
open another screen with start value
screenName = "ScreenJson"startValue = get global data
Important
Dans ta capture, tu passes get global data.
Si ton App Inventor accepte cela, garde-le ainsi.
Mais si cela pose problème, utilise plutôt :
startValue = TextJson.Text
ou mieux encore :
startValue = get responseContent
Mais pour coller à ton montage, on garde ici :
get global data
11. BLOCKS — ScreenJson.Initialize
Dans ScreenJson, créer :
when ScreenJson.Initialize
À l’intérieur :
set TextBox1.Text to get start value
Cela affiche ce qui a été transmis par Screen1.
12. BLOCKS — bouton retour dans ScreenJson
Dans ScreenJson, pour le bouton retour :
when Button1.Click
À l’intérieur :
open another screen
avec :
Screen1
13. Résultat attendu
Sur Screen1
Tu obtiens :
- température entrée évaporateur affichée
- température sortie évaporateur affichée
- image du schéma
- une petite zone texte
- bouton VOIR JSON
Sur ScreenJson
Tu obtiens :
- le contenu transmis par
Screen1 - un bouton retour
14. Résumé des blocs principaux
Screen1.Initialize
set Web1.Url to "https://proxy-automate.latelier22.fr/api.php"
call Web1.Get
Clock1.Timer
call Web1.Get
Web1.GotText
if responseCode = 200 then
set global data to JsonTextDecodeWithDictionaries(responseContent)
set TextJson.Text to responseCode
set LabelTempEvapIn.Text to value at key path ["temperatures","entree_evaporateur"] + " °C"
set LabelTempEvapOut.Text to value at key path ["temperatures","sortie_evaporateur"] + " °C"
else
set TextJson.Text to "Erreur API"
Button1.Click sur Screen1
open another screen with start value
screenName = "ScreenJson"
startValue = get global data
ScreenJson.Initialize
set TextBox1.Text to get start value
Button1.Click sur ScreenJson
open another screen "Screen1"
15. Erreurs fréquentes
1) Mauvais nom de clé
Il faut écrire exactement :
"temperatures""entree_evaporateur""sortie_evaporateur"
⚠️ pas temperature sans s.
2) Mauvais type pour 200
Il faut un nombre bleu :
200
pas un texte rose "200".
3) Oubli de responseContent
Dans :
JsonTextDecodeWithDictionaries
il faut mettre :
get responseContent
4) Le JSON ne s’affiche pas bien dans ScreenJson
Si get global data ne passe pas bien entre les écrans, alors envoie plutôt le texte JSON brut.
Dans ce cas, dans Web1.GotText, ajoute :
set TextJson.Text to get responseContent
et dans le bouton VOIR JSON :
startValue = TextJson.Text
C’est souvent plus simple pour les élèves.
16. Version conseillée pour les élèves
Pour éviter les problèmes entre écrans, je conseille :
Dans Web1.GotText
mettre :
set TextJson.Text to get responseContent
au lieu de responseCode
Puis dans le bouton VOIR JSON
mettre :
open another screen with start value
screenName = "ScreenJson"
startValue = TextJson.Text
Ainsi, l’écran JSON affichera vraiment le JSON complet.
17. Ce que les élèves doivent comprendre
L’application :
- appelle une API
- reçoit un JSON
- le décode
- lit les bonnes clés
- affiche les températures
- peut montrer le JSON sur un autre écran