BAB III

METODE PENELITIAN

3.1 Sistem Pendukung

3.1.1Hardware Dan Sistem Operasi Yang Digunakan

Dalam perancangan aplikasi Visualisasi Image menggunakan Augmented
Reality pada Apilkasi Augmented Reality Sebagai Media Informasi Gedung
Sekolah Di SMA N 1 Manggis Berbasis Android ini menggunakan sistem operasi
yang digunakan adalah Microsoft Windows 7. Selain itu sistem operasi ini juga
banyak didukung oleh aplikasi pihak ke tiga yang menyediakan sarana yang
lengkap untuk membuat aplikasi animasi 3D ini. Agar program dapat berjalan
dengan baik dan sesuai harapan, maka diperlukan perangkat pendukung dengan
spesifikasi sebagai berikut :

1. Laptop dengan dimensi layar Display VGA 1366x768AMD Radeon HD

8330 4 GB
2. Prosesor AMD A4-5000 1,5GHz
3. Ram 8 GB
4. Hardisk 500 GB

Device android yang digunakan sebagi media pendukung dalam

perancangan aplikasi ini memiliki spesifikasi sebagai berikut :

1. Chipset Mediatek MT6582 Quadcore 1,5ghz

2. Ukuran 720 x 1280 pixels, 5.5 inches (~293 ppi pixel density)
Dengan Aspect Ratio 16 : 9
3. Android OS versi 4.4 Kitkat
4. 13 MP, 4128 x 3096 pixels, autofocus

3.1.1Software Yang Digunakan

Dalam perancangan aplikasi Visualisasi Image menggunakan Augmented
Reality pada Apilkasi Augmented Reality Sebagai Media Informasi Gedung

32
 33

Sekolah Di SMA N 1 Manggis Berbasis Android ini, software yang digunakan

adalah sebagai berikut :

a. Unity 3D

Pengolahan aplikasi Visualisasi Image menggunakan Augmented

Reality pada Apilkasi Augmented Reality Sebagai Media Informasi Gedung
Sekolah Di SMA N 1 Manggis Berbasis Android dibuat pada game engine
Unity3D sebagai engine utama dalam pembangunan aplikasi ini,disini
penulis menggunakan Unity 3D dengan versi 5.1.3f1

b. Mono develop

Mono develop dalam aplikasi ini digunakan sebagai script editor.

c. Sketchup

Sketchup digunakan untuk membuat model 3D dari bangunan

Aplikasi Informasi Gedung Sekolah Di SMA N 1 Manggis. disini penulis
menggunakan software sketchup make.

d. Vuforia

Vuforia adalah Augmented Reality Software Development Kit (sdk)

untuk perangkat mobile yang memungkinkan pembuatan aplikasi
Augmented Reality. Vuforia merupakan sdk yang disediakan oleh
Qualcomm untuk membantu para developer membuat aplikasi berbasis
Augmented Realitydi mobile phones (iOS, Android).versi vuforia yang
digunakan 5.0.5

e. StarUML

Pembuatan diagram-diagram Unified Modeling Language (UML) yang

digunakan untuk merancang model dari sistem, dibuat mengunakan
StarUML kerena merupakan platform pemodelan perangkat lunak yang
medukung UML

f. Adobe photoshop
 34

Adobe photoshop digunakan untuk membuat desain splash screen

dan marker buku dengan versi CS3.

3.1 Flowchart Sistem

Flowchart sistem merupakan bagan yang menunjukkan alur kerja atau apa
yang sedang dikerjakan di dalam sistem secara keseluruhan dan menjelaskan
urutan dari prosedur-prosedur yang ada di dalam sistem. Dengan kata lain,
Flowchart ini merupakan dekripsi secara grafik dari urutan prosedur-prosedur
yang terkombinasi yang membentuk suatu sistem. Flowchart sistem terdiri dari
data yang mengalir melalui sistem dan proses yang Mentransformasi kan data
itu. Flowchart aplikasi dapat dilihat melalui gambar 3.1 yang menggambarkan
flowchart sistem secara rinci.

