Tahap Save Image ini dilaksanakan setelah proses Edit Image selesai, berikut adalah flowchart yang menggambarkan proses pada tahap ini.
Gambar 3.28 Flowchart Proses Save Image
Untuk dikarenakan permintaan client yang tidak menginginkan untuk setiap fitur Effect yang dipakai saling menimpa, maka diperlukanlah untuk canvas kembali ke bentuk semula terlebih dahulu sebelum melakukan perubahan.
Dengan kata lain, untuk setiap aksi yang dilakukan user terhadap canvas, aksi dari user tersebut akan dicatat lalu canvas akan dikembalikan ke bentuk semula(reset) terlebih dahulu sebelum melakukan semua aksi perubahan user dari awal sampai akhir sesuai dengan urutan yang telah ditentukan.
Berikut adalah penjelasan dari setiap tahap pada Edit Image:
1. Transform
Gambar 3.29 Tampilan Tahap Transform
Transform adalah tahap pada Edit Image dimana terdapat fitur-fitur yang mengubah foto dari sisi bentuknya. Fitur-fitur yang terdapat pada tahap ini adalah:
a. Crop
Gambar 3.30 Tampilan Penggunaan Crop
Crop adalah sebuah fitur dimana user bisa memotong image canvas sesuai dengan kehendak user. User akan disediakan dengan 4 lingkaran dalam image, lingkaran-lingkaran tersebut berfungsi sebagai penanda sudut dari kotak yang akan menjadi hasil dari fitur crop ini. Pada implementasi lingkaran penanda, digunakan library Jcrop yang memungkinkan pergerakan dan update koordinat penanda yang cepat dan efektif. Setelah mendapatkan koordinat dari penanda, foto akan dipotong menggunakan function crop dari Caman.
b. Mirror
Gambar 3.31 Tampilan Setelah Penggunaan Mirror
Mirror adalah fitur untuk memutar balikkan sebuah foto secara horizontal, seperti yang dilihat pada gambar 3.27.
c. Rotate
Gambar 3.32 Tampilan Setelah Penggunaan Rotate
Rotate adalah fitur untuk memutar image sesuai arah jarum jam.
Rotate dilakukan dengan menggunakan function rotate yang terdapat dalam Caman, untuk setiap rotasi nilai rotasi akan bertambah 90 derajat, dan pada saat aplikasi melakukan aksi rotasi maka foto akan diputar sesuai dengan nilai rotasi tersebut. Gambar 3.28 memperlihatkan contoh tampilan setelah foto diputar 90 derajat.
2. Effect
Gambar 3.33 Tampilan Tahap Effect
Effect adalah tahap pada Edit Image dimana user bisa mengakses fitur-fitur yang bisa melakukan perubahan pada komposisi warna pada image canvas, fitur-fitur pada tahap Effect adalah:
a. Alter
Gambar 3.34 Tampilan Alter
Alter merupakan fitur untuk merubah Brightness, Saturation, dan Contrast dari foto. Begitu tombol Alter ditekan maka aplikasi akan menampilkan sebuah box di atas footer dengan 3 slider. Begitu slider digerakkan maka fungsi Alter akan berjalan dan foto akan mengalami perubahan sesuai dengan nilai slider dari Brightness, Saturation dan Contrast.
b. Filter
Gambar 3.35 Tampilan Filter
Image Filter adalah fitur untuk memberikan effect filter tertentu kepada foto. Efek filter akan mengubah komposisi warna, brightness, contrast, dan nilai lain-lain yang membentuk tampilan foto, dengan menggunakan filter maka foto bisa memiliki tampilan khas yang menarik. Begitu tombol Filter ditekan maka user akan disediakan sebuah box di atas footer, di dalam box tersebut terdapat icon-icon dari setiap image filter yang bisa digeser secara horizontal, begitu icon ditekan maka effect image filter akan diimplementasikan ke image pada canvas.
Filter-filter yang disediakan aplikasi adalah sebagai berikut:
Normal
Lomo
Grungy
Sharpen
X Process
Sin City
Sepia
Vintage
Blur
Implementasi pada Filter dilakukan dengan menggunkan function pada library Caman yang menyediakan beberapa filter.
3. Save
Gambar 3.36 Tampilan Tahap Save
Mengakhiri proses edit, hasil berupa sebuah file image beserta satu
Gambar 3.37 Tampilan Form Input
Mengunggah image ke server. Untuk mengunggah, user perlu mengisi form input yang muncul begitu tombol Input ditekan.
Form input terdiri dari judul dan deskripsi dari foto.
b. Save Only
Menyimpan image ke dalam device tanpa mengunggah image ke server.
Setelah proses Edit Image selesai, user akan dikembalikan ke halaman Gallery.
3.4.5 Sarana yang Digunakan
Berikut adalah sarana-sarana yang digunakan, dan kegunaannya pada aplikasi:
1. Framework Phonegap, digunakan sebagai alat kerja utama peserta magang yang memungkinkannya untuk membuat aplikasi mobile
2. HTML5, digunakan untuk desain halaman-halaman, serta penyedia canvas untuk Edit Image.
3. CSS, digunakan untuk mengatur tampilan halaman-halaman HTML5 yang dibuat sehingga terlihat lebih menarik.
4. JavaScript, digunakan sebagai client side scripting yang membantu interaksi antara user dengan setiap halaman.
5. jQuery, digunakan untuk memberikan animasi ke halaman-halaman HTML, mengatur reaksi aplikasi terhadap input user. Jquery juga digunakan untuk mekanisme interaksi network antar aplikasi dengan server.
6. jQuery Mobile, digunakan untuk interaksi antar halaman HTML.
7. Jcrop, digunakan pada halaman Edit Image untuk menyediakan lingkungan kerja Crop yang efektif dan cepat.
8. iScroll, digunakan untuk menambahkan fitur scroll di Gallery dan Edit Image. Selain itu digunakan untuk navigasi halaman menggunakan scroll di beberapa halaman.
9. Library Caman, library yang digunakan untuk penyederhaan manipulasi image canvas, dan menyediakan efek Filter.
10. Java, digunakan untuk membentuk aplikasi Android melalui framework Phonegap dan membuat plugin Phonegap untuk Android.
11. FacebookSDK, digunakan untuk membuat aplikasi yang bisa mengakses akun Facebook user.
12. Objective-C, digunakan sebagai bahasa utama coding untuk mengembangkan aplikasi iOS melalui framework Phonegap dan membuat plugin Phonegap unuk iOS.
13. Notepad++, text editor utama dalam penulisan code.
14. Eclipse, IDE yang digunakan untuk mengembangkan aplikasi Android.
15. XCode, IDE yang digunakan untuk mengembangkan aplikasi iOS.
17. Server-side scripting oleh back-end programmer untuk pengaksesan database.
18. Model-model art sementara yang dibuat sendiri sebelum art designer menyelesaikan art yang akan digunakan di aplikasi.
19. Pengujian sementara dilakukan menggunakan browser Mozilla Firefox yang menggunakan server XAMPP sebelum akhirnya diuji di mobile device.
Kendala yang ditemukan peserta magang selama pembangunan aplikasi adalah sebagai berikut:
1. Perubahan-perubahan dari pihak client, perubahan-perubahan bisa berupa dari tampilan, spesifikasi dan bahkan desain dari aplikasi. Perubahan tampilan terjadi beberapa kali selama pengembangan salah satunya adalah perubahan pada desain halaman Gallery dan perubahan peletakan halaman ide yang sebelumnya berada di halaman berbeda dari halaman Gallery. Perubahan pada spesifikasi yang dilakukan client adalah perubahan versi maksimal iOS dari 6.0 menjadi 7.0. Perubahan pada desain aplikasi yang dilakukan adalah perubahan letak penyimpanan file image pada Gallery(My Album) dan Image Detail(My Album) yang awalnya disimpan di server menjadi disimpan di dalam device.
2. Beberapa fitur seperti scroll halaman yang tidak bisa digunakan di beberapa device. Kendala ini ditemukan di beberapa kali tengah tahap testing, pada akhirnya kendala ini mengakibatkan proses testing memakan waktu lebih lama dari yang diduga.
3.6 Solusi Atas Kendala yang Ditemukan
Solusi atas kendala-kendala yang ditemukan peserta magang adalah sebagai berikut:
1. Untuk setiap perubahan yang dilakukan client, peserta magang memberikan beberapa solusi. Solusi untuk perubahan spesifikasi versi iOS adalah membuat halaman terpisah untuk iOS versi 7.0, untuk perubahan desain dan tampilan aplikasi, peserta magang beserta tim project melakukan meeting yang menghasilkan kesimpulan kalau permintaan client memerlukan waktu cukup lama untuk dipenuhi, maka tim meminta client memundurkan deadline selama beberapa minggu yang disetujui oleh pihak client
2. Untuk mengatasi kendala perbedaan device ini, digunakanlah library luar dan coding Javascript manual yang menjadi subtitusi bagi fitur yang menjadi tidak aktif tersebut.