Programarea vizuală cu Node-RED: Conectați cu ușurință Internetul lucrurilor

Prin programare, facem ca mașinile să imite un comportament complex urmând secvențe de instrucțiuni simple. Utilizarea limbajelor de programare textuală, cum ar fi Assembly, C, Python și JavaScript este una dintre modalitățile principale de a face acest lucru. Designerii acestor limbaje de programare au petrecut nenumărate ore încercând să facă experiența de scriere a programelor cât mai ușoară posibil prin sintaxă expresivă, constructe de programare robuste și lanțuri de instrumente puternice. Cu toate acestea, toate aceste limbaje de programare au o trăsătură comună: codul sursă textual.

Scrierea programelor în text funcționează și în majoritatea cazurilor funcționează bine. Cu toate acestea, abilitatea de a exprima programele vizual este adesea de dorit. A fi capabil să proiecteze fluxul de informații prin diferite componente ale unui sistem mai mare este adesea tot ceea ce este necesar. Instrumentele de programare vizuală sunt, de asemenea, îngăduitoare față de oricine este nou în programare și care se luptă să gestioneze diferite concepte, cum ar fi variabile, indicatori, semnale, domenii și așa mai departe.

Node-RED este un instrument de programare vizuală. Afișează vizual relațiile și funcțiile și permite utilizatorului să programeze fără a fi nevoie să tastați o limbă. Node-RED este un editor de flux bazat pe browser în care puteți adăuga sau elimina noduri și le puteți conecta împreună pentru a le face să comunice între ele.

În Node-RED, fiecare nod este unul dintre următoarele două tipuri: un nod de injectare sau un nod de funcție . Nodurile de injectare produc un mesaj fără a necesita nicio intrare și împinge mesajul la următorul nod conectat la acesta. Nodurile de funcție, pe de altă parte, preiau o intrare și efectuează unele lucrări asupra acesteia. Cu o multitudine de aceste noduri din care să aleagă, Node-RED face conectarea împreună a dispozitivelor hardware, a API-urilor și a serviciilor online mai ușoară ca niciodată.

Noțiuni introductive cu Node-RED

Node-RED este construit pe Node.js. Pentru a instala Node-RED, va trebui să aveți instalate atât Node.js, cât și NPM. Cu NPM, este foarte ușor să instalați Node-RED:

 npm install -g node-red

Editorul de flux al Node-RED este o aplicație bazată pe browser web. Pentru a-l putea folosi, rulați Node-RED:

 node-red

&hellip și navigați la http://localhost:1880.

Salut Lume!

Ce tutorial de programare pentru începători este complet fără a învăța să spui „Bună, lume”? Să începem prin a încerca exact asta:

1. Trageți și plasați un nod de injectare în editorul de flux. Apoi faceți dublu clic și configurați sarcina utilă ca șir și scrieți „Hello world”.
2. Trageți și plasați un nod de depanare , la fel ca și cu cel de injectare.
3. Conectați-le împreună.
4. Faceți clic pe butonul „Deploy” din colțul din dreapta.
5. Faceți clic pe butonul albastru din stânga nodului de injectare .

Incearca-l. Veți vedea ceva de genul acesta:

Doar JavaScript

Cu Node-RED, nu vă limitați doar la noduri și funcționalități simple. Deoarece Node-RED este construit pe Node.js, totul este alimentat de JavaScript. Nodurile sunt, într-adevăr, module Node.js. Acestea pot fi găsite pe http://flows.nodered.org/, așa că pentru a le adăuga în panoul din stânga, puteți să le „instalați npm”. De fapt, vă puteți dezvolta propriul flux și le puteți încărca în depozitul de flux. Aplicațiile pot fi atât de complexe pe cât doriți, deoarece puteți introduce JavaScript în nodurile de funcție din editorul de cod pe care îl oferă Node-RED.

