BAB III METODOLOGI DAN PERANCANGAN APLIKASI

(1)

15

BAB III

METODOLOGI DAN PERANCANGAN APLIKASI

3.1 Metodologi Penelitian

Metodologi penelitian yang digunakan dalam melaksanakan penelitian ini adalah sebagai berikut :

1. Telaah Literatur

Tahap Telaah Literatur berguna untuk mendukung topik yang dibawa pada penelitian. Pada tahap ini dijabarkan teori – teori yang akan mendukung topik penelitian diantaranya adalah metode gamifikasi, Octalysis

framework, HMSAM, dan skala Likert.

2. Analisa Kebutuhan

Tahap Analisa kebutuhan berguna untuk menentukan hal-hal yang dibutuhkan dalam penelitian berdasarkan telaah literatur yang digunakan, dan melakukan analisis pada materi pembelajaran bahasa mandarin.

3. Perancangan Aplikasi

Tahap perancangan aplikasi berguna untuk merancang gamifikasi, model aplikasi, flowchart, mockup, dan aset – aset yang dibutuhkan.

(2)

16 4. Implementasi Aplikasi

Tahap implementasi aplikasi menggunakan Integrated Development

Environment (IDE) Android Studio dengan menggunakan bahasa

pemrograman JAVA dan menggunakan firebase untuk database. 5. Pengujian Aplikasi

Tahap pengujian aplikasi berguna untuk melakukan uji coba aplikasi yang sudah selesai dibuat. Setelah melakukan pengujian pengguna akan diminta untuk mengisi kuesioner yang telah disediakan pada google form.

6. Evaluasi Hasil Pengujian Aplikasi

Tahap evaluasi hasil pengujian aplikasi berguna untuk mengolah data yang didapat dari hasil pengujian aplikasi. Kemudian akan dilakukan evaluasi dengan menggunakan skala likert untuk mengukur tingkat keberhasilan aplikasi.

7. Penyusunan Laporan

Tahap penyusunan laporan berguna untuk mendokumentasikan hasil penelitian yang telah dilakukan, secara terstruktur dengan kaidah penulisan laporan penelitian.

(3)

17

3.2 Rancang Aplikasi

Perancangan aplikasi dilakukan dengan merancang dan membuat gamifikasi dengan metode Octalysis, model aplikasi, flowchart, mockup, dan asset yang akan digunakan dalam pembuatan aplikasi.

3.2.1 Perancangan Gamifikasi

Perancangan gamifikasi pada aplikasi menerapkan 8 core drive yang terdapat pada framework Octalysis.

1. Epic Meaning & Calling

Nilai ini diterapkan dengan menggunakan elemen narrative dan beginners

luck, untuk narrative diterapkan dengan penggunaan narasi pada onboarding activity saat pengguna baru membuat akun, yang menceritakan

bahwa pengguna merupakan orang terpilih yang akan menjadi ahli dalam bahasa mandarin. Untuk elemen beginner luck diterapkan dengan memberikan pengguna baru sebuah hadiah spesial berupa sebuah avatar panda mahal pada awal permainan.

2. Development & Accomplishment

Nilai ini diterapkan dengan menggunakan elemen status points, badges,

leaderboard, dan progress bar. Untuk status points diterapkan dengan

sistem score pada aplikasi, dimana score didapatkan setelah menyelesaikan soal dari setiap stage. Jika pengguna berhasil mendapatkan score yang banyak maka pengguna akan berkesempatan untuk ditampilkan pada halaman leaderboard. Lalu untuk badges diterapkan pada pemberian

(4)

18

leaderboard diterapkan dengan menampilkan 10 orang pengguna yang

memiliki score tertinggi dibandingkan dengan pengguna lainnya. Pengguna yang berhasil menempati posisi satu sampai tiga akan diberikan avatar

border yang tidak dimiliki pengguna lainnya. Dan untuk progress bar

diterapkan pada sistem exp yang akan mengindikasikan sudah berapa banyak exp yang dikumpulkan pengguna untuk dapat mencapai level berikutnya.

3. Empowerment of Creativity & Feedback

Nilai ini diterapkan dengan menggunakan elemen milestone unlocks, instant