Gambar 3.1 Flowchart Sistem

 35

3.2 Use case Diagram

Use case Diagram adalah interaksi antara actor dan sistem yang
mencakup pertukaran pesan dan tindakan yang dilakukan oleh sistem serta
gambaran graphical dari beberapa atau semua actor, use case dan interaksi
yang terjadi diantara komponen-komponen tersebut memaparkan satu sistem
yang akan dibangun. Use case Diagram menjelaskan manfaat suatu sistem jika
dilihat menurut pandangan orang yang berada diluar sistem atau kelas dan
bagaimana sistem tersebut berinteraksi dengan dunia luar. Berikut ini adalah
diagram Use case dari aplikasi Visualisasi Image menggunakan Augmented
Reality pada Augmented Reality sebagai media informasi gedung di sma n 1
manggis menggunakan Android.

Gambar 3.2 Use case Diagram

Pada Gambar 3.2 merupakan use case diagram yang menggambarkan

bagaimana alur sistem bekerja. Use case aplikasi Visualisasi Image
menggunakan Augmented Reality pada Augmented Reality sebagai media
informasi di sma n 1 manggis menggunakan Android ini menggambarkan
bagaimana user dan sistem saling berinteraksi. Terdapat sepuluh interaksi use
case dalam aplikasi yang menjelaskan proses berjalannya sistem, berikut
bagian-bagian use case tersebut.
 36

3.4.1Use Case Description

Use case description digunakan untuk menggambarkan description yang

lebih rinci tentang proses yang digunakan untuk mencapai fungsi sistem. Adapun
use case description dari tiap-tiap case yang ada adalah sebagai berikut:

1. Menampilkan Splash screen

Pada use casemenampilkan splash screen user akan membuka aplikasi
dan sistem akan menampilkan splash screen aplikasi berikut description use
case splash screen pada table 3.1 di bawah ini.

Tabel 3.1 Use case Description Splash screen

Use case Name Menampilkan splash screen

Skenario Menjalankan aplikasi Augmented Reality

Deskripsi Ketika aplikasi mulai dijalankan maka akan di

ringkasan tampilkan splash screen

Aksi User menjalankan aplikasi Augmented Reality

Aktor Utama User

Persyaratan User harus menjalankan aplikasi Augmented
Reality Brosur Pengenalan Dinas Komunikasi
dan Informatika Kabupaten Karangasem
Alur Aktifitas: Aktor Sistem
1. Use case ini
dimulai
ketika user
mulai
menjalanka 2. Sistem
n aplikasi. membuka
aplikasi dan
menampilka
n halaman
splash
screen
aplikasi

Tabel 3.1 merupakan use case description menampilkan splash screen yang
menjelaskan tindakan-tindakan user pada saat awal memulai aplikasi. Use case
ini dimulai ketika user menjalankan aplikasi maka sistem akan mengaktifkan
kamera smartphone.
 37

1. Memulai Scan Marker

Pada use case memulai scan marker, user akan melakukan scan marker
untuk melacak marker objek. Deskripsi use case melakukan scan marker
terdapat pada table 3.2 di bawah ini

Tabel 3.2 Use case Description Memulai Scan Marker

Nama Use case Memulai Scan marker

Sekenario User Melakukan Scan marker

Deskripsi User nenekan tombol mulai pada halaman
ringkasan menu utama aplikasi kemudain sistem akan
mengarahkan user kedalam proses scan
marker
Aksi Ketika tombol “Start” ditekan maka sistem akan
mengarahkan user menuju proses scaning
marker.
Aktor Utama User
Prasyarat User harus berada pada halaman utama
aplikasi kemudian menekan tombol mulai
sehingga bisa masuk ke dalam scan marker
Alur Aktivasi Aktor Sistem
1. Use case dimulai 2. Sistem
ketika user akan
menekan mengaktif
tombol Start kan
kamera
3. User
mengarahkan
kamera ke
dalam marker.
4. Sistem
mendetek
si marker.

5. Sistem
menampil
kan objek
3D Sma N
1 Manggis

