Tema 0

Requisitos Previos

Introduccin

MIT App Inventor es una herramienta de programacin basada en bloques

predefinidos que permite a cualquier persona, incluso aquellas que nunca han
programado, empezar a programar y construir apps completamente funcionales
para dispositivos Android.

Inicialmente desarrollado por el profesor Hal Abelson y el equipo de Google

Education, en la actualidad App Inventor 2 funciona como un servicio web
administrado por el personal del MITs Center for Mobile Learning que a su vez forma
parte del MITs Computer Science and Artifical Intelligence Laboratory y del MIT Media
Lab.

Alrededor de App Inventor existe una comunidad formada por casi dos millones de
usuarios de ms de 195 pases de todo el mundo.

Si quieres obtener ms informacin puedes visitar su web oficial en

http://appinventor.mit.edu.

Cmo funciona

Para poder crear nuestras propias apps para Android con App Inventor 2 tan slo es
necesario disponer de un navegador web instalado en nuestro ordenador as como
de una cuenta de Gmail.

Respecto al navegador web, actualmente App Inventor no funciona con Microsoft

Internet Explorer, por ello, si usas un equipo con Windows necesitars disponer de
otro navegador diferente. Si eres usuario de Linux o MAC no tendrs ningn
problema con el navegador que dichos sistemas traen preinstalado aunque, si lo
prefieres, tambin puedes instalar otro adicional.

Para los usuarios de Windows, te recomendamos que utilices Mozilla Firefox, o bien,
Google Chrome.

Si no tienes an ninguno de ellos puedes descargarlos e instalarlos de forma

totalmente gratuita desde su web oficial:
R e q u i s i t o s p r e v i o s

Web oficial de Mozilla Firefox.

Web oficial de Google Chrome.

Juan Francisco Fuster

1
 Respecto a la cuenta de correo electrnico, debes disponer de una cuenta de Gmail
para poder acceder a App Inventor 2. Si an no tienes una, puedes obtener una
completamente gratis registrndote en Gmail.

Ten presente que puesto que App Inventor 2 es una herramienta de cloud computing
tambin ser imprescindible que dispongas de una conexin a Internet cada vez que
quieras sentarte a trabajar.