feedback, dan plant pickers. Untuk milestone unlocks diterapkan dengan

sistem locked pada stage yang hanya terbuka jika pengguna berhasil menjawab semua soal pada stage sebelumnya dengan benar yang akan disimbolkan dengan pemberian sebuah kunci pada dialog game result. Lalu untuk instant feedback diterapkan dengan memberikan feedback langsung kepada pengguna saat memberikan jawaban, dimana jawaban akan berubah menjadi hijau jika benar dan merah jika salah. Tidak hanya itu akan diberikan juga hasil hadiah yang didapat pengguna setelah selesai menyelesaikan stage. Dan untuk plant pickers diterapkan dengan pemberian hadiah score, exp, dan coin yang berbeda-beda pada setiap stage. Hal ini akan membuat pengguna menentukan sendiri untuk mengumpulkan score,

(5)

19 4. Ownership & Possession

Nilai ini diterapkan dengan menggunakan elemen exchangeable points dan avatar. Untuk exchangeable points diterapkan pada fitur coin yang didapatkan dari hadiah menyelesaikan stage dan achievement. Coin memiliki kegunaan untuk membeli avatar pada shop. Dan untuk avatar diterapkan dengan menyediakan 15 buah avatar yang berbeda-beda pada

shop, yang dapat dibeli dan digunakan oleh pengguna.

5. Social Influence & Relatedness

Nilai ini diterapkan dengan menggunakan elemen tout flag, hal ini diterapkan pada sistem leaderboard, dimana pengguna dapat melihat nama,

score, level, dan avatar pengguna lain, selain itu untuk posisi satu sampai

tiga akan mendapatkan avatar border yang berbeda dari pengguna lainnya. Hal ini akan menunjukan prestasi yang telah didapat pengguna tanpa harus memberitahukannya langsung kepada pengguna lain.

6. Scarcity & Impatience

Nilai ini diterapkan dengan menggunakan elemen last mile drive,

countdown timer, moats, dan big burn. Untuk last mile drive diterapkan

dengan progress bar pada exp sehingga pengguna dapat mengetahui sudah berapa banyak exp yang dikumpulkan untuk dapat naik ke level berikutnya. Lalu untuk countdown timer diterapkan dengan pemberian batas waktu permainan pada setiap stage, dan waktu yang diberikan untuk setiap stage akan berbeda-beda. Selanjutnya untuk moats diterapkan dengan cara pengguna harus menjawab seluruh pertanyaan pada stage sebelumnya

(6)

20 dengan benar untuk membuka stage selanjutnya. Dan untuk big burn diterapkan dengan pemberian harga pada avatar beruang kutub yang sangat mahal dan sebuah achievement dimana pengguna harus mencapai level hampir maksimal untuk membukanya dimana untuk mencapai level tersebut membutuhkan exp yang sangat banyak.

7. Unpredictability & Curiosity

Nilai ini diterapkan dengan menggunakan elemen random reward, hal ini diterapkan dengan pemberian hadiah pada achievement yang tidak diperlihatkan sebelum pengguna berhasil membuka achievement tersebut. 8. Loss & Avoidance

Nilai ini diterapkan dengan menggunakan elemen progress loss, hal ini diterapkan dengan fitur top 3 pada leaderboard dimana akan mendapatkan

avatar border khusus yang membuatnya berbeda dengan pemain lainnya.

Hal ini dapat memicu pengguna untuk terus mendapatkan score tertinggi untuk mempertahankan avatar border tersebut.

(7)

21

3.2.2 Rancang Model Aplikasi

Model aplikasi yang digunakan dalam pembuatan aplikasi adalah sebagai berikut.

Gambar 3.1 Model Aplikasi Pembelajaran Bahasa Mandarin

Model aplikasi yang digunakan digambarkan pada Gambar 3.1 dimana, pengguna terlebih dahulu melakukan input akun google-nya kemudian jika berhasil maka google akan mengirimkan sebuah token, yang akan digunakan untuk melakukan login ke firebase, setelah token berhasil diterima oleh firebase maka firebase akan memberikan token agar dapat mengakses data yang ada pada firebase.

