BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN 3.1 Analisis Sistem Analisis sistem bertujuan untuk memahami sistem yang akan dibangun. Adapun tahapan yang harus dilakukan adalah dengan melakukan beberapa analisis. Pembahasan berikut merupakan analisis masalah, review aplikasi yang sudah ada, analisis kebutuhan non-fungsional dan analisis kebutuhan fungsional. 3.2. Analisis Masalah Analisis masalah adalah langkah awal dari analisis sistem. Langkah ini diperlukan untuk mengetahui permasalahan apa saja yang terjadi pada sistem yang telah berjalan. Analisis masalah yang dimaksud disini adalah sulit diperolehnya media yang dapat memperkenalkan

candi candi di Indonesia dalam bentuk 3D,

dikarenakan

masih

digunakannya media buku yang hanya dapat memperlihatkan satu sisi atau sudut pandang yang searah dan kurang interaktif dalam pembelajarannya. Dengan teknologi yang berkembang pada saat ini, khususnya teknologi Augmented reality (AR) yang unggul dengan virtual animasinya yang dapat menggambungkan antara objek dunia nyata dengan objek virtual, dapat dijadikan sarana yang dapat menutupi kekurangan yang terdapat pada media pembelajaran saat ini. Berkembangnya teknologi AR

ini telah berkembang ke berbagai bentuk yang dapat

diaplikasikan baik dalam bentuk aplikasi web, desktop maupun mobile. Dengan merujuk kepada kekurangan yang ada maka di bangunlah aplikasi yang berbasiskan mobile yang dikarenakan memiliki kelebihan yang dapat digunakan secara efisien jika di bandingkan dengan media lain. Dengan menggunakan teknologi Augmented Reality (AR) di harapkan dapat dalam proses pembelajaran yang

lebih

interaktif dikarenakan memiliki kelebihan-

kelebihan yang dapat menjawab masalah yang dihadapi. Aplikasi ini bertujuan untuk menampilkan informasi secara real time mengenai candi-candi di Indonesia, antara lain: Candi Pawon, Candi Bima, Candi Banyunibo, Candi Bajang Ratu, Candi Wringin Lawang dan Candi Pura Ulun Danu dengan menggunakan tehnik marker yang berjumlah 6.

40 http://digilib.mercubuana.ac.id/

41 3.2.1. Analisis Sistem Yang Berjalan Sebelum pembuatan aplikasi Candi Indonesia Augmented Reality Book ini, penulis melakukan wawancara dengan praktisi di dunia 3D Animasi, Bpk. Indra Bayu. Wawancara berisi tentang perkembangan dunia animasi serta perkembangan Augmented Reality dan wawancara dengan Guru dari SDN 17 Pagi, Palmerah Jakarta Barat. Analisis Sistem atau analisis proses adalah tahapan yang memberi gambaran tentang sistem yang sedang berjalan sekarang. Analisis ini bertujuan untuk memberi gambaran yang lebih detail bagaimana cara kerja dari sistem yang sedang berjalan. Proses pembelajaran yang saat ini berjalan di SDN 17 Pagi, Palmerah dapat di lihat seperti pada Gambar 3.1.

Gambar 3. 1. Alur Sistem yang berjalan Keterangan: -

Anak-anak (Peserta didik) adalah objek yang ingin mendapatkan informasi yang terdapat pada buku

-

Media buku atau sebagai alat yang memberikan informasi dengan berisikan gambar yang ditampilkan masih dalam bentuk 2D. Dari alur sistem yang berjalan di atas, maka teknologi augmented reality bisa dijadikan sebagai media alternatif sehingga konten informasi yang didapat dari buku dapat menjadi lebih menarik dan interaktif.

http://digilib.mercubuana.ac.id/

