Introducción al entorno de

desarrollo móvil con App

Inventor

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 mundo Android

3.1 Arquitectura de Android

4. Crear aplicaciones con App Inventor

4.1 Primeros pasos

4.1.1 Crear cuenta de Google

4.1.2 Sitio web de MIT App Inventor 2

5. Formas de conexión con App Inventor

5.1 Dispositivo Android conectado mediante Wifi a la misma red de datos

5.2 Utilizar emulador de Android

5.3 Utilizar conexión USB

6. Glosario

7. 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 impactó el desarrollo de aplicaciones móviles para el sistema operativo Android desde
su primera versión, debido a su filosofía de utilizar una interface de controles y programar sus eventos
como piezas de puzzle o rompecabezas.

Una de las principales ventajas de esta herramienta, es que permite desarrollar aplicaciones
para Android sin altos conocimientos de programación. A su vez, App Inventor permite probar sus
aplicaciones utilizando dispositivos físicos (tabletas o celulares) en un entorno conectado vía WIFI
(como opción recomendada), o en caso de no tener dispositivo físico, por medio del emulador de
un celular.

Este recurso didáctico pretende brindar al Aprendiz conocimientos sobre App Inventor, teniendo en
cuenta su historia y procesos de desarrollo, sus versiones y características, así como las pautas
de configuración de la plataforma, para iniciar el desarrollo de aplicaciones con esta interesante
herramienta tecnológica.

2. Mapa conceptual

Fuente: SENA

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

3. Introducción al mundo Android

Android es un sistema operativo y una plataforma software, basado en Linux que puede usarse en
teléfonos móviles, tabletas, netbooks, equipos portátiles o de escritorio.

En el año 2007 la fundación Open Handset Alliance, (un consorcio de compañías de hardware, software
y telecomunicaciones dedicado a avanzar en los estándares abiertos de los dispositivos móviles),
presentó el primer móvil con sistema operativo Android, el HTC Dream, que en el año 2008 inició su
proceso de comercialización.

Android es el sistema operativo de Google y aunque lleva poco tiempo en el mercado, ha mostrado
una evolución realmente impresionante, mediante las versiones que periódicamente libera al público
en general.

El historial de versiones viene desde la versión 1.0 lanzada en el 2008, hasta la versión más reciente de
agosto del 2017, denominada OREO. Estas actualizaciones básicamente corrigen fallos de programa
y agregan nuevas funcionalidades al sistema operativo. Desde abril de 2009, las versiones de Android
adoptan denominaciones en clave asociadas a dulces (en inglés) y sus nombres siguen un orden
alfabético: Cupcake, Donut, Eclair, Froyo, Gingerbread, Honeycomb, Ice Cream Sandwich, Jelly Bean,
KitKat, Lollipop, Marshmallow, Nougat y el Android Oreo.

En la siguiente imagen se muestran las capas que conforman el sistema operativo Android:

Figura 1. Capas del sistema Android.

Fuente: Universidad Complutense de Madrid (s.f.)

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

La estructura del sistema operativo Android se compone de aplicaciones que se ejecutan en un
framework Java de aplicaciones orientadas a objetos sobre el núcleo de las bibliotecas de Java, en una
máquina virtual Dalvik con compilación en tiempo de ejecución hasta la versión 5.0, luego se cambió
al entorno Android Runtime (ART). En lugar de utilizar una tradicional máquina virtual Java (VM), como
Java ME (Java Mobile Edition), Android utiliza su propia máquina virtual personalizada, diseñada para
asegurarse que la multitarea se ejecute de manera eficiente en un único dispositivo.

Las bibliotecas escritas en lenguaje C, incluyen un administrador de interfaz gráfica (surface manager),
administrador de superficies, un framework OpenCore, una base de datos relacional SQLite, una
Interfaz de programación de API gráfica OpenGL ES 2.0 3D, un motor de renderizado WebKit, un
motor gráfico SGL, SSL y una biblioteca estándar de C Libc.

Actualmente este sistema operativo reúne a una gran comunidad de desarrolladores que están creando
aplicaciones para extender la funcionalidad de los dispositivos. Existen varias tiendas de aplicaciones
(gratuitas y pagas) como Google Play, tienda oficial de Google, y otras como Samsung Apps, de
Samsung, que también proporcionan aplicaciones sobre Android.

3.1 Arquitectura de Android

A continuación, los componentes principales del sistema operativo de Android:

Aplicaciones

Las aplicaciones base incluyen un cliente de correo electrónico, programa de SMS, calendario, mapas,
navegador, contactos y otros. Todas las aplicaciones están escritas en lenguaje de programación Java.

Marco de trabajo de aplicaciones

