Tutorial para Diseño Diseño de la primera Aplicación Aplicación con APP Inventor y el Emulador de Escritorio Por: Alexander Arias Fecha: 29 de abril de 2016
Contenido Paso 1: Conseguir una cuenta en gmail, .............................................................................................. 1 Paso 2: Crear un nuevo proyecto, nombre lo escoge a su gusto, en este caso PrimeraApp ................ 1 Paso 3: Crear la interfaz gráfica del proyecto ..................................................................................... 2 Paso 4: Ajustar las propiedades de los componentes .......................................................................... 2 Paso 5: Blocks, Cambio a la vista de Estructuras de Bloques ............................................................. 3 Paso 6: Estructuras de Programación y Eventos ................................................................................. 3 Paso 7: Evento del Botón .................................................................................................................... 3 Paso 8: Método del Objeto Label ........................................................................................................ 4 Paso 9: Texto ....................................................................................................................................... 5 Paso 10: El código de la aplicación queda: ......................................................................................... 5 Paso 11: Descargar e Instalar Emulador del APP Inventor ................................................................. 5 Paso 12: Ejecutar el Emulador ................................. ................ ................................... ................................... .................................. ................................... ...................... .... 5 Paso 13: Conectar el Emulador desde APP Inventor .......................................................................... 6 Paso 14: Celular o Móvil Virtual ........................................................................................................ 7 Paso 15: Ejecución de la APP presionando Botón .............................................................................. 8
Paso 1: Conseguir una cuenta en gmail, Con la cuenta de gmail podrá ingresar a la herramienta de desarrollo APP Inventor http://ai2.appinventor.mit.edu
Paso 2: Crear un nuevo proyecto, pr oyecto, nombre lo escoge a su gusto, en este caso PrimeraApp
1
Paso 3: Crear la interfaz gráfica del proyecto
Esta interfaz consta de 1 botón, 1 label y una imagen, estos componentes se arrastran de la paleta a la parte de diseño en blanco:
Paso 4: Ajustar las propiedades de los componentes Los componentes que se están utilizando utili zando aparecen en la ventana components, ello es de ayuda cuando se tienen un número grande de componentes.
Las propiedas de los componentes aparecen en la parte derecha de la ventana, por ejemplo el texto del Button1 se cambió a Boton 1
2
Paso 5: Blocks, Cambio a la vista de Estructuras de Bloques Tener en cuenta que debemos cambiar la vista de Designer a Blocks.
Paso 6: Estructuras de Programación y Eventos En este paso se construyen las estructuras de programación o eventos de los objetos de la interfaz y los algoritmos correspondientes. En nuestro caso, cuando se da click sobre el botón, el label cambia de texto a Hola Mundo “
”
Las estructuras a las que se quiere llegar son las siguientes, ellas se mostrarán como obtenerlas en los siguientes pasos:
Paso 7: Evento del Botón Para conseguir la estructura anterior se arrastran los objetos de la ventana Viwer a la ventana en blanco de Blocks , antes de seleccionar el evento debemos seleccionar el objeto de trabajo, por ejemplo en el caso del botón, las opciones dadas son: when Button1.Click, when Button1.GotFocus, etc. “
“
”
”
3
El evento empleado es: when Button1.Click
Paso 8: Método del Objeto Label Al label se le llama el método: set Label1.Text
4
Paso 9: Texto Al método anterior del Label se le adiciona el string: Hola Mundo , mediante el string en color lila. Nota: Recordar Recordar que todo es arrastrando. arrastrando. “
”
Paso 10: El código de la aplicación queda:
Paso 11: Descargar e Instalar Emulador del APP Inventor Este se debe descargar e instalar en el PC, en el caso de Windows: http://appinventor.mit.edu/explore/ai2/windows.html Directamente de: http://appinv.us/aisetup_windows
Paso 12: Ejecutar el Emulador Ejecutar el aiStarter, icono montado en escritorio del Emulador.
Este emulador abre una ventana en consola:
5
Paso 13: Conectar el Emulador desde APP Inventor Una vez tenga lista la Aplicación, va al menú del APP Inventor (en el navegador) dar click en Connect y luego dar click en Emulator , luego esperar la conexión con el Emulador, la consola debe sacar información de la conexión:
6
Paso 14: Celular o Móvil Virtual En este paso aparece una pantalla en forma de celular o móvil, debe esperar un momento a que se abra, luego si la pantalla está bloqueada (candado) desplazarla para desbloquearla y esperar a que cargue la APP, si le sale mensaje presione WAIT. Luego debe aparecer la aplicación que se diseño en APP Inventor. “
”
7
Paso 15: Ejecución de la APP presionando Botón La aplicación antes de dar click en el botón y después de dar click en el botón se muestra a continuación:
8
