2012年3月26日 星期一

[教學] Facebook 應用 (基礎編)

Facebook 提供的API, 對於需要用戶系統(Membership System) 的遊戲來說, 帶來一個簡單方案. 開發者不需建立大量資料儲存, 亦不用提供介面處理登入, 申請和忘記密碼等煩鎖事情.

Adobe 為我們提供一個開發套件 (SDK), 在Action Script 層面與Facebook 進行連結. 不少Facebook 遊戲使用這個SDK (例如: FIFA Superstars).

現在為大家介紹一些常用功能, 並於Mobile App 中應用: (可於iOS 及Android 系統正常運作)


登入Facebook:
登入功能
登入Facebook (使用StageWebView)
  1. 在登入Facebook 前, 首要起始FacebookMobile 這個類別.
    FacebookMobile.init(APP_ID, facebookInitHandler);
    
  2. 當用戶按下"Login" 按鈕, 產生一個StageWebView, 作為Facebook 登入版畫之用.
    var myWebView:StageWebView = new StageWebView();
    myWebView.stage = this.stage;
    myWebView.viewPort=new Rectangle(0,0,stage.stageWidth,stage.stageHeight)
    
  3. 然後呼叫FacebookMobile.login() 登入功能.
    FacebookMobile.login(loginHandler,this.stage,PERMISSION_ARR,myWebView);
    
  4. 回傳登入是否成功.
    private function loginHandler(success:Object, fail:Object):void{
      if(success!=null){
        // <----- success
      }else{
        // <----- fail
      }
    }
    


載入用戶資料:
用戶資料
  1. 登入Facebook 後, 我們可以呼叫FacebookMobile.getSession(), 這個FacebookSession 物件包含一些用戶基本資料.
    var session:FacebookSession = FacebookMobile.getSession();
    if(session!=null && session.user!=null){
      // <----- 用戶名稱
      nameTxt.text = session.user.name;
      // <----- 用戶性別
      genderTxt.text = session.user.gender;
      // <----- 用戶時區
      timezoneTxt.text = session.user.timezone;
      // <----- 用戶的Facebook 連結
      homeBtn.enabled = session.user.link!=null;
    }
    
  2. 載入用戶照片, 我們使用FacebookMobile.getImageUrl().
      // <----- 用戶照片
      userImg.source = FacebookMobile.getImageUrl(session.uid);
    


載入用戶的朋友名單 (Friends List):
朋友名單 (Friends List)
  1. 使用FacebookMobile.api() 來獲取朋友名單中的用戶號碼.
    FacebookMobile.api('/me/friends', friendsHandler);
    
  2. 把回傳的用戶號碼, 結合成FQL, 然後向FacebookMobile.fqlQuery() 查詢用戶的資訊.
    (name 和username)
    private function friendsHandler(response:Object, fail:Object):void{
      // <----- combine friend ids
      var friends:Array = response as Array;
      var friendsIds:Array = new Array();
      var l:uint=friends.length;
      for (var i:int=0; i>friends.length; i++)
        friendsIds.push(friends[i].id);
      
      // <----- get friend info.
      var fql:String = "SELECT uid, name, username FROM user WHERE uid IN (" + friendsIds.join(",") + ")";
      FacebookMobile.fqlQuery(fql, fqlHandler);
    }
    
  3. 把回傳的所有用戶名稱和照片, 利用Image 及Label 物件顯示至介面.
    private function fqlHandler(response:Object, fail:Object):void{
      if(fail){
        // <----- set UI
        loadingLab.text = "Fail.";
      }else{
        var friendDetails:Array = response as Array;
        var str:String = "";
        for (var i:int=0; i<friendDetails.length; i++) {
          var hGroup:HGroup = new HGroup();
          var pic:Image = new Image();
          var name:Label = new Label();
          
          // <----- set friend property
          pic.source = FacebookMobile.getImageUrl(friendDetails[i].uid);
          name.text = friendDetails[i].name;
          
          // <----- add to UI
          hGroup.addElement(pic);
          hGroup.addElement(name);
          vGroup.addElement(hGroup);
        }
        
        // <----- set UI
        loadingLab.text = "Done - "+friendDetails.length+" friend(s)";
      }
    }
    


發佈訊息至Facebook 的Wall Messages:

發佈訊息功能
訊息於Wall Messages 中顯示

  1. 發佈簡單訊息:
    FacebookMobile.postData("/me/feed/", postHandler, {"message":"你的文字"});
    


拍攝照片和上載至Facebook 的相簿 (Album):

上載照片功能
照片於相簿(Album) 中顯示

  1. 啟動照相機, 取得一個BitmapData. (請參考Adobe AIR 啟用預設拍攝模式)
  2. 當用戶按"Submit"按鈕時, 把BitmapData 調整大小, 然後和文字一起傳送至Facebook 相簿.
    // <----- define bitmap
    var MAX_IMAGE_SIZE:int = 300;
    var rate:Number = _bitmapData.width>_bitmapData.height?_bitmapData.width/MAX_IMAGE_SIZE:_bitmapData.height/MAX_IMAGE_SIZE;
    var wdith:int = Math.floor(_bitmapData.width/rate);
    var height:int = Math.floor(_bitmapData.height/rate);
    var bitmapData:BitmapData = new BitmapData(wdith, height);
    var bitmap:Bitmap = new Bitmap(bitmapData);
    var matrix:Matrix = new Matrix();
    matrix.scale(1/rate, 1/rate);
    bitmapData.draw(_bitmapData, matrix);
    
    // <----- post a news feed
    FacebookMobile.postData("me/photos", postHandler, {"image":bitmap,"message":msgTxt.text, "fileName":"IMG_"+(new Date()).valueOf()});
    


大家可以 [下載] 範例試試看.

參考資料: http://www.adobe.com/devnet/facebook/samples.html
API 參考: http://facebook-actionscript-api.googlecode.com/svn/release/current/docs/index.html

注意事項: 由於使用Facebook API, 需要有一個APP ID, 所以大家請到Facebook 申請.
申請位置
複製你的APP ID

1 則留言:

匿名 提到...

不好意思想問下,在貼到塗鴉牆這一段,如果希望能不要直接post,而是在post前會先跳出一個詢問是否分享的視窗,該如何解決這個問題呢?謝謝。