3. Creando mi App con MIT App Inventor

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:

diseño programacion aplicacion.png

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:

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. 

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

3.2. Trabajamos con Bloques

En el anterior apartado hemos podido comprobar y poner en práctica cómo se trabaja desde el modo "Diseñador", y todas las posibilidades que tenemos en cada uno de los elementos que introducimos desde las diferentes secciones que nos ofrece la la columna "Paleta"

Para programar los elementos elegidos y colocados sobre la columna "Visor" debemos acceder al "Editor de Bloques", para ello debemos hacer clic en el botón que nos permite activar el modo “Bloques”. Al hacer clic, accedemos a una nueva ventana en la que podemos observar que tenemos dos columna principales: "Bloques" y "Visor".

modo bloques.App Inventor.pngImagen. 3.2.1.  CATEDU. (2023, 29 noviembre). Editor de bloques de App Inventor. (CC BY-NC)

Comprobamos que los elementos elegidos anteriormente están visibles y situados en la parte inferior de la columna de la izquierda nombrada como bloques. Esta columna ofrece también una gran variedad de bloques de programación agrupados por categorías (control, lógica, matemáticas, texto, etc.) para la programación general. Sin embargo, si pulsamos sobre los elementos seleccionados de la Paleta de componentes observamos que se despliegan más bloques de programación disponibles solo para estos componentes.

Sección Bloques App Inventor

Imagen. 3.2.2.  CATEDU. (2023, 29 noviembre). Editor de bloques de App Inventor. Vista detalle. (CC BY-NC)

Para aprender a utilizar correctamente algunos de estos bloques, aquellos que más adelante te resultarán de utilidad para desarrollar tu aplicación, te recomendamos la visualización del siguiente vídeo:

Vídeo 3.2.1. Programamos. (2019, 1 mayo). App Inventor 3.2: Mi primera App (Bloques) [Vídeo]. Youtube. Recuperado 29 de noviembre de 2023, de https://youtu.be/Pusc0Gcb6pk?si=a7MLbrrkbqTvRqco

3.3. Probamos la aplicación

Después de programar nuestra aplicación a través de la ventana de diseño y una vez hemos completado la programación en bloques para cada elemento de la paleta de componentes que hemos utilizado para el desarrollo de la aplicación, llega el momento de comprobar los resultados. Este proceso de comprobación nos ayudará, asimismo, a depurar el programa para que se ajuste exactamente al aspecto y la funcionalidad que deseamos dotar a la aplicación.

Para realizar esta tarea tenemos varias opciones. según queramos solo visualizar la aplicación en nuestro dispositivo sin instalarla (pestaña Conectar) o generar el archivo ejecutable APK para la instalación (pestaña Generar)

Esquema del proceso de comprobación de resultados con App Inventor

Imagen 3.3.1. Morales Caumel, R. (s. f.). Esquema del proceso de comprobación de resultados. INTEF.

Licencia CC BY-SA 4.0

En nuestro caso, dado que estamos dando aún los primeros pasos de este entorno es recomendable comprobar primero su correcto funcionamiento antes de instalar la App que creamos, por lo que es mejor elegir la opción “Conectar”. Al hacer lcic en el menú superior en la opción "Conectar", observaremos que nos aparecen tres opciones de conexión:

Captura de Pantalla 2023-11-29 a las 20.03.01.png

Imagen 3.3.2. CATEDU. (2023b, diciembre 1). Opciones de conexión en MIT App Inventor. (CC BY-NC)

Ai Companion conection

Imagen 3.3.3. CATEDU. (2023b, diciembre 1). Ejemplo conexión con AI Companion. (CC BY-NC)

Si se elige la opción Emulador, es necesario instala en nuestro ordenador el programa App Inventor Setup. Para ello, se recomienda descargar el programa (para Windows, MAC OS X, GNU/Linux) en la web oficial de MIT App Inventor y seguir las instrucciones que se dan dicha página web.

Una vez más, se recomienda la visualización del siguiente vídeo para conocer, de forma visual, las diferentes opciones de conexión que nos plantea la plataforma MIT App Inventor para poder probar o testear nuestras aplicaciones:

Video 3.3.1. Programamos. (2019, 1 mayo). App Inventor 3.3: Mi primera App (Prueba y corrección de errores) [Vídeo]. YouTube. Recuperado 29 de noviembre de 2023, de https://youtu.be/X6fB6i59Um0?si=OErWCYreaDgl0x2h

3.4. Recursos para realizar nuestras aplicaciones

Una vez hemos visto el punto 3.3, podemos decir que nos hemos familiarizado con el entorno MIT App Inventor y el proceso de creación de una App muy simple. Este es un paso esencial para perder el miedo a la plataforma y poder empezar de esta forma a crear nuestras propias aplicaciones.

Con el fin de tener una visión más amplia sobre el diseño de Apps más complejas y, particularmente, para que puedas crear tu propia aplicación como un producto dentro de una situación de aprendizaje que tenga el enfoque de ApS, en los siguientes apartados de este módulo se expondrán algunos ejemplos de aplicaciones móviles muy útiles para coger ideas sobre el diseño y las funcionalidades que podemos incorporar en el desarrollo de nuestra aplicación. En cada ejemplo se muestra una pequeña descripción y viene acompañada con un vídeo muy didáctico que explica el desarrollo y/o funcionamiento de cada aplicación. 

No obstante, antes de comenzar con los ejemplos, queremos compartir una serie de recursos que pueden ayudar al diseño y creación de vuestras aplicaciones:

Es importante que todas las imágenes, ya sean iconos, fotografías o ilustraciones tengan un tamaño y un peso en megabites adecuado. Hay que pensar en el tipo de aplicación que vamos a desarrollar y el dispositivo o dispositivos en los que se van a ejecutar. Poner una imagen de una alta calidad con una alta cantidad de píxeles y que tenga un peso muy alto no significa que se vea mejor que una imagen optimizada para un dispositivo móvil. Una imagen optimizada permite Mejora de la velocidad de carga de la aplicación web, menor consumo de recursos del dispositivo y una mejor experiencia del usuario.