BAB III

PERENCANAAN DAN ANALISA PERANCANGAN SISTEM

3.1 Perencanaan
Dalam melakukan perencanaan penulis menganalisa apa yang dibutuhkan
untuk membangun aplikasi ini, data apa saja yang di perlukan serta kebutuhan
sistem seperti apa yang diinginkan oleh pengguna. Perencanaan merupakan
langkah pertama dalam proses membangun sebuah aplikasi, karena di dalam
tahap perencanaan ini akan ditentukan siapa saja yang akan terlibat dan aplikasi
seperti apa yang akan dibangun sehingga dapat berfungsi secara maksimal,
untuk menyelesaikan permasalahan yang sedang dihadapi. Oleh sebab itu
perencanaan harus dilakukan secara matang, agar aplikasi yang dibuat benar –
benar optimal.
Dalam hal ini penulis merencanakan pembuatan aplikasi Augmented
Reality (AR) pengenalan jenis bunga anggrek.
3.2 Analisa Sistem
Analisa sistem perlu dilakukan sebelum ke tahap perancangan sistem,
karena pada tahap ini dilakukan pengidentifikasian masalah dan kebutuhan
sistem yang akan dibangun. Analisa bertujuan untuk mendapatkan pemahaman
secara keseluruhan tentang sistem yang akan dibuat, baik itu kebutuhan sistem
secara menyeluruh maupun alat bantu apa saja yang harus digunakan nantinya.
Aplikasi yang akan dibuat adalah aplikasi pembelajaran interaktif dan
edukatif ke pada customer bunga anggrek, tentang pengenalan ragam jenis
bunga anggrek dengan menggunakan teknologi Augmented Reality (AR), untuk
lebih menarik minat anak – anak aplikasi ini dibuat dengan menggunakan
teknologi yang lebih modern, agar kalangan umum bisa langsung mengetahui
tampak visual secara 3D dari ragam jenis bunga anggrek tersebut.

32
 33

3.3 Analisa Kebutuhan Sistem

Dalam berbagai macam pembuatan suatu sistem, diperlukan perancangan
segala sesuatu yang dibutuhkan untuk pembuatan sistem tersebut. Demikian
halnya dalam merancang Aplikasi Augmented Reality pengenalan jenis bunga
anggrek dengan objek yang bergerak berbasis android, juga perlu
merencanakan dan menganalisa kebutuhan digunakan supaya aplikasi tersebut
dapat berjalan seperti yang diharapkan. Dalam mengimplementasikan aplikasi
ini terdapat 7 analisa kebutuhan, yaitu :
3.3.1 Analisa Kebutuhan Pembuat Program
Analisa kebutuhan ini meliputi kebutuhan data yang digunakan
antara lain data nama bunga anggrek, bunga anggrek, perawatan bunga
anggrek dan deskripsi tentang bunga anggrek, data – data tersebut
didapatkan dari hasil wawancara dan observasi yang di lakukan kepada
bapak Subibyo pemilik toko bunga anggrek di jalan jolotundo 1 No.16
Semarang.
3.3.2 Kebutuhan Hardware
Untuk pengembangan sistem ini penulis menggunakan perangkat
keras dengan spesifikasi sebagai berikut :
1. Laptop MacBook Pro
2. RAM 4 GB
3. Procesor Intel Core i7 2.80GHz
4. Harddisk 750GB
5. SSD 125GB
6. Kabel Data
7. Smartphone Android versi 5.1.1 ( Lolipop )
 34

3.3.3 Kebutuhan Software

Adapun beberapa software yang digunakan untuk mendukung
pembuatan Aplikasi Augmented Reality Pengenalan Bunga Anggrek
dengan Objek yang Bergerak berbasis Android :
1. Sistem Operasi Microsoft Windows 7
2. Unity 3D
3. Vuforia
4. Android SDK Manager
5. Java Development Kit ( JDK )
6. Google Chrome
7. Rational Rose Enterprise Edition
8. Balsamiq Mockups 3
9. Adobe photoshop CC
10. Adobe Illustrator CC
11. Blender
3.3.4 Pembuatan Marker Pada Vuforia
Marker adalah gambar yang digunakan sebagai bahan scan untuk
dapat menampilkan objek yang sesuai dengan yang sudah di buat pada
aplikasi ini. Berikut adalah tahapan pembuatan gambar marker bunga
anggrek pada Vuforia :
1. Siapkan gambar buanga anggrek yang akan dijadikan sebagai
marker, bisa didapat dengan mendownload di Googgle.
2. Edit terlebih dahulu gambar tersebut untuk memberikan
keterangan singkat dari gambar ikan. Ditahap ini penulis
menggunakan software Adobe Illustrator.
3. Login ke Vuforia dengan akun yang sudah dibuat.
4. Kemudian buat terlebih dahulu databasenya, lalu simpan pada
folder yang ada di laptop.
5. Upload gambar – gambar bunga anggrek ke database yang sudah
dibuat
 35