42 3.2.2. Review Aplikasi yang sudah ada Di dalam tahapan ini bertujuan untuk me-review aplikasi yang sudah ada sehingga dapat diambil kesimpulan agar aplikasi yang nanti akan dibangun bisa lebih efektif dan efisen. Berikut ini beberapa Aplikasi sejenis yang sidah ada: a. Arca: Pengembangan Buku Interaktif Berbasis augmented reality Pada Pengenalan Dan Pembelajaran Candi Prambanan Dengan Smartphone Berbasis Android Andria K. Wahyudi; Dr. Ridi Ferdiana, S.T., M.T. S2 Teknik Elektro UGM [Yogyakarta] Universitas Gadjah Mada, 2014 Source : http://ejnteti.jteti.ugm.ac.id/index.php/JNTETI/article/view/60 JNTETI, Vol. 3, No. 2, Mei2014 ARca dirancang sebagai aplikasi smartphone yang menggunakan kamera dalam pendeteksian objek. Sistem menangkap gambar objek nyata melalui kamera, kemudian sistem akan mengenali objek atau image target tersebut, setelah itu akan ditambahkan objek virtual pada objek nyata, dan hasilnya dapat dilihat pada layar smartphone. User dapat berinteraksi dengan sistem melalui sentuhan pada layar smartphone dan dengan menyentuh virtual button pada buku fisik.

Gambar 3. 2. Screenshoot tampilan dari Arca Ada 3 virtual button: -

Deskripsi Candi: menampilkan deskripsi tentang candi Prambanan

-

Speaker: akan terdengar audio nama candi tersebut.

-

3D View: Menampilkan Object 3D Candi Prambanan (tampilan default)


43 Perangkat Lunak yang digunakan: Cinema 4D, Vuforia Qualcomm Augmented Reality, Eclipse, SDK Android Tools. Bahasa Pemrograman Java dan C++. Spesifikasi perangkat minimal yang diperlukan untuk menjalankan aplikasi : a. OS Android 2.2 Namun terdapat kekurangan karena aplikasi ini hanya menampilkan objek 3D hanya 1 candi saja (Candi Prambanan) dan tidak ada Feature Kuis pada Aplikasi tersebut. b. Pengembangan Aplikasi Augmented Reality Book – Pengenalan Tata Letak Bangunan Pura Goa Lawah dan Pura Goa Gaja Oleh: Ni Komang Oktari Permata Sari, Padma Nyoman Crisnapati, , Made Windu Antara Kesiman, I Made Gede Sunarya Jurusan Pendidikan Teknik Informatika, Universitas Pendidikan Ganesha Singaraja, Bali Source: http://download.portalgaruda.org/article.php?article=305000&val=1363&title=PENGEM BANGAN%20APLIKASI%20AUGMENTED%20REALITY%20BOOK%20PENGEN ALAN%20TATA%20LETAK%20BANGUNAN%20PURA%20GOA%20LAWAH%20 DAN%20PURA%20GOA%20GAJA Hasil akhir dari penelitian ini berupa buku yang berisikan informasi dan gambar terkait Pura Goa Lawah dan Pura Goa Gajah yang difungsikan sebagai penanda dan juga aplikasi Augmented Reality Book berbasis android yang mampu menampilkan objek bangunan Pura Goa Lawah dan Pura Goa Gajah dalam bentuk 3 dimensi tepat di atas marker lengkap dengan suara narasi penjelasan dalam bahasa Inggris. Selain itu user dapat melakukan penulusuran area indoor bangunan 3D Pura Goa Lawah dan Pura Goa Gajah.

Gambar 3. 3. Tampilan Utama Aplikasi Menampilkan Objek Sampul Buku


