API Web Serial: Tendiendo un Puente Entre los Navegadores Web y los Dispositivos de Hardware

La API Web Serial es una tecnología revolucionaria que permite a los desarrolladores web interactuar directamente con dispositivos seriales desde un navegador web. Esto abre una amplia gama de posibilidades, desde controlar robots y sistemas embebidos hasta recopilar datos de sensores y construir experiencias físicas interactivas. Esta guía proporciona una visión general completa de la API Web Serial, sus capacidades y cómo implementarla en sus proyectos, dirigida a una audiencia global de desarrolladores y entusiastas.

¿Qué es la API Web Serial?

La API Web Serial permite a las aplicaciones web comunicarse con dispositivos seriales, como microcontroladores, placas Arduino, impresoras 3D y otro hardware, directamente desde el navegador. Esto se logra a través del puerto serie, una interfaz estándar para la comunicación de datos. A diferencia de los métodos anteriores que requerían complementos o aplicaciones nativas, la API Web Serial proporciona una forma segura y estandarizada de interactuar con el hardware.

Características clave:

• Acceso seguro: Requiere permiso explícito del usuario para acceder a un dispositivo específico, mejorando la seguridad.
• Compatibilidad multiplataforma: Funciona en varios sistemas operativos, incluidos Windows, macOS, Linux y ChromeOS, proporcionando una experiencia consistente.
• API estandarizada: Ofrece una API de JavaScript consistente y fácil de usar para interactuar con dispositivos seriales.
• Transmisión de datos: Admite la transmisión de datos en tiempo real, lo que permite la visualización y la interacción de datos en vivo.
• Comunicación bidireccional: Facilita el envío y la recepción de datos entre la aplicación web y el dispositivo de hardware.

Beneficios de Usar la API Web Serial

La API Web Serial ofrece numerosos beneficios para los desarrolladores, que incluyen:

• Desarrollo simplificado: Elimina la necesidad de complementos específicos de la plataforma o el desarrollo de aplicaciones nativas, simplificando el proceso de desarrollo.
• Accesibilidad mejorada: Hace que la interacción con el hardware sea más accesible para una audiencia más amplia, ya que los usuarios pueden controlar los dispositivos directamente desde sus navegadores web.
• Experiencia de usuario mejorada: Proporciona una experiencia de usuario más fluida e intuitiva, ya que los usuarios pueden interactuar con el hardware sin instalar software adicional.
• Mayor interactividad: Permite la creación de aplicaciones web altamente interactivas que se integran con el mundo físico.
• Alcance global: Se puede acceder a las aplicaciones web creadas con la API Web Serial desde cualquier dispositivo con un navegador web y conexión a Internet, lo que facilita la colaboración y la innovación en todo el mundo.

Casos de uso y ejemplos

La API Web Serial se puede aplicar a una amplia variedad de proyectos y aplicaciones, que incluyen:

• Internet de las cosas (IoT): Conexión de aplicaciones web a datos de sensores de microcontroladores, creación de paneles para la monitorización ambiental, control de hogares inteligentes y automatización industrial. Considere aplicaciones en diversos lugares, como la monitorización de la temperatura en un invernadero en los Países Bajos o el seguimiento de la humedad del suelo en una granja en Kenia.
• Robótica y automatización: Control de robots, drones y otros sistemas automatizados directamente desde una interfaz web. Esto se puede utilizar con fines educativos (por ejemplo, la programación de robots en una escuela en Japón) o la automatización industrial (por ejemplo, el control de una línea de fabricación en Alemania).
• Control de impresión 3D: Gestión y monitorización de impresoras 3D directamente desde un navegador web, lo que permite a los usuarios cargar y controlar trabajos de impresión de forma remota. Esto es especialmente útil en la fabricación distribuida y los espacios de creadores, como se ve en países como Estados Unidos o India.
• Adquisición y visualización de datos: Recopilación de datos de sensores (por ejemplo, temperatura, presión, luz) y su visualización en tiempo real en un panel web. Esto tiene una amplia aplicabilidad, desde la investigación científica en Canadá hasta la monitorización agrícola en Brasil.
• Proyectos educativos: Enseñar a los estudiantes sobre electrónica, programación e interacción con hardware. La simplicidad de la API Web Serial la hace accesible a estudiantes de todas las edades y procedencias a nivel mundial.
• Instalaciones interactivas: Creación de instalaciones atractivas e interactivas que responden a la entrada del usuario o a los datos de los sensores. Ejemplos incluyen instalaciones de arte o exposiciones de museos, aprovechando la computación física en países como Australia.

Ejemplo: Control de una placa Arduino

