Componentes generales de

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 diseñador

4.1 Nombre de la aplicación o proyecto

4.2 Menú superior

4.2.1 Proyectos

4.2.2 Conectar

4.2.3 Generar

4.2.4 Ayuda

4.2.5 Mis proyectos

4.2.6 Galería

4.3 Paleta – Interfaz de usuario

5. Glosario

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

App Inventor salió al público en el año 2010 y se creó con base en investigaciones sobre informática
educativa, lo que explica su accesibilidad y fácil manejo, incluso para personas sin experiencia en la
programación informática.

Mediante este recurso didáctico se orienta al Aprendiz a conocer este software de desarrollo, recorriendo
la composición de las opciones del menú superior, la barra de herramientas, clasificada en categorías
con todos los controles disponibles, la ventana de diseño, con todos los controles disponibles, la
ventana de diseño y sus respectivas propiedades.

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 2

La ruta de ingreso al sitio web de MIT App Inventor 2 es: http://ai2.appinventor.mit.edu; para entrar,
debe loguearse mediante usuario y contraseña en la cuenta de correo de Gmail y una vez ingresa a la
cuenta de Google, el sistema lleva al usuario a la siguiente ventana de Bienvenida.

Figura 1. Ventana de bienvenida a App Inventor.

Fuente: MIT App Inventor (2017)

Esta ventana permite configurar y conectar un dispositivo físico Android o utilizar por defecto un
Emulador.

Luego se oprime en el botón “Continue” para ingresar al ambiente de desarrollo de App Inventor.
Por defecto, el entorno está en idioma inglés, pero puede cambiarse a español: en el menú superior
derecho, como se ilustra en la siguiente imagen.

Figura 2. Cambiar idioma.

Fuente: MIT App Inventor (2017)

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

4. Ambiente modo diseñador

En la siguiente imagen se muestra una vista general del entorno de diseño en App Inventor.

Figura 3. Entorno ambiente de diseño en App Inventor.

Fuente: MIT App Inventor (2017)

4.1 Nombre de la aplicación o proyecto

App Inventor utiliza la cuenta de Google para iniciar sesión, de esta manera el sistema recuerda la lista
de proyectos realizados. Si es la primera vez, la lista estará vacía y el sistema le solicitará el nombre
del nuevo proyecto. En la imagen izquierda se visualiza la viñeta “PruebaAppInventor”.

4. 2 Menú superior

4.2.1 Proyectos

Al seleccionar esta opción del menú, se despliegan las siguientes opciones:

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

 Figura 4. Menú superior proyectos.
Fuente: MIT App Inventor (2017)

En este menú de proyectos se pueden realizar acciones como:

• Crear un nuevo proyecto.

• Importación de un proyecto que esté en el computador del usuario.

• Importar un proyecto desde una plantilla o template ya creado (esta plantilla puede ser importada
desde una dirección URL).

• Eliminar un proyecto ya creado.

• Guardar un proyecto o renombrarlo (Guardar proyecto como…).

• Realizar un punto de control o hacer una copia del proyecto, opción generalmente utilizada para
pruebas o añadir nuevas funcionalidades, permitiendo regresar el proyecto a este punto de control, si
así se requiere.

• Exportar el proyecto actual o todos los proyectos al computador.

• Importar-exportar o borrar keystore.

Durante el proceso de creación del APK (generación de instalación), la aplicación se firma con una
clave privada digital asociada a la cuenta de Google. Cada vez que se construye una nueva versión de
la aplicación, se utiliza la misma clave para firmarla.

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

Para instalar una nueva versión, la firma se debe repetir. Por este motivo, resulta fundamental conservar
esta clave. La opción Importar-exportar o borrar keystore permite gestionarla.

4.2.2 Conectar

Al seleccionar esta opción del menú, se despliegan las siguientes opciones:

Figura 5. Menú superior Conectar.

Fuente: MIT App Inventor (2017)

En este menú “Conectar” se pueden realizar acciones como:

• Realizar Conexión con el dispositivo Android por medio de red WIFI, utilizando la aplicación MIT AI2
Companion en el dispositivo, esta es la opción recomendada.

• Realizar Conexión utilizando un Emulador (sin utilizar dispositivo físico Android).

• Realizar Conexión con el dispositivo Android utilizando conexión por cable USB con el dispositivo (sin
utilizar red WIFI).

• Las opciones de Reiniciar conexión y Reinicia completamente, permiten reanudar y restablecer la

conectividad entre el dispositivo Android y el entorno de desarrollo. También se utilizan cuando la
versión MIT AI2 Companion se actualiza y el sitio Web de App Inventor necesita volverse a conectar
con el dispositivo.

4.2.3 Generar

