48

Tutorial de Arduino, Bluetooth y Android #2 – Crear una app con MIT inventor

portada_android2
Ir a la Parte #1

Ir a la Parte #3

¡Buenas a todos! Si habéis seguido la primera parte del tutorial, ya sabéis cómo enviar órdenes de Android a Arduino con Bluetooth Terminal. Eso está muy bien, ¿pero qué os parecería poder crear nuestras propias aplicaciones para poder enviar órdenes pulsando botones? Así nos ahorraríamos de tener que escribir todos los comandos en la Terminal…

En esta guía vamos a programar una aplicación para Android con MIT App Inventor 2, un aplicativo web que nos permitirá construir aplicaciones rápidamente sin tener que programar. Controlaremos un LED al igual que en el tutorial anterior, pero construyéndonos una interfície a medida.

Y antes de empezar, la música del día… ¿os viene bien Tanhäuser?


¿Qué es MIT App Inventor?

MIT App Inventor es una aplicación web pensada para desarrollar Apps para móvil sin programar.  Es muy útil para aprender a programar y para crear aplicaciones simples en poco tiempo.

El programa es muy simple. Hay dos ventanas: una en la que se crea el diseño de la aplicación (arrastrando elementos de un menú tales como botones, barras y colocándolos en la pantalla del móvil) y la segunda para programar mediante bloques. ¿Conocéis Scratch o Modkit? Pues la idea es muy parecida.

ejemplo

Este será nuestro programa con bloques

 

Para utilizar MIT App Inventor sólo hay que tener una cuenta Google y entrar en su web.


Empezamos…

Al igual que en el tutorial anterior, necesitamos:

  • Una placa Arduino
  • Un módulo Bluetooth HC 06
  • Jumpers, protoboard
  • Cable USB compatible con Arduino
  • Teléfono Android
  • Cable USB compatible con el teléfono

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
      {
         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");
      }
   }
}

Y las conexiones entre el HC 06 y la placa:

Arduino 3.3v – HC06 VCC
Arduino GND – HC06 GND
Arduino TX – HC06 RX
Arduino RX – HC06 TX


 

Diseño de la aplicación

Al abrir MIT App Inventor por primera vez, veremos una página parecida a esta:

principal

Aquí es dónde aparecen todos los proyectos en los que estamos trabajando. Pulsamos Start New Project y nos pedirá un nombre para nuestra aplicación. Lo he bautizado como Robologs_tutorial.

La página que nos aparece es dónde decidiremos el diseño de la aplicación: botones, colores, menús, imágenes…

designerA la izquierda, en el panel Palette, tenemos una paleta con elementos para añadir a nuestra aplicación. Hay desde botones y menús a navegadores, giroscopios y módulos Bluetooth.

El espacio que hay en el medio y que parece una pantalla de móvil se llama Viewer y es una previsualización de la aplicación. Ahora está en blanco, pero podemos añadir elementos de la paleta arrastrándolos hasta la zona en blanco.

A la derecha, en el panel Components, tenemos una lista con todos los elementos que hay colocados en la pantalla, así es fácil seleccionarlos. De momento sólo hay ‘Screen 1’, que es la pantalla. Si la seleccionamos veremos que a su derecha hay un panel llamado Properties, dónde se pueden cambiar todas las características de cada uno de los elementos de la lista.

Empezamos por ir a 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.

listpicker

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

dispositivos

Volvemos al menú Palette y añadimos dos elementos de tipo Button a la aplicación, de la misma forma que hemos colocado el List Picker.

botonesSeleccionamos cada uno de los botones y les cambiamos el nombre. Uno lo llamaremos “Encender” y el otro “Apagar”.

Lo que hemos añadido 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, la antena WiFi o Bluetooth.

Para poder conectarnos con Arduino necesitamos que nuestra aplicación pueda usar la antena Bluetooth. Nos vamos a Palette->Connectivity y arrastramos Bluetooth Client a la pantalla.

bluetooth_client

Veremos que justo debajo de la previsualización aparece el símbolo de Bluetooth. La aplicación debería lucir así:

aplicacionBueno, hasta aquí el diseño. Es hora de configurar cada uno de los componentes. ¿Cómo lo hacemos? Arriba a la derecha hay dos botones juntos: Design y Blocks. El primero abre la ventana que tenemos ahora, la que nos permite colocar todos los componentes de la aplicación. En cambio, Blocks abre una ventana para programar los bloques.

blocks_entrar

