TUTO PAS À PAS – APPLI CARTE + GPS + APPEL ROBOT + RESET

1) Créer le projet

1. Ouvre MIT App Inventor.
2. Clique sur Create Apps.
3. Clique sur Start new project.
4. Nom du projet : CardioMoveRobot

---

2) Dans Designer : ajouter les composants

2.1 Composants visibles

Ajoute ces composants dans Screen1 :

A. Une carte

Dans Maps :

• Map
• renomme-la : Map1

B. Marqueur téléphone

Dans Maps :

• Marker
• renomme-le : MarkerMe

C. Marqueur robot

Dans Maps :

• Marker
• renomme-le : MarkerRobot

D. Titre

Dans User Interface :

• Label
• renomme-le : LabelTitle

E. Statut

Dans User Interface :

• Label
• renomme-le : LabelStatus

F. Bouton appel

Dans User Interface :

• Button
• renomme-le : ButtonAppel

G. Bouton reset

Dans User Interface :

• Button
• renomme-le : ButtonReset

---

2.2 Composants non visibles

Ajoute :

Sensors

• LocationSensor
• renomme : LocationSensor1

Connectivity

• Web
• renomme : Web1
• Web
• renomme : WebRobot
• Web
• renomme : WebReset

Sensors

• Clock
• renomme : Clock1
• Clock
• renomme : ClockRobot

User Interface

• Notifier
• renomme : Notifier1

---

3) Régler les propriétés dans Designer

3.1 Screen1

Sélectionne Screen1 :

• AlignHorizontal = Center
• Scrollable = false

---

3.2 Map1

Sélectionne Map1 :

• Width = Fill parent
• Height = 300 pixels
• ZoomLevel = 15

---

3.3 MarkerRobot

Sélectionne MarkerRobot :

• Visible = false

---

3.4 LabelTitle

Sélectionne LabelTitle :

• Text = URGENCE - Appel CardioMove
• Width = Fill parent
• TextAlignment = Center
• FontSize = 18

---

3.5 LabelStatus

Sélectionne LabelStatus :

• Text = GPS : en attente
• Width = Fill parent
• TextAlignment = Center

---

3.6 ButtonAppel

Sélectionne ButtonAppel :

• Text = 🚨 APPEL ROBOT
• Width = Fill parent
• Height = 70 pixels
• FontSize = 24
• Enabled = false

---

3.7 ButtonReset

Sélectionne ButtonReset :

• Text = RESET ROBOT

---

3.8 Clock1

Sélectionne Clock1 :

• TimerEnabled = true
• TimerInterval = 500

---

3.9 ClockRobot

Sélectionne ClockRobot :

• TimerEnabled = true
• TimerInterval = 2000

---

Va dans Blocks.

4) Créer les variables globales

Crée ces 5 variables :

initialize global lat to 0
initialize global lon to 0
initialize global hasFix to false
initialize global decoded to 0
initialize global robotList to 0

---

5) Initialisation de l’écran

Ajoute ce bloc :

when Screen1.Initialize
do
    set WebRobot.Url to "https://sti2d.latelier22.fr/fiber/api/robot-last"

---

6) Bloc GPS : récupérer la position du téléphone

Ajoute ce bloc :

when LocationSensor1.LocationChanged
    latitude longitude altitude speed
do
    set global lat to get latitude
    set global lon to get longitude    set MarkerMe.Latitude to get latitude
    set MarkerMe.Longitude to get longitude    set Map1.CenterFromString to join get latitude "," get longitude
    set Map1.ZoomLevel to 18    set global hasFix to true    set LabelStatus.Text to join
        "GPS OK\nlat="
        get latitude
        "\nlon="
        get longitude

---

7) Activer le bouton seulement si le GPS est prêt

Ajoute ce bloc :

when Clock1.Timer
do
    if get global hasFix = true
    then
        set ButtonAppel.Enabled to true
    else
        set ButtonAppel.Enabled to false

---

8) Quand on clique sur APPEL ROBOT

Ajoute ce bloc :

