0% menganggap dokumen ini bermanfaat (0 suara)
85 tayangan32 halaman

Bab 3

Ringkasan dokumen tersebut adalah: 1. Dokumen tersebut membahas analisis perangkat lunak dan desain aplikasi game edukasi pengenalan tokoh kemerdekaan Indonesia. 2. Terdapat penjelasan mengenai perangkat lunak yang digunakan seperti Windows, Android Studio, dan Android SDK. 3. Desain aplikasi mencakup struktur navigasi, perancangan UML, serta tampilan-tampilan seperti splash screen, home, learn, quiz, dan about.

Diunggah oleh

Rafilio dwiyanov
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
85 tayangan32 halaman

Bab 3

Ringkasan dokumen tersebut adalah: 1. Dokumen tersebut membahas analisis perangkat lunak dan desain aplikasi game edukasi pengenalan tokoh kemerdekaan Indonesia. 2. Terdapat penjelasan mengenai perangkat lunak yang digunakan seperti Windows, Android Studio, dan Android SDK. 3. Desain aplikasi mencakup struktur navigasi, perancangan UML, serta tampilan-tampilan seperti splash screen, home, learn, quiz, dan about.

Diunggah oleh

Rafilio dwiyanov
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 32

BAB III

PEMBAHASAN

3.1. Analisa Perangkat Lunak


Perangkat lunak yang digunakan dalam penulisan ini adalah sebagai berikut:
1. Microsoft Windows 11
Sistem operasi yang digunakan untuk pembuatan aplikasi “Game Edukasi
Pengenalan Tokoh Kemerdekaan Indonesia” adalah Microsoft Windows 11
2. Android Studio Versi 3.1
Android Studio merupakan perangkat lunak yang digunakan untuk
melakukan tahap pengembangan aplikasi “Game Edukasi Pengenalan Tokoh
Kemerdekaan Indonesia”.
3. Android SDK
Android SDK merupakan package yang diperlukan dalam pembuatan project
android.

3.2. Desain Aplikasi


Pada sub bab ini menjelaskan tentang perancangan aplikasi dari aplikasi yang
dibuat. Rancangan ini mengidentifikasi komponen-komponen sistem informasi yang
akan dirancang secara rinci. Adapun rancangan sistem ini adalah sebagai berikut:
3.2.1. Struktur Navigasi
Pada aplikasi ini struktur navigasi yang digunakan adalah struktur navigasi
campuran. Struktur navigasi untuk aplikasi dalam penulisan ilmiah ini dapat
dilihat pada Gambar 3.1.

24
25

Gambar 3.1 Struktur Navigasi Game Edukasi Pengenalan Tokoh Kemerdekaan


Indonesia

Berikut ini merupakan penjelasan untuk Gambar 3.1:


1. Splash Screen
Tampilan awal yang muncul untuk beberapa detik ketika aplikasi dibuka.
2. Tampilan Homescreen
Tampilan beranda aplikasi
3. Tampilan Learn
Tampilan aplikasi yang terdiri list materi.
4. Tampilan Material
Tampilan yang berisi detail materi.
5. Tampilan Quiz
Tampilan yang berisikan pertanyaan-pertanyaan quiz.
26

6. Tampilan Result
Tampilan yang berisikan nilai yang telah dihasilkan dari menjawab pertanyaan
quiz tersebut.
7. Retry
Tombol untuk mengulangi quiz.
8. Back To Home
Button untuk mengembalikan kita ke Homescreen
9. Tampilan About
Tampilan yang berisikan informasi tentang aplikasi ini.
3.2.2. Perancangan UML
Perancangan aplikasi yang digunakan dalam pembuatan aplikasi ini adalah
dengan menggunakan Unified Modelling Language (UML). Adapun perancangan
yang digunakan meliputi:
1. Perancangan Use Case Diagram
2. Perancangan Activity Diagram
3.2.2.1. Use Case Diagram
Use case diagram aplikasi Negara Asia dapat dilihat pada gambar 3.2 berikut.

