Francisco Garca Muoz 1

Paris Map Tour

En este tema, construirs una aplicacin que te permita crear tu propia gua
personalizada para un viaje de ensueo en Pars. Y ya que algunos de sus amigos
posiblemente no vayan, crearemos una aplicacin que les permita hacer un recorrido
virtual de Pars tambin. La creacin de una aplicacin con un mapa completo puede
parecer muy complicado, pero App Inventor 2 le permite utilizar el componente
ActivityStarter con Google Maps para las ubicaciones virtuales que facilitan mucho el
trabajo. En primer lugar, construirs una aplicacin que lanza mapas de la Torre Eiffel,
el Louvre y Notre Dame con un solo clic. A continuacin, podrs modificar la
aplicacin para crear una visita virtual de mapas de satlite disponibles a partir de
Google Maps.

Lo que aprenders
Este tema presenta los siguientes componentes y conceptos de App Inventor:

El componente de iniciacin de actividades para el lanzamiento de otras aplicaciones

de Android desde su aplicacin. Vamos a utilizar este componente para lanzar Google
Maps con diferentes parmetros.
El componente ListPicker para permitir al usuario elegir de una lista de ubicaciones.
Francisco Garca Muoz 2

Diseo de los componentes

Crear un nuevo proyecto en el App Inventor llamado

"ParisMapTour". La interfaz de usuario de la
aplicacin tiene un componente de imagen con una
foto de Paris, un componente Label con texto, un
componente ListPicker que viene con un botn
asociado, y un componente ActivityStarter (no
visible). Puedes disear los componentes utilizando la
imagen.

Los componentes enumerados en la tabla se utilizarn

para crear la ventana de diseo. Arrastra cada
componente de la paleta en el visor y deja el nombre
como se especifica.

Componente Paleta Nombre asignado Objetivo

Image User Interface Image1 Muestra imagen de un mapa de Paris en
pantalla
Label User Interface Label1 Etiqueta con el texto Descubra Pars con su
Android
ListPicker User Interface ListPicker1 Muestra una lista para seleccin de destino
ActivityStarter Connectivity ActivityStarter1 Abre la aplicacin de Mapas para ir al
destino

Definir las propiedades de ActivityStarter

ActivityStarter es un componente que te permite lanzar cualquier aplicacin de Android,

un navegador, Google Maps, o incluso otra de tus propias aplicaciones.
Cuando un usuario inicia otra aplicacin desde su aplicacin, puede hacer clic en el
botn Atrs para volver a la aplicacin. Vas a construir ParisMapTour donde la
aplicacin Mapas se lanzar para mostrar mapas particulares basadas en la eleccin del
usuario. El usuario puede pulsar el botn Atrs para volver a la aplicacin y elegir un
destino diferente.
ActivityStarter es un componente relativamente de bajo nivel en el que debers
establecer algunas propiedades con informacin familiar para un programador de Java
SDK de Android, pero ajeno al resto 99,999% del mundo. Para esta aplicacin,
especifique las propiedades que se especifican en la Tabla, y tenga cuidado, incluso las
letras maysculas / minsculas son importantes.

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

En el Editor de Bloques, debers definir una propiedad ms, DataUri, que le permite
lanzar un mapa especfico en Google Maps. Esta propiedad se debe establecer en el
Editor de Bloques en lugar del Diseador de componentes, ya que debe ser dinmica,
que cambiar en funcin de si el usuario decide visitar la Torre Eiffel, el Louvre o la
Francisco Garca Muoz 3

catedral de Notre Dame.

Llegaremos al Editor de Bloques en un momento, pero hay un par de detalles a tener
en cuenta antes de poder pasar a programar el comportamiento de sus componentes:

1. Descargue el archivo metro.jpg de los recursos en el equipo y, luego seleccione Add

