Instalación y Configuración

de App Inventor 2

alejandroterriza@ieslosangeles.es
Instalación y Configuración de App Inventor

Existen multitud de herramientas para programar y desarrollar aplicaciones

para dispositivos móviles con diferentes sistemas operativos.

Para este curso utilizaremos la última versión de MIT App Inventor 2 para
elaborar y probar aplicaciones basadas en Android.

Las principales ventajas que ofrece esta aplicación son:

Es completamente gratuita, sin publicidad y para aplicaciones

De manejo muy sencillo e intuitivo. No son necesarios conocimientos

previos de ningún lenguaje de Está asociada a
google, con total compatibilidad con sus distintos
Permite la elaboración de aplicaciones de forma
Se ejecuta online, por lo que podremos acceder a nuestros
proyectos desde cualquier dispositivo conectado a

Para comenzar hemos recopilado en este paquete información sobre la

interfaz del programa, la conexión con el dispositivo móvil (o emulador) y
algún ejemplo sencillo.

App Inventor

App Inventor es un entorno de desarrollo de aplicaciones para dispositivos

Android. Para desarrollar aplicaciones con App Inventor sólo necesitas un
navegador web y un télefono o tablet Android (si no lo tienes podrás probar
tus aplicaciones en un emulador). App Inventor se basa en un servicio web
que te permitirá almacenar tu trabajo y te ayudará a realizar un seguimiento
de sus proyectos.

Se trata de una herramienta de desarrollo visual muy fácil de usar, con la

que incluso los no programadores podrán desarrollar sus aplicaciones.

Para empezar a utilizarlo...

1
Instalación y Configuración de App Inventor

1. Entra en la web, está en inglés pero es muy intutiva.

http://appinventor.mit.edu/

2. Pulsa el botón Create para acceder e identificarte con una cuenta

de gmail. (Tienes que permitir el acceso a tu cuenta al lanzar la
aplicación).

Entorno de Trabajo

App Inventor trabaja con Proyectos que puedes crear desde cero,
importar para modificarlos e icluso puedes trabajar de forma colaborativa
sobre el mismo proyecto.

Al construir las aplicaciones para Android trabajarás con dos herramientas:

App Inventor Designer y App Inventor Blocks .

 En Designer construirás el Interfaz de Usuario, eligiendo y

2
Instalación y Configuración de App Inventor

situando los elementos con los que interactuará el usuario y

componentes que utilizará la

 En el Blocks Editor definirás el comportamiento de los

componentes de tu

Mientras creas tu aplicación puedes probar su funcionamiento en tu

dispositivo móvil o en un emulador en tu PC o MAC.

A continuación tienes un esquema de trabajo de App Inventor y una

presentación donde se explican brevemente sus principales
componentes.

Enlace a la presentación App Inventor Primeros Pasos

3
Instalación y Configuración de App Inventor

Configuración de App Inventor 2

Puedes configurar la aplicación Inventor y empezar a crear aplicaciones

en cuestión de minutos. El Diseñador y Editor de bloques se ejecutan
ahora por completo en el navegador (en la nube). Para ver tu
aplicación en un dispositivo mientras lo construyes (también llamada
"Probando en vivo"), tendrás que seguir los pasos que se muestran a
continuación.

Tienes tres opciones para configurar las pruebas en vivo, mientras

construyes aplicaciones.

1. Si estás utilizando un dispositivo Android y tienes una

conexión inalámbrica a Internet (WiFi), puedes comenzar la
creación de aplicaciones sin necesidad de descargar ningún
software en su ordenador. Eso sí, tendrás que instalar la
aplicación Companion App Inventor en tu dispositivo. Elige la
opción uno. Esta opción se recomienda

2. Si no tienes un dispositivo Android , tendrás que instalar el

software en su ordenador para que pueda utilizar el emulador
de Android en la pantalla del mismo. Elige la opción dos.

3. Si no tienes una conexión inalámbrica a Internet (WiFi), tendrás

