Primeros pasos con

App Inventor 2

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

Tabla de contenido

1. Introducción

2. Mapa conceptual

3. Introducción al entorno de desarrollo con App Inventor

4. Ambiente modo Bloques

4.1. Bloques de Control

4.2. Bloques de Lógica

4.3. Bloques de Matemáticas

4.4. Bloques de Texto

4.5. Bloques de Listas

4.6. Bloques de colores

4.7. Bloques de variables

4.8. Bloques de procedimientos

5. Mi primera aplicación en App Inventor

6. Generar la aplicación

7. Glosario

8. Referencias bibliográficas

Control de documento

Créditos

Creative commons

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

1. Introducción

La oferta de aplicaciones a través de dispositivos móviles es una tendencia creciente y dinámica, con
grandes oportunidades para desarrolladores y empresas. Día a día surgen nuevas propuestas para
diversos públicos, con incidencia en el campo de la salud, la educación, el entretenimiento, el sector
empresarial y gubernamental, entre otros.

Resulta ventajoso conocer estos desarrollos y en especial aprender a apropiar herramientas de uso
libre como App Inventor, a fin de participar en este mercado emergente, con modelos de negocio
innovadores y competitivos.

Este material ofrece herramientas de nivel básico para la introducción al mundo de las aplicaciones
móviles, mediante la realización de un ejercicio práctico con App Inventor. Explica los componentes
del programa, con un recorrido sobre las opciones del menú superior, la barra de herramientas y la
ventana de diseño, con sus propiedades, categorías y controles disponibles.

2. Mapa conceptual

Fuente: SENA

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

3. Introducción al entorno de desarrollo con App Inventor

En el objeto de aprendizaje Introducción al entorno de desarrollo móvil con App Inventor visto en la
Actividad AA1, se detallan los pasos previos de ingreso al software, que en resumen son los siguientes:

• Cuenta de Google (por ejemplo, una cuenta de correo de Gmail).

• Dispositivo Android (puede ser teléfono inteligente o tableta) o en caso de no disponer de un dispositivo
físico, se debe descargar un emulador y ser ejecutado en el computador.

• Si se tiene dispositivo Android se debe descargar la aplicación MIT AI2 Companion en el dispositivo.

• Computador conectado a Internet con navegador Firefox o Google Chrome (recomendado) y

posicionado en el sitio web de la aplicación MIT AI2.

Una vez cumplidos estos requisitos, se procede a utilizar el ambiente de desarrollo de aplicaciones.
Para esto se debe ir al sitio web de MIT AI2, http://ai2.appinventor.mit.edu

4. Ambiente modo Bloques

Este ambiente permite realizar la programación de los diferentes eventos que componen la aplicación.
Estos bloques se arman progresivamente con base en los controles y eventos necesarios, dependiendo
del diseño a realizar. Una de las principales ventajas de App Inventor, es la utilización de una interfaz
con objetos visuales que simulan piezas de puzzle, de modo tal que facilita la tarea del programador,
sin restar potencia a las creaciones que genere.

La opción Bloques se encuentra en el lado superior derecho, como se ilustra en la siguiente imagen:

Figura 1. Seleccionar Bloques.

Fuente: MIT App Inventor (2017)

En la siguiente imagen, se muestra una vista general del entorno de Bloques en App Inventor.

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 Figura 2. Entorno ambiente de Bloques en App Inventor.
Fuente: MIT App Inventor (2017)

4.1 Bloques de control

Contienen objetos como:

• Si el valor es cierto, ejecutar las siguientes instrucciones.

• Uso de ciclos (valor inicial, hasta valor final, en saltos o incrementos).

• Preguntas de control.

• Abrir otra pantalla, Cerrar pantalla, Cerrar la aplicación.

Como se ilustran en la siguiente imagen:

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 Figura 3. Bloques de Control.
Fuente: MIT App Inventor (2017)

4.2. Bloques de Lógica

Contienen objetos como:

• Asignación de valores lógicos (falso, verdadero) a variables.

• Condicional que evalúa expresión lógica.

• Condicionales que evalúan expresiones o variables según operadores igual (=), diferente (≠), AND
(y), OR (o).

Como se ilustran en la siguiente imagen:

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 Figura 4. Bloques de Lógica.
Fuente: MIT App Inventor (2017)