en la seccin Media para cargar en su proyecto. A continuacin, debers configurarlo
como la propiedad Picture de Image1.
2. El componente ListPicker viene con un botn, cuando el usuario hace clic, las
opciones se enumeran. Establezca el texto de este botn para cambiar la propiedad
Texto de ListPicker1 en "Elegir destino en Pars"

Aadir comportamientos a los Componentes

En el Editor de Bloques, deber definir una lista de destinos y dos comportamientos:

Cuando la aplicacin se inicia, la aplicacin carga los destinos al componente

ListPicker para que el usuario pueda elegir uno.
Cuando el usuario selecciona un destino del ListPicker, la aplicacin Maps se inicia y
muestra un mapa de este destino.

Creacin de una lista de destinos

Abra el Editor de Bloques y cree una variable con la lista de los destinos de Pars
utilizando los bloques que figuran en la siguiente tabla.

Tipo de Bloque Grupo Objetivo

Variable destinos Variables Almacenar una lista con los destinos
Make a list Lists Lista con todos los destinos
Tour Eiffel Texto Destino 1
Musee du Louvre Texto Destino 2
Cathedral Notre Dame de Paris Texto Destino 3

La variable destinos llamar a la funcin make a lista, en la que se puede conectar los
valores de texto para los tres destinos de su gira, como se muestra en la siguiente
imagen

Dejar que el usuario elija un destino

El propsito del componente ListPicker es el de mostrar una lista de elementos para que
el usuario elija. Se precargar las opciones al ListPicker mediante el establecimiento de
la propiedad Elements to a la lista. Estableceremos en el ListPicker los elementos de la
lista de destinos que acaba de crear. Como se quiere mostrar la lista cuando la
Francisco Garca Muoz 4

aplicacin se inicia, habr que definir este comportamiento en Screen1.Initialize.

Necesitar los elementos que figuran en la siguiente tabla:

Tipo de Bloque Grupo Objetivo

When Screen1.initialize Screen1 Ejecutar al cargar la ventana
Set listpicker1.elements ListPicker1 Cargar el ListPicker
to
Get global destinos Variables Contenido de los destinos

Cmo funcionan los bloques

Screen1.Initialize se activa cuando la aplicacin se inicia. Como se muestra en la

siguiente imagen, el controlador de eventos establece la propiedad Elementos de
ListPicker con los tres destinos que aparecern.

Pon a prueba tu app. En primer lugar, debers reiniciar la

aplicacin haciendo clic en "Connect to Device ..." del Editor de
Bloques y selecciona la opcin que utilices para probar tu app (la
mejor es con AI Companion).
Despus, en el telfono, haga clic en el botn "Elegir destino en
Pars". El selector de lista debe aparecer con los tres destinos.
Francisco Garca Muoz 5

Mapas de apertura con una bsqueda

A continuacin, podrs programar la aplicacin para que cuando el usuario elija uno de
los destinos, la ActivityStarter lance Google Maps y la bsqueda de la ubicacin
seleccionada.

Cuando el usuario elige un elemento del componente ListPicker, el evento

ListPicker.AfterPicking se dispara. En el controlador de eventos para AfterPicking,
hay que establecer el DataUri del componente ActivityStarter de forma que sepa qu
mapa debe abrir, y despus necesitas poner en marcha Google Maps utilizando
ActivityStarter.StartActivity.

Los bloques de esta funcionalidad se enumeran en la siguiente tabla:

Tipo de Bloque Grupo Objetivo

ListPicker1.AfterPicking ListPicker1 Evento que se ejecuta despus de desplegar el ListPicker
set ActivityStarter1.DataUri to ActivityStarter1 El DataUri llama a Maps que asignar que mapa abrir
despus del lanzamiento
join Text Construir el DataUri a partir de dos fragmentos de texto
text ("geo:0,0?q=") Text La primera parte de la DataUri esperada por Maps
ListPicker1.Selection ListPicker1 El elemento que el usuario escoge
ActivityStarter1.StartActivity ActivityStarter1 Inicia Maps

