ANALISIS DAN PERANCANGAN
3.1 Analisis Sistem
3.1.2 Analisis Kebutuhan (Requirement Analyst)
Analisis persyaratan terdiri atas dua bagian yaitu analisis fungsional dan analisis nonfungsional.Kedua analisis ini merupakan hal penting untuk menentukan hal-hal yang harus dimiliki sistem.
3.1.2.1 Analisis Fungsional
Analisis fungsional dibutuhkan untuk mengetahui hal-hal yang bisa dikerjakan oleh sistem.Berikut dijabarkan fungsi-fungsi yang dapat dikerjakan oleh sistem.
1. Sistem akan menampilkan konten card yang sudah di-upload oleh user (orang tua).
2. Sistem melakukan validasi suara masukan dari user(anak usiatoddler).
3. Untuk memberikan hasil dari validasi suara, sistem akan memberikan jawaban dengan keluaran suara benar atau salah dengan memberikan jawaban yang benar.
3.1.2.2 Analisis Nonfungsional
Analisis nonfungsional berhubungan dengan hal-hal berikut ini:
1. Performa
Aplikasi yang akan dibangun dapat menunjukkan hasil dari proses pengenalan kata yang diucapkan oleh user (anak usia toddler).
2. Mudah dipelajari dan digunakan
Aplikasi yang akan dibangun memiliki tampilan yang user friendly dan responsif.
3. Hemat biaya
Aplikasi yang dibangun akan menggunakan teknologi yang bebas digunakan (free to use) atau open source.
4. Dokumentasi
Aplikasi yang akan dibangun dapat menyimpan konten card yang di-upload oleh user (orang tua) dan menampilkan kata yang akan diucapkan oleh user
5. Manajemen kualitas
Aplikasi yang akan dibangun akan memiliki kualitas yang baik.
6. Kontrol
Aplikasi yang dibangun akan menampilkan pesan erroruntuk setiap input suara yang tidak dapat dikenali.
3.1.2.3 Pemodelan Persyaratan Sistem dengan Use Case
Unified Modelling Language(UML) merupakan bentuk perancangan dan dokumentasi perangkat lunak berbasis pemrograman berorientasi objek.Pada aplikasi ini, bentuk perancangan UML menggunakan beberapa diagram, yaitu Usecase Diagram, Activity Diagram, dan Sequence Diagram.Use case adalah salah satu pemodelan yang digunakan untuk memodelkan persyaratan sistem. Dengan use case ini digambarkan siapa saja yang berinteraksi dengan sistem dan apa saja yang dapat dilakukan dengan sistem.
Diagram menunjukkan interaksi antara pengguna dan entitas eksternal lainnya dengan sistem yang sedang dikembangkan.Lebih jelasnya Usecase Diagram digunakan untuk menggambarkan interaksi antara user denganperangkat lunak.Pada aplikasi ini, user(orang tua) dapat memilih konten card berupa gambar benda, photo orang keluarga, atau lainnya, lalu useranak mengucapkan kata yang sesuai dengan konten card.
Memilih konten card
Verifikasi kata yang diucapkan
Upload Konten Card
(Orang Tua)User
SISTEM
Gambar 3.2Usecase Diagram User (Orang Tua) speech recognition Pada Permainan Toddler Card
Mengucapkan kata sesuai dengan gambar yang tampil pada konten
User (Anak)
Verifikasi kata yang diucapkanSISTEM
Gambar 3.3Usecase Diagram User (Anak) speech recognition Pada Permainan Toddler Card
3.1.2.4 Activity Diagram
Diagram ini akan menunjukkan alur dari sistem, termasuk tindakan utama dan titik keputusan, sedangkan usecase menggambarkan bagaimana aktor menggunakan sistem untuk melakukan aktivitas. Aktivitas sistem dari aplikasi ini didokumentasikan ke dalam Activity Diagram sebagai berikut:
Gambar 3.4Activity Diagram speech recognition Pada Permainan Toddler Card
Gambar di atas menjelaskan bagaimana proses aplikasi akan berjalan. Dimana user menjalankan aplikasi pada perangkat Android. Sistem akan memunculkan tampilan awal berupa splash screen, kemudian setelah beberapa saat muncul menu utama untuk mulai memilih konten card. User dapat memilih satu konten untuk
Splash Screen
Menu Utama
Mulai Tampil Konten Card
Output Suara Menyatakan Benar Pengujian Validasi Suara ( API Google Speech Recognition) Klik Gambar dan
Ucapkan Kata
Output Suara Menyatakan Salah dan Mengatakan Kata Yang Benar
Data Sesuai Main
Lagi
YA
YA TIDAK
TIDAK
USER SISTEM
diucapkan namanya dengan meng-klik gambar yang tampil pada layar, kemudian mengucapkan kata yang dimaksud maka sistem akan melakukan validasi kecocokan kata yang diucapkan. Jika kata sesuai maka sistem akan mengeluarkan suara yang menyatakan benar, tetapi jika kata yang diucapkan salah, maka system juga akan menngeluarkan suara yang menyatakan salah dan membenarkan kata yang sesuai.
3.1.2.5Sequence Diagram
Sequence diagram merupakan diagram yang mengambarkan bagaimana objek-objek saling bersinergi dalam beberapa kebiasaan (behavior). Sequence diagram menunjukkan sejumlah contoh maupun pesan yang berada atau melewati objek-objek tersebut didalam use case. Sequence diagram mendeskripsikan bagaimana entitas dalamsistem berinteraksi, termasuk pesan yang digunakan saat interaksi. Berikut adalahsequence diagram dari aplikasi ini:
User
: Pilih Gambar : Speech Recognition
Memilih Konten Card
Mengucapkan Kata
Output Suara Menyatakan Benar atau Salah
Gambar 3.5Sequence Diagram Mengucapkan KataPada Permainan Toddler Card
3.2 Perancangan
3.2.1 Mockup
Mockup adalah rancangan sistem yang berskala kecil dan tidak lengkap serta digunakan sebagai tampilan desain awal.Aplikasi ini terdapat empat page utama, yaitu Splash Screen, Index page, Tutorial page dan System page.
3.2.1.1 Splash Screen
Halaman awal dari aplikasi ini menampilkan nama dan icon aplikasi ini. Rancangan tampilan page ditunjukkan pada gambar 3.5:
Gambar 3.6 Mockup Splash Screen
3.2.1.2 Index Page
Index page ditampilkan setelah tampilan splash screen. Di dalam page ini terdapat untuk memulai aplikasi, cara menggunakan (tutorial), dan keluar. Rancangan tampilan page ditunjukkan pada gambar 3.6:
Gambar 3.7 Mockup Index page
3.2.1.4 Tutorial Page
Tutorial Page dapat diakses dengan memilih menu “cara menggunakan aplikasi” pada menu navigasi. Dalam page ini, terdapat cara user untuk menggunakan aplikasi.
Rancangan tampilan page ditunjukkan pada gambar 3.7:
Cara menggunakan:
Aplikasi ini untuk melatih anak usia toddler berlatih bicara, orang tua dapat melilih menu
“Mulai” di halaman utama, lalu pilih salah satu konten card yang tersedia dengan mengklik gambar, lalu anak mengucapkan kata yang dimaksud. Kalau benar atau salah akan keluar suara menyatakan benar atau salah.
Gambar 3.8 Mockup Tutorial Page
3.2.1.5 System Page
Dalam page ini, terdapat gambar dan tulisan yang merupakan konten dari toddler card. Rancangan tampilan page ditunjukkan pada gambar dibawah ini:
Gambar 3.9 Mockup System Page Blank
Pada gambar diatas merupakan background dari tampilan untuk memilih konten card, sedangkan gambar dibawah ini mockup untuk tampilan apabila sudah terisi konten ynag akan digunakan.
Gambar 3.10 Mockup System Page
BAB IV