Aplikasi Media Pemasaran Properti Dengan

UNIVERSITAS DIPONEGORO
APLIKASI MEDIA PEMASARAN PROPERTI DENGAN

MENGGUNAKAN TEKNOLOGI AUGMENTED REALITY
PADA PERANGKAT ANDROID
TUGAS AKHIR
AHMAD ARIF FAIZIN

21060112120027
FAKULTAS TEKNIK
DEPARTEMEN TEKNIK ELEKTRO
PROGRAM STUDI SARJANA
SEMARANG
JULI 2017
UNIVERSITAS DIPONEGORO
HALAMAN JUDUL
APLIKASI MEDIA PEMASARAN PROPERTI DENGAN
MENGGUNAKAN TEKNOLOGI AUGMENTED REALITY
PADA PERANGKAT ANDROID
TUGAS AKHIR
Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana
AHMAD ARIF FAIZIN

21060112120027
FAKULTAS TEKNIK
DEPARTEMEN TEKNIK ELEKTRO
PROGRAM STUDI SARJANA
SEMARANG
JULI 2017
HALAMAN PERNYATAAN ORISINALITAS
Tugas Akhir ini adalah hasil karya saya sendiri,

dan semua sumber baik yang dikutip maupun yang dirujuk
telah saya nyatakan dengan benar.
NAMA : Ahmad Arif Faizin

NIM : 21060112120027
Tanda Tangan :
Tanggal : 7 Juni 2017
ii
iii
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI
TUGAS AKHIR UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademika Universitas Diponegoro, saya yang bertanda tangan di

bawah ini :
Nama : Ahmad Arif Faizin

NIM : 21060112120027
Jurusan/Program Studi : S1 Teknik Elektro
Departemen : Teknik Elektro
Fakultas : Teknik
Jenis Karya : Tugas Akhir
demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada

Universitas Diponegoro Hak Bebas Royalti Noneksklusif (None-exclusive
Royalty Free Right) atas karya ilmiah saya yang berjudul :
APLIKASI MEDIA PEMASARAN PROPERTI DENGAN MENGGUNAKAN

TEKNOLOGI AUGMENTED REALITY PADA PERANGKAT ANDROID
beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti/Noneksklusif
ini Universitas Diponegoro berhak menyimpan, mengalihmedia/formatkan, mengelola
dalam bentuk pangkalan data (database), merawat dan memublikasikan Tugas Akhir saya
selama tetap mencantumkan nama saya sebagai penulis/pencipta dan sebagai pemilik Hak
Cipta.
Demikian pernyataan ini saya buat dengan sebenarnya.
Dibuat di : Semarang
Pada Tanggal : Juli 2017
Yang menyatakan
(Ahmad Arif Faizin)

21060112120027
iv
ABSTRAK
Bisnis properti mengalami perkembangan yang pesat setiap tahun, namun

media promosi yang digunakan perusahaan masih menggunakan cara yang biasa,
seperti menggunakan brosur yang hanya menampilkan gambar 2D saja. Dengan
banyaknya kompetitor, konsumen menginginkan sesuatu yang unik dan berbeda
untuk mengetahui informasi properti lebih detail dan lebih nyata. Augmented
Reality merupakan teknologi yang tepat untuk memenuhi kebutuhan konsumen
tersebut. Augmented Reality adalah teknologi yang menggabungkan dunia virtual
dalam dunia nyata secara langsung. Oleh karena itu, dirancang sebuah aplikasi
yang berfungsi sebagai profil perusahaan sekaligus menampilkan properti 3D
dengan menggunakan teknologi Augmented Reality pada perangkat Android.
Aplikasi ini dibuat menggunakan Unity3D untuk membuat Augmented Reality dan
Android Studio untuk membuat company profile. Perancangan aplikasi
menggunakan Unified Modelling Language berupa diagram use case, diagram
aktivitas, dan diagram kelas. Hasil pengujian menunjukkan setiap fitur dapat
berjalan dengan baik. Objek 3D mulai tampil dengan jarak pendeteksian awal
dari 16,6 cm sampai sekitar 93.85 cm. Sedangkan saat pelacakan, objek 3D masih
dapat tampil dari jarak sekitar 6.7 cm sampai sekitar 228.3 cm. Berdasarkan
sudutnya, objek 3D mulai tampil dengan sudut pendeteksian awal maksimal
sekitar 54.8 derajat. Sedangkan saat pelacakan, objek 3D masih dapat tampil
sampai sekitar 87.75 derajat.
Kata Kunci: pemasaran properti, Augmented Reality, Android
v
ABSTRACT
Property business is growing rapidly every year, but the promotional

media used by companies still use the normal way, such as using brochures that
only display 2D images only. In spite of the fact that competitors also growing,
consumers want something unique and different to know more detailed property
information. Augmented Reality is the right technology to answer the needs of
these consumers. Augmented Reality is a technology that combines virtual worlds
in the real world directly. The purpose of this research is to create an application
that works as a company profile and displaying 3D properties using Augmented
Reality technology on Android devices. This app was created using Unity3D to
build Augmented Reality and Android Studio to make the company profile. The
design of this application using Unified Modeling Language, such as case
diagrams, activity diagrams, and class diagrams. The test results show each
feature works well. 3D objects start appearing with initial detection distance from
16,6 cm to about 93.85 cm. While tracking, 3D objects still appear from a
distance of about 6.7 cm to about 228.3 cm. Based on the angle, 3D objects begin
to appear with a maximum initial detection angle of about 54.8 degrees. While
tracking, 3D objects still appear up to about 87.75 degrees.
Keywords: property marketing, Augmented Reality, Android
vi
KATA PENGANTAR
Puji dan syukur penulis panjatkan kepada Allah SWT karena atas rahmat
dan karunia-Nya sehingga pelaksanaan Tugas Akhir dan penyusunan laporan ini
dapat terselesaikan. Tugas Akhir dengan judul “Aplikasi Media Pemasaran
Properti Dengan Menggunakan Teknologi Augmented Reality Pada Perangkat
Android” ini diajukan untuk memenuhi syarat akhir dalam menyelesaikan
pendidikan Program Sarjana pada Departemen Teknik Elektro Fakultas Teknik
Universitas Diponegoro Semarang.
Rasa terima kasih yang tulus penulis ucapkan kepada semua pihak yang
telah membantu selama pelaksanaan Tugas Akhir ini.
1. Bapak Dr. Wahyudi, ST., MT. selaku Ketua Departemen Teknik Elektro
Fakultas Teknik Universitas Diponegoro Semarang.
2. Bapak Munawar Agus R, S.T, M.T, Ph.D selaku Koordinator Tugas Akhir
3. Bapak Ir. Sudjadi, M.T., selaku Dosen Wali.
4. Bapak Maman Somantri Dr., S.T, M.T. selaku Dosen Pembimbing I yang
selalu sabar memberikan bimbingan dan arahan kepada penulis.
5. Bapak Yuli Christyono S.T, M.T selaku Dosen Pembimbing II yang selalu
sabar memberikan bimbingan dan arahan kepada penulis.
6. Orang tua penulis, Ibu Maf’ulah dan Bapak Khumaidi yang tanpa henti-
hentinya memberikan semangat dan do’a kepada penulis untuk
menyelesaikan Tugas Akhir ini.
7. Teman-teman Angkatan 2012 yang baik secara langsung maupun tidak
langsung sudah banyak membantu penulis. Khususnya untuk teman-teman
konsentrasi Teknologi Informasi. Terimakasih atas cerita, pengalaman, dan
kesan yang diberikan selama perkuliahan.
8. Teman-teman organisasi, baik di Al-Muhandis, HME, Philar, maupun Izzati
yang telah membentuk karakter dan kepribadian saya hingga sampai saat ini.
vii
9. Kelompok Inspirasi yang selalu menjaga diri supaya berjalan di atas
kebenaran.
10. Teman-teman di Wisma Atlit dan Wisma Programmer yang telah
memberikan tempat bernaung dan kenangan tak terlupakan.
11. Sahabat seperjuangan, Ienas, Yahya, Budi, Govinda, Adit yang terus
bersahabat sampai saat ini dan sampai akhir nanti. Insya Allah.
12. Semua teman – teman dan semua pihak yang tidak dapat saya sebutkan satu-
persatu yang telah memberikan bantuan dan semangat kepada penulis dalam
mengerjakan Tugas Akhir ini.
Penulis menyadari bahwa dalam penyusunan laporan Tugas Akhir ini
masih terdapat banyak kekurangan, oleh karena itu kritik serta saran yang bersifat
membangun akan penulis terima demi kebaikan dan kesempurnaan penyusunan
laporan dimasa yang akan datang. Semoga laporan Tugas Akhir ini dapat
memberikan manfaat dan menambah pengetahuan bagi kita semua.
Penulis
viii
DAFTAR ISI
HALAMAN JUDUL............................................................................................... i
HALAMAN PERNYATAAN ORISINALITAS................................................. ii
HALAMAN PENGESAHAN.............................. Error! Bookmark not defined.
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI......................... iii
ABSTRAK.............................................................................................................. v
ABSTRACT...........................................................................................................vi
KATA PENGANTAR..........................................................................................vii
DAFTAR ISI..........................................................................................................ix
DAFTAR GAMBAR.............................................................................................xi
DAFTAR TABEL............................................................................................... xiii
BAB I PENDAHULUAN.......................................................................................1
1.1 Latar Belakang...........................................................................................1
1.2 Rumusan Masalah......................................................................................4
1.3 Tujuan Tugas Akhir................................................................................... 4
1.4 Batasan Masalah........................................................................................ 4
1.5 Sistematika Penulisan................................................................................ 5
BAB II LANDASAN TEORI................................................................................ 6
2.1 Augmented Reality (AR)........................................................................... 6
2.1.1 Komponen Augmented Reality.............................................................7
2.1.2 Cara Kerja Augmented Reality............................................................. 8
2.2 Android...................................................................................................... 9
2.2.1 Android Studio.................................................................................... 10
2.2.2 Android SDK (Software Development Kit)........................................10
2.2.3 Komponen Aplikasi............................................................................ 11
2.3 Unity 3D.................................................................................................. 12
2.3.1 Komponen Aplikasi............................................................................ 13
2.3.2 Vuforia................................................................................................ 13
2.4 Java.......................................................................................................... 14
2.5 Unified Modelling Language...................................................................15
ix
2.6 Metode Pengujian Perangkat Lunak........................................................ 16
2.6.1 Pengujian Aplikasi Android................................................................17
2.6.2 Pengujian Augmented Reality.............................................................17
BAB III PERANCANGAN SISTEM................................................................. 18
3.1 Analisis Kebutuhan..................................................................................18
3.1.1 Deskripsi Sistem..................................................................................18
3.1.2 Kebutuhan Fungsional........................................................................ 20
3.1.3 Kebutuhan Non Fungsional.................................................................20
3.1.4 Kebutuhan Perangkat Keras................................................................21
3.1.5 Kebutuhan Perangkat Lunak............................................................... 22
3.2 Desain Aplikasi........................................................................................22
3.2.1 Diagram Use Case...............................................................................23
3.2.2 Diagram Aktivitas............................................................................... 24
3.2.3 Diagram Kelas.....................................................................................30
3.2.4 Perancangan Antarmuka..................................................................... 34
3.2.5 Perancangan Marker............................................................................56
3.2.6 Perancangan Sistem Augmented Reality............................................ 60
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM............................... 67
4.1 Implementasi............................................................................................67
4.1.1 Implementasi Antarmuka Sistem........................................................ 67
4.1.2 Implementasi dan Pembahasan Script.................................................74
4.2 Pengujian Sistem......................................................................................78
4.2.1 Pengujian Aplikasi Android................................................................79
4.2.2 Pengujian Augmented Reality.............................................................81
BAB V PENUTUP................................................................................................92
5.1 Kesimpulan.............................................................................................. 92
5.2 Saran........................................................................................................ 92
DAFTAR PUSTAKA...........................................................................................94
x
DAFTAR GAMBAR
Gambar 2.1 Cara kerja Augmented Reality............................................................. 9

Gambar 3.2 Diagram use case pengguna...............................................................23
Gambar 3.3 Diagram aktivitas menu utama...........................................................24
Gambar 3.4 Diagram aktivitas melihat detail produk............................................ 25
Gambar 3.5 Diagram aktivitas melihat AR............................................................26
Gambar 3.6 Diagram aktivitas melihat fasilitas.....................................................27
Gambar 3.7 Diagram aktivitas melihat portofolio................................................. 28
Gambar 3.8 Diagram aktivitas melihat web...........................................................28
Gambar 3.9 Diagram aktivitas untuk share............................................................29
Gambar 3.10 Diagram aktivitas melihat contact....................................................30
Gambar 3.11 (a) Hubungan diagram kelas appcompat (b) Hubungan diagram
kelas fragment (c) Kelas – kelas independen.........................................................32
Gambar 3.12 Rancangan halaman splash screen...................................................34
Gambar 3.13 Rancangan halaman menu utama.....................................................36
Gambar 3.14 Rancangan halaman menu mulai..................................................... 38
Gambar 3.15 Rancangan halaman menu produk................................................... 41
Gambar 3.16 Rancangan halaman detail cluster....................................................45
Gambar 3.17 Rancangan halaman menu fasilitas.................................................. 47
Gambar 3.18 Rancangan halaman menu portofolio...............................................49
Gambar 3.19 Rancangan halaman menu website...................................................51
Gambar 3.20 Rancangan halaman menu share...................................................... 53
Gambar 3.21 Rancangan halaman menu contact...................................................54
Gambar 3.22 (a) Marker produk umayyah 1 (b) Marker produk umayyah 2, (c)
Marker produk umayyah 3, (d) Marker produk abbasiyah 1, (e) Marker produk
abbasiyah 2, (f) Marker produk abbasiyah 3, (g) Marker produk ustmaniyyah 1, (h)
Marker produk ustmaniyyah 2, (i) Marker produk ustmaniyyah 3....................... 59
Gambar 3.23 (a) Registrasi aplikasi, (b) Lisensi aplikasi, (c) Registrasi marker, (d)
Database marker.................................................................................................... 62
Gambar 3.24 (a) Komponen ARCamera, (b) Komponen Image Target................63
xi
Gambar 3.25(a) Penempatan model 3D, (b) Pengaturan pada komponen kamera
AR dan Image Target.............................................................................................64
Gambar 3.26 (a) Pengaturan build settings, (b) Pengaturan platform................... 66
Gambar 4.1 Tampilan splash screen......................................................................67
Gambar 4.2 Tampilan menu utama........................................................................68
Gambar 4.3 Tampilan video profil dengan YoutubePlayerAPI.............................68
Gambar 4.4 Tampilan menu produk...................................................................... 69
Gambar 4.5 (a) Tampilan detail cluster dan (b) Tampilan detail cluster setelah
digeser ke bawah....................................................................................................70
Gambar 4.6 Tampilan menu fasilitas..................................................................... 70
Gambar 4.7 Tampilan menu portofolio..................................................................71
Gambar 4.8 Tampilan menu website......................................................................71
Gambar 4.9 (a) Tampilan dialog share (b) Hasil share di aplikasi tujuan............. 72
Gambar 4.10 (a) Tampilan menu contact (b) Tampilan kirim email (c) Tampilan
aplikasi telepon...................................................................................................... 74
Gambar 4.11 Tampilan Augmented Reality Cluster Umayyah 1.......................... 83
Gambar 4.14 Tampilan Augmented Reality Cluster Abbasiyah 1.........................84
Gambar 4.17 Tampilan Augmented Reality Cluster Ustmaniyyah 1.................... 85
xii
DAFTAR TABEL
Tabel 1.1 Perbedaan dengan penelitian sebelumnya............................................... 2

Tabel 3.1 Komponen tambahan Android...............................................................12
Tabel 3.2 Implementasi kebutuhan perangkat lunak............................................. 22
Tabel 4.1 Rencana pengujian aplikasi Android..................................................... 79
Tabel 4.2 Hasil pengujian aplikasi Android...........................................................80
Tabel 4.3 Rencana pengujian marker.................................................................... 81
Tabel 4.4 Hasil pengujian marker..........................................................................82
Tabel 4.5 Rencana pengujian jarak pendeteksian awal..........................................86
Tabel 4.6 Hasil pengujian jarak pendeteksian awal...............................................87
Tabel 4.7 Rencana pengujian jarak pelacakan....................................................... 88
Tabel 4.8 Hasil pengujian jarak pelacakan............................................................ 89
Tabel 4.9 Rencana pengujian sudut pendeteksian awal.........................................90
Tabel 4.10 Hasil pengujian sudut pendeteksian awal............................................ 91
xiii
BAB I
PENDAHULUAN
1.1 Latar Belakang

Bisnis properti saat memang sedang menjamur baik di kota-kota besar
maupun kota-kota kecil. Hal ini dikarenakan kebutuhan masyarakat yang semakin
tinggi untuk memiliki rumah sendiri. Selain itu, properti juga bisa menjadi
investasi yang menjanjikan dikarenakan nilainya yang terus bertambah setiap
tahun. Karena itulah sekarang muncul pebisnis properti baru, baik sebagai broker
maupun sebagai developer. Dengan banyaknya kompetitor tersebut, tentu
diperlukan inovasi supaya produk yang dijual menjadi lebih menarik.
Salah satu teknologi yang dapat dimanfaatkan dan sedang tren saat ini yaitu
dengan menggunakan teknologi Augmented Reality. Augmented Reality adalah
teknologi yang dapat menggabungkan dunia virtual dalam bentuk 2D maupun 3D
ke dalam dunia nyata secara real-time. Teknologi ini akan membuat promosi
properti yang biasanya hanya menggunakan brosur atau banner yang dalam
bentuk 2D biasa menjadi lebih nyata, menarik perhatian dan berbeda. Hal ini
dikarenakan ketika saat menggunakan Augmented Reality, objek 3D akan muncul
di atas gambar marker 2D yang ada di brosur melalui aplikasi yang dipasang di
perangkat Android.
Dengan memanfaatkan teknologi Augmented Reality ini, pebisnis properti
tidak perlu membuat maket/miniatur properti yang biasa digunakan untuk
memberi contoh properti. Hal ini karena sudah tergantikan dengan model properti
yang ditampilkan secara virtual menggunakan perangkat Android, sehingga para
pengusaha properti dapat menghemat biaya pengeluaran.
Pada penelitian sebelumnya, telah terdapat beberapa jurnal yang juga
memanfaatkan Augmented Reality sebagai media pemasaran properti. Di
antaranya yaitu “Aplikasi Augmented Reality untuk Katalog Penjualan Rumah”
oleh Bregga Teddy Gorbbala[1], “Penerapan Teknologi Augmented Reality Pada
Aplikasi Katalog Rumah Berbasis Android” oleh Muhammad Rifa’i, dan Tri
1
2
Listyorini[2], “Augmented Reality Untuk Bisnis Properti Sebagai Sarana