Cmo funcionan los bloques

Cuando el usuario elige a partir del ListPicker, el elemento seleccionado se almacena en

ListPicker.Selection y el evento AfterPicking se dispara. Como se muestra en la
siguiente imagen, la propiedad DataUri se establece en un objeto de texto que combina
"https://maps.google.com/?gep:0,0&q=" con el elemento elegido. Por lo tanto, si el
usuario eligi la primera opcin, "Torre Eiffel", el DataUri se establece en:
"https://maps.google.com/?gep:0,0&q=Torre Eiffel"

Puesto que ya has configurado las otras propiedades de la ActivityStarter para abrir
Maps, el bloque ActivityStarter1.StartActivity inicia la aplicacin Maps e invoca la
bsqueda escrita por la DataUri

Pon a prueba tu app. Reinicie la aplicacin y haga clic en "Elegir

destino Pars "de nuevo. Al elegir uno de los destinos, es el mapa
de destino que aparece? Google Maps tambin debe proporcionar
un botn de retroceso para volver a su aplicacin y poder elegir de
nuevo, funciona esto? (Es posible que tenga que hacer clic en el
botn de nuevo un par de veces.)
Francisco Garca Muoz 6

Configuracin de un Tour Virtual

Ahora vamos a darle vida a la aplicacin y que abra algunas de las magnficas vistas
zoom de la calle y los monumentos de Pars para que sus amigos en casa puedan seguir
adelante mientras que ests ausente. Para ello, primero exploraremos Google Maps para
obtener la URL de algunos mapas especficos. Todava se utilizan los mismos puntos de
referencia de Pars para los destinos, pero cuando el usuario elija uno, se utilizar el
ndice (la posicin en la lista) de su eleccin para seleccionar y abrir un mapa especfico
o zoom a la vista de la calle.
Antes de continuar, es posible que desee guardar el proyecto (utilizando Save del men
Projects) para que tengas una copia de lo que has creado hasta ahora. De esta manera, si
hace alguna cosa que cause problemas en su aplicacin, siempre puede volver a esta
versin del trabajo y volver a intentarlo.

Encontrar el DataUri de mapas especficos

El primer paso es abrir Google Maps en su ordenador para encontrar los mapas
especficos que desea lanzar para cada destino:

1. En el ordenador, vaya a http://maps.google.com.

2. Bsqueda de un punto de referencia (por ejemplo, la Torre Eiffel).
3. Acercar al nivel que desee.
4. Elija el tipo de vista que desea (por ejemplo, Direccin, satlite, o Street View).
5. Haga clic en el botn de vnculo cerca de la parte superior derecha de la ventana de
mapas y copiar la URL del mapa. Vamos a utilizar esta URL (o parte de ella) para
lanzar el mapa desde su aplicacin.

Utilizando este esquema, la siguiente tabla muestra las URL que usaremos.

Marca Maps URL

Torre Eiffel http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=eiffel+tower&sll=37.0625,-
95.677068&sspn=48.909425,72.333984&ie=UTF8&hq=Tour+Eiffel&hnear=Tour+Eiffel,+Quai+Branly,+750
07+Paris,+Ile-de France,+France&ll=48.857942,2.294748&spn=0.001249,0.002207&t=h&z=19
Louvre http://maps.google.com/maps?f=q&source=s_q&hl=en&q=louvre&sll=48.86096,2.335421&sspn=0.00249
9,0.004415&ie=UTF8&t=h&split=1&filter=0&rq=1&ev=zi&radius=0.12&hq=louvre&hnear=&ll=48.86096,2.
335421&spn=0.002499,0.004415&z=18
Notre Dame http://maps.google.com/maps?f=q&source=s_q&hl=en&q=french+landmarks&sll=48.853252,2.349111&
Street View sspn=0.002411,0.004415&ie=UTF8&t=h&radius=0.12&split=1&filter=0&rq=1&ev=zi&hq=french+landmar
ks&hnear=&ll=48.853252,2.349111&spn=0,0.004415&z=18&layer=c&cbll=48.853046,2.348861&panoid=7
4fLTqeYdgkPYj6KKLlqgQ&cbp=12,63.75,,0,-35.58

