Sataspes dan Kupu-kupu Papilio Blumei. Struktur data
- Koleksi Kupu-kupu Penjelasan struktur data
- Gambar[Kupu-kupu Papilio Ulysses | Kupu-kupu Papilio Sataspes |Kupu-kupu
Papilio Blume]
5 Nama
Data pola Kupu-kupu Where usedhow used
1. Vuforia – Proses Vefirikasi pola
kupu-kupu Deskripsi
Data yang digunakan ketika pengecekan pola kupu-kupu
Struktur data - Koleksi Kupu-kupu
Penjelasan struktur data - Gambar[Kupu-kupu Papilio Ulysses |
Kupu-kupu Papilio Sataspes |Kupu-kupu Papilio Blume]
3.7 Perancangan Sistem
Perancangan akan dimulai setelah tahap analisis terhadap sistem selesai dilakukan. Perancangan dapat didefinisikan sebagai penggambaran,perencanaan
dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi.
3.7.1 Perancangan Grafis dan Antarmuka
Antar muka merupakan tampilan dari suatu program aplikasi AR Kupu- kupu yang berperan sebagai media komunikasi yang digunakan sebagai sarana
berdialog antara program dengan pengguna. Sistem yang akan dibangun diharapkan menyediakan interface yang mudah dipahami dan digunakan oleh
pengguna. Perancangan antarmuka mendeskripsikan rencana tampilan dari setiap
form yang akan digunakan pada aplikasi AR Kupu-kupu. Perancangan antarmuka pada Kupu-kupu terdiri dari perancangan menu utama, perancangan start AR,
perancangan Tutorial dan perancangan About.
3.7.1.1 Perancangan Antarmuka Menu Utama
Perancangan menu utama mendeskripsikan rencana tampilan dari awal aplikasi AR Kupu-kupu dibuka. Berikut merupakan gambaran dari perancangan
antarmuka aplikasi AR Kupu-kupu.
Menu
T01
Ukuran layar utama default 80 dari resolusi tampilan Layar menyesuaikan , jenis Potret
- T01Menampilkan menu aplikasi - Sentuh Start AR : Menampilkan T02
- Sentuh Tutorial : Menampilkan T05 - Sentuh About : Menampilakn T06
- Sentuh Keluar : Menampilakn P01
Start Kamera
keluar About
Tutorial
Gambar 3. 27 Perancangan Antar Muka Menu Utama 3.7.1.2
Perancangan Antarmuka Start Kamera
Perancangan start AR mendeskripsikan rencana tampilan dari permulaan ketika user mulai mengaktifkan kamera dan akan menscan Kupu-kupu .Berikut
merupakan gambaran dari perancangan start AR aplikasi AR Kupu-kupu.
Start AR
T02
Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12
- T02 menampilkan di mana Object Augmented Reality muncul
- U1 merupakan Object Augmented Reality
- U2 Merupakan Video Object Augmented Reality
- Sentuh Perbesar : Memperbesar Object Augmented Reality
- Sentuh Perkecil : Memperkecil Object Augmented Reality
- Sentuh Atas : Rotasi Object Augmented Reality ke Arah Atas
- Sentuh Bawah : Rotasi Object Augmented Reality ke Arah Bawah
- Info Text : jika di sentuh maka keluar T03
Perbesar Perkecil
Atas Bawah
U2
Info Text
U1
Gambar 3. 28 Perancangan Antar Muka Start Kamera 3.7.1.3
Perancangan Antarmuka Informasi Text
Perancangan informasi text mendeskripsikan rencana tampilan dari ketika objek 3D menapilkan informasi berupa text .Berikut merupakan gambaran dari
perancangan antar muka informasi text pada Kupu-kupu.
Informasi Object 3D
T03
Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12
- T03 Menampilkan Informasi dari Object Augmented Reality yang muncul.
- Sentuh kembali : Kembali ke T02
Text Kembali
Gambar 3. 29 Perancangan Antar Muka Informasi Text 3.7.1.4
Perancangan Antarmuka Play Video
Perancangan play Video mendeskripsikan rencana tampilan dari ketika objek 3D menapilkan informasi berupa video .Berikut merupakan gambaran dari
perancangan antar muka play video pada Kupu-kupu.
Imformasi Object Berupa video
T04
Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12
- T04 Menampilkan InformasiVideo Play dari Object Augmented Reality
Yang Muncul - Sentuh Play : Jika Video ada maka
Memunculkan P02 dan jika video tidak dapat di putar memunculkan P03
Play
Gambar 3. 30 Perancangan Antar Muka Play Video 3.7.1.5
Perancangan Tutorial
Perancangan antar muka Tutorial mendeskripsikan rencana tampilan dari petunjuk penggunaan aplikasi AR Kupu-kupu. Berikut merupakan gambaran dari
perancangan petunjuk dari aplikasi AR Kupu-kupu.
Tutorial
T05
Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12
- T05 Menampilkan cara menggunakan Aplikasi AR Kupu-kupu
Text
Gambar 3. 31 Perancangan Antar Muka Tutorial 3.7.1.6
Perancangan About
Terakhir adalah Perancangan antar muka About mendeskripsikan rencana tampilan dari informasi aplikasi AR Kupu-kupu. Berikut merupakan gambaran
dari perancangan antar muka about dari aplikasi AR Kupu-kupu.
About
T05
Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12
- T06 Menampilkan Tentang Aplikasi
Text
Gambar 3. 32 Perancangan Antar Muka About
3.7.1.7 Perancangan Pesan
Pada gambar dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi AR Kupu-kupu. Adapun tampilan pesan yang ada adalah sebagai
berikut :
3.7.1.7.1 Perancangan Pesan Exit
Pesan Exit
P01
Ukuran layar utama default 80 dari resolusi tampilan Layar menyesuaikan , jenis Potret
- P01Menampilkan Pesan Konfirmasi - Sentuh Tidak : Menampilkan T01
- Sentuh Ya : Keluar Dari Aplikasi
Apa Anda ingin keluar dari Aplikasi Tidak
Ya
Gambar 3. 33 Perancangan Antarmuka Pesan Exit 3.7.1.7.2
Perancangan Pesan Video Play dalam Proses
Pesan Video Play Dalam Proses
P02
Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12
- P02 Menampilkan Video dalam proses untuk ditampilkan
Loading Video
Gambar 3. 34 Perancangan Video Play dalam Proses 3.7.1.7.3
Perancangan Pesan Video Play Error
Pesan Video Play Dalam Proses
P02
Ukuran layar utama default 80 dari resolusi tampilan Font Ukuran 12
- P02 Menampilkan ketika Video tidak dapat diputar
Maaf Video Tidak dapat di putar
Gambar 3. 35 Perancangan Pesan Video Play Error 3.7.2
Jaringan Semantik
Jaringan semantik merupakan gambaran grafis yang menunjukkan antar objek lingkaran dan garis yang menggambarkan formasi antar objek tersebut.
Adapun jaringan semantik untuk aplikasi AR Kupu-kupu dapat dilihat pada gambar dibawah:
T01 T05
T06
T02
T04 T03
P01
Gambar 3. 36 Jaringan semantik 3.7.3
Perancangan Prosedural
Pada bagian ini akan dibuat deskripsi rinci dari perangkat lunak, yaitu algoritma yang akan digunakan oleh masing-masing prosedur yang ada pada
masing-masing modul. Perancangan prosedural menjelaskan tentang bagaimana program aplikasi berjalan. Adapun deskripsi rincinya adalah sebagai berikut :
3.7.3.1 Flowchart Menampilkan Object Kupu-kupu
Flowchart pada gambar 3.37 menunjukkan proses dari sistem untuk
menampilkan objek Kupu-kupu dari masing – masing Kupu-kupu.
Gambar 3. 37 Flowchart Menampilkan Object Kupu-kupu
3.7.3.2 Flowchart Menampilkan Video Kupu -kupu
Flowchart pada gambar 3.38 menunjukkan proses dari sistem untuk
menampilkan Video Kupu-kupu dari masing – masing Kupu-kupu.
Gambar 3. 38 Flowchart Menampilkan Video Kupu-kupu
3.7.3.3 Flowchart Mengontrol Kupu-kupu
Flowchart pada gambar 3.39 menunjukkan proses dari sistem untuk
Mengontrol Object Kupu-kupu dari masing – masing Kupu-kupu.
.
Gambar 3. 39 Flowchart mengontrol Kupu-kupu
105
4 BAB IV
IMPLEMENTASI DAN PENGUJIAN SISTEM
Bab ini merupakan tahap penerjemahan kebutuhan pembangunan aplikasi ke dalam representasi perangkat lunak sesuai dengan hasil analisis yang telah
dilakukan. Setelah implementasi maka dilakukan pengujian sistem yang baru dimana akan dilihat kekurangan-kekurangan pada aplikasi yang baru untuk
selanjutnya diadakan pengembangan sistem.
4.1 Implementasi
Tujuan implementasi sistem adalah untuk menjelaskan tentang manual modul kepada semua pengunjung yang akan menggunakan sistem. Sehingga
pengunjung tersebut dapat merespon apa yang ditampilkan di sistem dan memberikan masukan kepada pembuat sistem untuk dilakukan perbaikan agar
sistem lebih baik lagi.
4.2 Implementasi Mobile
Pada analisis tahapan implementasi mobile ini menjelaskan bahwa bagaimana scenario aplikasi yang dibangun dapat berjalan pada sebuah flatform
mobile.Aplikasi Augmented Reality yang telah dirancang menggunakan Unity 3D dapat digunakan atau dapat diimplementasikan dalam aplikasi mobile harus
dengan menggunakan sebuah library, libray tersebut yaitu berupa Vuforia SDK untuk Android, dimana didalam library tersebut berupa fungsi-fungsi yang
digunakan untuk memanggil scenario AR serta menyertakan class Component untuk mengatur segala inisialisasi pada framelayout dan untuk mengatur segala
aktivitas aplikasi mobile.
Gambar 4. 1 Implementasi mobile layar landscape