Los desarrolladores tienen acceso completo a los mismos APIs del framework usados por las
aplicaciones base. La arquitectura está diseñada para simplificar la reutilización de componentes;
cualquier aplicación puede publicar sus capacidades y cualquier otra aplicación puede luego hacer
uso de esas capacidades. Este mismo mecanismo permite que los componentes sean reemplazados
por el usuario.

Bibliotecas

Android incluye un conjunto de bibliotecas de C/C++ usadas por varios componentes del sistema.
Estas características se exponen a los desarrolladores a través del marco de trabajo de aplicaciones
de Android; algunas son: System C library (implementación biblioteca C estándar), bibliotecas de
medios, bibliotecas de gráficos, 3D y SQLite, entre otras.
Runtime de Android (ART)

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

Entorno de ejecución que lleva a cabo la transformación de la aplicación en instrucciones de máquina,
que luego son ejecutadas por el entorno de ejecución nativo del dispositivo. Desde la versión 5.0
lollipop de Android, reemplazó a Dalvik con las mismas funciones, pero mejoradas.

A través de “ahead-of-time” (AOT), compila el código posterior a la instalación de la aplicación. Este

archivo es utilizado al abrir la aplicación, con esto se evita que se compile continuamente, cada vez
que está siendo ejecutada. Este componente ofrece mejoras de rendimiento, haciendo que el uso del
procesador del móvil se reduzca y aumente la duración de la batería. También hace recolección de
basura y posee funciones de depuración y perfilado. Mantiene compatibilidad con versiones anteriores,
utilizando el mismo código de bytes de entrada que utilizaba Dalvik.

Núcleo Linux

Android depende de Linux para los servicios base del sistema como seguridad, gestión de memoria,
gestión de procesos, pila de red y modelo de controladores. El núcleo también actúa como una capa
de abstracción entre el hardware y el resto de la pila de software.

4. Crear aplicaciones con App Inventor

App Inventor es una herramienta desarrollada por MIT (Massachusetts Institute of Technology) que
permite el desarrollo de aplicaciones para Android, en comparación con la programación tradicional de
aplicaciones para esta plataforma.

Actualmente se encuentra la versión llamada MIT App Inventor 2 o AI2 con mejoras de la versión
anterior. App Inventor se basa en una interface web, en la que se desarrolla la aplicación por medio
de programación por bloques y una Companion App, o aplicación compañera, en donde se visualizará
en tiempo real las modificaciones que se realicen en la interface web y en donde se podrá probar la
aplicación a medida que se desarrolle.

2012 - 2017 Massachusetts Institute of Technology

Figura 2. Logo MIT App Inventor.

Fuente: MIT App Inventor (2017)

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

En la siguiente imagen se ilustran los pasos necesarios para crear una aplicación App Inventor:

Figura 3. Pasos para crear aplicación con App Inventor.

Fuente: SENA

Para crear una aplicación en el sitio web MIT App Inventor hay que realizar dos pasos:

• El diseño de la aplicación, en la que se seleccionan los componentes para su aplicación.

• El editor de bloques, donde se van escogiendo los bloques necesarios según la aplicación a realizar.

La aplicación aparecerá paso a paso en la pantalla del teléfono o en el emulador, a medida que se
añadan piezas (bloques) a la misma, de modo que se puede ir probando mientras se elabora. Cuando
se termine, se puede empaquetar la aplicación y producir una aplicación independiente para instalar.

Si no se cuenta con un teléfono Android, es posible construir aplicaciones utilizando el emulador de

Android, software que se ejecuta en el computador, e imita el sistema operativo del teléfono.

El entorno de desarrollo de App Inventor es compatible con Mac OS X, Windows y Linux, y varios
modelos de teléfonos Android populares. Las aplicaciones creadas con App Inventor se pueden
instalar en cualquier dispositivo Android. Antes de poder utilizar App Inventor, es necesario configurar
el computador e instaurar los archivos de instalación en el equipo.

4.1 Primeros pasos

Para comenzar a trabajar con App Inventor se necesita:

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

• Dispositivo Android (puede ser teléfono o tableta) o en caso de no disponer de un dispositivo físico,
se debe de descargar un emulador para ser ejecutado en el computador (este tema se analizará más
adelante).

• Si se cuenta con dispositivo Android, es necesario 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.

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

Notas:

- La manera más sencilla de desarrollar aplicaciones con App Inventor es utilizando un dispositivo
Android conectado mediante Wifi a la misma red de datos.

- App Inventor NO funciona con Internet Explorer.

A continuación, se detallan las actividades a realizar para comenzar a trabajar con App Inventor:

4.1.1 Crear cuenta de Google

