Instalasi Aplikasi Berikut ini merupakan langkah – langkah proses

1
Instalasi Aplikasi
Berikut ini merupakan langkah – langkah proses instalasi aplikasi untuk
pengguna dan website untuk back end :
Instalasi Aplikasi Pada Perangkat Mobile
Berikut ini merupakan langkah – langkah untuk melakukan
instalasi aplikasi pada perangkat mobile berbasis android :
a. Perangkat mobile dihubungkan dengan computer melalui kabel USB
b. File Nomnomfood.apk disalin ke dalam folder yang terdapat didalam
perangkat mobile
c. Hentikan hubungan perangkat mobile dengan komputer melalui kabel
USB
d. Buka file Nomnomfood.apk yang telah di salin untuk melakukan
penginstallan.
2
e. Akan muncul notifikasi permission, tekan all untuk melihat jenis
permission yang di butuhkan untuk menginstall Nomnomfood,
kemudian pilih Install
Gambar 4.1 Tampilan Instalasi Aplikasi Nomnomfood
3
f. InstallNomnomfood.apk
Gambar 4.2 Tampilan Proses Instalasi Aplikasi Nomnomfood
4
g. Ketika proses install telah selesai, pilih open untuk membuka
aplikasi langsung, atau pilih done untuk keluar dari proses instalasi
Gambar 4.3 Tampilan Instalasi Aplikasi Nomnomfood Telah Selesai
h. Aplikasi Nomnomfood sudah dapat digunakan
Instalasi Website Pengguna (Aplikasi Back end)
Berikut ini merupakan langkah – langkah untuk mengakses
website untuk pengguna:
a. Instal web browser yang disarankan, Google Chrome atau Mozilla
Firefox
b. Jalankan web browser
c. Akses alamat URLhttp://www.nomnomfood.web.id
5
Prosedur Operasional
Prosedur Operasional Front End
1. Ketika aplikasi pertama kali di jalankan maka akan muncul
layar seperti di bawah ini:
Gambar 4.4 Tampilan SplashAwal dari Aplikasi Nomnomfood
Pada gambar di atas, di tampilkan layar splash dari aplikasi
Nomnomfood, tampilan layar ini akan bertahan selama dua
detik lalu akan pindah ke tampilan halaman berikutnya.
6
2. Setelah layar splashtadi maka akan di tampilkan tampilan
layar seperti di bawah ini:
Gambar 4.5 Tampilan Homedari Aplikasi Nomnomfood
Pada gambar di atas, adalah tampilan layar dari home aplikasi
Nomnomfood yang disediakan 3 menu tombol menu untuk
digunakan oleh pengguna. Tombol yang tersedia adalah
tombol Help, Show nearest Restaurant, dan tombol Search.
7
3. Dari tampilan layar home, apabila pengguna memilih menu
tombol Help, maka akan ditampilkan tampilan layar seperti di
bawah ini:
Gambar 4.6 Tampilan FAQ dari Aplikasi Nomnomfood
Pada gambar di atas adalah tampilan layar dari menu tombol
Help yang berisikan pertanyaan umum beserta jawaban yang
dapat di baca pengguna untuk mendapatkan gambaran dasar
penggunaan aplikasi Nomnomfood secara umum,tampilan
layar juga dapat di scroll untuk memudahkan pengguna.
8
4. Dari tampilan layar home apabila pengguna memilih tombol
menu Search nearest restaurant maka akan ditampilkan
tampilan layar seperti di bawah ini:
Gambar 4.7 Tampilan ListTempat Makan Terdekat
Pada tampilan layar di atas, di tampilkan lokasi rumah makan
terdekat
yang
berada
di
sekitar
posisi
pengguna.
Menggunakan fitur internet dan GPS dari perangkat android
pengguna, aplikasi akan menentukan letak posisi rumah
makan terdekat yang dapat di kunjungi oleh pengguna dalam
pencarian rumah makan terdekat, setiap daftar list rumah
makan dapat di pilih untuk menampilkan informasi lebih
9
mendetail atau memilih menu tombol Show Places on Map
untuk menampilkan lokasi secara visual di Google Maps.
5. Dari tampilan layar Show nearest restaurant, ketika pengguna
memilih tombol menu Show Places on Map, makan akan di
tampilkan tampilan layar seperti di bawah ini:
Gambar 4.8 Tampilan Peta dari Tempat Makan Terdekat
Pada tampilan layar di atas, di tampilkan peta visual dari
Google Maps yang akan menunjukkan lokasi dari pengguna
sekarang yang di tandai dengan titik berwarna merah, serta
lokasi rumah makan terdekat dari pengguna yang di tandai
dengan titik berwarna biru. Ketika titik berwarna biru di pilih,
10
akan menampilkan nama rumah makan serta alamat dari
rumah makan tersebut. Peta juga dapat di besarkan skala
tampilannya dengan cara mencubit layar / pinch to zoom atau
menggunakan menu tombol pilihan di sebelah kiri untuk
memperkecil skala peta, atau menu tombol pilihan di sebelah
kanan untuk memperbesar skala peta.
6. Dari tampilan layar Show nearest restaurant ketika pengguna
memilih salah satu nama rumah makan dari list yang di
tampilkan , maka akan di tampilkan tampilan layar seperti di
bawah ini:
Gambar 4.9 Tampilan Informasi Umum Tempat Makan Terdekat
11
Pada tampilan layar di atas, ditampilkan Detail dasar dari
rumah makan yang di pilih oleh pengguna, yang menampilkan
nama rumah makan, alamat, nomor telepon jika ada, serta
posisi latitude dan longitude dari rumah makan tersebut. Di
sediakan juga menu tombol pilihan Show more detail untuk
menampilkan detail dari rumah makan tersebut jika sudah
terdaftar dalam database Nomnomfood untuk menampilkan
detail lebih lanjut, seperti menu makanan, daftar harga.
12
7. Dari tampilan layar Home¸ ketika pengguna memilih tombol
menu pilihan search, maka akan ditampilkan tampilan layar
seperti berikut:
Gambar 4.10 Tampilan Pencarian Tempat Makan Melalui Proses
Penyaringan Khusus
Pada tampilan layar di atas, pengguna dapat menentukan jenis
filterisasi
yang di inginkan pengguna.Pengguna dapat
menentukan makanan berdasarkan tipe makanan, harga
makanan, serta jenis rasa makanan. Disediakan juga opsi
pencarian rumah makan berdasarkan nama dari rumah makan,
untuk memudahkan pengguna. Pada sisi bawah tampilan
layar, disediakan dua menu tombol, tombol accept untuk
13
melakukan pencarian berdasarkan tiga jenis menu filterisasi
pengguna,serta tombol home untuk kembali ke menu home
awal aplikasi Nomnomfood.
8. Dari tampilan layar Search ketika pengguna memilih tombol
menu accept atau search dari menu opsi pilihan kedua, maka
akan di tampilkan tampilan layar restaurant’s list seperti di
bawah ini:
Gambar 4.11 Tampilan List TempatMakan Sesuai Hasil Penyaringan
Pada tampilan layar di atas, di tampilkan list dari rumah
makan berdasarkan pilihan filterisasi yang di tentukan oleh
pengguna, akan di tampilkan nama rumah makan serta alamat
14
dari rumah makan tersebut. Tiap anggota list rumah makan
dapat di pilih untuk menampilkan detail lebih lanjut dari
rumah makan tersebut.
9. Dari tampilanlayar restaurant list, ketika anggota list di pilih,
maka akan menampilkan tampilan layar seperti di bawah ini:
Gambar 4.12 Tampilan Detail Restaurant Lengkap
Pada tampilan layar di atas, ditampilkan detail dari rumah
makan yang telah di pilih pengguna, yang berisi informasi
rumah makan seperti nama rumah makan, alamat rumah
makan, dan deskripsi singkat dari rumah makan tersebut. Di
bagian bawah terdapat tombol menu yang terdiri dari “Show
on map”yang berguna untuk menunjukkan lokasi rumah
15
makan pada peta google maps, “show menu” yang berguna
untuk menunjukkan menu yang tersedia dari rumah makan,
“Add review” yang berguna untuk menambahkan review untuk
rumah makan yang di pilih
serta “Show reviews” yang
berguna untuk memperlihatkan review yang telah di terima
rumah makan yang telah dipilih.
10. Dari tampilan layar detail rumah makan ketika pengguna
meneka tombol menu Show on map maka akan ditampilkan
tampilan layar seperti di bawah ini:
Gambar 4.13 Tampilan Peta Lokasi Tempat Makan
16
Tampilan
layar
tersebut
adalah
tampilan
layar
yang
ditampilkan jika pengguna menekan tombol menu show on
map yang akan menampilkan posisi rumah makan berada di
google maps.
11. Dari tampilan layar detail rumah makan, jika pengguna
menekan tombol menu Show menu maka akan di tampilkan
tampilan layar seperti di bawah ini.
Gambar 4.14 Tampilan List Menu Makanan
Pada tampilan layar di atas, akan di tampilkan listdaftar menu
makanan yang ada pada rumah makany yang di pilih, dengan
keterangan nama makanan, serta harga makanan, pengguna
17
dapat menekan salah satu dari list makanan yang di tampilkan
untuk melihat lebih lanjut informasi makanan yang di
inginkan.
12. Dari tampilan list makanan yang terdapat pada rumah makan
yang di pilih, jika pengguna memilih salah satu dari daftar list
makanan, maka akan di tampilkan tampilan layar seperti di
bawah ini:
Gambar 4.15 Tampilan Detail Menu Makanan
Pada tampilan layar di atas, di tampilkan info detail dari
makanan yang di pilih pengguna dari daftar list makanan
yang tersedia pada tampilan layar sebelumnya. Pada tampilan
18
layar ini terdapat informasi berupa foto makanan, nama
makanan, harga makanan, serta penjelasan singkat makanan.
13. Dari tampilan layar detail rumah makan yang telah di pilih,
jika pengguna menekan tombol menu add review , maka akan
di tampilkan tampilan layar seperti di bawah ini:
Gambar 4.16 Tampilan Add Review Tempat Makan
Pada tampilan layar di atas, pengguna dapat memasukkan
informasi data diri berupa nama pengguna serta komentar
untuk di masukkan ke dalam database aplikasi Nomnomfood
yang bertujuan untuk memberikan review dari rumah makan
yang di pilih.
19
14. Dari tampilan layar Detail rumah makan yang di pilih, jika
pengguna menekan tombol Show reviews, maka akan di
tampilkan tampilan layar seperti di bawah ini:
Gambar 4.17 Tampilan List Review Tempat Makan
Pada tampilan layar di atas, ditampilkan review dari para
pengguna terhadap rumah makan yang sedang dipilih, yang
menampilkan nama pengguna, isi komentar pengguna
terhadap rumah makan yang di pilih, serta tanggal pengguna
memasukkan review.
20
Prosedur Operasional Back End
1. Ketika pengguna membuka website aplikasi Nomnomfood
lewat alamat URL www.nomnomfood.web.id maka tampilan
yang akan muncul pertama kali ialah sebagai berikut:
Gambar 4.18 Tampilan Paling Awal Untuk Login
Pada halaman awal tersebut terdapat beberapa tindakan yang
dapat dilakukan, selain tentunya Login bagi pengguna yang
telah memiliki akun. Pengguna bisa masuk ke halaman
registrasi jika belum memiliki akun. Pada halaman form
registrasi ini pengguna diharuskan untuk mengisi seluruh
informasi dengan lengkap dan benar. Jika tidak dilakukan
maka akan terdapat peringatan yang memberikan penanganan
dari masalah yang terjadi.
21
Gambar 4.19 Tampilan Untuk Registrasi Akun Website
Nomnomfood
2.
Setelah berhasil melakukan proses registrasi, pengguna akan
diarahkan untuk melakukan pembayaran biaya tahunan
terlebih
dahulu
melalui
nomor
rekening
yang
telah
diinformasikan. Tahap selanjutnya ialah pengguna melakukan
konfirmasi pembayaran yang telah dibayarkan sebelumnya.
Dalam halaman ini pengguna diharuskan untuk mengisi email
yang sama dengan email pada saat registrasi. Agar emailnya
dapat diaktivasi oleh admin website Nomnomfood.
22
Gambar 4.20 Tampilan Untuk Konfirmasi Pembayaran
3. Proses
berikutnya
pengguna
akan
menunggu
admin
melakukan approval lalu mendapatkan email yang dikirim
secara manual untuk memberikan informasi bahwa akunnya
sudah aktif dan bisa melakukan proses Login. Diasumsikan
bahwa admin telah melakukan aktivasi akun, sehingga
pengguna bisa melakukan Login. Berikut tampilan setelah
pengguna berhasil Login:
23
Gambar 4.21 Tampilan Awal Setelah Pengguna Login Sebagai Client
4. Dalam tampilan awal setelah login banyak terdapat tombol
yang bisa dipilih. Tindakan pertama yang dapat dilakukan
ialah melakukan input tempat makan. Pengguna hanya perlu
memilih tombol Input Restaurants yang terdapat ditengah
sebelah kiri dan berikutnya akan tampil halaman berikut:
24
Gambar 4.22 Tampilan Untuk Client Input Tempat Makan
Sama seperti form registrasi, pada halaman ini client perlu
mengisi segala informasi dengan rinci seputar tempat makan
miliknya.
Yang
perlu
diperhatikan
pengguna
harus
mengunggah gambar logo tempat makannya sesuai aturan
yang diberikan, yaitu format gambar JPEG atau PNG, lalu
ukuran gambar maksimum hanya 600KB. Selain itu terdapat
sebuah peta yang digunakan bagi client untuk menentukan
posisi tempat makan. Dengan cara drag icon berwarna merah
ke lokasi yang dituju. Client dapat melakukan zoom in dan
25
zoom out dalam peta tersebut untuk membantu menentukan
tempat yang diinginkan.
5. Setelah proses input berhasil dilakukan proses selanjutnya
adalah input menu. Proses memasukkan menu ini terdiri dari 2
tahapan. Yang pertama informasi umum mengenai umum
dimasukkan terlebih dahulu, sesuai yang terdapat pada gambar
dibawah ini:
Gambar 4.23 Tampilan Untuk Client Melakukan Input Menu
Makanan
Sama halnya dengan form sebelumnya, terdapat validasi yang
mengharuskan client memasukkan data dengan lengkap dan
benar. Setelah berhasil memasukkan informasi umum seputar
menu seperti nama, gambar, tipe makanan, dan rasa makanan.
Berikutnya client perlu masuk ke form selanjutnya, yang
26
berguna untuk menentukan menu tersebut dimasukkan ke
tempat makan apa, lalu dengan harga berapa. Dengan asumsi
client memiliki lebih dari satu tempat makan dan harga menu
makanan di setiap tempat makan berbeda walau nama
menunya sama persis. Berikut tampilan untuk memasukkan
menu bagian kedua:
Gambar 4.24 Tampilan Lanjutan Untuk Client Input Menu
6. Selesai proses memasukkan tempat makan dan menu, dari
navigasi yang terdapat dalam website, client dapat langsung
melompat ke halaman lain. Salah satunya adalah halaman edit
profile. Halaman ini digunakan untuk melihat informasi rinci
tentang client sekaligus juga digunakan untuk merubah
informasi milik client. Seperti yang ada pada gambar dibawah
ini:
27
Gambar 4.25 Tampilan Untuk Client Merubah Informasi Akun
7. Setelah proses memasukkan tempat makan dan menu, client
bisa melihat tempat makan dan menu tersebut melalui
halaman Your Restaurants dan Your Menus. Pada halaman
Your Restaurants tampilannya seperti dibawah ini:
Gambar 4.26 Tampilan List Tempat – tempat Makan Milik Client
28
Pada halaman diatas terdapat list tempat makan apa saja
beserta alamatnya yang sudah dimasukkan oleh client.
Tindakan yang dapat dilakukan dari setiap tempat makan ialah
melihat lebih rinci informasi tempat makan dengan menekan
tombol Detail, merubah isi informasi dari tempat makan
dengan menekan tombol Edit, dan menghapus tempat makan
dengan menekan tombolDelete.Selain itu juga terdapat
shortcut bagi client untuk memasukkan tempat makan baru
dengan menekan tombol Add Restaurant.
Berikutnya jika client memilih tombol Your Menus, maka
tampilan yang akan muncul ialah sebagai berikut:
29
Gambar 4.27 Tampilan List Menu – menu Makanan Milik Client
Pada halaman ini bedanya dengan Detail Restaurant informasi
menu yang terdapat dalam halaman ini tersaji lengkap tanpa
harus menekan tombol Detail seperti pada halaman tempat
makan. Ada gambar makanan, nama menu, tipe makanan, dan
juga rasa dari makanan tersebut. Tombol lain yang digunakan
ialah merubah isi informasi dari menu makanan dengan
30
menekan tombol Edit, dan menghapus menu makanan dengan
menekan tombol Delete. Selain itu juga terdapat shortcut bagi
client untuk memasukkan menu makanan baru dengan
menekan tombol Add Menu.
8. Kembali ke list tempat makan milik client, tampilan yang
akan terlihat apabila tombol Detail ditekan ialah sebagai
berikut:
Gambar 4.28 Tampilan Informasi Rinci Tempat Makan Beserta
Menu
31
Terdapat informasi lengkap dari tempat makan beserta peta
yang didalamnya terdapat icon berwarna hijau
yang
menandakan posisi tempat makan. Dibawahnya terdapat
seluruh menu yang sudah dimasukkan kedalam tempat makan
tersebut. Menu tersebut ditampilkan berbentuk list yang di tiap
menunya dapat dilakukan edit dan delete jika memang
diperlukan oleh client.
9.
Halaman yang akan terlihat berikutnya jika client menekan
tombol Edit pada Detail Restaurant berbentuk list. Akan
terlihat form seperti input restaurant tetapi didalamnya sudah
terdapat data yang ada dalam database sebelumnya. Yang
dapat dilakukan client ialah merubah informasi tempat makan
yang diinginkan. Cukup menghapus data yang sudah ada
sebelumnya lalu mengisi kembali sesuai dengan informasi
terbaru. Untuk titik koordinat peta, client hanya perlu
menggeser icon berwarna merah untuk mendapatkan titik
koordinat terbaru. Seperti yang terlihat pada gambar dibawah
ini:
32
Gambar 4.29 Tampilan Untuk Client Merubah Informasi Tempat
Makan
10. Halaman yang akan terlihat berikutnya jika client menekan
tombol Edit pada Detail Menu berbentuk list. Akan terlihat
form seperti input menu tetapi didalamnya sudah terdapat data
yang ada dalam database sebelumnya. Yang dapat dilakukan
client ialah merubah informasi tempat makan yang diinginkan.
Cukup menghapus data yang sudah ada sebelumnya lalu
mengisi kembali sesuai dengan informasi terbaru. Seperti
yang terlihat pada gambar dibawah ini:
33
Gambar 4.30 Tampilan Untuk Client Merubah Informasi Menu
Makanan
11. Selanjutnya apabila client menekan tombol update pada
bagian menu halaman tampilan informasi rinci dari tempat
makan, maka yang terlihat adalah tampilan seperti dibawah
ini:
Gambar 4.31 Tampilan Untuk Client Merubah Harga Menu
34
Akan terlihat form seperti input price’s menu tetapi
didalamnya sudah terdapat data yang ada dalam database
sebelumnya. Yang dapat dilakukan client ialah merubah
informasi harga menu makanan yang diinginkan.Cukup
mengganti listbox tempat makan yang terbaru beserta harga
jika memang ada perubahan.
12. Tampilan berikutnya digunakan bagi client yang ingin
mengetahui orang yang bekerja dibalik aplikasi Nomnomfood.
Berguna sebagai informasi tambahan seputar developer
sekaligus perkenalan diri kepada client. Berikut tampilannya:
Gambar 4.32 Tampilan Informasi Tambahan Tentang Developer
Aplikasi
35
13. Tampilan berikutnya digunakan bagi client untuk mengetahui
cara untuk menghubungi developer aplikasi Nomnomfood.
Tersedia alamat email masing – masing developer dan juga
nomor telepon untuk kondisi yang lebih urgent. Berikut
tampilannya:
Gambar 4.33 Tampilan Informasi Untuk Menghubungi Developer
14. Selesai dengan aktivitas yang dapat dilakukan oleh pengguna
jika login sebagai client. Berikutnya jika ingin keluar cukup
menekan tombol Logout, dan seketika tampilan akan berubah
menjadi tampilan awal yaitu halaman Login. Berikutnya jika
admin ingin melakukan Login dan melakukan tugasnya,
halaman awal yang akan terlihat jika admin melakukan proses
Login seperti pada gambar dibawah ini:
36
Gambar 4.34 Tampilan Awal Admin Setelah Login
15. Dalam halaman tersebut terdapat banyak navigasi yang dapat
dipilih admin. Salah satu tombol yang bisa dipilih ialah
halaman Your Clients. Tampilannya seperti gambar dibawah:
Gambar 4.35 Tampilan Informasi Rinci Seluruh Pengguna
37
Pada halaman ini, admin dapat melihat seluruh data lengkap
dari seluruh client dan juga admin. Di setiap informasi
pengguna, admin dapat melakukan perubahan status keaktifan
jika expired date dari client telah melampaui batas yang
tertera di database. Batasnya ialah satu tahun setelah tanggal
registrasi.
16. Berikutnya ialah tampilan yang akan terlihat apabila admin
ingin merubah status keaktifan dari pengguna. Tampilannya
seperti dibawah ini:
Gambar 4.36 Tampilan Untuk Admin Merubah Status Keaktifan
17. Dari kolom navigasi admin dapat langsung melompat ke
halaman Approve Payment. Halaman ini digunakan untuk
memberikan status keaktifan kepada client yang telah
melakukan
pembayaran
dan
mengisi
form
konfirmasi
pembayaran. Pengecekan dilakukan admin secara manual
38
melalui e – banking dari nomor rekening bank yang dituju.
Jika konfirmasi benar adanya setelah dilakukan pengecekan
manual, selanjutnya admin cukup menekan tombol approve
dan secara otomatis client tersebut statusnya menjadi aktif dan
dapat melakukan login. Step berikutnya ialah admin
diharuskan mengirim email secara manual kepada client
tersebut untuk menginformasikan keaktifan akun miliknya.
Contohnya ada pada gambar dibawah ini:
Gambar 4.37 Tampilan Untuk Admin Melakukan Approval
18. Selanjutnya pada kolom navigasi terdapat tombol Modify
Client’s Resto, ini ialah fitur khusus yang dimiliki admin
untuk melihat dan merubah informasi dari tempat makan
client. Tampilan awal yang akan terlihat ialah sebagai berikut:
39
Gambar 4.38 Tampilan Untuk Admin Melihat List Tempat Makan
Seluruh Client
List tempat makan yang akan terlihat ialah seluruh tempat
makan yang sudah dimasukkan oleh clients. Sama seperti
tampilan list di halaman client, hanya saja pada halaman
admin ini, admin dapat melihat seluruh tempat makan dari
semua client.
19. Tampilan berikutnya ialah tampilan bagi admin untuk melihat
detail tempat makan. Pada halaman ini admin hanya dapat
melihat seluruh informasi yang sudah ada. Tidak dapat
merubah melalui halaman ini. Tampilannya sebagai berikut:
40
Gambar 4.39 Tampilan Untuk Admin Mengetahui Detail Tempat
Makan Milik Client
20. Terakhir ialah halaman untuk admin merubah informasi rinci
tempat makan milik client, namun terdapat prosedur yang
harus diikuti oleh admin jika ingin melakukan hal ini. Yaitu
dengan cara mengirim email secara manual kepada client
untuk meminta izin. Atau jika client meminta maka admin
harus segera melaksanakan permintaan tersebut. Tampilannya
tidak berbeda dari form edit restaurant details, seperti yang
ada pada gambar dibawah ini:
41
Gambar 4.40 Tampilan Untuk Admin Merubah Informasi Rinci
Tempat Makan Milik Client