2. Explorando la creación de aplicaciones con MIT App Inventor

• 2.1. Introducción a MIT App Inventor.
• 2.2. Requisitos, Registro y Secuenciación.
• 2.3. Primeros pasos con MIT App Inventor.
• 2.4. Configurando las propiedades de nuestra aplicación móvil

2.1. Introducción a MIT App Inventor.

Imagen 2.1.1. CATEDU. (2023, 21 noviembre). Portada web App Inventor.captura.(CC BY-NC)

MIT App Inventor es un entorno de programación visual e intuitivo gratuito que permite a cualquier persona, incluso a niños, construir aplicaciones completamente funcionales para teléfonos Android, iPhones y tabletas Android/iOS. Aquellos que son nuevos en MIT App Inventor pueden tener una primera aplicación básica en funcionamiento en menos de 30 minutos. La herramienta basada en la programación por bloques facilita la creación de aplicaciones complejas y de alto impacto en un tiempo significativamente menor que los entornos de programación tradicionales.

Uno de los objetivos principales que persigue el proyecto MIT App Inventor es lograr democratizar el desarrollo de software al capacitar a todas las personas, especialmente a los jóvenes, para pasar de ser consumidores de tecnología a creadores de tecnología.

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ó la 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.

En el presente, MIT App Inventor ha consolidado su posición como una plataforma con más de un millón de visitantes únicos cada mes, provenientes de 195 países. Este colectivo no solo utiliza la herramienta para generar aproximadamente 30 millones de aplicaciones en total, sino que también es un testimonio de la transformación significativa que MIT App Inventor está liderando en la creación de aplicaciones a nivel global. Este fenómeno no solo redefine los paradigmas de desarrollo de aplicaciones, sino que también influye considerablemente en la educación informática de los más jóvenes, marcando un hito en la manera en que se abordan y aprenden estas habilidades fundamentales.

Con MIT App Inventor las oportunidades de programación de aplicaciones móviles son sumamente diversas, y su difusión abarca una amplia comunidad, ya sea a través de la "Galería" en la plataforma web o en las tiendas virtuales de aplicaciones como "Play Store" de Google o la "App Store" de iOS. Este abanico de posibilidades no solo refleja la versatilidad de las herramientas disponibles, sino también la expansión significativa de las aplicaciones en diferentes plataformas, lo que a su vez contribuye a una mayor accesibilidad y visibilidad para los creadores de aplicaciones.

2.2. Requisitos, Registro y Secuenciación.

Requisitos

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) con conexión a internet.

Registro

Después de acceder con nuestro navegador a la dirección https://appinventor.mit.edu/ debemos registrarnos en la plataforma. Para ello, seguiremos estos pasos:

Paso 1. Accedemos al registro en la plataforma a través del icono “Create Apps!!!”, como se muestra en la siguiente imagen.

Imagen 2.2.1. CATEDU. (2023, 21 noviembre). Página de inicio de la web MIT App Inventor.captura.(CC BY-NC)

Paso 2. Al hacer clic en el boton “Create Apps!!” accederemos a la página de registro. Éste se hace mediante una cuenta de Google (con tu cuenta de Gmail o de Google Workspace si la tienes). Al introducir tu dirección de correo electrónico y, seguidamente, la contraseña de tu cuenta de Google, la plataforma te informará sobre los permisos que le das a la plataforma MIT App Inventor. 

Imagen 2.2.2. CATEDU. (2023, 21 noviembre). Registro web App Inventor.captura. (CC BY-NC)

Paso 3. En ocasiones, al completar el registro, la plataforma deriva a una página como si hubiera un error. Si ocurre eso, accedéis de nuevo a https://appinventor.mit.edu/ y hacéis clic de nuevo en el botón “Create Apps!!”. Sea como fuere, después del registro os aparecerá el siguiente mensaje informando sobre las condiciones de uso de la plataforma. 

Imagen 2.2.3. CATEDU. (2023, 21 noviembre). Condiciones de uso de MIT App Inventor.captura. (CC BY-NC)

Siempre debes de prestar atención a los permisos que solicita una aplicación o plataforma para hacer una eficaz gestión de tu privacidad y seguridad en internet.

Paso 4. Aceptamos las condiciones de uso y accederemos a la plataforma. Actualmente nos recibe con un mensaje en una pequeña ventana flotante. Si no estamos interesados en el contenido en este momento, podemos cerrarla haciendo clic en el botón "Continue", situado en la parte inferior izquierda de la ventana flotante. Una vez realizado este paso, ya tenemos todo lo necesario para poder comenzar a trabajar en nuestra primera aplicación.
Importante. Si no queremos volver a ver ese mensaje, debemos marcar la opción "do nor see Again" que se encuentra en la parte inferior de la ventana flotante.

Imagen 2.2.4. CATEDU. (2023, 21 noviembre). Página principal de MIT App Inventor.captura.(CC BY-NC)

Secuencia de programación en App Inventor 

La secuencia de programación a través de la plataforma MIT 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.
   [insertar gráfico secuencia: Diseño>Programación>Aplicación - Fases del proceso de creación de una App]

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.