Crearemos un ejemplo sencillo para controlar un LED conectado a una placa Arduino. Usaremos JavaScript para enviar comandos al Arduino, y el Arduino responderá encendiendo o apagando el LED.

1. Código Arduino (IDE de Arduino):

            const int ledPin = 13;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      digitalWrite(ledPin, HIGH);
      Serial.println("LED ON");
    } else if (command == '0') {
      digitalWrite(ledPin, LOW);
      Serial.println("LED OFF");
    }
  }
}
            

              
                Copy
              
            
          

Este código Arduino:

• Configura el pin LED como salida.
• Inicializa la comunicación serie a 9600 baudios.
• Verifica continuamente los datos serie entrantes.
• Si se reciben datos, lee el carácter.
• Si el carácter es '1', enciende el LED.
• Si el carácter es '0', apaga el LED.
• Envía un mensaje de confirmación al puerto serie.

2. HTML y JavaScript (Navegador Web):

            <!DOCTYPE html>
<html>
<head>
  <title>Control LED Web Serial</title>
</head>
<body>
  <button id="connectButton">Conectar a Arduino</button>
  <button id="onButton" disabled>Encender LED</button>
  <button id="offButton" disabled>Apagar LED</button>
  <p id="status">Desconectado</p>

  <script>
    const connectButton = document.getElementById('connectButton');
    const onButton = document.getElementById('onButton');
    const offButton = document.getElementById('offButton');
    const status = document.getElementById('status');
    let port;
    let writer;

    async function connect() {
      try {
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        writer = port.writable.getWriter();
        status.textContent = 'Conectado';
        connectButton.disabled = true;
        onButton.disabled = false;
        offButton.disabled = false;
      } catch (error) {
        status.textContent = 'Error: ' + error.message;
      }
    }

    async function sendCommand(command) {
      try {
        const data = new TextEncoder().encode(command);
        await writer.write(data);
      } catch (error) {
        status.textContent = 'Error al enviar el comando: ' + error.message;
      }
    }

    async function turnOn() {
      await sendCommand('1');
    }

    async function turnOff() {
      await sendCommand('0');
    }

    connectButton.addEventListener('click', connect);
    onButton.addEventListener('click', turnOn);
    offButton.addEventListener('click', turnOff);
  </script>
</body>
</html>
            

              
                Copy
              
            
          

Explicación del código JavaScript:

• Botón Conectar: Al hacer clic, solicita acceso a un puerto serie e intenta abrirlo.
• Botones Encender/Apagar LED: Envían el comando "1" para encender el LED y "0" para apagarlo.
• Estado de la conexión: Muestra el estado actual de la conexión.
• `navigator.serial.requestPort()`: Solicita al usuario que seleccione un puerto serie.
• `port.open()`: Abre el puerto serie seleccionado. El parámetro `baudRate` se establece para que coincida con el código de Arduino (9600).
• `port.writable.getWriter()`: Crea un escritor para enviar datos al puerto serie.
• `writer.write(data)`: Escribe los datos (el comando) en el puerto serie.
• Control de errores: Incluye el control de errores para proporcionar información al usuario.

Cómo ejecutar el ejemplo:

1. Conecte el Arduino: Conecte la placa Arduino a su computadora a través de USB.
2. Cargue el código Arduino: Abra el IDE de Arduino y cargue el código proporcionado en su placa Arduino.
3. Cree el archivo HTML: Guarde el código HTML como un archivo HTML (por ejemplo, `index.html`).
4. Abra el archivo HTML en un navegador: Abra el archivo `index.html` en un navegador web que admita la API Web Serial (por ejemplo, Chrome, Edge y algunas versiones de Opera).
5. Conéctese y controle: Haga clic en el botón "Conectar a Arduino". Su navegador le pedirá que seleccione un puerto serie. Seleccione el Arduino. Luego, haga clic en los botones "Encender LED" y "Apagar LED" para controlar el LED.

Primeros pasos con la API Web Serial

Para comenzar a usar la API Web Serial, necesita lo siguiente:

• Un navegador web que admita la API Web Serial: Actualmente compatible con Chrome, Edge y algunas versiones de Opera. Verifique la compatibilidad del navegador en recursos como Can I Use.
• Un dispositivo de hardware: Como un Arduino, Raspberry Pi o cualquier dispositivo que se comunique a través de un puerto serie.
• Conocimientos básicos de HTML, CSS y JavaScript: La familiaridad con estas tecnologías web es esencial.

Guía paso a paso:

1. Solicitar acceso al puerto serie: Use `navigator.serial.requestPort()` para solicitar al usuario que seleccione un puerto serie. Esta función devuelve una Promise que se resuelve en un objeto `SerialPort`. Nota: la interacción del usuario (un clic en un botón) suele ser necesaria para activar `requestPort()`.
2. Abrir el puerto serie: Llame al método `port.open()`, pasando un objeto de configuración que especifica la velocidad en baudios y otras configuraciones del puerto serie (por ejemplo, dataBits, stopBits, parity). La velocidad en baudios debe coincidir con la velocidad utilizada por su dispositivo de hardware.
3. Obtener flujos legibles y escribibles: Use las propiedades `port.readable` y `port.writable` para obtener los flujos legibles y escribibles. Estos flujos se utilizan para enviar y recibir datos.
4. Crear un escritor: Use el método `port.writable.getWriter()` para crear un objeto `writer`, que utilizará para enviar datos al dispositivo.
5. Crear un lector: Use el método `port.readable.getReader()` para crear un objeto `reader`, que utilizará para recibir datos del dispositivo.
6. Escribir datos en el dispositivo: Use `writer.write(data)` para enviar datos al puerto serie. Los `data` deben ser un `ArrayBuffer` o un `Uint8Array`. Puede usar `TextEncoder` para convertir una cadena en un `Uint8Array`.
7. Leer datos del dispositivo: Use `reader.read()` para leer datos del puerto serie. Este método devuelve una Promise que se resuelve en un objeto que contiene los datos y un valor booleano que indica si el flujo está cerrado.
8. Cerrar el puerto serie: Cuando haya terminado, llame a `writer.close()` y `reader.cancel()` para cerrar los flujos, y luego llame a `port.close()` para cerrar el puerto serie. Siempre incluya el manejo de errores para gestionar posibles problemas con la comunicación serie.

Ejemplos de código y mejores prácticas

Aquí hay más fragmentos de código y mejores prácticas para trabajar con la API Web Serial:

1. Solicitud de un puerto serie:

            async function requestSerialPort() {
  try {
    const port = await navigator.serial.requestPort();
    return port;
  } catch (error) {
    console.error('Error al solicitar el puerto:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

2. Apertura y configuración del puerto serie:

            async function openSerialPort(port) {
  try {
    await port.open({
      baudRate: 115200, // Ajuste para que coincida con su dispositivo
      dataBits: 8,
      stopBits: 1,
      parity: 'none',
    });
    return port;
  } catch (error) {
    console.error('Error al abrir el puerto:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

3. Escritura de datos en el puerto serie (cadena):

            async function writeToSerialPort(port, data) {
  const encoder = new TextEncoder();
  const writer = port.writable.getWriter();
  try {
    await writer.write(encoder.encode(data));
  } catch (error) {
    console.error('Error al escribir en el puerto:', error);
  } finally {
    writer.releaseLock();
  }
}
            

              
                Copy
              
            
          

4. Lectura de datos del puerto serie:

            async function readFromSerialPort(port, callback) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // Flujo cerrado
        break;
      }
      if (value) {
        const decoder = new TextDecoder();
        const decodedValue = decoder.decode(value);
        callback(decodedValue);
      }
    }
  } catch (error) {
    console.error('Error al leer del puerto:', error);
  } finally {
    reader.releaseLock();
  }
}
            

              
                Copy
              
            
          

5. Cerrar el puerto serie:

            async function closeSerialPort(port) {
  if (port) {
    try {
      await port.close();
    } catch (error) {
      console.error('Error al cerrar el puerto:', error);
    }
  }
}
            

              
                Copy
              
            
          

Mejores prácticas:**

            async function startStreaming(port, dataCallback) {
  const reader = port.readable.getReader();
  let decoder = new TextDecoder();
  let buffer = '';

  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break; // Flujo cerrado
      }
      if (value) {
        buffer += decoder.decode(value);
        let newlineIndex = buffer.indexOf('\n'); // O '\r' o un terminador similar
        while (newlineIndex > -1) {
          const line = buffer.substring(0, newlineIndex);
          dataCallback(line); // Procesar la línea de datos recibida
          buffer = buffer.substring(newlineIndex + 1);
          newlineIndex = buffer.indexOf('\n');
        }
      }
    }
  } catch (error) {
    console.error('Error durante la transmisión:', error);
  } finally {
    reader.releaseLock();
  }
}
            

              
                Copy
              
            
          

            const port = await navigator.serial.requestPort({
  filters: [
    { usbVendorId: 0x2341, // ID del proveedor de Arduino
      usbProductId: 0x0043 }, // ID del producto de Arduino Uno
  ],
});
            

              
                Copy