Al seleccionar esta opción del menú, se despliegan las siguientes opciones:

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

 Figura 6. Menú superior Generar.
Fuente: MIT App Inventor (2017)

En este menú “Generar” se pueden realizar acciones como:

• Generar aplicación apk con código QR para su distribución.

• Generar aplicación apk en el computador.

Generar aplicación consiste en que el sistema verifica todos los componentes que hacen parte de la
solución y procede a empaquetarlos en un archivo de instalación apk, para permanecer en el dispositivo,
compartirlo a otras personas o subirlo a la tienda de Google Play Store.
 
4.2.4 Ayuda

Al seleccionar esta opción del Menú, se despliegan las siguientes opciones:

Figura 7. Menú superior Ayuda.

Fuente: MIT App Inventor (2017)

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

En este menú de Ayuda se pueden realizar acciones como:

• Acerca de, permite visualizar la versión actual de MIT App Inventor.

• Biblioteca, esta opción direcciona al sitio web de Documentación y Soporte de App Inventor.

• Extensiones, esta opción direcciona al sitio web oficial de las Extensiones disponibles en App
Inventor. Las extensiones son componentes de terceros que pueden ser importados y utilizados en las
aplicaciones. Estos componentes quedan al final de la Paleta de controles de usuario.

• Tutoriales, esta opción permite visualizar ejemplos en tutoriales de la aplicación.

• Solución de problemas, abre una página web con los problemas más comunes y la solución a estos.

• Foros de la comunidad de App Inventor.

• Companion Information, muestra información de la versión actual de la aplicación MIT AI2 Companion
que va instalada en el dispositivo Android.

• Update the Companion, permite actualizar la versión MIT AI2 Companion en el dispositivo Android.

• Show Splash Screen, muestra la ventana inicial de App Inventor.

En la versión actual de MIT App Inventor, la documentación, tutoriales, ejemplos y soporte técnico
están en idioma inglés.

4.2.5 Mis Proyectos

Esta opción del menú, muestra una lista de todos los proyectos realizados y asociados a la cuenta
actual de Google.

4.2.6 Galería

Esta opción muestra una lista de aplicaciones realizadas por terceros y que se pueden cargar al
ambiente de desarrollo de App Inventor.

App Inventor tiene dos ambientes, a saber:

• Diseñador: es la interfaz de usuario que contiene los controles que permiten “armar” la aplicación.

• Bloques: es la sección donde se permite generar los eventos y la programación de la aplicación.

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

Estas opciones reposan en la parte superior derecha, como se ilustra en la siguiente imagen:

Figura 8. Selector de ambientes Diseñador y Bloques.

Fuente: MIT App Inventor (2017)

A continuación, se detallan los componentes del ambiente Diseñador.

4. 3 Paleta – interfaz de usuario

En esta paleta están los controles a utilizar en el ambiente del Diseñador (parte superior derecha) para
la creación de aplicaciones en App Inventor. A continuación, se relacionan los principales controles y
una descripción de los mismos.

Tabla 1.
Paleta – Interfaz.

10

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

 11

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

 Fuente: SENA

12

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

También existen controles para el “LEGO MINDSTORMS” juego de robótica fabricado por la empresa
LEGO, de esta manera App Inventor puede interactuar por intermedio de comunicación vía Bluetooth.
Para esto siempre se usará el componente BluetoothClient por cada robot a controlar.

Entre los componentes a utilizar están: el sensor de luz, sensor de sonido, de proximidad, envíos de
comandos, funciones para mover y girar el robot, entre otros.

Al final de la paleta de interfaz de usuario, se encuentran las extensiones, que son componentes
realizados por terceros y que permiten añadir funcionalidades a las aplicaciones realizadas con App
Inventor.

5. 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, al no
contar 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.

Keystore: llave privada de seguridad que es creada en el proceso de generar el instalador.

Loguearse: es un neologismo derivado del inglés logging in (iniciar sesión), que significa registrarse
en una página web, mediante nombre de usuario y código clave para quedar identificado.

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

USB: Universal Serial Bus (Bus Universal en Serie) tecnología estándar que define los cables,
conectores y protocolos usados para conectar, comunicar y suministrar corriente eléctrica entre
computadoras y dispositivos electrónicos.

WIFI: tecnología de comunicación inalámbrica, que permite conectar dispositivos electrónicos

mediante el uso de radiofrecuencias o infrarrojos, para la trasmisión de la información.

13

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

6. Referencias bibliográficas

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

Moreno, R. (2016). Desarrollo de aplicaciones para Android usando MIT App Inventor 2. Recuperado
de http://www.bolanosdj.com.ar/MOVIL/LENGUAJES/Usando-MIT-App-Inventor-2.pdf

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

14

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

 15

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