Design

IV. HASIL DAN PEMBAHASAN

4.2. Design

Perancangan Storyboard

Perancangan storyboard merupakan tahap menggambarkan panduan mengenai segala sesuatu tentang tampilan Aplikasi yang akan dibangun nantinya pada tahap assembly (Pembuatan).

Tabel 4.4 Tampilan Storyboard Aplikasi

Tampilan Deskripsi Keterangan

Halaman ini adalah halaman loading untuk memuat aplikasi

Halaman loading screen

Halaman ini adalah halaman utama.

Dalam halaman ini terdapat tombol pengenalan aplikasi, materi, video, bermain &

latihan, profil, dan exit.

 Jika tombol

pengenalan aplikasi di klik maka akan masuk ke halaman pengenalan aplikasi yang menampilkan video pengenalan aplikasi ini dibuat.

 Jika tombol materi di klik maka akan masuk ke halaman yang menampilkan tombol navigasi ke berbagai macam bacaan materi.

 Jika tombol video di klik akan

menampilkan tombol navigasi ke berbagai macam materi video

 Jika tombol latihan di klik makan akan masuk ke halaman untuk memulai game dan latihan.

 Jika tombol profil di klik akan

menampilkan profil pengembang aplikasi.

 jika tombol audio di klik maka akan mematikan

audio/menghidupkan audio.

 Jika tombol X di klik maka akan keluar dari aplikasi.

Halaman ini adalah halaman

pengenalan aplikasi, dalam halaman ini terdapat tombol play video dan home

 Jika tombol play video di klik akan memutar video pengenalan aplikasi dibuat.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini merupakan halaman materi.

dalam halaman ini terdapat tombol navigasi bacaan materi dan home

 Jika tombol navigasi bacaan materi di klik maka akan masuk ke bacaan materi.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini merupakan

halaman isi materi, dalam halaman ini terdapat tombol back dan home

 Jika tombol back di klik maka akan kembali ke halaman materi.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini merupakan halaman video.

dalam halaman ini terdapat tombol navigasi video materi, dan home

 Jika tombol navigasi video materi di klik maka akan masuk ke video materi.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini merupakan

halaman isi materi video, dalam halaman ini terdapat tombol play video, back, dan home

 Jika tombol play video di klik akan memutar video materi.

 Jika tombol back di klik maka akan kembali ke halaman materi.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini merupakan halaman untuk memulai halaman bermain & latihan.

dalam halaman ini terdapat tombol game mencari objek, latihan soal, dan home

 Jika tombol game mencari objek di klik akan memulai game

 Jika tombol latihan soal di klik akan memulai latihan soal pilihan ganda.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini merupakan halaman yang menampilkan soal-soal latihan dengan pilihan ganda.

dalam halaman ini terdapat tombol pilihan ganda dan home

 Jika tombol pilihan ganda di klik maka akan memilih jawaban dari pertanyaan.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini merupakan

halaman hasil dari latihan soal, dalam halaman ini

terdapat tombol home

jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini adalah halaman bermain mencari objek halaman ini terdapat tombol pilihan gambar, next, dan home

 jika tombol pilihan gambar yang benar di klik maka text yang berisikan opsi Software dan

Hardware disebelah kanan akan ter

highlight atau berubah warna.

 jika tombol next di klik maka halaman akan diperbaharui dengan opsi Software dan Hardware yang

berbeda dari sebelumnya.

 jika tombol home di klik maka akan kembali ke halaman utama.

Halaman ini adalah halaman profil pengembang aplikasi. dalam halaman ini terdapat tombol home

Jika tombol rumah di klik maka akan kembali ke halaman utama.

Perancangan Struktur Navigasi

Struktur navigasi ini berguna untuk memberikan gambaran navigasi dari halaman satu ke halaman lainnya.

Gambar 4.3 Struktur Navigasi

Perancangan Use Case Diagram

Use case diagram merupakan gambaran skenario dari interaksi antara pengguna dengan sistem. Use case diagram menggambarkan hubungan antara aktor dan kegiatan yang dapat dilakukannya terhadap aplikasi.

Adapun langkah-langkah yang dilakukan yaitu:

a. Deskripsi Aktor

Secara konseptual aktor digunakan untuk menjelaskan sesuatu atau seseorang yang sedang berinteraksi dengan suatu aplikasi. Dalam aplikasi multimedia interaktif yang diajukan ini terdapat satu buah user role pengguna. Pengguna dapat membuka menu pengenalan aplikasi, materi, video, bermain & latihan, dan profil.

