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

8/17/2019 Tutorial Para Diseño de La Primera Aplicación Con APP Inventor y El Emulador de Escritorio

1/8

1

Tutorial para Diseño de la primera Aplicación con APP Inventor y el

Emulador de Escritorio

Por: Alexander AriasFecha: 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, nombre lo escoge a su gusto, en este

caso PrimeraApp

http://ai2.appinventor.mit.edu/http://ai2.appinventor.mit.edu/http://ai2.appinventor.mit.edu/


2/8

2

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 aparecen en la ventana components, ello es de ayuda cuandose 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


3/8

3

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 EventosEn este paso se construyen las estructuras de programación o eventos de los objetos de la interfaz ylos algoritmos correspondientes. En nuestro caso, cuando se da click sobre el botón, el label cambiade 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ónPara 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, porejemplo en el caso del botón, las opciones dadas son: when Button1.Click, when Button1.GotFocus,etc.


4/8

4

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


5/8

5

Paso 9: TextoAl método 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 código de la aplicación queda:

Paso 11: Descargar e Instalar Emulador del APP InventorEste 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 EmuladorEjecutar el aiStarter, icono montado en escritorio del Emulador.

Este emulador abre una ventana en consola:

http://appinventor.mit.edu/explore/ai2/windows.htmlhttp://appinventor.mit.edu/explore/ai2/windows.htmlhttp://appinv.us/aisetup_windowshttp://appinv.us/aisetup_windowshttp://appinv.us/aisetup_windowshttp://appinventor.mit.edu/explore/ai2/windows.html


6/8

6

Paso 13: Conectar el Emulador desde APP InventorUna 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:


7/8

7

Paso 14: Celular o Móvil VirtualEn este paso aparece una pantalla en forma de “celular ” o móvil, debe esperar un momento a que seabra, 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ñoen APP Inventor.


8/8

8

Paso 15: Ejecución de la APP presionando BotónLa aplicación antes de dar click en el botón y después de dar click en el botón se muestra acontinuación:

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

Documents

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