Pemasaran Berbasis Android” oleh Devi Afriyantari Puspa Putri[3], “Pembuatan
Brosur Perumahana Berbasis Augmented Reality Dengan Permodelan 3D” oleh
Abdul Muiz Prisambodo[4], “Pembuatan Aplikasi Catalog 3D Desain Rumah
Sebagai Sarana Promosi Dengan Menggunakan Unity 3D” oleh Siryantini Nurul
Adnin, Ida Bagus Ketut Widiartha, dan I Made Budi Suksmadana[5].
Tabel 1.1 Berikut adalah perbedaan Tugas Akhir ini dengan penelitian-
penelitian sebelumnya.
Tabel 1.1 Perbedaan dengan penelitian sebelumnya
Fitur
No Judul Software Pengujian
Tambahan
1 “Aplikasi Augmented - ARToolKit - Video - Jarak
Reality untuk Katalog - OSGART - Sudut
Penjualan Rumah” oleh
“Bregga Teddy Gorbbala
dan Mochamad Hariadi
2 “Penerapan Teknologi - Unity 3D - Denah - Respon Time
Augmented Reality Pada - Vuforia - Tutorial
Aplikasi Katalog Rumah SDK - Contact
Berbasis Android” oleh
Muhammad Rifa’i, Tri
Listyorini, dan Anastasya
Latubessy
3 “Augmented Reality - ARToolKit - Bantuan - Blackbox
Untuk Bisnis Properti - OSGART - Tentang - Validitas
Sebagai Sarana - Unduh
Pemasaran Berbasis marker
Android” oleh Devi
Afriyantari Puspa Putri
dan Endah
Sudharmilah[3]
4 Pembuatan Brosur - Adobe - Zoom - Black-box
Perumahana Berbasis Flash - Rotate
Augmented Reality - About
Dengan Permodelan 3D”
oleh Abdul Muiz
Prisambodo[4]
5 “Pembuatan Aplikasi - Unity 3D - Rotasi - Black-box
Catalog 3D Desain - Vuforia - Informasi
Rumah Sebagai Sarana SDK rumah
Promosi Dengan - Detail
3
Fitur
No Judul Software Pengujian
Tambahan
Menggunakan Unity 3D” rumah
oleh Siryantini Nurul
Adnin, Ida Bagus Ketut
Widiartha, I Made Budi
Suksmadana[5]
6 Aplikasi Media - Unity 3D - Profil - Black-box
Pemasaran Properti - Vuforia perusahaan - Jarak
Dengan Menggunakan SDK (dengan pendeteksian
Teknologi Augmented - Android video awal
Reality Pada Perangkat Studio Youtube) maksimum
Android (Tugas Akhir - List Produk dan
penulis) - Detail minimum
Produk - Jarak
- Fasilitas pelacakan
- Portofolio maksimum
- Share dan
- Contact minimum
(dengan - Sudut
Maps) pendeteksian
- Audio awal dan
- Translate, pelacakan
Rotate, dan maksimum
Scale
Objek 3D
Tugas Akhir ini bertujuan untuk membuat aplikasi media pemasaran

properti dengan menggunakan teknologi Augmented Reality pada perangkat
Android dan mengetahui jarak serta sudut yang dapat menampilkan objek 3D di
atas marker dengan baik. Aplikasi ini dapat menampilkan informasi perusahaan
dan membantu developer dalam hal pemasaran yang lebih interaktif dan hemat
biaya. Selain itu, keuntungan di sisi konsumen yaitu mereka menjadi tahu
portofolio, fasilitas, dan kontak perusahaan, serta bentuk properti yang akan dibeli
secara lebih nyata.
4
1.2 Rumusan Masalah

Berdasarkan pada penelitian sebelumnya, yakni pada penelitian 2 dan 5
belum ada fitur Augmented Reality yang digunakan untuk translate dan scale
pada objek 3D. Oleh karena itu, rumusan masalah yang dibahas dalam Tugas
Akhir ini adalah tentang bagaimana membuat aplikasi media pemasaran properti
dengan menggunakan teknologi Augmented Reality pada perangkat Android
dengan fitur yang lebih lengkap..
1.3 Tujuan Tugas Akhir

Tugas Akhir ini bertujuan untuk membuat aplikasi media pemasaran
properti dengan menggunakan teknologi Augmented Reality pada perangkat
Android dan mengetahui jarak serta sudut yang dapat menampilkan objek 3D di
atas marker dengan baik.
1.4 Batasan Masalah

Agar dalam pembahasannya lebih terarah dan sesuai dengan tujuan yang
akan dicapai maka diperlukan batasan masalah. Adapun batasan masalah dalam
pelaksanaan Tugas Akhir ini adalah:
1. Jumlah produk yang digunakan sebagai contoh terdapat 9 macam
produk.
2. Model 3D rumah yang digunakan didapat dari Asset Store Unity.
3. Properti yang digunakan sebagai contoh yaitu Hasanah City oleh PT
Hasanah Land.
4. Fitur yang terdapat pada aplikasi berisi profil perusahaan, produk
perumahan, fasilitas perumahan, portofolio perusahaan, website
perusahaan, dan kontak perusahaan.
5. Detail produk yang ditampilkan yaitu jumlah lantai, jumlah kamar,
luas tanah, luas bangunan, harga, gambar siteplan, dan gambar denah
rumah.
5
1.5 Sistematika Penulisan

Sistematika penulisan dalam laporan Tugas Akhir dengan judul “Aplikasi
Media Pemasaran Properti dengan Menggunakan Teknologi Augmented Reality
pada Perangkat Android” ini adalah sebagai berikut.
BAB I PENDAHULUAN
Bab ini berisi tentang latar belakang, tujuan Tugas Akhir,
pembatasan masalah, metodologi penulisan, dan sistematika
penulisan.
BAB II DASAR TEORI
Bab ini membahas tentang teori dasar mengenai Augmented
Reality (AR), Android, Unity, marker, Vuforia, dan Java.
BAB III PERANCANGAN SISTEM
Bab ini berisi perancangan sistem berupa analisis kebutuhan dan
desain aplikasi. Pada analisis kebutuhan akan mencakup dari
deskripsi sistem, kebutuhan fungsional, kebutuhan non fungsional,
kebutuhan perangkat keras, dan kebutuhan perangkat lunak. Pada
desain aplikasi terdapat perancangan aplikasi dengan diagram use
case, diagram aktivitas, diagram kelas, dan perancangan
antarmuka aplikasi.
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
Bab ini berisi tentang implementasi dan pengujian sistem. Pada
implementasi terdapat implementasi antar muka sistem berbasis
Android. Sedangkan pada pengujian menggunakan pengujian alfa
pada komponen aplikasi Android dan pada komponen Augmented
Reality.
BAB V PENUTUP
Bab ini berisi kesimpulan dan saran dari seluruh pembahasan
Tugas Akhir.
BAB II
LANDASAN TEORI
2.1 Augmented Reality (AR)

Ronald T. Azuma (1997) mendefinisikan Augmented Reality sebagai
penggabungan benda-benda nyata dan maya di lingkungan nyata, berjalan secara
interaktif dalam waktu nyata, dan terdapat integrasi antar benda dalam tiga
dimensi, yaitu benda maya terintegrasi dalam dunia nyata. Penggabungan benda
nyata dan maya dimungkinkan dengan teknologi tampilan yang sesuai,
interaktivitas dimungkinkan melalui perangkat-perangkat input tertentu, dan
integrasi yang baik memerlukan penjejakan yang efektif.[3]
Sedangkan menurut Julie A. Jacko (2003:459) Augmented Reality (AR)
adalah adalah teknologi yang menggabungkan benda maya dua dimensi dan
ataupun tiga dimensi ke dalam sebuah lingkungan nyata tiga dimensi lalu
memproyeksikan benda-benda maya tersebut dalam waktu nyata.[6]
AR (Augmented Reality) adalah teknologi yang dapat menambahkan objek
virtual baik dalam bentuk 2D maupun 3D dengan dunia nyata secara langsung
dengan menggunakan kamera. Teknik augmentation yang paling konvensional
yaitu seperti penambahan papan skor selama pertandingan sepakbola di televisi.
Dengan bantuan teknologi Augmented Reality yang semakin berkembang,
penambahan objek virtual di dunia nyata menjadi lebih interaktif dan dapat
dimanipulasi.
Dalam pemakaiaanya, terdapat perbedaan antara Augmented Reality (AR)
dan Virtual Reality (VR). Pada teknologi VR (Virtual Reality), dunia nyata
diganti secara keseluruhan dengan dunia virtual. Sedangkan AR (Augmented
Reality) hanya menambahkan objek virtual pada dunia nyata. Selain
menambahkan benda 3D dalam dunia nyata, Augmented Reality juga mampu
berpotensi menghilangkan benda-benda yang sudah ada. Menambah sebuah
lapisan gambar maya dimungkinkan untuk menghilangkan atau menyembunyikan
6
7
lingkungan nyata dari pandangan pengguna sehingga seolah-olah benda yang

sudah ada menghilang.
Objek virtual menampilkan informasi yang tidak dapat diterima oleh
pengguna dengan inderanya sendiri. Hal ini membuat Augmented Reality sesuai
sebagai alat untuk membantu persepsi dan interaksi penggunanya dengan dunia
nyata. Informasi yang ditampilkan oleh objek virtual membantu pengguna
melaksanakan kegiatan-kegiatan dalam dunia nyata. Salah satu contohnya yaitu
penambahan informasi negara pada suatu peta.
Dengan berbagai kelebihannya, Augmented Reality dapat diaplikasikan di
banyak tempat. Awalnya Augmented Reality digunakan dalam bidang militer,
industri dan medis. Namun, dengan berkembangnya perangkat seluler,
pengaplikasian Augmented Reality mulai berkembang di bidang hiburan,
pendidikan dan komersial.
2.1.1 Komponen Augmented Reality
Secara umum untuk membangun Augmented Reality dibutuhkan
minimal komponen-komponen berikut[7]:
1. Input Device
Input device atau alat input berfungsi sebagai sensor untuk menerima
input dalam dunia nyata. Input device yang biasa digunakan dalam
AR adalah kamera, kamera pada handphone atau webcam saat ini
banyak digunakan sebagai input device untuk aplikasi AR.
2. Output Device
Output device atau alat output berfungsi sebagai display hasil AR.
Output device yang biasa digunakan adalah monitor dan Head
Mounted Display (HMD). Head mounted display adalah alat yang
digunakan di kepala, mirip kacamata, untuk menampilkan hasil AR.
Head mounted display biasanya sudah terintegrasi dengan kamera di
bagian atasnya, sehingga selain sebagai alat output, alat ini juga bisa
sebagai alat input. Selain itu juga terdapat Head Up Display (HUD),
bedanya dengan HMD yaitu perangkat ini lebih sederhana berbentuk
kacamata dengan display yang transparan.
8
3. Tracker/Marker
Tracker atau lebih dikenal dengan marker adalah penanda yang
digunakan sebagai tempat munculnya objek virtual dalam dunia
nyata. Dengan adanya marker, objek virtual dapat tetap muncul
mengikuti posisi marker walaupun posisi marker dipindah-pindah.
Biasanya marker atau berbentuk semacam striker mirip QR Code
yang bisa ditempel/dipasang di benda nyata. Dalam
perkembangannya marker bisa dalam bentuk foto, objek 3D, atau
bahkan tanpa marker.
4. Komputer
Komputer berfungsi sebagai alat pemroses untuk membuat aplikasi
yang dapat menerapkan teknologi Augmented Reality. Komputer
disini bisa berupa PC atau laptop yang memiliki spesifikasi untuk
menjalankan aplikasi untuk membuat Augmented Reality, seperti
Unity3D dan Android Studio.
2.1.2 Cara Kerja Augmented Reality
Sistem dalam Augmented Reality bekerja dengan menganalisa secara
real-time obyek yang ditangkap dalam kamera. Berkat perkembangan pesat
teknologi handphone, Augmented Reality tersebut bisa diimplementasikan pada
perangkat yang memiliki GPS, kamera, dan kompas[8]. GPS digunakan untuk
mengetahui lokasi pengguna, kamera digunakan untuk media input, dan kompas
digunakan untuk mengetahui posisi perangkat seluler. Kombinasi dari ketiga
sensor tersebut dapat digunakan untuk menambahkan informasi dari obyek yang
ditangkap kamera. Berikut merupakan cara kerja Augmented Reality dengan
kamera sebagai media input dan layar komputer atau handphone sebagai media
ouput.
9
Gambar 2.1 Cara kerja Augmented Reality
Dapat dilihat pada Gambar 2.1, kamera mengambil input gambar di

sekitarnya secara berulang-ulang (video stream). Kamera mencari dimana posisi
yang akan ditempati oleh objek 3D dengan mengguanakan pengolahan citra
digital untuk mendeteksi marker. Kemudian aplikasi akan mencari secara real-
time di dalam database data objek 3D yang sesuai dengan marker yang terdeteksi,
Dilanjutkan dengan menampilkan gambar asli beserta objek virtual di dalam
tampilan layar laptop maupun perangkat seluler.
2.2 Android
Menurut Safaat, Nazruddin, mendefinisikan Android sebagai berikut:
“Android adalah sebuah sistem operasi untuk perangkat mobile berbasis Linux
yang mencakup sistem operasi, middleware dan aplikasi. Android menyediakan
platform yang terbuka bagi para pengembang untuk menciptakan aplikasi
mereka”.[9]
Pada Juli 2000, Google Inc. bekerja sama dengan Android Inc. yang
merupakan perusahaan pendatang baru untuk membuat peranti lunak pada ponsel
atau smartphone. Para pendiri Android bertugas mengembangkan program
perangkat seluler yang didukung oleh kernel Linux. Sejak kerjasama itu terjadi,
banyak yang menganggap fungsi Android adalah perangkat lunak pada telepon
seluler sehingga muncul rumor bahwa Google akan memasuki pangsa pasar
telepon seluler. Kemudian untuk mengembangkan Android, dibentuklah Open
10
Handset Alliance adalah konsorsium 34 perusahaan yang terdiri dari perusahaan

peranti keras, peranti lunak dan telekomunikasi.
Android pertama kali diperkenalkan ke pasaran September 2007, Google
mengajukan hak paten aplikasi telepon selulernya dengan mengenalkan dan
meluncurkan produk smartphone yang menggunakan Android sebagai sistem
operasinya. Pada saat perilisan perdananya, Android dan Open Handset Alliance
mendukung pengembangan open source pada perangkat mobile. Di lain pihak,
Google merilis kode Android di bawah lisensi Apache, sebuah lisensi perangkat
lunak dan platform perangkat telepon seluler. Sejak peluncuran Android hingga
sekarang, Android berkembang sangat pesat dari segi teknologi hingga segi
jumlah perangkat yang ada di dunia. Hal ini dikarenakan sistem operasi yang open
source dan bebas didistribusikan serta dukungan sangat tinggi dari para komunitas
open source di dunia.
Android disebut sebagai platform masa depan yang lengkap, terbuka dan
bebas. Lengkap karena programmer dapat mengembangkan platform dengan
pendekatan komprehensif dan dalam sistem operasi Android disediakan tools
untuk membangun software. Terbuka atau open source merupakan platform yang
disediakan oleh Android agar programmer dapat membuat aplikasinya tanpa
lisensi. Bebas dikembangkan oleh siapa saja dan bebas biaya untuk membayar
lisensi atau royalti pada platform Android. Android telah menjadi platform
generasi baru yang mendasari perkembangan aplikasi mobile masa depan.
2.2.1 Android Studio
Android Studio adalah sebuah IDE (Integrated Development
Environment) untuk pengembangan aplikasi pada platform Android. Android
Studio merupakan toolkit yang digunakan untuk membangun dan membuat paket
aplikasi Android berdasarkan IntelliJ IDEA. Sama halnya dengan Eclipse, ada
beberapa pilihan Application Building Tools, baik menggunakan IDE ataupun CLI
(Command Line Interface).[10]
2.2.2 Android SDK (Software Development Kit)
Android SDK (Software development Kit) adalah kumpulan software
yang berisi mengenai pustaka, debugger (alat pencari kesalahan program),
11
emulator (peniru perangkat bergerak), dokumentasi, kode contoh, dan

panduan[11]. Android SDK merupakan platform untuk mengembangkan aplikasi
Android dengan menggunakan bahasa pemrograman Java yang digunakan sebagai
alat bantu API (Application Programming Interface).
2.2.3 Komponen Aplikasi
Komponen-komponen yang terdapat pada suatu aplikasi adalah sebagai
berikut[12]:
1. Activity
Setiap aplikasi mempunyai beberapa activity. Satu activity
menampilkan satu buah user interface kepada pengguna. User
interface yang menjadi perantara antara pengguna dengan sistem
aplikasi berinteraksi. Seperti melihat teks, menekan tombol, dan
memilih menu.
2. Services
Services bukan merupakan user interface. Komponen ini berfungsi
agar aplikasi dapat berjalan di belakang layar. Misalnya untuk
memutar music player agar bisa berjalan di belakang aplikasi lain
maka menggunakan service. Selain itu Services juga bisa tetap
berjalan walaupun aplikasi tidak sedang dibuka.
3. Broadcast Receivers
Broadcast Receivers merespon terhadap pesan broadcast dari aplikasi
lain atau dari system, Contohnya: aplikasi dapat
melakukan broadcast agar aplikasi lain tahu bahwa beberapa aplikasi
yang telah di-download ke dalam perangkat dan dapat mereka
gunakan. Di sini-lah fungsi Broadcast Receivers yang berfungsi
mengambil alih komunikasi seperti ini dan menginisiasi aksi yang
tepat.
4. Content Providers
Komponen Content Provider menyuplai data dari satu aplikasi ke
aplikasi lainnya pada saat diminta datanya. Request ini ditangani oleh
12
metode dari kelas Content Resolver. Datanya dapat disimpan di file

