BAB III PEMBAHASAN - repository.bsi.ac.idBAB III PEMBAHASAN 3.1. Analisa Kebutuhan Tahap analisa...

35

BAB III

PEMBAHASAN

3.1. Analisa Kebutuhan

Tahap analisa kebutuhan bertujuan untuk memperoleh informasi-informasi

dalam pembuatan aplikasi yang dibuat. Tahap yang dilakukan penulis terlebih

dahulu melakukan observasi dan wawancara untuk memperoleh informasi dalam

pembuatan aplikasi yang dibuat. Tahap awal peneliti melakukan observasi yaitu

mengamati secara langsung proses belajar dan pembelajaran yang dilakukan salah

satu di taman kanak-kanak. Wawancara adalah salah satu dalam proses analisa

kebutuhan yang sangat penting, wawancara bertujuan untuk memperoleh

informasi yang akurat sehingga dalam aplikasi yang dibuat tidak menyimpang

dari konsep. Mempermudah analisis kebutuhan dalam menentukan keseluruhan

yang dibutuhkan secara lengkap, maka dibagi menjadi dua jenis analisa kebutuhan

fungsional dan analisa kebutuhan non fungsional.

3.1.1. Analisa Kebutuhan Fungsional

Kebutuhan fungsional adalah jenis kebutuhan yang berisi tentang proses-

proses apa saja yang dilakukan oleh sistem. Pembuatan aplikasi ini membutuhkan

sistem dalam pembuatan permainan pembelajaran adalah memiliki gambaran

sistem, yang dapat dijelaskan sebagai berikut:

36

1. Tampilan pengguna (User Interface)

Tampilan permainan pembelajaran untuk anak usia dini, hal pertama adalah

harus didukung dengan user interface yang sederhana dan sesuai untuk anak usia

dini 4-5 tahun. Umumnya anak usia antara 4-5 tahun yang penulis analisa belum

bisa membaca, sehingga hal pertama supaya dapat menarik perhatian pertama

anak memberikan ikon gambaran serta suara agar anak lebih jelas tentang menu-

menu di dalam apilkasi. Background dan tombol-tombol menu di buat lebih cerah

dan menarik .

2. Materi Pembelajaran

Materi pembelajaran pengenalan juga harus disesuaikan dengan anak usia 4-

5 tahun. Materi anak pada usia 4-5 tahun adalah tahap pengenalan dasar, materi

pengenalan dasar yang penulis ambil adalah mengenal bagian tubuh, mengenal

panca indra, mengenal alfabet dan angka dasar 0-10.

3. Evaluasi Pembelajaran

Evaluasi adalah sebagai kuis tebak gambar dalam pembelajaran, yang

berguna untuk mengasah daya ingat anak, sejauh mana ingatan mereka dalam

belajar. Evaluasi juga harus menambahkan media hiburan seperti efek pada

gambar supaya lebih menarik dalam evaluasi pembelajaran.

4. Permainan

Penambahan permainan drag dan drop atau menggeser gambar bagian

tubuh supaya aplikasi lebih menarik.

37

5. Musik dan suara pendukung

Suatu aplikasi akan lebih hidup jika ada musik atau lagu maupun suara

pendukung. Musik juga harus disesuaikan untuk anak usia dini, sehingga

meningkan keasikan dan menimbulkan ingin belajar yang berbeda.

Aplikasi permainan pembelajaran ini memiliki tampilan yang sederhana dan

di tambah ikon animasi agar menarik, materi pembelajaran pengenalan dasar

disesuaikan pada usia anak 4-5 tahun. Aplikasi ini juga menyediakan kuis tebak

gambar evaluasi pembelajaran, sehingga dapat mengetahui tingkat pemahaman

anak terhadap materi dalam proses belajar. Pada aplikasi ini juga ditambah

instrumen musik maupun suara pendukung yang digunakan dalam penyampaian

fungsi dari bagian-bagian menu aplikasi, sehingga mempermudah anak dalam

memilih.

3.1.2. Analisa Kebutuhan Non Fungsional

Analisa kebutuhan non fungsional berupa perangkat keras dan perangkat

lunak, yaitu:

1. Perangkat Keras (Hardware)

Kebutuhan hardware yang telah digunakan untuk menjalankan permainan

pembelajaran dibuat dengan Construct 2, yaitu:

a. Smartphone atau Tablet PC Android

b. RAM Minimal 512

2. Perangkat Lunak (Software)

Adapun software yang telah digunakan untuk menjalankan permainan

pembelajaran ini, yaitu:

38

a. Intel XDK

b. Smartphone Android dengan sistem operasi Android V4.0.4 (Ice Cream

Sandwich).

c. Chrome.

d. Cocoon.io.

e. PhoneGap

3.2. Perancangan Perangkat Lunak

Perancangan perangkat lunak permainan pembelajaran ini adalah sebagai

berikut:

3.2.1. Rancangan Storyboard

Tabel III.1

Storyboard Splash Screen

VISUAL SKETSA AUDIO

Dalam frame ini terdapat logo

Aplikasi, logo dan nama

kampus. Pada frame ini

berdurasi beberapa detik saat

membuka Aplikasi untuk

masuk ke menu utama.

Sumber : Hasil Penelitian (2017)

Logo

Kampus

LOGO

APLIKASI

Nama Kampus

39

Tabel III.2

Storyboard Menu Utama/Beranda

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat judul dari

aplikasi dan

maskot dibagian

Samping kiri menu,

tombol navigasi

keluar pada kanan

atas layar. Pada

frame ini terdapat 5

menu pilihan dan

di tambah audio

suara setiap menu.

-Backsound

Music.wav

-Sound

Menu.wav


Tabel III.3

Storyboard Menu Mengenal Alfabet

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat tombol navigasi

kembali kiri atas layar.

Pada frame ini juga

memiliki 2 menu

pilihan.

Backsound

Music.wav


Keluar

Maskot

Menuu

Menuu

Menu

Menu

