e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
DEVELOPMENT OF WATER LEVEL MONITORING
APPLICATIONS IN SMART HOME SYSTEMS USING
FLUTTER
Pengembangan Aplikasi Monitoring Ketinggian Air Di Sistem Smart Home Menggunakan Flutter Muhammad Hendriawan1.
Haryono2.
Thomas Budiman3 Program Studi Teknologi Informasi1.
Program Studi Teknologi Informasi2.
Program Studi Teknik Informatika3 Universtias Pradita1.
Universitas Pradita2.
STMIK Jayakarta3 Muhammad.
hendriawan@student.
haryono@pradita.
id2, thomas@stmik.
Received: August 8, 2023.
Revised: August 22, 2023.
Accepted: August 23, 2023 Issue Period: Vol.
7 No.
Pages 213-240 Abstrak: Monitoring ketinggian air di sistem smart home merupakan salah satu upaya untuk meningkatkan kenyamanan dan keamanan penghuninya.
Oleh karena itu, penelitian ini bertujuan untuk merancang dan mengembangkan sebuah aplikasi monitoring ketinggian air yang dapat diimplementasikan di sistem smart home dengan menggunakan ESP8266 NodeMCU, sensor ultrasonik HC-SR04, protokol MQTT, dan framework Flutter.
Dengan mengimplementasikan Flutter sebagai opensource framework untuk membuat aplikasi diharapkan bisa memonitoring ketinggian air secara real time dan dapat diakses dari berbagai platform: seperti Android, iOS.
Web.
Windows, macOS, dan Linux.
Hasil pengujian diharapkan dapat berfungsi dengan baik dan memberikan informasi yang akurat dan real-time terkait ketinggian air pada area sekitar dan bisa diakses menggunakan berbagai platform.
Penelitian ini sangat mungkin untuk berhasil dilakukan karena sudah banyak penelitian terdahulu yang melakukan penelitian terhadap komponen yang sama dalam penelitian ini.
Kata kunci: IoT.
Flutter, smart home system Abstract: Monitoring the water level at smart home system is an effort to increase the comfort and safety of its residents.
Therefore, this study aims to design and develop a water level monitoring application that can be implemented to smart home system using the ESP8266 NodeMCU.
HC-SR04 ultrasonic sensor.
MQTT protocol, and the Flutter framework.
By implementing Flutter as an open-source framework for creating applications, it can be monitor water levels in real-time accessed from various platforms: such as Android, iOS.
Web.
Windows, macOS, and Linux.
The test DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
expected to function correctly and provide accurate and real-time information regarding water levels in the surrounding area and can be accessed using various This research likely to be successful because previous studies conducted the same components in this study.
Keywords: IoT.
Flutter, smart home system.
PENDAHULUAN
1 Latar Belakamg Masalah Pengembangan yang masif di bidang teknologi menciptakan beberapa teknologi yang baru.
Salah satunya adalah Internet of Thing atau yang sering kita sebut dengan IoT.
Konsep Internet of Thing pertama kali muncul dalam pidato Peter T.
Lewis, kepada Congressional Black Caucus Foundation 15th Annual Legislative Weekend di Washington.
C, diterbitkan pada September 1986.
Menurut Lewis.
AuThe Internet of Things, or IoT, is the integration of people, processes and technology with connectable devices and sensors to enable remote monitoring, status, manipulation and evaluation of trends of such devices.
Ay Tujuan utama IoT adalah menghadirkan kenyamanan dan memudahkan dalam kehidupan manusia.
IoT juga dapat diimplementasikan di berbagai segment.
The extensive set of applications for IoT devices (Vongsingthong & Smanchat, 2.
is often divided into consumer, commercial, industrial, and infrastructure spaces (Perera.
Liu, & Jayawardena, 2.
Monitoring ketinggian air dalam sebuah rumah atau bangunan sangat penting untuk mencegah terjadinya banjir, kebocoran atau kerusakan pada sistem pipa air, serta membantu pemilik rumah untuk mengelola penggunaan air dengan lebih efektif dan efisien.
Dengan adanya teknologi smart home, monitoring ketinggian air dapat dilakukan secara otomatis dan real-time dengan menggunakan perangkat seperti ESP8266.
MQTT, dan Flutter.
Dengan memanfaatkan teknologi ini, pemilik rumah dapat memantau ketinggian air di dalam tangki penyimpanan air atau dalam saluran pembuangan air secara real-time, sehingga mereka dapat dengan cepat mengambil tindakan jika terjadi perubahan atau keadaan darurat.
Data ketinggian air dapat ditampilkan dalam bentuk grafik atau angka di berbagai platform menggunakan framework Flutter.
Sehingga pemilik rumah dapat dengan mudah memantau dan mengelola penggunaan air di rumah mereka 2 Identifikasi Masalah Masyarakat umum masih banyak yang belum memanfaatkan teknologi untuk mengetahui ketinggian air secara real time.
Hal ini mempengaruhi ketidaktahuan diketahuinya kapan secara pasti air sudah mencapai batas ketinggian tertentu.
Oleh karena itu penelitian ini merancang sebuah perangkat IoT dengan menggunakan jaringan nirkabel berbasis sensor pendeteksi ketinggian air yang bekerja secara otomatis dengan membaca ketinggian air dengan menggunakan sensor ultrasonik yang diterapkan untuk smart home.
Data yang didapatkan kemudian dikomunikasikan melalui MQTT dan akan diterima oleh aplikasi yang dibangun di atas framework Flutter.
Sehingga, pengguna bisa mengakses data ketinggian air melalui 6 platform (Android, iOS.
Web.
Windows.
MacOS.
Linu.
Dengan melakukan penelitian pada sistem ini, akan memungkinkan untuk mengembangkan solusi yang lebih baik untuk masalah nyata yang dihadapi oleh masyarakat dan dapat membantu mengembangkan teknologi terbaru yang dapat diterapkan pada sistem lainnya.
Hal ini dapat membantu meningkatkan efisiensi dan efektivitas pada sistem yang lebih besar.
3 Rumusan Masalah Berikut adalah rumusan masalah dari pengembangan aplikasi monitoring ketinggian air menggunakan Arduino Uno, sensor ultrasonik HC-SR04.
MQTT, dan Flutter:
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Bagaimana cara mengimplementasikan sensor ultrasonik HC-SR04 pada Arduino Uno untuk mengukur ketinggian air dengan akurasi yang tinggi? Bagaimana cara mengirim data hasil pengukuran ketinggian air dari Arduino Uno ke Flutter menggunakan protokol MQTT? Bagaimana cara membuat aplikasi mobile yang dapat menampilkan hasil pengukuran ketinggian air secara real-time dan dapat diakses dari jarak jauh?.
4 Tujuan dan Manfaat Penelitian Tujuan dari penelitian ini adalah untuk merancang dan mengembangkan sebuah sistem monitoring ketinggian air yang dapat diimplementasikan pada smart home, sehingga pengguna dapat memantau ketinggian air pada area tertentu secara real-time dan akurat melalui berbagai platform yang terhubung dengan sistem Adapun manfaat dari penelitian ini antara lain:
Memberikan kemudahan bagi pengguna untuk memantau ketinggian air pada area tertentu di dalam smart home.
Meningkatkan keamanan dan kenyamanan bagi pengguna smart home dengan memberikan informasi yang akurat dan real-time terkait ketinggian air pada area sekitar.
Memberikan solusi bagi pengguna smart home yang membutuhkan sistem monitoring ketinggian air dengan biaya yang terjangkau dan mudah dalam pengoperasiannya.
Mengoptimalkan penggunaan teknologi IoT pada smart home, sehingga dapat memberikan informasi yang lebih lengkap dan akurat bagi pengguna.
Memberikan pengalaman dalam mengembangkan aplikasi mobile dengan menggunakan teknologi Flutter dan protokol MQTT.
II.
METODE DAN MATERI
2 Software Pendukung Software adalah program komputer dan dokumentasi terkait.
Produk perangkat lunak mungkin dikembangkan untuk customer tertentu atau mungkin untuk pasar umum (Sommerville, 2.
Software pendukung adalah program atau aplikasi yang digunakan sebagai alat bantu dalam melaksanakan tugas tertentu pada suatu proyek atau pekerjaan Software pendukung dapat digunakan untuk membantu dalam berbagai aktivitas seperti analisis, pengolahan data, perancangan, pengembangan, dan pengujian aplikasi.
1 Arduino IDE Arduino IDE adalah Integrated Development Environment (IDE) yang digunakan untuk mengembangkan program pada mikrokontroler Arduino.
Arduino IDE menyediakan berbagai fitur seperti editor kode, kompiler, dan perangkat lunak pengunggah .
program ke mikrokontroler Arduino.
Dalam Arduino IDE, kita dapat menulis, mengedit, dan menguji kode pada mikrokontroler Arduino dengan mudah.
Kelebihan dari Arduino IDE adalah sederhana, mudah digunakan, dan gratis.
Arduino IDE sangat cocok bagi pemula yang ingin mempelajari program mikrokontroler dan mengembangkan proyek-proyek elektronik.
Selain itu.
Arduino IDE memiliki komunitas yang besar dan dukungan yang baik, sehingga memudahkan para pengembang untuk mencari bantuan dan memecahkan masalah yang muncul selama pengembangan proyek.
Kita perlu memakai Arduino IDE karena IDE ini menyederhanakan proses pengembangan program pada mikrokontroler Arduino.
Selain itu, dengan menggunakan Arduino IDE, kita dapat memanfaatkan banyak library yang tersedia untuk mempercepat pengembangan proyek.
Selain itu.
Arduino IDE juga memungkinkan kita untuk menggunakan bahasa pemrograman yang mudah dipahami, sehingga dapat diakses oleh banyak orang tanpa memerlukan latar belakang teknis yang mendalam.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
2 Android Studio Android Studio adalah Lingkungan Pengembangan Terpadu (Integrated Development Environment/IDE) resmi untuk pengembangan aplikasi Android, yang didasarkan pada IntelliJ IDEA.
Kelebihan dari Android Studio adalah mudah digunakan, dukungan yang baik dari Google, serta menyediakan banyak fitur yang membantu pengembangan aplikasi Android seperti debugging, pengujian, dan integrasi dengan layanan Google.
3 Visual Studio Code Visual Studio Code adalah sebuah text editor yang sangat populer yang dikembangkan oleh Microsoft dan didukung oleh komunitas pengembang yang besar.
Visual Studio Code memiliki fitur lengkap seperti syntax highlighting, auto completion, debugging, dan banyak lagi yang dapat membantu dalam pengembangan Untuk pengembangan aplikasi MQTT dengan menggunakan library MQTTnet.
Visual Studio Code memiliki beberapa kelebihan seperti:
Dukungan yang kuat untuk bahasa pemrograman C# dan .
NET, sehingga dapat memudahkan dalam pengembangan aplikasi MQTT dengan menggunakan library MQTTnet yang ditulis dengan bahasa C#.
Kemampuan untuk memudahkan pengembangan dengan dukungan untuk debugging, source control, dan pengembangan kolaboratif dengan fitur seperti Live Share.
Plugin yang banyak tersedia untuk memperluas fitur dan fungsionalitas Visual Studio Code, sehingga memungkinkan untuk menyesuaikan pengalaman pengembangan sesuai dengan kebutuhan.
Visual Studio Code dapat membantu dalam pengembangan aplikasi MQTT dengan menggunakan library MQTTnet dengan lebih mudah dan efisien.
4 Flutter Flutter merupakan sebuah SDK untuk pengembangan aplikasi mobile yang dikembangkan oleh Google untuk membangun a (Raharjo, 2.
aplikasi yang memiliki kinerja tinggi serta dapat dipublikasikan ke platform Android dan iOS dari codebase tunggal (Raharjo, 2.
Flutter memiliki kelebihan sebagai berikut:
Cross-platform: Flutter memungkinkan pengembangan aplikasi yang dapat berjalan di berbagai platform, termasuk Android, iOS, web, dan desktop, dengan menggunakan kode yang sama.
Fast development: Flutter memungkinkan pengembang untuk mengembangkan aplikasi dengan lebih cepat karena memiliki fitur hot reload yang memungkinkan pengembang untuk melihat perubahan dalam waktu nyata tanpa perlu melakukan kompilasi ulang.
Widget-based: Flutter menggunakan widget sebagai elemen dasar untuk membangun UI pada aplikasi, sehingga memungkinkan pengembang untuk membangun UI dengan lebih mudah dan fleksibel.
Native performance: Flutter menggunakan teknologi rendering sendiri yang disebut dengan Skia untuk menghasilkan tampilan yang halus dan responsif pada berbagai platform, sehingga aplikasi yang dibangun dengan Flutter memiliki performa yang mirip dengan aplikasi native.
Flutter menjadi salah satu framework populer yang banyak digunakan oleh pengembang untuk membangun aplikasi mobile, web, dan desktop.
Flutter juga memiliki komunitas pengembang yang besar dan dokumentasi yang lengkap, sehingga memudahkan pengembang untuk belajar dan mengembangkan aplikasi dengan Flutter.
5 MQTTnet MQTTnet adalah salah satu implementasi MQTT (Message Queuing Telemetry Transpor.
pada platform NET.
MQTT adalah sebuah protokol komunikasi yang ringan dan efisien untuk pengiriman pesan antar perangkat yang terhubung ke Internet of Things (IoT).
MQTTnet merupakan library yang memungkinkan pengembang untuk menggunakan protokol MQTT di aplikasi .
NET.
Beberapa kelebihan dari MQTTnet antara lain:
Ringan dan efisien: Protokol MQTT dirancang untuk pengiriman pesan DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
yang ringan dan efisien sehingga cocok digunakan pada perangkat IoT dengan sumber daya terbatas.
Mendukung koneksi dengan banyak broker: MQTTnet mendukung koneksi dengan banyak broker MQTT, sehingga memungkinkan pengembang untuk mengintegrasikan aplikasi dengan berbagai jenis perangkat IoT yang terhubung dengan broker MQTT.
Mendukung banyak platform: MQTTnet dapat digunakan pada berbagai platform .
NET, termasuk Windows.
Linux, dan macOS.
Terdapat banyak fitur: MQTTnet menyediakan banyak fitur, seperti publish/subscribe, retained messages.
Quality of Service (QoS), dan masih banyak lagi.
Hal ini memudahkan pengembang untuk membangun aplikasi IoT yang kompleks.
Karena kelebihan-kelebihan tersebut.
MQTTnet merupakan pilihan yang baik untuk digunakan pada aplikasi IoT yang dibangun dengan platform .
NET
3 Hardware Pendukung Hardware pendukung adalah perangkat keras atau komponen fisik yang digunakan dalam penelitian atau pengembangan aplikasi sebagai bagian dari implementasi sistem.
Hardware pendukung ini memiliki peran penting dalam menentukan keberhasilan dari sistem yang sedang dikembangkan, sehingga pemilihan dan penggunaannya perlu dilakukan dengan cermat dan tepat agar dapat mencapai tujuan penelitian yang Selain itu, hardware pendukung juga menjadi salah satu aspek yang perlu dipertimbangkan dalam perencanaan anggaran dan waktu dalam penelitian atau pengembangan aplikasi.
1 NodeMCU NodeMCU ESP866 adalah modul WiFi yang dapat digunakan untuk mengakses jaringan WiFi, mengirim dan menerima data melalui jaringan, dan mengontrol perangkat melalui koneksi internet.
Kelebihan dari modul WiFi ESP8266 adalah ukurannya yang kecil, konsumsi daya yang rendah, kemampuan terhubung ke jaringan WiFi, dan kemampuan untuk memproses data dan menjalankan program di dalam modul itu sendiri.
Kita perlu memakai modul WiFi ESP8266 karena banyak aplikasi IoT yang membutuhkan koneksi internet dan pengiriman data secara nirkabel.
Dengan menggunakan modul WiFi ESP8266, kita dapat mengakses jaringan WiFi dan mengirimkan data melalui internet dengan mudah.
Modul ini juga banyak digunakan dalam proyek-proyek DIY atau proyek-proyek kecil yang memerlukan koneksi internet, namun tidak memerlukan daya komputasi yang tinggi.
2 Sensor Ultrasonik HC-SR04 Sensor Ultrasonik HC-SR04 adalah sensor jarak yang menggunakan gelombang ultrasonik untuk mengukur jarak suatu benda dari sensor tersebut.
Sensor ini terdiri dari dua komponen utama, yaitu pemancar .
dan penerima .
, yang bekerja secara bersamaan untuk mengukur jarak dengan memantulkan gelombang suara dari objek yang diukur.
Kelebihan dari Sensor Ultrasonik HC-SR04 antara lain adalah:
Akurasi pengukuran: Sensor Ultrasonik HC-SR04 memiliki akurasi pengukuran yang baik dan mampu mengukur jarak dari beberapa centimeter hingga beberapa meter dengan akurasi yang tinggi.
Harga terjangkau: Sensor Ultrasonik HC-SR04 relatif murah dibandingkan dengan sensor jarak lainnya.
Mudah digunakan: Sensor Ultrasonik HC-SR04 mudah digunakan dan dihubungkan dengan mikrokontroler karena hanya memerlukan sedikit komponen tambahan.
Tidak terpengaruh oleh cahaya: Sensor Ultrasonik HC-SR04 dapat digunakan di lingkungan dengan cahaya yang rendah atau bahkan gelap, karena sensor ini tidak terpengaruh oleh cahaya.
Kita perlu memakai Sensor Ultrasonik HC-SR04 karena sensor ini dapat membantu kita mengukur jarak dengan akurasi yang tinggi, sehingga cocok digunakan dalam berbagai proyek seperti pengukuran jarak DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
kendaraan, pengukuran tinggi air, dan lain sebagainya.
Selain itu.
Sensor Ultrasonik HC-SR04 juga mudah digunakan dan dihubungkan dengan berbagai mikrokontroler.
4 Cara Kerja Sistem Sensor NodeMCU ESP8266 dan HC-SR04 dapat digabungkan untuk membuat sistem pemantauan jarak yang dapat dihubungkan ke server MQTT.
NodeMCU ESP8266 terhubung ke sensor HC-SR04 menggunakan kabel jumper, dan mengirimkan pengukuran jarak ke server MQTT menggunakan pustaka PubSubClient.
Server MQTT menerima pengukuran jarak dan menerbitkannya ke klien yang berlangganan.
Untuk merancang sistem seperti itu, kita perlu menghubungkan sensor HC-SR04 ke NodeMCU ESP8266 menggunakan kabel jumper.
Pin VCC dari HC-SR04 dihubungkan ke pin VIN dari NodeMCU ESP8266, dan pin GND harus dihubungkan ke pin GND.
Pin TRIG dan ECHO harus dihubungkan ke pin GPIO dari NodeMCU ESP8266.
Gambar 2.
1 Rancangan NodeMCU ESP8266 dan HC-SR04 Setelah koneksi perangkat keras dibuat, kita dapat merancang metode pengambilan data.
Metode pengambilan data dengan NodeMCU ESP8266.
MQTTnet dan Flutter melibatkan beberapa komponen dan langkah-langkah berikut:
Pertama, dibutuhkan sebuah mikrokontroller ESP8266 NodeMCU Selanjutnya, diperlukan sebuah server MQTT.
Server ini berfungsi sebagai pusat komunikasi antara ESP8266 dan Flutter, sehingga data yang dikirim dari ESP8266 dapat diterima oleh aplikasi Flutter.
ESP8266 perlu terhubung ke jaringan WiFi agar dapat mengirim data ke server MQTT.
Koneksi ini diatur melalui kode program ESP8266.
PubSubClient.
PubSubClient adalah library yang digunakan pada ESP8266 untuk mengirim dan menerima pesan MQTT.
Library ini menyederhanakan proses komunikasi dengan server MQTT.
MQTT Package pada Flutter.
Flutter menyediakan package untuk menghubungkan aplikasi dengan server MQTT, seperti mqtt_client dan mqtt5_client.
Package ini memungkinkan aplikasi Flutter untuk menerima data yang dikirimkan oleh ESP8266.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
UI Flutter.
Terakhir, data yang diterima dari server MQTT dapat ditampilkan pada UI Flutter, seperti menggunakan widget Text atau Chart.
Dengan metode ini, data dapat dikirimkan dari ESP8266 ke server MQTT dan diterima oleh aplikasi Flutter, sehingga pengguna dapat memantau data secara real-time.
Gambar 2.
2 Rancangan NodeMCU ESP8266 dan HC-SR04 Setelah merancang metode pengambilan data, selanjutnya menulis kode untuk membaca pengukuran jarak dari sensor HC-SR04 dan mengirimkannya ke server MQTT menggunakan pustaka PubSubClient.
Define dan include adalah dua kata kunci dalam bahasa pemrograman C yang digunakan di lingkungan Arduino IDE.
Define digunakan untuk membuat konstanta atau alias dalam kode program.
Saat program dijalankan, nilai konstanta akan tetap sama dan tidak dapat diubah selama program berjalan.
Include digunakan untuk memasukkan kode program dari file header atau library ke dalam kode program utama.
Contoh penggunaan define pada gambar 3.
2 adalah konstanta tigPin diberi nilai D7 dan konstanta echoPin diberi nilai D8.
Penggunaan include pada gambar 3.
2 menyertakan ESP8266Wifi.
h dan PubSubClient.
h yang berarti file tersebut dimasukkan ke dalam program.
File header ini berisi definisi dari semua fungsi dan variabel yang digunakan di lingkungan Arduino IDE.
WiFiClient dan PubSubClient adalah library atau pustaka yang tersedia di Arduino IDE untuk membantu mengakses dan mengontrol protokol jaringan WiFi dan protokol publish-subscribe .
ub-su.
dalam sebuah sistem IoT.
WiFiClient adalah library yang digunakan untuk membantu koneksi WiFi pada board Arduino, seperti NodeMCU ESP8266.
Library ini memberikan fungsi-fungsi yang memudahkan penggunaan koneksi WiFi seperti melakukan koneksi ke sebuah SSID, mengambil alamat IP, melakukan koneksi ke server, dan PubSubClient adalah library yang digunakan untuk memudahkan implementasi protokol publishsubscribe .
ub-su.
di dalam program yang dijalankan pada board Arduino.
Protokol pub-sub merupakan cara untuk melakukan komunikasi antara beberapa perangkat di dalam jaringan, dimana perangkat dapat berlangganan .
ke topik tertentu dan menerima pesan yang dikirim ke topik tersebut, atau mengirim pesan .
ke topik yang telah ditentukan.
Dalam penggunaan PubSubClient, library ini memberikan fungsi-fungsi yang memudahkan dalam melakukan koneksi ke broker MQTT dan mengirim atau menerima pesan dari topik-topik yang telah ditentukan.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Library ini telah terintegrasi dengan WiFiClient sehingga dapat digunakan bersama-sama dengan library tersebut untuk membuat sebuah aplikasi IoT yang dapat terhubung ke jaringan WiFi dan broker MQTT.
Gambar 3.
3 Initial Value NodeMCU ESP8266 Pada Arduino IDE, fungsi setup() digunakan untuk menyalakan atau menginisialisasi variabel dan perangkat keras yang akan digunakan dalam program.
Fungsi Serial.
begin() digunakan untuk memulai koneksi serial pada baud rate tertentu.
Baud rate yang harus digunakan sama dengan baud rate yang digunakan pada perangkat yang terhubung ke Arduino.
Fungsi pinMode() digunakan untuk menentukan apakah sebuah pin pada board Arduino digunakan sebagai input atau output.
Pada umumnya, parameter pertama adalah nomor pin, dan parameter kedua adalah tipe mode (INPUT atau OUTPUT).
Pada Gambar 3.
3 dijelaskan bahwa di dalam function setup terdapat function Serial.
yang mengartikan baud rate 9600 pada perangkat yang teehubung ke Arduino, function pinMode trigPin sebagai output dan echoPin sebagai input.
Function setup_wifi() adalah fungsi yang digunakan untuk menghubungkan ESP8266 ke jaringan WiFi.
Fungsi ini akan memulai koneksi WiFi dengan menggunakan nama jaringan (SSID) dan kata sandi .
yang telah ditentukan, dan menunggu hingga koneksi terhubung.
Function setServer() adalah fungsi yang digunakan untuk mengatur alamat server MQTT yang akan digunakan oleh ESP8266 untuk mengirim data.
Fungsi ini membutuhkan parameter berupa alamat server MQTT dalam bentuk Setelah diset.
ESP8266 dapat terhubung ke server tersebut dan mengirimkan pesan MQTT ke topik yang telah ditentukan.
Gambar 3.
4 Function setup NodeMCU ESP8266 Fungsi loop() pada Arduino IDE adalah bagian dari program yang dijalankan secara terus-menerus setelah fungsi setup() selesai dieksekusi.
Fungsi ini berisi kode program yang akan diulang secara terus-menerus selama board Arduino berjalan, kecuali jika board tersebut dimatikan atau program dihentikan.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Pada umumnya, fungsi loop() digunakan untuk mengontrol perangkat elektronik atau sensor, membaca atau mengirim data, atau melakukan operasi berulang.
Kode program yang terdapat pada fungsi loop() biasanya berisi looping, yaitu perulangan perintah-perintah tertentu dengan menggunakan pernyataan seperti for, while, atau do-while.
Dalam aplikasi IoT yang menggunakan protokol MQTT, fungsi loop() juga digunakan untuk mengecek koneksi dengan broker MQTT, memperbarui status perangkat, membaca data sensor, dan mengirimkan data ke Beberapa fungsi yang terdapat di dalam fungsi loop() pada gambar 3.
4 adalah digitalWrite() digunakan untuk mengirimkan sinyal HIGH atau LOW ke suatu pin pada mikrokontroler, dalam hal ini digunakan untuk mengirimkan sinyal ke pin trigPin.
delayMicroseconds() digunakan untuk memberikan jeda .
dalam mikrodetik (AA.
, dalam hal ini digunakan untuk memberikan delay selama 2 AAs setelah mengirimkan sinyal HIGH ke pin trigPin.
pulseIn() digunakan untuk mengukur durasi pulsa pada suatu pin pada mikrokontroler, dalam hal ini digunakan untuk mengukur durasi pulsa yang diterima pada pin echoPin.
Serial.
print() digunakan untuk mencetak .
teks atau nilai pada monitor serial, dalam hal ini digunakan untuk mencetak nilai jarak yang diukur menggunakan sensor ultrasonik.
publish() digunakan untuk mempublish pesan ke broker MQTT, dalam hal ini digunakan untuk mempublish nilai jarak ke topik "distance".
delay() digunakan untuk memberikan jeda .
dalam milidetik .
, dalam hal ini digunakan untuk memberikan delay selama 500 ms sebelum membaca kembali jarak Gambar 3.
5 Function loop NodeMCU ESP8266 Function setup_wifi() adalah fungsi yang digunakan untuk menghubungkan ESP8266 ke jaringan WiFi.
Fungsi ini akan memulai koneksi WiFi dengan menggunakan nama jaringan (SSID) dan kata sandi .
yang telah ditentukan, dan menunggu hingga koneksi terhubung dengan status WL_CONNECTED.
Setelah terhubung, fungsi ini akan menampilkan alamat IP yang digunakan.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 3.
6 Function Setup Wifi NodeMCU ESP8266 Fungsi reconnect() digunakan untuk melakukan koneksi kembali .
pada MQTT server apabila koneksi terputus atau gagal terhubung.
Fungsi ini akan dijalankan di dalam loop utama untuk memastikan koneksi selalu terjaga.
Pada fungsi reconnect(), pertama-tama dicek terlebih dahulu apakah klien .
sudah terhubung dengan server atau belum menggunakan fungsi client.
connected().
Jika belum terhubung, maka klien akan mencoba terhubung kembali ke server menggunakan fungsi client.
connect().
Jika koneksi berhasil terhubung, maka fungsi akan mengeluarkan pesan "connected".
Namun, jika koneksi gagal, maka akan ditampilkan pesan "failed" beserta kode status kesalahan (RC) dan akan diulang kembali dalam jangka waktu 5 detik menggunakan fungsi delay().
Gambar 3.
7 Function reconnect wifi NodeMCU ESP8266 Di sisi perangkat lunak, kita perlu menyiapkan server MQTT dan membuat topik tempat pengukuran jarak akan dipublikasikan.
Anda dapat menggunakan server MQTT berbasis cloud atau menyiapkan broker MQTT lokal Anda sendiri.
Kemudian.
Anda perlu menulis kode untuk menghubungkan NodeMCU ESP8266 ke server MQTT dan mempublikasikan pengukuran jarak ke topik.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 3.
8 MQTT Server Code Untuk memvisualisasikan pengukuran jarak, kita dapat membuat aplikasi Flutter yang subscribe topik MQTT dan menampilkan pengukuran jarak secara real-time.
Untuk menghubungkan aplikasi Flutter ke server MQTT, kita dapat menggunakan paket mqtt_client.
Paket ini menyediakan klien MQTT yang dapat digunakan untuk subscribe topik MQTT dan menerima pesan.
Setelah aplikasi terhubung ke server MQTT, kita dapat menggunakan widget Flutter untuk menampilkan pengukuran jarak.
Dengan mengikuti langkah-langkah tersebut dapat membuat sebuah perangkat monitoring ketinggian air yang terhubung dengan jaringan MQTT dan dapat diakses melalui aplikasi Flutter.
PEMBAHASA DAN HASIL
1 Hasil Penelitian Hasil tampilan fisik dari merangkai rancangan pada gambar 3.
1 dapat dilihat pada gambar 4.
Dari gambar tersebut dapat dilihat bahwa NodeMCU ESP8266 dapat terhubung langsung dengan Sensor ultrasonic HC-SR04 menggunakan kabel female to female.
Sebelum menggunakan perangkat NodeMCU ESP8266, kita harus mengupload konfigurasi yang sudah dibuat di Arduino Uno.
Bisa lihat gambar 4.
Gambar 4.
1 NodeMCU ESP8266 HC-SR04 DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
2 Upload Config Arduino IDE Setelah berhasil mengunggah konfigurasi dari Arduino IDE ke NodeMCU ESP8266, kita bisa melihat hasil running dari konfigurasi di Serial Monitor yang terdapat di Arduino IDE.
Di Gambar 4.
3 terlihat bahwa NodeMCU ESP8266 berhasil menghubungkan ke perangkat wifi.
Selanjutnya berhasil menghubungkan ke MQTT Server lalu menampilkan hasil dari sensor ultrasonik HC-SR04 secara berkala.
Gambar 4.
3 Result Serial Monitor Arduino IDE DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Perangkat NodeMCU ESP8266 membutuhkan daya minimal 3.
oleh karena itu kita bisa menggunakan batterai ataupun sumber listrik lainnya yang memiliki sumber daya lebih dari 3.
Disini saya memprototype perangkat NodeMCU ESP8266 menggunakan Powerbank berkapasitas 10000mAH 3.
Gambar 4.
4 merupakan hasil rangkaian NodeMCU ESP8266 dan HC-SR04 yang terhubung ke Powerbank 3.
Gambar 4.
4 NodeMCU ESP8266 HC-SR04 Powerbank Setelah perangkat tersambung daya, maka NodeMCU ESP8266 akan mencoba untuk terhubung ke internet wifi yang sudah dikonfigurasi sebelumnya.
Selanjutnya NodeMCU ESP8266 akan mencoba untuk terhubung ke MQTT Server yang sudah dikonfigurasi sebelumnya.
Hasilnya perangkat NodeMCU ESP8266 berhasil terhubung ke internet wifi lalu terhubung ke MQTT Server.
Hasil pada gambar 4.
5 menunjukkan bahwa perangkat tersebut berhasil mengirimkan data ke MQTT Server.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
5 Hasil MQTT Untuk menampilkan hasil data yang sudah dikirim ke MQTT Server, kita memerlukan MQTT Client dan beberapa paket lainnya seperti rxdart dan get_it.
MQTT Client.
RxDart, dan Get It merupakan beberapa package atau library yang sering digunakan dalam pengembangan aplikasi berbasis Flutter yang terhubung dengan MQTT broker.
MQTT Client adalah sebuah package yang digunakan untuk menghubungkan aplikasi Flutter dengan MQTT broker.
Package ini menyediakan fitur publish dan subscribe yang memungkinkan pengiriman dan penerimaan pesan dari MQTT broker.
RxDart adalah package yang mengimplementasikan reactive programming pada aplikasi Flutter.
Dengan menggunakan RxDart, pengembang dapat memanfaatkan Observable.
Stream, dan banyak operator lainnya untuk memanage state aplikasi secara efektif.
Get It adalah package yang menyediakan service locator untuk mengatur dependensi dalam aplikasi Flutter.
Dengan Get It, pengembang dapat menginisialisasi dan mengakses instance dari sebuah class secara global tanpa perlu menggunakan konstruktor.
Dalam pengembangan aplikasi yang terhubung dengan MQTT broker, ketiga package ini dapat digunakan untuk mempermudah implementasi fitur-fitur yang dibutuhkan, seperti koneksi ke broker, handling message, serta manajemen state aplikasi.
Di gambar 4.
6 dijelaskan version paket dan framework yang digunakan di dalam penelitian Gambar 4.
6 Version Paket DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Sebelum menghubungkan Flutter dengan MQTT Server, kita perlu menyiapkan tampilan agar user dapat dengan mudah melihat dan membacanya.
Untuk membuat tampilan di Flutter saya mengimplementasi widget AnimatedBuilder.
ClipPath.
Painter dan CustomPaint supaya lebih menarik.
AnimatedBuilder adalah sebuah widget di Flutter yang digunakan untuk membuat animasi dengan menggunakan controller.
Controller tersebut akan menentukan bagaimana animasi berjalan dan berakhir.
AnimatedBuilder akan membangun widget tree sesuai dengan perubahan dari controller.
ClipPath adalah widget di Flutter yang digunakan untuk memotong atau meng-clip sebuah widget dengan bentuk tertentu.
ClipPath biasanya digunakan untuk membuat shape yang tidak biasa seperti lingkaran, segitiga, atau bentuk-bentuk lainnya.
CustomPaint adalah widget di Flutter yang digunakan untuk membuat custom painting.
CustomPaint memberikan kontrol yang lebih besar pada proses rendering dengan memungkinkan kita untuk menggambar sesuatu secara langsung pada canvas.
Gambar 4.
6 Animated Builder DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
7 ClipPath dan CustomPaint Setelah selesai menyiapkan tampilan, kita harus mengkonfigurasi MQTT Client untuk menerima data dari MQTT Server.
Di penelitian ini menggunakan package mqtt_client.
Pada Gambar 4.
8 terdapat beberapa function yang digunakan dalam konfigurasi mqtt client.
Berikut MQTTServerClient: Merupakan kelas pada package mqtt_client yang digunakan untuk melakukan koneksi ke server MQTT dan melakukan operasi seperti publish dan subscribe.
Logging: Logging digunakan untuk memudahkan proses debugging pada aplikasi.
Dengan menggunakan logging, kita bisa melihat pesan-pesan yang di-generate oleh aplikasi pada konsol.
Connect: Method connect pada MQTTServerClient digunakan untuk melakukan koneksi ke server MQTT dengan parameter berupa alamat server, port, dan informasi kredensial .
sername dan passwor.
Disconnect: Method disconnect pada MQTTServerClient digunakan untuk memutus koneksi dengan server MQTT.
Subscribe: Method subscribe pada MQTTServerClient digunakan untuk melakukan subscribe ke topik tertentu pada server MQTT.
MQTTPublishMessage: Kelas ini pada package mqtt_client digunakan untuk mengirim pesan ke server MQTT.
Pesan yang dikirim bisa berupa teks atau biner.
Async Sleep: Fungsi sleep pada Dart digunakan untuk memberikan jeda pada eksekusi kode.
Fungsi async sleep pada MQTTClient digunakan untuk memberikan jeda pada proses async .
eperti koneksi ke server MQTT).
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
8 MQTT Flutter Konfigurasi Untuk menyimpan hasil data dari MQTT Server kita perlu membuat satu function sebagai function untuk mengambil data kemudian menyimpannya ke tipe data stream.
Di penelitian ini penulis menggunakan BehaviourSubject dari rxdart sebagai paket untuk mengatasi tipe data stream.
BehaviorSubject adalah salah satu tipe dari Rx Subject yang didefinisikan dalam paket Rx Dart.
Subject adalah sumber data yang dapat dipublikasikan .
dan sekaligus juga dapat menerima .
BehaviorSubject dapat menyimpan satu nilai terbaru dan mengembalikan nilai tersebut kepada subscriber yang baru bergabung.
Artinya, saat sebuah subscriber baru bergabung, ia akan langsung menerima nilai terbaru yang disimpan dalam BehaviorSubject.
Perbedaan antara BehaviorSubject dengan tipe Subject yang lain seperti PublishSubject dan ReplaySubject terletak pada bagaimana data dipublikasikan.
Pada PublishSubject, data yang dihasilkan hanya diteruskan ke subscriber yang bergabung setelah data tersebut dibuat .
ebagai contoh, hanya data yang dihasilkan setelah subscriber bergabung yang akan dikirimka.
Pada ReplaySubject, seluruh data yang dihasilkan akan disimpan dan diteruskan ke setiap subscriber yang bergabung.
Sedangkan pada BehaviorSubject, nilai terbaru akan disimpan dan diteruskan hanya kepada subscriber baru yang bergabung.
Dalam penggunaannya.
BehaviorSubject cocok digunakan ketika kita membutuhkan sumber data yang dapat mempertahankan satu nilai terbaru dan mengirimkannya kepada subscriber yang baru bergabung.
Contoh penggunaannya adalah ketika kita ingin membuat suatu tombol yang statusnya dapat berubah-ubah, maka BehaviorSubject dapat digunakan untuk mengirimkan status terakhir dari tombol tersebut kepada setiap DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
subscriber yang baru bergabung.
Di gambar 4.
9 dijelaskan di dalam function tersebut hal yang pertama dilakukan adalah mengambil payload dari Mqtt kemudian menambahkannya ke dalam dataMqtt sebagai tipe data stream.
Gambar 4.
9 Function simpan data MQTT Setelah data yang didapatkan dari MQTT Server disimpan, kemudian perlu untuk ditampilkan.
Gambar 10 menjelaskan beberapa widget yang digunakan, antara lain Scaffold.
StreamBuilder.
Custom Widget, dll.
Scaffold adalah salah satu widget di Flutter yang digunakan sebagai kerangka .
dari sebuah tampilan aplikasi yang akan dibuat.
Widget ini menyediakan beberapa properti dan method yang membantu dalam membangun tampilan aplikasi yang responsif dan mudah diatur.
Scaffold memiliki properti seperti appBar, body, floatingActionButton, dan lain-lain.
Properti appBar digunakan untuk menampilkan sebuah bar yang biasanya berisi judul atau logo aplikasi, serta tombol-tombol Properti body digunakan untuk menampilkan konten utama aplikasi, seperti daftar atau form.
Properti floatingActionButton digunakan untuk menampilkan sebuah tombol aksi yang melayang di atas tampilan Selain properti.
Scaffold juga memiliki method seperti showSnackBar, yang digunakan untuk menampilkan pesan singkat di bagian bawah layar, dan openDrawer, yang digunakan untuk membuka sebuah panel samping .
Dengan menggunakan Scaffold, membangun tampilan aplikasi di Flutter menjadi lebih mudah dan efektif.
StreamBuilder adalah widget Flutter yang memungkinkan pengguna untuk membangun UI berdasarkan data yang berasal dari stream.
Stream adalah objek yang menghasilkan serangkaian nilai, dan StreamBuilder memungkinkan kita untuk membangun UI yang akan diperbarui setiap kali nilai baru diterima dari stream.
Dengan menggunakan StreamBuilder, kita dapat membuat aplikasi yang responsif dan dinamis.
Pada dasarnya.
StreamBuilder memiliki dua argumen utama, yaitu stream dan builder.
Argumen stream adalah objek stream yang akan digunakan sebagai sumber data, sedangkan argumen builder adalah fungsi yang akan dijalankan setiap kali ada data baru yang diterima dari stream.
Fungsi builder harus mengembalikan widget yang akan digunakan untuk membangun UI.
Contoh penggunaan StreamBuilder adalah ketika kita ingin menampilkan daftar item yang diperbarui secara dinamis dari data yang diterima dari server.
Dalam hal ini, kita dapat menggunakan stream untuk menerima data dari server dan menggunakan StreamBuilder untuk membangun daftar item secara dinamis setiap kali ada data baru yang diterima dari server.
StreamBuilder digunakan untuk melisten data stream yang didapatkan dari MQTT Server.
Kemudian data tersebut ditampilkan dalam bentuk Animated yang sudah dibuat sebelumnya.
LiquidLinearProgressIndicator adalah sebuah widget di Flutter yang menampilkan indikator progres linier dalam bentuk cairan.
Widget ini umumnya digunakan untuk menampilkan progres download, upload, atau proses lainnya yang membutuhkan tampilan indikator linier.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Cara kerja LiquidLinearProgressIndicator adalah dengan menampilkan animasi berupa gelembung yang bergerak sepanjang garis progres.
Gelembung ini memiliki kecepatan dan interval yang dapat dikustomisasi, sehingga dapat menampilkan tampilan progres yang sesuai dengan kebutuhan.
LiquidLinearProgressIndicator memiliki beberapa properti seperti backgroundColor, valueColor, value, borderColor, borderWidth, borderRadius, dan lain-lain yang dapat disesuaikan untuk memperoleh tampilan indikator progres yang sesuai dengan kebutuhan aplikasi yang sedang dibangun.
Widget Text pada Flutter digunakan untuk menampilkan teks atau tulisan pada antarmuka pengguna Text memiliki beberapa properti seperti data, style, textAlign, overflow, dan sebagainya untuk memformat tampilan teks Gambar 4.
10 Tampilan Utama Aplikasi 2 Uji Coba Uji terhadap sensor ultrasonik dalam hal mengukur ketinggan jarak air yaitu dengan membandingkan pengukuran jarak sebenarnya tanpa sensor secara manual menggunakan alat ukur dan menggunakan sensor ultrasonik HC-SR04.
Hasil pengukuran jarak sebenarnya secara manual dan menggunakan sensor ultrasonik adalah sama.
Uji coba selanjutnya yaitu menjalankan aplikasi monitoring ketinggian air di Android, iOS.
Web.
MacOS.
Windows, dan Linux.
Flutter adalah sebuah framework untuk membuat aplikasi mobile yang dapat DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
digunakan untuk membuat aplikasi untuk platform Android, iOS.
Web.
MacOS.
Windows, dan Linux.
Dalam mengembangkan aplikasi Flutter, salah satu tahap penting adalah melakukan testing pada aplikasi.
Ada beberapa cara untuk melakukan testing aplikasi Flutter, salah satunya adalah dengan menjalankan aplikasi di emulator atau perangkat fisik.
Berikut adalah cara menjalankan aplikasi flutter di Android:
Persiapkan perangkat Android yang akan digunakan untuk testing, pastikan USB debugging sudah diaktifkan di perangkat tersebut.
Hubungkan perangkat Android ke komputer dengan kabel USB.
Buka terminal atau command prompt, dan masuk ke direktori project Flutter yang ingin dijalankan di perangkat Android.
Ketikkan perintah flutter run pada terminal atau command prompt.
Tunggu beberapa saat hingga proses build selesai, dan aplikasi akan secara otomatis terinstal di perangkat Android yang terhubung ke komputer.
Setelah aplikasi terinstal.
Anda dapat menjalankannya dengan membuka aplikasi di perangkat Android Perubahan yang dilakukan pada kode sumber aplikasi dapat langsung terlihat pada aplikasi yang dijalankan di perangkat Android, tanpa perlu melakukan instalasi ulang.
Untuk membangun aplikasi Flutter pada perangkat Android, ada beberapa langkah yang perlu dilakukan.
Berikut adalah langkah-langkah untuk membangun aplikasi Flutter menjadi file APK:
Buka terminal atau command prompt.
Pindah ke direktori proyek Flutter Anda dengan menggunakan perintah "cd".
Jalankan perintah "flutter build apk".
Proses ini akan membangun file APK untuk aplikasi Anda.
Setelah proses selesai, file APK dapat ditemukan di direktori "build/app/outputs/flutter-apk/".
File ini akan memiliki nama yang sama dengan nama proyek Anda.
Gambar 4.
12 App run on Android DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Untuk menjalankan aplikasi Flutter pada iOS, kita perlu menggunakan Xcode yang hanya tersedia pada sistem operasi macOS.
Berikut adalah cara untuk menjalankan aplikasi Flutter pada iOS melalui Xcode:
Pastikan bahwa perangkat iOS atau simulator telah terhubung dengan komputer Anda.
Buka terminal dan navigasi ke direktori aplikasi Flutter Anda.
Jalankan perintah flutter build ios untuk membangun aplikasi untuk iOS.
Setelah berhasil dibangun, buka file .
xcworkspace yang berada di dalam direktori ios aplikasi Anda dengan menggunakan Xcode.
Pilih perangkat atau simulator yang ingin Anda gunakan untuk menjalankan aplikasi di Xcode.
Tekan tombol "Run" untuk menjalankan aplikasi pada perangkat iOS atau simulator.
Untuk melakukan build aplikasi Flutter pada iOS.
Anda perlu menggunakan perangkat MacOS dan Xcode.
Berikut adalah langkah-langkah yang dapat Anda ikuti:
Pastikan Anda telah menginstal Xcode pada perangkat MacOS Anda.
Buka terminal dan arahkan ke direktori proyek Flutter Anda.
Jalankan perintah flutter build ios pada terminal.
Tunggu hingga proses build selesai dan aplikasi berhasil dikompilasi.
Buka proyek di Xcode dengan membuka file Runner.
xcworkspace yang berada di dalam direktori /ios.
Pastikan telah mengatur signing certificate untuk aplikasi.
Klik tombol Build pada Xcode untuk membangun aplikasi.
Setelah proses build selesai, unggah aplikasi ke App Store Connect.
Gambar 4.
13 App run on iOS DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Flutter juga mendukung pengembangan aplikasi web.
Untuk menjalankan aplikasi Flutter di web.
Anda perlu melakukan beberapa konfigurasi pada proyek Flutter Anda dan menginstal paket yang diperlukan.
Setelah itu.
Anda dapat menjalankan aplikasi di browser menggunakan perintah flutter run -d chrome.
Untuk membuild flutter web bisa menggunakan perintah flutter build web.
Flutter Build Web adalah perintah yang digunakan untuk menghasilkan aplikasi Flutter dalam bentuk website atau web app.
Proses build akan menghasilkan file HTML.
CSS, dan Javascript yang dapat dijalankan di browser.
Setelah build selesai.
Anda dapat menemukan file HTML.
CSS, dan Javascript yang dihasilkan dalam direktori "build/web".
Kemudian.
Anda dapat memuat file tersebut pada server web yang telah dipilih.
Gambar 4.
14 App run on Web Untuk menjalankan dan mem-build aplikasi desktop macOS menggunakan Flutter, ikuti langkah-langkah Buka terminal dan arahkan ke direktori proyek.
Jalankan flutter create .
untuk menghasilkan file yang diperlukan untuk platform macOS.
Jalankan flutter config --enable-macos-desktop untuk mengaktifkan platform macOS untuk proyek Flutter.
Jalankan flutter run -d macOS untuk membuat dan menjalankan aplikasi di perangkat macOS.
Jalankan flutter build macos untuk menghasilkan bundel aplikasi desktop macOS.
Setelah menjalankan flutter build macos, bundel aplikasi macOS akan dibuat di direktori build/macos/Build/Products/Release/.
Bundel yang dihasilkan dapat diinstal pada perangkat macOS atau diunggah ke App Store untuk didistribusikan.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
15 App run on macOS Untuk membuild aplikasi linux menggunakan flutter bisa menjalankan perintah flutter build linux.
File executable dapat ditemukan di proyek di bawah build/linux/<build mode>/bundle/.
Di dalam file biner yang dapat dieksekusi di direktori bundel, ada dua direktori:
lib berisi file perpustakaan .
so yang diperlukan data berisi aset data aplikasi, seperti font atau gambar Berikut hasil aplikasi flutter yang dapat berjalan di berbagai distro linux (Ubuntu,Redhat.
OpenSUSE).
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
16 App run on Linux Untuk sebagian besar aplikasi.
Flutter sudah cukup untuk menangani proses kompilasi menggunakan perintah flutter run dan flutter build.
Untuk membuild aplikasi windows dengan flutter bisa mengikuti langkah Jalankan flutter build windows untuk membuat direktori build\.
Buka file solusi Visual Studio untuk Windows runner, yang sekarang dapat ditemukan di direktori build\windows, dinamai menurut aplikasi induk Flutter.
Di Solution Explorer.
Anda akan melihat sejumlah proyek.
Klik kanan yang memiliki nama yang sama dengan aplikasi Flutter, dan pilih Set as Startup Project.
Jalankan Build / Build Solution .
tau tekan Ctrl Shift B) untuk menghasilkan dependensi yang Anda sekarang seharusnya dapat menjalankan Debug / Mulai Debugging .
tau tekan F.
untuk menjalankan aplikasi Windows dari Visual Studio.
Gunakan bilah alat untuk beralih antara konfigurasi Debug dan Rilis yang sesuai.
DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
17 App run on Windows Gambar 4.
18 App run on Android Performance Gambar 4.
19 App run on iPhone Performance DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
20 App run on Web Performance Gambar 4.
21 App run on macOS Performance Gambar 4.
22 App run on Windows Performance DOI: 10.
52362/jisicom.
Ciptaan disebarluaskan di bawah Lisensi Creative Commons Atribusi 4.
0 Internasional.
e-ISSN : 2597-3673 (Onlin.
, p-ISSN : 2579-5201 (Printe.
Vol.
7 No.
2 (December 2.
JISICOM (Journal of Information System.
Informatics and Computin.
Website/URL: http://journal.
id/index.
php/jisicom Email: jisicom@stmikjayakarta.
id , jisicom2017@gmail.
Gambar 4.
23 App run on Linux Performance IV.
KESIMPULAN
1 Kesimpulan Berdasarkan hasil penelitian yang dilakukan, dapat disimpulkan bahwa menggunakan NodeMCU ESP8266 dan HC-SR04 untuk memonitoring ketinggian air menggunakan MQTTnet dan Flutter adalah solusi yang efektif dan efisien.
Hasil fleksibilitas aplikasi dapat berjalan di berbagai platform hampir 100%, karena dapat berjalan di OS aplikasi mobile (Android dan iOS).
Web.
Windows.
MacOS, dan Linux dengan system deb .
dan rpm (Redhat.
OpenSUSE).
Dalam penggunaan teknologi ini, terdapat beberapa hal yang perlu diperhatikan.
Pertama, perlu dilakukan pengaturan pada jaringan WiFi dan konfigurasi server MQTT agar dapat berkomunikasi dengan baik.
Kedua, belum terintegrasi langsung dengan sumber listrik.
Ketiga, belum dilengkapi dengan casing/cover agar mudah dan aman untuk digunakan dimanapun.
Terakhir, fleksibilitas aplikasi dapat berjalan di berbagai platfrom
terbatas mengikuti kompabilitas framework flutter dan paket library yang digunakan dalam pengembangan 2 Saran