App Inventor

Primeros pasos

App Inventor es un entorno de desarrollo de aplicaciones para dispositivos Android, la idea se basa en un entorno

de fácil aprendizaje que no necesite de conocimientos previos de programación pero que desarrolle la lógica de

para la construcción de aplicaciones basadas en eventos. 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 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 dirección: http://appinventor.mit.edu

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.

Al construir las aplicaciones para Android trabajarás con dos herramientas: App Inventor Designer y App Inventor

Blocks Editor. En Designer construirás el Interfaz de Usuario, eligiendo y situando los elementos con los que

interactuará el usuario y los componentes que utilizará la aplicación. En el Blocks Editor definirás el

comportamiento de los componentes de tu aplicación.

Está formado por tres herramientas:

1. Gestor de Proyectos

2. Diseñador

3. Editor de bloques

El Gestor de Proyectos

En esta herramienta se le da seguimiento a todos los proyectos que hemos creado. En esta sección podemos

crear un Nuevo proyecto, abrir un proyecto ya creado, eliminar un proyecto.

Diseñador

En esta herramienta podemos seleccionar los componentes u objetos que integraran la app que estamos

diseñando 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 añadiendo a la pantalla y a la par las

propiedades básicas 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, también 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 lógica adecuada para obtener los resultados

deseados.

Bloques de Uso General

Los bloques representan variables, procesos lógicos, procesos matemáticos o eventos que se desencadenan para

cada componente incluido en la App.

Compilar la Aplicación

Cuando ya tengamos lista nuestra aplicación 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.

Lista de componentes

incluidos en nuestra

aplicación

Área en donde se colocan los bloques

para ir programado los procesos que

deseamos nos haga la aplicación

Lista de bloques que poseen

cada uno de los

componentes de la App que

se está creando.

Para generar nuestro archivo .apk debemos hacer clic sobre el menú Build y luego seleccionar la opción 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 través 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 ubicación:

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

El icono aiStarter

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

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 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, vaya a Ayuda de

Conexión para obtener información sobre lo que podría 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.