1. Desarrollo de aplicaciones con App Inventor

1. Introducción a MIT App Inventor

“Cualquier persona puede crear aplicaciones que impacten al mundo”. Con esta frase tan llamativa que podemos leer en la web de MIT App Inventor se presenta esta herramienta de programación visual por bloques y gratuita diseñada originalmente para dispositivos móviles con sistema operativo Android y desde marzo de 2021 también compatible para dispositivos iOS.

Dirigida a cualquier persona no experta en programación, su origen se remonta al año 2008 con la primera versión pública disponible para el usuario. El profesor Hall Abelson y su equipo de Google Education desarrolló su idea de crear un lenguaje de programación fácil de usar para hacer aplicaciones móviles que pudieran aprovechar la tecnología emergente de aquellos primeros teléfonos inteligentes. Posteriormente, en 2012 Google cedió el código fuente final y su mantenimiento al Instituto Tecnológico de Massachusetts (MIT). Actualmente, está disponible la versión MIT App Inventor 2 que se ejecuta como un servicio web administrado por el personal del MIT en el Centro para el Aprendizaje Móvil y cuenta con más de 34 millones de apps desarrolladas con un total de 8,2 millones de usuarios en el momento de escribir esta reseña.

Web de acceso a App Inventor: https://appinventor.mit.edu/

1.1. Requisitos del usuario

Después de acceder con nuestro navegador a la dirección https://appinventor.mit.edu/ debemos insertar el usuario y contraseña de nuestra cuenta de Google tras hacer clic en el botón superior izquierdo “Create Apps”.

 La secuencia de programación en App Inventor es la siguiente:

Figura 2.2. Fases del proceso de creación de una app. Rafael Morales Caumel.

2. Primeros pasos con MIT App Inventor

Ya conoces los requisitos mínimos que necesitas para utilizar esta plataforma de programación de dispositivos móviles. 

En este capítulo te mostraremos el aspecto visual que presenta la plataforma de programación MIT App Inventor 2, la interfaz de usuario y las características de sus dos ventanas principales: diseñador y bloques.  Además, aprenderás a configurar algunas propiedades de la aplicación móvil como el icono de la propia app, las animaciones de apertura y cierra de la pantalla, etc. 

Sigue con atención los capítulos siguientes y comprobarás cómo, paso a paso y en pocos minutos, ya puedes programar una sencilla app con imágenes y sonidos al actuar sobre la pantalla táctil.

2.1. Interfaz

Una vez identificados en la plataforma se abre una interfaz en la que se distinguen dos secciones:

•   Menú superior: Con pestañas de configuración general del entorno y acceso a los proyectos almacenados. Por ejemplo, se puede seleccionar el idioma, cargar un proyecto almacenado, generar el archivo APK, o acceder a la “Galería” con proyectos ya publicados por otros usuarios.
  

•  Ventana Diseñador

La interfaz ofrece en la parte superior un gestor de pantallas bien para seleccionar las diferentes pantallas de nuestra aplicación, o para saltar entre la pantalla del Diseñador y la del Programador (Editor de Bloques).

Asimismo, se distinguen cuatro columnas nombradas de izquierda a derecha como Paleta (Región 1), Visor (Región 2), Componentes (Región 3) y Propiedades (Región 4):

1. PALETA: Agrupados en 12 categorías, ofrece multitud de elementos para integrarlos en nuestra aplicación arrastrándolos a la ventana Visor.

2. VISOR. Muestra una pantalla similar a un dispositivo móvil para ir alojando los elementos de la paleta y comprobar su disposición.

3. COMPONENTES.  Aparecen los elementos seleccionados en el visor en forma de árbol. Incluye una ventana inferior “Medios” para subir archivos multimedia.

4. PROPIEDADES. La cuarta columna permite la configuración de los componentes seleccionados anteriormente: color y alineación de texto, visible, etc. bien para la aplicación en general o bien para cada una de las pantallas de nuestra app.

2.2. Propiedades de la aplicación móvil

Antes de programar cualquier App conviene definir las propiedades generales que va a tener nuestra aplicación móvil; es decir, podemos definir algunas características generales sin seleccionar ningún elemento de la paleta, nada más que la pantalla inicial (por defecto llamada “screen1”) o definir diferentes pantallas, si hay más de una.  Veamos algunas de estas propiedades generales situadas en la columna 4 de la derecha de la ventana Diseñador:

• PantallaAcercaDe: En esta ventana, podemos detallar información general como el autor, la forma de uso de la app, etc.
• DispHorizontal/DispVertical: Podemos ajustar la disposición de los elementos de esta ventana “screen1” como centrados, alineados, etc.
• AppName: Asigna el nombre de la app que podrá leerse una vez instalada.
• ColorDeFondo/ImagenDeFondo: Asigna un color o imagen al fondo de la app.
• AnimaciónCierredePantalla: permite establecer diferentes transiciones al abrir o cerrar cada pantalla de nuestra aplicación .
• Icono: Asigna un icono a nuestra aplicación que se usará para ejecutar la app instalada en cualquier dispositivo.
• PrimaryColor/PrimaryColorDarK: Permite la selección de colores según el Tema elegido (Theme) en esta mismo panel de propiedades.
• OrientacionDeLaPantalla: Permite elegir la ejecución de la app en distintas orientaciones.

3. Comenzamos a programar una app

Ya hemos visto anteriormente que la programación de una App requiere seguir tres fases de trabajo:

Pues bien, ha llegado la hora de poner en práctica lo aprendido 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.

3.1. Diseño de la app

Después de iniciar la sesión en App Inventor, accederemos (por defecto) a la ventana “Diseñador” (botón superior derecho) y en la columna “Paleta” elegiremos varios elementos arrastrándolos a la ventana Visor:

• Etiqueta (categoría Interfaz de usuario). Componente visible
• Botón (categoría Interfaz de usuario). Componente visible
• Sonido (categoría  Medios). Componente No visible

A partir de este momento, seleccionamos cada elemento y en la columna “Propiedades” se configuran las mismas. Por ejemplo, para el componente “Etiqueta” podemos cambiar el texto por “Pulsa sobre la imagen”. Para el componente “Botón” seleccionaremos una imagen para dicho botón, en nuestro caso la imagen de un burro que podremos insertar ajustando el tamaño de varias formas y finalmente para el componente “Sonido” seleccionaremos un sonido en formato “mp3” que sonará al activar el evento correspondiente.

3.2. Bloques de la app

Para la programación de los elementos elegidos y colocados sobre la ventana Visor debemos acceder al Editor de Bloques en la pantalla “Bloques” a través del botón superior derecho del mismo nombre. Una vez en dicha ventana, podemos observar que tenemos dos ventanas principales: Bloques y Visor.

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.

3.3. Probando mi app

Después de programar los bloques para cada elemento de la paleta de componentes ha llegado el momento de comprobar los resultados y, en caso necesario, depurar el programa para que se ajuste exactamente a nuestra idea final de la aplicación. Para 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 aún con los primeros pasos de este entorno es recomendable comprobar primero su correcto funcionamiento antes de instalar la App por lo que elegimos la pestaña “Conectar”. Para este caso tenemos tres opciones:

• AI Companion. Es una aplicación que permite simular la aplicación en el teléfono móvil y es neces ario instalar en el mismo la aplicación MIT AI2 Companion disponible en la Play Store de Google. Esta es la opción más recomendada por su sencillez ya que solo necesitas ejecutar la aplicación y mediante un código QR o un código de 6 dígitos es posible emular la app. Además, una vez ejecutada la aplicación en el móvil, cualquier modificación sobre el programa se traslada a la aplicación mientras la conexión se mantenga por lo que la depuración de la aplicación es más sencilla.
• Emulador. Se ejecuta una interfaz que simula una pantalla móvil. Requiere ejecutar un asistente llamado aiStarter que tarda algunos minutos en sincronizarse.
• USB. Mediante un cable USB podemos conectar el ordenador con nuestro móvil para ver la aplicación en el dispositivo.

4. Ejemplos de aplicaciones

Con el ejemplo anterior, te has familiarizado con el entorno App Inventor y el proceso de creación de una App muy simple.

Para ayudarte en el diseño de Apps más complejas y particularmente para que puedas crear tu propia aplicación como producto de proyecto de ApS, te mostramos otros ejemplos de aplicaciones móviles muy útiles para el desarrollo de estos proyectos.

