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