Para empezar, es necesario crear un usuario de Google, vinculándose a los diferentes servicios como
Maps, Play, Calendar, Gmail, Drive, Calendar, entre otros.

Figura 4. Crear cuenta de Google

Fuente: Google

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

En caso de tener algún inconveniente en la creación de la cuenta de Gmail (por ejemplo, cuenta de
correo ya existente) se podrá acceder a la siguiente página de soporte:

Figura 5. Centro de ayuda de Gmail

Fuente: Google (2017)

4.1.2 Sitio Web de MIT App Inventor 2

En la siguiente imagen se puede visualizar los pasos en la herramienta:

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

 Figura 6. Inicio con App Inventor 2.
Fuente: MIT App Inventor (2017)

El acceso al entorno de desarrollo para empezar a crear aplicaciones con App Inventor, se puede
lograr de dos maneras:

• Ir al sitio web http://ai2.appinventor.mit.edu o

• Dar clic en el botón naranja Create apps. situado en la parte superior derecha (ver imagen 5).

En la página de Bienvenida a App Inventor, se exhibe un mensaje con nuevas versiones. También se
presenta la opción de conectarse por medio de teléfono Android (o Tablet) o mediante emulador, si el
usuario no posee ninguno de estos dispositivos.

Figura 7. Mensaje de Bienvenida.

Fuente: MIT App Inventor (2017)

10

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

5. Formas de conexión con App Inventor

Existen tres maneras de probar las aplicaciones desarrolladas App Inventor:

• Utilizando un dispositivo físico Android conectado mediante Wifi a la misma red de datos (opción
recomendada).

• Utilizando un emulador, en este caso es necesario descargar software al computador según el sistema
operativo del mismo.

• En el caso de NO tener Wifi, es necesario descargar software al computador y conectar el dispositivo

físico mediante USB. Esta opción puede ser complicada y se usa como último recurso.

Figura 8. Tipos de conexión.

Fuente: MIT App Inventor (2017)

5.1. Dispositivo físico Android conectado mediante Wifi a la misma red de datos

Esta es la opción recomendada. Se debe descargar la aplicación MIT AI2 Companion en el dispositivo
tableta o celular. Ir a la opción de Google Play, buscar MIT AI2 Companion y dar clic en Instalar, como
se ilustra en la siguiente imagen:

Figura 9. Instalar MIT AI2 Companion en el dispositivo.

Fuente: Google Play Store (2017)

11

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

De esta manera, se instala el software en el dispositivo y queda listo para la sincronización de la
aplicación en el dispositivo con el sitio web, para testear o probar las aplicaciones desarrolladas.

Por último, se debe seleccionar el tipo de conexión: en la aplicación web de desarrollo de MIT App
Inventor, ir al menú Connect o Conectar y seleccionar la opción AI Companion, de esta manera se
define que el tipo de conexión es a través de un dispositivo físico Android y el entorno de desarrollo.

5.2. Utilizar emulador de Android

En caso de que no se cuente con un dispositivo Android (celular o tableta), se procede a instalar un
emulador en el PC. App Inventor proporciona uno que funciona igual que un dispositivo físico Android,
apareciendo en la pantalla del computador y que resulta útil para probar las aplicaciones.

Dependiendo del sistema operativo del computador, App Inventor proporciona diferentes tipos de
emuladores:

• Emulador para Mac OS X: en el siguiente link http://appinventor.mit.edu/explore/ai2/mac.html se

encuentra el instructivo para instalarlo.

Figura 10. Instalación de emulador para Mac OS X

Fuente: MIT App Inventor (2017)

12

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

• Emulador para Windows: las versiones de Windows compatibles son: Windows XP, Vista, Windows
7, 8.1 y Windows 10. En el siguiente link http://appinventor.mit.edu/explore/ai2/windows.html se
encuentra el instructivo para instalar el emulador para Windows:

Figura 11. Instalación de emulador para Windows

Fuente: MIT App Inventor (2017)

• Emulador para Linux: esta instalación requiere privilegios de super usuario (root). En el caso de
tener alguna versión anterior de App Inventor instalada, esta se debe de remover previamente. En
el siguiente link http://appinventor.mit.edu/explore/ai2/linux.html se encuentran las instrucciones para
instalar el emulador para Linux.

Figura 12. Instalación de emulador para Linux

Fuente: MIT App Inventor (2017)

13

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

• Descargar el instalador del emulador (según el sistema operativo).

• Instalar el software (con usuario administrador del equipo), aceptar los términos de licencia y mantener
la ruta por defecto de la instalación.

• Una vez instalado el emulador, se recomienda reiniciar el equipo, debido a que se instala como un
servicio del sistema operativo.

