Programmation visuelle avec Node-RED : câblage facile de l'Internet des objets

Grâce à la programmation, nous faisons en sorte que les machines imitent un comportement complexe en suivant des séquences d'instructions simples. L'utilisation de langages de programmation textuels tels que Assembly, C, Python et JavaScript est l'un des principaux moyens d'y parvenir. Les concepteurs de ces langages de programmation ont passé d'innombrables heures à essayer de rendre l'expérience d'écriture de programmes aussi simple que possible grâce à une syntaxe expressive, des constructions de programmation robustes et de puissantes chaînes d'outils. Cependant, tous ces langages de programmation partagent un trait commun : le code source textuel.

Écrire des programmes en texte fonctionne, et dans la plupart des cas, cela fonctionne bien. Cependant, la capacité d'exprimer visuellement des programmes est souvent souhaitable. Être capable de concevoir le flux d'informations à travers les différents composants d'un système plus vaste est souvent tout ce qui est nécessaire. Les outils de programmation visuelle sont également indulgents envers toute personne qui débute dans la programmation et qui a du mal à gérer divers concepts tels que les variables, les pointeurs, les signaux, les portées, etc.

Node-RED est un outil de programmation visuelle. Il affiche visuellement les relations et les fonctions, et permet à l'utilisateur de programmer sans avoir à saisir une langue. Node-RED est un éditeur de flux basé sur un navigateur où vous pouvez ajouter ou supprimer des nœuds et les connecter ensemble afin de les faire communiquer entre eux.

Dans Node-RED, chaque nœud est l'un des deux types suivants : un nœud d' injection ou un nœud de fonction . Les nœuds d'injection produisent un message sans nécessiter aucune entrée et envoient le message au nœud suivant qui lui est connecté. Les nœuds de fonction, d'autre part, prennent une entrée et effectuent un certain travail dessus. Avec une pléthore de ces nœuds parmi lesquels choisir, Node-RED facilite plus que jamais le câblage entre les périphériques matériels, les API et les services en ligne.

Premiers pas avec Node-RED

Node-RED est construit sur Node.js. Pour installer Node-RED, vous devez avoir à la fois Node.js et NPM installés. Avec NPM, il est super facile d'installer Node-RED :

 npm install -g node-red

L'éditeur de flux de Node-RED est une application basée sur un navigateur Web. Pour pouvoir l'utiliser, lancez Node-RED :

 node-red

&hellip et accédez à http://localhost:1880.

Bonjour le monde!

Quel didacticiel de programmation pour débutant est complet sans apprendre à dire "Hello, world" ? Commençons par essayer exactement cela :

1. Faites glisser et déposez un nœud d'injection sur l'éditeur de flux. Ensuite, double-cliquez et configurez la charge utile en tant que chaîne et écrivez "Hello world".
2. Faites glisser et déposez un nœud de débogage , de la même manière que vous l'avez fait avec celui d'injection.
3. Câblez-les ensemble.
4. Cliquez sur le bouton "Déployer" dans le coin droit.
5. Cliquez sur le bouton bleu juste à gauche du nœud d'injection .

Essayez-le. Vous verrez quelque chose comme ceci :

Juste JavaScript

Avec Node-RED, vous n'êtes pas limité à de simples nœuds et fonctionnalités. Comme Node-RED est construit sur Node.js, tout est alimenté par JavaScript. Les nœuds sont en effet des modules Node.js. Ils peuvent être trouvés dans http://flows.nodered.org/, donc pour les ajouter à votre panneau de gauche, vous pouvez simplement les "npm installer". En fait, vous pouvez développer votre propre flux et les télécharger dans le référentiel de flux. Les applications peuvent être aussi complexes que vous le souhaitez, car vous pouvez taper du JavaScript dans les nœuds de fonction de l'éditeur de code fourni par Node-RED.

