BAB III ANALISIS DAN PERANCANGAN SISTEM

BAB III ANALISIS DAN PERANCANGAN SISTEM Bab ini akan menjelaskan sistem analisis dan perancangan pada Aplikasi Pembelajaran Fonetik Hanyu Pinyin Berbasis Android, tahap pertama adalah analisis dan di lanjut dengan perancangan aplikasi. 3.1

Analisis Sistem Tahapan awal dalam pembuatan aplikasi adalah tahapan analisis. Pada

tahapan ini penulis menganalisa kebutuhan kebutuhan aplikasi. Analisa dilakukan pada data-data yang dibutuhkan aplkasi, sehingga dapat diketahui spesifikasi kebutuhan apa saja yang dibutuhkan dalam membangun aplikasi ini. Tujuan pembuatan Aplikasi Pembelajaran Fonetik Hanyu Pinyin adalah untuk menjadi acuan pembelajaran masyarakat dalam mempelajari fonetik Hanyu Pinyin dengan menggunakan smartphone. Dikarenakan dalam beberapa tahun terakhir ini masyarakat sudah sangat terbiasa dalam menggunakan smartphone. Konten yang terdapat pada smartphone sebagian besar hanyalah berisi hiburan. Oleh karena itu penelitian ini bertujuan untuk mempermudah masyarakat untuk belajar melalui smartphone tanpa menghilangkan aspek hiburannya. Aplikasi Pembelajaran Fonetik Hanyu Pinyin bersifat interaktif karena di dalamnya bukan hanya berisi pembelajaran, tetapi juga terdapat latihan untuk mengetes kemampuan user dalam bidang fonetik Hanyu Pinyin. Pembelajaran dan latihan yang disediakan difokuskan menggunakan media suara, dikarenakan pembelajaran dalam aplikasi ini memfokuskan kepada sistem fonetisme Hanyu Pinyin ini sendiri. Aplikasi ini dibuat dengan menggunakan bahasa pemrograman HTML5 dan JavaScript, PhoneGap Framework, jQuery Mobile 1.3.2, dan Android SDK. Sistem minimal yang di butuhkan oleh user adalah smartphone dengan sistem operasi Android 4.2.2 atau Jellybean.

21

http://digilib.mercubuana.ac.id/

22

3.2

Analisa Kebutuhan Dalam melakukan penelitian, dibutuhkan beberapa komponen yang

mendukung terhadap keberhasilan penelitian, yaitu : Perangkat lunak (software) -

Sistem operasi Windows 7 Ultimate SP1

-

Software Eclipse Luna Build id: 20150109-0600

-

Phonegap for Android Version 1.2 Perangkat keras (hardware)

-

Notebook

-

Handphone Smartphone Android

3.3

Perancangan Sistem Aplikasi ini dibuat berdasarkan Framework Phonegap dan Jquery Mobile,

sedangkan untuk bahasa pemrogramannya menggunakan HTML5, Javascript, CSS dan Eclipse sebagai editor untuk pembuatan aplikasi. Perancangan sistem merupakan tahap awal dari perancangan perangkat lunak. Perancangan ini dilakukan untuk mengetahui kondisi sistem secara umum. Perancangan sistem meliputi cara kerja sistem, flowchart, storyboard. 3.3.1

Cara Kerja Sistem

Cara Kerja aplikasi ini adalah offline jadi tidak dibutuhkan koneksi internet karena semua bahan ajar sudah tersimpan di dalam aplikasi. Aplikasi ini juga tidak membutuhkan database, karena tidak adanya sesuatu yang perlu disimpan kedalam database. Aplikasi ini juga terdapat sound yang memberikan cara pengucapan fonetik dalam Hanyu Pinyin. 3.3.2 Perancangan Flowchart Flowchart merupakan gambar atau bagan yang memperlihatkan urutan dan hubungan antar proses beserta instruksinya. Gambaran ini dinyatakan dengan simbol. Dengan demikian setiap simbol menggambarkan proses tertentu. Sedangkan hubungan antar proses digambarkan dengan garis penghubung.


23

3.3.2.1 Perancangan Flowchart Belajar

Gambar 3.1 Flowchart Belajar Flowchart pada gambar 3.1 menjelaskan bagaimana cara kerja sistem pada saat user memulai aplikasi. Setelah itu user mendapatkan halaman utama pada saat pertama kali membuka aplikasi yang berisi menu belajar. Flowchart diatas menjelaskan alur saat user memilih menu belajar, user akan diberikan pilihan kategori. Setelah memilih salah satu kategori, user akan masuk ke menu pilihan kata. Setelah user memilih kata, maka akan muncul pilihan tone untuk kata yang di pilih, dan setiap pilihan tone akan memainkan suara.


24

3.3.2.2 Perancangan Flowchart Latihan

Gambar 3.2 Flowchart Latihan Sedangkan flowchart pada gambar 3.2 menjelaskan alur ketika user memilih menu latihan. Pada saat user memilih latihan maka akan keluar pertanyaan dalam bentuk suara, dan user harus menjawab dengan memilih pada pilihan ganda yang sudah disediakan. User menjawab sesuai dengan suara yang muncul, dan harus menentukan tonenya. Setelah user memilih untuk cek jawaban, maka akan muncul halaman hasil yang menunjukan benar atau tidaknya jawaban user. Setelah itu user juga memiliki pilihan untuk melanjutkan ke soal lain, atau mengulang kembali soal sebelumnya.


25