Gambar 3.2 Use Case Game Edukasi Pengenalan Tokoh Kemerdekaan Indonesia
27

Use case diagram Game Edukasi Pengenalan Tokoh Kemerdekaan


Indonesia menampilkan bahwa ada satu pengguna yang akan menggunakan
aplikasi ini yaitu user. Fungsi yang disediakan oleh aplikasi ini untuk user
adalah melihat penjelasan materi mengenai Tokoh Kemerdekaan Indonesia, dan
menyediakan quiz untuk user.

3.2.2.2. Activity Diagram


Activity diagram aplikasi ini dapat dilihat pada gambar 3.3 berikut.

Gambar 3.3 Activity Diagram Game Edukasi Pengenalan Tokoh Kemerdekaan


Indonesia
Activity diagram aplikasi ini menampilkan alur saat user memakai
aplikasi ini.
28

3.2.3. Perancangan Splash Screen

Gambar 3.4 Rancangan Tampilan Splash Screen

Tampilan Splash Screen dapat dilihat pada gambar 3.4. Splash Screen
adalah tampilan yang pertama kali ditampilkan setiap kali pengguna menjalankan
aplikasi dan hanya muncul selama beberapa detik sebelum menampilkan tampilan
utama selanjutnya yaitu tampilan dari menu home.

3.2.4. Perancangan Tampilan Home


Tampilan ini merupakan halaman utama dari aplikasi ini dimana pengguna
dapat melihat pilihan yang disediakan di aplikasi ini:
29

Gambar 3.5 Perancangan Tampilan Home

Pada tampilan home dirancang untuk menampilkan foto kemerdekaan dan


pilihan yang dapat dilihat pada gambar

3.2.5. Perancangan Tampilan Learn


Tampilan ini merupakan halaman kedua yang mencul ketika pindah
kemenu Learn akan menampilkan list material yang akan menampilkan Materials
jika listnya ditekan. Rancangannya adalah sebagai berikut:

Gambar 3.6 Perancangan Tampilan Learn dan Material


30

Pada tampilan Material ini menampilakan informasi lengkap yang berisi dari
profil dari masing-masing Tokoh Kemerdekaan Indonesia.

3.2.6. Perancangan Tampilan Quiz


Tampilan ini merupakan halaman yang menampilkan soal-soal untuk
latihan yang dapat dilihat pada gambar 3.7 :

Gambar 3.7 Perancangan Tampilan Quiz

Ketika kita berpindah kehalaman quiz seperti gambar 3.7 yang akan muncul
button “Mulai” ketika kita menekan mulai kita akan berpindah kehalaman
selanjutnya yang akan menampilkan pertanyaan dan juga jawabannya, setelah kita
menjawab semua pertanyaan kita akan mendapat kan nilai berapa banyak benar
kita mengisi quis tersebut.

3.2.7. Perancangan Tampilan About


Tampilan ini merupakan halaman yang menampilkan tentang aplikasi ini
beserta gambar 3.8:
31

Gambar 3.8 Perancangan Tampilan About

3.3. Pembuatan Kode Program


Pada tahap ini akan dijelaskan mengenai langkah-langkah pembuatan aplikasi
“Edukasi Informasi Negara-negara di Asia” menggunakan Android Studio meliputi
pembuatan project aplikasi, dan pembuatan tampilan-tampilan yang dibutuhkan.
Berikut langkah-langkah yang dilakukan:

3.3.1. Pembuatan Aplikasi


