Imagina poder monitorear y visualizar los valores de tus sensores desde cualquier parte del mundo. Con la combinación de tecnologías como ESP32/ESP8266, MySQL y PHP, ahora es posible tener acceso a esta información de forma remota. En este artículo, te enseñaremos cómo configurar este sistema para que puedas estar siempre informado sobre lo que está sucediendo en tiempo real. ¡No te lo pierdas!
En este proyecto, creará una página web que muestra las lecturas de los sensores en un gráfico al que podrá acceder desde cualquier parte del mundo. En resumen, crea un cliente ESP32 o ESP8266 que realiza una solicitud a un script PHP para publicar valores de sensores en una base de datos MySQL.
Actualizado el 26 de marzo de 2023
Como ejemplo, usaremos un sensor BME280 conectado a una placa ESP. Puede modificar el código proporcionado para enviar lecturas desde otro sensor o utilizar varias placas.
Para crear este proyecto utilice estas tecnologías:
- ESP32 o ESP8266 programado con Arduino IDE
- Servidor de hosting y nombre de dominio
- Script PHP para insertar datos en una base de datos MySQL y mostrarlos en una página web
- Base de datos MySQL para almacenar mediciones.
- Script PHP para trazar datos de la base de datos en gráficos
También puede resultarle útil leer estos proyectos:
- Inserte datos ESP32/ESP8266 en la base de datos MySQL usando PHP y Arduino IDE
- ESP32/ESP8266 muestra los valores del sensor en gráficos en tiempo real – servidor web
Tabla de contenido
El proyecto se divide en las siguientes secciones principales:
- Alojamiento de su aplicación PHP y base de datos MySQL
- Preparando su base de datos MySQL
- Script PHP HTTP POST: insertar datos en la base de datos MySQL
- PHP Script: visualiza el contenido de la base de datos en un diagrama
- Configurando el ESP32 o ESP8266
Mira el vídeo de demostración
Para ver cómo funciona el proyecto, puedes ver el siguiente vídeo demostrativo:
1. Alojamiento de su aplicación PHP y base de datos MySQL
El objetivo de este proyecto es tener su propio nombre de dominio y cuenta de hosting que le permita almacenar los valores de los sensores del ESP32 o ESP8266. Podrás visualizar los valores desde cualquier parte del mundo accediendo a tu propio dominio de servidor. Aquí hay una descripción general del proyecto:
Recomiendo utilizar uno de los siguientes servicios de hosting que pueden satisfacer todas las necesidades del proyecto:
- Bluehost (fácil de usar con cPanel): nombre de dominio gratis al comprar el plan de 3 años. Recomiendo la opción “Sitios ilimitados”;
- Océano digital: servidor Linux que administra desde una línea de comando. Recomiendo esta opción sólo para usuarios avanzados.
Estos son dos servicios que uso y recomiendo personalmente, pero puedes utilizar cualquier otro servicio de hosting. Cualquier servicio de hosting que ofrezca PHP y MySQL funcionará con este tutorial. Si no tiene una cuenta de alojamiento, le recomiendo registrarse en Bluehost.
Obtenga alojamiento y nombres de dominio en Bluehost »
Cuando compras una cuenta de hosting, también necesitas comprar un nombre de dominio. Esto es lo que hace que este proyecto sea interesante: puede ir a su nombre de dominio (http://example.com) y ver sus valores de ESP.
Si le gustan nuestros proyectos, podría considerar registrarse en uno de los servicios de alojamiento recomendados, ya que esto le ayudará a respaldar nuestro trabajo.
Nota: También puedes ejecutar un servidor LAMP (Linux, Apache, MySQL, PHP) en una Raspberry Pi para acceder a los datos de tu red local. Sin embargo, el propósito de este tutorial es publicar métricas en su propio nombre de dominio al que pueda acceder desde cualquier parte del mundo. Esto le permite acceder fácilmente a sus lecturas de ESP sin depender de una plataforma IoT de terceros.
2. Preparando tu base de datos MySQL
Después de registrarse para obtener una cuenta de alojamiento y configurar un nombre de dominio, puede iniciar sesión en su cPanel o panel similar. Luego siga los siguientes pasos para crear su base de datos, nombre de usuario, contraseña y tabla SQL.
Creando una base de datos y un usuario
Abre el «Progresivo«Pestaña»:
1. Escriba «base de datos» en la barra de búsqueda y seleccione «Asistente de base de datos MySQL».
2. Ingrese el nombre de la base de datos deseada. En mi caso el nombre de la base de datos es esp_data. Luego haga clic en el botón «Siguiente paso»:
Nota: luego debe usar el nombre de la base de datos con el prefijo que le proporciona su host (el prefijo de mi base de datos en la captura de pantalla anterior está borroso). lo usaré como Ejemplo_ESP_Data de aquí en adelante.
3. Ingrese el nombre de usuario de su base de datos y establezca una contraseña. Deberá guardar toda esta información, ya que la necesitará más adelante para crear una conexión a la base de datos utilizando su código PHP.
¡Eso es todo! Su nueva base de datos y usuario se han creado exitosamente. Ahora guarda toda tu información ya que la necesitarás más adelante:
- Nombre de la base de datos: Ejemplo_ESP_Data
- Nombre de usuario: Ejemplo_ESP_Board
- contraseña: Tu contraseña
Creando una tabla SQL
Después de crear su base de datos y su usuario, regrese al panel de cPanel y busque «phpMyAdmin».
Seleccione el nombre de su base de datos en la barra lateral izquierda Ejemplo_ESP_Data y abra la pestaña SQL.
Importante: Asegúrate de tener el Ejemplo_ESP_Data Base de datos. Luego haga clic en la pestaña SQL. Si no sigue estos pasos cuidadosamente y ejecuta la consulta SQL, puede crear una tabla en la base de datos incorrecta.
Copie la consulta SQL en el siguiente fragmento:
CREATE TABLE Sensor (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
value1 VARCHAR(10),
value2 VARCHAR(10),
value3 VARCHAR(10),
reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
Péguelo en el cuadro de consulta SQL (resaltado por un rectángulo rojo) y haga clic en el botón Ir para crear su tabla:
Después de eso deberías ver tu tabla recién creada con el nombre sensor en el Ejemplo_ESP_Data Base de datos como se muestra en la siguiente figura:
3. Script PHP HTTP POST: insertar datos en la base de datos MySQL
En esta sección, crearemos un script PHP que recibe solicitudes entrantes de ESP32 o ESP8266 e inserta los datos en una base de datos MySQL.
Si utiliza un proveedor de hosting con cPanel, puede buscar «administrador de archivos»:
Luego seleccione el público_html y haga clic en el botón “+Archivo” para crear uno nuevo .php Archivo.
Nota: Si está siguiendo este tutorial y no está familiarizado con PHP o MySQL, le recomiendo crear exactamente estos archivos. De lo contrario, deberá modificar el boceto ESP proporcionado con diferentes rutas URL.
Crear un nuevo archivo en /público_html con exactamente este nombre y esta extensión: post-datos.php
Edite el archivo recién creado (post-datos.php) y copie el siguiente extracto:
<?php
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
$servername = "localhost";
// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
// Keep this API Key value to be compatible with the ESP32 code provided in the project page. If you change this value, the ESP32 sketch needs to match
$api_key_value = "tPmAT5Ab3j7F9";
$api_key = $value1 = $value2 = $value3 = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$api_key = test_input($_POST["api_key"]);
if($api_key == $api_key_value) {
$value1 = test_input($_POST["value1"]);
$value2 = test_input($_POST["value2"]);
$value3 = test_input($_POST["value3"]);
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO Sensor (value1, value2, value3)
VALUES ('" . $value1 . "', '" . $value2 . "', '" . $value3 . "')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
}
else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
else {
echo "Wrong API Key provided.";
}
}
else {
echo "No data posted with HTTP POST.";
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
Antes de guardar el archivo, debe $ nombre de base de datos, $nombre de usuario Y $contraseña Variables con sus datos individuales:
// Your Database name
$dbname = "example_esp_data";
// Your Database user
$username = "example_esp_board";
// Your Database user password
$password = "YOUR_USER_PASSWORD";Después de agregar el nombre de la base de datos, el nombre de usuario y la contraseña, guarde el archivo y continúe con este tutorial. Cuando intenta acceder a su nombre de dominio en la siguiente ruta URL, recibe el siguiente mensaje:
http://example.com/post-data.php
4. Script PHP: visualiza el contenido de la base de datos en un diagrama
Crea otro archivo PHP en /público_html Directorio que representa el contenido de la base de datos en un diagrama en una página web. Nombra tu nuevo archivo: esp-chart.php
Edite el archivo recién creado (esp-chart.php) y copie el siguiente código:
<!--
Rui Santos
Complete project details at https://RandomNerdTutorials.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
-->
<?php
$servername = "localhost";
// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, value1, value2, value3, reading_time FROM Sensor order by reading_time desc limit 40";
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
$sensor_data[] = $data;
}
$readings_time = array_column($sensor_data, 'reading_time');
// ******* Uncomment to convert readings time array to your timezone ********
/*$i = 0;
foreach ($readings_time as $reading){
// Uncomment to set timezone to - 1 hour (you can change 1 to any number)
$readings_time[$i] = date("Y-m-d H:i:s", strtotime("$reading - 1 hours"));
// Uncomment to set timezone to + 4 hours (you can change 4 to any number)
//$readings_time[$i] = date("Y-m-d H:i:s", strtotime("$reading + 4 hours"));
$i += 1;
}*/
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$value2 = json_encode(array_reverse(array_column($sensor_data, 'value2')), JSON_NUMERIC_CHECK);
$value3 = json_encode(array_reverse(array_column($sensor_data, 'value3')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
/*echo $value1;
echo $value2;
echo $value3;
echo $reading_time;*/
$result->free();
$conn->close();
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
body {
min-width: 310px;
max-width: 1280px;
height: 500px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
<body>
<h2>ESP Weather Station</h2>
<div id="chart-temperature" class="container"></div>
<div id="chart-humidity" class="container"></div>
<div id="chart-pressure" class="container"></div>
<script>
var value1 = <?php echo $value1; ?>;
var value2 = <?php echo $value2; ?>;
var value3 = <?php echo $value3; ?>;
var reading_time = <?php echo $reading_time; ?>;
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'BME280 Temperature' },
series: [{
showInLegend: false,
data: value1
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
categories: reading_time
},
yAxis: {
title: { text: 'Temperature (Celsius)' }
//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false }
});
var chartH = new Highcharts.Chart({
chart:{ renderTo:'chart-humidity' },
title: { text: 'BME280 Humidity' },
series: [{
showInLegend: false,
data: value2
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
}
},
xAxis: {
type: 'datetime',
//dateTimeLabelFormats: { second: '%H:%M:%S' },
categories: reading_time
},
yAxis: {
title: { text: 'Humidity (%)' }
},
credits: { enabled: false }
});
var chartP = new Highcharts.Chart({
chart:{ renderTo:'chart-pressure' },
title: { text: 'BME280 Pressure' },
series: [{
showInLegend: false,
data: value3
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#18009c' }
},
xAxis: {
type: 'datetime',
categories: reading_time
},
yAxis: {
title: { text: 'Pressure (hPa)' }
},
credits: { enabled: false }
});
</script>
</body>
</html>
Después de agregar el $ nombre de base de datos, $nombre de usuario Y $contraseña Guarde el archivo y continúe con este proyecto.
// Your Database name
$dbname = "example_esp_data";
// Your Database user
$username = "example_esp_board";
// Your Database user password
$password = "YOUR_USER_PASSWORD";Si intenta acceder a su nombre de dominio en la siguiente ruta URL, verá lo siguiente:
https://example.com/esp-chart.php
¡Eso es todo! Si ve tres gráficos en blanco en su navegador, significa que todo está listo. En la siguiente sección aprenderá cómo publicar los valores de sus sensores ESP32 o ESP8266.
Usamos el para crear los diagramas. biblioteca de gráficos altos. Creamos tres gráficos: temperatura, humedad y presión en el tiempo. Los gráficos muestran un máximo de 40 puntos de datos y se agrega una nueva métrica cada 30 segundos, pero usted cambia estos valores en su código.
5. Configurando el ESP32 o ESP8266
Este proyecto es compatible con placas ESP32 y ESP8266. Todo lo que necesita hacer es ensamblar un circuito simple y cargar el boceto proporcionado para agregar temperatura, humedad, presión y más a su base de datos cada 30 segundos. El boceto es ligeramente diferente para cada tablero.
Piezas requeridas
Para este ejemplo, obtenemos los valores del sensor BME280. Aquí hay una lista de las piezas que necesitará para construir el circuito para este proyecto:
- placa ESP32 (leer Las mejores placas de desarrollo ESP32)
- Alternativa – ESP8266 Brett (leer Las mejores placas de desarrollo ESP8266)
- Sensor BME280
- Cables de puente
- tablero de circuitos
Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!
Esquema
El módulo de sensor BME280 que utilizamos se comunica a través del protocolo de comunicación I2C, por lo que debe conectarlo a los pines I2C del ESP32 o ESP8266.
Cableado BME280 con ESP32
Los pines ESP32 I2C son:
- GPIO 22: SCL (SCK)
- GPIO 21: SDA (IDE)
Así que monte su circuito como se muestra en el siguiente diagrama de circuito (lea las instrucciones completas para ESP32 con BME280).
Recomendaciones de literatura: Guía de referencia de asignación de pines ESP32
Cableado BME280 con ESP8266
Los pines ESP8266 I2C son:
- GPIO5 (D1): SCL (SCK)
- GPIO4 (D2): SDA (SDI)
Ensamble su circuito como en el siguiente esquema si está utilizando una placa ESP8266 (lea las instrucciones completas para ESP8266 con BME280).
Recomendaciones de literatura: Guía de referencia de distribución de pines ESP8266
Instalación de bibliotecas
Programamos el ESP32/ESP8266 usando Arduino IDE, por lo que el complemento ESP32/ESP8266 debe estar instalado en su Arduino IDE. Dependiendo de la placa que estés utilizando, sigue uno de los siguientes tutoriales:
- Instale la placa ESP32 en el IDE de Arduino. También necesita instalar la biblioteca BME280 y la biblioteca Adafruit_Sensor.
- Instale la placa ESP8266 en Arduino IDE: también necesita instalar la biblioteca BME280 y la biblioteca Adafruit_Sensor
código ESP32
Siga esta sección si está utilizando un ESP32. Para un ESP8266 haga clic aquí.
Después de instalar los complementos de placa necesarios, copie el siguiente código en su IDE de Arduino, pero no lo cargue todavía. Deberá realizar algunos cambios para que funcione para usted.
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-mysql-database-php/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <HTTPClient.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// REPLACE with your Domain name and URL path or IP address with path
//const char* serverName = "https://example.com/post-data.php";
// Keep this API Key value to be compatible with the PHP code provided in the project page.
// If you change the apiKeyValue value, the PHP file /post-esp-data.php also needs to have the same key
String apiKeyValue = "tPmAT5Ab3j7F9";
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());
// (you can also pass in a Wire library object like &Wire2)
bool status = bme.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BME280 sensor, check wiring or change I2C address!");
while (1);
}
}
void loop() {
//Check WiFi connection status
if(WiFi.status()== WL_CONNECTED){
WiFiClientSecure *client = new WiFiClientSecure;
client->setInsecure(); //don't use SSL certificate
HTTPClient https;
// Your Domain name with URL path or IP address with path
https.begin(*client, serverName);
// Specify content-type header
https.addHeader("Content-Type", "application/x-www-form-urlencoded");
// Prepare your HTTP POST request data
String httpRequestData = "api_key=" + apiKeyValue + "&value1=" + String(bme.readTemperature())
+ "&value2=" + String(bme.readHumidity()) + "&value3=" + String(bme.readPressure()/100.0F) + "";
Serial.print("httpRequestData: ");
Serial.println(httpRequestData);
// You can comment the httpRequestData variable above
// then, use the httpRequestData variable below (for testing purposes without the BME280 sensor)
//String httpRequestData = "api_key=tPmAT5Ab3j7F9&sensor=BME280&location=Office&value1=24.75&value2=49.54&value3=1005.14";
// Send HTTP POST request
int httpResponseCode = https.POST(httpRequestData);
// If you need an HTTP request with a content type: text/plain
//https.addHeader("Content-Type", "text/plain");
//int httpResponseCode = https.POST("Hello, World!");
// If you need an HTTP request with a content type: application/json, use the following:
//https.addHeader("Content-Type", "application/json");
//int httpResponseCode = https.POST("{"value1":"19","value2":"67","value3":"78"}");
if (httpResponseCode>0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Free resources
https.end();
}
else {
Serial.println("WiFi Disconnected");
}
//Send an HTTP POST request every 30 seconds
delay(30000);
}
Configuración de sus credenciales de red
Debe cambiar las siguientes líneas con sus credenciales de red: SSID y Contraseña. El código contiene comentarios detallados sobre dónde debe realizar los cambios.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Configurando el nombre de su servidor
También deberá ingresar su nombre de dominio para que ESP publique las métricas en su propio servidor.
const char* serverName = "https://example.com/post-data.php";Ahora puedes subir el código a tu tablero.
Nota: La mayoría de los servidores requieren solicitudes HTTPS. El código anterior garantiza que las solicitudes HTTPS cumplan con los requisitos de la mayoría de los servidores en la nube actuales.
¿Su servidor no soporta HTTPS? Utilice este código en su lugar.
Así es como funciona el código
Dado que este proyecto ya es bastante extenso, no entraremos en detalles sobre cómo funciona el código. Sin embargo, aquí hay un breve resumen:
- Importe todas las bibliotecas para que funcione.
- Establezca las variables que quizás desee cambiar (Valor de clave API);
- El Valor de clave API es solo una cadena aleatoria que puedes cambiar. Se utiliza por razones de seguridad para que sólo alguien que conozca su clave API pueda publicar datos en su base de datos;
- Inicialice las comunicaciones en serie para fines de depuración.
- Conéctese a su enrutador a través de Wi-Fi;
- Inicialice el BME280 para obtener lecturas.
- Inicialice un cliente WiFi seguro.
Entonces, en Cinta() Aquí realiza la solicitud HTTP POST cada 30 segundos con las últimas lecturas de BME280:
// Your Domain name with URL path or IP address with path
http.begin(serverName);
// Specify content-type header
http.addHeader("Content-Type", "application/x-www-form-urlencoded");
// Prepare your HTTP POST request data
String httpRequestData = "api_key=" + apiKeyValue + "&value1="
+ String(bme.readTemperature())
+ "&value2=" + String(bme.readHumidity())
+ "&value3=" + String(bme.readPressure()/100.0F) + "";
int httpResponseCode = http.POST(httpRequestData);Puedes comentar sobre el httpSolicitudDatos Variable anterior que vincula todas las lecturas del BME280 y utiliza el httpSolicitudDatos Variable a continuación para fines de prueba:
String httpRequestData = "api_key=tPmAT5Ab3j7F9&value1=24.75&value2=49.54&value3=1005.14";Obtenga más información sobre las solicitudes HTTPS con ESP32: Solicitudes HTTPS ESP32 (Arduino IDE).
código ESP8266
Siga esta sección si está utilizando un ESP8266. Para obtener información sobre un ESP32, consulte la sección anterior..
Después de instalar las bibliotecas y complementos de la placa necesarios, copie el siguiente código en su IDE de Arduino, pero no lo cargue todavía. Deberá realizar algunos cambios para que funcione para usted.
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-mysql-database-php/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClientSecureBearSSL.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = "https://example.com/post-data.php";
// Keep this API Key value to be compatible with the PHP code provided in the project page.
// If you change the apiKeyValue value, the PHP file /post-esp-data.php also needs to have the same key
String apiKeyValue = "tPmAT5Ab3j7F9";
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());
// (you can also pass in a Wire library object like &Wire2)
bool status = bme.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BME280 sensor, check wiring or change I2C address!");
while (1);
}
}
void loop() {
//Check WiFi connection status
if(WiFi.status()== WL_CONNECTED){
std::unique_ptr<BearSSL::WiFiClientSecure>client(new BearSSL::WiFiClientSecure);
// Ignore SSL certificate validation
client->setInsecure();
//create an HTTPClient instance
HTTPClient https;
// Your Domain name with URL path or IP address with path
https.begin(*client, serverName);
// Specify content-type header
https.addHeader("Content-Type", "application/x-www-form-urlencoded");
// Prepare your HTTP POST request data
String httpRequestData = "api_key=" + apiKeyValue + "&value1=" + String(bme.readTemperature())
+ "&value2=" + String(bme.readHumidity()) + "&value3=" + String(bme.readPressure()/100.0F) + "";
Serial.print("httpRequestData: ");
Serial.println(httpRequestData);
// You can comment the httpRequestData variable above
// then, use the httpRequestData variable below (for testing purposes without the BME280 sensor)
//String httpRequestData = "api_key=tPmAT5Ab3j7F9&sensor=BME280&location=Office&value1=24.75&value2=49.54&value3=1005.14";
// Send HTTP POST request
int httpResponseCode = https.POST(httpRequestData);
// If you need an HTTP request with a content type: text/plain
//http.addHeader("Content-Type", "text/plain");
//int httpResponseCode = https.POST("Hello, World!");
// If you need an HTTP request with a content type: application/json, use the following:
//http.addHeader("Content-Type", "application/json");
//int httpResponseCode = https.POST("{"value1":"19","value2":"67","value3":"78"}");
if (httpResponseCode>0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Free resources
https.end();
}
else {
Serial.println("WiFi Disconnected");
}
//Send an HTTP POST request every 30 seconds
delay(30000);
}
Configuración de sus credenciales de red
Debe cambiar las siguientes líneas con sus credenciales de red: SSID y Contraseña. El código contiene comentarios detallados sobre dónde debe realizar los cambios.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Configurando el nombre de su servidor
También deberá ingresar su nombre de dominio para que ESP publique las métricas en su propio servidor.
const char* serverName = "https://example.com/post-data.php";Ahora puedes subir el código a tu tablero.
rnt_box type=”3″]La mayoría de los servidores requieren solicitudes HTTPS. El código anterior garantiza que las solicitudes HTTPS cumplan con los requisitos de la mayoría de los servidores en la nube actuales.
¿Su servidor no soporta HTTPS? Utilice este código en su lugar.
Obtenga más información sobre las solicitudes HTTPS con ESP8266: Solicitudes HTTPS ESP8266 NodeMCU (Arduino IDE).
demostración
Después de completar todos los pasos, deje que su placa ESP recopile algunas métricas y las publique en su servidor.
Si todo está correcto, deberías ver lo siguiente en tu Arduino IDE Serial Monitor:
Si abre su nombre de dominio en esta ruta URL:
https://example.com/esp-chart.phpDebería ver todas las métricas almacenadas en su base de datos. Actualice la página web para ver las métricas más recientes:
También puedes ir a phpMyAdmin para ver el en tu sensor Tabla. Puedes borrarlos, editarlos, etc.
Envolver
En este tutorial, aprendió cómo publicar datos de sensores en una base de datos en su propio dominio de servidor al que puede acceder desde cualquier parte del mundo. Para hacer esto necesitas tu propio servidor y nombre de dominio (también puedes usar una Raspberry Pi para acceso local).
Con esta configuración usted controla su servidor y puede cambiar a otro host si es necesario. Existen muchas soluciones en la nube gratuitas y de pago que puede utilizar para publicar sus métricas. Sin embargo, estos servicios pueden tener varias desventajas: limitaciones en la cantidad de métricas que puedes publicar, la cantidad de dispositivos conectados, quién puede ver tus datos, etc. Además, el servicio en la nube puede suspenderse o cambiarse en cualquier momento.
El ejemplo proporcionado es lo más simple posible para ayudarlo a comprender cómo funciona todo. Después de comprender este ejemplo, puede cambiar la apariencia de la página web, publicar diferentes valores de sensores, publicar desde múltiples placas ESP y más.
Usted también puede estar interesado en:
- ESP32 publica valores de sensores en Google Sheets (compatible con ESP8266)
- Mostrar valores de sensores en diagramas en tiempo real (servidor web ESP local)
- Inserte datos ESP32/ESP8266 en la base de datos MySQL usando PHP y Arduino IDE
Obtenga más información sobre el ESP32 con nuestros recursos:
- Aprenda ESP32 con Arduino IDE
- Construya servidores web con ESP32 y ESP8266
- Aplicación web Firebase con ESP32 y ESP8266
- HOGAR INTELIGENTE con Raspberry Pi, ESP32 y ESP8266
- Proyectos y tutoriales ESP32 gratuitos…
Gracias por leer.
Visualiza los valores de tus sensores desde cualquier parte del mundo (ESP32/ESP8266 + MySQL + PHP)
En este proyecto, crearás una página web que muestra lecturas de sensores en un gráfico al que puedes acceder desde cualquier parte del mundo. En resumen, construirás un cliente ESP32 o ESP8266 que envía una solicitud a un script PHP para publicar lecturas de sensores en una base de datos MySQL.
Actualizado el 26 de marzo de 2023
Como ejemplo, utilizaremos un sensor BME280 conectado a una placa ESP. Puedes modificar el código proporcionado para enviar lecturas de un sensor diferente o utilizar múltiples placas.
Tecnologías utilizadas en este proyecto:
- ESP32 o ESP8266 programado con Arduino IDE
- Servidor de alojamiento y nombre de dominio
- Script PHP para insertar datos en la base de datos MySQL y mostrarlos en una página web
- Base de datos MySQL para almacenar lecturas
- Script PHP para graficar datos de la base de datos en gráficos
Preguntas Frecuentes:
- ¿Para qué sirve este proyecto?
- ¿Qué necesito para llevar a cabo este proyecto?
- ¿Puedo modificar el código para adaptarlo a mis necesidades?
- ¿Por qué es importante tener mi propio servidor y dominio?
El objetivo principal es permitirte visualizar las lecturas de tus sensores desde cualquier lugar del mundo, utilizando un ESP32 o ESP8266 como cliente para enviar y almacenar los datos en una base de datos MySQL.
Necesitarás una placa ESP32 o ESP8266, un sensor BME280, un servidor de alojamiento con soporte para PHP y MySQL, y un dominio.
Sí, el código proporcionado es un punto de partida que puedes personalizar según tus requisitos, como cambiar los sensores utilizados o ajustar la frecuencia de actualización de las lecturas.
Tener tu propio servidor y dominio te brinda control total sobre tus datos y garantiza que siempre puedas acceder a tus lecturas de sensores sin depender de plataformas de terceros que pueden tener limitaciones o cambiar sus políticas.
¡Gracias por leer y esperamos que este proyecto te ayude a visualizar tus lecturas de sensores de forma remota!
¡Qué interesante! Me encantaría poder ver los valores de mis sensores desde cualquier parte, gracias por compartir este proyecto.
Now your comment:
¡Esto es genial! Poder monitorear mis sensores desde donde sea me parece súper útil, definitivamente quiero probarlo. ¡Gracias por la info!
¡Me parece una idea genial! Nunca imaginé que sería posible ver los valores de los sensores desde cualquier parte del mundo. Definitivamente voy a intentarlo, ¡gracias por compartir este proyecto!