BKPM – Internet of Things

a. Capaian Pembelajaran Mata Kuliah (CPMK)

• Mahasiswa mampu memahami konsep, konfigurasi, dan implementasi visualisasi dashboard berbasis IoT pada Node-RED serta integrasi protokol komunikasi MQTT untuk pemantauan data sensor/aktuator secara real-time.

b. Indikator Penilaian

1. Keberhasilan Instalasi: Mampu menginstal modul dashboard pada Node-RED (@flowfuse/node-red-dashboard).
2. Keberhasilan Kustomisasi UI: Mampu mengonfigurasi tema, tata letak (layout), UI Base, UI Page, dan UI Group.
3. Keberhasilan Implementasi Rangkaian Node: Mampu merangkai dan mengintegrasikan node-node dashboard (ui-text, ui-gauge, inject, mqtt in, mqtt out).

c. Penilaian Bertahap Skill Passport

• Penilaian kompetensi konfigurasi IoT Gateway, integrasi broker MQTT publik, serta perancangan dashboard interaktif sesuai standar kompetensi industri IoT.

d. Dasar Teori

1. Node-RED & Flow-Based Programming

Node-RED adalah flow-based development tool berbasis Node.js yang dirancang untuk menghubungkan perangkat keras, API, dan layanan daring. Setiap fungsi direpresentasikan sebagai node yang saling terhubung melalui aliran pesan (message flow dengan objek msg.payload).

2. Hierarki Struktur Node-RED Dashboard 2.0 (FlowFuse Dashboard)

Dashboard pada Node-RED Dashboard 2.0 menerapkan konsep hierarki bertingkat (Parent-Child Architecture) yang terstruktur secara ketat: ui-base $\to$ ui-page $\to$ ui-group $\to$ Widget (Node UI).

┌─────────────────────────────────────────────────────────────┐
│ 1. ui-base (Root / Fondasi Global: Path '/dashboard')       │
│    │                                                        │
│    └──► 2. ui-page (Halaman Spesifik: Path '/main', Icon)   │
│          │                                                  │
│          ├──► 3. ui-group (Kontainer/Panel: 'Group 1')      │
│          │       └──► 4. Widget: ui-text                    │
│          │                                                  │
│          └──► 3. ui-group (Kontainer/Panel: 'Group 2')      │
│                  └──► 4. Widget: ui-gauge                   │
└─────────────────────────────────────────────────────────────┘

3. Protokol Komunikasi MQTT (Message Queuing Telemetry Transport)

MQTT adalah protokol perpesanan ringan berbasis publish/subscribe yang sangat efisien untuk perangkat IoT dengan keterbatasan bandwidth.

• Broker: Server perantara pesan (contoh: test.mosquitto.org:1883).
• Publisher: Pengirim pesan ke suatu Topic tertentu.
• Subscriber: Penerima pesan yang berlangganan pada Topic tertentu.

e. Alat dan Bahan

• Perangkat Komputer / Laptop: Terpasang OS Linux/Windows/macOS.
• Node-RED Runtime: Berjalan pada http://localhost:1880.
• Modul Node-RED Dashboard: @flowfuse/node-red-dashboard versi 1.31+.
• Broker MQTT Publik: test.mosquitto.org (Port 1883).
• Web Browser: Google Chrome / Firefox / Brave.

f. Prosedur Kerja

Langkah 1: Instalasi Modul Dashboard Node-RED

