Nicko Prasetio

Gunadarma University

34110962

Sabtu, 21 Mei 2011

"CARA MEMBUAT APLIKASI FLASH PADA FACEBOOK BAGI PEMULA"

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. Langsung saja kita mulai…

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.

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



4. 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.
Code:
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;
}
}
}
}













Tidak ada komentar:

Posting Komentar