APLIKASI AUGMENTED REALITY MONUMEN NEGARA ASEAN BERBASIS ANDROID

APLIKASI AUGMENTED REALITY MONUMEN NEGARA ASEAN BERBASIS

ANDROID

Pelaksana

Eel Susilowati., S.Kom., MM Felix Nandito Panggabean

UNIVERSITAS GUNADARMA JAKARTA

November 2020

.

APLIKASI AUGMENTED REALITY MONUMEN NEGARA ASEAN BERBASIS

ANDROID

Eel Susilowati., S.Kom., MM, Felix Nandito Panggabean .

eel@staff.gunadarma.ac.id

.

ABSTRAKSI

Pengenalan Monumen sudah banyak diberikan oleh sekolah dan para guru kepada siswa SD melalui media cetak seperti buku ataupun poster yang ditempel di dinding kelas..

Umumnya informasi yang ada di buku masih menggunakan gambar 2 dimensi dan buku dapat mudah rusak atau sobek karena terbuat dari kertas. Salah satu media yang dapat membantu menyelesaikan masalah adalah dengan membuat Augmented Relaity Monumen ASEAN berbasis Android. Aplikasi ini menampilkan 10 objek monumen beserta profil dari Negara-negara ASEAN.

Augmented Relaity Monumen ASEAN berbasis Android dibuat dengan menggunakan metode SDLC waterfall yang terdiri dari 5 tahapan yaitu, Analisis Kebutuhan, Desain Sistem, Implementasi & Tes Unit, Integrasi & Sistem Tes, Serta Penggunaan & Maintenance. Aplikasi Augmented Reality ini diharapkan dapat membantu masyarakat umum khususnya siswa SD mengenal monumen yang ada pada setiap Negara di ASEAN.

Hasil akhir yang diperoleh berupa sebuah Aplikasi bernama Monumen ASEAN dengan 10 Objek monumen, serta info mengenai profil seluruh Negara yang terdapat di wilayah ASEAN.

Kata Kunci: Augmented, Reality, Monumen, Vuforia, Android, Blender.

1. PENDAHULUAN

Augmented Reality (AR) adalah bidang penelitian komputer yang menggabungkan data komputer grafis 3D dengan dunia nyata. Pada saat ini Augmented Reality semakin berkembang dan mulai banyak juga aplikasi maupun library yang digunakan untuk mengembangkan Augmented Reality.

Misalnya ARToolkit, Flartoolkit, Goblin, dan lain-lain. Setelah marker terdeteksi maka akan muncul model 3D dari suatu barang. Model 3D ini dibuat dengan

menggunakan perangkat lunak untuk membuat desain objek 3D.

Augmented Reality (AR) dapat

digunakan untuk membantu masyarakat

menampilkan objek dalam bentuk 3D

yang hampir sama dengan objek asli di

dunia nyata. Dengan memanfaatkan

kemampuan menampilkan objek 3D

tersebut maka teknologi Augmented

Reality pada saat ini juga dapat

dimanfaatkan sebagai media untuk

pengenalan tentang Monumen

kenegaraan. Monumen kenegaraan adalah

ikon yang menjadi ciri khas sebuah negara.

Pengenalan tentang Monumen selama ini dapat dilakukan melalui media cetak seperti buku dan poster, namun penggunaan buku ini dirasa kurang efektif, dikarenakan buku yang terbuat dari kertas dapat mudah rusak atau sobek.

Selain itu masih banyak buku yang menggunakan gambar 2 dimensi, dan tidak memiliki animasi.

Berdasarkan penjelasan di atas, maka muncul ide untuk membuat aplikasi dengan menerapkan teknologi Augmented Reality pengenalan Monumen berbasis android dengan menampilkan 10 buah monument yang terdapat pada 10 negara di asia tenggara,. Model dari monumen tersebut dapat ditampilkan secara 3 Dimensi dan nyata dengan memanfaatkan teknologi augmented reality, sehingga siswa dapat melihat monumen yang ada pada aplikasi ini pada setiap sisi.

2. METODE PENELITIAN

Aplikasi ini dibuat dengan menggunakan metode penelitian SDLC waterfall terdiri 5 buah tahapan. Tahapan pertama adalah analisis kebutuhan.

Kebutuhan yang diperlukan adalah software, hardware, dan data yang akan digunakaan pada saat pembuatan aplikasi.

Tahap berikutnya adalah Desain sistem, pada tahap ini dilakukan penggambaran model dari aplikasi yang akan dibuat.

