IIOT Workshop Node RED [PDF]

Citation preview

IOT National Summit 2021 WORKSHOP IOT Virtual Lab 21/2/2021



1



Dr. Ir. Eko Mursito Budi, MT IPM Dimas Apeco Putra M. Iqbal Anggoro Agung Rio Ariesta Sasmono



Teknik Fisika ITB



PENGENALAN JARINGAN



1.1



LATAR BELAKANG



Suatu sistem IOT umumnya terdiri atas satu broker, banyak node, satu server, dan banyak klien. IOT-Server merupakan komponen penting dalam arsitektur IOT untuk melayani pengiriman data dari/ke IOT-Node, menjalankan pengolahan data lain yang diperlukan, menyimpan data, serta melayani tampilan ke klien (khususnya klien berbasis web). Saat ini tersedia berbagai software untuk membangun server, misalnya Nginx, Apache, dan Node.js. Node.js sendiri lebih tepat disebut sebagai runtime environment, dimana aplikasi server dapat dirancang di dalamnya. IOT-Server dalam praktikum ini dibangun menggunakan Node.js. Terdapat berbagai package dalam Node.js yang dapat mempermudah perancangan aplikasi. Salah satu package untuk memudahkan perancangan IOTServer secara visual adalah Node-RED.



1.2



CAPAIAN PEMBELAJARAN a.



1.3 No 1



2 3 4



1.4



Mahasiswa dapat membangun IOT-Server sederhana menggunakan Node-RED dalam jaringan lokal.



ALAT & BAHAN Item Komputer / laptop yang sudah ter-install Node-RED beserta palette tambahan node-red-dashboard dan node-red-contribaedes; serta web browser Koneksi ke Internet IOT Broker IOT Node



Banyak 1



Keterangan Disediakan peserta



1 1 N



Disediakan panitia



PANDUAN TEKNIS



Panduan instalasi Node-RED: ● (Linux) https://nodered.org/docs/getting-started/local ● (Windows) https://nodered.org/docs/getting-started/windows Panduan instalasi palette node-red-dashboard dan node-red-contrib-aedes: 1. Setelah menginstall Node-RED, jalankan Node-RED: buka terminal, ketik node-red, Enter. 2. Buka Node-RED Editor: buka web browser (mis. Chrome), buka alamat localhost:1880 3. Pada bagian header di Node-RED Editor, klik icon menu >> Manage palette.



TF4061/Modul-1/1



