Hak cipta dan penggunaan kembali:
Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.
Copyright and reuse:
This license lets you remix, tweak, and build upon work
non-commercially, as long as you credit the origin creator
and license it on your new creations under the identical
terms.
BAB III
PELAKSANAAN KERJA MAGANG
3.1 Deskripsi Pelaksanaan Kerja Magang
Selama masa kerja magang, penulis diposisikan dalam project Little Dreamers sebagai programmer. Tim Little Dreamers terdiri dari 6 orang, yaitu:
1. Bapak Atya Yuda Permana: Lead Programmer dan Back-End Programmer Little Dreamers.
2. Bapak Raymond Paraeng: Producer Little Dreamers.
3. Ibu Stepahie Kangiras: Co-Producer Little Dreamers 4. Bapak Lukman Hadi: Co-Producer Little Dreamers
5. Bapak Abdul Agus Halim (panggilan Chen): Head Creative Little Dreamers.
6. Ibu Alice Angeline: Art Designer Little Dreamers.
7. Penulis yaitu Devon Ericko Sulistio: Front-End Programmer Little Dreamers.
Pekerjaan penulis adalah sebagai Front-End Programmer, yang bertanggung jawab untuk membuat aplikasi yang akan didistribusikan ke para user. User Requirement ditangani oleh para producer dan co-producer yang di-review bersama seluruh tim, para producer bertugas untuk menyerahkan requirement- requirement tersebut kepada client untuk di-review ulang dan disetujui. User Interface dibuat berdasarkan mock-up dari client yang didesain ulang oleh ibu Alice selaku sebagai Art Designer. Head Creative bekerja sebagai konsultan teknis sekaligus quality control project, orang yang bekerja dalam posisi ini memberikan solusi serta memimpin diskusi saat ada perubahan desain yang dilakukan.
Secara skema, struktur organisasi project Little Dreamers adalah sebagai berikut:
Gambar 3.1 Struktur Tim Little Dreamers
3.2 Tugas Yang Dilakukan
Front end programmer penulis bertugas untuk membuat aplikasi mobile dengan interface dan spesifikasi yang telah disetujui bersama dengan seluruh tim. Berikut adalah deskripsi dari tugas-tugas dan tanggung jawab penulis:
1. Pembuatan aplikasi untuk Android dan iOS
Sesuai dengan spesifikasi dari client, Little Dreamers akan dirilis untuk pasar user Android dan iOS. Spesifikasi untuk device Android adalah minimal memiliki OS Android versi 4.0 ke atas, dan untuk iOS aplikasi harus bisa mensupport iOS 7.
2. Pembuatan Graphical User Interface
Graphical User Interface(GUI) didesain oleh Art Director dan sudah menjadi tugas penulis untuk mengimplementasikan desain tersebut ke dalam aplikasi. GUI yang disediakan merupakan gambaran visual dari semua page aplikasi, penulis menggunakan teknik pemrograman
b. Halaman News c. Halaman Home d. Halaman Login e. Halaman Register f. Halaman Gallery g. Halaman Photo Detail h. Halaman Edit Photo i. Halaman Setting j. Halaman User Profile k. Halaman Change E-mail l. Halaman Change Username m. Halaman Change Password n. Halaman Facebook Connect o. Halaman Language
p. Halaman Help q. Halaman About
3. Mendesain logika Edit Image
Aplikasi Little Dreamers mendukung fitur image editing untuk user, dimana user bisa meng-edit gambar yang dipotret melalui kamera device atau gambar dalam gallery device. Fitur-fitur image editing tersebut adalah:
a. Crop b. Rotate c. Mirror d. Filter
e. Alter brightness, saturation, contrast
Penulis harus bisa menyusun logika dalam membuat fitur-fitur di atas tersebut, dan mengimplementasikannya pada elemen canvas HTML5.
4. Mendesain logika komunikasi antar device dengan server
Aplikasi Little Dreamers bekerja dengan cara terus berkomunikasi dengan server, semua fungsi dan kerja server didesain dan dibangun oleh programmer Back End dan tugas penulis adalah memastikan agar device bisa berkomunikasi dengan server tersebut sesuai dengan yang dikehendaki.
3.3 Tahapan Pelaksanaan Kerja Magang
Tahapan pelaksanaan kerja magang penulis selama periode kerja magangnya di Altermyth adalah sebagai berikut:
Gambar 3.2 Cycle tahap pembuatan aplikasi
Cycle di atas merupakan variasi dari Software Prototyping yang dimana selama project berjalan[4], prototype akan dibuat dan direview oleh client untuk memahami requirement client dengan lebih dalam.
Inspirit oleh personil Altermyth, di ruangan ini anggota-anggota tim akan diberikan briefing atas project dan penjelasan user requirement yang diberikan oleh client dari producer. Anggota-anggota akan mendiskusikan desain yang bisa memuaskan client, setiap anggota berhak dan wajib mengeluarkan pendapat. Dan begitu desain sudah disetujui, producer akan memberikan deadline project, dan masing-masing anggota tim mendapat tugas yang harus dipenuhi dan menjadwalkan meeting berikutnya.
3.3.2 Research
Setelah menerima desain dari tim, penulis akan mempelajari desain yang diberikan dan aktif mencari informasi dari internet, terutama mengenai desain aplikasi yang sejenis dan juga plugin yang dibutuhkan, selain dari internet penulis juga meminta masukan dari anggota tim lainnya dan juga mendapatkan masukan mengenai hasil penelitian yang telah dilakukan. Setelah menerima masukan-masukan dari tim, penulis pun mencatat tugas-tugas yang harus dikerjakan secara detail. Tugas-tugas tersebut yaitu merealisasikan masukan- masukan tim, memajukan aplikasi ke tahap berikutnya, dan berkomunikasi dengan back end programmer serta art designer. Dikarenakan penulis belum berpengalaman dalam menggunakan framework Phonegap, pemrograman Objective-C, maka penelitian dan self-tutorial menjadi tahap yang sangat penting dalam pengembangan aplikasi. Penelitian-penelitian yang dilakukan user berupa:
a. Pemakaian Framework Phonegap
Phonegap merupakan framework yang memungkinkan penggunanya untuk mendesain aplikasi mobile menggunakan bahasa HTML[3], framework ini digunakan atas saran bapak Yoseph untuk bisa mendesain aplikasi untuk Android dan iOS dengan deadline yang disediakan.
Phonegap memiliki fungsi dasar sendiri dalam bentuk Javascript, yang bisa memakai plugin dasar Phonegap. Dari sini juga lah penulis mendapatkan fungsi untuk menggunakan camera untuk
mengambil gambar dan mengambil image dari gallery device untuk di-edit oleh user.
b. Penggunaan dan Pembentukan Phongegap Plugin
Plugin Phonegap diperlukan untuk melakukan hal-hal yang tidak bisa dilakukan oleh JavaScript biasa, penulis telah melakukan banyak research untuk plugin dan mendapatkan beberapa plugin yang dianggap dibutuhkan untuk membangun aplikasi, tetapi pada penelitian lebih lanjut menemukan bahwa beberapa plugin tidak dibutuhkan dan bisa dicapai melalui JavaScript sehingga beberapa plugin akhirnya tidak digunakan, dan pada akhirnya satu-satunya plugin Phonegap yang dipakai adalah Canvas2ImagePlugin yang memungkinkan user untuk menyimpan sebuah image canvas ke dalam gallery device dengan extension PNG.
c. Cara Kerja Web Programming
Pemrograman Web merupakan fokus utama dalam penggunaan framework Phonegap. Penulis perlu menguasai 3 bahasa pemrograman, yaitu: HTML5, CSS, dan JavaScript.
HTML 5 merupakan revisi terbaru dari HTML 4, HTML 5 mendukung semua kendali dari HTML 4 serta memberikan tag baru seperti <canvas> dan <video>. Selain untuk mendesain setiap halaman, HTML 5 juga digunakan karena penulis menggunakan
<canvas> untuk meng-edit image[5].
CSS (Cascading Style Sheets) merupakan bahasa pemrograman yang ditujukan untuk mendesain halaman HTML sedemikian rupa.
CSS juga memberikan fitur responsive yang memungkinkan penulis untuk memberikan nilai satuan untuk style yang berbeda berdasarkan ukuran device, fitur ini digunakan untuk memberikan variasi interface yang berbeda untuk device yang berbeda, terutama untuk
digunakan penulis untuk mengatur pergerakan setiap bagian halaman dari aplikasi, mulai dari button, perpindahan halaman, pengeditan image di canvas.
d. Dasar-dasar Objective C
Objective C merupakan bahasa pemrograman untuk iOS, dikarenakan plugin Canvas2ImagePlugin yang digunakan penulis hanya bisa digunakan untuk Android maka penulis harus bisa mentranslasikan plugin tersebut dalam bahasa Objective C sendiri sehingga bisa dipakai di iOS.
e. Pemakaian Caman
Caman merupakan library yang digunakan untuk memanupilasi gambar di <canvas> dengan sedemikian rupa sehingga edit gambar bisa dilakukan dengan lebih cepat dan sederhana.
3.3.3 Build Prototype
Pada tahap ini, penulis akan membangun prototype untuk aplikasi. Pada tahap ini juga user akan mengimplementasikan feedback dari meeting terakhir ke dalam prototype. Sebagian besar waktu pada tahap ini, penulis habiskan dengan Web Programming. Web Programming mencakupi mendesain HTML, menaruh ID untuk tag-tag yang dibutuhkan, membuat class-class HTML, mendesain style untuk setiap ID dan class HTML menggunakan CSS, membuat script JavaScript.
Dalam proses scripting, digunakan beberapa library JavaScript, yaitu:
a. Phonegap b. Facebook SDK c. Caman
d. Jquery
e. Jquery Mobile f. Jcrop
3.3.4 Testing
Pada tahap ini, penulis mencoba prototype terbaru. Testing pertama dilakukan di browser Mozilla Firefox, testing dengan cara ini memungkinkan karena Phonegap menggunakan Web Programming. Bila testing pertama berlanjut tanpa gangguan maka testing akan dilanjutkan ke dalam device, device pertama yang digunakan adalah Samsung Galaxy S3 Mini yang merupakan device milik penulis yang memenuhi syarat spesifikasi minimal aplikasi, testing ini ditujukan untuk menguji kerja aplikasi di device Android.
Setelah testing pada tahap ini berhasil, testing berikutnya akan dijalankan dengan menggunakan device dengan OS iOS yaitu iPhone 3 milik perusahaan Altermyth, testing ini ditujukan untuk mengetes kerja aplikasi di device iOS.
Testing terakhir dilakukan dengan menggunakan iPad 2 milik perusahaan Altermyth, testing ini dilakukan untuk mengetes kerja aplikasi di tablet. Begitu aplikasi mencapai tahap user control maka testing akan dilakukan menggunakan 2 device sekaligus untuk mengecek kerja aplikasi bila user menggunakan 2 device dengan akun user yang sama untuk mengakses aplikasi.
Setelah testing sukses, prototype yang telah dibuat akan dikirim kepada client untuk menerima feedback dari pihak client.
3.3.5 Review Meeting
Pada tahap ini, semua anggota tim akan kembali berkumpul ke dalam ruang Inspirit. Setiap tim akan memberikan update-update terbaru dari hasil kerja mereka ke anggota tim lainnya. Produser akan memberikan kabar terbaru mengenai reaksi client terhadap prototype terakhir yang diserahkan serta perubahan desain yang mungkin terjadi di masa depan, tim juga akan merundingkan jawaban yang harus diberikan kepada client atas pertanyaan- pertanyaan mereka. Art Designer akan menyerahkan art dan desain terbaru.
programmer akan ditugaskan untuk membereskan semuannya untuk dilaporkan pada Review Meeting berikutnya.
3.3.6 Final Product
Bila Review Meeting terakhir berakhir dengan client menyetujui hasil prototype terakhir maka itu berarti produk terakhir yang telah memenuhi semua requirement dari client telah berhasil dibuat, dan project telah selesai dengan sukses. Sisanya adalah negosiasi antar producer project dengan client.
3.4 Uraian Pelaksanaan Kerja Magang
Berikut ini adalah uraian pelaksanaan kerja magang penulis dalam mengembankan aplikasi Little Dreamers.
3.4.1 Gambaran Umum Aplikasi
Aplikasi Little Dreamers memiliki 2 fitur utama sebagai aplikasi berbasis Instagram, yaitu: Photo Sharing dan Edit Photo.
Photo Sharing memungkinkan user untuk bisa menyimpan foto ke dalam aplikasi, pada saat ingin menyimpan sebuah foto, user akan diberikan pilihan untuk mengunggah foto tersebut ke server sehingga bisa dipantau oleh user lain.
Pada saat user melihat foto dari user lain, user bisa melakukan 3 tindakan utama, Like untuk menaikkan like counter dari sebuah foto dan menaikkan popularitas foto tersebut, Comment untuk memberikan sebuah komentar kepada sebuah foto yang bisa dilihat oleh semua user dan Share yang memungkinkan user untuk menggunakan fitur share Facebook yang memiliki link dari foto tersebut ke timeline akun Facebook user.
Pada Edit Photo user bisa mengubah sebuah foto yang diambil melalui camera atau gallery device. Edit Photo memiliki fitur-fitur yang dibagi menjadi 3 tahap, yaitu: Transform, Effect dan Save. Berikut adalah gambar yang
Gambar 3.3 Gambaran Umum Tahapan Aplikasi
3.4.2 Implementasi Interface
Berikut adalah desain dari setiap halaman aplikasi yang dibuat penulis.
3.4.2.1 Halaman Splash
user, apakah dalam kondisi login, login dengan facebook, atau tidak ter login. Tergantung dari status user, halaman yang akan dibuka setelah halaman News akan berubah.
3.4.2.2 Halaman News
Gambar 3.5 Halaman News
Pada halaman ini akan ditampilkan berita-berita terbaru dari aplikasi, berita-berita tersebut dibagi menjadi 3 kategori yaitu: News, Events, dan Notification. User bisa berpindah ke halaman selanjutnya dengan menekan tombol silang yang berada di bagian kanan atas halaman.
Halaman selanjutnya yang akan dibuka ditentukan dari status user, bila user berada dalam status sudah ter-login, maka user akan langsung dibawa ke halaman Gallery, bila user berada dalam status belum ter- login, maka halaman berikutnya adalah halaman Home.
3.4.2.3 Halaman Home
Gambar 3.6 Halaman Home
Halaman Home adalah halaman yang berperan sebagai halaman utama user yang tidak dalam keadaan login. Di halaman ini user bisa berpindah ke halaman Login dan Register dengan menekan tombol yang sudah disediakan, atau bisa juga melakukan login dengan Facebook dengan menekan tombol Connect with Facebook, dimana user bisa langsung mengakses akun mereka yang sudah dihubungkan dengan Facebook atau langsung login dengan Facebook tanpa akun.
3.4.2.4 Halaman Login
Gambar 3.7 Halaman Login
Halaman Login merupakan halaman dimana user bisa melakukan login, yang merupakan proses dimana aplikasi akan mengautentikasi user melalui akun yang ada di server. Login bisa dilakukan dengan menginput Username atau e-mail ke input box Username / E-mail, dan input password ke input box Password, lalu diakhiri dengan menekan tombol Login. Untuk user yang lupa password, dengan Username atau e-mail ke input box Username / E-mail lalu menekan Forgot Password, bisa me-reset password.
3.4.2.5 Halaman Register
Gambar 3.8 Halaman Register
Halaman Register merupakan halaman dimana user bisa melakukan register, yaitu proses pembuatan akun baru yang akan disimpan di server. Proses pembuatan akun baru ini dilakukan dengan cara mengisi ke-3 input box yang disediakan sesuai dengan permintaan. Begitu user menekan tombol Register maka bagian input Register akan digantikan dengan input Captcha, dimana user akan diminta untuk menginput kata-kata yang disediakan ke dalam input box, setelah input barulah proses Register akan dibilang selesai.
3.4.2.6 Halaman Gallery + Image Detail
Halaman utama user yang sudah melakukan login dengan akun yang sudah terdaftar de dalam server. Halaman ini merupakan gabungan dari dua halaman yang berbeda, yaitu: Gallery dan Image Detail.
Gambar 3.9 Gallery (My Album) Gambar 3.10 Tampilan ide
Gabungan kedua halaman ini dilakukan atas pertimbangan kalau user akan mengakses kedua halaman ini secara bergantian dengan frekuensi besar
Gallery merupakan kumpulan thumbnail dari setiap foto, gallery juga memiliki dua bagian yaitu My Album dan More Art. My Album adalah foto-foto yang disimpan di device melalui aplikasi Little Dreamers, sedangkan More Art adalah foto-foto yang telah dipublikasikan oleh user-user lain. Pada footer My Album, terdapat 3 button, button pertama di paling kiri adalah button untuk mengambil foto dari device dan mengedit foto tersebut, button di tengah digunakan untuk bisa melihat ide-ide yang disarankan dari aplikasi dan bila user menekan tombol Take Photo pada tampilan ide maka akan mengakses kamera device untuk mengambil foto baru yang akan di edit di halaman Edit Photo, dan button di paling kanan adalah untuk berpindah halaman ke halaman Setting.
Gambar 3.11 Gallery (More Art)
Pada Gallery More Art setiap thumbnail terdapat dua tombol yaitu Like dan Share beserta angka yang menjadi counter jumlah like dan share foto. Share dilakukan melalui Facebook dan bila user menekan tombol Like maka user akan ditawarkan untuk melakukan share juga. Footer More Art memiliki 3 button yang berfungsi untuk mengatur susunan dari thumbnail-thumbnail, button paling kiri adalah button New yang bila ditekan akan menyusun thumbnail berdasarkan waktu foto di- publish, button di tengah adalah button Popular yang akan menyusun foto-foto berdasarkan jumlah like foto, button kanan adalah button Favorite yang akan menampilkan hanya foto yang di-favorite user.
Gambar 3.12 Image Detail (My Album)
Image Detail akan ditampilkan saat user menekan thumbnail foto.
Image Detail merupakan sub halaman yang menampilkan detail-detail dari sebuah foto, tergantung dari sumber foto maka tampilan pada Image Detail juga akan berbeda. Bila foto diambil dari device (My Album) maka tampilan detil yang ditampilkan hanyalah title dan image dari foto saja dengan footer yang memiliki dua button yaitu Edit Photo dan Delete Photo, bila button Edit ditekan maka user akan dibawa ke halaman Edit Photo untuk mengedit foto tersebut, bila Delete ditekan maka user akan diberikan pilihan untuk menghapus foto yang bila disetujui akan menghapus foto dari device.
Gambar 3.13 Image Detail(More Art)
Bila foto diambil dari internet, maka detail foto akan lebih lengkap, detail-detail yang ditampilkan adalah judul foto, deskripsi foto, comment-comment foto, like counter dan share counter, selain itu user juga bisa melakukan post comment baru ke foto dengan cara melakukan input di input box lalu menekan tombol send pada bagian paling bawah halaman, user bisa menghapus comment-nya sendiri dengan menekan tombol silang di samping sebuah comment-nya sendiri, bila user ingin melaporkan sebuah comment maka user bisa menekan tombol tanda seru di samping comment tersebut.
3.4.2.7 Halaman Edit Photo
Halaman ini dimasuki saat user memilih untuk meng-edit foto yang diambil dari device atau camera. Proses edit photo dibagi menjadi 2 tahap yaitu: Transform dan Effect.
Gambar 3.14 Edit Photo (Transform)
Fitur-fitur pada tahap Transform memiliki fungsi mengubah bentuk image, fitur-fitur Transform adalah:
- Reset: Mengembalikan foto ke kondisi semula.
- Crop: Memotong foto.
- Mirror: Membalikkan foto secara horizontal.
- Rotate: Memutarkan foto sebanyak 90 derajat sesuai arah jarum jam.
Bila user menekan tombol silang di sebelah kiri, maka user akan dibawa keluar ke halaman Gallery. Bila user sudah selesai meng-edit foto maka user bisa melanjutkan proses Edit Photo ke tahap Effect dengan menekan tombol Next.
Gambar 3.15 Edit Photo (Effect)
Effect memiliki fitur untuk memberikan efek perubahan warna pada gambar, fitur-fitur Effect adalah:
- Alter: Merubah Brightness, Contrast dan Saturation dari gambar melalui Slider.
- Filter: Memberikan efek filter ke gambar.
Button lainnya adalah button Input yang akan menampilkan dua input box yang digunakan untuk menginput Title dan Description dari foto, bila user ingin mem-publish foto maka user wajib mengisi kedua input box tersebut. Button Return di sebelah kiri digunakan untuk kembali ke Transform. Sesudah user selesai melakukan edit, maka user bisa menekan tombol Done yang akan menampilkan box baru yang berisi 3 Button, yaitu: Save (make Public), Save Only, dan Cancel (edit again).
Gambar 3.16 Edit Photo (Save)
Save (make Public) akan mengirimkan image beserta thumbnail kepada server, dan juga device. Save Only akan menyimpan image beserta thumbnail ke device saja. Cancel (edit again) akan menutup box save, dan mengembalikan user untuk mengedit Photo.
3.4.2.8 Halaman Setting
Gambar 3.17 Halaman Setting
Pada halaman ini user bisa mengakses halaman-halaman lainnya yang bisa mengubah pengaturan akun user dari halaman Profile, Facebook Connect, dan Language. User juga bisa mengakses informasi tambahan dari Help dan About. Logout akan memisahkan identitas user dengan aplikasi, dan membawa user kembali ke halaman Home.
3.4.2.9 Halaman User Profile
Gambar 3.18 Halaman Profile
Ini adalah halaman profil user, pada halaman ini user bisa mengakses halaman perubahan data profile seperti perubahan username, e-mail, password. Perubahan profle picture dilakukan dengan cara menekan profile picture, user akan diminta untuk memilih sebuah picture dari device, picture akan dikirim ke server dan menjadi profile picture user yang baru. Untuk user yang ingin menghapus akun mereka, bisa dilakukan pada halaman ini dengan cara menekan tombol Delete My Account.
3.4.2.10 Halaman Change Username
Gambar 3.19 Halaman Change Username
Pada halaman ini user bisa mengubah username mereka dengan cara mengetikkan username yang baru di input box yang disediakan dengan batasan 16 huruf, lalu menekan tombol save dimana value akan divalidasi, dan bila validasi sukses maka value username akan dikirim ke server dan username user akan diganti.
3.4.2.11 Halaman Change E-mail
Gambar 3.20 Halaman Change E-Mail
Pada halaman ini user bisa mengganti e-mail yang terdaftar di server dengan yang baru dengan memasukkan nama e-mail yang lama di bagian Old E-mail dan nama e-mail yang baru dua kali di bagian New E-mail dan Confirm New E-mail. Begitu tombol Confirm ditekan maka value dari ketiga input box tersebut akan divalidasi dan bila validasi sukses akan dikirimkan ke server, dan e-mail user pun akan diganti.
3.4.2.12 Halaman Change Password
Gambar 3.21 Halaman Change Password
Pada halaman ini user bisa mengganti password yang terdaftar di server dengan yang baru dengan memasukkan password lama di bagian Old Password dan password baru dua kali di bagian New Password dan Confirm New Password.
3.4.2.13 Halaman Facebook Connect
Gambar 3.22 Halaman Facebook Connect
Halaman ini adalah halaman dimana user bisa mengecek koneksi antar status login mereka dengan akun Facebook mereka. Bila user belum melakukan login dengan Facebook maka ia akan bisa
melakukannya di halaman ini dengan menekan tombol Connect with Facebook.
3.4.2.14 Halaman Language
Gambar 3.23 Halaman Languange
Pada halaman Language ini user bisa mengubah bahasa yang mereka lebih nyaman digunakan, bahasa yang disediakan adalah bahasa Inggris dan Jepang. User cukup menekan tombol bahasa yang diiginkan.
3.4.2.15 Halaman Help
Gambar 3.24 Halaman Help
Bila user memiliki masalah atau kebingungan dengan cara pemakaian aplikasi maka user bisa membuka help dimana tersedia sebagai tempat pemberi solusi bagi user mengenai pemakaian aplikasi. User bisa mencari tips yang ingin mereka cari melalui input search yang disediakan, dengan begitu semua tips akan di-filter dan ditampilkan sesuai dengan kategori dan box mereka.
3.4.2.16 Halaman About
Gambar 3.25 Halaman About
Halaman ini memberikan informasi status versi aplikasi.
3.4.3 Interaksi Network
Interaksi antar aplikasi dengan server dilakukan melalui fungsi $.ajax() dari jquery pada sisi client, dimana fungsi akan mengirimkan parameter yang dibutuhkan ke sebuah file PHP yang dibuat oleh bapak Yuda, dan menerima sebuah data yang merupakan array yang telah di encode json dan mengaktifkan sebuah fungsi sebagai reaksi dari penerimaan data tersebut. Berikut adalah semua interaksi melalui internet yang dilakukan antar aplikasi dengan server
3.4.3.1 Load News
Penjelasan: Dijalankan saat user pertama kali memasuki halaman News.
Proses ini akan mengambil informasi-informasi News, Events, dan
Penjelasan: Dijalankan saat user melakukan login dengan cara biasa yaitu melalui input username atau e-mail dan password di input box yang tersedia halaman Login.
3.4.3.3 Facebook Login
Penjelasan: Dijalankan saat user ingin langsung melakukan login dengan akun Facebook tanpa perlu membuat akun baru, atau menghubungkan akun yang sudah dibuat dengan akun Facebook.
3.4.3.4 Register
Penjelasan: Digunakan user untuk melakukan register akun baru pada halaman Register, setelah input user akan diminta untuk memecahkan captcha.
3.4.3.5 Append Gallery
Penjelasan: Digunakan untuk menambahkan thumbnail foto-foto melalui internet di halaman Gallery.
3.4.3.6 Like Photo
Penjelasan: Diaktifkan saat user men-like sebuah foto, like counter dari foto akan bertambah, dan ID user akan ditambahkan ke Like Array. Like bisa dilakukan di halaman Gallery atau Photo Detail.
3.4.3.7 Share Photo
Penjelasan: Berfungsi untuk menambahkan share counter foto. Share ke Facebook akan dilakukan menggunakan Facebook SDK, dan proses ini akan dilakukan setelah share tersebut berhasil.
3.4.3.8 Favorite Photo
Penjelasan: Berfungsi untuk mem-favorite sebuah photo, foto yang di- favorite akan ditampilkan di filter Favorite dari sesi More Art di halaman Gallery.
3.4.3.9 Unfavorite Photo
Penjelasan: Berfungsi untuk mengeluarkan foto dari kategori favorite sehingga tidak akan muncul pada saat filter Favorite dipilih.
3.4.3.10 Load Photo
Penjelasan: Dijalankan saat user menekan sebuah thumbnail foto pada Gallery (More Art). Gallery akan digantikan halaman Image Detail, yang berisi detil dari foto tersebut. Proses ini digunakan untuk mengambil data dari detil-detil foto.
3.4.3.11 Reload Comments
Penjelasan: Dijalankan bersamaan dengan Load Image. Proses ini akan mengambil comment-comment dari sebuah foto dan memasukkannya ke bagian comment dari halaman Image Detail.
3.4.3.12 Post Comments
- Penjelasan: Dijalankan saat user meng-input comment ke sebuah foto.
Comment akan dikirimkan ke dalam server. Dan setelah server mengirimkan konfirmasi kalau comment telah sukses ditambahkan, halaman akan men-reload comment lagi.
3.4.3.13 Report Spam
- Penjelasan: Berfungsi untuk melaporkan comment yang dianggap sebagai spam.
3.4.3.14 Delete Comment
- Penjelasan: Berfungsi untuk menghapus comment milik user itu sendiri.
Setelah server mengirimkan konfirmasi kalau comment telah sukses ditambahkan, halaman akan men-reload comment lagi.
3.4.3.15 Save Photo
- Penjelasan: Berfungsi untuk mengirimkan foto yang sudah di-edit ke dalam server. Setelah save sukses maka user akan dibawa kembali ke halaman Gallery.
3.4.3.16 Update Profile
- Penjelasan: Berfungsi untuk mengganti status profile mereka dari username, e-mail, dan password. Proses dilakukan dengan sistem validasi variable, sehingga dengan mengecek variable yang memiliki
- Penjelasan: Berfungsi untuk mengganti profile picture.
3.4.3.18 Remove Account
- Penjelasan: Berfungsi untuk menghapus akun user.
3.4.3.19 Change Language
- Penjelasan: Mengubah default language untuk akun user.
3.4.3.20 Load Help
- Penjelasan: Berfungsi untuk mengambil konten-konten dari bantuan- bantuan yang tersedia untuk user pada halaman Help
3.4.4 Edit Photo
Fitur Edit Photo pada aplikasi diimplementasikan menggunakan
<canvas> pada HTML5. User bisa menggunakan fitur ini untuk meng-edit image yang bisa didapatkan dari device, camera, atau dari foto My Album. Edit Photo dibagi menjadi 3 tahap, yaitu: Transform, Effect, dan Save.
3.4.4.1 Flowchart 1) Edit Image
Berikut adalah diagram flowchart yang menggambarkan tahap-tahap dalam proses Edit Image.
Berikut adalah diagram flowchart yang menggambarkan tahap Filter pada proses Edit Image.
2) Save Image
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
Grayscale
Love
Sunrise
Clarity
Orange Peel
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.
20. Microsoft Word, text editor utama yang digunakan dalam penulisan laporan magang ini.
21. Adobe Photoshop, digunakan untuk membuat flowchart dan penggabungan screenshot.
3.5 Kendala yang Ditemukan
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.
