Introducción a la Ingeniería de Sistemas e Informática

Guía de trabajo en laboratorio N° 1:

Aplicaciones con App Inventor
Secciones: ……………………. Apellidos : ………………………..……………….
Docente: Edward Arias Nombres : …………………………………………….
Fecha : .…../……/2020.

Instrucciones: Desarrollar las actividades que indica el docente en base a la guía de trabajo que se
presenta.

1. Propósito: Elaborar aplicaciones móviles básicas con MIT App Inventor 2, que permita
identificar y describir los componentes básicos de programación más empleados.

2. Equipos, herramientas o materiales

• Computador
• MIT App Inventor 2
• Acceso a internet

3. Fundamento Teórico
App Inventor 2 (IA2). Es una herramienta de programación creada por el MIT (Instituto
Tecnológico de Massachusetts), que fue adoptada por Google para sus usuarios como
solución para crear de una forma sencilla aplicaciones para dispositivos Android.
AI2 proporciona una herramienta en línea accesible a través de un navegador web, se debe
disponer de una cuenta de usuario en Google. El navegador recomendado es Google
Chrome o Mozilla Firefox (Internet Explorer no está soportado).
El proceso de creación consta de 3 pasos:
• Diseñador. Muestra el display de un móvil y se utiliza para el diseño de las pantallas de la
aplicación donde se situarán los distintos componentes: imágenes, botones audios,
textos, etc. configurando sus propiedades (aspecto gráfico, comportamiento, etc.)
• Editor de bloques. Permite programar de una forma visual e intuitiva el flujo de
funcionamiento del programa utilizando bloques.
• Generador de la aplicación. Una vez terminada la aplicación se puede generar el
instalador APK obteniéndose un código QR para su descarga desde el móvil o bien el
propio archivo APK para descargar y enviar.

4. Procedimientos:
• Abre el navegador Google Chrome.

• Accede a la dirección de AI2: http://ai2.appinventor.mit.edu/

• Introduce tus credenciales de Google: usuario y contraseña (Trabaja con el correo de la
organización y tu contraseña correspondiente).
• Se muestra el cuadro de diálogo ¡Welcome to App Inventor! (Bienvenido a App Inventor).
 Introducción a la Ingeniería de Sistemas e Informática

• Hacer clic en Teke Survey Later

• Para cambiar el idioma de la interfaz, en la barra de menús

superior derecha pulsa en English para desplegar el combo y elegir
el idioma español.
• Al principio te situarás en la página Mis proyectos desde donde es
posible gestionar tus proyectos de aplicaciones.

• Para ver la aplicación creada en un dispositivo la opción recomendada, es por una red Wi-
Fi, consiste en instalar la aplicación MIT AI2 Companion (de Plav Store) en la tableta para
establecer conexión con la web http://ai2.appinventor.mit.edu/ y poder testear las
aplicaciones creadas en esta aplicación. El requisito previo es que la tableta y el ordenador
que accede a la interfaz web deben estar conectados a la misma Wi-Fi.
 Introducción a la Ingeniería de Sistemas e Informática

Aplicación de bienvenida con AI2

• Clic en el botón Comenzar un proyecto nuevo …
• En el cuadro de diálogo Crear un nuevo proyecto de App
Inventor introduce el nombre del proyecto: Lab1_Apellidos
y pulsa en el botón Aceptar. Los nombres de proyectos no
pueden tener caracteres acentuados, eñes ni espacios en
blanco.
• Se abrirá el editor de la aplicación. Las partes más
importantes de la interfaz del diseñador son:

1
2 3
4 5 6 7