Imagen 2.2.5. MIT App Inventor. (2023, 21 noviembre). Cuadro comparativo de opciones entre Android e IOS. https://appinventor.mit.edu/ios_tips.(CC BY-NC)

**Puedes construir, empaquetar e instalar aplicaciones para iOS, pero el proceso actual es costoso y complejo debido a los estrictos requisitos de desarrollador de Apple. El equipo de MIT App Inventor está trabajando en un proceso compatible con App Inventor que estará disponible pronto. Mientras tanto, se describe aquí el proceso actual para desarrollar aplicaciones iOS.

2.3. Primeros pasos con MIT App Inventor.

Tras verificar los requisitos mínimos necesarios para utilizar la plataforma de programación de dispositivos móviles, este apartado ofrece una visión detallada del entorno visual de MIT App Inventor 2. Se explorarán la interfaz de usuario y las características clave de sus dos modos de programación o ventanas principales: Diseñador y Bloques.

Además, se proporcionará una guía sobre la configuración de propiedades específicas de la aplicación móvil, como el icono de la app y las animaciones de apertura y cierre de pantalla, entre otros aspectos.

Comprender las capacidades de la plataforma MIT App Inventor 2 constituye el primer paso crucial para avanzar en su utilización y lograr la programación exitosa de una aplicación. Este paso inicial se complementará con los contenidos presentados en los siguientes apartados de esta formación. A través de estos, podrás experimentar cómo, en pocos minutos y paso a paso, puedes programar una aplicación sencilla con contenido diverso, como texto, imágenes y sonidos, permitiéndote interactuar de manera efectiva con la pantalla táctil.

2.3.1. DESCIFRANDO LA INTERFAZ

Una vez nos hemos identificado 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.

Imagen 2.3.1. CATEDU. (2023, 24 noviembre). Menú principal app inventor. Captura. (CC BY-NC)

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):

Imagen 2.3.2. CATEDU. (2023, 24 noviembre). Secciones de la ventada del modo Diseñador. Captura. (CC BY-NC)

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.

Para obtener una visión más completa de las propiedades de App Inventor y su interfaz, se recomienda ver el siguiente vídeo:

Vídeo 2.3.1. App Inventor 2: Programamos. (2019, 1 mayo). App Inventor 2: Repaso a la Interfaz de DiseñoY [Vídeo]. Youtube. Recuperado 24 de noviembre de 2023, de https://youtu.be/V4CI-6kmH6I?si=lJvdZ9NcSBI1g9r1

2.4. Configurando las propiedades de nuestra aplicación móvil

Una vez nos hemos familiarizado con el entorno de MIT App Inventor, podemos empezar a trabajar en nuestra aplicación. Una de las primeras acciones que podemos llevar a cabo, y que se recomienda abordar en primer lugar, es la configuración de las propiedades generales de nuestra aplicación móvil. En otras palabras, lo primero que debemos hacer es definir algunas características generales y lo podemos realizar sin necesidad de seleccionar ningún elemento de la paleta, sólo necesitamos tener activa la pantalla inicial (que cuando iniciamos un proyecto nuevo, por defecto, tiene como título predefinido “screen1”). Asimismo, podemos definir esas características en diferentes pantallas, en el caso de que nuestro proyecto tenga más de una. 

Veamos, pues, las funcionalidades de algunas de estas propiedades generales situadas en la columna “Propiedades” (Región 4), que podrás encontrar a la derecha de la ventana Diseñador:

Sección dedicada a la Apariencia:

• 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.

Además de esta configuración inicial, podemos cambiar algunas de las configuraciones esenciales en toda aplicación desde el botón "Project Properties". Al hacer clic en el botón aparece una ventana flotante desde la cual podemos cambiar aspectos Generales. En esta sección destacan las siguientes opciones: 

• AppName: En este campo podemos modificar el título de la aplicación. En el ejemplo que hemos hecho hemos decidido llamarla "CursoAppInventor_Catedu". Pon nombre a tu proyecto.
• Size: Esta opción nos permite hacer una aplicación con unas dimensiones fijas, o una aplicación Responsive, es decir, que se adapte al dispositivo en el que se ejecuta la aplicación, ya sea un smarphone o una tablet de diferentes dimensiones de pantalla (Se recomienda elegir la opción Responsive)

En el apartado "Theming", podemos cambiar los colores del tema, e incluso elegir uno de los cuatro temas que nos propone la aplicación. Y, por último, en el apartado "Publishing", podemos concretar el CódigoDeVersión y el CódigoDeVersión.  

No obstante, para obtener una comprensión más completa de cómo configurar las propiedades generales de tu aplicación con MIT App Inventor, se recomienda ver el siguiente vídeo:

Video 2.4.1. Programamos. (2019, 1 mayo). App Inventor 1.2: Propiedades de la App y ventanas [Vídeo]. Youtube. Recuperado 27 de noviembre de 2023, de https://youtu.be/OKENI2Hz-5o?si=KBFglS5i2OuTNPTE