Présentation :

Cette première version de l’application permet d’afficher une carte avec un symbole à l’endroit où vous êtes et un deuxième à une adresse dictée au téléphone.

Ce que vous allez faire :

Cette leçon comprend deux parties :

1. la présentation des notions mises en oeuvre : capteurs, géolocalisation, services Web, URL (ou adresses des ressources sur internet) et API (Interface de Programmation Applicative).
2. la réalisation d’un programme simple qui utilise ces notions : reconnaissance vocale, géolocalisation et serveur de carte.

Dans cette première version de l'application vous allez géolocaliser deux points correspondant :

• à votre propre géo-localisation : Celle mesurée par les capteurs de votre téléphone : GPS, Wifi, etc.
• à un deuxième point localisé par son adresse : Vous allez dicter cette adresse au téléphone. Elle sera traitée par le composant de reconnaissance vocale.

Vous allez ensuite demander à un serveur Web, de vous renvoyer une carte avec votre localisation et celle de l'adresse dictée. Nous utiliserons un serveur de cartes dans un format image, vous afficherez l'iùmage renvoyée dans un cadre (ou canvas) :

1. la demande de carte est une adresse Web ou URL que vous allez construire en suivant les indications définies dans l’interface applicative ou API du serveur utilisé (ici Google static maps),
2. Dans cette adresse Web ou URL (Uniform Resource Locator) vous aller programmer les paramètres pour obtenir la carte que vous voulez.

Ce que vous allez apprendre :

Vous allez appréhender trois notions dont l’association dans un algorithme donne des possibilités de création illimitées :

1. l’utilisation des capteurs de votre téléphone dont delui de géolocalisation,
2. la notion de requête Web et la structure d’une URL ou adresse Web,
3. l’utilisation de l’interface applicative ou API d’un serveur Web.

Vous allez aussi expérimenter et tester le fonctionnment de votre application.
Vous verrez par exemple que la localisation par GPS n'est généralement pas disponible à l'intérieur des batiments. Vous devrez utiliser des outils de simulation ou configurer votre téléphone pour qu’il utilise un autre mode : la géo-localisation par les réseaux (Wifi, …) qui est aussi le mode "économie de batterie".

La réalisation de cette application est rapide (cf. vidéo). Il faut plus de temps pour expérimenter et approfondir les notions mises en œuvre. Elles sont présentées au début.

Réalisation (vidéo)

Le guide de réalisation est situé plus bas, après la présentation des notions utilisées

Présentation des Notions utilisées :

Cette application aborde des notions qui peuvent être nouvelles pour vous :

• Les capteurs dont celui de géo-localisation (qui ne se limite pas au GPS),
• La notion d’URL (Uniform Resource Locator) ou d’adresse Web,
• La notion d’API (ou Interface de Programmation d’Application).

Ces trois notions, vont donner des ailes à votre imagination.

Les capteurs

Les capteurs permettent à votre application de prendre en compte une information ou un évènement extérieurs. Ils peuvent fournir une information sous forme :

• de mesure, exprimée par une ou plusieurs valeurs :
  • la position, l’orientation, l’accélération, la rotation, la pression, etc.
  • les valeurs mesurées peuvent être des nombres, des chaines de caractères, une heure, ...
  • ce sont des propriétés du composant.
• d’évènement :
  • le changement d'une propriété ou de la valeur d’un capteur,
  • l’arrivée à échéance d’un sablier (timer) ou d’une horloge,
  • la reconnaissnce d’un code barre, avec le résultat sous forme de texte,
  • la reconnaissance d’un texte dicté au téléphone.

Les boutons, les cases à cocher, les zones de texte, etc. jouent un rôle équivalent à des capteurs. Ils sont créés et configurés dans la partie design, et rendent compte des interventions de l’utilisateur.

Nous verrons le capteur de géolocalisation dans le paragraphe suivant. Voyons ici à la reconnaissance vocale, qui permet de saisir un texte dicté au téléphone en analysant le son. Il est dans la catégorie des medias, mais c’est aussi un capteur comme le scanner de code barre (qui saisit un texte à partir d’une image).

Son utilisation est simple :

On lance son exécution avec le bloc :

L’arrivée du résultat provoque l’évènement, ci-contre où le texte reconnu est renvoyé dans le paramètre ou la variable résultat.

D'autres capteurs comme l'acccéléromètre, la géo-localistaion peuvent fonctionner en continu, une fois qu'ils ont été activés.

La géolocalisation et ses différents capteurs

La notion de localisation correspond généralement à un couple [latitude, longitude] exprimé en degrés.

