BAB III PEMBAHASAN · 17 BAB III PEMBAHASAN 3.1. Analisis Kebutuhan Sistem Analisis kebutuhan...

17

BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan Sistem

Analisis kebutuhan sistem digunakan untuk mempermudah analis sistem

dalam menentukan keseluruhan yang akan digunakan untuk pembuatan sistem.

Kebutuhan sistem terbagi menjadi dua yaitu kebutuhan fungsional dan kebutuhan

non-fungsional.

3.1.1. Kebutuhan Fungsional

Fungsional adalah jenis kebutuhan yang berisi proses-proses apa saja yang

nantinya dilakukan oleh sistem. Kebutuhan fungsional juga berisi informasi-

informasi apa saja yang harus ada dan dihasilkan oleh sistem.

Berikut ini adalah kebutuhan fungsional dari permainan yang akan dibuat:

1. Permainan dapat menampilkan Splash screen.

2. Pada tampilan dashboard atau menu terdapat tombol fungsi (mulai,

informasi,keluar,sound, Silent).

a. Mulai, berfungsi untuk menampilkan layout menu pilihan permainan

untuk memulai permainan.

b. Sound, berfungsi untuk memberikan efek suara pada permainan.

c. Silent , berfungsi untuk memberikan efek diam pada permainan.

d. Informasi, berfungsi untuk memberikan informasi tentang biodata

developer

e. Petunjuk permainan, berfungsi untuk menampilkan tata cara menjawab

quiz

18

f. Keluar, berfungsi untuk keluar dari permainan

3. Menampilkan menu pemilihan permainan dan pembelajar mata pelajran ipa

4. Menampilkan menu pemilihan permainan dan pembelajar mata pelajran ips

5. Menampilkan permaianan berbentuk quiz tebak gambar mata pelajaran ipa

6. Menampilkan permaianan berbentuk quiz tebak gambar mata pelajaran ips

7. Menampilkan materi pembelajaran ipa

8. Menampilkan materi pembelajaran ips

9. Pemain dapat kembali ke menu utama.

3.1.2. Kebutuhan Non-Fungsional

Analisis kebutuhan non-fungsional merupakan analisis yang berisi properti

apa saja yang digunakan untuk mendukung dalam pembuatan sistem. Dalam

pembuatan permainan ini membutuhkan serangkaian peralatan untuk mendukung

kelancaran saat pembuatan dan pengujian permainan “Marbel IPA dan IPS”

diantaranya sebagai berikut:

1. Perangkat Lunak (Software)

Perangkat Lunak (Software) yang diperlukan dalam pembuatan game

mobile “Marbel IPA dan IPS” untuk Android Phone ini adalah sebagai

berikut:

a. Microsoft Windows 10 (32-bit)

b. Construct 2

c. Android Software Development Kit (Android SDK).

d. Intel XDK

e. CorelDraw

19

1. Perangkat Keras (Hardware)

a. Komputer

Spesifikasi perangkat keras yang digunakan untuk membuat permainan

“Marbel IPA dan IPS Kelas 6 Sekolah Dasar” adalah sebagai berikut:

1. Prosesor: Core 2 Duo(TM) cpu @ 2.1 GHz

2. Memor y : 4GB

3. HDD : 500 GB

4. VGA : Intel(R) HD Graphics.

b. Perangkat Android

Spesifikasi minimal perangkat Android yang dibutuhkan untuk menjalankan

permainan ini adalah sebagai berikut:

1. Ponsel : Ponsel berbasis Android

2. OS : OS 4.0 And roid ( Jelly Bean), Ice Cream Sandwich

