Memprogram Secara Visual dengan Node-RED: Menghubungkan Internet dengan Mudah

Melalui pemrograman, kami membuat mesin meniru perilaku kompleks dengan mengikuti urutan instruksi sederhana. Menggunakan bahasa pemrograman tekstual seperti Assembly, C, Python, dan JavaScript adalah salah satu cara utama untuk melakukan ini. Desainer bahasa pemrograman ini telah menghabiskan waktu berjam-jam untuk mencoba membuat pengalaman menulis program semudah mungkin melalui sintaks ekspresif, konstruksi pemrograman yang kuat, dan rantai alat yang kuat. Namun, semua bahasa pemrograman ini memiliki sifat yang sama: kode sumber tekstual.

Menulis program dalam teks berfungsi, dan dalam banyak kasus itu berfungsi dengan baik. Namun, kemampuan untuk mengekspresikan program secara visual seringkali diinginkan. Mampu merancang aliran informasi melalui berbagai komponen dari sistem yang lebih besar seringkali adalah semua yang dibutuhkan. Alat pemrograman visual juga lunak terhadap siapa saja yang baru mengenal pemrograman dan berjuang untuk menangani berbagai konsep seperti variabel, pointer, sinyal, cakupan, dan sebagainya.

Node-RED adalah alat untuk memprogram secara visual. Ini menampilkan hubungan dan fungsi secara visual, dan memungkinkan pengguna untuk memprogram tanpa harus mengetik bahasa. Node-RED adalah editor aliran berbasis browser di mana Anda dapat menambahkan atau menghapus node dan menghubungkannya bersama-sama untuk membuatnya berkomunikasi satu sama lain.

Di Node-RED, setiap node adalah salah satu dari dua jenis berikut: node injeksi atau node fungsi . Inject node menghasilkan pesan tanpa memerlukan input apa pun dan mendorong pesan ke node berikutnya yang terhubung dengannya. Fungsi node, di sisi lain, mengambil input dan melakukan beberapa pekerjaan di atasnya. Dengan banyaknya node ini untuk dipilih, Node-RED membuat pengkabelan bersama perangkat keras, API, dan layanan online lebih mudah dari sebelumnya.

Memulai dengan Node-RED

Node-RED dibangun di atas Node.js. Untuk menginstal Node-RED, Anda harus menginstal Node.js dan NPM. Dengan NPM, sangat mudah untuk menginstal Node-RED:

 npm install -g node-red

Editor aliran Node-RED adalah aplikasi berbasis browser web. Untuk dapat menggunakannya, jalankan Node-RED:

 node-red

&hellip dan navigasikan ke http://localhost:1880.

Halo Dunia!

Apa tutorial pemrograman pemula yang lengkap tanpa belajar mengatakan "Halo, dunia"? Mari kita mulai dengan mencoba hal itu:

1. Seret dan lepas simpul injeksi pada editor aliran. Kemudian klik dua kali dan atur payload sebagai string dan tulis "Hello world".
2. Seret dan lepas node debug , dengan cara yang sama seperti yang Anda lakukan dengan node injeksi.
3. Kawat mereka bersama-sama.
4. Klik tombol "Terapkan" di sudut kanan.
5. Klik tombol biru di sebelah kiri node injeksi .

Cobalah. Anda akan melihat sesuatu seperti ini:

Hanya JavaScript

Dengan Node-RED, Anda tidak terbatas pada node dan fungsionalitas sederhana saja. Karena Node-RED dibangun di atas Node.js, semuanya didukung oleh JavaScript. Node memang merupakan modul Node.js. Mereka dapat ditemukan di http://flows.nodered.org/, jadi untuk menambahkannya ke panel kiri Anda, Anda cukup “npm install” mereka. Bahkan, Anda dapat mengembangkan aliran Anda sendiri dan mengunggahnya ke repositori aliran. Aplikasi dapat serumit yang Anda inginkan, karena Anda dapat mengetik JavaScript di node fungsi dalam editor kode yang disediakan Node-RED.

Karena platform didasarkan pada Node.js, platform ini memanfaatkan model non-pemblokiran yang digerakkan oleh peristiwa yang sama. Jadi aplikasi yang dibangun di atas Node-RED dapat dijalankan pada perangkat keras berbiaya rendah seperti Raspberry Pi, serta di cloud.