44 Aplikasi Augmented Reality Book ini diharapkan dapat digunakan sebagai media untuk mempelajari, memperkenalkan sekaligus melestarikan Pura Goa Lawah dan Pura Goa Gajah. Perangkat Lunak yang digunakan: Sistem Operasi Android Jelly Bean v4.2.2, Blender 2.68, Vuforia Qualcomm Augmented Reality, Unity4.0.1f2, SDK Android Tools, Audacity, Photoshop CS3, Bahasa Pemrograman C#. Spesifikasi perangkat minimal yang diperlukan untuk menjalankan aplikasi adalah sebagai berikut.: Processor ARM-v7a, GPU kelas mid-end, RAM 817 MB , OS Android versi 4.0 (Ice Cream Sandwich), Resolusi layar 1024x600 pixels. Kekurangan dari aplikasi ini adalah Design dari Augmented Reality Book yang kurang menarik, selain itu belum adanya juga feature Kuis pada aplikasi tersebut. 3.3. Proses Pembuatan Aplikasi Candi Indonesia Augmented Reality Book Proses pembuatan aplikasi Candi Indoneseia Augmented Reality Book dapat dilihat dalam flowchart pada gambar di bawah ini:

Gambar 3. 4. Proses pembuatan aplikasi


45 3.4. Analisa Kebutuhan Aplikasi 3.4.1. Analisis Kebutuhan Non Fungsional Analisis kebutuhan non fungsional dilakukan untuk mengetahui

spesifikasi

kebutuhan untuk sistem. Spesifikasi kebutuhan melibatkan analisis perangkat keras/hardware, analisis perangkat lunak/software, analisis pengguna/pengguna 3.4.1.1. Analisis Perangkat Keras / Hardware Analisis kebutuhan nonfungsional dari segi perangkat keras yaitu perangkat keras fitur pendukung aplikasi. Untuk perangkat keras fitur pendukung aplikasi dapat dilihat pada Tabel 3.1. Tabel 3. 1. Spesifikasi Minimum Perangkat Keras PC/Laptop No

Perangkat Keras

1 2 3 4 5 6

Prosessor VGA Memory Harddisk Monitor Koneksi Internet

Spesifikasi

Intel Pentium i3 , 2,2 GHz Memory DDR 1 GB 2GB DDR 2 500GB Resolusi min.1024 px x 768 px Ada

Sedangkan untuk perangkat Android dapat dilihat pada Tabel 3.2. Tabel 3. 2. Spesifikasi Perangkat Keras Android 1 2 3. 3 5 6

Layar RAM Storage Prosessor Kamera (Rear Camera) GPU version

5 inch, 1280 px x 720 px 2 GB 12 GB ARmV7 8 MP OpenGL ES 2.0

3.4.1.2. Analisis Perangkat Lunak Spesifikasi perangkat lunak komputer yang dibutuhkan untuk membangun aplikasi Augmented Reality Candi Indonesia dapat dilihat pada tabel 3.3. Tabel 3. 3. Spesifikasi Kebutuhan Perangkat Lunak Komputer No

1 2

Perangkat Lunak

Sistem Operasi Program/Software yang digunakan

Spesifikasi

Wndows 7 Professional 32/ 64 bit a. Sketchup Pro 2013 b. Android SDK Tools (V24.4.1 –windows) c. Star UML 5.0 d. Vuforia SDK 5.0.6 e. Unity 3D 5.2.0f3 (32/64-bit) g. NGUI Next-Gen UI v3.9.1 h. Playmaker.1.7.8 i. Playmaker Vuforia j. Playmaker NGUI


46 k. Java Development Kit (JDK V1.8) l. Mad Level Manager v2.3.2

Sedangkan untuk perangkat lunak platform Android dapat dilihat pada Tabel 3.4 Tabel 3. 4. Spesifikasi Kebutuhan Perangkat Lunak platform Android No

Perangkat Lunak

1

Operating System (OS)

2

Android SDK Version

Spesifikasi

Minimum Android 2.3.1 (Gingerbread) API Level 9

3.4.1.3. Analisis Pengguna Suatu aplikasi dapat berjalan optimal jika pengguna memiliki kemampuan untuk menjalankan aplikasi yang bersangkutan. Untuk menjalankan aplikasi ini pengguna harus memiliki: 1. Usia

: minimal 11 tahun