Tabel 3.2 adalah use case description melakukan scan marker dengan tahapan
awal menekan tombol “mulai” pada main menu aplikasi setelah itu sistem akan
menampilkan proses scan marker yang bertujuan melacak marker yang terdapat
 38

pada marker brosur guna memunculkan gambar objek 3D Dinas Komunikasi dan
Informatika Kabupaten Karangasem sesuai dengan marker yang ada.

5. Use case Description Keluar dari Scene Utama

Pada use case keluar dari aplikasi scene utama menerangkan proses user
mengakhiri main scene utama aplikasi, dan ketika user menekan tombol keluar,
user akan kembali diarahkan ke halaman main menu aplikasi.

Tabel 3.5 Use case Description Keluar Dari Aplikasi

Nama Use case Keluar dari scene utama aplikasi

Skenario Menutup main scene utama aplikasi
Deskripsi Ringkasan User memilih tombol “keluar“ pada scene utama
aplikasi untuk keluar dari main aplikasi

Aksi Ketika user memilih tombol “keluar” maka sistem

akan menutup scene utama aplikasi.

Aktor Utama User

Prasyarat User memilih tombol “keluar“ pada scene utama
aplikasi

Alur aktifitas Aktor Sistem

1. Use case
ini dimulai
ketika
user
berada
didalam
main
scene
halaman
utama
aplikasi 3. Sistem akan
menutup
2. User aplikasi
memilih
tombol
“keluar”
 39

Tabel 3.5 Use case description keluar dari aplikasi dimana menjelaskan
mengenai pemilihan tombol “keluar” oleh user terhadap sistem. Dimana pada
proses pertama user berada pada halaman main menu utama aplikasi kemudian
user akan memilih tombol “keluar” dan sistem akan keluar dari main scene utama
aplikasi Augmented Reality.

5. Use case Menampilkan option

Pada use case menampilkan option pada aplikasi akan menekan tombol
”Option” kemudian sistem akan merespon dengan menamilkan informasi terkait
konten dari aplikasi.

Tabel 3.6 Use case Description Menampilkan Option

Nama Use case Menampilkan Info Aplikasi
Skenariao Menampilkan halaman Option aplikasi
Deskripsi User memilih tombol “Option “ pada aplikasi
ringkasan
Aksi Ketika user memilih tombol “Option” maka sistem
akan manampilkan halaman tentang aplikasi.
Aktor Utama User
Prasyarat User memilih tombol “Option” aplikasi

Alur aktifitas Aktor Sistem

1. Use case
ini dimulai
ketika user
berada
didalam
halaman
main menu 3. Sistem
aplikasi menampilkan
2. User halaman
memilih informasi
 40

tombol tentang
“Option” aplikasi

Tabel 3.6 adalah use case description menampilkan info aplikasi dimana
menjelaskan mengenai pemilihan tombol “Option” oleh user terhadap sistem.
Pada proses pertama user berada pada halaman main menu aplikasi kemudian
user akan memilih tombol “Tentang App”dan sistem akan menampilkan halaman
info aplikasi.

5. Use case Description Keluar dari Aplikasi

Pada Use case Keluar dari Aplikasi menerangkan proses user mengakhiri
aplikasi, user akan menekan tombol “Keluar” kemudian sistem akan merespon
dengan mengakhiri aplikasi yang sedang berjalan.

Tabel 3.7 Use case Description Keluar Dari Aplikasi

Nama Use case Keluar dari Aplikasi

Skenario Menutup Aplikasi

Deskripsi User memilih tombol “Quit“ pada aplikasi

Ringkasan
Aksi Ketika user memilih tombol “Quit” maka
sistem akan menutup aplikasi.

Aktor Utama User

Prasyarat User memilih tombol “keluar“

Alur aktifitas Aktor Sistem

1. Use case
ini
dimulai
ketika
User
berada 3. Sistem akan
 41

didalam menutup
halaman aplikasi
main
menu
aplikasi
2. User
memilih
tombol
“Quit”