que instalar el software en tu computadora de modo que puedas
conectar a su dispositivo Android a través de USB. Elige la opción
de tres. La opción de conexión USB puede ser complicada,
especialmente en Windows. Usa esto como un último recurso.

4
Instalación y Configuración de App Inventor

Opción 1. WIFI (Recomendada)

Puedes usar App Inventor sin necesidad de descargar e instalar nada en tu

ordenador. Únicamente instala la app MIT App Inventor Companion en tu
téfono o tableta Android. A continuación abre tu proyecto en App
Inventor, abre la app "companion" en tu dispositivo Android, y ya puedes
testar tus apps a medida que las construyes:

Los siguientes pasos te guiarán a traves del proceso.

5
Instalación y Configuración de App Inventor

Paso 1: Descarga e instala la App MIT AI2 Companion en tu teléfono o

tableta.

Abre en tu dispositivo Android el escáner de códigos QR y escanea el

código QR para descargar e instalar la App Companion desde la Play Store.
Si no quieres usar la Play Store, escanea el código QR de la derecha para
descargar la App Companion directamente a tu teléfono.

Si necesitas un escáner de códigos QR, puedes obtener uno en la Play

Store (e.g., ZXing).

Después de descargar la app, sigue las instrucciones para instalarla.

Únicamente necesitas instalarla una vez y a partir de ahí ejecutarla cada vez
que uses App Inventor.

Nota: Si eliges el segundo método, tienes que habilitar en la configuración

de tu teléfono la opción "permitir la instalación de aplicaciones desde
fuentes desconocidas". Para encontrar esta opción en las versiones de
Android anteriores a la 4.0, vete "Settings > Applications" y marca la
casilla "Unknown Sources". Para dispositivos Android 4.0 o superior, vete a
"Settings > Security" or "Settings > Security & Screen Lock", marca la casilla
"Unknown Sources" y confirma la elección.

6
Instalación y Configuración de App Inventor

Paso 2: Conecta tu ordenador y tu dispositivo a la misma red WiFi

App Inventor te mostrará automáticamente la app que estés construyendo,

pero sólo si tu ordenador (ejecutando App Inventor) y tu dispositivo Android
(ejecutando Companion) están conectados a la misma red WiFi.
See a more detailed explanation of this here.

Paso 3: Abre un proyecto App Inventor conéctate a tu dispositivo Android

Vete a App Inventor y abre un proyecto (o crea uno nuevo). Entonces elige
"Connect" y "AI Companion" en el menú principal:

Aparecerá un diálogo con un código QR. En tu dispositivo, ejecuta la app

MIT App Companion tal como lo harías con cualquier otra app. A
continuación click sobre el botón “Scan QR code” y escanea el código:

7
Instalación y Configuración de App Inventor

En unos segundos, deberías poder ver la app que estás construyendo

en tu dispositivo. Se irá actualizando a medida que vayas realizando
cambios tanto en el diseño como en el comportamiento,a esta
característica se l e denomina “live testing” (prueba en directo).

Si tienes problemas al escanear el código QR, puedes introducirlo a mano

en la caja de texto de la app Companion y a continuación pulsar "Connect
with code".

Solución de problemas:

Si la app que estás construyendo no aparece en tu dispositivo, los

problemas más comunes son:

 Puede que la Companion App esté desactualizada. Descarga la

última
 Puede que tu dispositivo no esté conectado a la red wifi. Asegúrate
de que puedes ver una dirección IP en la parte inferior la
pantalla de
 Tu dispositivo no está conectado a la misma red wifi que tu
computador. Asegúrate de que ambos dispositivos se
en la misma
 Tu escuela u organización tienen protocolos de red que impiden las
conexiones. Si este es el caso, puedes usar la del
emulador o de la conexión

Si has conectado correctamente tu dispositivo móvil al programa mediante

esta puedes pasar directamente al punto Requisitos del

8
Instalación y Configuración de App Inventor

Opción 2. Emulador

Si no tienes un teléfono o tableta Android, igualmente puedes construir

