ServeurWEB < IoT_Course

---+ Le serveur WEB
---++ Introduction

Le serveur WEB est tout simplement un serveur TCP qui communique avec son client, le navigateur, par le [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview][protocole HTTP]]. La communication se fait via le port 80.
---++ Exercice 1 :

Écrire un serveur WEB qui peut servir une seule page, intégré dans le serveur même. La page HTML est défini comme un string multiligne.

Le serveur attend une connexion sur le port 80 (port standard du protocole HTTP). Après l'acceptation de la connexion, il lit la requête envoyée par le navigateur et il l'imprime. Puisque le serveur ne peut servir qu'une seule page, l'interprétation de la requête n'est pas nécessaire. Le serveur retourne tout facilement la page HTML comme réponse.

Voilà, la requête envoyée par firefox quand le serveur WEB est accédé (la requête commence avec "Content Get / HTTP/1.1") :

<img alt="http.png" height="602" src="%ATTACHURL%/http.png" title="http.png" width="737" />

Le résultat vu par le navigateur le voila :

<img alt="helloWorldWebPage.png" height="540" src="%ATTACHURL%/helloWorldWebPage.png" title="helloWorldWebPage.png" width="881" />
---++ Exercice 2 :

Télécharger le programme [[https://github.com/pfalcon/picoweb][picoweb]] et ses exemples. Il y a des tutoriels sur le WEB qui expliquent comment utiliser picoweb mais ces tutoriels n'expliquent que ses utilisations les plus simples.
   * https://www.dfrobot.com/blog-742.html
   * [[https://techtutorialsx.com/2017/09/01/esp32-micropythhttps://techtutorialsx.com/2017/09/01/esp32-micropython-http-webserver-with-picowebon-http-webserver-with-picoweb][https://techtutorialsx.com/2017/09/01/esp32-micropython-http-webserver-with-picoweb]]
Les chapitres d'installation du programme peuvent être négligés puisque picoweb est déjà intégré dans notre interpréteur !MicroPython.

<img alt="picowebInstallation.png" height="109" src="%ATTACHURL%/picowebInstallation.png" title="picowebInstallation.png" width="737" />

Pour plus d'information, il est nécessaire d'étudier les exemples délivrés avec le dépôt github ou le code de picoweb même. Les exemples montrent comment utiliser la plupart de fonctions picoweb.

En utilisant le cadre picoweb le serveur WEB se laisse simplifier encore. Maintenant la page WEB est stocké dans un fichier à part sur le système de fichier de l'ESP32. Sauver ce fichier dans le classeur "html". Créer ce directoire avec ampy, s'il n'existe pas encore.
   * Recréer le programme de l'exercice 1 avec picoweb en séparant le code et la page HTML.
   * On peut aussi compacter le fichier HTML avec gzip et transférer le fichier compacté
---++ Exercice 3 : Templates

Modifier le serveur WEB en intégrant des mesures de température et de l'humidité de l'air pris avec le DHT11. La méthode la plus simple pour accomplir ceci est une page WEB statique dans laquelle les mesures peuvent être intégré. On peut accomplir cela en utilisant les <i>"templates</i>" fourni par _utemplates_ qu'utilise picoweb. Regarder dans le README.md de<i> utemplates </i>et dans les exemples fournis avec picoweb pour comprendre comment faire.

Créer une table comme démontré dans la copie d'écrans ou les valeurs de température et de l'humidité ainsi que le temps quand la mesure a été prise, sont insérés.

<img alt="dht11Template.png" height="281" src="%ATTACHURL%/dht11Template.png" title="dht11Template.png" width="615" />
---++ Exercice 4 : AJAX

Étudier le [[https://www.w3schools.com/js/DEFAULT.asp][JavaScript]] et [[https://www.w3schools.com/xml/ajax_intro.asp][AJAX]].

Modifier le programme d'exercice 3 de telle sorte que les mesures sont mise à jour toutes les 5 s.

Écrire une page HTML qui permet d'enclencher et de déclencher la LED sur la carte CPU. Ceci nécessite un bouton dans la page HTML et un indicateur qui montre l'état actuel de la LED.

<img alt="ledControlServer.png" height="270" src="%ATTACHURL%/ledControlServer.png" title="ledControlServer.png" width="480" />

-- %USERSIG{UliRaich - 2022-10-03}%

---++ Comments

%COMMENT%

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who
png	dht11Template.png	r1	manage	18.6 K	2022-10-03 - 13:39	UliRaich
png	helloWorldWebPage.png	r1	manage	91.0 K	2022-10-03 - 08:03	UliRaich
png	http.png	r1	manage	105.1 K	2022-10-03 - 08:00	UliRaich
png	ledControlServer.png	r1	manage	30.1 K	2022-11-03 - 09:14	UliRaich
png	picowebInstallation.png	r1	manage	13.3 K	2022-10-03 - 09:59	UliRaich

This topic: IoT_Course_French > WebHome > ServeurWEB
Topic revision: r3 - 2022-11-03 - UliRaich