Tutorial para Diseño de La Primera Aplicación Con APP Inventor y El Emulador de Escritorio

Tutorial para Diseo de la primera Aplicacin 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 grfica 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 Programacin y Eventos ................................................................................. 3
Paso 7: Evento del Botn .................................................................................................................... 3
Paso 8: Mtodo del Objeto Label ........................................................................................................ 4
Paso 9: Texto ....................................................................................................................................... 5
Paso 10: El cdigo de la aplicacin 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 Mvil Virtual ........................................................................................................ 7
Paso 15: Ejecucin de la APP presionando Botn .............................................................................. 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, nombre lo escoge a su gusto, en este

caso PrimeraApp
Paso 3: Crear la interfaz grfica del proyecto
Esta interfaz consta de 1 botn, 1 label y una imagen, estos componentes se arrastran de la paleta a la
parte de diseo en blanco:
Paso 4: Ajustar las propiedades de los componentes

Los componentes que se estn utilizando aparecen en la ventana components, ello es de ayuda cuando
se tienen un nmero 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
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 Programacin y Eventos

En este paso se construyen las estructuras de programacin o eventos de los objetos de la interfaz y
los algoritmos correspondientes. En nuestro caso, cuando se da click sobre el botn, el label cambia
de texto a Hola Mundo
Las estructuras a las que se quiere llegar son las siguientes, ellas se mostrarn como obtenerlas en los
siguientes pasos:
Paso 7: Evento del Botn

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 botn, las opciones dadas son: when Button1.Click, when Button1.GotFocus,
etc.
El evento empleado es: when Button1.Click
Paso 8: Mtodo del Objeto Label

Al label se le llama el mtodo: set Label1.Text
Paso 9: Texto
Al mtodo anterior del Label se le adiciona el string: Hola Mundo, mediante el string en color lila.
Nota: Recordar que todo es arrastrando.
Paso 10: El cdigo de la aplicacin 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:
Paso 13: Conectar el Emulador desde APP Inventor

Una vez tenga lista la Aplicacin, va al men del APP Inventor (en el navegador) dar click en
Connect y luego dar click en Emulator, luego esperar la conexin con el Emulador, la consola debe
sacar informacin de la conexin:
Paso 14: Celular o Mvil Virtual

En este paso aparece una pantalla en forma de celular o mvil, 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 aplicacin que se diseo
en APP Inventor.
Paso 15: Ejecucin de la APP presionando Botn

La aplicacin antes de dar click en el botn y despus de dar click en el botn se muestra a
continuacin:

Tutorial para Diseño de La Primera Aplicación Con APP Inventor y El Emulador de Escritorio

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial para Diseño de La Primera Aplicación Con APP Inventor y El Emulador de Escritorio

Cargado por

Copyright:

Formatos disponibles

Tutorial para Diseo de la primera Aplicacin con APP Inventor y el

Paso 1: Conseguir una cuenta en gmail,

Paso 2: Crear un nuevo proyecto, nombre lo escoge a su gusto, en este

Paso 3: Crear la interfaz grfica del proyecto

Paso 4: Ajustar las propiedades de los componentes

Paso 5: Blocks, Cambio a la vista de Estructuras de Bloques

Paso 6: Estructuras de Programacin y Eventos

Paso 7: Evento del Botn

El evento empleado es: when Button1.Click

Paso 8: Mtodo del Objeto Label

Paso 10: El cdigo de la aplicacin queda:

Paso 11: Descargar e Instalar Emulador del APP Inventor

Paso 12: Ejecutar el Emulador

Este emulador abre una ventana en consola:

Paso 13: Conectar el Emulador desde APP Inventor

Paso 14: Celular o Mvil Virtual

Paso 15: Ejecucin de la APP presionando Botn

También podría gustarte