b. Deskripsi Use Case

Aplikasi yang diajukan terdiri dari sepuluh (10) use case utama yang meliputi:

Tabel 4.5 Deskripsi Use Case Diagram

No. Use Case Definisi

1 Pengenalan Aplikasi

Proses menonton video

perkenalan aplikasi dan tujuan dari aplikasi

2 Materi Proses memilih materi yang ingin

dibaca

3 Isi Materi Proses membaca materi Software

dan Hardware pada komputer

4 Video Proses memilih video materi yang

ingin ditonton

5 Isi Video

Proses menonton video materi Software dan Hardware pada komputer

6 Bermain & Latihan

Proses memilih antara game mencari Objek dengan latihan soal

7 Game Mencari Objek

Proses bermain mencocok kan gambar yang berisikan opsi Software dan Hardware

8 Latihan Soal Proses mengisi jawaban dengan

soal pilihan ganda

9 Skor Proses melihat skor nilai dari

akumulasi latihan soal

10 Profil Proses melihat informasi

pengembang aplikasi

Dari deskripsi diatas use case dari aplikasi ini dapat digambarkan sebagai berikut:

Gambar 4.4 Use Case Diagram Perancangan Activity Diagram

Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, percabangan yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi.

Berikut ini adalah activity diagram Multimedia Interaktif Pengenalan Software dan Hardware:

a) Activity Diagram Menu Utama

Gambar 4.5 Activity Diagram Menu Utama

Pada gambar diatas merupakan activity diagram untuk menu utama. Dimana pengguna melakukan klik pada aplikasi multimedia interaktif dan aplikasi akan menampilkan menu diantaranya Pengenalan Aplikasi, Materi, Video, Bermain & Latihan, dan Profil.

b) Activity Diagram Pengenalan Aplikasi

Gambar 4.6 Activity Diagram Pengenalan Aplikasi

Pada gambar diatas merupakan activity diagram untuk menu pengenalan aplikasi. Dimana pengguna melakukan klik pada menu pengenalan aplikasi untuk menonton video pengenalan aplikasi ini dibuat.

c) Activity Diagram Materi

Gambar 4.7 Activity Diagram Materi

Pada gambar diatas merupakan activity diagram untuk menu materi. Dimana pengguna melakukan klik pada menu materi untuk menampilkan daftar bahan bacaan materi.

d) Activity Diagram Isi Materi

Gambar 4.8 Activity Diagram Isi Materi

Pada gambar diatas merupakan activity diagram untuk menu materi. Dimana pengguna melakukan klik pada isi materi untuk menampilkan bahan bacaan yang telah dipilih.

e) Activity Diagram Video

Gambar 4.9 Activity Diagram Video

Pada gambar diatas merupakan activity diagram untuk menu video. Dimana pengguna melakukan klik pada menu video untuk menampilkan daftar video materi.

f) Activity Diagram Isi Video

Gambar 4.10 Activity Diagram Isi Video

Pada gambar diatas merupakan activity diagram untuk isi video. Dimana pengguna melakukan klik pada isi video untuk menonton video materi yang telah dipilih.

g) Activity Diagram Bermain & Latihan

Gambar 4.11 Activity Diagram Bermain & Latihan

Pada gambar diatas merupakan activity diagram untuk menu bermain &

latihan. Dimana pengguna melakukan klik pada menu bermain & latihan untuk menampilkan tombol pilihan game mencari objek dengan latihan soal.

h) Activity Diagram Game Mencari Objek

Gambar 4.12 Activity Diagram Game Mencari Objek

Pada gambar diatas merupakan activity diagram untuk pilihan game mencari objek. Dimana pengguna melakukan klik pada tombol game untuk memainkan game mencocokkan gambar yang berisikan opsi Software dan Hardware. Jika menekan tombol next akan menampilkan opsi Software dan Hardware yang berbeda dari sebelumnya.

i) Activity Diagram Latihan Soal

Gambar 4.13 Activity Diagram Latihan Soal

Pada gambar diatas merupakan activity diagram untuk menu latihan soal.

Dimana pengguna melakukan klik pada tombol latihan soal untuk menampilkan latihan soal dengan pilihan ganda dan jika selesai mengisi jawaban akan menampilkan skor jawaban.

j) Activity Diagram Profil

Gambar 4.14 Activity Diagram Profil

Pada gambar diatas merupakan activity diagram untuk menu profil.

Dimana pengguna melakukan klik pada menu profil untuk menampilkan informasi pengembang aplikasi.