Estación meteorológica ESP8266 que muestra datos en un sitio web: 7 pasos

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-13 06:57

Nota: Partes de este tutorial pueden estar disponibles en formato de video en mi canal de YouTube - Tech Tribe

En este instructivo, mostraré cómo hacer una estación meteorológica que envíe datos directamente a su sitio web. Por lo tanto, necesitará su propio dominio (por ejemplo, msolonko.net). Para comenzar, aquí están los materiales que necesitará:

Elementos:

Pluma Huzzah ($ 16.95)

Cable micro USB con datos ($ 1.99)

Paquete de batería ($ 25): más adelante discutiré qué capacidad necesita durante qué cantidad de tiempo sin recargar, para que pueda elegir la capacidad que desea. Este es un enlace al que usé. También puede encenderlo desde una toma de corriente.

1 fotorresistencia

Algunas otras resistencias - discutidas más adelante

Cable

Perf Board ($ 5.59) - Paquete de 20

Sensor de temperatura, presión y humedad BME280 ($ 9,99)

Una especie de caja; puedes imprimir uno en 3D y te mostraré mi diseño.

Alojamiento web y dominio, si desea seguir completamente el tutorial

Instrumentos:

Cortador de cables

Soldador

Paso 1: Código Feather Huzzah

El código estará escrito en Arduino IDE, que se puede descargar aquí. Antes de comenzar, siga las instrucciones aquí para configurar el IDE de Arduino para que funcione con su Feather Huzzah. Además, sigue estas instrucciones para descargar las librerías necesarias para que funcione el sensor BME. Se adjunta el archivo de código y se comenta todo el código para que puedas entenderlo. Una vez que lo mire, pase al siguiente paso donde veremos el código que recibe los datos del sensor.

Paso 2: Recibir datos de Feather Huzzah

A estas alturas, es de esperar que comprenda cómo funciona el código Arduino. Si no, vuelva al código y lea mis comentarios (comenté casi todas las líneas). Ahora escribiremos el código que recibe los datos. Como antes, todo está comentado. El lenguaje de programación que se utiliza para esto es PHP, sobre el cual puede leer más aquí.

Nuestros datos se almacenarán en una base de datos MySQL, sobre la que puede leer más aquí. Los datos se almacenan en tablas que tienen filas y columnas. Antes de escribir el código, debemos hacer la estructura de nuestra tabla en nuestro cPanel de alojamiento. Estoy usando Arvixe Hosting, por lo que su cPanel puede verse diferente. Consulte una de las imágenes para ver qué aspecto tiene la mía. Primero, desea crear una nueva base de datos MySQL si aún no tiene una. Puedes usar el asistente para eso. Hay muchos recursos en línea sobre esto si necesita ayuda.

Una vez que haya configurado una base de datos, vaya a phpMyAdmin y seleccione su base de datos. Cree una tabla denominada weather_data con 9 columnas. Consulte una de mis imágenes de arriba para ver cuál debería ser cada columna (copie el nombre, el tipo de datos y todo lo demás exactamente si desea usar mi código). El contador será nuestra clave principal y la identificación nos ayudará a identificar qué día hacen los datos correspondientes (1: hoy, 2: ayer, 3: todo lo demás). Como tendremos muchos datos, borraremos algunos a medida que envejezcan. Por eso necesitamos la columna id. El resto de las columnas se explican por sí mismas. En este momento, su tabla en su base de datos debería verse exactamente como la mía.

Ahora, descargue el código adjunto y léalo junto con mis comentarios. Cuando termine, continúe con el siguiente paso.

Nota: cuando descargue el código, cámbiele el nombre a esp.php. Por alguna razón, recibí un error cuando intenté cargar un archivo PHP.

Básicamente, así es como funcionará el código.

1. Recopile datos cada 10 minutos y muéstrelos

2. Una vez que pase el día, promedie cada 6 valores (para ahorrar espacio en la base de datos) para que haya un punto de datos por cada hora

3. Una vez que pase otro día, promedie todos los datos restantes de ese día y guárdelos como un solo punto de datos.

De esta manera, podremos ver las fluctuaciones de luz, temperatura, etc. a lo largo de meses sin que nos distraigan las fluctuaciones diarias de temperatura, luz, etc.

Paso 3: recuperar datos de la base de datos para mostrar

Así que ahora hemos descubierto cómo recopilar datos meteorológicos y cargarlos en nuestra base de datos. Ahora tenemos que poder recuperarlo en una forma utilizable. Como antes, adjunté un archivo PHP getWeatherData.txt que debe guardar en su host y cambiar la extensión del nombre del archivo a.php en lugar de.txt. Todo el código está comentado. Léalo para comprenderlo y siga adelante una vez que crea que lo tiene. Si tiene preguntas, no dude en preguntar a continuación.

