Introducción al App Inventor

App Inventor es una herramienta que nos da la posibilidad de crear aplicaciones android sin tener que escribir ni usa sóla linea de código. Realmente está orientada a facilitar el aprendizaje. Su nacimiento se debe a Google, sin embargo, cuando empezaron a centrarse en unos pocos proyectos, App Inventor fue una de las herramientas afectadas que fue cerrada. Poco tiempo después el MIT anunciaba que se hacía cargo de continuar con su desarrollo. Y ahora tenemos ya la primera BETA.

App Inventor se compone de dos partes:

• La herramienta de diseño, en donde podremos establecer la interfaz de nuestra aplicación.

• El Editor de bloques: donde vamos a crearnos el comportamiento de nuestro programa.

Diseño.

La herramienta de diseño nos ofrece a través de un interfaz web una serie de controles que podremos añadir a nuestras pantallas. Estos controles no cubren todos los que trae android pero si que nos ofrece un conjunto lo suficientemente amplio como para poder crear aplicaciones ricas.

Vamos a echar un vistazo a los principales controles de cada categoría.

• Basic: aquí tenemos los controles más básicos y que más usaremos, tales como botones, checkboxex, imágenes, cajas de texto, etc. Destaca el TinyDB que nos permite almacenar de forma persistente valores en nuestro teléfono.

• Media: tenemos acceso a la cámara de fotos, podremos crearnos una galería de imágenes con (ImagePicker), reproducir un audio o video (player) .

• Animation: podemos mover un sprite redondo en nuestro canvas (ball) o indicar las imágenes que queremos que sean nuestros sprites y que podremos mover, arrastrando y tocando (ImageSprite)

• Social: podemos insertar un botón que al pulsarlo nos muestre nuestros contactos para que podamos seleccionar uno (ContactPicker), una caja de texto para insertar un e-mail y que será autocompletado con los contactos del teéfono (EmailPicker), nos permite realizar llamadas con PhoneCall o establecer comunicación con twitter con lo que podremos entre otras cosas indicar si el estado del usuario es logueado, enviar un mensaje a un usuario específico, obtener los mensajes más recientes, seguir a un usuario, etc.

• Sensors: Nos permite acceder a los sensores del teléfono. En esta versión beta sólo tenemos acceso a los más habituales, el acelerómetro, el sensor de localización ya sea en base al gps o localización por wifi y el sensor de orientazión.

• Screen Arrangement: aquí están los layouts. Por ahora sólo disponemos de los más básicos. Tenemos el layout horizontal y vertical y un layout de tipo tabla para poder realizar diseños más complicados.

• LEGO MINDSTORMS: si, lo que estáis leyendo, controles para poder acceder a un robot LEGO.

• Other Stuff: aquí nos encontraremos con un componente que nos permite usar un StartActivity, el componente BarcodeScanner para leer un código de barras, podremos crear una notificación, el componente TextToSpeech para que el móvil nos lea un texto, acceso a la web, etc.

El editor de bloques.

Hasta ahora sólo hemos diseñado nuestra interfaz gráfica. Es en el editor de bloques donde vamos a crear nuestro código, sólo que en base a componentes gráficos, sin tener que escribir ni una sóla línea de código.
Para ello, tenemos que utilizar la opción ”open blocks editor”, la cual nos va a descargar un fichero AppInventorForAndroidCodeblocks.jnlp encargado de arrancar la Java Web Start.

En el editor de bloques iremos indicando cómo se comportan los eventos, o qué valores vamos a asignar a los atributos de nuestros componentes.

La forma que han elegido para trabajar es como si tuviésemos piezas de un puzzle que tenemos que unir. Es una forma muy intuitiva, ya que viendo la forma de la pieza que tenemos y la que queremos añadir, vemos, si es posible o no que estás interactúen.

Tenemos tres pestañas:

• Butilt-In: aquí vamos a poder implementar todas las características sobre la lógica del programa, podremos añadir variables, trabajar con cadenas de texto, crearnos listas y gestionarlas, realizar operaciones lógicas y matemáticas, insertar estructuras de control y utilizar colores.

• My Blocks: aquí van a aparecer todos los componentes que hemos añadido en la interfaz gráfica. Si entramos en alguno de ellos, veremos todos los eventos que puedes asignarse a ese componente así como los atributos que podemos modificar.

• Advanced: se muestran todos los tipos de controles pero de manera genérica. Es decir, no vamos a tener varios botones, sino un componente “algún botón”, que nos permitirá trabajar con todos los eventos, métodos y atributos de nuestros botones.

Construir una aplicación de prueba.

El MIT ha puesto a nuestra disposición una serie de tutoriales muy bien explicados y organizados por dificultad, a través de los cuáles vamos a ver todas las posibilidades que nos brinda el App Inventor.

