S programiranjem naredimo stroje, ki posnemajo zapleteno vedenje, tako da sledimo zaporedjem preprostih navodil. Uporaba besedilnih programskih jezikov, kot so Asambly, C, Python in JavaScript, je eden glavnih načinov za to. Oblikovalci teh programskih jezikov so si ure in ure prizadevali, da bi s pisno sintakso, močnimi programskimi konstrukcijami in zmogljivimi orodnimi verigami čim bolj poenostavili izkušnjo pisanja programa. Vendar imajo vsi ti programski jeziki skupno lastnost: besedilno izvorno kodo.
Pisanje programov v besedilu deluje in v večini primerov deluje dobro. Vendar je sposobnost vizualnega izražanja programov pogosto zaželena. Običajno je vse, kar je potrebno za načrtovanje pretoka informacij skozi različne komponente večjega sistema. Orodja za vizualno programiranje odpuščajo tudi vsem, ki so novi v programiranju in se težko spopadajo z različnimi koncepti, kot so spremenljivke, kazalniki, signali, obsegi itd.
Node-RED je orodje za vizualno programiranje. Vizualno prikaže razmerja in funkcije ter uporabniku omogoča programiranje, ne da bi mu bilo treba vnašati jezik. Node-RED je urejevalnik tokov v brskalniku, kjer lahko vozlišča dodajate ali odstranjujete ter jih povezujete med seboj, da lahko komunicirajo med seboj.
V Node-RED je vsako vozlišče eno od naslednjih dveh vrst: a vozlišče za vbrizgavanje ali a vozlišče funkcije . Vozlišča za vbrizgavanje ustvarijo sporočilo brez potrebe po vnosu in sporočilo pošljejo na naslednje z njim povezano vozlišče. Funkcionalna vozlišča imajo nasprotno vhod in nekaj delajo na njem. Z velikim številom teh vozlišč, ki jih lahko izbirate, Node-Red olajša povezovanje strojnih naprav, API-jev in spletnih storitev kot kdaj koli prej.
Node-Red temelji na Node.js. Če želite namestiti Node-Red, morate imeti oboje Node.js nameščen kot NPM. Z NPM je zelo enostavno namestiti Node-Red: npm install -g node-red
Urejevalnik pretoka Node-Red je aplikacija, ki temelji na spletnem brskalniku. Če ga želite uporabiti, zaženite Node-Red:
npm install -g node-red
Urejevalnik pretoka Node-RED je aplikacija, ki temelji na spletnem brskalniku. Če ga želite uporabljati, zaženite Node-RED:
node-red
& hellip in pojdite na http: // localhost: 1880.
Katera vadnica za programiranje za začetnike je popolna, ne da bi se naučili, kako reči 'Hello World'? Začnimo s testiranjem točno tega:
Poskusi. Videli boste nekaj takega:
Z Node-Red se ne omejujete s preprostimi vozlišči in funkcionalnostmi. Ker je Node-Red zgrajen na vrhu Node.js, vse poganja JavaScript . Vozlišča so pravzaprav moduli Node.js. Najdete v http://flows.nodered.org/ , nato pa jih lahko dodate na levo ploščo in jih preprosto 'namestite z NPM'. Pravzaprav lahko razvijete svoj tok in jih naložite v odlagališče pretoka. Aplikacije so lahko poljubno zapletene, saj lahko v funkcionalna vozlišča vpišete JavaScript v urejevalniku kod, ki ga nudi Node-Red.
Ker platforma temelji na Node.js, izkorišča isti neblokirajoči model, ki temelji na dogodkih. Tako lahko aplikacija, zgrajena na Node-Red, deluje na poceni strojni opremi, kot je Raspberry Pi, pa tudi v oblaku.
Da bi prikazali, kako se Node-Red prilega areni Internet stvari, bomo sestavili aplikacijo za spreminjanje barve pametne žarnice. Nihče ne more imeti na voljo enakega pametnega sistema razsvetljave, vendar ni razloga za skrb, saj je ustrezen modul Node-Red mogoče najti v uradnem odlagališču pretoka. Da pa bi stvari še olajšali, se odločimo za kaj pametnejšega.
Naj vam predstavim Netbeast. Je odprtokodna platforma za razvoj aplikacij za pripomočke in naprave Internet of Things, ne da bi morali skrbeti za podrobnosti, kot so brezžični protokoli, združljivost blagovne znamke ali vedeti, kako ravnati z vsakim specifičnim API-jem, ki obstaja. Omogoča nam uporabo virtualnih naprav, ki delujejo kot prave! Torej, tudi če nimate pametne žarnice, imate na voljo navidezno.
Paket NPM lahko namestimo iz Netbeast za Node-Red globalno takole:
npm install -g node-red-contrib-netbeast
The netbeast-rdeče vozlišče bo upodobil nadzorno ploščo Netbeast, ki bo prevedla svoje primitive API za vse pametne naprave, ki jih imate doma. Na srečo je na voljo tudi kot modul!
Zažene Netbeast:
npm install -g netbeast-cli netbeast start
Tako bo podokno na voljo na vratih 8000 in SSL na 8443. Nato odprite brskalnik na http: // localhost: 8000 in se pomaknite do Raziskovanje. Tam lahko najdemo veliko aplikacij in vtičnikov. Poiščite znamke pametnih žarnic (Philips Hue, LIFX, Wemo), ali če jih nimate, poskusite prenesti vtičnik za žarnice. Preverite, ali vtičniki na nadzorni plošči vsebujejo enega od teh!
primeri kapitalskega proračuna z rešitvami
Rumena značka označuje, da se vtičniki izvajajo, vendar ne najde nobene naprave. Kliknite vtičnik žarnice, da ustvarite navidezno žarnico. Vsa druga odkrita naprava se mora pojaviti v omrežju.
Ko je vse na svojem mestu, se vrnimo k delu. Naredili bomo preprost tok:
Zdaj bomo na nadzorno ploščo poslali zahtevo HTTP. Ko uporabljate API Netbeast, bo moral JSON, ki vsebuje vrednosti, ki jih želimo aktivirati v naši žarnici, poslati skozi vbrizgalno vozlišče.
Pritisnite gumb, da vbrizgate barvo in energijo v vse pametne žarnice!
Vsaka tema predstavlja drugačno vrsto naprave. Torej obstajajo teme ne samo za luči, ampak tudi za glasbo, ogrevanje in video; ter senzorji za vlago, prisotnost, temperaturo in seznam se nadaljuje. V svoji dokumentaciji najdete seznam tem in njihovo priporočeno strukturo, ki jo je treba prevesti v vse vrste naprav. Ta IO motor je nov, a zmogljiv. Odprta koda, ki razvijalcem omogoča ponovno uporabo informacij za ustvarjanje resnično povezanih scenarijev, s čimer so inteligentni.
Nato bomo z drugim vtičnikom ustvarili drugi tok, detektor hrupa v okolici, ki ga bomo uporabili kot zaganjalnik za spreminjanje barve žarnice kot semaforja za hrup. V tej vadnici bomo uporabili virtualno, zato ni treba kupovati nove strojne opreme. Začnimo s klikom na gumb 'več' v urejevalniku Node-Red.
Vrnite se na ploščo http: // localhost: 8000 / raziskujte v razdelek Raziskovanje in poiščite vtičnik za glasnost. To je zelo osnovna spletna aplikacija, ki izkorišča prednosti getUserMedia()
v brskalnik za zajem večpredstavnostnih informacij iz preproste aplikacije HTML. Zato bo verjetno deloval le v sodobnih brskalnikih.
Kliknite nanjo, da se odpre, tako kot pri virtualni žarnici. Zahteva dovoljenje za snemanje iz mikrofona. Nato bo poslala sporočila posredniku Netbeast MQTT, ki ga bodo delili po celotni nadzorni plošči, da se bomo lahko naročili. Da bi to dosegli, bomo morali samo povleči in spustiti vozlišče netbeast-sprožilec v urejevalniku vozlišč rdeče. Nato bomo med sprožilec in vozlišče Netbeast vstavili funkcijo, da se odločimo, kdaj je previsoka in kdaj ne. Prav tako bi morali uporabiti nekaj vozlišč za odpravljanje napak, da preverimo, ali je vse v redu. Shema bo zdaj videti nekako tako:
Zdaj bomo v vozlišče funkcije tooLoud dali nekaj kode. Da, vem, da sem obljubil, da lahko programirate brez kodiranja, vendar sem že pokazal, da lahko! Lahko pa poskusite združiti različne razpoložljive elemente ali druga vozlišča registra, da dosežete naslednje.
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'}} }
Ta dokaj preprost delček kode vrne enega od treh koristnih obremenitev za naslednje vozlišče z določeno barvno kodo, odvisno od ravni glasnosti, o kateri je poročalo prejšnje vozlišče.
Zdaj smo pripravljeni nadaljevati! Ponovno pritisnite gumb za uvajanje in zavpijemo. Poglejmo, kako se žarnica takoj spremeni iz ene barve v drugo!
Ker se mikrofon in spletni brskalnik, ki ga uporabljate, morda razlikujeta, prilagodite vrednosti funkcij in pragove ter se poigrajte z barvnimi vrednostmi, da vidite, kako se spreminjajo žarnice.
To čisto CSS žarnico je navdihnila ta cssdeck .
Kot ste morda že opazili, je navidezna žarnica zgoraj zelo osnovna, zato jo boste morda želeli spremeniti. Ali še bolje, lahko ustvarite lastne krmilnike pametnega doma. Torej bomo šli skozi postopek ustvarjanja navideznega vtičnika za Netbeast, ki vam bo omogočil, da ustvarite lastne kontrole za pametne naprave.
medijska poizvedba css za vse naprave
Uporabite lahko paket netbeast-cli
ustvariti nekaj kod kot po čarovniji. Z izvršitvijo netbeast create myplugin --plugin
imeli bi osnovni projekt, kot je naslednji:
myplugin ├── README.md ├── index.js ├── package.json └── test.js
Zdaj pa začnimo posnemati žarnico s čelno stranjo. Gonilniki naprav ga običajno ne bodo imeli, zato ukaz odra ne vključuje mape javnosti še vedno. Ustvarimo imenik public
znotraj projekta in tja postavite naslednje datoteke HTML, CSS in JS.
Netbeast Bulb Plugin beast ( 'lights' ). set ({ color : '' , power : '' })
RUN
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; }
S temi datotekama HTML in CSS bi morali v brskalniku že videti obliko žarnice. Odprite datoteko HTML za ogled v živo! Dela? Ok, zdaj vam bomo dali nekaj funkcij.
Ta datoteka bo posnemala vedenje žarnice s preprostim klikom na moč. Ko kliknete, da ga izklopite, boste nastavili nekaj funkcij, ki bodo malo kasneje uporabljene za spreminjanje barve prek Netbeasta.
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}) }
Potem se bo vse začelo smiselno: polja in gumb za zagon, zdaj lahko začnete preizkušati različne barve vaše nove virtualne žarnice! Vendar smo razlog, da smo prišli sem, narediti drugo napravo v našem ekosistemu Internet stvari.
Najnovejši front-end JS, ki smo ga izdelali sami, simulira brezžično povezavo s strežnikom, tako kot žarnica WiFi ali Bluetooth z vašim daljinskim upravljalnikom, na primer telefonom, strežnikom ali zvezdiščem. To je vmesnik, ki ga bo koda vtičnika uporabila za nadzor!
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) })
Nazadnje moramo v naš HTML vključiti knjižnico WebSocket, da bo vmesnik pripravljen. Izvorno kodo lahko kopirate s https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js in jo prilepite v datoteko z imenom socketio.js . S terminala z curl
ali wget
, lahko to storite tako preprosto:
curl https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js > public/socketio.js
Zdaj bi imeli datotečno strukturo, ki je videti takole:
myplugin ├── README.md ├── index.js ├── package.json ├── public │ ├── bulb.css │ ├── bulb.js │ ├── hw-api.js │ ├── index.html │ └── socketio.js └── test.js
Zdaj bomo vzpostavili povezavo z napravo in jo registrirali z mehanizmom Netbeast. Poslušal bo, da spletne vtičnice zazna, ali so bile v omrežju nameščene kakšne žarnice, nato pa bo POST
na API nadzorne plošče, da bodo na voljo novi viri.
Poglejmo si torej datoteke, ki smo jih ustvarili prej:
Ta datoteka vsebuje vse odvisnosti in informacije, potrebne za zagon vaše aplikacije. Netbeast uporablja običajni paket.json tudi za pridobivanje določenih informacij, na primer imena ali vrste. Pomembno je navesti, da je ta paket vtičnik!
{ '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' }
To je koda, ki jo prinese nadzorna plošča Netbeast za zagon vtičnika! Vrata bo moral sprejeti prek argumentov ukazne vrstice, da bo vedel, kje sprejeti dohodne zahteve. Zagnala se bo, kot da smo vtipkali node myplugin.js --port
. Ne pozabite upoštevati hashbang najprej! #!/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)
Kot lahko vidite, nam je za zagon manjkala datoteka, ki dejansko izvaja gonilnike vtičnica.io . Ne ohladite!
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 }
Zdaj je čas, da preizkusite aplikacijo. Vse lahko zapakirate v tar.gz
in nato naložite aplikacijo na nadzorno ploščo v odsek povleci in spusti http: // localhost: 8000 / install.
beast package # Compresses your app when ran in myplugin dir
Voilà! Zdaj lahko odprete svoje vtičnike in ga preizkusite. Pojdite v razdelek o omrežju (http: // localhost: 8000 / devices), da vidite, kako deluje, in od tam spremenite barvo.
Če gre kaj narobe ali če mislite, da ste pozabili podrobnost, poskusite zagnati lokalno z vozliščem node index.js
in morda bo lažje odpraviti napake kot v dnevniku netbeast start
.
Če želite, da se aplikacija prikaže na nadzorni plošči razdelka Raziskovanje Netbeasta, morate v GitHubu ustvariti repozitorij z aplikacijo ali vtičnikom Netbeast, ki sta vključena v opis in README.md .
Za iskanje aplikacij, ki jih izdelujemo, uporabite API za iskanje GitHub. Vidimo enake rezultate, ki se pojavijo, ko je podana zahteva GET za: https://api.github.com/search/repositories?q=netbeast+language:javascript
Vedeli boste, da bo vaša prijava prikazana, če se zdi!
Oba projekta sta odprtokodna in resnično vključujeta skupnosti. Če želite začeti ustvarjati lastne tokove ali vozlišča za Node-Red, si oglejte njegovo uradna dokumentacija . Sledite tam opisanim korakom in v kratkem boste lahko objavili svoje vozlišče ali tok.
Po drugi strani pa, če želite vstopiti v Netbeast, lahko sledite tudi njegovi dokumentaciji ali si ogledate skladišče plošč. Z uporabo Netbeast API-ja se vam ni treba osredotočati na posamezne naprave, blagovne znamke ali tehnologije, zato poskusite. Več o tem lahko izveste na NetBeast.co in se jim pridružite Slack kanal razpravljati o Node-RED, IoT ali Node.js.
Če želite to namestiti na Raspberry Pi, Beagle Bone ali stari strežnik, bi vam olajšali vdor v Smart Hub, brez kode! Na obeh straneh so zanje pripravljeni namestitveni programi.
Srečno hekanje.