3.3.3 Perancangan Storyboard Storyboard adalah deskripsi masing-masing tampilan suatu kejadian dari movie yang dimainkan dengan menampilkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Storyboard digunakan sebagai alat bantu pada tahapan perancangan multimedia. Satu kolom storyboard mewakili satu tampilan di layar handphone. Tabel 3.1 Storyboard No. 1

Tampilan

Keterangan Nama : Halaman Belajar

Warna : Background utama, putih Background header, biru muda Background footer, biru muda Background kategori, biru muda Keterangan : Kategori, berisi tentang pilihan huruf vocal pengucapan dalam bahasa mandarin 2

Nama : Pilih Kata

Warna : Background kata, biru muda Keterangan : Kata, lanjutan dari kategori pada halaman awal dan disini menentukan huruf konsonan yang akan dihubungkan dengan pilihan huruf vocal yang di pilih di awal


26

3

Nama : Pilih Tone

Warna : Gambar, tulisan mandarin hitam dengan latar putih Background tone, biru muda Keterangan : Gambar, menampilkan tulisan mandarin yang di maksud dalam bentuk gambar Tone , berisikan tombol untuk memainkan sound kata terpilih dengan pelafalan tone sesuai pilihan antara 1 sampai 4 4

Nama : Halaman Latihan

Warna : Background play, biru muda Background pertanyaan, putih Background pilihan jawaban, biru muda Keterangan : Play, memainkan sound sesuai kata yang dijadikan pertanyaan Pertanyaan, isi pertanyaan tentang suara yang di dimainkan Pilihan (A-D), berisikan pilihan ganda dengan sistem mengacak pilihan yang di tampilkan


27

5

Nama : Halaman Hasil Jawaban

Warna : Gambar, tulisan mandarin hitam dengan latar putih Background hasil, putih Background ulangi soal, biru muda Background soal baru, biru muda Keterangan : Gambar, menampilkan tulisan mandarin berformat gambar tentang hal yang ditanyakan dalam pertanyaan sebelumnya Hasil Jawaban, berisikan hasil benar atau salah nya jawaban yang dipilih oleh user 6

Nama : Halaman informasi

Warna : Background tentang aplikasi, putih Keterangan : Konten berisikan tentang cara pemakaian aplikasi dan informasi tentang pembuat aplikasi


28

3.4

Pengumpulan Bahan

Tabel 3.2 Bahan No.

Nama

Jenis

Lokasi

Sumber

1

benar.png

Gambar

HanyuPinyin/assets/www/images

iconfinder.com/icons/27837/download/png/128

2

salah.png

Gambar



3

imgsound.png

Gambar



4

ba1.png

Gambar


Desain sendiri

5

ba2.png

Gambar


Desain sendiri

6

ba3.png

Gambar


Desain sendiri

7

ba4.png

Gambar


Desain sendiri

8

bo1.png

Gambar


Desain sendiri

9

bo2.png

Gambar


Desain sendiri

10

bo3.png

Gambar


Desain sendiri

11

bo4.png

Gambar


Desain sendiri

12

bai1.png

Gambar


Desain sendiri

13

bai2.png

Gambar


Desain sendiri

14

bai3.png

Gambar


Desain sendiri

15

bai4.png

Gambar


Desain sendiri

16

bei1.png

Gambar


Desain sendiri

17

bei3.png

Gambar


Desain sendiri

18

bei4.png

Gambar


Desain sendiri

19

ba1.ogg

Suara

HanyuPinyin/assets/www/sound

www.chineselearner.com/pinyin/sound/chart/ba.swf

20

ba2.ogg

Suara



21

ba3.ogg

Suara



22

ba4.ogg

Suara



23

bo1.ogg

Suara


www.chineselearner.com/pinyin/sound/chart/bo.swf

24

bo2.ogg

Suara



25

bo3.ogg

Suara



26

bo4.ogg

Suara



27

bai1.ogg

Suara


www.chineselearner.com/pinyin/sound/chart/bai.swf

28

bai2.ogg

Suara



29

bai3.ogg

Suara



30

bai4.ogg

Suara



31

bei1.ogg

Suara


www.chineselearner.com/pinyin/sound/chart/bei.swf

32

bei3.ogg

Suara



33

bei4.ogg

Suara




29

3.5

Skenario Pengujian Pengujian aplikasi ini dilakukan pada tanggal 20 Januari 2016

menggunakan smartphone. Hal yang diuji antara lain: Tabel 3.3 Skenario Pengujian No.

Nama Test

1

Menekan icon aplikasi pada smartphone Memilih salah satu menu konsonan pada menu utama Memilih salah satu menu kata pada menu konsonan Menekan salah satu tombol pada halaman menu kata Menekan icon back Memilih tombol latihan pada footer Menekan tombol mulai pada menu latihan Menekan tombol suara pada menu latihan Menekan tombol cek jawaban pada menu soal latihan Menyelesaikan sepuluh soal pada latihan Memilih tombol ulangi lagi Menekan icon home Memilih tombol Info pada footer Memilih tombol keluar pada footer Memilih 'Ya' pada pop up keluar Memilih 'Tidak' pada pop up keluar

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Hasil yang diharapkan

Menampilkan halaman utama Menampilkan halaman konsonan yang dipilih Menampilkan halaman kata yang dipilih Memainkan suara yang dipilih Menampilkan halaman sebelumnya Menampilkan menu latihan Menampilkan menu soal latihan Memainkan suara Menampilkan menu hasil jawaban benar atau salah Menampilkan skor hasil Menampilkan halaman latihan Menampilkan halaman utama Menampilkan halaman info Menampilkan pop up pilihan keluar Keluar dari aplikasi Menampilkan halaman sebelumnya


30


BAB III ANALISIS DAN PERANCANGAN SISTEM

Recommend Documents