Flowchart Perancangan Tampilan Antarmuka Aplikasi

3.3 Flowchart

Flowchart atau diagram alir adalah gambaran yang menampilkan struktur, urutan kegiatan dari suatu program dari awal sampai akhir dan isi halaman per halaman. Dengan adanya flowchart akan sangat membantu untuk memvisualisasikan isi dari setiap halaman aplikasi tersebut. Berikut Gambar 3.5 dan Gambar 3.6 sebagai flowchart dari sistem secara menyeluruh dan flowchart dari sistem halaman AR. Landing Page Button Enter Button About PopUp About mainMenu Button Help Button Back Button Buku Menu Button close PopUp Help Button close MenuBook Button Menu1 Halaman AR Menu1 Button back No Button Menu2 Halaman AR Menu2 Button back No Button Menu3 Halaman AR Menu3 Button back No Button Menu4 Halaman AR Menu4 Button back No Button Exit End Start Yes Yes Yes Yes Yes Yes Yes Yes Button smaller size Button Menu5 Halaman AR Menu5 Button back Halaman AR smaller size Button bigger size Button back Button Home Yes Yes Yes Yes No No No No No No No No No No No No Yes Yes Yes Yes No No No No Yes Yes Yes Yes Yes No Yes Gambar 3.5 Flowchart Sistem START Kamera menangkap gambar Marker terdeteksi Tombol Back Deteksi marker Slider zoom in Zoom out Transform objek 3D Objek 3D Tombol Back Objek 3D telah di transformasi Slider zoom in Zoom out Tombol Back END Yes No No Yes Yes No No Yes Yes No Yes No Gambar 3.6 Flowchart Sistem Halaman AR

3.4 Perancangan Tampilan Antarmuka Aplikasi