4.3. Bloques de Matemáticas.

Contienen los siguientes objetos:

• Inicializar variables en 0 (cero).

• Evaluar operadores matemáticos como mayor que (>), mayor o igual (≥), menor que (<), menor o
igual (≤), distinto (≠), igual (=).

• Realizar operaciones de suma, resta, multiplicación, división, potenciación, residuo, raíz cuadrada,
valor absoluto, redondeos, seno, coseno, tangente.

• Generación de número aleatorios.

Como se ilustran en la siguiente imagen:

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 Figura 5. Bloques de Matemáticas.
Fuente: MIT App Inventor (2017).

4.4. Bloques de Texto

Contienen objetos como:

• Inicializar variables en algún texto.

• Concatenar o unir cadenas de texto, calcular el tamaño de un texto, validar si está vacío, comparar
textos, recortar, pasar a mayúsculas o minúsculas, buscar una cadena de texto dentro de otra, extraer
texto, entre otros.

Como se ilustran en la siguiente imagen:

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 Figura 6. Bloques de Texto.
Fuente: MIT App Inventor (2017)

4.5. Bloques de Listas

Contienen objetos como:

• Crear lista vacía, construir lista, añadir elementos a la lista, extraer elementos, verificar si un elemento
está en la lista, eliminar, copiar la lista en otra lista.

• Exportar elementos de la lista en formato CSV o importar elementos desde un archivo CSV a una
lista.

Como se ilustran en la siguiente imagen:

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 Figura 7. Bloques de Lista.
Fuente: MIT App Inventor (2017)

4.6. Bloques de Colores

Contienen objetos de diversos colores para ser utilizados en el área de Diseño como botones, textos,
líneas, entre otros.

4.7. Bloques de Variables

Contienen objetos como:

• Iniciar variable global con un valor especificado.

• Tomar el valor o asignar un valor a la variable.

10

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 Figura 8. Bloques de Variables.
Fuente: MIT App Inventor (2017)

4.8. Bloques de Procedimientos

Pueden referenciar Bloques de código, que a su vez pueden ser utilizados en varias secciones de
la aplicación y estos procedimientos pueden simular funciones (que devuelven valor) o métodos (sin
devolver valor).

5. Mi primera aplicación en App Inventor

A continuación, se va a realizar una aplicación denominada Zoológico, cuyo objetivo consiste en exhibir
en la pantalla las imágenes de cuatro animales, que emitirán su sonido, al dar clic sobre cada uno.

Pasos:

Crear un proyecto nuevo con nombre Zoológico.

En ambiente Diseño:

• En la ventana Screen1, Propiedades:

- Pantalla Acerca De: nombre de quien realiza la aplicación.

11

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

- Ícono: definir ícono de la aplicación. El ícono no aparece en el ambiente de Diseño, solo cuando se
genere el apk y se instale la aplicación.

- Orientación de la pantalla: vertical, con esto se mantiene la orientación así se mueva el teléfono.

- Para organizar los botones (2 por cada línea), en la Interfaz de usuario, se busca Disposición –
Disposición Horizontal.

- Luego se arrastran a la disposición horizontal, dos botones que van a contener las imágenes de la
primera pareja de animales.

- Se repite el proceso de Disposición Horizontal, para los siguientes dos botones.

- Se deben alinear los contenedores de Disposición Horizontal, Ancho: Ajustar al contenedor (ocupa el
ancho de la pantalla) y Disposición Horizontal, Centro: Para que queden los botones centrados dentro
del contenedor.

- Se adiciona un quinto botón para salir de la aplicación. La siguiente imagen muestra los objetos en
la pantalla Screen1:

Figura 9. Disposición horizontal.

Fuente: MIT App Inventor (2017)

• Para cada botón se debe de realizar lo siguiente:

- Renombrar el botón (por ejemplo, Botón1 por btnLeon, que corresponde a la imagen del León).

12

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

- Quitar el texto por defecto (ir al campo Texto y quitar la leyenda).

- Asignar la imagen del animal respectivo a cada botón, ir al campo Imagen y seleccionar la imagen
correspondiente.

- Ajustar las propiedades Ancho y Alto (por ejemplo, 128 pixeles).

