Instalacin y Configuracin

de App Inventor 2

alejandroterriza@ieslosangeles.es

Instalacin y Configuracin de App Inventor

Existen multitud de herramientas para programar y desarrollar aplicaciones
para dispositivos mviles con diferentes sistemas operativos.
Para este curso utilizaremos la ltima versin de MIT App Inventor 2 para
elaborar y probar aplicaciones basadas en Android.
Las principales ventajas que ofrece esta aplicacin son:
Es completamente gratuita, sin publicidad y para aplicaciones
De manejo muy sencillo e intuitivo. No son necesarios conocimientos
previos de ningn lenguaje de

Est asociada a

google, con total compatibilidad con sus distintos

Permite la elaboracin 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 informacin sobre la
interfaz del programa, la conexin con el dispositivo mvil (o emulador) y
algn ejemplo sencillo.

App Inventor
App Inventor es un entorno de desarrollo de aplicaciones para dispositivos
Android. Para desarrollar aplicaciones con App Inventor slo necesitas un
navegador web y un tlefono o tablet Android (si no lo tienes podrs 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 fcil de usar, con la
que incluso los no programadores podrn desarrollar sus aplicaciones.
Para empezar a utilizarlo...

Instalacin y Configuracin de App Inventor

1.

Entra en la web, est en ingls pero es muy intutiva.

http://appinventor.mit.edu/

2.

Pulsa el botn Create para acceder e identificarte con una cuenta

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

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 trabajars con dos herramientas:
App Inventor Designer y App Inventor Blocks

En Designer construirs el Interfaz de Usuario, eligiendo y

Instalacin y Configuracin de App Inventor

situando los elementos con los que interactuar el usuario y
componentes que utilizar la
En

el

Blocks

Editor

definirs

el

comportamiento

de

los

componentes de tu
Mientras creas tu aplicacin puedes probar su funcionamiento en tu
dispositivo mvil o en un emulador en tu PC o MAC.
A continuacin tienes un esquema de trabajo de App Inventor y una
presentacin

donde

se

explican

brevemente

sus

principales

componentes.

Enlace a la presentacin App Inventor Primeros Pasos

Instalacin y Configuracin de App Inventor

Configuracin de App Inventor 2

Puedes configurar la aplicacin Inventor y empezar a crear aplicaciones
en cuestin de minutos. El Diseador y Editor de bloques se ejecutan
ahora por completo en el navegador
aplicacin en un dispositivo

(en la nube). Para ver tu

mientras lo construyes (tambin llamada

"Probando en vivo"), tendrs que seguir los pasos que se muestran a

continuacin.
Tienes tres opciones para configurar las pruebas en vivo, mientras
construyes aplicaciones.
1.

Si ests utilizando un dispositivo Android y tienes una

conexin inalmbrica a Internet (WiFi), puedes comenzar la
creacin de aplicaciones sin necesidad de descargar ningn
software en su ordenador. Eso s, tendrs que instalar la
aplicacin Companion App Inventor en tu dispositivo. Elige la
opcin uno. Esta opcin se recomienda

2.

Si no tienes un dispositivo

Android , tendrs que instalar el

software en su ordenador para que pueda utilizar el emulador

de Android en la pantalla del mismo. Elige la opcin dos.
3.

Si no tienes una conexin inalmbrica a Internet (WiFi), tendrs

que instalar el software en tu computadora de modo que puedas
conectar a su dispositivo Android a travs de USB. Elige la opcin
de tres. La opcin de conexin USB puede ser complicada,
especialmente en Windows. Usa esto como un ltimo recurso.

Instalacin y Configuracin de App Inventor

Opcin 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
tfono

o tableta

Android.

A continuacin

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 guiarn a traves del proceso.

Instalacin y Configuracin de App Inventor

Paso 1: Descarga e instala la App MIT AI2 Companion en tu telfono o

tableta.
Abre en tu dispositivo Android el escner de cdigos QR y escanea el
cdigo QR para descargar e instalar la App Companion desde la Play Store.
Si no quieres usar la Play Store, escanea el cdigo QR de la derecha para
descargar la App Companion directamente a tu telfono.

Si necesitas un escner de cdigos QR, puedes obtener uno en la Play

Store (e.g., ZXing).
Despus 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 mtodo, tienes que habilitar en la configuracin
de tu telfono la opcin "permitir la instalacin de aplicaciones

desde

fuentes desconocidas". Para encontrar esta opcin 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 eleccin.

Instalacin y Configuracin de App Inventor

Paso 2: Conecta tu ordenador y tu dispositivo a la misma red WiFi
App Inventor te mostrar automticamente la app que ests construyendo,
pero slo si tu ordenador (ejecutando App Inventor) y tu dispositivo Android
(ejecutando Companion) estn conectados a la misma red WiFi.
See a more detailed explanation of this here.

Paso 3: Abre un proyecto App Inventor conctate 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 dilogo con un cdigo QR. En tu dispositivo, ejecuta la app

MIT App Companion tal como lo haras con cualquier otra app. A
continuacin click sobre el botn Scan QR code y escanea el cdigo:

Instalacin y Configuracin de App Inventor

En unos segundos, deberas poder ver la app que ests construyendo
en tu dispositivo. Se ir actualizando a medida que vayas realizando
cambios tanto en el diseo como en el comportamiento,a

esta

caracterstica se l e denomina live testing (prueba en directo).

Si tienes problemas al escanear el cdigo QR, puedes introducirlo a mano
en la caja de texto de la app Companion y a continuacin pulsar "Connect
with code".
Solucin de problemas:

Si la app que ests construyendo no aparece en tu dispositivo, los

problemas ms comunes son:
Puede que la Companion App est desactualizada. Descarga la
ltima
Puede que tu dispositivo no est conectado a la red wifi. Asegrate
de que puedes ver una direccin IP en la parte inferior

la

pantalla de
Tu dispositivo no est conectado a la misma red wifi que tu
computador. Asegrate de que ambos dispositivos se
en la misma
Tu escuela u organizacin tienen protocolos de red que impiden las
conexiones. Si este es el caso, puedes usar la

del

emulador o de la conexin
Si has conectado correctamente tu dispositivo mvil al programa mediante
esta

puedes pasar directamente al punto Requisitos del

Instalacin y Configuracin de App Inventor

Opcin 2. Emulador
Si no tienes un telfono 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 tambin puedes probar tus aplicaciones en el emulador
y distribuir tus aplicaciones a los dems, incluso a travs de la Play Store.
Algunas escuelas y programas para despus 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 instalacin del software App

Inventor

Para utilizar el emulador, primero tendrs que instalar algn software en el

equipo (esto no es necesario para la solucin wifi). Sigue las instrucciones
para tu sistema operativo, y luego vuelve a esta pgina para pasar a iniciar
el emulador
Instrucciones para Windows
Instrucciones para GNU / Linux
Instrucciones para Mac OS X

Instalacin y Configuracin de App Inventor

Importante: Si est actualizando una instalacin anterior del software de
App Inventor, lee cmo actualizar el software de la

Inventor. Puedes

comprobar si el equipo est ejecutando la ltima versin del software, visita

la pgina 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 instalacin de App
Inventor. Habr accesos directos a aiStarter desde el men Inicio, en el
escritorio, y desde Todos los programas (slo en Windows). Windows y
Linux: Cada vez que desees utilizar el emulador con App Inventor,
tendrs que iniciar manualmente aiStarter. Los usuarios de Mac no tienen
que hacer esto! El aiStarter se iniciar automticamente en un Mac, y se
ejecutar de forma transparente en segundo plano.
Para Ayuda con aiStarter, consulta Ayuda de Conexin.

El icono
Para iniciar aiStarter, haz doble clic en el icono (imagen superior).
Sabrs que has lanzado con xito aiStarter cuando veas una ventana
como la siguiente:

10

Instalacin y Configuracin de App Inventor

Paso 3. Conecta el emulador
Desde el men de App Inventor, vete al men Connect y haz clic en la
opcin Emulator.

Se desplegar un dialogo diciendo que nos ir informando sobre la

conexin con el emulador. Iniciar el emulador puede tardar un par de
minutos.

Podrs

ver tanto en el dilogo

como en el terminal

correspondiente a aiStarter como se pone en marcha el emulador:

11

Instalacin y Configuracin 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
despus de que aparezca el fondo, deber esperar hasta que el telfono
emulado ha terminado de preparar su tarjeta SD: habr un aviso en la
parte superior de la pantalla del telfono mientras
tarjeta. Cuando est conectado,

se prepara la

el emulador iniciar y mostrar la

aplicacin que tenga abierta en App Inventor. Si tienes problemas con

aiStarter, o si el emulador no se conecta, Ayuda de Conexin para obtener
informacin sobre lo que podra ir mal.

12

Instalacin y Configuracin de App Inventor

Opcin 3. USB

Cuando se utiliza App Inventor con un telfono o tableta, el dispositivo se

comunica con el software de App Inventor que se ejecuta en el navegador
del ordenador. Esta comunicacin se administra a travs de la AI2
Companion funcionando en el dispositivo. Las siguientes instrucciones
(paso 2) explican cmo instalar el complemento. AI2 Companion se puede
comunicar con el ordenador mediante una conexin inalmbrica (WiFi).
Este es el mtodo recomendado por el equipo de App Inventor. No
requiere ningn software adicional para ser instalado en su ordenador. (La
Opcin 1, en Configuracin de App

).

Hay, sin embargo, algunos entornos donde las conexiones inalmbricas no

funcionarn. Estos incluyen algunos hoteles, centros de conferencias, y las
escuelas, que configuran sus redes inalmbricas para prohibir dos
dispositivos de la red se comuniquen entre s. Ver Cmo funciona mi
dispositivo Android al conectarse a travs de Wi-Fi? para una pequea
explicacin sobre el tema. Algunos usuarios han resuelto este problema
mediante la compra de un router inalmbrico y la creacin de su propia red
local. (Adems, la mayora de los Macs y algunos PC puede servir como
routers WiFi que pueden manejar un pequeo nmero de mquinas). Pero
donde incluso esto es imposible, puedes seguir utilizando App Inventor con
un telfono o tableta conectndolo al ordenador con un cable USB.
La configuracin de una conexin USB puede ser difcil, especialmente en
mquinas 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

Instalacin y Configuracin de App Inventor

diferentes dispositivos pueden requerir diferentes controladores, y, fuera
de unos pocos modelos estndar, Microsoft y Google han dejado en
manos de los fabricantes de dispositivos la creacin 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
telfono. 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 conexin antes de
intentar usar App Inventor con USB.
Estos son los pasos para comenzar a utilizar la aplicacin Inventor con el
cable USB:
Paso 1: Ejecuta el programa de instalacin del software App Inventor
Para conectar con USB, es necesario instalar primero el software de
configuracin de App Inventor en el equipo. (Esto no es necesario para
el mtodo de wifi.) Sigue las instrucciones correspondientes a tu sistema
operativo, a continuacin, vuelve a esta pgina para el paso 2
Instrucciones para Windows
Instrucciones para GNU / Linux
Instrucciones para Mac OS X
Importante: Si est actualizando una instalacin anterior del software de
App Inventor, lee cmo actualizar el software de la

Inventor. Puedes

comprobar si el equipo est ejecutando la ltima versin del software, visita

la pgina de App Inventor 2 Prueba

Paso 2: Descargar e instalar la App MIT AI2 Companion en el telfono.

Abre el escner de codigos QR de tu dispositivo y escanea uno de los

cdigos QR siguientes:

14

Instalacin y Configuracin de App Inventor

Si necesitas un escner de cdigos QR, puedes obtener uno en la Play

Store (e.g., ZXing). Despus 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 mtodo, tienes que habilitar en la configuracin
de tu telfono la opcin "permitir la instalacin

aplicaciones

desde

fuentes desconocidas". Para encontrar esta opcin 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 comunicacin entre el ordenador y el telfono o la tabla requiere un
programa llamado aiStarter . El programa aiStarter se instal al instalar el
paquete de instalacin de App Inventor. Tendrs 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, tendrs que poner en marcha
manualmente el aiStarter en su ordenador. Los usuarios de Mac no tienen
que hacer esto: aiStarter se iniciar automticamente en un Mac, y se
ejecutar de forma transparente en segundo plano.

15

Instalacin y Configuracin de App Inventor

Para Ayuda con aiStarter, consulta Ayuda de Conexin.

El icono
Para iniciar aiStarter, haz doble clic en el icono (imagen superior).
Sabrs 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

depuracin USB)
En tu dispositivo Android, vete a a Configuracin del sistema, Opciones de
Desarrollador, actvalas, y asegrate de que est permitido el modo
"Depuracin USB".
En la mayora de los dispositivos con Android 3.2 o mayor, puede
encontrar esta opcin en Ajustes> Aplicaciones> Desarrollo. En Android
4.0 y posteriores, se encuentra en Configuracin> Opciones para
desarrolladores.

