Bonjour l'application que l'on va réaliser consiste à afficher

sa propre position sur une carte

et une seconde position que l'on va dicter au téléphone.

Voilà comment l'application va se présenter :

je vais cliquer sur GO le bouton en haut à droite, et je vais lui donner une adresse.

Place de la Concorde

Voilà, il a affiché la place de la Concorde avec une icône bleue

et il a affiché ma propre position

en rouge, en bas

Je réessaye :

Médiathèque Marguerite Yourcenar

Voilà, il a affiché la médiathèque qui est en bleu ici, et puis ma position

toujours, en bas

Un dernier essai :

Bibliothèques sans frontières à Montreuil

Voilà, il a affiché Bibliothèques Sans Frontières qui est ici et ma position

Voilà. Donc on va maintenant passer à la réalisation de cette application.

On va commencer par la partie Design, c'est à dire la conception de

l'interface utilisateur et la sélection des ressources

dont on aura pour l'application.

Dans l'interface utilisateur, on a besoin d'une zone de texte pour afficher l'adresse

et d'un bouton pour déclencher la reconnaissance vocale.

Pour la carte on a besoin d'un cadre pour l'afficher.

Ensuite au niveau des composants de service, on va avoir besoin d'un

composant de géolocalisation pour identifier notre position,

et un composant de reconnaissance de la parole

pour reconnaître l'adresse.

Ces deux composants de service seront complétés par un composant Web

qui va nous aider à mettre en forme l'adresse internet de l'image,

et un notificateur qui va nous permettre d'afficher les erreurs éventuelles.

Alors passons à la programmation.

On va mettre en haut de l'écran une zone de texte dans laquelle

on va afficher l'adresse et un bouton.

Cette adresse et ce bouton on va les mettre dans un arrangement horizontal

pour qu'ils soient l'un à côté de l'autre. Donc un arrangement horizontal

de largeur maximale, "remplir parent"

dans lequel on va mettre une zone de texte,

une zone de texte qui est ici,

et un bouton

le bouton on va l'appeler GO.

Et la zone de texte, on va lui demander qu'elle ait une largeur maximale

et on va lui dire "remplir parent" également.

Après

ce bouton go qui va nous permettre de déclencher la reconnaissance vocale

et cette zone de texte qui va nous permettre d'afficher l'adresse,

on a besoin d'une zone dans laquelle on va afficher la carte sous forme d'image.

pour afficher une carte sous forme d'image, il nous faut un composant cadre

Ce composant cadre on va le mettre de hauteur maximale "remplir parent"

et de largeur maximale "remplir parent" également,

comme ça on aura une carte "plein écran"

On a ensuite eu besoin de plusieurs composants.

On va prendre un notificateur au cas où on aurait besoin d'afficher

des messages temporaires,

et on aura besoin d'un outil de reconnaissance vocale

donc ici

où est-ce qu'il est passé ? Non il est dans les media

cet outil de reconnaissance vocale

et le voilà : on met un outil de reconnaissance vocale.

On aura également besoin

d'un outil de localisation, et ça c'est un capteur,

on va mettre un capteur de position.

Dernier point dont on aura besoin, on verra,

c'est un composant de connectivité Web.

Voilà, j'ai terminé la mise en place des composants et de l'interface

je vais maintenant passer à la programmation des blocs.

Le premier événement auquel je dois réagir, c'est quand j'appuie sur le bouton.

Donc quand je clique sur le bouton, que dois-je faire ?

je dois demander au téléphone d'écouter ce que je dis et de reconnaître l'adresse,

donc je vais utiliser la reconnaissance vocale,

et elle va me traduire ce que je dis en texte: l'adresse.

L'événement suivant, c'est quand cette reconnaissance vocale donne le résultat.

Dans ce cas-là je vais afficher cette adresse dans la zone de texte,

00:04:03,379 --> 00:04:05,609

et je vais appeler la fonction

qui va visualiser ma carte dans le cadre.

Alors, la boîte à texte d'abord, ici. Donc je vais dire que la zone de texte

doit afficher (dans sa propriété "texte"), ce qui correspond au résultat

c'est à dire l'adresse qui a été reconnue par la reconnaissance vocale,

et ensuite je dois appeler la visualisation de la carte.

Pour faire ça, je vais créer une fonction.

Une fonction que je vais appeler "afficher la carte"

et cette fonction "afficher la carte", je vais l'appeler

après avoir affiché la zone de texte.

On va maintenant

coder la fonction ou la procédure afficher la carte.

Pour afficher cette carte, il suffit de dire que l'image de fond du cadre

est égale au nom du fichier où de la ressource qui contient cette carte.

