fbpixel
Etiquetas: , , , , ,

Aprende cómo crear una aplicación para Android de manera muy simple usando App Inventor 2.

En los campos de la robótica y los objetos conectados, una de las características más interesantes de implementar es el control remoto de un proyecto electrónico. Ya sea para mostrar las mediciones desde tu casa o para conducir un dron, una posible solución es desarrollar una aplicación de teléfono inteligente y comunicarse con un microcontrolador mediante una conexión Bluetooth. Esta aplicación se puede crear rápidamente usando el software en línea de MIT, App Inventor 2 (AI2).

Material

  • Ordenador
  • Smartphone Android con una aplicación de lector de código QR
  • Arduino UNO
  • Bluetooth HC-06
  • Cable Dupont F/M

Creación de la aplicación AI2

En este ejemplo, creamos una aplicación para habilitar una función (ON / OFF) y recuperar una medición de sensor de una placa Arduino. Este tutorial se puede aplicar para muchas otras aplicaciones.
Registrate en el sitio web App Inventor 2.

Crear un nuevo proyecto myApp

start-new-project Crear una aplicación con App Inventor 2

Aparece la pantalla de diseño del proyecto.

new-project-designer-screen Crear una aplicación con App Inventor 2

Configuracion de la aplicación AI2

Para crear el diseño de nuestra aplicación, utilizamos los objetos disponibles en las pestañas en el menú desplegable a la izquierda de la pantalla y modificamos sus parámetros que aparecen a la derecha de la pantalla.

En la interfaz del usuario, agregue un objeto de etiqueta y cámbiele el nombre a titleLbl. Contendrá el título de la aplicación myApp.

project-title-label Crear una aplicación con App Inventor 2
project-bluetooth-canvas Crear una aplicación con App Inventor 2

En el diseño, agregue un objeto VerticalArrangement que alinee los objetos verticalmente.

En el objeto VerticalArrangement, coloque una etiqueta btStatusLbl y luego un ListPicker btBtn que se usará para administrar la conexión Bluetooth.

project-bluetooth-lbl-btn Crear una aplicación con App Inventor 2

Luego, agregue una etiqueta sensorLbl que contendrá el valor recibido de la placa Arduino.

project-sensor-lbl Crear una aplicación con App Inventor 2

Agregue un arreglo horizontal que le permita organizar y alinear objetos horizontalmente y que contendrá los botones para activar la función Arduino.

project-command-canvas Crear una aplicación con App Inventor 2

En el arreglo horizontal, agregue dos botones onBtn y offBtn.

project-on-off-btn Crear una aplicación con App Inventor 2

Finalmente, en Conectividad, agregue un objeto BluetoothClient que nos permita interactuar con el dispositivo Bluetooth.

project-bluetooth-client Crear una aplicación con App Inventor 2

Y en Sensor, agregue dos objetos Reloj, que recibirán y enviarán datos en un intervalo de tiempo regular.

project-clock Crear una aplicación con App Inventor 2

Puede personalizar su aplicación a su gusto utilizando diferentes colores, fuentes o imágenes.

project-designer-end Crear una aplicación con App Inventor 2

Programación de la Aplicación AI2

Para programar la aplicación, AI2 propone utilizar el Scratch lo que hace posible crear un programa en forma de diagrama de bloques. Muy fácil de usar pero requiere cierta lógica de programación.
Todas las funciones están disponibles haciendo clic en los objetos en el menú desplegable a la izquierda de la pantalla. Explore las funciones de los objetos que ha agregado a la aplicación, así como las de los objetos de Variables, Texto, Matemáticas y Control que usaremos.

ai2-blocks-btn-menu Crear una aplicación con App Inventor 2

Cree una lista de los módulos Bluetooth disponibles en el dispositivo.

ai2-blocks-create-list Crear una aplicación con App Inventor 2

Gestione el establecimiento de la conexión y cambie el estado según la conexión.

ai2-blocks-handle-bt-connexion Crear una aplicación con App Inventor 2

Se define una variable global «comando» para mantener en la memoria el valor dado por el último botón presionado (ON u OFF).

ai2-blocks-handle-command Crear una aplicación con App Inventor 2

Enviamos el valor de la variable de comando a través de Bluetooth, si está conectado, con una frecuencia definida por el objeto Clock1.

ai2-blocks-send-command Crear una aplicación con App Inventor 2

Para recuperar el valor del sensor enviado desde Arduino, verificamos si los datos están disponibles en el búfer con una frecuencia definida por Clock2. Luego mostramos este valor en sensorLbl.

ai2-blocks-recieve-text Crear una aplicación con App Inventor 2

Código completo

Una vez colocados y configurados todos los bloques en la interfaz, el código debería tener el siguiente aspecto.

ai2-myapp-complete-code Crear una aplicación con App Inventor 2

Compila y comparte tu aplicación

Una vez que este programa en Scratch esté configurado correctamente y no se muestren errores, consiga una aplicación de lector de código QR y compile el programa utilizando la función Build & gt; Aplicación (proporcionar código QR para .apk)

ai2-app-build-qrcode Crear una aplicación con App Inventor 2

Una vez que se haya generado el código QR, puede descargar e instalar la aplicación en su teléfono inteligente.

ai2-app-QRcode Crear una aplicación con App Inventor 2

Puede compartir el instalador .APK para que otros puedan instalar su aplicación en un teléfono Android. Además, puede compartir su proyecto como un archivo AIA para que otros puedan usar y modificar su aplicación.
Exportar para crear el archivo AIA correspondiente en su computadora

ai2-app-export-project-aia Crear una aplicación con App Inventor 2

Importar para abrir un archivo AIA en la aplicación en línea y editar el proyecto

ai2-app-import-project-aia Crear una aplicación con App Inventor 2

Código Arduino

Aquí está el código para cargar en la placa Arduino para recibir y enviar datos al puerto serie.

#include <SoftwareSerial.h>

SoftwareSerial hc06(2,3);

String cmd="";
float sensor_val=0;

void setup(){
  //Initialize Serial Monitor
  Serial.begin(9600);
  //Initialize Bluetooth Serial Port
  hc06.begin(9600);
}

void loop(){
  //Read data from HC06
  while(hc06.available()>0){
    cmd+=(char)hc06.read();
  }

  //Select function with cmd
  if(cmd!=""){
    Serial.print("Command recieved : ");
    Serial.println(cmd);
    // We expect ON or OFF from bluetooth
    if(cmd=="ON"){
        Serial.println("Function is on");
    }else if(cmd=="OFF"){
        Serial.println("Function is off");
    }else{
        Serial.println("Function is off by default");
    }
    cmd=""; //reset cmd
  }
  // Simulate sensor measurement
  sensor_val=(float)random(256); // random number between 0 and 255
    
  //Write sensor data to HC06
  hc06.print(sensor_val);
  delay(100);
}


Resultado

Podemos habilitar y deshabilitar la función del Arduino y recibir datos de un sensor en la aplicación

myApp-not-connected Crear una aplicación con App Inventor 2
myApp-connected Crear una aplicación con App Inventor 2
ai2-app-arduino-onoff Crear una aplicación con App Inventor 2

No dude en dejar un comentario o contactarnos Si necesita ayuda para crear su aplicación o si cree que falta información en este tutorial.

Applications

Sources

Encuentre otros tutoriales y ejemplos en el generador de código automático
Arquitecto de Código