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.
2. Setelah layar splashtadi maka akan di tampilkan tampilan layar seperti di bawah ini: 6 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
mendetail atau memilih menu tombol Show Places on Map untuk menampilkan lokasi secara visual di Google Maps. 9 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
layar ini terdapat informasi berupa foto makanan, nama makanan, harga makanan, serta penjelasan singkat makanan. 18 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
zoom out dalam peta tersebut untuk membantu menentukan tempat yang diinginkan. 25 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