Dalam pembuatan aplikasi ini software yang digunakan adalah Android
Studio versi 3.1. Adapun langkah untuk membuat project di Android Studio
adalah sebagai berikut :
1. Buka aplikasi Android Studio yang telah di install
2. Klik menu File → New →New Project
3. Isi nama aplikasi dengan PembelajaranHewan, pilih tempat dimana project
akan disimpan,lalu kliknext
4. Ganti device phoneand tablet dengan minimum SDK API 18: Android 4.3
(JellyBean) lalu klik next
5. Pada bagian Add an Activity to Mobile pilih Empty Activity lalu kliknext
6. Beri nama Splashscreenpada Activity Name lalu klik tombol finish
32

3.3.2. Pembuatan Halaman Splash Screen


Halaman splash screen merupakan halaman yang muncul pertama kali saat
membuka aplikasi ini.Dalam pembuatan halaman splash screen dibutuhkan listing
program pada layout activity_splashscreen.xml dan splashscreen.java.Adapun
listing program yang digunakan adalah sebagai berikut :
• Activity_splashscreen.xml

Gambar 3.9 Tampilan Pembuatan halaman Splashscreen

Listing program di atas digunakan untuk mendesain tampilan pada halaman


splash screen. Pada halaman ini terdapat background dan progress bar yang
berada di tengah dan akan terus berputar selama 3 detik.
33

• Splashscreen.java

Gambar 3.10 Tampilan pengaturan Splashscreen


Listing program di atas berfungsi untuk menentukan lamanya tampilan splash
screen. Tampilan splash screen ini akan ditampilkan selama 3 detik dan setelah itu
akan berpindah ke tampilan menu utama.
34

Gambar 3.11 Tampilan Halaman Splash Screen

3.3.3. Pembuatan Halaman Home


Halaman Home merupakan halaman yang muncul setelah halaman splash
screen.Dalam pembuatan halaman menu utama dibutuhkan listing program pada
layout activity_menu.xml dan menu.java.Adapun listing program yang digunakan
adalah sebagai berikut :
35

• Activity_Home.xml

Gambar 3.12 Tampilan pembuatan halaman home


Listing program di atas berfungsi untuk mendesain tampilan pada button
navigasi dibawah,yang berfungsi untuk berpindah halaman.
36

• Home.java

Gambar 3.13 Tampilan Perancangan Navigasi

Berdasarkan listing program di atas, memberikan listener saat menu item di


bottom navigation diklik, bottom navigasi yaitu Home, Learn, Quiz, More.
37

Gambar 3.14 Tampilan Halaman Menu Utama


3.3.4. Pembuatan Halaman Learn
Halaman learn merupakan halaman yang muncul jika user memilih
navigasi learn pada menu home. Dalam pembuatan halaman learn dibutuhkan
listing program pada layout activity_learn.xml dan learn.java.Adapun listing
program yang digunakan adalah sebagai berikut :
38

• Activity_learn.xml

Gambar 3.15 Tampilan Perancangan menu learn

Listing program di atas berfungsi untuk mendesain tampilan pada


halaman learn. Program di atas digunakan untuk membuat activity untuk bagian
negara Indonesia sehingga pada tampilan learn akan menampilkan bendera
Indonesia yang di panggil dari drawable dan juga dibagian text view berfungsi
untuk memberi tahu nama dari negara.
• Learnfragment.java

Gambar 3.16 Tampilan Perancangan image button


39

Berdasarkan listing program di atas, jika button salah satu Tokoh


diklik maka akan berpindah halaman dan akan menampilkan profil dari
Tokoh yang dipilih tersebut.

Gambar 3.17 Tampilan Halaman Learn

3.3.5. Pembuatan Halaman Kuis


Halaman materi merupakan halaman yang muncul jika user memilih
buttonkuis pada menu utama.Dalam pembuatan halaman kuis dibutuhkan listing
programpada layout activity_kuis.xml dan kuis.java.Adapun listing program yang
digunakan adalah sebagai berikut :
40

• Activity_kuis.xml

Gambar 3.18 Perancangan Tampilan Quiz

Listing program di atas berfungsi untuk mendesain tampilan pada halaman


