BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN III.1. Analisa Sistem Sistem perancangan aplikasi simulasi service sepeda motor ini hanya menampilkan proses simulasi kerusakan yang bersifat tune up atau kerusakan sederhana seperti mengganti ban, oli, busi dan lampu. Oleh sebab itu penulis menyajikan proses simulasi kerusakan yang sering terjadi pada kendaraan bermotor. Kendala-kendala yang dihadapi pada sistem yang sedang berjalan yaitu: 1. Aplikasi yang dibuat dapat dijalankan pada sistem operasi Windows dan berbasis Flash. 2. Penyajian aplikasi simulasi dilnegkapi dengan objek gambar 2D. III.2. Analisa Masalah Dalam merancang sebuah aplikasi tidak luput dari berberapa kendala dan masalah. Adapun analisa masalah didalam aplikasi simulasi service sepeda motor ini terdiri dari: 1. Permasalahan Dasar Pada Aplikasi Simulasi Service Sepeda Motor Banyak sekali aplikasi ataupun program simulasi yang jarang dijumpai dengan menerapkan konsep yang sederhana dan mencakup kalangan menengah kebawah. 18

2 19 Setiap objek dalam perancangan aplikasi tersebut, dibuat kedalam gambar pada media kertas atau blueprint terlebih dahulu, sebelum gambar diolah menjadi citra 2D. Proses ini membutuhkan waktu yang cukup lama, dikarenakan setiap objek yang dibuat harus digambar satu-persatu sesuai dengan konsep dan materi simulasi Aplikasi ini juga dilengkapi dengan beberapa menu yang simple, seperti menu Service, Alat dan Suku Cadang, Bantuan dan Tentang. Dengan ini, proses yang ditampilkan akan lebih detail dan menarik. 2. Proses Mendesain Objek Gambar Adapun beberapan tahapan dalam melakukan desain objek gambar tersebut adalah: a. Objek gambar di desain terlebih dahulu pada media kertas atau blueprint, kemudian untuk menghasilkan citra 2D menggunakan aplikasi CorelDRAW X6. b. Ukuran form aplikasi 800x430 pixel dan ukuran gambar lebih kurang cm 2. c. Format gambar dalam bentuk.png dan.jpeg. 3. Proses Pembuatan Animasi 2D Terdapat beberapa proses dalam merancang animasi tersebut yaitu: a. Citra 2D yang sudah jadi, dirancang dan diolah menggunakan aplikasi pendukung seperti Macromedia Flash, untuk menciptakan animasi simulasi yang dibutuhkan.

3 20 b. Program yang sudah dirancang, akan di convert ke dalam bentuk.swf dan.exe. III.3. Strategi Pemecahan Masalah Dalam menciptakan sebuah aplikasi simulasi tersebut, penulis menggunakan teknik dengan memanfaatkan aplikasi Corel Draw X6 dan Macromesia Flash 8 sebagai media pengolahan citra. Aplikasi ini ditujukan kepada pengguna khususnya pengendara sepeda motor yang kurang memahami tentang service sepeda motor. III.4. Analisa Kebutuhan Aplikasi dirancang dengan menggunakan Macromedia Flash 8 sebagai pembuatan animasi. Untuk model dan konsep, dirancang dengan menggunakan Corel Draw X6. 1. Perangkat Keras Perangkat keras minimum yang digunakan untuk menjalankan aplikasi simulasi service sepeda motor berbasis 2D adalah sebagai berikut: a. Laptop atau Komputer b. Prosesor Intel Pentium 4, 3.0 GHz c. Memori 512 MB d. Hardisk 80 GB e. VGA 256 MB f. Sound Card atau Speaker

4 21 2. Perangkat Lunak Perangkat lunak yang dibutuhkan untuk menjalankan aplikasi ini adalah sebagai berikut: a. Adobe Flash Player b. Adobe Shockwave Player Perangkat lunak yang digunakan untuk menjalankan aplikasi simulasi service sepeda motor berbasis 2D adalah sebagai berikut: a. Sistem Operasi Windows 7 x64 bit b. Macromedia Flash 8 c. Corel Draw X6, III.5. Desain Sistem Metode perancangan yang digunakan untuk merancang aplikasi simulasi service sepeda motor berbasis 2D adalah metode perancangan terstruktur menggunakan UML. UML pada dasarnya merupakan konsep perancangan untuk mengetahui proses dan jalannya aliran data serta penyimpanan data yang merupakan konsep perancangan termudah dengan pendekatan top down. III.5.1. Use Case Diagram Use case diagram digunakan untuk memodelkan bisnis proses berdasarkan perspektif pengguna sistem. Use case diagram terdiri atas diagram untuk use case dan actor. Actor merepresentasikan orang yang akan mengoperasikan atau orang yang berinteraksi dengan sistem aplikasi.