4.1. App 1: Preguntas y respuestas

El desarrollo de una App como producto de un proyecto de Aprendizaje-Servicio puede utilizar la gamificación como estrategia de aprendizaje. Pensemos, por ejemplo, en aplicaciones que amplíen el conocimiento en algún ámbito de actuación o que simplemente den a conocer conceptos o definiciones concretas. En estos casos, la aplicación móvil se convierte en un excelente producto final enmarcado en un proyecto de ApS y el abanico de posibilidades es enorme. Por ejemplo, una aplicación de preguntas y respuestas puede contribuir a dar a conocer las señales de tráfico para mejorar la educación vial de niños y adolescentes, como ya se ha mencionado en este curso. Otros ejemplos, por citar algunos más, pueden ser una app de preguntas y respuestas sobre la lengua de signos o el lenguaje braille que permitan acercar estos lenguajes a cualquier interesado.

En definitiva, una app de preguntas y respuestas es un claro ejemplo de un producto final compatible con un proyecto de ApS donde las preguntas y respuestas pueden alcanzar varios objetivos: difusión de una problemática, dar a conocer una realidad, mejorar los conocimientos o ejercitar la memoria del usuario, etc.

4.2. App 2: Lector de códigos QR

Muchos proyectos de ApS buscan como objetivo la difusión de un tema concreto, ya sea promover una acción solidaria, visibilizar una situación particular del entorno más cercano, etc. Para este fin, se suelen emplear, por lo general, herramientas de publicación y difusión de contenidos muy variados que van desde un simple cartel publicitario pasando por una publicación en una web propia o, más habitual, la difusión en formatos de presentación llamativos y sorprendentes como pueden ser los ofrecidos por herramientas como Emaze, Prezzi, PowTown, Genially, etc. Pues bien, además de acceder a dicha información a través de un ordenador, también el acceso a estos recursos puede realizarse desde un dispositivo móvil con ayuda de un lector de códigos QR una vez que estos han sido publicados en la plataforma correspondiente.

En el vídeo que se muestra a continuación, podemos realizar una pequeña aplicación que nos permitirá leer un código QR que nos llevará a la información almacenada y publicada en la dirección web a la que nos dirija. Para ello, se utilizarán tres elementos incluidos en la categoría de “Interfaz de usuario”, otro incluido en “Disposición” y finalmente un elemento más de la categoría “Sensores”:

• Etiqueta (categoría Interfaz de usuario). Componente visible
  
• Botón (categoría Interfaz de usuario). Componente visible
• VisorWeb (categoría Interfaz de usuario). Componente visible
• DisposiciónVertical (categoría Disposición). Componente visible
• LectorCódigoDeBarra (categoría Sensores). Componente No visible

Si lo deseas, puedes poner en práctica tu app de lectura de código QR escaneando el siguiente código:

4.3. App 3: Traductor

Dentro de la Paleta de componentes nos encontramos con una categoría muy interesante para proyectos de ApS llamada “Medios” en la que podemos encontrar herramientas muy útiles de carácter multimedia para ayudar a los usuarios en diferentes situaciones.

4.4. App4: Localización con GPS

De todos los sensores que ofrece un dispositivo móvil, el GPS es sin duda uno de los más utilizados. Sus aplicaciones para proyectos de ApS son muy amplias como hemos visto en anteriores capítulos de este curso: rutas, mapas, geolocalización, seguridad, etc.

La programación de esta app se divide en cuatro videos didácticos que nos permitirán conocer el manejo básico de este componente no visible llamado “SensorDeUbicación” perteneciente a la categoría de Sensores y su interacción con otras aplicaciones como Google Maps gracias al componente “VisorWeb” de la categoría Interfaz de usuario (Videos "Creación de una app que use el GPS", partes 1 y 2).

5. Créditos

Este material "Desarrollo de aplicaciones con App Inventor" ha sido elaborado por Rafael Morales Caumel, publicado bajo licencia Creative Commons 4.0 International (BY-SA) para el INTEF y editado por el Ministerio de Educación y Formación Profesional 

Área de Formación en Línea y Competencia Digital Educativa del INTEF