1. Barra de menús. Desde esta barra es posible acceder al gestor de proyectos, conectar
con el emulador o tableta para el testeo en directo, generar el instalador APK, etc.
2. Gestor de pantallas. Se ofrece un combo que permite situarte en la pantalla ScreenX
que se desea editar. También se ofrece el botón Añadir ventana o bien Eliminar
ventana.
3. Diseñador/Bloques. Usando estos dos botones se podrá acceder al Diseñador o al
Editor de Bloques. Con el Diseñador podremos crear las pantallas de la aplicación y
situar en cada pantalla los elementos necesarios: imágenes, textos, botones, etc. Con
el Editor de bloques se podrá programar el comportamiento de estos elementos.
4. Paleta de componentes. Se ofrecen organizados en categorías los distintos
componentes que se pueden añadir a las pantallas de la aplicación.
5. Visor. Muestra una vista previa de los componentes situados en la pantalla actual.
6. Componentes. Mediante una estructura de árbol cuyo nodo principal es el
componente Screen (Pantalla) permite acceder a los distintos elementos que hemos
situado en esa pantalla. Se pulsa sobre el componente para luego en el panel de
Propiedades configurar sus parámetros. También permite seleccionarlo y pulsar en el
botón Cambiar nombre o Borrar.
7. Propiedades. Permite definir los valores de los distintos parámetros del componente
seleccionado en el panel Componentes.
8. Medios. Desde este cuadro es posible Subir o Eliminar los archivos de imagen, audio,
etc. que utilizaremos en nuestra aplicación.
 Introducción a la Ingeniería de Sistemas e Informática

• Configurar los parámetros de la aplicación:

1. En el panel de Componentes selecciona
Screen1.
2. En el panel de Propiedades en el cuadro
AppName (Nombre de Aplicación) introduce
el nombre que tendrá la aplicación cuando
se muestre en el Escritorio de la tableta.
Introduce: Bienvenida. Aquí es posible utilizar
caracteres especiales.
3. Pulsa en el cuadro ColorDeFondo y elige color
Gris claro como fondo de la pantalla.
1
4. Haz clic en el cuadro Icono y luego pulsa en
Subir archivo … Vamos a subir una imagen 2
que será el icono que muestre la aplicación
en el Escritorio de la tableta.
5. En el cuadro de diálogo Subir archivo … pulsa
en el botón Seleccionar archivo para
localizar en la carpeta el archivo 3
bienvenida.png. Clic en el botón Aceptar.

4 6
5

• Disposición en pantalla

2
3
1
4
5
 Introducción a la Ingeniería de Sistemas e Informática

1. Desde la Paleta abre la categoría Disposición y arrastra el componente

DisposiciónHorizontal para situarla en el Visor.
2. En el panel de Componentes pulsa en el ítem DisposiciónHorizontal1 para
seleccionarlo.
3. En el panel de Propiedades definir DispHorizontal en Centro 3; DispVertical Centro 2;
Alto en 250 pixels y Ancho en Ajustar al contenedor.

• Añadir una imagen a la pantalla

1. Desde la Paleta abre la categoría Interfaz de usuario y arrastra el componente Imagen
para situarla en el Visor.

2. En el panel de Componentes pulsa

en el ítem Imagen1 para
seleccionarlo.
3. En el panel de Propiedades define
en Alto Ajustar al contenedor, en
Ancho Ajustar al contenedor. 1
4. Pulsa en el cuadrado Foto y luego
pulsa en Subir archivo… 2
5. En el panel Subir archivo… haz clic
en el botón Seleccionar archivo para
3
localizar la imagen UC.png, clic en
Abrir y luego en Aceptar. Al cabo de
unos instantes se subirá la imagen al 4
servidor y se mostrará en la página.
6. Marcar la casilla
EscalarFotoAlTamañoMáximo
 Introducción a la Ingeniería de Sistemas e Informática

• Añadir Texto a la pantalla

1. Desde la Paleta
abre la
categoría
Interfaz de
usuario
seleccione el
componente
Etiqueta y
arrastra a la
pantalla del Visor

2. En el panel de
Componentes
pulsa en el ítem
Etiqueta1 para
seleccionarlo.

3. En el panel de Propiedades define en

