2009年8月9日 星期日

用Flash開發Facebook App.

又兩個禮拜沒寫文章了...10篇果然不是那麼好達成的啊~~最近除了趕案子,還迷上Facebook的一些農場、餐廳等遊戲,虛耗了一些時間。然而好景不常,由於企劃被客戶追殺,然後企劃追殺我,於是趁颱風天趕緊來研究一下如何在Facebook上開發App.。這真是個人吃人的社會啊~~~



首先介紹,Facebook Developers,Facebook開放出來讓我們開發App.的平台,沒開這個一切免談啊~~大概看一下,就點一下綠色的那個"Start Now"下去,然後好像要允許存取吧,接著來到Started頁面,這頁主要教你怎樣在Facebook開一個新的App.,右手邊有個PHP Client Libraries可以下載,裡面當然是給PHP用的Libraries。大概看過後可以點中間的"Go to the Facebook Developer App",就可以到你的開發者頁面了。允許存取好像在這一步?我有點忘了...好,總之到了這一頁,右上有個"+Set Up New Application",點下去就可以開一個新的App.啦。到這裡要先打住,不過這頁面先留著,等等還要回來用到它。

目前有三個Libraries可以用來開發Facebook App.:PHP、Javascript、還有就是AS3啦。這篇要介紹的重點當然是AS3,不過另外兩個也很重要,如果開發純html的App.就要用Javascript跟PHP啦,即使是AS3開發,可能還是會遇到需要server端跟Facebook溝通的情形,所以PHP Libraries可能也少不了。

AS3的Libraries叫做ActionScript 3.0 Client Library for Facebook Platform API。應該是Adobe今年三月open出來的東西。檔案下載在Google Code線上文件在這。在開始使用之前,先看看上面有關architecture的文章。第一頁講的是用這個Libraries可以開發三種類型的App.:在Facebook上的、外部網站的、以及桌面的App.。第一種Facebook上的App.,就是會套上Facebook的chrome,也就是上下的外框,然後網址是"http://apps.facebook.com/appname/",appname就是每個App.特有的名稱。這頁叫作畫布canvas,等等設定時會再提到。中間則是用iFrame或FBML顯示App.的內容,而App.的內容就是要自己找server放啦!也就是hosting在自己家,資料庫等等也都是用自己的,所以在開發上其實跟一般網站沒多大差別。這種好處是可以在Facebook網站上就可以連結到,也可以有加入書籤等等功能。寬度760。第二種是外部網站,就是用自己的URL,需要Facebook的功能或資料時再用Facebook APIFacebook Connect來跟Facebook溝通。用Facebook API登入的話必須要另開一個登入視窗,才能再回到原本的App.網站,用Facebook Connect比較能達到seamless的登入。第三個桌面的應用,當然是用AIR啦!講到這,如果各大農場可以開發個AIR,讓各位農民可以在桌面上得知農作物的生長情形,提醒收成時間等,應該會大受歡迎吧!不過這要開發的廠商才能做,因為前面講過,遊戲的資料庫在他們家啊~看完這篇可別叫我做一個出來。接下來幾頁則是介紹有無Flash,iFrame或FBML,以及desktop的架構。裡面圖文並茂,就請有興趣的自己看吧,這很重要喔!!懂這些架構等於就會一半了。註:FBML是一種延伸的html標籤語法,標籤裡面都是fb:開頭,不在這篇要說的範圍裡,所以有興趣的請先自行研究吧。

好,看了這麼多文件之後,如果你還在的話,來實做一個App.吧。這裡我們要做一個在Facebook上面,有Flash,使用iFrame的App.,前面文章skip過的人可以回去找一下這類型的架構。看了這麼多文字介紹,來看個影片教學吧。啥?老外講的話有聽沒懂?好吧,簡單再介紹一下,前半段就是介紹我們一開始在Facebook Developers開一個新的App.的步驟。頁面應該還保留著吧?"基本資料"頁籤裡面有API金鑰跟秘密兩個又臭又長的密碼,這兩個資料在連線的時候要用到。"畫布"頁籤裡面的"畫布頁面網址"有留一個欄位要填,就是前面有介紹的appname,網址後面那個目錄名稱,自己取,英文小寫跟破折號跟底線,不能有數字喔。取完整串就是你的App.的網址。接著有個"Canvas Callback URL"就是我們實際放App.的地方,所以放個html跟swf到自家的server上,然後把網址貼到這裡面吧。最後,"進階"頁籤裡面有個"Application Type",一開始開發Flash時可以先選"Desktop",方便測試,要上線測試時再回來改成"網站"就好了。影片後半段講程式的部分,我想看程式應該看的懂了,只不過他是用Flex開發,用Flash的話,基本上就是自己手動作元件,程式只要改顯示資料在自己的元件上就好了,其他Function照打出來就可以了。我照做之後再研究了一下FacebookUser類別,把生日跟性別也抓出來,然後前面講的那些設定好之後,做了一個測試App.出來。顯然這影片介紹的登入方法不夠seamless,還要再找找其他方法。還有就是FacebookUser裡面似乎沒看到email的屬性,這對網路行銷可是很重要的東西啊,還有他的friends屬性會回傳一個Array,不知是不是朋友的列表,我呼叫它似乎找不到這個屬性。總之,細部的應用還要再研究一番,不過看起來應該是可以來開發一些東西了。

檔案下載

4 則留言:

  1. 這樣的架構,聽起來很鬆散而且分散,不過至今沒聽FB出過什麼資安的問題,所以一定有其巧妙之處了。

    回覆刪除
  2. App的Domain是facebook.com比較有安全感,但要套外框,客戶比較不愛;AIR要安裝,也有點門檻。

    回覆刪除
  3. to Mouse:
    完全是靠他的Session跟登入認證吧~~

    to 耶書:
    三個開發方式各有它的用途啦,那篇談architecture的文章有舉例。放Facebook上的當然不用說,外部網站的話,就是你可能只要用到Facebook帳號登入,POST東西等等功能,特別是想保有自己的Domain name等,就會用到。AIR的安裝的確是個門檻,但如果是遊戲紅了,配合推出追加功能,例如我舉的追蹤農作物的功能,我相信一定有一大批農民搶著下載安裝的~~我第一個下載~~

    回覆刪除
  4. 對了耶書,有個同業AS研討會舉辦了幾次了,你們家好像只有第一次有位創意總監來參加,之後就沒了。要不要留一下你的聯絡email,下次應該是八月底,我再轉寄給你啊?

    回覆刪除