BAB III ANALISIS DAN PERANCANGAN SISTEM III.1
Analisis Merupakan tahap pertama sebelum melakukan perancangan sebuah
sistem/aplikasi. Analisis dilakukan dengan tujuan untuk memperoleh kebutuhankebutuhan apa saja yang diperlukan dalam membangun sebuah aplikasi. Selain itu analisis sistem juga bertujuan untuk mengidentifikasi masalah dalam membangun sebuah aplikasi. Dimana pada proses ini juga nantinya akan dibuat sebuah rumusan pemecahan masalah dari masalah tersebut. Analisa ini diperlukan sebagai dasar untuk tahapan perancangan aplikasi. Dalam membangun sebuah aplikasi diperlukan tehapan-tahapan yang dilakukan dalam pembangunannya. Begitu juga pada penelitian ini, fokus penelitian ini ialah menciptakan sebuah aplikasi berbasis android yang memiliki fungsi sebagai media untuk mengedit serta memanipulasi sebuah foto/gambar. Untuk itu diperlukan tahapan-tahapan yang dilakukan dalam membangun aplikasi ini meliputi proses analisis yang terdiri dari analisis kebutuhan aplikasi dan arsitektur sistem, perancangan sistem yang terdiri dari perancangan diagram use case, activity diagram, perancangan struktur navigasi dan perancangan antarmuka aplikasi yang akan dibangun dengan berbasis mobile android. III.1.1 Analisis Kebutuhan Aplikasi Analisis ini dilakukan guna mendapatkan point-point penting yang dibutuhkan untuk dapat membangun aplikasi foto editor berbasis android ini.
27
28
Dasar dari dibangunnya aplikasi foto editor ini ialah mengingat saat ini telah sangat berkembang sebuah teknologi terbaru open source yang sangat populer yaitu smartphone bersistem operasi android. Sistem operasi khusus mobile ini memungkinkan seorang developer untuk membuat sebuah aplikasi sesuai dengan keinginan mereka. Ditambah lagi aplikasi yang telah dibuat akan sangat mudah digunakan kapanpun dan dimanapun sebab aplikasi yang dibangun berbasis mobile aplication. Dengan perkembangan aplikasi android maka dibuatlah aplikasi foto editor mengingat selama ini untuk mengolah sebuah foto/gambar tak jarang seorang pengguna harus berada pada sebuah tempat yang terdapatbeberapa perangkat keras seperti komputer. Hal ini akan berdampak pada efiensi waktu dan tempat. Dengan teknologi android, pengolahan foto/gambar tidak lagi hanya di lakukan pada perangkat komputer. Namun akan lebih mudah digunakan dengan sebuah perangkat mobile dengan tingkat mobilitas yang tinggi. Dalam proses perancangan ini, nantinya aplikasi ini akan dibangun dengan menggunakan bahasa pemrograman android berupa Java dan XML, dimana editor yang digunakan ialah Eclipse yang merupakan tools yang sangat populer saat ini dalam membuat sebuah aplikasi berbasis android. Dari sisi spesifikasi aplikasi, tujuan dari dibangunnya aplikasi ini ialah sebagai media untuk memanipulasi sebuah foto/gambar, untuk itu spesifikasi aplikasi yang akan dicapai dalam perancangan aplikasi ini ialah sebagai berikut: 1. Aplikasi dibangun pada lingkungan berbasis Android.
29
Aplikasi
dibangun
pada
lingkungan
android
JellyBean
dengan
menggunakan API 19 pada android SDK sehingga aplikasi dapat digunakan pada smartphone android dengan spesifikasi versi 4.2 keatas. 2. Aplikasi akan memiliki fitur manipulasi yang mampu mengatur kecerahan (contrass) serta memberikan efek abu-abu (grayscale) pada foto/gambar. 3. Aplikasi dapat membuka foto/gambar dari penyimpanan local atau memori dan menyimpannya kembali setelah proses edit dilakukan. III.1.2 Arsitektur Sistem Arsitektur sistem dimaksudkan untuk menggambarkan skema dari proses yang terjadi pada sebuah sistem/aplikasi. Dengan adanya arsitektur sistem diharapkan proses analisa sistem akan lebih mudah untuk dipahami dan dimengerti. Adapun desain arsitektur pada perancangan aplikasi foto editor berbasis android dapat dilihat pada gambar dibawah ini.
MODUL PEMBACA GAMBAR
MODUL MANIPULASI GAMBAR KECERAHAN ABU-ABU HITAM PUTIH PELEMBUTAN PENAJAMAN SEPIA CROP
MODUL PENULIS GAMBAR
Gambar III.1 Arsitektur Sistem
30
Dari gambar III.1 diatas dapat dilihat bahwa sistem aplikasi yang akan dibangun terdiri dari tiga komponen utama yang masing – masing memiliki tugas nya masing – masing dan saling berkaitan satu dan lainnya. Komponen – komponen utama dari sistem aplikasi yang akan dibangun adalah sebagai berikut: 1. Modul Pembaca Gambar, merupakan komponen yang berfungsi untuk melakukan pemilihan dan pembacaan foto atau gambar pada media penyimpanan pada perangkat Android. 2. Modul Manipulasi Gambar, merupakan komponen utama dari sistem yang bertugas untuk melakukan manipulasi pada input foto atau gambar yang mana operasi yang dilakukan ditentukan oleh input dari pengguna sistem. 3. Modul Penulis Gambar, merupakan komponen yang berfungsi untuk melakukan penulisan atau penyimpanan foto atau gambar yang telah dimanipulasi ke dalam media penyimpanan pada perangkat Android.
III.2
Perancangan Sistem Pada tahap ini penulis akan menggambarkan sistem yang akan dibangun
dengan menggunakan UML sebagai media visualisasi sebuah perangkat lunak atau sistem. Adapun bagian UML yang akan dipaparkan ialah sebagai berikut: III.2.1 Use Case Diagram Use case diagram merupakan media visualisasi tentang bagaimana interaksi antara pengguna dengan sistem pada aplikasi foto editor berbasis android. Use case diagram akan memperlihatkan interaksi sistem dari sudut pandang pengguna.
31
Gambar III.2 Use Case Diagram Aplikasi Pada use case di atas dapat dilihat bagaimana interaksi pengguna terhadap sistem dimana terdapat beberapa kegiataan yang dapat dilakukan oleh seorang pengguna. Disini pengguna dapat melakukan beberapa interaksi meliputi lihat menu, buka gambar, efek kecerahan, efek gelap/abu-abu dan simpan gambar. Adapun penjelasan dari use case dapat dilihat seperti di bawah ini. 1. Lihat Menu Merupakan use case yang digunakan untuk memilih operasi apa yang ingin dilakukan terhadap foto/gambar meliputi proses pencerahan dan efek gelap/abu-abu.
32
2. Buka Gambar Merupakan use case yang digunakan membuka serta meilih gambar/foto mana yang ingin dimanipulasi yang diperoleh dari memori internal maupun sdcard pada smartphone. 3. Efek Manipulasi Merupakan use case yang digunakan untuk memanipulasi foto/gambar yang meliputi pencerahan, abu-abu, hitam putih, pelembutan, penajaman, sepia dan crop gambar. 4. Lihat Tentang Merupakan use case yang digunakan untuk menampilkan profil ataupun tentang program. 5. Simpan Gambar Merupakan use case yang digunakan menyimpan hasil dari manipulasi foto/gambar ke dalam memori smartphone. III.2.2 Activity Diagram Activity diagram menggambarkan berbagai alir aktifitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Berikut beberapa Activity diagram aplikasi foto editor berbasis android. III.2.2.1 Activity Diagram Proses Pencerahan Activity diagram proses pencerahan ini merupakan kegiatan atau aktivitas pengguna pada aplikasi foto editor dalam melakukan manipulasi foto/gambar
33
berupa pengaturan kecerahan pada gambar. Pilih menu manipulasi pada menu utama aplikasi. Selanjutnya proses yang akan dilakukan adalah membuka serta memilih gambar/foto yang ingin di atur kecerahannya. Kemudian atur seberapa besar kecerahan dengan paremeter yang telah disediakan. Proses pencerahan akan berlangsung, selanjutnya ialah simpan hasil pencerahan ke dalam memori smartphone. Berikut sekema activity diagram proses pencerahan pada aplikasi foto editor berbasis android. Pengguna
Sistem
Start
Kecerahan
Buka Gambar
Tampilkan Galeri
Pilih Gambar
Tampilkan Gambar
Isi Parameter Kecerahan
Proses Manipulasi
Simpan Gambar
Tampilkan Hasil Gambar
End
Gambar III.3 Activity Diagram Proses Pencerahan
34
III.2.2.1 Activity Diagram Proses Abu-abu Activity diagram proses abu-abu ini merupakan kegiatan atau aktivitas pengguna pada aplikasi foto editor dalam melakukan manipulasi foto/gambar berupa pemberian efek gelap/abu-abu pada gambar. Pilih menu manipulasi pada menu utama aplikasi. Selanjutnya proses yang akan dilakukan adalah membuka serta memilih gambar/foto yang ingin di diberi efek. Proses pemberian efek gelap akan berlangsung, selanjutnya ialah simpan hasil gambar ke dalam memori smartphone. Berikut sekema activity diagram proses abu-abu pada aplikasi foto editor berbasis android. Pengguna
Sistem
Start
Kecerahan
Buka Gambar
Tampilkan Galeri
Pilih Gambar
Tampilkan Gambar
Proses Manipulasi
Simpan Gambar
Tampilkan Hasil Gambar
End
Gambar III.4 Activity Diagram Proses Abu-abu
35
III.2.3 Sequence Diagram Sequence diagram merupakan sebuah diagram dari UML yang biasanya digunakan untuk menjelaskan secara detil bagaimana urutan proses yang dilakukan dalam sistem untuk mencapai tujuan dari use. Berikut sequence diagram dari aplikasi foto editor berbasis android.
Home
Pengguna
Manipulasi Gambar
About
Mulai Manipulasi Gambar Lihat About Buka Gambar
Edit Gambar
Simpan Gambar
Share Gambar
Gambar III.5 Sequence Diagram Aplikasi III.3
Perancangan Struktur Navigasi Struktur navigasi sangat penting dalam pembuatan suatu aplikasi atau
program, karena struktur navigasi dapat memberikan penjelasan mengenai alur suatu program atau aplikasi. Berikut ini adalah struktur navigasi aplikasi foto editor berbasis android.
36
Home
Pencerahan
Abu-Abu
Hitam Putih Halaman Utama
Menu Penejaman
Pelembutan
Sepia
Crop
Gambar III.6 Struktur Navigasi Aplikasi
III.4
Desain User Interface Perancangan antarmuka ini selain memberikan gambaran akan tampilan
aplikasi juga memberikan pandangan aplikasi secara keseluruhan. Adapun perancangan antarmuka pada perancangan aplikasi foto editor berbasis android ini akan dipaparkan dalam bebrapa tampilan berikut ini.
37
1.
Halaman Utama Halaman utama merupakan halaman awal ketika seorang pengguna
membuka aplikasi pada aplikasi foto editor berbasis android. Menu aplikasi pada halaman ini tedapat pada gambar icon dipojok sebelah kiri halaman. Berikut tampilan halaman utama. Foto Editor
Foto Editor
Gambar III.7 Halaman Utama
2.
Halaman Menu Aplikasi Halaman menu aplikasi merupakan halaman yang digunakan untuk
menyediakan pilihan menu manipulasi foto/gambar berupa proses pencerahan, efek abu-abu, hitam putih, pelembutan gambar, penajaman gambar, efek sepia dan
38
crop yaitu pemotongan gambr pada aplikasi foto editor berbasis android. Berikut tampilan halaman menu aplikasi. Foto Editor
Home Pencerahan Abu-Abu Hitam Putih Foto Editor Pelembutan Penajaman Sepia Crop About
Gambar III.8 Halaman Menu Aplikasi 3.
Halaman Pencerahan Halaman ini merupakan halaman yang digunakan untuk melakukan
manipulasi foto/gambar berupa proses pengaturan. Pada halaman ini terdapat 2 buah menu berupa buka gambar dan pencerahan. Buka gambar merupakan menu untuk mengambil gambar dari memori smartphone, sedangkan menu pencerahan merupakan menu yang digunakan untuk memulai proses pengaturan kecerahan foto. Berikut tampilan halaman pencerahan.
39
Foto Editor
Buka Gambar Pencerahan Gambar III.9 Halaman Pencerahan 4.
Halaman Parameter Pencerahan Halaman ini merupakan halaman yang digunakan untuk memberikan nilai
seberapa besar kecerahan yang akan di atur pada proses pencerahan foto/gambar. Pada halaman ini terdapat sebuah gambar yang akan dimanipulasi beserta path gambarnya. Halaman ini juga memiliki input box sebgai parameter dan tombol ok sebagai eksekusi proses. Berikut tampilan halaman parameter pencerahan.
40
Foto Editor
Gambar
Path gambar... Parameter Kecerahan
OK
Gambar III.10 Halaman Parameter Pencerahan
5.
Halaman Efek Abu-abu Halaman ini merupakan halaman yang digunakan untuk melakukan
manipulasi foto/gambar berupa proses pemberian efek gelap/abu-abu (grayscale). Pada halaman ini terdapat 2 buah menu berupa buka gambar dan abu-abu. Buka gambar merupakan menu untuk mengambil gambar dari memori smartphone, sedangkan menu abu-abu merupakan menu yang digunakan untuk memulai proses manipulasi foto. Berikut tampilan halaman efek abu-abu.
41
Foto Editor
Buka Gambar Abu abu Gambar III.11 Halaman Efek Abu-abu
6.
Halaman Hasil Manipulasi Halaman ini merupakan halaman yang digunakan untuk menampilkan
hasil dari proses pengeditan foto/gambar. Pada halaman ini terdapat 2 buah menu berupa share gambar dan simpan gambar. Share gambar digunakan apabila pengguna ingin berbagi gambar yang telah dimanipulasi ke berbagai media. Sedangkan simpan gambar untuk meyimpan hasil gambar ke dalam memori smartphone. Berikut tampilan halaman hasil manipulasi.
42
Foto Editor
Gambar
Share Gambar Simpan Gambar
Gambar III.12 Halaman Manipulasi
