Gadgets and Social Applications
Google Confidential and Proprietary 1
Gadgets and Social ApplicationsWith OpenSocial
Vinoaj VijeyakumaarCustomer Solutions EngineerGoogle Southeast Asia
http://friendfeed.com/vinoaj
What
Google Confidential and Proprietary
What
2
Foundation
Gadgets
Applications
3
Gadgets and OpenSocial Applications
4
Websites within websites
Gadgets and OpenSocial Applications
5
http://www.orkut.com/Main#Application.aspx?appId=43931632273
Why
Google Confidential and Proprietary
Why
6
Reach your Audience Directly
Your
SEM SEO
77
Content
How
Google Confidential and Proprietary
How
9
Where do I put it?
Ive built my RIA
Ive wrapped it into a Gadget, an OpenSocial app, Gadget, an OpenSocial app, a widget
now where do I put it?10
Option 1: iGoogle
Established user-base
Sandbox
11
Sandbox supports OpenSocial
Option 2: Gadget Ads
Rich Media Ad Format
Take your content out to where your users are actively engaged
12
Interaction Tracking
Option 3: OpenSocial
13
OpenSocial
Google Confidential and Proprietary
OpenSocial
14
15
OpenSocial Containers
friendster
Large Reach
and more to come!
Popular SEA OpenSocial containers
MalaysiaFriendsterMySpace
ThailandHi5
imeem PhilippinesFriendster
imeem
VietnamYahoo!360
Hi5
MySpaceimeem
SingaporeFriendster
imeem
Orkut
IndonesiaFriendster
imeem
Significant APAC containers
China
Xiaonei
51.com
Tianya
MySpace CN
India
Orkut
19
Getting Started with OpenSocial
Google Confidential and Proprietary
Getting Started with OpenSocial
20
First Stop
OpenSocial.org
Also a social network (surprise surprise!)21
A day in the life of a social app developer
22
A day in the life of a social app developer
23
A day in the life of a social app developer
24
A day in the life of a social app developer
25
A day in the life of a social app developer
26
GadgetsA gadget spec: Is an XML file. Defines metadata about an OpenSocial app. Is highly cacheable and does not need a high performance server.Gadgets use existing web standards XML to define metadata. HTML for markup.
27
HTML for markup. JavaScript for interactivity. CSS for presentation.
GadgetsExample gadget XML spec: Uses HTML to print Hello World. Colors the text red with CSS. Dynamically adjusts the height of the gadget with JavaScript.
28
Hello World
h1 { color: #dd0000; }
gadgets.window.adjustHeight();
]]>
Gadgets
JavaScript utility functions for gadgets:gadgets.io.makeRequest()
Make cross-domain AJAX calls to remote servers.gadgets.json.parse() and gadgets.json.stringify()
Native JSON support.
29
Native JSON support.gadgets.util.escapeString()
Make text safe for display via innerHTML.gadgets.util.registerOnLoadHandler()
Execute code when the page is finished loading.
Gadgets
Add extra features to your gadget: dynamic-height - Change the size of your gadget in the container. views - Navigate between different surfaces of the container. skins - Make your gadget change its styles to match the container. Containers may offer custom features...
30
Gadgets
31
The OpenSocial JavaScript API is a gadget feature, too!
The OpenSocial JavaScript API
3232
The OpenSocial JavaScript APIIt's people!
The OpenSocial JavaScript APIRepresenting users: Client-side, users must work with the VIEWER and the OWNER.
33
The OpenSocial JavaScript APIMultiple personalities: When you visit your own profile, you are both the VIEWER and the OWNER.
34
The OpenSocial JavaScript APIWorking with people:
opensocial.Person - JavaScript representation of a user.
35
ABOUT_ME ACTIVITIES ADDRESSES AGE BODY_TYPE BOOKS CARS CHILDREN CURRENT_LOCATION DATE_OF_BIRTH
JOB_INTERESTS JOBS LANGUAGES_SPOKEN LIVING_ARRANGEMENT LOOKING_FOR MOVIES MUSIC NAME NETWORK_PRESENCE NICKNAME
The OpenSocial JavaScript APIAn OpenSocial Person's fields:
SEXUAL_ORIENTATION SMOKER SPORTS STATUS TAGS THUMBNAIL_URL TIME_ZONE TURN_OFFS TURN_ONS TV_SHOWS
36
DATE_OF_BIRTH DRINKER EMAILS ETHNICITY FASHION FOOD GENDER HAPPIEST_WHEN HAS_APP HEROES HUMORID INTERESTS
NICKNAME PETS PHONE_NUMBERS POLITICAL_VIEWS PROFILE_SONG PROFILE_URL PROFILE_VIDEO QUOTES RELATIONSHIP_STATUS RELIGION ROMANCE SCARED_OF SCHOOLS
TV_SHOWS URLS
The OpenSocial JavaScript APIWorking with people:
A Collection represents many opensocial.Person objects.
37
The OpenSocial JavaScript APIWorking with data:
Persistent data gives apps key, value storage directly on the container. String only, but conversion to JSON allows for storage of complex
objects. Storage per app per user - scales well with growth. Ideal for settings, customizations.
38
The OpenSocial JavaScript APIWorking with activities:
API to post information about what users are doing with your app. Many containers have support for images and some HTML. Channel to grow your application.
39
orkut MySpace hi5
The OpenSocial JavaScript APIPost an activity:
function postActivity(text) { var params = {}; params[opensocial.Activity.Field.TITLE] = text;var activity = opensocial.newActivity(params); opensocial.requestCreateActivity(activity,
opensocial.CreateActivityPriority.HIGH, callback);};
Assign the activity text to the TITLE field.
40
Assign the activity text to the TITLE field. Call opensocial.newActivity() to create a new Activity instance. Call opensocial.requestCreateActivity() to post the activity to the
container.
RESTful and RPC protocols
4141
RESTful and RPC protocolsServers talking to servers
RESTful and RPC protocolsOpens new development modelsBackground processing.Easier Flash integration.Mobile applications.
42
RESTful and RPC protocolsCommunication methods: RESTful (Representational State Transfer) RPC (Remote Procedure Call)Formats: XML JSON AtomPub
43
AtomPub
RESTful and RPC protocolsREST: Resources are URLs.
/people/{guid}/@all
All people connected to the given user:Example - People:
All friends of the given user:
44
/people/{guid}/@friends
/people/{guid}/@self
Profile of the given user:
/people/@me/@self
Profile of the authenticated user:
/people/@supportedFields
Supported Person fields:
RESTful and RPC protocols
Response format (JSON, XML, AtomPub)
Request extra fields
Filtering:
fields={-join|,|field}.
format={format}
Querystring parameters customize requests:
45
Filtering:
Paging:
filterBy={fieldname} filterOp={operation}filterValue={value}updatedSince={xsdDateTime}networkDistance={networkDistance}
count={count} sortBy={fieldname} sortOrder={order} startIndex={startIndex}
RESTful and RPC protocolsREST responses (Person):
{ "id" : "example.org:34KJDCSKJN2HHF0DW20394", "displayName" : "Janey", "name" : {"unstructured" : "Jane Doe"}, "gender" : "female"}
JSON:
XML:
46
Jane Doe female
XML:
RESTful and RPC protocolsAuthentication: Both protocols use OAuth to identify users and apps.
Depending on what the application needs to do, it can use two-legged or three-legged OAuth.
47
OpenSocial Tools
4848
OpenSocial ToolsWhat sets us apart from the animals
Shindig
Writing a gadget server is difficult:
Fast changing API - hard to keep up. Standardization is hard to get right. Costs $ / / !
49
OpenSocial Dev AppDevelopment tool to test out JS code in different containers
50
http://osda.appspot.com
Client Libraries
OpenSocial PHP Client LibraryOpenSocial Java Client LibraryOpenSocial Ruby Client LibraryOpenSocial Ruby Client LibraryOpenSocial Python Client Library
51
But I didnt show up today to deal up today to deal with PHP, Java, Python or Ruby
52
ActionScript Client Library (beta) http://opensocial-resources-zh.googlecode.com/svn/trunk/opensocial-
actionscript-client/0.8/doc/index.html
53
54
Challenges
5555
ChallengesNobody said this was going to be easy
Challenges
Cross container development is still tricky: Containers may not follow the standard. Containers may follow the standard but have different policies. Follow best practices: http://tinyurl.com/4nuzll
56
Challenges
No central directory Hard for apps to spread to many containers. Apps need to work with different install processes. Directory approval requirements vary from container to container.
57
ChallengesScaling is hard: Easy to start and get some users.
58
ChallengesScaling is hard: Being popular on one social network can push your server to the limit...
59
Scaling is hard:...being popular on many networks will push you right over.
6060
Help solve these problems
OpenSocial is Open
Get involved with the Get involved with the community at opensocial.org
Help shape the Open & Social Web
61
Resources
6262
Resources
Resources
OpenSocial Tutorial: http://rurl.org/ss3
OpenSocial Spec, Foundation, Reference: http://opensocial.org
Caja: http://code.google.com/p/google-caja/
Shindig: http://incubator.apache.org/shindig/
OpenSocial Across Containers video: http://tinyurl.com/4nuzll
63
OpenSocial Across Containers video: http://tinyurl.com/4nuzll
OpenSocial Templates: http://ostemplates-demo.appspot.com/
OpenSocial Dev App: http://osda.appspot.com
Partuza: http://partuza.nl
OpenSocial Specification Proposals: http://groups.google.com/group/opensocial-and-gadgets-spec/topics
63
Learn more http://code.google.com
64
http://code.google.comhttp://opensocial.org
Stay updated athttp://apacdeveloper.blogspot.com/
65
http://apacdeveloper.blogspot.com/http://cse-sea.blogspot.com