kuis. Pada halaman ini terdapat background yang dipanggil dari drawable, text
view untuk pertanyaan kuis, radio button sebagai pilihan jawaban serta button next
untuk berpindah ke pertanyaan selanjutnya.
41

• Kuis.java

Gambar 3.19 Perancangan Tampilan Pemilihan jawaban kuis


42

Listing program di atas berfungsi untuk membuat pertanyaan, pilihan


jawaban, jawaban benar serta perhitungan penilaian kuis. Pada listing di atas juga
dijelaskan jika user belum memilih salah satu jawaban tetapi sudah menekan
tombol next, maka akan muncul toast yang meminta user untuk memilih salah satu
jawaban. Jika user sudah selesai menjawab semua pertanyaan maka akan
berpindah halaman ke halaman hasil kuis.

Gambar 3.20 Tampilan Halaman Kuis

3.3.6. Pembuatan Halaman Informasi Profil Tokoh


Halaman informasi dari profil negara ini mengambil dari resource string
teks untuk halaman ini seperti profil singkat dari Tokoh yang dipilih, berikut code
dari resource string :
43

Gambar 3.21 Tampilan Memanggil Dari Resource String

Pada Gambar 3.21 adalah kodingan dari resource string untuk mengisi
setiap profil dari masing – masing tokoh yang dipilih.

3.3.7. Pembuatan Halaman Hasil Kuis


Halaman hasil kuis merupakan halaman yang muncul jika user telah
menjawab semua soal kuis.Dalam pembuatan halaman ini dibutuhkan listing
programpada layout activity_hasilkuiss.xml dan hasilkuis.java.Adapun listing
program yang digunakan adalah sebagai berikut :
44

• Activity_hasilkuiss.xml

Gambar 3.22 Perancangan Tampilan Hasil kuis


Listing program di atas berfungsi untuk mendesain tampilan pada halaman
hasil kuis.Pada halaman ini terdapat background yang dipanggil dari drawable, text
view untuk jumlah jawaban benar dan salah, text view nilai yang diperoleh serta
button untuk mengulangi kuis tersebut.
45

• Hasilkuiss.java

Gambar 3.23 Perancangan Tampilan Nilai kuis


Listing program di atas berfungsi untuk membuat perhitungan hasil kuis yang
diperoleh. Selain itu terdapat sintaks yang digunakan untuk mengulangi kuis dengan
memanggil class kuis tersebut, sehingga saat user menekan tombol ulangi kuis maka
akan berpindah ke halaman kuis untuk menjawab soal kuis.
46

Gambar 3.24 Tampilan Halaman Hasil Kuis

3.4. Implementasi
Implementasi adalah proses menterjemahkan dokumen hasil desain menjadi
perintah bahasa pemrograman komputer. Semakin baik hasil analisis dan
perancangan yang dilakukan, maka proses implementasi akan lebih mudah dilakukan.

Tahap ini dibagi menjadi beberapa tahapan yaitu spesifikasi Hardware dan Software,
pembuatan file APK, dan uji coba aplikasi.
47

3.4.1. Spesifikasi Hardware dan Software


Hardware yang digunakan untuk pembuatan aplikasi ini adalah laptop
dengan spesifikasi sebagai berikut:
• Merek HP Pavillion 14 Notebook
• Processor Intel® Core™ i5-5200UCPU @ 1.70GHz 2.40 GHz
• RAM 4 GB
Untuk spesifikasi software yang digunakan adalah sebagai berikut :
• Windows 11 64-bit sebagai sistem operasi
• Android Studio 3.1 sebagai editor dan emulator

3.4.2. Pembuatan File APK


Adapun cara pembuatan file APK pada Android Studio adalah sebagai
berikut:
1. KlikBuild pada Menu Bar, pilihBuild APK

Gambar 3.25 Tampilan Build APK


48

2. Setelah gradle selesai di build maka akan muncul notifikasi, lalu klik Locate
maka kita akan langsung di masuk dimana lokasi apk itu berada