Penggambaran dilakukan dengan cara membuat struktur navigasi, Use Case, serta Activity Diagram. Tahap ketiga yaitu Implementasi & Test Unit, pada tahap ini dilakukan pembuatan aplikasi menggunakan Unity 3D dengan bantuan aplikasi Blender 3D untuk membuat model monument 3D. Kemudian setelah selesai dibangun, dilakukan pengujian

unit tiap Scene dengan menggunakan webcam. Tahap keempat yaitu Integrasi

& Sistem, integrase dilakukan untuk menyatukan seluruh scene pada unity untuk menjadi sebuah aplikasi utuh, setelah itu dilakukan system tes dengan menggunakan beberapa perangkat telepon genggam berbasis android. Tahap terakhir yaitu Penggunaan, pada tahap ini aplikasi telah dapat mulai digunakan.

3. AUGMENTED REALITY PENGENALAN MONUMEN

Monumen adalah bangunan yang dibangun untuk menandai atau mengingatkan atas terjadinya suatu peristiwa penting. Peristiwa tersebut dapat dikategorikan sebagai peristiwa heroik seperti perang dan proklamasi kemerdekaan atau peristiwa menyedihkan seperti tragedi pembunuhan massal atau bencana alam. monumen dan ingatan sosial menjadi salah satu sebab tempat ini tidak pernah sepi dari pengungjung.

Monumen juga tersebar di berbagai kota disetiap Negara yang ada di Asia Tenggara. Masyarakat di Asia Tenggara biasanya juga menggunakan monumen sebagai tempat untuk berwisata. beberapa sekolah juga menjadikan dasar sebagai tempat untuk studi wisata sembari belajar tentang sejarah.

Masyarakat terutama siswa SD juga dapat mengenal tentang monumen melalui media cetak seperti Buku. Namun penggunaan buku untuk pengenalan monumen kepada siswa SD dirasa kurang efektif. Penggunaan buku dirasa kurang dapat menarik minat siswa untuk dapat mengenal monumen, dikarenakan banyak buku yang masih menggunakan gambar 2 dimensi. Selain itu kebanyakan buku masih memiliki dimensi yang tidak kecil.

Buku yang dibawa secara terus-menerus

dapat membuat buku menjadi mudah

rusak ataupun sobek.

Berdasarkan masalah tersebut maka dibuatlah sebuah aplikasi yang dapat membantu para siswa untuk dapat melihat monumen-monumen yang ada di asia tenggara dengan model yang mirip dengan aslinya. Dalam pembuatan aplikasi ini terdapat beberapa tahapan yaitu :

3.1 Analisa Kebutuhan

Analisa kebutuhan dilakukan dengan 2 buah cara yaitu dengan pengamatan / observasi dan studi pustaka. Hasil berupa software, hardware, dan data yang dibutuhkan. software yang dibutuhkan untuk pembuatan aplikasi ini yaitu Unity 3D, Blender, serta StarUML. Hardware yang dibutuhkan adalah mouse, webcam, dan monitor sebagai output. Kemudian aplikasi ini juga membutuhkan data berupa gambar 3D objek monument dan profil negara-negara di Asia Tenggara.

3.2 Desain Kebutuhan

Perancangan pertama yang dibuat adalah membuat UML yaitu Use Case Diagram dan Activity Diagram.

Gambar 1. Use Case Diagram

Gambar diatas menunjukkan bahwa user dapat memilih menu Mulai, Panduan dan Tentang pada menu awal aplikasi.

Jika user memilih menu Mulai, user dapat memilih Negara yang diinginkan, setelah

user mengarahkan kamera ke marker maka akan muncul objek 3D dan tombol untuk melihat info dan memutar objek.

Gambar 2. Activity Diagram

Activity Diagram diatas menunjukkan alur kerja user dan sistem. Ketika user mengakses aplikasi maka akan muncul menu utama kemudian ketika user memilih tombol mulai makan akan tampil menu untuk memimilih neegara. Setelah user memilih Negara yang diinginkan maka Sistem akan menampilkan Kamera yang harus diarahkan oleh user ke marker. Jika marker terdeteksi maka akan tampil objek 3D jika tidak maka sistem akan mendeteksi kembali marker yang dipilih.

Selanjutnya adalah membuat Struktur Navigasi.

Gambar 3 Struktur Navigasi Hirarki

Struktur navigasi yang digunakan pada

aplikasi ini adalah struktur navigasi