Setelah membuat markernya perlu diingat bahwa rating bintang

sangat berpengaruh pada hasilnya nanti, karena semakin besar rating
bintang yang diberikan maka semakin mudah pula marker untuk di scan
oleh Aplikasi Augmented Reality pengenalan bunga anggrek ini. Agar
gambar dapat mendapat rating bintang yang bagus saat proses
pengeditan pada Adobe Illustrator dibuat dengan RGB dan dengan
kualitas yang baik saat mengekspornya ke folder.
Berikut adalah marker yang digunakan oleh pengembang untuk
menjadi bahan utama dalam pembuatan aplikasi ini yang sudah sesuai
dengan objek yang telah dibuat pada aplikasi augmented reality :
1. Marker Anggrek Wild Cat

Gambar 3.1 Marker Anggrek Wild Cat

 36

2. Anggrek Bulan (Phalaenopsis amabilis)

Gambar 3.2 Marker Anggrek Bulan(Phalaenopsis amabilis)

3. Marker Anggrek Zygopetalum

Gambar 3.3 Marker Anggrek Zygopetalum

 37

4. Marker Anggrek Dendrobium

Gambar 3.4 Marker Anggrek Dendrobium

5. Marker Anggrek Cephalanthera

Gambar 3.5 Marker Anggrek Cephalanthera

 38

Marker adalah gambar yang dibuat dengan menggunakan

software Vuforia. Marker ini juga merupakan gambar yang disimpan
pada database penyimpanan gambar yang sudah terkait dengan objek
yang akan di terapkan pada Unity, marker juga merupakan bahan untuk
dapat menampilkan objek pada aplikasi augmented reality pengenalan
tanaman anggrek dengan objek yang bergerak ini.
3.3.5 Pembuatan Animation
Animation adalah proses pembuatan animasi gerak pada objek
yang sudah dibuat, objek dibuat bergerak agar terlihat lebih menarik
dan tidak membosankan, berikut adalah tahapan dalam Animation
1. Pilih objek yang akan di berikan animasi.
2. Klik record pada frame unity.
3. Kemudian klik button rotation.
4. Kemudian isikan 360 derajat pada sumbu Y untuk rotasi putaran.
5. Untuk dapat menggerkan objecnya, harus dalam posisi pose mode.
Untuk membuat animasinya dapat bergerak, pada menu timeline kita
pilih pada waktu 0 terlebih dahulu bagaimana posisi awal, lalu tekan
i pilih locrotscale, artinya semua aktifitas kita baik scale, rotate dan
merubah posisi di simpan dalam timeline, setelah semua di simpan,
klik icon seperti tombol play pada menu timeline dan lihat hasilnya
object dapat bergerak
3.3.6 Analisis User
Tahap ini pengguna membutuhkan aplikasi mobile untuk melihat
objek virtual yang ada di aplikasi yang berupa objek bunga anggrek
yang dibuat beserta deskripsinya.

3.3.7 Penggunaan Aplikasi

Penggunaan aplikasi Augmented Realiti pengelanan bunga anggrek
dengan objek yang bergerak ini dibuat dengan cara penggunaan yang
simple dan mudah agar kalangan umum bisa dengan mudah
 39

menggunakannya. Berikut cara penggunaan aplikasi augmented reality

pengenalan bunga anggrek dengan objek yang bergerak.
1. Buka aplikasi augmented reality pengenalan bunga anggrek
dengan objek yang bergerak.
2. Baca terlebih dahulu pentunjuk penggunaan aplikasi.
3. Pilih menu mulai marker untuk melihat objek 3D dari bunga
anggrek yang sudah di buat.
4. Scan gambar marker yang sudah disiapkan dengan menggunakan
kamera smartphone.
5. Aplikasi augmented reality pengenalan bunga anggrek dengan
objek yang bergerak akan menampilkan objek bunga anggrek
sesuai dengan gambar marker yang di scan.