Le capteur de localisation App Inventor fournit  une troisième information "a longitude latitude" qui est vraie ou fausse selon que le couple [latitude, longitude] est valide ou non.

La précision de localisation est exprimée en mètres dans le paramètre précision.

La localisation peut également être en trois dimensions, dans ce cas "a altitude" est vrai  et l’altitude complète la latitude et la longitude.

La notion de géo-localisation est plus générale. Ce peut être une adresse postale, une adresse internet (IP), Wifi (SSID), etc. La localisation de ce type d'adresse n'est pas le résultat d’un capteur mais de la consultation d'une base de données.  La conversion de l'adresse en coordonnées géographiques [latitude, longitude] peut être faite par des serveurs Web. Un bloc du composant de géolocalisation App Invento permet de converti une adresse postale en coordonnées géographiques (en utilisant un serveur). Il faut toutefois faire attention, la fonction peut sortir en erreur si l'adresse n'est pas reconnue ou bloquer l'application si internet n'est pas disponible.

Revenons pour l’instant au capteur de position. Il est souvent assimilé au GPS : c’est FAUX.
Le GPS n’est qu’une des techniques et il fonctionne très mal à l’intérieur des bâtiments, en particulier dans la pièce où vous développez. De plus, il réduit l’autonomie de votre batterie !
Vous serez donc probablement obligés d’utiliser des modes de localisation différents, comme le mode économie d’énergie alias battery saving ou network, et de configurer votre téléphone dans le mode approprié. Si la localisation de votre téléphone est configurée en mode GPS ou haute précision, la géo-localisation ne va pas probablement pas marcher à l’intérieur.

Pour comprendre pourquoi et découvrir ce qui se cache sous le capot, nous vous suggérons :

• cette vidéo et ces planches, qui présentent le sujet,
• ce quiz pour vérifier votre compréhension,
• cette application pour visualiser la constellation et la réception des satellites GPS,
• cette application pour aller plus loin et expérimenter les différentes configurations.

Nous nous limiterons ici à reprendre les points importants pour la suite :

• Le capteur de localisation dispose de plusieurs méthodes pour se localiserprincipalement :
  • le GPS,
  • les réseaux (Wifi, GSM, bluetooth, …),
  • et des méthodes hybrides
  • d'autres capteurs peuvent venir en appui : la boussole (champ magnétique), l'accéléromètre et le gyroscope.
• Qualité de fonctionnement :
  • La localisation par GPS fonctionne bien à l’extérieur, mais pas ou très mal à l’intérieur,
  • La localisation par les réseaux fonctionne bien en ville y compris à l’intérieur des bâtiments. Elle fonctionne mal (ou avec une mauvaise précision) à la campagne.
