Mi Primer Aplicación App Inventor

6
Mi primera aplicación en App Inventor A continuación menciono los siguientes pasos que realice en la construcción de mi primera aplicación en App Inventor. 1. Ingresar con cualquier navegador web a la página web de App inventor http://appinventor.mit.edu/explore/ y hacer clic en la opción Create apps! 2. Para utilizar app inventor, debemos registrarnos con una cuenta de Gmail, autorizando el acceso de dicha herramienta.

description

Pasos para crear una aplicación en app inventor

Transcript of Mi Primer Aplicación App Inventor

Page 1: Mi Primer Aplicación App Inventor

Mi primera aplicación en App Inventor

A continuación menciono los siguientes pasos que realice en la construcción de mi primera

aplicación en App Inventor.

1. Ingresar con cualquier navegador web a la página web de App inventor

http://appinventor.mit.edu/explore/ y hacer clic en la opción Create apps!

2. Para utilizar app inventor, debemos registrarnos con una cuenta de Gmail, autorizando el acceso de dicha herramienta.

Page 2: Mi Primer Aplicación App Inventor

3. Para iniciar nuestro proyecto “HolaRonronea” debemos hacer clic en start new project que se encuentra cerca de la parte superior de la página.

4. Introducimos el nombre que llevará nuestro proyecto, en este caso el proyecto lo llamaremos Holaronronea. Nota: el nombre del proyecto se debe digitar sin espacios.

5. Una vez hecho clic en el botón OK, se abre el Diseñador donde encontraremos una pantalla, allí insertamos cada uno de los componentes que necesitará nuestro proyecto.

Page 3: Mi Primer Aplicación App Inventor

6. Iniciando el diseño de la aplicación Holaronronea, comenzamos arrastrar y soltar hasta screen1 los componentes Botton, Label y sound. Cada uno de estos componentes los encontramos en la sección user Interface y Media de la paleta.

Page 4: Mi Primer Aplicación App Inventor

7. Después de arrastrar y soltar los componentes Botton, Label, sound en el área del visor, debemos establecer cada una de las propiedades de estos componentes que serán de la siguiente manera.En la lista de propiedades de Button1, nos dirigimos a la propiedad image y subimos la imagen kitty.png. Luego nos dirigimos a la propiedad Text y eliminamos con la tecla de retroceso el texto del botón.

En la lista de propiedades de Etiqueta, cambiamos la propiedad de Text por “Acaricia el Gatito”, la propiedad Backgroundcolor ponemos el color azul, la propiedad Texcolor seleccionamos el color amarillo y tamaño de fuente (Fontsize) 30.

En la lista de propiedades de Sound, subimos en la propiedad source el archivo de multimedia meow.mp3

8. Hasta aquí terminaríamos el diseño de nuestra aplicación. Ahora debemos asignar las acciones que realizará cada componente. Para ello nos dirigimos al editor de bloques para definir la forma en que la aplicación se va a comportar.

Para hacer que se reproduzca el sonido al tocar el botón con la foto del gatito, debemos ir a la pestaña Screen1 y desplegar los bloques de la sección Botón y arrastrar y soltar al lienzo central el bloque When botón.click do, que se refiere a la circunstancia que el usuario pulse el botón y, tras desplegar los bloques de la sección sound, arrastrar el

Page 5: Mi Primer Aplicación App Inventor

bloque callsound1.play al lienzo central, aproximándolo al bloque When botón.click do, de modo que ambos encajen.

9. Para finalizar compilamos nuestra aplicación con el emulador para ver el funcionamiento de nuestra aplicación holaronronea.

Page 6: Mi Primer Aplicación App Inventor