BAB III
PERANCANGAN DAN IMPLEMENTASI
Pada bab ini penulis akan menjelaskan proses perancangan Augmented Reality. Dalam proses perancangannya kita memerlukan beberapa tahapannya diantaranya : rancangan aplikasi kamar hotel berbasis Android, flowchart program, membuat marker, dan membuat program.
Objek yang akan ditampilkan pada aplikasi ini adalah objek 3D bangunan hotel dan 4 kamar yang terdiri dari Double Room, Standard Room, Superior Room, dan Deluxe Room.
3.1 Perancangan Aplikasi
Dalam penulisan ilmiah ini, penulis mencoba untuk merancang aplikasi Augmented Reality atau AR yaitu sebuah aplikasi yang bisa menampilkan objek 3D bangunan hotel dan 4 kamar dengan menggunakan mobile phone Android. Dimana aplikasi ini diharapkan agar penggunanya dapat membayangkan bagaimana bentuk kamar dan fasilitas dari kamar tersebut.
Aplikasi ini dapat menampilkan beberapa objek 3D. Bangunan hotel dan kamar tersebut dapat ditampilkan secara acak sesuai dengan keinginan penggunanya dengan menggunakan sebuah marker yang nanti akan disediakan oleh penulis dalam bentuk buku sebagai media pendukung.
3.2 Struktur Navigasi
Struktur Navigasi dapat dikatakan sebagai penggambar dari hubungan atau rantai kerja dari seluruh element yang akan digunakan dalam aplikasi. Dalam pembuatan aplikasi ini struktur navigasi yang di gunakan adalah Struktur Navigasi Composite :
3.3 Rancangan Tampilan
Perancangan tampilan aplikasi ini sangat dibutuhkan, karena dengan membuat rancangan tampilan ini, pembuat aplikasi tidak akan mengalami kesulitan untuk membuat desain interface dari suatu aplikasi yang dibuatnya. Pada tahapan ini terdiri dari dua rancangan tampilan yaitu, perancangan marker, dan perancangan tampilan aplikasi Augmented Reality bangunan hotel dan kamar.
3.3.1 Rancangan Marker
Dalam pembuatan marker informasi kamar hotel ini penulis membuat sebuah buku untuk mendukung dalam pengujian aplikasi Augmented pemesanan kamar hotel. Aplikasi ini diharapkan dapat menarik perhatian penggunanya dalam proses pemesanan kamar hotel. Marker (penanda khusus) disatukan dalam sebuah buku, sehingga pengguna dapat langsung melihat tampilan objek 3D Augmented Reality aplikasi pemesanan kamar hotel, dan tiap marker akan menampilkan masing-masing objek yang terdapat pada buku tersebut.
Gambar 3.2 Rancangan Tampilan Marker
3.3.2 Rancangan Tampilan Augmented Reality
Setelah pengguna melihat halaman awal splash screen, selanjutnya akan masuk kedalam menu utama, dimana disini tampilan Augmented Reality akan muncul. Pengguna sudah bisa untuk menggunakan aplikasi ini dengan menyorotkan kamera pada handphone ke marker yang sudah disediakan. Berikut ini adalah rancangan tampilannya :
Gambar 3.3 Rancangan Tampilan Augmented Reality
Penjelasan rancangan tampilan augmented reality tersebut adalah sebagai berikut : 1. Augmented Reality
Yaitu objek 3D bangunan hotel dan kamar yang akan muncul apabila kamera pada handphone disorotkan pada marker.
3.3.3 Rancangan Tampilan Menu 1
Rancangan tampilan menu aplikasi ini merupakan rancangan tampilan yang terdapat pada menu utama, Ada beberapa macam menu yang dapat digunakan oleh pengguna pada tampilan tersebut. Berikut ini adalah rancangan tampilannya :
Penjelasan rancangan tampilan menu aplikasi Augmented Reality adalah sebagai berikut :
1. Start
Yaitu tampilan objek 3D Augmented Reality bangunan hotel dan kamar. 2. Help
Yaitu menu bantuan cara menggunakan aplikasi AR ini. 3. About
Yaitu keterangan tentang pengembang atau pembuat. 4. Exit
Yaitu menu untuk keluar dari aplikasi AR ini.
3.3.4 Rancangan Tampilan Menu 2
Rancangan tampilan menu aplikasi ini merupakan rancangan tampilan yang terdapat pada menu Start, Ada beberapa macam menu yang dapat digunakan oleh pengguna pada tampilan tersebut. Berikut ini adalah rancangan tampilannya :
Gambar 3.5 Rancangan Tampilan Menu 2 Start Augmented Reality
Penjelasan rancangan tampilan menu Start aplikasi Augmented Reality adalah sebagai berikut :
1. Kamar 1
Yaitu tampilan objek 3D Augmented Reality kamar 1. 2. Kamar 2
Yaitu tampilan objek 3D Augmented Reality kamar 2. KAMAR 1
KAMAR 2
KAMAR 3
KAMAR 4
3. Kamar 3
Yaitu tampilan objek 3D Augmented Reality kamar 3. 4. Kamar 4
Yaitu tampilan objek 3D Augmented Reality kamar 4. 5. Hotel
Yaitu tampilan objek 3D Augmented Reality bangunan hotel.
3.3.5 Rancangan Tampilan Help
Tampilan ini merupakan halaman yang akan muncul apabila pengguna memilih menu help. Pada halaman ini, pengguna dapat mengetahui dan melihat tata cara menggunakan aplikasi Augmented Reality ini. Berikut ini adalah rancangan tampilannya :
Gambar 3.6 Rancangan Tampilan Menu Help
3.3.6 Rancangan Tampilan About
Tampilan ini merupakan halaman yang akan muncul apabila pengguna memilih menu about. Pada halaman ini, pengguna dapat mengetahui dan melihat pengembang atau pembuat aplikasi Augmented Reality ini. Berikut ini adalah rancangan tampilannya :
LABEL
Gambar 3.7 Rancangan Tampilan Menu About
3.4 Pembuatan Objek Augmented Reality
Pada pembuatan objek 3D Augmented Reality informasi kamar hotel ini kita membutuhkan 5 objek yang digunakan. Objek yang dibutuhkan adalah bangunan hotel, Double Room, Standard Room, Superior Room, dan Deluxe Room. Objek 3D ini dibuat dengan menggunakan software pendukung Blender 2.64.
3.4.1 Pembuatan Objek 3D
Untuk membuat objek 3D bangunan hotel dan kamar di Blender, ada beberapa langkah yang harus dilakukan, yaitu :
1. Pertama-tama membuka program aplikasi Blender 2.64. Dengan cara mengklik double icon Blender seperti ini atau dengan cara mengklik start >> All programs >> Blender. Kemudian akan tampak tampilan awal program seperti gambar dibawah ini.
2. Object yang akan dibuat adalah bangunan hotel dan kamar. Untuk membuatnya klik object cube yang ada pada tampilan program. Kemudian edit object tersebut sesuai dengan bentuk yang diinginkan. Setelah itu beri warna dengan texture atau material.
Gambar 3.9 Edit pada Object
3. Setelah itu tambahkan kamera dan lampu agar objek dapat terlihat dan di render. Hasil salah satu pengeditan objek.
Gambar 3.10 Hasil
4. Kini simpan object tersebut dengan export menjadi format .fbx. Caranya, klik File – Export – Pilidah .fbx. Format inilah yang nantinya akan diimport kedalam Unity 3D.
5. Buatlah ketiga object kamar yang lain yang lain dan 1 bangunan hotel dengan langkah-langkah yang sama seperti sebelumnya. Untuk membuat object yang lain, klik Add – Mesh – lalu pilih object yang ingin dibuat.
3.5 Pembuatan Marker
Adobe Photoshop. Apabila kita ingin membuat dengan aplikasi tersebut maka kita dapat menggunakan gambar yang ada.
Setelah pembuatan marker ini selesai, agar marker dapat dikenali oleh aplikasi Augmented Realitynya, langkah selanjutnya adalah mengupload marker yang telah dibuat. Agar marker ini dapat dikenali, paling tidak harus memiliki satu bintang.
Berikut ini adalah langkah-langkahnya :
1. Untuk mengupload marker buka situs http://developer.vuforia.com dan pastikan Anda telah login. Jika Anda belum memiliki account Anda dapat melakukan registrasi terlebih dahulu.
Gambar 3.11 Homepage Vuforia Developer
2. Selanjutnya Anda dapat mengklik Target Manager untuk management Image Target atau marker Anda.
Gambar 3.12 My Account
Gambar 3.13 Target Manager
4. Kemudian beri nama database baru Anda dan klik ‘Create’.
Gambar 3.14 Create Database
5. Setelah selesai Anda baru saja membuat sebuah database gambar baru. Setiap database dapat memiliki lebih dari satu marker, dan Anda dapat menggantinya pada program Anda. Klik database baru Anda untuk melihat isi database gambar Anda.
6. Klik ‘Add Target’ untuk menambah marker.
Gambar 3.16 Add target
7. Kemudian Anda akan diberi sebuah form untuk mengupload marker Anda. Isikan form sesuai kebutuhan Anda dan upload di Marker Anda. Tunggulah dengan sabar, proses upload mungkin akan memakan waktu lama tergantung koneksi Anda.
Gambar 3.17 Add New target
Gambar 3.18 Download Selected Targets 1
9. Ketika download Anda akan diberikan pilihan untuk target apa marker Anda. Pilihlah ‘Unity Editor’ karena Anda menggunakan unity untuk membuat project AR. Kemudian downloadlah file marker Anda dalam bentuk .unitypackage yang siap diimport ke unity.
Gambar 3.19Download Selected Targets 2
10. Berikut adalah hasil download Anda. Double klik untuk mengimport ke dalam Unity.
11. Centang semua file yang akan diimport dan klik ‘import’.
Gambar 3.21 Importing to Unity
12. Jika proses telah selesai maka proses import Anda telah berhasil.
13. Lakukan hal yang sama untuk meng-upload keempat marker lainnya. Berikut ini adalah kelima marker yang digunakan dalam Aplikasi Bangun Ruang :
Gambar 3.22 Marker Hotel
3.6 Pembuatan Program
Pada bagian ini, penulis akan membahas bagaimana cara membuat aplikasi Augmented Reality dengan menggunakan tool Unity 3D.
Sebelum membuat aplikasi Augmented Reality ini, terlebih dahulu kita harus melakukan instalasi software-software pendukungnya seperti Android SDK, plugin Android dan Unity 3D. Berikut ini adalah cara pembuatan projek pada Unity 3D :
1. Buka Unity dan buat project baru. Pastikan untuk tidak lupa men-setting target platform project di Android dengan meng-klik File – Build Setting.
Gambar 3.23 Unity 4.1.2
2. Hal pertama yang perlu dilakukan adalah import Vuforia SDK ke project Android. Klik Assets –> Import package –> Custom package.
Gambar 3.24 Tampilan Unity3D – Import Package
Gambar 3.25 Memilih Vuforia SDK
4. Kemudian akan muncul konfirmasi apa saja yang akan diimport ke dalam project. Biarkan default (terselect semua) dan klik import.
Gambar 3.26 Import Vuforia Package kedalam Unity
Gambar 3.27 Windows Project
6. Pada Assets buatlah folder model dan resources, yang mana folder model tempat mengimport objek 3D dan folder resources untuk gambar untuk background atau button. Langkah selanjutnya buka library Vuforia yang telah Anda import tadi dalam window Project. Masuk pada bagian Qualcomm Augmented Reality –> Prefabs. Terdapat banyak prefabs yang dapat Anda gunakan untuk membuat project Augmented Reality. Selanjutnya lakukan drag and drop prefab Image Target dari window ‘project’ ke dalam window ‘Hierarchy’.
7. Lakukan konfigurasi pada Multi Target
Gambar 3.29 Inspector Setting untuk Multi Target 8. Selanjutnya drag and drop juga prefab ARCamera.
Gambar 3.31 Inspector Setting untuk AR Camera
10. Selanjutnya delete object Main Camera yang ada pada ‘Hierarchy’ sehingga yang ada hanyalah ARCamera dan Image Target. Kemudian tambahkan object yang sudah dibuat sebelumnya di Blender.
11. Kemudian buat scene baru di file>new scene. Lalu masukkan AR camera, Image target, dan directional light pada game object>create other> directional light dengan sistem drag and drop. Setelah masukkan atau drag objek kedalam Image target
12. Lakukan beberapa konfigurasi pada object tersebut. Klik file .fbx pada Windows Project, pada Inspector Setting, pilih Tab Model terlebih dahulu.
Gambar 3.33 Inspector Setting untuk Animasi.fbx – Tab Model
13. Setelah melakukan konfigurasi pada tab Model, kini lakukan konfigurasi pada tab Rig.
Gambar 3.34 Inspector Setting untuk Animasi.fbx – Tab Rig
Gambar 3.35 Inspector Setting
15. Selanjutnya save scene tersebut tetapi simpan kedalam folder scene didalam workspace yang telah dibuat sebelumnya. Kemudian buat lagi beberapa scene sejumlah objek yang ingin ditampilkan, setelah semua dibuat selanjutnya buat satu scene untuk pembuatan menu utama atau tampilan awal dari program nantinya. Untuk membuatnya pilih menuscreen biasa lalu klik dua kali di script pada panel sebelah kanan.
3.7 Penulisan Source Code (Script)
Penulisan source code pada pembuatan aplikasi dengan Augmented Reality ini, penulis menggunakan script C# (dibaca : C sharp). Dimana script C# itu digunakan untuk pembuatan menu dan button yang digunakan nantinya, seperti : Start, pilihan kamar, Help, About dan Exit.
Gambar 3.37 Pembuatan button
3.8 Compile Project dan Running
Simpan Scene yang telah dibuat. Klik file –> Save scene. Kemudian buat folder ‘Scenes’ dan simpan di dalamnya.
1. Pastikan berada di platform Android. Jika sudah membuat project ini dalam platform Android maka skip langkah ini, jika belum dapat mengubahnya ke platform Android. Klik File –> Build Settings Kemudian switch ke platform Android.
2. Selanjutnya drag drop scene yang telah disimpan kedalam form Build Setting tadi, hal ini untuk menyatakan bahwa scene yang telah dibuat tersebut akan dicompile dan dikemas dalam file .apk yang siap diinstall.
Gambar 3.39 Drag Scene kedalam Build Settings
3. Sebelum menjalankan jangan lupa untuk melakukan pengaturan pada ‘Player Settings’. Masih pada window ‘Build Settings’ klik ‘Player Settings’. Lihat pada bagian window ‘inspector’. Lakukan pengaturan berupa nama package, icon aplikasi, platform dan berbagai pengaturan lain.
Gambar 3.41 Player Settings 2
4. Jika semua konfigurasi telah selesai dilakukan, kini saatnya merunning Pastikan device Android sudah terkoneksi dan dapat menggunakan adb dengan baik. Pada window ‘Build Settings’ klik ‘Build and run’. Tunggu proses compiling dan pushing aplikasi ke device Android. Lihat device Android yang terkoneksi, maka aplikasi yang dibuat akan diinstall dan dijalankan secara otomatis. Kini, arahkan kamera device ke marker.
.
Gambar 3.43 Double Room
Gambar 3.44 Standard Room
Gambar 3.45Superior Room
Demikian hasil dari penulisan ilmiah mengenai Pembuatan Aplikasi Augmented Reality Informasi Kamar Hotel Menggunakan Unity Berbasis Android.
3.9 Penginstallan Aplikasi
Apabila pengguna ingin menggunakan aplikasi ini, mereka dapat melakukan instalasi ke dalam handphone dengan cara sebagai berikut :
1. Menginstal file .apk yang telah disediakan oleh pembuat aplikasi. 2. Tunggu sampai proses instalasi selesai.
3. Apabila aplikasi berhasil di instal hal tersebut menunjukkan bahwa, handphone yang digunakan mendukung aplikasi AR, akan tetapi bila aplikasi gagal di instal, hal tersebut menunjukkan bahwa handphone yang digunakan tidak mendukung aplikasi Augmented Reality yang telah di buat oleh pembuat aplikasi.
3.10 Rancangan Tampilan Buku Augmented Reality
Rancangan tampilan buku AR ini adalah rancangan tampilan buku yang didalamnya terdapat marker dan penjelasan mengenai Alat Musik Tradisional DKI Jakarta, yang nantinya buku tersebut akan diberi judul “Marker Augmented Reality Alat Musik Tradisional DKI Jakarta Berbasis Android”. Berikut ini adalah rancangan tampilannya :
Gambar 3.47 Rancangan Tampilan Buku Augmented Reality JUDUL
MARKER
Penjelasan rancangan tampilan buku Augmented Reality adalah sebagai berikut : 1. Judul
Yaitu, nama jenis kamar yang nantinya akan ditampilkan. 2. Marker / Gambar
Yaitu, tempat dimana nantinya Augmented Reality objek 3D jenis kamar dan bangunan hotel akan muncul.
3. Fasilitas
Yaitu, penjelasan mengenai fasilitas kamar yang ditampilkan.
3.11 Spesifikasi Hardware Dan Software Yang Digunakan
Spesifikasi hardware dan software ini merupakan spesifikasi yang digunakan oleh pembuat aplikasi dengan menggunakan leptop. Berikut ini adalah spesifikasi pembuatan program aplikasi Augmented Reality :
1. Hardware
2. JDK (Java Development Kit) 3. Android SDK
4. Plugin ADT 5. Blender 2.64 6. Unity versi 4.1.2
3.12 Spesifikasi Handphone
Untuk dapat menjalankan aplikasi AR ini membutuhkan spesifikasi khusus minimal yang terdapat pada handphone Android, spesifikasi tersebut diantaranya: OS Android Versi : 2.2 (froyo)
CPU : 800 Mhz
Hardware : ARMv7
RAM : 512 MB
Network : 3G HSPDA/HSUPA
Kamera : Minimal 3 Mega Pixel,
Ada beberapa jenis handphone yang dapat digunakan pada aplikasi Augmented Reality. Dapat dilihat dalam suatu daftar handphone tersebut pada lampiran devices yang bersumber dari http:\\www.unity3d.
3.12.1 Jenis Handphone Yang Digunakan
Berikut ini adalah daftar handphone yang telah digunakan oleh pembuat, dalam uji coba aplikasi Augmented Reality ini.
1. LG Nexus 4
