App Inventor

tecnoloxia.org

Un tour por París!

parisObxectivo

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.

paris_iconPreparació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).

screen1paris

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.

propiedadesactivitystarterPara 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:

aumentarelementoslista

listadestinosparis

Para mostrar a lista cando a aplicación se inicia:

incializarapplista

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=”

mapsparis

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:

  1. No computador,  http://maps.google.com.
  2. Busca un punto de referencia (por exemplo, a Torre Eiffel).
  3. Achegate ao nivel que desexes.
  4. Elixe o tipo de vista que queres (por exemplo, satélite e 3D).
  5. 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.

datosuris

Programación de bloques da App Tour por París!

programaciontourporparis

Reto:

Crea unha App do teu pobo con tres lugares de interese, ou se o prefires escolle unha capital europea.