Bonjour,
L'application que l'on va réaliser consiste à afficher sa posistion 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 et dicter une adresse au téléphone.
Place de la Concorde
Voilà, il a affiché la place de la Concorde
avec une icone bleue et 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 ma position 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 besoin 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 d'un composant de reconnaisance de la parole, pour reconnaitre 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 qui est ici,
voici,
et un bouton que l'on va appeler "GO".
la zone de texte, on va lui demander qu'elle ait une largeur maximale (remplir parent).
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). Comme ça, on aura une carte en plein écran.
On aura ensuite besoin d'autres 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,
où est-ce qu'il est passé ? il est dans les media,
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 composant dont on aura besoin, on le verra,
c'est un composant de connectivité web.
Voilà, j'ai terminé la mise en place des composants e de l'interface,
je vais maintenant passer à la programmation des blocs.
Le premier évènement auquel je dois réagir,
c'est quand je clique 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 reconnaitre l'adresse.
Donc je vais utiliser la fonction de reconnaissance vocale,
et elle va me traduire ce que je dis en texte pour l'adresse.
L'évènement suivant c'est quand cette reconnaissance vocale donne le résultat,
Dans ce cas, je vais afficher l'adresse dans la zone de texte,
et je vais appeler la fonction qui va visualiser la carte dans le cadre.
Alors : la zone de texte d'abord.
Donc je vais dire que la zone de texte doit afficher 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 le faire, je vais créer une fonction,
Je vais nommer cette fonction "afficherLaCarte".
et cette fonction "afficherLaCarte",
je vais l'appeler après avoir affiché la zone de texte.
On va maintenan coder la fonction ou la procédure "AfficherLaCarte".
Pour afficher la carte, il suffit de dire que l'image de fond du cadre
est égale au nom du fichier ou de la ressource qui contient cette carte.
Je vais désigner ce nom avec une variable que je vais appeler URL.
C'est l'abréviation de "Uniform Resource Locator"
qui est la manière de désigner une ressource à laquelle on accède sur le Web.
Je vais l'initialiser à rien "",
et je vais mettre cette variable, comme valeur en entrée de l'image de fond.
Maintenant, ce qu'il faut que je fasse, c'est que je crée cet URL
pour récupérer une carte.
Eh bien il faut trouver un serveur qui nous fournisse cette carte
quand on lui demande le bon URL.
Il y a un serveur 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. Nous allons directement voir
un exemple, celui d'une carte à New York,
dont je copie l'URL pour la mettre dans un navigateur.
Je clique et je vois apparaitre la carte correspondant cet URL.
Donc, ce que nous devons faire maintenant,
c'est écrire l'URL correspondant à la carte que nous voulons afficher.
cet URL elle commence par l'adresse générale du serveur :
https://maps.googleapis.com/ jusqu'au point d'interrogation.
ensuite on va trouver les 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 ou a deux marqueurs,
le centre et le facteur de zoom peuvent être calculés automatiquement,
donc nous n'aurons pas besoin de les mettre.
Donc maintenanat on va écrire l'URL de la carte correspondant à celle que l'on veut afficher.
Donc on va revenir aux blocs et on va afficher le plan de l'URL.
et on va construire la variable URL
comme la concaténation de textes avec dans chaque partie,
les différentes parties de l'adresse que l'on veut donner.
Dans ces chaines de caractères, on va mettre l'entête,
puis le type de carte,
puis la taille,
puis les deux marqueurs..
et on le fait par copier/coller à partir du modèle d'URL
que nous avons vu tout à l'heure.
Alors l'URL est constitué d'un entête suivi d'une série de couples (paramètre, valeur),
par exemple "maptype=roadmap"
et ces coupls de (paramètre, valeur) sontt séparés apr un "&",
sauf le prmeir qui suit immdiatement le "?".
Il faut faire attention également à l'absence de blnc ou de caractères spéciaux
qui peuvent perturber l'URL.
Si on fait tourner ce programme, il va déjà marcher,
mais toujours avec la même carte et une forme bizarre.
Cet URL, j'ai contniué à la décomposer
jusqu'à faire apparaitre dans des champs séparés,
chacune des variables à programmer
la largeur et la hauteur de la carte,
l'adresse du premier marqueur
et la latitude et la longitude du second.
ALors, allons y, programmons ces éléments.
La largeur d' l'image on va dire que c'est la largeur du cadre,
On va donc prendre les prpriétés largeur et hauteur du cadre.
et on va mettre ces informations dans la vleur du paramètre "size" .
Pour lemarqueur correspondant à l'adresse,
on va trouver cette adresse dans la zone de texte,
sous la propriété "texte".
Mais ce texte, on ne va pas pouvoir le mettre directement dans l'URL,
car dans une adresse il peut y avoir des blancs
et d'autres caractères qui ne sont pas acceptés dans un URL.
Donc on va utiliser une fonction qui est disponible dans le composant "Web"
C'est la fonction "Encodage URI".
Donc on "encode URI" l'adresse
et on peut mettre le résultat comme adresse dans le premier marqueur.
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, et la longitude.
Et je vais prendre une troisème information
qui va me permettre de savoir si les deux précédentes sont valides.
Cette 3° information s'appelle "aLongitudeLatitude".
Je mets la latitude à l'endroit prévu du second marqueur,
de même pour la longitude.
Donc, avec cet URL, je vais afficher un marqueur à ces coordonnées.
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.
si les coordonnées sont valides,
alors j'affiche ces coordonnées dans le marqueur,
et si ces coordonnées ne sont pas valides,
alors je n'affiche rien pour le 2° marqueur.
Finalement, ce qui me reste à faire, c'est mettre cet URL
dans la routine d'affichage de la carte,
et je peux aussi supprimer les blocs de commandes qui sont inutiles.
et notre programmae est ici complètement terminé,
sauf que l'on va peut-être faire une toute petite chose.
On va dire que si on touche le canevas,
on va rafraichir. Si le canevas (cadre) est touché,
alors on appelle la procédure "afficherLaCarte".
Donc il suffira de toucher le canevas (ou 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épéhone portable à l'écran
pour que vous le voyez,
puis je vais me connecter au companion App Inventor
et de la même manière sur le téléphone, je clique et je lance le scan.
Je pointe vers le flashcode.
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 correctement configuré.
Je vous signale en particulier que si vous travaillez à l'intérieur,
et il est essentiel de configurer votre téléphone en mode "économie de batterie",
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 prpre localisation.