T1 672006279 BAB III

23

Bab 3

Metode dan Perancangan Sistem

3.1 Metode Pengembangan Sistem

3.1.1 Prototype Model

Metode yang digunakan dalam penelitian ini adalah metode perancangan sistem dengan menggunakan model Prototype. Prototype model merupakan model perancangan sistem dimana kebutuhan diubah menjadi sistem yang bekerja (Working System) yang diperbaiki secara terus menerus sesuai dengan kebutuhan dari kerjasama antara analis dengan pengguna (user). Prototyping juga bisa dibangun melalui beberapa tools pengembang untuk menyederhanakan proses (Fatta,2007).

Proses dari prototyping model, dapat dijelaskan sebagai berikut : 1. Pengumpulan Kebutuhan Pengguna

Tahap pertama dalam perancangan sistem dengan metode

prototype adalah mengidentifikasi kebutuhan dasar pengguna

melalui proses requirement dan analisis. Dalam proses

requirement, Developer bertemu dengan client untuk mendapatkan informasi dasar pengguna. Client dalam penelitian ini adalah guru Teknik Mesin Otomotif kelas XI di SMK T&I Kristen Salatiga. Sedangkan developer adalah penulis sendiri selaku subjek yang melakukan penelitian.

2. Perancangan Prototype

Informasi yang didapat kemudian digunakan sebagai acuan untuk mengembangkan prototype (cetakan biru) awal. Tahap ini prototype sudah mulai di rancang, yang diperlukan adalah merancang desain tampilan antarmuka, flowchart system, dan skenario aplikasi.

3. Evaluasi Prototype

Pada tahap selanjutnya, developer didorong untuk bekerja dengan client untuk menentukan seberapa baik prototype itu memenuhi kebutuhannya, dan untuk memberikan saran-saran bagaimana memperbaiki prototype tersebut. Developer

kemudian menggunakan feedback ini untuk memperbaharui

prototype yang telah dibuat sebelumnya. Setelah itu, developer

akan memperbaiki prototype sesuai dengan feedback yang telah didapat pada proses evaluasi. Hasil revisi dari prototype selanjutnya diberikan kembali pada client untuk dievaluasi dan

dinilai kembali, apakah tujuan umum dari pembuatan software telah tercapai. Apabila prototype belum memenuhi kebutuhan pengguna, tahap selanjutnya kembali ke tahap paling awal, begitu seterusnya sampai tujuan umum tercapai dan pengguna merasa puas (Pressman,1997).

3.1.2 Analisis Kebutuhan

Analisis kebutuhan meliputi tiga hal yaitu : kebutuhan sistem,

hardware (perangkat keras) dan software (perangkat lunak).

3.1.2.1 Kebutuhan Sistem

Kebutuhan sistem dalam penelitian ini adalah wawancara. Wawancara dilakukan kepada Bp. Setyo Dwi W. Selaku guru jurusan otomotif dan Bp. Totok Arisanto selaku mekanik dari Honda untuk mengetahui bahan atau materi yang dibutuhkan dalam pembuatan aplikasi pembelajaran ini. Materi yang dibutuhkan adalah materi yang berhubungan dengan servis ringan sepeda motor Honda BeAT.

3.1.2.2 Perangkat Keras

Perangkat keras minimum yang digunakan untuk menjalankan aplikasi pembelajaran servis ringan sepeda motor Honda BeAT adalah sebagai berikut :

a. Intel Pentium 4, 3.0 GHz

b. Memori 512 MB c. Hardisk 80 GB

3.1.2.3 Perangkat Lunak

Perangkat lunak yang dibutuhkan untuk menjalankan aplikasi ini adalah :

a. Adobe Flash Player

b. Adobe Shockwave Player

Perangkat lunak yang digunakan untuk membuat aplikasi pembelajaran servis sepeda motor Honda BeAT adalah sebagai berikut :

a. Sistem Operasi Windows 7

