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

2. 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

3. 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

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

5. 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.

6. 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

7. 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

8. facebook-actionscript-api  http://code.google.com/p/facebook- actionscript-api/ http://code.google.com/p/facebook- actionscript-api/ http://code.google.com/p/facebook- actionscript-api/  Created by Jason Christ (http://pbking.com/blog/)  3 types of usage modes

9. fbas  http://code.google.com/p/fbas/ http://code.google.com/p/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.

10. 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

11. 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

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

13. 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");

14. 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");

15. 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

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

17. 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); }

18. Resources  Fbas: http://code.google.com/p/fbas http://code.google.com/p/fbas  Facebook-actionscript-api: http://code.google.com/p/facebook- actionscript-api http://code.google.com/p/facebook- actionscript-api http://code.google.com/p/facebook- actionscript-api

19. End  Sung Wu  sjcity@gmail.com sjcity@gmail.com  Would like to meet other Facebook/OpenSocial/Flex developers  Disclaimer:  Facebook trademark belong to Facebook  Flex trademark of Adobe

20. Q&A

21. Back up slides

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

23. 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