Perancangan Sistem Perancangan Antarmuka Sistem

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