Crea tu propia aplicación para el control de tu prototipo robótico movil

Hola que tal,

En este tutorial te guiare paso a paso en el diseño y desarrollo de una aplicación móvil que permita comunicación bluetooth con tarjetas Arduino y esp32, más específico una app para el control de prototipos robóticos tipo vehículos.

Para el desarrollo de este tutorial usaremos la herramienta app inventor que nos permite diseñar y programar apps móviles mediante el uso de bloques de manera didáctica y rápida.

A continuación, te dejo una imagen del diseño que tendrá nuestra aplicación:

Todo el material necesario en cuanto a imágenes, iconos, logos lo podrás descargar mediante el siguiente enlace: https://drive.google.com/drive/folders/15e_R_stf46es8xl02X4rCY63ad267Fci?usp=sharing 

También en este enlace podrás descargar la aplicación para instalación en sus teléfonos: https://rc-car-driver.uptodown.com/android

Nota: Debes contar con un correo Gmail, ya que app inventor trabajo en línea y necesario para crear una cuenta y guardar el progreso del trabajo.

Bien iniciemos, como primer paso ingresaremos a la herramienta app inventor y crearemos un proyecto que por defecto le daremos el nombre de “rc_app”.

Una vez hemos creado el proyecto no redireccionara a la pestaña principal de trabajo que se dividen en cuatro (4) secciones (Si ya tienes conocimiento puedes pasar al siguiente paso):

Sección 1: Palette o Paleta, en este apartado se encuentran todos los componentes necesarios para el diseño e interacción de la aplicación móvil.

Sección 2: Viewer o Visualizador, como su titulo lo dice es el visualizador que permite observar como va quedando el diseño de la app.

Sección 3: All components o Componentes, en esta sección se muestran los componentes presentes en nuestra aplicación, aquí se puede observar su estructura o ubicación de cada uno en la app.

Sección 4: Properties o Propiedades, cuando seleccionan un componente este muestra unas propiedades únicas del mismo, allí se puede modificar tamaños, fondos, colores etc.

Entendido esto, ahora si vamos a iniciar.

Como primer paso vamos a colocar el screen o pantalla en horizontal, esto lo hacemos yendo a propiedad “ScreenOrientation” y seleccionando la opción “Landscape”.

Bien ahora, de acuerdo a la imagen de referencia vamos a dividir nuestra pantalla principal en dos secciones, para eso vamos a usar dos “layouts” de tipo horizontal:

Seleccionamos el componente y lo llevamos a nuestra pantalla de trabajo:

Al primer “layout” lo seleccionamos y vamos a su apartado de propiedades y ubicamos la opción de “Height” y seleccionamos la opción “percent” y le damos un valor de “20%”, en ese mismo componente vamos a la opción de “Width” y seleccionamos la opción de “percent” y le damos un valor de “100%”.

Con el segundo layout hacemos el mismo paso a paso que en el layout 1 pero con la diferencia que a este le vamos a dar un valor de “Height” de “75%”.

Bien, ahora vamos a iniciar con la ubicación de los botones en el primer layout, en la categoría “user interface” van a seleccionar el componente “list picker”

Este será nuestro botón con lista que usaremos para mostrar el listado de dispositivos con bluetooth cercanos a nuestra ubicación, seleccionamos el componente haciendo clic y vamos a modificar el nombre de los componentes yendo a la propiedad de “Text” borramos el contenido y colocamos “LISTA BLUETOOTH”.

Ahora seleccionamos nuevamente el botón y vamos a ir a la sección 3 y ubicamos el botón que dice “rename” esto abrirá una ventana flotante allí modificaremos el nombre del botón y lo llamaremos “btn_bluetooth” esto para identificarlo más rápido al momento de la programación. Vamos a modificar su propiedad de “Width” donde seleccionamos la opción “percent” y le damos un valor de 20 y en “Height” le marcamos la opción de “fill parent”.

Seguido a este componente usaremos el componente “button” este botón será para realizar la desconexión o desconectarse de un dispositivo este no llevará texto solo llevará una imagen:

La imagen puede descargarla en el siguiente enlace:

Descargado el material, lo primero que haremos será subir la imagen a nuestra app, vamos a desplazar un poco hacia abajo y ubicamos la opción “Media” y luego hacemos clic en el botón “Upload File” esto abrirá una ventana flotante allí nos permitirá selecciona la imagen a cargar la seleccionamos y le damos “OK” esto proceso se hace de uno en uno, es decir no podemos cargar varias imágenes en un mismo momento.

Cargada la imagen, ahora la vamos a colocar en nuestro botón, seleccionamos el componente y vamos a sus propiedades y ubicamos la opción “Image” y seleccionamos la imagen anteriormente cargada.

La imagen se coloca en el botón, pero con su tamaño original, vamos a redimensionarla para que se ajuste a nuestro botón, esto lo logramos modificando las propiedades “Width” y “Height” del botón.

En “width” le van a dar una propiedad de 10 percent y en Height seleccionan la opción fill parent

Eliminamos el texto del botón, yendo a su propiedad “text” y quitando su contenido.

Ahora vamos a renombra el botón yendo a la opción “Rename” y a este lo llamaremos “btn_desconectar”.

Continuamos, ahora colocaremos un componente “label” seguido del botón “btn_desconectar”, a esta etiqueta le modificaremos la propiedad de “Text” y se colocaremos “Velocidad” ajustaremos el tamaño de la letra yendo a la propiedad “fontSize” y le pondremos en 129 y le daremos al fondo un color blanco yendo a la propiedad “backgroundColor” y al texto yendo a la propiedad “TextColor” seleccionaremos el color rojo.

Seguido del componente “label” vamos a colocar cuatro (4) componentes “button” o “botón”

Al colocar los cuatro botenes algunos no se van a ver, por el tamaña del escenario de trabajo pero para verificar si están presentes en nuestro diseño podemos verificarlos de dos manera, la primera yendo a la sección 3 y revisar que aparezcan la cantidad de botones que se acaban de agregar o en la sección 2 ubicar la opción que dice “Phone Size” hacer clic y seleccionar la opción “Monitor Size” esto lo que hará será mostrar el diseño en una resolución de monitor.

Verificado que si estén los botones presentes procedemos a realizar las siguientes modificaciones en cada botón como se observa en la siguiente imagen:

La idea es que todos los componentes que esta ubicados en la parte superior la sumatorio de todos sus anchos “width” nos de 100% pero ¿para qué? Esto se hace con el propósito que al asignar un valor en porcentajes este lo que va a hacer es adaptarse a cualquier resolución con ello se logra una mejor disposición y uso de los espacios en las aplicaciones.

Nota: Tu modifica los valores del “width” de manera que te ocupen el 100% al realizar la sumatoria de todos.

Ahora procederemos a modificar el nombre de cada botón mediante la opción de “rename”:

Botón BAJA: btn_baja

Botón MEDIA: btn_media

Botón ALTA: btn_alta

Botón IDIOMA: btn_idioma

Nuestra sección 3 debe verse de la siguiente manera:

Bien, ahora lo que haremos será seleccionar el “layout 1” y vamos a sus propiedades y ubicamos la opción “align vertical” y seleccionamos la opción “center” luego en cada botón modificamos su propiedad “Height” y seleccionamos la opción “fill parent”.

Continuaremos con la ubicación de componentes en el “layouts 2”, aquí pondré nuevamente la imagen referencia con el objetivo de que realicemos un pequeño análisis:

Si nos fijamos la segunda parte donde están ubicadas las flechas de desplazamiento y los botón de comando podemos notar que es como si el layout 2 estuviese divido en tres partes, una primera parte para dos botones “flecha arriba y flecha abajo” una segunda parte para los comandos y botones de configuración y una tercera parte para datos y botones de movimiento, entendiéndolo de esta manera lo que haremos será dividir nuestro layout número 2 en tres partes, donde la primer parte será un layour de tipo vertical, la segunda un layout de tipo vertical y en la tercera tendremos otro layout de tipo vertical pero dentro de ese layout tendremos 2 layout de tipo horizontal de manera que nos permitan colocar los botones de manera horizontal como se observa en la imagen:

Colocación de componentes para división de layout:

