HASIL DAN PEMBAHASAN
4.1 Pengembangan Aplikasi TSP
Perancangan aplikasi dibagi menjadi 2 bagian besar, yakni pengembangan Front end aplikasi yakni tampilan aplikasi (user interface) yang akan berinteraksi dengan pengguna dan Back end aplikasi yang merupakan proses antara sistem aplikasi dengan server untuk menghasilkan output informasi (teks, angka, atau file) yang ditampilkan pada bagian front end.
Gambar 4.1. Alur tampilan aplikasi TSP berbasis website
Pengembangan front end dimulai dari pemetaan alur tampilan aplikasi beserta informasi yang akan ditampilkan pada aplikasi. Gambar 4.1 merupakan alur tampilan aplikasi berbasis website yang akan digunakan pihak manajemen kebersihan Universitas Pertamina. Kelebihan aplikasi TSP berbasis website adalah pengguna dapat melihat daftar pengguna aplikasi TSP berbasis mobile yang merupakan petugas kebersihan terdaftar pada aplikasi.
Universitas Pertamina - 38 Selanjutnya, untuk gambar 4.2 yakni alur tampilan aplikasi berbasis mobile yang akan digunakan petugas kebersihan Universitas Pertamina. Halaman yang ditampilkan hanya daftar TSP beserta informasinya.
Gambar 4.2. Alur tampilan aplikasi TSP berbasis website
Setelah tahapan pemetaan alur aplikasi TSP selesai dilakukan, perancangan dilanjutkan dengan membuat low fidelity mockup (lo-fi) yang merupakan kerangka desain elemen-elemen dasar tampilan aplikasi. Elemen lo-fi terdiri dari teks, tombol, penempatan gambar, hingga navigasi dasar. Penggunaan lo-fi bertujuan untuk validasi desain sistem dan alur suatu aplikasi berjalan yang akan digunakan calon pengguna. Berikut beberapa tampilan lo-fi aplikasi TSP berbasis website.
Universitas Pertamina - 39 Gambar 4.3. Tampilan low fidelity daftar tempat sampah berbasis website
Universitas Pertamina - 40 Selanjutnya, beberapa-beberapa tampilan low fidelity aplikasi TSP berbasis mobile.
Gambar 4.5. Tampilan low fidelity list TSP berbasis Android
Tahapan lo-fi dilanjutkan dengan implementasi pengembangan tampilan aplikasi TSP berbasis website dan mobile. Tahapan high fidelity (hi-fi) tidak dilakukan karena pengembang memiliki keterbatasan sumber untuk melakukan desain tampilan yang menarik secara estetika. Oleh karena itu, pengembang langsung melakukan implementasi aplikasi.
Universitas Pertamina - 41
4.1.1 Pengembangan Aplikasi Berbasis Website
Untuk versi website desain tampilan aplikasi menggunakan gabungan Javascript, CSS, dan HTML. Berikut beberapa tampilan aplikasi TSP versi website:
Gambar 4.6. Tampilan halaman login aplikasi TSP versi website
Gambar 4.6 merupakan tampilan login aplikasi TSP pada versi website. Apabila pihak manajer kebersihan Universitas Pertamina sebagai pengguna belum melakukan registrasi, maka wajib mendaftarkan data diri pada tombol “Sign Up”. Data tersebut akan digunakan sebagai validasi ketika melakukan login.
Gambar 4.7. Tampilan list perangkat TSP versi website
Setelah proses validasi login pada sistem berhasil, sistem akan mengarahkan ke tampilan list TSP seperti gambar 4.7. Tampilan list TSP memberikan informasi yang digunakan pengguna dalam memonitor tempat sampah, berikut penjelasan dari informasi:
1. “Nama Produk atau Kode TSP“ merupakan kode atau penamaan untuk suatu tempat sampah yang telah menggunakan sensor dan telah terdaftar pada aplikasi TSP. Contoh pada gambar yakni “GL12” yang merepresentasikan tempat sampah di lantai 1 Griya Legita.
Universitas Pertamina - 42 2. “Status“ merupakan keterangan kategori ketinggian sampah yang diberikan kepada pengguna. Keterangan akan “status dibagi menjadi 3 bagian berdasarkan jarak antara sampah dengan sensor, yakni:
a. “Low“ dengan kondisi jarak antara sampah dengan sensor dari 35 cm hingga batas ketinggian suatu tempat sampah. Jika menggunakan sampah 30 liter maka batas ketinggiannya adalah 52 cm.
b. “Medium” dengan kondisi jarak 15 hingga 34.99 cm antara sensor dengan sampah. c. “High” dengan kondisi jarak 0 hingga 14.99 cm antara sensor dengan sampah. 3. “Lantai” merupakan informasi posisi suatu TSP ditempatkan pada gedung.
4. “Jarak” merupakan informasi yang menampilkan jarak dalam satuan centimeter (cm) antara sensor pengukur ketinggian dengan permukaan sampah, sehingga pihak pengguna dapat mengetahui penggunaan optimal suatu tempat sampah. Terdapat perbedaan warna yang diberikan pada kondisi jarak tertentu diantaranya warna “hijau“ untuk jarak 35 cm hingga batas ketinggian maksimum tempat sampah, “biru” untuk jarak 15 hingga 34.99 cm, dan “merah” untuk jarak 0 hingga 14.99 cm. Sistem pewarnaan ini juga digunakan pada informasi sebelumnya yakni “Status”.
Ketika proses validasi data berhasil maka sistem aplikasi akan mengarahkan pada tampilan tabel yang berisikan daftar perangkat tempat sampah dengan sistem IoT TSP seperti gambar 4.7. Tabel-tabel tersebut memuat informasi TSP mulai dari Identification Number (ID), kode produk, status ketinggian sampah, dan lantai ditempatkannya TSP tersebut. Terdapat fitur penambahan perangkat TSP yang ketika di klik akan meminta data kode produk dan lantai penempatan seperti gambar 4.8.
Gambar 4.8. Tampilan notifikasi hapus TSP versi website
Fitur yang disediakan selanjutnya adalah fitur “Hapus TSP” terdaftar, ketika pengguna melakukan klik tombol “Delete” maka sistem secara otomatis akan mengeluarkan pesan konfirmasi penghapusan TSP yang terpilih seperti gambar 4.8.
Setelah aplikasi TSP versi website selesai dikembangkan, pengembangan selanjutnya yakni pembuatan aplikasi pada versi mobile khususnya pada platform Android, dengan menggunakan Android Studio dan teknik PWA. Pada versi mobile, aplikasi dikembangkan menjadi 3 halaman utama yakni Beranda, TSP yang terdaftar, dan detail dari TSP.
Universitas Pertamina - 43
4.1.2 Pengembangan Aplikasi Berbasis Mobile
Pengembangan aplikasi pada versi mobile dilakukan setelah pengembangan website. Versi mobile dikhususkan pada platform Android dengan menggunakan Android Studio dan teknik PWA. Pada versi mobile, aplikasi dikembangkan menjadi 3 halaman utama yakni Beranda, TSP yang terdaftar, dan detail dari TSP.
Gambar 4.9. Bagian pertama halaman “Beranda” versi mobile
Pada halaman Beranda desain dan pengembangan aplikasi dibagi menjadi 3 bagian. Gambar 4.9 merupakan bagian pertama yang memiliki sebuah banner untuk menjelaskan secara singkat aplikasi TSP dan terdapat tombol yang akan menuju pada daftar TSP.
Universitas Pertamina - 44 Gambar 4.10. Bagian kedua halaman “Beranda” versi mobile
Gambar 4.10 merupakan bagian kedua, merupakan penjelasan secara singkat teknologi yang digunakan dalam pemantauan suatu tempat sampah pada aplikasi TSP, serta terdapat sebuah tombol menuju halaman mengenai informasi pengembangan aplikasi.
Gambar 4.11. Bagian ketiga halaman “Beranda” versi mobile
Gambar 4.11 merupakan bagian ketiga yang menampilkan informasi TSP yang aktif, petugas yang aktif dan bertanggung jawab akan TSP, serta lantai yang terpantau di Universitas Pertamina khususnya gedung Griya Legita.
Universitas Pertamina - 45 Gambar 4.12. Tampilan halaman TSP terdaftar pada versi mobile
Selanjutnya memasuki halaman kedua pada aplikasi merupakan daftar atau list perangkat TSP aktif yang telah terpasang di lingkungan Universitas Pertamina. Gambar 4.12 merupakan salah satu contoh TSP terdaftar yang menampilkan berbagai informasi terkait, berikut penjelasan singkat gambar sebagai berikut:
1. “Kode TSP“ merupakan kode atau penamaan untuk suatu tempat sampah yang telah menggunakan sensor dan telah terdaftar pada aplikasi TSP. Contoh pada gambar yakni “GL5”
2. “Status“ merupakan keterangan kategori ketinggian sampah yang diberikan kepada pengguna. Keterangan akan “status dibagi menjadi 3 bagian berdasarkan jarak antara sampah dengan sensor, yakni:
a. “Low“ dengan kondisi jarak antara sampah dengan sensor dari 35 cm hingga batas ketinggian suatu tempat sampah. Jika menggunakan sampah 30 liter maka batas ketinggiannya adalah 52 cm.
b. “Medium” dengan kondisi jarak 15 hingga 34.99 cm antara sensor dengan sampah. c. “High” dengan kondisi jarak 0 hingga 14.99 cm antara sensor dengan sampah. 3. “Lantai” merupakan informasi posisi suatu TSP ditempatkan pada gedung.
Universitas Pertamina - 46 4. “Info” akan menampilkan kondisi suatu tempat sampah dengan tujuan mempermudah pengguna dalam mengambil aksi dalam pembersihan tempat sampah. Terdapat 3 macam “info” yang akan ditampilkan tergantung jarak antara sensor dengan sampah, yakni:
a. “Tempat Sampah aman digunakan” merupakan informasi yang akan ditampilkan ketika status “low”.
b. “Tempat sampah sedikit lagi penuh” informasi akan ditampilkan ketika status “medium”.
c. “Segera lakukan pembersihan” informasi akan ditampilkan ketika status “high”. 5. Tombol “Detail” akan mengarahkan ke halaman “Detail TSP” pada penjelasan selanjutnya.
Gambar 4.13. Tampilan halaman “Detail TSP“ versi mobile
Setelah memasuki halaman TSP terdaftar atau list TSP, ketika pengguna menekan salah satu tombol “Detail” pada list maka akan merujuk pada halaman “detail TSP” yang direpresentasikan pada gambar 4.13., selain informasi baru dapat dilihat bahwa beberapa informasi pada halaman “list TSP” ditampilkan juga pada halaman ini. Berikut beberapa informasi baru yang diberikan, yakni:
Universitas Pertamina - 47 1 .“Jarak Tersisa” merupakan informasi yang menampilkan jarak antara sensor pengukur ketinggian dengan sampah, sehingga pihak pengguna dapat mengetahui penggunaan optimal suatu tempat sampah. Terdapat perbedaan warna yang diberikan pada kondisi jarak tertentu diantaranya warna “hijau“ untuk jarak 35 cm hingga batas ketinggian maksimum tempat sampah, “biru” untuk jarak 15 hingga 34.99 cm, dan “merah” untuk jarak 0 hingga 14.99 cm. Penggunaan warna ini juga diaplikasikan pada informasi yang telah dibahas sebelumnya yakni “Status” dan “Info”.
2 “Terakhir Diperbaharui” menampilkan informasi waktu baik tahun, bulan, tanggal, dan jam suatu TSP melakukan update data ketinggian sampah terbaru.
Terakhir terdapat tombol “back” yang akan mengarahkan kembali ke halaman list TSP. 4.2 Pengembangan TSP
Tahap pengembangan TSP dimulai dari merangkai alat deteksi ketinggian dengan sensor ultrasonik (HC-SR04) dan mikrokontroler (ESP32). Proses rangkai mengikuti rancangan awal pada sub bab 3.5. Gambar 4.14 merupakan hasil rangkaian alat deteksi ketinggian pada TSP. Perangkat deteksi ketinggian tersebut memiliki mikrokontroler ESP32, merupakan sebuah chip yang berfungsi sebagai pengontrol rangkaian elektronik yang dibekali dengan perangkat WiFi dan bluetooth di dalamnya. Serta, sensor HC-SR4 merupakan alat deteksi jarak dengan cara memantulkan dan menerima gelombang ultrasonik. Data berupa jarak yang dimiliki sensor HC-SR4 dihubungkan ke mikrokontroler ESP32 dengan kabel jumper male-to-male dan Breadboard MB102 Protoboard 830 titik. Perangkat deteksi ketinggian juga dilengkapi dengan powerbank sebagai daya guna menjalankan fungsinya yang telah diprogramkan sebelumnya.
Universitas Pertamina - 48 Perangkat ini nantinya akan ditempelkan pada permukaan atas tempat sampah yang diharapkan dapat mengirim data ketinggian, hasil dari pantulan sensor ultrasonik. Data tersebut dikirim melalui jaringan internet, diproses, dan ditampilkan pada aplikasi. Gambar 4.15 hasil dari perancangan dan pengembangan perangkat TSP.
Gambar 4.15. Contoh perangkat TSP
Dibutuhkan sebuah instruksi program yang dibuat melalui software Arduino IDE untuk menerima ketinggian sampah. Program dirancang menggunakan protokol MQTT dengan metode publisher dan subscriber. Dalam implementasi perancangan TSP, publisher merupakan sensor ultrasonik HC-SR4 yang mengirimkan data ketinggian dan subscriber yakni aplikasi TSP yang menerima data dan menampilkannya. Proses dari pengiriman data melalui metode tersebut menggunakan perantara bernama broker, berfungsi menerima data-data yang telah di publish oleh suatu device dan meneruskannya pada subscriber yang telah berlangganan pada topik yang ditentukan. Broker dalam implementasi ini menggunakan program PHP dan database MySQL yang dirancang agar dapat mengirim topik, yakni data jarak ultrasonik antara sensor dengan sampah.
Universitas Pertamina - 49 Gambar 4.16. Data jarak pada serial monitor software Arduino IDE