1
RANCANG BANGUN APLIKASI PHOTO SHARING BERBASIS DESKTOP
MENGGUNAKAN FACEBOOK, FLICKR DAN PHOTOBUCKET API
Elihu Gideon Natanael1, Sarwosri2
1,2
Jurusan Teknik Informatika, Fakultas Teknologi Informasi, Institut Teknologi Sepuluh Nopember Kampus ITS Sukolilo Surabaya, 60111, Indonesia
1[email protected], 2[email protected]
Abstrak
Kegiatan photo sharing melalui dunia maya semakin meningkat akhir-akhir ini. Situs web yang menyediakan fitur berbagi foto atau gambar antara lain Facebook, Flickr, dan Photobucket. Penggunaan situs-situs tersebut biasanya untuk membuat album online di mana pengguna lain bisa melihat dan mengunduh foto dengan mudah, sebagai media penyimpanan gambar maupun sebagai portofolio untuk pengguna yang berprofesi sebagai fotografer atau desainer grafis. Semakin banyak situs yang digunakan maka semakin cepat foto tersebut dibagi. Oleh sebab itu, pengguna membutuhkan sebuah aplikasi yang memudahkan kegiatan berbagi foto ke beberapa situs sekaligus.
Aplikasi ini menyajikan fitur-fitur yang memudahkan pengguna untuk melakukan kegiatan berbagi foto pada Facebook, Flickr, dan Photobucket melalui aplikasi desktop menggunakan API. Fitur-fitur yang dimiliki oleh aplikasi ini adalah, pertama, pengguna dapat mengunggah banyak gambar ke ketiga situs berbagi foto sekaligus, foto yang diunggah bisa berasal dari komputer maupun dari webcam. Kedua, pengguna juga dapat mengunggah gambar ke album yang disarankan oleh aplikasi maupun album baru yang ingin dibuat. Ketiga, pengguna dapat melihat album dan foto dari akun pengguna pada Facebook, Flickr, dan Photobucket untuk kemudian dapat diunduh dan dihapus melalui aplikasi.
Uji coba aplikasi ini dilakukan melalui beberapa skenario yang mencerminkan fitur-fitur yang dimiliki oleh aplikasi seperti mengunggah, mengunduh dan menghapus gambar. Uji coba ini berhasil mewujudkan sebuah implementasi nyata aplikasi photo sharing berbasis desktop yang terintegrasi dengan Facebook, Flickr, dan Photobucket API.
Kata kunci: Photo Sharing, Adobe AIR, Flex, Facebook, Flickr, Photobucket
1. PENDAHULUAN
Pada era informasi seperti sekarang, berbagi melalui dunia maya merupakan cara yang paling efektif dalam menyebarkan dan memperoleh informasi. Informasi tersebut bisa berupa pesan teks, lokasi, maupun gambar. Hal tersebut merupakan salah satu alasan mengapa beberapa tahun terakhir banyak bermunculan situs-situs jejaring sosial dan photo sharing (berbagi foto). Contoh situs yang menyediakan fitur untuk berbagi foto atau gambar adalah Facebook, Flickr dan Photobucket. Biasanya kegiatan berbagi foto bertujuan untuk membuat album foto online sehingga pengguna internet lain bisa melihat dan mengunduh foto tersebut dengan mudah. Situs berbagi foto juga dapat digunakan sebagai media penyimpanan gambar atau foto penggunannya. Kegunaan lain situs tersebut adalah sebagai portofolio untuk pengguna yang berprofesi sebagai fotografer atau desainer grafis.
Dengan semakin banyaknya situs berbagi foto maka semakin banyak juga sarana yang dapat digunakan pengguna untuk membangun portofolio atau bahkan hanya membuat album foto. Hal tersebut juga berpengaruh pada kecepatan penyebaran informasi. Namun, yang menjadi masalah adalah pengguna harus meng-upload gambar yang ingin di-share ke tiap situs tersebut, juga untuk pengawasan dan perubahan oleh pengguna. Tentu saja hal itu sangat merepotkan dan membuang waktu jika harus mengunjungi situs tersebut
satu persatu. Akan tetapi permasalahan seperti ini seharusnya tidak perlu dikhawatirkan karena beberapa dari situs tersebut menyediakan API yang dapat digunakan untuk membangun aplikasi yang dapat mengakses situs tersebut.
Sebagai solusi permasalahan yang telah dipaparkan di atas, penulis mengusulkan untuk megembangkan sebuah aplikasi yang mengimplementasikan API dari beberapa situs berbagi foto sebagai Tugas Akhir. Aplikasi ini mengimplementasikan Facebook, Flickr dan Photobucket API. Adapun fitur-fitur API yang akan digunakan antara lain post/upload foto dan delete foto. Pengguna bisa melakukan proses upload gambar ke 3 situs tersebut sekaligus hanya dengan satu kali klik. Selain dari file yang ada di komputer, pengguna juga bisa mengunggah foto yang langsung diambil dari
webcam. Pada saat akan mengunggahgambar, aplikasi memberikan suggestion kepada pengguna mengenai album mana yang paling tepat untuk menempatkan foto-foto tersebut dengan cara membandingkan nama, tag dan deskripsi foto yang akan di-upload dengan nama, deskripsi, nama foto pada album yang sudah ada. Antarmuka pengguna perangkat lunak ini akan dibuat user friendly dengan tema yang menarik sehingga menambah daya tarik dan kemudahan penggunaan aplikasi.
2
2. DASAR TEORI
2.1. Photo Sharing
Photo Sharing (berbagi foto) adalah kegiatan penyebaran atau transfer gambar dan foto secara online, sehingga memungkinkan pengguna untuk berbagi dengan orang lain.[1] Fitur-fitur yang disediakan juga berbeda-beda pada setiap situs web. Beberapa situs memiliki API sehingga memungkinkan pengembang membuat aplikasi yang mengakses situs tersebut. Situs-situs photo sharing yang banyak dikenal antara lain Flickr, Imageshack, Imgur, Mobile Me, Photobucket, Picasa, Snapfish, dan lain-lain. Sedangkan tiga situs yang berhubungan dengan Tugas Akhir ini adalah Facebook, Flickr, dan Photobucket. Penjelasan lebih lanjut pada setiap situs tersebut adalah sebagai berikut.
2.2. Facebook API
Facebook Platform memberikan sekumpulan API dan tools yang memperbolehkan pengembang aplikasi untuk terintegrasi dengan Open Graph baik melalui aplikasi pada Facebook.com maupun situs dan aplikasi di luar Facebook.[2] Beberapa hal yang perlu diketahui tentang Facebook Platform antara lain Social Plugins, Graph API, Social Channels, Authenticaion, Open Graph Protocol, Dialogs, FQL, Internationalization API, Credits API, Ads API, Chat API. Semua aplikasi yang dibuat menggunakan Facebook API harus didaftarkan terlebih dahulu untuk mendapatkan API KEY agar Facebook mengenali aplikasi saat melakukan pemanggilan fungsi menggunakan API
2.3. Flickr API
Flickr API memungkinkan pengembang untuk mendapatkan data langsung dari Flickr dan menyediakan hampir semua dari fitur dan fungsi yang ada pada situs Flickr. Untuk dapat menggunakan Flickr API aplikasi harus didaftarkan terlebih dahulu untuk mendapatkan API KEY. Yang perlu diperhatikan oleh pengembang adalah kerahasiaan API Key dan App Secret agar tidak disalahgunakan oleh pengembang lain. Aplikasi ini menggunakan library Flickr API untuk ActionScript yang bisa diunduh di http://code.google.com /p/as3flickrlib/.
2.4. Photobucket API
Photobucket API menyediakan pemanggilan API untuk menghubungkan aplikasi dengan Photobucket. Sangat berguna jika pengembang ingin membuat aplikasi yang membutuhkan Photobucket namun tidak ingin menampilkan antarmuka Photobucket. Fitur yang disediakan antara lain, mengunggah gambar dan video, pencarian gambar, mendapatkan detail dari sebuah gambar seperti link URL, mengupdate judul, deskripsi dan tag. Seperti API situs lainnya, pengembang harus mendaftarkan dulu aplikasi ke Photobucket untuk mendapatkan API KEY. Tugas Akhir ini menggunakan
Photobucket API untuk AS3 yang dapat diunduh di https://bitbucket.org/ photobucket/api-as3 /wiki/Home.
2.5. Adobe Flex
Adobe Flex adalah sebuah Software Development Kit (SDK) yang dikeluarkan oleh Adobe untuk pengembangan aplikasi RIA dan berbasis Adobe Flash
platform dan menggunakan XML dan ActionScript sebagai bahasa pemrograman.[3] Flash lebih mengutamakan animasi, sedangkan Flex lebih mengutamakan Graphic User Interface seperti tombol, kolom teks, grid data dan lain-lain. Namun keduanya sama-sama menyediakan berbagai cara untuk mengirim dan menerima data dari server tanpa merubah tampilan. Hal inilah yang menjadi kelebihan Flex dan Flash dari HTML dan JavaScript.
Proses pengembangan aplikasi menggunakan Flex adalah sebagai berikut, mendefinisikan antarmuka aplikasi menggunakan komponen-komponen seperti
form, button dan sebagainya, menyusun komponen ke dalam desain antarmuka, menggunakan style dan theme untuk desain visual, menambahkan behavior yang bersifat dinamis, mendefinisikan dan menghubungkan ke servis data jika dibutuhkan. Format file Flex bernama .mxml. Untuk mendesain skin atau theme dari komponen-komponen Flex juga bisa melalui file .css. Untuk pengembang yang terbiasa dengan HTML, CSS dan JavaScript pasti dapat dengan mudah mempelajari Flex. Kode AS3 juga bisa disertakan pada dokumen .mxml dengan memberikan tag <fx:script>.
2.6. Adobe AIR
Adobe AIR (Adobe Integrated Runtime) adalah sebuah runtime yang bersifat cross-operating system
dan memungkinkan pengembang menggunakan keahliannya dalam ActionScript, HTML atau JavaScript untuk membangun sebuah aplikasi yang bersifat Rich Internet Apllication (RIA) di luar
browser.[4]Aplikasi AIR dapat dibangun dengan Flex atau ActionScript 3. Dengan Adobe AIR, pengembang dapat membuat suatu perangkat lunak yang bisa berinteraksi dengan internet tanpa harus membuka
browser dan dapat berjalan di OS apapun. Produk yang dihasilkan berupa .air yaitu installer yang bisa dijalankan di berbagai macam OS asalkan Adobe AIR
runtime sudah terinstall (jika belum, aplikasi akan menanyai pengguna untuk men-download AIR runtime secara otomatis). Format instalasi tersebut juga bisa diubah ke native installer seperti .exe.
3. METODOLOGI
3.1. Analisis
Gambar 1 menunjukkan deskripsi umum sistem yang dipakai dalam aplikasi ini.
3
Gambar 1 Deskripsi Umum Sistem
Pembuatan dan perancangan aplikasi ini menggunakan framework Flex dan dipublish dengan Adobe AIR sehingga aplikasi dapat diinstal dan dijalankan pada berbagai macam OS. Proses utama yang dimiliki aplikasi ini antara lain
1. Proses melakukan otorisasi.
Pengguna dapat melakukan otorisasi aplikasi pada salah satu atau lebih dari situs Facebook, Flickr, dan Photobucket API.
2. Proses mengunggah gambar
.
Pengguna dapat mengunggah beberapa gambar ke situs dimana pengguna tersebut login.
3. Proses mengambil gambar dari webcam
.
Pengguna dapat mengambil gambar dari webcam untuk diunggah ke situs photo sharing.
4. Proses melihat album
.
Pengguna dapat melihat foto yang terdapat pada album milik pengguna pada tiap situs.
5. Proses mengunduh gambar
.
Pengguna dapat mengunduh foto yang dipilih ke komputer.
6. Proses menghapus gambar
.
Pengguna dapat menghapus foto yang dipilih pada akun Flickr dan Photobucket saja karena Facebook API tidak mendukung untuk penghapusan foto. 7. Proses mengubah pengaturan
.
Pengguna dapat mengubah aturan-aturan pada aplikasi.
Gambar 2 Diagram Use Case
Gambar 2 menggambarkan use case diagram dari sistem. Hanya ada 1 aktor pada aplikasi ini yaitu pengguna. Pengguna dapat melakukan otorisasi, mengunggah gambar, mengunduh, dan menghapus gambar serta mengubah pengaturan aplikasi.
3.2. Perancangan
Gambar 3 menampilkan rancangan dari halaman upload pada aplikasi. Di sebelah kiri layar, terdapat tiga tombol yang merupakan menu utama aplikasi yaitu upload, browse, dan setting. Tombol upload di-disable karena posisi pengguna berada pada halaman upload. Pada halaman tersebut juga terdapat panel gambar yang menampilkan preview foto yang akan diunggah. Terdapat juga tombol upload, select file dan webcam yang digunakan untuk proses penunggahan gambar. Sedangkan combobox yang berada di atas tombol upload adalah daftar foto yang telah dipilih dan akan diunggah. Di bagian kanan terdapat data-data yang harus diisi sebelum mengunggah gambar seperti pemilihan situs tujuan, nama, deskripsi dan tag, dan album tujuan.
uc Primary Use Cases
Sistem
Melakukan Otorisasi
Pengguna
Mengunggah Gambar Mengambil Gambar dari
Webcam
Melihat Album Mengunduh Gambar
Menghapus Gambar Mengubah Pengaturan
«extend» «extend»
4
Gambar 3 Antarmuka Halaman Upload
Halaman browse dapat diakses pada menu di sebelah kiri layar. Seperti pada menu utama lainnya, pada halaman browse terdapat ketiga tombol menu utama. Halaman ini juga terdapat tiga bagian dimana masing-masing bagian menampilkan foto pengguna pada akun Facebook, Flickr, dan Photobucket. Pada bagian Facebook dan Photobucket terdapat combobox pilihan album, sedangkan Flickr tidak mendukung album. Foto pada tiap situs ditampilkan secara vertikal dan dapat di-scoll jika jumlah foto melebihi batas tinggi layar. Jika salah satu foto di-klik maka sistem akan memunculkan popup yang menampilkan gambar berukuran besar untuk kemudian didownload maupun dihapus. Rancangan halaman Browse dapat dilihat pada gambar 4.
Gambar 4 Antarmuka Halaman Browse
3.3. Implementasi
Input dari aplikasi ini adalah data gambar berupa
class ImageData. Class tersebut menyimpan informasi seperti bitmap gambar, situs tujuan pengunggahan gambar, album tujuan pengunggahan gambar, serta nama, deskripsi, dan tag gambar. Gambar 5 menunjukkan source code dari class ImageData. Implementasi proses mengunggah gambar dapat dilihat pada gambar 6 yang berupa source code untuk proses pengunggahan gambar.
package
{
import flash.display.BitmapData;
public class ImageData {
//pilihan situs
public var uploadToFB:Boolean;
public var uploadToFR:Boolean;
public var uploadToPB:Boolean; //true=dari storage, false=dari webcam public var fromFile:Boolean;
//informasi upload
public var name:String = ""; public var description:String = ""; public var tags:String = ""; //data gambar berupa bitmap public var bitmap:BitmapData; public var FBalbumID:String = ""; public var FBalbumNew:String = "";
public var FBalbumType:int = 0; //1=existing, 2=suggested, 3=new
public var PBalbumName:String = ""; public var PBalbumNew:String = ""; public var PBalbumType:int = 0;
public function ImageData(uploadToFB:Boolean, uploadToFR:Boolean, uploadToPB:Boolean, fromFile:Boolean)
{
this.uploadToFB = uploadToFB;
this.uploadToFR = uploadToFR;
this.uploadToPB = uploadToPB;
this.fromFile = fromFile; }
} }
Gambar 5 Implementasi Kode Class ImageData
protected function btnUpload_clickHandler (event:MouseEvent):void
{
//mengambil data tiap gambar
for(var i:int=0; i<imageList.length; i++){ imgData_upload =
ImageData(imageList.getItemAt(i)); //pengecekan sumber gambar
if(imgData_upload.fromFile){ imgFile_upload = new File(String(imagePathList.getItemAt(i))); values_upload = {file:imgFile_upload, message:imgData_upload.description, fileName:imgData_upload.name}; } else { values_upload = {file:imgData_upload.bitmap, message:imgData_upload.description, fileName:imgData_upload.name}; } //upload ke Facebook
if(FBloggedIn && imgData_upload.uploadToFB) { if(imgData_upload.FBalbumType == 3) { if(imgData_upload.FBalbumNew == ""){ imgData_upload.FBalbumNew = "Prixxel"; } if(FBalbumNameList.getItemIndex (imgData_upload.FBalbumNew) != -1){ imgData_upload.FBalbumID = String(FBalbumIdList.getItemAt( FBalbumNameList.getItemIndex( imgData_upload.FBalbumNew))); FacebookDesktop.api('/'+imgData_upload.
FBalbumID+'/photos',FB_uploadCompleteHandler, values_upload, 'POST');
5
else//membuat album baru { var albumData:Object =
{name:imgData_upload.FBalbumNew}; FacebookDesktop.api('/me/albums/', FBnewAlbumHandler, albumData, 'POST');
} } else {
FacebookDesktop.api('/'+imgData_upload.
FBalbumID+'/photos',FB_uploadCompleteHandler, values_upload, 'POST');
} }
//upload ke flickr
if(FRloggedIn && imgData_upload.uploadToFR){ flickrUpload.upload(imgFile_upload, imgData_upload.name,imgData_upload.description, imgData_upload.tags); } //upload ke Photobucket
if(PBloggedIn && imgData_upload.uploadToPB){ var uploadPBalbum:Album = new Album(); uploadPBalbum.id =
imgData_upload.PBalbumName;
uploadPBalbum.uploadFile(imgFile_upload as FileReference,"image",imgData_upload.name, imgData_upload.description);
} } }
Gambar 6 Implementasi Kode Mengunggah Gambar
Gambar 7 menunjukkan implementasi antarmuka halaman awal aplikasi.
Gambar 7 Implementasi Kode Mengunggah Gambar
4. UJI COBA
Uji coba aplikasi ini dilakukan dengan menggunakan satu buah laptop. Pada komputer yang menjadi lingkungan uji coba dilakukan instalasi perangkat lunak terlebih dahulu untuk kemudian dilakukan uji coba. Uji coba dilakukan untuk menguji apakah fungsionalitas aplikasi berjalan seperti yang diharapkan pada perancangan aplikasi sebelumnya.
Spesifikasi perangkat keras dan perangkat lunak komputer yang digunakan adalah sebagai berikut
Perangkat keras :
Prosesor : Intel Pentium P6000 1.87GHz RAM : 1024 MB
Webcam : Integrated Modem : ZTE AC2726i
Perangkat lunak :
Sistem Operasi : Windows 7 Home Basic Browser : Mozilla Firefox 5.0
Webcam : Toshiba Web Camera Application Internet Conn. : SmartFren
4.1. Uji Coba Fungsionalitas
Gambar 8 menunjukkan hasil uji coba mengunggah gambar pada kondisi pengguna memilih album tujuan dari album yang sudah ada. Pembuktian dilakukan dengan mengunjungi situs dimana gambar tersebut diunggah.
Gambar 8 Hasil Uji Coba Mengunggah Gambar Kondisi Album Sudah Ada
Gambar 9 menunjukkan hasil uji coba mengunggah gambar pada kondisi pengguna memilih album tujuan dengan membuat album baru. Pembuktian dilakukan dengan mengunjungi situs dimana gambar tersebut diunggah. Pada situs akan ditampilkan gambar yang diunggah pada album yang baru dibuat
6
Gambar 9 Hasil Uji Coba Mengunggah Gambar Kondisi Membuat Album Baru
4.2. Uji Coba Nonfungsional
Cross-Platform merupakan kebutuhan non fungsional aplikasi dari segi portability dimana aplikasi dapat diinstal dan dijalankan pada sistem operasi apapun. Kemampuan ini dimiliki oleh runtime Adobe AIR yang digunakan untuk membangun aplikasi ini. Format instalasi dari aplikasi ini adalah .air yang dapat diinstal pada sistem operasi lain. Tetapi versi Adobe AIR yang terbaru (2.6 ke atas) sudah tidak lagi mendukung Linux dengan alasan sedikitnya konsumen pada OS tersebut. Dari hasil uji coba fungsionalitas dibuktikan bahwa aplikasi berjalan di Sistem Operasi Windows. Pada uji coba ini akan dilakukan pengujian pada sistem operasi Mac OS. Pengujian akan dilakukan dengan melakukan instalasi dan menjalankan aplikasi yang telah terinstal. Spesifikasi komputer uji coba adalah sebagai berikut
Perangkat keras :
Model : MacBookPro5,5
Prosesor : Intel Core 2 Duo 2.26GHz RAM : 2048 MB
Perangkat lunak :
Sistem Operasi : Mac OS
Gambar 10 menunjukkan hasil uji coba instalasi pada Mac OS dan gambar 11 merupakan hasil uji coba setelah aplikasi dijalankan.
Gambar 10 Hasil Uji Coba Cross Platform Instalasi Aplikasi
Gambar 11 Hasil Uji Coba Cross Platform Menjalankan Aplikasi
5. KESIMPULAN
Dari hasil pengamatan selama perancangan, implementasi, dan proses uji coba perangkat lunak yang dilakukan, bisa diambil kesimpulan sebagai berikut :
a. Aplikasi yang dibuat dalam Tugas Akhir ini telah dapat mengimplementasikan sebuah aplikasi
photo sharing berbasis desktop yang terintegrasi dengan Facebook, Flickr, dan Photobucket API. b. Proses pengelolaan album online pengguna seperti
mengunggah, mengunduh, dan menghapus gambar serta membuat album baru dapat dilakukan oleh aplikasi.
c. Proses login, otorisasi, dan permission yang digunakan untuk setiap situs berhasil diatur oleh aplikasi.
d. Aplikasi dapat memberikan album suggestion
kepada pengguna sebagai saran di album mana foto tersebut akan diunggah.
e. Aplikasi mendukung pengguna untuk mengambil gambar melalui webcam.
7
f. Format file instalasi yang dihasilkan (.air) dapatdijalankan pada sistem operasi Windows dan Mac OS
6. DAFTAR PUSTAKA
[1] http://www.commoncraft.com/photosharing,
tentang pengertian photo sharing, terakhir diakses tanggal 1 Juni 2011.
[2] http://developers.facebook.com/docs/, tentang
dokumentasi Facebook API, terakhir diakses tanggal 28 Juni 2011
[3] http://www.adobe.com/products/flex/, tentang
Adobe Flex, terakhir diakses tanggal 26 Juni 2011.
[4] http://www.adobe.com/products/air/, tentang
Adobe AIR, terakhir diakses tanggal 5 Juli 2011.
