Cómo recibir datos de un formulario web con ESP32

4 min
Iniciación

Un formulario web permite enviar datos al ESP32 desde una página servida por el propio dispositivo.

El ejemplo está orientado a ESP32. En muchos casos también puede adaptarse a ESP8266 cambiando librerías y algunos detalles de pines.

Cuando el ESP32 actúa como servidor, una forma habitual de servir contenido es almacenarlo en la memoria flash y exponer páginas estáticas. El contenido servido es “estático”, en el sentido de que no cambia entre llamadas al servidor. Servir contenido realmente dinámico normalmente queda reservado casi exclusivamente para los endpoints.

Sin embargo, cómo ya adelantábamos que el contenido sea ‘estático’ no significa que “que no haga nada”.

Existen múltiples formas de intercambiar información entre el frontend y el backend: formularios, Ajax, WebSockets o MQTT. Vamos a empezar por una de las más sencillas, los formularios HTML.

Hoy en día usar formularios puede parecer básico, pero siguen siendo una buena forma de entender cómo viajan los datos desde el navegador hasta el servidor.

Nuestro programa principal queda invariante respecto al ejemplo del ESPAsyncServer

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>

#include "config.h"  // Sustituir con datos de vuestra red
#include "Server.hpp"
#include "ESP32_Utils.hpp"

void setup(void)
{
  Serial.begin(115200);
  SPIFFS.begin();
  
  ConnectWiFi_STA();

  InitServer();
}

void loop(void)
{
}

Copied!

Los cambios los tenemos en la definición del comportamiento del servidor en el fichero ‘Server.hpp’. Además de la habitual función para servir el contenido desde el SPIFFS, hemos añadido un ruteo para la URL ‘/SetText’ para peticiones de POST, asociada a la función ‘handleFormText’. Es decir, hemos definido una ‘mini API’ en el backend con un único Endpoint.

AsyncWebServer server(80);

void handleFormText(AsyncWebServerRequest *request)
{
 String MiText = request->arg("miText");
 
 Serial.print("MiText:\t");
 Serial.println(MiText);

 //String response = "<a href='/'> Go Back </a>";
 //request->send(200, "text/html", response);

 // redirección directa
 request->redirect("/");
}

void InitServer()
{
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

  server.on("/SetText", HTTP_POST, handleFormText);

  server.onNotFound([](AsyncWebServerRequest *request) {
    request->send(400, "text/plain", "Not found");
  });

  server.begin();
    Serial.println("HTTP server started");
}

Copied!

En este ejemplo, en la función handleFormText simplemente vamos a imprimir el texto recibido por puerto serie y redireccionar al cliente a la página del formulario. (En el mismo código tenéis comentado un ejemplo en el que devuelve un código html con un enlace para volver)

Por otro lado, dentro de la carpeta ‘data’ creamos un único fichero llamado ‘index.html’, con el siguiente contenido.

<!DOCTYPE html>
<html class="no-js" lang="">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>ESP8266 Forms</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
 
   <body>
    <h1>Form example</h1>
        <form action="/SetText" method="post">
      Texto:<br>
      <input type="text" name="miText" value="MiText"><br>
      <button type="submit" value="Submit">Send</button>
    </form> 
    </body>
</html>

Copied!

Resultado

Esta sencillísima página web únicamente contiene un formulario cuya función de ‘Enviar’ (submit) está asociada al Endpoint ‘/SetText’ bajo el método POST. Recordamos que los métodos (o verbos) en un API web significan cosas. Estamos usando POST porque estamos emulando una acción que ejecutamos sobre el backend. Si estuviéramos realizando una petición usaríamos un método GET.

Si tenéis dudas sobre el uso correcto de los métodos en API Web, consultar la entrada sobre tipos de peticiones y parámetros, o cómo montar un API Rest en NodeJs.

Una vez cargado todo, accedemos al ESP8266 y veremos nuestra sencilla (y, reconozcamos, fea) página web.

esp8266-formulario-web-html

Si escribimos un texto y pulsamos en el botón submit podemos ver que el ESP32 recibe correctamente el texto que enviamos y lo muestra por puerto serie. En un proyecto real ya sería cuestión de procesar el texto y hacer lo que fuera oportuno.

esp8266-formulario-web-serial-port

Este es un ejemplo sencillo, pero muy útil para introducir conceptos como método web, backend, frontend y endpoint. A partir de aquí podemos construir formularios más concretos, como encender un LED o enviar parámetros de configuración al ESP32.