2010-03-29

寫了個方便處理 FacebookSession 的類別

承上一篇「Flash Builder 4 寫 Facebook Apps」,有自行測試者應該都會覺得在開發 Facebook appa上,除錯顯得很麻煩。必須先把 AppKey 和 AppSecret 填入程式中,測試完,拿掉 AppKey 和 AppSecret,編譯再上傳測試,中間會來來回回很多次。時間應該浪費在美好的事物上,玩 Games 應該比寫 Codes 美好 :P。
可以將 AppKey 和 AppSecret 放到一個檔案裡,再載入。URL-encoded 的文字檔是個選擇,為了讓本篇看起來有深度點(誤),在此採用SWF。若要更有深度可以用ZIP、DOC...,也可以修改副檔名偽裝一下。
若可以載入 Key 檔,表示是在開發過程,必須連一下 Facebook 取得 Session。若無法載入 Key 檔,表示己經發佈了。

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」就可以看到原始檔,並下載專案檔了。

新作:FLASH+PHP資料庫網站開發設計

個人新作「FLASH+PHP資料庫網站開發設計」出版了,感謝舊雨新知的支持!

個人新作「FLASH+PHP資料庫網站開發設計」出版
試讀「第6章」18頁

出版公司書籍介紹
博客來
金石堂
建議:老話一句,一本書是無法滿足所有人需求的,請先到實體書店翻閱,符合需求再購買!

2010-03-13

AMFPHP 1.9

AMFPHP 終於在 2010/02/02 釋出 1.9 正式版, 原本以為開發主角換人後, 專案應該會掛掉, 顯然 AMFPHP 還活著 :P。
1.9 正式版的 gateway.php 中, 明顯不同在 PRODUCTION_SERVER 預設為 true, beta 版預設為 false。
PRODUCTION_SERVER 設為 true 時, 在 Flash IDE 測試, 會發生 NetConnection.Call.BadVersion 的錯誤, 但是發佈後卻又正常。應該是 Debug 版 Flash player 造成的問題。
所以使用 Flash IDE 搭 AMFPHP 時, PRODUCTION_SERVER 請設為 false。

FB 留言