Deoarece platforma se bazează pe Node.js, profită de același model bazat pe evenimente, fără blocare. Deci, o aplicație construită pe Node-RED poate fi rulată pe hardware cu costuri reduse precum Raspberry Pi, precum și în cloud.

Acum, să mergem Pro: E timpul pentru automatizarea casei

Pentru a demonstra modul în care Node-RED se încadrează în domeniul Internet of Things, să construim o aplicație pentru a schimba culoarea unui bec inteligent. Nu toată lumea poate avea același sistem de iluminat inteligent la dispoziție, dar nu este nimic de care să vă faceți griji, deoarece puteți găsi modulul Node-RED corespunzător din depozitul oficial de flux. Cu toate acestea, pentru a face lucrurile și mai ușoare, să mergem spre ceva mai inteligent.

Faceți cunoștință cu Netbeast. Este o platformă open source pentru dezvoltarea de aplicații pentru dispozitive și dispozitive Internet of Things, fără a fi nevoie să vă faceți griji cu privire la detalii precum protocoalele wireless, compatibilitatea mărcii sau să știți cum să faceți față fiecărui API specific. Ne permite să folosim dispozitive virtuale care acționează ca și dispozitive reale! Deci, chiar dacă nu ai un bec inteligent, ai la dispoziție unul virtual.

Putem instala la nivel global pachetul Netbeast for Node-RED npm astfel:

 npm install -g node-red-contrib-netbeast

Nodul netbeast-red va reprezenta Netbeast Dashboard, care va traduce primitivele sale API pe toate dispozitivele dvs. inteligente pe care le aveți acasă. Din fericire, este disponibil și ca modul!

Porniți Netbeast:

 npm install -g netbeast-cli netbeast start

Acest lucru va face tabloul de bord disponibil pe portul 8000 și SSL pe 8443. Apoi deschideți browserul la http://localhost:8000 și navigați la Explore. Acolo vom putea găsi o mulțime de aplicații și pluginuri. Căutați mărcile becurilor dvs. inteligente (Philips Hue, LIFX, WeMo) sau dacă nu aveți unul, încercați să descărcați plugin-ul becului. Verificați dacă pluginurile dvs. Dashboard conțin unul dintre acestea!

Insigna galbenă indică faptul că pluginurile rulează, dar nu găsesc niciun dispozitiv. Faceți clic pe bulb-plugin pentru a crea un bec virtual. Orice alte dispozitive descoperite ar trebui să apară sub Rețea.

Cu totul la loc, să ne întoarcem la treabă. Vom face un flux simplu:

1. Trageți și plasați un nod de injectare.
2. Trageți și plasați nodul Netbeast.
3. Trageți și plasați un nod de depanare.
4. Conectați totul așa cum se arată mai jos:

Acum să trimitem o solicitare HTTP către tabloul de bord. Folosind API-ul Netbeast va trebui să trimitem prin nodul de injectare un JSON care să conțină valorile pe care dorim să le declanșăm pe becul nostru.

Apăsați butonul pentru a injecta culoarea și puterea tuturor becurilor dvs. inteligente!

Fiecare subiect reprezintă un tip diferit de dispozitiv. Deci sunt subiecte pentru lumini dar și pentru muzică, încălzire și video; precum și senzori pentru umiditate, prezență, temperatură, iar lista continuă. Puteți găsi în documentația lor o listă de subiecte și structura lor recomandată pentru a fi traduse pe tot felul de dispozitive. Acest motor IoT este imatur, dar puternic. Open source care permite dezvoltatorilor să refolosească informațiile pentru a crea scenarii cu adevărat conectate, fiind astfel inteligenți.

Să mergem mai adânc

În continuare, vom crea un al doilea flux folosind un alt plugin, un detector de zgomot ambiental, pentru a-l folosi ca declanșator pentru a schimba culoarea becului ca semafor de zgomot. În acest tutorial, vom folosi unul virtual, deci nu este nevoie să cumpărați hardware nou. Să începem prin a face clic pe butonul „plus” din editorul Node-RED.

