T6 paris maptour

TEMA 6 1/10
Paris Map Tour
En aquest tema, construiràs una aplicació que et permet crear la teua pròpia guia
personalitzada per a un viatge de somni a París. I ja que alguns dels seus amics no
poden unir-se, crearem una aplicació que els permet fer un recorregut virtual de
París també. La creació d'una aplicació amb un mapa complet pot semblar molt
complicat, però App Inventor li permet utilitzar el component ActivityStarter per
llançar Google Maps per a cada ubicació virtual. En primer lloc, construiràs una
aplicació que llança mapes de la Torre Eiffel, el Louvre i Notre Dame amb un sol clic.
A continuació, podràs modificar l'aplicació per crear una visita virtual de mapes de
satèl·lit que també estan disponibles a partir de Google Maps.
El que aprendràs
Aquest tema presenta els següents components i conceptes d'App Inventor:
• El component d'iniciació d'activitats per al llançament d'altres aplicacions
d'Android des de la seua aplicació. Anem a utilitzar aquest component per
llançar Google Maps amb diferents paràmetres.
• El component ListPicker per permetre a l'usuari triar d'una llista
d'ubicacions.
Disseny dels components
Crear un nou projecte en el App Inventor anomenat
"ParisMapTour". La interfície d'usuari de l'aplicació té un
component d'imatge amb una foto de Paris, un
component Label amb text, un component ListPicker que
ve amb un botó associat, i un component ActivityStarter
(no visible). Pots dissenyar els components utilitzant la
instantània a la Figura 6-1.
Els components enumerats en la Taula 6-1 es van
utilitzar per crear la finestra de disseny. Arrossega cada
component a la paleta en el visor i deixa el nom com
s'especifica.
Figura 6-1. La aplicació Paris
Map Tour en l'emulador

TEMA 6 2/10
Taula 6-1. Components per a Paris Map Tour
Component Paleta Nom assignat Objectiu
Image Basic Image1 Mostra una imatge estàtica d'un mapa
de París a la pantalla.
Label Basic Label1 Mostra el text "Descobrir París amb el
seu Android!"
ListPicker Basic ListPicker1 Obriu la llista d'opcions de destinació.
ActivityStarter Other
stuff
ActivityStarter1 Inicieu l'aplicació Mapes en un destí que
es triï.
Definir les propietats de ActivityStarter
ActivityStarter és un component que et permet llançar qualsevol aplicació d'Android,
un navegador, Google Maps, o fins i tot una altra de les teues pròpies aplicacions.
Quan un usuari inicia una altra aplicació de la seva aplicació, pot fer clic al botó
Enrere per tornar a l'aplicació. Vas a construir ParisMapTour perquè l'aplicació
Mapes es llança per mostrar mapes particulars basades en l'elecció de l'usuari.
L'usuari pot prémer el botó de nou per tornar a l'aplicació i triar una destinació
diferent.
ActivityStarter és un component relativament de baix nivell en què hauràs d'establir
algunes propietats amb la informació familiar a un Java SDK d'Android programador,
però aliè als altres 99,999% del món. Per aquesta aplicació, especifiqui les
propietats que s'especifiquen a la Taula 6-2, i anar amb compte, fins i tot les lletres
majúscules/minúscules són importants.
Taula 6-2. Propietats ActivityStarter per al llançament de Google Maps
Propietat Valor
Action android.intent.action.VIEW
ActivityClass com.google.android.maps.MapsActivity
ActivityPackage com.google.android.apps.maps
En l'Editor de Blocs, hauràs de definir una propietat més, DataUri, que li permet
llançar un mapa específic a Google Maps. Aquesta propietat s'ha d'establir en
l'Editor de Blocs en lloc del Dissenyador de components, ja que ha de ser dinàmica,
que canviarà en funció de si l'usuari decideix visitar la Torre Eiffel, el Louvre o la
catedral de Notre Dame.
Arribarem a l'Editor de Blocs en un moment, però hi ha un parell de detalls a tindre
en compte abans de poder passar a programar el comportament dels seus
components:
1. Baixeu el fitxer metro.jpg des de la Carpeta Recursos6 del tema 6 en l'equip i,
a continuació seleccioneu Add a la secció Media per a carregar en el seu
projecte. A continuació, hauràs de configurar-lo com la propietat Picture
d'Image1.
2. El component ListPicker ve amb un botó, quan l'usuari fa clic, les opcions
s'enumeren. Estableixi el text d'aquest botó per a canviar la propietat Text de
ListPicker1 a "Triar destinació París".

