Créer un serveur node.js et lui envoyer des données en direct à partir d'un port d'Arduino UNO

Salut tout le monde,

J'aimerais réaliser quelque chose de similaire à cette vidéo :

https://www.youtube.com/watch?v=hN7UM922j9I

J'aimerais également ajouter des informations sur l'humidité grâce à un capteur d'humidité. Je voudrais transformer les données en un beau graphique qui sera affiché sur le serveur local node.js. Je pensais utiliser la bibliothèque "Johnny-five" et la bibliothèque graphique "Plotly".

Toutefois, je ne sais pas grand-chose sur javascript et encore moins node.js. Je n'ai que quelques connaissances de base en HTML/CSS.... Je sais seulement comment faire un index.js (la ligne const five = require('johnny-five')) et le fichier package.json lol.

J'ai du mal à trouver des tutoriels pour obtenir ce genre de résultats. N'importe quel indice ou conseil, ou si quelqu'un pouvait diviser le problème en plus petites étapes de résolution, ce serait cool.

Merci ^^

Salut,

Pour ce problème, si je comprend bien, tu as besoin d'afficher dans une page web des données de température en temps réel, fournies par un serveur node.js.

Dans un premier temps, l'étape essentielle est de récupérer les températures à intervalles réguliers. A priori, johnny-five permet de répondre à ce besoin. Tu peux te servir d'un array pour stocker les températures en mémoire, pour commencer.

Une fois que tu auras réussi à récupérer les données, le problème suivant est d'afficher une page web avec ces données. En clair, tu as besoin de mettre en place une communication entre ton navigateur et ton serveur node.js. Tu auras besoin pour cela de plusieurs élements.

1) Dans index.js, il va falloir mettre en place un serveur http qui écoutera sur un port donné (3000 par exemple) et sur une route donnée ( "/" par exemple ). Lorsque le navigateur interrogera le serveur sur cette route (en tapant l'url "localhost:3000/" dans ta barre d'adresses), le serveur http répondra à cette requête en envoyant au navigateur un fichier index.html. Par conséquent, il est nécessaire de créer un fichier html avec une structure html de base et créer un serveur http. A cette fin, je te recommande la librairie express.js et la section de la doc concernant l'envoi de fichiers statiques qui te faciliteront la tâche pour les étapes suivantes.

2) Le fichier index.html envoyé par le serveur sera executé par ton navigateur, et affichera une 1ère page, sans les températures.

3) Afin d'afficher les températures, le fichier index.html devra aussi contenir le code JavaScript(ou faire appel à un fichier .js séparé ce qui est recommandé, mais pour commencer, une balise <script> dans index.html suffira) qui sera executée par ton navigateur et qui enverra à intervalles réguliers une requête vers le serveur node.js afin de récupérer les températures (requête sous la forme "localhost:3000/temperatures" par exemple).

4) Conséquence logique de l'étape précédente: dans index.js, il faudra mettre en place pour le serveur http une nouvelle route "/temperatures", qui lorsqu'elle sera interrogée par le navigateur, renverra au navigateur les températures.

5) Côté navigateur, le code javascript contenu dans index.html devra également mettre à jour la page et les graphiques à chaque fois que de nouvelles températures seront récupérées.

Tu peux aussi t'aider de la librairie socket.io qui permet d'établir une communication client/serveur en temps réel et offre une solution plus élégante à ce problème. Mais pour débuter, les étapes au dessus devraient suffire.