3.2 Perancangan Aplikasi
3.2.5. Perancangan User Interface
Aplikasi yang dibuat memiliki desain antarmuka atau mockup yang dibuat menggunakan Balsamiq Mockups 3.5.8. Desain antarmuka yang dibuat berupa frontend untuk user yang berbentuk android.
Gambar 3.24 User Interface Splash Screen
Gambar 3.24 menunjukkan user interface untuk halaman splash screen. Pada bagian tengah terdapat logo yang berisi gambar logo dan nama aplikasi. Pada halaman ini akan memiliki thread untuk menunggu dan secara otomatis berpindah ke halaman Login.
Gambar 3.25 menunjukkan halaman Login. Pada halaman Login terdapat logo aplikasi, kolom untuk email, kolom untuk password, button untuk sign in, dan Textview untuk berpindah ke halaman register. Pada halaman ini untuk melakukan login, user harus memasukkan email dan password yang sudah terdaftar pada database.
Gambar 3.26 User Interface Register
Pada Gambar 3.26 menunjukkan halaman Register. Pada halaman Register terdapat logo aplikasi, kolom untuk nama, kolom untuk email, kolom untuk password, kolom untuk repassword, button untuk Sign Up, dan button untuk kembali ke halaman Login. Pada halaman ini untuk melakukan registrasi user harus memasukkan nama, email, password, dan repassword. Jika data yang diisi valid dan password sama dengan repassword, data akan disimpan ke dalam database dan beralih ke halaman Login.
Gambar 3.27 User Interface Main Menu
Setelah berhasil sign in, user akan berpindah ke halaman Main Menu seperti terlihat pada Gambar 3.27. Pada halaman ini terdapat enam buah button yaitu profile, list, maps, history, about, dan sign out user. Setiap button pada halaman ini akan berpindah ke masing-masing halaman yang terhubung.
Setelah memilih button Profile pada halaman Main Menu user akan masuk ke halaman Profile seperti pada Gambar 3.28. Pada halaman ini user dapat mengubah data dirinya. Pada halaman ini terdapat kolom nama, email, password, repassword, phone, dan image yang mana harus diisi semua untuk melakukan update kecuali kolom phone boleh dikosongkan. Pada halaman ini terdapat profile picture, dan image yang baru dimasukkan untuk mengganti profile picture. Pada halaman ini juga memiliki tiga buah button yaitu button upload untuk mengambil foto dalam device android, button update untuk update profile, dan button back untuk kembali ke halaman Main Menu.
Gambar 3.29 User Interface List Delivery
Setelah memilih button List pada halaman Main Menu, user akan masuk ke halaman List Delivery seperti terlihat pada Gambar 3.29. Pada halaman ini terlihat logo aplikasi, dan list yang berisikan nama dan alamat pada list. Pada setiap list terdapat dua buah button yaitu detail dan delete. Jika button detail dipilih user akan
masuk ke halaman Delivery Detail, dan jika button delete ditekan maka user akan menghapus data sesuai id dari list yang dipilih.
Gambar 3.30 User Interface Delivery Detail
Gambar 3.30 merupakan tampilan dari halaman Delivery Detail. Di sini user dapat melihat detail pengiriman dan dapat mengubahnya. Pada halaman ini terdapat kolom nama, latitude, longitude, address, tanggal pengiriman, dan status. Pada halaman ini juga terdapat dua buah button yaitu button update untuk melakukan update data pengiriman dan button back untuk kembali ke halaman List Delivery.
Gambar 3.31 User Interface Maps
Setelah user menekan tombol maps pada halaman Main Menu, user akan masuk ke halaman Maps seperti terlihat pada Gambar 3.31. Pada halaman ini user dapat mencari alamat dan menambahkannya ke dalam tabel delivery dan delivery status dengan menekan tombol add. Terdapat tiga buah tombol yaitu find path berguna untuk mencari jalur atau rute dengan masukan input berupa spinner dari source dan destination, tombol find path without input round trip untuk mencari jalur tercepat secara round trip dengan algoritma Artificial Bee Colony, dan tombol find path without input A-Z trip untuk mencari jalur dari A ke Z menggunakan Artificial Bee Colony.
Gambar 3.32 User Interface Add Delivery
Gambar 3.32 merupakan tampilan dari halaman Add Delivery. Di sini user dapat menambah data pengiriman. Pada halaman ini sama seperti halaman Delivery Detail hanya saja fungsinya berbeda yaitu untuk menambahkan. Pada halaman ini juga terdapat kolom nama, latitude, longitude, address, tanggal pengiriman, dan status. Pada halaman ini juga terdapat dua buah button yaitu button add untuk melakukan insert data pengiriman dan button back untuk kembali ke halaman Maps.
Gambar 3.33 User Interface List Delivery History
Setelah memilih button History pada halaman Main Menu, user akan masuk ke halaman List Delivery History seperti terlihat pada Gambar 3.33. Pada halaman ini sama seperti halaman List Delivery hanya saja berbeda pada data status yaitu list yang masuk di sini merupakan list dengan status yang sudah selesai diantarkan. Pada halaman ini juga terlihat logo aplikasi, dan list yang berisikan nama dan alamat pada list. Pada setiap list terdapat dua buah button yaitu detail dan delete. Jika button detail dipilih user akan masuk ke halaman Delivery Detail, dan jika button delete ditekan maka user akan menghapus sesuai id dari list yang dipilih.
Gambar 3.34 User Interface Delivery History Detail
Gambar 3.34 merupakan tampilan dari halaman Delivery History Detail. Di sini user dapat melihat detail pengiriman dan dapat mengubahnya. Pada halaman ini sama seperti halaman Delivery Detail hanya saja berbeda pada data status yaitu detail yang masuk di sini merupakan detail dengan status yang sudah selesai diantarkan. Pada halaman ini juga terdapat kolom nama, latitude, longitude, address, tanggal pengiriman, dan status. Pada halaman ini juga terdapat dua buah button yaitu button update untuk melakukan update data pengiriman dan button back untuk kembali ke halaman List Delivery.
Gambar 3.35 User Interface About
Gambar 3.35 merupakan tampilan dari halaman About. Di sini user dapat melihat informasi tentang aplikasi dan developer. Pada halaman ini terdapat logo aplikasi, foto developer, dan keterangan tentang aplikasi dan developer serta terdapat tombol back untuk kembali ke halaman Main Menu.
BAB IV
IMPLEMENTASI DAN UJI COBA