Créer une application avec App Inventor

Outils

L'application est réalisée en ligne sur le site AppInventor et testée grâce au MIT AI2 Companion pour Android.

Lancer le compagnon pour tester l'application :

1) Cliquer sur : connecte > compagnon AI

2) Lancer le Compagnon AI sur votre téléhone ou tablette et scaner le qrcode

3) Attendre que le programme soit transféré pour visualiser votre application

Attention ! Votre tablette/téléphone et votre ordinateur doivent être sur le même réseau pour que le Compagnon AI fonctionne.

Description du projet

Je veux afficher un message d'alerte quand l'indice de pollution dépasse un certain seuil.
Je me connecte à une API (World Air Quality Index : https://waqi.info ) pour récupérer l'indice de pollution de l'air du lieu où je me trouve.
Documentation de l'API : https://aqicn.org/json-api/doc/
J'affiche l'indice de pollution du jour.
J'affiche un message d'alerte si cet indice dépasse un certain seuil.

Stratégie

  1. Je récupère les coordonnées géographiques du lieu où je me trouve
  2. Je les transmets à l'API qui me renvoie l'indice de pollution de la station la plus proche
  3. J'affiche l'indice de pollution et éventuellement un message d'alerte

Affichage

Sur l'interface Designer d'appInventor on positionne les éléments que l'on souhaite afficher. Nous utilisons les éléments Label pour afficher un texte et bouton pour lancer une action sur le click.
Pour plus de clarté on peut renommer chaque élément (vous pouvez bien sûr utiliser les noms que vous souhaitez) :

  • label : Latitude (position du téléphone) => renommer le label en LatTexte
  • label : longitude (position du téléphone) => renommer le label en LonTexte
  • label : station (ville ou est située la station) => renommer le label en city
  • label : aqi (indice de qualité de l'air ) => renommer le label en aqi
  • label : date (à laquelle a été effectué la mesure) => renommer le label en time
  • bouton : pour lancer la localisation et la récupération des données => renommer le bouton : localiser
    => On change le texte du bouton : Text = Localiser ... et les composants que l'on va utiliser côté programmation (Blocs)
  • module capteurs : position qui va nous permettre de récupérer la position (latitude, longitude) du téléphone
    => on le désactive : décocher Activé
  • module connectivité : web pour se connecter à l'API et récupérer les données (station, aqi, date)

Récupération de la localisation GPS : longitude/latitude

Quand on clique sur le bouton Localiser on veut activer la localisation et affecter longitude et lattitude aux labels créés côté Designer:

  • la longitude est affectée au label latTexte
  • la latitude est affectée au label LonTexte

1) Activer la localisation en cliquant sur le bouton Localiser

2) Récupérer latitude et longitude et les affecter aux labels correspondants

Ce bloc permet de récupérer la position à chaque fois qu'elle change, mais aussi quand elle est activée A vous de compléter le code...

Normalement, quand on clique sur le bouton Localiser, on doit voir s'afficher nos coordonnées GPS

Attention, comme vous êtes vraisemblablement à l'intérieur, la localisation GPS peut-être défectueuse. Pour y remédier, vous devez modifier les paramètres de localisation de votre téléphone ou de votre tablettes :
Paramètres > Localisation > mode de localisation > cocher économie de batterie C'est alors le wifi qui sera utilisé pour localiser votre téléphone

Récupérer les données sur la pollution atmosphérique

Utiliser une API

L'API du site https://waqi.info/ permet de récupérer les données sur la pollution atmosphérique de la station dont vous êtes le plus proche.
Documentation de l'API : https://aqicn.org/json-api/doc/
Observons comment est composée l'URL :
https://api.waqi.info/feed/geo:48.850572;2.654472/?token=c3ec0077ae6ae94ef35aa2a8c4ab4c753ee6fd22

https://api.waqi.info/feed/ geo:48.850572;2.654472/ ?token=c3ec0077ae6ae94ef35aa2a8c4ab4c753ee6fd22
url de l'API / geo:longitude:latitude / ?token = code qui donne accès à l'API

Il suffit donc de compléter l'URL avec nos coordonnées GPS et notre code d'accès (c3ec0077ae6ae94ef35aa2a8c4ab4c753ee6fd22) pour obtenir le résultat : vous pouvez tester d'abord dans votre navigateur...
Si vous utilisez Chrome, il est préférable d'installer l'extension Json viewer pour visualiser correctement la réponse json de l'API )

Dans votre navigateur vous pouvez voir qu'il est possible de récupérer les éléments suivants :

  • AQI : l'indice de qualité atmosphérique
    datas => aqi
    L'échelle de qualité de l'air : https://waqi.info/
  • le nom de la station qui a réalisé la mesure
    datas => city => name
  • le polluant principal
    datas => dominentpol

Appeler cette URL dans notre application

Nous souhaitons maintenant récupérer ces informations dans notre application pour les affecter aux labels correspondants. Pour cela nous allons utiliser le bloc ci-dessous qui appelle l'URL de l'API :

A vous de reconstituer l'URL : si les coordonnées GPS changent on veut pouvoir récupérer les nouvelles informations

Où doit on placer ces deux blocs pour qu'à chaque changement de position l'API soit appelée pour actualiser les données ?

Dernière étape : récupérer les données

  1. créer une variable globale json pour stocker et manipuler la réponse de l'API

  2. Utiliser le bloc "Quand Web1 . Texte reçu" pour affecter à json la réponse, c'est à dire le texte au format json que l'on a visuallisé dans le navigateur.

  3. Ne reste plus qu'à affecter aux bons labels les valeurs récupérées en utilisant le boc

Ici on récupère le nom de la station. A vous de récupérer les autres éléments qui vous intéressent...

Message d'alerte

Si la polution dépasse un certain seuil on peut afficher une alerte.
Voir l'échelle de qualité de l'air : https://waqi.info/

Pour manipuler les données récupérées il est parfois plus simple de créer des variables globales : par exemple pour manipuler la valeur aqi
On peut alors utilier une condition pour modifier l'affichage (couleurs ) ou afficher un message d'alerte.

Voir la correction

Cliquer pour voir la correction...

Quelques autres API