2. Pendidikan : minimal SD atau sederajat 3. Ketrampilan : mampu dan mengerti menggunakan petunjuk yang ada di aplikasi 4. Pengalaman : pernah menggunakan handphone touchscreen dengan sistem operasi android. 3.4.2. Analisis Kebutuhan Fungsional Analisis kebutuhan fungsional bertujuan untuk menganalisis proses yang akan diterapkan dalam sistem dan menjelaskan kebutuhan yang diperlukan agar aplikasi dapat berjalan dengan baik. Pemodelan yang akan digunakan adalah pemodelan berorientasi objek menggunakan tools Microsoft Visio 2007, ada 3 Diagram yang akan digunakan, yaitu: -

Use Case Diagram

-

Activity Diagram

-

Sequence Diagram

3.4.2.1. Use Case Diagram Diagram Use Case sangat membantu menganalisa kebutuhan-kebutuhan dari Aplikasi Augmented Reality

yang akan dibangun. Karena diagram Use Case


47 memperlihatkan apa yang dilakukan oleh pengguna terhadap sistem. Kebutuhan fungsional dari aplikasi Augmented Reality ditunjukkan oleh Gambar 3.5.

Gambar 3. 5. Use Case Diagram Tabel 3. 5. Spesifikasi naratif untuk Use Case – Memilih Scan Marker Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Memilih Scan Marker User Sistem menampilkan halaman Home Akan ditampilkan halaman Menu Scan Marker Candi. Aksi Aktor Reaksi Sistem 1. User memilih button “Scan 2. Akan ditampilkan halaman Marker”. Menu Scan Marker Candi.

Tabel 3. 6. Spesifikasi naratif untuk Use Case - Melakukan Scan Marker Candi Name Usecase

Melakukan Scan Marker Candi

Aktor Utama Kondisi Awal Kondisi Akhir

User Sistem menampilkan halaman Menu Scan Marker Candi Akan ditampilkan halaman Scan Marker Candi sesuai Candi yang dipilih. Aksi Aktor Reaksi Sistem 1. User memilih button “Scan 2. Akan ditampilkan Marker Candi” yang halaman scan marker sesuai diinginkan. dengan candi yang dipilih 3. Mengarahkan kamera 4. Selanjutnya kamera akan android ke marker megidentierfikasi marker

Skenario Sukses


48 6. User dapat ON/OFF Music

.

apakah pola marker sesuai dengan templates memory. 5. Marker terdeteksi, Object 3D Candi akan ditampilkan di atas marker.

Tabel 3. 7. Spesifikasi naratif untuk Use Case - Mendownload Book /Marker Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Mendownload Book /Marker User Sistem menampilkan halaman home Sistem menampilkan halaman download book untuk download book/marker Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan Book/Marker halaman download book 3. User mengklik button 4. Akan ditampilkan “download” halaman google drive. 5. User mendownload file

Tabel 3. 8. Spesifikasi naratif untuk Use Case - Melihat Informasi Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Melihat Informasi User Sistem menampilkan halaman home Sistem menampilkan halaman Informasi yang berisi menu informasi terdiri dari spesifikasi, cara penggunaan dan deskripsi candi Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan Informasi halaman menu informasi yang terdiri dari spesifikasi, cara penggunaan aplikasi dan deskripsi candi

Tabel 3. 9. Spesifikasi naratif untuk Use Case - Melihat Spesifikasi Android Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Melihat Spesifikasi Android User Sistem menampilkan halaman menu informasi Sistem menampilkan halaman spesifikasi yang berisi mengenai spesifikasi minimum dari perangkat android untuk menjalankan aplikasi. Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan Informasi halaman menu informasi yang terdiri dari spesifikasi dan cara penggunaan aplikasi serta deskripsi candi 3. User memilih Menu 4. Sistem menampilkan Spesifikasi halaman mengenai


49 spesifikasi minimal untuk menjalankan aplikasi.