Paso 4: Configuración de bibliotecas y algunas otras cosas

Para este proyecto, uno de los frameworks que usaremos es AngularJS, que nos ayudará a comunicarnos con la base de datos y construir una SPA (Aplicación de Página Única). Para obtener la biblioteca, vaya a este enlace y descargue una versión 1.64 o superior. Para este tutorial, usé 1.64 pero a menudo se lanzan nuevas versiones para que pueda usar una diferente. Busque un enlace en esa página que termine así: /VERSION/angular.min.js

Copie el enlace y guárdelo en un lugar seguro. Acabamos de recibir un enlace para la biblioteca AngularJS. Lo necesitará para el siguiente paso. Ahora, en la misma página, busque un enlace que se parezca a este y cópielo también: /VERSION/angular-route.min.js

La ruta angular nos ayudará a administrar nuestro SPA y manejar el cambio de vistas en la página.

Queremos poder mostrar gráficas de nuestros datos de forma agradable. Para esto usaremos una biblioteca llamada ChartJS. Vaya aquí, elija la última versión y guarde un enlace que termina así: VERSION / Chart.bundle.min.js

Finalmente, usaremos una biblioteca para diseñar las páginas llamada Bootstrap. Vaya a este enlace de Inicio rápido y déjelo abierto por ahora. Una vez que comencemos a escribir el código del cliente, podrá reemplazar mis enlaces antiguos con la versión más nueva.

Ahora, deberíamos configurar las diferentes vistas para nuestra aplicación. En el directorio de su host donde tiene los dos archivos anteriores (esp.php y getWeatherData.php), cree una nueva carpeta llamada weather_views. Aquí, pondremos todas nuestras páginas que corresponderán con una identificación de nuestra base de datos (1, 2 o 3).

En la carpeta, cree 3 archivos (day.html, old.html y ayer.html). Descargue el código adjunto y colóquelo en esos archivos. El código de DAY. HTML está comentado para que pueda comprender lo que está sucediendo. El código para las otras 2 páginas es básicamente el mismo (se comenta una parte diferente en old.html).

Una vez que haya terminado con este paso, pase al siguiente, que es el paso de programación más difícil.

Paso 5: archivo HTML principal

En este paso, creará / editará / leerá el archivo HTML principal donde mostrará todo. Guarde el archivo adjunto (que, como siempre, está comentado) como espdata.html en el mismo directorio que esp.php. Espero que pueda hacer algunos cambios y comprender lo que realmente está sucediendo.

Esta es la mayor parte de su código, por lo que definitivamente es importante comprender lo que está sucediendo.

Paso 6: Prueba de cableado en una placa de pruebas

Ahora probaremos que todo el código funcione con nuestro hardware. Si aún no lo ha hecho, suelde los pines del cabezal en el Feather Huzzah y el sensor BME280. Para cada paso, se adjunta una foto.

1. Coloque la pluma en la placa de pruebas. Conecte 3V al riel + y GND al riel -.

2. Conecte el VIN del sensor al riel + y GND al riel -.

3. Conecte el sensor SDA al pin 4 de la pluma. Conecte SCL al pin 5.

4. Coloque el fotorresistor en la placa de pruebas con un cable que va al riel +.

5. Conecte un resistor de 4.7k al cable no conectado del fotorresistor. Conecte el cable no conectado del 4.7k a una resistencia de 2k. Conecte el extremo no conectado de la resistencia de 2k al riel - (GND).

6. Conecte la unión de la resistencia de 4.7k y 2k al pin ADC (pin analógico). Acabamos de hacer un divisor de voltaje que divide el voltaje máximo leído por el pin de 3.3V a menos de 1V. Puede jugar con su propia combinación si lo desea, pero tenga en cuenta que el voltaje dado al pin analógico debe ser inferior a 1V.

7. Por último, conecte el pin RST (reinicio) de la pluma al pin 16 de la pluma (cable naranja en la foto). Esta configuración permite que el Feather Huzzah entre en modo de suspensión profunda para ahorrar energía.

¡Ya terminaste! Sube el código a tu pluma huzzah y, con suerte, podrás ver la actualización de tu página web (solo la página day.html). De lo contrario, intente usar el monitor en serie para solucionar problemas o pregunte en los comentarios a continuación.

Paso 7: Proyecto permanente (opcional)

Suponiendo que todo funcione, si lo desea, puede hacer que este proyecto sea más permanente. No mostraré esto aquí, pero puede soldar todos los componentes a una placa de perforación y luego encerrarlos en un contenedor. Adjuntaré los archivos IPT para el contenedor 3D que usé a continuación y algunas fotos para comenzar. El contenedor está destinado a la inspiración porque probablemente querrá hacerlo más personal con un diseño y texto diferente. ¡Diviértete con la personalización! ¡Buena suerte!