Banyak sekali aplikasi2 di facebook sekarang ini bermunculan dan dari aplikasi tersebut dibuat dengan berbagai macam bahasa pemrograman, salah satunya aplikasi dengan Flash. Aplikasi Flash untuk Facebook sangatlah menarik dan potensial untuk dikembangkan. Jadi saya coba menulis tutorial ini untuk share2 ilmu yang udah didapat. Silahkan bila ada pertanyaan dan saran, baik mengenai materi/penulisan
Pada tutorial ini, kita akan belajar membuat aplikasi Flash sederhana yang berkomunikasi dengan akun Facebook kita, dan mengambil data diri seperti biodata dan foto.
Untuk membuat Flash berkomunikasi dengan Facebook, ada beberapa cara yang bisa kita gunakan. Tapi untuk tutorial kali ini, kita akan menggunakan Facebook Actionscript API, API official dari Adobe untuk berkomunikasi dengan Facebook yang bisa diunduh di http://code.google.com/p/facebook-actionscript-api/. Versi terakhir yang saya temui adalah versi 3.4, walau pada saat anda mencobanya kemungkinan sudah ada versi yang lebih baru.Dokumentasinya sendiri bisa kamu lihat disini http://facebook-actionscript-api.goo...ocs/index.html.
Seperti yang terlihat, ada dua tipe file yang bisa kita unduh dan gunakan, yaitu SWC dan Source. Saya akan mengunduh versi Source (facebook_library_v3.4_source.zip), lalu meng-extract isinya pada salah satu folder di komputer. Misalnya, C:/flash/facebook_api/ .
Satu hal lagi yang perlu diperhatikan. Dalam membuat aplikasi Facebook, kita perlu mendaftarkan aplikasi tersebut terlebih dahulu pada akun Developer Facebook untuk mendapatkan SECRET KEY dan APP KEY yang vital digunakan untuk komunikasi data antara aplikasi dengan server Facebook. Untungnya, hal ini sangatlah mudah untuk dilakukan.
- Buka http://www.facebook.com/developers/. Bila Facebook menanyakan apakah anda mengijinkan aplikasi tersebut mengakses akun anda, pilih Allow.
- Bila sudah masuk pada halaman tersebut, tekan tombol + Set Up New Application di kanan atas.
- Isi nama aplikasi yang ingin kamu buat, misal Beginning Fesbuk API, centang tanda persetujuan, lalu tekan tombol Simpan Perubahan. Perlu diperhatikan kalau nama aplikasinya tidak boleh mengandung kata 'face'/'fb' ato elemen kata yang bisa mengacu ke Facebook makanya saya menggunakan kata Fesbuk.
- Bila berhasil, kamu akan dibawa masuk kedalam halaman Setting application. Kamu hanya cukup memperhatikan dan mencatat Application Key dan Secret Key. Bila sudah, kamu bisa langsung menekan tombol Back to My Application pada bagian kiri atas.
Kita sudah bisa memulai mengembangkan aplikasi Flash yang kita inginkan.
Berikutnya kita mempersiapkan pengembangan aplikasinya menggunakan FlashDevelop. Buka FlashDevelop, lalu pilih Project -> New Project, lalu pilih AS3 Project. Beri nama project dengan BeginningFacebookAPI, lalu pilih lokasi project yang anda inginkan. Tekan Ok.
Pertama-tama kita perlu menambahkan library Facebook Actionscript API kedalam project ini. Pilih Project -> Properties.
Pada layar setting BeginningFacebookAPI(AS3), pilih tab Classpaths, lalu klik tombol Add Classpath… Arahkan pada lokasi library Facebook Actionscript API, dalam hal ini di C:/flash/facebook_api/ . Tekan Ok.
Ketikkan script berikut untuk menggantikan semua script yang ada pada file Main.as tersebut.
Spoiler for script
Berikut penjelasan dari script diatas.
public const API_KEY:String = "";
public const SECRET_KEY:String = "";
Constant dari API_KEY dan SECRET_KEY harus diisi dengan Application Key dan Secret Key yang sudah kamu catat sebelumnya pada saat mendaftarkan aplikasi ke Facebook.
Pertama kali, kita langsung inisialisasi interface dan koneksi Facebook. Inisialisasi interface yang dilakukan:
public function initInterface():void
{
userInfoTxt = new TextField();
addChild(userInfoTxt);
userInfoTxt.width = 400;
userInfoTxt.height = 300;
userInfoTxt.selectable = false;
userInfoTxt.multiline = true;
userInfoTxt.wordWrap = true;
userInfoTxt.text = "klik 'Connect' dibawah ini setelah Allow aplikasi.";
loginTxt = new TextField();
addChild(loginTxt);
loginTxt.addEventListener(MouseEvent.CLICK, doneValidating);
loginTxt.text = "CONNECT";
loginTxt.border = true;
loginTxt.selectable = false;
loginTxt.width = 65;
loginTxt.height = 20;
loginTxt.x = 20;
loginTxt.y = 40;
}
Cukup sederhana, kita membuat userInfoTxt yang berisi informasi dari proses koneksi yang sedang berlangsung, dan loginTxt yang dijadikan sebagai tombol sederhana untuk memulai koneksi.
Pada function initFacebook() , kita melakukan inisialisasi dari Class-Class dasar dari Facebook AS3 API dan mencoba mengambil parameter fb_sig_session_key.
public function initFacebook():void
{
flashvars = this.root.loaderInfo.parameters;
session=new FacebookSessionUtil(API_KEY, SECRET_KEY, this.root.loaderInfo);
session.addEventListener(FacebookEvent.CONNECT, onConnect);
fbook = session.facebook;
if(flashvars.fb_sig_session_key != null)
{
session.verifySession();
}else
{
session.login();
}
}
Perlu diingat, ada perbedaan dalam menjalankan aplikasi ini secara langsung di desktop atau melalui website Facebook dengan di-hosting terlebih dahulu. Bila menjalankan aplikasi secara normal di desktop atau alamat hosting langsung (menggunakan file SWF), maka Flash tidak akan menerima parameter fb_sig_session_key, dan harus melakukan login manual serta validasi ulang ke halaman Facebook menggunakan sebuah tombol (dalam kasus ini, loginTxt).
Lain halnya bila aplikasi ini sudah di-hosting terlebih dahulu, parameter fb_sig_session_key akan langsung didapatkan, dan koneksi dengan Facebook akan berlangsung secara otomatis.
public function doneValidating(event:MouseEvent):void
{
session.validateLogin();
}
public function onConnect(e:FacebookEvent):void
{
if(!e.success)
{
session.login();
return ;
}
loginTxt.visible = false;
getUserInfo();
}
Function doneValidating() digunakan untuk memvalidasi ulang koneksi ke Facebook bila pada inisialisasi awal koneksi gagal dilakukan (atau bila aplikasi Flash ini dijalankan di desktop/alamat hosting langsung).
Function onConnect sendiri yang bertugas mengecek apakah proses koneksi berhasil atau tidak. Bila tidak sukses, akan memanggil session.login() (membuka halaman website Facebook), sedangkan bila sukses, tombol loginTxt akan dihilangkan, dan proses selanjutnya akan dijalankan (getUserInfo()).
public function getUserInfo():void
{
userInfoTxt.text = "Loading user info...";
var call:FacebookCall = fbook.post(new GetInfo([fbook.uid], ['name', 'birthday', 'current_location', 'status']));
call.addEventListener(FacebookEvent.COMPLETE, handleGetInfoResponse);
}
Function getUserInfo() ini berfungsi membuat objek FacebookCall yang digunakan untuk memanggil command saat itu, yaitu mendapatkan informasi user (berdasarkan facebook id nya, dalam bentuk Array) yang antara lain nama, hari ulang tahun, lokasi, dan status terakhir. Bila pemanggilan berhasil dilakukan, hasilnya akan diproses pada penanganan event FacebookEvent.COMPLETE di function handleGetInfoResponse().
Referensi dari jenis-jenis API yang tersedia ada pada http://wiki.developers.facebook.com/index.php/API. Kamu bisa mencari padanannya dalam Facebook AS3 API pada package com.facebook.commands (contohnya class GetInfo diatas).
public function handleGetInfoResponse(e:FacebookEvent):void
{
if (e.success)
{
var user:FacebookUser = (e.data as GetInfoData).userCollection.getItemAt(0) as FacebookUser;
var name:String = user.name;
var brithdayDate:String = user.birthday;
var currentLocation:FacebookLocation = user.current_location;
var status:StatusData = user.status;
userInfoTxt.htmlText = "Name: " + name;
userInfoTxt.htmlText += "
Birthday: " + brithdayDate;
userInfoTxt.htmlText += "
Location: " + currentLocation.city;
userInfoTxt.htmlText += "
Status: " + status.message + " at "+ status.time;
}
}
Function handleGetInfoResponse() akan menangani hasil pemanggilan sebelumnya, dan berfungsi mencetak biodata diri user. Objek FacebookEvent yang diterima akan memiliki atribut 'data' yang formatnya sesuai dengan command GetInfo yang digunakan diatas, yaitu GetInfoData. Kamu bisa menemukan tipe-tipe data hasil atas setiap command pada package com.facebook.data.
Kita mengambil atribut userColletion pada index pertama (0) karena kita hanya mengirimkan satu facebook id. Lain halnya bila kita mengirim banyak id sekaligus, maka kita perlu melakukan perulangan untuk mengambil biodata diri tiap user yang ada.
Setelah aplikasi Flash tersebut selesai dibuat dan di-build tanpa error, maka kita perlu meng-hosting SWFnya dan mengatur ulang setting aplikasi tersebut di Facebook.
1. Setelah meng-hosting file SWF yang dihasilkan, buka halaman http://www.facebook.com/developers/apps.php, pilih aplikasi yang sudah kamu daftarkan sebelumnya, lalu klik Edit Setting.
2. Selesai sudah semua pengaturan yang diperlukan. Untuk melihat hasilnya, kamu bisa langsung membuka alamat website sesuai Canvas Callback URL yang telah diset pada langkah sebelumnya. Bila halamannya tidak terbuka/error, jangan panik dulu karena terkadang pengaktifan halaman aplikasi di Facebook memakan waktu beberapa menit sebelum aktif secara penuh.
Selesai!!! sumber diambil dari kaskus
No comments:
Post a Comment