• Configuration :
  • mode de localisation par réseau / Wifi,... :
    Dans les paramètres de configuration de votre téléphone ou tablette, ce mode correspond au mode "économie de batterie" ou "battery saving". C’est en général le mode à privilégier pendant les développements. Le Wifi de votre téléphone ou de votre tablette doit être activé.
    (Dans les propriétés du composant App Inventor (propriété fournisseur ou provider), ce mode correspond à « réseau » ou « network »)
  • mode de localisation par GPS :
    Dans les paramètres de configuration de votre téléphone ou tablette, ce mode correspond à "device only" ou "appareil uniquement".
    (Dans les propriétés du composant App Inventor, ce mode correspond au provider "GPS")
  • Il existe un troisième mode "high precision" ou "haute précision" dans la configuration de votre téléphone. Il utilise la meilleure localisation disponible.
    
    Par contre, dans App Inventor, il ne donne un résultat que si le GPS fonctionne. Il ne fournit pas de mesure, même si la localisation est très bonne avec les réseaux. Donc - pour App Inventor - c'est la même chose que le mdoe GPS.

  Enfin, vous pouvez installer sur votre smartphone, un simulateur de GPS pour faire croire à votre application, que vous êtes à l’endroit indiqué sur une carte. Vous en trouverez sur le playstore qui sont gratuits avec de la publicité. Dans les vidéos et les essais j'utilise "GPS Emulator" pour simuler la position des intervenants pendant les tests.

  Les serveurs et les adresses URL

  Les informations que nous obtenons d’internet sont fournies par des serveurs à qui nous envoyons des demandes par l’intermédiaire d’une adresse internet ou URL : Uniform Ressource Locator.

  Cette vidéo vous propose une présentation ou un rappel des notions d’internet et de web.

  Une URL ou adresse Web, est la référence à une ressource qui précise l’endroit où la trouver sur le web et un mécanisme pour la récupérer. Le plus souvent,  les URL référencent des pages Web (http),mais on les utilise aussi avec d’autres protocoles comme le transfert de fichiers (ftp), les email (mailto), l’accès aux bases de données (JDBC), ou d’autres applications.

  Par exemple l’URL que nous utiliserons pour obtenir une carte comprend :

  • un protocole: (http ou https)
  • un hôte: (maps.googleapis.com),
  • un chemin : (/maps/api/staticmap)
  • une requête : (center=37.7,-122.4&size=320x320&zoom=14&maptype=roadmap),
  https://maps.googleapis.com/maps/api/staticmap?center=37.77,-122.45&size=320x320&zoom=14&maptype=roadmap

  La partie 'requête' précise le contenu. Elle suit l’hôte et le chemin, et - dans notre cas - commence après le point d’interrogation “?”. Les paramètres sont codés sous forme de couple  champ/valeur (ou field/value pairs)  séparées par un  "&" :

                   field1=value1&field2=value2&field3=value3...

  La liste des champs et des valeurs possibles est définie par chaque serveur web dans son API : Application Programming Interface. Dans l’exemple d’URL ci-dessous, le champ appelé “center” a pour valeur “37.777,-122.451” et le champ “size” a pour valeur “320x320”.

  https://maps.googleapis.com/maps/api/staticmap?center=37.777,-122.451&size=320x320&zoom=14&maptype=roadmap

  Vous pouvez copier/coller cette URL dans la barre d’adresse de votre navigateur, puis modifier la latitude et la longitude du centre ou le facteur de zoom.

  Quand un champ contient des valeurs multiples, on utilise un second séparateur. La barre verticale ‘|’ peut séparer les coordonnées des points de symboles (markers) dans une carte. C'est le cas dans l’exemple suivant où le champ markers comprend des valeurs multiples

  &markers=color:blue|label:x|37.78,-122.46|37.77,-122.46|37.78,-122.45

  Nota : D’autres formats n’utilisent pas “ ? & | ". Par exemple Open Street Maps ou Google maps (cf. ci-dessous), mais l’organisation générale de l’URL est similaire.

  http://www.openstreetmap.org/#map=17/48.83577/2.30503&layers=H
  https://www.google.fr/maps/@37.7760491,-122.4488144,16.9z

  L’encodage d’URL :

  Certains caractères ont une signification particulière dans une URL : ce sont des  “caractères réservés”. Par exemple, la barre d’espace est un séparateur dans les messages HTTP. Donc on ne peut pas les utiliser tels quels dans la requête d’une URL. Pourtant on en a besoin, par exemple pour écrire une adresse!

  Ces caractères interdits ou “réservés” sont donc remplacés par un %  suivi de la valeur hexadécimale de ce caractère. Ce remplacement est ce que l’on appelle "L’encodage URL ou URI". Le remplacement est obligatoire pour les caractères “réservés” et recommandé pour d’autres qui ne sont ni dans la liste des caractères réservés ni dans la liste des caractères  “Non réservés”.
  La barre d’espace (qui est le caractère réservé le plus fréquent) peut aussi être remplacé par ’+’.

  Liste des caractères réservés et de leur encodage hexadécimal

  !	#	$	&	'	(	)	*	+	,
  %21	%23	%24	%26	%27	%28	%29	%2A	%2B	%2C
  /	:	;	=	?	@	[	]
  %2F	%3A	%3B	%3D	%3F	%40	%5B	%5D

  Liste des caractères recommandés (ils ne sont ni réservés ni Non réservés)

  Newline	space	"	%	-	.	<	>
  %0A or %0D or %0D%0A	%5E	%5F	%60	%7B	%7C	%7D	%7E
  \	^	_	`	{	|	}	~
  %0A or %0D or %0D%0A	%5E	%5F	%60	%7B	%7C	%7D	%7E

  A titre d’exemple, l’encodage de

  la chaine : &markers=color:blue|label:x|37.78,-122.46|37.77,-122.46|37.78,-122.45
  donnera : &markers=color:blue%7Clabel:x%7C37.78,-122.46%7C37.77,-122.46%7C37.78,-122.45

  et            “University of San Francisco” 
  donnera “University%20of%20San%20Francisco” 
  ou          “University+of+San+Francisco”

  Dans App Inventor, l’encodage URL se fait avec le bloc encoder.URI du composant Web.

  Les API : Interfaces de Programmation Applicative

  L’API d’un serveur définit la manière de lui exprimer une demande. Dans notre application nous allons utiliser trois serveurs et trois API :

  • un serveur de carte, Google static maps,  pour obtenir des cartes sous forme d’images,
  • un serveur d’itinéraires Google directions API pour calculer des itinéraires (format XML),
  • un serveur de géocodage Google Geocoding API pour convertir une localisation géographique en adresse (format XML).

  Pour l’instant, nous allons voir le premier. Nous verrons les deux autres beaucoup plus tard.

  Rendez-vous sur internet à l’adresse qui documente l’API de ce serveur.

  Copiez/collez l’URL donnée en exemple à la première page, (sans les derniers caractères sur la clef &key=YOUR_API_KEY) dans la barre d’adresse de votre navigateur préféré. Une carte sera affichée.
  https://maps.googleapis.com/maps/api/staticmap?
  center=Brooklyn+Bridge,New+York,NY&zoom=13
  &size=600x300
  &maptype=roadmap
  &markers=color:blue%7Clabel:S%7C40.702147,-74.015794
  &markers=color:green%7Clabel:G%7C40.711614,-74.012318
  &markers=color:red%7Clabel:C%7C40.718217,-73.998284

  La lecture de la documentation va vous permettre de comprendre l'URL et la modifier en l’éditant directement dans la barre d’adresse et ensuite dans votre programme.

  L’URL commence par le protocole, l’adresse de l’hôte puis le chemin jusqu’au point d’interrogation : 
  https://maps.googleapis.com/maps/api/staticmap?

  Puis on trouve une série de couples "champ=valeur" séparés par des &

  • le centre avec une adresse à Brooklyn où les blancs sont remplacés par des +
  • le facteur de zoom (de 1 à 20)
  • la taille de la carte affichée en pixels
  • son type ici "roadmap". (essayez "satellite")
  • des markers avec des données multiples séparées par des %7C, la valeur encodée des barres verticales.

  Prenez une quinzaine de minutes pour lire la documentation et vous exercer à modifier l’exemple ci-dessus ou en créer d’autres. 

  Nota :

  (Vous verrez peut être que les navigateurs sont tolérants sur l’encodage. Ils savent que vous demandez une adresse Web, donc corrigent parfois des erreurs d’encodage. Mais ce ne sera pas le cas dans vos programmes).

  Lorsque vous avez une carte qui vous plait, créez un projet sur App Inventor avec un cadre de la taille de votre image (par exemple 320x320), et mettez votre URL comme image de fond du cadre. Ajoutez éventuellement une balle et un évènement qui la déplace.

  
  https://maps.googleapis.com/maps/api/staticmap?center=Eiffel+tower&zoom=16&size=320x320

  Réalisation

  Vidéo : voir ci-dessus

  Ressources en entrée :

  Dans cette première version de l'application, vous pouvez démarrer en créant un nouveau projet.

  Conception et Pseudo-code

  Cette première version de l’application est assez simple. Pour autant, il reste important de formaliser ce que l’on va faire avant de commencer à coder.

  Du côté "design" ou interface utilisateur, faites un dessin sommaire avec des explications qui indiquent ce que vous allez faire et ce à quoi correspond chaque partie de l’interface.

  Exercice suggéré

  • Présentez votre dessin à un collègue.
    Vous avez 20 secondes pour lui dire de quoi il s’agit
  • Laissez lui le temps de l’examiner
  • Demandez lui de dire ce qu'il comprend de ce que vous allez faire
    (Ici la question est surtout savoir si c'est clair, pas si c’est intéressant ou utile – pour ça on verra plus tard)
  • puis laissez le poser les questions. Répondez brièvement,

  Précisez ensuite ce qui doit l'être dans le dessin, et identifiez les composants et fonctions sous-jacents.

  Du côté programmation, écrivez en langage clair ce qui se passe pour chaque évènement (pseudo-code) et les fonctions ou procédures majeures :

  • Quandl’application démarre :
    • afficher un bouton, une zone de texte et un cadre vide au départ
  • Quand on clique sur le bouton :
    • lancer le service de reconnaissance vocale
  • Quand le service de reconnaissance vocale renvoie le résultat :
    • afficher l’adresse reconnue dans la zone de texte
    • afficher la carte (procédure ci-dessous)
  • Procédure ou fonction afficher la carte :
    • définir l’URL de la carte avec deux symboles(markers) pour sa localisation et à celle de l’adresse dictée (on va préciser ce point un pu lus loin),
    • puis l’afficher en assignant cet URL à l’image de fond du cadre.

  Truc : Ecrivez ce que vous allez faire avant de commencer à le faire.Relisez à haute voix et si vous pouvez, faites-le à deux. Vous verrez, dans 15 jours vous irez plus vite et plus loin que ceux qui zappent cet exercice.

  Design

  

  composant	Groupe	Nom	Rôle fonctionnel
  Arrangement horizontal	Disposition	ArgtHor1	Encapsule la zone de texte et le bouton pour la reconnaissance vocale de l’adresse Hauteur : automatique Largeur : remplir parent
  Zone de texte	Interface utilisateur	ZoneTexteAdresse	Zone de texte dans laquelle on va afficher et permettre d’éditer l’adresse dictée. Hauteur : automatique Largeur : remplir parent
  Bouton	Interface utilisateur	BoutonRecoAdresse	Bouton de lancement d’écoute et reconnaissance de l’adresse dictée par l’utilisateur Hauteur : automatique Largeur : automatique : Texte : Go
  Cadre	Interface utilisateur	CadreCarte	Cadre dans lequel la carte (dans un format image) sera affichée Hauteur : remplir parent Largeur : remplir parent
  Notificateur	Interface utilisateur	Notificateur1	Composant permettant d’afficher des messages. (Il ne sera pas utilisé dans l’application elle–même, mais c’est un composant dont on a presque toujours besoin, en particulier dans la phase de débogage de l’application.
  Reconnaissance vocale	Media	RecoVocale	Composant utilisé pour traduire en texte, l’adresse dictée par l’utilisateur.
  Capteur Position	Capteurs	CapteurPosition	Composant de géolocalisation dont la configuration doit être vérifiée sur votre téléphone (cf. Paramètres/Localisation). Pour les essais l’intérieur, passez en mode "économie de batterie" qui correspond au mode "network" Intervalle de distance : 10 (m) Intervalle de temps : 60000 (ms)
  Web	Connectivité	Web1	Composant (non visible) utilisé ici pour encoder l’adresse en URL avec la fonction : encoder URI Ce composant n’est PAS utilisé pour récupérer la carte par son URL, car c et URL est utilisé directement comme un nom de fichier.

  Programmation : variables, évènements, procédures

  Variables globales	type	Contenu
  URL nota : Il aurait mieux valu définir cette variable dans la procédure afficherLaCarte (plutôt qu’au niveau global)	Texte	L’URL est l’adresse sur le Web de la carte que l’on demande. Son contenu est défini dans la documentation de l’interface (API) du serveur utilisé : https://developers.google.com/maps/documentation/static-maps/intro?hl=fr Son format doit respecter les règles d’encodage d’adresse qui interdisent certains caractères dont les blancs. LA conversion dans ce format est effectuée par la fonction encoder URI qui est dans le composant Web.

  
  

  Evènement	Paramètres et actions déclenchées (script)
  Quand BoutonRecoAdresse.Clic	Déclenche un appel à la reconnaissance vocale. Cette reconnaissance déclenchera ensuite l’évènement Quand RecoVocale.Après obtention Texte
  Quand RecoVocale.Après obtention Texte (ou Quand RecoVocale.Got Text)	Cet évènement est déclenché à réception du résultat de la reconnaissance vocale
  Quand CadreCarte.Touché	Cet évènement va déclencher un rafraichissement de la carte par un appel à la procédure afficherLaCarte

  
  

  Procédure	entrées	sorties	Rôle fonctionnel
  afficherLaCarte			Cette procédure affiche la carte. A partir des règlesdéfinies dans l’API (https://developers.google.com/maps/documentation/static-maps/intro?hl=fr ), elle construit l’URL de la carte avec deux symboles (markers) aux endroits demandés, Puis l’affecte comme image de fond au cadre de la carte. (C’est App Inventor qui se chargera de récupérer les données comme si c’était un fichier image)

  Codage de l’application

  

  Ayant vu plus haut tous les concepts mis en œuvre, la réalisation est rapide :

  • Le clic sur le bouton déclenche la reconnaissance vocale
  • Lorsque l’adresse et reconnue (.after getting ou .texte reconnu) elle est affichée et on appelle la procédure d’affichage de la carte
  • De même si on touche le cadre, on affiche la carte.
  • Dans la procédure d’affichage, on construit d’abord l’URL avec l’adresse du serveur jusqu’au point d’interrogation, suivi des couples "champ =valeur" séparés par "&" avec le type de carte (roadmap pour une carte routière
    • la taille (largeur et hauteur) qui est celle du cadre
    • un marker de couleur bleue à l’adresse ci-dessus (après encodage)
    • et SI la géolocalisation est valide, un marker rouge à notre position (en utilisant la barre verticale comme séparateur entre les données).
  • enfin l’URL qui renvoie une image est affectée comme image de fond au cadre.