Cómo acceder al sitio de app inventor

El servicio App Inventor se encuentra en la dirección:

 http://ai2.appinventor.mit.edu/

 y para acceder es necesario disponer de una cuenta email.

 La primera vez que accedamos nos solicitará la aceptación de los términos de servicio y, a continuación, nos aparecerá una ventana de bienvenida en la que se nos propone realizar unos tutoriales o comenzar un proyecto en blanco.

Breve descripción del entorno de desarrollo

 Para desarrollar nuestras aplicaciones disponemos de tres herramientas: 

1. Gestor de Proyectos

2. Editor de Diseño

3. Editor de Bloques

1. Gestor de proyectos

Nos permite configurar el idioma en el que deseamos trabajar, crear nuevos proyectos, guardarlos o importarlos así como compartirlos, informar de errores, acceder a ayuda y tutoriales, generar archivos .apk (para instalar la aplicación en el dispositivo Android), etc. Incluye además una herramienta que nos facilitará la elaboración y desarrollo de nuestras aplicaciones: podemos conectar un dispositivo móvil Android (Wifi o USB) y ver los cambios de nuestra aplicación conforme vamos modificando el diseño y los bloques de código.

Configuración del idioma

Será la primera acción que realizaremos antes de empezar un nuevo proyecto.

Gestión de Proyectos

Podemos Guardar nuestro proyecto en los servidores de App Inventor o en nuestro ordenador en el formato .aia

En “Mis proyectos” se nos muestra la lista de proyectos que hemos desarrollado y nos ofrece la posibilidad de compartirlos (código y diseño) con otros usuarios de App Inventor a través de la opción “Publicar en la Galería”.

También es posible firmar el archivo de instalación .apk con una contraseña para su cifrado (Keystore)

Conectando con el Emulador o un dispositivo móvil Android (Wifi o USB)

Como se ha mencionado anteriormente, para poder ir comprobando tanto el diseño como el funcionamiento del código de nuestra aplicación, podemos instalar un Emulador en el ordenador o, mejor aún, conectar nuestro teléfono móvil o tableta mediante Wifi o un cable USB.

La opción más recomendable es utilizar nuestro dispositivo móvil como banco de pruebas a través de la conexión Wifi. Para ello se requiere que tanto el ordenador en el que estamos trabajando como nuestro dispositivo móvil se encuentre en la misma red (aunque el ordenador esté conectado a Internet a través de cable). 

Para establecer la conexión necesitamos instalar en nuestro dispositivo Android la aplicación “MIT AI2 Companion” disponible en Google Play Store.”

Desde Marzo de 2021 hay disponible una App para IOS que podemos descargar desde App Store, por lo que podemos utilizar nuestro iphone o ipad para probar nuestra aplicación.

Ahora, para conectar App Inventor con el móvil haremos clic en Conectar, y elegiremos la opción AI Companion.

Se abrirá una ventana como esta:

A continuación abrimos en el móvil la aplicación que hemos descargado. Cuando la abramos elegiremos Connect with code (y escribiremos el código de letras y números que aparece en la ventana) o Scan QR code (sólo tenemos que apuntar al código QR y la conexión se establecerá automáticamente).

Generar el archivo APK

Una vez que hayamos finalizado nuestra aplicación tenemos que generar el archivo de instalación para el dispositivo móvil. Estos archivos tienen la extensión apk.

Dentro de Generar hacemos clic en Android (.apk)

Se nos ofrece dos opciones: 

• App (generar código QR para el archivo .apk). Usando cualquier lector de códigos QR en nuestro móvil, obtenemos el enlace de descarga de nuestra aplicación. Es conveniente recordar que debemos modificar los Ajustes en nuestro dispositivo para permitir la instalación de Apps que no preceden de Play Store (Configuración por defecto)

• App (guardar archivo .apk en mi ordenador). Ahora podemos publicar nuestra App en Play Store  o enviarlo a nuestro dispositivo para su instalación.

