building facebook application with flex sung wu aaron tong 2008/1/23
TRANSCRIPT
Building Facebook Building Facebook Application with FlexApplication with Flex
Sung WuSung WuAaron TongAaron Tong
2008/1/232008/1/23
AgendaAgenda
High-level view of building Facebook application High-level view of building Facebook application using Flex.using Flex.
Advantage & limitationAdvantage & limitation How to create a simple Facebook app in FlexHow to create a simple Facebook app in Flex
Introduction to Introduction to fbasfbas Web sessionWeb session Desktop sessionDesktop session Canvas, profile box, and tabCanvas, profile box, and tab
Q&AQ&A
Architecture: Traditional AppsArchitecture: Traditional Apps
FBserver
Broswer
Yourserver
1) Go to canvas
6) Return page
2) Send request & session_key
4) Response with page content
3) Call API
Architecture: Flex AppsArchitecture: Flex Apps
FBserver
Broswer
1) Go to canvas 2) pass session key & session secret
Flex swf
3) Call API
Why Using Flex for Facebook AppWhy Using Flex for Facebook App
Develop in desktop mode before deploy. Develop in desktop mode before deploy. Reduce turn-around timeReduce turn-around time
Reduce server loadReduce server load integrated development environment.integrated development environment.
Integrated Debugger: better than Firebug. Integrated Debugger: better than Firebug. Easily built rich interfaceEasily built rich interface
Built-in UI components and effects.Built-in UI components and effects.
LimitationLimitation
Cannot send Request/InviteCannot send Request/Invite Need to popup new browser window for Need to popup new browser window for
sending invitation sending invitation Flash is not auto-played on profile and tab Flash is not auto-played on profile and tab
page. (user has to click on it) page. (user has to click on it) OpenSocial containers provide REST API OpenSocial containers provide REST API
only after v0.8only after v0.8 Loading time may be longerLoading time may be longer
Actionscript API for FacebookActionscript API for Facebook
Facebook official API: PHPFacebook official API: PHP Other languages have to use 3Other languages have to use 3rdrd-party API-party API Facebook API is REST-styled http APIFacebook API is REST-styled http API Several 3Several 3rdrd-party open-source Flex API -party open-source Flex API
existsexists
facebook-actionscript-apifacebook-actionscript-api
http://code.google.com/p/facebook-actionshttp://code.google.com/p/facebook-actionscript-api/cript-api/
Created by Jason Christ Created by Jason Christ (http://pbking.com/blog/)(http://pbking.com/blog/)
3 types of usage modes3 types of usage modes
fbasfbas http://http://code.google.com/p/fbascode.google.com/p/fbas// Works on both Facebook & BeboWorks on both Facebook & Bebo Extension to Jason Christ’s facebook-Extension to Jason Christ’s facebook-
actionscript-api to provide support for new actionscript-api to provide support for new methods eg. methods eg. feed.xxxxxxfeed.xxxxxx new feed API new feed API datastore APIdatastore API
Compatible to facebook-actionscript-apiCompatible to facebook-actionscript-api Code written for facebook-actionscript-api should be Code written for facebook-actionscript-api should be
able to port to fbas transparently.able to port to fbas transparently.
facebook-actionscript-api & fbasfacebook-actionscript-api & fbas
Two are compatibleTwo are compatible fbas is just extension to facebook-fbas is just extension to facebook-
actionscript-api with more API methods actionscript-api with more API methods and a few fixes. Same usage.and a few fixes. Same usage.
fbas can support Bebo as well as fbas can support Bebo as well as FacebookFacebook
Desktop Session & Widget SessionDesktop Session & Widget Session
Facebook-actionscript-api has desktop Facebook-actionscript-api has desktop mode and widget modemode and widget mode Desktop session – desktop appDesktop session – desktop app Widget session – web appWidget session – web app
Desktop sessionDesktop session AIR apps or developmentAIR apps or development
Widget sessionWidget session DeploymentDeployment
Example1: Desktop SessionExample1: Desktop Session
fBook = new Facebook(); fBook.addEventListener(Event.COMPLETE, onFacebookReady); //start up a desktop instancefBook.startDesktopSession(“api_key", “secret_key");
Example: Desktop Session for Example: Desktop Session for Bebo (fbas only)Bebo (fbas only)
fBook = new Facebook(); fBook.addEventListener(Event.COMPLETE, onFacebookReady); //start up a desktop instancefBook.inBebo();fBook.startDesktopSession(“api_key", “secret_key");
Example2: Widget SessionExample2: Widget Session
<fb:swf <fb:swf swfsrc=“http://new.brandedhome.com/exampswfsrc=“http://new.brandedhome.com/example.swf’ height=”100%” width=”100%”>le.swf’ height=”100%” width=”100%”>
fBook = new Facebook(); fBook.addEventListener(Event.COMPLETE, onFacebookReady); //start up a desktop instancevar flashVars:Object = Application.application.parameters;fBook.startWidgetSession(falshVars, “api_key", “secret_key");
Example: Widget Session for Bebo Example: Widget Session for Bebo (fbas only)(fbas only)
Exactly same thing. No change. Exactly same thing. No change. fbas startWidgetSession() will fbas startWidgetSession() will
transparently handles ittransparently handles it fbas startWidgetSession() will look at fbas startWidgetSession() will look at
fb_sig_network parameter in <fb:swf>fb_sig_network parameter in <fb:swf>• fb_sig_network=Facebookfb_sig_network=Facebook• fb_sig_network=Bebofb_sig_network=Bebo
Transparent to API userTransparent to API user
Example: set profile FBMLExample: set profile FBML
// do the start desktop session or start widget session as shown // do the start desktop session or start widget session as shown beforebefore
fbook.profile.setFBML(“your fbml fbook.profile.setFBML(“your fbml content”, userid);content”, userid);
Example: get friends idExample: get friends id….. fbook.friends.getFriends(onGetFriends);…..//////////////////////////////////////////////////////////////////////////////////////////////
private function onGetFriends(e:Event):void { var d:GetFriendsDelegate = e.target as GetFriendsDelegate; var users:String = ""; if (d.success) { for each (var user:FacebookUser in d.friends) { users += user.uid + ","; } } Alert.show("friends=\n" + users);}
ResourcesResources
Fbas: Fbas: http://code.google.com/p/fbashttp://code.google.com/p/fbas Facebook-actionscript-api: Facebook-actionscript-api:
http://code.google.com/p/facebook-actionshttp://code.google.com/p/facebook-actionscript-apicript-api
EndEnd
Sung WuSung Wu [email protected]@gmail.com Would like to meet other Would like to meet other
Facebook/OpenSocial/Flex developersFacebook/OpenSocial/Flex developers
Disclaimer:Disclaimer: Facebook trademark belong to FacebookFacebook trademark belong to Facebook Flex trademark of AdobeFlex trademark of Adobe
Q&AQ&A
Back up slidesBack up slides
Facebook-actionscript-apiFacebook-actionscript-apiSetupSetup
Dependency: corelib.swc, flexunit.swcDependency: corelib.swc, flexunit.swc Drop-in swc file or Drop-in swc file or Create a project with the source code.Create a project with the source code.
Known Issues with Facebook-Known Issues with Facebook-actionscript-apiactionscript-api
V0.9.1V0.9.1 V0.9.1 is the latest released version as of V0.9.1 is the latest released version as of
2008/4/23.2008/4/23. The following issues appears in v0.9.1, but The following issues appears in v0.9.1, but
is fixed already in the checked-in code, so is fixed already in the checked-in code, so it will be available on next versionit will be available on next version
Friends.getAppUsers() does not workFriends.getAppUsers() does not work Profile.getFBML() will throw exception if Profile.getFBML() will throw exception if
there is no content in profileFBMLthere is no content in profileFBML