Map Tour

Que estàs construint

Aquest és un tutorial de dues parts que introdueix el component ActivityStarter per llançar aplicacions d’Android arbitràriament i el component ListPicker per permetre a l’usuari triar d’una llista d’elements.Construiràs MapTour, una aplicació per visitar destinacions francesos de vacances amb un sol clic. Els usuaris de la teva aplicació podran visitar la torre Eiffel, el Louvre i Notre Dame en una ràpida successió.

Primers passos

Connecta’t al lloc web de App Inventor i comença un nou projecte. Nómbralo MapTour, i també el Title(títol) de la pantalla a MapTour. Obre l’editor de blocs i conéctalo al telèfon.

Introducció

Dissenyaràs l’aplicació de manera que mostri una llista de destinacions. Quan l’usuari tria un, l’aplicació Google Maps s’inicia per mostrar un mapa de la destinació.

Aquest tutorial introdueix els següents conceptes de App Inventor:

• El component Activity Starter per llançar altres aplicacions Android des del teu aplicació.
• El component ListPicker (selector de llista), per permetre a l’usuari triar entre una llista de possibilitats.

Prepara els components

La interfície de l’usuari per MapTour és simple: només tindràs un component ListPicker i un component ActivityStarter (no visible). La vista de disseny ha de quedar així quan hagis acabat:

Els elements que es llisten a continuació seran usats per crear aquesta finestra al dissenyador. Arrossega cada component des de la Paleta al Visor (Viewer) i nómbralo com s’especifica:

Tipus de component	Grup de la paleta	Com ho diràs	Propòsit del component
Image	Basic	Image1	Mostra una imatge estàtica del mapa de París a la pantalla
ListPicker	Basic	ListPicker1	Mostra la llista de destinacions
ActivityStarter	other stuff	ActivityStarter1	Inicia l’aplicació mapes quan es tria una destinació

Descarrega l’arxiu parismap.png al teu ordinador, després feu clic a Add a la secció Mitjana per carregar en el teu projecte. Perquè aparegui, hauràs a més que colar a la propietat Picture d’Image1.

El component ListPicker té un botó associat – quan l’usuari fa clic al es desplega la llista d’eleccions. Canvia el text d’aquest botó ajustant la propietat Text deListPicker1 a “Choose Destination” (Trieu la destinació).

Ajustar les propietats de ActivityStarter

ActivityStarter és un component que et permet iniciar qualsevol aplicació Android – el navegador, mapes, o qualsevol altra de les teves aplicacions. Quan es llança una altra aplicació des de la teva, l’usuari pot fer clic al botó enrere per tornar a la teva aplicació. Construiràs MapTour, de manera que l’aplicació Mapes s’iniciarà per mostrar mapes particulars basats en l’elecció d’usuari. L’usuari podrà llavors prémer el botó enrere per tornar a la teva aplicació i triar una destinació diferent.

ActivityStarter és relativament un component de baix nivell al qual necessitaràs ajustar algunes propietats amb informació familiar per als programadors en Java Android SDK, però estranya per al restant 99.999% de la gent en el món. No et preocupis per ara. Copiant l’exemple d’informació de protocol mostrada aquí, podes aprendre fàcilment com llançar altres aplicacions, com Maps, des de les aplicacions que aquestes creant.

Per fer que ActivityStarter iniciï l’aplicació Maps, ajusta les següents propietats en el Dissenyador de Components:

Propietat	Valor
Action	android.intent.action.VIEW
ActivityPackage	com.google.android.apps.maps
ActivityClass	com.google.android.maps.MapsActivity

Amb aquests valors ajustats, podràs iniciar l’aplicació Maps. A l’editor de bloc, vas a ajustar una propietat més, DataUri, la qual et permetrà iniciar Maps un mapa en particular. Aquesta propietat s’ha d’ajustar a l’Editor de bloc perquè canviarà basant-se en si l’usuari tria visitar el Louvre, la Torre Eiffel. o Notre Dame.

Crear una llista de destinacions

Obre l’Editor de blocs i crea una variable amb la llista de destinacions per MapTour. Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
def variable (“Destinations”)	Definitions	crea una llista de destinacions
make a list	Lists	usa per afegir els elements de la llista
text (“Tour Eiffel”)	Text	la primera destinació
text (“Musee du Louvre”)	Text	la segona destinació
text (“Cathedrale Notre Dame”)	Text	la tercera destinació

Els blocs han de quedar així:

Afegeix comportaments als components

MapTour té dos comportaments:

1. Quan s’inicia, l’aplicació carrega la llista de destinacions dins del component ListPicker perquè l’usuari pugui triar.

2. Quan l’usuari tria una destinació de ListPicker, l’aplicació Maps s’inicia per mostrar un mapa d’aquest destí. Per la part I, només obriràs l’aplicació Maps i li indicaràs que busqui la destinació escollida.