Now Let's Go Pro: Saatnya Otomatisasi Rumah

Untuk mendemonstrasikan bagaimana Node-RED cocok dengan ranah Internet of Things, mari kita buat aplikasi untuk mengubah warna bohlam pintar. Tidak semua orang mungkin memiliki sistem pencahayaan cerdas yang sama, tetapi tidak ada yang perlu dikhawatirkan, karena Anda dapat menemukan modul Node-RED yang sesuai dari repositori aliran resmi. Namun, untuk membuat segalanya lebih mudah, mari kita mencari sesuatu yang lebih cerdas.

Temui Netbeast. Ini adalah platform open source untuk mengembangkan aplikasi untuk peralatan dan perangkat Internet of Things tanpa harus khawatir tentang detail seperti protokol nirkabel, kompatibilitas merek, atau harus tahu bagaimana menangani setiap API tertentu di luar sana. Hal ini memungkinkan kita untuk menggunakan perangkat virtual yang bertindak sebagai yang nyata! Jadi, bahkan jika Anda tidak memiliki bohlam pintar, Anda memiliki bohlam virtual yang tersedia.

Kita dapat menginstal paket npm Netbeast for Node-RED secara global seperti ini:

 npm install -g node-red-contrib-netbeast

Node netbeast-red akan mewakili Dasbor Netbeast, yang akan menerjemahkan primitif API-nya ke semua perangkat pintar yang Anda miliki di rumah. Untungnya itu juga tersedia sebagai modul!

Mulai Netbeast:

 npm install -g netbeast-cli netbeast start

Ini akan membuat dasbor tersedia di port 8000 dan SSL di 8443. Selanjutnya buka browser Anda ke http://localhost:8000 dan navigasikan ke Explore. Di sana kita akan dapat menemukan banyak aplikasi dan plugin. Cari merek bohlam pintar Anda (Philips Hue, LIFX, WeMo) atau jika Anda tidak memilikinya, coba unduh plugin bohlam. Periksa apakah plugin Dashboard Anda mengandung salah satunya!

Lencana kuning menunjukkan bahwa plugin sedang berjalan, tetapi mereka tidak dapat menemukan perangkat apa pun. Klik pada plugin bohlam untuk membuat bohlam virtual. Perangkat lain yang ditemukan akan muncul di bawah Jaringan.

Dengan segala sesuatunya, mari kembali bekerja. Kami akan membuat alur sederhana:

1. Seret dan lepas simpul injeksi.
2. Seret dan lepas simpul Netbeast.
3. Seret dan lepas simpul debug.
4. Hubungkan semuanya seperti yang ditunjukkan di bawah ini:

Sekarang mari kita mengirim permintaan HTTP ke Dashboard. Dengan menggunakan API Netbeast, kita harus mengirimkan JSON melalui node injeksi yang berisi nilai-nilai yang ingin kita picu pada bohlam kita.

Tekan tombol untuk menyuntikkan warna dan daya ke semua bohlam pintar Anda!

Setiap topik mewakili jenis perangkat yang berbeda. Jadi ada topik untuk lampu tetapi juga untuk musik, pemanas, dan video; serta sensor untuk kelembaban, kehadiran, suhu, dan daftar terus. Anda dapat menemukan dalam dokumentasi mereka daftar topik dan struktur yang direkomendasikan untuk diterjemahkan ke semua jenis perangkat. Mesin IoT ini belum matang, namun kuat. Sumber terbuka yang memungkinkan pengembang untuk menggunakan kembali informasi untuk membuat skenario yang benar-benar terhubung, sehingga menjadi cerdas.

Ayo Pergi Lebih Dalam

Selanjutnya, kita akan membuat aliran kedua menggunakan plugin lain, detektor kebisingan sekitar, untuk menggunakannya sebagai pemicu untuk mengubah warna bola lampu sebagai semafor kebisingan. Dalam tutorial ini, kita akan menggunakan yang virtual, jadi tidak perlu membeli perangkat keras baru. Mari kita mulai dengan mengklik tombol “plus” di editor Node-RED.