Si deseamos publicar nuestra App en Play Store debemos generar el archivo .aab haciendo clic en la opción Generar  Android App Bundle (.aab).

Con este formato Google Play Store retrasa la generación del archivo .apk  al momento de la descarga, utilizando los archivos específicos para el procesador, pantalla e idioma del dispositivo, consiguiendo así que la aplicación ocupe menos espacio.

Proyectos de otros usuarios

Haciendo clic en Galería tenemos acceso a proyectos que han sido compartidos por otros usuarios. Este repositorio de recursos puede sernos de gran ayuda para resolver dudas y seguir profundizando en el uso y programación de algunos componentes que ofrece App Inventor.

2. Editor de diseño

Se encuentra dividido en cuatro columnas: 

 Para acceder al editor de diseño haremos clic en el botón “Diseñador” situado en la parte superior derecha (al lado del botón Bloques)

Paleta

Situada a la izquierda nos muestra los diferentes componentes disponibles, que pueden ser visibles (botones, etiquetas, deslizadores, etc.) o no-visibles (notificadores, traductor, sensores, etc.).

Ayuda integrada: si hacemos clic sobre la interrogación que aparece a la derecha de cada componente se nos mostrará información sobre el mismo

Visor

Representa la pantalla del dispositivo móvil. Desde la Paleta iremos arrastrando y soltando aquí los componentes que conformarán nuestra aplicación. Los componentes no visibles se mostrarán en la parte inferior. Con el visor podemos diseñar el aspecto (la forma en que se distribuyen e integran los componentes visibles) de la App.

Componentes

Esta columna está integrada por los componentes que hemos agregado a la aplicación. El primero es siempre la pantalla (ventana) que estamos diseñando, que en el caso de ser la principal o la única de la app, se llamará Screen1 (en este caso no se puede modificar el nombre).

Es conveniente asignarle un nombre a cada componente con el fin de identificarlo fácilmente cuando procedamos a su programación en el Editor de Bloques. 

Debajo de Componentes tenemos el apartado de Medios. Desde aquí subiremos los archivos (imágenes, sonidos, etc.) que vayamos a utilizar en nuestra App.

Propiedades

Nos permite establecer la configuración que tendrá por defecto cada uno de los componentes que conforman nuestra App (tanto visibles como no visibles). Estos valores iniciales los podemos modificar posteriormente desde el Editor de Bloques.

3. Editor de bloques

En esta pantalla programaremos cada uno de los componentes de la aplicación, es decir, iremos indicando las acciones que deberán realizarse cuando se produzca un evento (hacer clic en un botón, transcurra cierto tiempo de reloj, cambie nuestra ubicación, arrastrar un deslizador, colisionen dos sprites, etc.).

Se accede haciendo clic en el botón Bloques situado en la parte superior derecha (al lado del botón Diseñador)

Está formado por la columna Bloques (izquierda) y el Visor.

Dentro de Bloques, en el apartado de Integrados, tenemos de un conjunto de herramientas básicas para la programación. A continuación, se encuentran los componentes con los nombre que le asignamos desde el Editor de Diseño.

Al hacer clic sobre cualquier componente se nos despliega un conjunto de acciones disponibles para dicho componente. Las acciones se completarán con las herramientas del apartado Integrados.

Las acciones se realizarán siempre como consecuencia de la ocurrencia de un evento. Los eventos se pueden producir por la interacción del usuario con los componentes visibles (arrastrar un deslizador) o por los cambios de valor de un sensor (orientación del dispositivo móvil, acelerómetro, etc.).

Por ejemplo, si deseamos que al hacer clic sobre el botón Hablar (creado en la fase de diseño) se active el componente Reconocimiento de Voz construiríamos un bloque como el siguiente:

En la parte superior derecha del Visor encontramos una Mochila que nos será de utilidad cuando deseemos utilizar el mismo código en otra ventana u otra aplicación.

En la parte inferior izquierda del Visor se nos muestra un notificador de errores que nos ayudará a depurar nuestra App.