BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN Pada bagian ini penulis akan menganalisis kebutuhan-kebutuhan dalam membuat aplikasi ini, karena dengan melakukan analisis akan membuat lebih terarah dan jelas alur aplikasinya. Setelah semua kebutuhan selesai dianalisis, maka penulis akan melanjutkan ke tahap perancangan aplikasi. 3.1 Analisis Sistem Penulis merancang sistem aplikasi pembelajaran patterning untuk pendidikan anak usia dini ( paud ). Patterning merupakan teknik yang kaya akan aktivitas memilih, menjodohkan pola gambar yang memungkinkan untuk dapat mengembangkan keterampilan motorik halus anak yang di sertai dengan berbagai macam elemen multimedia seperti : gambar, suara, animasi, sehingga memiliki daya tarik tersendiri bagi anak- anakyang dapat memicu kreatifitas dalam belajar serta tidak mudah jenuh dalam proses belajar. Sistem aplikasi ini di tujukan untuk mempermudah pembelajaran khususnya pada anak- anak, dengan fasilitas yang memungkinkan anak dalam memahami metode patterning yang di ajarkan oleh guru mereka. Aplikasi ini adalah sebuah aplikasi yang di buat dengan menggunakan Adobe Flash CS3, sehingga jenis file yang akan di hasilkan nanti adalah berktensi Smart Web Format (.SWF ). Dalam hal ini penulis akan mengubah jenis file Smart Web Format(.SWF) tersebut agar menjadi file bersktensi.apk. Untuk mengubah file.swf tersebut menjadi Android Package (.APK), penulis menggunakan sebuah plikasi berbasis web yang tersedia di Setelah file tersebut diubah ekstensinya,barulah kemudian dapat dioperasikan di smartphone Android. 28

2 Perancangan Desain Aplikasi Pembelajaran Pola Dasar Gambar Berbasis Android Untuk memudahkan pembuatan Aplikasi Pembelajaran Pola Dasar Gambar Berbasis Android, terlebih dahulu membuat model menggunakan Unified Model Languange (UML ). Dalam hal ini penenulis membuat diagram Use Case dan diagram Activity serta rancangan antar muka sehingga interaksi yang ada pada sistem dapat terlihat dan permasalahan yang komplek menjadi sederhana serta mendapat banyak pandangan tentang program atau aplikasi yang akan dibangun. 3.3 Diagram Use Case Diagram ini menggambarkan interaksi antara pengguna dan sistem, berikut adalah Use Case dari aplikasi pembelajaran pola dasar gambar berbasis android SISTEM Belajar Pola Pemain Bermain Pola Profil Keluar Gambar 3.1 usecase aplikasi Pembelajaran Mengenal Pola Dasar Gambar Berbasis Android

3 30 Table 3.1 Skenario Use Case Belajar Pola Nama Use Case Deskripsi singkat Actor Pra kondisi Tindakan utama Pasca kondisi Belajar Pola Pada use case ini aplikasi mengenal pola gambar akan menampilkan macam macam pola dasar Pengguna Aplikasi sudah dijalankan Aplikasi akan menampilkan pembelajaran mengenal pola dasar gambar berbasis Android Apabila use case berhasil dijalankan, maka pengguna dapat belajar mengenal pola dasar gambar berbasis Android Tabel 3.2 Skenario Use Case Bermain Pola Nama Use Case Deskripsi singkat Actor Pra kondisi Tindakan utama Bermain Pola Pada use case ini aplikasi akan memberi Permainan pola dasar gambar Pengguna Aplikasi sudah dijalankan Aplikasi akan menampilakan 3 pilihan Bermain pola dasar gambar

4 31 Tabel 3.3 Skenario Use Case Profil Nama Use Case Profil Deskripsi singkat Pada use case ini aplikasi akan menampilkan petunjuk tentang data pribadi pembuat pembelajaran mengenal pola dasar gambar berbasis Android. Actor Pra kondisi Tindakan utama Pasca kondisi Pengguna Aplikasi sudah dijalankan Aplikasi akan menampilakan data pribadi pembuat pembelajaran mengenal pola dasar gambar berbasis Android. Apabila use case berhasil dijalankan, maka pengguna dapat melihat informasi data pribadi. Table 3.4 Skenario Use Case Pilih Keluar Nama Use Case Keluar Deskripsi singkat Pada use case ini aplikasi akan menampilkan tombol keluar Actor Pra kondisi Tindakan utama Pengguna Aplikasi sudah dijalankan Menampilkan dua tombol pilihan Pasca kondisi Apabila use case berhasil dijalankan, maka pengguna dapat memilih untuk tetap bermain atau keluar dari aplikasi

5 Activity Diagram Activity Diagram menunjukan langkah demi langkah untuk memlakukan komputasi. Setiap langkah adalah sebuah keaddan dalam melakukan sesuatu.diagram ini menggambarkan langkah mana yang harus dijalankan secara berurutan dan langkah mana yang bias dijalankan secara bersama.pada gambar 3.2 menjelaskan tentang perancangan activity diagram untuk halaman menu. Gambar 3.2 Activity Diagram Halaman Menu

6 33 Aktifitas dimulai ketika pengguna memilih masuk ke aplikasi, kemudian sistem menampilkan halaman menu,aktifitas selanjutnya adalah memilih menu yang terdiri dari Belajar Pola, Bermain Pola, Profil dan keluar Perancangan Activity Diagram Untuk Halaman Berlajar Pola Aktifitas dimulai ketika pengguna memilih halaman Belajar Pola, selanjutnya sistem akan menampilkan halaman belajar pola, selanjutnya pengguna dapat belajar pola dasar gambar diiringi suara untuk menerangakan gambar yang dimaksud. Gambar 3.3 Activity Diagram halaman Belajar Pola

