BAB III KONSEP DAN PERANCANGAN 3.1 Konsep Dalam membuat aplikasi simulasi gerakan shalat berbasis Augmented Reality tentunya diawali dengan membuat konsep. Pada konsep ini berisi mengenai analisis masalah, analisis kebutuhan sistem, deskripsi umum sistem dan alur kerja sistem. 3.1.1 Analisis Masalah Panduan gerakan shalat pada umumnya hanya terdapat pada buku, CD tutorial, artikel dan video di internet. Namun panduan dengan media tersebut memiliki keterbatasan dalam hal penggambaran gerakan shalat. Media tersebut hanya menampilkan sebagian gerakan saja seperti gambar yang hanya menampilkan pose pada gerakan tertentu sehingga bagi yang belum pernah sama sekali melihat gerakan shalat sepenuhnya akan timbul berbagai macam pertanyaan mengenai bagaimana gerakan tersebut seharusnya dilakukan dari awal hingga akhir. Penulis mencoba menjawab permasalahan tersebut dengan membangun aplikasi simulasi gerakan shalat yang menggunakan teknologi Augmented Reality pada platform Android. Penulis sengaja menggunakan platform Android karena portabilitasnya yang mudah dibawa dan nyaman untuk digenggam daripada harus menggunakan komputer PC ataupun laptop yang dirasa terlalu sulit untuk anak- 41
42 anak dalam mempelajari gerakan shalat. Perangkat Android kini juga sudah banyak terdapat di pasaran dan harganya mulai terjangkau untuk kalangan menengah, juga menjadi trend masa kini karena kemampuanya yang multifungsi dan bisa diandalkan untuk berbagai macam keperluan. 3.1.2 Analisis Kebutuhan Sistem Analisis kebutuhan sistem adalah tahap yang sangat penting dalam proses pengembangan perangkat lunak, untuk mempermudah menganalisis sebuah sistem, dibutuhkan dua jenis kebutuhan, kebutuhan fungsional dan kebutuhan nonfungsional. Kebutuhan fungsional adalah kebutuhan yang berisi proses-proses apa saja yang nantinya dilakukan oleh sistem. Sedangkan kebutuhan nonfungsional adalah kebutuhan yang menitikberatkan pada properti yang berkaitan dengan sistem. 3.1.2.1 Kebutuhan fungsional 1. Pengguna dapat melihat informasi gerakan shalat yang sedang berlangsung. 2. Sistem harus mampu menampilkan objek virtual tiga dimensi berupa karakter manusia yang dapat melakukan gerakan shalat. 3. Karakter mampu mengucapkan bacaan-bacaan shalat. 4. Pengguna dapat melihat karakter dari berbagai sudut pandang dengan navigasi yang mudah. 5. Pengguna dapat membuat marker dari gambar apapun yang diambil menggunakan kamera perangkat android.
43 6. Sistem harus mampu mendeteksi marker yang telah didefinisikan oleh pengguna. 7. Sistem harus mampu menampilkan background dinamis yang direkam menggunakan kamera secara realtime. 3.1.2.2 Kebutuhan nonfungsional Spesifikasi minimum yang dibutuhkan untuk menjalankan aplikasi dengan baik adalah sebagai berikut: 1. Menggunakan sistem operasi Android 2.3.4 (Gingerbread) atau lebih baru. 2. Prosesor dengan kecepatan 1 GHz (ARMv7) atau lebih. 3. RAM dengan kapasitas minimum 512 MB. 4. Kamera dengan fitur Autofocus. 5. Disarankan memiliki GPU yang mendukung OpenGLES 2.0. 3.1.3 Deskripsi Umum Sistem Aplikasi Simulasi gerakan shalat akan menirukan gerakan shalat dari awal hingga akhir kedalam bentuk virtual tiga dimensi. Shalat yang akan disimulasikan adalah waktu shalat yang sedang berlangsung sebenarnya, misalnya pada pukul 12 siang maka sistem akan mensimulasikan gerakan shalat dzuhur. Pengguna akan dapat melihat simulasi gerakan shalat dalam dua jenis tampilan, virtual reality dan augmented reality. Tampilan pada virtual reality akan terdapat mushola virtual sebagai lingkungannya sedangkan pada augmented reality akan terdapat lingkungan nyata sebagai lingkungannya.
44 Gambar 3.1 Data Flow Diagram lingkungan aplikasi Vuforia AR SDK (Sumber: https://developer.vuforia.com/resources/dev-guide/vuforia-ar-architecture) Simulasi gerakan shalat berbasis Augmented Reality ini menggunakan metode User Defined Targets dimana terlihat seperti gambar 3.1 Pengguna menggunakan kamera android yang kemudian sistem melakukan proses konversi Format Pixel dari inputan camera frame atau bisa disebut juga proses capture foto yang kemudian didefinisikan sebagai tracker. Dalam ruang lingkup tracker terjadi proses pendeteksian objek baru, dalam hal ini yang dideteksi adalah marker / foto yang sudah didefinisikan sebelumnya, kemudian setelah objek / marker terdeteksi sistem melakukan load data dari database lokal berupa karakter. Setelah data di-load, sistem melakukan tracking pada marker yang terdeteksi tersebut kemudian dilanjutkan proses konversi frame kembali untuk dilakukan proses selanjutnya yaitu pada ruang lingkup aplikasi dilakukan proses pemanggilan objek menggunakan query yang dilanjutkan pada proses update logika dari aplikasi yang kemudian dilakukan proses render graphics berupa
45 objek karakter. Output yang dihasilkan terdiri dari dua layer yaitu layer background dan layer foreground. Pada layer background sistem melakukan render camera preview sebagai visual reality / lingkungan nyata dan pada layer foreground dilakukan render objek virtual yang berupa karakter 3D yang kemudian kedua layer tersebut aktif secara bersamaan dan terlihat karakter 3D menempel pada dunia nyata (reality). 3.2 Perancangan Sistem Setelah membuat konsep dari aplikasi simulasi gerakan shalat berbasis Augmented Reality maka tahap selanjutnya adalah tahap perancangan, tahap perancangan akan menjelaskan secara rinci mengenai aplikasi yang akan dibuat sehingga dalam pengerjaanya akan lebih mudah dan terstruktur. 3.2.1 Perancangan Karakter Gambar 3.2 Rancangan karakter tampak depan dan tampak samping
46 Berdasarkan gambar 3.2, karakter yang akan melakukan simulasi gerakan shalat adalah anak laki-laki yang mengenakan baju muslim dan celana panjang, tentunya dengan celana panjang akan memudahkan pengguna untuk melihat posisi kaki karakter tidak seperti dengan menggunakan sarung yang sedikit menyulitkan pengguna untuk melihat posisi kaki karakter yang tertutup oleh sarung. 3.2.2 Storyboard Gambar 3.3 Storyboard gerakan shalat
47 Gambar 3.3 menunjukkan gerkan-gerakan dari rukun shalat yang terdiri dari niat, berdiri, takbiratul ihram, membaca iftitah, Al-fatihah dan surat pendek, ruku, I tidal, sujud, duduk diantara dua sujud, tasyahud awal, tasyahud akhir dan salam. 3.2.3 Pemodelan Diagram Use Case Diagram use case digunakan untuk menjelaskan dan menggambarkan sistem dan perilaku pengguna terhadap sistem. Use case diagram menekankan tentang apa yang akan diperbuat oleh sistem dan bukan menekankan bagaimana sistem tersebut bertindak. Pengguna sistem diwakili oleh aktor, sedangkan perilakunya diwakili oleh use case. Melihat tampilan VR Melihat tampilan AR «include» Membuat marker Pengguna Membuka informasi dan kredit <<extends>> Mendeteksi marker Gambar 3.4 Diagram Use Case aplikasi simulasi gerakan shalat Spesifikasi skenario diagram use case aplikasi simulasi gerakan shalat akan dijelaskan dalam tabel 3.1.
48 Tabel 3.1 Spesifikasi skenario use case menampilkan tampilan VR Nama Use Case Melihat tampilan virtual reality Aktor Pengguna aplikasi Deskripsi Singkat Pengguna dapat melihat karakter dengan visualisasi tiga dimensi dengan memilih menu VR pada halaman utama Skenario 1. Sistem berada pada menu utama 2. Pengguna memilih menu VR 3. Sistem menampilkan scene virtual reality 4. Pengguna menekan tombol mulai 5. Karakter melakukan gerakan shalat 6. Pengguna melakukan sliding pada layar 7. Kamera berputar mengelilingi karakter Kondisi Awal Aplikasi Simulasi Shalat terpasang pada gadget android Kondisi Akhir Aplikasi menampilkan simulasi gerakan shalat berbasis virtual reality Tabel 3.2 Spesifikasi skenario use case menampilkan tampilan AR Nama Use Case Melihat tampilan augmented reality Aktor Pengguna aplikasi Deskripsi Singkat Pengguna dapat melihat karakter dengan visualisasi augmented reality dengan memilih menu AR pada halaman utama Skenario 1. Sistem berada pada menu utama 2. Pengguna memilih menu AR 3. Sistem menampilkan scene augmented reality 4. Pengguna menekan tombol plus (+) 5. Sistem menampilkan mode ambil gambar 6. Pengguna menakan tombol kamera 7. Karakter muncul pada layar 8. Pengguna menekan tombol mulai 9. Karakter melakukan gerakan shalat 10. Pengguna menggerakkan ponsel android 11. Kamera bergerak sesuai arah kamera pengguna
49 Tabel 3.2 Spesifikasi skenario use case menampilkan tampilan AR Lanjutan Kondisi Awal Aplikasi Simulasi Shalat terpasang pada gadget android Kondisi Akhir Aplikasi menampilkan simulasi gerakan shalat berbasis augmented reality Tabel 3.3 Spesifikasi skenario use case menampilkan informasi dan kredit Nama Use Case Melihat informasi dan kredit Aktor Pengguna aplikasi Deskripsi Singkat Pengguna dapat melihat informasi pembuat aplikasi dan hal-hal yang berkaitan dengan pembuatan aplikasi Skenario 1. Membuka aplikasi 2. Sistem menampilkan menu utama 3. Pengguna memilih icon c pada layar 4. Sistem menampilkan scene informasi dan kredit 5. Pengguna dapat melihat informasi tentang aplikasi Kondisi Awal Aplikasi Simulasi Shalat terpasang pada gadget android Kondisi Akhir Aplikasi menampilkan informasi pembuat aplikasi 3.2.4 Pemodelan Diagram Activity Activity diagram menjelaskan tentang berbagai aktivitas yang berlangsung selama pengguna berinteraksi dengan sistem. Activity diagram akan membantu menjelaskan diagram use case lebih mendalam. Diagram Activity pada gambar 3.5 berikut ini menjelaskan interaksi antara pengguna dengan aplikasi yang berbasis VR (virtual reality). 3.2.4.1 Diagram Activity Scene VR Pada Gambar 3.5 berikut, aktivitas dimulai ketika pengguna memilih menu VR. Sistem akan menentukan waktu shalat berdasarkan jam yang sedang berlangsung, kemudian menampilkan scene virtual reality berdasarkan waktu
50 shalat. Di dalam scene VR terdapat lingkungan virtual berupa mushala dan karakter anak laki-laki yang hendak melaksanakan shalat. Ketika semua asset telah di-load ke memory maka sistem akan menampilkan pop-up berupa tombol untuk memulai gerakan shalat. Pengguna Sistem Memilih Menu VR menentukan waktu shalat dan menampilkan scene VR Menekan tombol mulai Menampilkan informasi gerakan Karakter melakukan gerakan shalat Mengeluarkan suara bacaan shalat Melakukan Sliding pada layar ya Kamera bergerak mengelilingi karakter tidak Kamera berada pada posisi terakhir kali digerakkan Gerakan shalat telah selesai Menampilkan pilihan ulang dan exit ulang exit kembali ke scene menu Gambar 3.5 Diagram Activity Scene VR Pengguna menekan tombol mulai dan karakter mulai melakukan gerakan shalat beserta bacaanya. Pengguna dapat melihat karakter dengan 360 º view
51 dengan cara melakukan sliding pada layar maka kamera virtual akan bergerak mengelilingi karakter. Ketika gerakan shalat telah selesai maka sistem akan menampilkan pop-up dialog berupa pilihan untuk mengulang atau kembali ke menu utama. 3.2.4.2 Diagram Activity Scene AR Diagram Activity berikut ini akan menjelaskan interaksi antara pengguna dengan sistem yang berbasis AR (Augmented reality). Pengguna Sistem Memilih Menu AR Menentukan waktu shalat dan menampilkan scene AR Menekan tombol (plus) Menampilkan Scanning Mode Mencari gambar dan menekan tombol kamera Memasukan gambar ke data sementara Menampilkan tombol mulai Memposisikan kamera pada gambar Karakter tidak ditampilkan Gambar dikenali? tidak ya Menampilkan karakter Menekan tombol mulai Menampilkan informasi gerakan Karakter melakukan gerakan shalat Apakah anda ingin keluar atau ulang? ulang Gerakan shalat telah selesai exit kembali ke scene menu Gambar 3.6 Diagram Activity Scene AR
52 Pada gambar 3.6, aktivitas dimulai ketika pengguna memilih menu AR. Sistem akan menentukan waktu shalat, kemudian menampilkan scene Augmented Reality berdasarkan waktu shalat. Berbeda dengan scene VR, scene AR tidak terdapat lingkungan virtual berupa mushala, tetapi hanya karakter dengan sajadah. Pengguna menekan tombol plus yang berada pada sisi kanan layar kemudian sistem akan menampilkan scan mode. Pada scan mode pengguna dapat mencari gambar untuk dijadikan sebagai marker. Setelah marker dibuat maka pengguna dapat memposisikan kamera perangkat android agar gambar dapat terdeteksi. Apabila gambar terdeteksi maka sistem akan menampilkan karakter yang berdiri diatas marker. Setelah marker terdeteksi sistem akan menampilkan pop-up berupa tombol untuk memulai gerakan shalat. Karakter melakukan gerakan shalat berdasarkan waktu yang sedang berlangsung. Diagram Activity berikut ini menjelaskan interaksi pengguna untuk melihat credit atau author dari pembuat aplikasi. Pengguna Sistem Menekan tombol Credit Menampilkan Scene Credit Menekan tombol back pada gadget Menampilkan Scene Menu Gambar 3.7 Diagram Activity Scene Credit
53 Pada gambar 3.7 aktivitas dimulai ketika pengguna menekan tombol credit. Sistem akan menampilkan informasi mengenai hal-hal yang berkaitan dengan aplikasi. 3.2.5 Pemodelan Diagram Class Class diagram merupakan diagram yang menggambarkan struktur dan penjelasan kelas, paket dan objek serta hubungan satu sama lain seperti pewarisan, asosiasi dan lain-lain. Class diagram memberikan gambaran statis tentang sistem atau perangkat lunak yang kompleks. LoadingManager +waktu : int +waktushalat : string +alphafade : float +loadingskin : GUISkin +hitamtexture : Texture +scene : string +Awake() +Start() +Update() +OnGUI() -LoadUserDefTargetsScene() UserDefinedTargetEventHandler -mtargetbuildingbehaviour -mimagetracker -muserinterface -mscanmodeuilogic -mbuiltdataset -moninitializedcalled -mtargetcounter -mcurrenttargetname -mdoshowinstructions -mdrawinstructionsflag 1 1 1 1 1 UserDefinedTargetMenu -mmenuopen -mcontinousafsupported -mwaitingforsecondtap -mfirsttapposition -mfirsttaptime -muiskin -AUTOFOCUS_ON -AUTOFOCUS_OFF -mautofocustext +Start() +Update() +OnGUI() +OnInitialized() +OnTrackablesUpdated() -HandleSingleTap() -HandleDoubleTap() UserDefinedTargetBuildingUI +ButtonID +TextureName +HorizontalPosition -Instructions_margin -navigation_bar_size -minitialized -mtextures -muiskin -stexturenames -mlastviewfindercolor +ButtonPressed() +Skin() +DeviceDependentScale() +UserDefinedTargetBuildingUI() +BeginOnGUI() +DrawViewFinder() +DrawNavigationBarBackground() +DrawHelpBar() +DrawViewFinderModeLandscapeUI() +DrawViewFinderModePortraitUI() +DrawScanningModeLandscapeUI() +DrawScanningModePortraitUI() +DrawInstructionsPortraitUI() +DrawInstructionsLandscapeUI() +OnInitialized() +OnFrameQualityChanged() +OnNewTrackableSource() +Start() +Update() +OnGUI() -BuildNewTarget() 1 ScanModeUILogic -muserinterface -mstartbuildingcallback -mstopscanningcallback +ScanModeUILogic() +DrawUI() 1 1 DefaultTrackableEventHandler -mtrackablebehaviour +aktif +Start() +OnTrackableStateChanged() +OnTrackingFound() -OnTrackingLost() Gambar 3.8 Diagram Class Scene Augmented Reality
54 Terdapat 80 class/namespace yang ada dalam package vuforia sehingga cukup sulit bagi penulis untuk menganalisa dan menjelaskan dalam bentuk class diagram. Pada gambar 3.8 hanya kelas yang berkaitan dengan proses pendeteksian marker yang menggunakan metode user-defined image yang ditampilkan dalam class diagram. Berikut adalah kelas-kelas yang berkaitan dengan proses pendeteksian marker : 1. Kelas LoadingManager Kelas ini berfungsi sebagai pengatur scene apa yang harus dimuat berdasarkan waktu shalat yang sedang berlangsung. Kelas ini juga berfungsi untuk menghindari kecenderungan aplikasi menjadi freeze ketika proses loading data ke memory sedang berlangsung. 2. Kelas UserDefinedTargetMenu Kelas ini berfungsi sebagai menu untuk mengaktifkan fitur auto focus pada perangkat android, menu ini akan aktif apabila perangkat mendukung fitur auto focus. 3. Kelas UserDefinedTargetEventHandler Kelas ini berfungsi untuk menangani event yang berada pada lingkungan vuforia. Pada kelas ini terdapat fungsi untuk menangani pembuatan marker, data set, pendeteksian marker dan target counter untuk multi target detection. 4. ScanModeUILogic Kelas ini berfungsi untuk menangani proses pengambilan gambar yang akan dijadikan sebagai marker. Kelas ini juga menampilkan user interface
55 sebagai informasi kepada pengguna mengenai proses scanning yang sedang berlangsung. 5. Kelas DefaultTrackableEventHandler Kelas ini adalah kelas utama dari package vuforia yang berfungsi menangani event pada augmented reality yang sedang berlangsung. 6. Kelas UserDefinedTargetBuildingUI Kelas ini yang akan menangani antar muka pada lingkungan augmented reality secara keseluruhan. 3.2.6 Pemodelan Diagram Sequence Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk user, display dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah kejadian untuk menghasilkan output tertentu. Diawali dari apa yang memicu aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan. Sequence diagram pada gambar 3.9 berikut ini menjelaskan tentang proses interaksi antar pengguna dengan sistem dalam scene augmented reality. Pengguna membuka aplikasi dan memilih menu AR kemudian kelas loading Manager akan mengecek waktu dan memutuskan scene mana yang harus ditampilkan kemudian kelas BuildingUI akan memuat seluruh asset pada scene augmented reality. Kelas ScanModeUILogic berfungsi untuk mengambil gambar yang akan dijadikan
56 sebagai marker. Proses pendeteksian marker akan ditangani oleh kelas EventHandler, apabila marker terdeteksi maka kelas EventHandler akan menampilkan karakter, selanjutnya karakter akan melakukan gerakan shalat berdasarkan sequence gerakan shalat sesuai dengan waktu shalat. Pengguna Menu Utama Loading Manager BuildingUI ScanModeUILogic EventHandler karakter Membuka menu Menu AR Cek waktu shalat, Load resource Load scene berdasarkan waktu shalat Mengarahkan kamera pada gambar Menampilkan Scan mode Membuat Marker Marker berhasil dibuat Mendeteksi Marker Marker terdeteksi Tidak terdeteksi Tampilkan animasi gerakan shalat Gambar 3.9 Diagram Sequence Scene Augmented Reality
57 3.2.7 Perancangan Antar muka Perancangan antarmuka dibutuhkan untuk menjadi acuan dalam pembuatan antar muka aplikasi yang akan dibangun. Pada perancangan antarmuka hanya dibuat dalam bentuk layout tanpa warna, sehingga hanya menampilkan letak-letak elemen dari aplikasi, seperti tombol, teks, gambar, dan elemen pendukung lainya. 3.2.7.1 Antarmuka Scene Menu Pada rancangan antarmuka scene menu ini terdapat beberapa tombol pilihan untuk memilih scene yang akan dipilih. Nama Aplikasi Karakter VR AR credit Gambar 3.10 Rancangan antarmuka halaman menu 3.2.7.2 Antarmuka Scene VR Pada rancangan antarmuka scene VR ini terdapat lingkungan 3D yang berisi karakter yang berdiri di atas sajadah serta lingkungan yang tampak seperti Mushola. Pada rancangan antarmuka scene VR terdapat juga informasi berupa teks mengenai gerakan shalat yang sedang dikerjakan.
58 Informasi rakaat & gerakan Lingkungan 3D Karakter, Sajadah, Masjid Informasi mengenai gerakan shalat yang sedang dikerjakan Gambar 3.11 Rancangan antarmuka scene VR 3.2.7.3 Antarmuka Scene AR Pada rancangan antarmuka scene AR ini terdapat tombol + yang berfungsi untuk menambah gambar yang nantinya akan disimpan kedalam data sementara untuk dijadikan sebagai marker. Marker berfungsi sebagai titik tracking untuk menempatkan objek tiga dimensi. Selain itu juga terdapat informasi berupa teks mengenai gerakan shalat yang sedang dikerjakan. Informasi rakaat & gerakan Latar dari kamera Lingkungan 3D Karakter, Sajadah + Informasi mengenai gerakan shalat yang sedang dikerjakan Gambar 3.12 Rancangan antarmuka scene AR
59 3.2.7.4 Antarmuka Scene Credit Pada rancangan antarmuka scene Credit ini berisi teks mengenai hal-hal yang berkaitan dengan pembuatan aplikasi. Seperti tugas apa saja yang telah dilakukan pembuat aplikasi, alat yang dibutuhkan beserta keterangan-keterangan pendukung lainya yang berhubungan dengan pembuatan aplikasi dan ucapan terima kasih kepada orang-orang yang telah berjasa selama pembangunan aplikasi. Nama Aplikasi Keterangan yang berhubungan dengan pembuatan aplikasi Karakter Gambar 3.13 Rancangan antarmuka scene Credit