aplicaciones con App Inventor. App Inventor proporciona un emulador de
Android, que funciona igual que un Android, pero aparece en la pantalla tu
ordenador. Así que también puedes probar tus aplicaciones en el emulador
y distribuir tus aplicaciones a los demás, incluso a través de la Play Store.
Algunas escuelas y programas para después de la escuela (actividades
extraescolares) desarrollan las apps principalmente en los emuladores y
proporcionan los dispositivos para la prueba final de las mismas.

Paso 1. Descarga y ejecuta el programa de instalación del software App

Inventor

Para utilizar el emulador, primero tendrás que instalar algún software en el

equipo (esto no es necesario para la solución wifi). Sigue las instrucciones
para tu sistema operativo, y luego vuelve a esta página para pasar a iniciar
el emulador

Instrucciones para Windows

Instrucciones para GNU / Linux
Instrucciones para Mac OS X

9
Instalación y Configuración de App Inventor

Importante: Si está actualizando una instalación anterior del software de

App Inventor, lee cómo actualizar el software de la Inventor. Puedes
comprobar si el equipo está ejecutando la última versión del software, visita
la página de App Inventor 2 Prueba

Paso 2. Inicie aiStarter (Windows y Linux solamente)

El emulador requiere el uso de un programa llamado aiStarter. Este

programa permite que el navegador se comunique con el emulador. El
programa aiStarter se instaló al ejecutar el paquete de instalación de App
Inventor. Habrá accesos directos a aiStarter desde el menú Inicio, en el
escritorio, y desde Todos los programas (sólo en Windows). Windows y
Linux: Cada vez que desees utilizar el emulador con App Inventor,
tendrás que iniciar manualmente aiStarter. Los usuarios de Mac no tienen
que hacer esto! El aiStarter se iniciará automáticamente en un Mac, y se
ejecutará de forma transparente en segundo plano.

Para Ayuda con aiStarter, consulta Ayuda de Conexión.

El icono

Para iniciar aiStarter, haz doble clic en el icono (imagen superior).

Sabrás que has lanzado con éxito aiStarter cuando veas una ventana
como la siguiente:

10
Instalación y Configuración de App Inventor

Paso 3. Conecta el emulador

Desde el menú de App Inventor, vete al menú Connect y haz clic en la

opción Emulator.

Se desplegará un dialogo diciendo que nos irá informando sobre la

conexión con el emulador. Iniciar el emulador puede tardar un par de
minutos. Podrás ver tanto en el diálogo como en el terminal
correspondiente a aiStarter como se pone en marcha el emulador:

11
Instalación y Configuración de App Inventor

El emulador inicialmente aparecerá con una pantalla negra. Espera hasta

que el emulador está listo, con un fondo de pantalla en color. Incluso
después de que aparezca el fondo, deberá esperar hasta que el teléfono
emulado ha terminado de preparar su tarjeta SD: habrá un aviso en la
parte superior de la pantalla del teléfono mientras se prepara la
tarjeta. Cuando esté conectado, el emulador iniciará y mostrará la
aplicación que tenga abierta en App Inventor. Si tienes problemas con
aiStarter, o si el emulador no se conecta, Ayuda de Conexión para obtener
información sobre lo que podría ir mal.

12
Instalación y Configuración de App Inventor

Opción 3. USB

Cuando se utiliza App Inventor con un teléfono o tableta, el dispositivo se

comunica con el software de App Inventor que se ejecuta en el navegador
del ordenador. Esta comunicación se administra a través de la AI2
Companion funcionando en el dispositivo. Las siguientes instrucciones
(paso 2) explican cómo instalar el complemento. AI2 Companion se puede
comunicar con el ordenador mediante una conexión inalámbrica (WiFi).
Este es el método recomendado por el equipo de App Inventor. No
requiere ningún software adicional para ser instalado en su ordenador. (La
Opción 1, en Configuración de App ).

Hay, sin embargo, algunos entornos donde las conexiones inalámbricas no