Étant donné que la plate-forme est basée sur Node.js, elle tire parti du même modèle événementiel et non bloquant. Ainsi, une application basée sur Node-RED peut être exécutée sur du matériel à faible coût comme le Raspberry Pi, ainsi que dans le cloud.

Now Let's Go Pro : l'heure de la domotique

Pour démontrer comment Node-RED s'intègre dans le domaine de l'Internet des objets, construisons une application pour changer la couleur d'une ampoule intelligente. Tout le monde n'a peut-être pas le même système d'éclairage intelligent à sa disposition, mais il n'y a rien à craindre, car vous pouvez trouver le module Node-RED approprié dans le référentiel de flux officiel. Cependant, pour rendre les choses encore plus faciles, optons pour quelque chose de plus intelligent.

Rencontrez Netbeast. Il s'agit d'une plate-forme open source permettant de développer des applications pour les appareils et appareils de l'Internet des objets sans avoir à se soucier des détails tels que les protocoles sans fil, la compatibilité des marques ou à savoir comment gérer chaque API spécifique. Cela nous permet d'utiliser des appareils virtuels qui agissent comme de vrais! Ainsi, même si vous n'avez pas d'ampoule connectée, vous en avez une virtuelle disponible.

Nous pouvons installer le package Netbeast for Node-RED npm globalement comme ceci :

 npm install -g node-red-contrib-netbeast

Le nœud netbeast-rouge représentera le tableau de bord Netbeast, qui traduira ses primitives API à tous vos appareils intelligents que vous avez à la maison. Heureusement, il est également disponible en module !

Démarrez Netbeast :

 npm install -g netbeast-cli netbeast start

Cela rendra le tableau de bord disponible sur le port 8000 et SSL sur 8443. Ouvrez ensuite votre navigateur sur http://localhost:8000 et accédez à Explorer. Nous pourrons y trouver de nombreuses applications et plugins. Recherchez les marques de vos ampoules connectées (Philips Hue, LIFX, WeMo) ou si vous n'en avez pas, essayez de télécharger le plugin d'ampoule. Vérifiez que vos plugins Dashboard en contiennent un !

Le badge jaune indique que les plugins sont en cours d'exécution, mais qu'ils ne trouvent aucun périphérique. Cliquez sur le plugin bulb pour créer une ampoule virtuelle. Tous les autres appareils découverts doivent apparaître sous Réseau.

Avec tout en place, reprenons le travail. Nous allons faire un flux simple :

1. Faites glisser et déposez un nœud d'injection.
2. Faites glisser et déposez le nœud Netbeast.
3. Faites glisser et déposez un nœud de débogage.
4. Câblez le tout comme indiqué ci-dessous :

Envoyons maintenant une requête HTTP au tableau de bord. En utilisant l'API Netbeast, nous devrons envoyer via le nœud d'injection un JSON contenant les valeurs que nous voulons déclencher sur notre ampoule.

Appuyez sur le bouton pour injecter de la couleur et de la puissance dans toutes vos ampoules connectées !

Chaque rubrique représente un type d'appareil différent. Il y a donc des sujets pour les lumières mais aussi pour la musique, le chauffage et la vidéo ; ainsi que des capteurs d'humidité, de présence, de température, et la liste continue. Vous pouvez trouver dans leur documentation une liste de sujets et leur structure recommandée à traduire sur tous les types d'appareils. Ce moteur IoT est immature, mais puissant. Open source qui permet aux développeurs de réutiliser les informations pour créer des scénarios véritablement connectés, donc intelligents.

Allons plus loin

Ensuite, nous allons créer un deuxième flux en utilisant un autre plugin, un détecteur de bruit ambiant, pour l'utiliser comme déclencheur pour changer la couleur de l'ampoule comme sémaphore de bruit. Dans ce tutoriel, nous en utiliserons un virtuel, il n'est donc pas nécessaire d'acheter du nouveau matériel. Commençons par cliquer sur le bouton "plus" dans l'éditeur Node-RED.

