App Inventor

Primeros pasos
App Inventor es un entorno de desarrollo de aplicaciones para dispositivos Android, la idea se basa en un entorno
de fcil aprendizaje que no necesite de conocimientos previos de programacin pero que desarrolle la lgica de
para la construccin de aplicaciones basadas en eventos. 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 un servicio basado en la nube por lo que todas las tareas se realizan en un navegador (recomendable
Google Chrome). Para suscribirte al servicio necesitas:
1. Acceso a Internet
2. Una cuenta de Google
3. Ingresar a la siguiente direccin: http://appinventor.mit.edu
Se trata de una herramienta de desarrollo visual muy fcil de usar, con la que incluso los no programadores
podrn desarrollar sus aplicaciones.
Al construir las aplicaciones para Android trabajars con dos herramientas: App Inventor Designer y App Inventor
Blocks Editor. En Designer construirs el Interfaz de Usuario, eligiendo y situando los elementos con los que
interactuar el usuario y los componentes que utilizar la aplicacin. En el Blocks Editor definirs el
comportamiento de los componentes de tu aplicacin.

Est formado por tres herramientas:

1. Gestor de Proyectos
2. Diseador
3. Editor de bloques
El Gestor de Proyectos
En esta herramienta se le da seguimiento a todos los proyectos que hemos creado. En esta seccin podemos
crear un Nuevo proyecto, abrir un proyecto ya creado, eliminar un proyecto.

Diseador
En esta herramienta podemos seleccionar los componentes u objetos que integraran la app que estamos
diseando y as definir el entorno del usuario o pantalla (screen) del usuario.

Al lado derecho tenemos los objetos que insertamos al lienzo o pantalla.

Al centro tenemos el lienzo o pantalla donde colocamos todos los objetos que necesitaremos en la app.
Al lado derecho tendremos la lista de componentes que se han ido aadiendo a la pantalla y a la par las
propiedades bsicas de los objetos que insertamos en la pantalla.

Para insertar los objetos en el lienzo hay que arrastrarlos de la paleta o cuadro de componentes hacia el lienzo o
pantalla, tambin conocido como visor.
Editor de bloques
El comportamiento de la App se programa mediante bloques o piezas en el editor de bloques. La idea es ir
encajando las piezas como que fuera un rompecabezas teniendo la lgica adecuada para obtener los resultados
deseados.

rea en donde se colocan los bloques

para ir programado los procesos que
deseamos nos haga la aplicacin

Bloques de Uso General

Lista de componentes
incluidos en nuestra
aplicacin

Lista de bloques que poseen

cada uno de los
componentes de la App que
se est creando.

Los bloques representan variables, procesos lgicos, procesos matemticos o eventos que se desencadenan para
cada componente incluido en la App.
Compilar la Aplicacin
Cuando ya tengamos lista nuestra aplicacin procedemos a construirla y probarla en nuestro dispositivo Android,
si contamos con un dispositivo Android podemos hacer uso del Emulador para probar su funcionamiento, aunque
es un poco lento y lo recomendable es construir el archivo.apk que instalaremos en nuestro dispositivo Android.

Para generar nuestro archivo .apk debemos hacer clic sobre el men Build y luego seleccionar la opcin App
(sabe .apk to my computer), al seleccionarlo se empezara a compilar y construir el archivo .apk que luego se
descargar al computador para que puedas trasladarlo a travs de un cable USB al dispositivo Android donde se
podr probar en vivo.

Uso del Emulador

Para que el emulador funcione adecuadamente debemos:
Paso 1. Descargar AppInventor_Setup_Installer_v_2_1.exe de la siguiente ubicacin:
http://appinventor.mit.edu/explore/ai2/windows.html
Proceder a instalarlo en nuestro computador.
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.

El icono aiStarter

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 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:

El emulador inicialmente aparecer con una pantalla negra (# 1). Espera hasta que el emulador est listo, con un
fondo de pantalla en color (# 2). 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 se prepara la tarjeta. Cuando est conectado, 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, vaya a Ayuda de
Conexin para obtener informacin sobre lo que podra ir mal.

Bueno ahora estamos listo para crear nuestras primeras aplicaciones Android y poco a poco ir conociendo los
diferentes componentes que nos ofrece el entorno de desarrollo de AppInventor.