Tabel 3.7 use case description keluar dari aplikasi dimana menjelaskan
mengenai pemilihan tombol “keluar” oleh user terhadap sistem. Pada proses
pertama user berada pada halaman main scene utama aplikasi kemudian user
akan memilih tombol “keluar” dan sistem akan keluar dari aplikasi Augmented
Reality.

3.1 Class Diagram

Class diagram adalah description kelompok obyek-obyek dengan property,
prilaku (operasi) dan relasi yang sama. Sehingga dengan adanya class diagram
dapat memberikan pandangan global atas sebuah sistem. Hal tersebut tercemin
dari class – class yang ada dan relasinya satu dengan yang lainnya.
 42

Gambar 3.3 Class Diagram

3.2 Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di dalam dan
disekitar sistem (temasuk user, display, dan sebagainya) berupa message yang
digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi vertical
(waktu) dan dimensi horizontal (objek-objek yang terkait). Sequence diagram
biasa digunakan untuk menggambarkan skenario atau rangkaian langkah –
langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan
output tertentu. Sequence diagram dari aplikasi “Visualisasi Image menggunakan
Augmented Reality pada Augmented Reality sebagai media informasi di sma n 1
manggis menggunakan Android” :

1. Sequence Diagram Menampilkan Splash screen

Merupakan sequence diagram splash screen aplikasi Visualisasi Image
menggunakan Augmented Reality pada Brosur Pengenalan Dinas Komunikasi
dan Informatika Kabupaten Karangasem menggunakan Android. Squence
diagram ini dimulai ketika user menjalankan aplikasi kemudian sistem akan
 43

menampilkan splash screen aplikasi. Gambar 3.4 merupakan sequence diagram

splash screen

Gambar 3.4 Sequence Diagram Splash screen

2. Sequence Diagram Memulai Scan Marker

Merupakan proses scan marker diawali dengan pemilihan tombol “Mulai”
selanjutnya diteruskan ke dalam main scene untuk mengaktifkan kamera device
android, setelah itu user mengarahkan kamera kedalam marker, kemudian
sistem memindai marker, jika marker yang digunakan sesuai dengan aplikasi
maka objek 3D aplikasi dapat ditampilkan. Gambar 3.5 merupakan gambaran
sequence diagram memulai scan marker.
 44

Gambar 3.5 Sequence Diagram Memulai Scan Marker

3. Sequence Diagram Pengaturan

Sequence diagram memutar narasi objek ini menjelaskan proses interaksi
antar objek untuk menjalankan rotasi pada objek dalam aplikasi. Sequence
diagram ini dimulai ketika user memilih tombol mulai didalam main menu aplikasi,
kemudian sistem mengaktifkan kamera untuk melakukan scan marker. Setelah
berhasil menampilkan objek 3D maka tombol narasi akan aktif dan jika tombol
“narasi” ditekan maka sistem akan memutar narasi objek. Tombol narasi tidak
akan aktif jika proses scan marker tidak berhasil. Gambar 3.6 merupakan
gambaran sequence diagram memutar narasi.
 45

Gambar 3.6 Sequence Diagram Pengaturan

10. Sequence Diagram Keluar dari Aplikasi

Sequence diagram panduan ini menjelaskan interaksi antar objek didalam
proses menutup aplikasi. Sequence diagram ini dimulai ketika user berada
didalam main menu aplikasi, user memilih tombol “keluar” kemudian sistem
merespon dengan menutup aplikasi yang sedang berjalan. Gambar 3.7
merupakan gambaran sequence diagram menutup aplikasi.
 46

Gambar 3.7 Sequence Diagram Menutup Aplikasi

3.1 Activity Diagram

Activity diagram adalah sebuah diagram alur kerja yang menjelaskan

bagaimana kegiatan sistem bekerja, yang menjabarkan masing-masing aktivitas
dan aliran sekuensial dari aktivitas-aktifitas tersebut. Aktivity diagram juga dapat
menggambarkan proses pararel yang mungkin terjadi pada beberapa eksekusi.
Activity diagram merupakan state diagram khusus, dimana sebagian besar state
adalah action dan jalur aktivitas dari level atas secara umum. Berikut ini adalah
activity diagram dari aplikasi Visualisasi Image menggunakan Augmented Reality
pada Brosur Pengenalan Dinas Komunikasi dan Informatika Kabupaten
Karangasem menggunakan Android.