1. Buka antarmuka Node-RED pada browser (http://localhost:1880).

2. Klik tombol menu di pojok kanan atas, lalu pilih Manage palette.

   

3. Masuk ke tab Install, ketik @flowfuse/node-red-dashboard pada kolom pencarian, kemudian klik Install.

   

4. Setelah instalasi selesai, node dashboard akan muncul pada bilah palet sebelah kiri.

   

Langkah 2: Membangun Rantai Hierarki (ui-base > ui-page > ui-group)

1. Tarik node text dari palet dashboard ke area kerja (workspace).

   

2. Klik ganda pada node text untuk membuka jendela konfigurasi properti.

   

3. Mulai rantai hierarki (Level Group): Pada kolom Group, pilih Add new ui-group… lalu klik ikon pensil untuk membuat kontainer grup baru.

   

4. Lanjutkan rantai hierarki (Level Page): Pada jendela Add new ui-group, kolom Page belum memiliki halaman. Pilih Add new ui-page… lalu klik ikon pensil.

   

5. Puncak rantai hierarki (Level Base): Pada jendela Add new ui-page, kolom UI belum memiliki root base. Pilih Add new ui-base… lalu klik ikon pensil.

   

6. Konfigurasi UI Base (Root Level):

   • Name: Main
   • Path: /dashboard
   • Klik Add untuk menyimpan konfigurasi ui-base.

   

7. Konfigurasi UI Page (Page Level):

   • Name: Main page
   • Path: /main
   • Icon: home
   • Pastikan field UI mengarah ke Main [/dashboard] yang baru dibuat.
   • Klik Add untuk menyimpan konfigurasi ui-page.

   

8. Konfigurasi UI Group (Group/Container Level):

   • Name: Group 1
   • Page: Main page [/dashboard/main]
   • Width: 6
   • Klik Add untuk menyimpan konfigurasi ui-group.

   

9. Selesaikan Konfigurasi Widget Text:

   • Pastikan Group telah terpilih: [Main page] Group 1.
   • Klik Done.

   

10. Klik tombol Deploy di kanan atas Node-RED, kemudian buka browser dan akses URL dashboard:

    http://localhost:1880/dashboard/main

    

Langkah 3: Konfigurasi Widget Gauge dan Group 2

1. Tarik node gauge ke area kerja dan buka pengaturannya.

2. Tambahkan grup baru bernama Group 2 dengan Page Main page dan Width 6.

   

3. Atur properti node gauge:

   • Group: [Main page] Group 2
   • Type: Half Gauge
   • Style: Needle
   • Min: 0, Max: 10
   • Color Segments: 0 (Hijau), 4 (Kuning), 7 (Merah).
   • Klik Done.

   

Langkah 4: Pengujian Input Data Lokal (Dashboard Testing)

1. Uji Coba Input Text (Timestamp):

   • Hubungkan node inject (timestamp) langsung ke node ui-text.
   • Klik Deploy dan tekan tombol trigger pada node inject.

   

   • Periksa perubahan nilai timestamp pada halaman dashboard:

   

2. Uji Coba Input Gauge:

   • Tambahkan dua node inject:
     • Input 0 dengan payload tipe number: 0.
     • Input 5 dengan payload tipe number: 5.
   • Hubungkan kedua node inject ke input node ui-gauge.

   

3. Tampilan Flow Pengujian Dasar:

   • Pastikan seluruh rangkaian node pengujian lokal telah terhubung seperti berikut:

   

g. Tugas Praktikum, Hasil, dan Pembahasan

1. Instruksi Tugas Integrasi MQTT

1. Konfigurasi Subscriber (MQTT In):
   • Tambahkan node mqtt in dengan Broker test.mosquitto.org:1883, Topic microteaching/trm5xx, dan QoS 2.
   • Hubungkan output mqtt in ke input widget ui-text.
2. Konfigurasi Publisher (MQTT Out & Inject):
   • Tambahkan node inject dengan payload bertipe string yang berisi nama anda, contoh: "Faruq is here".
   • Hubungkan output node inject langsung ke input node mqtt out (Broker test.mosquitto.org:1883, Topic microteaching/trm5xx).
3. Deploy & Verifikasi:
   • Klik Deploy dan pastikan kedua node MQTT berstatus connected (indikator hijau).

2. Target Rangkaian Flow Lengkap Mahasiswa

Berikut adalah target diagram alur lengkap (flow) yang harus berhasil disusun dan dijalankan oleh mahasiswa:

3. Target Tampilan Dashboard Akhir

Setelah memicu pesan MQTT dan input Gauge, verifikasi hasil tampilan antarmuka pada URL http://localhost:1880/dashboard/main:

4. Analisis Aliran Data (Data Flow Analysis)

• Group 1 (Text Display via MQTT): Ketika node inject ditekan, pesan string "Faruq is here" dipublikasikan langsung ke broker MQTT test.mosquitto.org pada topik microteaching/trm5xx. Node mqtt in yang berlangganan pada topik yang sama menerima pesan tersebut dan langsung memperbarui tampilan teks di dashboard secara real-time.
• Group 2 (Gauge Display): Menampilkan posisi jarum (needle) sesuai dengan nilai numerik input (0 sampai 10). Saat Input 0 di-trigger, jarum menunjuk angka 0 pada zona hijau. Saat Input 5 di-trigger, jarum bergerak dinamis ke zona kuning (nilai 5).

h. Rubrik Penilaian