(8)

22

3.2.3 Flowchart

Gambar 3.2 Flowchart Utama Aplikasi

Gambar 3.2 Merupakan flowchart utama pada aplikasi, saat pengguna baru pertama kali membuka aplikasi, pengguna akan diarahkan ke authentication yang kemudian dilanjutkan ke main activity. Di main pengguna dapat memilih menu

profile & achievement, shop, home, leaderboard, dictionary, dan setting. Pada

menu home pengguna dapat menuju stage activity untuk memilih permainan. Pada

stage activity pengguna dapat memilih stage yang ingin dimainkan, setelah dipilih

(9)

23 Gambar 3.3 Flowchart Authentication

Pada gambar 3.3 merupakan flowchart authentication, pada tahap awal pengguna akan melakukan input berupa google account, setelah melakukan input maka akan melakukan login ke google yang kemudian google akan memberikan output berupa google token, setelah mendapatkan google token maka akan melakukan login ke firebase menggunakan google token tersebut dan firebase akan memberikan firebase token yang berfungsi agar pengguna dapat mengakses data pada database. Setelah itu akan dilakukan pengecekan apakah pengguna baru atau tidak, jika pengguna baru maka akan membuat membuat document berupa data-data pengguna yang akan disimpan ke firebase. Kemudian akan diarahkan menuju

onboarding activity, Jika sudah selesai maka akan langsung diarahkan ke main activity. Dan jika pengguna sudah terdaftar sebelumnya maka pengguna akan

(10)

24 Gambar 3.4 Flowchart Main Menu

Pada gambar 3.4 merupakan flowchart dari main, aplikasi akan melakukan

fetching data dari firebase terlebih dahulu, dan kemudian akan menampilkan fragment, exp, level, dan coin pengguna. Dan akan menampilkan sebuah button

untuk membuka menu setting jika pengguna menekannya.

Gambar 3.5 Flowchart Home

Pada gambar 3.5 merupakan flowchart home, yang pertama kali dilakukan adalah melakukan fetching data dari firebase, kemudian akan menampilkan nama, avatar, dan score pengguna. Dan disediakan sebuah button yang bertuliskan start, yang berfungsi jika pemain menakan tombol tersebut maka, akan diarahkan ke

(11)

25 Gambar 3.6 Flowchart Stage

Pada gambar 3.6 merupakan flowchart stage, langkah pertama adalah melakukan fetch data dari firebase kemudian melakukan pengecekan pada setiap

stage apakah berstatus locked atau tidak. Jika status locked benar, maka gambar button akan berubah menjadi locked dan tidak dapat ditekan. Dan jika status tidak locked, maka gambar button akan berubah menjadi unlocked dan dapat dipilih untuk

menuju game activity. Terdapat juga sebuah button back yang berfungsi untuk kembali ke home activity.

(12)

26 Gambar 3.7 Flowchart Game

Pada gambar 3.7 merupakan flowchart game, awal mula aplikasi akan melakukan initialize data berupa question dan answer, Setelah itu countdown akan dimulai. Kemudian question akan di random dan answer akan di shuffle, dan pengguna dapat memilih jawabannya. Jika jawaban salah maka button yang dipilih akan berubah menjadi warna merah dan jawaban yang benar akan ditampilkan dengan warna hijau. Jika jawaban benar maka button yang dipilih akan berubah menjadi warna hijau dan akan menambahkan nilai score, exp, dan coin pada

variable penampung. Setelah itu akan dilakukan pengecekan apakah QuizCount

yang sudah dikerjakan sudah sama dengan total quiz atau apakah countdown sudah selesai. Jika tidak maka QuizCount akan ditambah satu dan akan menampilkan quiz selanjutnya. Jika benar maka countdown akan dihentikan, kemudian akan muncul dialog game result. Setelah itu score, exp, dan coin yang didapat akan di update ke

(13)

27 firebase. Setelah itu akan dilakukan pengecekan apakah semua jawaban benar, jika benar semua maka status pada stage selanjutnya akan di update menjadi unlocked dan achievement pada stage tersebut akan di update menjadi unlocked.

Gambar 3.8 Flowchart Shop

