Dans ce projet, vous allez créer une page Web qui affiche les lectures des capteurs dans un tracé auquel vous pouvez accéder de n’importe où dans le monde. En résumé, vous allez créer un client ESP32 ou ESP8266 qui envoie une requête à un script PHP pour publier les lectures de capteurs dans une base de données MySQL.
Mis à jour le 26 mars 2023
À titre d’exemple, nous utiliserons un capteur BME280 connecté à une carte ESP. Vous pouvez modifier le code fourni pour envoyer les lectures d’un capteur différent ou utiliser plusieurs cartes.
Pour créer ce projet, vous utiliserez ces technologies :
- ESP32 ou ESP8266 programmé avec Arduino IDE
- Serveur d’hébergement et nom de domaine
- Script PHP pour insérer des données dans la base de données MySQL et les afficher sur une page Web
- Base de données MySQL pour stocker les lectures
- Script PHP pour tracer les données de la base de données dans des graphiques
Vous pourriez également trouver utile de lire ces projets :
Table des matières
Le projet est divisé en les principales sections suivantes :
- Hébergement de votre application PHP et de votre base de données MySQL
- Préparation de votre base de données MySQL
- PHP Script HTTP POST – Insérer des données dans la base de données MySQL
- Script PHP – Visualiser le contenu de la base de données dans un graphique
- Configuration de l’ESP32 ou de l’ESP8266
Regardez la démonstration vidéo
Pour voir comment fonctionne le projet, vous pouvez regarder la vidéo de démonstration suivante :
1. Hébergement de votre application PHP et de votre base de données MySQL
L’objectif de ce projet est d’avoir votre propre nom de domaine et compte d’hébergement qui vous permet de stocker les lectures des capteurs de l’ESP32 ou de l’ESP8266. Vous pouvez visualiser les lectures de n’importe où dans le monde en accédant à votre propre domaine de serveur. Voici un aperçu de haut niveau du projet :
Je recommande d’utiliser l’un des services d’hébergement suivants qui peuvent gérer toutes les exigences du projet :
- Bluehost (convivial avec cPanel) : nom de domaine gratuit lors de la souscription au plan de 3 ans. Je recommande de choisir l’option de sites Web illimités ;
- Digital Ocean : serveur Linux que vous gérez via une ligne de commande. Je n’ai recommandé cette option qu’aux utilisateurs avancés.
Ces deux services sont ceux que j’utilise et que je recommande personnellement, mais vous pouvez utiliser n’importe quel autre service d’hébergement. Tout service d’hébergement proposant PHP et MySQL fonctionnera avec ce didacticiel. Si vous n’avez pas de compte d’hébergement, je vous recommande de vous inscrire à Bluehost.
Obtenez un hébergement et un nom de domaine avec Bluehost »
Lors de l’achat d’un compte d’hébergement, vous devrez également acheter un nom de domaine. C’est ce qui rend ce projet intéressant : vous pourrez accéder à votre nom de domaine (http://example.com) et voir vos lectures ESP.
Si vous aimez nos projets, vous pourriez envisager de vous inscrire à l’un des services d’hébergement recommandés, car vous soutiendrez notre travail.
Remarque : vous pouvez également exécuter un serveur LAMP (Linux, Apache, MySQL, PHP) sur un Raspberry Pi pour accéder aux données de votre réseau local. Cependant, le but de ce tutoriel est de publier des lectures dans votre propre nom de domaine auquel vous pouvez accéder de n’importe où dans le monde. Cela vous permet d’accéder facilement à vos lectures ESP sans dépendre d’une plate-forme IoT tierce.
2. Préparation de votre base de données MySQL
Après avoir créé un compte d’hébergement et configuré un nom de domaine, vous pouvez vous connecter à votre cPanel ou à un tableau de bord similaire. Après cela, suivez les étapes suivantes pour créer votre base de données, votre nom d’utilisateur, votre mot de passe et votre table SQL.
Création d’une base de données et d’un utilisateur
Ouvrez l’onglet « Avancé »:
1. Tapez « base de données » dans la barre de recherche et sélectionnez « Assistant de base de données MySQL ».
2. Entrez le nom de votre base de données souhaitée. Dans mon cas, le nom de la base de données est esp_data. Ensuite, appuyez sur le bouton « Étape suivante » :
Remarque : plus tard, vous devrez utiliser le nom de la base de données avec le préfixe que votre hébergeur vous donne (mon préfixe de base de données dans la capture d’écran ci-dessus est flou). Je l’appellerai désormais example_esp_data.
3. Tapez votre nom d’utilisateur de base de données et définissez un mot de passe. Vous devez enregistrer tous ces détails, car vous en aurez besoin plus tard pour établir une connexion à la base de données avec votre code PHP.
C’est ça! Votre nouvelle base de données et votre nouvel utilisateur ont été créés avec succès. Maintenant, enregistrez toutes vos informations, car vous en aurez besoin plus tard :
- Nom de la base de données : example_esp_data
- Nom d’utilisateur : example_esp_board
- Mot de passe : votre mot de passe
Création d’un tableau SQL
Après avoir créé votre base de données et votre utilisateur, revenez au tableau de bord cPanel et recherchez « phpMyAdmin ».
Dans la barre latérale gauche, sélectionnez le nom de votre base de données example_esp_data et ouvrez l’onglet « SQL ».
Important : assurez-vous d’avoir ouvert la base de données example_esp_data. Ensuite, cliquez sur l’onglet SQL. Si vous ne suivez pas ces étapes exactes et n’exécutez pas la requête SQL, vous risquez de créer une table dans la mauvaise base de données.
Copiez la requête SQL dans l’extrait de code suivant :
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
)
Collez-le dans le champ de requête SQL (surligné d’un rectangle rouge) et appuyez sur le bouton « Go » pour créer votre table :
Après cela, vous devriez voir votre table nouvellement créée appelée Sensor dans la base de données example_esp_data, comme indiqué dans la figure ci-dessous :
3. PHP Script HTTP POST – Insérer des données dans la base de données MySQL
Dans cette section, nous allons créer un script PHP qui reçoit les requêtes entrantes de l’ESP32 ou de l’ESP8266 et insère les données dans une base de données MySQL.
Si vous utilisez un fournisseur d’hébergement avec cPanel, vous pouvez rechercher « Gestionnaire de fichiers » :
Ensuite, sélectionnez l’option public_html et appuyez sur le bouton « + Fichier » pour créer un nouveau fichier .php.
Remarque : si vous suivez ce tutoriel et que vous n’êtes pas familier avec PHP ou MySQL, je vous recommande de créer ces fichiers exacts. Sinon, vous devrez modifier l’esquisse ESP fournie avec différents chemins d’URL.
Créez un nouveau fichier dans /public_html avec ce nom et cette extension exacts : post-data.php
Modifiez le fichier nouvellement créé (post-data.php) et copiez l’extrait suivant :
<?php
/*
Rui Santos
Complete project details at https://Raspberryme.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;
}
Avant d’enregistrer le fichier, vous devez modifier les variables $dbname, $username et $password avec vos détails uniques :
// Your Database name
$dbname = "example_esp_data";
// Your Database user
$username = "example_esp_board";
// Your Database user password
$password = "YOUR_USER_PASSWORD";Après avoir ajouté le nom de la base de données, le nom d’utilisateur et le mot de passe, enregistrez le fichier et continuez avec ce didacticiel. Si vous essayez d’accéder à votre nom de domaine dans le chemin d’URL suivant, vous verrez le message :
http://example.com/post-data.php
4. Script PHP – Visualiser le contenu de la base de données dans un graphique
Créez un autre fichier PHP dans le répertoire /public_html qui tracera le contenu de la base de données dans un graphique sur une page Web. Nommez votre nouveau fichier : esp-chart.php
Editez le fichier nouvellement créé (esp-chart.php) et copiez le code suivant :
<!--
Rui Santos
Complete project details at https://Raspberryme.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>
Après avoir ajouté $dbname, $username et $password, enregistrez le fichier et poursuivez ce projet.
// Your Database name
$dbname = "example_esp_data";
// Your Database user
$username = "example_esp_board";
// Your Database user password
$password = "YOUR_USER_PASSWORD";Si vous essayez d’accéder à votre nom de domaine dans le chemin d’URL suivant, vous verrez ce qui suit :
https://example.com/esp-chart.php
C’est ça! Si vous voyez trois graphiques vides dans votre navigateur, cela signifie que tout est prêt. Dans la section suivante, vous apprendrez à publier les lectures de vos capteurs ESP32 ou ESP8266.
Pour construire les graphiques, nous utiliserons le Bibliothèque Highcharts. Nous allons créer trois graphiques : température, humidité et pression dans le temps. Les graphiques affichent un maximum de 40 points de données et une nouvelle lecture est ajoutée toutes les 30 secondes, mais vous modifiez ces valeurs dans votre code.
5. Configuration de l’ESP32 ou de l’ESP8266
Ce projet est compatible avec les cartes ESP32 et ESP8266. Il vous suffit d’assembler un circuit simple et de télécharger le croquis fourni pour insérer la température, l’humidité, la pression, etc. dans votre base de données toutes les 30 secondes. Le croquis est légèrement différent pour chaque planche.
Pièces requises
Pour cet exemple, nous obtiendrons les lectures du capteur du capteur BME280. Voici une liste des pièces dont vous avez besoin pour construire le circuit pour ce projet :
Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
Schémas
Le module de capteur BME280 que nous utilisons communique via le protocole de communication I2C, vous devez donc le connecter aux broches ESP32 ou ESP8266 I2C.
Câblage BME280 vers ESP32
Les broches ESP32 I2C sont :
- GPIO 22 : SCL (SCK)
- GPIO 21 : SDA (SDI)
Alors, assemblez votre circuit comme indiqué dans le diagramme schématique suivant (lisez le Guide complet pour ESP32 avec BME280).
Lecture recommandée : Guide de référence du brochage ESP32
Câblage BME280 vers ESP8266
Les broches ESP8266 I2C sont :
- GPIO 5 (D1): SCL (SCK)
- GPIO 4 (D2) : SDA (SDI)
Assemblez votre circuit comme dans le schéma suivant si vous utilisez une carte ESP8266 (lisez le Guide complet pour ESP8266 avec BME280).
Lecture recommandée : Guide de référence du brochage ESP8266
Installation des bibliothèques
Nous allons programmer l’ESP32/ESP8266 à l’aide de l’IDE Arduino, vous devez donc avoir le module complémentaire ESP32/ESP8266 installé dans votre IDE Arduino. Suivez l’un des tutoriels suivants en fonction de la carte que vous utilisez :
Code ESP32
Suivez cette section si vous utilisez un ESP32. Pour un ESP8266 cliquez ici.
Après avoir installé les modules complémentaires de carte nécessaires, copiez le code suivant dans votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter quelques modifications pour que cela fonctionne pour vous.
/*
Rui Santos
Complete project details at https://Raspberryme.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);
}
Définition de vos identifiants réseau
Vous devez modifier les lignes suivantes avec vos identifiants réseau : SSID et mot de passe. Le code est bien commenté sur l’endroit où vous devez apporter les modifications.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Définition de votre nom de serveur
Vous devez également saisir votre nom de domaine, afin que l’ESP publie les lectures sur votre propre serveur.
const char* serverName = "https://example.com/post-data.php";Maintenant, vous pouvez télécharger le code sur votre tableau.
Remarque : La plupart des serveurs nécessitent que vous fassiez des requêtes HTTPS. Le code ci-dessus rend les requêtes HTTPS conformes aux exigences de la plupart des serveurs cloud de nos jours.
Votre serveur ne supporte pas le HTTPS ? Utilisez plutôt ce code.
Comment fonctionne le code
Ce projet est déjà assez long, nous ne détaillerons donc pas le fonctionnement du code, mais voici un petit résumé :
- Importez toutes les bibliothèques pour le faire fonctionner ;
- Définissez les variables que vous voudrez peut-être modifier (apiKeyValue) ;
- L’apiKeyValue est juste une chaîne aléatoire que vous pouvez modifier. Il est utilisé pour des raisons de sécurité, de sorte que seule toute personne connaissant votre clé API peut publier des données dans votre base de données ;
- Initialisez la communication série à des fins de débogage ;
- Établissez une connexion Wi-Fi avec votre routeur ;
- Initialisez le BME280 pour obtenir des lectures ;
- Initialisez un client WiFi sécurisé.
Ensuite, dans la boucle () est l’endroit où vous effectuez réellement la requête HTTP POST toutes les 30 secondes avec les dernières lectures 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);Vous pouvez commenter la variable httpRequestData ci-dessus qui concatène toutes les lectures BME280 et utiliser la variable httpRequestData ci-dessous à des fins de test :
String httpRequestData = "api_key=tPmAT5Ab3j7F9&value1=24.75&value2=49.54&value3=1005.14";En savoir plus sur les requêtes HTTPS avec l’ESP32 : requêtes HTTPS ESP32 (Arduino IDE).
Code ESP8266
Suivez cette section si vous utilisez un ESP8266. Pour un ESP32, consultez la section ci-dessus.
Après avoir installé les modules complémentaires et les bibliothèques de cartes nécessaires, copiez le code suivant dans votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter quelques modifications pour que cela fonctionne pour vous.
/*
Rui Santos
Complete project details at https://Raspberryme.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);
}
Définition de vos identifiants réseau
Vous devez modifier les lignes suivantes avec vos identifiants réseau : SSID et mot de passe. Le code est bien commenté sur l’endroit où vous devez apporter les modifications.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Définition de votre nom de serveur
Vous devez également saisir votre nom de domaine, afin que l’ESP publie les lectures sur votre propre serveur.
const char* serverName = "https://example.com/post-data.php";Maintenant, vous pouvez télécharger le code sur votre tableau.
rnt_box type=”3″]La plupart des serveurs exigent que vous fassiez des requêtes HTTPS. Le code ci-dessus rend les requêtes HTTPS conformes aux exigences de la plupart des serveurs cloud de nos jours.
Votre serveur ne supporte pas le HTTPS ? Utilisez plutôt ce code.
En savoir plus sur les requêtes HTTPS avec l’ESP8266 : ESP8266 NodeMCU HTTPS Requests (Arduino IDE).
Manifestation
Après avoir terminé toutes les étapes, laissez votre carte ESP collecter des lectures et les publier sur votre serveur.
Si tout est correct, voici ce que vous devriez voir dans votre moniteur série Arduino IDE :
Si vous ouvrez votre nom de domaine dans ce chemin URL :
https://example.com/esp-chart.phpVous devriez voir toutes les lectures stockées dans votre base de données. Actualisez la page Web pour voir les dernières lectures :
Vous pouvez également vous rendre sur phpMyAdmin pour gérer les données stockées dans votre table Sensor. Vous pouvez le supprimer, le modifier, etc…
Conclusion
Dans ce didacticiel, vous avez appris à publier des données de capteur dans une base de données de votre propre domaine de serveur à laquelle vous pouvez accéder depuis n’importe où dans le monde. Cela nécessite que vous ayez votre propre serveur et nom de domaine (vous pouvez également utiliser un Raspberry Pi pour un accès local).
Avec cette configuration, vous contrôlez votre serveur et pouvez vous déplacer vers un autre hôte si nécessaire. Il existe de nombreuses solutions cloud gratuites et payantes que vous pouvez utiliser pour publier vos lectures, mais ces services peuvent présenter plusieurs inconvénients : des restrictions sur le nombre de lectures que vous pouvez publier, le nombre d’appareils connectés, qui peut voir vos données, etc. , le service cloud peut être interrompu ou modifié à tout moment.
L’exemple fourni est le plus simple possible afin que vous puissiez comprendre comment tout fonctionne. Après avoir compris cet exemple, vous pouvez modifier l’apparence de la page Web, publier différentes lectures de capteurs, publier à partir de plusieurs cartes ESP, et bien plus encore.
Vous aimerez peut-être aussi lire :
En savoir plus sur l’ESP32 avec nos ressources :
Merci pour la lecture.
Cette vidéo vous emmène dans l’histoire de Raspberry Pi :
