3. Creando mi App con MIT App Inventor
- 3.1. El diseño de la aplicación.
- 3.2. Trabajamos con Bloques
- 3.3. Probamos la aplicación
- 3.4. Recursos para realizar nuestras aplicaciones
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
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".
Imagen. 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.
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)
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:
Imagen 3.3.2. CATEDU. (2023b, diciembre 1). Opciones de conexión en MIT App Inventor. (CC BY-NC)
- AI Companion (Recomendado). Es una aplicación que permite simular la aplicación en nuestro dispositivo móvil (Smartphone o tablet). Para ello es necesario instalar en el dispositivo la aplicación MIT AI2 Companion, disponible en la Play Store de Google y para dispositivos IOS. Esta es la opción más recomendada por su sencillez, ya que solo necesitas ejecutar la aplicación y mediante la lectura un código QR, o un código de 6 dígitos, que se escanea desde la aplicación de tu dispositivo móvil. De esta forma, al escanear el código QR es posible emular la app en tu dispositivo. Además, una vez ejecutada la aplicación en el móvil, cualquier modificación sobre el programa se traslada a la aplicación en tiempo real, mientras la conexión se mantenga. Esto hace que la depuración (corrección-mejora) de la aplicación, tanto en su diseño como en su usabilidad, sea más sencilla y rápida.
Imagen 3.3.3. CATEDU. (2023b, diciembre 1). Ejemplo conexión con AI Companion. (CC BY-NC)
- Emulador. No se precisa ningún dispositivo móvil ni la lectura de códigos QR. Al hace clic en emulador, se inicia lo que se conoce como un emulador de Android, que se ejecuta a través de una una interfaz que simula una pantalla móvil. Esta opción requiere instalar la aplicación App Inventor Setup, que a su vez instala un asistente llamado aiStarter.
- USB. Mediante un cable USB podemos conectar el ordenador con nuestro móvil para ver la aplicación en el dispositivo.
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:
-
Inspiración. Las siguientes webs recopilan ejemplos de apps que pueden servir para identificar patrones y tendencias:
-
Diseño de la interfaz. Servicios que nos permiten realizar un prototipo del diseño de la interfaz de nuestra aplicación:
-
Iconos: Webs con cientos de iconos de diferente tamaño para poder utilizar en nuestro diseño:
- Imágenes. Cientos de imágenes gratuitas para poder utilizar en nuestros diseños (aunque lo mejor es hacer nuestras propias fotos)
- Sonidos. Bancos de sonidos para incorporar en nuestras aplicaciones.
- https://soundbible.com/
- Banco de sonidos licenciados CC BY SA. La página se encuentra en inglés y el buscador es simple, añadiendo el sonido que estamos buscando, aparece un listado relacionado. Los sonidos se descargan en formato mp3 y wav.
- https://freesound.org/ (Requiere registro)
- Página web en lengua inglesa con piezas musicales y banco de sonidos que está regulado bajo licencia de Creative Commons (pudiendo escoger entre tres tipos de licencia), que nos permite navegar, descargar y compartir sonidos.
- Procomun. Intef
- Diseñado específicamente para la educación, el banco multimedia de Procomún tiene varias pestañas para categorizar las búsquedas. Los sonidos que hay presentes en dicho banco están licenciados principalmente con CC BY-NC-SA y se descargan en formato mp3, wag y ogg.
- https://www.zapsplat.com/
- Sito web en lengua inglesa que ofrece un repositorio de música y de sonidos licenciados bajo CC BY, por lo que la atribución es obligatoria. Los sonidos están clasificados en categorías y se pueden descargar en formato mp3 y wav. Es necesario registrarse.
- https://soundbible.com/
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.