Gambar 3.26 Tampilan Notifikasi Build APK

3. Setelah itu akan muncul hasil APK yang telah di build.

Gambar 3.27 Tampilan Hasil APK

Setelah berhasil membuat file APK, langkah selanjutnya adalah install


Aplikasi tersebut pada smartphone berbasis Android. Adapun langkah yang dapat
dilakukan adalah sebagai berikut :
1. Gunakan kabel data untuk menghubungkannya ke smartphone, lalu copy file
apk tersebut ke smartphone.
2. Buka lokasi penyimpanan file tersebutpada smartphone.
3. Install aplikasi tersebut dan tunggu beberapa saat hingga proses instalasi
selesai.
4. Jika proses instalasi sudah selesai, maka buka aplikasi tersebut untuk
menggunakannya.
49

3.5 Perbandingan Percobaan Aplikasi


Smartphone yang di gunakan untuk mencoba Aplikasi ini adalah Zenfone 5.
Gambar smartphone dapat dilihat pada gambar 3.25 dan untuk spesifikasi
smartphone Asus Zenfone 5 ZE620KL dapat dilihat di tabel 3.4.

Gambar 3.28 Asus Zenfone 5 ZE620KL

Tabel 3.1 Spesfikasi Zenfone 5


Layar : IPS LCD capacitive touchscreen, 16M colors
Kamera : 12 MP, f/1.8, 24mm (wide), 1/2.55", 1.4µm,
PDAF,4-axis OIS8 MP, f/2.0, 12mm
(ultrawide), 1/4", 1.12µm, no AF
OS : Android 9Pie
Chipset : Qualcomm SDM636 Snapdragon 636 (14 nm)
Memory : 64GB 4GB RAM
50

Pengujian yang telah dilakukan pada smartphone Zenfone tersebut telah


berhasil berjalan dengan baik. Selanjutnya adalah tahap perbandingan percobaan
aplikasi, tahap perbandingan percobaan aplikasi dilakukan agar dapat mengetahui
aplikasi yang telah dapat berjalan dengan baik atau tidak pada smartphone yang
berbeda.

Adapun 4 smartphone dengan jenis berbeda yang telah digunakan untuk


mencoba aplikasi .
Tabel 3.2 Percobaan Aplikasi
No. Jenis Tampilan Fungsi
Smartphone
1. Samsung A8+ Tampilan tidak Fungsi berjalan
mengalami perubahan dengan baik
2. Nexus 5X Tampilan tidak Fungsi berjalan
mengalami perubahan dengan baik
3. Redmi Note 5 Tampilan tidak Fungsi berjalan
mengalami perubahan dengan baik
4. HP 7 Tampilan gambar Fungsi berjalan
VoiceTab mengalami perubahan dengan baik

Uji coba yang telah dilakukan pada empat smartphone berbeda. Pada jenis
smartphone samsung, nexus, dan redmi note, tampilan aplikasi tidak mengalami
perubahan dan fungsi dapat berjalan dengan baik. Spesifikasi smartphone yang
digunakan dalam tahap dapat dilihat pada tabel 3.3
51

Tabel 3.3 Spesifikasi Smartphone

Smartphone Spesifikasi
Redmi Note Layar : 720 x 1.280 piksel LCD
5 Kamera : 13 MP, f/2.2 Main Camera, 5 MP
Front Camera
OS : Android 7.1.2 Nougat
Chipset : Quad-core, 1,4 GHz Cortex A53
Memory : Memory Internal 16GB, 2GB
RAM.
HP 7 Layar : 1024x600 pixel, 6,9 inci,
VoiceTab Multitouch display
Kamera : 2 MP Main Camera
OS : Android 4.4.2 KitKat
Chipset : Snapdragon 808 SoC2GB
Memory : Memory Internal 8GB,1GB RAM.

Aplikasi ini dapat dijalankan secara optimal apabila menggunakan Smartphone


