Mengapa IoT MQTT Panel?
IoT MQTT Panel adalah aplikasi atau antarmuka berbasis MQTT (Message Queuing Telemetry Transport) yang dirancang untuk mengelola perangkat IoT secara terpusat. Alasan memilihnya antara lain:- Kemudahan Penggunaan: memiliki antarmuka grafis (GUI) yang intuitif untuk memantau dan mengontrol perangkat IoT tanpa perlu pemrograman.
- Integrasi Cepat: Mendukung integrasi langsung dengan sensor, actuator, atau perangkat IoT populer (ESP32, Raspberry Pi, dll.).
- Efisiensi Protokol MQTT: Cocok untuk jaringan dengan bandwidth rendah atau latency tinggi karena sifatnya yang ringan.
- Real-Time Monitoring: Memungkinkan visualisasi data secara real-time (grafik, notifikasi, dashboard).
- Skema Keamanan: Mendukung enkripsi (TLS/SSL) dan autentikasi (username/password, client certificates).
Berikut ini beberapa contoh pemanfaatan aplikasinya:
- Membuat 12 Tombol Counter yang nilainya tertampil di IoT MQTT Panel
- Membuat Notifikasi Keamanan dengan tangkapan gambar
Berikut ini uraiannya masing-masing:
=================================================================
1. Membuat 12 Tombol Counter yang nilainya tertampil di IoT MQTT Panel
Berikut ini langkah-langkahnya:
1. Buka rangkaian Wokwi ini: https://wokwi.com/projects/428731501874756609
Gambar 1.1 Rangkaian ESP32 dengan 12 Tombol dan LCD I2C
2. Berikut ini catatan kode program ESP32 di atas:
- #include <WiFi.h>
- #include <PubSubClient.h>
- #include <LiquidCrystal_I2C.h>
- #define ssid "Wokwi-GUEST"//silahkan diganti dengan ssid yang digunakan
- #define pass "" //silahkan diganti dengan password yang digunakan
- #define server "broker.emqx.io"
- #define port 1883
- WiFiClient espClient;
- PubSubClient client(espClient);
- LiquidCrystal_I2C lcd(0x27, 20, 4);
- int count = 0;
- int kaki[12] = { 32, 33, 25, 26, 27, 14, 16, 17, 5, 18, 19, 23 };
- int a[12] = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };
- int b[12] = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };
- int c[12] = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };
- char d[13] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l' };
- void reconnect() {
- while (!client.connected()) {
- Serial.print("Attempting MQTT connection...");
- String clientId = "ESP8266Client-";
- clientId += String(random(0xffff), HEX);
- if (client.connect(clientId.c_str())) {
- Serial.println("MQTT Connected");
- client.publish("ini/topik/bebas", "0");//silahkan topiknya diganti
- } else {
- Serial.print("failed, rc=");
- Serial.print(client.state());
- Serial.println(" try again in 5 seconds");
- delay(5000);
- }
- }
- }
- void setup() {
- Serial.begin(115200);
- for (int i = 0; i < 12; i++) {
- pinMode(kaki[i], INPUT_PULLUP);
- }
- Serial.print("Connecting to ");
- Serial.println(ssid);
- WiFi.begin(ssid, pass);
- while (WiFi.status() != WL_CONNECTED) {
- delay(500);
- Serial.print(".");
- if (count > 10) {
- ESP.restart();
- }
- count++;
- }
- Serial.println("WiFi connected");
- Serial.println("IP address: ");
- Serial.println(WiFi.localIP());
- lcd.init();
- lcd.backlight();
- lcd.setCursor(0, 0);
- lcd.print("a: b: c: ");
- lcd.setCursor(0, 1);
- lcd.print("d: e: f: ");
- lcd.setCursor(0, 2);
- lcd.print("g: h: i: ");
- lcd.setCursor(0, 3);
- lcd.print("j: k: l: ");
- client.setServer(server, 1883);
- delay(1000);
- }
- void loop() {
- if (!client.connected()) {
- reconnect();
- }
- client.loop();
- for (int i = 0; i < 12; i++) {
- a[i] = !digitalRead(kaki[i]);
- delay(10);
- if (a[i] != b[i] && a[i]) {
- c[i]++;
- lcd.setCursor((i % 3) * 7 + 2, i / 3);
- lcd.print(c[i]);
- String data = "{\"" + String(d[i]) + "\":" + String(c[i]) + "}";
- Serial.println(data);
- client.publish("ini/topik/bebas", (char*)data.c_str());
- delay(10);
- }
- b[i] = a[i];
- }
- }
Catatan program:
- Baris 1-3 untuk menggunakan library Wi-Fi, LCD dan MQTT
- Untuk implementasi secara riil, ganti SSID dan Password di baris 4 dan 5, sesuaikan dengan SSID dan Password Hotspot Wi-fi yang digunakan.
- Broker MQTT yang digunakan di program ini adalah broker.emqx.io (lihat baris 6).
- Variable count di baris 11 untuk me-restart ESP32 apabila koneksi Wi-Fi belum berhasil.
- Variable kaki dibuat array untuk memudahkan pengulangan, khususnya untuk penugasan kaki sebagai INPUT_PULLUP dan pembacaan nilainya.
- Variabel array a dan b digunakan untuk mendeteksi dan mengetahui mana tombol yang ditekan.
- Variabel array c digunakan untuk menampung nilai counter 12 tombol.
- Variabel array d digunakan untuk memberikan tanda atau tag ke 12 nilai counter.
- Pembuatan objek untuk Wi-Fi, MQTT dan LCD.
- Void reconnect untuk menghubungkan kembali koneksi ke MQTT. Pastikan untuk mengganti topik (baris 24 dan 79), agar tidak diakses oleh pihak lain.
- Void setup membuat pengaturan komunikasi serial, penugasan kaki sebagai INPUT_PULLUP, melakukan koneksi ke Wi-Fi, inisialisasi LCD I2C, dan penetapan broker MQTT.
- Void loop, mula-mula memastikan koneksi MQTT berjalan, apabila terputus, lakukan koneksi lagi. Setelah itu, membaca apakah ada tombol yang ditekan. Apabila ada tombol yang ditekan, tampilkan mana dari ke-12 tombol tersebut yang ditekan, dengan memberi label a untuk tombol pertama, label b untuk tombol ke-2 dan seterusnya hingga label l untuk tombol ke-12, dan juga nilai counter untuk tombol tersebut dinaikkan atau ditambah 1 angka. Tampilkan data tersebut di Serial Monitor, dan juga di LCD, serta kirim ke broker MQTT dengan format {"label tombol" : nilai counter}, contohnya untuk tombol ke-10 (label j) yang telah ditekan sebanyak 10 kali, maka tampilan datanya: {"j":10}.
3. Jalankan simulasi Wokwi di atas dengan menekan tombol panah (Start the Simulation). Apabila proses kompilasi di Wokwi terlalu lama, rekan-rekan dapat menggunakan cara yang lebih cepat, yaitu dengan menggunakan file hasil kompilasi berikut ini. Unduh file ini:
4. Setelah terunduh, klik kanan pada halaman kode program, kemudian pilih Command Pallete, kemudian pilih Upload Firmware & Start Simulation, arahkan pada file hasil kompilasi yang telah diunduh di atas (12_counter,ino.elf). Seharusnya simulasi Wokwi akan langsung berjalan. Tekan salah satu tombol dari ke-12 tombol tersebut, maka seharusnya di LCD akan tampil nilai counter pada label yang sesuai dengan tombolnya. Begitu pula di Serial Monitor, akan tampil data dengan format nama label tombol, diberi titik dua, diikuti dengan nilai counter, yang dibungkus dengan kurung kurawal, seperti ditunjukkan gambar berikut ini:
Gambar 1.2 Untuk mempercepat simulasi dijalankan, gunakan cara, klik kanan halaman kode program, pilih Command palette, pilih Upload Firmware & Start Simulation, arahkan ke lokasi file hasil kompilasi 12_counter.ino.elf yang dapat diunduh di link di atas
5. Sebelum menampilkan data tombol dan jumlah penekanannya di aplikasi IoT MQTT Panel, perlu dipastikan apakah pengiriman data melalui MQTT berhasil, untuk itu gunakan Test Client di link ini:
Gambar 1.3 Buka Test Client di https://mqtt.aarsoftwareserver.com:444/test_client/ untuk memastikan data tombol dan jumlah penekanannya dapat terkirim melalui MQTT
7. Isi di kolom topik sesuai dengan topik di baris 24 dan 79 pada program di atas. Kemudian tekan tombol Subscribe. Berikutnya jalankan simulasi Wokwi, lakukan penekanan tombol sembarang, maka seharusnya akan muncul data di kolom Messages seperti Gambar 1.4 berikut ini.
Gambar 1.4 Muncul data di kolom Messages, setelah topik diisi dan di-subscribe, dan simulasi di Wokwi dijalankan
8. Setelah data dapat terkirim, langkah berikutnya, buka aplikasi IoT MQTT Panel, dan lakukan langkah-langkah sesuai urutan gambar berikut ini:
Gambar 1.5(a) Buka aplikasi IoT MQTT Panel di HP, klik pada tombol Setup a Connection, kemudian di halaman Add Connection, isi Connection name dengan nama sembarang, isi Broker Web/IP address dengan nama broker sesuai program, dalam contoh di sini menggunakan broker.emqx.io, (b) Add Dashboard, isi kolom Dashboard name, kemudian tekan tombol Save, tekan tombol Create, (c) Muncul nama sesuai isi di kolom Connection name, klik nama tersebut sehingga muncul daftar panel
Gambar 1.6(a) Di daftar panel, pilih Text Log, (b) isi Panel name : a, isi Topic sesuai program, dalam contoh di sini topiknya: ini/topik/bebas, beri centang pada Show last message only, beri centang pada Payload is JSON Data, isi JsonPath: $.a, beri centang pada Show received timestamp, klik Create, (c) di jendela Dashboard, buat panel a hanya 1/2 screen width
Gambar 1.7(a) Tekan tombol + pada halaman Dashboard untuk menambah objek panel, pilih Text Log, isi Panel name : b, isi Topic sesuai program, dalam contoh di sini topiknya: ini/topik/bebas, beri centang pada Show last message only, beri centang pada Payload is JSON Data, isi JsonPath: $.b, beri centang pada Show received timestamp, klik Create, (b) Ulangi hal yang sama untuk Panel ketiga, beri nama panel : c, dengan isi JsonPath: $.c, (c) Agar lebih cepat, gunakan Copy panel, buat hingga menjadi sebanyak 12 objek panel, dengan nama a - l, dan susun hingga seperti gambar di atas
Gambar 1.8 Jalankan simulasi di Wokwi, lakukan penekanan tombol, dan perhatikan tampilan di LCD dan di IoT MQTT Panel menunjukkan nilai data yang sama untuk label a, b, c, d, e, f, g, h, i, j, k, l
Gambar 1.9 Tampilan data di IoT MQTT Panel yang menunjukkan data tombol dan jumlah penekanan tombol yang sama seperti yang ditampilkan di LCD I2C (lihat Gambar 1.8)
Agar lebih jelas, video berikut ini menunjukkan langkah-langkah pembuatan di atas:
Video Bagian 1
No comments:
Post a Comment