TEMA 6 3/10
Afegir comportaments als Components
En l'Editor de Blocs, haurà de definir una llista de destinacions i dues
comportaments:
• Quan l'aplicació s'inicia, l'aplicació càrrega les destinacions al component
ListPicker per a que l'usuari en pugui triar un.
• Quan l'usuari selecciona una destinació de la ListPicker, l'aplicació Maps
s'inicia i mostra un mapa d'aquest destí. En aquesta primera versió de
l'aplicació, acabes d'obrir mapes i dir-li que s'executi una recerca de la
destinació triada.
Creació d'una llista de destinacions
Obriu l'Editor de Blocs i crear una variable amb la llista de les destinacions de París
utilitzant els blocs que figuren a la Taula 6-3.
Taula 6-3. Blocs per crear una variable de destinacions
Tipus de Bloc Calaix Objectiu
def variable ("Destinacions") Definitions Crear una llista de les destinacions.
make a list Lists Afegiu els elements a la llista.
text ("Tour Eiffel") Text El primer destí.
text ("Musée du Louvre") Text El segon destí.
text ("Cathédrale Notre Dame") Text El tercer destí.
La variable destinacions cridarà la funció make a list, en la qual es pot connectar els
valors de text per a les tres destinacions de la seva gira, com es mostra a la Figura
6-2.
Figura 6-2. Creació d'una llista és fàcil en App Inventor

TEMA 6 4/10
Deixar que l'usuari triï una destinació
El propòsit del component ListPicker és per mostrar una llista d'elements per a que
l'usuari trie. Precarregaràs les opcions al ListPicker mitjançant l'establiment de la
propietat Elements to a list. Per aquesta aplicació, que desitja establir la propietat
ListPicker els elements a la llista de destinacions que acabeu de crear. Com que vol
mostrar la llista quan l'aplicació s'inicia, podràs definir aquest comportament en
Screen1.Initialize. Necessitaràs els elements que figuren a la Taula 6-4.
Taula 6-4. Blocs per al llançament de la ListPicker quan s'inicia l'aplicació
Screen1.Initialize Screen1 Aquest esdeveniment s'activa quan s'inicia
l'aplicació.
set ListPicker1.Elements to ListPicker1 Establiu aquesta propietat a la llista que voleu
que aparegui.
global destinations My Definitions La llista de destinacions.
Com funcionen els blocs
Screen1.Initialize s'activa quan l'aplicació s'inicia. Com es mostra a la Figura 6-3, el
controlador d'esdeveniments estableix la propietat Elements de ListPicker de
manera que els tres destins apareixeran.
Figura 6-3. Posa el que vulguis que succeeixi quan l'aplicació s'inicia en un controlador d'esdeveniments
Screen1.Initialize
Posa a prova la teva app. En primer lloc, hauràs de reiniciar
l'aplicació fent clic a "Connect to Device ..." de l'Editor de Blocs.
Després, al telèfon, feu clic al botó "Triar destinació París". El
selector de llista ha d'aparèixer amb els tres punts.

