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
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. Tampilan Keterangan 1 Nama : Halaman Belajar Background utama, putih Background header, biru muda Background footer, biru muda Background kategori, biru muda Kategori, berisi tentang pilihan huruf vocal pengucapan dalam bahasa mandarin 2 Nama : Pilih Kata Background kata, biru muda 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 Gambar, tulisan mandarin hitam dengan latar putih Background tone, biru muda 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 Background play, biru muda Background pertanyaan, putih Background pilihan jawaban, biru muda 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 Gambar, tulisan mandarin hitam dengan latar putih Background hasil, putih Background ulangi soal, biru muda Background soal baru, biru muda 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 Background tentang aplikasi, putih 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 HanyuPinyin/assets/www/images iconfinder.com/icons/34218/download/png/128 3 imgsound.png Gambar HanyuPinyin/assets/www/images iconfinder.com/icons/326584/download/png/128 4 ba1.png Gambar HanyuPinyin/assets/www/images Desain sendiri 5 ba2.png Gambar HanyuPinyin/assets/www/images Desain sendiri 6 ba3.png Gambar HanyuPinyin/assets/www/images Desain sendiri 7 ba4.png Gambar HanyuPinyin/assets/www/images Desain sendiri 8 bo1.png Gambar HanyuPinyin/assets/www/images Desain sendiri 9 bo2.png Gambar HanyuPinyin/assets/www/images Desain sendiri 10 bo3.png Gambar HanyuPinyin/assets/www/images Desain sendiri 11 bo4.png Gambar HanyuPinyin/assets/www/images Desain sendiri 12 bai1.png Gambar HanyuPinyin/assets/www/images Desain sendiri 13 bai2.png Gambar HanyuPinyin/assets/www/images Desain sendiri 14 bai3.png Gambar HanyuPinyin/assets/www/images Desain sendiri 15 bai4.png Gambar HanyuPinyin/assets/www/images Desain sendiri 16 bei1.png Gambar HanyuPinyin/assets/www/images Desain sendiri 17 bei3.png Gambar HanyuPinyin/assets/www/images Desain sendiri 18 bei4.png Gambar HanyuPinyin/assets/www/images Desain sendiri 19 ba1.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/ba.swf 20 ba2.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/ba.swf 21 ba3.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/ba.swf 22 ba4.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/ba.swf 23 bo1.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bo.swf 24 bo2.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bo.swf 25 bo3.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bo.swf 26 bo4.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bo.swf 27 bai1.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bai.swf 28 bai2.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bai.swf 29 bai3.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bai.swf 30 bai4.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bai.swf 31 bei1.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bei.swf 32 bei3.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bei.swf 33 bei4.ogg Suara HanyuPinyin/assets/www/sound www.chineselearner.com/pinyin/sound/chart/bei.swf
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 Hasil yang diharapkan 1 Menekan icon aplikasi pada smartphone Menampilkan halaman utama 2 Memilih salah satu menu konsonan pada Menampilkan halaman konsonan yang menu utama dipilih 3 Memilih salah satu menu kata pada menu konsonan Menampilkan halaman kata yang dipilih 4 Menekan salah satu tombol pada halaman menu kata Memainkan suara yang dipilih 5 Menekan icon back Menampilkan halaman sebelumnya 6 Memilih tombol latihan pada footer Menampilkan menu latihan 7 Menekan tombol mulai pada menu latihan Menampilkan menu soal latihan 8 Menekan tombol suara pada menu latihan Memainkan suara 9 Menekan tombol cek jawaban pada menu Menampilkan menu hasil jawaban benar soal latihan atau salah 10 Menyelesaikan sepuluh soal pada latihan Menampilkan skor hasil 11 Memilih tombol ulangi lagi Menampilkan halaman latihan 12 Menekan icon home Menampilkan halaman utama 13 Memilih tombol Info pada footer Menampilkan halaman info 14 Memilih tombol keluar pada footer Menampilkan pop up pilihan keluar 15 Memilih 'Ya' pada pop up keluar Keluar dari aplikasi 16 Memilih 'Tidak' pada pop up keluar Menampilkan halaman sebelumnya
30