Arduino Nano 33 IoT: Sensor de Agua Multiparámetro (CE, pH, ORP) con BLE y PWA

Componentes y materiales

Arduino Nano 33 IoT	×	1
Interfaz de sonda EC aislada Microfire LLC	×	1
Interfaz de sonda ISE aislada Microfire LLC	×	2

Sobre este proyecto

¿Qué vamos a construir?

Un dispositivo para medir conductividad eléctrica (CE), pH, potencial de oxidación-reducción (ORP) y temperatura. Ideal para monitorizar piscinas o sistemas hidropónicos. Se comunica mediante Bluetooth Low Energy (BLE) y muestra la información en una página web usando Web Bluetooth. Además, convertiremos la web en una Progressive Web App (PWA) instalable desde el navegador.

Todos los componentes están disponibles en ufire.co.

Glosario de términos

• CE/pH/ORP/temperatura: Parámetros comunes de calidad del agua. La conductividad eléctrica (CE) mide nutrientes en hidroponía, el pH indica acidez/basicidad, y el ORP evalúa la capacidad desinfectante del agua.
• Bluetooth Low Energy (BLE): Protocolo inalámbrico de bajo consumo para enviar/recibir datos. El Arduino Nano 33 IoT integra WiFi y BLE.
• Web Bluetooth: API de Chrome/Opera que permite a una web comunicarse directamente con dispositivos BLE.
• Progressive Web Apps (PWA): Páginas web que funcionan como apps nativas. Su comportamiento varía entre Android, iOS y escritorio.

El hardware

Antes de montar, hay que resolver un detalle: las placas ISE de uFire comparten dirección I2C. Como usamos dos, debemos cambiar la dirección de una a 0x3e (usaremos esa para ORP). Sigue estos pasos.

El montaje es sencillo gracias al sistema Qwiic: conecta todo en cadena. Necesitarás un cable Qwiic-a-macho para conectar el primer sensor al Nano 33. Código de colores: negro a GND, rojo a 3.3V o 5V, azul a SDA (A4), amarillo a SCL (A5).

Conecta la sonda de temperatura a la placa EC (aunque todas pueden medirla). Conecta las sondas BNC de CE, pH y ORP a sus respectivas placas. Si tienes una carcasa, úsala para proteger la electrónica del agua.

El software

Dividido en dos partes: firmware en el Nano 33 y la página web.

Flujo básico

• La web se conecta al Nano vía BLE.
• Envía comandos de texto para solicitar datos o acciones.
• El Nano ejecuta los comandos y responde con datos.
• La web actualiza la interfaz con la respuesta.

Esto permite realizar mediciones, calibrar sensores, etc., desde la web.

Servicios y características BLE

Conceptos clave: un servicio es como un "libro" y una característica como sus "páginas", pero con propiedades extra: pueden notificar cambios o permitir escritura. Se identifican por UUID.

En el firmware definimos un servicio y dos características:

BLEService uFire_Service("4805d2d0-af9f-42c1-b950-eae78304c408");
BLEStringCharacteristic tx_Characteristic("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);
BLEStringCharacteristic rx_Characteristic("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);

• tx_Characteristic (BLENotify): el Nano envía mediciones (CE, pH, etc.) y la web recibe notificaciones al cambiar.
• rx_Characteristic (BLEWrite): la web escribe comandos aquí.

Código de enlace:

BLE.setLocalName("uFire BLE");
BLE.setAdvertisedService(uFire_Service);
uFire_Service.addCharacteristic(tx_Characteristic);
uFire_Service.addCharacteristic(rx_Characteristic);
BLE.addService(uFire_Service);
rx_Characteristic.setEventHandler(BLEWritten, rxCallback);
BLE.advertise();

• rx_Characteristic.setEventHandler(BLEWritten, rxCallback); ejecuta rxCallback al recibir un comando.
• BLE.advertise(); hace visible el dispositivo para conexiones.

Comandos de texto

Comunicación mediante comandos simples. Las librerías uFire usan JSON/MsgPack; usaremos JSON por legibilidad.

Ejemplo:

1. Web envía ec a rx_Characteristic.
2. Nano responde {"ec":1.24} en tx_Characteristic.
3. Web muestra el valor.

La página web

Frontend con Vue.js, sin backend ni sistema de build. Estructura: js/, css/, assets/. Usa Bulma.io para estilos.

En el <head> destaca:

<link rel="manifest" href="manifest.json">

Carga el manifiesto PWA. El JavaScript se divide en app.js (UI, variables Vue) y ble.js (lógica Bluetooth).

JavaScript y Web Bluetooth

Solo funciona en Chrome y Opera. En app.js están los mismos UUIDs del firmware. En ble.js están connect() y disconnect().

La conexión requiere interacción física (botón):

this.device = await navigator.bluetooth.requestDevice({
  filters: [{ namePrefix: "uFire" }],
  optionalServices: [this.serviceUuid]
});

Se muestra un diálogo de selección (requisito de seguridad). Luego se configuran servicio y características con callback value_update para recibir notificaciones. Un temporizador actualiza datos cada 5 segundos. Los archivos ec.js, ph.js, orp.js contienen funciones para comandos y calibración.

Para probar: sirve la web vía HTTPS (ej. serve-https), sube el firmware, conecta hardware y abre la web.

La parte PWA

Pasos para convertir la web en app instalable:

• Instalación en pantalla de inicio.
• Acceso offline tras instalar.
• Ejecución como app nativa con icono propio.

1. manifest.json: Genera con App Manifest Generator. Define scope (ej. /uFire-BLE/), start_url y display: standalone. Colócalo en la raíz junto a index.html.
2. Service Worker: Para caché offline. Implementación estándar (ejemplo de Google) adaptando la lista de archivos a cachear. Solo archivos de tu dominio.
3. Iconos: Genera con FavIcon Generator.
4. Registro en Vue: En mounted():

   mounted: function () {
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('service-worker.js');
     }
   },
   

Verifica con Lighthouse. Si todo va bien, Chrome mostrará banner de instalación.

Código

Arduino Create

GitHub

https://github.com/u-fire/uFire-BLE

Esquemáticos

Todas las conexiones con cables Qwiic.