b. Maxon Cinema 4D 11.5 c. Adobe Flash CS5 d. Adobe Director 11.5 e. Adobe Photoshop CS5 f. Adobe Ilustrator CS5 g. Corel Draw X5 h. Adobe Audition CS3

3.2

Perancangan Sistem

3.2.1 Flowchart Sistem

Pada Gambar 3.2 dijelaskan bahwa setelah user memulai menjalankan aplikasi, user akan masuk ke dalam menu utama apikasi. Pada menu utama, user dihadapkan dengan enam pilihan menu utama yaitu menu yang dinamakan menu spesifikasi, menu komponen, menu alat servis, menu servis ringan, menu latihan soal dan menu bantuan. Pada tiap menu terdapat tombol untuk keluar atau mengakhiri aplikasi.

Gambar 3.2 Flowchart Sistem

3.2.2 Use Case Diagram

Gambar 3.3 menjelaskan fungsi-fungsi dari user pada sistem atau aplikasi ini. User dapat mengakses semua tools yang ada pada aplikasi tanpa harus login terlebih dahulu.

3.2.3 Activity Diagram

Gambar 3.4 menggambarkan aktivitas user saat berada pada spesifikasi sepeda motor Honda BeAT. Saat user menginput “Spesifikasi”, user akan masuk pada materi spesifikasi meliputi spesifikasi mesin, transmisi, kelistrikan, dimensi, rangka, performa serta model 3D sepeda motor Honda BeAT.

Gambar 3.4 Activity Diagram pada Menu Spesifikasi

Gambar 3.5 menggambarkan aktivitas user saat berada pada “Komponen”. Saat user menginput “Komponen”, user akan masuk pada materi komponen yang di dalamnya terdapat bagian komponen sepeda motor Honda BeAT. User menginput bagian komponen, kemudian aplikasi akan menampilkan materi komponen sepeda motor Honda BeAT yang dipilih oleh user.

.

Gambar 3.6 menggambarkan aktivitas user saat berada pada “Alat Servis”. Saat user menginput “Alat Servis”, user akan masuk pada materi peralatan servis yang dibutuhkan dalam pelaksanaan servis Honda BeAT.

Gambar 3.6 Activity Diagram pada Menu Alat Servis

Gambar 3.7 menggambarkan aktivitas user saat berada pada “Servis Ringan”. Saat user menginput “Servis”, user akan masuk pada materi tata cara servis sepeda motor Honda BeAT. User dapat menginput materi tata cara servis ringan dengan memilih pilihan servis. Pada halaman ini user akan melihat tata cara servis ringan sepeda motor Honda Beat dengan animasi 3D. User bebas mengerakkan pergerakan kamera dari aplikasi dengan menggunakan bantuan mouse atau keyboard.

Gambar 3.8 menggambarkan aktivitas user saat berada pada “Latihan Soal”. Saat user menginput “Latihan Soal”, user diminta untuk memasukan nama. Setelah itu, user akan mengerjakan soal latihan yang berhubungan dengan servis sepeda motor Honda BeAT, dimana soal yang disajikan berbentuk pilihan ganda dengan empat pilihan jawaban. Setelah menyelesaikan soal yang ada, user akan mendapatkan tambahan 10 angka bila menjawab tiap pertanyaan, kemudian score total hasil akan muncul pada akhir dari soal yang telah dikerjakan.

Gambar 3.8 Activity Diagram Pada Latihan Soal

3.2.4 Skenario Aplikasi

Skenario berikut merupakan langkah–langkah kegiatan yang akan dilakukan oleh user ketika menggunakan program ini. Skenario belajar yang dikembangkan di sini akan memberikan kesempatan kepada user untuk menjelajah aplikasi sesuai dengan kebutuhan. Dengan demikian diharapkan user tidak merasa jenuh harus mengikuti aplikasi yang sudah ditentukan. User dapat membaca menu bantuan terlebih dahulu atau user juga dapat langsung

memulai menjalankan aplikasi. Adapun skenario pada aplikasi ini yaitu sebagai berikut:

