Tutorial 10: Madrid Tour
Objetivo:
El objetivo de este tutorial es mostrar cómo realizar un proyecto donde diseñamos un tour en la ciudad de Madrid. Para ello integremos un mapa y interactuamos con los distintos marcadores sobre el.
Pasos a Seguir
1. Acceso al Entorno
-
Abrir el entorno de desarrollo App Inventor.
- Accede a la siguiente dirección: https://appinventor.mit.edu/
- Pulsa el botón create app!
- Selecciona una cuenta de Google
- Acepta los términos y condiciones (solo la primera vez que se accede a la plataforma)
↧
2. Creación de un proyecto nuevo
- Pulsa el botón “Start new proyect” y pon de nombre al proyecto "Madrid_Tour"
↧
3. Organiza la pantalla (Screen1).
- Cambia el nombre del título de screen1 a “Madrid Tour” y el color de fondo. Nosotros hemos elegido el naranja, pero podéis seleccionar el que más os guste.
↧
4. Añada componente mapa.
- Arrastra el elemento mapa desde el lateral izquierdo situado en la pestaña de “Mapas”. Cambiar las siguientes propiedades.
- Alto: 40 %
- Ancho: Ajustar al contendor
- CentreFromString: 40.396428, -3.696044
↧
5. Añade los marcadores
- Arrastra el elemento marker desde el lateral izquierdo situado en la pestaña de “Mapas” y añade tres marcadores (Marker). Cambiar las siguientes propiedades.
- Latitud: 40.3846525405142
- Longitud: -3.6946181952953343
- Título: Madrid Rio 1
- Latitud: 40.39171302205754
- Longitud: -3.701141327619553
- Título: Madrid Rio 2
- Latitud: 40.39847964363539
- Longitud: -3.7129598110914235
- Título: Madrid Rio 3
- Marker1:
- Marker2:
- Marker3:
↧
6. Añada los botones que van a ir coordinados con los marcadores.
- Añade tres botones y ajusta la propiedad de ancho de cada uno a “Ajustar al contendor”.
- Cambia la propiedad de texto del botón a cada uno de ellos según el orden, el primero se llamará “Madrid Rio 1”, el segundo “Madrid Rio 2” y el tercero “Madrid Rio 3”.
↧
7. Añade el elemento imagen.
- Añade el elemento imagen dejado de los botones y dale las siguientes propiedades.
- Alto: Ajustar al contendor
- Ancho: Ajustar al contendor
↧
8. Sube los archivos de imágenes.
- Descárgate el archivo .zip y añade desde la ventana de medios las siguientes imágenes.(imag_tuto_map.zip)
↧
9. Implementar la lógica de los botones.
- Implementa una lógica para cuando se pulsa los distintos botones y nos muestra las ubicaciones y una imagen del tour.
↧
10. Pista para copiar elemntos de lógica
- Llevar el bloque a la mochila para poderlo duplicar las veces necesarias.
↧
11. Compilación de la aplicación e instalación en el dispositivo
- Pulse el botón de Construir "Build" y seleccione proporcionar código QR para la aplicación QR
- Lea el código QR con su dispositivo Android y descargue la aplicación
- Si es la primera vez que instala una aplicación desde App Inventor es necesario permitir
al dispositivo móvil instalar aplicaciones de origen desconocido (es decir, aplicaciones fuera del
Google Play Store). Para ello:
- Si durante el primer intento de instalación le proporcione un acceso directo a Ajustes-> Seguridad seleccione instalar aplicaciones de origen desconocido
- Si tan solo le deniega la posibilida de instalar. Siga los siguientes pasos:
- Vaya a Ajustes de su dispositivo Android (Settings)
- Acceda a la opción de Seguridad
- Marque el checkbox de permitir instalaciones de origen desconocido
- Tras tener acceso a instalaciones de origen desconocido, intente instalar la aplicación de nuevo.