7 Perancangan Activity Diagram Untuk Halaman Bermain Pola Aktifitas dimulai ketika pengguna memilih menu Bermain Pola. selanjunya sistem akan menampilkan halaman Bermain Pola. selanjutnya pengguna memilih level permainan yang akan di mainkan,setelah permainan selesai sistem secara otomatis kembali ke halaman Bermain Pola. Gambar 3.4 Activity Diagram halaman Bermain Pola

8 Perancangan Activity Diagram Untuk Halaman profil Aktifitas dimulai ketika pengguna memilih menu Profil. Selanjutnya sistem akan menampilkan halaman profil pembuat. Gambar 3.5 Aktivity Diagram halaman Profil

9 Perancangan Activity Diagram untuk halaman Keluar Aktifitas dimulai ketika pengguna memilih menu Keluar. Selanjutnya sistem akan menampilkan halaman Keluar dan memberi pilihan ke pengguna, bila pengguna masih ingin berada dalam aplikasi pengguna klik tombol Tidak dan sistem akan kembali ke menu utama, bila pengguna ingin mengakhiri menggunakan aplikasi maka klik tombol Ya maka pengguna akan keluar dari aplikasi. Gambar 3.6 Activity Diagram halaman Keluar

10 Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktivitas sebuah akenario tunggal. Diagram tersebut menunjukan sejumlah objek contoh dan pesan-pesan melalui objek-objek didalam use case diagram ( Fowler, 2005 ). Dari bentuk use case yang telah digambarkan sebelumnya, dapat dibuat sequence Diagram Perancangan Sequence Diagram Aplikasi Mengenal Pola Gambar Gambar 3.7 Sequence Diagram Halaman Mengenal Pola Sequence Diagram halaman bermain Pola menggambarkan skenario dan langkah-langkah yang di lakukan pengguna.pertama pengguna masuk ke halaman menu, lalu klik tombol Belajar Pola maka aplikasi akan mengajarkan pola gambar kepada pengguna.

11 Perancangan Sequence Diagram Untuk Halaman Bermain Pola Skenario dari Sequence Diagram pada halaman Bermain Pola di mulai saat pengguna masuk ke halaman menu utama dan kemudian memilih menu bermain pola,lalu pengguna memilih level permainan dan bila selesai pengguna bias memilih level permainan yang lainya Gambar 3.8 Sequence Diagram halaman Bermain Pola

12 Perancangan Sequence Diagram Untuk Halaman Profil Skenario dari Sequence Diagram pada halaman profil dimulai saat pengguna masuk ke halaman menu utama dan kemudian memilih menu profil, sistem lalu menampilkan halaman profil Gambar 3.9 Sequence Diagram Halaman Profil

13 Perancangan Sequence Diagram Untuk Halaman Keluar Skenario dari Sequence Diagram pada halaman Keluar di mulai saat pengguna masuk ke halaman Menu Utama dan kemudian memilih Menu Keluar, di halaman Keluar pengguna bisa memilih untuk kembali ke halaman Menu Utama atau keluar dari aplikasi Gambar 3.10 Sequence Diagram Halaman Keluar

14 Perancangan Storyboard Storyboard merupakan deskripsi masing masing tampilan suatu kejadian dari movie yang akan di mainkan. Dengan mencantumkan semua objek atau elemen multimedia serta komponen komponen aplikasi yang akan di buat. Satu kolom storyboard mewakili satu tampilan di layar monitor Gambar 3.11 Skenario untuk halaman Menu Utama Scene name No. 1 No. 2 No. 3 No. 4 Background : Halaman Menu utama : Menu Bermain Pola : Menu Bermain Pola : Menu Profil : Menu Keluar : Gambar / Animasi

15 Gambar 3.12 Skenario untuk Halaman Bermain Pola Scene name No. 1 No. 2 No. 3 Background : Halaman Menu Bermain Pola : Menu Pemula : Menu Menengah : Menu Mahir : Gambar / Animasi 1 \ 2 Gambar 3.13 Skenario untuk Halaman Belajar Pola

16 43 Scene name No. 1 No. 2 Background : Halaman Menu Berlajar Pola : Papan belajar Pola : Tombol Home : Gambar / Animasi Gambar 3.14 Skenario untuk Halaman Level Pemula Scene name : Halaman Menu Pemula No. 1 : pilihan 1 No. 2 : Pilihan 2 No. 3 : pilihan 3 Background : Gambar / Animasi

17 Gambar 3.15 Skenario untuk Halaman Level Menengah Scene name : Halaman Menu Menengah No. 1 : pilihan 1 No. 2 : Pilihan 2 No. 3 : Target 1 No. 4 : Target 2 Background : Gambar / Animasi

18 Gambar 3.16 Skenario untuk Halaman Level Mahir Scene name : Halaman Menu Mahir No. 1 : Target 1 No. 2 : Target 2 No. 3 : Target 3 No. 4 : Target 4 No. 5 : Target 5 No. 6 : Target 6 No. 7 : Pilihan 1 No. 8 : Pilihan 2 No. 9 : Pilihan 3 No. 10 : Pilihan 4 No. 11 : Pilihan 5 No. 12 : Pilihan 6 Background : Gambar / Animasi

19 46 1 Text Text 2 Gambar 3.18 Skenario untuk Halaman Profil Scene name No. 1 : Halaman Menu Profil : Logo UMB No. 2 : Text 1 No. 3 No. 4 No. 5 Background : Foto Pembuat : Text : Tombol Home : Gambar / Animasi

20 47 Text Gambar 3.18 Skenario untuk Halaman Menu Keluar Scene name No. 1 : Halaman Menu Keluar : T ext No. 2 : Pilihan 1 No. 3 : Pilihan 2 Background : Gambar / Animasi