Tabel 3. 10. Spesifikasi naratif untuk Use Case – Melihat Cara Penggunaan Aplikasi Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Melihat Cara Penggunaan Aplikasi User Sistem menampilkan halaman informasi Sistem menampilkan halaman mengenai cara penggunaan dari aplikasi. Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan Informasi halaman menu informasi yang terdiri dari spesifikasi, cara penggunaan aplikasi dan deskripsi candi 3. User memilih Menu Cara 4. Sistem menampilkan Penggunaan halaman mengenai cara penggunaan aplikasi.

Tabel 3. 11. Spesifikasi naratif untuk Use Case - Melihat Deskripsi Candi Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Melihat Deskripsi Candi

User Sistem menampilkan halaman informasi Sistem menampilkan halaman menu mengenai deskripsi dari tiap-tiap candi Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan Informasi halaman menu informasi 3. User memilih Menu yang terdiri dari spesifikasi Deskripsi Candi ,cara penggunaan dan deskripsi candi. 4. Sistem menampilkan halaman menu deskripsi candi.

Tabel 3. 12. Spesifikasi naratif untuk Use Case – Memilih Candi Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Memilih Candi

User Sistem menampilkan halaman informasi . Sistem menampilkan halaman menu mengenai deskripsi dari tiap-tiap candi Sistem menampilkan halaman Deskripsi Candi sesuai dengan candi yang dipilih Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan halaman Informasi menu informasi yang terdiri dari 3. User memilih Menu spesifikasi ,cara penggunaan dan Deskripsi Candi deskripsi candi.


50 4. User memilih deskripsi candi yang diinginkan.

5. Sistem menampilkan halaman deskripsi candi sesuai pilihan

Tabel 3. 13. Spesifikasi naratif untuk Use Case – Melihat Tentang Aplikasi Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Melihat Tentang Aplikasi User Sistem menampilkan halaman home Sistem menampilkan halaman tentang aplikasi Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan Tentang halaman tentang aplikasi Candi Indonesia Augmented Reality Book.

Tabel 3. 14. Spesifikasi naratif untuk Use Case – Mengerjakan Kuis Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Mengerjakan Kuis User Sistem menampilkan halaman home Ditampilkan Halaman Level Select dan User dapat memulai Kuis Aksi Aktor Reaksi Sistem 1. User memilih Menu Kuis 2. Sistem menampilkan 3. User dapat memulai halaman “Level Select” mengerjakan Kuis.

Tabel 3. 15. Spesifikasi naratif untuk Use Case – Keluar dari Aplikasi Name Usecase Aktor Utama Kondisi Awal Kondisi Akhir Skenario Sukses

Keluar dari Aplikasi User Sistem menampilkan halaman home Menampilkan halaman konfirmasi keluar Aksi Aktor Reaksi Sistem 1. User memilih Menu 2. Sistem menampilkan Keluar halaman konfirmasi keluar 3. User memilih “Tidak” dari aplikasi 5. User memilih “Ya” 4. akan ditampilkan halaman Home 6. Keluar dari Aplikasi

3.4.2.2. Activity Diagram Activity diagram menggambarkan berbagai aliran aktivitas dalam sistem yang dirancang, bagaimana masing-masing fungsionalitas bekerja, dan bagaimana suatu fungsional berakhir. Activity Diagram dari aplikasi yang akan dibangun adalah :


51 3.4.2.2.1. Activity Diagram - Memilih Scan Marker

Gambar 3. 6. Activity Diagram – Memilih Scan Marker Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Scan Marker” 5. Halaman Menu Scan Marker Candi ditampilkan.


52 3.4.2.2.1. Activity Diagram – Melakukan Scan Marker Candi

Gambar 3. 7. Activity Diagram – Melakukan Scan Marker Candi Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Scan Marker” 5. Halaman Menu Scan Marker Candi ditampilkan. 6. User memilih candi, setelah itu mengarahkan kamera android ke marker. 7. Selanjutnya kamera akan mengidentifikasi marker apakah pola marker sesuai dengan templates memory.