system, di database atau di suatu tempat secara keseluruhan.
Selain 4 komponen utama di atas, terdapat komponen tambahan untuk
mendukung komponen utama, untuk lebih jelasnya dapat dilihat pada Tabel 3.1 :
Tabel 3.1 Komponen tambahan Android
Komponen Deskripsi
Fragments Merepresentasikan sebuah porsi dari User Interface dalam

sebuah Activity.
Views Elemen User Interface yang digambar pada layar seperti tombol,
list, formulir, dan lain lain.
Layouts Hierarki dari view yang mengontrol format layar dan tampilan
dari view.
Intents Objek pesan yang dapat digunakan untuk meminta aksi dari
komponen aplikasi lain.
Resources Elemen eksternal, seperti: string, konstanta dan gambar.
Manifest File konfigurasi untuk aplikasi.
2.3 Unity 3D
Unity 3D atau Unity Engine adalah suatu game engine yang terus
berkembang dan banyak digunakan. Penggunaan engine versi free dibatasi dengan
beberapa fitur yang dikurangi atau bonus modul / prefab tertentu yang ditiadakan
dan hanya tersedia untuk pengguna berbayar. [12]
Unity Engine dapat mengolah beberapa data seperti objek tiga
dimensi, suara, teksture, dan lain sebagainya. Keunggulan dari Unity Engine ini
dapat menangani grafik dua dimensi dan tiga dimensi. Namun engine ini lebih
konsentrasi pada pembuatan grafik tiga dimensi.
Dari beberapa game engine yang sama-sama menangani grafik tiga
dimensi, Unity Engine dapat menangani lebih banyak sistem operasi. Beberapa di
antaranya yaitu Windows, MacOS X, iOS, PS3, Wii, Xbox 360, dan Android
13
yang lebih banyak daripada game engine lain seperti Source Engine, GameMaker,
Unigine, id Tech 3 Engine, id Tech 4 Engine, Blender Game Engine, NeoEngine,
Unity, Quake Engine, C4 Engine atau game engine lain. Unity Engine memiliki
kerangka kerja (framework) lengkap untuk pengembangan profesional. Sistem
inti engine ini menggunakan beberapa pilihan bahasa pemrograman, diantaranya
C# dan Javascript.
2.3.1 Komponen Aplikasi
Komponen-komponen yang terdapat pada Unity 3D adalah sebagai
berikut:
1. Workspace
Jendela utama untuk sebuah projek, seluruh kegiatan perancangan
desain dapat dilihat pada jendela ini, memasukkan benda, memutar
benda, mengatur lokasi dengan melihat Workspace ini.
2. Inspector
Merupakan tempat untuk mengatur property dari resources yang
terdapat dalam projek, seperti ukuran gambar, texture yang dipakai
dsb
3. Intents
Merupakan jendela untuk setiap objek yang ada di Unity. Seluruh
model 3D, camera, atau berbagai objek lainnya akan tampil pada
jendela hierarchy.
4. Resources
Jendela untuk menyimpan resource yang akan digunakan pada projek.
Misalkan gambar untuk tekstur, suara, font, Scene, model 3D dsb.
Semuanya akan terdapat pada jendela resources.
2.3.2 Vuforia
Vuforia adalah Augmented Reality Software Development Kit (SDK)
untuk perangkat mobile yang memungkinkan pembuatan aplikasi AR [12]. SDK
Vuforia juga tersedia untuk digabungkan dengan Unity yaitu bernama Vuforia AR
Extension for Unity. Vuforia merupakan SDK yang disediakan oleh Qualcomm
untuk membantu para developer membuat aplikasi. Augmented Reality (AR) di
14
mobile phones (iOS, Android). SDK Vuforia sudah sukses dipakai di beberapa
aplikasi mobile untuk kedua platform tersebut.
AR Vuforia memberikan cara berinteraksi yang memanfaatkan kamera
mobile phones untuk digunakan sebagai perangkat masukan, sebagai mata
elektronik yang mengenali penanda tertentu, sehingga di layar bisa ditampilkan
perpaduan antara dunia nyata dan dunia virtual yang digambar oleh aplikasi.
Dengan kata lain, Vuforia adalah SDK untuk computer vision based AR. Jenis
aplikasi AR yang lain adalah GPS-based AR.
2.4 Java
Java adalah nama untuk sekumpulan teknologi yang membuat perangkat
lunak dan menjalankan perangkat lunak pada komputer stand alone ataupun pada
lingkungan jaringan/internet[13]. Java berdiri di atas sebuah mesin interpreter
yang diberi nama Java Virtual Machine (JVM). JVM inilah yang akan membaca
bytecode dalam file class dari suatu program sebagai representasi langsung
program yang berisi bahasa mesin. Oleh karena itu bahasa Java disebut sebagai
bahasa pemrograman yang portable, karena dapat dijalankan pada berbagai sistem
operasi, asalkan pada sistem operasi tersebut terdapat JVM. Agar sebuah program
Java dapat dijalankan, maka file dengan ekstensi .Java harus dikompilasi menjadi
file bytecode. Untuk menjalankan file bytecode tersebut dibutuhkan JRE (Java
Runtime Environment) yang memungkinkan pengguna untuk menjalankan
program Java.
Karakteristik Java adalah sebagai berikut:
1. Sederhana
Sintaks Java seperti sintaks pada C++ tetapi sintaks Java tidak
memerlukan header file, pointer arithmatic, struktur union, operator
overloading, class virtual base, dan yang lainnya. Jika mengenal C++
dengan baik, maka pengguna dapat berpindah ke synctax Java dengan
mudah.
15
2. Berorientasi Objek (Object Oriented)

Berorientasi objek merupakan suatu teknik yang memusatkan
rancangan pada data (objek) dan interface. Fasilitas pemrograman
berorientasi objek pada Java pada dasarnya adalah sama dengan C++.
Perbedaan utama antara Java dengan C++ terletak pada penurunan
berganda (multiple inheritance). Java tidak mengenal multiple
inheritance seperti pada C/C++. Multiple Inheritance membingungkan
dan berakibat pada sulitnya pembuatan aplikasi. Sebagai gantinya Java
menggunakan interface.
3. Portabel
Java dapat digunakan pada segala macam arsitekstur komputer dan
perangkat karena sifatnya yang portable, dapat dieksekusi di beragam
platform tanpa harus melakukan perubahan kode secara menyeluruh.
Sebagai contoh, aplikasi Java yang dapat berjalan di Windows maka
juga dapat berjalan dengan baik di sistem operasi Linux dan Mac
dengan hanya membutuhkan Java Virtual Machine yang serupa tanpa
melakukan perubahan pada kode aplikasi tersebut.
2.5 Unified Modelling Language

Unified Modeling Language (UML) adalah standarisasi bahasa pemodelan
untuk pembagunan perangkat lunak yang dibangun dengan menggunakan teknik
pemograman berorientasi objek. UML sendiri terdiri atas pengelompokan
diagram-diagram sistem menurut aspek atas sudut pandang tertentu. Diagram
adalah yang menggambarkan permasalahan maupun solusi dari permasalahan
suatu model. [14]
UML digunakan untuk menentukan, memvisualisasikan, membangun, dan
mendokumentasikan suatu sistem informasi. UML dikembangkan sebagai suatu
alat untuk analisis dan desain berorientasi objek oleh Grady Booch, Jim
Rumbaugh, dan Ivar Jacobson. Namun demikian, UML dapat digunakan untuk
memahami dan mendokumentasikan setiap sistem informasi. Penggunaan UML
dalam industri terus meningkat. Ini merupakan standar terbuka yang
16
menjadikannya sebagai bahasa pemodelan yang umum dalam industri peranti