Hemos colocado nuestro tres layouts de tipo vertical, modificaremos propiedades de width y height.

Parte 1: width de 20%, height fill parent

Parte 2: width de 30% height fill parent

Parte 3: width de 50% height fill parent

Realizados los ajustes nuestro diseño debe verse de la siguiente manera:

En la parte 1, vamos a colocar dos componentes de tipo “button”, a estos van a cargar la imágenes de flecha arriba y abajo y les colocan la imagen, este proceso ya se realizó con el botón de desconectar.

Deben realizar el ajuste del tamaño de la imagen de manera que se adapte al botón, continuamos ahora vamos a renombrar los botones como btn_arriba y btn_abajo.

En la parte 2, vamos a colocar dos componentes de tipo “label” y tres “button”:

Con la primera etiqueta o label, vamos a darle un fondo de color blanco y activar la opción “fontBold” y en texto colocaremos la palabra “Comando” y un tamaño de 20.

Con la segunda etiqueta o label vamos a darle también un fondo de color blanco un tamaño de letra de 25 y activamos la opción fontbold y modificamos su texto y colocamos la letra A.

Con el botón 1 vamos a modificar su texto y colocaremos “MANUAL” y width de 28% a todos los botones.

Con el botón 2 “AUTONOMO” y con el botón 3 “VIBRACIÓN”

De igual manera con los botones modifimos los nombres mediante la opción “rename”: btn_manual, btn_autonomo, btn_vibracion

Seleccionamos en layout del centro y ubicación en propiedades la opción “alignhorizontal” y seleccionamos center y los mismo para “alignvertical”

En la parte 3, vamos a ubicar dos layouts de tipo horizontal:

En ambos vamos a dejar en width la opción de fill parent

En el primer layout vamos a colocar tres botones y a cada boton le vamos a cambiar el texto y el nombre mediante la opción de “rename”:

A los botones en “rename” les colocaran los siguientes nombres: btn_manos, btn_cabeza, btn_saludar.

Al segundo layout le damos tanto el width como en height la opción de fill parent.

Y colocamos dos botones uno para flecha izquierda y otro para flecha derecha.

Para que los botones nos queden centrados, seleccionamos el layout y en sus propiedades de alignvertical y alignhorizontal establecemos la opción “center”.

Modificamos el rename de ambos botones y le pondremos btn_izquierda, btn_derecha.

Ahora procederemos a agregar dos componentes que en este caso se identifican como componentes no visibles, es decir estos componentes son funcionalidades del mismo teléfono o alguna característica del mismo equipo.

En la categoría “user interface” buscaremos el componente “notifier” lo seleccionamos y lo llevamos a la mitad de la pantalla, como se puede ver no se ve ningun cambio en el diseño pero si nos desplazamos un poco hacia abajo, debajo del teléfono aparece nuestro componente y este nos dice que no es visible, dicho componente nos va a permitir mostrar información en formato de alerta.

Ahora bajamos un poco en la sección 1 y ubicamos la categoría “conectivity” en esta categoría seleccionaremos el componente “BluetoothClient” este componente nos va a permitir identificar dispositivos cercanos y poder conectarnos a ellos. Seleccionamos el componente y lo llevamos a nuestra app.

Por último, para finalizar la etapa de diseño, vamos a cargar nuestro fondo y seleccionando el componente “screen” en la sección 3 cargamos y seleccionamos la opción “backgrounimage”:

Nuestro fondo ya se observa, ahora lo que haremos será que a cada “layout” les quitaremos el fondo, y esto lo logramos modificando la propiedad “BackgroundColor” allí seleccionamos la opción “none”.

Listoo, con esto hemos terminado toda la parte del diseño. Ahora viene lo chido a programarrrr.

Fase de programación:

Bien lo primero que haremos será configurar y establecer una propiedades y acciones que se ejecutaran al iniciar la aplicación.

Nos ubicamos en el apartado de “blocks” y seleccionamos el que dice “screen1” allí esto nos muestra una serie de bloques de diferentes colores entre esos bloques vamos a buscar el que dice “when Screen1 .Initialize” lo seleccionamos y lo que llevamos a nuestra área de trabajo.