TEMA 6 5/10
Mapes d'obertura amb una recerca
A continuació, podràs programar l'aplicació perquè quan l'usuari tria una de les
destinacions, la ActivityStarter llança Google Maps i la recerca de la ubicació
seleccionada.
Quan l'usuari tria un element del component ListPicker, l'esdeveniment
ListPicker.AfterPicking es dispara. Al controlador d'esdeveniments per AfterPicking,
cal establir el DataUri del component ActivityStarter de manera que sàpiga quin
mapa ha d'obrir, i llavors necessites posar en marxa Google Maps utilitzant
ActivityStarter.StartActivity. Els blocs d'aquesta funcionalitat s'enumeren a la Taula
6-5.
Taula 6-5. Blocs de llançar Google Maps amb el Starter Activitat
ListPicker1.AfterPicking ListPicker1 Aquest esdeveniment s'activa quan
l'usuari tria de ListPicker.
set ActivityStarter1.DataUri to ActivityStarter1 El DataUri crida a Maps que assignarà
quin mapa obrir en el llançament.
make text Text Construir el DataUri a partir de dos
fragments de text.
text ("geo:0,0?q=") Text La primera part de la DataUri espera per
Maps.
ListPicker1.Selection ListPicker1 L'element que l'usuari triï.
ActivityStarter1.StartActivity ActivityStarter1 Inicieu Maps.
Quan l'usuari tria a partir de la ListPicker, l'element seleccionat s'emmagatzema en
ListPicker.Selection i l'esdeveniment AfterPicking es dispara. Com es mostra a la
Figura 6-4, la propietat DataUri s'estableix en un objecte de text que combina
"http://maps.google.com/?q =" amb l'element triat. Per tant, si l'usuari va triar la
primera opció, "Tour Eiffel", el DataUri s'estableix en "http://maps.google.com/?
q=Tour Eiffel".
Figura 6-4. Ajustament de la DataURI per llançar el mapa seleccionat
Ja que ja has configurat les altres propietats de la ActivityStarter perquè sàpigues
obrir Maps, el bloc ActivityStarter1.StartActivity inicia l'aplicació Maps i invoca la
recerca proscrita per la DataUri.
Posa a prova la teva app. Reinicieu l'aplicació i feu clic a "Triar destinació
París" de nou. En triar una de les destinacions, és el mapa de destinació
que apareix? Google Maps també ha de proporcionar un botó de retrocés
per tornar a la seva aplicació per triar de nou, funciona això? (És possible
que hagi de fer clic al botó de nou un parell de vegades.)

