Tema 1
ACTIVIDAD GUIADA 1 - BOTÓN CON IMAGEN Y SONIDO (GATO)
(Actividad tomada de la web del profesor Miguel Ángel Hidalgo Tortosa)
Vamos a realizar un ejercicio guiado con el que vamos a instalar nuestra primera App en nuestro dispositivo.
La App va a mostrar la foto de un gato en nuestra pantalla, que va a maullar cada vez que lo toquemos.
1) Antes de nada, descarga en el ordenador estos dos archivos que vamos a necesitar:
2) Entra en la página MIT App Inventor, inicia sesión con tu correo y pon el idioma en Español si no lo has hecho antes y crea un nuevo proyecto llamado Miau.
3) Arrastra un botón al visor del dispositivo.
Al arrastrar el botón, se han creado varios controladores de eventos en el área de bloques, que utilizaremos después para programar.
4) Cambia el aspecto del botón con la imagen del gato descargada antes, para ello, selecciona el botón y en su panel de propiedades, pulsa en la opción Imagen y selecciona Subir archivo. Ahora busca el archivo "Kitty.png" descargado antes y selecciónalo:
La imagen del botón gris plano ha cambiado por la imagen del gato y en el panel de Medios aparece el archivo "kitty.png" subido a nuestro proyecto.
Para quitar el texto “Texto para el Botón1” que aparece por debajo del gato hay que borrar el valor del campo Texto del botón, en el panel de propiedades del botón.
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.
5) 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. Cambiar el texto “Texto para Etiqueta1” por “Hola, soy Kitty” en el panel de propiedades de la etiqueta.
6) Para añadir un sonido a nuestra aplicación, arrastra hasta el visor el icono Sonido, que está dentro del grupo Medios de la Paleta. 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.
Vamos a asociar a este objeto que hemos creado el sonido “Miau.mp3” que hemos descargado. Selecciona el objeto Sonido1 y en su panel de propiedades busca Origen, ahí subiremos el archivo descargado.
Ya hemos terminado el diseño, ahora vamos a programar cómo queremos que se comporte nuestra App en el entorno de programación de Bloques.
7) Pulsa el botón Bloques y accede al entorno de programación por bloques. Pulsa sobre el botón Botón 1 del menú de Bloques y arrastra el bloque "Cuando boton1.Clic... ejecutar"
8) Pulsa sobre el botón Sonido1 del menú de Bloques y arrastra el bloque "Llamar sonido1.Reproducir"
Debe quedarte como en la imagen de la izquierda
Ya hemos terminado la aplicación, puedes probarla en el móvil haciendo clic en "Conexión - AI Companion", debes abrirlo también en tu móvil.
Si la quieres descargar para instalarla en el móvil permanentemente, hacemos clic en Generar y elegimos la opción Android App (.apk). Después de un rato, se mostrará un código QR que nos llevará a la página de descarga de nuestro archivo de instalación Miau.apk.
Añade los elementos necesarios al proyecto Miau para que el gato maúlle también al agitar el móvil. agitar el dispositivo.
