BAB III
METODOLOGI DAN PERANCANGAN APLIKASI
3.1 Metodologi Penelitian
Metode penelitian ini dibagi menjadi tujuh tahapan besar, yaitu tahap observasi, studi literatur, perancangan sistem, pembangunan aplikasi, testing dan debugging, evaluasi, dan penulisan laporan.
a. Tahap Observasi
Tahap observasi dilakukan untuk mempelajari proses belajar anak-anak, untuk mengetahui bagaimana anak-anak menggunakan smartphone nya untuk belajar, bermain, untuk mengetahui kebutuhan apa yang diperlukan untuk aplikasi.
b. Tahap Studi Literatur
Tahap Studi literatur dilakukan untuk mendalami pengetahuan terkait pembangunan aplikasi, dengan mencari paper, jurnal, dan bacaan yang berkaitan dengan kebutuhan aplikasi yang akan dibangun. Pengetahuan yang akan dicari lebih lanjut adalah SceneKit, ARKit, Implementing 3D objects, Technology Acceptance Model, Skala Likert.
c. Tahap Perancangan Sistem
Pada tahap ini dilakukan analisis untuk kebutuhan aplikasi, dan juga dibangunnya tampilan antarmuka untuk aplikasi ini.
d. Tahap Pembangunan Aplikasi
Pada tahap ini dilakukan pembangunan aplikasi yang telah dirancang di platform iOS dengan bahasa Swift. Dasar dari aplikasi ini menggunakan SceneKit
dan berbasis Augmented Reality App, yang pada nantinya akan dipecah menjadi beberapa View Controller untuk Scene yang membutuhkan 3D.
e. Tahap Testing dan Debugging
Pada tahap ini dilakukan testing terhadap aplikasi yang telah dibangun, apakah sudah sesuai dengan kebutuhan user atau belum, dan melakukan perbaikan atas error yang terjadi pada tahap debugging.
f. Tahap Evaluasi
Tahap ini dilakukan untuk mengetahui tingkat kesuksesan sistem yang telah dibangun dengan menyebarkan kuesioner Technology Acceptance Model (TAM).
g. Penulisan Laporan
Tahap ini dilakukan untuk membuat laporan atas hasil penelitian yang telah dilakukan.
3.2 Perancangan Model
Perancangan model dibagi menjadi Fungsionalitas aplikasi, Flowchart aplikasi, dan mockup aplikasi.
3.2.1 Fungsionalitas Aplikasi
Berikut adalah Fungsionalitas dari aplikasi yang dibangun :
a. User bisa memilih 3D Object yang bisa ditampilkan sesuai dengan alphabet yang user inginkan dari huruf A hingga Z.
b. User bisa memunculkan 3D object setelah memilih huruf yang diinginkan.
c. User bisa mengellingi 3D Object yang ditampilkan dengan bergerak di tempat dimunculkannya Object.
d. 3D Object binatang yang dimunculkan sesuai dengan huruf yang user pilih, misalkan user memilih huruf A, maka akan muncul 3D object binatang Anoa, B untuk Baboon, dan seterusnya.
e. User bisa memainkan suara dari binatang tersebut apabila binatang tersebut memiliki suara yang distinct di dunia asli, tidak semua 3D object memiliki suara yang bisa dimainkan.
f. User bisa memainkan pronounciation dari nama binatang tersebut dalam bahasa Indonesia dan dalam bahasa Inggris. Pronounciation dilakukan dengan menggunakan AVSpeechSynthesizer().
g. User bisa memainkan permainan Quiz untuk mengukur pemahaman anak dalam mengenali binatang.
h. User harus menjawab dengan benar pada setiap pertanyaan pada Quiz untuk bisa melanjutkan ke pertanyaan selanjutnya.
i. User harus menjawab 15 pertanyaan untuk menyelesaikan permainan Quiz.
3.2.2 Flowchart Aplikasi
Berikut adalah perancangan flowchart aplikasi.
A. Flowchart Laman Utama
Gambar 3.1 adalah flowchart halaman utama dari aplikasi. Di halaman utama aplikasi, user bisa memilih antara ingin langsung bermain dengan Augmented Reality atau bermain quiz. Quiz disini dimaksudkan untuk mengukur sejauh mana pemahaman anak dalam mempelajari binatang dengan Augmented Reality.
Gambar 3.1 Flowchart Laman Utama Aplikasi B. Flowchart Laman Play
Pada laman Play, user bisa memilih objek 3D apa yang ingin dikeluarkan sesuai dengan huruf alphabet. Setiap Alphabet merepresentasikan nama sebuah binatang dari huruf depannya. A untuk Anoa, B untuk Baboon, dan seterusnya. Di beberapa binatang terdapat suara binatang yang bisa dimainkan. Lalu terdapat juga info dari setiap binatang. Info Binatang terdiri dari pronounciation dari nama binatang tersebut, dalam bahasa Inggris dan bahasa Indonesia. Pronounciation
Gambar 3.2 Flowchart Laman Play
C. Flowchart Laman Quiz
Pada laman Quiz, user bisa memainkan permainan Quiz di mana user diharuskan menebak jawaban yang benar diantara dua jawaban. User harus menjawab 15 pertananyaan dengan benar, apabila jawaban salah, maka user tidak bisa melanjutkan ke soal selanjutnya. User bisa kembali ke menu apabila diinginkan. Apabila user sudah menjawab 15 soal dengan benar, maka Quiz selesai dan user bisa kembali ke menu.
Gambar 3.3 Flowchart Laman Quiz
3.2.3 Mockup Aplikasi
Berikut adalah mockup dari aplikasi yang dibangun.
A. Mockup Laman awal
Gambar 3.6 adalah mockup dari laman awal aplikasi dimana user harus klik tombol start untuk memulai aplikasi.
Gambar 3.4 Laman Awal.
B. Mockup Laman Utama
Pada laman utama, user harus memilih apakah user ingin memainkan Augmented Reality atau memainkan Quiz. Apabila user menekan tombol Play,
maka user akan dialihkan ke laman pemilihan huruf. Apabila tombol Quiz, maka user akan dialihkan ke laman permainan Quiz.
Gambar 3.5 Laman Utama.
C. Mockup Laman Play
Pada laman Play, user bisa memilih binatang apa yang ingin ditampilkan sesuai huruf. Setiap huruf mewakilkan nama suatu binatang, misal A untuk Anoa, B untuk Baboon, dan seterusnya.
Gambar 3.6 Laman Play.
D. Mockup Laman Object 3D
Pada lama Object 3D, user bisa melihat binatang secara 3D di dunia asli menggunakan kamera dengan Augmented Reality. User juga bisa melihat info dan mendengar suara binatang tersebut juga, apabila binatang tersebut memiliki aset suara.
Gambar 3.7 Laman Object 3D
E. Mockup Laman Info
Pada laman Info, user bisa mendengar pronounciation dari nama binatang tersebut, dalam bahasa Inggris dan bahasa Indonesia. User juga bisa membaca info binatang tersebut, seperti tipe makanan, habitat, dan sekilas info tambahan mengenai binatang tersebut.
Gambar 3.8 Laman Info
F. Mockup Laman Quiz
Pada Laman Quiz, user bisa bermain menebak gambar, dengan maksud untuk mengukur kemampuan sang anak/user dalam mengenali binatang yang telah dipelajari di Augmented Reality. User harus menjawab 15 pertanyaan agar bisa menyelesaikan Quiz. Apabila User salah, maka user tidak bisa lanjut ke pertanyaan selanjutnya. User juga bisa kembali ke laman utama apabila user menginginkannya.
3.3 Penggunaan Aset
Berikut adalah aset yang digunakan di dalam aplikasi.
Tabel 3.1 Daftar Aset
Objek Penjelasan Sumber
Gambar binatang Anoa yang digunakan untuk Quiz.
ragunanzoo.jakarta.go.id
Gambar binatang Anoa yang digunakan untuk Quiz.
www.pngfuel.com
Gambar binatang Cat yang digunakan untuk Quiz.
www.pngarts.com
Gambar binatang Dog yang digunakan untuk Quiz.
www.cleanpng.com
Gambar binatang Elephant yang digunakan untuk Quiz.
www.cleanpng.com
Tabel 3.1 Daftar Aset (Lanjutan) Gambar binatang Frog yang digunakan untuk Quiz.
toppng.com
Gambar binatang
Giraffe yang
digunakan untuk Quiz.
pngimg.com
Gambar binatang Hedgehog yang digunakan untuk Quiz.
pngimg.com
Gambar binatang Ibis yang digunakan untuk Quiz.
favpng.com
Gambar binatang
Jaguar yang
digunakan untuk Quiz.
pngimg.com
Gambar binatang Kangaroo yang digunakan untuk Quiz.
pngimg.com
Tabel 3.1 Daftar Aset (Lanjutan) Gambar binatang Lion yang digunakan untuk Quiz.
pngimg.com
Gambar binatang
Mouse yang
digunakan untuk Quiz.
imgbin.com
Gambar binatang
Octopus yang
digunakan untuk Quiz.
pngimg.com
Gambar binatang Pig yang digunakan untuk Quiz.
stickpng.com
Gambar binatang Quail yang digunakan untuk Quiz.
stickpng.com
Gambar binatang Nautilus yang digunakan untuk Quiz.
cleanpng.com
Tabel 3.1 Daftar Aset (Lanjutan) Gambar binatang Rabbit yang digunakan untuk Quiz.
pngimg.com
Gambar binatang Scorpion yang digunakan untuk Quiz.
pngimg.com
Gambar binatang Tiger yang digunakan untuk Quiz.
pngimg.com
Gambar binatang Urchin yang digunakan untuk Quiz.
dlpng.com
Gambar binatang
Vulture yang
digunakan untuk Quiz.
imgbin.com
Gambar binatang Woodpecker yang digunakan untuk Quiz.
pngimg.com
Gambar binatang Yellow-Head Squirrel yang digunakan untuk Quiz.
pngplay.com
Gambar binatang Zebra yang digunakan untuk Quiz.
pngimg.com
Tabel 3.1 Daftar Aset (Lanjutan) Icon Sound button untuk membunyikan pronounciation pada laman info.
pngtree.com
Icon Confirm button untuk konfirmasi bahwa user telah menyelesaikan Quiz.
pngtree.com
Icon Menu Button untuk kembali ke menu utama dari laman Quiz.
pngtree.com
Icon Info Button untuk kembali ke menu utama dari lama Quiz.
pngtree.com
Icon Next Button untuk berpindah ke laman Quiz selanjutnya.
pngtree.com
Icon Play Button untuk memulai aplikasi.
pngtree.com
Icon Play Button untuk memilih untuk
memulai permainan.
pngtree.com
Icon Quiz Button untuk memilih untuk memulai Quiz.
pngtree.com
Icon untuk
background. imgbin.com
Tabel 3.1 Daftar Aset (Lanjutan)
Icon untuk
background.
imgbin.com
Icon untuk
background. imgbin.com
Icon untuk
background.
imgbin.com
Icon untuk
background.
imgbin.com
Icon untuk
background.
imgbin.com
Background utama dari
Aplikasi. Aset Pribadi
Icon Aplikasi. Aset Pribadi
backgroundSong.mp3 Lagu yang digunakan adamvitovsky.com
Tabel 3.1 Daftar Aset (Lanjutan) click.mp3 Suara ketika user klik di
layar manapun. zapsplat.net Correct.mp3 Suara ketika menjawab
dengan benar di Quiz. audiograb.com dog.mp3 Suara anjing yang akan
diputar di objek Dog. zapsplat.net Elephant.mp3 Suara gajah yang akan
diputar di objek Elephant.
www.freesoundeffects.com
Frog.mp3 Suara kodok yang akan
diputar di objek Frog. soundbible.com Jaguar.mp3 Suara Jaguar yang akan
diputar di objek Jaguar.
www.freesoundeffects.com Lion.mp3 Suara Singa yang akan
diputar di objek Lion.
www.freesfx.co.uk Mouse.mp3 Suara Tikus yang akan
diputar di objek Mouse.
averagehunter.com Pig.mp3 Suara Babi yang akan
diputar di objek Pig. www.freesoundeffects.com Tiger.mp3 Suara Macan yang akan
diputar di objek Macan. www.freesoundeffects.com Woodpecker.mp3 Suara Burung Pelatuk
yang akan diputar di objek Woodpecker.
www.freesfx.co.uk
Zebra.mp3 Suara kuda Zebra yang akan diputar di objek zebra.
www.freesoundeffects.com
Objek 3D Anoa. poly.google.com
Objek 3D Baboon. poly.google.com
Tabel 3.1 Daftar Aset (Lanjutan)
Objek 3D Cat. poly.google.com
Objek 3D Dog. poly.google.com
Objek 3D Elephant. poly.google.com
Objek 3D Frog. poly.google.com
Objek 3D Giraffe. poly.google.com
Objek 3D Hedgehog.. poly.google.com
Tabel 3.1 Daftar Aset (Lanjutan)
Objek 3D Ibis. poly.google.com
Objek 3D Nautilus. poly.google.com
Objek 3D Octopus. poly.google.com
Objek 3D Pig. poly.google.com
Objek 3D Quail. poly.google.com
Objek 3D Rabbit. poly.google.com
Tabel 3.1 Daftar Aset (Lanjutan)
Objek 3D Scorpion. poly.google.com
Objek 3D Tiger. poly.google.com
Objek 3D Urchin. poly.google.com
Objek 3D Vulture. poly.google.com
Objek 3D Woodpecker. poly.google.com
Objek 3D Yellow-Head Squirrel.
poly.google.com
Tabel 3.1 Daftar Aset (Lanjutan)
Objek 3D Zebra. poly.google.com
WhaleITried.ttf Font untuk laman utama, laman quiz, dan laman info
fontspace.com
CHERL___.ttf Font untuk laman info 1001fonts.com