TEMA 6 6/10
Configuració d'un Tour Virtual
Ara anem a donar-li vida a l'aplicació i que obri algunes magnífiques vistes zoom al
carrer i dels monuments de París perquè els seus amics a casa poden seguir
endavant mentre que estàs absent. Per això, primer explorarem Google Maps per
obtenir la URL d'alguns mapes específics. Encara utilitzes els mateixos punts de
referència de París per les destinacions, però quan l'usuari escull una, s'utilitzarà
l'índex (la posició en la llista) de la seva elecció per seleccionar i obrir un mapa
específic o zoom a la vista del carrer.
Abans de continuar, és possible que vulgueu desar el projecte (utilitzant desa)
perquè tingui una còpia del que has creat fins ara. D'aquesta manera, si fas alguna
cosa que causa problemes en la seva aplicació, sempre pot tornar a aquesta versió
de treball i torni a intentar-ho.
Trobar el DataUri de mapes específics
El primer pas és obrir Google Maps al vostre ordinador per trobar els mapes
específics que desitja llançar per a cada destinació:
1. En l'ordinador, aneu a http://maps.google.com.
2. Recerca d'un punt de referència (per exemple, la Torre Eiffel).
3. Apropar al nivell que desitgi.
4. Trieu el tipus de vista que desitja (per exemple, Adreça, satèl·lit, o Street
View).
5. Feu clic al botó de vincle prop de la part superior dreta de la finestra de
mapes i copiar la URL per al mapa. Anem a utilitzar aquesta URL (o part d'ella)
per llançar el mapa des de la seva aplicació.
Utilitzant aquest esquema, la taula 6-6 mostra les URL que farem servir.
Taula 6-6. Visita virtual URL de Google Maps
Marca Maps URL
Tour Eiffel http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&ge o c o de=&q=eiffel+ t o w
er&sll=37.0625,-95.677068&sspn=48.909425,72.333984&ie=UTF8&hq= T our+Eiffel
&hnear= T our+Eiffe l ,+ Q u ai+B r anl y ,+75007+ P ari s ,+Il e - d e - F r an ce ,+ F r an c e&ll=48.85
7942,2.294748&spn=0.001249,0.002207&t=h&z=19
Musée du Louvre http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&q=louv r e&sll=48.86096 ,
2.335421&sspn=0.002499,0.004415&ie=UTF8&t=h&split=1&fil t er=0& r q=1&ev=zi
& r adius=0.12&hq=louv r e&hnear=&ll=48.86096,2.335421&spn=0.002499,0.00441
5&z=18
Cathédrale Notre
Dame (Street
View)
http://map s .g o o g l e . c om/maps?f=q&sou r c e=s_q&hl=en&q= f r ench+landmarks&sll
=48.853252,2.349111&sspn=0.002411,0.004415&ie=UTF8&t=h& r adius=0.12&split
=1&fil t er=0& r q=1&ev=zi&hq=f r ench+landmarks&hnear=&ll=48.853252,2.349111
&spn=0,0.004415&z=18&la y er=c&cbll=48.853046,2.348861&panoid=74f L T qe Y dgk
P Y j6KKLl q gQ&cbp=12,63.75,,0,-35.58

TEMA 6 7/10
Per veure qualsevol d'aquests mapes, enganxeu l'URL de la Taula 6-6 en un
navegador. Els dos primers s'aplica el zoom en imatges de satèl·lit, mentre que la
tercera és una vista del carrer.
Podeu utilitzar aquestes URL directament per posar en marxa els mapes que desitja,
o pot definir netejador URL usant els protocols descrits a Google Maps
http://mapki.com. Per exemple, pot mostrar el mapa de la Torre Eiffel utilitzant
únicament les coordenades del GPS que es troba en l'adreça URL llarga a la Taula 6-
6 i la Maps geo: protocol:
geo: 48.857942,2.294748 t = h&z = 19
Fent ús d'aquest DataUri, obtindrà essencialment el mateix mapa que el mapa en
funció de l'adreça URL completa de la qual les coordenades GPS van ser extrets. El t
= h especifica que els mapes han de mostrar un mapa híbrid per satèl·lit i vistes
d'adreces, i el z = 19 especifica el nivell de zoom. Si estàs interessat en els detalls
de configuració dels paràmetres per als diferents tipus de mapes, fes un cop d'ull a
la documentació en http://mapki.com.
Per fer-ho més agradable amb dos tipus d'adreces URL, utilitzarem la geo: format
per els primers dos ajustaments DataUri a la nostra llista, i l'adreça URL completa
per al tercer.
Definició de la Llista dataURIs
Necessitaràs una llista anomenada dataURIs, que conté una DataURI per a cada
mapa que voleu mostrar. Crear aquesta llista, com es mostra a la Figura 6-5 per que
els elements corresponen als elements de la llista de destinacions (és a dir, la
primera dataURI ha de correspondre al primer destí, la Torre Eiffel).
Figura 6-5. La llista de mapes per a la seua tour virtual
Els dos primers elements que es mostren són DataURIs de la Torre Eiffel i el Louvre.
Tots dos utilitzen la geo: protocol. La tercera DataURI no es mostra del tot perquè el
bloc és massa llarg per a aquesta pàgina, has de copiar aquesta URL de l'entrada de
"Notre Dame, Street View" a la Taula 6-6 i posar-lo a un bloc de text.

TEMA 6 8/10
Modificar el comportament ListPicker.AfterPicking
En la primera versió d'aquesta aplicació, el comportament ListPicker.AfterPicking
estableix el DataUri a la concatenació (o una combinació) de
"http://maps.google.com/?q =" i la destinació que l'usuari va escollir de la llista (per
exemple, Tour Eiffel). En aquesta segona versió, el comportament AfterPicking ha de
ser més sofisticats, perquè l'usuari està seleccionant una llista (destinacions), però
el DataUri ha de ser seleccionat d'una altra llista (dataURIs). En concret, quan
l'usuari tria un element de la ListPicker, cal conèixer l'índex de la seva elecció
perquè pugui utilitzar per seleccionar el DataUri correcte de la llista dataURIs. Hi ha
molt pocs blocs necessàris per a aquesta funció, tots els quals estan llistats a la
Taula 6-7.
Taula 6-7. Blocs per a l'elecció d'un element de la llista en base a la selecció de l'usuari
def variable ("index") Definitions Aquesta variable contindrà l'índex de l'elecció de
l'usuari.
number (1) Math Inicialitzeu la variable índex a 1
ListPicker1.AfterPicking ListPicker1 Aquest esdeveniment s'activa quan l'usuari tria
un element.
set global index to My Definitions Estableixi aquesta variable en la posició de
l'element seleccionat.
position in list Lists Obtenir la posició (índex) d'un element
seleccionat.
ListPicker1.Selection ListPicker1 El tema seleccionat per exemple, "Tour Eiffel".
Connecteu això en la ranura de position in list.
global destinations My DefinitionsConnecteu està en la "llista" ranura de posició en
la llista.
set ActivityStarter.DataUri ActivityStarterEstablir això abans de començar l'activitat per
obrir el mapa.
select list item Lists Seleccioneu un element de la llista dataURIs.
global DataURIs My Definitions La llista de DataURIs.
global index My DefinitionsSostingui la posició de l'element seleccionat.
ActivityStarter.StartActivity ActivityStarterInicieu l'aplicació Maps.