1. Activity Diagram Menampilkan Splash screen

Activity diagram gambar 3.8 dimulai ketika user pertama kali menjalankan
aplikasi Augmented Reality Brosur Pengenalan Dinas Komunikasi dan
Informatika Kabupaten Karangasem, activity diagram ini menampilkan proses
splash screen aplikasi.
 47

Gambar 3.8 Activity Diagram Menampilkan Splash screen

2. Memulai Scan Marker

Activity diagram memulai scan marker ini dimulai ketika user berada pada
halaman main menu utama aplikasi user menekan tombol mulai dan sistem
akan mengaktifkan kamera smartphone, kemudian user mengarahkan kamera ke
marker yang telah dibuat, setelah itu sistem akan menyocokkan marker yang ada
dengan data yang telah tersimpan didalam aplikasi, jika data marker cocok
dengan aplikasi maka sistem akan memunculkan objek 3D sesuai marker, dan
sebaliknya jika data tidak sesuai antara marker dengan aplikasi maka kamera
akan terus membaca marker tersebut scara berulang-ulang. Gambar 3.9
merupakan activity diagram memulai scan marker.
 48

Gambar 3.9 Activity Diagram Memulai Scan Marker

3. Activity Diagram Pengaturan

Activity Diagram ini di mulai ketika user menjalankan Aplikasi Augmented Reality
dan berada pada Scene utama Aplikasi dan ketika user memilih tombol
 49

pengaturan maka system akan masuk pada menu pengaturan. Gambar 3.10
merupakan Activity Diagram pengaturan yang menjelaskan proses dari
pengaturan.

Gambar 3.10 Diagram Activity Pengaturan

4. Activity Diagram Keluar Dari Aplikasi

Activity Diagram ini dimulai ketika user menjalankan aplikasi Augmented
Reality dan berada pada scene main menu utama aplikasi dan ketika user
memilih tombol “keluar” maka sistem akan menutup aplikasi. Gambar 3.11
merupakan Activity Diagram Keluar dari Aplikasi yang menjelaskan proses keluar
dari aplikasi.
 50

Gambar 3.11 Activity Diagram Keluar dari Aplikasi

3.1 Desain Antar Muka

Perancangan antar muka merupakan tahapan untuk membuat tampilan atau
desain sistem yang akan dibangun. Rancangan tampilan yang dibuat meliputi
rancangan splash screen, main menu, halaman utama, tentang aplikasi, dan keluar
dari sistem.

1. Splash screen
Splash screen merupakan tampilan antar muka dalam aplikasi.Splash
screentampil pertama kali saat aplikasi dijalankan, yang menampilkan desain
logo dari aplikasi yang dibuat. Disain Splash screen terlihat seperti gambar 3.12.

Logo

Augmented Reality

Media Informasi Gedung Sekolah

SMA N 1 Manggis

Gambar 3.12 Desain Splash screen

 51

2. Main Menu
Desain main menu dalam aplikasi ini berisi tiga pilihan tombol yang
memiliki fungsi berbeda-beda. Tombol mulai berfungsi untuk masuk ke dalam
scene utama aplikasi, tombol panduan berfungi untuk masuk kedalam scene
panduan aplikasi, tombol info aplikasi berfungsi untuk masuk ke dalam scene info
aplikasi dan tombol keluar berfungsi untuk mengakiri aplikasi. Desain main menu
terlihat seperti gambar 3.13.

AR SMA N
1
MANGGIS

Start

Option

Quit

Gambar 3.13 Desain Main Menu

3. Desain Tombol Keluar dari Scene Utama Aplikasi

Tampilan disain antar muka scene utama sebelum melakukan scan
marker. Desain antar mukanya dapat dilihat pada gambar 3.14.

paused
Music volume :
Efect volume :

Resume Quit

Gambar 3.14 DesainTombol Antarmuka Tombol Keluar Scene Utama

52