MIT App Inventor: programando aplicaciones para Android

Para terminar el trimestre nuestros alumnos de 4º de la ESO del Colegio Pablo Vi van a aprender nociones básicas sobre el desarrollo de aplicaciones para teléfonos móviles.

e8

Después de iniciarse en la programación de aplicaciones multimedia con Scratch han recibido entusiasmados esta nueva iniciativa, basada en la herramienta MIT App Inventor.

Se trata de un entorno de desarrollo visual muy fácil de usar, con la que incluso los no programadores pueden desarrollar sus aplicaciones. Y al tratarse de un servicio web todos los trabajos quedarán almacenados en internet (en la cuenta de google del alumno, con la que han de identificarse para trabajar).

Al construir las aplicaciones para Android trabajaremos con varias herramientas:

  • Con del  Diseñador construirán el Interfaz de Usuario, eligiendo y situando los elementos con los que interactuará luego el usuario y los componentes que utilizará la aplicación.
  • Con el Editor de Bloques definirán el comportamiento de los componentes de su aplicación.

Appinventor-diagrama

Para probar la aplicación «en tiempo real» antes de empaquetarla y distribuirla tenemos tres posibilidades:

  1. COMPANIONAcceder 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»
  2. USBConectando 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».
  3. emulador1Utilizando 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«

Instalación del emulador de Android en Linux

El proceso inicial fué relativamente sencillo. Se siguieron las instrucciones para la descarga de la página oficial en un equipo de prueba. El problema que nos encontramos a continuación fue que para iniciar el emulador los alumnos debían ejecutar desde un terminal la siguiente orden difícil de recordar:

/usr/google/appinventor/commands-for-Appinventor/aiStarter &

Así que buscamos un icono que representase a Android de tamaño 256×256 y formato PNG (android.png)  para que sirviese como referencia visual a un lanzador (emulador.desktop) que llamase a la orden anteriormente descrita, y que colocaríamos en el menú de «Aplicaciones» -> «Accesorios«. El contenido del fichero quedó como sigue:

android

[Desktop Entry]
Name=Emulador AI2
Comment=Emulador de terminal Andorid para App Inventor 2
GenericName=Emulador AI2
Exec=/usr/google/appinventor/commands-for-Appinventor/aiStarter 
Type=Application
Terminal=true
Icon=/usr/google/appinventor/android.png
StartupNotify=true
Categories=Utility;

Para evitar descargar y configurar los mismos archivos en todos los equipos se procedió a albergarlos en una carpeta compartida en el servidor de aula, accesible como «invitado». De esta manera sólo tuvimos que ejecutar un sencillo «script» que preparamos para automatizar el proceso:

#!/bin/bash
echo "*** Eliminando la versión anterior..."
rm -rf /usr/google/appinventor
rm -rf /home/alumno/.appinventor

echo "*** Descargando nueva versión..."
smbget -a smb://servidorarchivos/compartir/appinventor2-setup_1.1_all.deb
smbget -a smb://servidorarchivos/compartir/android.png
smbget -a smb://servidorarchivos/compartir/emulador.desktop

echo "*** Instalando nuevo software..."
dpkg -i appinventor2-setup_1.1_all.deb

echo "*** Configurando accesos en el menú"
chmod 644 android.png
chmod 644 emulador.desktop
chown alumno:alumno emulador.desktop
mv android.png /usr/google/appinventor/android.png
mv emulador.desktop /home/alumno/.local/share/applications/emulador.desktop

echo "*** Eliminando las copias de trabajo"
rm -f appinventor2-setup_1.1_all.deb

Inicio del software de emulación

Para arrancar el emulador ahora sólo tienen que buscar en el menú «Aplicaciones» -> «Accesorios» y ejecutar «Emulador AI2»

menu

El resultado es la apertura de un terminal (que pueden minimizar para que no «moleste») con el que luego podrán «cerrar» el emulador cuando terminen el trabajo pulsando [Ctrl + C].

emulador0

Conexión con el emulador por primera vez

Una vez iniciado el software del emulador vamos a ver como utilizarlo desde el entorno de desarrollo de App inventor. Para ello has de tener activo un proyecto en pantalla (puedes crear uno en blanco para probar):

ej1

Una vez iniciado pulsa sobre el menú «Conectar» -> «Emulador»

ej2

Aparecerá un mensaje de espera y al cabo de unos segundos una nueva ventana con el móvil virtual. Tras iniciarse la conexión la primera vez nos indicará que la versión del software está anticuada y que debe actualizarse.

e2

Sigue las instrucciones para actualizarlo y pulsa sobre el botón «Done» (Hecho) del terminal cuando te lo pida.

instalar

NOTA 1: Después de este proceso de inicialización es posible que tengas que volver a reconectar utilizando el menú «Conectar» -> «Reiniciar conexión» y de nuevo «Conectar» -> «Emulador«.

NOTA 2: Se ha probado a distribuir a las cuentas de alumno una copia de las carpetas «/home/alumno/.android» y «/home/alumno/.appinventor» del equipo de prueba una vez actualizado. Así se puede evitar en futuras reinstalaciones la actualización individual  e integrarlas en el «script» arriba comentado, posiblemente como un archivo .tar a restaurar.