Mergeți din nou pe Dashboard http://localhost:8000/explore la secțiunea Explore și căutați Volume-Plugin. Este o aplicație web foarte rudimentară care profită de getUserMedia() din browser pentru a captura conținut media dintr-o aplicație HTML simplă. Deci, probabil că va funcționa doar pe browserele moderne!

Faceți clic pe el pentru a deschide, ca și în cazul becului virtual. Va cere permisiunea de a înregistra de la microfon. Apoi va trimite mesajele brokerului MQTT al Netbeast, care vor fi partajate pe întreg tabloul de bord și astfel ne vom putea abona. Pentru a face așa ceva, va trebui doar să glisăm și să plasăm un nod netbeast-trigger în editorul node-red. Apoi vom introduce o funcție între declanșator și nodul Netbeast, astfel încât să decidem când este prea tare sau nu. De asemenea, ar trebui să folosim câteva noduri de depanare pentru a verifica dacă totul este în regulă. Schema acum va arăta oarecum astfel:

Acum, să introducem ceva cod în nodul funcției tooLoud. Da, știu că am promis că poți programa fără a fi nevoie să codificăm, dar am arătat deja că poți! Și puteți încerca să combinați diferitele elemente disponibile sau alte noduri din registry pentru a realiza următoarele.

 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'}} }

Acest fragment destul de simplu de cod returnează una dintre cele trei încărcături utile pentru următorul nod cu un anumit cod de culoare, în funcție de nivelul de volum raportat de nodul anterior.

Acum suntem gata de plecare! Să dăm din nou butonul Implementează și să facem puțin zgomot. Să vedem cum se schimbă imediat becul de la o culoare la alta!

Deoarece microfonul și browserul web pe care îl utilizați pot fi diferite, nu ezitați să ajustați valorile și pragurile funcției și, de asemenea, jucați-vă cu valorile culorilor pentru a vedea cum vă schimbă becurile.

Crearea propriilor pluginuri

Acest bec în CSS pur a fost inspirat de acest cssdeck.

După cum probabil ați observat, becul virtual de mai înainte este foarte rudimentar, așa că poate doriți să-l modificați. Sau și mai bine, vă puteți crea propriile controlere inteligente pentru casă. Deci vom trece prin procesul de creare a unui plugin virtual pentru Netbeast, care vă va permite să vă creați propriile controlere pentru dispozitive inteligente.

Puteți folosi pachetul netbeast-cli pentru a genera automat un cod. netbeast create myplugin --plugin , vom ajunge cu un proiect de bază ca următorul:

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

Frontend-ul

Acum, să începem să mimetizam becul cu un front-end. Controlerele de dispozitiv, de obicei, nu vor avea unul, așa că niciun folder public nu este inclus încă în comanda scaffold. Să creăm un director public în interiorul proiectului și să plasăm acolo următoarele fișiere HTML, CSS și JS.

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>

bec.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; }

Cu aceste fișiere HTML și CSS, ar trebui să puteți vedea deja o formă de bulb în browser. Continuați și deschideți fișierul HTML pentru a-l vedea live! Functioneaza? Grozav, acum hai să-i dăm niște funcționalități.

bulb.js

Acest fișier va imita un comportament de bec cu un simplu clic pe, faceți clic pe dezactivat și va configura câteva funcții care vor fi folosite într-un pic pentru a-și schimba culoarea prin 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}) }

După aceasta, câmpurile și butonul de rulare ar trebui să aibă sens. Puteți începe să încercați diferitele culori pe noul dvs. bec virtual. Cu toate acestea, motivul pentru care am ajuns până aici a fost să îl transformăm într-un alt dispozitiv al ecosistemului nostru Internet of Things.

hw-api.js

Ultimul dintre JS-ul nostru front-end self-made. Își bate joc de o conexiune fără fir cu serverul, așa cum ar face un bec WiFi sau Bluetooth cu telecomanda, cum ar fi un telefon, un server sau un hub. Este interfața pe care codul pluginului real o va folosi pentru a-l controla!

 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) })