when ButtonAppel.Click
do
    if not get global hasFix
    then
        call Notifier1.ShowAlert
            notice "GPS pas prêt"
    else
        call Notifier1.ShowChooseDialog
            message join
                "GPS OK\nlat="
                get global lat
                "\nlon="
                get global lon
            title "CONFIRMATION"
            button1Text "OUI"
            button2Text "NON"
            cancelable true

---

9) Après la boîte de dialogue : envoyer les coordonnées

Ajoute ce bloc :

when Notifier1.AfterChoosing
    choice
do
    if get choice = "OUI"
    then
        set Web1.Url to "https://sti2d.latelier22.fr/fiber/api/call-robot"        set Web1.RequestHeaders to make a list
            make a list "Content-Type" "application/json"
            make a list "Connection" "Keep-Alive"        call Web1.PostText
            text call Web1.JsonTextEncode
                valueToEncode make a dictionary
                    key "x" value get global lat
                    key "y" value get global lon

---

10) Lire la réponse après l’appel robot

Ajoute ce bloc :

when Web1.GotText
    url responseCode responseType responseContent
do
    set LabelStatus.Text to join
        "Réponse serveur : code="
        get responseCode
        "\ncontenu="
        get responseContent

---

11) Lire automatiquement la position du robot

Ajoute ce bloc :

when ClockRobot.Timer
do
    call WebRobot.Get

---

12) Décoder le JSON du robot et placer le marqueur

Ajoute ce bloc :

when WebRobot.GotText
    url responseCode responseType responseContent
do
    set global decoded to call WebRobot.JsonTextDecodeWithDictionaries
        jsonText get responseContent    if get value for key "ok"
        in dictionary get global decoded
        or if not found false
    then
        set global robotList to get value for key "robot"
            in dictionary get global decoded
            or if not found create empty dictionary        set MarkerRobot.Visible to true        set MarkerRobot.Latitude to get value for key "x"
            in dictionary get global robotList
            or if not found 0        set MarkerRobot.Longitude to get value for key "y"
            in dictionary get global robotList
            or if not found 0
    else
        set LabelStatus.Text to "Robot : pas de position"

---

13) Bouton RESET ROBOT

Ajoute ce bloc :

when ButtonReset.Click
do
    set WebReset.Url to "https://sti2d.latelier22.fr/fiber/api/reset"
    call WebReset.PostText
        text ""

---

14) Réponse après RESET

Ajoute ce bloc :

when WebReset.GotText
    url responseCode responseType responseContent
do
    set LabelStatus.Text to join
        "RESET HTTP "
        get responseCode
        " : "
        get responseContent

---

15) Résultat attendu

Quand tu lances l’appli :

1. la carte s’affiche
2. le téléphone récupère son GPS
3. MarkerMe se place sur la carte
4. le bouton APPEL ROBOT s’active
5. si tu cliques dessus, une confirmation s’ouvre
6. si tu choisis OUI, l’appli envoie :

{"x": latitude, "y": longitude}

7. toutes les 2 secondes, l’appli lit /robot-last
8. MarkerRobot se met à la position du robot
9. le bouton RESET ROBOT envoie un POST vers /reset

---

16) Les 3 URL à recopier exactement

Appel robot

https://sti2d.latelier22.fr/fiber/api/call-robot

Position robot

https://sti2d.latelier22.fr/fiber/api/robot-last

Reset robot

https://sti2d.latelier22.fr/fiber/api/reset

---

17) Si ça ne marche pas

Le bouton APPEL ROBOT reste grisé

Vérifie que ce bloc existe bien :

when LocationSensor1.LocationChanged
    ...
    set global hasFix to true

---

Le robot n’apparaît pas

Vérifie :

• WebRobot.Url
• ClockRobot.TimerEnabled = true
• MarkerRobot.Visible passe à true
• les clés "x" et "y" sont bien lues

---

Erreur d’envoi JSON

Dans Web1.PostText, il faut bien utiliser :

call Web1.JsonTextEncode

et pas envoyer le dictionnaire brut.

---

18) Ordre exact des blocs à faire

Fais-les dans cet ordre :