JUDUL APLIKASI

Kembali

Menu Menu

Menu

Logo

40

Tabel III.4

Storyboard Mengenal Alfabet

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat tombol

navigasi kembali

kiri atas layar.

Pada frame ini

judul pengenalan

dan tobol-tombol

pengenalan alfabet

menggunakan

audio.

Judul Pengenalan

-Backsound

Music.wav

-Sound

Alfabet.wav


Tabel III.5.

Storyboard Evaluasi Alfabet

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat tombol

navigasi kembali dan

keluar bagian kanan dan

kiri atas layar. Pada

frame ini pertanyaan

menggunakan audio dan

pilihan jawaban

menggunakan gambar.

-Backsound

Music.wav

-Sound

Pertanyaan.wav


Kembali

B G H

O

E D F A

I K L M J N P

R Q S T U V W X

Z Y

C

Kembali

ali

Keluar

ali

Jawaban

1ali

Jawaban

ali

Jawaban

ali

41

Tabel III.6

Storyboard Ikon Gambar Senang

VISUAL SKETSA AUDIO

Ikon gambar senang

muncul jika jawaban

dari pertanyaan kuis

evaluasi benar.

-Backsound

Music.wav

-Sound

bagus.wav


Tabel III.7.

Storyboard Ikon Gambar Sedih

VISUAL SKETSA AUDIO

Ikon gambar sedih

muncul jika jawaban

dari pertanyaan kuis

evaluasi salah.

-Backsound

Music.wav

-Sound Coba

lagi.wav


Kembali

Kembali

42

Tabel III.8.

Storyboard Menu Mengenal Angka

VISUAL SKETSA AUDIO

Dalam frame ini


kembali pada bagian kiri

atas layar. Pada frame

ini juga memiliki 2

menu pilihan.

Backsound

Music. wav


Tabel III.9.

Storyboard Mengenal Angka

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat tombol

navigasi kembali pada

bagian kiri atas layar.

Pada frame ini judul

pengenalan dan

tombol-tombol

pengenalan angka dan

menggunakan audio.

Judul Pengenalan

-Backsound

Music.wav

-Sound

Angka.wav


Kembali

4 5 1 2 3

6 7 8 9 10

Kembali

Menu Menu

0

43

Tabel III.10.

Storyboard Evaluasi Angka

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat tombol

navigasi kembali r kiri


ini pertanyaan

menggunakan audio dan

pilihan jawaban

menggunakan gambar.

-Backsound

Music.wav

-Sound

Pertanyaan.wav


Tabel III.11.

Storyboard Menu Mengenal bagian Tubuh

VISUAL SKETSA AUDIO

Dalam frame ini


pada bagian kiri atas

layar. Pada frame ini

juga memiliki 2 menu

pilihan.

-Backsound

Music.wav


Kembali

Jawaban Jawaban Jawaban

Evaluasi

Kembali

Menu Menu

44

Tabel III.12

Storyboard Mengenal Bagian Tubuh

VISUAL SKETSA AUDIO

Dalam frame ini terdapat

tombol navigasi kembali

pada bagian kiri atas

layar. Pada frame ini

terdapat ikon gambar

bagian tubuh.

-Backsound

Music.wav

- Sound Bagian

Tubuh.wav


Tabel III.13.

Storyboard Permainan Bagian Tubuh

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat tombol

navigasi pada bagian

kiri atas layar. Pada

frame ini permainan

bagian tubuh adalah

menggunaklan drag

dan drop atau

menggeser gambar.

Backsound

Music.wav

-Sound

Bagian

Tubuh.wav


Kembali

Kembali

Ikon Gambar

Bagian Tubuh

Ikon

Gambar

Ikon

Gambar

Gambar

Gambar

Gambar

Gambar

Gambar

Gambar

Judul Pengenalan

45

Tabel III.14.

Storyboard Menu Mengenal Panca Indra

VISUAL SKETSA AUDIO

Dalam frame ini


kembali pada bagian kiri


ini memiliki 2 menu

pilihan.

Backsound

Music.wav


Tabel III.15.

Storyboard Mengenal Panca Indra

VISUAL SKETSA AUDIO

Dalam frame

ini terdapat

tombol navigasi

kembali pada

bagian kiri atas

layar. Pada

frame ini

adalah

pengenalan

panca indra

manusia.

-Backsound

Music.wav

-Sound

Panca

Indra.wav


Kembali

Hidung

Kulit

Telinga Mata

Lidah

Judul Pengenalan

Kembali

Menu Menu

46

Tabel III.16.

Storyboard Evaluasi Panca Indra

VISUAL SKETSA AUDIO

Dalam frame ini

terdapat tombol

navigasi kembali

bagian kiri atas layar.

Pada frame ini

pertanyaan

menggunakan audio

dan pilihan jawaban

menggunakan

gambar.

-Backsound

Music.wav

-Sound

Panca

Indra.wav


Tabel III.17.

Storyboard Selesai Evaluasi

VISUAL SKETSA AUDIO

Dalam frame ini

memiliki 2 menu

pilihan tombol

navigasi home dan

mengulang kembali

evaluasi.


Kembali

Jawaban

Jawaban Jawaban

Home Agian

47

Tabel III.18.

Storyboard Menu Keluar

VISUAL SKETSA AUDIO

Dalam frame ini

memiliki 2 menu

pilihan tombol

navigasi home dan

keluar.


3.2.2. Rancangan Antar Muka

Menjelaskan rancangan antar muka (interface) yang terdapat pada aplikasi

permainan pembelajaran.

1. Tampilan Judul

Tampilan ini berisi tentang logo aplikasi serta logo dan nama kampus

sebelum masuk ke menu utama.


Gambar III.1. Rancangan Antarmuka Judul

Home Keluar

LOGO Nama Kampus

LOGO

APLIKASI

LOGO

48

2. Tampilan Menu Utama (Beranda)

Tampilan menu utama ini berisi 5 tombol menu serta 1 tombol navigasi