1. Start

Aplikasi pertama kali dijalankan. 2. Intro

Setelah aplikasi dijalankan maka tampilan pertamanya berupa intro yang merupakan tampilan awal sebelum masuk ke dalam isi materi atau menu utama.

3. Inisialisasi menu utama.

Setelah proses intro selesai maka selanjutnya akan masuk ke dalam menu utama yang berupa :

a. Spesifikasi

Jika user memilih ”Spesifikasi” maka muncul menu spesifikasi yang berisikan materi dari spesifikasi sepeda motor Honda BeAT. Isi dari spesifikasi meliputi spesifikasi mesin, transmisi, kelistrikan, dimensi, rangka, performa serta gambar sepeda motor Honda BeAT. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.

b. Komponen

Jika user memilih “Komponen” maka akan ditampilkan materi tentang komponen-komponen beserta gambaran dan fungsi serta keterangannya. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.

c. Alat Servis

Jika user memilih “Alat Servis” maka akan ditampilkan materi tentang macam-macam peralatan yang di butuhkan dalam servis sepeda motor Honda BeAT beserta gambaran dan fungsi serta keterangannya. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama memilih materi selanjutnya.

d. Servis Ringan

Jika user memilih “Servis Ringan” maka akan ditampilkan materi tentang tata cara servis ringan sepeda motor Honda BeAT beserta gambaran dengan media animasi 3 dimensi. Setelah proses selesai dan user menginginkan materi lain, user dapat kembali ke menu utama untuk memilih materi selanjutnya.

4. Latihan Soal

Jika tombol “Latihan Soal” dipilih oleh user maka aplikasi akan menampilkan latihan soal berupa pertanyaan yang berhubungan dengan servis sepeda motor Honda Beat. 5. Bantuan

Jika tombol “Bantuan” dipilih oleh user maka aplikasi akan menampilkan informasi tentang petunjuk penggunaan aplikasi dan fungsi-fungsi tombol navigasi.

6. Keluar

Jika tombol “Keluar” dipilih oleh user akan keluar dari aplikasi.

3.2.5 Perancangan Desain 3D Modelling dan Animasi 3D

Pemodelan 3D (3D Modelling) dan animasi 3D dalam aplikasi ini meliputi pembuatan model 3D sepeda motor Honda BeAT beserta komponennya dan alat servis yang dibutuhkan dalam proses servis ringan sepeda motor Honda BeAT. Pada gambar 5 dijelaskan proses pembuatan 3D pada aplikasi “Belajar Servis Motor Honda Beat”. Mulai dari pembuatan cetakan 2 dimensi, pembuatan nurbs dan polygon, texturing warna, pembuatan animasi, pencahayaan dan penyimpanan file 3D. Pembuatan 3D Modelling tersebut menggunakan software Maxon Cinema 4D 11.5. Bagan perancangan pembuatan 3D dapat dilihat pada gambar 3.9.

Gambar 3.9 Desain Perancangan Pembuatan 3D Modelling

Gambar 3.10 merupakan rancangan pembuatan animasi 3D pada menu servis ringan sepeda motor Honda BeAT. Model 3D yang telah jadi kemudian dibuat animasi pergerakkannya dengan menggunakan timeline.

Gambar 10 Perancangan Animasi 3D Sepeda Motor Honda BeAT

3.2.6 Desain Antar Muka User (User Interface)

Setelah skenario kegiatan dibuat, maka langkah selanjutnya adalah membuat user interface. User Interface berisi desain tampilan pada layar monitor. Desain tampilan sekurang–kurangnya memuat informasi tentang judul, materi, nama halaman, kotak tampilan jika dilihat dilayar komputer, teks narasi, keterangan tampilan, dan keterangan tentang gambar, animasi. Gambar 3.11 menjelaskan desain user interface menu utama. Pada bagian kanan atas terdapat tombol keluar dan tombol bantuan, di samping kiri terdapat empat tombol yaitu tombol Spesifikasi, tombol Komponen, tombol Alat Servis dan tombol Servis. Pada bagian kanan form adalah tempat munculnya animasi 3 dimensi Honda BeAT.

