---
tags: GISTRE
title: IoT mini-projet 1
---
# IoT Mini-Projet 1: REST et MQTT
## MQTT
### Côté serveur : Node Red
La première étape est d'installer Node Red.
```bash=
sudo snap install node-red
```
Une fois lancé, nous avons paramétré Node Red pour que celui-ci communique avec notre broker.
Le switch permet d'envoyer un booléen à l'ESP qui détermine si l'ESP doit allumer ou éteindre la led.
floor1/temp et /hum permettent de récupérer les données envoyées par le client et d'ensuite les stocker dans des graphiques.
Notre UI ressemble à :
### Côté Broker : Mosquitto
Nous avons choisi le broker Mosquitto. Pour l'installer nous avons utilisé ces deux commandes :
```bash=
sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa
sudo apt-get update
```
Travaillant en local il nous a juste suffi de lancer Mosquitto et de nous connecter sur l'adresse locale de notre ordinateur.
### Côté client : Esp32
Dans cette partie nous allons décrire brièvement à quoi nous a servi chacune des bibliothèques que nous avons utilisées.
#### WiFi
Pour nos tests nous nous sommes servis de cette bibliothèque pour connecter l’ESP32 à la connexion partagée d’un téléphone.
#### PubSubClient
Une bibliothèque pour envoyer des messages MQTT.
#### DHT
Une bibliothèque pour récuperer la temperature et l'humidité de notre DHT.
## REST
### Côté serveur : application Flask
Pour la partie REST nous avons développé une application Flask acceptant des différentes routes:
```
/
/switch
```
#### La route `/`
##### Requête GET
La requête GET sur cette route renvoie sur la page principale de l'application.
#### La route `/switch`
##### Requête POST
Une requête de type POST sur cette route a pour effet d'inverser le booléen interne de l'application qui a pour rôle de donner l'état de la LED. Autrement dit si ce booléen est à True la LED est allumée et s'il est à False, la LED est éteinte.
##### Requête GET (partie downlink)
Renvoie un JSON contenant la valeur du booléen donnant une information de l'état du booléen switch.
Nous avons fait en sorte qu'une requête de la sorte suivie d'une chaîne de requête (ou `query string` en anglais) de la forme `?temperature=<temperature_value>&humidity=<humidity_value>` mette à jour les valeurs et les ajoutent à leurs tableaux respectifs dans l'application.
Chaque mise à jour de la température et de l'humidité créer deux fichiers PNG, `temperature.png` et `humidity.png` qui sont le résultat de la sauvegarde des graphiques respectifs de la température et l'humidité par le biais de la bibliothèque Matplotlib. Ces deux images seront affichées sur la page d'accueil.
#### Template `homepage.html`
```html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>IoT REST practical</title>
</head>
<body>
<h1>Welcome to IoT REST supervisor</h1>
<!-- Le reste du contenu -->
<form action="{{ url_for('switch') }}" method="post" class="form-example">
<div class="form-example">
<input type="submit" value="Switch Led!">
</div>
</form>
<p>
Current LED state:
{% if led_state %}
On
{% else %}
Off
{% endif %}
</p>
<img src="{{ url_for('static', filename='temperature.png') }}"/>
<img src="{{ url_for('static', filename='humidity.png') }}"/>
</body>
</html>
```
Rapide description de ce qu'il y a sur la page:
- Titre d'onglet (balise `<title>`)
- Un message de bienvenue (balise `<h1>`)
- Un bouton pour changer l'état de la LED (balise `<form>`)
- Une phrase d'information concernant l'état de la LED en fonction du booléen interne `app.switch`.
- Les images `temperature.png` et `humidity.png`, les graphiques générés par Matplotlib. (balise `<img>`)
#### Lancer l'application Flask
```bash=
cd flask_project \
pip install -r requirements.txt \
./app.py
```
Etant sur un réseau local nous avons fait en sorte que notre application Flask soit sur l'adresse et le port suivant: `192.168.43.125:5000`. C'est donc à cette adresse que l'ESP32 va communiquer et récupérer les différentes informations.
Pour voir les changements sur les graphiques, il faut rafraîchir la page.
Puisqu'il se peut que l'adresse IP que nous avons mis ne corresponde pas, il est possible de changer la ligne
```python=
app.run(host="192.168.43.125")
```
par une autre valable.
Comme dit précédemment les graphiques de température et d'humidité sont générés lorsque que l'on effectue une requête GET sur la route `/switch` avec une `query string`. De ce fait, il est possible de tester l'application REST à la main en faisant plusieurs requêtes successives, par exemple:
```
<ipaddress>/?temperature=20&humidity=43.7
<ipaddress>/?temperature=22&humidity=48.2
<ipaddress>/?temperature=21.3&humidity=45.8
```
### Côté client : ESP32
Dans cette partie nous allons décrire brièvement à quoi nous a servi chacune des bibliothèques que nous avons utilisées.
#### WiFi
Pour nos tests nous nous sommes servis de cette bibliothèque pour connecter l'ESP32 à la connexion partagée d'un téléphone.
#### HttpClient
Nous avons utilisé cette bibliothèque afin d'effectuer une requête GET sur la route /switch de notre application Flask. Tout cela, dans le but d'envoyer les acquisitions du capteur DHT11 en ce qui concerne la température et l'humidité.
#### ArduinoJson
Cette bibliothèque a servi à parser le JSON par la réponse de l'application Flask après notre requête GET.
## Sources
- <a href="https://arduinojson.org/v6/how-to/use-arduinojson-with-httpclient">ArduinoJSON</a>
- <a href="https://www.arduino.cc/reference/en/libraries/httpclient/">HttpClient</a>
Sign in with Wallet
Connect another wallet