5 22 diagram. Berikut perancangan aplikasi yang digambarkan menggunakan use case SISTEM APLIKASI SIMULASI SERVICE SEPEDA MOTOR Simulasi Service Sepeda Motor Service Actor Menu Utama Alat dan Suku Cadang Bantuan Info Gambar Info Tentang Info Gambar III.1. Use Case Diagram III.5.2. Story Board Storyboard adalah area berseri dari sebuah gambar sketsa yang digunakan sebagai alat perencanaan untuk menunjukkan secara visual bagaimana aksi dari sebuah cerita berlangsung (Youllia Indrawaty Nurhasanah, dkk, 2011). Dalam merancang sebuah aplikasi multimedia, storyboard sangat diperlukan dalam hal menjelaskan proses aplikasi tersebut. Berikut storyboard dari aplikasi simulasi service sepeda motor tersebut.

6 23 Tabel III.1. Storyboard Aplikasi Simulasi Service Sepeda Motor Scene Sequence Board Frame Naskah Halaman utama sebelum masuk kedalam menu utama Setelah masuk, akan muncul animasi percakapan antara pegawai bengkel dengan konsumen Selanjutnya akan muncul menu utama aplikasi Jika masuk ke tombol service akan muncul menu pilihan kerusakan

7 24 2, 3, 6 dan 7 1 Scene 2, 3, 6 Proses simulasi service sepeda motor, (sebagai dan 7 (1-200) contoh : depan) memperbaiki ban Tampilan aplikasi pada halaman TENTANG Tampilan aplikasi pada halaman ALAT DAN SUKU CADANG Saat objek di klik, akan muncul informasi tentang alat dan suku cadang yang digunakan pada simulasi tersebut

8 Tampilan aplikasi pada halaman BANTUAN III.5.3. Sequence Diagram Sequence Diagram menggambarkan perilaku sebuah skenario dalam aplikasi. Diagram ini menunjukkan sejumlah objek dan pesan yang diletakkan diantara objek-objek ini didalam use case diagram, berikut gambar sequence diagram: Sequence diagram aplikasi ini menggambarkan proses yang terjadi pada saat user masuk kedalam aplikasi simulasi service sepeda motor seperti gambar berikut: Menu Utama Pilihan Menu Actor go into() get items() return to menu items() list menu() Menu 1. Service 2. Alat dan Suku Cadang 3. Tentang 4. Bantuan Gambar III.2. Sequence Diagram

9 26 III.5.4. Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, mulai dari user hingga pada aplikasi. Pertama user membuka aplikasi simulasi service sepeda motor dengan mengklik tombol masuk, kemudian aplikasi ini masuk kedalam area path user, disinilah user diminta untuk melakukan pilihan proses pada area user. Berikut activity diagram dari aplikasi tersebut: User Aplikasi Interface Aplikasi Menu Utama Pilihan Menu *Service *Alat dan Suku Cadang *Tentang *Bantuan Verifikasi Validasi Selesai Gambar III.3. Activity Diagram

10 27 III.6. Desain User Interface III.6.1. Desain Input Adapun desain input dalam perancangan aplikasi simulasi service sepeda motor ini adalah penginputan dilakukan sebelum masuk ke halaman menu. Dengan kata lain, pada interface pengguna harus mengklik tombol masuk sebelum menuju pilihan menu utama. SIMULASI SERVICE SEPEDA MOTOR BACKGROUND ANIMASI MASUK Gambar III.4. Interface Input Aplikasi III.6.2. Desain Output Dalam perancangan interface, desain output terbagi menjadi beberapa bagian yaitu: a. Interface Menu Utama Menu utama merupakan halaman penting dalam sebuah aplikasi, yang mana merupakan halaman maksud dan tujuan dari aplikasi tersebut. Berikut menu utama dari aplikasi simulasi tersebut:

11 28 SERVICE MENU ALAT & SUKU CADANG BACKGROUND TENTANG BANTUAN BACKGROUND Gambar III.5. Menu Utama Aplikasi b. Interface Service Pada tampilan service, terdapat pilihan kerusakkan yang terdiri dari ganti ban, oli, busi dan lampu. Berikut tampilan pada halaman tersebut: SERVICE PILIH KERUSAKKAN MOTOR GANTI BAN Gambar III.6. Menu Service Aplikasi c. Interface Alat dan Suku Cadang Pada tampilan alat dan suku cadang, terdapat penjelasan secara detail alat dan suku cadang apa saja yang digunakan saat memperbaiki sepeda motor sesuai dengan simulasi yang ditampilkan.

12 29 ALAT DAN SUKU CADANG INFORMASI Gambar III.7. Interface Alat dan Suku Cadang d. Interface Tentang Menu tentang menampilkan informasi tentang programmer, berikut tampilan pada halaman tersebut: TENTANG INFORMASI Gambar III.8. Interface Tentang e. Interface Bantuan Pada menu pilihan bantuan menampilkan informasi dasar tentang aplikasi simulasi tersebut dan menjelaskan tentang prosedur penggunaan aplikasi, berikut tampilannya:

13 30 BANTUAN INFORMASI Gambar III.9. Interface Bantuan