Gambar 3.11 Desain User Interface Menu Utama

Gambar 3.12 menjelaskan desain user interface menu spesifikasi. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian bawah tombol menu utama terdapat tombol data spesifikasi dan tombol gambar Honda BeAT. Pada bagian tengah form adalah tempat munculnya data spesifikasi dan animasi 3 dimensi sepeda motor Honda BeAT yang bisa digerakakan sesuai keinginan user.

Gambar 3.13 menjelaskan desain User Interface menu komponen. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian form sebelah kiri adalah form data komponen. Form sebelah kanan atas adalah tempat munculnya animasi 3 dimensi komponen. Sedangkan pada bagian kanan bawah adalah nama dan keterangan komponen sepeda motor Honda BeAT.

Gambar 3.13 Desain User Interface Halaman Menu Komponen

Gambar 3.14 menjelaskan desain user interface menu alat servis. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian form sebelah kiri adalah form daftar data materi peralatan yang dibutuhkan dalam proses servis ringan Honda BeAT. Bagian form sebelah kanan atas adalah form nama alat yang telah dipilih, sedangkan form sebelah kanan bawah adalah munculya animasi 3 dimensi peralatan yang dibutuhkan dalam servis Honda BeAT.

Gambar 3.14 Desain User Interface Naskah Menu Alat Servis

Gambar 3.15 menjelaskan desain user interface menu servis. Pada menu servis Terdapat 2 desain user interface, desain sebelah kiri merupakan tampilan ketika user mengakses menu servis pertama kali. Terdapat sembilan proses servis ringan Honda BeAT. Sedangkan desain user interface sebelah kanan adalah ketika user telah memilih salah satu materi servis. Dalam desain sebelah kanan

user bisa mengakses keterangan proses dan animasi 3d servis sepada

motor Honda BeAT.

Gambar 3.16 menjelaskan desain user interface menu latihan soal. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian form sebelah tengah adalah form latihan soal yang berisi pertanyaan tentang servis ringan sepeda motor Honda Beat. Bagian form sebelah kiri bawah adalah form nama yang telah diisikan oleh user, sedangkan form sebelah kanan bawah adalah munculya score atau nilai yang telah dijawab oleh user.

Gambar 3.16 Desain User Interface Menu Latihan Soal

3.3 Metode Pengujian Sistem

Dalam penelitian ini, pengujian sistem dilakukan dengan metode alfa testing dan beta testing. Pengujian alfa testing merupakan pengujian yang dilakukan oleh pemakai di lingkungan pengembang, pengujian ini dilakukan untuk mengetahui apakah aplikasi bisa berjalan dengan semestinya dan untuk menemukan kesalahan-kesalahan yang mungkin terjadi di dalam aplikasi sehingga bisa dilakukan perbaikan untuk memperbaiki kesalahan tersebut.

Sedangkan beta testing merupakan pengujian yang dilakukan oleh pemakai pada lingkungan operasi pemakai, di mana lingkungan perangkat lunak tidak lagi dapat dikendalikan oleh pengembang karena perangkat lunak sudah dirilis. Pengujian beta testing untuk aplikasi ini dilakukan terhadap siswa Sekolah Menengah Kejuruan kelas XI jurusan otomotif.

34

Gambar 3.10 merupakan rancangan pembuatan animasi 3D pada menu servis ringan sepeda motor Honda BeAT. Model 3D yang telah jadi kemudian dibuat animasi pergerakkannya dengan menggunakan timeline.

Gambar 10 Perancangan Animasi 3D Sepeda Motor Honda BeAT

3.2.6 Desain Antar Muka User (User Interface)

