Fulgence Bienvenüe

Tuto débutant MIT App Inventor

Afficher sa position GPS sur une carte

Objectif

Créer une application qui permet de :

  • voir une carte,
  • récupérer la position du téléphone,
  • afficher la latitude et la longitude,
  • placer un marqueur sur la carte,
  • afficher un texte JSON quand on appuie sur un bouton.

Exemple de JSON attendu :

{"lat":48.1762,"lon":-2.7520}

1. Consigne importante avant de commencer

Pour les essais en classe :

  • éviter les binômes avec 2 iPhone,
  • prendre de préférence au moins un téléphone Android par binôme.

Dans cette activité, on considère que les essais avec iPhone peuvent poser problème.
Donc, si possible :

  • 1 Android + 1 autre téléphone, ou
  • 1 Android seul.

Si le test par QR code ne fonctionne pas sur Android, on pourra installer l’APK.

2. Ce qu’il faut créer dans le Designer

Dans MIT App Inventor, créer un projet.

Sur Screen1, ajouter les composants suivants.

Composants visibles

  • Map → nom : Map1
  • Marker → nom : Marker1
  • Label → nom : LabelPos
  • Button → nom : BtnSend
  • TextBox → nom : TxtJson

Composant non visible

  • LocationSensor → nom : LocationSensor1

3. Réglages simples dans le Designer

Map1

  • largeur : Fill parent
  • hauteur : environ 40 % ou 50 % de l’écran

LabelPos

Mettre par exemple :

  • texte : Position : en attente du GPS

BtnSend

Mettre :

  • texte : Envoyer ma géoloc

TxtJson

Mettre :

  • texte vide
  • largeur : Fill parent
  • cocher MultiLine si possible

4. Principe de l’application

L’application fonctionnera ainsi :

Au démarrage

  • on affiche une carte centrée sur une position de départ,
  • on indique qu’on attend le GPS.

Quand le GPS trouve la position

  • le marqueur se place sur la carte,
  • la carte se recentre,
  • les coordonnées s’affichent.

Quand on clique sur le bouton

  • on affiche un JSON dans la zone de texte.

5. Les blocs à faire

Bloc 1 : au démarrage de l’écran

Créer le bloc :

quand Screen1.Initialize

À l’intérieur, mettre :

  • mettre Map1.ZoomLevel à 16
  • mettre Map1.CenterFromString à "48.1762740,-2.7520210"
  • mettre LabelPos.Text à "Position : en attente du GPS"

À quoi ça sert ?

Ce bloc prépare l’écran :

  • la carte s’ouvre,
  • elle est centrée sur une position de départ,
  • le message d’attente s’affiche.

Bloc 2 : quand la position change

Créer le bloc :

quand LocationSensor1.PositionChanged

avec les paramètres :

  • Latitude
  • Longitude
  • Altitude
  • vitesse

À l’intérieur, mettre :

  • mettre Marker1.Latitude à obtenir Latitude
  • mettre Marker1.Longitude à obtenir Longitude
  • mettre Map1.CenterFromString à join (obtenir Latitude) (",") (obtenir Longitude)
  • mettre Map1.ZoomLevel à 18
  • mettre LabelPos.Text à join ("Latitude : ") (obtenir Latitude) (" | Longitude : ") (obtenir Longitude)

À quoi ça sert ?

Ce bloc s’exécute dès que le téléphone connaît la position.

Il permet de :

  • déplacer le marqueur,
  • recentrer la carte,
  • zoomer,
  • afficher les coordonnées.

Bloc 3 : quand on clique sur le bouton

Créer le bloc :

quand BtnSend.Click

À l’intérieur, mettre :

  • mettre TxtJson.Text à join
    • {"lat":
    • LocationSensor1.Latitude
    • ,"lon":
    • LocationSensor1.Longitude
    • }

Très important

Ici, ne pas mettre de \.

Il faut obtenir :

{"lat":48.1762,"lon":-2.7520}

Il ne faut pas obtenir :

{\"lat\":48.1762,\"lon\":-2.7520}

Les \ ne servent pas ici.
Ils rendent juste l’affichage plus mauvais.

6. Résultat attendu

Quand l’application fonctionne :

  • la carte s’affiche,
  • le GPS trouve la position,
  • le marqueur se déplace,
  • le texte des coordonnées change,
  • le bouton affiche le JSON dans TxtJson.

7. Test de l’application

Méthode 1 : test avec QR code

Sur le téléphone :

  • ouvrir MIT AI2 Companion,
  • scanner le QR code affiché par App Inventor.

Méthode 2 : si le QR code ne marche pas

Sur Android :

  • installer l’APK de l’application,
  • puis tester directement sur le téléphone.

8. Que faire si ça ne marche pas ?

La carte s’affiche mais pas la position

Vérifier :

  • que le GPS du téléphone est activé,
  • que l’autorisation de localisation est acceptée,
  • qu’on est dans un endroit où le téléphone capte bien.

Les coordonnées ne changent pas

Vérifier le bloc :

  • quand LocationSensor1.PositionChanged

Le JSON affiche des \

Cela veut dire qu’ils ont été écrits dans le texte.
Il faut les supprimer.

Rien ne se passe avec le bouton

Vérifier le bloc :

  • quand BtnSend.Click

9. Version très simple à donner aux élèves

Travail demandé

Créer une application qui :

  1. affiche une carte,
  2. récupère la position GPS,
  3. affiche latitude et longitude,
  4. place un marqueur,
  5. affiche un JSON quand on appuie sur le bouton.

JSON attendu

{"lat":valeur,"lon":valeur}