Para ver cualquiera de estos mapas, pegue la URL de la tabla en un navegador. A los
dos primeros se aplica el zoom de imgenes de satlite, mientras que el tercero es una
vista de la calle.
Puede utilizar estas URL directamente para poner en marcha los mapas que desee,
o puede definir la construccin del URL usando los protocolos descritos de Google
Maps en http://alvarestech.com/temp/routeconverter/RouteConverter/navigation-
formats/src/main/doc/googlemaps/Google_Map_Parameters.htm. Por ejemplo, puede
mostrar el mapa de la Torre Eiffel utilizando nicamente las coordenadas del GPS que
se encuentra en la direccin URL larga en la Tabla y la Maps geo: protocolo:
geo:48.857942,2.294748 t = h & z = 19
Haciendo uso de este DataUri, obtendr esencialmente el mismo mapa que el mapa en
funcin de la direccin URL completa de la cual las coordenadas GPS fueron extrados.
Francisco Garca Muoz 7

El t = H especifica que los mapas deben mostrar un mapa hbrido por satlite y vistas
de direcciones, y el z = 19 especifica el nivel de zoom. Si ests interesado en los detalles
de configuracin de los parmetros para los distintos tipos de mapas, echa un vistazo a
la documentacin en
http://alvarestech.com/temp/routeconverter/RouteConverter/navigation-
formats/src/main/doc/googlemaps/Google_Map_Parameters.htm.
Para hacerlo ms interesante utilizaremos los dos tipos de direcciones URL, la geo:
formato para los primeros dos ajustes del DataUri en nuestra lista, y la direccin URL
completa para el tercero.

Definicin de la Lista DataURIs

Necesitars una lista llamada dataURIs, que contiene una DataURI para cada
mapa que desea mostrar. Crea esta lista, como se muestra en la imagen para que los
elementos que se corresponden a los elementos de la lista de destinos (es decir, la
primera dataURI debe corresponder al primer destino, la Torre Eiffel).

Los dos primeros elementos que se muestran son DataURIs de la Torre Eiffel y el
Louvre. Ambos utilizan la geo: protocolo. La tercera DataURI no se muestra del todo
porque el bloque es demasiado largo para esta pgina, tienes que copiar esta URL de la
entrada de "Notre Dame, Street View" de la tabla anterior y ponerlo en un bloque de
texto.

Modificar el comportamiento ListPicker.AfterPicking

En la primera versin de esta aplicacin, el comportamiento ListPicker.AfterPicking

se estableca el DataUri con la concatenacin (o una combinacin) de "
https://maps.google.com/?gep:0,0&q= y el destino que el usuario haba escogido de la
lista (por ejemplo, Tour Eiffel). En esta segunda versin, el comportamiento
AfterPicking es ms sofisticado, ya que el usuario est seleccionando una lista
(destinos), pero el DataUri es seleccionado de otra lista (dataURIs). En concreto,
cuando el usuario elige un elemento de la ListPicker, es necesario conocer el ndice de
su eleccin para poder utilizarlo para seleccionar el DataUri correcto de la lista
dataURIs. Son pocos los bloques necesarios para esta funcin, todos los cuales estn
listados en la siguiente tabla.

Tipo de Bloque Grupo Objetivo

