RANCANG BANGUN APLIKASI PEMBELAJARAN REACTJS MENGGUNAKAN METODE GAMIFIKASI BERBASIS ANDROID SKRIPSI

(1)

RANCANG BANGUN APLIKASI PEMBELAJARAN REACTJS

MENGGUNAKAN METODE GAMIFIKASI BERBASIS

ANDROID

SKRIPSI

Diajukan sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer (S.Kom.)

Tony Immanuel Richard Clint 00000013159

PROGRAM STUDI INFORMATIKA FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG 2021

(2)

Digitally signed by Alexander Waworuntu Location: Tangerang Date: 2021.01.25 09: 51:28+07'00'

(3)

iii

PERNYATAAN TIDAK MELAKUKAN PLAGIAT

Dengan ini saya:

Nama : Tony Immanuel Richard Clint NIM : 00000013159

Program Studi : Informatika

Fakultas : Teknik dan Informatika

menyatakan bahwa Skripsi yang berjudul “RANCANG BANGUN APLIKASI PEMBELAJARAN REACTJS MENGGUNAKAN METODE GAMIFIKASI BERBASIS ANDROID” ini adalah karya ilmiah saya sendiri, bukan plagiat dari karya ilmiah yang ditulis oleh orang lain atau lembaga lain, dan semua karya ilmiah orang lain atau lembaga lain yang dirujuk dalam Skripsi ini telah disebutkan sumber kutipannya serta dicantumkan di Daftar Pustaka.

Jika di kemudian hari terbukti ditemukan kecurangan/ penyimpangan, baik dalam pelaksanaan Skripsi maupun dalam penulisan laporan Skripsi, saya bersedia menerima konsekuensi dinyatakan TIDAK LULUS untuk mata kuliah Skripsi yang telah saya tempuh.

Tangerang, 4 Januari 2021

(4)

iv

PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Sebagai sivitas akademik Universitas Multimedia Nusantara, saya yang bertanda tangan di bawah ini:

Nama : Tony Immanuel Richard Clint NIM : 00000013159

Program Studi : Informatika

Fakultas : Teknik dan Informatika Jenis Karya : Skripsi

Demi pengembangan ilmu pengetahuan, menyetujui dan memberikan izin kepada Universitas Multimedia Nusantara hak Bebas Royalti Non-eksklusif