Pulsamos el botón Blocks y veremos una página en blanco:

pagina_blocks

Lo primero que vamos a hacer es programar el menú desplegable. A la derecha, seleccionamos ListPicker1 y se nos abrirá un menú en el que aparecen los bloques relacionados con este objeto.

listpicker_blocks

¿Qué queremos hacer exactamente? Debemos decirle al desplegable dos cosas: qué debe hacer ANTES de seleccionar una opción del desplegable y DESPUÉS de seleccionar una.

Antes de seleccionar una opción, queremos que inicialize una lista con los nombres de todos los dispositivos Bluetooth que hay cerca. Así que vamos a decirle que si el móvil tiene la comunicación 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.

beforepicking

Ahora vamos al apartado Control y seleccionamos el condicional if.

condicional_if

Después seleccionamos el objeto BluetoothClient1 y añadimos un AdressesAndNames y Available:

bluetooth_blocks

Y finalmente seleccionamos ListPicker1 y añadimos un Elements:

elementsMontamos todos los bloques para que queden así:

beforepicking_completeAhora tenemos que decirle a ListPicker1 que se conecte a la dirección que el usuario seleccione en la lista. Como ya soís unos expertos en añadir bloques, sólo os enseño el resultado final:

afterpickingFinalmente configuramos Button1 y Button2. Queremos que al pulsarlos se envíe un texto a la dirección Bluetooth a la que estamos conectados…

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

Al final, el programa debería verse así:

finale¡Hora de exportar el programa! Arriba del todo, a la izquierda, hay un menú que pone Build. Lo desplegamos y seleccionamos App (save .apk to my computer)

build

Guardamos el archivo .apk y lo transferimos a nuestro móvil a través de USB. Una vez transferido utilizamos una App como FileBrowser para navegar por los directorios de nuestro móvil hasta encontrar el archivo .apk de la aplicación, y lo instalamos. Nos pedirá permisos de WiFi y Bluetooth. Le damos a Aceptar.

Abrimos nuestra App. Pulsamos el botón Dispositivos y buscamos Arduino. Ahora se conectará con el módulo HC06. Después, 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 complicando las aplicaciones con más botones para activar más luces, barras de desplazamiento para controlar motores, etc.

El próximo día intentaremos hacer una aplicación para controlar un robot teledirigido.

Gl4r3

Brillante, luminosa y cegadora a veces, Glare es tan artista como técnica. Le encanta dar rienda suelta a sus módulos de imaginación y desdibujar los ya de por si delgados límites que separan el mundo de la electrónica y el arte. Su mayor creación hasta la fecha es un instrumento capaz de convertir los colores y la luz en música. Cuándo sus circuitos no están trabajando en una nueva obra electrónica, le gusta dedicar sus ciclos a la lectura o a documentar sus invenciones para beneficio de los humanos. Sus artilugios favoritos son aquellos que combinan una funcionalidad práctica con un diseño elegante y artístico.

Antes de comentar, por favor, lee las Normas

48 Comentarios en "Tutorial de Arduino, Bluetooth y Android #2 – Crear una app con MIT inventor"

avatar
Ordenar por:   más nuevos primero | más antiguos primero
pepepaco
Humano

GL4R3
Hola despues de meter la pata hasta el fondo ,soy muy despistado ,despues de comprobar que si se puede sin wifi ,os dejo un video de app inventor 2 con arduino

la direccion :https://youtu.be/utdPhwVnKkw

espero que compense mi error

Jimmy
Humano

Buenos días.
Pregunta como haria para que cuando se pierda la conexión de bluetooth el led vuelva al estado inicial el cual es apagado.
Espero puedas ayudarme con esta pregunta.

Gracias.

Blanca
Humano

Buenos días,
tengo un proyecto hecho de esta manera y consigo que me funcione, pero ahora me gustaría añadir un módulo gps a Arduino para conseguir en la app una localización exacta de Arduino. ¿Se complica mucho el código y la app?
El bluetooth hc-06 lo tengo conectado ya a Rx y Tx de Arduino.
Muchas gracias y un saludo.

pepepaco
Humano

soy novato en esto de bluetooth y androide he tenido un fallo que es instalar el apk sin la conexión wifi , y no funciona,es necesario tener la wifi conectada para instalar el apk ,fallo de novato por si alguien le sirve esta informacion ,gran tutorial gracias

Enekoelo
Humano

