Cómo recibir datos de un formulario web con ESP8266


Continuamos con los tutoriales del ESP8266 actuando como servidor viendo cómo enviar datos desde una página Web estática a través de un formulario.

Después de una pequeña pausa para ver la programación OTA a través de WiFi (que os será muy útil para las pruebas en las siguientes entradas) continuamos con el ESP8266 actuando como servidor, que dejamos en la última entrada viendo cómo montar un servidor asíncrono con ESPAsyncServer.

Cómo decíamos, la forma "preferida" de servir contenido en el ESP8266 es desde la memoria SPIFFS. 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".

Anuncio:

Existen múltiples formas de intercambiar información entre el frontend y el backend (formularios, ajax, websockets). Iremos viendo todas ellas, y vamos a empezar por la más sencilla (y antigua), los sencillos y simples formularios.

En los tiempos que corren, usar formularios puede parecer antediluviano. Pero, por algún lugar hay que comenzar, y conviene no empezar la casa por el tejado. Veremos las otras formas más avanzadas (y complejas) en las siguientes entradas.

Nuestro programa principal queda invariante respecto al ejemplo del ESPAsyncServer

Los cambios los tenemos en la definición del comportamiento del servidor en el fichero 'Server.hpp', que queda de la siguiente manera.

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.

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.

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.

Si escribimos un texto y pulsamos en el botón 'submit' podemos ver que, efectivamente, el ESP8266 recibe correctamente el texto que enviamos y lo muestra por puerto serie. En proyecto real ya sería cuestión de que procesáramos el texto, e hiciéramos lo que fuera oportuno.

En próximas entradas veremos formas mucho más convenientes de realizar este intercambio de información. Este es un ejemplo sencillo, pero muy útil, que nos ha permitido introducir los conceptos (y el vocabulario) de métodos web, backend, frontend, endpoint. ¡Empezamos a meternos en harina!

En la siguiente entrada veremos una variación de este ejemplo donde veremos cómo aplicar lo que hemos visto para encender y apagar un LED conectado al ESP8266 a través de un formulario, por ejemplo, para variar la intensidad de luz en un LED. ¡Hasta pronto! 

Descarga el código

Todo el código de esta entrada está disponible para su descarga en GitHub.

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 puedes consultar la sección
tutoriales de ESP8266

Anuncio:

Previous Cómo usar ficheros Json en Arduino con Arduino Json
Next Encender y apagar un LED en el ESP8266 con un formulario Web
1000