(Non-exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul:

RANCANG BANGUN APLIKASI PEMBELAJARAN REACTJS MENGGUNAKAN METODE GAMIFIKASI BERBASIS ANDROID

beserta perangkat yang diperlukan.

Dengan Hak Bebas Royalti Non-eksklusif ini, pihak Universitas Multimedia Nusantara berhak menyimpan, mengalihmedia atau format-kan, mengelola dalam bentuk pangkalan data (database), merawat, dan mendistribusi dan menampilkan atau mempublikasikan karya ilmiah saya di internet atau media lain untuk kepentingan akademis, tanpa perlu meminta izin dari saya maupun memberikan royalti kepada saya, selama tetap mencantumkan nama saya sebagai penulis karya ilmiah tersebut.

(5)

v

Demikian pernyataan ini saya buat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.

(6)

vi

HALAMAN PERSEMBAHAN/ MOTO

Karya ini kupersembahkan bagi Orang Tuaku terkasih

We don’t make mistakes. We have happy accidents. ~~Bob Ross~~

(7)

vii

KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa karena dengan berkat-Nya, Laporan Skripsi yang berjudul “RANCANG BANGUN APLIKASI PEMBELAJARAN REACTJS MENGGUNAKAN METODE GAMIFIKASI BERBASIS ANDROID” dapat berhasil disusun dan selesai dengan baik:

Penulis juga mengucapkan terima kasih kepada:

1. Dr. Ninok Leksono, Rektor Universitas Multimedia Nusantara, yang memberi inspirasi bagi penulis untuk berprestasi.

2. Dr. Eng. Niki Prastomo, S.T., M.Sc., Dekan Fakultas Teknik dan Informatika Universitas Multimedia Nusantara.

3. Marlinda Vasty O., S.Kom., M.Kom., selaku Ketua Program Studi Informatika Universitas Multimedia Nusantara yang menerima penulis dengan baik untuk berkonsultasi.

4. Wirawan Istiono, S.Kom., M.Kom., sebagai Pembimbing Skripsi I yang membimbing pembuatan Skripsi dan yang telah mengajar penulis tata cara menulis karya ilmiah dengan benar.

5. Alexander Waworuntu, S.Kom., M.T.I., sebagai Pembimbing Skripsi I yang membimbing pembuatan Skripsi dan yang telah mengajar penulis tata cara menulis karya ilmiah dengan benar.

6. Dra. Ida Royani, selaku orang tua penulis yang terus memberikan doa dan dukungan selama karya ilmiah dilakukan.

7. Febe Febrita dan Wicky yang selalu menghibur, memberikan semangat, dan membantu penulis dalam proses pengerjaan karya ilmiah.

(8)

viii

8. Alexander Christian, Febry Fernado, Jorgy Yanala Karim, Caecilia Claudia Levana, dan Culia Hardjono, yang telah memberikan hiburan, canda, dan tawa sebelum dan selama proses karya ilmiah dilakukan.

9. Seluruh keluarga dan teman-teman yang tidak dapat disebutkan satu-persatu.

Mohon maaf apabila terjadi kesalahan dalam penulisan dalam laporan ini. Semoga Laporan Skripsi ini dapat bermanfaat, baik sebagai sumber informasi maupun sumber inspirasi bagi para pembaca dan sebagai bahan untuk penelitian dalam pengembangan aplikasi selanjutnya.

(9)

ix

RANCANG BANGUN APLIKASI PEMBELAJARAN REACTJS

MENGGUNAKAN METODE GAMIFIKASI BERBASIS

ANDROID

ABSTRAK

Aplikasi pembelajaran merupakan sebuah program yang dirancang untuk belajar dengan berinteraksi secara langsung antara pelajar dengan aplikasi. Topik yang akan dipelajari adalah framework ReactJS. Untuk memudahkan akses pembelajaran, karya ilmiah ini akan merancang dan membangun sebuah aplikasi dalam basis Android. Agar pembelajaran dapat lebih menyenangkan lagi, aplikasi pembelajaran dapat diterapkan sebuah metode gamifikasi. Metode gamifikasi memberikan konsep gim pada aplikasi pembelajaran yang membuat proses belajar seperti sedang bermain. Metode framework gamifikasi Marczewski menerapkan 8

questions to ask yourself saat menggunakan metode gamifikasi, dan 7 things to remember tentang gamifikasi. Aplikasi akan memberikan informasi-informasi

tentang basic ReactJS dan pengguna akan mengisi fill-in-the-blanks dengan informasi yang pengguna dapatkan. Pengujian dilakukan dengan perhitungan melalui jumlah responden terhadap setiap pertanyaan yang akan diberikan melalui kuesioner. Model kuesioner menggunakan Hedonic-Motivation System Adoption

Model (HMSAM). Hasil perhitungan menyatakan bahwa tingkat Control atau

kemudahan penggunaan dalam mengendalikan aplikasi dengan nilai persentase 90,23% sangat setuju aplikasi Re-Learning memudahkan pengguna dalam mengoperasikan aplikasi dan memudahkan pengguna dalam belajar ReactJS. Terdapat juga hasil perhitungan pada tingkat Immersion yang menyatakan 75,23% setuju pengguna dapat fokus ketika sedang menggunakan Re-Learning.

Kata Kunci: aplikasi pembelajaran, gamifikasi, HMSAM, kendali, metode

(10)

x

DEVELOPMENT OF REACTJS LEARNING APPLICATION

USING ANDROID-BASED WITH GAMIFICATION METHOD

ABSTRACT

The learning application is a program designed to learn by interacting directly between students and applications. The topic that will be studied is the ReactJS framework. To facilitate access to learning, this scientific paper will design and build an application on an Android basis. In order for learning to be even more enjoyable, learning applications can be applied a gamification method. The gamification method provides a game concept in a learning application that makes the learning process like playing. Marczewski's gamification framework method applies 8 questions to ask yourself when using the gamification method, and 7 things to remember about gamification. The application will provide basic ReactJS information and the user will fill in the fill-in-the-blanks with the information the user gets. Testing is done by calculating the number of respondents to each question that will be given through a questionnaire. The questionnaire model uses the Hedonic-Motivation System Adoption Model (HMSAM). The results of the calculation state that the level of control or ease of use with a percentage value of 90.23% strongly agrees that the Re-Learning application makes it easier for users to operate the application and makes it easier for users to learn ReactJS. There is also a calculation result at the Immersion level which states 75.23% agree that users can focus while using Re-Learning.

Keywords: control, gamification, learning application, Marczewski's gamification framework method, ReactJS.

(11)

xi

DAFTAR ISI

LEMBAR PENGESAHAN ... ii

PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... iii

PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ... iv

HALAMAN PERSEMBAHAN/ MOTO ... vi

KATA PENGANTAR ... vii

ABSTRAK ... ix

ABSTRACT ... x

DAFTAR ISI ... xi

DAFTAR GAMBAR ... xiii

DAFTAR TABEL ... xiv

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Rumusan Masalah ... 2

1.3 Batasan Masalah ... 3

1.4 Tujuan Penelitian ... 3

1.5 Manfaat Penelitian ... 4

1.6 Sistematika Penulisan ... 4

BAB II LANDASAN TEORI ... 6

2.1 ReactJS ... 6

2.2 Gamifikasi ... 6

2.3 Metode Framework Gamifikasi Marczewski ... 7

2.4 Hedonic-Motivation System Adoption Modal (HMSAM) ... 10

2.5 Skala Likert ... 11

BAB III METODOLOGI PENELITIAN... 13

3.1 Metodologi Penelitian ... 13 3.2 Perancangan Aplikasi ... 16 3.2.1 Perancangan Gamifikasi ... 16 3.2.2 Flowchart ... 18 3.2.3 Perancangan Mockup ... 26 A. Home Screen ... 27 B. Section Selection ... 28 C. Information Modal ... 29 3.2.4 Perancangan Aset ... 31

BAB IV HASIL DAN DISKUSI ... 33

4.1 Hasil Penelitian yang Dicapai ... 33

4.2 Implementasi Aplikasi ... 33 4.2.1 Home Screen ... 34 4.2.2 Section Selection ... 36 4.2.3 Answering Section ... 37 4.2.4 TicTacToe ... 38 4.2.5 Certificate Screen ... 39 4.3 Pengujian Aplikasi ... 39

(12)

xii

BAB V SIMPULAN DAN SARAN ... 54

5.1 Simpulan ... 54

5.2 Saran ... 55

DAFTAR PUSTAKA ... 56

(13)

xiii

DAFTAR GAMBAR

Gambar 2.1 Framework Gamifikasi Marczewski (Marczewski, 2014) ... 7

Gambar 2.2 RAMP Framework (Marczewski, 2014) ... 9

Gambar 2.3 Diagram final model HMSAM (Lowry, 2013) ... 11

Gambar 3.1 Flowchart keseluruhan ………...18

Gambar 3.2 Home Screen Flowchart ... 19

Gambar 3.3 Intro to React Flowchart ... 21

Gambar 3.4 Intro to React Section Flowchart ... 22

Gambar 3.5 TicTacToe Flowchart ... 24

Gambar 3.6 TicTacToe Section Flowchart ... 25

Gambar 3.7 Home Screen Mockup... 27

Gambar 3.8 Mockup Section Selection... 28

Gambar 3.9 Information Modal Mockup ... 29

Gambar 3.10 Answering Section Mockup ... 30

Gambar 4.1 Halaman Home Screen ………...34

Gambar 4.2 Halaman Home Screen saat Memilih Topik ... 34

Gambar 4.3 Halaman Section Selection ... 36

Gambar 4.4 Halaman Answering Section... 37

Gambar 4.5 Halaman Permainan TicTacToe ... 38

(14)

xiv

DAFTAR TABEL

Tabel 3.1 Perbandingan aplikasi pembelajaran dengan gamifikasi dan gim

pembelajaran (Al-Azawi, 2016) ... 14

Tabel 3.2 Daftar aset aplikasi ... 31

Tabel 4.1 Daftar pertanyaan pada kuesioner ……….41

Tabel 4.2 Jumlah jawaban dari pengguna ... 43

Tabel 4.3 Perhitungan persentase dari responden kuesioner ... 47

Tabel 4.4 Nilai batasan untuk setiap nilai tingkatan ... 49

Tabel 4.5 Hasil perhitungan Perceived Ease of Use ... 49

Tabel 4.6 Hasil perhitungan Perceived Usefulness ... 50

Tabel 4.7 Hasil perhitungan Joy... 50

Tabel 4.8 Hasil perhitungan Curiosity ... 51

Tabel 4.9 Hasil perhitungan Control ... 51

Tabel 4.10 Hasil perhitungan Immersion ... 52

(15)

58

DAFTAR LAMPIRAN 1. Riwayat Hidup

2. Jawaban Penyelesaian Level

3. Formulir Bimbingan Skripsi Pembimbing 1 4. Formulir Bimbingan Skripsi Pembimbing 2