keluar, tombol menu diantaranya pengenalan alfabet, angka, bagian tubuh dan

panca indra dan tentang pembuat Aplikasi.


Gambar III.2 Rancangan Antarmuka Menu Utama/Beranda

3. Tampilan Menu Pengenalan Alfabet

Tampilan menu pengenalan alfabet ini berisi 2 tombol menu serta navigasi

kembali ke menu utama.


Gambar III.3. Rancangan Antarmuka Menu Pengenalan Alfabet

ABC

123

Judul Aplikasi

Maskot

Keluar

Mengenal Evaluasi

Kembali

Tentang

Logo

49

4. Tampilan Mengenal Alfabet

Tampilan ini menampilkan gambar alfabet, jika gambar alfabet tersebut di

touch maka akan keluar suara alfabet tersebut, serta tombol navigasi kembali ke

menu pengenalan alfabet.


Gambar III.4. Rancangan Antarmuka Mengenal Alfabet

5. Tampilan Evaluasi Alfabet

Tampilan ini berisi kuis tebak gambar alfabet, pertanyaan dari kuis tebak

gambar alfabet ini menggunakan suara dan jika jawaban benar akan mucul ikon

gambar senang begitu juga sebaliknya jika jawaban salah juga muncul ikon

gambar sedih. Tampilan halaman evaluasi ini juga menampilkan navigasi kembali

ke menu pengenalan alfabet, dan jika telah berhasil menyelesaikan evaluasi juga

muncul tombol coba lagi atau kembali ke menu utama.

Kembali

Mengenal Alfabet

A B H E D

I

C G F

Q S

P K O L N M J

R T U V W

Y Z

X

50


Gambar III.5. Rancangan Antarmuka Evaluasi Alfabet


Gambar III.6. Rancangan Antarmuka Ikon Gambar Senang

Kembali

Sound Pertanyaan Alfabet

Jawaban

A

Jawaban

B

Jawaban

C

51


Gambar III.7. Rancangan Antarmuka Ikon Gambar Sedih

6. Tampilan Menu Pengenalan Angka

Tampilan menu pengenalan angka ini berisi 2 tombol menu serta navigasi

kembali ke menu utama.


Gambar III.8. Rancangan Antarmuka Menu Pengenalan Angka

Mengenal Evaluasi

Kembali

52

7. Tampilan Mengenal Angka

Tampilan ini menampilkan gambar angka, jika gambar angka tersebut di

tekan maka akan keluar suara angka tersebut, serta tombol navigasi kembali ke

menu pengenalan angka.


Gambar III.9. Rancangan Antarmuka Mengenal Angka

8. Tampilan Evaluasi Angka

Tampilan ini berisi kuis tebak gambar angka, pertanyaan dari kuis tebak

gambar angka ini menggunakan suara dan jika jawaban benar akan mucul ikon

gambar senang, begitu juga sebaliknya jika jawaban salah juga muncul ikon

gambar sedih. Tampilan halaman evaluasi ini juga menampilkan navigasi kembali

ke menu pengenalan angka, dan jika telah berhasil menyelesaikan evaluasi juga

muncul tombol coba lagi atau kembali ke menu utama.

Kembali

Mengenal Angka

1 2 3 4 5

6 7 8 9 10

0

53


Gambar III.10. Rancangan Antarmuka Evaluasi Angka

9. Tampilan Menu Pengenalan Bagian Tubuh

Tampilan menu pengenalan bagian tubuh ini berisi 2 tombol menu serta

navigasi kembali ke menu utama.


Gambar III.11. Rancangan Antarmuka Menu Pengenalan Bagian

Tubuh

Kembali

Sound Pertanyaan Angka

Jawaban

A

Jawaban

B

Jawaban

C

Kembali

Mengenal Permainan

54

10. Tampilan Mengenal Bagian Tubuh

Tampilan ini berisi gambar kartun, jika salah satu bagian tubuh di tekan

maka garis berwarna muncul serta suara bagian tubuh yang di tekan. Halaman ini

juga terdapat navigasi kembali ke menu pengenalan bagian tubuh.


Gambar III.12. Rancangan Antarmuka Mengenal Bagian Tubuh

11. Tampilan Permainan

Tampilan permainan bagian tubuh ini berisi gambar bagian tubuh, dan berisi

bagian-bagian gambar bagian tubuh di samping kanan dan kiri layar. Permainan

ini adalah drag dan drop gambar atau menggeser gambar yang sesuai pada

gambar bagian tubuh serta jika benar menempatkan posisi gambar maka muncul

suara begitu juga sebaliknya jika salah menempatkan gambar juga muncul suara.

Setiap tampilan aplikasi disertai tombol navigasi kembali.

Kembali

Gambar Kartun

Mengenal Bagian Tubuh

55


Gambar III.13. Rancangan Antarmuka Permainan Bagian Tubuh

12. Tampilan Menu Pengenalan Panca Indra

Tampilan menu pengenalan panca indra ini berisi 2 tombol menu serta

navigasi kembali ke menu utama.


Gambar III.14. Rancangan Antarmuka Menu Pengenalan Panca Indra

Kembali

Gambar Kartun

Gambar

1

Gambar

2

Gambar

3

Gambar

4

Gambar

5

Gambar

6

Kembali

Mengenal Evaluasi

56

13. Tampilan Mengenal Panca Indra

Tampilan ini menampilkan gambar panca indra, jika gambar panca indra

tersebut di tekan maka akan keluar suara panca indra dan fungsinya, serta tombol

navigasi kembali ke menu pengenalan panca indra.


Gambar III.15. Rancangan Antarmuka Pengenalan Panca Indra

14. Tampilan Evaluasi Panca Indra

Tampilan ini berisi kuis tebak gambar panca indra, pertanyaan dari kuis

tebak gambar panca indra ini menggunakan suara dan jika jawaban benar akan

mucul ikon gambar senang, begitu juga sebaliknya jika jawaban salah juga

