Membuat Aplikasi Flash Sederhana untuk Facebook

Kalian pasti sudah tahu Facebook kan? Kalo belum, ke laut aja sana (becanda ding , buka aja http://www.facebook.com buat mengetahui lebih lanjut tentang situs social networking yang satu ini).

Pada tutorial ini, kita akan belajar membuat aplikasi Flash sederhana yang berkomunikasi dengan akun Facebook kita, dan mengambil data diri seperti biodata dan foto. Langsung saja kita mulai…

1. 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.2, walau pada saat anda mencobanya kemungkinan sudah ada versi yang lebih baru.Dokumentasinya sendiri bisa kamu lihat disini http://facebook-actionscript-api.googlecode.com/svn/release/current/docs/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.2_source.zip), lalu meng-extract isinya pada salah satu folder di komputer. Misalnya, C:/flash/facebook_api/ .

2. 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.
   1. Buka http://www.facebook.com/developers/. Bila Facebook menanyakan apakah anda mengijinkan aplikasi tersebut mengakses akun anda, pilih Allow.
   2. Bila sudah masuk pada halaman tersebut, tekan tombol + Set Up New Application di kanan atas.

   

   3. Isi nama aplikasi yang ingin kamu buat, misal Beginning Feisbuk 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.

   

   4. Bila berhasil, kamu akan dibawa masuk kedalam halaman Setting/Sunting aplikasi. Kamu hanya cukup memperhatikan dan mencatat Application Key/Kode API dan Secret Key/Rahasia. Bila sudah, kamu bisa langsung menekan tombol Kembali ke aplikasi saya pada bagian atas.

      Kita sudah bisa memulai mengembangkan aplikasi Flash yang kita inginkan.



3. 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.

   

   Buka file Main.as yang ada di folder src pada panel Project.

   

   Ketikkan script berikut untuk menggantikan semua script yang ada pada file Main.as tersebut.

   package
   {
   import com.facebook.Facebook;
   import com.facebook.events.FacebookEvent;
   import com.facebook.net.FacebookCall;
   import com.facebook.commands.users.GetInfo;
   import com.facebook.utils.FacebookSessionUtil;
   import com.facebook.data.FacebookLocation;
   import com.facebook.data.users.FacebookUser;
   import com.facebook.data.users.GetInfoData;
   import com.facebook.data.users.FacebookUserCollection;
   import com.facebook.data.users.StatusData;
   import flash.display.SimpleButton;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.events.MouseEvent;
   import flash.text.TextField;</li>
   </ol>
   public class Main extends Sprite
   {
   public const API_KEY:String = "";
   public const SECRET_KEY:String = "";
   public var fbook:Facebook;
   public var session:FacebookSessionUtil;
   public var flashvars:Object;
   
   public var userInfoTxt:TextField;
   public var loginTxt:TextField
   
   public function Main():void
   {
   initInterface();
   initFacebook();
   }
   
   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 = "Please click 'Connect' button below after Allow the application.";
   
   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;
   }
   
   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();
   }
   }
   
   public function doneValidating(event:MouseEvent):void
   {
   session.validateLogin();
   }
   
   public function onConnect(e:FacebookEvent):void
   {
   if(!e.success)
   {
   session.login();
   return ;
   }
   
   loginTxt.visible = false;
   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);
   }
   
   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;
   }
   }
   }
   }
   

   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/Kode API dan Secret Key/Rahasia 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 = "Please click 'Connect' button below after Allow the application.";
   
   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/Sunting Pengaturan.

      

      Pilih sub menu Canvas/Kanvas, isi Canvas Page URL dengan alamat yang kamu inginkan, lalu isi Canvas Callback URL dengan alamat lokasi file SWF yang telah kamu hosting sebelumnya. Pastikan juga Metode Render yang terpilih adalah IFrame, opsi lainnya bisa dibiarkan default. Tekan tombol Simpan Perubahan.

      

   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.

   Hasilnya:

   

   Demo game sederhana, judulnya kurang lebih ‘Do you know your friend’s FULL name?’:

   

   File proyek:

   • BeginningFacebookAPI
   • Demo game simple Facebook

   Selain Facebook AS3 API, ada beberapa metode lain yang bisa dipakai seperti komponen minimalis FacebookBridge (http://components.zerofractal.com/FacebookBridge/) atau lewat perantara Javascript+FBML dengan FBJS Bridge (http://wiki.developers.facebook.com/index.php/Fb:fbjs_bridge). Saya sendiri gak terlalu suka Facebook AS3 API karena dokumentasinya minim banget JSebagai tambahan, saya sarankan untuk membuat dua akun Facebook agar kita bisa berganti peran dengan cepat antara pengguna/pengembang, dan menemukan berbagai bug/trouble yang mungkin terjadi.

   Facebook sebagai platform gaming memang lumayan menarik untuk di-explore lebih lanjut. Sudah ada beberapa kisah sukses game-game online di Facebook yang sebagian diantaranya game Flash (seperti Who’s got the biggest brain, FarmTown, BarnBuddy, dll).

   Mungkin ada teman-teman yang tertarik untuk mencoba mengembangkan? Atau mungkin malah sudah pernah membuat game komunitas di Facebook? Sharing-sharing juga dong