3.1. El diseño de la aplicación.

Ha llegado la hora de poner en práctica lo aprendido hasta el momento y programar con MIT App Inventor 2 una sencilla aplicación móvil que consistirá en activar un sonido concreto al hacer clic sobre una imagen mostrada en la pantalla del dispositivo.

Recordemos que, como ya hemos visto anteriormente, la programación de una aplicación para un dispositivo móvil requiere la implementación de tres fases de trabajo:

Gráfico 3.1.1. CATEDU. (2023, 27 noviembre). Fases del proceso de una aplicación. (CC BY-NC)

Si no hemos iniciado sesión, accedemos a nuestra cuenta de MIT App Inventor con nuestra cuenta de Google. Una vez iniciemos la sesión accederemos (por defecto) a la ventana “Diseñador” (botón superior derecho). En la columna “Paleta” utilizaremos varios elementos que  arrastraremos a la columna "Visor" para poder utilizarlos. Los elementos que usaremos son los siguientes:

• Etiqueta (categoría Interfaz de usuario). Componente visible 
  
• Botón (categoría Interfaz de usuario). Componente visible 
  
• Sonido (categoría Medios). Componente No visible (Quiere decir que se ejecuta, pero no es visible cuando se utiliza la aplicación)
  

Para utilizar cada uno de esos componentes lo único que tenemos que hacer es seleccionarlo y arrastrarlo hasta la región "Visor" y soltarlo sobre la imagen del dispositivo móvil. Si seleccionamos cada uno de los elementos por separado observaremos que en la columna “Propiedades” podemos configurar las propiedades que tiene cada uno de esos elementos. Pongamos algunos ejemplos. 

• Si elegimos el elemento “Etiqueta”, en columna "Propiedades" nos aparecerán varios campos que nos indican qué podemos hacer con ese componente. Por ejemplo, podemos cambiar el color del fondo de la etiqueta, el color y formato del texto, la posición del texto (Izquierda, Centrado, Derecha) o el texto de la etiqueta
• Para el elemento “Botón”, observaremos que uno de las propiedades que podemos cambiar consiste en seleccionar una imagen para usar de botón, en nuestro caso la imagen que hemos elegido de ejemplo es la de un burro (podéis elegir cualquier otra). Si revisamos ls demás opciones de configuración, podremos modificar la imagen, ajustando el tamaño de varias formas.
• Por último,  para el componente “Sonido” seleccionaremos un sonido en formato “mp3” que podemos configurar para que suene al activar el evento correspondiente.
  

Dentro de las opciones, uno de los elementos que tenemos que saber utilizar es el ancho y el alto de los elementos. Podremos ajustar los elementos a la ventana o dotarles de unas medidas concretas en píxeles o porcentaje (se entiende por porcentaje, el porcentaje de la pantalla que ocupará a lo ancho y alto -10%, 25%,...) Se recomienda probar esta opción para observar su comportamiento. No obstante, en los diferentes vídeos que se recomiendan se tratará este tema de forma transversal.

Para obtener una comprensión más completa de las cómo utilizar los diferente elementos señalados en MIT App Inventor, se recomienda la visualización del siguiente vídeo:

Vídeo 3.1.1. Programamos. (2019, 1 mayo). App Inventor 3.1: Mi primera App [Vídeo]. Youtube. Recuperado 27 de noviembre de 2023, de https://youtu.be/BYvmlKeyNC0?si=RjNLKkUD6wJsHNnp