MIT APP INVENTOR

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 85 millones de apps desarrolladas con un total de 18 millones de usuarios en el momento de escribir esta reseña.
Las posibilidades de programación de aplicaciones móviles son muy variadas y su difusión en la comunidad es muy amplia ya sea en “Galería” de la plataforma web o en la tienda virtual de apps “Play Store” de Google.

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

Requisitos del usuario
Para utilizar la plataforma de programación de MIT App Inventor 2 solo es necesario:
• Una cuenta de google.
• Un ordenador con conexión a Internet.
• Opcional: Un dispositivo Android o iOS (tableta o móvil)
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

1. Diseño de las pantallas de la aplicación.
2. Programación de los elementos incluidos en nuestras pantallas.
3. Compilación del archivo ejecutable “Android Aplication Package” (apk) que se cargará en el dispositivo.

Nota: Debido a las restricciones de seguridad de Apple en las plataformas iOS, no es posible instalar de forma permanente aplicaciones mediante archivos *.apk pero sí ejecutar la simulación de la app.

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.

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.

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.

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.

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.

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 necesario 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.
Acceder a un teléfono Android vía WiFi. Ha de ser la misma red que la de los ordenadores de los alumnos. Para conseguirlo vamos a reciclar un viejo «router-ADSL» conectándolo al concentrador del aula que limitará y controlará el acceso. Además, aquellos alumnos que vayan a utilizar su móvil Android han de descargarse una aplicación gratuita que se comunicará con el entorno de desarrollo: el «MIT AI2 Companion»

• Emulador. Utilizando un programa «Emulador» como complemento al entorno desarrollo, sin necesidad de contar con un móvil real para probar las prácticas. Esta es la solución «universal» que vamos a implementar en todos los equipos del aula y que a continuación pasamos a detallar. Al igual que en el caso anterior ha de instalarse el «App Inventor Setup«

• USB. Conectando el móvil directamente al ordenador mediante un cable USB (en MS Windows habrán de instalar los «drivers» correspondientes de la marca/modelo). Aquel que quiera probarlo ha de traer su propio cable. En cualquier caso ha de instalarse en el equipo el «App Inventor Setup» y el «MIT AI2 Companion». Además hay que activar en el móvil el «Modo de depuración USB» en el menú de «Ajustes».