Masuk lagi pada Dashboard http://localhost:8000/explore ke bagian Explore dan cari Volume-Plugin. Ini adalah aplikasi web yang sangat sederhana yang memanfaatkan getUserMedia() dalam browser untuk menangkap media dari aplikasi HTML sederhana. Jadi itu mungkin hanya akan berfungsi di browser modern!

Klik untuk membukanya, seperti bola lampu virtual. Ini akan meminta izin untuk merekam dari mikrofon Anda. Kemudian ia akan mengirimkan pesan ke broker MQTT Netbeast, yang akan dibagikan di semua Dasbor, sehingga kami dapat berlangganan. Untuk melakukan hal seperti itu, kita hanya perlu menarik dan melepas node pemicu netbeast ke editor node-red. Kemudian kita akan menyisipkan fungsi antara pemicu dan node Netbeast sehingga kita memutuskan kapan terlalu keras atau tidak. Juga, kita harus menggunakan beberapa node debug untuk memeriksa apakah semuanya baik-baik saja. Skema sekarang akan terlihat seperti ini:

Sekarang, mari kita masukkan beberapa kode ke node fungsi tooLoud. Ya, saya tahu saya berjanji Anda dapat memprogram tanpa harus membuat kode, tetapi saya telah menunjukkan bahwa Anda bisa! Dan Anda dapat mencoba menggabungkan berbagai elemen yang tersedia atau node lain dari registri untuk melakukan hal berikut.

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

Cuplikan kode yang agak sederhana ini mengembalikan salah satu dari tiga muatan untuk node berikutnya dengan kode warna tertentu, tergantung pada tingkat volume yang dilaporkan oleh node sebelumnya.

Sekarang kita siap untuk pergi! Mari kita tekan tombol Deploy lagi dan buat kebisingan. Mari kita lihat bagaimana bohlam berubah dari satu warna ke warna lain dengan segera!

Karena mikrofon dan browser web yang Anda gunakan mungkin berbeda, jangan ragu untuk menyesuaikan nilai fungsi dan ambang batas, dan juga bermain dengan nilai warna untuk melihat bagaimana hal itu mengubah bohlam Anda.

Membuat Plugin Anda Sendiri

Bola lampu dalam CSS murni ini terinspirasi oleh cssdeck ini.

Seperti yang mungkin Anda perhatikan, bohlam virtual dari sebelumnya sangat sederhana, jadi Anda mungkin ingin mengubahnya. Atau bahkan lebih baik, Anda dapat membuat pengontrol rumah pintar Anda sendiri. Jadi kita akan melalui proses pembuatan plugin virtual untuk Netbeast, yang memungkinkan Anda membuat pengontrol sendiri untuk perangkat pintar.

Anda dapat menggunakan paket netbeast-cli untuk menghasilkan beberapa kode secara otomatis. Dengan menjalankan netbeast create myplugin --plugin kita akan mendapatkan proyek dasar seperti berikut:

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

Bagian Depan

Sekarang, mari kita mulai meniru bohlam dengan frontend. Pengontrol perangkat biasanya tidak memilikinya, jadi belum ada folder publik yang disertakan dalam perintah scaffold. Mari buat direktori public di dalam proyek dan letakkan di sana file HTML, CSS, dan JS berikut.

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>

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

Dengan file HTML dan CSS ini, Anda seharusnya sudah dapat melihat bentuk bohlam di browser Anda. Silakan dan buka file HTML Anda untuk melihatnya secara langsung! Apakah itu bekerja? Bagus, sekarang mari kita berikan beberapa fungsi.

bohlam.js

File ini akan meniru perilaku bohlam dengan klik sederhana, klik mati dan akan mengatur beberapa fungsi yang akan digunakan sedikit untuk mengubah warnanya melalui 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}) }

Setelah ini, bidang dan tombol jalankan semuanya masuk akal. Anda dapat mulai mencoba berbagai warna pada bohlam virtual baru Anda. Namun, alasan kami datang sejauh ini adalah untuk menjadikannya perangkat lain dari ekosistem Internet of Things kami.

hw-api.js

Yang terakhir dari JS front-end buatan kami sendiri. Ini mengolok-olok koneksi nirkabel dengan server, seperti bohlam WiFi atau Bluetooth dengan remote kontrolnya, seperti telepon, server, atau hub. Ini adalah antarmuka kode plugin yang sebenarnya akan digunakan untuk mengontrolnya!

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