Pada gambar 3.8 merupakan flowchart shop, pertama aplikasi akan melakukan fetch data dari firebase kemudian akan dilakukan pengecekan pada setiap avatar, apakah sudah dimiliki atau belum. Jika sudah makan akan merubah

button pada avatar menjadi owned. Jika tidak maka akan menampilkan button

(14)

28 avatar digunakan atau tidak, jika benar maka button pada avatar akan menjadi used dan jika tidak maka akan menjadi owned.

Jika button dengan harga avatar ditekan, maka akan menampilkan dialog

confirmation pembelian. Dan jika setuju membeli dan coin mencukupi untuk

melakukan pembelian maka avatar yang dipilih akan di update menjadi owned di firebase dan button pada avatar akan diganti menjadi owned. Saat button owned ditekan maka akan menampilkan dialog avatar use confirmation, dimana saat setuju untuk menggunakan avatar maka status avatar pada firebase akan diperbarui menjadi used dan memperbarui link gambar avatar yang telah dipilih pada firebase.

Gambar 3.9 Flowchart Leaderboard

Pada gambar 3.9 merupakan flowchart leaderboard, awal mula aplikasi akan melakukan fetch data dari firebase dan melakukan query sort pada score secara

descending dan memberikan limit sebanyak 10. Setelah itu akan dilakukan

pengecekan untuk urutan satu, dua, dan tiga. Jika berada di posisi satu maka akan menampilkan avatar border gold, jika di posisi kedua maka akan menampilkan

(15)

29

avatar border silver, jika di posisi ketiga maka akan menampilkan avatar border bronze, dan jika tidak berada pada posisi satu, dua, dan tiga maka avatar border

tidak ditampilkan. Setelah itu data pengguna akan dimasukan dan kemudian list dari 10 pengguna teratas tersebut ditampilkan dengan recyclerview.

Gambar 3.10 Flowchart Profile & Achievement

Pada gambar 3.10 merupakan flowchart profile & achievement, pertama akan melakukan fetch data dari firebase dan akan menampilkan nama, email, dan

photo profile. Jika icon edit name ditekan maka akan menampilkan dialog untuk

mengubah nama, lalu pengguna dapat memasukan nama baru yang diinginkan. Jika setuju akan perubahan tersebut maka nama pada firebase akan diubah dengan nama baru tersebut, dan jika tidak maka dialog akan ditutup dan tidak akan melakukan perubahan apapun.

(16)

30 Selain itu akan dilakukan pengecekan pada achievement apakah locked atau tidak, jika benar maka gambar achievement akan diberikan color filter serta menampilkan description cara mendapatkan achievement tersebut. jika tidak maka

color filter akan dihapus dan akan menampilkan prize dari achievement tersebut.

Dan jika prize tersebut ditekan maka achievement akan diubah menjadi claimed dan akan melakukan update pada achievement di firebase menjadi claimed.

Gambar 3.11 Flowchart Dictionary

Pada gambar 3.11 merupakan flowchart dictionary, langkah awal aplikasi akan melakukan initialize data, kemudian akan dimasukan sesuai category kedalam

recyclerview dan kemudian recyclerview akan dibuat dan ditampilkan. Jika category ditekan maka recyclerview akan melakukan expanding pada category

tersebut dan menampilkan item yang terdapat pada category tersebut. Di dalam item tersebut terdapat kosakata dan percakapan dalam bahasa inggris dan mandarin, serta terdapat audio dalam bahasa mandarin. Jika icon audio di dalam item tersebut

(17)

31 ditekan maka audio akan dimainkan. Dan jika sidebar atau category di tekan kembali maka recyclerview akan kembali seperti semula.

Gambar 3.12 Flowchart Setting

Pada gambar 3.12 merupakan flowchart setting, pertama akan mengambil status music dari sharedpreferences dan akan melakukan pengecekan, apakah status on/off. Jika status on maka akan menjalankan music service dan jika status

off maka akan menghentikan music service. Jika button music ditekan maka akan

melakukan switch pada status music di sharedpreferences.

Selain itu terdapat button untuk melakukan logout jika ditekan, maka music

