getpost27

	TP n°35 : Application hybride <- Json -> objets connectés
Noms :	....
Centre d'intérêt :	CI 5 Communication entre systèmes
Classe :	Term Sti2d Sin
Id programme :	sin15, sin31
Conditions :	binôme , durée 3 heures.
Matériel :	- un ordinateur; - un Esp32 ou Esp8266; - une smartphone ou une tablette;
Logiciel :	- l'ide Netbeans; - l'ide arduino; - Utiliser le navigateur chrome;
Document :

I. Objectifs

Mettre en forme les données;
Programmer en C++ et HTML5;
Envoyer et recevoir des données.

II. Introduction

Nous avons vu que les données peuvent être structurées sous différents formats.

XML et JSON sont les plus répandus.

Exemple de données au format xml :

Exemple de données au format json :

{
"temp":19.07,
"humi":27,
"led1":"OFF"
}

Nous voyons que le format Json est plus avantageux que le Xml. En effet, il est plus :

Légé (donc vitesse de traitement réduite),
Simple à mettre en oeuvre par les développeurs,
Lisible aussi bien par l'Homme que par la machine.

III. Traitement json sur Esp

En mode serveur

//Charger la librairie Wifi pour l'Esp
#include <ESP8266WiFi.h>

//declaration des parametres wifi
const char* ssid = "EspSin";
const char* password = "12345678";

WiFiServer server(80); //Utilise le port http

void setup() {
 Serial.begin(115200);
 delay(10);
 Serial.println(WiFi.localIP());
 // prepare GPIO2
 //Declare la sortie BUILTIN_LED
 pinMode(BUILTIN_LED, OUTPUT);
 digitalWrite(BUILTIN_LED, LOW);

// Connection au Wifi de la salle
 Serial.println();
 Serial.println();
 Serial.print("Connecting to ");
 Serial.println(ssid);

//Déclaration du point d'accès
 WiFi.mode(WIFI_AP); 
 WiFi.softAP(ssid, password);

//Demarrage du serveur
 server.begin();
 Serial.println("Serveur Esp Ok");

//Affiche l'adresse IP de l'Esp
 Serial.println(WiFi.localIP());
}

void loop() {
 //Teste si un client est connecté
 
 WiFiClient client = server.available();
 if (!client) {
 return;
 }

// Attend que le client envoie des données
 while (!client.available()) {
 delay(1);
 }

//Récupère la 1ère ligne de la requète
 String req = client.readStringUntil('\r');
 client.flush();

//Traite la requète
 if (req.indexOf("") != -10) { //Vérifie si c'est la page principale

if (req.indexOf("/OFF") != -1) { //Vérifie si OFF
 digitalWrite(BUILTIN_LED, LOW);
 Serial.println("Led OFF");
 }
 if (req.indexOf("/ON") != -1) { //Vérifie si ON
 digitalWrite(BUILTIN_LED, HIGH);
 Serial.println("Led ON");
 }
 }
 else {
 Serial.println("invalid request");
 client.stop();
 return;
 }

//Créer la réponse Json
 String s = "HTTP/1.1 200 OK\r\n";
 s += "Content-Type: application/json\r\n\r\n";
 s += "{";
 s += "'temp':";
 s += analogRead(A0);
 s += ",'humi':";
 s += analogRead(A0);
 s += ",'led1':";
 s += digitalRead(3);
 s += "}";
 
 client.flush(); //initialise le client.print


 //Envoie le json au client
 client.print(s);
 delay(1);
}

Envoyer sur un serveur (mode client)

#include <ESP8266HTTPClient.h>
#include <ESP8266WiFi.h>
#include <ArduinoJson.h>
 
void setup() {
 
 Serial.begin(115200); //Serial connection
 WiFi.begin("YourNetworkName", "YourPassword"); //WiFi connection
 
 while (WiFi.status() != WL_CONNECTED) { //Wait for the WiFI connection completion
 
 delay(500);
 Serial.println("Waiting for connection");
 
 }
 
}
 
void loop() {
 
 if (WiFi.status() == WL_CONNECTED) { //Check WiFi connection status
 
 StaticJsonBuffer<300> JSONbuffer; //Declaring static JSON buffer
 JsonObject& JSONencoder = JSONbuffer.createObject(); 
 
JSONencoder["temp"] = analogRead(A0);
 JSONencoder["humi"] = analogRead(A0);
 JSONencoder["led1"] = digitalRead(3);
 
 char JSONmessageBuffer[300];
 JSONencoder.prettyPrintTo(JSONmessageBuffer, sizeof(JSONmessageBuffer));
 Serial.println(JSONmessageBuffer);
 
 HTTPClient http; //Declare object of class HTTPClient
 
 http.begin("http://sciencesappliquees.com/postjson"); //Specify request destination
 http.addHeader("Content-Type", "application/json"); //Specify content-type header
 
 int httpCode = http.POST(JSONmessageBuffer); //Send the request
 String payload = http.getString(); //Get the response payload
 
 Serial.println(httpCode); //Print HTTP return code
 Serial.println(payload); //Print request response payload
 
 http.end(); //Close connection
 
 } else {
 
 Serial.println("Error in WiFi connection");
 
 }
 
 delay(30000); //Send a request every 30 seconds
 
}

IV.Application hybride

Ouvrir le l'invité de commande :

cordova create monApp monapp.com monApp

cd monApp

cordova platform add android

cordova platform add windows

Aller dans le répertoire monapp\www

modifier index.php comme ci-dessous :

<!DOCTYPE html>

<html>
<head>
<title>Hello World</title>
<script src="https://www.rgraph.net/libraries/RGraph.common.core.js" ></script>
<script src="https://www.rgraph.net/libraries/RGraph.thermometer.js" ></script>
</head>
<body>
<div>temp=<spam id='temp'></spam>°C</div>
<div id='humi'></div>
<div id='led1'></div>

<script>

function lancerRequete(){
var maRequete = null; //initialiser l'objet

//déclare l'objet requete
if(window.XMLHttpRequest){
maRequete = new XMLHttpRequest();
}

//url du serveur
var url = "http://sciencesappliquees.com/templates/php/json.php";

//Choisir le type de requete
maRequete.open("GET", url, true);

//gestion de la reponse du serveur
maRequete.onreadystatechange = function(){
if(maRequete.readyState == 4){
//affiche la réponse du serveur
//alert(maRequete.responseText);
var data = JSON.parse(maRequete.responseText);
document.getElementById('temp').innerHTML = data.temp;
document.getElementById('humi').innerHTML = data.humi;
document.getElementById('led1').innerHTML = data.led1;

}
}

//envoyer la requete au serveur
maRequete.send();

//relance la fonction au bout de 2 secondes
setTimeout('lancerRequete()', 1000);
}
//lance la fonction
lancerRequete();
</script>
</body>
</html>

Source : https://techtutorialsx.com/2017/01/08/esp8266-posting-json-data-to-a-flask-server-on-the-cloud/

TP n°35 : Application hybride objets connectés

TP n°35 : Application hybride <- Json -> objets connectés

I. Objectifs

II. Introduction