Gambar 1.4.1. Bagian-bagian Node-RED Editor (ref https://nodered.org/docs/user-guide/editor/) 4. 5.



1.5



Klik tab Install, search node-red-dashboard, klik install, terima instalasi, tunggu hingga selesai. Lakukan juga untuk palette node-red-contrib-aedes Pastikan kedua palette sudah terinstall dengan melihatnya pada daftar node di bagian palette.



LANGKAH PRAKTIKUM



Pada workshop ini, akan dibuat sebuah IOT-Client untuk mengirimkan data ke IOT-Server dan ditampilkan sebagai heatmap, seperti pada gambar di bawah.



Gambar 1.0. Tampilan heatmap dari data yang dikirim ke IOT-Server 1. Menggunakan node mqtt out untuk publish nilai ke MQTT Broker. 1.1. Tambahkan node mqtt out dengan mencari mqtt out pada kolom pencarian di bagian palette dari NodeRED Editor, lalu tarik dan lepas node ke ruang kerja.



TF4061/Modul-1/2



Gambar 1.1. Menambahkan node mqtt out 1.2. Klik dua kali pada node yang ditambahkan untuk menyesuaikan pengaturannya.



Gambar 1.2. Mengatur node mqtt out 1.3. Tambahkan broker yang akan menjadi tujuan publish dengan menekan tombol dengan icon pensil. Lalu pada bagian server, isi dengan nama broker “iot.tf.itb.ac.id”. Biarkan parameter lain pada pengaturan defaultnya. Lalu tekan Add, kemudian Done.



TF4061/Modul-1/3



Gambar 1.3. Mengatur alamat broker MQTT



2. Menyiapkan contoh data yang dikirim menggunakan node inject. 2.1. Untuk menguji pengiriman data dengan suatu data contoh, digunakan node inject. Tambahkan node inject dari bagian palette. Kemudian hubungkan keluarannya ke masukan node mqtt out sebelumnya.



Gambar 2.1. Menambahkan node inject 2.2. Klik dua kali pada node inject yang ditambahkan untuk mengubah pengaturannya. Isi payload dengan suatu angka pada rentang 0-50 dan isi topic dengan “itb/tf/iot/heatmap_kolab/in/peserta/”. Bagian “” pada topic diganti dengan suatu kombinasi huruf & angka unik, misalnya singkatan nama Anda dan dikombinasikan dengan tanggal lahir, contoh: “itb/tf/iot/heatmap_kolab/in/peserta/dimasap0204”.



TF4061/Modul-1/4



Gambar 2.2. Pengaturan node inject



3. Menggunakan node mqtt in untuk subscribe respons dari MQTT Broker. 3.1. Tambahkan node mqtt in dari palette dan letakkan di ruang kerja.



Gambar 3.1. Menambah node mqtt in 3.2. Klik dua kali pada node tersebut untuk mengubah pengaturannya. Pastikan broker yang digunakan sudah sesuai (yakni iot.tf.itb.ac.id:1883). Kemudian pada bagian topic, isikan “itb/tf/iot/heatmap_kolab/out/peserta/”. Gunakan yang sama seperti pada langkah 2.2. Perbedannya adalah pada bagian subtopik tingkat 4, yakni “out”, sementara pada langkah 2.2 adalah “in”.



TF4061/Modul-1/5



Gambar 3.2. Pengaturan node mqtt in



4. Menggunakan node debug untuk melihat respons. 4.1. Tambahkan node debug dari palette dan letakkan di ruang kerja. Hubungkan masukannya dengan keluaran dari node mqtt in sebelumnya.



Gambar 4.1. Menambah node debug



4.2. Untuk menyimpan perubahan dan mengeksekusinya, tekan tombol Deploy, di paling kanan bagian header dari Node-RED Editor.



TF4061/Modul-1/6



Gambar 4.2 Deploy perubahan yang dibuat



4.3. Pada bagian sidebar, klik tombol dengan icon serangga (debug), untuk melihat keluaran node debug. Lalu coba tekan tombol biru pada node inject dan amati keluaran debug pada sidebar.



Gambar 4.3. Mengamati keluaran debug



5. Menggunakan node slider untuk membuat GUI pengiriman data. Untuk mempermudah variasi nilai yang dikirimkan, akan dibuat suatu elemen GUI input slider. 5.1. Tambahkan node slider dari palette dan letakkan di ruang kerja. Hubungkan keluarannya dengan masukan node mqtt out.



TF4061/Modul-1/7



Gambar 5.1. Menambah node slider 5.2. Klik dua kali pada node slider untuk mengubah pengaturannya. Tambah Group baru dengan menekan icon pensil di sebelah kanan “Add new ui_group...”.



Gambar 5.2. Penambahan ui_group node slider 5.3. Isi nama group, misalnya “Input Peserta”. Kemudian klik icon pensil di sebelah kanan “Add new ui_tab...”. Lalu isi nama tab, misalnya “Demo Workshop IoT Ganesha IoTech 2021”. Jika sudah, klik Add, dan Add lagi pada bagian group.



TF4061/Modul-1/8



Gambar 5.3. Menambah ui_group



Gambar 5.4. Menambah ui_tab 5.4. Selanjutnya isi bagian range dengan nilai min 0, dan max 50. Pada bagian topic isi dengan topic seperti pada langkah 2.2. Jika sudah, lalu klik Done.



TF4061/Modul-1/9



Gambar 5.5. Pengaturan node slider 6. Menggunakan node text untuk menampilkan nilai pada GUI. Untuk menampilkan nilai slider, topik tujuan, dan nomor peserta sebagai respons broker, akan ditambahkan elemen text pada GUI. 6.1. Cari node text pada palette, lalu tambahkan ke ruang kerja. Hubungkan masukannya dengan keluaran dari node slider. Lalu klik dua kali dan pastikan kolom group sudah terisi sesuai. Pada kolom Label isi dengan “Nilai”. Kemudian klik Done.



Gambar 6.1. Menambah node text



TF4061/Modul-1/10



Gambar 6.2 Pengaturan node text Nilai 6.2. Tambahkan lagi node text. Hubungkan juga masukannya dengan keluaran dari node slider. Namun kali ini pada kolom Value, isi dengan {{msg.topic}}. Pada kolom Label isi dengan “Topik”. Kemudian klik Done.



Gambar 6.3 Pengaturan node Topik 6.3. Tambahkan lagi node text. Kali ini hubungkan masukannya dengan keluaran dari node mqtt in. Pada kolom Label isi dengan “Nomor peserta”.



TF4061/Modul-1/11



Gambar 6.4. Pengaturan node text Nomor peserta 6.4. Jika semua perubahan sudah dilakukan, tekan Deploy. Lalu buka tab baru pada browser Anda dan akses alamat localhost:1880/ui. Selamat! Anda sudah berhasil mengirimkan data dari sebuah IOT-Client dengan dashboard sederhana.



Gambar 6.5. Tampilan dashboard dari IOT-Client yang dibuat



TF4061/Modul-1/12