Fulgence Bienvenüe

NEW : Appli PAC 2 écrans

. Objectif

Créer une application MIT App Inventor qui :

  1. lit les données depuis :
https://proxy-automate.latelier22.fr/api.php
  1. affiche :
  • temperatures -> entree_evaporateur
  • temperatures -> sortie_evaporateur
  1. affiche le schéma de fonctionnement
  2. 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_evaporateur
  • temperatures -> 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 = true
  • TimerInterval = 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 = true
  • Width = Fill parent
  • Height = Fill parent ou 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 :

  1. set Web1.Url to
https://proxy-automate.latelier22.fr/api.php
  1. 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 :

  • url
  • responseCode
  • responseType
  • responseContent

É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 :

  1. "temperatures"
  2. "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 :

  1. "temperatures"
  2. "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 :

  1. appelle une API
  2. reçoit un JSON
  3. le décode
  4. lit les bonnes clés
  5. affiche les températures
  6. peut montrer le JSON sur un autre écran