3.4 Perancangan Sistem

Perancangan sistem ditujukan untuk memberikan gambaran secara umum

tentang sistem yang dibangun kepada pengguna/user. Perancangan sistem
dibuat menggunakan UML (Unified Modeling Language).

3.4.1 Use case Diagram

Use case diagram menggambarkan fungsionalitas sistem
secara global. Berikut ini adalah use case dari Aplikasi pengenalan
bunga anggrek.

<<Include>>

Scan Marker Tampil Objek 3D

Pengguna/User

Gambar 3.11 use case diagram

 40

pada gambar 3.1.1 use case diagram menunjukan pengguna

dapat memilih berbagai opsi profil, petunjuk, scan gambar dan
keluar aplikasi.

a. Deskripsi Use case Diagram

Deskripsi dari use case diagram yang telah dibuat sebelumnya,
berikut tabel deskripsi use case diagram.

Tabel 3.1 Descripsi use case diagram

No. Use case Deskripsi

1. Scan Marker Melakukan scan marker pada

gambar yang sudah di persiapkan
untuk melakukan fungsi utama
aplikasi.

2. Tampil Objek Aplikasi akan menampilkan

objek dari marker yang sudah di
scan, dalam proses ini aplikasi
hanya akan menampilkan objek
sesuai dengan marker yang di
scan dan yang sudah terdapat
pada dabase Vuforia.

Pada tabel 3.1 di deskripsikan dari menu – menu yang tersedia pada
aplikasi yang ada di use case diagram.
 41

b. Skenario use case diagram

berikut ini adalah tabel skenario diagram dari use case diagram
yang telah di rancang sebelumnya.

Tabel 3.2 Skenario use case diagram scan marker

Use Case Scan Marker

Aktor User

Kondisi Awal Membuka Aplikasi

Kondisi Ahir Tampil Objek 3D

Deskripsi Penggunaan aplikasi augmented reality

pengenalan jenis bunga anggrek dengan objek
yang bergerak berbasis android.

Aktor Sistem
1. buka aplikasi
2. menampilkan menu utama
aplikasi.
3. pilih menu scan marker .
4. menampilkan tampilan halaman
menu scan marker.
5. scan gambar marker
dengan menggunakan kamera
smartphone.
6. menampilkan objek 3D yang
sudah di rancang pada aplikasi.
Alternatif penggunaan
Saat melakukan scan marker usahakan pada tempat dengan
pencahayaan yang cukup agar scan bisa dilakukan dengan mudah,
gambar marker yang dapat di scan hanya gambar yang sudah di
masukan ke dalam database Vuforia saja.
 42

3.4.2 Activity Diagram

Activity Diagram atau diagram aktivitas menggambarkan work
flow (aliran kerja) atau aktivitas dari aplikasi atau menu yang ada pada
perangkat lunak. Berikut adalah activity diagram scan marker pada
aplikasi Augmented reality pengenalan bunga anggrek dengan objek
yang bergerak.

Pengguna Sistem

Membuka aplikasi

menampilkan halaman
utama

memilih menu scan

marker

menampilkan tampilan
scan marker

mengarahkan kamera
ke marker yang di pilih

menampilkan objek 3D
sesuai gambar marker

menutup halaman
scan marker

Gambar 3.12 Activity Diagram scan marker.

 43

3.4.4 Sequence Diagram

Sequence Diagram menggambarkan kelakuan objek pada use
case dengan mendeskripsikan waktu hidup dan messange yang
dikirimkan dan di terima antar objek. Menggambar diagram sequence
diagram harus diketahui objek – objek yang terlibat dalam sebuah use
case beserta metode – metode yang dimiliki kelas yang diinstanisasi
menjadi objek itu. Berikut adalah sequence diagram dari aplikasi
augmented reality pengenalan bunga anggrek dengan objek yang
bergerak.

: Pengguna/User : menu utama : Scan marker : control sistem

membuka aplikasi

menampilkan menu utama

memilih scan marker

membuka scan marker

menampilkan halaman scan marker

scan gambar marker

deteksi marker

menampilkan objek 3D

Gambar 3.13 Sequence Diagram scan marker

 44

3.5 Perancangan Pada Vuforia

Berikut ini adalah gambar perancangan dari database yang akan di
tunjukan pada tabel 3.3
Tabel 3.3 Perancangan Database
No. Nama Bunga Anggrek Format Kualitas gambar Ukuran

