Incluir un botón en la pantalla En la parte izquierda
hacemos clic en el tipo de objeto Botón, y sin soltar arrastramos hasta el
visor. Si todo funciona bien se verá en el visor, y también en la pantalla del
móvil, o del emulador. Un botón es un objeto sobre el que podemos hacer clic, y
puede tener diferentes aspectos. Para que el botón tenga la imagen del gato
hacemos clic en el botón, y en la parte derecha de App Inventor, en
Propiedades, y bajo la propiedad Imagen, hacemos clic en Ninguno… Elegimos la
opción Subir archivo…y después Seleccionar archivo
Elegimos el archivo del gato en nuestro disco duro y
pulsamos Aceptar para subirlo a la página de nuestro proyecto en App Inventor.
Se verá el gato como imagen del botón, que ahora será más grande.
Para quitar el texto “Texto para el Botón1” que aparece por
debajo del gato hay que borrar el valor de una propiedad Texto del botón, en la
parte derecha de la ventana.
Si no vemos la cara del gato entera en la pantalla del
dispositivo deberemos cambiar los valores de las propiedades Ancho y Alto del
botón por “Ajustar al contenedor”, para que se ajusten al tamaño máximo
disponible en la pantalla del dispositivo. Para incluir una etiqueta debajo del
gato que ponga “Hola, soy Kitty” arrastramos un componente Etiqueta hasta el visor,
y la soltamos debajo del gato. Investiguemos ahora para descubrir cómo cambiar
el texto “Texto para Etiqueta1” por “Hola, soy Kitty”. Una pista: hay que
seleccionar la etiqueta en el visor, y luego cambiar sus propiedades en la
parte derecha de la ventana de trabajo de App Inventor.
Añadir un sonido Ahora añadiremos un sonido a nuestra
aplicación, arrastrando hasta el visor el icono Sonido, que está dentro del
grupo Medios, en la Paleta. Ojo, este objeto no se verá en el móvil o en el
emulador, porque no es una imagen, ni un botón, ni una etiqueta. Por eso
aparece debajo del visor, en el apartado Componentes no visibles. Investiguemos
ahora de nuevo para saber cómo asociar a este objeto que hemos creado el sonido
“Miau.pm3” que hemos descargado. De nuevo hay que usar el panel de propiedades
para este componente. No es difícil, haremos clic sobre el valor de la
propiedad Origen del componente Sonido1 y subiremos el archivo descargado.
Con esto hemos terminado de diseñar el aspecto de nuestra
aplicación Ahora viene la magia, tenemos que programar cómo se comportará la
aplicación. ¡Eso es programar! Hacemos clic en el botón Bloques situado en la
esquina superior derecha.
Esto abre la ventana de programación con bloques. La parte
más amplia, ahora en blanco, es el Editor, donde colocaremos los bloques de
nuestros programas.
Vamos a hacer que suene elsonido del gato cada vez que
hagamos clic sobre la imagen del gato (botón). Hacemos clic en Botón para que
se muestren los bloques de colores disponibles para escribir nuestro código, el
programa. Se abre un “cajón de herramientas” con todoslos bloques que podemos
utilizar. Arrastramos hasta el editor el que dice Botón1.Clic.
Los bloques color mostaza son los manejadores o gestores de
sucesos. Indican qué hay que hacer cuando sucede algo en la aplicación. En este
caso, el manejador nos permitirá decirle al ordenador qué debe hacer cuando
hagamos clic sobre el gato. Ahora hacemos clic sobre nuestro componente Sonido1
para abrir su cajón. Entonces arrastramos la instrucción
Llamar.Sonido1.Reproducir hasta “encajarla” dentro del manejador que hemos
creado para el botón.
¡Enhorabuena por la primera aplicación! Ya podemos probarla
en el móvil, pero la perderemossi cerramosla aplicación AI2 que nos conecta con
el ordenador. Para instalarla en el móvil permanentemente, como cualquier otra
aplicación, podemos generar un código QR. Para ello hacemos clic en Generar y
elegimosla opción App (generar código QR para el archivo .apk).
Ahora a vibrar Podemos mejorar la aplicación, haciendo que
el teléfono vibre a la vez que el gato maúlla. Una pista: hay que buscar dentro
del cajón de bloques del objeto Sonido1. El bloque que hace que el móvil vibre
es Llamar.Sonido1
.Vibrar. Este bloque, a diferencia del anterior, tiene un
“encajador” por el lado derecho. Sirve para indicar cuánto tiempo tiene que
vibrar el dispositivo, en milisegundos. Para poner aquí un valor de tiempo hay
que abrir el cajón Matemáticas y arrastrar el bloque de arriba hasta el
encajador libre a la derecha del bloque Llamar.Sonido1.Vibrar, donde indica
milisegundos.
Ahora cambiamos el valor 0 por el valor 500, para que vibre
durante medio segundo. Los bloques quedarán así
¿Qué pasa si ponemos 2500 en el bloque azul? Vibrará durante
2,5 segundos. Para cambiar el valor hay que hacer clic sobre el número, y
escribir el nuevo valor. Ahora volveremos al Diseñador y añadiremos un objeto
Acelerómetro, que se encuentra en la Paleta, dentro del cajón Sensores. Se
quedará bajo la ventana del visor, porque no se refiere a un objeto visible en
nuestra interfaz de usuario. Ahora, en el editor de bloques, elegiremos en la
ventana de bloques el objeto Acelerómetro1 que hemos creado. De su cajón
elegiremos el bloque mostaza cuando.Acelerómetro1.Agitar
Ahora copiamos el bloque Llamar.Sonido1.Reproducir de
arriba, haciendo clic con el botón derecho sobre él y seleccionando Duplicar
Una vez duplicado lo encajaremos con el bloque mostaza que
hemos creado. El editor de código aparecerá como en la siguiente figura.
¿Qué va a ocurrir? El gato también maullará cada vez que
agitemos el móvil. El acelerómetro es el sistema que detecta que el móvil se
mueve, o cambia de orientación vertical a horizontal. Es muy útil para muchas
aplicaciones. Aquí hay dos EVENTOS distintos, y le estamos indicando al móvil,
a través de este programa, qué debe hacer cuando suceda cada uno de estos
eventos. POR ESO SE DICE QUE APP INVENTOR ES PROGRAMACIÓN ORIENTADA A EVENTOS
(EVENT-DRIVEN PROGRAMMING). Intentemos ahora generar nosotros mismos el código
QR para esta nueva aplicación.