Android yang memiliki RAM 2Gb dan menggunakan versi Android minimum yaitu
Sistem Operasi Android Marsmallow.

3.6 Pengujian Pengguna Aplikasi

Pada tahap pengujian ini, penulis membuat sarana kuesioner untuk melihat
tanggapan dan respon pengguna setelah melakukan percobaan terhadap aplikasi. Pada
gambar 3.28, sudah tertera kuesioner yang telah penulis berikan kepada sepuluh
orang sampel.
52

Gambar 3.28 Kuesioner percobaan aplikasi


53

Untuk mengukur presepsi, sikap atau pendapat seseorang atau kelompok


mengenai sebuah peristiwa atau fenomena social, berdasarkan definisi operasional
yang telah ditetapkan, penulis menggunakan skala Likert. Skala ini merupakan suatu
skala psikometrik yang umum digunakan dalam kuesioner, dan merupakan skala
yang paling banyak digunakan dalam riset berupa survei, termasuk dalam penelitian
survei deskriptif. Pada tabel 3.6, penulis mencantumkan hasil kuesioner yang penulis
minta kepada 10 responden.

Tabel 3.4 Hasil Kuesioner Responden

No. Nama Pekerjaan Pernyataan Total


Responden Skor
1 2 3 4 5

1. Zahra Guru SS S SS SS SS 24
Labiba

2. Dani Guru S S SS SS SS 23
Setiawan

5. Insan Guru SS SS TS KS SS 20
Muhammad

6. Andi Murid SS SS SS S SS 24
Nugraha

7. Nadia P. Murid S SS SS SS KS 22
54

Dalam penggunaan skala Likert terdapat dua bentuk penyataan, yaitu bentuk
pernyataan positif untuk mengukur skala positif, dan bentuk pernyataan negatif untuk
mengukur skala negatif. Pernyataan positif diberi nilai 5,4,3,2,1 sedangkan
pernyataan negative diberi nilai 1,2,3,4,5.

Hasil yang diperoleh penulis dalam penyebaran kuesioner adalah sebagai


berikut:

• Responden yang menjawab sangat setuju (skor 5) berjumlah delapan orang


• Responden yang menjawab setuju (skor 4) berjumlah nol responden
• Responden yang menjawab kurang setuju (skor 3) berjumlah satu
responden
• Responden yang menjawab tidak setuju (skor 2) berjumlah satu responden
• Responden yang menjawab sangat tidak setuju (skor 1) berjumlah nol
responden

Berdasarkan data tersebut, cara perhitungan dengan menggunakan skala


Likert adalah sebagai berikut:

Jawaban sangat setuju (SS) = 8 responden x 5 (skor) = 40

Jawaban kurang setuju (KS) = 1 responden x 4 (skor) = 4

Jawaban tidak setuju (TS) = 1 responden x 1 (skor) = 1

Total skor = 45

Skor maksimum = 10 responden x 5 (skor tertinggi Likert) = 50

Skor minimum = 10 responden x 1 (skor terendah) = 10


55

Indeks (%) = (total skor / skor maksimum) x 100

= (45/50) x 100

= 90%

Dari perolehan presentase yang telah penulis hitung, menunjukkan 90% dari
responden. Pada tabel 3.4 yang penulis cantumkan menunjukkan bahwa
perolehan nilai 100% masuk kedalam kategori sangat setuju. Hal ini
menunjukkan bahwa responden sangat setuju bahwa aplikasi ini sangat
disukai.

Tabel 3.5 Presentasi Nilai

Jawaban Keterangan

0% - 19.99% Sangat (Tidak Setuju, Buruk atau Kurang Sekali

20% - 39.99% Tidak Setuju atau Kurang Baik

40% - 59.99% Cukup

60% - 79% Setuju, Baik atau Suka

80% - 100% Sangat (Setuju, Baik, Suka)

Anda mungkin juga menyukai