bab iii pembahasan · 17 bab iii pembahasan 3.1. analisis kebutuhan sistem analisis kebutuhan...
TRANSCRIPT
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
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,
bertuliskan “logo ipa
pembelajaran untuk mata pelajaran ipa
berfungsi untuk kembali ke menu home.
Tampilan Menu Pemilihan Permainan
berisi tentang pilihan permainan, di dalam tampilan
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,
bertuliskan “logo ipa” berfungsi untuk menampilkan quiz beserta
pembelajaran untuk mata pelajaran ipa, tombol panah atau “
berfungsi untuk kembali ke menu home.
Gambar III.14
Tampilan Pemilihan Permainan
43
, 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
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
berfungsi untuk kembali ke menu pilihan permainan.
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 “
berfungsi untuk kembali ke menu pilihan permainan.
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
detik untuk menjawab pertanyaan, jika berhasil menjawab dengan benar
maka akan mendapatkan skor 10 untuk setiap pertanyaan yang berhasil di
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
detik untuk menjawab pertanyaan, jika berhasil menjawab dengan benar
maka akan mendapatkan skor 10 untuk setiap pertanyaan yang berhasil di
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
detik untuk menjawab pertanyaan, jika berhasil menjawab dengan benar
maka akan mendapatkan skor 10 untuk setiap pertanyaan yang berhasil di
” 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
juga terdapat animasi bergerak yang akan menunjukan informasi tentang
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
juga terdapat animasi bergerak yang akan menunjukan informasi tentang
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
juga terdapat animasi bergerak yang akan menunjukan informasi tentang
akan kembali ke
7. Tampilan Materi Pembelajaran
Tampilan ini berisis tentang materi pembelajaran, pada setiap bab nya
mempunyai judul yang akan terte
4 buah di bagian pojok kanan atas
peilihan materi pembelajaran.
Tampilan Permainan
Materi Pembelajaran
Tampilan ini berisis tentang materi pembelajaran, pada setiap bab nya
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
Tampilan ini berisis tentang materi pembelajaran, pada setiap bab nya
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
sebagai persentase ketepatan dalam menjawab setiap pertanyaan, di dalam
layout ini juga terdapat animasi bergerak yang akan menunjukan
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
sebagai persentase ketepatan dalam menjawab setiap pertanyaan, di dalam
layout ini juga terdapat animasi bergerak yang akan menunjukan
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
sebagai persentase ketepatan dalam menjawab setiap pertanyaan, di dalam
layout ini juga terdapat animasi bergerak yang akan menunjukan ekspresi
, kemudian Tombol
menu permainan.
11. Tampilan Menu Keluar
Pada tampilan ini berisi pertanyaan untuk keluar dari aplikasi permainan,
jika ingin keluar dari aplikasi
keluar pilih tombol tidak.
Menu Keluar
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.22
Tampilan Permainan Menu Keluar
51
Pada tampilan ini berisi pertanyaan untuk keluar dari aplikasi permainan,
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
Hasil Pengujian Blackbox Testing
Proses Output/next stege
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
Tampilan Event Tombol Bab2
Menampil
kan layout
Materi
Pembelaja
ran Bab2
Gambar III.36
Tampilan Event Tombol Bab3
Menampilkan layout
Materi Pembelajaran Bab3
Gambar III.37
Tampilan Event Tombol Bab4
Menampilkan layout
Materi Pembelajaran Bab4
55
Menampil
layout
Materi
Pembelaja
Bab1
Sesuai
Menampil
layout
Materi
Pembelaja
ran Bab2
Sesuai
Menampillayout
Materi Pembelajaran Bab3
Sesuai
Menampillayout
Materi Pembelajaran Bab4
Sesuai
Tombol “Bab5”
Tampilan
Tombol “Back”
Tampilan
Tabel.III.13
Input/
Event
Tombol
“Quiz”
Gambar III.38
Tampilan Event Tombol Bab5
Menampilkan layout
Materi Pembelajaran Bab5
Gambar III.39
Tampilan Event Tombol Kembali
Menampilkan
Layout menu
Permainan
Tabel.III.13. Event Menu Permainan IPA
Hasil Pengujian Blackbox Testing
Proses Output/next stege
Gambar III.40
Tampilan Event Tombol Quiz
Menampil
kan layout
permainan
56
Menampillayout
Materi Pembelajaran Bab5
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
Tampilan Event Tombol Bab1
Menampil
kan layout
Materi
Pembelaja
ran Bab1
Gambar III.44
Tampilan Event Tombol Bab2
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
Tampilan Event Tombol Bab3
Menampilkan layout
Materi Pembelajaran Bab3
Gambar III.46
Tampilan Event Tombol Bab4
Menampilkan layout
Materi Pembelajaran Bab4
Gambar III.47
Tampilan Event Tombol Bab5
Menampilkan layout
Materi Pembelajaran Bab5
Gambar III.48
Tampilan Event Tombol Bab6
Menampilkan layout
Materi Pembelajaran Bab6
58
Menampillayout
Materi Pembelajaran Bab3
Sesuai
Menampillayout
Materi Pembelajaran Bab4
Sesuai
Menampillayout
Materi Pembelajaran Bab5
Sesuai
Menampillayout
Materi Pembelajaran Bab6
Sesuai
Tombol “Bab7”
Tampilan
Tombol “Back”
Tampilan
Gambar III.49
Tampilan Event Tombol Bab7
Menampilkan layout
Materi Pembelajaran Bab7
Gambar III.50
Tampilan Event Tombol Kembali
Menampilkan
Layout menu
Permainan
59
Menampillayout
Materi Pembelajaran Bab7
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
Hasil Pengujian Blackbox Testing
Proses Output/next stege
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
akan dijadikan file apk. Centang salah satu pilihan tersebut. Pada
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
akan dijadikan file apk. Centang salah satu pilihan tersebut. Pada
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
construct 2. Buat folder menjadi file zip. File dalam bentuk zip akan di
compilasi menjadi bentuk apk.
Gambar III.59
Tampilan Hasil Exporting Project Construct 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 upload secara otomatis
Gambar III.60
Tampilan Upload File Zip
64
maka muncul folder hasil export pada
construct 2. Buat folder menjadi file zip. File dalam bentuk zip akan di
Construct 2
Pada halaman Cocoonio dilakukan proses compilasi project menjadi bentuk
apk sehingga dapat dijalankan pada android maupun ios. Drop file zip ke
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
Pada halaman ini adalah pengaturan pada android dan ios. Mulai dari
pengaturan versi, nama, icon aplikasi, versi SDK android hingga
signature keystore agar dapat di publikasikan ke
Gambar III.61
Tampilan Compilasi Pengaturan Project Pada Cocoon.io
65
Pada halaman ini adalah pengaturan pada android dan ios. Mulai dari
pengaturan versi, nama, icon aplikasi, versi SDK android hingga
agar dapat di publikasikan ke geogle play
Tampilan Compilasi Pengaturan Project Pada Cocoon.io
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
tersebut. Jika telah berhasil maka file tersebut bnetuk file apk.
Gambar III.64
Hasil Compilasi Project File A
67
Hasil download tersebut berbentuk file zip, maka harus di extract file zip
tersebut. Jika telah berhasil maka file tersebut bnetuk file apk.