lunak dan pengembangan sistem.
Berbagai Jenis Diagram UML diantaranya yaitu:
1. Use case Diagram
Use case adalah abstraksi dari interaksi antara system dan actor. Use
case bekerja dengan cara mendeskripsikan tipe interaksi antara user
sebuah system dengan sistemnya sendiri melalui sebuah cerita
bagaimana sebuah system dipakai. Use case merupakan konstruksi
untuk mendeskripsikan bagaimana system akan terlihat di mata user.
Sedangkan use case diagram memfasilitasi komunikasi diantara analis
dan pengguna serta antara analis dan client.
2. Class Diagram
Class adalah sebuah spesifikasi yang jika diinstansiasi akan
menghasilkan sebuah objek dan merupakan inti dari pengembangan dan
desain berorientasi objek. Class menggambarkan keadaan
(atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk
memanipulasi keadaan tersebut (metoda/fungsi). Class diagram
menggambarkan struktur dan deskripsi class, package dan objek beserta
hubungan satu sama lain seperti containment, pewarisan, asosiasi, dan
lain-lain.
3. Activity Diagram
Menggambarkan rangkaian aliran dari aktivitas, digunakan untuk
mendeskripsikan aktifitas yang dibentuk dalam suatu operasi sehingga
dapat juga digunakan untuk aktifitas lainnya seperti use case atau
interaksi
2.6 Metode Pengujian Perangkat Lunak

Metode pengujian adalah cara atau teknik untuk menguji perangkat lunak.
Metode pengujian berhubungan dengan perancangan data uji yang akan
dieksekusi pada perangkat lunak yang dikembangkan.
17
2.6.1 Pengujian Aplikasi Android

Pengujian aplikasi merupakan pengujian fungsional yang digunakan
untuk menguji sistem yang telah dibuat dengan metode pengujian black box.
Pengujian black box terfokus pada persyaratan fungsional perangkat lunak. Uji
coba dengan pendekatan ini merupakan pengujian untuk mengetahui apakah
semua fungsi perangkat lunak telah berjalan semestinya sesuai dengan kebutuhan
fungsional yang telah didefinisikan.
2.6.2 Pengujian Augmented Reality
Pengujian augmented Reality merupakan pengujian yang digunakan
untuk menguji penerapan Augmented Reality pada aplikasi. Uji coba dengan
pendekatan ini merupakan pengujian untuk mengetahui objek 3D dapat muncul
dengan sempurna pada aplikasi saat mendeteksi marker.
BAB III
PERANCANGAN SISTEM
3.1 Analisis Kebutuhan

Analisis kebutuhan sistem ini ditujukan untuk menguraikan kebutuhan-
kebutuhan yang harus disediakan oleh sistem agar dapat memenuhi kebutuhan
pengguna dan sesuai dengan tujuan Tugas Akhir yaitu menerapkan teknologi
Augmented Reality pada perangkat lunak bersistem operasi Android.
Rancangan sistem ini menjelaskan kebutuhan antarmuka, kebutuhan data
masukan dan data keluaran yang menunjukkan spesifikasi sistem yang dapat
diakses.
3.1.1 Deskripsi Sistem
Konsep yang dibahas adalah bagaimana aplikasi ini menampilkan
berbagai informasi mengenai pemasaran properti, baik tentang profil perusahaan
properti, jenis properti apa saja yang dijual, fasilitas apa saja yang ditawarkan, dan
bagaimana menghubungi perusahaan tersebut. Selain itu, aplikasi ini juga dapat
menampilkan model 3D pada perangkat Android dengan menggunakan marker
yang berupa gambar 2D. Aplikasi ini akan dibuat untuk platform dan dirancang
menggunakan IDE Android Studio dan beberapa aplikasi desain grafis serta Unity
3D yang berfungsi untuk membuat Augmented Reality
Engine pengolah teknologi Augmented Reality yang digunakan pada
aplikasi ini adalah Vuforia yang merupakan package tambahan pada Unity 3D.
Desain pengolahan data teknologi Augmented Reality dapat dilihat di Gambar 3.1.
18
19
Gambar 3.1 Desain Aplikasi
Pada Gambar 3.1 dapat dilihat alur ketika menggunakan aplikasi ini,
yaitu ketika user mengakses aplikasi ini dan menggunakan fitur kamera untuk
memindai marker, aplikasi akan melihat hasil citra yang dihasilkan oleh kamera
secara real-time. Hasil citra tersebut kemudian diproses oleh Vuforia untuk
dicocokkan dengan data model 3D yang ada. Jika data tersebut cocok, maka
Vuforia akan menampilkan kepada user berupa Objek 3D yang sesuai di dalam
kamera. Objek tersebut akan muncul di atas marker sehingga terlihat seperti nyata.
Pada dasarnya aplikasi ini dibuat menggunakan engine Unity 3D yang
menggunakan bahasa C#. Unity 3D digunakan untuk diintegrasikan dengan
Vuforia, sehingga aplikasi yang dibuat bisa menyimpan objek 3D dan
menampilkan Augmented Reality di dalam kamera. Setelah sistem ini jadi
kemudian dibuat antarmuka awalnya.
Untuk antarmuka awal, aplikasi ini dibuat menggunakan IDE Android
Studio untuk membuat menu-menu dan informasi-informasi yang berkaitan
dengan perumahan tersebut. Android Studio sendiri menggunakan bahasa XML
untuk desain tampilannnya dan Java untuk pemrogamannya.
20
3.1.2 Kebutuhan Fungsional

Kebutuhan fungsional merupakan gambaran mengenai fungsi-fungsi
yang dapat dilakukan oleh sistem ini. Kebutuhan fungsional sistem meliputi:
a. Pengguna dapat mengetahui profil perusahaan.
b. Pengguna dapat mengetahui produk perumahan dan detailnya.
c. Pengguna dapat mengetahui fasilitas-fasilitas perumahan.
d. Pengguna dapat mengetahui portofolio perusahaan.
e. Pengguna dapat mengetahui website perusahaan.
f. Pengguna dapat mengetahui kontak perusahaan.
g. Pengguna dapat memindai marker berupa gambar 2D yang akan
menampilkan gambar 3D dari suatu perumahan dengan menggunakan
teknologi Augmented Reality.
3.1.3 Kebutuhan Non Fungsional

Kebutuhan non-fungsional adalah kebutuhan sistem meliputi kinerja,
kelengkapan operasi pada fungsi-fungsi yang ada, serta kesesuaian dengan
lingkungan penggunanya. Kebutuhan non-fungsional ini melingkupi beberapa
kebutuhan yang mendukung kebutuhan fungsional, rumusan kebutuhan non-
fungsional meliputi:
a. Kebutuhan Operasional
 Aplikasi dapat didistribusikan melalui internet dan harus dapat terinstal
pada perangkat Android.
 Sistem hanya dapat diakses melalui file format .apk yang telah terinstal di
perangkat Android.
 User interface pada aplikasi dibuat dengan sederhana untuk memudahkan
pengguna dari berbagai usia.
 Aplikasi dapat dijalankan pada minimal Android versi 4.3 (API 16).
 Sistem ini dibangun dengan menggunakan bahasa pemrograman Java.
 Sistem ini menggunakan game engine sebagai pengolah teknologi
Augmented Reality.
21
b. Performasi Sistem
Sistem yang dibangun merupakan aplikasi yang berjalan pada lingkungan
perangkat bergerak. Terdapat beberapa keterbatasan yang ditemui pada
perangkat bergerak meskipun sistem operasi yang digunakan adalah Android.
Oleh karena itu perlu diperhatikan guna menjadi acuan dalam pengembangan
sistem, diantaranya:
 Sumber daya baterai yang secara efektif hanya mampu bertahan selama
kurang lebih 6 jam dengan penggunaan secara terus menerus dan kurang
lebih 200 jam dalam keadan standby.
 Tampilan aplikasi antarmuka yang berpengaruh terhadap waktu tunggu
sehingga aplikasi benar-benar siap digunakan, semakin banyak komponen
yang digunakan akan semakin lama pula waktu tunggu yang dibutuhkan.
 Kebutuhan kamera pada perangkat bergerak harus benar – benar fokus
pada marker untuk mendeteksi.
Dari keterbatasan pada perangkat Android tersebut, maka diusulkan
beberapa alternatif untuk menunjang performa aplikasi dengan keterbatasan
yang ada, diantaranya:
 Merancang aplikasi dengan pemanfaatan sumber daya seefisien mungkin
namun tidak mengurangi fungsi dan performa aplikasi.
 Merancang aplikasi dengan antarmuka yang sederhana namun tetap
menarik dan mudah digunakan oleh pengguna.
 Membuat marker dengan gambar yang mudah terdeteksi oleh kamera.
3.1.4 Kebutuhan Perangkat Keras
Dalam pembuatan aplikasi ini, dibutuhkan beberapa spesifikasi perangkat
keras. Spesifikasi perangkat keras tersebut dapat dimasukkan ke dalam kebutuhan
perangkat keras dalam analisis kebutuhan. Karena menggunakan IDE Android
Studio dan juga Unity 3D, perangkat keras yang dibutuhkan dalam membuat
aplikasi ini adalah sebuah komputer dengan spesifikasi yang ditunjukkan pada
Tabel 3.1.
22
Tabel 3.1 Implementasi kebutuhan perangkat keras

Spesifikasi Keterangan
Processor Intel(R) Celeron(R) CPU N8230
RAM 2048 MB
VGA Intel (R) HD Graphics Family
Harddisk 500 GB
Seri Model Lenovo S20
3.1.5 Kebutuhan Perangkat Lunak

Dalam pembuatan aplikasi ini, dibutuhkan beberapa spesifikasi perangkat
lunak. Spesifikasi perangkat lunak tersebut dapat dimasukkan ke dalam kebutuhan
perangkat lunak dalam analisis kebutuhan. Perangkat lunak yang dibutuhkan baik
untuk merancang sistem, membuat sistem maupun menjalankan sistem adalah
seperti yang ditunjukkan pada Tabel 3.2.
Tabel 3.2 Implementasi kebutuhan perangkat lunak
Spesifikasi Keterangan
Sistem Operasi Windows 10 Pro 64 bit
IDE Android Android Studio 2.3.1
Game Engine Unity 5.6.0f3
Pengolah Augmented Reality Vuforia 6.2
Library CardView, RecyclerView, RecylerView
Animator, Calligraphy, Google Play Services,
Youtube Android Player, Picasso, Android
Image Slider
3.2 Desain Aplikasi

Desain aplikasi merupakan suatu proses perencanaan sebuah sistem yang
berjalan dan merupakan tahap lanjutan dari analisa sistem, dimana pada
perancangan sistem digambarkan rancangan sistem yang akan dibangun sebelum
dilakukan pengkodean kedalam suatu bahasa pemrograman. Tujuan dari
perancangan sistem secara global adalah membentuk kerangka sistem pengolahan
23
data dengan bantuan komputer. Rancangan sistem yang baik akan diterapkan
suatu kejadian untuk menentukan dan mengembangkan metoda prosedur dan
proses suatu data agar tujuan dari suatu organisasi dapat tercapai, sedangkan
tujuan dari perancangan sistem secara umum adalah memberikan gambaran secara
umum kepada pengguna mengenai sistem yang akan dirancang.
3.2.1 Diagram Use Case

Diagram use case menggambarkan fungsi-fungsi yang ada pada sistem.
Diagram ini lebih berfokus pada fitur-fitur sistem dari sudut pandang pihak luar,
yang dalam hal ini adalah pengguna aplikasi.
Gambar 3.2 Diagram use case pengguna

24
Gambar 3.2 menggambarkan fitur-fitur yang dapat diakses oleh

pengguna. Pengguna dapat mengakses semua menu yang teradapat dalam aplikasi
ini. Yaitu menu Profil, menu Produk, menu Fasilitas, menu Portofolio, menu
Website, Share Aplikasi, dan menu Contact. Termasuk di dalam menu Produk
yaitu melihat detail produk, dan melihat objek 3D dengan memanfaatkan
teknologi Augmented Reality menggunakan kamera.
3.2.2 Diagram Aktivitas

Diagram aktivitas menggambarkan logika prosedural, dan aliran kerja
dalam sistem yang sedang dirancang. Diagram aktivitas juga dapat digunakan
untuk menggambarkan proses paralel yang mungkin terjadi pada beberapa
eksekusi. Diagram aktivitas dapat dibagi menjadi beberapa swimlane object untuk
menggambarkan objek mana yang bertanggung jawab terhadap aktivitas tertentu.
1. Diagram Aktivitas Menu Utama
Diagram aktivitas ini menggambarkan aktivitas pengguna saat pertama kali
memulai aplikasi. Pengguna akan melihat tampilan splash screen dan menu
utama. Diagram aktivitas menu utama dapat dilihat pada Gambar 3.3.
Gambar 3.3 Diagram aktivitas menu utama

25
Gambar 3.3 merupakan gambar diagram aktivitas menu utama untuk

pengguna yang ingin memulai menggunakan aplikasi. Setelah pengguna
membuka aplikasi, sistem akan menampilkan layout splash screen. Setelah
itu sistem akan langsung membawa pengguna kepada layout menu utama
yang berisi fragment home.
2. Diagram Aktivitas Melihat Detail Produk
Diagram aktivitas ini menggambarkan aktivitas pengguna supaya bisa
melihat detail masing-masing produk yang ditarwakan. Pengguna dapat
masuk ke sistem ini dengan menekan icon menu yang terdapat pada sebelah
kiri atas tampilan.
Gambar 3.4 Diagram aktivitas melihat detail produk

Gambar 3.4 merupakan diagram aktivitas untuk melihat detail produk.
Setelah klik icon menu dan muncul Menu berbentuk Navigation Drawer.
Kemudian pilih menu Produk, setelah itu akan terlihat list macam-macam
produk. Untuk melihat detailnya, klik salah satu dari produk maka nanti
akan muncul halaman baru yang berisi detail produk tersebut.
26
3. Diagram Aktivitas Melihat AR

Diagram aktivitas ini menggambarkan aktivitas pengguna saat masuk ke
dalam Lihat AR. Pengguna dapat masuk ke sistem ini dengan menekan
tombol Lihat AR yang terdapat pada menu utama. Gambar 3.5 berikut
merupakan diagram aktivitas menu mulai.
Gambar 3.5 Diagram aktivitas melihat AR

Gambar 3.5 merupakan diagram aktivitas bagi pengguna yang akan
melakukan pemindaian marker untuk menampilkan model 3D dari rumah
yang dipilih. Setelah pengguna memilih menu Lihat AR, sistem akan masuk
ke dalam fungsi pemindaian Augmented Reality dan akan mengaktifkan
fungsi kamera dari perangkat Android. Lalu pengguna melakukan
pemindaian terhadap marker. Aplikasi akan mendeteksi marker yang
dipindai oleh pengguna, kemudian sistem akan otomatis mencocokkan
marker dengan database yang ada. Jika cocok, aplikasi akan menampilkan
model 3D yang sesuai dengan menggunakan teknologi Augmented Reality.
27
4. Diagram Aktivitas Fasilitas

Diagram aktivitas ini menggambarkan aktivitas pengguna saat mengakses
menu fasilitas. Menu fasilitas ini ditujukan untuk memberikan informasi
kepada pengguna mengenai fasilitas-fasilitas apa saja yang ada perumahan
tersebut. Diagram aktivitas fasilitas dapat dilihat pada Gambar 3.6.
Gambar 3.6 Diagram aktivitas melihat fasilitas

Gambar 3.6 merupakan diagram aktivitas fasilitas berisi data fasilitas yang
ada. Setelah pengguna klik icon menu, akan muncul menu dalam bentuk
navigation drawer. Kemudian setelah pengguna memilih menu Fasilitas,
aplikasi akan menampilkan fragment fasilitas yang berisi list fasilitas.
5. Diagram Aktivitas Portofolio
menu portofolio. Menu portofolio ini ditujukan untuk memberikan
informasi kepada pengguna mengenai portofolio perumahan yang pernah
dibangun oleh developer perumahan tersebut. Diagram aktivitas portofolio
dapat dilihat pada Gambar 3.7.
28
Gambar 3.7 Diagram aktivitas melihat portofolio

Gambar 3.7 merupakan diagram aktivitas portofolio berisi data fasilitas
yang ada. Setelah pengguna klik icon menu, akan muncul menu dalam
bentuk navigation drawer. Kemudian setelah pengguna memilih menu
portofolio,. aplikasi akan menampilkan fragment portofolio yang berisi
portofolio perumahan yang pernah dikerjakan.
6. Diagram Aktivitas Melihat Halaman Web
menu web. Menu web ini ditujukan untuk memberikan informasi kepada
pengguna langsung dari halaman web perumahan tersebut. Diagram
aktivitas portofolio dapat dilihat pada Gambar 3.8.
Gambar 3.8 Diagram aktivitas melihat web

29
Gambar 3.8 merupakan diagram aktivitas untuk menampilkan halaman web.

Setelah pengguna klik icon menu, akan muncul menu dalam bentuk
navigation drawer. Kemudian setelah pengguna memilih menu web,.
aplikasi akan menampilkan web activity yang dapat menampilkan webpage
dari perumahan tersebut.
7. Diagram Aktivitas Share
menu share. Menu share ini ditujukan untuk membagikan link download
aplikasi ini ke dalam aplikasi lain. Diagram aktivitas share dapat dilihat
pada Gambar 3.9.
Gambar 3.9 Diagram aktivitas untuk share

Gambar 3.9 merupakan diagram aktivitas share. Setelah pengguna klik icon
menu, akan muncul menu dalam bentuk navigation drawer. Kemudian
setelah pengguna memilih menu share,. aplikasi akan menampilkan dialog
share yang berisi aplikasi-aplikasi tujuan. Setelah memilih satu dari pilihan
yang ada, sistem akan membagikan ke dalam aplikasi tersebut berupa
konten berisi link download aplikasi Media Pemasaran Perumahan ini.
30
8. Diagram Aktivitas Contact

menu contact. Menu contact ditujukan untuk informasi perusahaan yang
bisa dihubungi. Diagram aktivitas contact dapat dilihat pada Gambar 3.10.
Gambar 3.10 Diagram aktivitas melihat contact

Gambar 3.10 merupakan diagram aktivitas contact berisi data kontak
perusahaan. Setelah pengguna klik icon menu, akan muncul menu dalam
bentuk navigation drawer. Kemudian setelah pengguna memilih menu
contact,. aplikasi akan menampilkan fragment contact yang berisi alamat
kantor pelayanan dan alamat kantor operasional, alamat ini juga dapat
dilihat di dalam peta. Selain itu juga berisi email dan nomor telepon
perusahaan yang dapat dihubungi.
3.2.3 Diagram Kelas
Diagram kelas menggambarkan komponen-komponen pembentuk sistem
yang berupa kelas atau interface, dan hubungan antar komponen tersebut. Pada
aplikasi Pemasaran Perumahan berbasis Android ini, diagram kelas dibagi
mencakup semua fungsi pada aplikasi yaitu menu Main Activity yang berisi
banyak fragment, SplashScreenActivity, WebActivity, dan DetailClusterActivity.
31
Gambar 3.11 merupakan diagram kelas dari menu materi pada aplikasi Pemasaran
Perumahan
(a)
(b)
32
(c)
Gambar 3.11 (a) Hubungan diagram kelas appcompat (b) Hubungan diagram kelas fragment
(c) Kelas – kelas independen
Dapat dilihat pada gambar 3.11 bahwa kelas-kelas utama yang terdapat
pada aplikasi ini extends ke AppCompatActivity, sedangkan kelas-kelas yang
sifatnya pengganti layout extends ke class Fragment. Selain itu juga ada
ClusterAdapter yang extends ke RecyclerView.Adapter, dan MyTextView yang
extends ke TextView. Sedangkan kelas yang lain berdiri sendiri yaitu
ClusterModel. Berikut adalah fungsi dari masing-masing kelas di atas:
a. Kelas SplashScreenActivity.Java, digunakan untuk menampilkan
splash screen. Yakni tampilan yang muncul beberapa detik sebagai
pembuka sebelum masuk ke aplikasi utama.
b. Kelas MainActivity.Java, digunakan untuk menangani seluruh navigasi
dari komponen NavigationDrawer dan juga sebagai lokasi dasar layout
untuk menampilkan fragment-fragment lain.
c. Kelas DetailClusterActivity.Java, digunakan untuk melihat detail
cluster rumah. Kelas ini digunakan untuk menampilkan data lengkap
cluster yang dipilih.
d. Kelas WebActivity.Java, digunakan untuk menampilkan halaman
website perusahaan. Kelas ini berfungsi seperti layaknya browser yang
menampilkan satu halaman web saja.
33
e. Kelas HomeFragment.Java, digunakan untuk menampilkan informasi

awal berupa profil perusahaan. Selain itu juga dapat memutar video
perusahaan yang didapat dari Youtube dengan memanfaatkan
YoutubePlayerAPI .
f. Kelas ClusterFragment.Java, digunakan untuk menampilkan list jenis
jenis cluster perumahan berupa gambar dan nama. List ini dibuat
menggunakan RecylerView yang mengambil data dari
ClusterModel.Java dan diintegrasikan dengan ClusterAdapter.Java.
g. Kelas FasilitasFragment.Java, digunakan untuk menampilkan fasilitas-
fasilitas apa saja yang terdapat dalam perumahan ini. Fasilitas
ditampilkan dengan gambar yang bergerak dengan memanfaatkan
library SliderLayout dan list teks dengan memanfaatkan ListView.
h. Kelas PortofolioFragment.Java, digunakan untuk menampilkan seluruh
portofolio yang pernah dikerjakan dengan menggunakan ImageView
biasa sebagai penampilnya.
i. Kelas ContactFragment.Java, digunakan untuk menampilkan informasi
kontak perusahaan baik dalam bentuk nomor telepon, email, maupun
alamat. Selain itu juga terdapat peta dengan memanfaatkan
GoogleMapsAPI.
Kelas lain yang berdiri sendiri yaitu kelas-kelas yang bersifat membantu
kelas-kelas utama. Kelas-kelas yang berdiri sendiri yaitu:
a. Kelas ClusterModel.Java berisi variabel apa saja yang dibutuhkan
untuk menampilkan informasi rumah dan juga berfungsi sebagai setter
dan getter informasi.
b. Kelas ClusterAdapter.Java digunakan untuk mengintegrasikan
RecyclerView pada ClusterFragment dengan ClusterModel
c. Kelas MyTextView.Java digunakan untuk membuat custom font
sehingga bisa menggunakan font di luar font default Android Studio.
d. Kelas Config.Java digunakan untuk konfigurasi API Key
YoutubePlayer
34
3.2.4 Perancangan Antarmuka

Perancangan aktivitas ini berfungsi untuk membuat layout dan fungsi
utama aplikasi Pemasaran Perumahan berbasis Android. Perancangan dilakukan di
folder Layout yang terdapat di dalam folder Res. Untuk perancangan antarmuka
dilakukan menggunakan XML atau juga bisa langsung menggunakan design yang
terdapat di dalam Android Studio Kemudian untuk fungsi utama dilakukan di
dalam folder Java. Berikut merupakan Layout dan fungsi utama yang mewakili
aktivitas aplikasi Pemasaran Perumahan.
1. Splash Screen
Desain tampilan splash screen digunakan untuk tampilan splash
screen pada aplikasi Pemasaran Perumahan berbasis Android. Gambar 3.12
merupakan tampilan layout tampilan splash screen aplikasi Pemasaran
Perumahan.
Gambar 3.12 Rancangan halaman splash screen

Dari gambar 3.12, tampilan antar muka splash screen digunakan
sebagai tampilan awal aplikasi ini, dimana membutuhkan layout dengan
jenis Relative Layout, dan menggunakan komponen berupa ImageView yang
berfungsi sebagai tempat mengaplikasikan gambar yang dijadikan sebagai
splash screen. Tampilan splash screen ini dibangun menggunakan bahasa
pemrograman xml yang ditangani oleh file activity_splash_screen.xml. Isi
script yang mewakili adalah sebagai berikut.
35
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context="com.krearive.hasanah.SplashScreenActivity">
<ImageView
android:id="@+id/imageViewLogoSplash"
android:layout_width="200dp"
android:layout_height="200dp"
app:srcCompat="@drawable/logohitam" />
</android.support.constraint.ConstraintLayout>
Pada setiap komponen yang dibuat terdapat atribut-atribut yang
digunakan untuk mengatur komponen tersebut. Atribut
android:layout_width dan android:layout_height digunakan untuk mengatur
lebar dan tinggi komponen. Ada 2 jenis pengaturan, yaitu match_parent dan
wrap_contents. Pengaturan match_parent berfungsi untuk mengatur ukuran
komponen menyesuaikan ukuran parent, yaitu layout induknya, jika parent
adalah ukuran device, berarti komponen tersebut menyesuaikan ukuran
device. Pengaturan wrap_content menyesuaikan ukuran komponen dengan
isi komponen tersebut. Atribut berikutnya yang digunakan adalah android:id
yang berfungsi untuk memberikan identifier untuk suatu komponen, dalam
hal ini adalah imageViewer. Atribut lain yang digunakan adalah
android:background yang berfungsi untuk mengatur background komponen.
Atribut tersebut bisa diisi warna dengan cara menuliskan kode heksadesimal
dari warna atau diisi gambar dengan menuliskan direktori gambar. Semua
gambar yang akan dijadikan latar harus diletakkan di direktori drawable.
Setelah pembuatan layout selesai, dilakukan pemberian perintah
dengan script yang ditulis dan ditangani oleh file Java bernama
SplashScreen.Java. Berikut merupakan script utama
SplashScreenActivity.Java.
new Handler().postDelayed(new Runnable() {

@Override
public void run() {
startActivity(new Intent(SplashScreenActivity.this,
MainActivity.class));
finish();
}
}, 3000);
36
Pemberian perintah dilakukan untuk memberikan waktu durasi splash

screen. Perintah untuk pemberian waktu jeda menggunakan fungsi
postDelayed pada Handler. Dapat dilihat bahwa diatur jeda sebesar 3000
milidetik kemudian dilakukan pemanggilan Intent untuk berpindah ke
MainActivity.Java. Finish() digunakan supaya aplikasi tidak dapat kembali
ke SplashScreenActivity.java lagi setelah masuk ke MainActivity.Java.
2. Navigation Drawer Menu
Navigation Drawer merupakan Menu yang muncul di sebelah kiri
tampilan ketika icon menu dipilih. Navigation Drawer ini berfungsi untuk
navigasi dan berpindah-pindah antar Activity maupun Fragment. Gambar
3.13 berikut merupakan tampilan layout menu utama.
Gambar 3.13 Rancangan halaman menu utama

Dapat dilihat pada Gambar 3.13, pada layout untuk menu utama ini
terdapat 7 menu pilihan dengan icon yang berfungsi menavigasi ke layout
lain sesuai dengan nama menu tersebut. Tombol tersebut terdiri atas menu
Profil, Produk, Fasilitas, Portofolio, Web, Share dan Contact. Berikut
merupakan script utama membuat dua item menu dalam Navigation Drawer.
37
<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android">
<group Android:checkableBehavior="single">
<item
Android:id="@+id/nav_home"
Android:icon="@drawable/icon_home"
Android:title="Profil" />
<item
Android:id="@+id/nav_web"
Android:icon="@drawable/icon_web"
Android:title="Web" />
</group>
</menu>
Tag yang digunakan yaitu item untuk membuat masing-masing item

menu. Atribut yang digunakan diantaranya adalah Android:id yang
berfungsi memberikan identitas komponen agar bisa dikenali di kelas Java.
Pada atribut diatas identitasnya adalah nav_home dan nav_web. Atribut lain
yang digunakan adalah Android:icon yang digunakan untuk menampilkan
icon menu yang diambil dari direktori drawable. Atribut Android:title
digunakan untuk memberikan nama menu yang tampil ketika menu dibuka.
Untuk menangani proses logikanya terdapat pada MainActivity.java.
NavigationView navigationView = (NavigationView)

findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
Script diatas merupakan sebuah sintaks utuk menginisialisasi komponen

NavigationView. Komponen NavigationView ini dapat dibuat dengan
memilih template Navigation Drawer Activity saat membuat Activity baru.
Selanjutnya untuk menangani ketika klik item NavigationView yaitu dengan
syntax setNavigationItemSelectedListener. Kemudian untuk menangani tiap
itemnya menggunakan method onNavigationItemSelected.
public boolean onNavigationItemSelected(MenuItem item) {

int id = item.getItemId();
if (id == R.id.nav_home) {
HomeFragment fragment = new HomeFragment();
FragmentManager manager = getSupportFragmentManager();
manager.beginTransaction()
.replace(R.id.frame_for_Fragment, fragment)
.commit();
getSupportActionBar().setTitle("Profil");
}
38
Dapat dilihat pada script di atas digunakan fungsi if-else untuk memilih
item berdasarkan Id item tersebut. Untuk berpindah antar menu, digunakan
Fragment yang dapat berubah-rubah tampilannya. Langkah-langkahnya
yaitu pertama dibuat terlebih dahulu masing-masing fragment menu-nya.
Kemudian diinisialisasi dengan syntax HomeFragment fragment = new
HomeFragment(); Setelah itu inisialisasi Fragment manager untuk merubah

tampilan layout dasar dengan fragment menu yang sesuai dengan sintaks
replace. Lalu ditambahkan getSupportActionBar.setTitle untuk merubah
judul aplikasi yang terdapat di ActionBar.
3. Menu Profil
Antar muka menu profil ditangani oleh file layout fragment_home.xml
dan penanganan fungsi oleh kelas HomeFragment.Java. Gambar 3.14
berikut merupakan tampilan layout menu profil.
Gambar 3.14 Rancangan halaman menu mulai

Dapat dilihat pada Gambar 3.13, pada layout untuk menu home yang
berisi profil ini terdapat komponen ImageView yang berisi Logo Perusahaan,
komponen TextView yang berisi deskripsi perusahaan. Dan komponen
FrameLayout untuk menampilkan video perusahaan dengan menggunakan
YoutubePlayerAPI. Berikut merupakan script utama di layout menu profil.
<LinearLayout
Android:orientation="vertical"
39
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<ImageView
Android:layout_width="300dp"
Android:layout_height="200dp"
Android:layout_gravity="center_horizontal"
Android:src="@drawable/logohitam"
Android:scaleType="centerCrop" />
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="@string/detail_perusahaan"
Android:layout_gravity="center_horizontal"
Android:textColor="@Android:color/white"
Android:textSize="16sp"
Android:layout_margin="20dp"
Android:textAlignment="center" />
<FrameLayout
Android:id="@+id/youtube_layout"
Android:layout_marginBottom="50dp" />
</LinearLayout>
Atribut yang digunakan diantaranya adalah Android:id yang berfungsi

memberikan identitas komponen agar bisa dikenali di kelas Java. Pada
atribut diatas identitasnya adalah youtube_layout. Atribut lain yang
digunakan adalah Android:src yang digunakan untuk menampilkan sumber
gambar di direktori drawable. Atribut Android:scale_type digunakan untuk
mengatur ukuran gambar ketika dimasukkan ke dalam ImageView. Atribut
Android:layout_margin digunakan untuk memberikan jarak dengan
komponen tersebut dengan komponen lain. Untuk menangani proses
logikanya terdapat pada HomeFragment.java
youTubePlayerFragment.initialize(Config.YOUTUBE_API_KEY, new
YouTubePlayer.OnInitializedListener() {
@Override
public void onInitializationSuccess(YouTubePlayer.Provider
provider, YouTubePlayer youTubePlayer, boolean b) {
if (!b) {
youTubePlayer.setPlayerStyle(YouTubePlayer.PlayerStyle.DEFAULT);
youTubePlayer.loadVideo("aTj2hgNmbE0");
youTubePlayer.play();
}
}
@Override
public void onInitializationFailure(YouTubePlayer.Provider
provider, YouTubeInitializationResult youTubeInitializationResult)
{
if (youTubeInitializationResult.isUserRecoverableError())
{
youTubeInitializationResult.getErrorDialog(getActivity(),
40
RECOVERY_REQUEST).show();
} else {
String error =
String.format(getString(R.string.player_error),
youTubeInitializationResult.toString());
Toast.makeText(getActivity(), error,
Toast.LENGTH_LONG).show();
}
}
});
Pada baris program di atas, Youtube Player Fragment adalah program
yang dibuat untuk menampilkan video di dalam Fragment. Untuk
menampilkan video tersebut, diperlukan Youtube Api Key yang didapatkan
di Google Developer Console.
Kemudian inisialisasikan Youtube Player Fragment dengan Youtube Api
Key dan OnInitializedListener untuk membaca apakah inisialisasi berhasil
atau tidak. OnInitializationSuccess adalah saat inisialisasi berhasil dan
onInitializationFailure adalah saat inisilialisasi gagal. Saat inisialisasi
berhasil, selanjutnya yaitu definisikan PlayerStyle dan tampilkan video
sesuai dengan kode video yang dimuat. Jika gagal maka akan muncul Toast
yang menampilkan error.
4. Menu Produk
Antar muka menu produk ditangani oleh file layout
fragment_cluster.xml dan penanganan fungsi oleh kelas
ClusterFragment.Java. Gambar 3.15 berikut merupakan tampilan layout
fragment produk yang berisi list daftar rumah siap jual.
41
Gambar 3.15 Rancangan halaman menu produk

Dapat dilihat pada Gambar 3.13, pada layout ini terdapat satu buah
komponen yaitu RecyclerView. Komponen berfungsi untuk menampilkan
daftar rumah apa saja yang tersedia. Untuk desain masing-masing item
digunakan layout dasar dengan nama cluster_item.xml. Berikut merupakan
script yang terdapat di cluster_item.xml
<FrameLayout
Android:layout_height="wrap_content">
<ImageView
Android:id="@+id/gambarCluster"
Android:scaleType="centerCrop"
Android:src="@drawable/rumah1" />
<LinearLayout
Android:layout_height="match_parent"
Android:layout_gravity="center_horizontal|bottom"
Android:alpha="50"
Android:background="#80000000"
Android:orientation="vertical">
<com.krearive.hasanah.MyTextView
Android:id="@+id/namaCluster"
Android:layout_gravity="center_horizontal|center"
Android:layout_marginStart="4dp"
Android:layout_marginLeft="4dp"
Android:gravity="center"
Android:maxLines="2"
Android:text="Nama Cluster"
Android:textAllCaps="false"
Android:textColor="#ffffff"
Android:textSize="50sp" />
</LinearLayout>
</FrameLayout>
42
Pada script tersebut dapat dilihat bahwa item cluster akan menampilkan
gambar cluster dengan menggunakan komponen ImageView dan nama
cluster dengan menggunakan komponen MyTextView yang merupakan
TextView yang dapat menampilkan custom font. Setelah pembuatan layout
dilakukan penanganan perintah melalui file ClusterAdapter.Java. Perintah
pada kelas tersebut dilakukan untuk mengatur tampilan listview berupa
gambar dan teks sedemikian rupa sehingga gambar dan nama rumah dapat
tersusun menjadi daftar. List cluster ini akan menampilkan gambar dan
nama rumah dari direktori drawable serta nama rumah dari array berjenis
String yang diambil dari Class khusus berisi ArrayList dengan nama
ClusterModel. Berikut contoh script utama yang terdapat di
ClusterModel.Java
public ClusterModel(String namaCluster, int gambarCluster) {
this.namaCluster = namaCluster;
this.gambarCluster = gambarCluster;
}
public String getNamaCluster() {
return namaCluster;
}
public void setNamaCluster(String namaCluster) {
this.namaCluster = namaCluster;
}
public int getGambarCluster() {
return gambarCluster;
}
public void setGambarCluster(int gambarCluster) {
this.gambarCluster = gambarCluster
}
}
Fungsi dari script di atas yaitu membuat class yang dapat digunakan
untuk setter and getter suatu nilai, seperti nama cluster dengan tipe data
String dan gambar cluster dengan tipe data int.
Di dalam ClusterFragment.Java terdapat ArrayList untuk set masing-
masing variabel tersebut. Langkah-langkahnya yaitu:
List<ClusterModel> listCluster = new ArrayList<>();
ClusterModel clusterLists = new ClusterModel("Cluster Umayyah 1",

R.drawable.rumah1, "Konsep bangunan layaknya di Turki, Maroko,
Pakistan (Ala Timur Tengah)\n" +
"Anda bisa merasakan benar benar berada diluar Indonesia", 2,
2, 60, 27, 525200000, R.drawable.siteplanumayyah,
R.drawable.tipe_27_60);
listCluster.add(clusterLists);
43
Supaya bisa muncul di RecyclerView diperlukan membuat Adapter

dengan nama ClusterAdapter sebagai perantara antara data dengan tampilan
cluster_item.xml. Berikut script utama yang terdapat di dalam
ClusterAdapter.Java
public class ViewHolder extends RecyclerView.ViewHolder {
MyTextView namaCluster;
ImageView gambarCluster;
CardView cardView;
public ViewHolder(View itemView) {

super(itemView);
namaCluster = (MyTextView)
itemView.findViewById(R.id.namaCluster);
gambarCluster = (ImageView)
itemView.findViewById(R.id.gambarCluster);
}
}
@Override
public ClusterAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.cluster_item, parent, false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(final ClusterAdapter.ViewHolder holder,
final int position) {
final ClusterModel ClusterModel = clusterLists.get(position);
holder.namaCluster.setText(ClusterModel.getNamaCluster());
Picasso.with(context)
.load(ClusterModel.getGambarCluster())
.centerCrop()
.into(holder.gambarCluster);
}
@Override
public int getItemCount() {
return clusterLists.size();
}
Dapat dilihat dalam RecylerView Adapter di atas ada 1 class dan 3

method utama, yaitu class ViewHolder, onCreateViewHolder,
onBindViewHolder, dan getItemCount. Class ViewHolder digunakan untuk
inisialisasi komponen apa saja yang ada di dalam cluster_item.xml, method
onCreateViewHolder digunakan untuk menghubungkan dengan cluster_item,
method onBindViewHolder digunakan untuk proses apa saja yang akan
dilakukan terhadap komponen-komponen yang terdapat di cluster_item.xml,
selain untuk mangatur teks dan gambar, bisa juga untuk menangani event
click, sedangkan method getItemCount untuk menentukan jumlah list yang
akan ditampilkan.
44
Berikut script untuk mengatur Adapter RecyclerView di dalam

ClusterFragment.Java.
RecyclerView recyclerView = (RecyclerView)
rootView.findViewById(R.id.recyclerView);
RecyclerView.Adapter adapter = new ClusterAdapter(listCluster,
getActivity());
RecyclerView.LayoutManager layoutManager = new
LinearLayoutManager(getActivity());
recyclerView.setLayoutManager(layoutManager);
recyclerView.setHasFixedSize(true);
SlideInRightAnimationAdapter animatorAdapter = new

SlideInRightAnimationAdapter(adapter);
animatorAdapter.setFirstOnly(false);
recyclerView.setAdapter(animatorAdapter);
Fungsi utama dari script tersebut adalah untuk menampilkan gambar dan
teks sesuai nama rumah masing – masing yaitu new ClusterAdapter
(listCluster, getActivity());. Perintah tersebut akan mengirimkan ArrayList
yang berisi banyak data ke ClusterAdapter. Di dalam Adapter data yang
dimasukkan akan disesuaikan dengan komponen-komponen yang terdapat
di cluster_item.xml. Selain itu juga terdapat LayoutManager yang berfungsi
untuk mengatur tampilan RecyclerView dalam bentuk Linear, Grid atau
Staggered. Untuk meningkatkan User Experience, digunakan Library
RecyclerViewAnimator untuk membuat animasi saat list rumahnya muncul,
dalam hal ini yaitu SlideInRightAnimationAdapter.
Selanjutnya, dari daftar yang ditampilkan pada layout
fragment_cluster.xml, apabila salah satu itemnya di-klik, data akan
dikirimkan menggunakan perintah putExtra dan akan muncul halaman baru
yang berisi detail rumah tersebut.
holder.cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent pindah = new Intent(context,
DetailClusterActivity.class);
//kirim data
pindah.putExtra("position",position);
pindah.putExtra("extraNama",
clusterLists.get(position).getNamaCluster());
context.startActivity(pindah);
}
});
45
Untuk mengirim data ke Detail Produk menggunakan syntax