TEMA 6 9/10
Quan l'usuari tria un element de la ListPicker, l'esdeveniment AfterPicking s'activa,
com es mostra a la Figura 6-6. El tema triat, per exemple "Tour Eiffel", és a
ListPicker.Selection. El controlador d'esdeveniments utilitza això per trobar la posició
de l'element seleccionat, o el valor de l'índex, a la llista de destinacions. L'índex
correspon a la posició de la destinació a la llista. Així que si "Tour Eiffel" es triï,
l'índex serà 1, si "Musée du Louvre" és elegit, serà 2, i si la "Catedral de Notre Dame
de París" que es triï, l'índex serà 3.
Figura 6-6. L'elecció d'un element de la llista en base a la selecció de l'usuari
L'índex pot ser utilitzat per seleccionar un element d'una altra llista, en aquest cas
data URIs, i per establir que l'entrada com la ActivityStarter de DataUri. Un cop
configurat, el mapa es pot iniciar amb ActivityStarter.StartActivity.
Posa a prova la teva app. Al telèfon, feu clic al botó "Triar destinació
París". La llista ha d'aparèixer amb els tres punts. Trieu un dels
elements i veure quin mapa apareix.

TEMA 6 10/10
Variacions
Aquí hi ha algunes variacions suggerides per intentar:
• Crear una visita virtual d'algun altre destí exòtic, o del seu lloc de treball o
escola.
• Crear una aplicació personalitzable Tour Virtual que permet a l'usuari crear
una guia per a una ubicació de la seua elecció mitjançant la introducció del
nom de cada destinació juntament amb la URL d'un mapa corresponent.
Hauràs de emmagatzemar les dades en una base de dades TinyWebDB i crear
una aplicació Tour Virtual que treballa amb les dades introduïdes.
Resum
Aquestes són algunes de les idees que hem tractat en aquest tema:
• Les variables de llista es poden utilitzar per emmagatzemar dades com
destinacions del mapa i les adreces URL.
• El component ListPicker permet a l'usuari triar d'una llista d'elements. La
propietat Elements de ListPicker conté la llista, la propietat Selection ocupa
l'element seleccionat, i l'esdeveniment AfterPicking s'activa quan l'usuari
selecciona un element de la llista.
• El component ActivityStarter permet la seva aplicació per llançar altres
aplicacions. En aquest tema s'ha demostrat el seu ús amb l'aplicació Nokia
Maps, però es pot llançar un navegador o qualsevol altra aplicació Android
també, fins i tot un altre que et va crear.
• Podeu començar una ruta en particular a Google Maps mitjançant
l'establiment de la propietat DataUri. Pots trobar URI mitjançant la
configuració d'un mapa en particular en el navegador i després triar el botó
d'enllaç per trobar l'URI. Pots col·locar un URI directament al DataUri del seu
ActivityStarter, o construir el seu propi URI utilitzant els protocols definits en
http://mapki.com.
• Pot identificar l'índex d'un element de la llista amb la posició en la llista de
bloqueig. Amb ListPicker, pot utilitzar la posició llista per trobar l'índex de
l'element que triï l'usuari. Això és important quan, com en aquest tema,
necessites l'índex per triar un element d'una segona llista, relacionada

T6 paris maptour

Recommended

Recommended

More Related Content

More from tecnovicent

More from tecnovicent (20)

T6 paris maptour