BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Analisa rancang bangun aplikasi pembelajaran dan animasi algoritma bubble sorting ini adalah dengan menggabungkan teks, gambar dan animasi, yang akan diimplemenatasikan menjadi sebuah aplikasi berbasis andorid. Di dalam aplikasi pembelajaran ini terdapat : 1. Materi algoritma Bubble sorting, pada bagian ini akan menampilkan materi algoritma Bubble sorting dalam bentuk teks, kemudian terdapat contoh proses / langkah langkah pengurutan sorting dengan menggunakan animasi yang bertujuan agar materi yang disampaikan lebih mudah dimengerti. 2. Menyajikan latihan soal soal, pada bagian ini pengguna akan diberikan 5 soal yang telah tersedia dalam bentuk teks dan pilihan jawaban dalam bentuk multiple choise. Setiap menyelesaikan 1 soal latihan tersebut, akan ditampilkan berapa nilai / score soal yang dijawab benar. Soal yang disajikan akan bersifat acak setiap kali kita membuka aplikasi pembelajaran ini 3.2 Perancangan Pada bagian ini akan dijelaskan secara rinci perancangan tampilan aplikasi berbasis andorid, baik font, warna, ukuran, posisi, serta animasi yang akan ditampilkan dalam merancang interface, serta mempersiapkan jenis soal-soal yang akan di input yang kemudian akan ditampilkan pada aplikasi pembelajaran ini. Dalam perancangan ini juga meliputi diagram diagram berikut : 32
33 3.2.1 Perancangan Use Case Diagram Diagram ini menunjukkan fungsionalitas suatu sistem atau kelas, dan bagaimana sistem beriteraksi dengan dunia luar. Use case diagram pada aplikasi pembelajaran ini dapat dilihat pada gambar dibawah ini. Gambar 3.1 Use Case Diagram Berikut adalah deskripsi use case diagram yang telah digambarkan diatas : 1. Nama : Tahap mempelajari materi Bubble sorting Aktor : User Deskripsi : User akan mendapatkan penjelasan mengenai materi Bubble sorting.
34 Skenario : Pada halaman menu, user memilih button materi. Pada halaman materi ini user dapat membaca dan mempelajari materi algoritma Bubble sorting. 2. Nama : Tahap mempelajari proses sorting efisien Aktor : User Deskripsi : User akan mendapatkan penjelasan mengenai proses sorting algoritma bubble sort dengan metode efisien Skenario : Pada halaman menu, user memilih button proses sorting efisien. Pada halaman proses sorting efiesien ini user dapat melihat dan mempelajari proses / langkah-langkah pengurutan algoritma bubble sorting dengan metode efisien dalam bentuk animasi. 3. Nama : Tahap mempelajari proses sorting tidak efisien Aktor : User Deskripsi : User akan mendapatkan penjelasan mengenai proses sorting algoritma bubble sort dengan metode tidak efisien Skenario : Pada halaman menu, user memilih button proses sorting tidak efisien. Pada halaman proses sorting tidak efisien ini user dapat melihat dan mempelajari proses / langkah-langkah pengurutan algoritma bubble sorting dengan metode tidak efisien dalam bentuk animasi. 4. Nama : Tahap mengerjakan soal Aktor : User Deskripsi : User akan mendapatkan soal mengenai materi dan proses sorting algoritma Bubble sort Skenario : Pada halaman menu, user memilih button proses soal. Pada halaman soal ini user dapat mengerjakan soal-soal yang berhubungan dengan algoitma
35 bubble sort. Soal soal tersebut dalam bentuk multiple choise. Setiap selesai satu soal yang dikerjakan, user akan mengetahui nilai dari jawaban yang yang telah dipilih. 3.2.2 Perancangan Activity Diagram Activity Diagram adalah sebuah diagram aktifitas yang menjelaskan bagaimana kejadian dari sebuah Use Case, dalam hal ini mendeskripsikan pandangan di dalam sistem. Activity Diagram menunjukkan langkah demi langkah untuk melakukan komputasi secara detailnya menggambarkan langkah mana yang harus dijalankan secara berurutan dan langkah mana yang bisa dijalankan secara bersamaan. Setiap langkah adalah sebuah state dan aliran pengaturan dari aktifitas satu langkah ke langkah berikutnya disebut transition. Activity Diagram memiliki peran seperti flowchart, namun perbedaannya adalah activity diagram bisa mendukung perilaku paralel sedangkan flowchart tidak bisa. Berikut adalah gambar activity diagram untuk aplikasi pembelajaran ini. 1. Activity Diagram untuk halaman materi Gambar 3.2 Activity Diagram halaman materi
36 2. Activity Diagram untuk menu proses sorting efisien Gambar 3.3 Activity Diagram halaman proses sorting efisien 3. Activity Diagram untuk menu proses sorting tidak efisien Gambar 3.4 Activity Diagram halaman proses sorting tidak efisien
37 4. Activity Diagram untuk halaman soal Gambar 3.5 Activity Diagram halaman soal 3.2.3 Perancangan Sequence Diagram Sequence Diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu. Berikut adalah Sequence Diagram untuk aplikasi pembelajaran dan animasi algoritma Bubble Sort
38 Gambar 3.6 Sequence Diagram Aplikasi Pembelajaran Bubble Sort Pada gambar 3.6 diatas menggambarkan dimana user yang sudah masuk aplikasi, setelah itu sistem akan menampilkan menu utama yang terdiri dari halaman materi, halaman proses sorting efisien, halaman proses sorting tidak efisien dan halaman soal.
39 1. Sequence Diagram halaman materi Gambar 3.7 Sequence Diagram Materi
40 2. Sequence Diagram Proses Sorting Efisien Gambar 3.8 Sequence Diagram Proses Sorting Efisien
41 3. Sequence Diagram Proses Sorting Tidak Efisien Gambar 3.9 Sequence Diagram Proses Sorting Tidak Efisien
42 4. Sequence Diagram Soal Gambar 3.10 Sequence Diagram Soal 3.3 Perancangan Interface (Antar Muka) Interface atau antar muka merupakan bagian yang menghubungkan antara sistem dengan pengguna. Dengan demikian suatu perancangan antarmuka yang baik akan memudahkan pengguna untuk berinteraksi dengan aplikasi pelatihan pembelajaran ini.
43 1. Tampilan Halaman Utama / Splashscreen Tampilan halaman splashscreen adalah halaman awal yang muncul ketika ketika pertama kali diakses oleh user. Berikut gambaran perancangan halaman utama / splashscreen : Gambar 3.11 Tampilan perancangan halaman utama/splash screen
44 2. Tampilan Halaman Menu Tampilan halaman menu adalah tampilan yang berisi berbagai menu yang dapat dipilih oleh user. Tampilan menu tersebut terdiri dari menu materi, menu proses sorting efisien, menu proses sorting tidak efisien dan menu soal. Berikut adalah tampilan perancangan halaman menu : Gambar 3.12 Tampilan perancangan halaman menu
45 3. Tampilan Halaman Materi Tampilan halaman materi ini adalah tampilan yang berisi materi algoritma Bubble sort. Berikut adalah gambarannya : Gambar 3.13 Tampilan perancangan halaman materi
46 4. Tampilan Halaman Animasi proses sorting efisien Tampilan halaman proses sorting efisien menampilkan animasi proses sorting Bubble Sort. Disebut sebagai proses efisien karena proses sorting akan berhenti apabila deretan angka sudah terpenuhi dan sesuai pada tempatnya meskipun masih terdapat proses sorting yang belum dilakukan. Berikut adalah gambaran dalam proses sorting efisien Gambar 3.14 Tampilan perancangan halaman animasi proses sorting efisien
47 5. Tampilan Halaman Animasi proses sorting tidak efisien Tampilan halaman proses sorting tidak efisien hampir sama dengan halaman sorting tidak efisien, yaitu menampilkan animasi proses sorting Bubble Sort. Namun perbedaannya adalah pada proses tidak efisien meskipun deretan angka sudah terpenuhi dan sesuai pada tempatnya namun masih melakukan proses sorting hingga seluruh angka melakukan proses sorting. Berikut adalah gambaran dalam proses sorting tidak efisien Gambar 3.15 Tampilan perancangan halaman animasi proses sorting tidak efisien
48 6. Tampilan Halaman soal Tampilan halaman soal menampilkan soal soal yang berkaitan dengan algoritma Bubble Sort. Setiap soal terdiri dari 3 pertanyaan dengan terdapat beberapa pilihan jawaban. Berikut adalah gambaran pada halaman soal : Gambar 3.16 Tampilan perancangan halaman soal