Setelah Node-RED berhasil diinstal, mari kita "mulai memasak".
Berikut ini resep masak ala Node-RED, yang saya ambil dari: Basic recipes : Node-RED (nodered.org)
Isi "buku masak" (Cookbook) Node-RED:
- Isi Pesan (message)
- Aliran program (flow control)
- Penanganan Error (error handling)
- Format Data (data formats)
Namun sebelum membahas keempat resep penting di atas, perlu kita mengetahui tampilan atau lingkungan pemrograman Node-RED. Gambar berikut ini menunjukkan tampilan Node-RED.
Gambar 1. Tampilan Node-RED
Berikut keterangan setiap bagian tampilan Node-RED dari Gambar 1 di atas:
- Kolom browser (ditandai kotak warna coklat), untuk membuka halaman web Node-RED.
- Kotak palet atau wadah node (ditandai kotak warna merah), node-node tersebut bisa diambil dari palet untuk ditempatkan di kotak Flow. Apabila memerlukan tambahan node, rekan-rekan dapat menambahkan node yang baru dengan meng-instal-nya melalui manage pallete yang ada di menu.
- Kotak flow (ditandai kotak warna oranye), yaitu halaman program untuk menempatkan node dan menghubungkannya.
- Kotak output (ditandai kotak warna hijau), yang menampilkan informasi, keterangan, bantuan, pesan, data, dashboard, dll.
- Tombol deploy (ditandai kotak warna biru), untuk memeriksa dan menjalankan program.
- Tombol menu (ditandai kotak warna ungu), untuk membuka seting Edit, View, Arrange, Import dan Export program, konfigurasi node, menambahkan library, dll.
Di menu yang terbuka, klik pada pilihan Node-RED website, maka akan terbuka halaman web yang berisi Documentation Node-RED. Semua informasi yang diperlukan untuk menggunakan Node-RED dari mulai menginstal hingga membuat aplikasi yang kompleks, dapat ditemukan di Documentation ini.
Gambar 2. Dokumentasi Node-RED
Tidak hanya itu, karena Node-RED adalah software open source, sepertinya tidak ada lagi yang perlu kita kuatirkan, karena semua bahan dan informasi bisa kita tanyakan di internet, dan bisa ...saya yakin sekali... bisa dijawab dengan sangat baik. Juga bantuan ChatGPT tentu akan sangat membantu sekali. Wow betapa mudah, menyenangkan dan menariknya hidup dengan teknologi informasi di jaman ini.
Baiklah, lalu bagaimana agar kita bisa memahami Node-RED ini secara sistematis, mulai dari yang sederhana kemudian melangkah ke yang lebih rumit, dan yang paling penting, bisa membuat kita menjadi lebih semangat, bergairah, dan terus termotivasi? Saya rasa tidak ada cara lain yang "semenarik" tantangan, atau dengan kata lain memberikan permasalahan yang menantang. Dan ternyata permasalahan yang menantang tersebut, ...ternyata sudah ada di "buku masak" (Cookbook) Node-RED ini. Namun sebelumnya, mari kita pahami konsep Node-RED berikut ini:
Konsep Node-RED
1. Sebuah node adalah blok dasar dari flow. Node-node dihubungkan dengan garis untuk membentuk flow. Program di Node-RED disebut flow.
2. Node dipicu dengan menerima message dari node sebelumnya. Hasil pengolahan oleh node tersebut kemudian diteruskan ke node berikutnya. Sebuah node hanya bisa memiliki 1 port input, tetapi bisa memiliki lebih dari 1 port output.
3. Istilah flow di Node-RED bisa berarti 2 hal; hal pertama bisa berarti Tab pada halaman editor program. Setiap halaman di Tab bisa berisi banyak flow. Hal kedua, flow bisa berarti sekumpulan node yang terhubung dalam satu aliran.
4. Di samping menggunakan garis untuk menunjukkan aliran data, Node-RED juga menggunakan "context" untuk menyimpan data, yang bisa dibagikan ke node-node yang lain tanpa perlu menghubungkan dengan garis (bisa dikatakan "wireless" 😁). Ada 3 tipe context:
- Node: data context tipe node ini hanya bisa terlihat oleh node yang menetapkan data tersebut.
- Flow: data context tipe flow ini hanya bisa terlihat oleh semua node yang ada di satu Tab Flow.
- Global: data context tipe global ini bisa terlihat oleh semua node di semua Tab Flow.
5. Message adalah data yang diteruskan dari node ke node dalam sebuah flow. Data utama message ditampung di payload (msg.payload), dengan tipe data yang bisa dipilih, mulai dari flow, global, string, number, boolean, JSON, buffer, timestamp, expression, env variables, dan msg. Di samping payload, ada data topic (msg.topic). Data di msg.topic bisa dijadikan sebagai sebuah label, atau Tag, yang menjadi kategori data, sedangkan data di msg.payload menjadi nilai dari Tag tersebut. Hal ini menjadi ide yang menarik, yang diterapkan untuk protokol komunikasi MQTT, di mana hal ini bisa membuat semua alat bisa menerima data yang dikirim, asalkan "topic" yang diikuti (di-subscribe) adalah sama dengan topic data yang dikirim.
Gambar 3. Sebuah node inject selalu berisi 2 jenis message, yaitu msg.payload dan msg.topic
Agar konsep di atas lebih jelas, mari kita lihat penerapan solusinya pada persoalan berikut ini.
Catatan: setiap kali sudah selesai membuat flow (program Node-RED), jangan lupa untuk menekan tombol Deploy, agar flow tersebut dapat dijalankan.
1. Isi Pesan
1.1 Soal1: Tampilkan tulisan "halo, apa kabar" di kotak output debug. Gunakan node inject dan node debug.
Gambar 4. Kotak output debug menampilkan tulisan "halo, apa kabar"
1.2 Soal2: Buat tulisan "halo, apa kabar" di kotak output debug menjadi "hai, apa kabar". Tidak boleh menghilangkan atau mengubah isi node yang sebelumnya. Tambahkan node change.
Gambar 5. Kotak output debug menampilkan tulisan "hai, apa kabar"
1.3 Soal3: Buat agar tulisan tidak lagi bisa ditampilkan. Tidak boleh menghilangkan atau mengubah isi node yang sebelumnya. Tambahkan node change lagi untuk bisa menghapus pesan.
Gambar 6. Kotak output debug tidak menampilkan data alias undefined
1.4 Soal4: Setiap pesan bisa dilengkapi dengan topik. Ketika payload (isi pesan) dihapus, tambahkan sebuah node change untuk membuat topik di node inject (silahkan isi kolom msg.topic dengan data string (a-z): "ini topiknya"), bisa dipindahkan menjadi data msg.payload, sehingga kotak output debug bisa menampilkan tulisan "ini topiknya".
Gambar 7. Kotak output debug menampilkan tulisan "ini topiknya"
1.5 Soal5: Hapus semua node di langkah sebelumnya. Ambil 3 buah node inject yang baru. Isi ketiganya berturut-turut dengan data number (0-9): 0, 512, 1023. Tambahkan node range, dan node debug. Atur node range, sehingga ketiga nilai dari node inject dapat di-peta-kan (mapping) dari 0 - 1023 menjadi 0 - 5.
Gambar 8. Kotak output debug menampilkan output node range yang memetakan nilai dari 0 - 1023 menjadi nilai 0 - 5
2. Aliran program
2.1 Soal6: Ulangi soal 1 di atas, namun tulisan "halo, apa kabar" bisa muncul setiap 5 detik sekali, tanpa perlu menekan tombol di node inject.
Gambar 9. Kotak output debug menampilkan tulisan "halo, apa kabar" setiap 5 detik sekali
2.2 Soal7: Buat baru (hapus semua node), kemudian ambil 3 buah node inject, sebuah node switch dan 3 buah node debug. Buat agar node inject pertama memiliki topic (string) suhu, node inject kedua memiliki topic (string) kelembaban, dan node inject ketiga memiliki topic (string) tekanan. Berturut turut buat ketiganya diberi payload data number sebesar: suhu=25, kelembaban=80, tekanan=1001. Atur node switch sehingga nilai suhu muncul di node debug yang pertama, nilai kelembaban muncul di node debug yang kedua dan nilai tekanan muncul di node debug ketiga.
Gambar 10. Kotak output debug menampilkan data dari node debug1, node debug2, dan node debug3 yang sesuai dengan isi payload mengikuti topic dari ketiga node inject
2.3 Soal8: Diinginkan untuk meneruskan data dari satu flow ke flow yang berbeda (tidak terhubung dengan garis yang sama) menggunakan context flow. Ambil 5 buah node inject, sebuah node change, sebuah node switch dan 3 buah node debug. Node inject yang pertama digunakan untuk mengirimkan timestamp setiap 5 detik sekali. Node inject kedua hingga kelima berturut-turut digunakan untuk mengirimkan angka 0, 1, 2 dan 3. Node change digunakan untuk membuat flow.state berisi data angka yang dikirimkan oleh node inject kedua hingga kelima. Node switch digunakan untuk meneruskan data timestamp ke salah satu dari ketiga node debug sesuai dengan data di flow.state. Apabila flow.state berisi 1, maka node debug pertama menampilkan data timestamp saat itu. Apabila flow.state berisi 2, maka node debug kedua menampilkan data timestamp saat itu. Apabila flow.state berisi 3, maka node debug ketiga menampilkan data timestamp saat itu. Apabila flow.state berisi 0, maka tidak ada node debug yang menampilkan data timestamp..
Gambar 10. Kotak output debug menampilkan timestamp dari node inject pertama, yang diteruskan ke node switch untuk memilih salah datu dari ketiga node debug, yang dipilih sesuai dengan angka di flow.state, yang diisikan di node.change, yang isinya ditentukan oleh node inject kedua hingga kelima
2.4 Soal9: Diinginkan bisa memproses satu persatu anggota array. Sebagai contoh, sebuah array yang terdiri dari angka pecahan: 1.96, 21.98, 3.04, 4.89, 5.92, ingin ditampilkan dalam bentuk array angka bilangan bulat. Gunakan node inject, node split, node range, node join, dan node debug.
Gambar 11. Kotak output debug menampilkan array dari bilangan desimal yang dibulatkan
2.5 Soal10: Diinginkan ketika sampai pada batas waktu tertentu, ternyata tidak ada data yang diterima, maka akan muncul pesan "waktu habis". Gunakan node inject, node trigger dan 2 buah node debug. Buat batas waktu 5 detik. Ketika tombol di node inject tidak ditekan hingga lebih dari 5 detik, maka kotak debug output akan menampilkan tulisan "waktu habis".
Gambar 12. Kotak output debug menampilkan tulisan "waktu habis" setelah lebih dari 5 detik tombol node inject tidak ditekan
2.6. Soal11: Diinginkan ketika lebih dari 2 detik, tombol di node inject tidak ditekan, maka kotak output debug menampilkan 0. Sebaliknya ketika tombol di node inject ditekan, maka kotak output debug menampilkan data timestamp. Gunakan sebuah node inject, 2 buah node trigger dan sebuah node debug.
Gambar 13. Kotak output debug menampilkan 0 ketika tombol di node inject tidak ditekan hingga lebih dari 2 detik, tetapi ketika tombol di node inject ditekan, maka kotak output debug menampilkan data timestamp
Gambar 14. Kotak output debug menampilkan satu persatu data dari sebuah array
2.8 Soal13: Diinginkan data ditampilkan secara periodik setiap 5 detik sekali, meskipun data input dari node inject dihasilkan setiap detik, tetapi data yang ditampilkan di kotak output debug tetap setiap 5 detik sekali. Gunakan node inject Array, dengan data Array dari 0 - 9. Gunakan juga node delay dan node debug.
Gambar 15. Kotak output debug menampilkan data Array dari node inject setiap 5 detik, mengabaikan penekanan tombol yang mungkin lebih cepat dari 5 detik
2.9 Soal14: Diinginkan kotak output debug hanya menampilkan data apabila ada perubahan data dari input. Apabila input data sama seperti data sebelumnya, kotak output debug tidak menampilkan data. Gunakan 2 buah node inject, buat payloadnya berisi angka 0 dan 1, kemudian gunakan node filter dan node debug.
Gambar 16. Kotak output debug hanya menampilkan data apabila node inject menghasilkan data yang berbeda dari yang sebelumnya
2.10 Soal15: Ulangi Soal7 di atas, yaitu membuat 3 buah node inject dengan topic yang berbeda, berturut-turut topicnya: suhu, kelembaban dan tekanan, dengan payload berturut-turut: 25, 80 dan 1001. Namun di sini, ketiga pesan topic dan payloadnya tersebut disatukan dalam satu pesan. Gunakan node join untuk menggabungkan ketiganya ke dalam 1 pesan, di mana setiap topic, langsung diisi dengan nilainya, yang diambil dari data payload. Lebih jelas lihat hasil yang diinginkan berikut ini:
Gambar 17. Kotak output debug menampilkan gabungan dari ketiga node inject yang berisi data topic dengan isinya (payload)
3. Penanganan Error
3.1 Soal16: Diinginkan ada informasi sumber error ketika terjadi error. Gunakan node inject, node function, node catch dan node debug. Hubungkan node inject dengan node function, dan node catch dengan node debug seperti gambar berikut ini. Isi node function dengan node.error, dan ganti msg.payload di node debug dengan msg.error. Kemudian tekan tombol di node inject, maka seharusnya kotak output debug menampilkan pesan dan sumber error.
Gambar 17. Kotak output debug menampilkan pesan dan sumber error
3.2 Soal17: Diinginkan, ketika terjadi error, secara otomatis input data dikirim kembali setelah beberapa saat. Gunakan node inject, node function, node catch, node delay dan 2 buah node message.
Gambar 18. Ketika error terjadi, secara otomatis input data akan dikirim kembali setelah beberapa saat, yang dipicu oleh node catch yang menangkap error
Catatan: semua solusi untuk persoalan di atas, dapat rekan-rekan temukan jawabannya dari halaman Cookbook Node-RED (https://cookbook.nodered.org/). Agar lebih mudah mengambil flow (program) dari jawaban, rekan-rekan dapat meng-copy flow tersebut, kemudian pilih Import dari Menu Hamburger di Node-RED, kemudian tempelkan di kotak Import node, dan klik Import, maka di Tab Flow akan muncul flow sesuai dengan jawaban
Gambar 19. Untuk mengambil flow, copy kode flow
Gambar 20. Buka menu hamburger, pilih Import, tempel flow yang di-copy, klik Import
4. Format Data
Ada 5 buah format data yang akan banyak dijumpai di Node-RED, yaitu: CSV, HTML, XML, YAML, dan JSON. Berikut adalah penjelasan singkat tentang perbedaan dan kelebihan masing-masing:
- CSV (Comma-Separated Values) adalah format file sederhana yang terdiri dari data yang dipisahkan oleh tanda koma. Format CSV sangat sederhana dan mudah dipahami oleh manusia. CSV dapat dibaca oleh banyak program seperti spreadsheet, database, dan bahasa pemrograman.
- HTML (HyperText Markup Language): HTML digunakan untuk membuat dan mengatur tampilan halaman web. HTML menggunakan tag untuk menentukan bagaimana teks, gambar, video, dan elemen lainnya ditampilkan pada halaman web. Kelebihan HTML adalah mudah dipelajari dan digunakan, serta bisa diakses oleh browser web secara langsung.
- XML (Extensible Markup Language): XML digunakan untuk menyimpan dan mentransfer data antar aplikasi. XML menggunakan tag untuk mendefinisikan elemen data dan aturan validasi untuk setiap elemen. Kelebihan XML adalah fleksibilitas dalam mendefinisikan struktur data, serta dapat digunakan di berbagai aplikasi dan platform.
- YAML (YAML Ain't Markup Language): YAML digunakan untuk menyimpan dan mentransfer data yang lebih kompleks, seperti konfigurasi aplikasi atau data yang digunakan untuk membuat konten dinamis. YAML menggunakan indentasi untuk menunjukkan hubungan antar elemen. Kelebihan YAML adalah mudah dibaca dan ditulis oleh manusia, serta lebih ringan dan lebih cepat daripada format data lainnya.
- JSON (JavaScript Object Notation): JSON digunakan untuk menyimpan dan mentransfer data antar aplikasi web. JSON menggunakan format teks yang sederhana dan mudah dipahami oleh mesin dan manusia. Kelebihan JSON adalah ukurannya yang kecil, mudah dibaca dan ditulis oleh manusia, serta bisa diproses dengan mudah oleh browser web.
Dengan melihat solusi yang tersedia di halaman Cookbook Node-RED, silahkan mengerjakan persoalan berikut ini:
4.1 Soal18: Ubah JSON String menjadi javascript objek dan sebaliknya.
4.2 Soal19: Ubah XML String menjadi javascript objek dan sebaliknya.
4.3 Soal20: Ubah YAML String menjadi javascript objek dan sebaliknya.
4.4 Soal21: Menghasilkan output data CSV.
4.5 Soal22: Memisahkan data (parsing) input CSV.
4.6 Soal23: Mengekstraks data dari halaman HTML.
4.7 Soal24: Memisahkan teks ke dalam sebuah pesan per baris.
No comments:
Post a Comment