service akan dihentikan kemudian akan melakukan logout dari firebase dan google,

setelah itu akan diarahkan ke activity login. Terdapat juga button close untuk menutup dialog setting.

(18)

32

3.2.4 Perancangan Mockup

Perancangan mockup dirancang untuk menggambarkan tampilan antarmuka yang akan dibangun pada aplikasi.

A. Authentication

Gambar 3.13 Mockup Authentication

Pada gambar 3.13 merupakan tampilan mockup pada authentication dimana pada activity ini akan ditampilkan sebuah logo aplikasi, nama aplikasi, dan sebuah button untuk melakukan login dengan google.

(19)

33

B. Onboarding

Gambar 3.14 Mockup Onboarding

Pada gambar 3.14 merupakan tampilan mockup dari onboarding, disini akan ditampilkan sebuah gambar, judul, dan sub judul yang berbeda-beda pada setiap slidenya. Gambar tersebut berupa sebuah cartoon illustration.

(20)

34

C. Main Menu

Gambar 3.15 Mockup Main Menu

Pada gambar 3.15 merupakan tampilan mockup dari main menu, pada bagian bawah terdapat sebuah navigation bar yang terdiri dari 5 buah menu yaitu

home, profile, shop, leaderboard, dan dictionary. Pada bagian atas akan

menampilkan level, exp, coin, dan button setting. Activity main ini akan selalu muncul di setiap 5 menu tersebut.

(21)

35

D. Home

Gambar 3.16 Mockup Home

Pada gambar 3.16 merupakan tampilan mockup dari home, disini nama, avatar, dan score pengguna akan ditampilkan, selain itu juga terdapat sebuah button

(22)

36

E. Shop

Gambar 3.17 Mockup Shop

Pada gambar 3.17 merupakan tampilan mockup dari shop, disini akan ditampilkan sebuah card yang berisi tulisan shop dan 15 avatar yang dapat dibeli dan digunakan oleh pengguna. Pada setiap avatar terdapat 3 buah tampilan button yang akan tampil sesuai dengan status avatar tersebut, 3 buah tampilan button tersebut adalah button dengan harga avatar, button owned, dan button used,

(23)

37

F. Leaderboard

Gambar 3.18 Mockup Leaderboard

Pada gambar 3.18 merupakan tampilan mockup dari leaderboard, disini akan ditampilkan 10 pemain berupa list, dimana akan menampilkan avatar, level,

name, score, dan avatar border. untuk avatar border hanya akan ditampilkan untuk

(24)

38

G. Profile & Achievement

Gambar 3.19 Mockup Profile & Achievement

Pada gambar 3.19 merupakan tampilan mockup dari profile dan

achievement, pada bagian profile akan ditampilkan photo profile, username, dan email pengguna. Pada bagian achievement akan ditampilkan gambar yang

berbeda-beda untuk setiap achievement, selain itu akan ditampilkan description, reward, dan

(25)

39

H. Dictionary

Gambar 3.20 Mockup Dictionary

Pada gambar 3.20 merupakan tampilan mockup dari dictionary, disini akan ditampilkan sebuah list yang berisik beberapa category, dan jika category ditekan akan membuka item-item yang ada didalamnya. Di dalam item tersebut akan menampilkan sebuah kosakata dalam bahasa inggris dan mandarin beserta audionya.

(26)

40

I. Stage

Gambar 3.21 Mockup Stage

Pada gambar 3.21 merupakan tampilan mockup dari stage, disini akan ditampilkan 6 buah button stage dan 1 button untuk untuk kembali ke home. Jika

status stage masih terkunci maka akan menampilkan button dengan gambar

(27)

41

J. Game

Gambar 3.22 Mockup Quiz Game

Pada gambar 3.22 merupakan tampilan mockup dari quiz game, pada bagian atas akan ditampilkan sebuah progress bar untuk mengindikasikan jumlah soal yang tersisa. Dibawahnya terdapat exp dan coin yang sudah diperoleh selama permainan, dan terdapat tombol pause untuk kembali ke stage activity atau melakukan restart game. Selanjutnya adalah sebuah countdown yang akan terus berjalan selama permainan berlangsung. Dibawah timer akan ditampilkan sebuah

