EPIS UNPRG

Tutorial App Inventor, para comunicar Arduino con celular Android

Crear una app con MIT inventor

En esta gua vamos a programar una aplicacin para Android con MIT App Inventor 2, un
aplicativo web que permitir construir aplicaciones rpidamente sin tener que programar.
Controlaremos un LED construyndo una interface a medida.

Qu es MIT App Inventor?

MIT App Inventor es una aplicacin web pensada para desarrollar Apps para celular sin
programar. Es muy til para aprender a programar y crear aplicaciones simples en poco
tiempo.

El programa tiene dos ventanas:

Una en la que se crea el diseo de la aplicacin (arrastrando elementos de un

men tales como botones, barras y colocndolos en la pantalla del celular)
La segunda para programar mediante bloques. Tipo Scratch o Modkit.

Nuestro programa con bloques

Para utilizar MIT App Inventor debe tener una cuenta Google y entrar en su web.

Bernardo Nez bnunez@unprg.edu.pe

1
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Requerimientos:
Placa Arduino

Mdulo Bluetooth HC 06

Jumpers, protoboard

Cable USB compatible con Arduino

Telfono Android

Poner una resistencia de 300 ohm en serie con el diodo LED

Sketch para Arduino

El programa para Arduino es el mismo que en el tutorial anterior:
void setup()
{
Serial.begin(9600); //Iniciar el serial
pinMode(13, OUTPUT); //Establecer el pin 13 como salida
}