1. Anggrek Wild cat JPEG (Image) Bagus 1,7Mb

2. Anggrek Bulan JPEG (Image) Sedang 777Kb

3. Anggrek Zygopetalum JPEG (Image) Bagus 1,6Mb

4. Anggrek Dendrobium JPEG (Image) Bagus 1,3Mb

5. Anggrek Cephanthera JPEG (Image) Bagus 1,6Mb

Pada tabel 3.3 menunjukan gambar perancangan database dari aplikasi

Augmented Reality pengenalan bunga anggrek dengan objek yang bergerak.
Berisi gambar – gambar tanaman anggrek yang nantinya akan dijadikan
sebuah marker untuk di scan dan memunculkan objek 3Dnya.

3.6 Perancangan Antar Muka

Perancangan antar muka atau interface dari sebuah sistem berfungsi

untuk memberikan gambaran akan tampilan dari program. Interface yang
bagus, juga akan memberikan kemudaham bagi penulis/pengembang. Agar
dapat merancang terlebih dahulu tampilan dari aplikasi yang akan dibuat agar
sesuai dengan keinginan pengguna. Pada pecancangan interface ini penulis
menggunakan software Balsamiq MockUp karena dengan software tersebut
perancangan yang dilakukan lebih mudah. Berikut adalah tampilan antar muka
atau interface dari aplikasi Augmented Reality pengenalan bunga anggrek
dengan objek yang bergerak.
 45

a. Tampilan Menu Utama

Pada gambar 3.14 menunjukan mockup halaman menu utama dari

aplikasi augmented reality pengenalan bunga anggrek dengan objek yang
bergerak. Dimana di halaman menu utama ini terdapat beberapa pilihan ada
Profil, Petunjuk, Scan Marker dan Keluar. berikut adalah tampilan menu
utama dari aplikasi Augmented reality pengenalan bunga anggrek yang
ditunjukan pada gambar 3.14.

Gambar 3.14 MockUp menu utama

b. Tampilan Halaman Profil

Pada gambar 3.15 menunjukan halaman profil pengembang yang

berisikan tentang biodata dari pengembang aplikasi augmented reality
pengenalan bunga anggrek dengan objek yang bergerak. Di sertai dengan
foto dari pengembang dan biodata lengkapnya. berikut adalah mockup
tampilan dari halaman profil pengembang aplikasi yang ditunjukan pada
gambar 3.15.
 46

Gambar 3.15 MockUp halaman profil

c. Tampilan Halaman Petunjuk

Pada gambar 3.16 menunjukan tampilan mockup dari halaman petunjuk

yang berisikan tentang step by step penggunaan aplikasi augmented reality
pengenalan bunga anggrek dengan objek yang bergerak dengan benar.
Berisikan tentang urutan penggunaan aplikasi. berikut adalah mockup dari
tampilan halaman pentunjuk yang ditunjukan pada gambar 3.16.

Gambar 3.16 MockUp halaman petunjuk.

 47

d. Tampilan Scan Marker

Pada gambar 3.17 menunjukan tampilan scan marker yang digunakan

untuk scan gambar marker yang sudah disediakan oleh pengembang. Pada
tampilan scan marker ini merupakan bagian utama dari aplikasi augmented
reality pengenalan bunga anggrek dengan objek yang bergerak, karena pada
bagian ini lah aplikasi melakukan scanning terhadap gambar marker dan
nantinya aplikasi akan menampilkan objek 3D yang sudah di buat
sebelumnya oleh pengembang. Dengan banyaknya data yang terdapat pada
aplikasi membuat ketelitian pada aplikasi sangat diperlukan sebab marker
yang disediakan juga tidak sedikit. berikut adalah mockup tampilan dari
scan marker yang ditunjukan pada gambar 3.17.

Gambar 3.17 MockUp tampilan scan marker

 48

e. Tampilan Menu Keluar

Pada gambar 3.18 menunjukan tampilan keluar aplikasi augmented

reality pengenalan bunga anggrek dengan objek yang bergerak. Dengan
mengklik YA maka dengan otomatis pengguna akan keluar dari aplikasi
namun jika pengguna menekan TIDAK maka pengguna akan kembali ke
menu utama aplikasi. berikut adalah mockup tampilan option keluar aplikasi
yang ditunjukan pada gambar 3.18.

Gambar 3.18 MockUp tampilan Option keluar.