Setelah skenario kegiatan dibuat, maka langkah selanjutnya adalah membuat user interface. User Interface berisi desain tampilan pada layar monitor. Desain tampilan sekurang–kurangnya memuat informasi tentang judul, materi, nama halaman, kotak tampilan jika dilihat dilayar komputer, teks narasi, keterangan tampilan, dan keterangan tentang gambar, animasi. Gambar 3.11 menjelaskan desain user interface menu utama. Pada bagian kanan atas terdapat tombol keluar dan tombol bantuan, di samping kiri terdapat empat tombol yaitu tombol Spesifikasi, tombol Komponen, tombol Alat Servis dan tombol Servis. Pada bagian kanan form adalah tempat munculnya animasi 3 dimensi Honda BeAT.

Gambar 3.11 Desain User Interface Menu Utama

Gambar 3.12 menjelaskan desain user interface menu spesifikasi. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian bawah tombol menu utama terdapat tombol data spesifikasi dan tombol gambar Honda BeAT. Pada bagian tengah form adalah tempat munculnya data spesifikasi dan animasi 3 dimensi sepeda motor Honda BeAT yang bisa digerakakan sesuai keinginan user.

36

Gambar 3.13 menjelaskan desain User Interface menu komponen. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian form sebelah kiri adalah form data komponen. Form sebelah kanan atas adalah tempat munculnya animasi 3 dimensi komponen. Sedangkan pada bagian kanan bawah adalah nama dan keterangan komponen sepeda motor Honda BeAT.

Gambar 3.13 Desain User Interface Halaman Menu Komponen

Gambar 3.14 menjelaskan desain user interface menu alat servis. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian form sebelah kiri adalah form daftar data materi peralatan yang dibutuhkan dalam proses servis ringan Honda BeAT. Bagian form sebelah kanan atas adalah form nama alat yang telah dipilih, sedangkan form sebelah kanan bawah adalah munculya animasi 3 dimensi peralatan yang dibutuhkan dalam servis Honda BeAT.

Gambar 3.14 Desain User Interface Naskah Menu Alat Servis

Gambar 3.15 menjelaskan desain user interface menu servis. Pada menu servis Terdapat 2 desain user interface, desain sebelah kiri merupakan tampilan ketika user mengakses menu servis pertama kali. Terdapat sembilan proses servis ringan Honda BeAT. Sedangkan desain user interface sebelah kanan adalah ketika user telah memilih salah satu materi servis. Dalam desain sebelah kanan

user bisa mengakses keterangan proses dan animasi 3d servis sepada

motor Honda BeAT.

38

Gambar 3.16 menjelaskan desain user interface menu latihan soal. Pada bagian kiri atas terdapat tombol untuk kembali ke menu utama. Pada bagian form sebelah tengah adalah form latihan soal yang berisi pertanyaan tentang servis ringan sepeda motor Honda Beat. Bagian form sebelah kiri bawah adalah form nama yang telah diisikan oleh user, sedangkan form sebelah kanan bawah adalah munculya score atau nilai yang telah dijawab oleh user.

Gambar 3.16 Desain User Interface Menu Latihan Soal

3.3

Metode Pengujian Sistem

Dalam penelitian ini, pengujian sistem dilakukan dengan metode alfa testing dan beta testing. Pengujian alfa testing merupakan pengujian yang dilakukan oleh pemakai di lingkungan pengembang, pengujian ini dilakukan untuk mengetahui apakah aplikasi bisa berjalan dengan semestinya dan untuk menemukan kesalahan-kesalahan yang mungkin terjadi di dalam aplikasi sehingga bisa dilakukan perbaikan untuk memperbaiki kesalahan tersebut.

Sedangkan beta testing merupakan pengujian yang dilakukan oleh pemakai pada lingkungan operasi pemakai, di mana lingkungan perangkat lunak tidak lagi dapat dikendalikan oleh pengembang karena perangkat lunak sudah dirilis. Pengujian beta testing untuk aplikasi ini dilakukan terhadap siswa Sekolah Menengah Kejuruan kelas XI jurusan otomotif.