În cele din urmă, avem nevoie ca biblioteca WebSocket să fie inclusă din HTML-ul nostru, astfel încât frontend-ul este gata. Puteți copia sursa de pe https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js și o puteți lipi într-un fișier numit socketio.js . De la un terminal cu curl sau wget , puteți face acest lucru simplu:

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

Am avea până acum o structură de fișiere care arată astfel:

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

Backend-ul

Acum vom implementa interfața cu dispozitivul și o vom înregistra în motorul Netbeast. Va asculta websocket-urile pentru a detecta că un bec a fost instalat în rețea și apoi va face un POST către API-ul Dashboard, astfel încât noile resurse să fie disponibile.

Pentru asta, să aruncăm o privire la fișierele pe care le-am generat înainte:

pachet.json

Acest fișier conține toate dependențele și informațiile necesare pentru a rula aplicația dvs. package.json folosește pachetul obișnuit.json și pentru a prelua unele informații, ca nume sau tip. Este important de precizat că acest pachet este 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

Acesta este codul care este apelat din tabloul de bord Netbeast pentru a lansa pluginul! Va trebui să accepte portul prin argumentele liniei de comandă pentru a ști unde să accepte cererile primite. Va fi lansat ca și cum am tastat node myplugin.js --port <a free port number> . Vă rugăm să rețineți și hashbang -ul de la început! #!/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)

După cum puteți vedea, ne lipsea un fișier pentru a-l lansa, cel care implementează de fapt controlerele socket.io . Nimic de lux!

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 }

Lansați aplicația dvs

Acum este timpul să vă testați aplicația. Puteți face acest lucru împachetându-l într-un format tar.gz și încărcându-l în tabloul de bord în secțiunea drag-and-drop http://localhost:8000/install.

 beast package # Compresses your app when ran in myplugin dir

Voila! Acum puteți accesa pluginurile dvs. și le puteți testa. Accesați secțiunea de rețea (http://localhost:8000/devices) pentru a vedea cum rulează și pentru a schimba culoarea de acolo.

Dacă ceva nu merge bine sau credeți că ați ratat un detaliu, încercați să îl rulați local cu node index.js și poate că va fi mai ușor de depanat decât în ​​jurnalul de netbeast start .

Publicați-vă lucrarea

Dacă doriți ca aplicația dvs. să fie afișată în secțiunea Explorare a tabloului de bord Netbeast, trebuie să creați un depozit în GitHub cu aplicația Netbeast sau pluginul Netbeast, ambele incluse în descriere și README.md .

Pentru a găsi aplicațiile, folosim API-ul de căutare GitHub. Vedem aceleași rezultate care apar atunci când faceți o solicitare GET la: https://api.github.com/search/repositories?q=netbeast+language:javascript

Veți ști că aplicația dvs. va fi afișată dacă apare acolo!

Ce urmeaza?

Ambele proiecte sunt open source și au implicat într-adevăr comunități. Dacă doriți să începeți să vă creați propriile fluxuri sau noduri pentru Node-RED, aruncați o privire la documentația lor oficială. Urmați pașii descriși acolo și ar trebui să vă puteți publica propriul nod sau flux în cel mai scurt timp.

Pe de altă parte, dacă doriți să vă scufundați în Netbeast, puteți urmări și documentația acestora sau puteți arunca o privire la depozitul Dashboard. Folosind API-ul Netbeast, nu mai trebuie să vă concentrați pe dispozitive, mărci sau tehnologii individuale, așa că încercați. Puteți afla mai multe despre asta aici sau vă puteți alătura canalului Slack și discutați despre Node-RED, IoT sau Node.js.

Dacă doriți să instalați aceste lucruri pe un Raspberry Pi, Beagle Bone sau un server vechi, le-ați transforma într-un Smart Hub hackabil, fără cod! Există versiuni prefabricate pentru ei în ambele site-uri.

Hacking fericit.