3.4. Perancangan Sistem
Berdasarkan hasil dari analisis maka dapat dibangun suatu Flowchart diagram alir untuk menggambarkan lebih rinci tentang bagaimana setiap langkah program atau prosedur
dalam satu urutan. Pada gambar 3.5 menjelaskan mengenai beberapa Menu dari aplikasi yang dapat diakses user. Proses menampilkan objek AR dapat terlihat pada MenuEnter
yang ketika di-klik maka akan masuk halaman objek, yang terdapat 2 jenis pilihan yaitu virus dan bakteri. Ketika di-klik akan muncul jenis-jenis objek virus atau bakteri sesuai
yang di-klik. Didalam salah satu objek terdapat penjelasan dari objek tersebut dan Augmented Reality
.
Mulai Halaman
Utama 1
Enter
Tidak
Tentang Keluar
Tidak Objek
Ya 2
Virus
Bakteri Tidak
Kembali Tidak
1 Ya
Tidak Halaman
Jenis Virus Ya
Halaman Jenis Bakteri
Ya Influenza Virus
Herpes Simplex Virus
Kembali Human
Immunodeficien cy Virus
Tidak Tidak
Tidak Tidak
2 Ya
Halaman Penjelasan
Halaman Penjelasan
Halaman Penjelasan
Ya Ya
Ya AR Human
Immunodeficien cy Virus
AR Herpes Simplex Virus
AR Influenza Virus
2 2
2 Tidak
Tidak Tidak
Mycobacterium Tuberculosis
Vibrio Cholera Salmonella
Typhosa Tidak
Tidak Tidak
2 Ya
Halaman Penjelasan
Halaman Penjelasan
Halaman Penjelasan
Ya Ya
Ya AR Salmonella
Typhosa AR Vibrio
Cholera AR
Mycobacterium Tuberculosis
2 2
2 Tidak
Tidak Tidak
Kembali Tidak
Halaman Tentang
Berhenti Ya
Ya Tidak
1 Halaman AR
Halaman AR Halaman AR
Ya Ya
Ya
Halaman AR Halaman AR
Halaman AR Ya
Ya Ya
Gambar 3.5 Flowchart Sistem
Universitas Sumatera Utara
3.5. Perancangan Antarmuka Sistem
Sistem yang akan dibangun menggunakan Unity sebagai media pembuat user interface tatap muka, dan juga sebagai compiler untuk menjadikan project Unity menjadi ekstensi
.apk yang berjalan pada Smartphone Android. Bahasa pemrograman yang dipakai penulis adalah C Sharp C.
3.5.1. Rancangan Halaman Home
Tampilan rancangan pada halaman Home dapat dilihat pada gambar 3.6, serta keterangan komponen yang terdapat pada halaman Home dapat dilihat pada tabel 3.2.
About
Enter
Exit Pembelajaran Jenis Virus dan Bakteri Penyebab Penyakit pada Manusia
1
2 4
3
Gambar 3.6 Rancangan Halaman Home
Universitas Sumatera Utara
Tabel 3.2 Komponen-Komponen pada Rancangan Halaman Home
No Jenis Komponen
Keterangan
1 Nama Aplikasi Text
Judul Aplikasi 2
Tombol Enter Button Tombol yang akan menampilkan halaman Objek
3 Tombol About Button
Tombol yang akan menampilkan halaman About 4
Tombol Exit Button Tombol untuk keluar aplikasi
3.5.2. Rancangan Halaman Objek
Dalam rancangan halaman Objek dapat dilihat pada gambar 3.7, serta keterangan komponen yang terdapat pada halaman Objek dapat dilihat pada tabel 3.3.
Objek 1
2
3 4
Back
Virus
Bakteri
Gambar 3.7 Rancangan Halaman Objek
Universitas Sumatera Utara
Tabel 3.3 Komponen-Komponen pada Rancangan Halaman Objek
No Jenis Komponen
Keterangan
1 Nama Halaman Text
Judul Halaman 2
Tombol Virus Button Tombol yang akan menampilkan halaman jenis-
jenis virus
3 Tombol Bakteri Button
Tombol yang akan menampilkan halaman jenis- jenis bakteri
4 Tombol Back Button
Tombol yang akan menampilkan halaman sebelumnya
3.5.3. Rancangan Halaman Virus
Dalam Rancangan halaman Virus dapat dilihat pada gambar 3.8, serta keterangan komponen yang terdapat pada halaman Virus dapat dilihat pada tabel 3.4.
Virus 1
2
3
4 5
Back
Influenza Virus
Herpes Simplex Virus
Human Immunodeficiency Virus
Gambar 3.8 Rancangan Halaman Virus
Universitas Sumatera Utara
Tabel 3.4 Komponen-Komponen pada Rancangan Halaman Virus
No Jenis Komponen
Keterangan
1 Nama Halaman Text
Judul Halaman 2
Tombol Influenza Virus Button
Tombol yang akan menampilkan halaman informasi Influenza Virus
3 Tombol Herpes
SimplexVirus
Button
Tombol yang akan menampilkan halaman informasi Herpes Simplex Virus
4 Tombol Human
Immunodeficiency Virus
Button
Tombol yang akan menampilkan halaman informasi Human Immunodeficiency Virus
4 Tombol Back Button
Tombol yang akan menampilkan halaman sebelumnya
3.5.4. Rancangan Halaman Bakteri
Dalam Rancangan halaman Bakteri dapat dilihat pada gambar 3.9, serta keterangan komponen yang terdapat pada halaman Bakteri dapat dilihat pada tabel 3.5.
Universitas Sumatera Utara
Bakteri 1
2
3
4 5
Back
Mycobacterium Tuberculosis
Vibrio Cholera
Salmonella Typhosa
Gambar 3.9 Rancangan Halaman Bakteri
Tabel 3.5 Komponen-Komponen pada Rancangan Halaman Bakteri
No Jenis Komponen
Keterangan
1 Nama Halaman Text
Judul Halaman 2
Tombol Mycobacterium Tuberculosis
Button
Tombol yang akan menampilkan halaman informasi Mycobacterium Tuberculosis
3 Tombol Vibrio
Cholera Button
Tombol yang akan menampilkan halaman informasi Vibrio Cholera
4 Tombol Salmonella Typhosa
Button
Tombol yang akan menampilkan halaman informasi Salmonella Typhosa
4 Tombol Back Button
Tombol yang akan menampilkan halaman sebelumnya
Universitas Sumatera Utara
3.5.5. Rancangan Halaman Informasi Objek
Dalam Rancangan halaman informasi objekdapat dilihat pada gambar 3.10, serta keterangan komponen yang terdapat pada halaman informasi objekdapat dilihat pada
tabel 3.6.
Nama Objek 1
2 3
4 5
Back
Text
Augmented Reality
Gambar 3.10 Rancangan Halaman Informasi Objek
Tabel 3.6 Komponen-Komponen pada Halaman Informasi Objek No
Jenis Komponen Keterangan
1 Nama halaman Text
Judul Objek Halaman 2
Deskripsi Objek Text Menjelaskan Pengertian, Jenis dan Fungsi dari
objek yang dipilih 3
Vertical Bar Scroll Bar
Digunakan untuk menggulung Deskripsi Objek secara vertikal
4 Tombol Augmented Reality
Button Tombol yang akan men-trigger memicu
kamera smartphone untuk menampilkan objek
Universitas Sumatera Utara
Augmented Reality pada Marker yang diinginkan
5 Tombol Back Button
Tombol yang akan menampilkan kembali ke halaman sebelumnya
3.5.6. Rancangan Halaman Augmented Reality
Dalam Rancangan halaman Augmented Reality dapat dilihat pada gambar 3.11, serta keterangan komponen yang terdapat pada halaman Augmented Reality dapat dilihat pada
tabel 3.7.
1 Back
Objek 3D dengan Augmented Reality 2
Gambar 3.11 Rancangan Halaman Augmented Reality
Universitas Sumatera Utara
Tabel 3.7 Komponen-Komponen pada Halaman Augmented Reality
No Jenis Komponen
Keterangan
1 Objek 3D Mesh dan Texture
Objek 3D yang tampil sesuai dengan objek yang dipilih pada halaman jenis virus atau bakteri
2 Tombol Back Button
Tombol yang akan menampilkan kembali ke halaman Objek
3.5.7. Rancangan Halaman About
Dalam Rancangan halaman About dapat dilihat pada gambar 3.12, serta keterangan komponen yang terdapat pada halaman About dapat dilihat pada tabel 3.8.
Tabel 3.8 Komponen-Komponen pada Halaman Tentang
Gambar 3.12 Rancangan Halaman About
Kembali About
4 2
1
3
Universitas Sumatera Utara
Tabel 3.8 Komponen-Komponen pada Halaman About
No Jenis Komponen
Keterangan
1 Deskripsi Tutorial Text
Penjelasan tentang penulis dan aplikasi secara singkat
2 Nama Halaman Text
Penjelasan nama halaman 3
Gambar Image Penjelasan gambar
4 Tombol Back Button
Tombol akan menampilkan ke halaman Home
3.6. Proses Pembuatan Objek 3D