Back-End

Визуално програмиране с Node-Red: Свързване на Интернет на нещата с лекота

Чрез програмиране ние караме машините да имитират сложно поведение, следвайки последователности от прости инструкции. Използването на текстови езици за програмиране като Asambly, C, Python и JavaScript е един от основните начини за това. Дизайнерите на тези програмни езици прекарват часове и часове, опитвайки се да направят възможно най-лесно изживяването на програмата за писане чрез изразителен синтаксис, силни програмни конструкции и мощни вериги от инструменти. Всички тези езици за програмиране обаче имат обща характеристика: текстовият изходен код.

Писането на програми в текст работи и в повечето случаи работи добре. Възможността за визуално изразяване на програми обаче често е желателна. Възможността да се проектира потокът от информация чрез различни компоненти на по-голяма система обикновено е всичко, което е необходимо. Инструментите за визуално програмиране също прощават на всеки, който е нов в програмирането и му е трудно да се справи с различни концепции като променливи, индикатори, сигнали, обхвати и т.н.

Свържете хардуерни устройства с API, използвайки Node-RED

Node-RED е инструмент за визуално програмиране. Визуално показва взаимоотношения и функции и позволява на потребителя да програмира, без да се налага да пише език. Node-RED е базиран на браузъра редактор на потоци, където можете да добавяте или премахвате възли и да ги свързвате помежду си, за да ги накарате да комуникират помежду си.

В Node-RED всеки възел е един от следните два типа: a възел за инжектиране или а функционален възел . Инжекционните възли създават съобщение без нужда от въвеждане и стартират съобщението към следващия възел, свързан към него. Функционалните възли, за разлика от тях, имат вход и вършат известна работа по него. С голям брой от тези възли, от които можете да избирате, Node-Red прави свързването на хардуерни устройства, API и онлайн услуги по-лесно от всякога.

Първи стъпки с Node-Red

Node-Red се основава на Node.js. За да инсталирате Node-Red, трябва да имате и двете Node.js инсталиран като NPM. С NPM е много лесно да инсталирате Node-Red: npm install -g node-red

Редакторът на потока Node-Red е приложение, базирано на уеб браузър. За да го използвате, стартирайте Node-Red:

npm install -g node-red

Редакторът на потока на Node-RED е приложение, базирано на уеб браузър. За да можете да го използвате, стартирайте Node-RED:

node-red

& hellip и отидете на http: // localhost: 1880.

Здравей свят!

Кой урок за програмиране за начинаещи е пълен, без да научите как да кажете „Здравей, свят“? Нека започнем с тестване точно на това:

Плъзнете и пуснете инжекционен възел в редактора на потока. След това щракнете двукратно и задайте полезния товар като низ и напишете 'Hello world'.
Плъзнете и пуснете възел за отстраняване на грешки, по същия начин, както направихте с инжектирането.
Свържете ги.
Щракнете върху бутона 'Разполагане' в десния ъгъл.
Щракнете върху синия бутон точно вляво от инжекционния възел.

Опитай. Ще видите нещо подобно:

Само JavaScript

С Node-Red не се ограничавате с прости възли и функционалности. Тъй като Node-Red е изграден върху Node.js, всичко се захранва от JavaScript . Възлите всъщност са модули Node.js. Може да се намери в http://flows.nodered.org/ , след което, за да ги добавите към левия си панел, можете просто да 'инсталирате с NPM'. Всъщност можете да разработите свой собствен поток и да ги качите в хранилището на потока. Приложенията могат да бъдат толкова сложни, колкото искате, колкото можете да пишете JavaScript във функционални възли в редактора на кодове, предоставен от Node-Red.

Тъй като платформата е базирана на Node.js, тя се възползва от същия неблокиращ модел, управляван от събития. Така че приложение, изградено на Node-Red, може да работи на евтин хардуер като Raspberry Pi, както и в облака.

Сега отиваме в бейзбола на Major League: Време е да автоматизираме дома

За да демонстрираме как Node-Red се вписва в арената на Internet of Things, ще изградим приложение за промяна на цвета на интелигентната крушка. Не всеки може да разполага със същата интелигентна система за осветление, но няма какво да се притеснява, тъй като подходящият модул Node-Red може да бъде намерен от официалното хранилище на потока. Въпреки това, за да улесним нещата, ние се стремим към нещо по-умно.

Позволете ми да ви запозная с Netbeast. Това е платформа с отворен код за разработване на приложения за джаджи и устройства на Internet of Things, без да се налага да се притеснявате за подробности като безжични протоколи, съвместимост на марката или да знаете как да се справяте с всеки конкретен API, който съществува. Позволява ни да използваме виртуални устройства, които действат като реални! Така че дори да нямате интелигентна крушка, имате на разположение виртуална.

