act-3-NR : Introduction à Nodered
Réglementaire : Pré-requis / Liens⚓
Le service Node-Red est démarré et vous connaissez son adresse IP. Vous devriez travailler avec un ordinateur local pour effectuer cette tâche
Environnement de travail⚓
Dans un navigateur WEB, tapez l'URL [Votre_Adresse_IP] :1880. Si vous travaillez avec l'ordinateur sur lequel le service Node-Red est installé, alors, vous pouvez utiliser l'URL http://localhost:1880. Une fois démarré, vous obtenez cette vue à droite. |
|
Les Noeuds (Nodes) dans la vue de gauche sont regroupés en catégories. La partie droite est réservée au Menu et diverses informations concernant le flux de données, la configuration des noeuds, le débogage, etc ... Le centre est le workspace( zone de travail) avec le flux. |
|
Injecter des données dans le flux.⚓
Ajouter un noeud | Glisser le noeud vers le workspace. | |
Doucle-cliquer sur le noeud | Affecter C'est la valeur associée à l'objet que l'on va nommer à l'aide de la propriété Affecter Valider avec |
|
Afficher des données dans la zone de débogage.⚓
Glisser un noeud | |
Avec le curseur de la souris, relier la sortie du noeud |
|
Déployer le flux. |
|
En cliquant sur le carré du noeud HelloWorld, vous allez activer le noeud qui consiste à envoyer les données du topic |
|
Dans la console, activez l'onglet |
|
Attention : Interprétation des données affichées.⚓
Outre les informations de date et heure, l'identifiant du noeud permet de filtrer les informations rattachées à ce noeud.
Il est important ensuite de noter le nom donné à la propriété topic de l'objet msg géré par le flux, suivi de la valeur "Hey" contenue dans la propriété payload de msg. On rappelle que le dimensionnement de la valeur est de String[3] (taille de 3 caractères).
Remarque :
Utilisez la touche SUPPR pour supprimer un node dans le flow.
Modifier l'affichage du noeud debug.⚓
Modifiez le noeud debug en changeant la sortie avec l'affichage complet de l'objet msg -->
puis 
|
|
L'objet nommé | |
Ce que peut faire Inject.⚓
Ajoutez un nouveau noeud Inject et configurez le comme précédemment. |
|
En bas de la fenêtre, vous accédez à d'autres possibilités : ici, nous allons demander après avoir activé le noeud une fois, de répéter l'injection du texte coucou toutes les 4 secondes. Si on ne clique pas sur Inject once after .... , alors le message va s'afficher 4 secondes après le démarrage du flux. |
|
Votre flux après avoir lié le nouveau noeud.
|
|
Constatez avec la console que le résultat correspond à ce que l'on voulait, lorsque vous activez le noeud "Hello World", la console affiche "Hey". | |
.
Mettre en place une fonction⚓
On souhaite sur demande de l'utilisateur injecter dans le flux la date et l'heure système. Pour ce faire, on va juste configurer le noeud inject avec le type STRING, sans fixer de valeur pour payload.
Insérez un noeud fonction avec le code suivant :
Le flux devient :
Vérifiez que l'on obtient bien dans la console le message suivant après injection (topic DATE_HR) : Effacer les messages avec l'icône 
Remarque : Remarques⚓
Le noeud fonction accepte le langage JavaScript[1] qui est très utilisé dans la programmation WEB.
Attention : DEBUG⚓
Le noeud Debug permet d'afficher des données dans un espace développeur, cela est très utile pendant la phase de mise au point.
Il faut en général gérer les données via une interface utilisateur : c'est à ce moment que la palette DASHBOARD intervient.
|
|
Test et Temp.EXT sont des Onglets que l'on sélectionne en cliquant sur 
pour basculer sur un page/onglet/chapitre.
Act est un groupe de l'onglet Test, et pour le moment, il regroupe deux champs (Conversion T° et Message affiché sont les étiquettes/label). Les champs sont documentés avec les valeurs en gras qui viennent du flux et qui sont les mêmes données que l'on a d'abord affiché avec les noeuds DEBUG.
Vittel est un groupe concerné de l'onglet Temp.EXT.
On peut gérer les onglets (TAB) et les groupes avant de placer des champs à l'écran. Ajoutez les selon les choix exposés ci-dessus. |
|
Ajouter un noeud |
|
Ajoutez les autres champs correspondants, puis réorganisez le positionnement des champs en les faisant glisser