2010-03-26

Flash Builder 4 寫 Facebook Apps

Adobe Developer Center 上 Jeanette Stallons 的兩篇 Quick Start 是必看的文章:Build and test locallyDeploy on Facebook。熱騰騰的 Flash Builder 4 當然要好好利用一下 :D

Step 1: 先要有網站空間,使用免費的也行。設定一個空目錄,如:「http://www.riarock.net/fbapps/fbastutorial/」給 Facebook App 使用。

Step 2: 登入 Facebook 並在「http://www.facebook.com/developers/」建立新的應用程式。其中必填的項目為:
基本資料→應用程式名稱 :: 就是應用程式名稱,不能用 Face、FB 等混淆視聽的字眼,所以在此用了 Footbook。
畫布→畫布頁面網址 :: 如「http://apps.facebook.com/fbastutorial/」。
畫布→Canvas Callback URL :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
畫布→呈現方法 :: 設定使用「Iframe」。
聯外通→聯外通網址 :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
進階→沙盒模式 :: 測試時先設定為「啟用」。

Step 3: 安裝好 Flash Builder 4 之後,開一個新專案,命名為 fbastutorial。將 Facebook_library_v3.4_flex.swc 放到專案的 libs 目錄。 預設的 Application 為 fbastutorial.mxml,不寫程式,直接執行。

Step 4: 將產生的 bin-debug/fbastutorial.html 複製到 src/index.html。並在指定的位置增加下面標起來的程式碼,用來取得 Facebook 給的 GET 參數。
var flashvars = {}; // ← 找到這一行,增加下面的程式碼
// *** START 增加的部份 ***
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ) {
var strQueryString = strHref.substr(strHref.indexOf("?")+1);
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ) {
var aParam = aQueryString[iParam].split("=");
flashvars[aParam[0]] = aParam[1];
}
}
// *** END 增加的部份 ***

Step 5: fbastutorial.mxml 的內容如下。
<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="840" minHeight="500"
applicationComplete="init()"
viewSourceURL="srcview/index.html">
<!-- *** 注意:這裡是用 applicationComplete,不是用 creationComplete *** -->

<fx:Script>
<![CDATA[
import com.facebook.Facebook;
import com.facebook.commands.friends.GetFriends;
import com.facebook.commands.users.GetInfo;
import com.facebook.data.friends.FriendsCollection;
import com.facebook.data.friends.GetFriendsData;
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.FacebookUserCollection;
import com.facebook.data.users.GetInfoData;
import com.facebook.events.FacebookEvent;
import com.facebook.net.FacebookCall;
import com.facebook.utils.FacebookSessionUtil;

import mx.controls.Image;

private var session:FacebookSessionUtil
private var facebook:Facebook;
private var fbUser:FacebookUser;
private var dictionary:Dictionary;

private function init():void {
// *** 一開始測試時可以先填入 API Key 和 Application Secret
//session = new FacebookSessionUtil("<API Key>", "<Application Secret>", loaderInfo);
session = new FacebookSessionUtil(loaderInfo.parameters.fb_sig_api_key, null, loaderInfo);
// 取得 Facebook Session,有 Session 才有權使用 Facebook API
facebook = session.facebook;
// 取得 Facebook Session 並連結之後,呼叫 onSessionConnect 方法
session.addEventListener(FacebookEvent.CONNECT, onSessionConnect);

if(loaderInfo.parameters.fb_sig_added == true){
// 有登入時,呼叫核對 Session,OK的話發出 CONNECT 事件
session.verifySession();
} else if(loaderInfo.parameters.fb_sig_added == false){
// 沒登入時
navigateToURL(new URLRequest("http://www.facebook.com/login.php?api_key="+loaderInfo.parameters.fb_sig_api_key),"_top");
} else {
// 沒取得資料時
session.login();
btnLogin.visible = true;
}
}

private function onSessionConnect(event:FacebookEvent):void {
// 呼叫取得朋友資料
var call:FacebookCall = facebook.post( new GetFriends() );
// 取得朋友資料之後,執行 onGetFriendsComplete
call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsComplete);
}

private function onGetFriendsComplete(event:FacebookEvent):void {
// 呼叫時用 GetFriends,取得時用 GetFriendsData
var friendsData:GetFriendsData = event.data as GetFriendsData;
var friends:FacebookUserCollection = friendsData.friends;
// 將朋友的 ID 放入 uids 陣列
var uids:Array = [];
for(var i:int=0; i< friends.length; i++) {
var f:FacebookUser = friends.getItemAt(i) as FacebookUser;
uids.push(f.uid);
}
// GetFriends 只能取得朋友的 uid,必須呼叫 GetInfo 才能取得朋友資料
var call:FacebookCall = facebook.post(
// 設定要取得的資料項
new GetInfo(uids, ["name", "pic_square"])
);
call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsAttr);
}

private function onGetFriendsAttr(event:FacebookEvent):void {
// 呼叫時用 GetInfo,取得時用 GetInfoData
var getInfoData:GetInfoData = event.data as GetInfoData;
var userCollection:FacebookUserCollection = getInfoData.userCollection;
dictionary = new Dictionary();
// 一一取出朋友資料
for(var i:int=0; i<userCollection.length; i++) {
var usr:FacebookUser = userCollection.getItemAt(i) as FacebookUser;
var img:Image = new Image();
// 沒有大頭貼時用預設的圖
if(! usr.pic_square) {
img.source = 'http://static.ak.fbcdn.net/pics/q_silhouette.gif';
} else {
img.source = usr.pic_square;
}
img.toolTip = usr.name;
img.buttonMode = true;
// 使用字典以方便用物件取得字串
dictionary[img] = usr.uid;
img.addEventListener(MouseEvent.CLICK,onImageClick);
tilesPic.addElement( img );
}
}
private function onImageClick(event:MouseEvent):void {
var img:Image = event.currentTarget as Image;
navigateToURL(new URLRequest("http://www.facebook.com/profile.php?id="+dictionary[img]),"_blank");
}
]]>
</fx:Script>

<s:Button x="10" y="10" label="點按登入 Facebook" id="btnLogin"
visible="false" click="session.validateLogin()"/>
<s:Scroller x="30" y="30" width="800" height="450">
<s:TileGroup width="100%" height="100%" clipAndEnableScrolling="true" id="tilesPic">
</s:TileGroup>
</s:Scroller>

</s:Application>

Step 6: 發佈,上傳至「http://www.riarock.net/fbapps/fbastutorial/」測試。

Step 7: 範例在「http://apps.facebook.com/fbastutorial/」,於 swf 上按右鍵選「View Source」就可以看到原始檔,並下載專案檔了。

5 則留言:

qop 提到...

Step 2 有個設定漏掉了
畫布→Post-Authorize Redirect URL :: http://apps.facebook.com/fbastutorial/
沒設定這個, 使用者在第一次使用時會轉錯網址。

鐵人 提到...

感謝分享

Shing 提到...

感謝博主,這是很好的教學

順德 提到...

版主你好!!我有照您的原始方式來開發與設定facebook app但為何仍然無法判斷已登入狀態下的秀出朋友的圖片

qop 提到...

後來有新的作法了, 請參考這個 http://code.google.com/p/facebook-actionscript-api/

FB 留言