putExtra(“key”,”value”) sebelum startActivity pada Intent. Supaya data
yang dikirim sesuai dengan produk yang dipilih, maka menggunakan syntax
clusterLists.get(position).
5. Menu Detail Cluster
Antar muka menu layout informasi ditangani oleh file layout
activity_detail_cluster.xml dan penanganan fungsi oleh kelas
DetailClusterActivity.Java. Gambar 3.16 berikut merupakan tampilan layout
activity_detail_cluster.xml.
Gambar 3.16 Rancangan halaman detail cluster

Dapat dilihat pada Gambar 3.16, pada layout ini akan berisi detail dari
cluster rumah yang dipilih. Komponen yang digunakan yaitu
CollapsingToolbarLayout untuk gambar rumah, Toolbar untuk nama rumah,
TextView untuk macam-macam detail rumah, ImageView untuk denah dan
siteplan rumah dan Button untuk melihat Augmented Reality rumah tersebut.
<Android.support.design.widget.AppBarLayout
Android:id="@+id/app_bar"
Android:layout_height="@dimen/app_bar_height"
Android:fitsSystemWindows="true"
Android:theme="@style/AppTheme.AppBarOverlay">
<Android.support.design.widget.CollapsingToolbarLayout
Android:id="@+id/toolbar_layout"
Android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
46
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar"
Android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
<include layout="@layout/content_detail_cluster" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_margin="@dimen/fab_margin"
Android:src="@drawable/icon_panggil"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end" />
<Button
Android:id="@+id/btnAugment"
Android:background="@color/colorAccent"
Android:layout_gravity="bottom"
Android:text="Lihat dengan Augmented Reality"
Android:textColor="@Android:color/white" />
Komponen CollapsingToolbarLayout adalah jenis layout yang dapat

hilang apabila aplikasi digulirkan ke bawah. Termasuk salah satu template
awal yang terdapat di Android Studio dengan nama ScrollingActivity.
Terdapat juga FloatingActionButton yang berfungsi untuk menelfon
langsung jika berminat dengan rumah jenis tersebut. Kemudian terdapat
pula Button untuk menampilkan objek Augmented Reality. Terdapat pula
include yang digunakan untuk menampilkan layout lain namun masih satu
Activity dengan DetailClusterActivity.
String intentNama = getIntent().getStringExtra("extraNama");

String intentDetail = getIntent().getStringExtra("extraDetail");
int intentgambar =
getIntent().getExtras().getInt("extraGambar");
getSupportActionBar().setTitle(intentNama);
detail = (TextView) findViewById(R.id.detail_perusahaan);

detail.setText(intentDetail);
detailGambar = (CollapsingToolbarLayout)
findViewById(R.id.toolbar_layout);
detailGambar.setBackgroundResource(intentgambar);
Baris program tersebut adalah script yang berfungsi untuk menampilkan

detail produk. Script ini terdapat pada DetailActivity.java. Fungsi dari
47
getIntent().getExtras digunakan untuk mengambil data yang dikirim dari

ClusterFragment dengan key tertentu kemudian dimasukkan ke dalam
bentuk variabel baru. Setelah itu data yang diambil ditampilkan dengan
menggunakan setText maupun dengan setBackgroundResource. Khusus
untuk judul menggunakan getSupportactionBar.setTitle karena digunakan
untuk mengganti judul pada ActionBar.
6. Menu Fasilitas
Antar muka menu fasilitas ditangani oleh file layout
fragment_fasilitas.xml dan penanganan fungsi logika ditangani oleh kelas
FasilitasFragment.Java. Gambar 3.17 berikut merupakan tampilan layout
menu fasilitas.
Gambar 3.17 Rancangan halaman menu fasilitas

Dapat dilihat pada Gambar 3.17, pada layout untuk menu fasilitas ini
terdapat komponen library Slider Layout yang berfungsi sebagai penampil
gambar. kemudian komponen ListView yang berisi list semua fasilitas.
Berikut merupakan script utama di layout menu fasilitas.
<com.daimajia.slider.library.SliderLayout
Android:id="@+id/slider"
custom:pager_animation="Accordion"
custom:auto_cycle="true"
custom:indicator_visibility="visible"
custom:pager_animation_span="1100"
Android:layout_height="200dp"/>
48
<ListView
Android:id="@+id/listView"
Android:layout_height="match_parent">
</ListView>
Dapat dilihat di atas dalam Slider Layout terdapat custom attribut yang
digunakan untuk mendukung penggunaan library. Seperti pager_animation
untuk menentukan jenis animasi, auto_cycle untuk membuat gambar
berpindah otomatis, indicator_visibility untuk menampilkan indikator.
Untuk menangani proses logikanya terdapat pada FasilitasFragment.java.
fasilitasSlider = (SliderLayout)
rootview.findViewById(R.id.slider);
for(int i = 0 ; i < imageFasilitas.length ; i++){
TextSliderView textSliderView = new
TextSliderView(getActivity());
textSliderView
.image(imageFasilitas[i])
.setScaleType(BaseSliderView.ScaleType.Fit);
fasilitasSlider.addSlider(textSliderView);
}
fasilitasSlider.setPresetTransformer(SliderLayout.Transformer.Accord
ion);
fasilitasSlider.setPresetIndicator(SliderLayout.PresetIndicators.Cen
ter_Bottom);
fasilitasSlider.setCustomAnimation(new DescriptionAnimation());
fasilitasSlider.setDuration(5000);
Pada baris program di atas, adalah script yang terdapat di