Terakhir, kita memerlukan library WebSocket untuk disertakan dari HTML kita, sehingga frontend sudah siap. Anda dapat menyalin sumber dari https://raw.githubusercontent.com/netbeast/bulb-plugin/master/public/socketio.js dan menempelkannya ke file bernama socketio.js . Dari terminal dengan curl atau wget , Anda dapat melakukannya dengan sederhana:

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

Kami sekarang akan memiliki struktur file yang terlihat seperti ini:

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

Bagian Belakang

Sekarang kita akan mengimplementasikan antarmuka dengan perangkat dan mendaftarkannya ke mesin Netbeast. Ini akan mendengarkan soket web untuk mendeteksi bahwa bohlam telah dipasang di jaringan, dan kemudian akan membuat POST ke API Dasbor sehingga sumber daya baru tersedia.

Untuk itu, mari kita lihat file yang kita buat sebelumnya:

package.json

File ini berisi semua dependensi dan informasi yang diperlukan untuk menjalankan aplikasi Anda. Netbeast menggunakan package.json biasa juga untuk mengambil beberapa informasi, seperti nama atau jenisnya. Penting untuk menentukan bahwa paket ini adalah 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

Ini adalah kode yang dipanggil dari dasbor Netbeast untuk meluncurkan plugin! Itu perlu menerima port dengan argumen baris perintah untuk mengetahui di mana menerima permintaan masuk. Ini akan diluncurkan seolah-olah kita mengetik node myplugin.js --port <a free port number> . Harap perhatikan hashbang di awal juga! #!/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)

Seperti yang Anda lihat, kami kehilangan file untuk meluncurkannya, file yang benar-benar mengimplementasikan pengontrol socket.io . Tidak ada yang mewah!

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 }

Luncurkan Aplikasi Anda

Sekarang saatnya Anda menguji aplikasi Anda. Anda dapat melakukannya dengan mengemasnya dalam format tar.gz dan mengunggahnya ke dasbor Anda di bagian drag-and-drop http://localhost:8000/install.

 beast package # Compresses your app when ran in myplugin dir

Voila! Anda sekarang dapat membuka plugin Anda dan mengujinya. Buka bagian jaringan (http://localhost:8000/devices) untuk melihatnya berjalan dan ubah warnanya dari sana.

Jika terjadi kesalahan atau Anda merasa ada detail yang terlewat, coba jalankan secara lokal dengan node index.js , dan mungkin akan lebih mudah untuk men-debug daripada di dalam log netbeast start .

Publikasikan Karya Anda

Jika Anda ingin aplikasi Anda ditampilkan di bagian Jelajahi dasbor Netbeast, Anda harus membuat repositori di GitHub dengan aplikasi Netbeast atau plugin Netbeast, keduanya disertakan dalam deskripsi dan README.md .

Untuk menemukan aplikasi, kami menggunakan API pencarian GitHub. Kami melihat hasil yang sama yang muncul saat Anda membuat permintaan GET ke: https://api.github.com/search/repositories?q=netbeast+language:javascript

Anda akan tahu bahwa aplikasi Anda akan ditampilkan jika muncul di sana!

Apa berikutnya?

Kedua proyek tersebut bersifat open source dan benar-benar melibatkan komunitas. Jika Anda ingin mulai membuat aliran atau node Anda sendiri ke Node-RED, lihat dokumentasi resminya. Ikuti langkah-langkah seperti yang dijelaskan di sana dan Anda akan dapat memublikasikan simpul atau aliran Anda sendiri dalam waktu singkat.

Di sisi lain, jika Anda ingin menyelami Netbeast, Anda dapat mengikuti dokumentasi mereka juga atau melihat repositori Dashboard. Dengan menggunakan Netbeast API, Anda tidak perlu lagi berfokus pada perangkat, merek, atau teknologi individual, jadi cobalah. Anda dapat mempelajarinya lebih lanjut di sini, atau bergabung dengan saluran Slack mereka dan mendiskusikan Node-RED, IoT, atau Node.js.

Jika Anda ingin menginstal barang ini di Raspberry Pi, Beagle Bone atau server lama, Anda akan mengubahnya menjadi Smart Hub yang dapat diretas, tanpa kode! Ada build premade untuk mereka di kedua situs.

Selamat meretas.