Tampilan antarmuka perlu dirancang untuk menggambarkan sistem yang akan dibuat dan dapat mempermudah proses pembangunan sistem. Rancangan tampilan sistem dapat dilihat dan akan dijelaskan sebagai berikut. 3.4.1 Rancangan Halaman landingPage Tampilan landingPage pada aplikasi PART bertujuan untuk memulai aplikasi dan sekaligus pengenalan awal dari sistem yang dibuat kepada pengguna dalam menggunakan aplikasi. Secara umum landing page terbagi menjadi tiga bagian yaitu menu enter, menu about dan menu exit. Gambar rancangan halaman landingPage terdapat pada Gambar 3.7, serta Tabel 3.2 untuk keterangan bagian-bagian rancangan dari halaman landingPage. Gambar 3.7 Rancangan Halaman landingPage 1 2 4 3 5 Tabel 3.2 Keterangan Bagian-Bagian Rancangan Halaman landingPage No Jenis Objek Keterangan 1 Picture Logo Tuasan 2 Tombol Enter Tombol masuk ke halaman homemenu utama. 3 Tombol About Tombol popup pemberitahuan tentang aplikasi. 4 Tombol Exit Tombol keluar dari aplikasi. 5 Picture Logo PopulAResto PART 3.4.2 Rancangan PopUp pada Tombol About Tampilan popup pada tombol about dapat dilihat pada Gambar 3.8. tampilan popup memiliki tujuan untuk memberitahukan tujuan dari pembuatan aplikasi. Tabel 3.3 memberikan keterangan bagian bagian dari rancangan PopUp about. Gambar 3.8 Rancangan PopUp About Tabel 3.3 Keterangan Bagian-Bagian Rancangan PopUpAbout No Jenis Objek Keterangan 1 Tombol X Tombol untuk menutup popup. 2 Text View Isi dari pop up. 2 1 3.4.3 Rancangan Halaman mainMenu Rancangan tampilan halaman mainMenu seperti yang terlihat pada Gambar 3.9 memiliki 3 buah tombol yaitu tombol back untuk kembali ke halaman landingPage, tombol buku menu untuk menuju halaman menuBook, dan tombol help yang akan memunculkan popup berisikan cara mengguanakan sistem PopulARestoPART. Tabel 5 memberikan keterangan bagian – bagian dari rancangan halaman mainMenu Gambar 3.9 Rancangan Halaman mainMenu Tabel 3.4 Keterangan Bagian-Bagian Rancangan Halaman mainMenu No Jenis Objek Keterangan 1 Tombol bukumenu Tombol untuk menuju halaman menuBook 2 Tombol back Tombol untuk menuju halaman landingPage 3 Tombol Help Tombol untuk membantu user menggunakan sistem PART. 3.4.4 Rancangan PopUp pada Tombol Help Tampilan popup pada tombol Help seperti yang terlihat pada Gambar 3.10 memiliki tujuan untuk memberitahukan cara menggunakan Augmented Reality pada halaman – halaman berikutnya. Tabel 3.5 memberikan keterangan bagian – bagian rancangan popup help. 1 2 3 Gambar 3.10 Rancangan PopUp Help Tabel 3.5 Keterangan Bagian-Bagian Rancangan PopUp Help No Jenis Objek Keterangan 1 Tombol X Tombol untuk menutup popup. 2 Text View Isi dari pop up. 3.4.5 Rancangan Halaman menuBook Rancangan tampilan halaman menuBook dapat dilihat pada Gambar 3.11 yang berisikan nama menu makanan dan minuman yang tersedia dalam bentuk 3D yang akan ditampilkan dengan menggunakan teknologi Augmented Reality. Terdapat 5 menu yang tersedia dalam sistem yaitu bola-bola udang, kopi, es krim besar dan sedang, kentang goreng, dan jus Alpukat. Keterangan dari rancangan halaman menuBook terdapat pada Tabel 3.6. Gambar 3.11 Rancangan Halaman menuBook 1 3 4 5 6 2 2 1 Tabel 3.6 Keterangan Bagian-Bagian Rancangan Halaman menuBook No Jenis Objek Keterangan 1 Tombol Bola – Bola Udang Tombol untuk menuju halaman Augmented Reality shrimpball 2 Tombol Kopi Tombol untuk menuju halaman Augmented Reality Kopi 3 Tombol Es Krim Besar Tombol untuk menuju halaman Augmented Reality eskrimbesar 4 Tombol kentang goreng Tombol untuk menuju halaman Augmented Reality kentang goreng 5 Tombol Jus Alpukat Tombol untuk menuju halaman Augmented Reality juice 6 Tombol Home Tombol untuk menuju halaman landingPage 3.4.6 Rancangan Halaman AR untuk Bola – Bola Udang Rancangan tampilan halaman AR untuk bola – bola udang pada aplikasi ini dapat terlihat pada Gambar 3.12 yang bertujuan untuk memberitahukan informasi dari bola – bola udang yang tersedia dalam bentuk 3D. Keterangan bagian – bagian halaman AR untuk bola-bola udang dapat dilihat pada Tabel 3.7. Pada halaman Augmented Reality, pengguna perlu mengarahkan kamera smartphone ke marker yang telah disediakan agar kamera melakukan tracking marker. Jika marker yang telah didaftarkan terdeteksi maka objek 3D beserta informasi akan muncul pada layar smartphone. Gambar 3.12 Rancangan Halaman AR untuk Bola – bola udang 2 1 4 3 Tabel 3.7 Keterangan Bagian-Bagian Rancangan Halaman AR Bola – bola udang, No Jenis Objek Keterangan 1 Tombol Back Tombol kembali pada halaman menuBook. 2 Camera view Halaman untuk melihat tampilan Augmented Reality. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. 4 Rotasi dan Berhenti Rotasi Merotasi objek 3D dan menghentikan rotasi objek 3D 3.4.7 Rancangan Halaman AR untuk Kopi Rancangan tampilan halaman AR ini bertujuan untuk memberitahukan informasi dari kopi yang tersedia dalam bentuk 3D. Pada halaman Augmented Reality, pengguna perlu mengarahkan kamera smartphone ke marker yang telah disediakan agar kamera melakukan tracking marker. Jika marker yang telah didaftarkan terdeteksi maka objek 3D beserta informasi akan muncul pada layar smartphone. Rancangan dan keterangan dari Halaman AR untuk kopi dapat dilihat pada Gambar 3.13 dan Tabel 3.8. Gambar 3.13 Rancangan Halaman AR untuk Kopi 2 1 3 4 Tabel 3.8 Keterangan Bagian-Bagian Rancangan Halaman AR untuk Kopi No Jenis Objek Keterangan 1 Tombol Back Tombol kembali pada halaman menuBook. 2 Camera view Halaman untuk melihat tampilan Augmented Reality. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. 4 Rotasi dan Berhenti Rotasi Merotasi objek 3D dan menghentikan rotasi objek 3D 3.4.8 Rancangan Halaman AR untuk Kentang Goreng Tampilan Halaman Augmented Reality pada aplikasi ini bertujuan untuk memberitahukan informasi dari menu kentang goreng yang tersedia dalam bentuk 3D. Pada halaman Augmented Reality, pengguna perlu mengarahkan kamera smartphone ke marker yang telah disediakan agar kamera melakukan tracking marker. Jika marker yang telah didaftarkan terdeteksi maka objek 3D beserta informasi akan muncul pada layar smartphone. Rancangan dan keterangan dari Halaman AR untuk kentang goreng dapat dilihat pada Gambar 3.14 dan Tabel 3.9. Gambar 3.14 Rancangan Halaman AR untuk Kentang Goreng 4 2 1 3 4 Tabel 3.9 Keterangan Bagian-Bagian Rancangan Halaman AR untuk Kentang Goreng No Jenis Objek Keterangan 1 Tombol Back Tombol kembali pada halaman menuBook. 2 Camera view Halaman untuk melihat tampilan Augmented Reality. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. 4 Rotasi dan Berhenti Rotasi Merotasi objek 3D dan menghentikan rotasi objek 3D 3.4.9 Rancangan Halaman AR untuk Jus Alpukat Tampilan Halaman Augmented Reality pada aplikasi ini bertujuan untuk memberitahukan informasi dari menu jus alpukat yang tersedia dalam bentuk 3D. Pada halaman Augmented Reality, pengguna perlu mengarahkan kamera smartphone ke marker yang telah disediakan agar kamera melakukan tracking marker. Jika marker yang telah didaftarkan terdeteksi maka objek 3D beserta informasi akan muncul pada layar smartphone. Rancangan dan keterangan dari Halaman AR untuk Jus Alpukat dapat dilihat pada Gambar 3.15 dan Tabel 3.10. Gambar 3.15 Rancangan Halaman AR untuk Jus Alpukat 4 2 1 3 4 Tabel 3.10 Keterangan Bagian-Bagian Rancangan Halaman AR untuk Jus Alpukat No Jenis Objek Keterangan 1 Tombol Back Tombol kembali pada halaman menuBook. 2 Camera view Halaman untuk melihat tampilan Augmented Reality. 3 Slider Digunakan untuk memperbesar atau memperkecil objek. 4 Rotasi dan Berhenti Rotasi Merotasi objek 3D dan menghentikan rotasi objek 3D 3.4.10 Rancangan Halaman AR untuk Es Krim Besar Tampilan Halaman Augmented Reality pada aplikasi ini bertujuan untuk memberitahukan informasi dari menu es krim besar yang tersedia dalam bentuk 3D. Pada halaman Augmented Reality, pengguna perlu mengarahkan kamera smartphone ke marker yang telah disediakan agar kamera melakukan tracking marker. Jika marker yang telah didaftarkan terdeteksi maka objek 3D beserta informasi akan muncul pada layar smartphone. Tampilan dari halaman es krim besar memiliki tambahan tombol untuk menuju ke halaman AR untuk es krim sedang. Rancangan dan keterangan dari Halaman AR untuk es krim besar dapat dilihat pada Gambar 3.16 dan Tabel 3.11. Gambar 3.16 Rancangan Halaman AR untuk Es Krim Besar 3 1 2 4 5 Tabel 3.11. Keterangan Bagian-Bagian Rancangan Halaman AR untuk Es Krim Besar No Jenis Objek Keterangan 1 Tombol Back Tombol kembali pada halaman menuBook. 2 Tombol es krim kecil Tombol untuk menuju halaman AR untuk es krim sedang 3 Camera view Halaman untuk melihat tampilan Augmented Reality. 4 Slider Digunakan untuk memperbesar atau memperkecil objek. 5 Rotasi dan Berhenti Rotasi Merotasi objek 3D dan menghentikan rotasi objek 3D 3.4.11 Rancangan Halaman AR untuk Es Krim Sedang Tampilan Halaman Augmented Reality pada aplikasi ini bertujuan untuk memberitahukan informasi dari menu es krim besar yang tersedia dalam bentuk 3D. Pada halaman Augmented Reality, pengguna perlu mengarahkan kamera smartphone ke marker yang telah disediakan agar kamera melakukan tracking marker. Jika marker yang telah didaftarkan terdeteksi maka objek 3D beserta informasi akan muncul pada layar smartphone. Tampilan dari halaman es krim besar memiliki tambahan tombol untuk menuju ke halaman AR untuk es krim besar Rancangan dan keterangan dari Halaman AR untuk es krim sedang dapat dilihat pada Gambar 3.17 dan Tabel 3.12. Gambar 3.17 Rancangan Halaman AR untuk Es Krim Sedang 3 1 2 4 5 Tabel 3.12 Keterangan Bagian-Bagian Rancangan Halaman AR untuk Es Krim Sedang No Jenis Objek Keterangan 1 Tombol Back Tombol kembali pada halaman menuBook. 2 Tombol es krim besar es krim kecil Tombol yang memberikan refrensi lain dari ukuran eskrim yang tersedia 3 Camera view Halaman untuk melihat tampilan Augmented Reality. 4 Slider Digunakan untuk memperbesar atau memperkecil objek. 5 Rotasi dan Berhenti Rotasi Merotasi objek 3D dan menghentikan rotasi objek 3D

3.5 Perancangan Pembuatan Objek 3D pada Blender