BAB III METODOLOGI - Universitas Bumigora
Transcript of BAB III METODOLOGI - Universitas Bumigora
29
BAB III
METODOLOGI
3.1. Pengumpulan Data
Tahap awal pengumpulan data pada penelitian yang penulis lakukan
berupa pengumpulan data materi-materi yang diperlukan dan akan dimuat di
dalam aplikasi yang dibuat. Materi tersebut berupa dokumen dan informasi
yang terkait dengan kebutuhan penambahan media pembelajaran di SMA
Negeri 1 Plampang. Materi tersebut dibutuhkan untuk acuan dalam
pembuatan objek 3D dan pembuatan marker yang akan digunakan.
3.1.1 Studi Pustaka
Tahapan pengumpulan data yang pertama penulis lakukan yaitu
pengumpulan data berdasarkan studi pustaka. Sumber teori utama dari
penelitian ini yaitu buku dengan judul MULTIMEDIA Konsep & Aplikasi
Dalam Pendidikan cetakan ketiga yang merupakan karya dari Prof. Dr.
Munir, M.IT yang diterbitkan oleh Alfabeta pada Desember 2015. Kemudian
buku kedua yang penulis gunakan sebagai refrensi pendukung dalam materi
Pendidikan Kimia yaitu buku paket Kimia yang digunakan oleh siswa SMA
Negeri 1 Plampang selama proses pembelajaran. Buku tersebut berjudul
KIMIA untuk Siswa SMA/MA Kelas X Kelompok Peminatan Matematika
dan Ilmu-ilmu Alam, yang diterbitkan oleh Yrama Widya cetakan ke-XIV
pada Februari 2018. Penulis juga mendokumentasikan langsung gambar alat-
alat praktikum di dalam laboratorium SMA Negeri 1 Plampang. Refrensi
pedukung lainnya berupa jurnal-jurnal IT dan pendidikan, penulis kumpulkan
melalui website Google Schoolar yang dapat diakses melalui
https://schoolar.google.co.id/.
3.1.2 Wawancara
Tahapan wawancara dilakukan oleh penulis bertujuan untuk
mendapatkan data dari pihak yang bersangkutan, terkait dengan pembuatan
aplikasi media pembelajaran di SMA Negeri 1 Plampang. Pihak tersebut
berupa Ibu/Bapak Guru pengajar mata pelajaran Kimia dan Kepala Sekolah
30
SMA Negeri 1 Plampang. Berikut hasil wawancara yang telah dilakukan
yaitu:
Tabel 3. 1. Wawancara
No. Pertanyaan Jawaban
1. Media Pembelajaran apa
saja yang digunakan dalam
proses belajar mengajar ?
Media pembelajaran yang
digunakan berupa buku paket, papan
tulis, poster serta proyektor LCD.
2. Apkah dalam pembelajaran
materi Ruang Lingkup
Kimia, khususnya materi
Penataan Peralatan Kimia
ditampilkan secara
langsung di dalam kelas ?
Alat-alat praktikum tidak
diperlihatkan di dalam kelas
melainkan hanya diperlihatkan
melalui buku paket. Alat-alat
praktikum baru akan diperlihatkan
ketika siswa berada di dalam
laboratorium.
3. Apakah ada alasan tertentu
mengapa alat-alat
praktiukum tersebut hanya
diperlihatkan di dalam
laboratorium saja ?
Alat-alat praktikum kimia yang
digunakan memiliki bahan yang
mudah pecah dan juga menjaga
kebersihan alat-alat tersebut
sehingga tidak dibawa ke luar
laboratorium.
4. Kapankah seharusnya alat-
alat praktikum kimia
tersebut diperlihatkan
kepada siswa ?
Sebaikanya alat-alat tersebut
diperlihatkan sebelum praktikum di
laboratorium berlangsung, agar
ketika proses praktikum
berlangsung siswa telah memiliki
pengetahuan terhadap alat-alat
tersebut.
5. Adakah harapan terhadap
media pembelajaran
pendukung bagi alat-alat
Diharapkan agar ada media
pembelajaran yang mendukung
menamapilkan alat-alat praktikum
31
praktikum kimia tersebut
untuk waktu mendatang ?
tanpa mengeluarkan alat-alat
praktikum yang asli dari ruangan
laboratorium.
3.1.3 Observasi
Penulis melakukan observasi langsung ke lokasi penelitian yaitu
SMA Negeri 1 Plampang, untuk mengetahui dan melihat bagaimana
proses pembelajaran yang berlangsung. Dari observasi yang telah
dilakukan didapatkan hasil, bahwa penggunaan buku paket adalah
menjadi media pembelajaran utama di dalam kelas. Sulitnya masuk ke
dalam ruangan laboratorium serta masih terbatasnya alat-alat praktikum
juga menjadi informasi yang diperoleh selama observasi dilakukan oleh
penulis di SMA Negeri 1 Plampang.
3.1.4 Interpretasi Kelayakan Multimedia Pembelajaran
Interpretasi kelayakan multimedia learning dilakukan melalui
hitungan statistik deskriptif. Skor jawaban dalam rentangan 1 – 5
ditabulasi dan dihitung skor rata-rata. Tingkat kelayakan dibedakan
dalam empat kelompok, dengan mean ideal (2,50) sebagai skor batas
kelayakan. Karena itu mean skor kurang dari mean ideal
diinterpretasikan dalam kategori “tidak layak”, sedangkan mean skor
dalam kategori “layak” dibedakan dalam tiga tingkatan yaitu “kurang
layak”, “layak” dan “sangat layak”, seperti dinyatakan dalam Tabel
Interpretasi berikut (Sriadhi, 2018).
Tabel 3. 2. Interpretasi Kelayakan Multimedia Pembelajaran
No. Interval Mean Skor Interpretasi
1 1,00 – 2,49 tidak layak
2 2,50 – 3,32 kurang layak
3 3,33 – 4,16 layak
32
4 4,17 – 5,00 sangat layak
• Hitung mean skor jawaban setiap aspek dengan rumus:
𝑥 =Ʃ𝑥
𝑛
Dengan : x = rata-rata skor, Ʃ𝑥 = total skor, n = jumlah data.
• Untuk penilaian tingkat kelayakan multimedia secara
keseluruhan dilakukan dengan cara yang sama dengan melibatkan
semua skor yang diperoleh dari seluruh validator dan akan
dikalkulasikan dengan jumlah keseluruhan point kuisioner.
Penilaian dilakukan dengan rumus : 𝑋𝑡 =Ʃ𝑥𝑖
𝑛
• Penetapan kelayakan media dilakukan dengan menggunakan
penggabungan skor nilai tiap aspek dan domain dari semua
Penilai (Validator). Disini penulis menggunakan 10 siswa sebagai
validator yang bersifat homogen, sehingga guna menghindari
subjektivitas dan mereduksi kesalahan pemahaman.
• Perancangan Kuisioner Uji Pengguna
Kuisioner uji pengguna dibuat untuk memberikan beberapa
pernyataan yang akan digunakan sebagai bahan validasi
kelayakan dari aplikasi yang diberikan kepada pengguna. Penulis
memberikan kuisioner kepada validator yang merupakan siswa
dari kelas X-IPA 1 sebagai subjek penelitian. Penulis menguji 10
yang dari 31 siswa bersifat homogen, yang artinya memiliki
tujuan atau latar belakang sama ketika akan menggunakan
aplikasi Kimia AR. Berikut rancangan kuisioner yang telah
penulis buat dengan mengacu pada ketentuan dan bersifat
pernytaan kualitatif berdasarkan pengalaman pengguna.
33
INSTRUMEN UJI PENGGUNA
Nama : …………………………………………
Kelas/Jurusan : …………………………………………
Petunjuk:
Lembar instrument ini bertujuan untuk mengevaluasi kualitas tampilan, kualitas
Bahasa dan kemanfaatan produk. Sehubungan dengan hal tersebut, dimohon untuk
siswa-siswi memberikan pendapatnya pada setiap pernyataan yang tersedia dengan
memberi tanda “√” (ceklis/centang) pada kolom yang tersedia.
Keterangan:
4 = SANGAT BAIK 2 = TIDAK BAIK
3 = BAIK 1 = SANGAT TIDAK BAIK
A. Penilaian
No. Kriteria Penilaian Penilaian
1 2 3 4
1 Anda mampu mengenali alat-alat praktikum yang
ditampilkan aplikasi Kimia AR.
2 Aplikasi Kimia AR sudah mampu menampilkan
objek 3D saat anda men-scan marker.
3 Aplikasi Kimia AR sudah mampu menampilkan
nama objek 3D praktikum sesuai dengan objek yang
ditampilkan.
4 Aplikasi Kimia AR sudah mampu berjalan dalam
dua bahasa untuk anda gunakan, yaitu Bahasa
Indonesia dan Bahasa Inggris.
5 Anda dapat menggunakan Aplikasi Kimia AR
dengan mudah tanpa mengalami kesulitan.
34
6 Aplikasi Kimia AR menyediakan akses bagi anda
untuk mengunduh marker apabila buku paket hilang.
7 Anda dapat menggunakan aplikasi Kimia AR dalam
kondisi koneksi jaringan internet On maupun dalam
kondisi Off.
8 Aplikasi Kimia AR loading dengan cepat ketika
anda membuka dan menutup aplikasi.
9 Aplikasi Kimia AR telah mampu memudahkan anda
mengakses alat-lat praktikum melalui aplikasi tanpa
perlu ke ruang laboratorium.
B. Komentar/Saran Umum untuk penyempurnaan aplikasi:
1. …………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
………
2. …………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
………
3. …………………………………………………………………………
…………………………………………………………………………
…………………………………………………………………………
………
Plampang, Mei 2020
……………………………….
35
3.2. Metode Pengembangan
Model pengembangan yang penulis gunakan dalam
mengembangkan media pembelajaran ini adalah model pengembangan
ADDIE. Model pengembangan ini terdiri dari lima tahapan yang
meliputi analisis (analysis), desain (design), pengembangan
(development), implementasi (implementation), dan evaluasi
(evaluation). Model pengembangan ADDIE dikembangkan oleh Dick
and Carry pada tahun 1996 untuk merancang sistem pembelajaran.
Gambar 3. 1. Metode ADDIE
3.2.1 Analisis
a. Tujuan
Tujuan pembuatan aplikasi media pembelajaran berbasis
Augmented Reality ini yaitu:
• Sebagai penambahan media pembelajaran di SMA Negeri 1
Plampang,
• Menerapkan media pembelajaran yang baru berbasis
Augmented Reality (AR) yang akan membantu proses belajar
mengajar di SMA Negeri 1 Plampang.
• Mengenalkan teknologi baru yang bisa menjadi alternatif
dalam proses belajar mengajar untuk mata pelajaran lainnya.
b. Pengguna
Pengguna atau user dari aplikasi media pembelajaran mata
pelajaran Kima berbasis AR yaitu siswa SMA Negeri 1 Plampang,
Kabupaten Sumbawa Besar.
c. Analisa Kebutuhan Fungsional
Analisis kebutuhan fungsional dilakukan dengan tujuan
untuk mengetahui tingkat kebutuhan sistem terhadap pengguna,
berupa kebutuhan materi apa saja yang diperlukan di dalam system.
36
Kebutuhan materi tersebut diambil dari materi yang sudah
dikumpulkan terlebih dahulu pada tahapan pengumpulan data.
d. Analisa Kebutuhan Nonfungsional
• Analisa Pengguna
Pada tahapan ini pengguna harus mampu menjalankan atau
mengoperasikan Smartphone Android yang akan digunakan
sebagai media untuk menjalankan aplikasi. Pengguna yang
dimaksud yaitu siswa SMA Negeri 1 Plampang serta guru mata
pelajaran sebagai fasilitator. Hal ini ditekankan agar proses
penggunaan media pembelajaran yang berbasis Augmented
Reality dapat berlangsung dengan maksimal.
• Analisa Kebutuhan Perangkat Keras
Pembangunan aplikasi media pembelajaran ini menggunakan
perangkat keras (hardware) dan perangkat lunak (software)
untuk merancang aplikasi. Perangkat keras yang digunakan
beserta spesifikasinya yaitu:
a. Processor Intel Core i5 7th Gen
b. VGA Nvidia Geforce
c. Memory Ram 4gb
d. 1000GB HDD
e. 14” HD LED LCD
f. Mouse
g. Keyboard
• Analisa Kebutuhan Perangkat Lunak
Perangkat lunak yang digunakan dalam pembuatan aplikasi
media pembelajaran ini yaitu:
a. Windows 10 Pro 64-bit
b. Unity 3D Engine
c. Vuforia SDK untuk AR Unity
d. Android Software Development Kit (SDK)
e. Java Development Kit (JDK)
37
f. Adobe Illustrator CS6
g. Blender versi 2.71
h. Minimal Android Versi 4.1
3.2.2 Desain (Perancangan)
Rancangan struktur navigasi aplikasi Objek 3D Kimia Berbasis
Augmented Reality sebagai berikut:
Gambar 3. 2. Struktur Navigasi
Aplikasi media pembelajaran berbasis AR ini dibuat dalam dua
bahasa yaitu Bahasa Indonesia dan Bahasa Inggris. Berikut rangcangan
desain yang dicantumkan berupa Bahasa Indonesia:
a. Splash Screen
Splash screen adalah halaman depan dari program atau
aplikasi yang akan tampil ketika aplikasi dijalankan. Splash screen
akan secara otomatis berpindah ke layar menu utama dalam minimal
waktu 5 detik. Dalam tampilan Splash screen terdapat logo dari
SMA Negeri 1 Plampang, logo dari Universitas Bumigora, dan logo
dari LilomArt yang merupakan logo penulis. Berikut tampilan dari
Splash screen:
38
Gambar 3. 3. Splash Screen
b. Menu Utama
Menu utama berisi judul aplikasi, nama sekolah, logo
sekolah, nama kelas, gambar identik terkait mata pelajaran Kimia,
dan beberapa tombol navigasi antara lain:
39
Gambar 3. 4. Menu Utama
• Tombol Kamera Augmented Reality, berisi perintah untuk
menampilkan objek-objek 3D yang berbentuk alat-alat
praktikum sesuai dengan gambar yang ada di buku paket
Kimia pada BAB 1. Tombol ini akan menangkap marker
yang terdapat di buku paket Kimia SMA Negeri 1 Plampang.
• Tombol Informasi, berisi tentang informasi bagaimana
menjalankan aplikasi media pembelajaran berbasis AR serta
berisi informasi tentang developer dan informasi tentang
aplikasi.
• Tombol Setting (pengaturan), berisi perintah yang akan
mengarahkan pengguna ke halaman pengaturan Bahasa.
Pengguna dapat memilih Bahasa apa yang ingin digunakan.
• Tombol Exit, merupakan tombol yang digunakan untuk
memasukkan perintah keluar dari aplikasi. Tombol ini akan
40
mengarahkan pengguna ke halaman Exit. Dalam halaman
exit terdapat dua tombol yaitu tombol Ya dan Tidak, tombol
Ya akan mengarah keluar aplikasi dan tombol Tidak akan
mengarah ke Menu Utama berikut tampilan halaman exit:
Gambar 3. 5. Menu Exit
c. Scene Kamera Augmented Reality
Merupakan tampilan yang akan menampilkan objek 3D dari
alat-alat praktikum yang sesuai dengan gambar yang ada di
buku paket mata pelajaran Kimia BAB 1. Scene ini akan
memanfaatkan kamera yang terdapat di Android Smartphone
pengguna sebagai perantara dalam proses pendeteksian atau
pembacaan marker kemudian akan menampilkan objek 3D di
atas marker. Dalam scene ini terdapat tombol Home yang
berfungsi mengarahkan pengguna ke halaman menu utama jika
41
telah selsai menggunakan Kamera AR. Berikut tampilan dari
halaman Kamera AR:
Gambar 3. 6. Kamera AR
d. Scene Informasi
Scene Informasi memiliki dua halaman, yaitu halaman pertama
memiliki informasi terkait bagaimana penggunaan aplikasi dan
halaman kedua berisi informasi Developer. Scene informasi
memiliki tombol Home, tombol Next dan tombol Back. Tombol
Home berisi perintah untuk kembali ke scene Menu Utama dan
tombol Next berisi perintah untuk menuju ke halaman kedua,
sedangkan tombol Back berisi perintah untuk kembali ke
halaman informasi pertama. Berikut tampilan dari scene
informasi:
42
Gambar 3. 7. Informasi 1
Pada halaman kedua dari informasi, penulis juga sebagai
pengembang mencantumkan icon-icon yang dapat diakses oleh
pengguna aplikasi.
• Icon google drive berisi link google drive yang akan
mengarahkan pengguna ke penyimpanan google drive untuk
mendownload marker bagi pengguna yang tidak memiliki
marker tercetak.
• Icon Instagram dan Youtube berisi link yang akan
mengarahkan pengguna ke akun sosial media developer.
• Icon e-mail sebagai penanda alamat e-mail develope.
43
Gambar 3. 8. Informasi 2
e. Marker
Marker akan ditangkap dan dideteksi oleh kamera AR,
kemudian dari marker yang telah dideteksi maka akan tampil
objek 3D yang telah dibuat sesuai dengan bentuk dari alat-alat
praktikum kimia yang ada di buku paket Kimia pada BAB I.
Marker yang digunakan dalam aplikasi ini berjumlah 19
(Sembilan belas) marker berdasarkan jumlah gambar alat-alat
praktikum yang terdapat pada BAB I di buku Kimia kelas X
(sepuluh) SMA Negeri 1 Plampang. Masing-masing marker
akan menampilkan objek yang berbeda satu dengan yang
lainnya. berikut gambar marker-maker yang akan digunakan:
44
45
Gambar 3. 9. Marker Aplikasi
f. Desain Alat-alat Praktikum 3 Dimensi
Berikut alat-alat yang akan diimplementasikan dalam bentuk
objek 3D yang akan ditampilkan dalam aplikasi AR.
Tabel 3. 3. Desain Objek 3D
No. Nama Alat Gambar Alat
1 Gelas Kimia
2 Labu Erlenmeyer
3 Pembakar Bunsen
4 Alu dan Lumpang Porselin
46
5 Cawan Petri
6 Buret
7 Pipet Tetes
8 Spatula
9 Penjepit Tabung
10 Labu Takar
11 Kaca Arloji
47
12 Corong Segitiga
13 Segitiga
14 Pengaduk Kaca
15 Neraca Analitik
16 Silinder Ukur
17 Botol Pencuci
18 Tabung Reaksi
48
19 Pembakar Spritus
3.2.3 Development (Pengembangan)
Pada tahapan ini adalah proses pembuatan media pembelajaran
sesuai dengan rancangan desain dan pengumpulan data yang telah
dilakukan pada tahapan sebelumnya. Berikut tahapan dari proses
development yang dilakukan:
3.2.3.1 Pembuatan Asset
Pembuatan asset adalah langkah pertama yang
dilakukan dalam tahapan pengembangan. Berikut langkah-
langkah pembuatan asset yang digunakan:
Gambar 3. 10. Palette Warna Aplikasi
a. Pembuatan Interface
• Pembuatan Icon
Pertama-tama membuka Adobe Illustrator Cs6
terlebih dahulu.
Gambar 3. 11. Adobe Illustrator
49
Aplikasi Adobe Illustrator memerlukan waktu
beberapa detik untuk memulai aplikasi. Setelah
aplikasi terbuka akan tampil jendela kosong adri
aplikasi seperti gambar berikut:
Gambar 3. 12. Adobe Illustrator 2
Setelah aplikasi terbuka, maka langkah selanjutnya
membuat lembar kerja baru yaitu dengan langkah:
File + New, maka akan tampil kolom perintah sebagai
berikut:
Gambar 3. 13. Adobe Illustrator 3
50
Dari gambar di atas, dalam kolom perintah tersebut
penulis mengatur ukuran lembar dan nama file dari
icon yang akan dibuat. Setelah pengaturan selesai,
maka klik “OK”. Setelah mengatur lembar kerja
maka akan tampil tampilan seperti berikut:
Gambar 3. 14. Adobe Illustrator 4
Langkah selanjutnya yaitu penulis membuat bentuk
ellipse (lingkaran) yang merupakan bentuk dasar dari
icon aplikasi Kimia berbasis AR. Dengan langkah
berikut:
Gambar 3. 15. Adobe Illustrator 5
Dengan menggunakan mouse klik kiri lalu klik tahan
seperti gambar di atas. Setelah memilih ellipse tool
maka selanjutnya membuat bentuk lingkaran di
dalam lembar kerja.
51
Gambar 3. 16. Adobe Illustrator 6
Setelah membuat bentuk lingkaran, langkah
selanjutnya yaitu memberi warna dasar dari icon yang
akan dibuat dengan langkah: Eyedropper toll +
arahkan ke color swatches, disini penulis
menggunakan warna hijau seperti gambar di atas.
Gambar 3. 17. Adobe Illustrator 7
Selanjutnya setelah lingkaran dasar icon dibuat, maka
selanjutnya membuat lingkaran kedua yang akan
menjadi dasar dari tulisan identitas aplikasi pada icon.
Langkah membuat lingkaran sama seperti pembuatan
lingkaran pertama seperti pada gambar di atas.
52
Gambar 3. 18. Adobe Illustrator 8
Setelah membuat lingkaran dasar untuk teks aplikasi,
maka langkah selanjutnya: Type tool + Type on a
path tool.
Gambar 3. 19. Adobe Illustrator 9
Selanjutnya membuat gambar identic dengan materi
utama yang ditampilkan dalam aplikasi yaitu KIMIA
dan gambar terkait KIMIA menggunakan pentool.
Kemudian langkah selanjutnya seperti di bawah ini:
53
Gambar 3. 20. Adobe Illustrator 10
Setelah langkah pembuatan icon selesai, maka
selanjutnnya menyimpan icon dalam format .PNG
seperti gambar diatas lalu pilih “Save”. Maka akan
tampil tampilan seperti di bawah ini:
Gambar 3. 21. Adobe Illustrator 11
54
Disini penulis memilih background color dalam
mode transparan lalu klik “OK” seperti gambar di
atas. Gambar icon yang telah di simpan sebagai
berikut:
Gambar 3. 22. Adobe Illustrator 12
• Pembuatan Splash Screen
Langkah pembuatan splash screen adalah membuka
aplikasi Adobe Illustrator Cs6 seperti pada
pembuatan Icon aplikasi sebelumnya. Selanjutnya
penulis menggunakan basic rectangle tool sebagai
bentuk dasar dari aplikasi, sebagai berikut:
Gambar 3. 23. Adobe Illustrator 13
55
Penulis menggunakan pentool untuk membuat
dekorasi pendukung agar terlihat lebih menarik. Logo
dari instansi terkait juga diimport dengan cara: File +
Impot + pilih lokasi gambar yang ingin diimport.
Kemudian menggunakan warna dari sample warna
yang telah penulis cantumkan sebelumnya. Setelah
desain splash screen dibuat maka hasilnya sebagai
berikut:
Gambar 3. 24. Desain Splash Screen
• Pembuatan Menu Utama
Selanjutnya pembuatan menu utama yang telah
dirancang pada langkah sebelumnya. Langkah-
langkah pembuatan menu utama sebagai berikut:
Gambar 3. 25. Adobe Illustrator 14
56
Pada gambar di atas penulis menggunakan beberapa
bentuk yaitu: rounded rectangle tool, rectangle tool,
dan ellipse tool. Penulis membuat tombol navigasi
kamera, setting, informasi, dan exit menggunakan
rounded rectangle tool dan ellipse tool dengan
tambahan pendukung menggunakan pentool.
Gambar 3. 26. Adobe Illustrator 15
Pengaturan text yang digunakan dalam desain menu
utama memiliki pengaturan sebagai berikut:
- Kata “SMA NEGERI 1 PLAMPANG”
Gambar 3. 27. Adobe Illustrator 16
- Kata “Kelas X: Kompetensi Ilmu Pengetahuan
Alam”
Gambar 3. 28. Adobe Illustrator 17
57
- Kata “BELAJAR”
Gambar 3. 29. Adobe Illustrator 18
- Kata “TEKAN DISINI”
Gambar 3. 30. Adobe Illustrator 19
Setelah pembuatan selesai berikut hasil export menu
utama:
Gambar 3. 31. Desain Menu Utama
• Pembuatan Menu Informasi
Selanjutnya pembuatan menu informasi yang
memiliki langkah-langkah yang sama dengan
pembuatan menu utama. Berikut hasil pembuatan
menu informasi:
58
Gambar 3. 32. Desain Menu Informasi
Pembuatan atribut pendukung menggunakan pentool
dan ellipse tool, jenis text yang digunakan yaitu
Comic Sans MS dengan pengaturan yang sama pada
pengaturan text di langkah sebelumnya. Penulis
membuat tombol Home, Next, dan Back
menggunakan pentool dan ellipse tool.
• Pembuatan Menu Exit
Pada pembuatan menu exit penulis menggunakan
bentuk rectangle tool dan pembuatan tombol-tombol
menggunakan bentuk rounded rectangle tool.
Pengaturan text yang digunakan yaitu tipe Arial.
Berikut gambar dari menu exit yang telah dibuat:
59
Gambar 3. 33. Desain Menu Exit
• Pembuatan Menu Setting
Pembuatan menu setting hampir sama dengan
langkah pembuatan menu exit. Pengaturan text dan
tombol menggunakan pengaturan yang sama. Berikut
hasil dari pembuatan menu setting.
60
Gambar 3. 34. Desain Menu Bahasa
• Pembuatan Menu Kamera AR
Pembuatan menu kamera mengguanakan dasar
rectangle tool dan menggunakan tombol navigasi
home yang telah dibuat pada menu-menu
sebelumnya. Menu kamera ini hanya memiliki border
dengan bagian tengah yang kosong, ini bertujuan agar
memberikan ruang untuk menampilkan objek 3D.
Berikut hasil dari pembuatan menu Kamera AR.
61
Gambar 3. 35. Desain Menu Bahasa
b. Pembuatan Marker
Pembuatan marker menggunakan aplikasi Adobe
Illustrator Cs6. Dengan bentuk dasar menggunakan
rectangle tool dan warna dasar menggunakan hitam-
putih. Marker-marker yang dibuat telah dicantumkan
oleh penulis pada langkah sebelumnya. Berikut
kumpulan marker yang dibuat di dalam Adobe Illustrator
Cs6.
Gambar 3. 36. Desain Marker
62
c. Pembuatan Objek 3 Dimensi
Tahapan pembuatan objek 3D atau biasa disebut juga
dengan tahapan modelling asset ini menggunakan
aplikasi Blender 2.74. Berikut tahapan modelling salah
satu objek dari 19 objek yang akan ditampilkan oleh
aplikasi Belajar Kimia berbasis AR.
• Membuka aplikasi blender
Sebelum memulai tahap modelling, pastikan aplikasi
Blender terinstal. Penulis menggunakan aplikasi
Blender versi 2.74. berikut tampilan dari aplikasi
Blender pada saat dibuka:
Gambar 3. 37. Blender 2.74
Setelah muncul tampilan seperti gambar di atas, lalu
klik di area lembar kerja yang kosong agar muncul
tampilan seperti berikut:
Gambar 3. 38. Blender 1
63
Setelah gambar di atas tampil, maka langka
selanjutnya menghapus objek kubus yang telah dibuat
otomatis oleh aplikasi Blender dengan cara Klik X
pada keyboard lalu akan muncul alert delete dan
penulis memilih delete dan objek akan terhapus.
• Pembuatan Plane
Langkah selanjutnya setelah objek kubus dihapus
yaitu membuat bentuk dasar yang digunakan untuk
modelling spatula. Disini penulis memilih bentuk
Plane sebagai bentuk dasar yang akan digunakan,
berikut langkah-langkahnya:
Gambar 3. 39. Blender 2
Pilih plane di menu create, setelah itu akan tampil di
lembar kerja seperti gambar berikut:
64
Gambar 3. 40. Blender 3
• Modifikasi Plane
Setelah bentuk plane terbentuk, maka selanjutnya
mengatur ukuran dari plane sesuai dengan bentuk asli
dari objek spatula. Penulis mengguanakan pilihan
yang terdapat di Transpormation Manipulators yaitu
scale seperti pada gambar berikut ini:
Gambar 3. 41. Blender 4
Setelah mengatur scale sesuai dengan kebutuhan,
penulis lalu masuk ke dalam edit mode. Dalam mode
ini penulis akan memulai pembuatan bentuk dasar
dari objek spatula, edit mode dapat dilihat pada
gambar dibawah ini:
65
Gambar 3. 42. Blender 5
Setelah masuk ke dalam mode edit, maka selanjutnya
pemodelan ujung plane agar membentuk ujung
spatula. Berikut gambar di bawah ini:
Gambar 3. 43. Blender 6
Dari gambar di atas penulis pertama-tama memilih
ujung plane menggunakan klik kanan pada mouse
lalu Klik E (keyboard) + Y (keyboard) lalu geser
kursor kea rah sumbu Y agar menambah ujung plane
yang akan di modifikasi. Modifikasi dilakukan
dengan cara Klik S (keyboard) + X (keyboard), ini
bertujuan untuk mengatur scale dari ujung plane yang
akan dimodifikasi kea rah sumbu X. hasil meodifikasi
sebagai berikut:
66
Gambar 3. 44. Blender 7
Setelah proses modifikasi dilakukan, selanjutnya
akan masuk ke dalam proses penebalan objek dengan
menambag face dari bentuk yang telah dibuat. Untuk
menambah face dapat dilakukan melalui select mode
(mode seleksi) seperti gambar di bawah ini:
67
Gambar 3. 45. Blender 8
Sebelum ke mode seleksi, terlebih dahulu penulis
mengubah sudut pandang dari tampilan lembar kerja.
Pengubahan tampilan sudut pandang dapat dilakukan
dengan memilih menu view seperti gambar di atas.
Disini penulis memilih sudut pandang kanan agar
dapat meilihat seberapa tebal objek tersebut akan
dibuat melalui tampak samping kanan. Setelah
mengubah view maka selanjutnya penulis mengubah
mode seleksi ke Face Select seperti pada gambar di
bawa ini:
Gambar 3. 46. Blender 9
Setelah masuk ke dalam face select maka selanjutnya
yaitu menambah ketebalan plane dengan menseleksi
terlebih dahulu face yang ada dengan menggunakan
Klik Kanan (mouse klik) + shift (keyboard). Face
yang terseleksi seperti gambar di bawah ini:
68
Gambar 3. 47. Blender 10
Setelah terseleksi maka langkah selanjutnya yaitu
menambah ketebalan dengan mode extrude. Disini
penulis menggunakan shortcut E (keyboard) + Z
(keyboard), selanjutnya penulis menggeser kursor
kea rah sumbu Z agar ketebalan bertambah ke arah
sumbu Z. berikut hasil yang didapatkan:
Gambar 3. 48. Blender 11
Setelah penebalan dilakukan, maka langkah
selanjutnya yaitu modifikasi ketebalan ujung objek
agar melengkung membentuk seperti spatula. Disini
penulis masuk ke mode Edge Select yang terletak
tepat di sebalah face select. Berikut hasil dari
modifikasi edge:
Gambar 3. 49. Blender 12
Setelah objek telah terbentuk seperti spatula, maka
selanjutnya penambahan jumlah edge (garis)
terhadap objek 3D spatula yang telah dibuat.
Penambahan garis ini bertujuan untuk mengurangi
dampak perubahan bentuk dari Suubdivision Surface
69
yang akan digunakan sebagai penghalus objek di
langkah selanjutnya. Berikut penambahan garis:
Gambar 3. 50. Blender 13
Dalam penambahan garis ini, penulis menggunakan
shortcut Ctrl + R (keyboard), lalu menggunakan
scroll up pada mouse untuk menambah jumlah garis
sesuai keinginan. Setelah penambahan garis, maka
selanjutnya penulis memperhalus objek dengan
menggunakan perintah subdivision surface seperti
gambar di bawah ini:
Gambar 3. 51. Blender 13
Pemilihan subdivision surface di icon object
modifiers seperti gambar di atas. Setelah memilih
subdivision surface, maka akan tampil gambar seperti
di bawah ini:
70
Gambar 3. 52. Blender 14
Pada gambar di atas, tingkat kehalusan objek dapat
diatur pada kolom View, semakin besar angka yang
dimasukkan maka semakin halus objek akan
terbentuk. Maka hasil dari subdivision surface
sebagai berikut:
Gambar 3. 53. Blender 15
• Pewarnaan Objek
Langkah selanjutnya setelah objek terbentuk yaitu
memberikan warna pada objek. Berikut langkah-
langkah yang penulis lakukan dalam tahapan
pemberian warna pada objek:
71
Gambar 3. 54. Blender 16
Pada gambar di atas pemilihan warna dilakukan pada
icon material seperti gambar di atas. Selanjutnya
yaitu memilih warna yang sesuai dengan tema objek.
Pemilihan warna dapat dilihat pada gambar di bawah
ini:
Gambar 3. 55. Blender 17
Setelah pemberian warna dilakukan, maka langkah
selanjutnya yaitu menyimpan objek yang telah dibuat.
• Export Objek 3D
Dalam tahapan penyimpanan cukup menekan tombol
Ctrl + S (keyboard) lalu memilih lokasi
penyimpanan. Setelah menyimpan objek langkah
selanjutnya yaitu export objek 3D ke dalam format
72
FBX (.fbx) agar objek 3D yang telah dibuat dapat
terbaca ketika dimasukkan sebagai asset ke dalam
aplikasi unity. Berikut langkah-langkahnya:
Gambar 3. 56. Blender 18
Pada gambar di atas, proses export yaitu File +
Export + FBX (.fbx).
Gambar 3. 57. Blender 19
Setelah memilih format penyimpanan maka langkah
selanjutnya yaitu penulis memilih lokasi
penyimpanan hasil export objek. Setelah memilih
lokasi, maka klik tombol Export FBX yang ditandai
kotak berwarna merah pada gambar di atas. Setelah
73
export selesai maka objek akan tersimpan dalam
format seperti gambar di bawah ini:
Gambar 3. 58. Blender 19
3.2.3.2 Pembangunan Aplikasi
a. Pembuatan Database AR
Pembuatan database untuk aplikasi AR ini, penulis
menggunakan Website Vuforia Developer. Vuforia telah
penulis jabarkan pada bab sebelumnya terkait defenisi
serta fungsinya. Website Vuforia dapat diakses melalui
link https://developer.vuforia.com/.
Gambar 3. 59. Vuforia Engine
Gambar diatas merupakan tampilan awal ketika penulis
menuju ke link yang telah penulis cantumkan di atas.
Sebelum penulis membuat database AR, penulis telah
terlebih dahulu melakukan registrasi yang
mencantumkan informasi dasar dari calon pengguna
serta username menggunakan alamat e-mail calon
74
pengguna dan password. Setelah proses registrasi
dilakukan maka pengguna dapat langsung melakukan
proses login. Berikut tampilan awal dari Vuforia Engine:
Gambar 3. 60. Vuforia Engine 2
Pada gambar di atas, penulis memilih tombol “Get
Development Key” sehingga akan diarahkan ke menu
sebagai berikut:
Gambar 3. 61. Vuforia Engine 3
Pada gambar di atas tersedia sebuah kolom untuk
memasukkan nama dari License Key yang akan
diperoleh seperti pada gambar di bawah ini:
75
Gambar 3. 62. Vuforia Engine 4
Kode lisensi yang didapat akan dimasukkan ke dalam
unity untuk digunakan sebagai database.
b. Upload Marker
Setelah dari menu License Manager penulis lalu
memilih menu Target Manager untuk membuat
database marker yang telah dibuat sebelumnya. Pada
menu inilah penulis meng-upload marker-marker
tersebut.
Gambar 3. 63. Vuforia Engine 5
76
Setelah proses upload marker dilakukan, berikutnya
penulis mengunduh database marker tersebut seperti
pada gambar di bawah ini:
Gambar 3. 64. Vuforia Engine 6
Pennulis memilih tombol download database yang
tertera diatas marker yang telah di unggah. Selanjutnya
akan muncul pemberitahuan dan kolom pilihan seperti
gambar di bawah ini:
Gambar 3. 65. Vuforia Engine 7
Penulis memilih Unity Editor karena database marker
tersebut akan dimasukkan ke dalam aplikasi Unity.
Database yang telah diunduh akan berupa seperti gambar
berikut:
Gambar 3. 66. Database Marker
77
Setelah proses unduh dilakukan maka tahapan
selanjutnya yaitu memasukkan database marker ke
dalam Unity.
c. Import Database Marker
Database yang telah diunduh kemudian dimasukkan ke
dalam aplikasi Unity. Berikut Langkah-langkahnya:
• Membuka Aplikasi Unity
Gambar 3. 67. Unity 2018
• Membuat Project
Gambar 3. 68. New Project Unity
Setelah memasukkan informasi untuk pembuatan
project baru maka penulis memilih tombol “create
78
project” sehingga akan tampil seperti gambar di
bawah ini yaitu tampilan loading package.
Gambar 3. 69. Unity Package Manager
• Memasukkan Database Marker
Gambar 3. 70. Unity 4
Gambar 3. 71. Import Package 1
Pada tahapan ini, penulis memasukkan data marker
yang telah di unduh pada situs Vuforia seinggingga
marker dapat digunakan dan berfungsi untuk aplikasi
yang dibuat. Setelah memasukkan data marker, maka
selanjutnya mencentang semua marker yang akan
digunakan dan memasukkan lisensi key yang telah di
copy pada akun Vuforia. Setiap data marker memiliki
79
lisensi yang berbeda. Seperti pada gambar di bawah
ini:
Gambar 3. 72. Import Package 2
• Import Objek 3D
Gambar 3. 73. Objek 3D Alat Praktikum
Objek 3D yang telah dibuat dimasukkan ke dalam
aplikasi Unity agar dapat ditampilkan pada aplikasi
yang akan dibuat oleh penulis. Penulis memasukkan
objek 3D dengan cara menseleksi seluruh objek 3D
pada folder penyimpanan computer penulis,
kemudian mendrag ke dalam aplikasi unity.
Kemudian objek 3D yang dimasukkan akan
80
diletakkan tepat diatas marker-marker yang telah
diinputkan seperti pada gambar di bawah ini:
Gambar 3. 74. Image Target dan Objek 3D
Penulis meletakkan objek 3D dan marker di posisi
yang sama agar posisi penampilan objek pada aplikasi
nantinya bersipat konsisten sehingga lebih mudah
untuk dilihat oleh pengguna.
• Pembuatan Menu-Menu Aplikasi
Gambar 3. 75. Setting Menu Utama
Menu utama yang telah didesain pada Langkah
sebelumnya kemudian dimasukkan oleh penulis ke
dalam unity. Proses penginputan desain-desain yang
digunakan sama dengan langkah-langkah
memasukkan objek 3D. Desain yang dimasukkan
81
harus berformat Sprite (2D and UI) seperti pada
gambar di bawah ini:
Gambar 3. 76. Setting Format Interface
Kemudian Langkah yang sama dilakukan oleh
penulis pada menu-menu lainnya seperti pada
gambar-gambar di bawah ini:
a. Menu Kamera
Gambar 3. 77. Setting menu Kamera AR
b. Menu Informasi
Gambar 3. 78. Setting Menu Informasi
82
c. Menu Pengaturan
Gambar 3. 79. Setting Menu Bahasa
d. Menu Keluar
Gambar 3. 80. Setting Menu Exit
d. Pembuatan Script / Koding Aplikasi
Langkah selanjutnya setelah pembuatan menu yaitu
menghubungkan menu-menu yang telah dibuat dengan
script yang menggunakan Bahasa C#. Penulis
menggunakan aplikasi Sumblime Text sebagai aplikasi
editor untuk script yang akan digunakan. Keseluruhan
script yang digunakan akan dilampirkan pada halaman
lampiran. Berikut tampilan sebagian dari script yang
digunakan:
83
Gambar 3. 81. Source Code
e. Build Aplikasi
Tahapan terakhir yang penulis lakukan yaitu build
aplikasi ke dalam platform Android, sehingga palikasi
yang telah dibuat di unity dapat berformat .Apk. berikut
tampiln dari proses build Aplikasi:
Gambar 3. 82. Build Aplikasi
Setelah proses build aplikasi dilakukan maka tahapan
selanjutnya akan masuk ke proses Implementation
(Implementasi) dan langkah Evaluation (Evaluasi). Dua
Langkah terakhir tersebut penulis uraikan pada bab
selanjutnya yaitu bab Hasil dan Pembahasan.