Tras una introducción en el artículo pasado, en esta ocasión vamos a explicar cómo crear nuestra primera app para móviles Android, con la que conseguiremos encender y apagar un led.
Para crear apps sencillas utilizaremos AppInventor (http://appinventor.mit.edu/). AppInventor es un entorno web desarrollado primero por Google y después por el MIT, muy similar a Scratch. La aplicación se crea en dos fases. En primer lugar realizaremos el diseño gráfico de nuestra app, y después, podremos programar en un entorno por bloques cada uno de los componentes incluidos.
Podemos añadir muchos componentes a nuestros programas: botones, cajas de texto, imágenes, notificadores, cajas para introducir passwords, checkboxes, etc.. Todo lo que os podéis encontrar en cualquier aplicación de Android. Una vez añadidos los componentes que necesitemos a nuestra pantalla principal, tendremos que programar eventos para estos componentes. Por ejemplo, un componente imagen llevará la instrucción asociada “cargar imagen”, y un botón tendrá entre otras muchas la instrucción asociada para saber si está siendo pulsado o no.
Pero vayamos por partes. Lo que nos encontramos al hacer login con una cuenta gmail es la zona de creación de proyectos:
Desde el menú PROJECTS crearemos nuestro primer proyecto y llegaremos a la zona de diseño de la app, donde tendremos que añadir los componentes que necesitemos para nuestro programa. A la izquierda, en la paleta, podemos encontrar en la zona User Interface, todos los componentes que podemos añadir.
A la derecha nos encontraremos la zona «components» donde veremos todos los que hemos añadido, y la zona «Propierties» para poder configurar cada uno de estos componentes.
Lo primero que tenemos que añadir a nuestra zona de diseño en un «Layout«. Los layouts se utilizan para agrupar componentes de forma horizontal, o vertical. Nosotros hemos añadido 6 layouts para poner todos nuestros componentes de una forma organizada.
Y ya comenzamos añadiendo componentes. En primer lugar añadimos un elemento ListPicker, que lo utilizaremos para poder ofrecer la lista de dispositivos bluetooths que tenemos previamente vinculados a nuestro smartphone, para poder elegir el que tenemos conectado a nuestro Arduino.
También añadiremos los siguientes botones:
- Conectar: para seleccionar el dispositivo bluetooth conectado a Arduino
- Salir: para cerrar la aplicación
- Encender y apagar: para nuestro led
Añadiremos una caja de texto con el texto “LED” que pondrá su color a verde cuando pulsemos el botón encender y a rojo cuando pulsemos apagar.
Subiremos también la imagen que vamos a utilizar de fondo de pantalla, y por último, un componente invisible (no se ve en la app a diferencia de botones o cajas de texto) para poder programar el bluetooth
La parte algo más complicada es la de programar estos componentes. Para ello tendremos que ir a la zona Blocks y comenzar a programar componentes.
A continuación podéis ver una vista completa de nuestra aplicación, donde se observa que tampoco hay tanta parte de programación:
A la izquierda podemos observa todos los componentes añadidos. Pinchando en cada uno de ellos nos mostrará todas las instrucciones disponibles. Cada componente tendrá instrucciones diferentes.
Por ejemplo, el botón “Encender” cuyo nombre de componente es «ON», tiene asociado un evento denominado WHEN Encender.Click, que se encarga de comprobar si dicho botón ha sido pulsado. En tal caso, programaremos las siguientes acciones:
- envío la letra “a” por el bluetooth para que lo reciba el Arduino
- deshabilitar el botón ON y habilitar botón OFF
- poner en verde el texto de LED
El botón OFF tiene la programación contraria como se puede observar. El botón SALIR tiene el mismo tipo de evento, pero cuando se pulsa se ejecutará la instrucción necesaria para cerrar la aplicación.
Por último, nos queda la parte quizás más compleja de entender, pero necesaria para establecer la conexión bluetooth desde nuestro móvil hacia el bluetooth que colocaremos en el montaje de Arduino. Tenemos dos principales eventos:
- beforePicking: que básicamente ponemos la instrucciones necesarias para cuando pulsamos en «conectar» nos salga la típica pantalla de dispositivos bluetooth emparejados previamente en nuestro smartphone, y así poder seleccionar nuestro HC-06 de la forma que ya explicamos en el anterior artículo.
- afterPicking: que en primer lugar situamos las instrucciones para conectar el bluetooth según la opción elegida en el anterior paso, y de propina hacemos que cambie el color del botón para que quede claro que se ha producido la conexión de forma exitosa.
Y hasta aquí la parte de programación en AppInventor.
En la parte de Arduino, en cuanto al montaje sólo tenemos que montar el bluetooth, el led y su resistencia.
En el código fuente, estaremos leyendo del puerto serie que utiliza el bluetooth para comprobar si la app nos envía una “a” para encender el led, y una “b” para apagar dicho led.
A continuación os compartimos el código fuente bien comentado para que sobre todo se entienda la parte de leer desde el bluetooth:
#include <SoftwareSerial.h>
SoftwareSerial BT(10,11); // RX,TX
char dato=0;
void setup()
{
pinMode(13,OUTPUT);//Seleccionamos el pin 13 como salida
Serial.begin(9600);
BT.begin(9600);//Inicializamos el valor de transmisión.
digitalWrite(13,LOW); //Inicialmente tenemos el led apagado.
}
void loop()
{
if (BT.available() >0)// Mientras el puerto serie con el que nos comunicamos por bluetooth esté disponible... haremos todo lo que viene a continuación
{
dato= BT.read(); //Leemos lo que esté enviando la app de nuestro móvil a través del bluetooth
Serial.println(dato);
switch(dato)
{
case 'a': //Si recibimos una a, entonces encendemos LED:
{
Serial.println("recibiendo unos");
digitalWrite(13,HIGH);
break;
}
case 'b': //Si es una b apagamos led
{
digitalWrite(13,LOW);
break;
}
}
}
}
Entendemos que para una primera aproximación, no es sencillo entender todo ésto sólo leyendo este artículo, así que Javier Lucia os explicará con mucho detalle como podéis hacer este primer proyecto con apps y Arduino.
Os dejamos compartido también el proyecto APPINVENTOR para que lo podáis importar y experimentar con el. Sólo tenéis que descargarlo y desde la zona de proyectos desde el menú PROJECTS, elegir la opción IMPORT AIA PROJECT FROM MY COMPUTER.
¡Nos vemos en quince días aprendices robóticos!