Можем да инсталираме пакета NPM от Netbeast за Node-Red глобално като това:

npm install -g node-red-contrib-netbeast

The netbeast-червен възел ще направи контролния панел на Netbeast, който ще преведе примитивите на API за всички интелигентни устройства, които имате у дома. За щастие се предлага и като модул!

Стартира Netbeast:

npm install -g netbeast-cli netbeast start

Това ще направи панела достъпен на порт 8000 и SSL на 8443. След това отворете браузъра си на http: // localhost: 8000 и отидете до Explore. Там можем да намерим много приложения и плъгини. Потърсете марките на вашите интелигентни крушки (Philips Hue, LIFX, Wemo) или ако нямате такава, опитайте да изтеглите приставката за крушка. Проверете дали приставките ви на таблото за управление съдържат един от тях!

в какво е написано linux

Жълтата значка показва, че приставките работят, но не могат да намерят устройства. Щракнете върху приставката за крушка, за да създадете виртуална крушка. Всяко друго открито устройство трябва да се появи в мрежата.

С всичко на място, нека се върнем на работа. Ще направим прост поток:

Плъзнете и пуснете инжекционен възел.
Плъзнете и пуснете възела Netbeast.
Плъзнете и пуснете възел за отстраняване на грешки.
Свържете всичко, както е показано по-долу:

Сега ще изпратим HTTP заявка до контролния панел. Когато използвате API на Netbeast, JSON, съдържащ стойностите, които искаме да активираме в нашата крушка, ще трябва да бъде изпратен през възела за инжектиране.

Натиснете бутона, за да инжектирате цвят и енергия във всичките си интелигентни крушки!

Всяка тема представлява различен тип устройство. Така че има теми не само за светлините, но и за музиката, отоплението и видеото; както и сензори за влажност, присъствие, температура и списъкът продължава. В документацията можете да намерите списък с теми и тяхната препоръчителна структура, които да бъдат преведени на всички видове устройства. Този IO двигател е начинаещ, но мощен. Отворен код, който позволява на разработчиците да използват повторно информация, за да създадат наистина свързани сценарии, като по този начин са интелигентни.

Сега да отидем по-дълбоко

След това ще създадем втори поток, използвайки друг плъгин, детектор за околен шум, който да използваме като стартер, за да променим цвета на крушката като шумов светофар. В този урок ще използваме виртуален, така че няма нужда да купувате нов хардуер. Нека започнем с щракване върху бутона „още“ в Node-Red редактора.

Върнете се в панел http: // localhost: 8000 / разгледайте, за да разгледате раздела и потърсете приставка за обем. Това е много елементарно уеб приложение, което се възползва от getUserMedia() в браузъра за улавяне на мултимедийна информация от обикновено HTML приложение. Следователно вероятно ще работи само в съвременните браузъри.

Кликнете върху него, за да се отвори, точно както при виртуалната крушка. Той иска разрешение за запис от микрофона. След това ще изпрати съобщенията до посредника на Netbeast MQTT, който ще бъде споделен в целия контролен панел, за да можем да се абонираме. За да постигнем това, ще трябва само да плъзнем и пуснем възел от netbeast-спусък в редактора на червения възел. След това ще вмъкнем функция между спусъка и възела Netbeast, за да решим кога е твърде висока и кога не. Също така, трябва да използваме някои грешки за отстраняване на грешки, за да проверим дали всичко е наред. Схемата сега ще изглежда по следния начин:

Сега ще поставим код във функционалния възел tooLoud. Да, знам, че обещах, че можете да програмирате без кодиране, но вече показах, че можете! Можете да опитате да комбинирате различните налични елементи или други възли на системния регистър, за да постигнете следното.

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

Този доста прост кодов фрагмент връща един от трите полезни товара за следващия възел със специфичен цветен код, в зависимост от нивото на силата на звука, отчетено от предишния възел.

Сега сме готови да продължим! Нека отново натиснем бутона Deploy и направим вик. Нека да видим как крушката се променя веднага от един цвят в друг!

Тъй като микрофонът и уеб браузърът, които използвате, може да са различни, не се колебайте да регулирате стойностите на функциите и праговете, а също така играйте с цветните стойности, за да видите как се променят крушките ви.

Създайте свои собствени приставки

Тази чиста CSS крушка е вдъхновена от тази cssdeck .

Както може би сте забелязали, виртуалната крушка по-горе е много елементарна, така че може да искате да я модифицирате. Или още по-добре, можете да създадете свои собствени контролери за интелигентен дом. Така че ще преминем през процеса на създаване на виртуален плъгин за Netbeast, който ще ви позволи да създадете свои собствени контроли за интелигентни устройства.

как да напиша добър код

Можете да използвате пакета netbeast-cli за генериране на някои кодове като по магия. Чрез изпълнение на netbeast create myplugin --plugin ще имаме основен проект като следния:

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

