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
«include» Melihat tampilan AR
Membuat marker
<<extends>> Pengguna Membuka informasi dan kredit
Gambar 3.4
Mendeteksi marker
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
Menampilkan informasi gerakan
Menekan tombol mulai
Karakter melakukan gerakan shalat
Mengeluarkan suara bacaan shalat
ya
Melakukan Sliding pada layar
tidak
Kamera bergerak mengelilingi karakter
Kamera berada pada posisi terakhir kali digerakkan
Gerakan shalat telah selesai
ulang Menampilkan pilihan ulang dan exit
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 ? ya
tidak
Menampilkan karakter
Menekan tombol mulai Menampilkan informasi gerakan
Karakter melakukan gerakan shalat
Gerakan shalat telah selesai Apakah anda ingin keluar atau ulang?
ulang
kembali ke scene menu exit
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
Menekan tombol Credit
Menekan tombol back pada gadget
Sistem
Menampilkan Scene Credit
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
UserDefinedTargetMenu
+waktu : int +waktushalat : string +alphafade : float +loadingskin : GUISkin +hitamTexture : Texture +scene : string +Awake() +Start() +Update() +OnGUI() -LoadUserDefTargetsScene()
-mMenuOpen -mContinousAFSupported -mWaitingForSecondTap -mFirstTapPosition -mFirstTapTime -mUISkin -AUTOFOCUS_ON -AUTOFOCUS_OFF -mAutoFocusText +Start() +Update() +OnGUI() +OnInitialized() +OnTrackablesUpdated() -HandleSingleTap() -HandleDoubleTap()
1 1
1 1
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()
UserDefinedTargetEventHandler -mTargetBuildingBehaviour -mImageTracker -mUserInterface -mScanModeUILogic -mBuiltDataSet -mOnInitializedCalled -mTargetCounter -mCurrentTargetName -mDoShowInstructions -mDrawInstructionsFlag +OnInitialized() +OnFrameQualityChanged() +OnNewTrackableSource() +Start() +Update() +OnGUI() -BuildNewTarget()
1
ScanModeUILogic
1
-mUserInterface -mStartBuildingCallback -mStopScanningCallback +ScanModeUILogic() +DrawUI()
DefaultTrackableEventHandler
1
1
-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 Menampilkan Scan mode Membuat Marker Marker berhasil dibuat Mengarahkan kamera pada gambar
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