funcionarán. Estos incluyen algunos hoteles, centros de conferencias, y las
escuelas, que configuran sus redes inalámbricas para prohibir dos
dispositivos de la red se comuniquen entre sí. Ver ¿Cómo funciona mi
dispositivo Android al conectarse a través de Wi-Fi? para una pequeña
explicación sobre el tema. Algunos usuarios han resuelto este problema
mediante la compra de un router inalámbrico y la creación de su propia red
local. (Además, la mayoría de los Macs y algunos PC puede servir como
routers WiFi que pueden manejar un pequeño número de máquinas). Pero
donde incluso esto es imposible, puedes seguir utilizando App Inventor con
un teléfono o tableta conectándolo al ordenador con un cable USB.

La configuración de una conexión USB puede ser difícil, especialmente en

máquinas Windows, que necesitan especial controlador especial (driver)
para conectarse a los dispositivos Android. (Este no es el caso con Mac o
Linux, que no necesitan controladores especiales.) Lamentablemente, los

13
Instalación y Configuración de App Inventor

diferentes dispositivos pueden requerir diferentes controladores, y, fuera

de unos pocos modelos estándar, Microsoft y Google han dejado en
manos de los fabricantes de dispositivos la creación y suministro de sus
propios controladores. Como consecuencia de ello, es posible que tengas
que buscar en la web para encontrar el controlador apropiado para tu
teléfono. App Inventor ofrece un programa de prueba que verifica si el
dispositivo conectado por USB puede comunicarse con el ordenador.
Debes ejecutar esta prueba y resolver los problemas de conexión antes de
intentar usar App Inventor con USB.

Estos son los pasos para comenzar a utilizar la aplicación Inventor con el
cable USB:

Paso 1: Ejecuta el programa de instalación del software App Inventor

Para conectar con USB, es necesario instalar primero el software de

configuración de App Inventor en el equipo. (Esto no es necesario para
el método de wifi.) Sigue las instrucciones correspondientes a tu sistema
operativo, a continuación, vuelve a esta página para el paso 2

Instrucciones para Windows

Instrucciones para GNU / Linux
Instrucciones para Mac OS X

Importante: Si está actualizando una instalación anterior del software de

App Inventor, lee cómo actualizar el software de la Inventor. Puedes
comprobar si el equipo está ejecutando la última versión del software, visita
la página de App Inventor 2 Prueba

Paso 2: Descargar e instalar la App MIT AI2 Companion en el teléfono.

Abre el escáner de codigos QR de tu dispositivo y escanea uno de los

códigos QR siguientes:

14
Instalación y Configuración de App Inventor

Si necesitas un escáner de códigos QR, puedes obtener uno en la Play

Store (e.g., ZXing). Después de descargar la app, sigue las instrucciones
para instalarla. Únicamente necesitas instalarla una vez y a partir de ahí
ejecutarla cada vez que uses App Inventor.

Nota: Si eliges el segundo método, tienes que habilitar en la configuración

de tu teléfono la opción "permitir la instalación aplicaciones desde
fuentes desconocidas". Para encontrar esta opción en las versiones
de Android anteriores a la 4.0, "Settings > Applications" y marca la
casilla "Unknown Sources". Para dispositivos Android 4.0 o superior, vete
a "Settings > or "Settings > Security & Screen Lock", marca la
casilla "Unknown Sources" y confirma la

Paso 3: Inicie aiStarter (Windows y GNU/Linux)

La comunicación entre el ordenador y el teléfono o la tabla requiere un

programa llamado aiStarter . El programa aiStarter se instaló al instalar el
paquete de instalación de App Inventor. Tendrás accesos directos a
aiStarter desde el menú Inicio, en el escritorio, y desde Todos los
programas (Windows solamente). Windows y Linux: Cada vez que
desees utilizar USB con App Inventor, tendrás que poner en marcha
manualmente el aiStarter en su ordenador. Los usuarios de Mac no tienen
que hacer esto: aiStarter se iniciará automáticamente en un Mac, y se
ejecutará de forma transparente en segundo plano.

