como recibir datos de un formulario web con esp8266 5d837e3892a4b - Electrogeek

Cómo recibir datos de un formulario web con ESP8266 Deja un comentario

esp8266 formulario web - Electrogeek

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».

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.

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

esp8266 formulario web html - Electrogeek

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.

esp8266 formulario web serial port - Electrogeek

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.

github logo - Electrogeek

 

Comparte este Post

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Abrir el chat
0

Tu carrito