53 8. Jika marker terdeteksi, maka Object 3D candi akan tampil diatas marker sesuai candi yang dipilih. 9. User dapat menyalakan/mematikan Music dengan memilih button “ON/OFF” . 3.4.2.2.2. Activity Diagram – Melihat Informasi

Gambar 3. 8. Activity Diagram – Melihat Informasi Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Informasi” 5. Halaman Menu Informasi ditampilkan.


54

3.4.2.2.2.1. Activity Diagram – Melihat Spesifikasi Android

Gambar 3. 9. Activity Diagram – Melihat Spesifikasi Android Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Informasi” 5. Halaman Menu Informasi ditampilkan. 6. User memilih button “Spesifikasi” . 7. Halaman Spesifikasi ditampilkan.


55 3.4.2.2.2.2. Activity Diagram – Melihat Cara Penggunaan Aplikasi

Gambar 3. 10. Activity Diagram – Melihat Cara Penggunaan Aplikasi Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Informasi”. 5. Halaman Menu Informasi ditampilkan. 6. User memilih button “Cara Penggunaan Aplikasi” 7. Halaman Cara Penggunaan Aplikasi ditampilkan.


56 3.4.2.2.3. Activity Diagram – Mendownload Book/Marker

Gambar 3. 11. Activity Diagram – Mendownload Book/Marker Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Book/Marker”. 5. Halaman Book/Marker ditampilkan. 6. User memilih button “Download” 7. Halaman Google Drive ditampilkan


57 3.4.2.2.4. Activity Diagram – Melihat Tentang Aplikasi

Gambar 3. 12. Activity Diagram – Melihat Tentang Aplikasi Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Tentang” 5. Halaman Tentang Aplikasi ditampilkan.


58

3.4.2.2.5. Activity Diagram – Mengerjakan Kuis

Gambar 3. 13. Activity Diagram – Mengerjakan Kuis Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Kuis” 5. Halaman Kuis (Level Select) ditampilkan.


59 3.4.2.2.6. Activity Diagram – Keluar dari Aplikasi

Gambar 3. 14. Activity Diagram – Keluar dari Aplikasi Keterangan: 1. User menjalankan Aplikasi 2. Halaman Splash screen ditampilkan. 3. Selanjutnya Halaman Home ditampilkan. 4. User memilih button “Keluar” 5. Halaman Konfirmasi Keluar ditampilkan. 6. Jika User memilih button “Tidak” , selanjutnya Halaman Home ditampilkan 7. Jika User memilih button “Ya” , selanjutnya akan keluar dari Aplikasi.


60 3.4.2.3. Sequence Diagram Sequence diagram (diagram urutan) adalah suatu diagram yang memperlihatkan atau menampilkan interaksi-interaksi antar objek di dalam sistem yang disusun pada sebuah urutan atau rangkaian waktu. Berikut ini adalah sequence diagram yang digunakan: 3.4.2.3.1. Sequence Diagram – Memilih Scan Marker

Gambar 3. 15. Sequence Diagram –Memilih Scan Marker Keterangan:

1. User menjalankan Aplikasi . 2. Halaman Home akan ditampilkan, setelah halaman splash screen ditampilkan. 3. User memilih button “Scan Marker” 4. Halaman Menu Scan Marker Candi Indonesia ditampilkan.


61 3.4.2.3.2. Sequence Diagram – Melakukan Scan Marker Candi

Gambar 3. 16. Sequence Diagram – Melakukan Scan Marker Candi Keterangan:

1. 2. 3. 4. 5. 6. 7. 8. 9.

User menjalankan Aplikasi ARCI. Halaman Home ditampilkan setelah halaman Splash Screen. User memilih button “Scan Marker” Halaman Menu Scan Marker Candi Indonesia ditampilkan. User memilih scan marker candi yang diinginkan. Halaman Scan Marker Candi yang dipilih akan ditampilkan. User mengarahkan kamera android ke Marker. Jika marker terdeteksi, maka object 3d candi akan ditampilkan. User dapat ON/OFF Music.


