Introducción Al Estudio de App Inventor 2

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.

Área en donde se colocan los bloques para ir programado los procesos que deseamos nos haga la aplicación

Bloques de Uso General

Lista de componentes incluidos en nuestra aplicación

Lista de bloques que poseen cada uno de los componentes de la App que se está creando.

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.

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.