Vamos a ver uno de ellos, el más fácil para ver como enlazar todo lo que hemos comentado.

En la aplicación vamos a permitir que el usuario pueda dibujar líneas de colores y círculos sobre una imagen. Se podrá seleccionar el color que queremos aplicar.

Para ello, necesitamos insertar en la pantalla tres botones. Para que se muestren con una orienzación horizontal, seleccionaremos el Screen Arrangement, HorizontalArragement. Al añadir los botones, podemos modificar una serie de atributos, como el color de fondo, si tiene que aparecer activado o desactivado, el tipo de letra, el texto que va a mostrar, etc. Para asignarle el nombre, debemos utilizar el botón Rename de la sección Components, ya que no está dentro de las propiedades de los componentes.

Ahora añadiremos un cavas, en el que pondremos una imagen de fondo y debajo del canvas otro botón para limpiar el canvas.

Como veis, la parte de la interfaz no tiene excesiva dificultad.

Tenemos que abrir el editor de código para comenzar a crear nuestro “código”.

Queremos, que al pulsar un botón de color podamos dibujar líneas en nuestro canvas del color del botón. En la pestaña My Blocks están todos los componentes que hemos añadido. Al entrar en cualquiera de los botones vemos los eventos que podemos manejar, por ejemplo, Click, GotFocus, LongClick, etc y los atributos del botón que vamos a pode modificar o acceder a sus valores, como BackgroundColor o setBackgroundColor. Cuando modificamos un valor, el atributo nos indica que se va a hacer, set ButtonBlue.BackGroundColor to. Cuando añadamos este método, tendremos que unir una pieza de un color.

Siguiendo con el ejemplo, añadiremos el evento click. Se añade una pieza de puzzle en la que la estructura es “cuando hacemos click en el botón” hay que … Para establecer que el color seleccionado en el canvas es el que corresponde con el botón, vamos al componente canvas y añadimos el método “set Canvas.PaintColor to”. Ahora tenemos que completar esta pieza con el color que queremos dibujar. Los colores están en la pestaña Built-in. Seleccionamos el que corresponda y lo añadimos.

Debemos repetir estos pasos para los otros tres colores.

Vamos a dotar de funcionalidad al botón que limpia la pantalla. Al igual que con los otros botones, añadimos el evento click y llamamos al método Clear de Canvas.

Ahora nos falta dar funcionalidad a nuestro canvas. Vamos a manejar dos eventos; qué tiene que suceder cuando arrastremos el dedo o cuando lo mantengamos presionado en una misma posición.

Si arrastramos el dedo queremos que se dibuje una línea con el color que hemos seleccionado en el cambas. Para ello tendremos que añadir el evento Dragged y juntaremos la pieza DrawLine, para que se dibuje una línea. El evento Dragged tiene siete argumentos:
- La posición de nuestro dedo antes de empezar a arrastrarle.
- La actual posición de nuestro dedo.
- La posición inmediatamente previa de nuestro dedo.
- Un spritte.

El método DrawLine nos pide que le indiquemos las posiciones entre las que tiene que trazar las líneas. Para poder añadirlas tenemos que ir a My Definitions, donde tenemos todas nuestros valores. Añadiremos la posición previa y la actual.

Para poder dibujar círculos cuando presionemos la pantalla, seleccionaremos el evento Touched y llamaremos al método DrawCircle. Los parámetros que tenemos que pasarle son la posición actual (la encontramos en My Definitions) y el radio del círculo que queremos dibujar. Este valor no nos es devuelto por ningún evento ni propiedad, tenemos que asignárselo nosotros mismos. Para ello, picaremos en cualquier parte limpia de la pantalla, nos aparecerán botones con las opciones de Built-in. Seleccionamos Math y le decimos que queremos insertar un número. Para cambiar el valor simplemento picamos el valor actual y se activa para que añadamos un 5.

Como habéis visto, en la interfaz gráfica hemos añadido dos botones para el tamaño de los puntos que se dibujarán cuando dejemos presionada la pantalla. De esta forma, podemos ver como trabajar con variables. Nos crearemos dos variables globales, con el tamaño de los puntos grandes y pequeños. Para ello seleccionaremos el componente variable del Built-in en Definition. Le indicamos que la variable va a ser de tipo numérica y el valor por defecto que va a tener.

También necesitamos otra variable para recoger el valor que hemos seleccionado. En el evento Click de los botones será donde hagamos la asignación.

Y finalmente, sólo tendremos que sustituir en el método DrawCircle, el parámetro que recoge el tamaño de los puntos, que lo habíamos dejado como valor fijo, por nuestra variable.

Ya tenemos la aplicación desarrollado. Ahora podemos probarla tanto en un emulador como en nuestro dispositivo.