muncul ikon gambar sedih. Tampilan halaman evaluasi ini juga menampilkan

navigasi kembali ke menu pengenalan angka, dan jika telah berhasil

menyelesaikan evaluasi juga muncul tombol coba lagi atau kembali ke menu

utama.

Kembali

Mengenal Panca Indra

Mata

Hiung

Telinga

Kulit Lidah

57


Gambar III.16. Rancangan Antarmuka Evaluasi Panca Indra

15. Tampilan Selesai Evaluasi Pembelajaran

Tampilan ini muncul adalah jika telah menyelesaikan evaluasi

pembelajaran. Tampilan ini Berisi 2 tombol menu navigasi, diantaranya tombol

kembali ke menu utama dan coba lagi.


Gambar III.17. Rancangan Antarmuka Selesai Evaluasi Pembelajaran

Home Again

Kembali

Sound Pertanyaan Panca Indra

Jawaban

A

Jawaban

B

Jawaban

C

58

16. Tampilan Keluar Dari Aplikasi

Tampilan keluar dari aplikasi adalah tampilan pemberitahuan yang memiliki

2 tombol navigasi apakah ingin keluar dari aplikasi atau tetap menjalankan

aplikasi.


Gambar III.18. Rancangan Antarmuka Keluar Dari Aplikasi

3.2.3. Hirarki Tampilan

Struktur navigasi hirarki merupakan struktur yang mengandalkan suatu

percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan

pada halaman pertama disebut sebagai halaman utama atau beranda dan

mempunyai halaman percabangan yang disebut halaman pendukung. Berikut ini

akan di di gambarkan hirarki tampilan dari aplikasi permainan pembelajaran yang

akan dibuat:

LOGO

59

Tabel III.17.

Hirarki Tampilan


3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada aplikasi permaianan pengenalan

dasar sebagai berikut.

Belajar

Evaluasi

Judul

Mengenal Alfabet

Menu

Evaluasi

Menu

Menu Utama

(Beranda)

Mengenal Angka

Mengenal Bagian

Tubuh

Menu

Mengenal Panca

Indra

Evaluasi

Belajar

Belajar

Belajar

Permainan

Menu

60

lmplementasi rancangan antar muka sebagai berikut:

1. Tampilan Judul

Tampilan ini berisi logo aplikasi dan logo kampus serta nama kampus,

tampilan ini hanya berdurasi beberapa detik sebelum masuk ke menu utama.


Gambar III.19. Tampilan Judul

2. Tampilan Menu Utama

Halaman ini berisikan 5 menu, yakni menu pengenalan alfabet, menu

pengenalan angka, menu pengenalan bagian tubuh, menu pengenalan panca indra

dan menu tentang. Halaman ini juga ditambah tombol keluar dari aplikasi.


Gambar III.20. Tampilan Menu Utama/Beranda

61

3. Tampilan Menu Pengenalan Alfabet

Halaman ini memiliki 2 menu, yakni menu mengenal alfabet dan menu

evaluasi. Menu mengenal alfabet adalah menu untuk pengenalan alfabet

sedangkan menu evaluasi adalah permainan tebak gambar alfabet. Halaman ini

juga ditambah dengan tombol kembali ke menu utama.


Gambar III.21. Tampilan Menu Pengenalan Alfabet

4. Tampilan Mengenal Alfabet

Halaman ini adalah pengenalan tentang alfabet, jika huruf alfabet di tekan

maka akan muncul suara alfabet yang ditekan. Halaman ini juga ditambah tombol

kembali ke menu pengenalan alfabet.

62

.


Gambar III.22. Tampilan Mengenal Alfabet

5. Tampilan Evaluasi Alfabet

Halaman ini adalah tebak gambar alfabet sebagai media evaluasi alfabet.

Evaluasi tebak gambar alfabet ini adalah di buat menarik dan di tambah efek pada

gambar sehingga terlihat unik. Jika jawaban tebak gambar benar maka akan

muncuk ikon senang dan tambah audio suara pendukungnya, begitupun juga

sebaliknya jika jawaban salah maka muncul ikon sedih dan suara pendukungnya.


Gambar III.23. Tampilan Evaluasi Alfabet

63

6. Tampilan Menu Pengenalan Angka

Halaman ini terdiri dari 2 menu, yakni menu mengenal angka dan menu

evaluasi angka. Menu mengenal angka adalah untuk mengenal angka sedangkan

menu evaluasi angka adalah evaluasi tebak gambar angka. Halaman ini juga

ditambahkan tombol kembali ke menu utama.


Gambar III.24. Tampilan Menu Pengenalan Angka

7. Tampilan Mengenal Angka

Halaman ini adalah sebagai pengenalan angka dari 0 hingga 10. gambar

angka di tekan maka akan muncul suara angka yang sesuai dengan yang ditekan.

Halaman ini juga ditambahkan tombol kembali ke menu pengenalan angka.

64


Gambar III.25. Tampilan Mengenal Angka

8. Tampilan Evaluasi Angka

Halaman ini adalah tebak gambar angka sebagai media evaluasi angka.

Evaluasi tebak gambar angka ini adalah di buat menarik dan di tambah efek pada

gambar sehingga terlihat unik. Jika jawaban tebak gambar benar maka akan

muncuk ikon senang dan tambah audio suara pendukungnya, begitupun juga

sebaliknya jika jawaban salah maka akan muncul ikon sedih dan suara

pendukungnya. Halaman ini juga ditambahkan tombol kembali ke menu

pengenalan angka.

65


Gambar III.26. Tampilan Evaluasi Angka

9. Tampilan Menu Pengenalan Bagian Tubuh

Halaman ini memiliki 2 menu, yakni menu mengenal bagian tubuh dan

menu permaianan. Menu mengenal bagian tubuh adalah menu untuk pengenalan

bagian tubuh manusia sedangkan menu permaianan adalah permainan bagian

tubuh. Halaman ini juga ditambah dengan tombol kembali ke menu utama.