El component ListPicker mostra una llista d’elements quan l’usuari fa clic en un botó. ListPicker té una propietat Elements. Si configures Elements a una llista, els elements d’aquesta llista apareixeran en ListPicker. Per aquesta aplicació, tindràs d’ajustar la propietat Elements de ListPicker a la llista de destinacions que acabes crear. Com vols que això passi quan s’iniciï l’aplicació, definiràs ens comportament en l’esdeveniment Screen1.Initialize. Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
Screen1.Initialize	Screen1	aquest esdeveniment s’activa quan s’inicia l’aplicació.
setembre ListPicker1.Elements to	ListPicker1	s’ajusta aquesta propietat a la llista que vols que aparegui
global Destinations	My Definitions	la llista de destinacions

Els blocs han de quedar així:

Com treballen els blocs

Screen1.Initialize s’activa quan s’inicia l’aplicació. El controlador d’esdeveniment només s’ajusta la propietat Elements de ListPicker pels quals tres destinacions apareixeran.

Prova aquest comportament. Feu clic al botó “Choose Destination ‘al telèfon. El selector de llista (list picker) ha d’aparèixer amb els tres elements.

Iniciant Maps amb una recerca de la destinació

A continuació, programarás el comportament que ha de realitzar quan l’usuari triï una de les destinacions – ActivityStarter ha d’iniciar l’aplicació Maps i buscar la destinació escollida.

Quan l’usuari tria un element del component ListPicker, s’inicia l’esdeveniment ListPicker.AfterPicking. Al controlador d’esdeveniment per AfterPicking necessitaràs ajustar DataUri en el component ActivityStarter perquè aquest sàpiga quin és el mapa que ha d’obrir, després necessites iniciar l’aplicació usant StartActivity.

Necessitaràs els següents blocs:

Tipus de bloc	Calaix	Propòsit
ListPicker1.AfterPicking	ListPicker1	aquest esdeveniment s’inicia quan l’usuari tria un element de ListPicker
setembre ActivityStarter1.DataUri to	ActivityStarter1	DataUri indica a l’aplicació Maps qual és el mapa que ha d’obrir
make text	Text	crea DataUri a partir de dues peces de text
text (“geo: 0,0? q =”)	Text	la primera part de DataUri esperada per Maps
ListPicker1.Selection	ListPicker1	l’element que tria l’usuari
ActivityStarter1.StartActivity	ActivityStarter1	s’inicia Maps

Els blocs han de quedar així:

Com treballen els blocs

Quan l’usuari tria un element de ListPicker, l’esdeveniment AfterPicking s’activa. L’element triat es col · loca en la propietat ListPicker1.Selection. Pel que si l’usuari escull “Musee du Louvre”, aquest valor es col · locarà a la propietat Selection de ListPicker1

Al dissenyador de components, ja has preparat les propietats del component ActivityStarter perquè iniciï l’aplicació Maps. Aquí només necessites indicar que ruta ha de mostrar. La propietat DataUri de ActivityStarter et permet especificar això usant un protocol especial.

En aquest cas, vols mostrar el mapa que apareixeria si introdujeses “Musee du Louvre” a la caixa de recerca de de l’aplicació Maps. Per fer això, DataUri s’ha d’ajustar a:

geo: 0,0? q = ‘Musee du Louvre’

El bloc make a text crea un text exactament com aquest, només que el text després de “q =” serà l’elecció feta per l’usuari.

Quan DataUri està preparat, ActivityStarter1.StartActivity s’inicia l’aplicació Maps.

Prova aquest comportament. Reinicia l’aplicació i feu clic de nou a “Choose Destinations”. Quan tries un destí, apareix un mapa d’aquest destí? Pots fer clic al botó enrere per tornar a la teva aplicació i triar una altra vegada (per sortir de l’aplicació hauràs de prémer enrere un parell de vegades)

Map Tour, Programa final

Revisió

Aquestes són algunes de les idees examinades en aquest tutorial:

• El component ListPicker permet a l’usuari triar d’una llista d’elements. La propietat Elements de ListPicker manté la llista, la propietat Selection manté l’element seleccionat, i l’esdeveniment AfterPicking s’inicia quan l’usuari tria.
• El component ActivityStarter et permet iniciar altres aplicacions. Aquest tutorial mostra el seu ús amb l’aplicació Maps, però pots iniciar un navegador o qualsevol altra aplicació – fins i tot una de les teves.
• Mira la pàgina de referència de Activity Starter per més detalls.
• Aprèn usos més sofisticats de ActivityStarter i del component ListPicker en MapTour Part 2 .

Escaneja l’aplicació d’exemple per al teu telèfon

Escaneja el codi Qr amb el teu telèfon per instal · lar i executar l’aplicació d’exemple.