55
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

BAB III METODOLOGI - Universitas Bumigora

  • Upload
    others

  • View
    10

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 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

Page 2: BAB III METODOLOGI - Universitas Bumigora

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

Page 3: BAB III METODOLOGI - Universitas Bumigora

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

Page 4: BAB III METODOLOGI - Universitas Bumigora

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.

Page 5: BAB III METODOLOGI - Universitas Bumigora

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.

Page 6: BAB III METODOLOGI - Universitas Bumigora

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

……………………………….

Page 7: BAB III METODOLOGI - Universitas Bumigora

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.

Page 8: BAB III METODOLOGI - Universitas Bumigora

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)

Page 9: BAB III METODOLOGI - Universitas Bumigora

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:

Page 10: BAB III METODOLOGI - Universitas Bumigora

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:

Page 11: BAB III METODOLOGI - Universitas Bumigora

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

Page 12: BAB III METODOLOGI - Universitas Bumigora

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

Page 13: BAB III METODOLOGI - Universitas Bumigora

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:

Page 14: BAB III METODOLOGI - Universitas Bumigora

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.

Page 15: BAB III METODOLOGI - Universitas Bumigora

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:

Page 16: BAB III METODOLOGI - Universitas Bumigora

44

Page 17: BAB III METODOLOGI - Universitas Bumigora

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

Page 18: BAB III METODOLOGI - Universitas Bumigora

46

5 Cawan Petri

6 Buret

7 Pipet Tetes

8 Spatula

9 Penjepit Tabung

10 Labu Takar

11 Kaca Arloji

Page 19: BAB III METODOLOGI - Universitas Bumigora

47

12 Corong Segitiga

13 Segitiga

14 Pengaduk Kaca

15 Neraca Analitik

16 Silinder Ukur

17 Botol Pencuci

18 Tabung Reaksi

Page 20: BAB III METODOLOGI - Universitas Bumigora

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

Page 21: BAB III METODOLOGI - Universitas Bumigora

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

Page 22: BAB III METODOLOGI - Universitas Bumigora

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.

Page 23: BAB III METODOLOGI - Universitas Bumigora

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.

Page 24: BAB III METODOLOGI - Universitas Bumigora

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:

Page 25: BAB III METODOLOGI - Universitas Bumigora

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

Page 26: BAB III METODOLOGI - Universitas Bumigora

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

Page 27: BAB III METODOLOGI - Universitas Bumigora

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

Page 28: BAB III METODOLOGI - Universitas Bumigora

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

Page 29: BAB III METODOLOGI - Universitas Bumigora

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:

Page 30: BAB III METODOLOGI - Universitas Bumigora

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:

Page 31: BAB III METODOLOGI - Universitas Bumigora

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.

Page 32: BAB III METODOLOGI - Universitas Bumigora

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.

Page 33: BAB III METODOLOGI - Universitas Bumigora

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

Page 34: BAB III METODOLOGI - Universitas Bumigora

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

Page 35: BAB III METODOLOGI - Universitas Bumigora

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:

Page 36: BAB III METODOLOGI - Universitas Bumigora

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:

Page 37: BAB III METODOLOGI - Universitas Bumigora

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:

Page 38: BAB III METODOLOGI - Universitas Bumigora

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:

Page 39: BAB III METODOLOGI - Universitas Bumigora

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:

Page 40: BAB III METODOLOGI - Universitas Bumigora

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

Page 41: BAB III METODOLOGI - Universitas Bumigora

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:

Page 42: BAB III METODOLOGI - Universitas Bumigora

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:

Page 43: BAB III METODOLOGI - Universitas Bumigora

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

Page 44: BAB III METODOLOGI - Universitas Bumigora

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

Page 45: BAB III METODOLOGI - Universitas Bumigora

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

Page 46: BAB III METODOLOGI - Universitas Bumigora

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:

Page 47: BAB III METODOLOGI - Universitas Bumigora

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

Page 48: BAB III METODOLOGI - Universitas Bumigora

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

Page 49: BAB III METODOLOGI - Universitas Bumigora

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

Page 50: BAB III METODOLOGI - Universitas Bumigora

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

Page 51: BAB III METODOLOGI - Universitas Bumigora

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

Page 52: BAB III METODOLOGI - Universitas Bumigora

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

Page 53: BAB III METODOLOGI - Universitas Bumigora

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

Page 54: BAB III METODOLOGI - Universitas Bumigora

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:

Page 55: BAB III METODOLOGI - Universitas Bumigora

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.