{"id":1727,"date":"2025-01-01T17:02:25","date_gmt":"2025-01-01T10:02:25","guid":{"rendered":"https:\/\/delta-electronic.com\/Design\/Hardwares\/?p=1727"},"modified":"2025-03-25T03:15:33","modified_gmt":"2025-03-24T20:15:33","slug":"menampilkan-parameter-parameter-listrik-di-grafana-dashboard-web-menggunakan-mqtt-protocol","status":"publish","type":"post","link":"https:\/\/delta-electronic.com\/Design\/Hardwares\/menampilkan-parameter-parameter-listrik-di-grafana-dashboard-web-menggunakan-mqtt-protocol\/","title":{"rendered":"Menampilkan parameter-parameter listrik di Grafana Dashboard Web menggunakan MQTT Protocol"},"content":{"rendered":"

Pada artikel berikut saya akan membahas tutorial untuk membuat Dashboard web Grafana yang digunakan untuk menampilkan parameter-parameter listrik seperti daya, energi, frekwensi dan power factor dengan bantuan Modul Wi-Fi Gateway Controller<\/a> dan 3 phase Digital KWH Meter<\/a><\/p>\n

\"\"<\/p>\n

Di sini data-data parameter listrik yang diperoleh dari KWH meter-KWH meter dikirim ke Wi-Fi Gate Controller dengan menggunakan RS-485 (teknik RS485 dapat dilihat di link ini<\/a>) ke Wi-Fi Gate Controller yang berfungsi meneruskan data-data tersebut ke jaringan dengan menggunakan MQTT-Protocol.<\/p>\n

Wi-Fi Gate Controller akan bertindak sebagai MQTT publisher dan mengirimkan data-data tersebut dalam MQTT topik ke PC Server yang bertindak sebagai MQTT broker dan sekaligus MQTT subscriber yang mengambil data-data tadi untuk ditampilkan di dashboard web sehingga kita dapat melihat parameter-parameter listrik dari semua KWH meter yang ada dalam jaringan.<\/p>\n

Berikut ini adalah langkah-langkah yang perlu dilakukan pada PC Server.<\/p>\n

    \n
  1. Instal Python<\/strong>\n
      \n
    1. Download Python yang ada di link ini<\/a> dan eksekusi\"\"<\/li>\n
    2. Pilih customize instalation\"\"<\/li>\n
    3. Pastikan add Python to environment variables dicentang dan lanjutkan proses instalasi hingga selesai<\/li>\n
    4. Untuk customize install location gunakan folder yang pendek sehingga mudah diingat apabila kita mengakses menggunakan command prompt, contohnya: F:\\python<\/li>\n<\/ol>\n<\/li>\n
    5. Setup Database<\/strong>, untuk menyiapkan database ini berikut langkah-langkah yang harus dilakukan:\n
        \n
      1. Download aplikasi XAMPP di link ini<\/a>\"\"<\/li>\n
      2. Lakukan instalasi XAMPP<\/li>\n
      3. Pilih foldernya C:\\xampp atau folder lain asalkan jangan di Program Files\"\"<\/li>\n
      4. Jalankan instalasi sesuai petunjuk sampai selesai\"\"<\/li>\n
      5. Jalankan XAMPP Control\"\"<\/li>\n
      6. Klik start pada apache dan MySQL untuk mengaktifkan apache dan MySQL di PC kita\"\"<\/li>\n
      7. Agar XAMPP bisa langsung mengaktifkan Apache maupun MySQL, aktifkan pengaturan dengan menekan tombol config<\/li>\n
      8. \"\"<\/li>\n
      9. Centang apache dan MySQL lalu klik save<\/li>\n
      10. Apabila ada error “access denied” maka kemungkinan folder XAMPP terproteksi. Klik kanan folder tersebut, pilih properties, tab security, advance dan rubah permission agar menjadi Full<\/li>\n
      11. Selanjutnya setelah XAMPP mengaktifkan MySQL dan Apache, arahkan browser ke http:\/\/localhost\/phpmyadmin<\/li>\n
      12. Create database dan beri nama kwh\"\"<\/li>\n
      13. Buka database kwh\"\"<\/li>\n
      14. Download file init.sql di link ini<\/a><\/li>\n
      15. Kembali ke phpmyadmin, klik import pada database kwh dan pilih file init.sql yang telah kita download\"\"<\/li>\n
      16. Scroll ke bawah dan klik import\"\"<\/li>\n<\/ol>\n<\/li>\n
      17. Setup Mosquitto, download aplikasi Mosquitto di link ini<\/a> dan lakukan instalasi\n
          \n
        1. Lakukan instalasi sampai finish dan jangan gunakan folder Program Files agar tidak ribet dengan permission saat melakukan konfigurasi<\/li>\n
        2. \"\"<\/li>\n
        3. Setelah instalasi mosquitto selesai, kita dapat memilih untuk menggunakan username dan password atau membiarkan anonymous mengakses\n
            \n
          1. Akses anonymous\n
              \n
            1. Buat file test.conf dengan isi seperti pada gambar berikut\"\"<\/li>\n
            2. Di sini artinya MQTT dibuka di port 1883 dan diijinkan siapa saja untuk mengakses<\/li>\n
            3. Lakukan testing MQTT dengan menuliskan mosquitto -v -c test.conf <enter> di command prompt folder c:\\mqtt<\/li>\n
            4. Agar MQTT dapat langsung start saat windows login, maka buat file mqtt.bat dan tuliskan seperti pada gambar di bawah\"\"<\/li>\n
            5. Kemudian create shortcut dari mqtt.bat dan letakkan di folder startup<\/li>\n<\/ol>\n<\/li>\n
            6. Akses dengan username dan password\n
                \n
              1. buat username dan password<\/li>\n
              2. Buat username: admin dan password: 1234 dan simpan dalam nama file paswd.txt di folder c:\\mqtt\\paswd.txt. Nama file dan folder ini bisa diubah sesuai keinginan, namun dipastikan nanti di langkah selanjutnya pada saat menuliskan tambahan konfigurasi di file mosquito.conf perlu disesuaikan<\/li>\n
              3. Masuk ke command prompt dengan menuliskan CMD di kolom search dan tulis cd\\mqtt <enter> untuk masuk ke folder mqtt<\/li>\n
              4. Lakukan enkripsi password dengan menulisan mosquitto_psw -U passwd.txt <enter>\"\"<\/li>\n
              5. Password akan terenkripsi seperti pada gambar berikut\"\"<\/li>\n
              6. Kemudian buka file mosquitto.conf dengan menggunakan notepad dan tambahkan konfigurasi sebagai berikut\"\"<\/li>\n
              7. Pada setting di atas ditentukan bahwa MQTT diletakkan pada port 1883 dan file password disimpan di folder c:\\mqtt dengan nama file passwd.txt<\/li>\n
              8. Lakukan testing MQTT dengan menuliskan mosquitto -v -c mosquitto.conf <enter> di command prompt folder c:\\mqtt<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n
              9. Pastikan port 1883 terbuka seperti pada gambar di bawah\"\"<\/li>\n<\/ol>\n<\/li>\n
              10. Setup Middleware, download file middleware di sini<\/a>, ekstrak di drive selain c: dengan folder middleware. Contohnya di PC saya adalah F:\\middleware dan kemudian buka folder middleware dengan menggunakan Visual Studio Code. Pastikan folder .venv tidak ada karena folder ini akan kita buat pada langkah selanjutnya. Bila folder tersebut sudah ada sebaiknya didelete\"\"\n
                  \n
                1. Buka Terminal dan ketik “python -m venv .venv”<\/li>\n
                2. Pastikan folder .venv terbentuk\"\"<\/li>\n
                3. Lakukan aktivasi .venv dengan menuliskan .venv\/Scripts\/activate. Jika terjadi error seperti gambar di bawah ini\"\"<\/li>\n
                4. Cek restriction dengan menuliskan “Get-ExecutionPolicy” jika Restricted hasilnya\"\"<\/li>\n
                5. Maka ketik “Set-ExecutionPolicy -Scope CurrentUser” dan lanjutkan “RemoteSigned”<\/li>\n
                6. Kemudian ulang lagi menuliskan perintah aktivasi sebagai berikut ” .venv\/Scripts\/activate”<\/li>\n
                7. Bila berhasil maka tulisan .venv akan berubah menjadi hijau<\/li>\n
                8. Ketikkan “pip install -r requirements.txt” dan akan terjadi proses instalasi seperti pada gambar berikut\"\"<\/li>\n<\/ol>\n<\/li>\n
                9. Setup Grafana\n
                    \n
                  1. Download aplikasi Grafana di link ini<\/a><\/li>\n
                  2. Lakukan instalasi Grafana<\/li>\n
                  3. \"\"<\/li>\n
                  4. Setelah instalasi Grafana selesai kemudian buka Grafana dengan mengarahkan browser ke localhost:3000<\/li>\n
                  5. \"\"<\/li>\n
                  6. Pada kondisi awal, gunakan username admin dan password admin untuk login. Kemudian sesudah itu masukkan password baru untuk menggantinya\"\"<\/li>\n
                  7. Klik data source untuk mengarahkan Grafana ke database kwh<\/li>\n
                  8. Ketik mysql di kolom pencarian<\/li>\n
                  9. \"\"<\/li>\n
                  10. Tuliskan database name : kwh, Host URL: localhost 3306, username: root<\/li>\n
                  11. Kemudian klik save & test dan jika berhasil akan tampil pesan “Database Connection OK”Download file KWH-1732030789071.json di link ini<\/a><\/li>\n
                  12. Masuk ke dashboard dan lakukan import dashboard dengan klik bagian ini\"\"<\/li>\n
                  13. Arahkan folder ke tempat file yang kita download tadi dan pilih KWH-1732030789071.json<\/li>\n
                  14. Grafana akan menampilkan gambar sebagai berikut yang merupakan contoh data-data energi listrik\"\"<\/li>\n<\/ol>\n<\/li>\n
                  15. Jalankan Middleware, buka middleware.bat dan atur folder yang tertulis sesuai dengan folder tempat anda meletakkan middleware.bat\"\"<\/li>\n
                  16. Dos Prompt akan menampilkan pesan seperti pada gambar di bawah ini yang menandakan bahwa middleware sudah aktif dengan sempurna\"\"<\/li>\n
                  17. Pada tahap ini dashboard Grafana sudah aktif untuk menampilkan data-data parameter energi listrik yang dikirim oleh Wi-Fi Gate Controller<\/a><\/li>\n
                  18. Namun untuk server, sebaiknya diatur agar pada saat PC server ini aktif, middleware langsung aktif. Untuk itu kita siapkan folder startup dengan menekan tombol Start + R lalu ketik shell:startup <enter>\"\"<\/li>\n
                  19. Copy file middleware.bat dan xampp control ke dalam folder startup yang terbuka dan rename kedua file tersebut dengan awalan 1_ pada xampp control dan awalan 2_ pada middleware.bat. Hal ini ditujukan agar xampp control diaktifkan terlebih dahulu untuk mempersiapkan mysql baru dilanjutkan dengan middleware\"\"<\/li>\n<\/ol>\n

                     <\/p>\n

                    Perangkat yang dibutuhkan untuk project ini adalah sebagai berikut:<\/p>\n

                    Wi-Fi Gate Controller<\/a><\/p>\n

                    \"\"<\/a><\/p>\n

                     <\/p>\n

                    3 phase Digital KWH Meter with RS-485 interface<\/a><\/p>\n

                    \"\"<\/a><\/p>\n

                     <\/p>\n

                    File-file yang dibutuhkan dapat didownload di sini:<\/p>\n