16

Instalacin y Configuracin de App Inventor

Nota: En Android 4.2 y posteriores, las opciones para desarrolladores
estn ocultas de manera predeterminada. Para que

disponible, vete a

Ajustes> informacin del telfono y pulsa (tap) siete veces sobre Nmero
de compilacin. Vuelve a la

anterior y en opciones de desarrollo,

activa "Depuracin
Paso 5: Conecte el ordenador y el dispositivo, y autentifica si es necesario.
Conecte su dispositivo Android al ordenador mediante el cable USB,
asegrese 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 depuracin USB? la primera vez que lo
conecte al ordenador nuevo. Pulsa el botn "OK". Esto autentifica el equipo
al dispositivo, lo que permite al ordenador comunicarse con l. Tendrs
que hacer esto para cada equipo que conectes con el dispositivo, pero
slo una vez por equipo.
Paso 6: Prueba la conexin.
Vete a esta pgina de

prueba de conexin (se abrir en una nueva

pestaa de tu navegador) y comprueba si te da confirmacin de que tu

equipo puede detectar el dispositivo. Si la prueba falla, vete a Ayuda de
conexin y lee la ayuda sobre USB (Windows o Mac). No sers capaz
de utilizar la App Inventor con el cable USB hasta que resuelvas los
problemas de conexin.

17

Instalacin y Configuracin de App Inventor

Requisitos del Sistema

Nota: Internet Explorer no es soportado todava.
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 extensin NoScript, necesita
dar vuelta a la extensin fuera. Ver pgina de solucin de problemas
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer no es soportado

Telfono o la tableta (o utilizar el emulador en pantalla)

Sistema operativo Android 2.3 ("Gingerbread") o superior

18

Instalacin y Configuracin de App Inventor

Primer Programa con App Inventor 2

El mtico Hola Mundo

Este video tutorial explica cmo crear tu primer programa con App Inventor
2 para que puedas comprobar que todo

correctamente y te

familiarices con la interfaz de diseo y bloques. Debers seguir los pasos

para realizar tu propio

En este ejemplo se usa el emulador para probar la aplicacin. Utiliza el

mtodo que elegiste durante la instalacin para

tu

Enlace al video tutorial Hola Mundo con App Inventor

19