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,
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.