Allez à nouveau sur le tableau de bord http://localhost:8000/explore à la section Explorer et recherchez Volume-Plugin. Il s'agit d'une application Web très rudimentaire qui tire parti de getUserMedia() dans le navigateur pour capturer des médias à partir d'une simple application HTML. Cela ne fonctionnera donc probablement que sur les navigateurs modernes !

Cliquez dessus pour l'ouvrir, comme pour l'ampoule virtuelle. Il vous demandera la permission d'enregistrer à partir de votre microphone. Ensuite, il enverra les messages au courtier MQTT de Netbeast, qui seront partagés sur tout le tableau de bord, et nous pourrons ainsi nous abonner. Pour faire une telle chose, nous n'aurons qu'à faire glisser et déposer un nœud netbeast-trigger dans l'éditeur de node-red. Ensuite, nous insérerons une fonction entre le déclencheur et le nœud Netbeast afin de décider quand il est trop fort ou non. De plus, nous devrions utiliser des nœuds de débogage pour vérifier si tout va bien. Le schéma ressemblera maintenant un peu à ceci :

Maintenant, entrons du code dans le nœud de fonction tooLoud. Oui, je sais que j'ai promis que vous pouviez programmer sans avoir à coder, mais j'ai déjà montré que vous le pouviez ! Et vous pouvez essayer de combiner les différents éléments disponibles ou d'autres nœuds du registre pour accomplir ce qui suit.

 var volume = msg.payload.volume node.log(volume) if (volume < 50) { return { topic: 'lights', payload: { power: 1, color: '#00CC00'}} } else if (volume < 75) { return { topic: 'lights', payload: { power: 1, color: '#CCCC00'}} } else { return { topic: 'lights', payload: { power: 1, color: '#FF0000'}} }

Cet extrait de code plutôt simple renvoie l'une des trois charges utiles pour le nœud suivant avec un code de couleur spécifique, en fonction du niveau de volume signalé par le nœud précédent.

Nous sommes maintenant prêts à partir ! Appuyons à nouveau sur le bouton Déployer et faisons du bruit. Voyons comment l'ampoule passe d'une couleur à l'autre immédiatement !

Étant donné que le microphone et le navigateur Web que vous utilisez peuvent être différents, n'hésitez pas à ajuster les valeurs et les seuils de fonction, et également à jouer avec les valeurs de couleur pour voir comment cela change vos ampoules.

Créer vos propres plugins

Cette ampoule en pur CSS a été inspirée par ce cssdeck.

Comme vous l'avez peut-être remarqué, l'ampoule virtuelle d'avant est très rudimentaire, vous voudrez peut-être la modifier. Ou mieux encore, vous pouvez créer vos propres contrôleurs de maison intelligente. Nous allons donc passer par le processus de création d'un plugin virtuel pour Netbeast, qui vous permettra de créer vos propres contrôleurs pour les appareils intelligents.

Vous pouvez utiliser le netbeast-cli pour générer automatiquement du code. En exécutant netbeast create myplugin --plugin nous nous retrouverions avec un projet de base comme celui-ci :

 myplugin ├── README.md ├── index.js ├── package.json └── test.js

L'interface

Maintenant, commençons à imiter l'ampoule avec un frontal. Les contrôleurs de périphérique n'en auront généralement pas, donc aucun dossier public n'est encore inclus dans la commande scaffold. Créons un répertoire public dans le projet et plaçons-y les fichiers HTML, CSS et JS suivants.