def variable ("index")
number (0)
ListPicker1.AfterPicking
set global index to
index in list
ListPicker1.Selection
global destinos
set ActivityStarter1.DataUri
select list item
Variables Esta variable contendr el ndice de eleccin del usuario
Math Inicializamos la variable ndex a 0
ListPicker1 Se activa cuando el usuario elige una opcin
Variables Establece esta variable en la posicin del elemento
seleccionado.
Lists Obtener la posicin (ndex) de un elemento seleccionado.
ListPicker1 El tema seleccionado por ejemplo, "Tour Eiffel".
Conecte esto en la ranura de position in list.
Variables Conecte esta en la ranura de posicin de la lista
ActivityStarter Se establece antes de lanzar la actividad del mapa
Lists Selecciona un elemento de la lista
Francisco Garca Muoz 8

Get global DataURIs Variables Lista de DataUris

Get global index Variables Contiene la posicin del elemento seleccionado.
ActivityStarter.StartActivity ActivityStarter Inicia la aplicacin Maps
Francisco Garca Muoz 9

Cmo funcionan los bloques

Cuando el usuario elige un elemento de la ListPicker, el evento AfterPicking se activa,

como se muestra en la imagen. El tema elegido, por ejemplo "Tour Eiffel", es
ListPicker.Selection. El controlador de eventos utiliza esto para encontrar la posicin
del elemento seleccionado, o el valor del ndice, en la lista de destinos. El ndice
corresponde a la posicin del destino en la lista. As que si "Tour Eiffel" se elige, el
ndice ser 1, si "Museo del Louvre" es elegido, ser 2, y si la "Catedral de Notre Dame
de Pars " se elige, el ndice ser 3.

El ndice puede ser utilizado para seleccionar un elemento de otra lista, en este caso
DataUris, y para establecer de la ActivityStarter de DataUri. Una vez configurado, el
mapa se puede iniciar con ActivityStarter.StartActivity.

Pon a prueba tu app. En el telfono, haga clic en el botn "Elegir

destino Pars ". La lista debe aparecer con los tres puntos. Elija uno
de los elementos y vea qu mapa aparece
Francisco Garca Muoz 10

Variaciones

Aqu hay algunas variaciones sugeridas para intentar:

Crear una visita virtual de algn otro destino extico, o de su puesto de trabajo o
escuela.
Crear una aplicacin personalizable Tour Virtual que permite al usuario crear una gua
para una ubicacin de su eleccin mediante la introduccin del nombre de cada destino
junto con la URL de un mapa correspondiente.
Debers almacenar los datos en una base de datos TinyWebDB y crear una aplicacin
Tour Virtual que trabaje con los datos introducidos.

Resumen

Estas son algunas de las ideas que hemos tratado en este tema:

Las variables de lista se pueden utilizar para almacenar datos como destinos de un
mapa y las direcciones URL.
El componente ListPicker permite al usuario elegir entre una lista de elementos. La
propiedad Elementos de ListPicker contiene la lista, la propiedad Selection ocupa el
elemento seleccionado, y el evento AfterPicking se activa cuando el usuario selecciona
un elemento de la lista.
El componente ActivityStarter permite a su aplicacin para lanzar otras aplicaciones.
En este tema se ha demostrado su uso con la aplicacin Google Maps, pero se puede
lanzar un navegador o cualquier otra aplicacin Android tambin, incluso otra que haya
creado.
Puede acceder a una ruta en particular en Google Maps mediante el establecimiento de
la propiedad DataUri. Puedes encontrar la URI mediante la configuracin de un mapa
en particular en el. Puedes colocar la URI directamente al DataUri de su ActivityStarter,
o construir su propio URI utilizando los protocolos definidos en
http://alvarestech.com/temp/routeconverter/RouteConverter/navigation-
formats/src/main/doc/googlemaps/Google_Map_Parameters.htm.
Puede identificar el ndice de un elemento de la lista con la posicin en la lista de
bloqueo. Con ListPicker, puede utilizar la posicin lista para encontrar el ndice del
elemento que elija el usuario. Esto es importante cuando, como en este tema, necesitas
el ndice para elegir un elemento de una segunda lista, relacionada.
Francisco Garca Muoz 11

Licencia

Paris Map Tour de App Inventor 2, por Francisco Garca Muoz basado en: