Este documento presenta un laboratorio sobre la creación de una aplicación móvil básica en AppInventor. Explica los pasos para crear la interfaz con etiquetas y botones, asignar funciones a los botones para cambiar el texto mostrado, y probar la aplicación en un emulador. El objetivo es familiarizarse con el entorno de desarrollo de AppInventor y crear una aplicación simple sobre lugares turísticos de Arequipa.

1. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 1
Laboratorio 2: APPINVENTOR
Primera Aplicación
Objetivos
 Conocer el entorno de trabajo.
Página Principal del AppInventor
Ingresar a la página appinventor.mit.edu click en el botón Create!
Debemos de ingresar con la cuenta de nuestro correo de gmail

2. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 2 Ing. Antonio Arroyo Paz
Partes de la Ventana de AppInventor
1. La paleta.- contiene todos los elementos que podemos insertar en nuestra aplicación. Hay
elementos gráficos como cuadros de texto, botones, lienzo de dibujo (Canvas) y elementos
que no se ven en la pantalla del móvil, como base de datos (TinyDB), acelerómetro, cámara
de vídeo, etc.
2. Viewer.- El visor de la pantalla, simula la apariencia visual que tendrá la aplicación en el
móvil. Para añadir un elemento a la pantalla hay que arrastrarlo desde la paleta y soltarlo
en el visor. Los elementos que no tengan visibilidad hay que arrastrarlos también al viewer
y automáticamente se desplazarán debajo de él bajo el epígrafe “Non-visible components”
3. Components.- muestra la lista de los componentes que se han colocado en el proyecto.
Cualquier componente que haya sido arrastrado y soltado desde la paleta al visor
aparecerá ahí. Si se quiere borrar alguno es en la lista de componentes donde está el botón
que permite borrarlo.
4. Media.- muestra las distintas imágenes y sonidos que estarán disponibles para el proyecto.
Cualquier archivo de imagen o audio que se quiera usar en la aplicación hay que insertarlo
usando este apartado para que esté disponible.
5. Properties.- cada vez que en el Viewer se seleccione un componente, en Properties
aparecerán todos los detalles que se puedan cambiar de ese componente. Por ejemplo, al
hacer clic sobre un componente TextBox se podrá cambiar en Properties su color, texto,
fuente, etc. Para aquellos que hayan usado antes entornos de desarrollo del tipo de Visual
Studio en Windows o Gambas en Linux le será muy familiar esta forma de trabajar.

3. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 3
Ejercicio1: Iniciar el proyecto
Nombre del Proyecto: TurismoAQP

4. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 4 Ing. Antonio Arroyo Paz
Ambiente de trabajo
2 label
3 botones

5. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 5
Label1 Propiedad
FontSize 25
Text Centro Histórico Arequipa
TextAlignment Center
Width Fill Parent - OK
Cambiamos los nombres de los botones
Botón Propiedad Text
Button1 Catedral
Button2 Santa Catalina
Button3 San Lazaro

6. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 6 Ing. Antonio Arroyo Paz
Renombramos los botones
Botón Nombre
Button1 BotonCatedral
Button2 BotonSantaCatalina
Button3 BotonSanLazaro
Debe de ubicarse en el botón

7. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 7
Botón Santa Catalina

8. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 8 Ing. Antonio Arroyo Paz

9. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 9
Botón San Lazaro

10. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 10 Ing. Antonio Arroyo Paz

11. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 11
Renombrar Etiqueta Label2
Label2 Propiedad
Text (vacio)
Width Fill Parent - OK

12. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 12 Ing. Antonio Arroyo Paz

13. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 13
Abrir el Blocks Editor

14. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 14 Ing. Antonio Arroyo Paz
Elegir el when do .BotonCatedral.Click

15. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 15
debes buscar un módulo dentro de LabelResultado que permita cambiar el texto. Verás un módulo
que se llama “set LabelResultado.Text to...” que significa “establecer el texto de LabelResultado
a...”. Por tanto arrastra este módulo a la pantalla y conéctalo con el módulo, para que se ejecute
cuando se haga clic en el botón.

16. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 16 Ing. Antonio Arroyo Paz
Ahora sólo falta añadir el texto que debe mostrarse al pulsar el bótón. En este caso vamos a escribir
“Catedral”. Para ello debes ir a la sección “Built-in”, donde se encuentran los módulos más comunes
de AppInventor y pulsar en “Text”. Verás una serie de módulos relacionados con cadenas de texto.
Elige la primera “text” y arrástrala a la pantalla de manera que quede conectada con los módulos
anteriores. Sólo nos queda cambiar la cadena de texto que viene por defecto text por el texto que
queremos que aparezca. Para ello pulsa text y escribe “Catedral”.

17. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 17

18. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 18 Ing. Antonio Arroyo Paz
Colocar el Texto Catedral

19. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 19
Botón Santa Catalina

20. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 20 Ing. Antonio Arroyo Paz

21. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 21
Botón San Lazaro

22. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 22 Ing. Antonio Arroyo Paz

23. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 23
Activamos el emulador
 Click en Connect
 Luego en Emulator

24. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 24 Ing. Antonio Arroyo Paz

25. AppInventor - 2015 Lab 2: Android - AppInventor
Ing. Antonio Arroyo Paz Lab 2 – Pág. 25
Probando haciendo click en cada uno de los botones
Al principio vemos el dispositivo emulador hay que desbloquer, deslizando el candado

26. Lab 2: Android - AppInventor AppInventor-2015
Lab 2 – Pág. 26 Ing. Antonio Arroyo Paz
El profesor:
Ing. Antonio Arroyo Paz