FasilitasFragment.java, script ini berfungsi untuk menampilkan slider yang
berisi gambar-gambar fasilitas. Untuk menggunakan SliderLayout,
diperlukan library dengan nama AndroidImageSlider
Setelah inisialisasi, gambar yang sudah dalam bentuk Array dimasukkan
ke dalam Slider dengan menggunakan fungsi fo. Fungsi dari masing-masing
script di atas yaitu: setPresetTransformer digunakan untuk menentukan
animasi slider, setPresetIndictor digunakan untuk mennetukan lokasi
indikator, setCustomAnimation digunakan untuk animasi deskripsi gambar,
dan setDuration digunakan untuk menentukan durasi jeda antar perpindahan
gambar.
listView = (ListView) rootview.findViewById(R.id.listView);

adapter = new ArrayAdapter(getActivity(),
android.R.layout.simple_list_item_1, judulFasilitas);
49
listView.setAdapter(adapter);
Sedangkan untuk menampilkan list berupa teks menggunakan ListView

digunakan Adapter. Data teks diambil dari Array berisi teks bernama
judulFasilitas.
7. Menu Portofolio
Antar muka menu portofolio ditangani oleh file layout
fragment_portofolio.xml dan penanganan fungsi logika ditangani oleh kelas
PortofolioFragment.Java. Gambar 3.18 berikut merupakan tampilan layout
menu portofolio.
Gambar 3.18 Rancangan halaman menu portofolio

Dapat dilihat pada Gambar 3.18, pada layout untuk menu portofolio
terdapat kumpulan komponen ImageView yang berisi project perumahan
apa saja yang sudah pernah ditangani. Berikut merupakan script utama di
layout menu portofolio.
50
<ImageView
android:id="@+id/portofolio1"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/portofolio1" />
<ImageView
android:id="@+id/portofolio2"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/portofolio2" />
Untuk menangani proses logikanya terdapat pada

FortofolioFragment.java.. Baris program tersebut adalah script yang
berfungsi untuk menampilkan gambar portofolio rumah yang pernah
dibangun dengan menggunakan komponen ImageView.
Android:layout_weight digunakan supaya antara gambar yang kanan dan
kiri bisa seimbang dengan perbandingan 1:1.
@Override
if (v.getId() == R.id.portofolio_diandra) {
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse("http://www.diandraserpongvillage.com/"));
startActivity(i);
} else if (v.getId() == R.id.portofolio_sakinah_village) {
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse("http://sakinahvillage.com/"));
startActivity(i);
}
}
Pada baris program di atas, adalah script yang berfungsi untuk

menampilkan portofolio perumahan yang pernah ditangani oleh developer.
Untuk melihat lebih detail portofolio. Apabila gambar portofolio tersebut,
maka akan memunculkan website terkait di dalam browser. Untuk itu
diperlukan Intent untuk memanggil activity yang di luar aplikasi, yaitu
dengan menggunakan Intent.ACTION_VIEW. Kemudian masukkan URL
website terkait dan jalankan dengan startActivity.
51
8. Menu Halaman Web

Antar muka menu mulai ditangani oleh file layout activity_web.xml
dan penanganan fungsi oleh kelas WebActivity.Java. Gambar 3.19 berikut
merupakan tampilan layout menu halaman web.
Gambar 3.19 Rancangan halaman menu website

Dapat dilihat pada Gambar 3.19, pada layout untuk menu portofolio
terdapat satu komponen yang memenuhi layar yaitu komponen WebView.
Berikut script utama untuk menampilkan WebView pada activity_web.xml
<WebView
Android:id="@+id/webView"
Android:layout_height="match_parent" />
Pada komponen WebView terdapat atribut-atribut yang digunakan

untuk mengatur komponen tersebut. Atribut yang digunakan adalah
android:id yang berfungsi untuk memberikan identifier untuk suatu
komponen, dalam hal ini adalah WebView. Atribut yang lainnya
android:layout_width dan android:layout_height digunakan untuk mengatur
lebar dan tinggi komponen. Keduanya menggunakan match_parent karena
dibutuhkan halaman website dapat tampil memenuhi layar. Untuk
menangani proses logikanya terdapat pada WebActivity.java.
52
myWebView = (WebView) findViewById(R.id.webView);

myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setBuiltInZoomControls(true);
myWebView.loadUrl("http://hasanahcity.com/");
myWebView.setWebViewClient(new WebViewClient());
final Activity MyActivity = this;
myWebView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
MyActivity.setTitle("Loading...");
if (progress == 100)
MyActivity.setTitle(myWebView.getTitle());
}
});

menampilkan website secara langsung di dalam aplikasi tanpa membuka
browser. Yaitu dengan memanfaatkan komponen WebView. Script ini
terdapat pada WebActivity.java. Langkahnya yaitu setelah inisialisasi, atur
konfigurasi WebView dengan getSettings. setJavaScriptEnabled(true) untuk
mengatur supaya Javascript aktif, dan setBuildInZoomControls(true) untuk
mengaktifkan tombol Zoom. Atur loadUrl dengan alamat website yang akan
diakses.
SetWebViewClient adalah komponen utama untuk bisa menampilkan
website di dalam aplikasi. Sedangkan setWebChromeClient adalah
komponen untuk mengakses fitur-fitur tambahan, salah satunya yaitu
onProgressChanged untuk mengetahui ketika ada proses berjalan. Saat
proses memuat, title pada ActionBar akan berubah menjadi “Loading...” dan
saat proses selesai title pada ActionBar berubah sesuai dengan Judul website.
9. Menu Share
Antar muka menu share ini dibuat secara otomatis dengan
menggunakan fasilitas Intent yang ada di dalam Android. Untuk antar muka
akan menjadi seperti ini ketika tombol item menu Share diklik.
53
Gambar 3.20 Rancangan halaman menu share

Dapat dilihat pada Gambar 3.20, ketika item menu Share diklik akan
muncul pilihan ke aplikasi mana konten ini dibagikan. Untuk membuat
dialog seperti ini, caranya yaitu dengan menambahkan script berikut :
Intent share = new Intent(Android.content.Intent.ACTION_SEND);
share.setType("text/plain");
share.putExtra(Intent.EXTRA_SUBJECT, "Hasanah City");
share.putExtra(Intent.EXTRA_TEXT, "Mau punya rumah idaman tanpa riba?
\n Download aplikasi ini
https://play.google.com/store/apps/developer?id=Pesantren+Programmer
");
startActivity(Intent.createChooser(share, "Share ke Sahabatmu"));
Intent.ACTION_SEND adalah jenis action Intent yang digunakan

untuk mengirim data. setType adalah bentuk konten yang dibagikan, dalam
hal ini yaitu text/plain. Kemudian data yang ingin dikirim dimasukkan
dengan menggunakan putExtra. Langkah terahir yaitu Intent.createchooser
untuk menampilkan dialog pilihan aplikasi tujuan.
10. Menu Halaman Contact
Antar muka menu contact ditangani oleh file layout
activity_contact.xml dan penanganan fungsi oleh kelas
ContactFragment.Java. Gambar 3.21 berikut merupakan tampilan layout
menu halaman contact.
54
Gambar 3.21 Rancangan halaman menu contact

Dapat dilihat pada Gambar 3.21, pada layout ini terdapat komponen
ImageView untuk menampilkan logo perusahaan, TextView untuk
menampilkan kontak, dan Fragment untuk menampilkan peta dengan
bantuan Google Maps API. Berikut script utama untuk menampilkan
WebView pada fragment_contact.xml
<TextView
Android:id="@+id/nomerTelepon"
Android:text="085740482440"
Android:focusableInTouchMode="true"
Android:textSize="18dp"
Android:layout_margin="10dp"
Android:textStyle="bold"
Android:textColor="#eeeeee" />
<com.google.Android.gms.maps.MapView
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/mapView"
Android:layout_width="fill_parent"
Android:layout_marginBottom="100dp"
Android:layout_marginLeft="10dp"
Android:layout_marginRight="10dp"
Android:layout_marginTop="10dp"/>
TextView digunakan untuk menampilkan informsi-informasi kontak,

sedangkan MapView digunakan untuk menampilkan peta alamat perusahaan.
Khusus untuk menampilkan peta diperlukan Google Maps API yang
digunakan untuk mengakses peta.
55
nomortelepon = (TextView)
rootview.findViewById(R.id.nomerTelepon);
nomortelepon.setOnClickListener(new View.OnClickListener() {
@Override
String NoTelepon="085740482440";
Intent intent = new Intent(Intent.ACTION_DIAL,
Uri.parse("tel:" + NoTelepon));
startActivity(intent);
}
});