62 3.4.2.3.2.1. Sequence Diagram – Melihat Informasi

Gambar 3. 17. Gambar 3. 16. Sequence Diagram – Informasi Keterangan:

1. 2. 3. 4.

User menjalankan Aplikasi ARCI. Halaman Home ditampilkan setelah halaman Splash Screen. User memilih button “Informasi” Halaman Menu Informasi ditampilkan.

3.4.2.3.2.1.1. Sequence Diagram – Melihat Spesifikasi Android

Gambar 3. 18.. Sequence Diagram – Melihat Spesifikasi Android


63 Keterangan:

1. User menjalankan Aplikasi . 2. Halaman Home akan ditampilkan setelah halaman Splash Screen ditampilkan. 3. User memilih button “Informasi” 4. Halaman Menu Informasi ditampilkan. 5. User memilih button “Spesifikasi”. 6. Halaman Spesifikasi dari perangkat Android akan ditampilkan. 3.4.2.3.2.1.2. Sequence Diagram – Melihat Cara Penggunaan Aplikasi

Gambar 3. 19.. Sequence Diagram – Melihat Cara Penggunaan Aplikasi

Keterangan:

1. User menjalankan Aplikasi ARCI. 2. Halaman Home akan ditampilkan setelah halaman Splash Screen ditampilkan. 3. User memilih button “Informasi” 4. Halaman Menu Informasi ditampilkan. 5. User memilih button “Cara Penggunaan Aplikasi”. 6. Halaman Cara Penggunaan Aplikasi ditampilkan.


64 3.4.2.3.2.1.3. Sequence Diagram – Melihat Deskripsi Candi

Gambar 3. 20. Sequence Diagram – Deskripsi Candi Keterangan:

1. User menjalankan Aplikasi 2. Halaman Home akan ditampilkan setelah halaman Splash Screen ditampilkan. 3. User memilih button “Informasi” 4. Halaman Menu Informasi ditampilkan. 5. User memilih button “Deskripsi Candi”. 6. Halaman Menu Deskripsi Candi ditampilkan


65

3.4.2.3.2.1.3.1. Sequence Diagram – Memilih Candi

Gambar 3. 21. Sequence Diagram – Pilih Candi Keterangan:

1. 2. 3. 4. 5. 6. 7. 8.

User menjalankan Aplikasi ARCI. Halaman Home akan ditampilkan. User memilih button “Informasi” Halaman Menu Informasi ditampilkan. User memilih button “Deskripsi Candi”. Halaman Menu Deskripsi Candi ditampilkan. User memilih Deskripsi Candi yang diinginkan. Halaman Deskripsi Candi yang dipilih ditampilkan.


66 3.4.2.3.3. Sequence Diagram – Melihat Tentang Aplikasi

Gambar 3. 22. Sequence Diagram – Melihat Tentang Aplikasi Keterangan:

1. User menjalankan Aplikasi ARCI. 2. Halaman Home akan ditampilkan setelah halaman Splash Screen ditampilkan. 3. User memilih button “Tentang”. 4. Halaman Tentang Aplikasi ditampilkan.


67 3.4.2.3.4. Sequence Diagram – Mendownload Book / Marker

Gambar 3. 23. Sequence Diagram – Mendownload Book/Marker Keterangan:

1. User menjalankan Aplikasi . 2. Halaman Home akan ditampilkan setelah halaman Splash Screen ditampilkan. 3. User memilih button “Book/Marker”. 4. Halaman Download Book/Marker ditampilkan. 5. User memilih button “Download”. 6. Halaman Google Drive akan ditampilkan.


68 3.4.2.3.5. Sequence Diagram – Mengerjakan Kuis

Gambar 3. 24. Sequence Diagram – Mengerjakan Kuis Keterangan: 1. User menjalankan Aplikasi. 2. Halaman Home akan ditampilkan. 3. User memilih button “Kuis”. 4. Halaman Kuis ditampilkan dan User dapat memulai Kuis