Hirarki. Pada saat pengguna membuka aplikasi maka akan muncul Loading. Ketika masuk ke menu utama maka akan tampil pilihan menu utama berupa Mulai, Panduan, Tentang dan Keluar. Jika pengguna memilih tombol Mulai maka akan tampil scene untuk memilih Negara yang diinginkan.

Selanjutnya akan Tampil Objek 3D sesuai dengan Negara yang dipilh, dan juga akan tampil tombol untuk merotasi dan melihat info objek.

RANCANGAN TAMPILAN UI (User InterfaceGambar

Gambar 4. Tampilan Loading Scene

Gambar 5 Tampilan Menu Utama

Gambar 6 Tampilan Choosing Scene

Gambar 7 Tampilan Menu Tentang

Gambar 8 Tampilan Menu Panduan

Gambar 9 Tampilan ARCamera

3.3 Implementasi & Test Unit a. Mengunduh Objek 3D Monumen Langkah pertama adalah megunduh objek dasar terlebih dahulu yaitu monumen- monumen yang ada pada setiap Negara di Asia Tenggara.

1. Mencari objek monumen di Google, pada web Sketchfab ataupun 3D Warehouse. Yang selanjutnya mendownload pada web-web tertentu, karena tidak semuanya menyediakan objek dengan gratis.

Sebagai contoh

https://sketchfab.com/feed,

https://3dwarehouse.sketchup.com/?h l=en

2. Contoh saat mencari objek Petronas

Tower pada web 3D warehouse

3. Mengunduh model objek monuen yang diinginkan, dengan ekstensi .blend & .obj

4. Menyimpan objek tersebut pada folder yang telah dibuat untuk memudahkan dalam pencarian.

b. Pengeditan Objek

Pada aplikasi ini akan dibuat tombol rotasi yang akan digunakan untuk merotasi objek. Namun tidak semua objek yang telah diunduh dapat berotasi secara sempurna, dikarenakan titik pusat objek tidak berada ditengah tengah objek.

Untuk mengubah titik tengah objek diperlukan aplikasi Blender. Berikut langkah langkah untuk mengubah titik pusat objek menggunakan blender :

1. Mengimport monumen yang akan dilakukan pengeditan. (Contoh yang digunakan adalah Petronas Tower).

2. Memindahkan kursor ke tengah tengah layar dengan cara menekan tombol Shift + C.

3. Menyeleksi seluruh bagian bangunan dan menempatkan titik tengah objek ke kursor yang sebelumnya telah diletakkan di tengah layar.

4. Memindahkan Origin/Titik pusat menuju kursor yang telah diletakkan di tengah objek dengan menekan tombol Shift + Ctrl + Alt + C, lalu memilih opsi Origin to 3D Cursor.

Maka Origin/Titik pusat telah berpindah ke tengah tengah objek.

c. Membuat Database dan License Key Setelah pembuatan objek-objek 3D, pada bagian sub – bab ini akan memberikan langkah – langkah pembuatan database untuk memasukkan data marker yang akan digunakan dan licese key. Berikut adalah proses pembuatannya :

1. Mengunduh 10 Gambar bendera dari mesin pencari google. Mendownload

10 gambar tersebut sesuai yang kita inginkan untuk dijadikan sebagai marker.

2. Mengunjungi web

https://developer.vuforia.com/

dikarenakan kita akan membuat database dengan mengakses pada developer vuforia

3. Melakukan registrasi apabila tidak mempunyai akun vuforia.

4. Melakukan login apabila sudah mempunyai akun pada vuforia developer portal

5. Memilih menu develop maka akan terlihat 2 pilihan yaitu License Manager dan Target Manager.

6. Membuat License Key dengan memasukkan nama lisensi AseanLandmarks dan mencentang Vuforia Developer Agreement sebagai persetujuan.

7. Memilih Target Manager dan menambahkan database.

8. Memilih type Device dan masukkan

nama yang diinginkan

(FlagDatabase).

9. Memilih nama database yang sudah kita buat yaitu FlagDatabase

10. Memilih Add Target untuk menambahkan target marker

11. Memasukkan gambar yang akan digunakan sebagai marker dengan ketentuan pada type Single Image.

Memasukkan ukuran gambar (width 10) dan memasukkan nama marker tersebut yaitu Indonesia untuk marker Negara Indonesia.

12. Melakukan cara yang sama dalam memasukkan gambar untuk 9 marker yang lain sehingga lengkap

13. Mendownload marker tersebut, dapat dilakukan memencet tombol Download Database (All)

14. Mendapatkan development key agar

dapat dikoneksikan dengan software

unity, dengan cara memilih License Manager yang telah dibuat.

15. Menyalin seluruh kode license key dan menggunakan key tersebut untuk mengakses database kita didalam software unity

d. Membuat Scene Loading

Pada bagian ini akan dijelaskan langkah – langkah pembuatan salah scene Loading pada Aplikasi Monumen Negara ASEAN. Berikut adalah proses pembuatannya:

1. Mengunduh gambar yang diinginkan unduk dijadikan sebagai background loading.

2. Membuat Scene baru bernama Loading Scene.

3. Membuat folder Gambar pada Assets 4. Membuka file gambar yang telah

diunduh dan mengimport gambar kedalam folder Gambar dan menunggu hingga proses selesai.

5. Memilih gambar yang sudah dimasukkan pada unity Assets - Gambar

6. Mengubah Texture Type default menjadi Sprite (2D and UI) pada bagian Inspector.

7. Kemudian membuat sebuah canvas didalam Hierarchy.

8. Memilih tab canvas pada Hierarchy dan menambahkan Image serta mengubah nama image menjadi background (sesuai yang kita inginkan). Sehingga kita membuat Image didalam canvas.

9. Memilih background dan melakukan drag gambar loading, melakukan drag & drop kedalam Source Image pada bagian Image (Script).

10. Langkah selanjutnya menambahkan Image pada Hierarchy didalam background dan melakukan rename menjadi Loading Base. Loading Base

akan tampil pertama kali sebelum Loading bar berjalan.

11. Menambahkan image kembali didalam Loading Base dan mengubah nama menjadi LoadingBar. Loading bar akan berjalan sesuai dengan panjang Loading Base.

12. Melakukan cara yang sama dengan cara drag & drop gambar kedalam Image (Script) pada bagian Source Image pada tab Inspector

13. Loading Base yang telah dimasukkan merupakan dasar dari Loading bar.

14. Memilih pada bagian loading-bar di Hierarchy dan melakukan drag gambar selanjutnya kedalam Image (Script) pada bagian Source Image di Inspector.

15. Melakukan penyesuaian ukuran sesuai yang diinginkan dan melakukan drop menutupi Loading base yang telah dibuat

Gambar 10 Loading Bar

16. Membuat script baru dengan C#

Script dengan menggunakan aplikasi Microsoft Visual Studio yang dinamakan SplashScreen.

17. Membuka kembali jendela unity 3D dan menambahkan component baru berupa Scripts pada Image Loading Base, lalu memasukkan Script SplashScreen kedalam component scripts tersebut.

18. Memasukkan loading bar kedalam SplashScreen (Script) yang terdapat di Inspector dan mengubah speed 20 (sesuai yang diinginkan).

19. Langkah selanjutnya adalah

menyimpan scene dan memasukkan

nama scene yaitu Loading dan

tempatkan pada folder Scene agar

mudah ditemukan.

Gambar 11. Tampilan Loading

e. Membuat Scene AR Camera Pada bagian ini akan menjelaskan langkah – langkah pembuatan scene ARCamera. Pertama akan dijelaskan cara memasukkan Marker, Objek 3D, Info Canvas, Tombol rotasi, Tombol Info, dan Tombol Kembali :

f. Memasukkan Marker dan Objek 3D 1. Memilih tab assets.

2. Membuat 2 buah folder baru pada Assets bernama masing-masing Scenes dan LM. Folder Scenes akan berisi seluruh scene yang ada pada aplikasi ini, sementara folder LM akan berisi objek-objek 3D yang akan digunakan.

3. Membuka folder yang telah dibuat untuk menyimpan objek 3D monumen, dan mengimport objek- objek yang diinginkan ke dalam folder LM yang ada di Assets

4. Memasukkan ARCamera yang ada pada Assets -> Vuforia -> Prefabs ke dalam hierarchy dengan cara drag &

drop.

5. Menghapus Main Camera yang ada pada bagian hierarchy karena akan digantikan dengan ARCamera.

6. Mengimport database Vuforia yang telah diunduh dengan cara membuka file tersebut.

Gambar 12. Import database ke Unity

7. Memilih image target yang terdapat pada hierarchy, kemudian memilih database yaitu FlagDatabase (database yang dibuat pada developer vuforia) dan memilih image target yang diinginkan, sebagai contoh adalah marker Kamboja sebagai marker pertama.

8. Memilih ARCamera yang terdapat di bagian hierarchy dan membuka Open Vuforia configuration.

9. Menyalin License Key yang sebelumnya dibuat pada Vuforia Developer dan melakukan paste pada APP License Key yang terdapat tab Inspector.

10. Mencentang opsi Load Final Database dan Activate.

11. Mengatur posisi kamera dengan posisi menyorot kebawah agar

marker dapat terlihat dengan camera.

Dapat dilakukan dengan memilih icon Move Tool.

12. Membuka folder LM yang terdapat pada Assets dan melakukan drag objek 3D (Sebagai contoh Angkor Wat) ke dalam marker image target Kamboja.

Gambar 13. Memasukkan Objek 3D ke Marker

13. Mengubah ukuran objek pada

Inspector pada bagian transform –

scale. Memasukkan ukuran sesuai

uang diinginkan, contohnya pada

objek Angkor Wat diberikan ukuran

X – Y – Z dengan masing-masing berukuran 10 - 10 – 10.

14. Menambahkan marker dan objek yang lain menggunakan cara yang sama seperti pada langkah

sebelumnya.

15. Setelah melakukan langkah tersebut, saya memilliki 3 image target dengan masing-masing objek 3D yang berbeda

Gambar 14. Contoh Objek Masjid Omar Ali Saifuddin dan

Monas

3.4 Integrasi & Tes Sistem

Integrasi dilakukan dengan cara menyatukan seluruh unit menjadi sebuah aplikasi yang utuh dengan format apk agar bisa di install ke dalam smartphone berbasis Android (Build). Langkah- langkah yang dibutuhkan adalah sebagai berikut :

1. Menekan tombol file pada toolbar, lalu memilih opsi Build Settings.

2. Memilih Platform Android lalu menekan tombol Switch Platform.

3. Mengganti Company Name menjadi

“Gunadarma, Product Name menjadi

“AseanMonument” , Default Icon, serta Package Name Menjadi

“com.Gunadarma.AseanMonument”

pada Tab Inspector Player Settings.

System test dilakukan dengan cara menguji aplikasi dengan metode blackbox pada sebuah smartphone Android. Uji coba ini dilakukan untuk mengetahuapakah aplikasi berjalan dengan baik atau tidak. Berikut hasil uji coba yang telah dilakukan dengan menggunakan smartphone Samsung galaxy A8(2018):

Tabel 1. Uji Coba Black-Box

Gambar 15. Tampilan Loading

Gambar 16. Tampilan Menu Utama

Gambar 17. Scene Tentang

Gambar 18. Scene Choosnging

Gambar 19. Tampilan Angkor Wat

4. PENUTUP

Aplikasi Monumen Negara di ASEAN telah berhasil dibuat dan dioperasikan pada smartphone berbasis android.

Setelah dilakukan black-box testing dan User Test, aplikasi dapat dijalankan dengan baik pada beberapa smartphone.

User Interface berjalan sesuai dengan rancangan yang telah dibuat. Tombol- tombol yang digunakan untuk berpindah scene berfungsi dengan baik. Objek 3D dapat berotasi dengan sempurna, dan setiap scene berjalan dapat dengan lancar.

Aplikasi ini diharap dapat dikembangkan dengan menambahkan beberapa fitur tambahan seperti demonstrasi berupa video, info tambahan menggunakan suara, zoom in dan zoom out menggunakan gesture, maupun penambahan objek yang ditampilkan.

Dirahapkan pula nantinya pengembang aplikasi ini dapat memembuat tampilan objek 3D monumen yang lebih detail.

Daftar Pustaka

[1] Andre Kurniawan Pamoedji, Maryuni, dan Ridwan Sanjaya, 2017, Mudah Membuat Game Augmented Reality (AR) dan Virtual Reality (VR), PT Elex Media Komputindo, Jakarta.

[2] Nadia Firly, 2018, Create Your Own Android Application, PT Elex Media Komputindo, Jakarta.

[3] Roger Pressman, 2012, Rekayasa Perangkat Lunak – Buku Satu, Pendekatan Praktisi (Edisi 7), Andi, Yogyakarta.

[4] Mario Fernando, 2013, Skripsi : Membuat Aplikasi Augmented Reality Menggunakan Vuforia SDK dan Unity, Universitas Klabat, Manado.

[5] Ertie Nur Hartiwati, UML, URL : ertie.staff.gunadarma.ac.id/Downlo ads/files/49947/Unified+Model ing+Language.pdf

Diakses pada tanggal 18 Agustus

2019.