Facebook App With Flex

Facebook App With Flex - Transcript

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

Agenda Agenda


High level view of building Facebook application High level using Flex using Advantage limitation How to create a simple Facebook app in Flex


Introduction to fbas Introduction fbas Web session Desktop session Canvas profile box and tab



Q A

Architecture Traditional Apps Architecture
3 Call API FB server 2 Send request session key 4 Response with page content Your server

1 Go to canvas 6 Return page

Broswer

Architecture Flex Apps Architecture
FB server 3 Call API

1 Go to canvas

2 pass session key session secret

Broswer

Flex swf

Why Using Flex for Facebook App Why
Develop in desktop mode before deploy Develop

Reduce turn around time Reduce Reduce server load integrated development environment


Integrated Debugger better than Firebug Integrated Built in UI components and effects

Easily built rich interface


Limitation Limitation
Cannot send Request Invite Need to popup new browser window for Need

sending invitation Flash is not auto played on profile and tab Flash page user has to click on it OpenSocial containers provide REST API OpenSocial only after v0 8 only Loading time may be longer

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

exists exists

facebook actionscript api facebook actionscript api
Created by Jason Christ Created

http code google com p facebook actionscrip

http pbking com blog http pbking com blog 3 types of usage modes

fbas fbas


http code google com p fbas Works on both Facebook Bebo Extension to Jason Christ s facebookactionscript api to provide support for new actionscript api methods eg


feed xxxxxx new feed API new datastore API Code written for facebook actionscript api should be Code able to port to fbas transparently able



Compatible to facebook actionscript api


facebook actionscript api fbas facebook actionscript api
Two are compatible fbas is just extension to facebook

actionscript api with more API methods actionscript api and a few fixes Same usage and fbas can support Bebo as well as fbas Facebook Facebook

Desktop Session Widget Session Desktop
Facebook actionscript api has desktop Facebook actionscript api

mode and widget mode mode


Desktop session desktop app Widget session web app AIR apps or development Deployment

Desktop session


Widget session


Example1 Desktop Session Example1
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 Bebo
fBook new Facebook fBook addEventListener Event COMPLETE onFacebookReady start up a desktop instance

fBook inBebo
fBook startDesktopSession api key secret key

Example2 Widget Session Example2
fb swf fb swf swfsrc http new brandedhome com examp swfsrc http new brandedhome com examp le swf height 100 width 100

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 fbas
Exactly same thing Exactly

No change fbas startWidgetSession will fbas transparently handles it transparently


fbas startWidgetSession will look at fbas fb sig network parameter in fb swf fb sig network
fb sig network Facebook fb sig network Bebo



Transparent to API user

Example set profile FBML Example
do the start desktop session or start widget session as shown before before

fbook profile setFBML your fbml fbook profile setFBML your content userid content

Example get friends id Example
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 Resources
Fbas http code google com p fbas Fbas http code google com p fbas Facebook actionscript api Facebook actionscript api

http code google com p facebook actionscrip http code google com p facebook actionscrip

End End
Sung Wu sjcity gmail com Would like to meet other Would

Facebook OpenSocial Flex developers Facebook OpenSocial Flex

Disclaimer Facebook trademark belong to Facebook Flex trademark of Adobe

Q A Q A

Back up slides Back

Facebook actionscript api Facebook actionscript api Setup
Dependency corelib swc flexunit swc Drop in swc file Drop in

or Create a project with the source code

V0 9 1 is the latest released version as of V0 9 1

Known Issues with FacebookKnown actionscript api V0 9 1

2008 4 23 2008 4 23 The following issues appears in v0 9 1 but The is fixed already in the checked in code so it will be available on next version it Friends getAppUsers does not work Profile getFBML will throw exception if Profile getFBML there is no content in profileFBML there