15
Instalación y Configuración de App Inventor

Para Ayuda con aiStarter, consulta Ayuda de Conexión.

El icono

Para iniciar aiStarter, haz doble clic en el icono (imagen superior).

Sabrás que has lanzado con éxito aiStarter cuando veas una ventana
como la siguiente:

Paso 4: Configurar el dispositivo para USB (Poner el dispositivo en modo

depuración USB)

En tu dispositivo Android, vete a a Configuración del sistema, Opciones de

Desarrollador, actívalas, y asegúrate de que está permitido el modo
"Depuración USB".

En la mayoría de los dispositivos con Android 3.2 o mayor, puede

encontrar esta opción en Ajustes> Aplicaciones> Desarrollo. En Android
4.0 y posteriores, se encuentra en Configuración> Opciones para
desarrolladores.

16
Instalación y Configuración de App Inventor

Nota: En Android 4.2 y posteriores, las opciones para desarrolladores

están ocultas de manera predeterminada. Para que disponible, vete a
Ajustes> información del teléfono y pulsa (tap) siete veces sobre Número
de compilación. Vuelve a la anterior y en opciones de desarrollo,
activa "Depuración

Paso 5: Conecte el ordenador y el dispositivo, y autentifica si es necesario.

Conecte su dispositivo Android al ordenador mediante el cable USB,

asegúrese de que el dispositivo se conecta como un "dispositivo de
almacenamiento masivo" (no "dispositivo multimedia") y que no se monta
como una unidad en el ordenador. Esto puede significar que usted tiene
que ir al Finder (en Mac) o Mi PC (en Windows) y desconectar cualquier
unidad de disco(s) que se monta cuando se ha conectado el dispositivo
Android.

En Android 4.2.2 y posteriores, en el dispositivo aparecerá una pantalla

con el mensaje ¿permitir la depuración USB? la primera vez que lo
conecte al ordenador nuevo. Pulsa el botón "OK". Esto autentifica el equipo
al dispositivo, lo que permite al ordenador comunicarse con él. Tendrás
que hacer esto para cada equipo que conectes con el dispositivo, pero
sólo una vez por equipo.

Paso 6: Prueba la conexión.

Vete a esta página de prueba de conexión (se abrirá en una nueva

pestaña de tu navegador) y comprueba si te da confirmación de que tu
equipo puede detectar el dispositivo. Si la prueba falla, vete a Ayuda de
conexión y lee la ayuda sobre USB (Windows o Mac). No serás capaz
de utilizar la App Inventor con el cable USB hasta que resuelvas los
problemas de conexión.

17
Instalación y Configuración de App Inventor

Requisitos del Sistema

Nota: Internet Explorer no es soportado todavía.

Se recomienda Chrome o

Ordenador y Sistema

 Macintosh (con procesador Intel): Mac OS X 10.5 o

 Windows: Windows XP, Windows Vista, Windows
 GNU / Linux: Ubuntu 8 o superior, Debian 5 o

Navegador

 Mozilla Firefox 3.6 o superior

Nota: Si está utilizando Firefox con la extensión NoScript, necesita
dar vuelta a la extensión fuera. Ver página de solución de problemas
 Apple Safari 5.0 o superior
 Google Chrome 4.0 o superior
 Microsoft Internet Explorer no es soportado

Teléfono o la tableta (o utilizar el emulador en pantalla)

 Sistema operativo Android 2.3 ("Gingerbread") o superior

18
Instalación y Configuración de App Inventor

Primer Programa con App Inventor 2

El mítico Hola Mundo …

Este video tutorial explica cómo crear tu primer programa con App Inventor
2 para que puedas comprobar que todo correctamente y te
familiarices con la interfaz de diseño y bloques. Deberás seguir los pasos
para realizar tu propio

En este ejemplo se usa el emulador para probar la aplicación. Utiliza el

método que elegiste durante la instalación para tu

Enlace al video tutorial Hola Mundo con App Inventor

19