Taustaa
Visuaalinen ohjelmointi Node-Red: llä: Internet-yhteyden muodostaminen helposti
Ohjelmoinnin avulla koneet jäljittelevät monimutkaista käyttäytymistä seuraamalla yksinkertaisten ohjeiden jaksoja. Tekstiohjelmointikielien kuten Asambly, C, Python ja JavaScript käyttäminen on yksi tärkeimmistä tavoista tehdä se. Näiden ohjelmointikielien suunnittelijat ovat käyttäneet tunteja ja tunteja yrittäessään tehdä kirjoitusohjelmakokemuksesta mahdollisimman helppoa ilmeellisen syntaksin, vahvojen ohjelmointirakenteiden ja tehokkaiden työkaluketjujen avulla. Kaikilla näillä ohjelmointikielillä on kuitenkin yhteinen piirre: tekstilähdekoodi.
Ohjelmien kirjoittaminen tekstille toimii ja useimmissa tapauksissa se toimii hyvin. Kyky ilmaista ohjelmia visuaalisesti on kuitenkin usein toivottavaa. Tarvitaan yleensä mahdollisuus suunnitella tietovirta suuremman järjestelmän eri osien kautta. Visuaaliset ohjelmointityökalut ovat myös anteeksiantavia kaikille, jotka ovat uusia ohjelmoinnissa ja joiden on vaikea käsitellä erilaisia käsitteitä, kuten muuttujia, indikaattoreita, signaaleja, laajuuksia jne.
Node-RED on visuaalinen ohjelmointityökalu. Näyttää visuaalisesti suhteet ja toiminnot ja antaa käyttäjän ohjelmoida ilman, että tarvitsee kirjoittaa kieltä. Node-RED on selainpohjainen vuonmuokkausohjelma, johon voit lisätä tai poistaa solmuja ja liittää ne toisiinsa saadakseen ne kommunikoimaan keskenään.
Node-RED: ssä kukin solmu on yksi seuraavista kahdesta tyypistä: a injektiosolmu tai a toimintosolmu . Injektiosolmut tuottavat viestin ilman syötettä ja käynnistävät viestin seuraavaan siihen liitettyyn solmuun. Sen sijaan toimintosolmuilla on tulo ja ne tekevät jonkin verran työtä sen kanssa. Koska valittavana on paljon näitä solmuja, Node-Red tekee laitteistojen, sovellusliittymien ja verkkopalvelujen yhdistämisen helpommaksi kuin koskaan.
Ensimmäiset vaiheet solmu-punaisella
Node-Red perustuu Node.js-tiedostoon. Node-Redin asentamiseksi sinulla on oltava molemmat Node.js asennettuna NPM: nä. NPM: n avulla Node-Red on erittäin helppo asentaa: npm install -g node-red
Node-Red flow -editori on selainpohjainen sovellus. Käytä sitä suorittamalla Node-Red:
npm install -g node-red Node-RED: n virtaeditori on selainpohjainen sovellus. Suorita Node-RED, jotta voit käyttää sitä:
node-red & hellip ja siirry osoitteeseen http: // localhost: 1880.
Hei maailma!
Minkä aloittelijan ohjelmointiopastus on täydellinen ilman, että opit sanomaan 'Hello World'? Aloitetaan testaamalla juuri se:
- Vedä ja pudota injektiosolmu vuonmuokkausohjelmaan. Kaksoisnapsauta ja aseta hyötykuorma merkkijonoksi ja kirjoita 'Hello world'.
- Vedä ja pudota virheenkorjaussolmu samalla tavalla kuin injektion yhteydessä.
- Liitä ne.
- Napsauta 'Ota käyttöön' -painiketta oikeassa kulmassa.
- Napsauta injektiosolmun vasemmalla puolella olevaa sinistä painiketta.
Kokeile. Näet jotain tällaista:
Vain JavaScript
Node-Redin avulla et rajoita itseäsi yksinkertaisilla solmuilla ja toiminnoilla. Koska Node-Red on rakennettu Node.js: n päälle, kaikki toimii virtalähteestä JavaScript . Solmut ovat itse asiassa Node.js-moduuleja. Löydetään http://flows.nodered.org/ , sitten lisätäksesi ne vasempaan paneeliin, voit yksinkertaisesti 'asentaa NPM: llä'. Itse asiassa voit kehittää oman työnkulun ja ladata ne vuonevarastoon. Sovellukset voivat olla niin monimutkaisia kuin haluat, kuin voit kirjoittaa JavaScriptiä funktiosolmuihin Node-Redin tarjoamassa koodieditorissa.
Koska alusta perustuu Node.js: ään, se käyttää samaa estämätöntä, tapahtumapohjaista mallia. Joten Node-Red-sovellukseen rakennettu sovellus voi toimia halvalla laitteistolla, kuten Raspberry Pi, samoin kuin pilvessä.
Nyt olemme menossa Major League Baseball: Aika automatisoida koti
Osoittaaksemme kuinka Node-Red sopii esineiden internet -areenalle, aiomme rakentaa sovelluksen älykkään lampun värin muuttamiseksi. Kaikilla ei voi olla sama älykäs valaistusjärjestelmä käytettävissään, mutta ei ole mitään syytä huoleen, koska sopiva Node-Red-moduuli löytyy virallisesta virtausvarastosta. Jotta asiat olisivat entistä helpompia, etsimme jotain älykkäämpiä.
Saanen esitellä sinulle Netbeast. Se on avoimen lähdekoodin foorumi esineiden internet-gadgetien ja laitteiden sovellusten kehittämiseen tarvitsematta huolehtia yksityiskohdista, kuten langattomista protokollista, tuotemerkkien yhteensopivuudesta tai siitä, että sinun on tiedettävä, miten käsitellä kutakin olemassa olevaa sovellusliittymää. Sen avulla voimme käyttää virtuaalisia laitteita, jotka toimivat kuin todelliset! Joten vaikka sinulla ei ole älykäs polttimo, sinulla on virtuaalinen.
Voimme asentaa NPM-paketin osoitteesta Netbeast for Node-Red näin maailmanlaajuisesti:
npm install -g node-red-contrib-netbeast netbeast-punainen solmu tekee Netbeast-ohjauspaneelin, joka kääntää sen API-primitiivit kaikille kotona oleville älylaitteille. Onneksi se on saatavana myös moduulina!
Käynnistää Netbeast:
npm install -g netbeast-cli netbeast start Tällöin paneeli on käytettävissä portissa 8000 ja SSL: ssä 8443. Avaa seuraavaksi selaimesi osoitteeseen http: // localhost: 8000 ja siirry kohtaan Tutki. Sieltä löytyy monia sovelluksia ja laajennuksia. Etsi älykkäiden polttimoidesi merkkejä (Philips Hue, LIFX, Wemo) tai jos sinulla ei ole sellaista, yritä ladata polttimo-laajennus. Tarkista, että kojelaudan laajennukset sisältävät yhden näistä!
Keltainen merkki osoittaa, että laajennukset ovat käynnissä, mutta ei löydä mitään laitteita. Napsauta hehkulampun laajennusta luodaksesi virtuaalisen hehkulampun. Kaikkien muiden löydettyjen laitteiden on oltava verkossa.
Kun kaikki on paikallaan, palataan takaisin töihin. Teemme yksinkertaisen virran:
- Vedä ja pudota injektiosolmu.
- Vedä ja pudota Netbeast-solmu.
- Vedä ja pudota virheenkorjaussolmu.
- Liitä kaikki alla olevan kuvan mukaisesti:
Nyt aiomme lähettää HTTP-pyynnön ohjauspaneelille. Netbeast-sovellusliittymää käytettäessä JSON, joka sisältää arvot, jotka haluamme aktivoida polttimossamme, on lähetettävä injektiosolmun kautta.
Painamalla painiketta syötät väriä ja energiaa kaikkiin älylamppuihisi!
Jokainen teema edustaa erityyppistä laitetta. Joten on olemassa teemoja paitsi valoille, myös musiikille, lämmitykselle ja videolle; sekä kosteuden, läsnäolon, lämpötilan anturit, ja luetteloa voidaan jatkaa. Asiakirjoistasi löydät luettelon teemoista ja niiden suositellusta rakenteesta, joka käännetään kaiken tyyppisille laitteille. Tämä IO-moottori on aloittelija, mutta tehokas. Avoin lähdekoodi, jonka avulla kehittäjät voivat käyttää tietoja uudelleen luodakseen todella yhdistettyjä skenaarioita, mikä on älykäs.
Mennään nyt syvemmälle
Seuraavaksi aiomme luoda toisen virran käyttämällä toista laajennusta, ympäröivän melun ilmaisinta, jota käytetään käynnistimenä lampun värin muuttamiseksi melun liikennevalona. Tässä opetusohjelmassa aiomme käyttää virtuaalista, joten uutta laitteistoa ei tarvitse ostaa. Aloitetaan napsauttamalla 'lisää' -painiketta Node-Red-editorissa.
Palaa paneeliin http: // localhost: 8000 / Explore Explore -osioon ja etsi Volume-Plugin. Tämä on hyvin alkeellinen verkkosovellus, joka hyödyntää getUserMedia() selaimen sisällä multimediatietojen sieppaamiseksi yksinkertaisesta HTML-sovelluksesta. Siksi se todennäköisesti toimii vain moderneissa selaimissa.
Napsauta sitä avataksesi, aivan kuten virtuaalilampulla. Se pyytää lupaa äänittää mikrofonista. Sitten se lähettää viestit Netbeast MQTT -välittäjälle, joka jaetaan koko ohjauspaneelille, jotta voimme tilata. Tämän saavuttamiseksi meidän tarvitsee vain vetää ja pudottaa solmu netbeast-trigger solmun punaisessa editorissa. Seuraavaksi aiomme lisätä toiminnon liipaisimen ja Netbeast-solmun väliin, jotta voimme päättää, milloin se on liian korkea ja milloin ei. Meidän on myös käytettävä joitain virheenkorjaussolmuja tarkistamaan, onko kaikki kunnossa. Kaavio näyttää nyt tältä:
Nyt aiomme laittaa koodin tooLoud-funktiosolmuun. Kyllä, tiedän, että lupasin, että voit ohjelmoida ilman koodausta, mutta olen jo osoittanut, että voit! Ja voit yrittää yhdistää käytettävissä olevat kohteet tai muut rekisterisolmut seuraavien tavoitteiden saavuttamiseksi.
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'}} } Tämä melko yksinkertainen koodinpätkä palauttaa yhden seuraavasta solmusta kolmesta hyötykuormasta tietyllä värikoodilla, riippuen edellisen solmun ilmoittamasta äänenvoimakkuustasosta.
Nyt olemme valmiita jatkamaan! Napsautetaan taas Ota käyttöön -painiketta ja huudetaan. Katsotaanpa, kuinka lamppu vaihtuu heti väristä toiseen!
Koska käyttämäsi mikrofoni ja verkkoselain saattavat olla erilaisia, säädä vapaasti toimintojen arvoja ja kynnyksiä ja pelaa myös väriarvoilla nähdäksesi, kuinka sipulisi muuttuvat.
Luo omat laajennuksesi
Tämä puhdas CSS-hehkulamppu inspiroi tätä cssdeck .
Kuten olet ehkä huomannut, yllä oleva virtuaalilamppu on hyvin alkeellinen, joten haluat ehkä muuttaa sitä. Tai vielä parempi, voit luoda omat älykkäiden kodin ohjaimet. Joten käymme läpi virtuaalilaajennuksen luomisen Netbeastille, jonka avulla voit luoda omia ohjaimia älylaitteille.
Voit käyttää pakettia netbeast-cli luoda joitain koodeja kuin taikalla. Suorittamalla netbeast create myplugin --plugin meillä olisi seuraavanlainen perushanke:
myplugin ├── README.md ├── index.js ├── package.json └── test.js Käyttöliittymä
Aloitetaan nyt matkia polttimo käyttöliittymällä. Laiteajureilla ei yleensä ole sellaista, joten teline-komento ei sisällä kansiota julkinen edelleen. Luodaan hakemisto public projektin sisällä ja sijoita seuraavat HTML-, CSS- ja JS-tiedostot sinne.
index.html
Netbeast Bulb Plugin beast ( 'lights' ). set ({ color : '' , power : '' }) RUN bulb.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; } Näiden HTML- ja CSS-tiedostojen avulla sinun pitäisi jo nähdä selaimesi hehkulampun muoto. Avaa HTML-tiedosto katsellaksesi livenä! Työskentelee? Ok, nyt annamme sinulle joitain toimintoja.
bulb.js
Tämä tiedosto jäljittelee hehkulampun toimintaa yksinkertaisella virtapainikkeella. Kun napsautat sen sammuttamista, asetat muutaman toiminnon, joita käytetään hieman myöhemmin värin muuttamiseen Netbeastin kautta.
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}) } Sitten kaikesta tulee järkevää: kentät ja juoksupainike, nyt voit alkaa testata uuden virtuaalilampun eri värejä! Syynä tähän on kuitenkin tehdä toinen laite esineiden internet-ekosysteemiin.
hw-api.js
Viimeisin itse tekemämme käyttöliittymä JS simuloi langatonta yhteyttä palvelimeen, kuten WiFi- tai Bluetooth-lamppu tekisi kaukosäätimellesi, kuten puhelimelle, palvelimelle tai keskittimelle. Se on käyttöliittymä, jota laajennuskoodi käyttää sen hallintaan!
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) }) Viimeiseksi meidän on sisällytettävä WebSocket-kirjasto HTML-koodiin, jotta käyttöliittymä olisi valmis. Voit kopioida lähdekoodin osoitteesta https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js ja liittää sen tiedostoon nimeltä socketio.js . Terminaalista curl tai wget, voit tehdä sen näin yksinkertaisesti:
curl https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js > public/socketio.js Meillä olisi nyt tiedostorakenne, joka näyttää tältä:
myplugin ├── README.md ├── index.js ├── package.json ├── public │ ├── bulb.css │ ├── bulb.js │ ├── hw-api.js │ ├── index.html │ └── socketio.js └── test.js Taustakuva
Nyt aiomme olla yhteydessä laitteeseen ja rekisteröidä sen Netbeast-moottoriin. Se kuuntelee verkkoliittimiä havaitsemaan, onko verkkoon asennettu lamppuja, ja tekee sitten POST hallintapaneelin sovellusliittymään, jotta uudet resurssit ovat käytettävissä.
Joten katsotaanpa aiemmin luomamme tiedostot:
package.json
Tämä tiedosto sisältää kaikki sovelluksen suorittamiseen tarvittavat riippuvuudet ja tiedot. Netbeast käyttää tavallista package.json-tiedostoa myös tiettyjen tietojen, kuten nimen tai tyypin, noutamiseen. On tärkeää määrittää, että tämä paketti on laajennus!
{ 'name': 'myplugin', 'version': '0.0.0', 'description': 'Netbeast plugin for... ', '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
Tämä on koodi, joka tuodaan Netbeast-ohjauspaneelista käynnistämään laajennus! Sen on hyväksyttävä portti komentoriviargumenteilla tietääkseen, mihin saapuvat pyynnöt voidaan hyväksyä. Se käynnistetään kuin kirjoittaisimme node myplugin.js --port . Muista ottaa huomioon hashbang ensiksi! #!/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) Kuten näette, meiltä puuttui aloitus tiedosto, joka tosiasiallisesti toteuttaa ajurit socket.io . Uncool!
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 } Käynnistä sovellus
Nyt on aika testata sovellusta. Voit pakata kaiken tar.gz ja lataa sitten sovellus ohjauspaneeliin vedä ja pudota -osiossa http: // localhost: 8000 / install.
beast package # Compresses your app when ran in myplugin dir Voilà! Nyt voit siirtyä laajennuksiin ja testata sitä. Siirry verkko-osioon (http: // localhost: 8000 / devices) nähdäksesi, miten se toimii, ja muuta sen väriä sieltä.
Jos jokin menee pieleen tai luulet, että olet unohtanut jonkin yksityiskohdan, yritä suorittaa paikallisesti solmun node index.js kanssa, ja ehkä on helpompi virheenkorjaus kuin lokin sisällä netbeast start.
Julkaise työsi
Jos haluat sovelluksen näkyvän Netbeastin Tutki-osan ohjauspaneelissa, sinun on luotava arkisto GitHubiin Netbeast-sovelluksella tai laajennuksella, jotka sisältyvät sekä kuvaukseen että README.md .
Löydä tekemämme sovellukset GitHub Search -sovellusliittymän avulla. Näemme samat tulokset, jotka näkyvät, kun GET-pyyntö tehdään: https://api.github.com/search/repositories?q=netbeast+language:javascript
Tiedät, että hakemuksesi näytetään, jos se näyttää siltä!
Mitä seuraavaksi?
Molemmat projektit ovat avoimen lähdekoodin ja ovat todella saaneet yhteisöt mukaan. Jos haluat aloittaa omien virtausten tai solmujen luomisen Solmu-punaiselle, katsokaa sitä viralliset asiakirjat . Noudata siellä esitettyjä vaiheita ja voit julkaista oman solmun tai suoratoiston hetkessä.
Toisaalta, jos haluat päästä Netbeastiin, voit myös seurata sen dokumentaatiota tai katsella paneelivarastoa. Netbeast-sovellusliittymän avulla sinun ei tarvitse keskittyä yksittäisiin laitteisiin, tuotemerkkeihin tai tekniikoihin, joten kokeile sitä. Voit oppia lisää siitä NetBeast.co-sivustolta ja liittyä heidän seuraansa Löysä kanava keskustelemaan Node-RED, IoT tai Node.js.
Jos haluat asentaa tämän Raspberry Pi-, Beagle Bone- tai vanhalle palvelimelle, tekisit sen helpoksi hakkeroida Smart Hub, ei koodia! Molemmilla sivustoilla on valmiita asentajia heille.
Hyvää hakkerointia.