void loop()
{
if(Serial.available()>=1)
{
char entrada = Serial.read(); //Leer un caracter

if(entrada == 'h' or entrada == 'H') //Si es 'H', encender el LED

{

Bernardo Nez bnunez@unprg.edu.pe

2
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

digitalWrite(13, HIGH);
Serial.println("LED encendido");
}

else if(entrada == 'l' or entrada == 'L') //Si es 'L', apagar el LED

{
digitalWrite(13, LOW);
Serial.println("LED apagado");
}

else if(entrada == 'i' or entrada == 'I') //Si es 'I', mostrar un mensaje

de ayuda
{
Serial.println("Comandos:n (i) - abrir esta listan (h)- encender ledn
(l) - apagar ledn");
}
}
}

Usar la consola serial del IDE, para monitorear la salida de los mensajes por el puerto serial

Diseo de la aplicacin
Al abrir MIT App Inventor por primera vez, se ve una pgina donde aparecen todos los
proyectos en los que est trabajando.

Pulsar Start New Project y dar un nombre a la aplicacin.

A la izquierda, en el panel Palette, hay una paleta con elementos para aadir a la aplicacin
(botones y mens a navegadores, giroscopios y mdulos Bluetooth).

El espacio en el medio y que parece una pantalla de celular, es el Viewer, una

previsualizacin de la aplicacin. Inicia en blanco, pero se agregan elementos de la paleta
arrastrndolos hasta la zona en blanco.

A la derecha, en el panel Components, hay una lista con los elementos colocados en la
pantalla, as es fcil seleccionarlos.

Bernardo Nez bnunez@unprg.edu.pe

3
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Aparece Screen 1, que es la pantalla. Si la seleccionamos vemos a la derecha un panel

llamado Properties, dnde se pueden cambiar todas las caractersticas de cada uno de los
elementos de la lista.

Empezamos en Palette y buscamos el elemento List Picker. Se trata de men desplegable,

que programaremos para que muestre los dispositivos Bluetooth cercanos y se conecte a
uno. Lo arrastramos hasta la pantalla.

A la derecha, en el men Properties, podemos cambiar el texto del List Picker. Vamos al
campoText y escribimos Dispositivos BT.

Volvemos al men Palette y agregamos dos elementos de tipo Button , de la misma forma
que hemos colocado el List Picker.

Seleccionamos cada uno de los botones y les cambiamos el nombre. Uno lo llamaremos
ON y el otro OFF.

Lo que hemos aadido hasta ahora son componentes visibles. El usuario puede verlos e
interactuar con ellos. Pero hay otro tipo de componentes, llamados non-visible components,
que sirven para activar algunas funcionalidades (como el Giroscopio, el WiFi, Bluetooth,
msica, etc).

Para conectarnos con Arduino necesitamos que la aplicacin pueda usar la conexin
Bluetooth.

Bernardo Nez bnunez@unprg.edu.pe

4
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Vamos a Palette->Connectivity y arrastramos Bluetooth Client a la pantalla.

Vemos que debajo de la previsualizacin aparece el smbolo de Bluetooth.

Ya tenemos el diseo.

Ahora configuramos cada uno de los componentes.

En la esquina superior derecha hay dos botones: Design y Blocks. El primero abre la
ventana que nos permite colocar todos los componentes de la aplicacin. En cambio,
Blocks abre una ventana para programar los bloques.

Bernardo Nez bnunez@unprg.edu.pe

5
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Pulsamos el botn Blocks y veremos una pgina en blanco:

Lo primero que hacemos es programar el men desplegable. A la derecha, seleccionamos

ListPicker1 y se abre un men en el que aparecen los bloques relacionados con este objeto.

Qu queremos hacer exactamente? Debemos decirle al desplegable dos cosas: qu debe

hacer ANTES de seleccionar una opcin del desplegable y DESPUS de seleccionar una.

Antes de seleccionar una opcin, queremos que inicialize una lista con los nombres de todos
los dispositivos Bluetooth que hay cerca. Entonces vamos a decirle que si el celular tiene la
comunicacin Bluetooth activada, ListPicker1 establezca los nombres de los dispositivos
cercanos como elementos de la lista.

Dentro del men de bloques de ListPicker1 arrastramos .BeforePicking al espacio en

blanco.

Bernardo Nez bnunez@unprg.edu.pe

6
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Ahora vamos al apartado Control ,y seleccionamos el condicional if.

Despus seleccionamos el objeto BluetoothClient1 y aadimos

un AdressesAndNames yAvailable:

Bernardo Nez bnunez@unprg.edu.pe

7
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Y finalmente seleccionamos ListPicker1 y aadimos un Elements:

Montamos todos los bloques para que queden as:

Ahora tenemos que decirle a ListPicker1 lo que har despus, lo que es conectarse a la
direccin que el usuario seleccione en la lista. Y quedaremos as:

Finalmente configuramos Button1 y Button2, para que al pulsarlos se enve un texto a la

direccin Bluetooth a la que estamos conectados

Bernardo Nez bnunez@unprg.edu.pe

8
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Los bloques rojos que hay al final sirven para escribir texto. Se encuentran en el
apartado Text del men Blocks.

Al final, el programa debera verse as:

Momento de exportar el programa, en la parte superior opcin Build del men,

seleccionar App (save .apk to my computer)

Guardamos el archivo .apk y lo cargamos al celular. Luego lo instalamos. Nos pedir

permisos de WiFi y Bluetooth. Le damos a Aceptar.

Bernardo Nez bnunez@unprg.edu.pe

9
EPIS UNPRG
Tutorial App Inventor, para comunicar Arduino con celular Android

Abrimos nuestra App. Pulsamos el botn Dispositivos y buscamos Arduino. Ahora se

conectar con el mdulo HC06 (la primera vez que se comunica Android con el mdulo blue
tooth, va a pedir contrasea, escribir 1234, o caso contrario 0000). Despus, podremos
encender y apagar el LED 13 con los otros dos botones.

En resumen: ya conocemos una forma de construir aplicaciones para controlar Arduino. A

partir de aqu podemos ir haciendo aplicaciones con ms botones para activar ms luces,
barras de desplazamiento para controlar motores, etc.

Sitios sugeridos:

http://appinventor.mit.edu/explore/get-started.html

http://appinventor.mit.edu/explore/ai2/tutorials.html

Bernardo Nez bnunez@unprg.edu.pe

1
0