melakukan panggilan telefon. Yaitu dengan memanfaatkan Intent. Script ini
terdapat pada ContactFragment.java. Langkah yang pertama yaitu
inisialisasi komponen, kemudian mendefinisikan Intent. Intent yang dipakai
untuk telefon yaitu Intent.ACTON_DIAL. Sedangkan kode uri yang dipakai
yaitu “tel:” Kemudian jalankan dengan startActivity.
emailperusahaan = (TextView)
rootview.findViewById(R.id.emailPerusahaan);
emailperusahaan.setOnClickListener(new View.OnClickListener() {
@Override
String email="faizin.arief@gmail.com";
Intent intent = new Intent(Intent.ACTION_SENDTO,
Uri.fromParts(
"mailto",email, null));
intent.putExtra(Intent.EXTRA_SUBJECT, "Tertarik dengan
Hasanah City");
startActivity(Intent.createChooser(intent, "Kirim
Email"));
}
});

melakukan persiapan mengirim email. Yaitu dengan memanfaatkan Intent.
Langkah yang pertama yaitu inisialisasi komponen, kemudian
mendefinisikan Intent. Intent yang dipakai untuk telefon yaitu
Intent.ACTON_SENDTO. Sedangkan kode uri yang dipakai yaitu “mailto:”
Kemudian jalankan dengan startActivity dan Intent.createChooser untuk
menentukan aplikasi apa yang digunakan untuk mengirim email.
56
@Override
public void onMapReady(GoogleMap googleMap) {
map = googleMap;
map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
map.getUiSettings().setZoomControlsEnabled(true);
map.getUiSettings().setMyLocationButtonEnabled(true);
LatLng operationalOfficer = new LatLng(-6.5893268,

106.7821629);
LatLng serviceOfficer = new LatLng(-6.594619, 106.7930447);
map.addMarker(markerOption.position(operationalOfficer).title("
Operational Office")).showInfoWindow();
map.addMarker(markerOption.position(serviceOfficer).title("Serv
ice Office")).showInfoWindow();
map.animateCamera(CameraUpdateFactory.newLatLngZoom(serviceOffi
cer, 14));

menampilkan maps. Yaitu dengan memanfaatkan Google Maps API.
Langkah yang pertama yaitu mendapatkan API key untuk Google Maps di
Google Developer Console. Selanjutnya implement onMapReadyCallback
untuk menyiapkan peta dan class onMapReady adalah kelas utama untuk
menangani ini. setType digunakan untuk mengatur jenis peta yang
ditampilkan. Kemudian atur peta dengan syntax getUiSettings.
setZoomControlsEnabled untuk mengaktifkan tombol zoom
setMyLocationButtonenabled untuk mengaktifkan tombol MyLocation.
AddMarker digunakan untuk menambahkan marker ke dalam peta.
Parameter yang diperlukan yaitu position dalam bentuk Latitude dan
Longitude, dan title untuk nama marker. Terakhir tambahkan
animateCamera untuk mengatur maps langsung ke lokasi terntu dengan
disertai animasi.
3.2.5 Perancangan Marker
Perancangan Marker berfungsi sebagai penanda untuk menampikan
objek virtual Augmented Reality. Marker ini dicetak dan dibuat dalam bentuk
leaflet yang sekaligus sebagai bahan promosi. Marker yang digunakan yaitu
gambar produk yang sama dengan produk yang terdapat dalam aplikasi ditambah
dengan keterangan nama Cluster.
57
Gambar 3.22 berikut adalah perancangan marker untuk keseluruhan

produk:
(a)
(b)
(c)
58
(d)
(e)
(f)
59
(g)
(h)
(i)
Gambar 3.22 (a) Marker produk umayyah 1 (b) Marker produk umayyah 2, (c) Marker produk
umayyah 3, (d) Marker produk abbasiyah 1, (e) Marker produk abbasiyah 2, (f) Marker produk
abbasiyah 3, (g) Marker produk ustmaniyyah 1, (h) Marker produk ustmaniyyah 2, (i) Marker
produk ustmaniyyah 3.
60
3.2.6 Perancangan Sistem Augmented Reality

Perancangan sistem ini berfungsi untuk menampilkan objek 3D dengan
menggunakan teknologi Augmented Reality. Perancangan dilakukan dengan
menggunakan Platform Vuforia dan Game Engine Unity. Berikut merupakan
langkah-langkah untuk membuat aplikasi Augmented Reality.
1. Autentikasi Vuforia
Pada Unity terdapat package yang disediakan oleh Vuforia untuk
keperluan Augmented Reality. Pada package tersebut terdapat dua
komponen utama yang berfungsi untuk menjalankan fungsi AR tersebut,
dua komponen tersebut adalah AR Camera, dan Image Target. Untuk
menjalankan fungsi dari komponen tersebut, diperlukan lisensi dari
Vuforia dan Image Marker yang sudah terdaftar pada Vuforia. Gambar
3.23 dibawah ini adalah proses autentikasi pada Vuforia.
(a)
61
(b)
Selanjutnya klik nama License yang diinginkan, dan lalu akan
dihadapkan pada sebuah teks acak seperti diatas. Teks inilah yang akan
digunakan pada aplikasi Unity jika ingin memanfaatkan fitur AR milik
Vuforia.
(c)
62
(d)
Gambar 3.23 (a) Registrasi aplikasi, (b) Lisensi aplikasi, (c) Registrasi marker, (d)
Database marker
Proses ini membutuhkan waktu yang singkat, apabila proses unggah
memerlukan waktu lama maka kualitas gambar kurang bagus. Minimal
gambar unggahan harus memiliki setidaknya 8 bit warna dan maksimal
memilki 24 bit warna, serta memiliki tingkat kontras warna cukup jauh
antara satu titik dengan titik lainnya. Semakin tinggi bintang yang
didapatkan artinya gambar semakin mudah untuk dikenali. Pattern
tersebutlah yang akan menjadi patokan Vuforia dalam menciptakan efek
Augmented Reality.
2. Penggunaan Komponen Unity
Penggunaan package Vuforia pada Unity berfungsi untuk menampilkan
model 3 dimensi pada marker yang telah terdaftar pada Vuforia,
komponen imagetarget berfungsi untuk menampilkan marker yang
terdapat pada marker database yang nantinya akan digunakan untuk
pemindaian. Gambar 3.24 berikut adalah proses penggunaan package
pada Unity.
63
(a)
(b)
Gambar 3.24 (a) Komponen ARCamera, (b) Komponen Image Target
Kamera AR dan Image Target adalah dua komponen pada package

Vuforia yang berfungsi untuk memindai dan memanggil model 3D dari
gambar 2D. Pada komponen Image Target terdapat database yang berisi
gambar – gambar untuk dipindai. Sedangkan, pada komponen kamera
AR, terdapat fungsi (script) yang berfungsi untuk memindai marker
sesuai database yang diberikan.
3. Model 3D
Model 3D dimasukkan pada komponen Image Target, model 3D
disertakan pada bagian muka dari image target, hal ini dilakukan untuk
memuat model 3D pada saat pemindaian. Gambar 3.25 berikut
merupakan proses pengaturan Augmented Reality pada Unity.
64
(a)
(b)
Gambar 3.25(a) Penempatan model 3D, (b) Pengaturan pada komponen kamera AR
dan Image Target
Gambar 3.25(a) merupakan proses penempatan model 3D pada
Unity.Setelah model 3d disertakan pada scene Unity, dilakukan
pengaturan pada masing – masing komponen untuk menjalankan fungsi
dari setiap komponen tersebut dengan baik. Gambar 3.25(b) adalah
pengaturan yang dilakukan pada setiap komponen.
65
4. Import Projek ke Android

Build semua komponen yang terdapat pada projek Unity tersebut
kedalam platform Android. Untuk membangun sebuah aplikasi Android
dari projek Unity, diperlukan pengaturan pada Unity. Gambar 3.26
berikut merupakan pengaturan yang dilakukan untuk membangun
sebuah aplikasi Android dari Unity project.
(a)
66
(b)
Gambar 3.26 (a) Pengaturan build settings, (b) Pengaturan platform
Setelah semua komponen dan semua pengaturan diatur sedemikian rupa,

maka projek unity tersebut dapat di build kedalam format Android untuk
menghasilkan aplikasi Pemasaran Perumahan dengan teknologi
Augmented Reality
BAB IV
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi
Pada aplikasi ini dilakukan implementasi hasil perancangan pada antarmuka
sistem. Hal ini dilakukan untuk menerapkan perancangan sistem yang telah dibuat
menjadi antarmuka aplikasi yang sesuai.
4.1.1 Implementasi Antarmuka Sistem
Pada implementasi antarmuka sistem ini menggambarkan bagaimana
program berjalan dari awal mulai hingga akhir. Antarmuka aplikasi yang terdapat
pada perangkat Android.
1. Antarmuka berbasis Android
Pada saat menjalankan aplikasi pada perangkat Android, tampilan
pertama yang muncul adalah tampilan splash screen sebagai halaman pertama
aplikasi. Berikut merupakan tampilan splash screen sesuai dengan rancangan
yang sudah dibuat.
Gambar 4.1 Tampilan splash screen

Gambar 4.1 menunjukkan tampilan splash screen. Tampilan ini
merupakan tampilan pembuka berisi gambar yang diberi waktu tampil selama
67
68
beberapa detik. Setelah waktu splash screen habis, maka aplikasi secara
default akan langsung menampilkan menu Profil. Untuk bernavigasi antar
menu, caranya yaitu dengan klik icon menu di sebelah kiri atas, maka akan
muncul Navigation Drawer yang berisi menu-menu yang terdapat di dalam
aplikasi Pemasaran Perumahan ini.
Gambar 4.2 Tampilan menu utama

Menu yang pertama yaitu menu profil yang berisi logo dan profil
perusahaan yang ditampilkan dengan menggunakan fragment, sehingga untuk
mengganti tampilan tidak perlu berganti Activity lain. Selain itu juga terdapat
video profil perusahaan yang dapat diputar dengan memanfaatkan
YoutubePlayerAPI.
Gambar 4.3 Tampilan video profil dengan YoutubePlayerAPI

Salah satu menu utama aplikasi ini adalah Menu Produk yang berisi list
tipe-tipe cluster yang ditampilkan menggunakan RecyclerView. Tiap tiap
69
itemnya berisi gambar cluster dan nama clusternya. Gambar 4.4 berikut
merupakan tampilan menu Cluster.
Gambar 4.4 Tampilan menu produk

Dengan klik pada item gambar cluster, akan berpindah ke activity baru yang
berisi detail cluster. Halaman ini terdapat keterangan berupa Jumlah lantai,
kamar tidur, luas tanah, luas bangunan, harga, deskripsi, gambar siteplan, dan
gambar denah rumah. Gambar 4.5 (a) Berikut merupakan tampilan detail
cluster (b) merupakan tampilan detail cluster setelah digeser ke bawah.
(a)
70
(b)
Gambar 4.5 (a) Tampilan detail cluster dan (b) Tampilan detail cluster setelah digeser ke
bawah
Dapat dilihat karena menggunakan CollapsingToolbarLayout pada
tampilan awal di Gambar 4.5 (a) terlihat toolbar berisi gambar cluster. Namun
saat digeser ke bawah gambar tersebut berubah menjadi toolbar seperti biasa
seperti pada gambar 4.5(b)
Menu selanjutnya yaitu Menu Fasilitas, pilih icon menu dan pilih item
Fasilitas. Menu Fasilitas digunakan untuk menampilkan macam-macam
fasilitas. Gambar 4.6 berikut merupakan tampilan dari Menu Fasilitas.
Gambar 4.6 Tampilan menu fasilitas

71
Terlihat pada Gambar 4.6 Poster fasilitas dapat berganti secara otomatis
karena menggunakan library Slider Layout . Sedangkan untuk list Fasilitas
dibuat menggunakan ListView juga berfungsi untuk megganti poster Fasilitas.
Pada Menu Portofolio, terdapat gambar-gambar portofolio project yang
pernah ditangani. Gambar 4.7 berikut merupakan tampilan pada menu
Portofolio.
Gambar 4.7 Tampilan menu portofolio

Kemudian klik icon Menu dan pilih Menu Web untuk navigasi ke
halaman Web. Menu Web ini dapat mengakses halaman website perusahaan,
dalam hal ini yaitu alamat http://hasanahcity.com/. Gambar 4.8 berikut
merupakan tampilan pada menu Web.
Gambar 4.8 Tampilan menu website

72
Kemudian klik icon Menu dan pilih Menu Share untuk membagikan
tautan link aplikasi. Menu Share ini memanfaatkan Intent untuk memanggil
dialog share yang sudah terdapat dalam OS Android. Gambar 4.9 berikut
merupakan tampilan ketika memilih aplikasi tujuan.
(a)
(b)
Gambar 4.9 (a) Tampilan dialog share (b) Hasil share di aplikasi tujuan
Dapat dilihat pada gambar 4.9(a) muncul dialog share yang berisi pilihan
lokasi tujaun. Lalu pada gambar 4.9(b) adalah tampilan pada aplikasi tujuan
sebelum share tautan aplikasi, dalam hal ini yaitu pada aplikasi Facebook
Lite.
73
Kemudian klik icon Menu dan pilih Menu Contact untuk navigasi ke
Menu Contact. Menu Contact ini menggunakan TextView untuk tiap
informasi kontak. TextView ini dapat diklik dan melakukan panggilan
telepon maupun mengirim email. Selain itu juga terdapat peta alamat kantor
perusahaan dengan memanfaatkan GoogleMapsAPI. Gambar 4.10 berikut
merupakan tampilan manu Contact.
(a)
(b)
74
(c)
Gambar 4.10 (a) Tampilan menu contact (b) Tampilan kirim email (c) Tampilan aplikasi
telepon
Dapat dilihat pada gambar 4.10(a) merupakan tampilan menu Contact.
Dapat dilihat pada peta terdapat 2 marker yang merupakan dua lokasi kantor,
dalam hal ini yaitu kantor Pelayanan dan kantor Operasional. Kemudian pada
4.10(b) adalah tampilan pada aplikasi tujuan setelah klik TextView email,
dalam hal ini yaitu aplikasi Gmail. Dapat dilihat email dan subject sudah
otomatis terisi. Kemudian pada 4.10(c) adalah tampilan pada aplikasi tujuan
setelah klik TextView nomor telepon, dalam hal ini yaitu aplikasi bawaan OS
Android, yaitu aplikasi Telepon. Dapat dilihat nomor telepon sudah terisi.
4.1.2 Implementasi dan Pembahasan Script
Pada implementasi script pada Unity, terdapat beberapa fungsi yang dibuat
dan dimodifikasi untuk memenuhi kebutuhan fungsional aplikasi ini. Secara
standar, Unity tidak menyediakan fitur untuk mengganti scene, menutup aplikasi
dengan tombol kembali, menampilkan tombol dan suara saat pemindaian berhasil
dalam Vuforia, sehingga diperlukan suatu perancangan baris program yang dapat
menjalankan fungsi yang diperlukan tersebut. Berikut adalah baris – baris
program yang digunakan :
1. Script Memutar Suara
public AudioSource soundTarget;
public AudioClip clipTarget;
private AudioSource[] allAudioSources;
void StopAllAudio()
{
allAudioSources = FindObjectsOfType(typeof(AudioSource))
as AudioSource[];
foreach (AudioSource audioS in allAudioSources)
{
audioS.Stop();
}
}
75
void playSound(string ss)

{
clipTarget = (AudioClip)Resources.Load(ss);
soundTarget.clip = clipTarget;
soundTarget.loop = false;
soundTarget.playOnAwake = false;
soundTarget.Play();
}
private void OnTrackingFound()

{
if (mTrackableBehaviour.TrackableName == "Rumah1")
{
playSound("sounds/ClusterUmayyah1");
}
}
private void OnTrackingLost()

{
StopAllAudio();
}
}
}
Pada baris program di atas, adalah script yang berfungsi untuk menampilkan
atau mengaktifkan segala komponen ketika program mendeteksi adanya
marker, namun untuk memainkan suara ketika program mendeteksi marker
maka dilakukan modifikasi pada baris program tersebut untuk berfungsi
sesuai kebutuhan. Pada baris method OnTrackingFound(); terdapat if
(mTrackableBehaviour.TrackableName == "Rumah1") {playSound ("sounds/
ClusterUmayyah1");}, yaitu method yang digunakan untuk memutar suara
sesuai dengan nama AR yang terdeteksi suara.Play(), sedangkan ketika
pemindaian atau marker hilang maka akan menjalankan fungsi
OnTrackingLost, dimana di dalamnya terdapat method StopAllAudio(); yang
berfungsi untuk menghentikan suara. Suara yang dimainkan pada fungsi ini
adalah suara yang telah dimasukkan sebelumnya kedalam folder
Resources/Audio sesuai dengan nama masing-masing, sehingga suara yang
dihasilkan dapat sesuai dengan marker yang terdeteksi oleh kamera.
76
3. Script Menutup Aplikasi

using UnityEngine;
using System.Collections;
public class quitonback : MonoBehaviour {
void Start () {}
void Update () {
if(Application.platform==RuntimePlatform.Android)
{if (Input.GetKeyUp(KeyCode.Escape))
{
Application.Quit();
return;
}}
}
}
Secara standar untuk menutup aplikasi Unity yaitu dengan cara force close
atau menutup dengan menekan tombol home sehingga program masih
berjalan pada background dan belum menutup sempurna. Pada baris program
di atas adalah script yang berfungsi untuk menutup aplikasi saat tombol back
pada Android ditekan. Pada baris if (Input.GetKeyUp(KeyCode.Escape))
{ Application.Quit(); ini adalah baris yang berfungsi untuk menutup aplikasi
ketika tombol back ditekan. Script ini dimasukkan ke dalam komponen
camera.
4. Script untuk translate, rotate, dan scale Image Target
Khusus untuk fitur ini, script di dapatkan dari plugin Lean Touch yang
terdapat di dalam Asset Store. Lean Touch ini dapat membaca gerakan jari
yang di dalam kamera sekaligus memproses efeknya terhadap suatu objek.
Dalam hal ini yaitu untuk translate. rotate, dan scale Image Target. Translate
yaitu merubah posisi objek, rotate yaitu merotasi sudut objek, scale yaitu
merubah ukuran objek. Langkahnya yaitu dengan menambahkan GameObject
LeanTouch dan LeanSelectable kemudian menambahkan script
LeanTranslate, LeanRotate, dan LeanScale.
77
- LeanTranslate
private void Translate(Vector2 screenDelta)
{
if (LeanTouch.GetCamera(ref Camera) == true)
{
var screenPosition = Camera.WorldToScreenPoint(transform.position
);
screenPosition += (Vector3)screenDelta;
transform.position = Camera.ScreenToWorldPoint(screenPosition);
}
Script utama untuk memindah lokasi objek yaitu terdapat pada

methodTranslate(Vector2 screenDelta) yaitu pada
screenPosition += (Vector3)screenDelta; yang berfungsi untuk
memindahkan objek sesuai dengan input dari jarak jari yang digeser.
- LeanRotate
private void Rotate(Vector3 center, float degrees)
{
if (Relative == true)
{
{
var worldReferencePoint = Camera.ScreenToWorldPoint(center);
transform.RotateAround(worldReferencePoint, Camera.transform.
forward, degrees);
}
}
else
{
transform.rotation *= Quaternion.AngleAxis(degrees, RotateAx
is);
}
}
Script utama untuk merotasi objek yaitu terdapat pada method

Rotate(Vector3 center, float degrees) yaitu pada
transform.rotation *= Quaternion.AngleAxis(degrees, RotateAxis); yang
berfungsi untuk merotasi objek sesuai dengan input dua jari pada kamera.
- LeanScale
private void Scale(float scale, Vector2 screenCenter)
{
if (scale > 0.0f)
{
if (Relative == true)
{
{
var screenPosition = Camera.WorldToScreenPoint(tr
ansform.position);
screenPosition.x = screenCenter.x + (screenPositi
on.x - screenCenter.x) * scale;
screenPosition.y = screenCenter.y + (screenPositi
78
on.y - screenCenter.y) * scale;

transform.position = Camera.ScreenToWorldPoint(sc
reenPosition);
transform.localScale *= scale;
}
}
else
{
transform.localScale *= scale;
}
}
}
Script utama untuk merubah ukuran objek yaitu terdapat pada method
Scale(float scale, Vector2 screenCenter) yaitu pada
transform.localScale *= scale; yang berfungsi untuk merubah ukuran objek
sesuai dengan input tiga jari pada kamera
4.2 Pengujian Sistem

Pada Tugas Akhir ini, pengujian dilakukan dengan melakukan pengujian
alfa yaitu pengujian fungsionalitas dari aplikasi. Pengujian alfa bertujuan untuk
identifikasi dan menghilangkan masalah sebelum akhirnya sampai ke pengguna
yang sebenarnya. Pengujian alfa pada aplikasi ini dilakukan dengan menggunakan
3 devices. Hal ini untuk mengetahui performa aplikasi pada spesifikasi device
yang berbeda. Media tersebut diantaranya :
1. Mito Impact A10, OS Android version 6.0.1 (Marshmallow), Layar 4,5 inch
IPS, Resolusi 480x854, CPU Quad Core 1.3 GHz, Kamera 5MP
2. Xiaomi Redmi S1, OS Android version 4.4.4 (KitKat), Layar 4.7 inch IPS,
Resolusi 720x1280, CPU Quad-core 1.6 GHz, Kamera 8MP
3. Xiaomi Redmi 3S pro, OS Android version 6.0 (Marshmallow), Layar 5.0
inch IPS, Resolusi 720x 1280, CPU Snapdragon Octa-core 1.6 GHz (Quad
1.1GHz + Quad 1.4GHz, Kamera 13MP
Pengujian alfa yang diterapkan pada aplikasi ini menggunakan model
pengujian blackbox. Secara garis besar, ada 2 macam pengujian, yaitu pengujian
komponen aplikasi Android yang dibuat dengan Android Studio dan pengujian
Augmented Reality yang dibuat dengan Unity 3D
79
4.2.1 Pengujian Aplikasi Android

Tabel 4.1 berikut adalah rencana bentuk-bentuk pengujian dan indikator
yang menentukan keberhasilan pengujian.
Tabel 4.1 Rencana pengujian aplikasi Android
Uji Jenis
Bentuk Pengujian Indikator Keberhasilan
coba Pengujian
1 Memasukkan dan Muncul ikon aplikasi pada Black Box
memasang aplikasi pada appdrawer.
perangkat Android.
2 Menampilkan Splash Muncul tampilan splash Black Box
Screen screen selama 3 detik
3 Menampilkan Muncul navigation drawer Black Box
Navigation Drawer dari sebelah kiri yang
menampilkan menu aplikasi
4 Menampilkan menu Muncul menu profil saat item Black Box
Profil menu profil dipilih
5 Menjalankan video Video dapat berjalan dan Black Box
profil perusahaan dapat tampil fullscreen
6 Menampilkan menu Muncul list produk Black Box
Produk perumahan dalam bentuk
gambar dan nama
7 Menampilkan Detail Muncul detail produk yang
Produk berisi macam-macam gambar Black Box
dan foto
8 Menampilkan menu Muncul gambar fasilitas yang
Fasilitas berganti tiap beberapa detik
Black Box
dan list fasilitas untuk
menampilkan gambar
9 Menampilkan menu Muncul gambar-gambar
Portofolio portofolio dan muncul
Black Box
halaman website ketika setiap
portofolionya dipilih
10 Menampilkan menu Muncul halaman website
Black Box
Web perusahaan di dalam aplikasi
11 Share link aplikasi Muncul pilihan aplikasi
tujuan dan berhasil mengirim Black Box
link aplikasi
12 Menampilkan menu Muncul halaman kontak yang
Contact berisi informasi kontak
Black Box
perusaan dan alamat
perusaaan dalam peta
13 Melakukan panggilan Muncul aplikasi kontak dan
Black Box
dan mengirim email aplikasi email
80
Dari tabel 4.1 dilakukan pengujian terhadap 3 perangkat yang berbeda,

kemudian disesuaikan dengan indikator keberhasilan. Tabel 4.2 berikut adalah
hasil pengujian aplikasi Android.
Tabel 4.2 Hasil pengujian aplikasi Android

Hasil Pengujian
Uji Bentuk Xiaomi
Mito Impact Xiaomi
coba Pengujian Redmi 3S
A10 Redmi S1
Pro
1 Memasukkan dan Berhasil Berhasil Berhasil
memasang aplikasi
pada perangkat
Android.
2 Menampilkan Splash Berhasil Berhasil Berhasil
Screen
3 Menampilkan Berhasil Berhasil Berhasil
Navigation Drawer
4 Menampilkan menu Berhasil Berhasil Berhasil
Profil
5 Menjalankan video Berhasil Berhasil Berhasil
profil perusahaan
6 Menampilkan menu Berhasil Berhasil Berhasil
Produk
Menampilkan Detail
7 Berhasil Berhasil Berhasil
Produk
Menampilkan menu
Fasilitas
Menampilkan menu
Portofolio
Menampilkan menu
Web
11 Share link aplikasi Berhasil Berhasil Berhasil
Menampilkan menu
Contact
Melakukan panggilan
dan mengirim email
Dapat dilihat pada tabel 4.2 bahwa pengujian pada masing-masing fitur
aplikasi telah berhasil 100% dan berjalan dengan baik pada setiap device. Hal ini
dikarenakan tidak ada kesalahan dalam perncangan dan device yang digunakan
mendukung, seperti terdapat memori dan akses internet yang memadai.
81
4.2.2 Pengujian Augmented Reality

Pengujian ini dilakukan untuk mengetahui performa keandalan teknologi
Augmented Reality yang digunakan. Berikut adalah pengujian yang dilakukan:
1. Pengujian Marker
Pada pengujian penampilan model 3D dilakukan dengan cara memindai
marker yang telah tersedia pada menu Download. Pengujian ini dilakukan
dengan 3 devices yang berbeda Dimana parameter keberhasilannya adalah
muncul model 3D sesuai dengan marker yang dipilih, muncul audio
deskripsi dan dapat dilakukan proses translate, rotate dan scale.
Tabel 4.3 Rencana pengujian marker
Uji Jenis
coba Pengujian
1 Mendeteksi marker Dapat menampilkan objek 3D, Black Box
Cluster Umayyah 1 audio deskripsi, dan proses
dengan kamera translate, rotate dan scale
Cluster Abbasiyah 1 audio deskripsi, dan proses
7 Mendeteksi marker Dapat menampilkan objek 3D,
Cluster Ustmaniyyah audio deskripsi, dan proses Black Box
1 dengan kamera translate, rotate dan scale
8 Mendeteksi marker Dapat menampilkan objek 3D,
Cluster Ustmaniyyah audio deskripsi, dan proses Black Box
Mendeteksi marker Dapat menampilkan objek 3D,
9 Cluster Ustmaniyyah audio deskripsi, dan proses Black Box
82
Dari tabel 4.3 dilakukan pengujian terhadap 3 perangkat yang berbeda, dan
disesuaikan dengan indikator keberhasilan. Setelah melakukan pengujian,
berikut hasil dari pengujian aplikasi Android. Tabel 4.4 berikut adalah hasil
uji aplikasi Android.
Tabel 4.4 Hasil pengujian marker

Hasil Pengujian
Uji Bentuk Mito Xiaomi Xiaomi
coba Pengujian Impact Redmi Redmi 3S
A10 S1 Pro
1 Mendeteksi marker Cluster Berhasil Berhasil Berhasil
Umayyah 1 dengan kamera
Abbasiyah 1 dengan kamera
Ustmaniyyah 1 dengan
kamera
kamera
kamera
Dapat dilihat pada tabel 4.4 bahwa pengujian pada masing-masing marker
telah berhasil 100%. Setiap marker dapat menampilkan objek 3D secara
sesuai dengan marker yang dideteksi. Hal ini dikarenakan tidak ada
kesalahan dalam perncangan dan device yang digunakan sudah mendukung,
seperti mempunya kamera yang memadai dan prosesor yang cukup.
83
Berikut adalah hasil penampilan Augmented Reality pada masing-masing

marker.
Gambar 4.11 Tampilan Augmented Reality Cluster Umayyah 1

Gambar 4.14 Tampilan Augmented Reality Cluster Abbasiyah 1
84
Gambar 4.17 Tampilan Augmented Reality Cluster Ustmaniyyah 1

Dapat dilihat pada gambar 4.11 sampai gambar 4.19 objek virtual 3D
berhasil tampil di atas marker yang berbentuk leaflet sesuai dengan nama
cluster-nya.
85
86
2. Pengujian Jarak Minimum dan Maksimum Saat Pendeteksian Awal

Pengujian dilakukan dengan cara menjauhkan device dari marker sampai
objek muncul pertama kalinya, sedangkan untuk jarak maksimum terdapat
interval 10 cm.. Tabel 4.5 adalah rencana pengujian jarak pendeteksian awal.
Tabel 4.5 Rencana pengujian jarak pendeteksian awal
Uji Jenis
coba Pengujian
1 Mendeteksi marker Dapat menampilkan Black Box
Cluster Umayyah 1 objek 3D dalam bentuk
dengan kamera dengan Augmented Reality di
jarak yang berbeda-beda atas marker
Cluster Abbasiyah 1 objek 3D dalam bentuk
Cluster Ustmaniyyah 1 objek 3D dalam bentuk
87
Tabel 4.6 berikut adalah hasil dari pengujian jarak pendeteksian awal.
Tabel 4.6 Hasil pengujian jarak pendeteksian awal

Jarak Pendeteksian Awal Jarak Pendeteksian Awal
Minimum (cm) Maksimum (cm)
Uji
Mito Xiaomi Xiaomi Mito Xiaomi Xiaomi
coba
Impact Redmi Redmi Impact Redmi Redmi
A10 S1 3S Pro A10 S1 3S Pro
1 13 15 17 80 110 150
2 14 17 18 80 130 140
3 19 19 16 60 110 110
4 16 16 17 90 120 120
5 15 18 17 70 110 130
6 17 17 14 80 110 120
7 16 15 14 70 110 130
8 19 19 20 70 110 140
9 18 17 15 70 110 130
Rata-
16.3 17 16.4 74.4 113.3 130
rata
Dari tabel 4.6 dapat dilihat bahwa rata-rata jarak pendeteksian minimum
pada perangkat Mito Impact A10 yaitu 16.3 cm, pada perangkat Xiaomi
Redmi S1 yaitu 17 cm dan pada perangkat Xiaomi Redmi 3S Pro yaitu 16.4
cm. Kalau dira-rata yaitu sekitar 16.6 cm.
Sedangkan untuk rata-rata jarak pendeteksian maksimum pada perangkat

Mito Impact A10 yaitu 74,4 cm, pada perangkat Xiaomi Redmi S1 yaitu
113.3 cm dan pada perangkat Xiaomi Redmi 3S Pro yaitu 130 cm. Kalau
dira-rata yaitu sekitar 105.9 cm. Terdapat perbedaan pada kedua perangkat
dikarenakan spesifikasi kamera yang berbeda, kamera pada Mito Impact
A10 5 MP sedangkan pada Xiaomi Redmi S1 8 MP dan pada Xiaomi Redmi
3S Pro 13 MP. Maka dapat disimpulkan bahwa semakin besar piksel kamera
semakin besar jarak maksimum pendeteksian awal.
88
3. Pengujian Jarak Minimum dan Maksimum Saat Pelacakan

Pada pengujian ini dilakukan pemindaian terhadap marker dengan variasi
jarak setelah marker sudah terdeteksi dan objek 3D sudah muncul, atau
disebut dengan pelacakan. Tabel 4.7 berikut merupakan rencana pengujian
jarak pelacakan.
Tabel 4.7 Rencana pengujian jarak pelacakan
Uji Jenis
coba Pengujian
1 Melakukan variasi jarak Dapat menampilkan objek 3D Black Box
setelah marker Cluster dalam bentuk Augmented
Umayyah 1 terdeteksi Reality di atas marker
Abbasiyah 1 terdeteksi Reality di atas marker
Ustmaniyah 1 Reality di atas marker
terdeteksi
Ustmaniyah 2 Reality di atas marker
terdeteksi
Ustmaniyah 3 terdeteksi Reality di atas marker
Tabel 4.8 berikut adalah hasil dari pengujian jarak pendeteksian awal.
89
Tabel 4.8 Hasil pengujian jarak pelacakan

Jarak Pelacakan Jarak Pelacakan
Minimum (cm) Maksimum (cm)
Uji
coba
1 6 6 7 230 210 230
2 6 6 6 220 260 290
3 7 5 7 200 260 300
4 7 7 9 200 200 270
5 7 8 7 230 260 260
6 8 8 6 240 210 230
7 8 6 7 210 250 260
8 5 6 7 260 250 290
9 9 6 8 230 190 300
Rata-
7 6.4 7.1 224.4 232.2 270
rata
Dari tabel 4.8 dapat dilihat bahwa rata-rata jarak pelacakan minimum pada
perangkat Mito Impact A10 yaitu 7 cm, pada Xiaomi Redmi S1 yaitu 6.4 cm
dan pada Xiaomi Redmi S3 Pro yaitu 7.1 cm. Kalau dira-rata, maka dapat
dilihat bahwa pada saat pelacakan, objek 3D masih dapat muncul sampai
jarak 6,8 cm.
Sedangkan untuk rata-rata jarak pelacakan maksimum pada perangkat Mito

Impact A10 yaitu 224,4 cm, pada Xiaomi Redmi S1 yaitu 232.2 cm, dan
pada. dan pada Xiaomi Redmi S3 Pro yaiitu 270 cm Kalau dira-rata yaitu
sekitar 242.2 cm. Terdapat perbedaan pada kedua perangkat dikarenakan
spesifikasi kamera yang berbeda, kamera pada Mito Impact A10 5 MP
sedangkan pada Xiaomi Redmi S1 8 MP dan pada Xiaomi Redmi 3S Pro 13
MP. Maka dapat disimpulkan bahwa semakin besar piksel kamera semakin
besar jarak maksimum pelacakan. Dapat dilihat juga bahwa pada saat
pelacakan, objek 3D masih dapat muncul sampai jarak 224,4- 270 cm.
90
4. Pengujian Sudut Maksimum Saat Pendeteksian Awal dan Pelacakan

Pengujian sudut maksimum pendeteksian awal dimulai dari sudut 0 derajat
selaras dengan marker dengan jarak 30 cm kemudian dirotasi sampai 90
derajat. Kemudian dilakukan pengujian sudut maksimum ketika marker
sudah terdeteksi atau disebut dengan pelacakan. Tabel 4.9 berikut
merupakan rencana pengujian sudut maksimum saat pendeteksian awal dan
saat pelacakan.
Tabel 4.9 Rencana pengujian sudut pendeteksian awal
Uji Jenis
coba Pengujian
1 Mendeteksi marker Dapat menampilkan objek Black Box
Cluster Umayyah 1 3D dalam bentuk Augmented
dengan variasi sudut. Reality di atas marker
Cluster Abbasiyah 1 3D dalam bentuk Augmented
Mendeteksi marker Dapat menampilkan objek
7 Cluster Ustmaniyyah 3D dalam bentuk Augmented Black Box
1 dengan variasi Reality di atas marker
sudut.
sudut.
sudut.
91
Tabel 4.10 berikut adalah hasil dari pengujian sudut pendeteksian awal.
Tabel 4.10 Hasil pengujian sudut pendeteksian awal

Sudut Pendeteksian Awal Sudut Pelacakan
Maksimum (derajat) Maksimum (derajat)
Uji
coba
1 55 53 58 88 88 89
2 55 57 60 87 88 88
3 54 62 57 89 87 88
4 59 56 60 87 88 87
5 50 50 57 88 89 88
6 53 53 58 88 87 88
7 60 60 61 87 88 87
8 50 50 60 88 88 87
9 55 55 60 89 87 89
Rata-
54.5 55.1 59 87.8 87.7 87.9
rata
Dari tabel 4.10 dapat dilihat bahwa rata-rata jarak pendeteksian awal
maksimum pada perangkat Mito Impact A10 yaitu 54.5 derajat, pada
perangkat Xiaomi Redmi S1 yaitu 55.1 cm dan pada Xiaomi Redmi S3 Pro
yaitu 59 cm. Kalau dirata-rata, maka dapat dilihat bahwa objek dapat
muncul dengan sudut pendetekseian awak maksimum 56.2 derajat.
Sedangkan untuk rata-rata jarak pelacakan maksimum pada perangkat Mito

Impact A10 yaitu 87.8 cm, pada Xiaomi Redmi S1 yaitu 87.7 cm, dan pada
Xiaomi Redmi S3 Pro yaitu 87.7. Dapat dilihat bahwa kedua hasil
menjukkan hampir sama. Hal ini karena objek 3D masih dapat muncul
selama marker masih terlihat jelas. Saat marker tidak terlihat lagi pada
sudut 90 derajat maka objek tidak dapat muncul. Kalau dira-rata, maka
dapat dilihat bahwa objek masih dapat muncul sampai sudut maksimum
87.8 derajat.
BAB V
PENUTUP
5.1 Kesimpulan
Kesimpulan yang didapat dari perancangan, implementasi dan pengujian
sistem adalah sebagai berikut:
1. Aplikasi media pemasaran properti dengan menggunakan teknologi
Augmented Reality pada perangkat Android telah dapat berjalan dengan
baik pada perangkat Android dengan Versi OS Android Kitkat sampai
Marshmallow.
2. Objek 3D dapat mulai tampil dengan jarak minimal pendeteksian awal
yaitu sekitar 16.6 cm. Sedangkan untuk jarak maksimal pendeteksian awal
yaitu sekitar 105.9 cm.
3. Semakin besar piksel kamera semakin besar jarak maksimal pendeteksian
awal.
4. Pada saat pelacakan, objek 3D masih dapat tampil dari jarak sekitar 6.8 cm
sampai dengan jarak sekitar 242.2 cm.
5. Objek 3D dapat tampil dengan sudut pendeteksian awal maksimum sekitar
56.2 derajat. Sedangkan saat pelacakan, objek 3D masih dapat tampil
sampai sekitar 87.8 derajat.
5.2 Saran
1. Membuat Augmented Reality langsung menggunakan Android Studio
tanpa menggunakan Unity3D dengan memanfaatkan Vuforia SDK untuk
Android.
2. Objek 3D tidak hanya menampilkan rumah dari luar, tetapi juga bentuk isi
rumah.
3. Menampilkan objek 3D rumah dalam ukuran yang sesungguhnya dengan
menggunakan teknologi Virtual Reality.
92
93
4. Membuat database untuk mengetahui rumah yang sudah dibeli dan belum
dibeli.
94
DAFTAR PUSTAKA
[1] Bregga Tedy Gorbala, “Aplikasi Augmented Reality untuk Katalog Penjualan
Rumah”, Jurusan Teknik Elektro, ITS Surabaya, 2010
[2] Muhammad Rifa’i, Tri Listyorini dan Anastasya Latubessy, “Penerapan

Teknologi Augmented Reality Pada Aplikasi Katalog Rumah Berbasis Android,”
dalam SNATIF, Kudus, 2014, hal 267-274.
[3] Devi Afriyantari Puspa Putri. “Augmented Reality Untuk Bisnis Properti Sebagai
Sarana Pemasaran Berbasis Android”, Program Studi Teknik Informatika,
Universitas Muhammadiyah Surakarta, 2014.
[4] Abdul Muiz Prisambodo, “Pembuatan Brosur Perumahana Berbasis Augmented

Reality Dengan Permodelan 3D,” Jurnal Telematika, vol. 1 no. 1. Feb. 2008.
[5] Siryantini Nurul Adnin, Ida Bagus Ketut Widiartha, I Made Budi Suksmadana,
“Pembuatan Aplikasi Catalog 3D Desain Rumah Sebagai Sarana Promosi Dengan
Menggunakan Unity 3D,” Lontar Komputer:Jurnal Ilmiah Teknologi Informasi,
vol 7, no. 1. Apr. 2016.
[6] Handbook of Research on Ubiquitous Computing Technology for Real Time

Enterprises. CRC Press, pp. 459.
[7] Lena Magdalena, Kusnadi, Muhammad Kahfi, “Penerapan Teknologi Augmented

Reality untuk Pengenalan Komponen Jaringan dan Cara Kerja TCP/IP berbasis
Android”, Sekolah Tinggi Manajemen Informatika dan Komputer CIC Cirebon,
vol. 1, no. 2. 2016.
[8] Diaz Hendrianto, Ary Mazharuddin, “Implementasi Augmented Reality

Memanfaatkan Sensor Akselerometer, Kompas dan GPS Pada Penentuan Lokasi
Masjid Berbasis Android”, Jurusan Teknik Informatika, ITS Surabaya, 2010.
[9] Nazruddin Safaat, Pemrograman Aplikasi Mobile Smartphone dan Tablet PC

Berbasis Android. Bandung, Indonesia: Penerbit Informatika. 2011.
[10] Anggiawan Dwi Utomo, “Implementasi Teknologi Augmented Reality Pada

Perangkat Lunak Edukatif Pengenalan Fauna Berbasis Sistem Operasi Android”,
Departemen Teknik elektro, Universitas Diponegoro, 2016.
[11] Abdul Kadir, Pemograman Aplikasi Android. Yogyakarta, Indonesia: Penerbit

Andi. 2013.
[12] Eskania Widya. Pranita, “Aplikasi Edukatif Augmented Reality Sebagai Media
Pengenalan Simbol Komponen elektronika Berbasis Android”, Departemen
Teknik Elektro, Universitas Diponegoro, 2017.
95
.
[13] Muhammad Syarif, “Perancangan Aplikasi Bernama My Landmark Berbasis SIG
Untuk Informasi Penjualan Tanah Pada Perangkat Bergerak Android.”
Departemen Teknik Elektro, Universitas Diponegoro, 2016.
[14] A.S. Rosa, Shalahuddin M. Rekayasa Perangkat Lunak. Bandung, Indonesia:

Penerbit Informatika, 2014.

Aplikasi Media Pemasaran Properti Dengan

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aplikasi Media Pemasaran Properti Dengan

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS DIPONEGORO

APLIKASI MEDIA PEMASARAN PROPERTI DENGAN

AHMAD ARIF FAIZIN

Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana

AHMAD ARIF FAIZIN

Tugas Akhir ini adalah hasil karya saya sendiri,

NAMA : Ahmad Arif Faizin

Sebagai sivitas akademika Universitas Diponegoro, saya yang bertanda tangan di

Nama : Ahmad Arif Faizin

demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada

APLIKASI MEDIA PEMASARAN PROPERTI DENGAN MENGGUNAKAN

Demikian pernyataan ini saya buat dengan sebenarnya.

(Ahmad Arif Faizin)

Bisnis properti mengalami perkembangan yang pesat setiap tahun, namun

Kata Kunci: pemasaran properti, Augmented Reality, Android

Property business is growing rapidly every year, but the promotional

Keywords: property marketing, Augmented Reality, Android

Gambar 2.1 Cara kerja Augmented Reality............................................................. 9

Tabel 1.1 Perbedaan dengan penelitian sebelumnya............................................... 2

1.1 Latar Belakang

Listyorini[2], “Augmented Reality Untuk Bisnis Properti Sebagai Sarana

Tugas Akhir ini bertujuan untuk membuat aplikasi media pemasaran

1.2 Rumusan Masalah

1.3 Tujuan Tugas Akhir

1.4 Batasan Masalah

1.5 Sistematika Penulisan

2.1 Augmented Reality (AR)

lingkungan nyata dari pandangan pengguna sehingga seolah-olah benda yang

Gambar 2.1 Cara kerja Augmented Reality

Dapat dilihat pada Gambar 2.1, kamera mengambil input gambar di

Handset Alliance adalah konsorsium 34 perusahaan yang terdiri dari perusahaan

emulator (peniru perangkat bergerak), dokumentasi, kode contoh, dan

metode dari kelas Content Resolver. Datanya dapat disimpan di file

Tabel 3.1 Komponen tambahan Android

Fragments Merepresentasikan sebuah porsi dari User Interface dalam

Resources Elemen eksternal, seperti: string, konstanta dan gambar.

Manifest File konfigurasi untuk aplikasi.

2. Berorientasi Objek (Object Oriented)

2.5 Unified Modelling Language

menjadikannya sebagai bahasa pemodelan yang umum dalam industri peranti

2.6 Metode Pengujian Perangkat Lunak

2.6.1 Pengujian Aplikasi Android

3.1 Analisis Kebutuhan

Gambar 3.1 Desain Aplikasi

3.1.2 Kebutuhan Fungsional

3.1.3 Kebutuhan Non Fungsional

Tabel 3.1 Implementasi kebutuhan perangkat keras

3.1.5 Kebutuhan Perangkat Lunak

3.2 Desain Aplikasi

3.2.1 Diagram Use Case

Gambar 3.2 Diagram use case pengguna

Gambar 3.2 menggambarkan fitur-fitur yang dapat diakses oleh

3.2.2 Diagram Aktivitas

Gambar 3.3 Diagram aktivitas menu utama

Gambar 3.3 merupakan gambar diagram aktivitas menu utama untuk

Gambar 3.4 Diagram aktivitas melihat detail produk

3. Diagram Aktivitas Melihat AR

Gambar 3.5 Diagram aktivitas melihat AR

4. Diagram Aktivitas Fasilitas

Gambar 3.6 Diagram aktivitas melihat fasilitas

Gambar 3.7 Diagram aktivitas melihat portofolio

Gambar 3.8 Diagram aktivitas melihat web

Gambar 3.8 merupakan diagram aktivitas untuk menampilkan halaman web.

Gambar 3.9 Diagram aktivitas untuk share