3.

3 Perancangan pembuatan aplikasi

Sebelum membuat aplikasi, penulis terlebih dahulu membuat sebuah rancangan aplikasinya,

yang mana rancangan ini di gunakan untuk nantinya dipergunakan untuk membangun aplikasi

yang akan di baut oleh penulis. Dalam perancangan pembuatan aplikasi dibutuhkan beberapa hal

yang harus diperhatikan dari hal pembuatan data base samapai dengan pembuatan rancangan

user interface, yang mana hal ini sangat dibutuhkan agar aplikasi yang dibuat dapat berjalan

dengan baik.

3.3.1 Implementasi sistem

Pada implementasi sistem, penulis menggunakan Software Unity 3D 2019 dan database

Augmented Reality menggunakan database Platform Vuforia yang dibuat secara online dari

website resminya yaitu https://developer.vuforia.com/, sedangkan bahasa pemprogramannya

menggunakan bahasa C Sharp (C#) pada Platform Android versi 4.1. (Jelly Bean) sampai dengan

Platform Android versi 11.

3.3.2 Data Base Augmented Reality

Database Augmented Reality digunakan untuk menampilkan objek 3D yang telah dibuat menjadi

tampilan Augmented Reality. Dalam proses ini yang di masukkan bukan objek 3D nya akan

tetapi penandanya (marker) yang dijadikan sebagai penanda untuk menampilkan Object 3D

berbasis Augmented Reality.

1. Pengguna harus login (masuk) terlebih dahulu ke website Vuforia

(https://developer.vuforia.com/). Tampilannya dapat dilihat pada gambar 4.15.

 Gambar 4.15. Tampilan Website Vuforia.

2. Membuat License Manager

License Manager digunakan untuk menampilkan objek Augmented Reality. Pada halaman

ini pengguna akan mendapatkan License Key untuk dimasukkan kedalam aplikasi yang

dibuat. Tampilannya dapat dilihat pada gambar 4.16 dan 4.17.

Gambar 4.16. Halaman License Manager.

 Gambar 4.17. Halaman License Key.

3. Target Manager

Target Manager adalah halaman untuk membuat database marker (penanda) dengan cara

mengupload marker (penanda) yang sudah dibuat lalu dijadikan sebagai marker

(penanda) di Unity 3D. Tampilannya dapat dilihat pada gambar 4.18. dan gambar 4.19.

Gambar 4.18. Halaman Target Manager.

 Gambar 4.19. Halaman Upload Marker.

3.3.3 Rancangan Interface

Sistem yang dibangun menggunakan Unity3D sebagai pembuat user interface (tatap muka), dan

juga sebagai compiler untuk menjadikan project Unity menjadi ekstensi (.apk) yang berjalan

pada Smartphone Android. Bahasa pemrograman yang dipakai penulis adalah C Sharp (C#).

3.3.3.1 Rancangan Halaman Splash Screen

Splash Screen adalah awalan pertama pada saat aplikasi dibuka. Bentuk rancangan halaman

splash screen dapat dilihat pada gambar 4.4, dan penjelasan komponen-komponennya pada tabel

4.2 dibawah ini :

Background

Logo AR

4.4. Rancangan Halaman Splash Screen.

Tabel 4.2. Penjelasan Komponen-komponen pada Halaman Splash Screen

No Jenis Komponen Keterangan

1 Background (image) Background belakang (white background)
 2 Logo AR (image) Logo Augmented Reality berupa image.

3.3.3.2 Rancangan Halaman Loading

Setelah halaman splash screen maka aplikasi akan menuju kehalaman loading, setelah

loading mencapai 100% maka sistem akan menuju ke halaman home. berikut rancangan halaman

loading dapat dilihat pada gambar 4.5, dan penjelasan komponen-komponennya pada tabel 4.3

dibawah ini :

Background

Logo
Pembuat

Bar Loading 3

Gambar 4.5. Rancangan Halaman Loading.

Tabel 4.3. Penjelasan Komponen-komponen pada Halaman Loading.

No Jenis Komponen
1 Background (image)
2 Logo Pembuat (image)
3 Bar Loading (slider)
Keterangan
Background belakang (gradien background)
Logo pembuat aplikasi berupa image.
Bar loading berbentuk slider dengan pengaturan
loading yang apabila sudah mencapai 100% maka
akan menuju ke halaman home.

3.3.3.3 Rancangan Halaman Home

Tampilan rancangan pada halaman home dapat dilihat pada gambar 4.6 , dan keterangan

komponen yang terdapat pada halaman tersebut dapat dilihat di tabel 4.4.
 Pengenalan Hardware Komputer Soun
1 Augmented Reality App 4 d

5 Volume

6 Start

Ga
2
7 Tutorial
Gambar
8 About

m
3 Exit
9

Logo AR Logo Pembuat

ba
1 1
0 1

Gambar 4.6. Rancangan Halaman Home.

r
Tabel 4.4. Penjelasan Komponen-komponen pada Halaman Home.

No Be
Jenis Komponen Keterangan
1 Nama Aplikasi (text) Judul Aplikasi.
2 Gambar Animasi (image) Animasi image circle (gambar berputar).
3
4
rg
Gambar (image)
Tombol Sound (button)
Gambar tidak bergerak (image).
Tombol yang memutar (play) dan
memberhentikan (stop) musik.

er
5 Slider Volume (slider) Tombol pengatur volume musik.
6 Tombol Start (button) Tombol untuk menampilkan halaman category.
7 Tombol Tutorial (button) Tombol untuk menampilkan halaman tutorial.
8 Tombol About (button) Tombol untuk menampilkan halaman about.
9
10 ak
Tombol Exit (button)
Logo AR (image)
Tombol untuk menampilkan halaman exit.
Gambar logo Augmented Reality.
11 Logo Pembuat (image) Gambar logo pembuat aplikasi.

(a
ni
3.3.3.4 Rancangan Halaman Category

Apabila tombol start di tekan maka sistem akan menuju ke halaman category, berikut

rancangan halaman category dan komponen penjelasannya.

Judul Back
1
1
0

Tombol Tombol Tombol Tombol

Motherbo Processor RAM Harddisk
ard

2 3 4 5

Tombol Tombol Tombol Tombol

PSU DVD VGA Sound Logo
ROM Card Card Pembuat

6 7 8 9 1
1

Gambar 4.7. Rancangan Halaman Category.

Tabel 4.5. Penjelasan Komponen-komponen pada Halaman Category.

No Jenis Komponen Keterangan

1 Judul (text)
2 Tombol Motherboard
(button)
3 Tombol Processor
(button)
4 Tombol RAM (button)
5 Tombol Harddisk
(button)
6 Tombol PSU (button)
7 Tombol DVD ROM
(button)
8 Tombol VGA Card
(button)
9 Tombol Sound Card
(button)
Judul halaman (judul halaman category).
Tombol untuk menampilkan halaman keterangan
(description) Motherboard.
Tombol untuk menampilkan halaman keterangan
(description) Processor.
Tombol untuk menampilkan halaman keterangan
(description) RAM.
Tombol untuk menampilkan halaman keterangan
(description) Harddisk.
Tombol untuk menampilkan halaman keterangan
(description) PSU.
Tombol untuk menampilkan halaman keterangan
(description) DVD ROM.
Tombol untuk menampilkan halaman keterangan
(description) VGA Card.
Tombol untuk menampilkan halaman keterangan
(description) Sound Card.
 10 Tombol Back (button) Tombol untuk kembali ke halaman home.
11 Logo Pembuat (image) Gambar logo pembuat aplikasi.

3.3.3.5 Rancangan Halaman Keterangan (Description)

Rancangan halaman keterangan (description) meliputi keterangan dari halaman category

yang dipilih oleh pengguna (user). Berikut gambar 4.8. Rancangan Halaman keterangan

(description) dan komponen-komponen rancangannya dapat dilihat di tabel 4.6.

Judul Back
1
Gambar
4
Hardware

2
AR

3 5

Logo
Pembuat

Gambar 4.8. Rancangan Halaman Keterangan (Description).

Tabel 4.6. Penjelasan Komponen-komponen pada Halaman Keterangan (Description)

No Jenis Komponen Keterangan

1 Judul (text)
2 Gambar Hardware (image)
3 Keterangan Hardware
(text)
4 Tombol Back (button)
5 Tombol AR (button)
6 Logo Pembuat (image)
Judul halaman Hardware yang dipilih.
Gambar (image) Hardware yang dipilih.
Penjelasan Hardware yang dipilih (penjelasan
singkat).
Tombol untuk kembali ke halaman home.
Tombol untuk menampilkan objek 3D
Augmented Reality yang dipilih.
Gambar logo pembuat aplikasi.
3.3.3.6 Rancangan Halaman Tampilan Objek 3D Augmented Reality

Rancangan halaman tampilan objek 3D Augmented Reality, apabila di pilih (ditekan)

tombol AR pada halaman keterangan (description) maka halaman ini akan langsung memicu

kamera pengguna (user) aktif. Di halaman ini juga terdapat tombol back yang apabila di pilih

(ditekan) akan kembali ke halaman keterangan (description). Berikut rancangan dan komponen

penjelasannya :

Back

Shoot Kamera 2

1
2

Gambar 4.9. Rancangan Halaman Tampilan Objek 3D Augmented Reality.

Tabel 4.7. Penjelasan Komponen-komponen pada Halaman Tampilan Objek 3D Augmented

Reality.

No Jenis Komponen Keterangan

1 Shoot Kamera (kamera Halaman yang akan menampilakan objek 3d
smartphone aktif) Augmented Reality dimana pada halaman ini akan
langsung memicu kamera smartphone aktif. Dan
apabila marker sesuai maka gambar Augmented
Reality akan ditampilkan di halaman ini.
2 Tombol Back (button) Tombol untuk kembali ke halaman keterangan
(description).
3.3.3.7 Rancangan Halaman Tutorial

Pada rancangan halaman tutorial menampilkan tata cara penggunaan aplikasi, dan di

lengkapi dengan tombol marker yang harus digunkan apabila user ingin menampilkan gambar

(image) objek 3D Augmented Reality. Berikut rancangan dan komponen penjelasannya :

1 Judul Back

Point Tutorial
Marker

4
2

Logo
Pembuat
5
Gambar 4.10. Rancangan Halaman Tutorial.

Tabel 4.8. Penjelasan Komponen-komponen pada Halaman Tutorial.

No Jenis Komponen Keterangan

1 Judul (text)
2 Point Tutorial (text)
3 Tombol Back (button)
4 Tombol Marker (button)
5 Logo Pembuat (image)
Judul halaman (judul halaman tutorial).
Text tata cara penggunaan aplikasi dalam
menampilkan objek 3D Augmented Reality.
Tombol untuk kembali kehalaman home.
Tombol untuk menampilkan halaman marker.
Gambar logo pembuat aplikasi.

3.3.3.8 Rancangan Halaman Marker

 Pada rancangan halaman marker menampilkan 8 objek marker yang dapat di perbesar

apabila dipilih salah satunya. Marker ini yang nantinya dipergunakan sebagai penanda untuk

menampilkan objek 3D Augmented Reality di smartphone. Kamera smartphone yang diarahkan

ke marker yang sudah di cetak (di print). Berikut gambar rancangan dan komponen

penjelasannya.

Judul Back
1
1
0
Tombol Tombol Tombol Tombol
Marker Marker Marker Marker
Motherboar Processor RAM Harddisk
d
2 3 4 5

Tombol Tombol Tombol Tombol

Marker Marker Marker Marker Logo
PSU DVD VGA Sound Pembuat
ROM Card
Card
6 7 8 9 1
1

Gambar 4.11. Rancangan Halaman Marker.

Tabel 4.9. Penjelasan Komponen-komponen pada Halaman Marker.

No Jenis Komponen Keterangan
1 Judul (text) Judul Halaman (judul halaman Marker).
2 Tombol Marker Tombol untuk menampilkan gambar Marker
Motherboard (button) Motherboard ukuran besar (image full screen).
3 Tombol Marker Tombol untuk menampilkan gambar Marker
Processor (button) Processor ukuran besar (image full screen).
4 Tombol Marker RAM Tombol untuk menampilkan gambar Marker RAM
(button) ukuran besar (image full screen).
5 Tombol Marker Tombol untuk menampilkan gambar Marker
Harddisk (button) Harddisk ukuran besar (image full screen).
6 Tombol Marker PSU Tombol untuk menampilkan gambar Marker PSU
(button) ukuran besar (image full screen).
 7 Tombol Marker DVD Tombol untuk menampilkan gambar Marker DVD
ROM (button) ROM ukuran besar (image full screen).
8 Tombol Marker VGA Tombol untuk menampilkan gambar Marker VGA
Card (button) Card ukuran besar (image full screen).
9 Tombol Marker Sound Tombol untuk menampilkan gambar Marker
Card (button) Sound Card ukuran besar (image full screen).
10 Tombol Back (button) Tombol untuk kembali ke halaman home.
11 Logo Pembuat(image) Gambar logo pembuat aplikasi.

3.3.3.9 Rancangan Halaman Zoom Marker

Rancangan halaman zoom marker menampilkan gambar marker yang lebih besar. Marker

ini yang nantinya dapat di screen shoot lalu dicetak (print) dengan ukuran minimal 5x5 cm.

Marker ini dipergunakan sebagai penanda untuk menampilkan objek Augmented Reality. Berikut

rancangan dan komponen-komponen penjelasannya dibawah ini :

2 Pembuat
Logo

Marker

Back
3
1

Gambar 4.12. Rancangan Halaman Zoom Marker.

 Tabel 4.10. Penjelasan Komponen-komponen pada Halaman Zoom Marker.
No Jenis Komponen Keterangan
1 Marker(image) Gambar marker ukuran besar untuk dicetak (print).
2 Logo Pembuat (image) Gambar logo pembuat aplikasi.
3 Tombol Back (button) Tombol untuk kembali kehalaman marker.

3.3.3.10 Rancangan Halaman About

Rancangan halaman about menampilkan informasi tetang pembuat aplikasi dimana

terdapat kontak informasi dan biodata singkat pembuat aplikasi. Berikut rancangan halaman

about dapat dilihat pada gambar 4.13, dan komponen-komponen penjelasannya dapat dilihat

pada tabel 4.11. dibawah ini :

Judul Back
1

Informasi Biodata
:

2
3
Logo
Pembuat

Gambar 4.17. Rancangan Halaman About.

Tabel 4.11. Penjelasan Komponen-komponen pada Halaman About Me.

No Jenis Komponen Keterangan
1 Judul (text) Judul halaman (judul halaman About Me).
2 Informasi (image dan Kontak pembuat aplikasi berupa gambar (image)
text) dan text, di baris paling bawah terdapat informasi
copyright pencipta musik dan linknya.
 3 Biodata (image dan text) Biodata singkat pembuat aplikasi berupa text dan
dilengkapi foto pembuat (image).
4 Tombol Back (button) Tombol untuk kembali kehalaman home.
5 Logo Pembuat (image) Gambar logo pembuat aplikasi.

3.3.3.11 Rancangan Halaman Exit

Rancangan halaman exit menampilkan panel pilihan Ya dan Tidak (ceklis dan silang)

dimana halaman tetap berada di halaman home. Jika pengguna (user) memilik (menekan) tombol

ya (ceklis) maka akan keluar dari aplikasi, sedangkan jika memilih tidak (silang) maka akan

tetap berada di dalam aplikasi. Berikut rancangan dan komponen-komponen penjelasannya

dibawah ini :
Halaman Home

EXIT

Tombol Tombol
Ceklis Silang

2 3

Gambar 4.14. Rancangan Halaman Exit.

Tabel 4.12. Penjelasan Komponen-komponen pada Halaman Exit.

No Jenis Komponen Keterangan
1 Judul (text) Judul halaman (judul halaman Exit).
2 Tombol Ceklis (button) Tombol untuk keluar dari aplikasi (apabila di pilih
(tekan) maka aplikasi akan keluar).
3 Tombol Silang (button) Tombol untuk tetap berada di aplikasi (apabila di
pilih (tekan) maka akan kembali kehalaman home).
4 Halaman Home Backgroud pada saat tombol exit di pilih (tekan),
dikuti dengan musik yang berhenti (mute).
3.4. Pengkodean Sistem (Aplikasi)

Pada saat pembuatan tampilan aplikasi penulis juga mengunakan kode agar tools yang

dibuat berjalan dengan baik. Pengkodean ini sendiri menggunakan bahasa C Sharp (C#) yang

dibuat menggunakan software Mono Develop Unity. Berikut Scripts untuk tools animasi, tombol

(button), slider, rotate, dan untuk memperbesar, perkecil objek (zoom).

1. Script Halaman Splash Screen dan Loading

Halaman Spalsh Screen dan Loading adalah tampilan pertama pada saat aplikasi

dijalankan. Setelah itu masuk kedalam halaman Loading. Berikut tampilan

pengkodeaanya dan script nya terlampir pada lampiran 1.

2. Script Halaman Home

Pada halaman home terdapat animasi (gambar bergerak), slider (pengatur volume suara)

dan button (tombol), berikut penulisan script bahasa C Sharp (C#) terlampir pada

lampiran 2, dan tampilannya dibawah ini

3. Script Halaman Category

 Halaman category terdapat 8 objek tombol dan tombol back yang dapat dipilih oleh user

(pengguna), Berikut tampilan pengkodeaanya dan script nya terlampir pada lampiran 3

4. Script Halaman Keterangan (Description)

Dari halaman category akan menuju ke halaman keterangan apabila pengguna (user)

menekan (memilih) 8 objek yang terdapat di halaman category. Sedangkan di halaman

keterangan (description) sendiri hanya terdapat 2 tombol, yaitu tombol back dan tombol

AR. Berikut penulisan script bahasa C Sharp (C#) pada halaman keterangan

(description) terlampir pada lampiran 4, dan berikut tampilannya

5. Script Halaman Object 3D Augmented Reality

Dari halaman keterangan (description) apabila penguna (user) memilih (menekan)

tombol AR maka akan menuju ke halaman Object 3D Augmented Reality diikuti dengan

aktifnya kamera smartphone pengguna (user). Berikut penulisan script bahasa C Sharp

(C#) pada halaman Object 3D Augmented Reality terlampir pada lampiran 5, dan berikut

tampilannya
6. Script Halaman Tutorial

Pada halaman tutorial hanya terdapat dua tombol yaitu tombol back untuk kembali ke

halaman home dan tombol marker untuk menuju halaman marker. Berikut script untuk

tombol pada halaman tutorial terlampir pada lampiran 6, dan berikut tampilannya

7. Script Halaman Marker

Didalam halaman marker terdapat 8 tombol marker objek 2D untuk menampilkan marker

(penanda) dengan tampilan yang lebih besar (full screen) dan terdapat tombol back untuk

kembali ke halaman tutorial. Berikut sciptnya terlampir pada lampiran 7, dan berikut

tampilannya
8. Script Halaman Zoom Marker

Halaman zoom marker adalah halaman yang menampilkan salah satu dari 8 tombol

marker objek 2D yang dipilih dan secara otomatis marker tersebut akan menampilkan

marker (penanda) dengan tampilan yang lebih besar (full screen). terdapat tombol back

untuk kembali ke halaman marker. Berikut sciptnya terlampir pada lampiran 8, dan

berikut tampilannya
9. Script Halaman About

Pada halaman about hanya menamilkan informasi penulis dan hanya terdapat tombol

back untuk kembali ke halaman home. Berikut sciptnya terlampir pada lampiran 9, dan

berikut tampilannya

10. Script Halaman Exit

Pada saat tombol exit di tekan (dipilih) maka akan menuju ke panel halaman exit dengan

pilihan ceklis (ya) dan silang (tidak). Berikut script halaman exit, dan berikut

tampilannya