1. variables globales
2. Screen1.Initialize
3. LocationSensor1.LocationChanged
4. Clock1.Timer
5. ButtonAppel.Click
6. Notifier1.AfterChoosing
7. Web1.GotText
8. ClockRobot.Timer
9. WebRobot.GotText
10. ButtonReset.Click
11. WebReset.GotText

---

19) Noms exacts des composants

Recopie bien ces noms :

Map1
MarkerMe
MarkerRobot
LabelTitle
LabelStatus
ButtonAppel
ButtonReset
LocationSensor1
Web1
WebRobot
WebReset
Clock1
ClockRobot
Notifier1

---

20) Le plus important

Les blocs sont en anglais, donc tu dois retrouver exactement :

when LocationSensor1.LocationChanged
when Clock1.Timer
when ButtonAppel.Click
when Notifier1.AfterChoosing
when Web1.GotText
when ClockRobot.Timer
when WebRobot.GotText
when ButtonReset.Click
when WebReset.GotText

MIT App Inventor (débutants), pas à pas, pour :

1. afficher une carte
2. afficher ta position (point + coordonnées)
3. bouton “Envoyer ma géoloc au robot”
   ➡️ pour l’instant, on n’envoie rien : on affiche juste le JSON qui serait envoyé.

---

1) DESIGNER (à faire tranquillement)

A) Créer le projet

• Create new project → nom : GeoRobot

B) Ajouter les composants visibles

1. Map → nom : Map1
   (Catégorie “Maps”)
2. Label → nom : LabelPos
   • Text : Position : --
   • FontSize : 16
3. Button → nom : BtnSend
   • Text : Envoyer ma géoloc
4. TextBox → nom : TxtJson
   • Text : vide
   • ✅ MultiLine = true
   • ✅ Width = Fill parent
   • ✅ Height = 120 px (ou plus)
   • (Optionnel) Enabled = false (pour juste afficher)

C) Ajouter les composants non visibles

5. LocationSensor → nom : LocationSensor1
   • TimeInterval : 1000 (1 seconde)
   • DistanceInterval : 1 (1 mètre)
6. (Optionnel mais pratique) Notifier → Notifier1
7. (Optionnel pour plus tard) Web → Web1 (pour envoyer au robot plus tard)

D) Ajouter un marqueur (point sur la carte)

• Dans “Maps”, ajoute Marker → nom : Marker1
  • (il peut être “dans” Map1 dans l’arborescence)

---

2) BLOCKS (la logique)

A) Au démarrage : préparer la carte

when Screen1.Initialize

1. Zoom par défaut

• set Map1.ZoomLevel to 16

2. Centre par défaut

• set Map1.CenterFromString to "48.0000,-2.0000"
  (ou une autre ville si tu veux)

3. Texte

• set LabelPos.Text to "Position : en attente du GPS"

✅ Voilà : la carte s’ouvre déjà sur un endroit, même sans GPS.

---

B) Quand le GPS donne une position : afficher sur la carte

Bloc à utiliser (il existe chez toi) :

when LocationSensor1.LocationChanged (latitude, longitude, altitude, speed)
(les paramètres peuvent varier, mais tu as au moins latitude/longitude)

À l’intérieur, mets dans cet ordre :

1. Déplacer le point (Marker1)

• set Marker1.Latitude to get latitude
• set Marker1.Longitude to get longitude

2. Centrer la carte sur toi

• set Map1.CenterFromString to join get latitude "," get longitude

⚠️ IMPORTANT : il faut la virgule entre les deux.

3. Zoomer près de toi

• set Map1.ZoomLevel to 18

4. Afficher les coordonnées

• set LabelPos.Text to join "Position : " get latitude " , " get longitude

✅ Résultat : la carte se centre automatiquement sur toi + zoom + point rouge.

---

C) Bouton “Envoyer ma géoloc” : afficher le JSON (sans envoyer)

Bloc :

when BtnSend.Click

1. (Optionnel mais conseillé) Si GPS pas prêt :

• if LocationSensor1.Latitude = 0
  → call Notifier1.ShowAlert "GPS pas prêt (attends)"