(Crisswalk, Kitkat, dan Lollipop.

3. Prosessor : 528 MHz, Qualcomm MSM 7225 chipset.

4. Memory : 512 MB ROM,256 MB RAM.

c. Perangkat Windows

Spesifikasi perangkat Windows yang digunakan untuk menjalankan

permainan ini sebagai berikut:

1. Laptop : OS Windows.

2. OS : OS Windows 32/64 bit (XP, VISTA, 7, 8, dan Windows 10)

3. Aplikasi Beowser : Google Chorome versi 9.0 dan Frifox versi 3.6.13.

20

GAMBAR SPLASH SCREEN

3.2. Perancangan Perangkat Lunak

3.2.1.Rancangan Storyboard

Berikut adalah tampilan Storyboard aplikasi permainan “Marbel IPA dan

IPS

Tabel III. 1. Storyboard Splash Screen dan Layout Utama Aplikasi Game

Edukasi Marbel IPA dan IPS

VISUAL SKETSA AUDIO

Tampilan splash screen beberapa saat sebelum masuk ke menu utama

Layout utama ini berisi judul permainan, tombol “mulai” untuk memulai pilihan permainan, tombol “informasi” untuk melihat biodata pengembang game, tombol “Sound” untuk mengaktifkan suara dan tombol “Silent” untuk menonaktifkan suara permainan, tombol “keluar” untuk keluar dari permainan.

Pembuka.ogg

Judul Permainan

mulai

Permainan

informasi

Permainan

keluar

Logo

IPS

Logo

IPA

21

Tabel III. 2. Storyboard Layout Menampilkan Pilihan Permainan

VISUAL SKETSA AUDIO

Pada layout ini berfungsi untuk menampilkan pilihan permainan, di dalam layout ini terdapat animasi yang akan mengarahkan pemain untuk memilih mata pelajaran ipa / ips, Tombol bertuliskan “logo ips” berfungsi untuk menampilkan quiz beserta pembelajaran untuk mata pelajaran ips, Tombol bertuliskan “logo ips” berfungsi untuk menampilkan quiz beserta pembelajaran untuk mata pelajaran ipa tombol panah atau “Back” berfungsi untuk kembali ke menu pemilihan permainan.

Pilihan.ogg

JUDUL PERMAINAN

Logo

IPS

Logo

IPA ANIMASI

BERGERAK

22

Tabel III. 3. Storyboard Layout Menampilkan Menu Permainan

VISUAL SKETSA AUDIO

Pada tampilan layout berisi pemilihan antara belajar atau langsung bermain, Tombol quiz berfungsi untuk memulai permaiana, Tombol pembelajaran berfungsi untuk menampilkan bab bab berisikan materi pembelajran ips, di dalam layout ini juga terdapat animasi bergerak yang akan menunjukan informasi tentang fungsi setiap tombolnya, tombol panah atau “Back” berfungsi untuk kembali ke menu pemilihan mata pelajaran.

Ipa/Ips.ogg

Logo

IPS

ANIMASI

BERGERAK

quiz

pembelajaran

23

Tabel III. 4. Storyboard Layout Menampilkan Quiz

VISUAL SKETSA AUDIO

Pada tampilan layout berisi tentang permainan quiz ipa/ips yang diberikan waktu 60 detik untuk menjawab pertanyaan, jika berhasil menjawab dengan benar maka akan mendapatkan nilai 10 untuk setiap pertanyaan yang berhasil di jawab, kemudian tombol “Back” di pojok kiri atas berfungsi untuk kembali ke menu Permainan, Tombol kirim berfungsi mengirim text jawaban yang di isi, kemudian tombol skip berfungsi untuk melanjutkan ke soal berikutnya

Keterangan

waktu skor

soal Kotak Jawaban

kirim Skip

24

Tabel III. 5. Storyboard Layout Menampilkan Pilihan Materi Pembelajaran

VISUAL SKETSA AUDIO

Pada tampilan layout ini berisi tentang materi pembelajaran,tombol bertuliskan bab 1 berfungsi untuk menuju ke layout materi pembelajaran, di dalam layout ini juga terdapat animasi bergerak yang akan menunjukan informasi tentang judul pada setiap babnya, tombol panah atau “Back” untuk kembali ke menu pilih permainan atau pembelajaran ipa/ips.

Logo

IPS Bab

1

Bab

2

Bab

3

Bab

4

Bab

5

Bab

6

ANIMASI

BERGERAK

25

Tabel III. 6. Storyboard Layout Menampilkan Materi Pembelajaran

VISUAL SKETSA AUDIO

Pada layout ini

berfungsi untuk

menampilkan

materi

pembelajaran

ipa/ips pada

setiap bab nya

mempunyai

judul yang akan

tertera di bagian

atas , untuk

membaca materi

pada halaman

selanjutnya

dengan cara

mengusap layar

dari kiri ke

bagian kanan,

Tombol panah

atau “Back”

berfungsi untuk

kembali ke

menu pilihan

materi.

Materi pembelajaran

Logo

IPS

Judul materi

pembelajaran

26

Tabel III. 7. Storyboard Layout Menampilkan Akumulasi Permainan

VISUAL SKETSA AUDIO

Pada tampilan layout ini berisi tentang akumulasi dari beberapa pertanyaan yang berhasil dijawab dengan benar, pada layout ini terdapat jumlah skor yang didapatkan, kemudian fungsi 4 bintang pada layout ini adalah sebagai persentase ketepatan dalam menjawab setiap pertanyaan, di dalam layout ini juga terdapat animasi bergerak yang akan menunjukan ekspresi berbeda disetiap jumlah skornya, kemudian tombol berbentuk “4 kotak” pada bagian tengah berfungsi untuk kembali ke menu permainan dan menu pembelajaran.

Animasi

Bergera

k

skor

Ketepatan

Dalam

Menjawab Soal

27

Tabel III. 8. Storyboard Layout Menampilkan Informasi

VISUAL SKETSA AUDIO

Pada tampilan layout berisi tentang biodata developoer, tujuan dan maksud pembuatan aplikasi, pada pojok kiri atas terdapat logo BSI, Tombol panah atau “Back” berfungsi untuk kembali ke menu home.

Biodata developer, naksud

dan tujuan pembuatan

aplikasi

FOTO

28

Tabel III. 9. Storyboard Layout Menampilkan Petunjuk Permainan

VISUAL SKETSA AUDIO

Pada tampilan layout berisi tentang cara menjawab pertanyaan pada menu permainan quiz, Tombol panah atau “Back” berfungsi untuk keluar dari menu petunjuk permainan.

Petunjuk Permainan

29

Tabel III. 10. Storyboard Layout Menampilkan Keluar dari Permainan

VISUAL SKETSA AUDIO

Pada tampilan ini berisi pertanyaan untuk keluar dari aplikasi permainan, jika ingin keluar dari aplikasi maka pilih tombol keluar jika tidak ingin keluar pilih tombol tidak.

ANDA YAKIN INGIN KELUAR ?

KEL

UA

TID

AK

30

3.2.2.Rancangan Antarmuka

Menjelaskan rancangan antarmuka (interface) yang terdapat pada aplikasi

permainan “Marbel IPA dan IPS Kelas 6 Berbasis Android”.

1. Tampilan Splash Screen

Tampilan ini berisi gambar splash screen beberapa detik untuk masuk ke

menu utama.

Gambar III.1

Rancangan Antarmuka Splash Screen

GAMBAR SPLASH SCREEN

31

2. Tampilan Menu Utama

Tampilan ini berisi tentang judul aplikasi, tombol-tombol menu permainan

untuk melihat informasi ini, tombol “mulai” untuk masuk ke layout menu

pilihan permainan untuk memulai permainan, tombol “informasi” untuk

masuk ke layout informasi untuk melihat biodata developer, maksud dan

tujuan pembuatan aplikasi, tombol “Sound” untuk mengaktifkan suara,

tombol “Silent” untuk menonaktifkan suara sedangkan tombol “keluar”

untuk keluar dari permainan.

Gambar III.2

Rancangan Antarmuka Menu Utama

Judul Permainan

mulai

informasi

keluar

Logo IPS Logo IPA

32

3. Tampilan Menu Pemilihan Permainan

Tampilan ini berisi tentang pilihan permainan, di dalam tampilan ini,

terdapat animasi yang akan mengarahkan pemain untuk memilih mata

pelajaran ipa / ips, Tombol bertuliskan “logo ips” berfungsi untuk

menampilkan quiz beserta pembelajaran untuk mata pelajaran ips, Tombol

bertuliskan “logo ipa” berfungsi untuk menampilkan quiz beserta

pembelajaran untuk mata pelajaran ipa, tombol panah atau “Back”

berfungsi untuk kembali ke menu home.

Gambar III.3

Rancangan Antarmuka Menu Pemilihan Permaianan

JUDUL PERMAINAN

Logo IPS Logo IPA

ANIMASI BERGERAK

33

4. Tampilan Menu Permainan

Tampilan ini berisi tentang pemilihan antara belajar atau langsung bermain,

Tombol “quiz” berfungsi untuk memulai permainan, Tombol pembelajaran

berfungsi untuk menampilkan bab – bab berisikan materi pembelajran ips,

di dalam layout ini juga terdapat animasi bergerak yang akan menunjukan

informasi tentang fungsi setiap tombolnya, tombol panah atau “Back”

berfungsi untuk kembali ke menu pilihan permainan.

Gambar III.4

Rancangan Antarmuka Permainan

Logo IPS

ANIMASI

BERGERAK

quiz

pembelajaran

34

5. Tampilan Quiz

Tampilan berisi tentang permainan quiz ipa/ips yang diberikan waktu 60

detik untuk menjawab pertanyaan, jika berhasil menjawab dengan benar

maka akan mendapatkan skor 10 untuk setiap pertanyaan yang berhasil di

jawab, kemudian tombol “Back” di pojok kiri atas berfungsi untuk kembali

ke menu Permainan, Tombol kirim berfungsi mengirim text jawaban yang di

isi, kemudian tombol skip berfungsi untuk melanjutkan ke soal berikutnya.

Gambar III.5

Rancangan Antarmuka Quiz

Keterangan

waktu skor

soal Kotak Jawaban

kirim Skip

35

6. Tampilan Pilihan Materi Pembelajaran

Tampilan ini berisi tentang materi pembelajaran, tombol bertuliskan “bab 1”

berfungsi untuk menuju ke layout materi pembelajaran, di dalam layout ini

juga terdapat animasi bergerak yang akan menunjukan informasi tentang

judul pada setiap babnya, tombol panah atau “Back” untuk kembali ke menu

pilih permainan atau pembelajaran ipa/ips.

Gambar III.6

Rancangan Antarmuka Pilihan Materi Pembelajaran

Logo IPS Bab1 Bab2 Bab3

Bab4 Bab5 Bab6

ANIMASI BERGERAK

36

7. Tampilan Materi Pembelajaran

Tampilan ini berisis tentang materi pembelajaran, pada setiap bab nya

mempunyai judul yang akan tertera di bagian atas, untuk membaca materi

pada halaman selanjutnya dengan cara mengusap layar dari kiri ke bagian

kanan, Tombol panah atau “Back” berfungsi untuk kembali ke menu pilihan

materi pembelajaran.

Gambar III.7

Rancangan Antarmuka Materi Pembelajaran

Materi pembelajaran

Judul materi pembelajaran Logo

IPS

37

8. Tampilan Menu Informasi

Pada tampilan layout berisi tentang biodata developoer, tujuan dan maksud

pembuatan aplikasi, pada pojok kiri atas terdapat logo BSI, Tombol panah

atau “Back” berfungsi untuk keluar dari menu informasi.

Gambar III.8

Rancangan Antarmuka Menu Informasi

Biodata developer, naksud dan tujuan

pembuatan aplikasi

foto

38

9. Tampilan Menu Pentunjuk Permainan

Pada tampilan layout berisi tentang cara menjawab pertanyaan pada menu

permainan quiz, Tombol panah atau “Back” berfungsi untuk keluar dari

menu petunjuk permainan.

Gambar III.9

Rancangan Antarmuka Menu Pentunjuk Permainan

Pentunjuk permainan

39

10. Tampilan Akumulasi Permainan

Tampilan ini berisi tentang akumulasi dari beberapa pertanyaan yang

berhasil dijawab dengan benar, pada layout ini terdapat jumlah skor yang

didapatkan oleh pemain, kemudian fungsi 4 bintang pada layout ini adalah

sebagai persentase ketepatan dalam menjawab setiap pertanyaan, di dalam

layout ini juga terdapat animasi bergerak yang akan menunjukan ekspresi

berbeda disetiap jumlah skor dan bintang yang di dapat, kemudian tombol

“Back” di pojok kiri atas berfungsi untuk kembali ke menu Permainan.

Gambar III.10

Rancangan Antarmuka Akumulasi Permainan

Animasi

Bergerak

skor

Ketepatan Dalam Menjawab

Soal

40

11. Tampilan Menu Close

Pada tampilan ini berisi pertanyaan untuk keluar dari aplikasi permainan,

jika ingin keluar dari aplikasi maka pilih tombol keluar jika tidak ingin

keluar pilih tombol tidak.

Gambar III.11

Rancangan Antarmuka Menu Close

ANDA YAKIN INGIN KELUAR ?

KELUAR TIDAK

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

1. Tampilan Splash Screen

Tampilan ini berisi gambar

menu utama.

Implementasi dan Pengujian Unit

Splash Screen

Tampilan ini berisi gambar splash screen beberapa detik untuk masuk k

Gambar III.12

Tampilan Splash Screen

41

beberapa detik untuk masuk ke

2. Tampilan Menu utama

Tampilan ini berisi tentang judul aplikasi, tombol

untuk melihat informasi ini, tombol “

pilihan permainan untuk memulai permainan, tombol “

memberikan efek suara, tombol “

sedangkan tombol “

Tampilan Menu utama

ini berisi tentang judul aplikasi, tombol-tombol menu permainan

untuk melihat informasi ini, tombol “Mulai” untuk masuk ke

pilihan permainan untuk memulai permainan, tombol “

memberikan efek suara, tombol “Silent” untuk menghilangkan efek suara

sedangkan tombol “Keluar” untuk keluar dari permainan.

Gambar III.13

Tampilan Menu Utama

42

tombol menu permainan

untuk masuk ke layout menu

pilihan permainan untuk memulai permainan, tombol “Sound” untuk

” untuk menghilangkan efek suara

3. Tampilan Menu

Tampilan ini berisi tentang



menampilkan quiz beserta pembelajaran untuk mata pelajaran ips,

bertuliskan “logo ipa

pembelajaran untuk mata pelajaran ipa


Tampilan Menu Pemilihan Permainan

berisi tentang pilihan permainan, di dalam tampilan



menampilkan quiz beserta pembelajaran untuk mata pelajaran ips,

bertuliskan “logo ipa” berfungsi untuk menampilkan quiz beserta

pembelajaran untuk mata pelajaran ipa, tombol panah atau “


Gambar III.14

Tampilan Pemilihan Permainan

43

, di dalam tampilan ini,



menampilkan quiz beserta pembelajaran untuk mata pelajaran ips, Tombol

an quiz beserta

, tombol panah atau “Back”

4. Tampilan Menu Permainan

Tampilan ini berisi

Tombol “quiz” berfungsi untuk memulai permainan, Tombol pembelajaran

berfungsi untuk menampilkan bab

di dalam layout

informasi tentang fun


Tampilan Menu Permainan

berisi tentang pemilihan antara belajar atau langsung bermain,

” berfungsi untuk memulai permainan, Tombol pembelajaran

berfungsi untuk menampilkan bab – bab berisikan materi pembelajran ips,

layout ini juga terdapat animasi bergerak yang akan menunjukan

informasi tentang fungsi setiap tombolnya, tombol panah atau “


Gambar III.15

Tampilan Menu Permainan

44

langsung bermain,

” berfungsi untuk memulai permainan, Tombol pembelajaran

bab berisikan materi pembelajran ips,

ini juga terdapat animasi bergerak yang akan menunjukan

gsi setiap tombolnya, tombol panah atau “Back”

5. Tampilan Permainan

Tampilan berisi tentang permainan



jawab, kemudian tombol “

ke menu Permainan

isi, kemudian tombol skip berfungsi untuk melanjutkan ke soal berikutnya

Tampilan Permainan Quiz

Tampilan berisi tentang permainan quiz ipa/ips yang diberikan waktu 60



mudian tombol “Back” di pojok kiri atas berfungsi untuk

ermainan, Tombol kirim berfungsi mengirim text

, kemudian tombol skip berfungsi untuk melanjutkan ke soal berikutnya

Gambar III.16

Tampilan Permainan Quiz

45

ipa/ips yang diberikan waktu 60



” di pojok kiri atas berfungsi untuk kembali

jawaban yang di

, kemudian tombol skip berfungsi untuk melanjutkan ke soal berikutnya .

6. Tampilan Pilihan Materi Pembelajaran

Tampilan ini berisi tentang

berfungsi untuk menuju ke


judul pada setiap babnya,

menu permainan.

Tampilan

Tampilan Pilihan Materi Pembelajaran

berisi tentang materi pembelajaran, tombol bertuliskan “bab 1”

berfungsi untuk menuju ke layout materi pembelajaran, di dalam layout ini


judul pada setiap babnya, kan, tanda panah atau “Back” akan

permainan.

Gambar III.17

Tampilan Pilihan Materi Pembelajaran

46

tombol bertuliskan “bab 1”

materi pembelajaran, di dalam layout ini


akan kembali ke

7. Tampilan Materi Pembelajaran


mempunyai judul yang akan terte

4 buah di bagian pojok kanan atas

peilihan materi pembelajaran.

Tampilan Permainan

Materi Pembelajaran


mempunyai judul yang akan tertera di bagian atas , tombol berbentuk kotak

4 buah di bagian pojok kanan atas atau “menu” akan kembali ke menu

peilihan materi pembelajaran.

Gambar III.18

Tampilan Permainan Materi Pembelajaran

47


ra di bagian atas , tombol berbentuk kotak

” akan kembali ke menu

48

8. Tampilan Menu Informasi

Tampilan ini berisi tentang biodata developoer, tujuan dan maksud

pembuatan aplikasi, pada pojok kiri atas terdapat logo BSI, Tombol panah

atau “Back” berfungsi untuk keluar dari menu informasi.

Gambar III.19

Tampilan Menu Informasi

9. Tampilan Menu Petunjuk Permainan

Pada tampilan

permainan quiz

menu petunjuk permainan

Tampilan Menu

Menu Petunjuk Permainan

Pada tampilan layout berisi tentang cara menjawab pertanyaan pada menu

permainan quiz, Tombol panah atau “Back” berfungsi untuk keluar dari

menu petunjuk permainan..

Gambar III.20

Tampilan Menu Pentunjuk Permainan

49

cara menjawab pertanyaan pada menu

” berfungsi untuk keluar dari

10. Tampilan Menu Akumulasi

Tampilan ini

berhasil dijawab dengan benar, pada

didapatkan oleh pemain



berbeda disetiap jumlah skor dan bintang yang di dapat

panah atau “Back

Tampilan Menu Akumulasi Permainan

Menu Akumulasi Permainan

berisi tentang akumulasi dari beberapa pertanyaan yang

berhasil dijawab dengan benar, pada layout ini terdapat jumlah skor yang

oleh pemain, kemudian fungsi 4 bintang pada layout ini adalah



berbeda disetiap jumlah skor dan bintang yang di dapat, kemud

Back” berfungsi untuk kembali ke menu permainan

Gambar III.21

Tampilan Menu Akumulasi Permainan

50

berisi tentang akumulasi dari beberapa pertanyaan yang

ini terdapat jumlah skor yang

, kemudian fungsi 4 bintang pada layout ini adalah


layout ini juga terdapat animasi bergerak yang akan menunjukan ekspresi

, kemudian Tombol

menu permainan.

11. Tampilan Menu Keluar


jika ingin keluar dari aplikasi


Menu Keluar


jika ingin keluar dari aplikasi maka pilih tombol keluar jika tidak ingin


Gambar III.22

Tampilan Permainan Menu Keluar

51


maka pilih tombol keluar jika tidak ingin

3.3.2. Pengujian Unit

1. Blackbox Testing

Pengujian terhadap program yang di buat menggunakan

yang fokus terhadap

Pengujian Unit :

Input/

Event

Tombol

“Play”

Tampilan

Tombol

“Sound on”

Tampilan

Tombol

“Sound off”

Tampilan

3.3.2. Pengujian Unit

box Testing

Pengujian terhadap program yang di buat menggunakan blackbox testing

yang fokus terhadap proses masukan dan keluaran program.

Pengujian Unit :

Tabel.III.11. Event Home

Hasil Pengujian Blackbox Testing

Proses Output/next stege

Gambar III.23

Tampilan Event Tombol mulai

Menampil

kan menu

pemilihan

permainan

Gambar III.24

Tampilan Event Tombol Sound On

Mengaktif

kan suara

permainan

Gambar III.25

Tampilan Event Tombol Sound Off

Menonakti

fkan suara

permainan

52

blackbox testing

Output/next stege

Hasil Pengujian

Menampil

kan menu

pemilihan

permainan

Sesuai

Mengaktif

kan suara

permainan

Sesuai

onakti

n suara

permainan

Sesuai

Tombol

“Informasi”

Tampilan

Tombol

“Keluar”

Tampilan

Tombol “Logo IPA”

Tampilan

Tombol “Logo IPS

Tampilan

Gambar III.26

Tampilan Event Tombol Informasi

Menampil

kan layout

Informasi

Gambar III.27

Tampilan Event Tombol Keluar

Menampil

kan layout

keluar

Gambar III.28

Tampilan Event Tombol Logo IPA

Menampilkan

Layout menu

permainan IPA

Gambar III.29

Tampilan Event Tombol Logo IPS

Menampilkan

Layout menu

permainan IPS

53

Menampil

layout

Informasi

Sesuai

Menampil

layout

keluar

Sesuai

Menampilkan

Layout menu

permainan IPA

Sesuai

Menampilkan

Layout menu

permainan IPS

Sesuai

Tombol “Back”

Tampilan

Tabel.III.12.

Input/

Event

Tombol

“Quiz”

Tombol

“Pembelajara

n”

Tampilan

Tombol

“back”

Tampilan

Gambar III.30

Tampilan Event Tombol Kembali

Menampilkan

Layout menu Home

Tabel.III.12. Event Menu Permainan IPS



Gambar III.31

Tampilan Event Tombol Quiz

Menampil

kan layout

permainan

Gambar III.32

Tampilan Event Tombol Pembelajaran

Menampil

kan

Layout

Pilihan

Materi

Pembelaja

ran

Gambar III.33

Tampilan Event Tombol Back

Menampil

kan

Layout

pilihan

permainan

54

Menampilkan

Layout menu Home

Sesuai

Output/next stege

Hasil Pengujian

Menampil

layout

permainan

Sesuai

Menampil

kan

Layout

Pilihan

Materi

Pembelaja

Sesuai

Menampil

kan

Layout

pilihan

permainan

Sesuai

Tombol

“Bab1”

Tampilan

Tombol

“Bab2”

Tampilan

Tombol “Bab3”

Tampilan

Tombol “Bab4”

Tampilan

Gambar III.34

Tampilan Event Tombol Bab1

Menampil

kan layout

Materi

Pembelaja

ran Bab1

Gambar III.35


Menampil

kan layout

Materi

Pembelaja

ran Bab2

Gambar III.36


Menampilkan layout

Materi Pembelajaran Bab3

Gambar III.37


Menampilkan layout


55

Menampil

layout

Materi

Pembelaja

Bab1

Sesuai

Menampil

layout

Materi

Pembelaja

ran Bab2

Sesuai

Menampillayout


Sesuai

Menampillayout


Sesuai

Tombol “Bab5”

Tampilan

Tombol “Back”

Tampilan

Tabel.III.13

Input/

Event

Tombol

“Quiz”

Gambar III.38


Menampilkan layout


Gambar III.39


Menampilkan

Layout menu

Permainan

Tabel.III.13. Event Menu Permainan IPA



Gambar III.40

Tampilan Event Tombol Quiz

Menampil

kan layout

permainan

56

Menampillayout


Sesuai

Menampilkan

Layout menu

Permainan

Sesuai

Output/next stege

Hasil Pengujian

Menampil

layout

permainan

Sesuai

Tombol

“Pembelajara

n”

Tampilan

Tombol

“back”

Tampilan

Tombol

“Bab1”

Tampilan

Tombol“Bab

2”

Tampilan

Gambar III.41

Tampilan Event Tombol Pembelajaran

Menampil

kan

Layout

Pilihan

Materi

Pembelaja

ran

Gambar III.42

Tampilan Event Tombol Back

Menampil

kan

Layout

pilihan

permainan

Gambar III.43


Menampil

kan layout

Materi

Pembelaja

ran Bab1

Gambar III.44


Menampil

kan layout

Materi

Pembelaja

ran Bab2

57

Menampil

kan

Layout

Pilihan

Materi

Pembelaja

Sesuai

Menampil

kan

Layout

pilihan

permainan

Sesuai

Menampil

layout

Materi

Pembelaja

ran Bab1

Sesuai

Menampil

layout

Materi

Pembelaja

ran Bab2

Sesuai

Tombol “Bab3”

Tampilan

Tombol “Bab4”

Tampilan

Tombol “Bab5”

Tampilan

Tombol “Bab6”

Tampilan

Gambar III.45


Menampilkan layout


Gambar III.46


Menampilkan layout


Gambar III.47


Menampilkan layout


Gambar III.48


Menampilkan layout


58

Menampillayout


Sesuai

Menampillayout


Sesuai

Menampillayout


Sesuai

Menampillayout


Sesuai

Tombol “Bab7”

Tampilan

Tombol “Back”

Tampilan

Gambar III.49


Menampilkan layout


Gambar III.50


Menampilkan

Layout menu

Permainan

59

Menampillayout


Sesuai

Menampilkan

Layout menu

Permainan

Sesuai

Input/

Event

Tombol

“Kirim”

Tombol

“Skip”

Tampilan

3.4. Compilasi Project

1. Halaman Construct 2

a. Pada halaman construct 2 pengaturan terlebih dahulu pada

project. Mulai dari

setings.

Tabel.III.14. Event Quiz



Gambar III.51

Tampilan Event Tombol Skip

Melanjutk

an Ke Soal

Selanjutny

a

Gambar III.52

Tampilan Event Tombol Kirim

Mengirim

jawaban

Project

Halaman Construct 2

Pada halaman construct 2 pengaturan terlebih dahulu pada

. Mulai dari about project, project settings dan

60

Output/next stege

Hasil Pengujian

Melanjutk

an Ke Soal

Selanjutny

Sesuai

Mengirim

jawaban

Sesuai

Pada halaman construct 2 pengaturan terlebih dahulu pada properties

dan configuration

Tampilan Compilasi

b. Jika telah selesai pengaturan

terdapat banyak pilihan didalam file tersebut. Pilih yang

Tampilan Compilasi

Gambar III.53

Tampilan Compilasi Project Pada Halaman Construct 2

Jika telah selesai pengaturan properties project, selanjutnya pilih file dan

terdapat banyak pilihan didalam file tersebut. Pilih yang export project

Gambar III.54

Tampilan Compilasi Export Project Construct 2

61

Pada Halaman Construct 2

selanjutnya pilih file dan

export project.

Construct 2

c. Jika telah ditekan

platform cardova.

d. Tekan platform

hasil export

export silahkan tekan

Tampilan Tempat Penyimpanan Folder

Jika telah ditekan export project maka muncul halaman

cardova.

Gambar III.55

Tampilan Compilasi Platform To Export To

platform cardova maka muncul halaman tempat penyimpanan

export folder. Jika telah selesai membuat tempat penyimpan hasil

silahkan tekan next.

Gambar III.56

Tampilan Tempat Penyimpanan Folder Export Project

62

cul halaman export, pilih

Platform To Export To

cardova maka muncul halaman tempat penyimpanan

folder. Jika telah selesai membuat tempat penyimpan hasil

Export Project

e. Setelah membuat tempat penyimpanan folrder

halaman cardova

ini adalah berfungsi untuk menentukan apakah andr

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

bagian minimum supported

operasi (OS) terendah pada

tombol export.

Tampilan Proses

Setelah membuat tempat penyimpanan folrder export

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

ini adalah berfungsi untuk menentukan apakah android atau ios yang


minimum supported 0Ssini adalah untuk menentukan sistem

operasi (OS) terendah pada smartphone. Jika telah selesai maka tekan

export.

Gambar III.57

Tampilan Export Project Construct 2

Gambar III.58

Tampilan Proses Exporting Project Construct 2

63

export maka muncul

bagian export audio file for

oid atau ios yang


0Ssini adalah untuk menentukan sistem

. Jika telah selesai maka tekan

Construct 2

f. Jika telah selesai

construct 2. Buat folder menjadi file zip. File dalam bentuk zip akan di

compilasi menjadi bentuk apk.

2. Halaman Compilasi Cocoonio

Pada halaman Cocoonio dilakukan proses compilasi project menjadi bentuk

apk sehingga dapat dijalankan pada android maupun ios. Drop file zip ke

dalam kotak cocoonio sehingga file zip di

Jika telah selesai export project maka muncul folder hasil


compilasi menjadi bentuk apk.

Gambar III.59

Tampilan Hasil Exporting Project Construct 2

Halaman Compilasi Cocoonio



dalam kotak cocoonio sehingga file zip di upload secara otomatis

Gambar III.60

Tampilan Upload File Zip

64

maka muncul folder hasil export pada


Construct 2



secara otomatis.

3. Halaman compilasi Pengaturan

Pada halaman ini adalah pengaturan pada android dan ios. Mulai dari

pengaturan versi, nama, icon aplikasi, versi SDK android hingga

memasukan signature keystore

(Play Store).

Tampilan Compilasi Pengaturan Project Pada Cocoon.io

an compilasi Pengaturan Project Pada Cocoon.io



signature keystore agar dapat di publikasikan ke

Gambar III.61


65



agar dapat di publikasikan ke geogle play


4. Halaman Compilasi

Pada halaman ini adalah proses compilasi

Tampilan Proses Compilasi

5. Halaman Selesai Compilasi

Pada halaman ini adalah muncul tulisan pada icon android

bahwa compilasi

completed untuk mendownload

Tampilan Comp

Halaman Compilasi Project Pada Cocoon.io

Pada halaman ini adalah proses compilasi project .

Gambar III.62

Tampilan Proses Compilasi Project Pada Cocoon.io

Halaman Selesai Compilasi Project Pada Cocoon.io

Pada halaman ini adalah muncul tulisan pada icon android

bahwa compilasi project tersebut telah berhasil. Tekan pada icon android

untuk mendownload project.

Gambar III.63

Tampilan Compilasi Android Completed Pada Cocoon.io

66

Pada Cocoon.io

Pada halaman ini adalah muncul tulisan pada icon android completed,

tersebut telah berhasil. Tekan pada icon android

Pada Cocoon.io

6. Hasil Download Project

Hasil download tersebut berbentuk file zip, maka harus di

tersebut. Jika telah berhasil maka file tersebut bnetuk file apk.

Hasil Download Project

Hasil download tersebut berbentuk file zip, maka harus di


Gambar III.64

Hasil Compilasi Project File A

67

Hasil download tersebut berbentuk file zip, maka harus di extract file zip


BAB III PEMBAHASAN · 17 BAB III PEMBAHASAN 3.1. Analisis Kebutuhan Sistem Analisis kebutuhan...

Documents

Transcript of BAB III PEMBAHASAN · 17 BAB III PEMBAHASAN 3.1. Analisis Kebutuhan Sistem Analisis kebutuhan...