Building Facebook Application with Flex Sung Wu Aaron Tong 2008/1/23

Agenda  High-level view of building Facebook application using Flex.  Advantage & limitation  How to create a simple Facebook app in Flex Introduction to fbas Introduction to fbas Web session Web session Desktop session Desktop session Canvas, profile box, and tab Canvas, profile box, and tab  Q&A

Architecture: Traditional Apps FB server Broswer Your server 1)Go to canvas 6) Return page 2) Send request & session_key 4) Response with page content 3) Call API

Architecture: Flex Apps FB server Broswer 1)Go to canvas2) pass session key & session secret Flex swf 3) Call API

Why Using Flex for Facebook App  Develop in desktop mode before deploy. Reduce turn-around time  Reduce server load  integrated development environment. Integrated Debugger: better than Firebug. Integrated Debugger: better than Firebug.  Easily built rich interface Built-in UI components and effects. Built-in UI components and effects.

Limitation  Cannot send Request/Invite  Need to popup new browser window for sending invitation  Flash is not auto-played on profile and tab page. (user has to click on it)  OpenSocial containers provide REST API only after v0.8  Loading time may be longer

Actionscript API for Facebook  Facebook official API: PHP  Other languages have to use 3 rd -party API  Facebook API is REST-styled http API  Several 3 rd -party open-source Flex API exists

facebook-actionscript-api  actionscript-api/ actionscript-api/ actionscript-api/  Created by Jason Christ (  3 types of usage modes

fbas   Works on both Facebook & Bebo  Extension to Jason Christ’s facebook- actionscript-api to provide support for new methods eg. feed.xxxxxx feed.xxxxxx new feed API new feed API datastore API datastore API  Compatible to facebook-actionscript-api Code written for facebook-actionscript-api should be able to port to fbas transparently. Code written for facebook-actionscript-api should be able to port to fbas transparently.

facebook-actionscript-api & fbas  Two are compatible  fbas is just extension to facebook- actionscript-api with more API methods and a few fixes. Same usage.  fbas can support Bebo as well as Facebook

Desktop Session & Widget Session  Facebook-actionscript-api has desktop mode and widget mode Desktop session – desktop app Desktop session – desktop app Widget session – web app Widget session – web app  Desktop session AIR apps or development AIR apps or development  Widget session Deployment Deployment

Example1: Desktop Session fBook = new Facebook(); fBook.addEventListener(Event.COMPLETE, onFacebookReady); //start up a desktop instance fBook.startDesktopSession(“api_key", “secret_key");

Example: Desktop Session for Bebo (fbas only) fBook = new Facebook(); fBook.addEventListener(Event.COMPLETE, onFacebookReady); //start up a desktop instance fBook.inBebo(); fBook.startDesktopSession(“api_key", “secret_key");

Example2: Widget Session fBook = new Facebook(); fBook.addEventListener(Event.COMPLETE, onFacebookReady); //start up a desktop instance var flashVars:Object = Application.application.parameters; fBook.startWidgetSession(falshVars, “api_key", “secret_key");

Example: Widget Session for Bebo (fbas only)  Exactly same thing. No change.  fbas startWidgetSession() will transparently handles it fbas startWidgetSession() will look at fb_sig_network parameter in fbas startWidgetSession() will look at fb_sig_network parameter in fb_sig_network=Facebookfb_sig_network=Facebook fb_sig_network=Bebofb_sig_network=Bebo Transparent to API user Transparent to API user

Example: set profile FBML // do the start desktop session or start widget session as shown before fbook.profile.setFBML(“your fbml content”, userid);

Example: 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); }

Resources  Fbas:  Facebook-actionscript-api: actionscript-api actionscript-api actionscript-api

End  Sung Wu   Would like to meet other Facebook/OpenSocial/Flex developers  Disclaimer:  Facebook trademark belong to Facebook  Flex trademark of Adobe

Q&A

Back up slides

Facebook-actionscript-api Setup  Dependency: corelib.swc, flexunit.swc  Drop-in swc file or  Create a project with the source code.

Known Issues with Facebook- actionscript-api V0.9.1  V0.9.1 is the latest released version as of 2008/4/23.  The following issues appears in v0.9.1, but is fixed already in the checked-in code, so it will be available on next version  Friends.getAppUsers() does not work  Profile.getFBML() will throw exception if there is no content in profileFBML