index.html

 <head> <title>Netbeast Bulb Plugin</title> <link rel="stylesheet" href="bulb.css" media="screen" charset="utf-8"> </head> <body> <div class="top-decoration"></div> <div> </div> <div class="bulb-container small"> <div class="bulb light"> <div> <div class="bulb top"></div> <div class="bulb middle-1"></div> <div class="bulb middle-2"></div> <div class="bulb middle-3"></div> <div class="bulb bottom"></div> </div> <div> <div class="screw-top"></div> <div class="screw a"></div> <div class="screw b"></div> <div class="screw a"></div> <div class="screw b"></div> <div class="screw a"></div> <div class="screw b"></div> <div class="screw c"></div> <div class="screw d"></div> </div> </div> </div> <div class="code-container"> <pre><i class="txt-red">beast</i>(<i class="txt-green">'lights'</i>).<i class="txt-blue">set</i>({ <i class="txt-green">color</i>: <i class="txt-green">"<input type="text" class="color" name="color" value="00fea5">"</i>, <i class="txt-green">power</i>: <i class="txt-green">"<input type="text" class="power" name="power" value="on">"</i> })</pre> <button> RUN </button> </div><!-- wrapper --> <!-- declares bulb features and methods --> <script type="text/javascript" src="bulb.js"></script> <!-- real time comms library --> <script type="text/javascript" src="socketio.js"></script> <!-- simulates hardware communication --> <script type="text/javascript" src="hw-api.js"></script> </body>

ampoule.css

 section { float: left; padding: 20px 50px 20px 50px; } .bulb-light { border: 0; background: transparent; margin: 0 auto !important; padding: 0 !important; display: block; z-index: 1; } #bulb { opacity: 1; z-index: 3; display: block;} .bulb.top { border: 0; width: 300px; height: 300px; margin: 0 auto; padding: 0; border-radius: 999px; background: #E7E7E7; } .bulb.middle-1 { margin: -75px auto 0 auto; width: 190px; border-left: 35px solid transparent; border-right: 35px solid transparent; border-top: 55px solid #E7E7E7; } .bulb.middle-2 { margin: -22px auto 0 auto; width: 178px; border-left: 19px solid transparent; border-right: 19px solid transparent; border-top: 50px solid #E7E7E7; } .bulb.middle-3 { margin: -20px auto 0 auto; width: 182px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 30px solid #E7E7E7; } .bulb.bottom { width: 184px; height: 65px; margin: -8px auto 0 auto; padding: 0; border-radius: 0 0 999px 999px; background: #E7E7E7; } #base { position:relative; z-index: 2; } .screw { transform: rotate(-3deg); -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); padding: 0; } .screw-top { margin: -18px auto -4px auto; padding: 0; width: 132px; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 21px solid #D3D3D3; border-radius: 999px; } .screw.a { background: #DDD; width: 150px; height: 15px; border-radius: 999px; margin: -1px auto 0px; } .screw.b { background: #D9D9D9; width: 135px; height: 15px; margin: -1px auto 0px; } .screw.c { margin: -1px auto 0px; width: 78px; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 20px solid #DDD; border-radius: 8px; } .screw.d { margin: 0 auto; width: 15px; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 15px solid #444; } .on #light { -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .bulb.top, .bulb.bottom { transition: all 0.5s ease-in-out; } .bulb.middle-1, .bulb.middle-2, .bulb.middle-3 { transition: all 0.5s ease-in-out; }

Avec ces fichiers HTML et CSS, vous devriez déjà pouvoir voir une forme d'ampoule dans votre navigateur. Allez-y et ouvrez votre fichier HTML pour le voir en direct ! Est-ce que ça marche? Génial, donnons-lui maintenant quelques fonctionnalités.

bulb.js

Ce fichier imitera le comportement d'une ampoule avec un simple clic dessus, cliquez dessus et configurera quelques fonctions qui seront utilisées dans un instant pour changer sa couleur via Netbeast.

 var color = document.getElementById('color') var power = document.getElementById('power') var bulb = document.getElementById('bulb') var button = document.getElementById('run-btn') var light = document.getElementById('light') button.onclick = function toggleBulbState () { changeBulbParams({ color: color.value, power: power.value }) } function setBulbParams (params) { if (params.power === 'off') { params = { color: 'E7E7E7' } } console.log('set params', params) var bulb_parts = ['.bulb.middle-1', '.bulb.middle-2', '.bulb.middle-3'] document.querySelector('.bulb.top').style.boxShadow = '0px 0px 98px #' + params.color document.querySelector('.bulb.top').style.backgroundColor = params.color document.querySelector('.bulb.bottom').style.backgroundColor = params.color bulb_parts.forEach(function (className) { document.querySelector(className).style.borderTopColor = params.color }) } function changeBulbParams (params) { console.log('change params', params) /* Overwrite html fields if necessary */ color.value = params.color || color.value power.value = params.power || power.value setBulbParams({color: color.value, power: power.value}) }