ColorDeFondo Negro, marcar Negrita,
Tamaño de letra 18, Tipo de letra por 1
defecto, Alto 20 pixels, Ancho Ajustar al
contenedor, Texto Universidad 2
Continental, PosiciónDelTexto centro:1 y
ColorDelTexto Blanco.

3
4

5
6

10 7
8
9
 Introducción a la Ingeniería de Sistemas e Informática

• Añadir Botones a la pantalla

4. Desde la Paleta
abre la categoría
Disposición
nuevamente y
arrastra el
componente
DisposiciónTabular
para situarla en el
Visor.

5. En el panel de
Componentes pulsa
en el ítem
DisposiciónTabular1
para seleccionarlo.

6. En el panel de
Propiedades definir Columnas 2;
Alto Ajustar al contenedor;
Ancho Ajustar al contenedor y
Registros 2.
1
2
7. Desde la Paleta, en la categoría 3
Interfaz de usuario, arrastra el
componente Botón (4 veces) 4
para situarlos en el Visor que
muestra la pantalla.
 Introducción a la Ingeniería de Sistemas e Informática

8. En el panel de Componentes
pulsa en el ítem Botón1 para
seleccionarlo.
9. Hacemos clic en el botón 1
Cambiar nombre, y en la
ventana que despliega
escribimos Visión, pulsamos
aceptar y habrá cambiado de
2
nombre el Botón1 a Visión.
10. En el panel de Propiedades
definir ColorDeFondo Turquesa, 3
marcamos Negrita, Tamaño de
letra 16, Forma seleccionamos
redondeado, Texto Visión,
PosiciónDelTexto centro:1 y
ColorDeTexto Azul.

11. Repetimos los pasos del 8 al 10

para los botones 2, 3 y 4,
considerando los siguientes
nombres: Botón2èMisión,
Botón3èBienvenida y 4
Botón4èSalir.

5
6
7

8
 Introducción a la Ingeniería de Sistemas e Informática

• Añadir Pantallas
1. En el Gestor de
pantallas,
seleccionamos
Añadir ventana,
desplegará una
ventana para
para nombrar la
nueva pantalla,
para nuestro
caso las nuevas
pantallas serán:
Vision, Mision y
Bienvenida
(nombre de las
pantallas no
acepta acentos)

• Diseño de pantalla: Vision

1. La pantalla Vision, contendrá una foto de la
universidad, la visión de la universidad y un
botón para retornar a la pantalla principal.
 Introducción a la Ingeniería de Sistemas e Informática

• Diseño de pantalla: Mision

1. La pantalla Mision, contendrá una foto de la
universidad, la misión de la universidad y un botón
para retornar a la pantalla principal.

• Diseño de pantalla: Bienvenida

1. La pantalla Bienvenida, contendrá una foto de
bienvenida, un campo de texto para introducir
un nombre, un botón para emitir el saludo
(reproducción de saludo) cuando se pulsa y
otro botón para retornar a la pantalla principal.
 Introducción a la Ingeniería de Sistemas e Informática

• Programación de la pantalla Screen1

1. En el gestor de pantallas seleccionamos Screen1.
2. Pulsa en el botón Bloques para entrar al Editor de bloques, que se ubica en la parte
superior derecha.

3. En el panel Bloques pulsa en el elemento Visión situado en Screen1. En el catálogo de

bloques que se muestra, arrastra hacia la derecha el bloque cuando Visión Clic.

1
 Introducción a la Ingeniería de Sistemas e Informática

4. En el panel Bloques pulsa en el elemento Control situado en Screen1. En el catálogo

de bloques que se muestra, arrastra hacia la derecha el bloque abrir otra pantalla
Nombre de la pantalla y hacer encajar dentro del bloque cuando Visión Clic.

5. En el panel Bloques pulsa en el elemento Texto situado en Screen1. En el catálogo de

