Creación de aplicaciones con App Inventor (8) - Actividadguiada 1

Vamos a crear nuestra primera aplicación con App Inventor, que será, como toda primera verión que se precie, la versión "Hola mundo".

Una vez que hayamos accedido en App Inventor, hacemos click en "Comenzar proyecto nuevo", cuyo nombre será "Hola_mundo".

A la derecha de la pantalla aparecen las propiedades que podemos cambiar, como el nombre de la aplicación, el título de la pantalla (que en este caso pondremos como "Pantalla principal"), o incluso el icono principal de nuestra aplicación.

Nuestra aplicación "Hola Mundo" constará de una imagen y un botón como elementos visibles. Para que estos dos estén alineados, pondremos primero una disposición vertical, y arrastraremos a ella una imagen y un botón.

En cuanto tenemos esto, subiremos los archivos de las imágenes que queramos que aparezcan mediante "medios". En este caso son dos imágenes con un androide, una con los brazos bajados y otra con un brazo subido, que harán el efecto de saludo.

Nos vamos ahora a editar las propiedades de la imagen, donde cargaremos el primer androide:

Como quedará muy grande, habrá que modificar su alto y su ancho (unos 200 px).

Nos vamos a las propiedades del botón, donde podremos modificar su color, el texto (negrita, tamaño, alto y ancho -ajustado al contenedor para que quede igual que el androide-, centrado, etc).

A continuación colocaremos los elementos no visibles de nuestra aplicación, que serán:

- Texto a voz de la paleta de medios: para hacer hablar a nuestro androide.

- Reloj de la paleta de sensores: para que dé la sensación de que el androide saluda.

Las propiedades del texto a voz serán país "ESP" e idioma "es" para que hable con nuestro acento. En el reloj, el intervalo del temporizador lo dejaremos como 1000 mili segundos (1s).

Nos vamos ahora a los bloques para iniciar la programación.

Primero vamos a configurar el comportamiento del botón: cuando hago click en el botón se deben ejecutar una serie de sentencias. La primera será llamar a texto voz (en las opciones del texto a voz) para que diga un mensaje, que será un texto que cogemos de la paleta de textos donde escribimos lo que queramos que diga la app. En este caso, "hola mundo".

Podemos hacer más cosas con el botón. Por ejemplo, que el color de fondo del botón cambie al ser pulsado. Usaremos la herramienta "poner botón color de fondo", y lo añadiremos a la programación anterior, usando la paleta de colores.

También tendremos que cambiar la imagen para dar la sensación de que el androide saluda cada vez que apretamos el botón. Para ello, cogemos desde imagen la instrucción "poner imagen foto como", con un texto que sea el nombre de la imagen, en nuestro caso "android2.png".

En este punto, nuestra aplicación funcionaría de la siguiente manera: al hacer click en el botón, la app dice "hola mundo", se cambia la imagen y el androide sube el brazo, y el color del botón cambia. Faltaría programar el retorno de la aplicación a su estado natural.

Para ello utilizamos el temporizador, que se ejecutará cada vez que llegue a cero con la instrucción "cuando reloj temporizador, ejecutar" la siguiente instrucción "botón color de fondo" y colocamos el color inicial. De imágenes, añadimos el bloque "poner imagen foto como" con el texto de la imagen inicial, en nuestro caso "android.png", para que simule que la imagen baja el brazo.

El resultado, que podríamos comprobar en el emulador, sería el siguiente:

Partiendo de la aplicación guiada 1, modifícala de la siguiente manera:

• Sustituye el botón por una etiqueta que ponga “Agita el móvil”


• Modifica la programación para que el “Hola Mundo” se oiga cuando el usuario agite el móvil


• Además, el androide debe levantar y bajar la mano 5 veces. Para ello te recomendamos que utilices un temporizador de manera que, cada vez que se ejecute, cambiará la imagen del androide. Para ello puedes utilizar una variable que controle el número de veces que ha subido/bajado la mano; o bien dos variables que controlen la posición de la mano y el número de veces saludadas. Así podrás saber en qué momento debes parar el temporizador.