Gambar III.27. Tampilan Menu Pengenalan Bagian Tubuh

66

10. Tampilan Mengenal Bagian Tubuh

Halaman ini adalah mengenal bagian tubuh. Tekan pada bagian tubuh pada

gambar maka akan muncul garis-garis warna warni serta suara penjelasan dari

gambar bagian tubuh yang telah ditekan. Halaman ini juga ditambah tombol

kembali ke menu pengenalan bagian tubuh.


Gambar III.28. Tampilan Mengenal Bagian Tubuh

11. Tampilan Permainan Bagian Tubuh

Halaman ini adalah permainan bagian tubuh. Permaianan pada bagian tubuh

ini adalah dengan cara mengeserkan gambar bagian tubuh yang sesuai. Salah

meletakan gambar bagian tubuh maka gambar tersebut kembali ke posisi semula,

jika benar maka gambar tersebut menjadi lebih jelas dan di sertai suara bagian

tubuh tersebut. Halaman ini juga ditambah tombol kembali ke menu pengenalan

bagian tubuh.

67


Gambar III.29. Tampilan Permainan Bagian Tubuh

12. Tampilan Menu Pengenalan Panca Indra

Halaman ini memiliki 2 menu, yakni menu mengenal panca indra dan menu

evaluasi. Menu mengenal panca indra adalah menu untuk pengenalan bagian

panca indra manusia sedangkan menu evaluasi adalah evaluasi tebak gambar

panca indra. Halaman ini juga ditambah dengan tombol kembali ke menu utama.


Gambar III.30. Tampilan Menu Pengenalan Panca Indra

68

13. Tampilan Mengenal Panca Indra

Halaman ini adalah sebagai pengenalan bagian panca indra manusia.

Gambar panca indra jika di tekan maka akan muncul suara panca indra sesuai

yang ditekan dan fungsi dari panca indra tersebut. Halaman ini juga ditambah

dengan tombol kembali ke menu pengenalan panca indra.


Gambar III.31. Tampilan Mengenal Panca Indra

14. Tampilan Evaluasi Panca Indra

Halaman ini adalah tebak gambar panca indra sebagai media evaluasi bagian

panca indra. Evaluasi tebak gambar panca indra ini adalah di buat menarik dan di

tambah efek pada gambar sehingga terlihat unik. Jika jawaban tebak gambar benar

maka akan muncuk ikon senang dan tambah audio suara pendukungnya,

begitupun juga sebaliknya jika jawaban salah maka akan muncul ikon sedih dan

suara pendukungnya. Halaman ini juga ditambah dengan tombol kembali ke menu

pengenalan panca indra.

69


Gambar III.32. Tampilan Evaluasi Panca Indra

15. Tampilan Ikon Senang

Ikon senang ini muncul jika pada evaluasi jawaban yang di pilih benar dan

di tambah suara pendukung.


Gambar III.33. Tampilan Ikon Senang

70

16. Tampilan Ikon Sedih

Ikon sedih ini muncul jika pada evaluasi jawaban yang di pilih adalah salah

dan di tambah suara pendukung.


Gambar III.34. Tampilan Ikon Sedih

17. Tampilan Selesai Evaluasi

Halaman ini akan muncul jika evaluasi telah selesai menjawab semua

pertanyaan. Halaman ini juga ditambah dengan tombol kembali ke evaluasi yang

telah dimainkan dan tombol kembali ke menu utama.


Gambar III.35. Tampilan Selesai Evaluasi

71

18. Tampilan Keluar Dari Aplikasi

Halaman ini muncul jika tombol keluar telah ditekan. Halaman ini memiliki

tombol pilihan yakni tombol kembali ke menu utama atau keluar dari aplikasi

yang tengah dijalankan.


Gambar III.36. Tampilan keluar Dari Aplikasi

3.3.2. Pengujian Unit

A. Black-Box Testing

Pengujian black box merupakan pengujian yang dilakukan penulis dalam

menguji sistem aplikasi sesuai spesifikasi fungsional.

1. Pengujian terhadap tombol-tombol menu aplikasi

Tabel III.20.

Hasil pengujian Black-Box Testing Tombol Aplikasi

Input Proses Output Hasil Pengujian

Tombol ”Menu

Mengenal Alfabet”

Go to Layout

Menu Pengenalan

alfabet

Sesuai

Tombol ”Menu

Mengenal Angka”

Go to Layout

Menu Pengenalan

Angka

Sesuai

72

Tombol ”Menu

Mengenal Bagian

Tubuh”

Go to Layout

Menu Pengenalan

Bagian Tubuh

Sesuai

Tombol ”Menu

Mengenal Panca

Indra”

Go to Layout

Menu Pengenalan

Panca Indra

Sesuai

Tombol

”Mengenal

Alfabet”

Go to Layout

Mengenal Alfabet

Sesuai

Tombol ”Evaluasi

Alfabet”

Go to Layout

Evaluasi Alfabet

Sesuai

Tombol

”Mengenal

Angka”

Go to Layout

Mengenal Angka

Sesuai

Tombol

”Evaluasi Angka”

Go to Layout

Evaluasi Angka

Sesuai

Tombol

”Mengenal Bagian

Tubuh”

Go to Layout

Mengenal Bagian

Tubuh

Sesuai

Tombol

”Permainan”

Go to Layout

Permainan Bagian

Tubuh

Sesuai

Tombol

”Mengenal Panca

Indra”

Go to Layout

Mengenal Panca

Indra

Sesuai

Tombol

”Evaluasi Panca

Indra”

Go to Layout

Evaluasi Panca

Indra

Sesuai

Tombol

”Kembali1”

Go to Layout

Kembali ke Menu

Utama

Sesuai

Tombol

”Kembali2”

Go to Layout

Kembali Ke Menu

Pengenalan

Sesuai

Tombol

”Keluar”

Go to Layout

Keluar Dari

Aplikasi

Sesuai

73

Tombol

