BAB III ANALISA DAN PERANCANGAN SISTEM

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN SISTEM 3.1. Analisis Sistem Dalam analisis sistem akan dibahas bagaimana sistem yang sudah ada dan berjalan atau as-is-system dengan sistem usulan atau to-be system Analisis Sistem Sekarang Sistem pemasaran sepeda motor melalui media brosur, saat ini hanya terbatas pada media cetak yang menampilkan tulisan dan gambar. Meski informasi yang disampaikan pada setiap brosur sudah cukup jelas, media brosur dinilai kurang menarik dan interaktif. Hal tersebut menyebabkan masyarakat mudah bosan dengan brosur-brosur yang diberkan. Dan banyak masyarakat yang setelah mendapatkan brosur tidak membacanya dan langsung dibuang, hal ini dikarenakan brosur yang diberikan tidaklah menarik. Dengan memanfaatkan perkembangan teknologi yang ada saat ini seharusnya dapat membuat sistem promosi sepeda motor melalui media brosur menjadi lebih menarik dan interaktif Analisis Sistem Usulan Bentuk media brosur sepeda motor saat ini dapat dikolaborasikan dengan teknologi yang sedang berkembang. Sistem yang akan dikembangkan saat ini adalah pembuatan aplikasi yang lebih menarik dan interaktif bagi pengguna. Aplikasi yang dibuat yaitu memanfaatkan teknologi Augmented Reality (AR) di mana aplikasi dapat menampilkan model 3D dari sepeda motor yang di pasarkan sehingga pengguna dapat melihat bentuk dari sepeda motor secara langsung dari berbagai sisi yang diinginkan, aplikasi juga dapat merubah warna dari objek sepeda motor dan dapat menampilkan informasi spesifikasi dari motor tersebut. 24

2 25 Dengan demikian aplikasi ini dapat membuat sistem pemasaran menggunakan media brosur lebih interaktif dan menarik bagi pengguna Analisis Kebutuhan Sistem Analisis Pengguna Berikut ini adalah spesifikasi pengguna aplikasi ini : a. Aplikasi ini diibuat untuk pengguna dari kalangan remaja. b. Pengguna aplikasi mampu mengoprasikan smartphone berbasis Android Kebutuhan Perangkat Keras Berikut adalah spesifikasi kebutuhan perangkat keras untuk membuat aplikasi ini : 1. PC OS : Windows 8 64-bit RAM : 4GB Processor : Intel(R) Core(TM) i5-2450m CPU@2.50GHz (4CPUs ) VGA : NVDIA GeForce 610m 2GB Sound Card 2. Smartphone OS: Android v2.3 RAM: 256MB Processor: 832MHz (Qualcomm Recommended) Kamera: 2MP Ukuran Layar: 320x480 pixel Memori: 50MB free memori Kebutuhan Perangkat Lunak Berikut ini adalah kebutuhan perangkat lunak untuk membuat aplikasi ini : Android Developer Tool Autodesk 3DS Max Adobe Photoshop CorelDraw SkecthUp Make Autodeks FBX Converter Unity Unity Extension - Vuforia

3 Perancangan Sistem Penggambaran perancangan aplikasi ini meliputi beberapa hal, yaitu : a. Perancangan antar muka b. Perancangan fungsionalitas aplikasi menggunakan Use Case c. Perancangan alur kerja berjalannya aplikasi menggunakan flowchart d. Perancangan arsitektur sistem menggunakan Component Diagram dan Deployment Diagram. e. Perancangan model sistem menggunakan Class Diagram Perancangan Antar Muka Antar muka disini merupakan tampilan pembuka dan tampilan halaman utama saat aplikasi berjalan. a. Splash Screen Untuk tampilan pembuka (splash screen) disini menampilkan informasi tentang aplikasi ketika program loading. Splash screen disini dibuat menggunakan aplikasi Adobe Photoshop CS6. Gambar 3.1. Perancangan Splash Screen

4 27 b. Menu Utama (Main Screen) Menu utama disini merupakan tampilan utama aplikasi, dimana kamera aktif dan pengguna dapat melihat objek sepeda motor dalam bentuk augmented reality. Pembuatan menu utama disini dilakukan menggunakan aplikasi Unity. Gambar 3.2 Perancangan Main Screen Fungsionalitas Sistem Untuk membuat sistem aplikasi ini berjalan dengan baik, maka aplikasi ini dilengkapi dengan fungsionalitas sebagai berikut 1. Menampilkan model 3D Sepeda Motor sesuai dengan marker yang terdeteksi 2. Menampilkan tombol-tombol yang berfungsi untuk merubah warna Motor 3. Menampilkan tombol yang berfungsi untuk menampilkan spesifikasi Motor 4. Memutar musik pada saat objek Sepeda Motor tampil Pada sistem ini tidak ada tingkatan pengguna,pengguna yang ada hanya satu yaitu pengguna aplikasi. Berikut penggambaran fungsionalitas aplikasi menggunakan Use Case Diagram ditunjukan pada Gambar 3.3

5 28 AR Brosur Sepeda Motor View 3D <<extend >> <<extend >> Change Color 3D <<include>> <<include>> User View AR <<extend >> <<extend >> Show Information 3D <<include>> <<include>> View Marker Marker Play Music Gambar 3.3 Use Case Diagram Deskripsi dari setiap use case di atas adalah sebagai berikut : Nomor Nama use case Aktor Tipe Tujuan : AR_BSM-01 : View AR : User : Primary : masuk ke mode Augmented Reality 1. User masuk ke dalam menu AR 2. Aplikasi mengaktifkan kamera 3. User dapat melakukan scan ke marker menggunakan kamera

