Hoy te mostraré cómo medir y guardar la temperatura y humedad del ambiente usando PHP, MySQL, un sensor de temperatura DHT22 y una tarjeta NodeMCU ESP8266. Lo que te voy a mostrar es un proyecto con estos componentes que te menciono, aunque siempre eres libre de reemplazarlos.

Al final vamos a tener un programa en donde la temperatura y humedad se van a registrar cada 30 segundos en una tabla de MySQL. Después vamos a tener una gráfica de línea en donde se mostrará la temperatura y humedad a lo largo del tiempo, por un rango de fechas.

El proceso va a ser sencillo. Primero vamos a programar la tarjeta para que lea el sensor cada determinado tiempo y envíe la humedad y temperatura a nuestro servidor con PHP.

Luego vamos a crear una aplicación web para consultar esos datos y mostrar una gráfica personalizada.

Artículos recomendados

Este post toma muchas cosas de otros artículos que he publicado aquí en el blog de Parzibyte. Te recomiendo que los leas, pues en ellos explico detalladamente cada parte.

Primero revisa cómo leer la temperatura y humedad usando el sensor DHT22, y después revisa cómo enviar valores a un servidor web usando la ESP8266 y el módulo WiFi que ya tiene integrado.

Si bien puedes continuar leyendo este artículo (ya que te dejaré el código completo al final) te recomiendo que revises esos posts en caso de que quieras estudiar más a fondo.

Circuito de ESP8266 y DHT22

Anteriormente hice un circuito pero el pin de conexión del sensor va al D8 de la tarjeta. Ahora lo he cambiado al D1, pues el D8 causa interferencia. Así que el circuito de este proyecto queda así:

Recuerda que tú puedes conectarlo como prefieras. Físicamente el mío quedó así:

Código de la tarjeta

Este código está escrito en C++, y puedes cargarlo a la tarjeta usando PlatformIO o el IDE de Arduino. Antes de usarlo, recuerda instalar las siguientes librerías:

• adafruit/DHT sensor library
• adafruit/Adafruit Unified Sensor

Después vemos el código. En este caso la NodeMCU ESP8266 se va a conectar a una red WiFi y desde ahí se conectará al servidor web con PHP, ya sea que el mismo sea local o esté en internet.

Lo único que tienes que hacer es cambiar el nombre de la red, contraseña y dirección del servidor. También eres libre de modificar el código como tú lo prefieras. Al final queda así:

El envío de datos está ocurriendo en la línea 105. Preparamos la URL y concatenamos los valores como parámetros GET para enviarlos al servidor.

La humedad y temperatura se van a enviar cada 30 segundos, aunque puedes modificar ese intervalo. Por cierto, así como lo indico en el circuito: el PIN de Data del DHT22 va conectado al D1 de la tarjeta.

También me tomé la libertad de indicar los estados de error y éxito usando el LED integrado. Cuando hay un error, el mismo va a parpadear 5 veces.

Y cuando todo vaya bien (es decir, la temperatura y humedad se enviaron al servidor web) va a parpadear una vez.

Ese es todo el código de la tarjeta. Como te dije anteriormente, puedes enviar esto a un servidor dentro de tu red local o a un servidor de internet.

Lado del servidor con PHP

En el servidor debemos conectarnos a la base de datos con MySQL y realizar las operaciones de guardado y lectura de los valores.

Lo primero que debes hacer cuando descargues el código es configurar el archivo env.php basándote en el archivo env.example.php pues desde ese archivo se van a leer las credenciales para acceder a la base de datos.

Personalmente tengo mi archivo así:

Se está conectando a la base de datos llamada dht_log. Es buen momento para mostrar el esquema de la base de datos, que solamente tiene una tabla:

Y finalmente veamos las funciones que vamos a usar. Tenemos algunas para leer variables del entorno del archivo que mencioné anteriormente, otras para obtener la conexión a la base de datos y otra para guardar o leer los datos.

Básicamente estoy usando PHP con PDO para guardar y leer desde MySQL.

A través de todo el código vamos a ir invocando a estas funciones. Las estoy mostrando aquí de una vez para no explicarlas más adelante en cada apartado.  Y no te preocupes, te dejaré el código completo al final del post.

Registrar temperatura y humedad con MySQL

En el código de la tarjeta se puede observar que se hace una petición al archivo save_data.php. El contenido del mismo queda así:

Lo único que hacemos es tomar los valores de la URL, incluir nuestro archivo de funciones (functions.php, que ya vimos anteriormente) e invocar a la función saveDhtData. Eso hará que la humedad y temperatura, junto con la fecha y hora actual, queden guardados en la base de datos.

Lado del cliente: gráfica de temperatura y humedad

Ahora del lado del cliente vamos a consultar al archivo get_data.php al que le debemos pasar en la URL el rango de fechas en el que queremos consultar los datos. Este archivo nos va a devolver los datos como JSON en un arreglo.

Ahora en el lado del cliente con Vue y Chart.js graficamos los datos. Vue.js se va a encargar de hacer la petición HTTP al servidor con PHP usando fetch, y después va a decirle a Chart.js que refresque la gráfica:

Cuando cualquiera de los campos tenga un cambio, se invoca a la función onDateOrTimeChanged que a su vez va a obtener los datos enviando la fecha y hora de inicio y de fin. Todo esto pasará sin refrescar la página, usando AJAX.

El código JavaScript queda así:

La petición se hace en la línea 18. Y la gráfica (creada con chart.js) se está renderizando en la línea 59. En este caso tenemos dos datasets o conjunto de datos. Uno de ellos es la temperatura y el otro es la humedad.

Para el caso de las etiquetas o labels, todas son la fecha y hora en la que se registró la temperatura. Por cierto, si quieres registrar estos datos pero en adafruit, puedes mirar este post.

Como puedes ver, el usuario puede interactuar con el formulario y seleccionar un rango distinto para consultar la temperatura y humedad que la ESP8266 ya envió a nuestro servidor con PHP y MySQL.

Poniendo todo junto

El código completo lo dejaré, como siempre, en mi GitHub. Ahí vas a encontrar tanto el código de PHP como el de la tarjeta.

Si quieres usar mi código simplemente descárgalo y monta el proyecto en tu servidor Apache local o de internet. Configura el archivo de entorno, crea la base de datos e importa la tabla.

Después coloca la IP o dirección del mismo en la tarjeta ESP8266 así como el acceso a la red WiFi, carga el código, conecta el circuito y listo.

Te invito a leer más sobre la tarjeta ESP8266 y PHP.