4.2 Implementasi
4.2.1 Implementasi Rancangan Tampilan Antarmuka
Implementasi rancangan tampilan antarmuka pada aplikasi diambil menggunakan emulator android yang tersedia pada Android Studio. Berikut beberapa tampilan yang tersedia pada aplikasi ez-Nav.
A. Tampilan Antarmuka Halaman Splash Screen
Tampilan antarmuka diawali dengan Halaman Splash Screen, ketika user mengakses aplikasi seperti yang ditunjukkan Gambar 4.1.
Gambar 4.1 Tampilan Halaman Splash Screen
Gambar 4.1 menunjukkan logo dari aplikasi dan dijalankan thread selama 3 detik untuk menahan halaman ini sampai berpindah ke Halaman Login.
B. Tampilan Antarmuka Halaman Login
Setelah Tampilan Halaman Splash Screen menghilang akan muncul tampilan Halaman Login seperti yang ditunjukkan pada Gambar 4.2.
Gambar 4.2 Tampilan Halaman Login
User yang sudah memiliki akun akan dapat melakukan proses login dengan memasukkan email, dan password pada kolomnya masing masing kemudian dengan menekan tombol login. User akan dapat berhasil melakukan login jika password dan email terdaftar dan cocok. Di halaman ini juga terdapat TextView yang bertuliskan “Register Here” yang digunakan untuk berpindah ke Halaman Register.
C. Tampilan Antarmuka Halaman Register
Setelah TextView “Register Here” ditekan maka akan berpindah ke Halaman Register seperti yang ditunjukkan pada Gambar 4.3.
Gambar 4.3 Tampilan Halaman Register
User yang belum memiliki akun harus mendaftarkan diri pada halaman ini jika ingin menggunakan aplikasi ez-Nav. Pada Gambar 4.3 disediakan beberapa EditText seperti username, password, dan email sebagai data diri user untuk mendaftarkan akunnya. Di halaman ini juga tersedia TextView yang bertuliskan “Login Here” untuk kembali ke Halaman Login.
D. Tampilan Antarmuka Halaman Main Menu
Setelah user berhasil melakukan proses login, user akan dipindahkan ke Halaman Main Menu seperti ditunjukkan pada Gambar 4.4.
Gambar 4.4 Tampilan Halaman Main Menu
Gambar 4.4 menunjukkan bahwa terdapat enam tombol pada Halaman Main Menu. Tombol-tombol tersebut mengarahkan ke halaman yang berbeda-beda seperti tombol Profile untuk berpindah ke Halaman Profile, tombol List untuk berpindah ke Halaman List Delivery, tombol Maps untuk berpindah ke Halaman Maps, tombol History untuk berpindah ke Halaman History, tombol About untuk berpindah ke Halaman About, dan terakhir tombol Logout untuk user keluar dari akunnya dan berpindah ke Halaman Login.
E. Tampilan Antarmuka Halaman Profile
Setelah user menekan tombol Profile pada Halaman Main Menu maka akan masuk ke dalam tampilan Halaman Profile seperti ditunjukkan pada Gambar 4.5.
Gambar 4.5 Tampilan Halaman Profile
Gambar 4.5 menunjukkan bahwa terdapat beberapa EditText yang menunjukkan data diri user. Pada halaman ini user juga dapat mengubah data user seperti nama, email, password. User juga dapat mengganti profile picture sesuai yang user inginkan. Dengan menekan tombol upload maka user akan dapat mengambil foto dari Galery device Android user. Pada halaman ini juga terdapat tombol Back untuk kembali ke halaman Main Menu.
F. Tampilan Antarmuka Halaman List Delivery
Setelah user menekan tombol List pada Halaman Main Menu maka user akan masuk ke Halaman List Delivery seperti ditunjukkan pada Gambar 4.6.
Gambar 4.6 Tampilan Halaman List Delivery
Gambar 4.6 menunjukkan bahwa user dapat melihat list pengiriman yang user akan cari rutenya. Di setiap list terdapat tombol detail yang fungsinya berpindah ke halaman Delivery Detail untuk melihat detail pengiriman dan dapat mengubah data pengiriman. Di setiap list juga terdapat tombol delete yang berfungsi untuk menghapus data pengiriman dari list.
G. Tampilan Antarmuka Halaman List Delivery Detail
Setelah user menekan tombol detail pada Halaman List Delivery maka user akan masuk ke Halaman List Delivery Detail seperti ditunjukkan pada Gambar 4.7.
Gambar 4.7 Tampilan Halaman List Delivery Detail
Gambar 4.7 menunjukkan bahwa user dapat melihat detail pengiriman sekaligus dapat mengubahnya. Untuk mengubah data pengiriman user harus mengisi field nama, latitude, longitude, address, sending date, dan status pengiriman kemudian menekan tombol update. Pada halaman ini juga tersedia tombol back untuk kembali ke Halaman List Delivery.
H. Tampilan Antarmuka Halaman Maps
Setelah user menekan tombol Maps pada Halaman Main Menu maka user akan masuk ke Halaman List Delivery seperti ditunjukkan pada Gambar 4.8.
Gambar 4.8 Tampilan Halaman Maps
Pada Gambar 4.8 terdapat EditText yang menggunakan Autocomplete dari Google Maps API untuk mencari lokasi dan menekan tombol add untuk berpindah ke Halaman Add Delivery dan menambahkannya ke dalam data pengiriman. Pada halaman ini juga terdapat dua buah spinner yang berisi list nama dari data pengiriman yang mana akan dijadikan source dan destination dalam pencarian rute. Pencarian rute dapat dilakukan dengan menekan tombol Find Path yang kemudian akan mencarikan jalur terpendek dan mengembalikan output berupa waktu, dan jarak, serta jalur yang direpresentasikan melalui Maps Fragment. Pada Halaman ini juga terdapat 2 tombol yaitu “ABC Round Trip” dan “ABC A-Z Trip” yang berfungsi mencari jalur terpendek menggunakan algoritma Artificial Bee Colony baik rute A-Z Trip maupun rute Round Trip yang menghasilkan output jarak, waktu, dan jalur yang direpresentasikan pada Maps Fragment.
I. Tampilan Antarmuka Halaman Add Delivery
Setelah user menekan tombol add pada Halaman Maps maka user akan masuk ke Halaman Add Delivery seperti ditunjukkan pada Gambar 4.9.
Gambar 4.9 Tampilan Halaman Add Delivery
Gambar 4.9 menunjukkan bahwa ketika user melakukan pencarian lokasi menggunakan Autocomplete pada Google Maps API dan berpindah ke Halaman Add Delivery user membawa data alamat, latitude, dan longitude namun data tersebut belum tersimpan ke database. Ketika ingin menyimpan data tersebut ke database, user harus mengisi field nama, latitude (tidak bisa diubah karena posisi lokasi pada maps), longitude (tidak bisa diubah karena posisi lokasi pada maps), alamat (sudah didapatkan dari Google Autocomplete API namun masih bisa diubah), sending date, dan status pengiriman serta menekan tombol save. Pada halaman ini juga tersedia tombol back untuk kembali ke Halaman Maps.
J. Tampilan Antarmuka Halaman History
Setelah user menekan tombol History maka user akan masuk ke Halaman History seperti ditunjukkan pada Gambar 4.10.
Gambar 4.10 Tampilan Halaman History
Gambar 4.10 menunjukkan bahwa user dapat melihat list pengiriman yang sudah berstatus “delivered”. Sama seperti Halaman List Delivery di setiap list pengiriman juga terdapat tombol detail yang akan berpindah ke Halaman History Detail untuk melihat detail dan mengubah data pengiriman, dan tombol delete untuk menghapus data pengiriman.
K. Tampilan Antarmuka Halaman History Detail
Setelah user menekan tombol detail pada Halaman History maka user akan masuk ke Halaman History seperti ditunjukkan pada Gambar 4.11.
Gambar 4.11 Tampilan Halaman History Detail
Pada Gambar 4.11 sama seperti Halaman List Detail Delivery hanya saja berbeda pada status pengiriman. Pada halaman ini ditunjukkan bahwa user dapat melihat detail pengiriman sekaligus dapat mengubahnya. Untuk mengubah data pengiriman user harus mengisi field nama, latitude, longitude, address, sending date, dan status pengiriman kemudian menekan tombol update. Pada halaman ini juga tersedia tombol back untuk kembali ke Halaman History.
L. Tampilan Antarmuka Halaman About
Setelah user menekan tombol About pada Halaman Main Menu maka user akan masuk ke Halaman List Delivery seperti ditunjukkan pada Gambar 4.12.
Gambar 4.12 Tampilan Halaman About
Gambar 4.12 menunjukkan bahwa pada halaman ini terdapat data diri penulis sekaligus developer aplikasi. Pada halaman ini juga tercantum credit untuk Google API