La tarjeta NodeMCU ESP8266 es capaz de ejecutar un servidor web en donde podemos responder con HTML, JSON, etcétera.
Además, se puede conectar a una red WiFi y a su vez a internet. Por otro lado, puede conectarse a varios sensores como lo es el DHT22 que sirve para medir la temperatura y humedad.
Gracias a eso podemos crear un servidor web que nos va a decir la temperatura y humedad del ambiente usando el sensor DHT22. De este modo podremos conectarnos a la tarjeta usando su IP, y la misma nos va a mostrar (gracias al web server) la última lectura del sensor.
Lecturas recomendadas
Lo que vamos a ver aquí será, como en muchos casos dentro del blog de Parzibyte, una unión de varios artículos.
Vamos a recopilar la temperatura y humedad actual usando el sensor DHT22; después vamos a crear el diseño de la página web para el termómetro y finalmente vamos a embeber la página dentro de un servidor web en la ESP8266.
Así que en resumen será unir y adaptar esos tres artículos que cito. Si bien te dejaré el código completo al final del post, te recomiendo que los leas en caso de que no entiendas alguna cosa.
Preparando página web
Como te mencioné anteriormente, me basé en una plantilla que yo mismo diseñé. Sin embargo, le agregué el funcionamiento dinámico para mostrar la temperatura y humedad en tiempo real, refrescándola en un intervalo de 5 segundos.
Para hacer esto utilicé el framework Vue. Así que el código completo me quedó así:
Lo que realmente cambia es el script y la importación de Vue. Básicamente estoy consumiendo la propia API que el servidor web de la ESP8266 crea. El endpoint es /api.
El consumo se está realizando en la línea 58 dentro del método refrescarDatos. Ya sea que la petición sea exitosa o no, volvemos a invocar a la función en un intervalo de 5 segundos. Así que en resumen estamos refrescando los valores cada 5 segundos.
Después, dentro de la plantilla tenemos la humedad, temperatura y última lectura exitosa. Además, como lo expliqué en el post del template en el que me estoy basando, mostraré un icono distinto para el termómetro dependiendo de la temperatura (línea 76).
Minificando página web
Fíjate en el código de la página web. No usa comillas dobles, solo usa comillas simples '. Lo hice a propósito pues voy a copiar todo ese código dentro del código fuente de la tarjeta, y como estará en una línea entre comillas dobles, no causará conflictos.
Para minificar todo este HTML con el script, y así ahorrar memoria de la ESP8266 utilicé este minificador: https://www.willpeavy.com/tools/minifier/
De este modo, el resultado final fue el siguiente:
Todo el código está minificado y en una sola línea. Lo que yo te recomiendo en caso de que lo modifiques es que primero pruebes todo el código con un servidor en tu computadora, y cuando todo esté probado, lo minifiques y transfieras a la tarjeta.
Circuito
El módulo de WiFi ya viene integrado en la tarjeta, por lo que únicamente necesitamos conectar el sensor. Así que el circuito es el mismo que he usado en mi otro post para monitorear la temperatura y humedad con PHP y MySQL.
Basta con decir que el pin de datos del DHT22 va al D1 de la tarjeta.
API para temperatura y humedad con ESP8266 y DHT22
Antes de mostrar el código completo quiero que diferencies entre las dos cosas que vamos a estar sirviendo aquí. Por un lado vamos a servir la página web que tiene todo el diseño, el termómetro, Vue, etcétera.
Pero esa página no tendrá los valores, ya que los mismos serán consumidos desde una API que vamos a crear en la misma tarjeta, misma que nos dará los datos en formato JSON.
La misma queda así:
Lo único que hacemos es leer la última temperatura, última humedad y también medir el tiempo de la última lectura. Después usamos sprintf para formatear el JSON y lo imprimimos.
Fíjate en que estamos indicando que el tipo de contenido es application/json, y que de este modo podríamos consumir la API ya sea desde la propia tarjeta o desde otra aplicación.
Preparando servidor web
Es momento de mostrar el código completo del servidor web. Básicamente lo que hacemos es conectarnos a una red WiFi, configurar las rutas del servidor y leer la temperatura y humedad cada 5 segundos, pero sin dejar de escuchar las peticiones.
El código completo queda así:
Así que al final tenemos dos rutas en el servidor. La primera sirve la página web, y la segunda sirve la API en donde muestra los datos del sensor DHT22. Después, en la página web vamos a consumir esta API cada 5 segundos.
Todo esto usando simplemente la NodeMCU ESP8266, el DHT22 y código de C++.
Código completo
Es momento de mostrarte el código completo. Recuerda que, como siempre, eres libre de descargarlo, modificarlo y compartirlo.
Puedes explorar el código en el repositorio de GitHub. También te dejo enlaces para leer más sobre la ESP8266.