Sinon (dans le else), fabriquer le JSON :

2. Mettre dans TxtJson.Text

• set TxtJson.Text to join
  • "{"
  • "\"lat\":"
  • LocationSensor1.Latitude
  • ","
  • "\"lon\":"
  • LocationSensor1.Longitude
  • "}"

✅ Exemple affiché :

{"lat":48.12345,"lon":-2.45678}

3. (Optionnel) message

• call Notifier1.ShowAlert "JSON prêt (non envoyé)"

---

D) (Optionnel) Mise à jour automatique du JSON

Si tu veux que le JSON se mette à jour tout seul à chaque déplacement, tu peux aussi ajouter dans LocationChanged :

• set TxtJson.Text to ... (le même join)

Mais pour les débutants, c’est mieux uniquement au clic.

---

Résultat final attendu

• Carte centrée et zoomée sur ta position
• Marker1 sur toi
• LabelPos affiche les coordonnées
• Bouton affiche le JSON dans TxtJson

TUTO ÉLÈVES — DUPLIQUER LE PROJET ET MODIFIER POUR AFFICHER LE DÉBIT D’EAU

Objectif

Repartir d’un projet qui marche déjà, puis changer :

• l’URL
• la clé à afficher

---

1) Dupliquer le projet

1. Dans MIT App Inventor : Projects
2. Cliquer sur My Projects
3. Trouver votre projet MotAleatoire (ou le nom de votre projet “Mot”)
4. Cliquer sur More actions (les 3 points / menu)
5. Choisir Copy project
6. Nommer la copie : DebitEau

✅ Vous avez maintenant le même projet, mais pour le débit.

---

2) Modifier l’écran (Designer)

Dans Designer :

A) Modifier le bouton

• Cliquer sur BtnMot
• Changer son texte en : Lire le débit
• (Optionnel) Renommer le bouton : BtnDebit
  👉 Si vous renommez, il faudra retrouver les blocs correspondants.

B) Modifier le label

• Cliquer sur LabelMot
• Changer son texte en : --
• (Optionnel) Renommer : LabelDebit

👉 Pour aller vite : ne renommez pas les composants, changez juste le texte.

---

3) Modifier l’URL de l’API (Blocks)

Aller dans Blocks.

Dans :

when Screen1.Initialize

Remplacer l’URL :

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

✅ Nouvelle :
https://proxy-automate.latelier22.fr/api.php

---

4) Modifier CE QU’ON AFFICHE (Blocks)

Dans le projet “Mot”, on affichait :

• clé "name" (dans l’objet)

Ici, on veut afficher :

• clé "debit_eau_l_h" (directement dans data)

Dans when Web1.GotText → dans le then

Vous gardez la ligne qui décode le JSON :

✅ Garder :

• set global data to JsonTextDecodeWithDictionaries(responseContent)

Ensuite, vous changez la partie “mot”.

A) Supprimer les blocs inutiles

Supprimez :

• la ligne set global obj to select list item ...
• la ligne set global mot to get value for key "name" ...
• la ligne set LabelMot.Text to get global mot

B) Remplacer par UNE SEULE ligne

Ajoutez :

set LabelMot.Text to

• join
  • get value for key "debit_eau_l_h" in dictionary (get global data) or if not found "--"
  • " L/h"

✅ Ça affichera par exemple : 56.88208 L/h

---

5) Vérification rapide

Cliquez sur le bouton :

• si tout va bien : un nombre apparaît + L/h
• sinon : le label affiche “Erreur API”

---

6) (Optionnel) Arrondir à 2 décimales (plus propre)

Remplacez l’affichage par :

• join (format as decimal debit 2) " L/h"

(Je te donne la version exacte en blocs si tu veux l’ajouter.)

---

Résumé ultra simple

1. Copier le projet
2. Changer l’URL
3. Supprimer “obj” et “name”
4. Afficher "debit_eau_l_h" + " L/h"

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)

Cours à compléter

Lien vers le modèle .step
Humanoid Robot – Robonova Evolution | 3D CAD Model Library | GrabCAD