Et ce nom, on va l'appeler URL.

qui est l'abréviation de Uniform Resource Locator utilisé

pour désigner l'endroit où trouver une ressource sur Internet.

Eh bien maintenant, il n'y a plus qu'à trouver un serveur qui nous fournisse la carte quand on lui demande cet URL.

Un des serveurs qui répond à notre besoin, c'est le serveur de cartes statiques Google

dont l'adresse internet est affichée ici.

Alors vous pourrez lire la documentation, mais on va aller directement

voir un exemple, celui d'une carte à New York dont je copie ici l'URL

pour la mettre dans un navigateur, je clique, et je vois apparaître la carte

correspondant à cet URL.

Donc ce que nous devons faire maintenant c'est écrire l'URL

correspondant à la carte que nous voulons afficher.

Cette URL commence par l'adresse générale du serveur : https//maps.googleapis.com

jusqu'au point d'interrogation

ensuite on va trouver des paramètres de la carte, le centre, le facteur de zoom

la taille de la carte, le type, par exemple une carte routière,

et ensuite les marqueurs que je veux afficher.

Dans notre cas, comme on a 2 marqueurs, le centre et le facteur de zoom

seront calculés automatiquement donc nous n'aurons pas besoin de les mettre.

Donc maintenant on va écrire l'URL de la carte correspondant à celle

que l'on veut afficher.

Alors, allons y, programmons ces éléments là.

La taille ici que j'ai décomposée, on va dire que la taille

de l'image c'est la largeur du cadre

donc on prend le cadre

dont on va sélectionner la largeur

et la hauteur.

et on va mettre ces informations ici

Pour le marqueur correspond à l'adresse

Cette adresse on va la trouver dans la zone de texte

donc la propriété "texte" de la zone de texte.

Voilà, mais ce texte on ne vas pas pouvoir le mettre directement dans l'URL

puisque dans une adresse, il peut y avoir des blancs

et un certain nombre de caractères qui ne sont pas acceptés dans une URL.

Donc on va utiliser une fonction ce qui est présente dans le Web

qui est l'encodage URI.

On "Encode URI" cette adresse, et on va pouvoir la mettre ici.

La dernière chose à faire c'est d'afficher nos propres coordonnées

dans le deuxième marqueur.

Ces coordonnées, elles sont disponibles sous forme de latitude et longitude

dans le capteur de localisation. Donc la latitude, ici

je vais aussi prendre la longitude,

et je vais prendre une troisième information qui va me permettre de savoir

si ces deux informations précédentes sont valides. Elle s'appelle "aLongitudeLatitude"

la latitude je la mets ici la longitude, ici

donc là, je vais afficher un marqueur à ces coordonnées là

par contre, il faut que ces coordonnées soient valides,

ce que cette information nous permet de vérifier

donc, je vais introduire un test logique, ici

Si les coordonnées sont valides,

alors j'affiche ces coordonnées dans le marker et

si ces coordonnées ne sont pas valides,

alors je n'affiche rien pour le deuxième marqueur.

Finalement ce qui nous reste à faire c'est mettre cet URL

dans la routine d'affichage de la carte et je peux aussi supprimer

ces blocs de commande initiaux

qui ne sont pas utiles.

Notre programme est cette fois ci complètement terminé

sauf que l'on va peut-être faire une toute petite chose tête de la toute petite chose :

on va dire que si on touche le cadre (canevas), ou le cadre

on va rafraichir.

Si le canevas est touché, alors on va appeler la procédure "afficher la carte"

donc il suffira de toucher le cadre pour rafraichir l'écran

en particulier si on a changé de localisation.

On va maintenant tester, donc je vais faire apparaitre le téléphone portable

à l'écran pour que vous le voyez, et puis je vais me connecter

au compagnon app Inventor et de la même manière sur le téléphone, je clique et je lance le scan.

Alors là je pointe vers le flashcode

comme

c'est fait

et

on est prêt à fonctionner. donc je vais appuyer sur GO et je vais donner une adresse.

Place de la Concorde

Voià, il m'a affiché, en bleu la Place de la Concorde et en rouge ma localisation.

je peux recommencer

Place de l'arc de triomphe.

Donc, on a une application qui marche. Ce à quoi il faut être particulièrement vigilant

c'est que votre téléphone

est proprement configuré et je vous signale en particulier que

si vous travaillez à l'intérieur il est absolument essentiel, que vous

configuriez votre téléphone en mode "économie d'énergie"

ce qui est mon cas ici,

parce que le GPS ne fonctionne pas à l'intérieur,

donc si vous vous mettez en mode haute précision

eh bien vous n'aurez pas votre propre localisation.