Bien ahora procederemos a realizar solicitud de permisos, estos permisos los encontramos en el mismo apartado, pero ahora están de color morado:

Listo ahora lo que haremos será agregar unas validaciones, tenemos un botón para conexión a bluetooth y otro para desconectar, entonces si no estamos conectados a un dispositivo lo que haremos será decir que el botón de desconectar debe estar inactivo (es decir que no podrá hacer clic ni enviar una solicitud) y esto lo hacemos agregando los siguientes bloques:

Perfecto.

Ahora vamos a programar nuestro “listpicker” el cual llamamos btn_bluetooth, vamos al apartado “blocks” y buscamos estos componentes y observarnos que bloques nos muestra este componente. De ese listado de bloques vamos a seleccionar dos “AfterPicking” y “BeforePicking” que se traduce antes de clickquear y después de haber clickeado.

En beforePicking vamos nuevamente a los bloques de nuestro “btn_bluetooth” y buscamos el siguiente bloque: “Set btn_bluetooth . Elements” y lo colocamos dentro de nuestro bloque beforepicking. Nuevamente volvemos a nuestros bloques y ahora buscamos el componente BluetoothClient1 y buscamos el bloque que dice “BluetoothClient1 . AddressesAndName”

Ahora vamos a definir que va a pasar una vez se haya seleccionado un dispositivo, para ello vamos a copia el siguiente fragmento de bloques:

Bien lo que estamos diciendo básicamente es evaluar si se realizó la selección de un dispositivo y si se logro la conexión, si dicha conexión fue exitosa nos muestra una alerta de confirmación y nos inactiva el btn_connect y se nos activa el btn_desconectar.

Ahora vamos a programa nuestro boton btn_desconectar, para ello agregaremos lo siguiente:

Al hacer clic en el botón de desconectar, lo que haremos será primero desconectar nuestro dispositivo de bluetooth y luego activaremos el boton btn_bluetooth e inactivaremos el botón btn_desconectar y enviamos una alerta de información mediante el componente “notifier”.

Bien hasta aquí ya tenemos una conexión por bluetooth a un dispositivo, ahora lo que haremos será enviar los respectivos comandos para que nuestro robot haga lo correspondientes.

Vamos a iniciar configurando los valores para los botones de velocidad: BAJA, MEDIA y ALTA.

Entonces al hacer clic en cualquiera de los anteriores botones lo que haremos será enviar un valor entero numérico es este caso si se hace clic en el botón de BAJA enviaremos un 1, para MEDIA un 2 y para ALTA un 3.

Buscamos nuestro botón “btn_baja” y seleccionamos el bloque “when btn_baja click”:

Este fragmento lo que hace es verificar si existe una conexión mediante bluetooth si la conexión existe entonces envía el valor “1”, pero si la conexión no existe el valor no se envia, luego para diferenciar a que velocidad esta el robot, le decir que el boton se coloque de color verde y los demás de color gris. Este proceso se repite para los botones btn_media y btn_alta pero enviando el valor de 2 y 3.

Ahora vamos a programar lo botones de dirección y empezaremos con el de flecha arriba, aquí es repetir el mismo paso a paso para los botones de velocidad.

Con estos botones lo que enviaremos serán caracteres o letras establecidas de la siguiente manera:

Flecha arriba: f

Flecha abajo: b

Flecha izquierda: l (es una ele  (l) minúscula)

Flecha derecha: r

Para cada uno vamos a buscar el bloque “when btn_arriba TouchDown” y también el “when btn_arriba TouchUp”:

Entonces cuando presionamos se envía la letra “f” y cuando soltamos envía la letra “s”

Repetimos el mismo proceso con los demás botones:

Bien con esto hemos logrado ya programar cada acción principal de nuestro botones, los necesarios para el control de un robot, ahora lo que haremos será generar nuestro apk, esto lo logramos yendo al menú superior dando clic en la opción “build” y seleccionando la opción “AndroidApp (apk)” esto iniciará a preparar nuestra aplicación y luego podremos descargarla e instalarla en nuestros dispositivos android.

Con esto hemos finalizado nuestro tutorial, espero les haya servido cualquier duda o inquietud lo podrás dejar en la caja de comentarios.