Cómo usar App Inventor

El cómo usar App Inventor requiere que el ordenador tenga alguno de estos sistemas operativos:

• GNU/Linux: Ubuntu 8+, Debian 5+
• Macintosh (con procesador Intel): Mac OS X 10.5, 10.6
• Windows: Windows XP, Windows Vista, Windows 7.

Al mismo tiempo, también necesita de conexión a internet (los programas y las aplicaciones se cargan siempre desde Internet) y uno de los siguientes navegadores web con estas versiones mínimas:

• Mozilla Firefox 3.6, sin la extensión NoScript instalada
• Apple Safari 5.0
• Google Chrome 4.0
• Microsoft Internet Explorer 7.

Adicionalmente, se necesita también una cuenta de correo electrónico de Gmail y el Java Web Start instalado en el ordenador.

El software para ejecutar los programas se descarga de este sitio, donde se elegirá una opción u otra dependiendo del sistema operativo que se esté usando. En el caso de Mac o Windows, se dispone del típico instalador para estos entornos.

Por otro lado, en sistemas GNU/Linux, Debian o derivados se proporcionan los paquetes deb de instalación o la opción de instalar directamente desde un archivo comprimido tar.gz5.

Nota importante: En el caso de instalar en un sistema Linux de 64 bits es necesario asegurarse de que están instalados algunos paquetes para que el software funcione. En 6 se puede ver la lista de paquetes necesarios.

Este software permitirá no solo ejecutar los programas en nuestro móvil o en el emulador, sino que dispone además de un intuitivo interfaz de depuración que ayuda a encontrar errores de programación. Para que App Inventor pueda comunicarse desde el ordenador con el móvil usando el cable USB es necesario ir a los ajustes del móvil ->Opciones de desarrollador y activar la opción “Depuración de USB”.

Como aclaración, es conveniente instalar este software, pero no necesario para hacer los programas. Si no se instala saldrá un mensaje de error cada vez que se carga la aplicación de desarrollo avisando de que no encuentra el entorno de emulación, pero se puede realizar el programa igualmente.

Disposición del ordenador

Si el ordenador está conectado a Internet, dispone del sistema operativo y el navegador adecuado y tiene Java instalado ya se puede empezar a programar. En el navegador hay que introducir la dirección “http://beta.appinventor.mit.edu/“. Entonces pedirá nuestros datos de acceso al correo de Gmail y, si es la primera vez que se accede, pedirá permiso para usar esa cuenta de correo. Una vez que se le concede el permiso se carga la siguiente pantalla:

Se puede apreciar que se trata de una simple vista del listado de proyectos hechos por el usuario. En App Inventor los proyectos se guardan “en la nube”, es decir, en los servidores del MIT. Por tanto, podemos abrir nuestros proyectos desde cualquier ordenador con conexión a Internet sin que tengamos que llevar los archivos de un lado a otro. En cualquier caso, este mismo interfaz da las opciones para descargar el archivo del proyecto si se quiere.

Haciendo clic sobre el botón New, pedirá el nombre que queramos darle al proyecto e inmediatamente se abrirá la siguiente ventana:

Se trata de la ventana del diseñador en la que se construye, mediante el ratón, sin necesidad de usar ningún lenguaje de programación, toda la interfaz gráfica que va a tener la aplicación. En ella se han marcado con números cada una de sus partes principales:

• Paleta

Esta contiene todos los elementos que podemos insertar en nuestra aplicación. Hay elementos gráficos como cuadros de texto, botones, lienzo de dibujo (Canvas) y elementos que no se ven en la pantalla del móvil. (Tales como base de datos “TinyDB”, acelerómetro, cámara de vídeo, etc).

• Viewer:

El visor de la pantalla, simula la apariencia visual que tendrá la aplicación en el móvil. Para añadir un elemento a la pantalla hay que arrastrarlo desde la paleta y soltarlo en el visor. Los elementos que no tengan visibilidad hay que arrastrarlos también al viewer y automáticamente se desplazarán debajo de él bajo el epígrafe “Non-visible components”.

• Components

muestra la lista de los componentes que se han colocado en el proyecto. Cualquier componente que haya sido arrastrado y soltado desde la paleta al visor aparecerá ahí. Si se quiere borrar alguno es en la lista de componentes donde está el botón que permite borrarlo.

• Media

Muestra las distintas imágenes y sonidos que estarán disponibles para el proyecto. Cualquier archivo de imagen o audio que se quiera usar en la aplicación hay que insertarlo usando este apartado para que esté disponible.

• Properties:

Cada vez que en el Viewer se seleccione un componente, en Properties aparecerán todos los detalles que se puedan cambiar de ese componente. Por ejemplo, al hacer clic sobre un componente TextBox se podrá cambiar en Properties su color, texto, fuente, etc. Para aquellos que hayan usado antes entornos de desarrollo del tipo de Visual Studio en Windows o Gambas en Linux le será muy familiar esta forma de trabajar.

Este es el entorno en el que se diseña la aplicación. Para poder realizar la programación es necesario hacer clic en el botón de la esquina superior derecha con el texto “Open the blocks editor”. Eso hará que el navegador avise de que va a descargar una aplicación que arrancará con Java Web Start. Mientras se descarga la aplicación aparecerá en la parte inferior de la pantalla un texto indicativo de la carga:

Al terminar la carga, si no está instalada la aplicación que permite la ejecución o simulación del móvil aparecerá este mensaje:

Tras aceptar el mensaje aparecerá por fin el editor de bloques de programación:

Esta es la pantalla que usaremos para hacer los programas que interaccionan con el interfaz gráfico. Se puede apreciar como está dividida en dos partes muy claras: un enorme lienzo en “blanco” a la derecha donde se irán arrastrando los bloques de programación y a la izquierda los menús que dan acceso a esos bloques.

El menú está formado por tres pestañas: Built-In, My Blocks y Advanced. Bajo cada una de ellas aparecen a su vez distintos menús que permitirán seleccionar los bloques disponibles en cada caso.

1. Built-In: contiene los bloques que componen el lenguaje de programación propiamente dicho, distribuidos en las secciones Definition, Text, Lists, Math, Logic, Control y Colors
2. My Blocks: ya se ha nombrado anteriormente y contendrá una lista de los elementos que hayan sido colocados en la pantalla Viewer del diseñador para poder acceder mediante el programa a sus propiedades y eventos
3. Advanced: es una pestaña que permite acceder de forma global a algunas propiedades comunes a todos los elementos que hemos colocado en el Viewer y que sean de un mismo tipo.

Por ejemplo, al colocar un par de botones aparecerá “Any Button” y se podrán cambiar ahí algunas propiedades que afecten simultáneamente a los todos los botones. En la parte superior derecha del editor de bloques de programación se pueden ver también los botones que dan acceso a conectar con un teléfono Android que estuviera enchufado al ordenador o lanzar el emulador.