Frontend

Сега, нека започнем да имитираме крушката с лицева страна. Драйверите на устройства обикновено няма да имат такъв, така че командата на скелето не включва папка публично все още. Нека създадем директория public вътре в проекта и поставете следните HTML, CSS и JS файлове там.

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

С тези HTML и CSS файлове вече трябва да можете да видите формата на крушка във вашия браузър. Отворете HTML файла, за да гледате на живо! Работи? Добре, сега ще ви дадем някои функции.

bulb.js

Този файл ще имитира поведението на електрическа крушка с просто щракване с мощност. Когато щракнете, за да го изключите, ще зададете няколко функции, които ще бъдат използвани малко по-късно за промяна на цвета му чрез 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}) }

Тогава всичко ще започне да има смисъл: полетата и бутонът за изпълнение, сега можете да започнете да тествате различните цветове на новата ви виртуална крушка! Причината, поради която дойдохме тук, е да направим друго устройство в нашата екосистема Интернет на нещата.

hw-api.js

Най-новият JS от предния край, направен от нас, симулира безжична връзка със сървъра, подобно на WiFi или Bluetooth крушка с дистанционното управление, като телефон, сървър или концентратор. Това е интерфейсът, който кодът на приставката ще използва, за да го контролира!

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

И накрая, ние се нуждаем от библиотеката WebSocket, която да бъде включена в нашия HTML, за да бъде интерфейсът готов. Можете да копирате изходния код от https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js и да го поставите във файл, наречен socketio.js . От терминал с curl или wget, можете да го направите по този прост начин:

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

Сега ще имаме файлова структура, която изглежда така:

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

Бекенд

Сега ще се свържем с устройството и ще го регистрираме с двигателя на Netbeast. Той ще прослушва websockets, за да открие дали в мрежата са инсталирани крушки, и след това ще направи POST към API на таблото за управление, за да направи новите ресурси достъпни.

И така, нека да разгледаме файловете, които сме генерирали по-рано:

package.json

Този файл съдържа всички зависимости и информация, необходима за стартиране на вашето приложение. Netbeast използва обичайния пакет.json също за извличане на определена информация, като име или тип. Важно е да посочите, че този пакет е приставка!

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

Това е кодът, който се извежда от контролния панел на Netbeast за стартиране на приставката! Той ще трябва да приеме порта чрез аргументи от командния ред, за да знае къде да приеме входящите заявки. Ще се стартира така, сякаш сме въвели node myplugin.js --port . Не забравяйте да вземете предвид hashbang първо! #!/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)

Както можете да видите, липсваше ни файл за стартиране, този, който всъщност изпълнява драйверите socket.io . Разхладете се!

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 }

Стартирайте приложението си

Сега е моментът да тествате приложението. Можете да опаковате всичко в tar.gz и след това качете приложението на вашия контролен панел в секцията за плъзгане и пускане http: // localhost: 8000 / install.

beast package # Compresses your app when ran in myplugin dir

Voilà! Сега можете да отидете на вашите плъгини и да го тествате. Отидете в раздела за мрежата (http: // localhost: 8000 / devices), за да видите как работи и да промените цвета си от там.

Ако нещо се обърка или мислите, че сте забравили подробност, опитайте да стартирате локално с възел node index.js и може би ще бъде по-лесно да отстраните грешки, отколкото вътре в дневника netbeast start

Публикувайте работата си

Ако искате приложението да се появи в контролния панел на раздела Explore на Netbeast, трябва да създадете хранилище на GitHub с приложението или приставката Netbeast, включени в описанието и README.md .

За да намерите приложенията, които правим, използвайте API за търсене на GitHub. Виждаме същите резултати, които се появяват, когато се направи заявка за GET към: https://api.github.com/search/repositories?q=netbeast+language:javascript

Ще знаете, че вашето заявление ще бъде показано, ако изглежда така!

Какво следва?

И двата проекта са с отворен код и наистина са включили общностите. Ако искате да започнете да създавате свои собствени потоци или възли към Node-Red, погледнете го официална документация . Следвайте описаните там стъпки и ще можете да публикувате свой собствен възел или поток за нула време.

От друга страна, ако искате да влезете в Netbeast, можете да следвате и неговата документация или да разгледате хранилището на панелите. Използвайки API на Netbeast, не е нужно да се фокусирате върху отделни устройства, марки или технологии, така че опитайте. Можете да научите повече за това на NetBeast.co и да се присъедините към тях Слаб канал за обсъждане на Node-RED, IoT или Node.js.

Ако искате да инсталирате това на Raspberry Pi, Beagle Bone или стар сървър, бихте улеснили хакването на Smart Hub, без код! За двата сайта има готови инсталатори за тях.

Честито хакване.