6 29 Deskripsi dari setiap use case di atas adalah sebagai berikut : Nomor Nama use case Aktor Tipe Tujuan : AR_BSM-02 : View 3D Sepeda Motor : User : Primary : Menampilkan objek 3D Sepeda Motor 1. User masuk ke dalam menu AR 2. Aplikasi mengaktifkan kamera Deskripsi dari setiap use case di atas adalah sebagai berikut : Nomor Nama use case Aktor Tipe Tujuan : AR_BSM-03 : Change Color Object 3D : User : Primary : Merubah warna pada objek 3D Sepeda Motor 1. User masuk ke dalam menu AR 2. Aplikasi mengaktifkan kamera 3. User melakukan scan ke marker menggunakan kamera 4. Objek 3D Sepeda Motor akan ditampilkan pada layar 5. User dapat merubah warna objek sepeda motor menggunakan tombol yang tersedia Deskripsi dari setiap use case di atas adalah sebagai berikut : Nomor Nama use case : AR_BSM-04 : Show Information Object 3D

7 30 Aktor Tipe Tujuan : User : Primary : Menampilkan informsi objek 3D Sepeda Motor 1. User masuk ke dalam menu AR 2. Aplikasi mengaktifkan kamera 3. User melakukan scan ke marker menggunakan kamera 4. Objek 3D Sepeda Motor akan ditampilkan pada layar 5. User dapat memunculkan informasi objek sepeda motor menggunakan tombol yang tersedia Deskripsi dari setiap use case di atas adalah sebagai berikut : Nomor Nama use case Aktor Tipe Tujuan : AR_BSM-06 : Play Music : User : Primary : Memutar musik pada saat objek tampil 1. User masuk ke dalam menu AR 2. Aplikasi mengaktifkan kamera 3. User melakukan scan ke marker menggunakan kamera 4. Objek 3D Sepeda Motor akan ditampilkan pada layar 5. Musik akan terdengan pada saat objek 3D Sepeda Motor tampin Perancangan Alur Kerja Aplikasi AR Brosur Sepeda Motor ini dapat digunakan oleh user dengan smartphone berbasis android yang memiliki kamera untuk menangkap benda dunia nyata dan mengunakan media brosur sebagai markernya. Alur dari sistem penggunaan aplikasi ini adalah sebagai berikut :

8 31 Mulai User mengarahkan aplikasi ke marker Aplikasi mengidentifikasi marker melalui kamera Tidak Marker Cocok? Ya Muncul Objek 3D sepeda motor User melakukan interaksi merubah warna atau memunculkan informasi objek Objek 3D berubah warna atau muncul informasi terkait objek Selesai Gambar 3.4 Flowchart Aplikasi Deskripsi Proses : 1. User membuka aplikasi dan mengarahkannya ke marker yang telah ditentukan 2. Aplikasi akan mengidentifikasi marker melalui kamera

9 32 3. Pada saat marker terdeteksi aplikasi akan menampilkan objek 3D di atas marker tersebut, serta akan muncul tombol untuk merubah warna dan menampilkan informasi. 4. User dapat melakukan interaksi dengan mengganti warna objek maupun menampilkian informasi terkait objek tersebut. 5. Objek 3D berubah warna atau menampilkan informasi sesuai dengan perintah yang dilakukan oleh user Perancangan Arsitektur Dalam Pembangunan sistem aplikasi ini terdapat beberapa komponen yang digunakan untuk memenuhi fungsionalitas dari aplikasi. Sistem aplikasi ini terdiri dari beberapa komponen aplikasi, seperti marker, konten 3D dan Extensi-Vuforia. Aplikasi AR Brosur Sepeda Motor menggunakan media brosur sebagai marker untuk menampilkan konten 3D. Berikut adalah penggambaran arsitektur sistem aplikasi yang dibuat menggunakan Component Diagram : Halaman Utama <<Application>> AR Brosus Sepeda Motor.apk DefaultTrackableEv enthandler.class ChangeColorKawa saki.class ImageTargetPlayA udio.class Gambar 3.5 Component Diagram

10 33 Gambar diatas merupakan Component Diagram yang menjelaskan tentang arsitektur yang membangun sistem aplikasi. Untuk menggambarkan sistem aplikasi dari luar, digunakanlah deployment diagram sebagai berikut. Gambar 3.6 Deployment Diagram Perancangan Model Sistem Dari semua fungsionalitas yang ada pada Aplikasi AR Brosur Sepeda Motor ini maka dapat digambarkan Class Diagram yang digunakan dalam pembangunan sistem aplikasi ini. Berikut adalah gambar dari Class Diagram : Gambar 3.7. Class Diagram

11 34 Class Diagram tersebut menggambarkan beberapa class yang saling terhubung satu sama lain, berikut penjelasan dari setiap class pada class diagram : DefaultTrackableEventHandler : Class ini memiliki atribut dari class lain, yaitu TrackableBehavior yang berfungsi untuk rendering objek pada saat target tedeteksi. Kelas ini bisa disebut sebagai kelas utama pada modul AR, semua komponen disatukan pada modul ini dan semua konfigurasi ada pada modul ini. ChangeColorKawasaki : Class ini menampilkan tombol pada aplikasi yang berfungsi untuk mengganti warna pada objek dan menampilkan informasi objek ImageTargetPlayAudio : Class ini berfungsi untuk memutar musik pada saat objek terdeteksi.