E-Business

Guía Práctica
Aplicaciones con App Inventor
Secciones: ……………………. Apellidos : ………………………..……………….
Docente: Davy Darío Veli Rojas Nombres : …………………………………………….
Fecha : / /2023.

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 desarrollar una
aplicación para móvil como parte de la estrategia de marketing para nuestro proyecto de Plan de Negocios.

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). Luego
presionamos la opción de Start Blank Project
 E-Business

Cambio de Idioma:

• 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 WiFi, 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.

Aplicación de bienvenida con AI2

 E-Business

• 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.
• 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
 1
2
E-Business

tendrá la aplicación cuando se muestre en el Escritorio de la tableta. Introduce: Bienvenida. Aquí es

posible utilizar caracteres especiales.

3
3. Pulsa en el cuadro ColorDeFondo y elige color Gris claro como fondo de la pantalla.
4. Haz clic en el cuadro Icono y luego pulsa en Subir archivo … Vamos a subir una imagen 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 bienvenida.png. Clic en el botón Aceptar.

4 6
5

• Disposición en pantalla

2
3
1
4
5

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.
 E-Business

2. En el panel de Componentes pulsa

1
2
3

en el ítem Imagen1 para seleccionarlo.

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

• Añadir Texto a la pantalla

 E-Business

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
•
E-Business

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ón Tabular1
para seleccionarlo .

6. En el panel de
Propiedades defin ir 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 situarl os en el Visor que
muestra la pantalla .
 E-Business

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
defin ir 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
•
E-Business

seleccionamos
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
Diseño de las Mision
de pantalla:
pantallas no acepta
1. La pantalla Mision, contendrá una foto de la universidad, la
acentos)
misión de la universidad y un botón para retornar a la
pantalla principal.

• 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
• Diseño para retornar
de pantalla: a la pantalla principal .
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.
 E-Business

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.
 •
E-Business

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”.
 E-Business

1
2

6. Repeti r 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 .

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

•
E-Business

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.
 E-Business

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.
 E-Business

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.

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