Iqbal Haris dari Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tahun 2012 yang berjudul Aplikasi Pembelajaran Mekanik Otomotif
Berbasis Multimedia pada Sekolah Menengah Kejuruan Angkasa 1 Jakarta.
4.2 Metode Pengembangan Sistem
Untuk pengembangan aplikasi ini menggunakan metode Luther 2002:222
yaitu concept konsep, design desain, material collecting pengumpulan bahan, assembly pembuatan, testing pengujian dan distribution implementasi.
4.2.1 Konsep
Tabel 4.1 Deskripsi Konsep Aplikasi Judul
Aplikasi Perawatan Sepeda Motor Otomatis Berinjeksi Berbasis Mobile
Fungsi Sebagai alat bantu untuk memberikan informasi tentang
perawatan sepeda motor otomatis berinjeksi Jenis Aplikasi
Media pengenalan interaktif Tujuan
Mempermudah pengguna User mengenal teknologi injeksi serta melakukan perawatan
Pengguna Para pengguna sepeda motor otomatis dengan sistem
bahan bakar injeksi Gambar
Menggunakan format .jpg Join Photografhic Expert Group dan .png Portable Network Graphics yang
dibuat dengan menggunakan software Adobe Photoshop CS
Teks Di Ketik menggunakan font ‘Droid’
Interaktif Menggunakan link baik berupa tombol, gambar maupun
teks yang dapat berpindah dari satu halaman ke halaman lain.
4.2.2 Perancangan
Pada tahap ini merupakan tahap perancangan aplikasi, dimana perancangan tersebut berupa perancangan storyboard, perancangan flowchart
view, perancangan arsitektur navigasi, perancangan diagram transisi state transition diagram dan perancangan antar muka user interface.
4.2.2.1 Perancangan
Storyboard
Secara umum rancangan storyboard aplikasi ini adalah: 1.
Rancangan layar Splashscreen Rancangan layar splashscreen ini adalah tampilan
status loading saat aplikasi pertama kali dibuka.
Gambar 4.1 Rancangan layar Splashscreen
2. Rancangan layar Menu Utama
Gambar 4.2 rancangan layar Menu Utama
Rancangan ini merupakan tampilan utama dari aplikasi dalam tampilan menu utama ini terdapat 6 tombol menu, yaitu :
1. Tombol Injeksi untuk masuk ke sub menu Injeksi
2. Tombol Honda untuk masuk ke sub menu Honda
3. Tombol Yamaha untuk masuk ke sub menu Yamaha
4. Tombol Suzuki untuk masuk ke sub menu Suzuki
5. Tombol Profil untuk masuk ke halaman Profile
6. Tombol keluar untuk keluar dari aplikasi
3. Rancangan layar Injeksi
Gambar 4.3 rancangan layar Injeksi
Pada rancangan layar ini akan di tampilkan 5 tombol sub menu dari menu Injeksi yaitu :
1. Tombol sub menu Pengenalan untuk masuk ke halaman Pengenalan
2. Tombol sub menu Bagian untuk masuk ke halaman Bagian
3. Tombol sub menu Cara Kerja untuk masuk ke halaman Cara Kerja
4. Tombol sub menu Kelebihan untuk masuk ke halaman Kelebihan
5. Tombol sub menu Kelebihan untuk masuk ke halaman Kelebihan
4. Rancangan layar menu Honda
1. Layar menu Honda
Gambar 4.4 rancangan layar menu Honda
Pada rancangan layar ini terdapat 3 tombol sub menu dari menu Honda yaitu :
1. Tombol sub menu BEAT-FI untuk masuk ke halaman Spesifikasi
2. Tombol sub menu perawatan untuk masuk ke halaman Perawatan
3. Tombol sub menu Dealer untuk masuk ke halaman Dealer
2. Rancangan layar submenu Beat-FI
Gambar 4.5 rancangan layar submenu Beat-FI
Pada rancangan layar sub menu Beat-FI berisi gambar motor Honda Beat- FI dan spesifikasinya.
3. Rancangan layar submenu Perawatan
Gambar 4.6 Rancangan layar submenu perawatan
Pada rancangan layar sub menu Perawatan berisi perawatan Honda Beat-FI
4. Rancangan layar submenu Dealer
Gambar 4.7 rancangan layar submenu Dealer
Pada rancangan layar sub menu Dealer berisi alamat dealer Honda beserta moner telepon di daerah Ciputat dan sekitarnya.
5. Rancangan layar menu Yamaha
1. Layar menu Yamaha
Gambar 4.8 rancangan layar Menu Yamaha
Pada rancangan layar ini terdapat 3 tombol sub menu dari menu Yamaha yaitu :
1. Tombol sub menu MIO J untuk masuk ke halaman Spesifikasi.
2. Tombol sub menu perawatan untuk masuk ke halaman Perawatan.
3. Tombol sub menu Dealer untuk masuk ke halaman Dealer.
2. Rancangan layar submenu Mio J
Gambar 4.9 rancangan layar sub menu Mio J
Pada rancangan layar Mio J berisi gambar motor Yamaha Mio J dan spesifikasinya.
3. Rancangan layar submenu Perawatan
Gambar 4.10 rancangan layar submenu Perawatan
Pada rancangan layar sub menu Perawatan berisi perawatan Yamaha Mio J.
4. Rancangan layar submenu Dealer
Gambar 4.11 Rancangan layar submenu Dealer
Pada rancangan layar sub menu Dealer berisi alamat dealer Yamaha dan beserta moner teleponnya di daerah Ciputat dan sekitarnya.
6. Rancangan layar menu Suzuki
1. Layar menu Suzuki
Gambar 4.12 rancangan layar menu Suzuki
Pada rancangan layar ini terdapat 3 tombol sub menu dari menu Suzuki yaitu :
1. Tombol sub menu NEX-FI untuk masuk ke halaman Spesifikasi
2. Tombol sub menu perawatan untuk masuk ke halaman Perawatan
3. Tombol sub menu Dealer untuk masuk ke halaman Dealer
2. Rancangan layar submenu Nex-FI
Gambar 4.13 rancangan layar submenu Nex-FI
Pada rancangan layar Nex-FI berisi gambar motor Suzuki Nex-Fi dan spesifikasinya.
3. Rancangan layar submenu Perawatan
Gambar 4.14 rancangan layar submenu Perawatan
Pada rancangan layar sub menu Perawatan berisi perawatan Suzuki Nex-FI.
4. Rancangan layar submenu Dealer
Gambar 4.15 rancangan submenu Dealer
Pada rancangan layar sub menu Dealer berisi alamat dealer Suzuki dan beserta moner teleponnya di daerah Ciputat dan sekitarnya.
7. Rancangan layar Profile
Gambar 4.16 rancangan menu Profile
Pada rancangan layar profil berisi informasi pembuat aplikasi. 8.
Rancangan menu Keluar
Gamabar 4.17 rancangan layar Keluar
Pada rancangan layar berisi Dialog Box yang berisi dialog keluar dari aplikasi.
4.2.2.2 Perancangan
Flowchart
Pada aplikasi ini dibuat 5 flowchart yaitu: Flowchart Menu Utama, Flowchart Menu Ijeksi, Flowchart Menu Honda, Flowchart Menu Yamaha,
dan Flowchart Menu Suzuki, 1.
Flowchart Menu Utama
Gambar 4.18 Flowchart Menu Utama
2. Flowchart Injeksi
Gambar 4.19 Flowchart Injeksi
3. Flowchart Honda
Gambar 4.20 Flowchart Honda
4. Flowchart Yamaha
Gambar 4.21 Flowchart Yamaha
5. Flowchart Suzuki
Gambar 4.22 Flowchart Suzuki
4.2.2.3 Perancangan Struktur Navigasi
Gambar 4.23 Rancangan Desain Struktur Navigasi
4.2.2.4 Perancangan
State Transition Diagram STD
1. Rancangan STD Menu Utama
Gambar 4.24
Rancangan STD Menu Utama
2. Rancangan STD Injeksi
Gambar 4.25 Rancangan STD Injeksi
3. Rancangan STD Honda
Gambar 4.26 Rancangan STD Honda
4. Rancangan STD Yamaha
Gambar 4.27 Rancangan STD Yamaha
5. Rancangan STD Suzuki
Gambar 4.28 Rancangan STD Suzuki
6. Rancangan STD Profile
Gambar 4.29 Rancangan STD Profile.
7. Rancangan STD Keluar
Gambar 4.30 Rancangan STD Keluar
4.2.2.4 Perancangan Antarmuka
User Interface
Untuk rancangan antarmuka yang akan ditampilkan pada aplikasi ini disesuaikan dengan kebutuhan dan pengetahuan pengguna, artinya
dalam aplikasi ini penulis menyederhanakan setiap halaman yang ada dengan cara meminimalkan tombol, untuk memberikan kemudahan
penyampaina informasi dalam aplikasi ini.
Gambar 4.31 Desain User Interface
1. Ukuran
3,5 Inchi 2.
Makna Warna 1.
Putih Pada aplikasi ini penulis memberi warna putih karena warna putih
memiliki respon psikologi: bersih, natural, kosong, netral, awal baru, kemurnian dan kesucian.
2. Hijau
Warna hiaju mempresentasikan tentang warna bumi, dalam hal ini injeksi mencoba untuk mengurangi gas buang yang bersih.
3. Abu-abu
Pada aplikasi ini penulis memberi warna abu-abu karena arti warna yang serius, bisa diandalkan dan stabil. Warna ini cenderung netral.
Warna abu-abu adalah warna alam, tenang, menentramkan. 4.
Hitam Pada teks aplikasi ini penulis memberi warna hitam karena warna hitam
memiliki respon psikologi: power, kecanggihan, keanggunan, dan independen, berwibawa, penyendiri, disiplin, dan berkemauan keras.
3. Tombol button
Penulis membuat tombol button berada disebelah kiri, karena membaca isi menu selalu selalu dimulai dari sebelah kiri. Oleh karena
itu, user langsung dapat memilih tombol button menu. 4.
Teks font Jenis font yang digunakan yaitu Droid. Font ini merupakan font standar
yang digunakan dalam aplikasi smartphone berbasis android.
4.2.3 Pembahasan Pengumpulan Bahan