69 3.4.2.3.6. Sequence Diagram – Keluar dari Aplikasi

Gambar 3. 25. Sequence Diagram – Keluar dari Aplikasi Keterangan: 1. User menjalankan Aplikasi. 2. Halaman Home akan ditampilkan setelah halaman Splash Screen ditampilkan. 3. User memilih button “Keluar”. 4. Halaman Konfirmasi Keluar ditampilkan. 3.5. Perancangan System Perancangan sistem bertujuan untuk memberikan gambaran sistem yang dibuat. Perancangan disini terdiri dari perancangan struktur menu dan perancangan antarmuka. 3.5.1. Perancangan Struktur Menu Perancangan Struktur Menu berfungsi untuk mendeskripsikan menu-menu apa saja yang berada dalam aplikasi. Berikut ini adalah perancangan struktur menu dari aplikasi yang akan dibuat:


70

Gambar 3. 26. Perancangan Struktur Menu 3.5.2. Perancangan Antarmuka (Design Interface) Desain antarmuka harus dilakukan pada proses pembuatan aplikasi augmented reality. Tujuan dari desain antarmuka adalah agar aplikasi yang dihasilkan terlihat sederhana, menarik dan mudah dimengerti. Berikut adalah desain antarmuka dari aplikasi Candi Indonesia Augmented Reality Book.


71 3.5.2.1. Perancangan Antarmuka – Splash Screen

Gambar 3. 27. Perancangan Antarmuka – Splash Screen

3.5.2.2. Perancangan Antarmuka – Halaman Home

Gambar 3. 28. Perancangan Antarmuka – Halaman Utama


72 3.5.2.3. Perancangan Antarmuka – Halaman Scan Marker

Gambar 3. 29. Perancangan Antarmuka – Halaman Scan Marker

3.5.2.4. Perancangan Antarmuka – Halaman Loading

Gambar 3. 30. Perancangan Antarmuka – Halaman Loading


73 3.5.2.6. Perancangan Antarmuka – Halaman Scan Marker Candi

Gambar 3. 31. Perancangan Antarmuka – Halaman Scan Marker Candi

3.5.2.7. Perancangan Antarmuka – Halaman Informasi

Gambar 3. 32. Perancangan Antarmuka – Halaman Informasi


74 3.5.2.7.1. Perancangan Antarmuka – Halaman Spesifikasi

Gambar 3. 33.. Perancangan Antarmuka – Halaman Spesifikasi 3.5.2.7.2. Perancangan Antarmuka – Halaman Cara Penggunaan

Gambar 3. 34. Perancangan Antarmuka – Halaman Cara Penggunaan


75 3.5.2.7.3. Perancangan Antarmuka – Halaman Deskripsi Candi

Gambar 3. 35. Perancangan Antarmuka – Halaman Deskripsi Candi

3.5.2.8. Perancangan Antarmuka – Halaman Download Book / Marker

Gambar 3. 36. Perancangan Antarmuka – Halaman Book/Marker


76 3.5.2.9. Perancangan Antarmuka – Halaman Tentang

Gambar 3. 37. Perancangan Antarmuka – Halaman Tentang

3.5.2.10 Perancangan Antarmuka – Halaman Kuis

Gambar 3. 38. Perancangan Antarmuka – Halaman Kuis


77 3.5.2.10.1. Perancangan Antarmuka – Halaman Jawaban Benar

Gambar 3. 39. Perancangan Antarmuka – Halaman Jawaban Benar

3.5.2.10.2. Perancangan Antarmuka – Halaman Jawaban Salah

Gambar 3. 40. Perancangan Antarmuka – Halaman Jawaban Salah


78 3.5.2.10.3. Perancangan Antarmuka – Halaman Quiz Completed

Gambar 3. 41. Perancangan Antarmuka – Halaman Quiz Complete


BAB III ANALISA DAN PERANCANGAN

Recommend Documents