En resumen, para crear una app con App Inventor, nos conectaremos con un
navegador web a su web (http://ai2.appinventor.edu.mit), iniciaremos sesin con
nuestra cuenta de Gmail y ya podremos empezar a programar.

El trabajo se desarrollar nicamente en dos ventanas:

R e q u i s i t o s p r e v i o s

Diseador: Desde aqu podremos seleccionar los componentes que

queremos integrar en nuestra app a partir de una coleccin de componentes
predefinidos bastante amplia y completa.
Editor de bloques: Lo usaremos para definir cul debe ser las acciones que
deben realizar cada uno de los componentes incluidos en nuestra app.

Juan Francisco Fuster

2
 Para facilitar an ms nuestro trabajo, App Inventor permite comprobar cmo
funciona la app a medida que la vamos creando y, para ello, ofrece dos posibilidades
distintas:

usar nuestro propio dispositivo Android conectado al ordenador, o bien,

usar un emulador, es decir, un programa que se comporta como si se tratase
de un mvil Android autntico.

Tanto en un caso como en otro ser necesario realizar algunos ajustes a nuestro
ordenador y/o a nuestro dispositivo. Lo explicamos en el punto siguiente.

Configuracin

Una buena forma de aprender a programar una app es poder comprobar cmo
funciona a medida que vamos crendola, y para ello es necesario configurar el
dispositivo Android y/o el ordenador. Existen tres alternativas diferentes para
conseguirlo que pasamos a explicar a continuacin. Escoge aquella que se adapte
mejor a tu caso.

Opcin 1.- Dispongo de un mvil o tableta Android y est conectado va Wi-Fi a la

misma red que el ordenador. Esta es la opcin recomendada.

Opcin 2.- No dispongo de un dispositivo Android y quiero usar el emulador de

Android.

Opcin 3.- Dispongo de un dispositivo Android pero no tengo conexin Wi-Fi.

Tendrs que conectar tu dispositivo al ordenador usando su cable USB.

Opcin 1.- Conecta tu mvil o tableta con Wi-Fi

R e q u i s i t o s p r e v i o s

Sigue estos pasos para poder probar tus apps en tu dispositivo Android.

Paso 1: Descarga e instala la app MIT AI2 Companion en tu dispositivo.

Juan Francisco Fuster

3
 En tu dispositivo, abre la aplicacin Play Store y escribe en el cuadro de bsqueda:
MIT AI2 Companion. Selecciona la app que aparece, descrgala e instlala en tu
dispositivo.

Paso 2: Conecta tu dispositivo y tu ordenador a la misma Wi-Fi.

Paso 3: Abre un proyecto de App Inventor.

Cuando ests trabajando en una app, haz clic en Connect y despus sobre AI
Companion para poder ver tu app en tu dispositivo. Este proceso puede tardar unos
segundos pero te permitir probar la app en tu dispositivo a medida que la vas
creando. Este mtodo de trabajo se conoce como prueba en vivo o live testing en
ingls.

Aparecer en tu pantalla un cdigo QR. En tu dispositivo ejecuta la aplicacin MIT

AI2Companion como haras con cualquier otra. Despus, toca sobre la opcin Scan
QR code en tu dispositivo:

Alternativamente, puedes teclear el cdigo que aparece en pantalla junto al QR (en el

R e q u i s i t o s p r e v i o s

caso del ejemplo dafjjs) y teclearlo directamente en tu dispositivo en el cuadro

llamado SixDigitCode.

Cuando creemos nuestra primera app en el tema 1 lo podrs comprobar tu mismo.

Juan Francisco Fuster

4
 Opcin 2.- Instalar y ejecutar el emulador de App Inventor 2

App Inventor dispone de un emulador Android que funciona igual que cualquier
dispositivo Android pero que aparece en la pantalla del ordenador. As pues, puedes
comprobar tus apps en el emulador aunque no tengas ningn dispositivo Android.

Para poder usar el emulador el primer paso consiste en instalar un programa en tu

ordenador. Existen tres versiones diferentes del mismo: una para Windows, otra para
Linux y tambin una tercera para MAC. Escoge aquella que se corresponda con tu
ordenador.

Paso 1.- Instalar el programa aiStarter.

En un sistema Windows.

El programa funciona en cualquiera de las siguientes versiones de Windows:

Windows XP, Windows 7 y Windows 8.

Primero descarga el programa:

http://appinv.us/aisetup_windows

Despus instlalo en tu ordenador. Necesitars hacerlo con una cuenta de usuario

con permisos de administrador.

Una vez finalizada la instalacin, vers en el escritorio de Windows un

acceso directo nuevo. Tendrs que ejecutar dicha aplicacin cada vez
que quieras usar el emulador y no cerrarla durante todo el tiempo que
ests trabajando en tu app.

R e q u i s i t o s p r e v i o s

En un sistema Linux.

Necesitars permisos de sper administrador (root) para poder completar el proceso.

Juan Francisco Fuster

5
 Nota: El programa de instalacin es un programa de 32bits. Si usas una versin de
Linux de 64bits tendrs que instalar los paquetes necesarios para poder ejecutar
programas de 32bits. Consulta en la ayuda de tu distribucin de Linux.

Primero, descarga el paquete de instalacin. Se trata de un archivo llamado

appinventor2-setup_1.1_all.deb.

Despus, busca el archivo descargado (normalmente estar en la carpeta de

Descargas) y ejectalo con doble clic. Introduce la contrasea de sper administrador
cuando tu Linux te pregunte por ella y sigue las instrucciones de instalacin.

Alternativamente, puedes realizar la instalacin manualmente desde una ventana de

comandos usando la orden:

sudo dpkg --install appinventor2-setup_1.1_all.deb

El programa aiStartet se instalar en el directorio /usr/google/appinventor y tendrs

que lanzar su ejecucin manualmente cuando quieras probar la app en la que ests
trabajando en tu dispositivo durante su desarrollo.

En un sistema MAC.

Para empezar, descarga el paquete de instalacin:

http://appinv.us/aisetup_mac

Despus, haz doble clic sobre el archivo descargado que estar en la carpeta de
Descargas.

R e q u i s i t o s p r e v i o s

Sigue las instrucciones de instalacin e introduce tu contrasea cuando el sistema te

la solicite.

A diferencia de Windows y Linux, en MAC el programa aiStarter se ejecutar

automticamente cuando sea necesario para revisar tu app en tu dispositivo
Android.

Juan Francisco Fuster

6
 Paso 2.- Ejecutar el programa aiStarter

En Windows y en Linux, antes de poder usar el emulador para probar tu aplicacin

mientras trabajas en ella, tendrs que ejecutar manualmente el programa aiStarter
instalado en el paso 1. Los usuarios de MAC no tienen que hacer nada en este paso.

Paso 3.- Abre un proyecto de App Inventor y conctalo al emulador

Abre la web de App Inventor y abre un proyecto. Despus, desde el men Connect
haz clic en la opcin Emulator:

Vers una ventana que te indica que el emulador se est conectando. Atencin!
Poner en funcionamiento el emulador puede necesitar entre 2 y 4 minutos, debes
ser paciente!
R e q u i s i t o s p r e v i o s

Esta es la secuencia en imgenes del proceso de carga del emulador.

Juan Francisco Fuster

7
 Atencin!

Juan Francisco Fuster

8
R e q u i s i t o s p r e v i o s
 La primera vez que usas el emulador vers en su pantalla un mensaje que te pide
actualizarlo. Sigue las instrucciones que aparecern en pantalla para completar su
actualizacin. Esta operacin slo ser necesario realizarla una nica vez.

Opcin 3.- Conecta tu mvil o tableta con su cable USB.

La conexin USB entre tu ordenador y tu dispositivo Android requiere:

1. Instalar el programa aiStarter en tu ordenador. Existen tres versiones

diferentes del mismo programa; una para Windows, otra para Linux y otra
para MAC. El proceso de instalacin ya fue tratado en la Opcin 2 descrita
anteriormente. Revsala para conocer cmo debes instalar dicho software.

2. Instalar la app MIT AI2 Companion en tu dispositivo. Este punto ya fue

tratado en la Opcin 1 descrita anteriormente. Revsala para conocer cmo
debes instalar dicha app.

3. Lanzar la aplicacin aiStarter (slo los usuarios de Windows y Linux). Este

procedimiento fue explicado en la Opcin 2 descrita anteriormente. Revsala
para conocer cmo debes ejecutar aiStarter.

4. Configura tu dispositivo Android para habilitar la depuracin. En tu

dispositivo, ve a Ajustes, y activa la casilla correspondiente a Opciones de
desarrollo, asegrate tambin que la opcin Depuracin USB est
activada. Si tu dispositivo utiliza Android 3.2 o anterior, podrs encontrar esta
opcin en Ajustes, Aplicaciones, Desarrollo.

Nota: En Android 4.2 o posterior, las opciones de desarrollo estn ocultas

de forma predeterminada. Para hacerlas visibles:
R e q u i s i t o s p r e v i o s

a. Ve a Ajustes, Acerca del telfono.

b. Toca entre 5 y 8 veces sobre Nmero de compilacin. Vers un
mensaje en pantalla cuando las opciones de desarrollo se hayan
habilitado.
c. Pulsa el botn de volver atrs y las Opciones de desarrollo ya
estarn disponibles.

Juan Francisco Fuster

9
 5. Conecta tu dispositivo al ordenador usando el cable USB. Asegrate que tu
dispositivo se conecta como dispositivo de almacenamiento y no como
dispositivo multimedia.

En Android 4.2.2 o posteriores, la primera vez tu dispositivo preguntar

Permitir depuracin USB? y debes responder que s. Esto habilita la
comunicacin entre el dispositivo y el ordenador. Si utilizas distintos
ordenadores tendrs que repetir el proceso en cada uno de ellos.

6. Prueba la conexin. Abre la pgina web de comprobacin y verifica si todo

funciona correctamente.

Abrir la pgina de comprobacin: http://appinventor.mit.edu/test

Para cualquier problema con la configuracin consulta estas pginas:

Problemas de conexin del dispositivo o el emulador:

http://appinventor.mit.edu/explore/ai2/connection-help.html

Problemas generales:

http://appinventor.mit.edu/explore/ai2/support/troubleshooting.html

Toda la informacin descrita en este tema se puede encontrar ampliada en la web

oficial de App Inventor (en ingls):

http://appinventor.mit.edu/explore/ai2/setup.html

Llegados a este punto, si todo ha ido bien, ya ests preparado o preparada para crear
tu primera app para Android con App Inventor 2. Enhorabuena!
R e q u i s i t o s p r e v i o s

Juan Francisco Fuster

10