Obxectivo
Crearemos unha aplicación que permita facer un percorrido virtual de París. A creación dunha aplicación cun mapa completo pode parecer moi complicado, pero App Inventor 2 permite utilizar o compoñente ActivityStarter con Google Maps para as localizacións virtuais que facilitan moito o traballo.
En primeiro lugar, construirás unha aplicación que lanza mapas da Torre Eiffel, o Louvre e Notre Dáme cun só clic. A continuación, poderás modificar a aplicación para crear unha visita virtual de mapas de satélite dispoñibles a partir de Google Maps.
Preparación
Necesitas unha icona para a túa App (Imaxe de Pixabay.com – CC0 Dominio Público)
Crea un novo proxecto no App Inventor chamado “ParisMapTour“.
A interface de usuario da aplicación ten:
- Unha imaxe cunha foto de Paris: Interfaz > Imagen1 (Obxectivo: Mostrar unha imaxe dun mapa de Paris en pantalla) Descarga a imaxe metro.jpg
Imaxe de Pixabay.com – CC0 Dominio Público
- Unha etiqueta con texto: Interfaz > Etiqueta1, co texto “Descubre París co teu Android“.
- ListPicker, que vén cun botón asociado: Interfaz > SelectorDeLista1 (Obxectivo: Mostrar unha lista para seleccionar un destino), co texto “Elixe destino en París“.
- ActivityStarter (non visible): Connectividad > ActivityStarter1 (Obxectivo: Abrir a aplicación de Mapas para ir ao destino).
As propiedades de ActivityStarter
ActivityStarter é un compoñente que che permite lanzar en calquera aplicación de Android un navegador, Google Maps, ou mesmo outra das túas propias aplicacións.
Vas construír ParisMapTour onde a aplicación Maps se lanzará para mostrar mapas particulares baseados na elección do usuario, ademais tamén pode pulsar o botón Atrás para volver e elixir un destino diferente.
Para esta aplicación, tes que especificar as propiedades seguintes (Ollo: as letras maiúsculas / minúsculas son importantes):
- Acción: android.intent.action.VIEW
- Clase: com.google.android.maps.MapsActivity
- Paquete: com.google.android.apps.maps
Programación
Abre o editor de Bloques e crea unha variable coa lista dos tres destinos de París:
Para mostrar a lista cando a aplicación se inicia:
Pon a proba a túa App: cando fagas clic no botón “Elixe destino en París“. O selector de lista debe aparecer cos tres destinos.
Lanzar GoogleMaps
Se o usuario elixiu a primeira opción, “Torre Eiffel”, a propiedade “UriDelDato” (que permite lanzar un mapa específico en Google Maps) establecese en: “https://maps.google.com/?gep:0,0&q=”
De tal xeito, que une o texto do destino seleccionado a busca en Google Maps.
Pon a proba a túa App!
Configurar o Tour Virtual
Agora imos darlle vida á aplicación e que abra algunhas das magníficas vistas da rúa e os monumentos de París. Para iso, primeiro exploraremos Google Maps para obter a URL dalgúns mapas específicos. Cando o usuario elixa un destino utilizarase o índice (a posición na lista) da súa elección para seleccionar e abrir un mapa específico á vista da rúa.
O primeiro paso é abrir Google Maps para atopar os mapas específicos para cada destino:
- No computador, http://maps.google.com.
- Busca un punto de referencia (por exemplo, a Torre Eiffel).
- Achegate ao nivel que desexes.
- Elixe o tipo de vista que queres (por exemplo, satélite e 3D).
- Copia a URL do mapa. Imos utilizar esta URL para lanzar o mapa dende a aplicación.
A continuación están as URL que usaremos (Botón dereito -> copiar a localización da ligazón)
Necesitarás unha lista chamada “DatosUris”, que contén unha URL para cada mapa que se desexa mostrar.
Tamén necesitamos crear unha nova variable para o valor do índice, na lista de destinos.
O índice corresponde á posición do destino elexido na lista. Entón, si se elixe “Tour Eiffel”, o índice será 1; si se elixe “Musée du Louvre”, será 2; e si se elixe “Cathédrale Notre Dame de Paris”, o índice será 3.
Programación de bloques da App Tour por París!
Reto:
Crea unha App do teu pobo con tres lugares de interese, ou se o prefires escolle unha capital europea.