3. ANALISIS DAN DESAIN SISTEM 3.1 Survei Software-software ...
Transcript of 3. ANALISIS DAN DESAIN SISTEM 3.1 Survei Software-software ...
14 Universitas Kristen Petra
3. ANALISIS DAN DESAIN SISTEM
3.1 Survei Software-software sejenis
Dalam pengerjaan skripsi ini, dilakukan survei terlebih dahulu terhadap
software-software sejenis, untuk menganalisa fitur-fitur yang ada. Ada tiga
software yang akan digunakan sebagai referensi, yaitu Autodesk Homestyler,
Arrange-a-room, dan MyDeco.
1. Autodesk Homestyler (http://www.homestyler.com)
Ruangan dapat berbentuk lingkaran
Ketika dalam mode 3D, ruangan tidak dapat dijelajahi dan hanya
dapat dilihat pada sudut-sudut tertentu saja.
Tidak dapat memasukkan barang ketika dalam mode 3D
Hasil design dapat disimpan dan dishare dengan media sosial
Terdapat fitur autosave
Objek dapat ditranslasi dan rotasi. Juga dapat diubah ukurannya
Gambar 3.1 Screenshot Autodesk Homestyler
Gambar 3.1 merupakan sebuah pengambilan gambar/screenshot ketika
sedang dalam proses mendesain sebuah ruangan. Gambar 3.1 diambil ketika
15 Universitas Kristen Petra
berada pada 3D view. Dalam mode ini, hanya bisa melihat ruangan saja dan tidak
bisa melakukan desain ruangan.
2. Arrange-a-room (http://www.bhg.com)
Ruangan tidak dapat berbentuk lingkaran
Dua dimensi
Furniture kurang menarik
Hasil pekerjaan dapat disimpan
Objek dapat diubah ukurannya
Gambar 3.2 Screenshot Arrange-a-Room
16 Universitas Kristen Petra
Gambar 3.2 merupakan pengambilan gambar ketika dalam proses
mendesain sebuah ruangan pada Arrange-a-Room.
3. MyDeco (http://www.mydeco.com)
Ruangan tidak dapat berbentuk lingkaran
Barang-barang lengkap dan tersedia harga barang sesungguhnya
Ketika dalam mode 3D, ruangan tidak dapat dijelajahi dan hanya
dapat dilihat pada sudut-sudut tertentu saja.
Tersedia objek kamera untuk melihat ruangan secara 3D, tetapi
waktu rendering cukup lama.
Hasil pekerjaan dapat disimpan
Objek dapat dirotasi dan ditranslasi, namun tidak dapat diubah
ukurannya
Gambar 3.3 Screenshot MyDeco
17 Universitas Kristen Petra
Gambar 3.3 merupakan contoh tampilan ketika dalam proses mendesain
sebuah ruangan dalam aplikasi MyDeco. Pada bagian tengah halaman merupakan
desain ruangan yang dikerjakan, sedangkan pada bagian kanan halaman terdapat
pengambilan gambar ruangan menggunakan objek kamera yang disediakan oleh
aplikasi.
4. Google Sketchup Version 8.0.16846
Ruangan dapat dibentuk sesuai keinginan user.
Terdapat kamera yang bekerja secara 3 dimensi.
Terdapat pengukuran dalam skala sesungguhnya
Hasil pekerjaan dapat disimpan
Objek dapat dirotasi dan dapat diubah ukurannya
Dapat membuat objek sendiri maupun meng-import model 3D.
Gambar 3.4 Screenshot Google Sketchup 8
Pada gambar 3.4 dapat dilihat tampilan dari Google Sketchup 8. Objek
yang tampak pada gambar tersebut merupakan component dari Google Sketchup
8.
5. Sweet Home 3D
Fitur kamera terpisah dari canvas
18 Universitas Kristen Petra
Dapat membuat bentuk ruangan sesuai keinginan, namun tidak
dapat berbentuk lingkaran
Hasil pekerjaan dapat disimpan
Furniture sudah disediakan dan terbagi dalam beberapa kategori
Furniture dapat dirotasi dan juga dapat diubah ukurannya
Dapat meng-import objek 3D untuk dijadikan furniture.
Gambar 3.5 Screenshot Sweet Home 3D
Gambar 3.5 merupakan contoh tampilan yang ada pada software Sweet
Home 3D. Bagian atas merupakan tempat untuk melakukan proses desain.
Sedangkan bagian bawah merupakan tampilan dari camera untuk menunjukkan
dalam bentuk 3 dimensi.
19
3.2 Analisis
Tabel 3.1 Tabel Perbandingan Web-based Software
Fitur \ Program Autodesk Arrange-a-room MyDeco
3D Mode Bisa (hanya sudut tertentu) Tidak tersedia Bisa, terdapat kamera untuk melihat ruangan
Save Bisa Bisa Bisa
Bentuk dan ukuran
ruangan
Sesuai keinginan, dapat
berbentuk lingkaran
Sesuai keinginan, tetapi tidak
dapat berbentuk lingkaran
Sesuai keinginan, tetapi tidak dapat berbentuk
lingkaran
Pencahayaan Tidak bisa Tidak bisa Tidak bisa
Furniture Lengkap, tersedia ukuran, dan
beberapa furniture bisa diubah
ukurannya
Terbatas, ukuran dan warna
furniture bisa diubah.
Lengkap, tersedia ukuran dan harga furniture.
Tabel 3.2 Tabel Perbandingan Desktop Software
Fitur \ Program Google Sketchup Sweet Home 3D
3D Mode Bisa Bisa, terdapat kamera untuk melihat ruangan
Save Bisa Bisa
Furniture Dapat dibuat secara custom atau import 3D
objek
Tersedia berbagai macam kategori, dan juga
dapat import 3D objek
Pencahayaan Menggunakan plug-in Menggunakan plug-in
Bentuk dan Ukuran Ruangan Sesuai keinginan Sesuai keinginan, tidak dapat berbentuk
lingkaran
Un
ivers
itas K
riste
n P
etr
a
20 Universitas Kristen Petra
Setelah dilakukan survei pada software-software sejenis, semua software
tersebut menyediakan menu untuk menyimpan hasil pekerjaan. Hasil dan
perbandingan dari survei dapat dilihat pada Tabel 3.1. Juga hampir semua
menyediakan tampilan dalam bentuk tiga dimensi. Akan tetapi, tidak bisa
menjelajahi isi ruangan secara keseluruhan dan bebas. Dalam ketiga software
tersebut juga tidak ada yang menyediakan efek lighting atau pencahayaan pada
ruangan.
Untuk ukuran ruangan, semuanya memberikan ukuran dalam skala
sesungguhnya, dan juga bentuk ruangan dapat dibentuk sesuai keinginan user.
Hanya saja, tidak semuanya menyediakan fitur untuk membentuk lingkaran pada
ruangan.
Dalam setiap software yang dicoba juga menyediakan menu untuk
menyimpan hasil pekerjaan, sehingga dapat dilanjutkan lagi nantinya. Ada juga
yang menyediakan menu untuk dapat melakukan share hasil pekerjaan melalui
email atau media sosial seperti facebook dan twitter.
Tabel 3.2 merupakan perbandingan software-software untuk membuat
desain dalam versi desktop. Semuanya menyediakan fitur untuk menambahkan
atau meng-import custom objek 3 dimensi.
3.3 Desain Sistem
Setelah melakukan survei terhadap software-software sejenis, maka pada
skripsi ini akan dibuat fitur-fitur sebagai berikut:
Membuat tampilan dalam bentuk tiga dimensi sehingga ruangan dan
furniture akan tampak lebih nyata.
Menyediakan fitur save dan load project agar dapat melanjutkan pekerjaan
sewaktu-waktu.
Menyediakan efek pencahayaan pada barang yang dapat menghasilkan
cahaya sehingga dapat mengubah suasana pada ruangan.
Memungkinkan untuk membuat ruangan berbentuk lingkaran.
21 Universitas Kristen Petra
3.4 Struktur Data
Pemrograman yang dibuat menggunakan sistem class yang disediakan
pada library Three.js. Class tersebut memiliki constructor, properties, dan juga
method / void yang dapat digunakan. Untuk fungsi constructor, akan dijalankan
ketika pertama kali variabel dideklarasikan. Sedangkan properties atau method
yang ada pada class, dapat dipanggil sewaktu-waktu.
Gambar 3.6 Gambar Class Diagram
Pada Gambar 3.6, terdapat 7 macam class, yaitu class basicObject, mesh,
directionalLight, renderer, geometry, material, dan camera. Class camera dan
class mesh merupakan turunan dari class basicObject. Pada class basicObject,
terdapat properties position untuk menentukan posisi objek, rotation untuk
menentukan perputaran objek, dan scale untuk menentukan skala perbesaran
sebuah objek. Pada class camera, terdapat method lookAt, untuk menentukan titik
mana yang dilihat oleh camera. Juga terdapat method up, untuk menentukan titik
mana yang menjadi arah atas dari sebuah kamera. Parameter kedua method
tersebut berupa vektor. Sedangkan pada class mesh, terdapat properties geometry,
untuk menentukan bentuk dan geometry sebuah mesh, dan juga properties
material untuk memberi material dan tekstur.
22 Universitas Kristen Petra
Properties geometry dan material yang ada pada class mesh, merupakan
variabel dari class Geometry dan Material. Class Geometry memiliki properties
colors yang berguna untuk menentukan warna, vertices yang merupakan titik-titik
yang membentuk geometry, dan juga triangle yang berguna untuk menentukan
vertices mana yang berhubungan untuk membuat sebuah bidang.
Pada class directionalLight, terdapat properties boolean castShadow, yang
dapat membuat objek yang dilalui dapat menghasilkan bayangan. Selain itu, juga
terdapat properties position dan target, untuk menentukan titik awal dan akhir dari
cahaya.
Class renderer, memiliki properties shadowMapEnabled berupa boolean,
untuk memnyediakan efek pencahayaan jika bernilai true. Method render, berguna
untuk menggambar ulang jika ada perubahan pada canvas. Sedangkan setSize,
berguna untuk menentukan besar canvas. Method setSize digunakan pada awal
program.
Untuk penyimpanan objek yang ada, digunakan sistem array untuk
menampung objek-objek yang ada. Objek tersebut berupa mesh. Jadi array yang
ada merupakan kumpulan data dari sebuah class.
3.5 Flowchart
Dalam aplikasi yang dibuat, terdapat beberapa tahapan yang harus
dilakukan. Tahapan tersebut berupa proses-proses pada program yang
berkelanjutan. Pada bagian ini dibuat flowchart untuk memperjelas tahapan atau
proses-proses yang dilakukan pada program.
23 Universitas Kristen Petra
Pada Gambar 3.7 dapat dilihat bahwa menu utama akan terdapat tiga
pilihan menu, yaitu What’s this?, Tutorial, dan Start now. Pada menu What’s
this?, user akan dijelaskan mengenai aplikasi dan apa saja yang dapat dilakukan.
Pada menu Tutorial, user akan diajarkan bagaimana cara menggunakan aplikasi.
Dan pada menu Start now, user dapat langsung membuat design sebuah ruangan.
Gambar 3.7 Flowchart Menu Utama
Ketika mulai mendesain ruangan, pertama-tama yang dilakukan adalah
mendesain bentuk ruangan terlebih dahulu. Setelah selesai mendesain bentuk
ruangan, user akan diarahkan pada halaman selanjutnya yaitu halaman untuk
mendesain isi ruangan. Ketika dalam proses mendesain ruangan, user juga dapat
kembali mendesain bentuk ruangan jika bentuk ruangan ingin diganti. Setelah
24 Universitas Kristen Petra
selesai melakukan desain, user dapat menyimpan hasil pekerjaannya. Flowchart
pada menu Start Now dapat dilihat pada Gambar 3.8.
Gambar 3.8 Flowchart Menu Start Now
25 Universitas Kristen Petra
Ketika mendesain ruangan, user dapat menambahkan barang dengan cara
memilih kategori barang terlebih dahulu, baru memilih barang yang ada.
Sedangkan untuk memindah barang, barang yang dipindah diklik terlebih dahulu
dan lalu mouse digeser ke kiri-kanan atau atas-bawah (drag). Untuk me-rotate
barang, user dapat menggunakan tombol rotate yang ada dibagian navigasi.
Flowchart mendesain ruangan dapat dilihat pada Gambar 3.9.
Gambar 3.9 Flowchart Desain Isi Ruangan
26 Universitas Kristen Petra
Pada proses penggambaran object, ada beberapa proses yang harus
dilakukan. Pertama-tama adalah menyiapkan objek yang akan di-load dalam
format .js. Setelah diload, objek tersebut di-scaling hingga sesuai dengan ukuran
yang diinginkan. Lalu, object ditampilkan dan disimpan di dalam sebuah array
bernama objects. Flowchart penggambaran object dapat dilihat pada gambar 3.10.
Gambar 3.10 Flowchart Penggambaran Object
27 Universitas Kristen Petra
Pada aplikasi ini juga terdapat fitur untuk menyimpan pekerjaan, sehingga
dapat dilanjutkan sewaktu-waktu. Hasil pekerjaan akan berupa file yang dapat
disimpan oleh user.
Dalam file tersebut, disimpan jumlah dinding yang ada, diikuti posisi
dinding sebanyak jumlah dinding. Object yang ada pada canvas juga disimpan
dalam file tersebut. Cara penyimpanan pada file juga mirip dengan penyimpanan
dinding, yaitu pertama-tama disimpan jumlah object yang ada, diikuti dengan
posisi dan rotasi masing-masing object. Flowchart save project dapat dilihat pada
Gambar 3.11.
28 Universitas Kristen Petra
Gambar 3.11 Flowchart Fitur Save
.
Untuk melanjutkan project yang sebelumnya dikerjakan (load), user perlu
memilih file yang didapat ketika melakukan save. Setelah sukses dipilih, program
akan membaca variabel yang ada pada file tersebut. Setelah dibaca, program
melakukan penggambaran pada canvas. Flowchart load project dapat dilihat pada
Gambar 3.12.
29 Universitas Kristen Petra
Gambar 3.12 Flowchart Fitur Load
30 Universitas Kristen Petra
Tidak hanya isi ruangan yang perlu didesain, melainkan juga bentuk
ruangan. Di halaman untuk mendesain ruangan, pada canvas akan terbentuk grid.
Untuk membentuk dinding, titik yang ada pada grid diklik dan lalu disambungkan
dengan titik yang lainnya. Pada kolom navigasi, disediakan pilihan apakah akan
disambungkan dengan garis lurus biasa, atau dengan kurva. Jika memilih dengan
kurva, user perlu mengklik tiga titik, yaitu titik awal, titik tujuan, dan juga titik
puncak dari kurva nya. Flowchart desain bentuk ruangan dapat dilihat pada
Gambar 3.13
Gambae 3.13 Flowchart Desain Bentuk Ruangan
31 Universitas Kristen Petra
3.6 Desain Struktur Menu
Berdasar flowchart yang telah dibuat, maka dapat dibentuk struktur menu
utama pada program.
Gambar 3.14 Struktur Menu Program
Pada saat user pertama kali masuk pada program, user akan berada pada
menu utama, dan akan ada tiga menu pilihan, yaitu What’s This?, Tutorial, Start
Now seperti pada Gambar 3.14. Setelah memilih salah satu dari menu, user akan
dihadapkan dengan menu selanjutnya.
Menu Utama
What’s This? Tutorial Start Now
Desain Bentuk
Ruangan
Desain Isi
Ruangan
Save Load
32 Universitas Kristen Petra
3.7 Desain Interface
Pada aplikasi ini, disediakan beberapa tools berupa button, image button,
radio button, untuk melakukan proses yang dibutuhkan. Di bagian ini akan
dijelaskan mengenai komponen yang ada pada interface program.
Gambar 3.15 Desain Awal Menu Utama
Pada tampilan awal program, terdapat tiga menu utama seperti pada
Gambar 3.15. Menu-menu tersebut berupa image button. Ketika salah satu dari
image button tersebut diklik, maka user akan langsung diarahkan pada halaman
selanjutnya.
33 Universitas Kristen Petra
Gambar 3.16 Desain Interface Desain Bentuk Ruangan
Pada bagian navigasi, disediakan pilihan apakah dinding berbentuk lurus
atau kurva. User dapat memilihnya dengan menggunakan radio button pada
bagian navigasi. Contoh tampilan dapat dilihat pada Gambar 3.16.
34 Universitas Kristen Petra
Gambar 3.17 Desain Interface Desain Isi Ruangan
Tampilan ketika memulai melakukan desain pada ruangan. Pada sidebar di
sebelah kiri, terdapat combobox category untuk memilih kategori furniture seperti
tampak pada Gambar 3.17. Setelah memilih category, akan muncul beberapa
button di bawahnya untuk memilih furniture. Ketika diklik, furniture yang dipilih
akan muncul pada ruangan. Untuk memindahkan furniture, user dapat mengklik
dan menggesernya.