(28)

42 Gambar 3.23 Mockup Quiz Game with Sound

Pada gambar 3.23 merupakan tampilan mockup dari quiz game with sound, disini memiliki tampilan yang hampir sama dengan gambar 3.22, yang membedakan adalah pada bagian question diganti dengan sebuah button yang akan mengeluarkan audio berupa pertanyaan dalam bahasa mandarin saat button ditekan.

(29)

43 Gambar 3.24 Mockup Game Susun Kata

Pada gambar 3.24 merupakan tampilan mockup dari game susun kata, disini yang membedakan dengan game sebelumnya adalah pada jenis permainannya. Dimana pengguna akan disediakan pilihan kata-kata yang harus disusun menjadi sebuah kalimat yang benar pada kotak jawaban.

(30)

44

K. Setting

Gambar 3.25 Mockup Setting

Pada gambar 3.25 merupakan tampilan mockup dari setting, disini akan ditampilkan button music, logout, close, dan music status. Semua itu akan ditampilkan melalui sebuah dialog.

3.2.5 Perancangan Aset

Dalam pembuatan aplikasi, menggunakan sejumlah aset untuk mempercantik tampilan pada aplikasi. Daftar aset tersebut dapat dilihat pada tabel berikut.

(31)

45 Tabel 3.1 Daftar Aset Aplikasi

Gambar Penjelasan Sumber Gambar

Logo Aplikasi www.vecteezy.com

Ilustrasi pada Onboarding www.vecteezy.com Ilustrasi pada Onboarding www.vecteezy.com

Tabel 3.2 Daftar Aset Avatar

Avatar Panda www.vecteezy.com

(32)

46 Tabel 3.2 Daftar Aset Avatar (Lanjutan)

Avatar Gajah www.vecteezy.com

Avatar Macan www.vecteezy.com

Avatar Singa www.vecteezy.com

Avatar Lebah www.vecteezy.com

Avatar Musang www.vecteezy.com

Avatar Badak www.vecteezy.com

Avatar Monyet www.vecteezy.com

Avatar Rubah www.vecteezy.com

Avatar Anjing www.vecteezy.com

Avatar Banteng www.vecteezy.com

Avatar Kelinci www.vecteezy.com

(33)

47 Tabel 3.2 Daftar Aset Avatar (Lanjutan)

Avatar Beruang Kutub www.vecteezy.com

Tabel 3.3 Daftar Aset Icon

Icon untuk exp dan level www.vecteezy.com

Icon untuk coin www.vecteezy.com

Icon untuk achievement

Pembelian avatar www.freepik.com Icon untuk achievement

Pembelian avatar

www.freepik.com

Icon untuk achievement Pembelian avatar

www.freepik.com

Icon untuk achievement Mencapai level 10

www.freepik.com

(34)

48 Tabel 3.3 Daftar Aset Icon (Lanjutan)

www.freepik.com

Unlock Stage 2 www.freepik.com

Unlock Stage 3

www.freepik.com

Unlock Stage 4

www.freepik.com

Unlock Stage 5 www.freepik.com

Icon avatar border untuk

leaderboard peringkat 1

www.vecteezy.com

(35)

49 Tabel 3.4 Daftar Aset Button

Button untuk menuju

stage activity www.freepik.com

Button untuk membuka setting

www.freepik.com

Button untuk menutup

dialog

www.freepik.com

Button untuk kembali ke

home activity www.freepik.com

Button untuk menyetujui

pembelian dan penggunaan avatar

www.freepik.com

Button untuk

membatalkan pembelian dan penggunaan avatar

www.freepik.com Button untuk menyatakan background music menyala www.freepik.com Button untuk menyatakan background music mati www.freepik.com

(36)

50 Tabel 3.4 Daftar Aset Button (Lanjutan)

Button untuk melakukan

logout www.freepik.com

Button stage untuk

menuju ke permainan www.freepik.com Button untuk menunjukan bahwa stage terkunci www.freepik.com

Button untuk melakukan

pause pada game www.freepik.com

Button untuk kembali ke

memilih stage

www.freepik.com

Button untuk