Après cela, les champs et le bouton d'exécution devraient tous avoir un sens. Vous pouvez commencer à essayer les différentes couleurs sur votre toute nouvelle ampoule virtuelle. Cependant, la raison pour laquelle nous avons fait tout ce chemin était d'en faire un autre appareil de notre écosystème Internet des objets.

hw-api.js

Le dernier de nos JS front-end self-made. Il se moque d'une connexion sans fil avec le serveur, comme le ferait une ampoule WiFi ou Bluetooth avec sa télécommande, comme un téléphone, un serveur ou un concentrateur. C'est l'interface que le code du plugin utilisera pour le contrôler !

 var socket = io.connect() socket.on('connect', function () { console.log('ws:// bulb is online') }) socket.on('disconnect', function () { console.log('ws:// connection with bulb lost') }) socket.on('set', function (params) { changeBulbParams(params) // uses functions from bulb.js! }) socket.on('get', function () { const params = { power: power.value, color: color.value } socket.emit('params', params) })

Enfin, nous avons besoin que la bibliothèque WebSocket soit incluse à partir de notre code HTML, afin que l'interface soit prête. Vous pouvez copier la source depuis https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js et la coller dans un fichier appelé socketio.js . Depuis un terminal avec curl ou wget , vous pouvez le faire simplement :

 curl https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js > public/socketio.js

Nous aurions maintenant une structure de fichiers qui ressemble à ceci :

 myplugin ├── README.md ├── index.js ├── package.json ├── public │ ├── bulb.css │ ├── bulb.js │ ├── hw-api.js │ ├── index.html │ └── socketio.js └── test.js

Le back-end

Nous allons maintenant implémenter l'interface avec l'appareil et l'enregistrer dans le moteur Netbeast. Il écoutera les websockets pour détecter qu'une ampoule a été installée sur le réseau, puis effectuera un POST à ​​l'API du tableau de bord afin que les nouvelles ressources soient disponibles.

Pour cela, regardons les fichiers que nous avons générés auparavant :

package.json

Ce fichier contient toutes les dépendances et informations nécessaires pour exécuter votre application. Netbeast utilise également le package.json standard pour récupérer certaines informations, comme le nom ou le type. Il est important de préciser que ce package est un plugin !

 { "name": "myplugin", "version": "0.0.0", "description": "Netbeast plugin for... <your description>", "main": "index.js", "netbeast": { "bootOnLoad": true, "type": "plugin" }, "dependencies": { "bluebird": "^3.3.5", "body-parser": "^1.15.0", "express": "^4.13.4", "minimist": "^1.2.0", "mocha": "^2.3.2", "morgan": "^1.6.1", "netbeast": "^1.0.6", "socket.io": "^1.4.5", "superagent": "^1.8.3" }, "devDependencies": {}, "scripts": { "test": "node test.js", "start": "node index.js" }, "repository": { "type": "git", "url": "GITHUB_REPOSITORY" }, "keywords": [ "iot", "netbeast", "plugin" ], "author": "YOUR_EMAIL", "license": "GPL 3", "bugs": { "url": "ISSUES_CHANNEL" }, "homepage": "HOMEPAGE" }

index.js

C'est le code qui est appelé depuis le tableau de bord Netbeast pour lancer le plugin ! Il devra accepter le port par des arguments de ligne de commande pour savoir où accepter les requêtes entrantes. Il sera lancé comme si on tapait node myplugin.js --port <a free port number> . Veuillez également noter le hashbang au début ! #!/usr/bin/env node .

 #!/usr/bin/env node var io = require('socket.io')() var express = require('express') var bodyParser = require('body-parser') var app = express() // Netbeast apps need to accept the port to be launched by parameters var argv = require('minimist')(process.argv.slice(2)) app.use(express.static('public')) // will serve our app in an HTTP server app.use(bodyParser.json()) // will parse JSON API calls app.use('/api', require('./plugin')(io)) var server = app.listen(argv.port || 31416, function () { console.log('Bulb plugin listening at http://%s:%s', server.address().address, server.address().port) }) // we need websockets to push updates to browser view io.listen(server)

Comme vous pouvez le voir, il nous manquait un fichier pour le lancer, celui qui implémente réellement les contrôleurs socket.io . Rien d'extraordinaire!

plugin.js

 var express = require('express') var netbeast = require('netbeast') var router = express.Router() var bulbParams // auxiliar variable, nasty way to transmit changes, but works module.exports = function (io) { io = io // Create resource that works on lights topic and listens on /api route netbeast('lights').create({ app: 'myplugin', hook: '/api' }) io.on('connection', function () { console.log('ws:// bulb has connected to plugin') }) io.on('disconnection', function () { console.log('ws:// bulb has disconnected from plugin') }) io.on('connect_failure', function (err) { console.trace(err) }) router.post('/', function (req, res) { io.emit('set', { power: req.body.power, color: req.body.color, }) res.status(200).json(req.body) }) router.get('/', function (req, res) { io.emit('get') var timerReference = setTimeout(function () { if (bulbParams) { res.json(bulbParams) } else { res.status(200).json({ error: 'No bulb available' }) } }, 3000) }) return router }

Lancez votre application

Il est maintenant temps de tester votre application. Vous pouvez le faire en le conditionnant au format tar.gz et en le téléchargeant sur votre tableau de bord dans la section glisser-déposer http://localhost:8000/install.

 beast package # Compresses your app when ran in myplugin dir

Voila ! Vous pouvez maintenant accéder à vos plugins et le tester. Allez dans la section réseau (http://localhost:8000/devices) pour le voir fonctionner et changer sa couleur à partir de là.

Si quelque chose ne va pas ou si vous pensez avoir manqué un détail, essayez de l'exécuter localement avec node index.js , et il sera peut-être plus facile de déboguer que dans le netbeast start .

Publiez votre travail

Si vous souhaitez que votre application s'affiche dans la section Explorer du tableau de bord Netbeast, vous devez créer un référentiel dans GitHub avec l'application Netbeast ou le plug-in Netbeast, tous deux inclus dans la description et README.md .

Pour trouver les applications, nous utilisons l'API de recherche de GitHub. Nous voyons les mêmes résultats qui apparaissent lorsque vous faites une requête GET à : https://api.github.com/search/repositories?q=netbeast+language:javascript

Vous saurez que votre application sera affichée si elle y apparaît !

Et après?

Les deux projets sont open source et ont vraiment impliqué les communautés. Si vous souhaitez commencer à créer vos propres flux ou nœuds vers Node-RED, jetez un coup d'œil à leur documentation officielle. Suivez les étapes décrites ici et vous devriez pouvoir publier votre propre nœud ou flux en un rien de temps.

D'autre part, si vous souhaitez plonger dans Netbeast, vous pouvez également suivre leur documentation ou consulter le référentiel Dashboard. En utilisant l'API Netbeast, vous n'avez plus à vous concentrer sur des appareils, des marques ou des technologies individuels, alors essayez-le. Vous pouvez en savoir plus ici, ou rejoindre leur canal Slack et discuter de Node-RED, IoT ou Node.js.

Si vous souhaitez installer ces éléments sur un Raspberry Pi, un Beagle Bone ou un ancien serveur, vous les transformeriez en un Smart Hub piratable, sans code ! Il existe des versions prédéfinies pour eux sur les deux sites.

Bon piratage.