”Again/main Lagi”

Go to Layout

Kembali Ke Awal

Evaluasi

Sesuai

Tombol “Alfabet

A”

Play Audio

Suara A

Sesuai

Tombol “Angka

1”

Play Audio

Suara 1

Sesuai

Tekan gambar

bagian kepala”

Play Audio

And Visible

Muncul garis

warna-warni dan

suara kepala

Sesuai

Tombol Jawaban

evaluasi alfabet

jawaban Benar”

Visible

Ikon gambar

senang dan lanjut

ke pertanyaan

berikutnya

Sesuai

Tombol Jawaban

evaluasi alfabet

jawaban salah

Visible

Ikon gambar sedih

dan masih

pertanyaan yang

sama

Sesuai

Tombol Jawaban

evaluasi angka

jawaban salah

Visible

Ikon gambar

senang dan lanjut

ke pertanyaan

berikutnya

Sesuai

Tombol Jawaban

evaluasi angka

jawaban salah

Visible

Ikon gambar sedih

dan masih

pertanyaan yang

sama

Sesuai

Tombol Geser

Gambar permainan

bagian Tubuh

benar

Visible

Bagian tubuh

menjadi terang

Sesuai

Tombol Geser

Gambar permainan

bagian Tubuh

Visible

Kembali ke Posisi

awal gambar

Sesuai

74

salah bagian tubuh

Tombol Jawaban

evaluasi panca

Indra jawaban

benar

Visible

Ikon gambar

senang dan lanjut

ke pertanyaan

berikutnya

Sesuai

Tombol Jawaban

evaluasi Panca

Indra jawaban

salah”

Visible

Ikon gambar sedih

dan masih

pertanyaan yang

sama

Sesuai


2. Cara Kompilasi Project

a. Halaman Construct 2

Pada halaman construct 2 pengaturan terlebih dahulu pada properties

project. Mulai dari about project, project settings dan configuration setings.


Gambar III.37. Tampilan Kompilasi Project Pada Halaman

Construct 2

75

Jika telah selesai pengaturan properties project, selanjutnya pilih file dan

terdapat banyak pilihan didalam file tersebut. Pilih yang export project.


Gambar III.38. Tampilan Kompilasi Export Project Construct 2

Jika telah ditekan export project maka muncul halaman export, pilih

platform cardova.


Gambar III.39. Tampilan Kompilasi Platform To Export To

76

Tekan platform cardova maka muncul halaman tempat penyimpanan hasil

export folder. Jika telah selesai membuat tempat penyimpanan hasil export

silahkan tekan next.


Gambar III.40. Tampilan Tempat Penyimpanan Folder Export

Project

Setelah membuat tempat penyimpanan folrder export maka muncul

halaman cardova option. Pada halaman ini, bagian export audio file for ini

adalah berfungsi untuk menentukan apakah android atau ios yang akan

dijadikan file apk. Centang salah satu pilihan tersebut. Pada bagian

minimum supported 0Ss ini adalah untuk menentukan sistem operasi (OS)

terendah pada smartphone. Jika telah selesai maka tekan tombol export.

77


Gambar III.41. Tampilan Export Project Construct 2


Gambar III.42. Tampilan Proses Exporting Project Construct 2

b. Buka Intel XDk

Jika telah selesai export project maka selanjutnya membuka program intel

XDk. Pada halaman kiri bagian bawah Intel XDK tekan pilihan open an

Intel XDk project, untuk membuka file XDK yang telah diexport dari

Construct 2.

78


Gambar III.43. Tampilan Halaman Intel XDK

Setelah berhasil memasukan project Intel XDK hasil dari export,

selanjutnya mengatur App Mobile, apakah Android, IOS atau Windows.


Gambar III.44. Tampilan Mobile App Seting

Setelah menentukan setingan mobile, selanjutnya mengatur build untuk di

android. Mulai dari mengatur app id , app name, deskripsi app, author dan

versi app.

79


Gambar III.45. Tampilan Pengaturan Build Android

Setelah melakukan pengaturan build android, selanjutnya memasukan icons

dan splash screens yang akan di gunakan pada aplikasi android .


Gambar III.46. Tampilan Menambah Icons dan Spalsh

Setelah selesai pengaturan pada mobile App,selanjutnya melakukan simulasi

aplikasi yang akan di kompilasi.

80


Gambar III.47. Tampilan Simulasi Aplikasi


Gambar III.48. Tampilan Hasil Simulasi Aplikasi

Setelah berhasil melakukan simulasi aplikasi berjalan dengan lancar

melakukan build, pada no 2 harus masuk ke jaringan internet. Pada langkah

ke 3 di bagian bulid adalah untuk menentukan mobile apakan android, IOS

atau windows. Langkah ke 4, hasil dari create package adalah folder zip

aplikasi hasil kompilasi dari Intel XDK.

81


Gambar III.49. Tampilan Build Intel XDK

c. Halaman Adobe PhoneGap Build

Langkah selanjutnya masuk ke web PhoneGap. Pada halaman PhoneGap

bagian kanan atas tampilan pilih sign up untuk masuk ke pengaturan build

pada PhoneGap.


Gambar III.50. Tampilan Adobe PhoneGap Build

Selanjutnya pilih free competely,sehingga saat melakukan build tanpa

melakukan pembayaran.

82


Gambar III.51. Tampilan PhoneGap Completely Free

Selanjutnya muncul pada halaman build di PhoneGap tekan tombol upload

a.zip file, bagian ini adalah untuk memasukan file zip hasil dari Intel XDK.


Gambar III.52. Tampilan PhoneGap Upload File Zip

Setelah selesai memasukan file zip hasil dari Intel XDK, selanjutnya pada

halaman build di PhoneGap pilih yang lambang android.

83


Gambar III.53. Tampilan PhoneGap Pilih Android

Selanjutnya melakukan pengaturan build pada android terlihat pada

gambar III.54, setelah selesai selanjutnya memasukan keystore app

