41 3.1Konsep
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-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.1Kebutuhan 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.
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.2Kebutuhan 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.
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
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.2Perancangan 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
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 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.
Pengguna Melihat tampilan VR Melihat tampilan AR Membuka informasi dan kredit Membuat marker Mendeteksi marker «include» <<extends>> 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.
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
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.1Diagram 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
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.
Sistem Pengguna
Memilih Menu VR menentukan waktu shalat dan menampilkan scene VR
Menekan tombol mulai
Karakter melakukan gerakan shalat
Kamera berada pada posisi terakhir kali digerakkan Melakukan Sliding pada layar Kamera bergerak mengelilingi karakter tidak ya
Menampilkan informasi gerakan
Mengeluarkan suara bacaan shalat
Menampilkan pilihan ulang
dan exit
Gerakan shalat telah selesai
kembali ke scene menu
ulang
exit
Gambar 3.5 Diagram ActivityScene VR
Pengguna menekan tombol mulai dan karakter mulai melakukan gerakan shalat beserta bacaanya. Pengguna dapat melihat karakter dengan 360 º view
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.2Diagram Activity Scene AR
Diagram Activity berikut ini akan menjelaskan interaksi antara pengguna dengan sistem yang berbasis AR (Augmented reality).
Sistem Pengguna
Memilih Menu AR Menentukan waktu shalat dan menampilkan scene AR
Memposisikan kamera pada gambar
Karakter melakukan gerakan shalat
Menekan tombol (plus) Menampilkan Scanning Mode
Mencari gambar dan menekan tombol kamera Memasukan gambar ke data sementara
Menekan tombol mulai
Gambar dikenali
?
Menampilkan karakter Karakter tidak ditampilkan
Menampilkan informasi gerakan
Gerakan shalat telah selesai tidak
ya
Menampilkan tombol mulai
Apakah anda ingin keluar atau
ulang?
kembali ke scene menu ulang
exit
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.
Sistem Pengguna
Menekan tombol Credit Menampilkan Scene Credit
Menekan tombol back pada gadget Menampilkan Scene Menu
Gambar 3.7 Diagram Activity Scene Credit
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.
+Awake() +Start() +Update() +OnGUI() -LoadUserDefTargetsScene() +waktu : int +waktushalat : string +alphafade : float +loadingskin : GUISkin +hitamTexture : Texture +scene : string LoadingManager +OnInitialized() +OnFrameQualityChanged() +OnNewTrackableSource() +Start() +Update() +OnGUI() -BuildNewTarget() -mTargetBuildingBehaviour -mImageTracker -mUserInterface -mScanModeUILogic -mBuiltDataSet -mOnInitializedCalled -mTargetCounter -mCurrentTargetName -mDoShowInstructions -mDrawInstructionsFlag UserDefinedTargetEventHandler +Start() +Update() +OnGUI() +OnInitialized() +OnTrackablesUpdated() -HandleSingleTap() -HandleDoubleTap() -mMenuOpen -mContinousAFSupported -mWaitingForSecondTap -mFirstTapPosition -mFirstTapTime -mUISkin -AUTOFOCUS_ON -AUTOFOCUS_OFF -mAutoFocusText UserDefinedTargetMenu +ScanModeUILogic() +DrawUI() -mUserInterface -mStartBuildingCallback -mStopScanningCallback ScanModeUILogic +ButtonPressed() +Skin() +DeviceDependentScale() +UserDefinedTargetBuildingUI() +BeginOnGUI() +DrawViewFinder() +DrawNavigationBarBackground() +DrawHelpBar() +DrawViewFinderModeLandscapeUI() +DrawViewFinderModePortraitUI() +DrawScanningModeLandscapeUI() +DrawScanningModePortraitUI() +DrawInstructionsPortraitUI() +DrawInstructionsLandscapeUI() +ButtonID +TextureName +HorizontalPosition -Instructions_margin -navigation_bar_size -mInitialized -mTextures -mUISkin -sTextureNames -mLastViewFinderColor UserDefinedTargetBuildingUI +Start() +OnTrackableStateChanged() +OnTrackingFound() -OnTrackingLost() -mTrackableBehaviour +aktif DefaultTrackableEventHandler 1 1 1 1 1 1 1 1
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
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 gambar3.9 berikut ini menjelaskan tentang proses
interaksi antar pengguna dengan sistem dalam sceneaugmented 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
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 Membuat Marker Marker berhasil dibuat Mendeteksi Marker Marker terdeteksi Load scene berdasarkan
waktu shalat
Tampilkan animasi gerakan shalat Mengarahkan kamera pada gambar
Menampilkan Scan mode
Tidak terdeteksi
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.1Antarmuka Scene Menu
Pada rancangan antarmuka scene menu ini terdapat beberapa tombol pilihan untuk memilih scene yang akan dipilih.
Gambar 3.10 Rancangan antarmuka halaman menu
3.2.7.2Antarmuka 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.
VR AR
Karakter
credit Nama Aplikasi
Gambar 3.11 Rancangan antarmuka scene VR
3.2.7.3Antarmuka 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.
Gambar 3.12 Rancangan antarmuka scene AR
Lingkungan 3D Karakter, Sajadah, Masjid
Informasi mengenai gerakan shalat yang sedang dikerjakan Informasi rakaat & gerakan
Latar dari kamera
Lingkungan 3D Karakter, Sajadah
Informasi rakaat & gerakan
Informasi mengenai gerakan shalat yang sedang dikerjakan
3.2.7.4Antarmuka SceneCredit
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.
Gambar 3.13 Rancangan antarmuka scene Credit
Karakter Nama Aplikasi Keterangan yang berhubungan dengan pembuatan aplikasi