• Luego se añaden componentes de sonido por cada animal. Ir a la sección de Medios – Sonido y
arrastrar Sonido (en este caso, serían cuatro animales entonces cuatro sonidos). Luego renombrar
cada objeto sonido (por ejemplo, sndLeon para el sonido del león y asociar cada sonido en su propiedad
Origen al sonido respectivo.

A continuación, se visualiza el estado de la aplicación Zoológico en la ventana de Diseño:

Figura 10. Ventana Diseño Aplicación Zoológico.

Fuente: MIT App Inventor (2017)

Hasta aquí los objetos que van en la ventana de Diseño. Se procede a configurar los Controles y
Eventos en la Sección de Bloques (parte superior derecha Bloques).

Al lado izquierdo de la sección de Bloques aparecen los controles integrados y los objetos que
componen la ventana de diseño. Por ejemplo, al seleccionar btnLeon aparecen los eventos asociados
al control Botón (Clic, Obtener foco, Soltar, Perder foco, entre otros). Para el ejercicio del zoológico se
necesita el evento clic asociado a cada botón, de manera se reproduzca el sonido del León, al hacer
clic sobre btnLeon.

13

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

Se selecciona el evento clic y se arrastra al visor de Bloques. Luego se le indica a App Inventor que,
con clic en el botón, se debe de reproducir el sonido. Para esto, se selecciona el objeto sndLeon y su
evento Reproducir, quedando de la siguiente manera:

Figura 11. Evento clic del Botón btnLeon.

Fuente: MIT App Inventor (2017)

Del mismo modo se realiza para los demás eventos clic de los otros botones, o también se puede
hacer duplicando el evento clic del btnLeon (sobre el bloque botón derecho Duplicar).

Luego se cambia el objeto btnLeon por btnLoro y se le asigna el respectivo objeto de sonido.

Para el botón Salir se escoge clic; en la sección de Controles Integrados se selecciona el componente
Control y el evento cerrar la aplicación. Quedando el visor de Bloques de la siguiente manera:

Figura 12. Ventana Bloques Aplicación Zoológico.

Fuente: MIT App Inventor (2017)

14

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

6. Generar la aplicación

Una vez esté conforme la aplicación con las funcionalidades requeridas, se procede a “Generar”, que
consiste en crear un archivo apk compilado, para compartirlo con otros usuarios, o integrarlo al Play
Store de Google.

Ir al menú de Generar – App (generar código QR para el archivo apk) o App (guardar archivo apk en el
ordenador), si se desea guardar el archivo.apk en el equipo.

Figura 13. Proceso de compilación.

Fuente: MIT App Inventor (2017)

Luego se genera el código QR de instalación de la aplicación, que debe escanearse desde el teléfono
con un software de lectura de códigos de barras como BarCode Scanner, e ir al sitio web de la URL
especificada. Esta dirección web solo estará disponible para descarga de cada aplicación por las
siguientes dos horas.

El teléfono muestra el siguiente mensaje de advertencia: “Este tipo de archivo puede dañar tu
dispositivo. ¿Quieres descargar Zoológico apk de todas formas?”. Entonces se da clic en Aceptar y el
sistema instala la aplicación en el teléfono.

7. Glosario

APK: sigla de Application Package File. Extensión del archivo empaquetado que corresponde al
instalador de la aplicación.

Emulador: en informática, es un software o hardware que permite el uso de un dispositivo o programa

como si fuese otro. App Inventor permite probar sus aplicaciones por medio de un emulador, si no se
cuenta con dispositivos físicos.

Generar: en el lenguaje de App Inventor, esta palabra denota que se realiza verificación de todos los
componentes de la aplicación y genera un archivo empaquetado .apk.

MIT AI2 Companion: aplicación que debe instalarse en el dispositivo Android para probar la aplicación
desarrollada en App inventor.

15

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

8. Referencias bibliográficas

MIT App Inventor. (S.f.). Cualquiera puede crear aplicaciones que impactan al mundo. Recuperado de
http://appinventor.mit.edu

Universidad de Castilla La Mancha. (2015). Curso de App Inventor. Escuela Superior de Informática.
Recuperado de http://webpub.esi.uclm.es/img/upload/plugin/ESI-TechLab-AppInventor2-2015beta.pdf

Control de documento

16

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje

 17

FAVA - Formación en Ambientes Virtuales de Aprendizaje - SENA - Servicio Nacional de Aprendizaje