ANALISIS DAN PERANCANGAN SISTEM
3.2. Perancangan Sistem
Pada tahap perancangan sistem ini, terdapat beberapa perancangan yang dilakukan berkaitan dengan sistem yang dibangun.
3.2.1. Use Case Diagram
Use Case Diagram memiliki fungsi untuk mendeskripsikan secara umum yang dapat dilakukan user dengan sistem, sehingga user dapat berinteraksi atau berkomunikasi dengan sistem tersebut. Use Case Diagram dari sistem yang dibuat bisa dilihat di Gambar 3.10 dan penjelasan dari isi use case diagram bisa dilihat di Tabel 3.4.
Gambar 3.10. Use Case Diagram Sistem.
Tabel 3.4. Tabel Penjelasan Use Case Diagram Sistem.
No Use Case Penjelasan
1 Login Sebagai akses untuk masuk halaman utama aplikasi.
2 Menu pemantauan dan pengendalian kualitas air akuaponik
Fitur untuk memantau suhu air, ph air dan Total Dissolved Solids (TDS) dan fitur untuk melakukan pengendalian kualitas air pada kolam akuaponik.
3 Menu grafik data kualitas air akuaponik
Fitur visualisasi grafik data dari suhu air, ph air dan Total Dissolved Solids (TDS) pada kolam akuaponik.
4 Menu notifikasi Memberi informasi kepada user untuk melakukan pengendalian kualitas air pada kolam akuaponik.
5 Menu Profile Untuk melakukan pengaturan batas parameter normal minimal, maksimal dari suhu air dan pH air.
Melalui menu ini juga user dapar keluar dari aplikasi.
3.2.2. Sequence Diagram
Sequence Diagram memiliki fungsi untuk menjelaskan hubungan antara objek dengan entitas pada sistem. Pada penelitian ini, sequence diagram dibagi beberapa bagian, yaitu sequence diagram pemantauan kualitas air akuaponik, sequence diagram pemantauan grafik kualitas air akuaponik, sequence diagram pengendalian kualitas air akuaponik dan sequence diagram untuk melakukan pengaturan batas parameter normal kualitas air.
3.2.2.1. Sequence Diagram Pemantauan Kualitas Air Akuaponik
Pada sequence diagram pemantauan ini, ketika user membuka aplikasi pada menu pemantauan akuaponik, maka proses yang dilakukan adalah request data kualitas air akuaponik ke server dengan API method GET URL datasensor/findone dan client server merespons data tersebut dengan mengirim balik data yang telah di request. Ketika sudah di respons, maka user dapat melihat data kualitas air terbaru. Sequence Diagram pemantauan kualitas air akuaponik bisa dilihat di Gambar 3.11.
Gambar 3.11. Sequence Diagram Pemantauan Data Kualitas Air Akuaponik.
3.2.2.2. Sequence Diagram Pemantauan Grafik Kualitas Air Akuaponik
Sama seperti pemantauan kualitas air akuaponik, sequence diagram pemantauan grafik ini, ketika user membuka aplikasi pada menu pemantauan grafik, maka proses yang dilakukan adalah request data kualitas air akuaponik ke server dengan API method GET URL datasensor/day, datasensor/week, datasensor/month, dan datasensor/year, kemudian client server merespons data tersebut dengan mengirim balik data yang telah di request. Ketika sudah di respons, user dapat melihat data kualitas air akuaponik dalam visualisasi grafik. Sequence Diagram pemantauan grafik kualitas air akuaponik bisa dilihat di Gambar 3.12.
Gambar 3.12. Sequence Diagram Pemantauan Data Grafik Kualitas Air Akuaponik.
3.2.2.3. Sequence Diagram Pengendalian Kualitas Air Akuaponik
Pada sequence diagram pengendalian kualitas air akuaponik ini memiliki cara kerja dengan melakukan request data kualitas air akuaponik ke server dengan API method GET dengan URL datasensor/findone untuk mengecek apakah perlu untuk melakukan pengendalian kualitas air. Jika kualitas air akuaponik dalam kondisi tidak normal, maka user menerima notifikasi untuk melakukan pengendalian dan fitur pengendalian kualitas air akuaponik diaktifkan. Sequence Diagram pengendalian kualitas air akuaponik bisa dilihat di Gambar 3.13.
Gambar 3.13. Sequence Diagram Pengendalian Kualitas Air Akuaponik.
3.2.2.4. Sequence Diagram Pengaturan Batas Parameter Normal Kualitas Air Akuaponik
Pada sequence diagram pengaturan parameter kualitas air akuaponik, ketika user membuka menu ini, maka yang dilakukan adalah proses request data ke server dengan API method GET dan URL /parametersensor. Kemudian user dapat melakukan pengaturan batas minimal, maksimal pada suhu air dan pH air. Ketika sudah melakukan pengaturan, maka data suhu air dan pH air yang telah diperbarui oleh user dikirim ke server dengan API dengan method PUT dengan URL /parametersensor. Sequence diagram pengaturan parameter normal kualitas air akuaponik bisa dilihat di Gambar 3.14.
Gambar 3.14. Sequence Diagram Pengaturan Parameter Normal Kualitas Air Akuaponik.
3.2.3. Komponen Alat
Ada beberapa komponen alat yang dibutuhkan untuk membuat rangkaian alat dan komponen yang mendukung lainnya. Bisa dilihat di Tabel 3.5.
Tabel 3.5. Komponen Alat.
No Alat Unit Fungsi
1 Sensor DS18B20 1 Unit Mengukur suhu air.
2 Sensor pH 1 Unit Mengukur pH air.
3 Sensor Total Dissolved Solids (TDS)
8 Arduino Mega2560 Pro 1 Unit Sebagai mikrokontroler.
9 Power Supply (PSU) 1 Unit Pemberi suplai listrik.
10 Aerator 1 Unit Pemberi oksigen dalam air.
11 pH + 1 Unit Menambah kadar pH air.
12 pH - 1 Unit Menurunkan kadar pH air.
13 Water Cooler 1 Unit Pendingin air.
3.2.4. Flowchart Sistem
Dalam membuat perancangan sistem, diperlukan sebuah flowchart untuk menjelaskan alur kerja sistem. Ada dua flowchart yang dijelaskan, yaitu flowchart pemantauan data kualitas air akuaponik dan flowchart pengendalian kualitas air akuaponik.
3.2.4.1. Flowchart Pemantauan Data Kualitas Air Akuaponik
Pada flowchart ini ada beberapa input dari sensor, yaitu sensor suhu air, pH air, dan total dissolved solids. Kemudian kondisi normal pada kualitas air untuk suhu air normal berkisar 27 oC sampai dengan 32 oC, pH air normal berkisar 6 sampai dengan 7. Ketika parameter data tersebut dalam kondisi yang tidak normal, maka ada notifikasi
pemberitahuan dari server kepada user. Flowchart dari pemantauan kualitas air akuaponik.bisa dilihat di Gambar 3.15.
Gambar 3.15. Flowchart Pemantauan Data Kualitas Air Akuaponik.
3.2.4.2. Flowchart Pengendalian Kualitas Air Akuaponik
Dalam flowchart ini ada beberapa perintah yang dibuat pada API dengan URL /sendCommand untuk pengendalian kualitas air pada kolam akuaponik. Untuk menghidupkan pemanas air yaitu “turnOnHeater”. Untuk menghidupkan pemanas air
yaitu “turnOnCooler”. Kemudian untuk menurunkan kadar pH air yaitu
“turnOnPhDown”. Berikutnya yaitu “turnOnPhUp” untuk menambah kadar pH air.
Pada aplikasi, perintah tersebut diaktifkan sesuai dengan kondisi dari kolam akuaponik.
Jika dalam kondisi normal maka perintah ini tidak aktif. Perintah pada pengendalian ini aktif jika parameter kualitas air dalam kondisi tidak normal. Ketika user telah melakukan pengendalian, maka fitur dari pengendalian ini tidak aktif selama 20 menit untuk mencegah user melakukan pengendalian secara berulang-ulang. Flowchart dari pengendalian akuaponik bisa dilihat di Gambar 3.16.
Gambar 3.16. Flowchart Pengendalian Kualitas Air Akuaponik.
3.2.5. Perancangan Akuaponik
Dalam perancangan akuaponik, membutuhkan bahan-bahan untuk mendukung perancangan akuaponik tersebut. Bahan-bahan perancangan akuaponik bisa dilihat di Tabel 3.6 dan desain perancangan dari akuaponik bisa dilihat di Gambar 3.17.
Tabel 3.6. Bahan-Bahan Perancangan Akuaponik.
No Bahan Ukuran Jumlah
1 Besi Berlubang 2 meter 8
2 Besi Berlubang 1.7 meter 2
3 Besi Berlubang 1.5 meter 2
4 Besi Berlubang 1 meter 10
5 Besi Berlubang 0.5 meter 4
6 Besi Berlubang 0.3 meter 2
7 Pipa PVC 2.5 inch 5
8 Terpal Kolam 2 m x 1 m x 0.5 m 1
9 Plastik Fiber 2.2 m x 1.7 m 1
Gambar 3.17. Perancangan Desain Akuaponik.
3.2.6. Perancangan Antarmuka Aplikasi
Aplikasi yang dibuat memiliki rancangan antarmuka. Rancangan antarmuka aplikasi yaitu berupa halaman login, halaman beranda, halaman grafik, halaman notifikasi, halaman profile dan halaman untuk pengaturan batas parameter normal kualitas air.
3.2.6.1. Perancangan Tampilan Halaman Login
Rancangan tampilan halaman Login merupakan halaman yang harus diisi oleh user berupa email dan password. Pada halaman ini terdapat beberapa keterangan berupa logo aplikasi yang dibuat, text input untuk email serta password. Kemudian ada tombol Login untuk navigasi ke halaman beranda, jika email dan password yang dimasukkan benar. Desain dari tampilan halaman Login bisa dilihat di Gambar 3.18.
Gambar 3.18. Perancangan Tampilan Halaman Login.
Keterangan :
1. Merupakan ilustrasi pada halaman login;
2. Merupakan logo dari aplikasi;
3. Merupakan text input dari email dan password;
4. Merupakan button login.
3.2.6.2. Perancangan Tampilan Halaman Beranda
Rancangan tampilan halaman beranda adalah tampilan halaman utama pada aplikasi ketika user sudah login. Tampilan ini berisi nama dari user, notifikasi, data parameter kualitas air serta fitur dari pengendalian kualitas air berupa pengendalian untuk menghidupkan pemanas dan pendingin air serta dapat menambah dan menurunkan kadar pH air. Desain dari tampilan halaman beranda bisa dilihat di Gambar 3.19.
Gambar 3.19. Perancangan Tampilan Halaman Beranda.
Keterangan :
1. Merupakan text nama dari pengguna aplikasi yang telah masuk;
2. Merupakan icon notifikasi;
3. Merupakan tampilan dari data pemantauan akuaponik. Berisi data suhu air, ph air, dan total dissolved solids;
4. Merupakan fitur untuk pengendalian kualitas air. Berisi pengendalian untuk menghidupkan pemanas dan pendingin air, pengendalian aktuator menambah dan menurunkan kadar pH air;
5. Tampilan bottom navigation bar yang berisi home icon, graphic icon, dan profile icon.
3.2.6.3. Perancangan Tampilan Halaman Notifikasi
Rancangan tampilan halaman Notifikasi merupakan halaman yang menerima informasi.
Halaman ini berisi informasi untuk melakukan pengendalian kualitas air akuaponik.
Notifikasi yang dimaksud untuk menghidupkan pemanas dan pendingin air, menghidupkan aktuator penambah dan penurun kadar pH air. Perancangan halaman notifikasi bisa dilihat di Gambar 3.20.
Gambar 3.20. Perancangan Tampilan Halaman Notifikasi.
Keterangan :
1. Merupakan icon dan text dari notifikasi suhu air dan ph air;
2. Merupakan text isi dari notifikasi suhu air dan ph air.
3.2.6.4. Perancangan Tampilan Halaman Grafik
Rancangan tampilan halaman grafik merupakan halaman yang berisi data pemantauan kualitas air berupa suhu air, pH air dan total dissolved solids. Pada tampilan halaman ini dapat menampilkan data grafik harian, mingguan, bulanan, dan tahunan. Tampilan untuk parameter kualitas air ditampilkan dalam grafik yang berbeda-beda. Desain dari tampilan halaman grafik bisa dilihat di Gambar 3.21.
Gambar 3.21. Perancangan Tampilan Halaman Grafik.
Keterangan :
1. Merupakan text judul dari suhu air, ph air, dan total dissolve solid;
2. Merupakan tab dari untuk menampilkan grafik minggu, bulan dan tahun;
3. Merupakan gambar grafik dari suhu air, ph air, dan total dissolve solid.
3.2.6.5. Perancangan Tampilan Halaman Profile
Rancangan tampilan halaman profile merupakan tampilan yang berisi data fitur untuk batas normal parameter kualitas air dan keluar dari aplikasi yang dapat dilakukan oleh user. Tampilan ini berisi foto, nama, serta email dari user. Untuk batas normal parameter yang ditampilkan berupa suhu air, pH air minimal dan maksimal dari batas normal kualitas air. Desain dari tampilan halaman profile bisa dilihat di Gambar 3.22.
Gambar 3.22. Perancangan Tampilan Halaman Profile.
Keterangan :
1. Merupakan avatar atau gambar dari pengguna aplikasi;
2. Merupakan text dari nama dan email;
3. Merupakan button untuk keluar dari aplikasi;
4. Merupakan data batas normal minimal dan maksimal dari suhu air serta pH air;
5. Merupakan button untuk navigasi ke halaman pengaturan parameter.
3.2.6.6. Perancangan Tampilan Halaman Pengaturan Parameter
Rancangan tampilan halaman pengaturan parameter kualitas air merupakan halaman yang dapat user gunakan untuk mengatur batas normal kualitas air minimal dan maksimal dari suhu air serta pH air. Untuk menuju halaman ini, user dapat melakukan navigasi dari halaman profile melalui button edit. Ketika user sudah menekan button tersebut, maka ada tampilan halaman ini dari parameter suhu air dan pH air. User dapat mengganti batas normal dari kualitas air yang dibutuhkan. Rancangan tampilan halaman pengaturan parameter bisa dilihat di Gambar 3.23.
Gambar 3.23. Perancangan Tampilan Halaman Pengaturan Parameter.
Keterangan :
1. Merupakan text dari pengaturan parameter;
2. Merupakan form input dari parameter suhu air dan pH air yang dapat user isi;
3. Merupakan button untuk menyimpan data yang telah diperbarui.
3.2.7. Perancangan Server
Pada perancangan server, peneliti menggunakan layanan dari Amazon Elastic Compute Cloud (Amazon EC2). Server menggunakan Operating System Ubuntu Server 18.04 LTS (HVM), SSD Volume Type. Untuk penyimpanan data dari sensor menggunakan database MySQL. Selanjutnya, MQTT Broker diinstal di dalam server. Dan yang terakhir adalah Application Programming Interface (API) dibuat untuk menjadi penghubung antara server dan aplikasi. Perancangan server AWS EC2 bisa dilihat di Gambar 3.24.
Gambar 3.24. Perancangan Server AWS EC2.
3.2.8. Perancangan Notifikasi
Dalam perancangan notifikasi, pengiriman notifikasi menggunakan layanan dari OneSignal. Syarat untuk menggunakan OneSignal diperlukan Firebase Server Key dan Firebase Sender ID yang didapat dari layanan Firebase Cloud Messaging (FCM). Bisa dilihat di Gambar 3.25 Firebase Server Key dan Firebase Sender ID.
Gambar 3.25. Firebase Key dan Sender ID.
Kemudian, setelah mendapatkan Firebase Server Key dan Sender ID tersebut, isi kolom Firebase Server Key dan Firebase Sender ID yang telah disediakan pada OneSignal.
Setelah selesai, maka otomatis mendapatkan OneSignal App ID dan REST API Key.
Konfigurasi OneSignal bisa dilihat di Gambar 3.26 dan OneSignal App ID dan REST API Key bisa dilihat di Gambar 3.27.
Gambar 3.26. Konfigurasi OneSignal.
Gambar 3.27. OneSignal App ID dan REST API Key.
Setelah mendapatkan OneSignal App ID dan REST API Key, kemudian data tersebut dimasukkan ke dalam server untuk mengirimkan notifikasi kepada user ketika ada parameter dari kualitas air akuaponik dalam kondisi yang tidak normal.
BAB 4