• Ejecutar el emulador y mantenerlo en ejecución.

• En la aplicación web de desarrollo de MIT App Inventor, ir al menú Connect o Conectar y seleccionar
la opción Emulator o Emulador, de esta manera se define que el tipo de conexión es a través de un
emulador y el entorno de desarrollo.

• Esperar a que el sistema cargue el emulador en la pantalla, la cual tendrá una imagen similar a la
siguiente:

Figura 13. Imagen del emulador de Android.

Fuente: Aprende Android (2012)

5.3 Utilizar conexión USB

En caso de que no se cuente con una red Wifi, pero se disponga de un dispositivo Android, se puede
realizar la conexión entre el dispositivo y el computador por medio de un cable USB. Esta opción puede
llegar a ser dispendiosa porque el sistema operativo del computador puede necesitar controladores
adicionales para la conexión USB y el dispositivo Android.

14

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

App Inventor proporciona un programa de prueba que verifica si su dispositivo conectado a USB
puede comunicarse con el computador. Se debe ejecutar esta prueba y resolver cualquier problema
de conexión antes de intentar utilizar App Inventor con USB en ese dispositivo.

Figura 14. Prueba de conexión USB

Fuente: MIT App Inventor (2017)

Básicamente los pasos para configurar la conexión USB son:

- Según el sistema operativo, descargar e instalar el software de App Inventor 2: Mac OS X,

Windows o Linux.

• Descargar e instalar MIT App Inventor 2 Companion en el dispositivo desde la tienda Play Store.

• Ejecutar el programa aiStarter, este programa es el ayudante que permite que el navegador se
comunique con el emulador o el cable USB. El programa aiStarter se instala cuando se instaló el
paquete de instalación de App Inventor. (No se necesita aiStarter si se está utilizando el dispositivo y
la red Wifi).

• Activar la depuración por USB: En el dispositivo Android, ir a Configuración del sistema, Opciones de
desarrollador, activar y asegúrese de que está permitido “Depuración USB”.

- En Android 4.0 y versiones posteriores, está en Configuración> Opciones de desarrollador.

- En Android 4.2 y versiones posteriores, las opciones de desarrollador están ocultas de forma
predeterminada. Para que estén disponibles, vaya a Configuración> Acerca del teléfono y toque
Número de compilación siete veces. Regrese a la pantalla anterior para encontrar las opciones de
desarrollador, incluido “Depuración USB”.

• Conectar el dispositivo Android al computador con el cable USB: Se debe asegurar que el dispositivo
se conecte como un “dispositivo de almacenamiento masivo” (no “dispositivo multimedia”) y que no
esté montado como un disco en su computadora.

15

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

En Android 4.2.2 y versiones posteriores, el dispositivo aparecerá en pantalla con el mensaje “Permitir
depuración USB?” La primera vez que se conecta al computador. Presionar “OK”. Esto permite que el
computador se comunique con el dispositivo.

• Por último, se debe testear la conexión en el siguiente link: http://appinventor.mit.edu/test/

Figura 15. Test de conexión MIT App Inventor

Fuente: MIT App Inventor (2017)

- Esta es la página de prueba de conexión (se abre en una nueva pestaña en el navegador) y verifica
si se obtiene una confirmación de que el computador puede detectar el dispositivo. Si la prueba falla,
vaya a la “Ayuda” de conexión general (Get aiStarter Help).

No se podrá usar App Inventor con el cable USB hasta que se resuelvan los problemas de conexión.
Una vez la prueba de conexión sea satisfactoria, se puede empezar a utilizar App Inventor con el
dispositivo Android a través de una conexión USB.

6. Glosario

API: Application Programming Interface, conjunto de funciones, subrutinas y procedimientos que

pueden ser reutilizados por el desarrollador.

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.

16

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

Máquina virtual: software que emula un computador como si fuese uno real. Se ejecuta en una
ventana dentro del sistema operativo actual como cualquier otro programa.

Memoria: dispositivo que retiene, almacena y recupera datos. Es uno de los componentes principales
de un sistema informático.

MIT: Massachusetts Institute of Technology, Universidad privada estadounidense, que desarrolló la

herramienta App Inventor, la cual permite el desarrollo de aplicaciones para Android.

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.

7. Referencias bibliográficas

AndroidZone (2013, mayo 21). Historia de Android: La evolución a lo largo de sus versiones. [Web log
post]. Recuperado de https://androidzone.org/2013/05/historia-de-android-evolucion-versiones/

MIT App Inventor (2017). Tutorials for App Inventor. Recuperado de http://azinventor.mit.edu

Moreno Parra, 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

17

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

 18

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