supaya dapat dimasukan ke app store dapat terlihat pada gambar III.55.


Gambar III.54. Tampilan PhoneGap Seting Build

84


Gambar III.55. Tampilan PhoneGap Masukan Keystore App

Setelah memasukan keystore app, jika gagal memasukkan keystore maka

akan muncul error. Sebaliknya jika berhasil memasukan keystore maka akan

telihat folder apk pada halaman kanan bagian bawah layar dapat dilihat pada

gambar III.56. Langkah selanjutnmya adalah mendownload file apk

tersebut.


Gambar III.56. Tampilan PhoneGap Download Apk

3. Uji Coba Sistem

Permainan pembelajaran ini telah di instal dan dijalankan dibeberapa

smartphone android dengan berbagai merk dan sistem operasi android. Berikut

ini hasil pengujian sistem pada smartphone android:

85

Tabel. III.21.

Pengujian Sistem

No. Merk Smartphone Versi OS Keterangan

1

Oppo A37f

5.1.1

Lollipop

Aplikasi berjalan lancar. Semua

tombol dan suara backsound dan

suara pendukung berfungsi

dengan baik.

2

Asus Zenfone 4

4.4

Kitkat




dengan baik.

3

Xiomi Redmi 3X

6.0.1

Marshmallow




dengan baik.

4

Samsung J2 Prime

6.1

Marshmallow




dengan baik.

5

Lenovo A6000

5.0.2

Lollipop




dengan baik.


86

B. Penerimaan User Terhadap Aplikasi Permaianan Pembelajaran

Untuk menguji penerimaan user aplikasi permainan pengenalan dasar ini

penulis mengguanakan pertanyaan kuisioner menggunakan bahasa yang

sederhana. Terdapat 100 responden yang memberikan jawaban pada kuisioner

yang diberikan, berikut hasil jawaban responden:

Tabel.22

Hasil Jawaban Responden

Tampilan Materi Kemudahan

1 2 3 4 5 6 7 8

STS 3 5

TS 1 3 2 4 6 1 2

S 47 43 52 51 55 48 48 56

SS 52 54 46 49 38 41 51 42


Ket: STS = Sangat Tidak Setuju

TS = Tidak Setuju

S = Setuju

SS = Sangat Setuju

87

Tabel III.23.

Tampilan Grafik Hasil Jawaban Responden


Ket: STS = Sangat Tidak Setuju

TS = Tidak Setuju

S = Setuju

SS = Sangat Setuju

Penelitian ini untuk menentukan kepuasan pengguna diukur menggunakan

skala likert 1 sampai dengan 4 yang penulis gunakan terdapat pada tabel III.24,

untuk membantu responden dalam memberi penilaian terhadap aplikasi. Berikut

akan dijelaskan hasil perhitungan menggunakan skala likert.

Menentukan skala penilaian skor kuisioner dalam bentuk skor terhadap

kategori jawaban kuisioner.

0

10

20

30

40

50

60

SS

S

TS

STS

88

Tabel III.24

Bobot Nilai

Jawaban Bobot Nilai

Sangat Baik (SB) 4

Baik (B) 3

Cukup Baik (CB) 2

Sangat Kurang Baik (SKB) 1

Sumber: Anjelina dkk (2016)

Menentukan rating scale (rentang jarak) dengan dengan cara data mentah

kuantitatif lalu dokonversikan menjadi pengertian kualitatif yang terdapat pada

tabel III.26 berikut ini:

Tabel III.25

Kriteria Skor Rating Scale

No Kategori Skor (%)

1 Sangat (tidak Setuju/Kurang Sekali/Buruk) 0% – 25%

2 Tidak Setuju/Kurang Baik 36% - 50%

3 Baik/Setuju/Suka 51% - 75%

4 Sangat (Setuju/Baik/Suka) 76% - 100%

Sumber : Windiyani (2012:205)

Berdasarkan skala likert yang peneliti gunakan dalam perhitungan penelitian

ini, langkah yang dilakukan adalah mengalikan setiap poin jawaban dengan bobot

nilai yang telah ditentukan lalu dijumlahkan (Anjelina dkk). Hasil perhitungan

dapat dilihat pada tabel III.25 berikut:

89

Tabel III.26.

Hasil Perhitungan Skor Setiap Pertanyaan

SS S TS STS Skor

Pertanyaan 1 52x4 47x3 1x2 0x1 208+141+2= 351

Pertanyaan 2 54x4 43x3 3x2 0x1 216+129+6 = 351

Pertanyaan 3 46x4 52x3 2x2 0x1 184+156+4 = 344

Pertanyaan 4 49x4 51x3 0x2 0x1 196+153 = 349

Pertanyaan 5 38x4 55x3 4x2 3x1 152+165+8+3= 328

Pertanyaan 6 41x4 48x3 6x2 5x1 164+144+12+5=325

Pertanyaan 7 51x4 48x3 1x2 0x1 204+144+2 =350

Pertanyaan 8 42x4 56x3 2x2 0x1 168+168+4 = 340


Setelah mendapatkat hasil skor pada masing-masing pertanyaan, selanjutnya

menentukan hasil persentase nilai dengan rumus indek (%).

Rumus (%) =

x 100

Sumber : Sugiyono dalam Anjelina dkk (2016)

Ket : Y = Skor Maksimal x Jumlah Responden

Tabel III.27.

Hasil Perhitungan Persentase Jawaban Kuisioner

No Pertanyaan Skor Hasil Kriteria

1

Apakah tampilan aplikasi permainan

pembelajaran menarik untuk di

operasikan?

351

100

=87,75 %

Sangat

(Setuju/Baik/

Suka)

90

2

Apakah warna tampilan aplikasi

permainan pembelajaran menarik

untuk anak-anak usia 4-5 tahun?

351

100

=87,75 %

Sangat

(Setuju/Baik/

Suka)

3

Apakah materi mengenai

permbelajaran ini menarik untuk anak

usia 4-5 tahun?