bloques que se muestra, arrastra hacia la derecha el bloque “ “ y hacer encajar al
lado del bloque abrir otra pantalla Nombre de la pantalla, escribimos dentro del
bloque “ “ el nombre de la pantalla que sedeamos abrir “Vision”.

1
2

6. Repetir los pasos 3, 4 y 5

para los botones Misión
y Bienvenida, ubicados
en el panel de bloques.

7. Para el botón Salir, configuramos con el bloque

cerrar aplicación del catálogo de bloques del
elemento Control.
 Introducción a la Ingeniería de Sistemas e Informática

• Programación de la pantalla Vision

1. En el gestor de
pantallas
seleccionamos Vision.
3
2. En el panel Bloques 2
pulsa en el elemento
4
Volver. En el catálogo
de bloques que se
muestra, arrastra hacia
la derecha el bloque
cuando Volver Clic.
3. Nos ubicamos en el
elemento Control, y
buscamos en el
catálogo de bloques el
bloque cerrar pantalla
y hacemos encajar en
el bloque cuando
1
Volver Clic.

• Programación de la pantalla Mision

1. En el gestor de
pantallas
seleccionamos Mision.
3
2. En el panel Bloques 2
pulsa en el elemento
4
Volver. En el catálogo
de bloques que se
muestra, arrastra hacia
la derecha el bloque
cuando Volver Clic.
3. Nos ubicamos en el
elemento Control, y
buscamos en el
catálogo de bloques el
bloque cerrar pantalla
y hacemos encajar en
el bloque cuando
1
Volver Clic.
 Introducción a la Ingeniería de Sistemas e Informática

• Programación de la pantalla Bienvenida

5 9
2
8
4
6 10

12 14
7
1

11
3

• Generar e instalar la aplicación

1. Una vez terminada la

aplicación en la barra de
menús elige Generar > App
(Generar código QR para el
archivo .apk)

2. Se compilará la aplicación y al cabo de unos segundos se mostrará un código QR con

una validez de 2 horas para la descarga del archivo .apk

3. Abre en tu celular la aplicación MIT AI2 Companion, para capturar este código QR y
con ello descargar directamente al celular el instalador APK de esa aplicación.
4. Recuerda que para poder instalar una aplicación no contenida en Play Store es
necesario activar en el celular el elemento: Ajustes > Seguridad > Administración de
dispositivos > Orígenes desconocidos.
 Introducción a la Ingeniería de Sistemas e Informática

5. Otra posibilidad es elegir Generar > App (guardar

archivo .apk en mi ordenador) para descargarlo al
equipo y luego copiarlo usando una memoria USB o
similar.
6. En cualquiera de ambos casos, en el celular ejecuta
el instalador APK.
7. Tras concluir la instalación pulsa en Abrir o bien en
Listo.
8. En el menú de aplicaciones o en el Escritorio pulsa
sobre el icono de la nueva aplicación instalada:
Bienvenida.

5. Actividades o tereas

a) Adicionar una pantalla con el nombre Alumno, en el que consignará una foto, sus datos, y
una descripción breve de su persona, tener en cuenta que se debe acceder a esta
pantalla desde la pantalla principal de la aplicación.

b) En la pantalla de Bienvenida configurar una función que cuando se agite el teléfono debe
de dar el mensaje hablado “Nombre deja de moverme”. (Debe emplear el sensor
Acelerómetro), adicionar también un botón Limpiar que permita eliminar el nombre escrito
en el campo de texto.

c) Una vez concluida la aplicación desarrollada,

deberá compartir su archivo (?????.aia) en la ruta
que le indicará el docente.

d) Para generar el archivo (?????.aia), hacer click

en Proyectos y seleccionar la opción Exportar a
mi ordenador el proyecto (.aia) seleccionado.

6. Referencias bibliográficas consultadas y/o enlaces recomendados

• POSADA PRIETO, Fernando. Diseño de apps con MIT App Inventor 2. 2015.
• http://ai2.appinventor.mit.edu