IOT National Summit 2021

WORKSHOP Dr. Ir. Eko Mursito Budi, MT IPM Teknik Fisika

IOT Virtual Lab Dimas Apeco Putra ITB
21/2/2021 M. Iqbal Anggoro Agung
Rio Ariesta Sasmono

1 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 IOT-
Server secara visual adalah Node-RED.

1.2 CAPAIAN PEMBELAJARAN

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

1.3 ALAT & BAHAN

No Item Banyak Keterangan

1 Komputer / laptop yang sudah ter-install Node-RED beserta 1 Disediakan peserta
palette tambahan node-red-dashboard dan node-red-contrib-
aedes; serta web browser
2 Koneksi ke Internet 1
3 IOT Broker 1 Disediakan panitia
4 IOT Node N

1.4 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. Klik tab Install, search node-red-dashboard, klik install, terima instalasi, tunggu hingga selesai.
Lakukan juga untuk palette node-red-contrib-aedes
5. Pastikan kedua palette sudah terinstall dengan melihatnya pada daftar node di bagian palette.

1.5 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 Node-
RED 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 default-
nya. 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/<ID-UNIK>”. Bagian
“<ID-UNIK>” 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/<ID-UNIK>”. Gunakan <ID-UNIK> 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