344

100

= 86 %

Sangat

(Setuju/Baik/

Suka)

4

Apakah materi pembelajaran ini dapat

membantu proses belajar anak?

349

100

=87,25 %

Sangat

(Setuju/Baik/

Suka)

5

Apakah model penyampaian materi

dari aplikasi menarik?

328

100

= 82%

Sangat

(Setuju/Baik/

Suka)

6

Apakah aplikasi ini mudah

diopesarikan?

325

100

= 81,25 %

Sangat

(Setuju/Baik/

Suka)

7

Apakah suara pada aplikasi ini

membantu memudahkan dalam

penggunaan?

350

100

= 87,5 %

Sangat

(Setuju/Baik/

Suka)

8

Apakah fungsi tombol-tombol

aplikasi ini mudah dipahami?

340

100

= 85 %

Sangat

(Setuju/Baik/

Suka)


Hasil dari perhitungan kepuasan atas jawaban responden di atas dapat

digambarkan dalam bentuk grafik sebagai berikut:

91

Tabel III.28.

Grafik Hasil Perhitungan Pada Kategori Tampilan


Hasil survei penerimaan responden terhadap aplikasi menggunakan

kuisioner pada 100 sample data responden. 100 responden tersebut terdiri dari

tenaga pengajar pada TK (Taman Kanak-kanak) dan tenaga pengajar bimbel

(Bimbingan belajar) serta orang tua. Data dari hasil kuisoner ini dilakukan

perhitungan menggunakan skala likert. Pada kategori tampilan memiliki 2

pertanyaan. Setelah melakukan perhitungan menggunakan skala likert, pada

pertanyaan pertama pada kategori tampilan memperoleh respon yang sangat baik

yaitu memiliki persentase 87,75 %, pengguana merasa tampilan permainan

pembelajaran ini sederhana tetapi menarik untuk dioperasikan untuk anak usia 4-5

tahun. Pada pertanyaan kedua di kategori tampilan juga memiliki respon yang

sangat baik yaitu memiliki persentase 87, 75 %, bahwa pengguna menyukai warna

tampilan aplikasi dan sesuai untuk anak usia 4-5 tahun. Hasil survei secara

keseluruhan pada kategori tampilan aplikasi memiliki rerata 87, 75%, hal ini

0

10

20

30

40

50

60

70

80

90

100

Pertanyaan 1 Pertanyaan 2

Sangat Baik

Baik

Kurang Baik

Kurang Sekali

92

menunjukan bahwa pada tampilan sudah sangat baik di gunakan untuk anak usia

4-5 tahun.

Tabel III.29.

Grafik Hasil Perhitungan Pada Kategori Materi


Hasil survei penerimaan responden terhadap materi dari aplikasi yang

disediakan, pada kategori materi terdiri dari 3 pertanyaan kuisioner. Data dari

hasil kuisioner ini dilakunkan perhitungan menggunakan skala likert. Hasil

jawaban responden pada kategori materi pada pertanyaan 3 memperoleh hasil

persentase sangat baik yaitu 86 %. Pertanyaan 4 pada kategori materi juga

memperoleh hasil persentase yangn sangat baik yaitu 87,25 %, responden

menyukai bahwa materi pembelajaran dapat membantu proses belajar anak,

sedangkan pada pertanyaan ke 5 juga memperoleh hasil persentase yang sangat

baik yaitu 82 %, dari data responden, bahwa 82 % responden menyukai

penyampaian materi pada aplikasi ini menarik. Hasil survei secara keseluruhan

79

80

81

82

83

84

85

86

87

88

Pertanyaan 3 Pertanyaan 4 Pertanyaan 5

Sangat Baik

Baik

Kurang Baik

Kurang Sekali

93

pada kategori materi memiliki nilai rerata 85, 08%, bahwa materi pembelajaran

untuk anak usia 4-5 tahun sudah sangat baik.

Tabel III.30.

Grafik Hasil Perhitungan Pada Kategori Kemudahan


Pada kategori kemudahan memiliki 3 pertanyaan kuisioner. Hasil survei

penerimaan responden terhadap kemudahan dari aplikasi yang telah dibuat. Data

dari hasil kuisoner ini dilakunkan perhitungan menggunakan skala likert. Hasil

jawaban responden pada kategori kemudahan pada pertanyaan 6 memperoleh

hasil sangat baik, data responden yang menerima bahwa aplikasi ini mudah untuk

dioperasikan yaitu 81,25 %. Pertanyaan 7 hasil dari responden bahwa suara

pendukung pada aplikasi sangat membantu mempermudahkan pengguna dalam

pengoperasian aplikasi yang memiliki persentase yang sangat bik yaitu 87,5 %,

sedangkan pada pertanyaan 8 juga memperoleh respon yang sangat baik, yang

mana hasil dari data responden menyatakan bahwa 85 % responden mengerti dan

mudah dipahami tombol-tombol pada aplikasi. Hasil survei secara keseluruhan

78

79

80

81

82

83

84

85

86

87

88

Pertanyaan 6 Pertanyaan 7 Pertanyaan 8

Sangat Baik

Baik

Kurang Baik

Kurang Sekali

94

pada kategori kemudahan memiliki nilai rerata 84, 58%, menunjukan bahwa

penggunaan apilkasi permainan pembelajaran ini mudah di operasikan oleh anak

usia 4-5 tahun.

Hasil dari 3 kategori mulai dari tampilan, materi dan kemudahan memiliki

nilai rerata 85, 80%, hasil ini menunjukan bahwa permainan pembelajaran

pengenalan dasar untuk taman kanak-kanak ini sudah sangat baik.

BAB III PEMBAHASAN - repository.bsi.ac.idBAB III PEMBAHASAN 3.1. Analisa Kebutuhan Tahap analisa...

Documents

Transcript of BAB III PEMBAHASAN - repository.bsi.ac.idBAB III PEMBAHASAN 3.1. Analisa Kebutuhan Tahap analisa...