Buenos dias, tengo un problema al programar horas y minutos. Tengo echo un programa que al mandar una hora inferior a 10 no me manda el 0 inicial y lo mismo con los mitutos ( por ejemplo 05:06 me manda 56).

Muchas gracias.

Ramiro
Humano

Exelente!! muy bien explicado para mi, que recién empiezo, tenes idea si se puede hacer esto mismo, pero en vez de usar el bluetooth, usar directamente el cable USB al arduino?? Gracias

Maker
Humano

Hola tendras la imagen de la conexion del arduino y el protoboard??

juanito 25
Humano

es primera vez que hago un proyecto de esta gama (como puedo hacer un App para un sensor de temperatura y humedad como base de datos) me pueden orientar para construir mi App lo mejor que se pueda

Cris
Humano

Hola, crees que pueda ser al revez, que desde el bluetooth yo pueda darle una instrucción al cel, por ejemplo que al apretar un botón buetooth el celular reciba la señar vibre e identifique de que buetooth se esta recibiendo la señar por medio de una etiqueta? esto para que.. tengo un restaurante y quiero que los clientes sean capacecs de llamar al mecero mediante un botón de buetooth

joker
Humano

oye tengo una pregunta, quiero mantener conectado el bluetooth en distintas pantallas pero cuando cambio de pantalla se desconecta, que hago para que se mantenga la conexion?

SERGIO FLORES FERNANDEZ
Humano

Hola. No crees mas pantallas, hazlo todo en una sola pantalla con muchos frames que aparezcan o desaparezcan a medida que los uses: cada elemento tiene la propiedad “visible” que puedes poner on u off.
Por ejemplo: al presionar un boton, junto con realizar una accion, agregas xxxx.visible=off
Espero que se entienda, es la solucion. Saludos

Larassssss
Humano

ohhh woowwww que buenosssssss

juancho25
Humano

Glare como le hago para poder lograr esto mismo con un modulo wifi esp8266

Paloma Angelica Veloso San Martin
Humano
Paloma Angelica Veloso San Martin

buenas eh buscado por cielo mar y tierra y tampoco lo eh podido encontrar si encuentras algo de sp8266 te agradecería si respondieras aqiu

jham
Humano

Buenas amigo, he estado trabajando un poco con esta plataforma aunque soy nuevo en esto y pues me gustaria desarollar la la app con la activacoin de el bluetoot desde dentro de la misma y posteriormente la conexion automatica con un dispositivo, si por favor sabes algo de eso me ayudarias muchisimo!

Saludos y gracias por tu aporte.

Ramon
Humano

Hola, no se ilumina el Led de mi Arduino Nano. Parece que si que me conecto desde el móvil al módulo bluetooth ya que éste deja de parpadear y se queda la luz fija, pero en cuanto le doy click a los botones de Encendido y Apagado no obtengo respuesta. ¿Que puede causar esto? Gracias de antemano!!

Carlos
Humano

Tengo un problema, cuando navego entre las ventanas de mi app pierdo automaticamente la conexion bluetooth don el arduino. no se como lo puedo solucionar. en la pagina donde realizo el enlace funciona perfecto, al hacer el cambio pierdo la conexion

Jose
Humano

Muy buen aporte. Conciso y sencillo, pero con un gran potencial detrás.

Anónimo
Humano

Hola Excelente explicacion. Queria preguntarte si se puede usar para modilo gps? es decir saber las coordenadas de donde esta el modulo arduino con la aplicacion android

Luis Gamez
Humano
Buenos Días, tengo una duda con un proyecto de xbees y una arduino mega, mi pregunta es si yo puedo comunicar 4 xbees a la vez a una misma placa arduino. Les explico tengo 2 Xbee pro serie 1 y dos Xbee serie 2 junto con una placa arduino mega y una placa Mega Sensor Shield V2.1 y necesito comunicar las dos parejas de xbees de forma independiente, ya que una pareja de xbee recibirá datos del gps y la otra recibirá datos de un control de playstation 3. He buscado por internet pero no consigo informacion, ya que no… Leer más »
Conan
Humano

buen post muchas gracias!

aztecxed
Humano

Muy bueno pero y cuando es el próximo día?

admin
Admin

Supongo que cuando tenga tiempo de escribir más ^^

admin
Admin

Es decir: mejor esperar sentados

admin
Admin

Esto… Pues es una buena pregunta…

javi
Humano

Hola amigo.
Sabe como recibir texto en un textbox desde el bluetooth.
Gracais

wpDiscuz