1
OpenSocialChina - October 2008
Arne Roomann-KurrikDeveloper Relations
Jacky WangSoftware Engineer
OpenSocial’s goal:Make the web more social
2
3
What does “social” mean?
“Eliette, what do you do with your friends?”
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License4
What does “social” mean?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License5
What does “social” mean?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License6
What does “social” mean?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License7
What does “social” mean?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License8
What does “social” mean?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License9
What does “social” mean?
10
What does “social” mean?
“Internet, what do you do with your friends?”
11
“We look at each other”
12
“Talking”
13
“Laughing”
14
“We help each other”
15
“We read together”
16
“We do projects together”
The social internet
17
A social website..• Provides a feature that becomes more engaging as the number of users
grows.• Uses relationships between people to present users interesting
information.
The social internet
18
Some social websites...
The social internet
19
A social website..• Has overhead to manage users and relationships.• Grows slowly because users must sign up to use the site.
What if we remove the overhead?
• Developers can focus on providing features, not managing users.
The social internet
20
A social network..• Manages large numbers of users and relationships.• Is slow to add new features.
The social internet
21
Many social networks...
The social internet
22
How do we add new features to social networks?• Make the social network a platform.• Give creative developers the tools to add the features themselves.
The social internet
23
A social application...• Lets the social network manage users and relationships.• Adds new features to the social network.• Lets users “install” the application without signing up for new accounts.• Grows quickly because users are already communicating with each
other.
The social internet
24
Lots of social apps...
25
Need for a social APIHow do we put apps in social networks?
A day in the life of a social app developer
26
A day in the life of a social app developer
27
A day in the life of a social app developer
28
A day in the life of a social app developer
29
A day in the life of a social app developer
30
A day in the life of a social app developer
31
Introduction to OpenSocial
32
Numbers:• 19+ implemented Containers• 40+ committed Containers• 3000+ applications• 400,000,000+ of users
In China:
The OpenSocial APIs
33
Client-side:• Gadgets XML• Gadgets JavaScript• OpenSocial JavaScript
Server-side:• RESTful protocol• RPC protocol
Versions:• 0.6 - Client-side APIs introduced• 0.7 - Server-side APIs introduced• 0.81 (current) - Server-side APIs finalized
34
GadgetsNot widgets, not sprockets, not gidgets, not wadgets
Gadgets
35
A 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.• JavaScript for interactivity.• CSS for presentation.
Gadgets
36
A gadget server:• Takes the gadget spec as input.• Performs optimizations on the gadget spec.• Outputs HTML, JavaScript, and CSS as one document.
Gadgets
37
A container:• Displays the social network’s user interface.• Opens an IFrame to the rendered gadget.
Containers and gadgetservers are both run by the social network, butdo not need to be onthe same machine, oreven domain.
Gadgets
38
Example gadget XML spec:• Uses HTML to print “Hello World”.• Colors the text red with CSS.• Dynamically adjusts the height of the gadget with JavaScript.
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Hello World!"> <Require feature="dynamic-height" /> </ModulePrefs> <Content type="html"> <![CDATA[ <h1>Hello World</h1>
<style type="text/css"> h1 { color: #dd0000; }</style><script type="text/javascript"> gadgets.window.adjustHeight();</script>
]]> </Content></Module>
Gadgets
39
Requesting the gadget XML spec:1. The client requests an app to be rendered.
Gadgets
40
Requesting the gadget XML spec:1. The client requests an app to be rendered.2. The container fetches the gadget XML spec from its host.
Gadgets
41
Requesting the gadget XML spec:1. The client requests an app to be rendered.2. The container fetches the gadget XML spec from its host. 3. The container renders the gadget into HTML, which is displayed
to the client.
Gadgets
42
Requesting the gadget XML spec:• Because the gadget spec is simple, it can be cached easily.• Caching reduces the load on your server, great when you have millions
of users.
Gadgets
43
Requesting a cached gadget XML spec:1.The client requests an app to be rendered. The container already
has a copy of the spec stored in its cache.
Gadgets
44
Requesting a cached gadget XML spec:1.The client requests an app to be rendered. The container already
has a copy of the spec stored in its cache.2.The container renders the gadget into HTML, which is displayed
to the client.
Gadgets
45
What kind of rewriting is done by the gadget server?• Rewrite links to use content proxies.• Rewrite relative links to full paths (some containers).• Return only content for the current view.
Gadgets
46
What are views?• Gadgets can render in different locations on a container.• Rendering area changes from small to large.• Certain pages might be public, some are private.• Containers may have different policies depending on the page,
especially when the gadget displays ads.• Views provide a way for gadgets to provide different functionality
depending on where it is rendered.
Gadgets
47
iGoogle "home" view:• On iGoogle, the "home" view is a small,
private page that does not allow ads.
Gadgets
48
iGoogle "canvas" view:• Large private view, allows ads.
Gadgets
49
Working with views in the gadget XML:• <Content> sections are repeated for each view.• Add a view="view name" attribute to each section.• Content sections may support multiple views, for example
view="home,canvas"<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Hello World!"> <Require feature="dynamic-height" /> </ModulePrefs> <Content type="html" view="home"> <![CDATA[ ... ]]> </Content> <Content type="html" view="canvas"> <![CDATA[ ... ]]> </Content></Module>
Gadgets
50
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.• gadgets.util.escapeString()
Make text safe for display via innerHTML.• gadgets.util.registerOnLoadHandler()
Execute code when the page is finished loading.
Gadgets
51
gadgets.io.makeRequest():• Make cross-domain AJAX calls to remote servers.
Remote content:• Most interesting gadgets will need to
work with content stored on differentservers.
• AJAX cannot cross domains, so youcannot request content from your ownserver.
• JSONP is only really good for one-waydata transfer.
• Gadgets with millions of users canoverwhelm a remote site.
Gadgets
52
Requesting remote content:1.The rendered app calls gadgets.io.makeRequest() to fetch
remote content. This call is sent to the container.
Gadgets
53
Requesting remote content:1.The rendered app calls gadgets.io.makeRequest() to fetch
remote content. This call is sent to the container.2.The container requests content from the specified URL.
Gadgets
54
Requesting remote content:1.The rendered app calls gadgets.io.makeRequest() to fetch
remote content. This call is sent to the container.2.The container requests content from the specified URL.3.The container returns the response to the application, which renders
the data.
Gadgets
55
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...
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Hello World!"> <Require feature="dynamic-height" /> </ModulePrefs> <Content type="html"> <![CDATA[ ... ]]> </Content></Module>
Gadgets
56
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Hello Social!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"> <![CDATA[ ... ]]> </Content></Module>
The OpenSocial JavaScript API is a gadget feature, too!
57
The OpenSocial JavaScript API“It's people!”
The OpenSocial JavaScript API
58
Representing users:• Client-side, users must work with the VIEWER and the OWNER.
The OpenSocial JavaScript API
59
Multiple personalities:• When you visit your own profile, you are both the VIEWER and the
OWNER.
The OpenSocial JavaScript API
60
OpenSocial requests:• An OpenSocial DataRequest is created.• Requests are added to the DataRequest.• The DataRequest is sent to the server asynchronously.• When the request finishes, the supplied callback will be called.
function request() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest("OWNER"), "get_owner"); req.add(req.newFetchPersonRequest("VIEWER"), "get_viewer"); req.add(req.newFetchActivitiesRequest("VIEWER"), "vactivities"); req.add(req.newFetchPersonAppDataRequest("OWNER", "*"), "odata"); ... req.send(response);};
function response(data) { ... };
gadgets.util.registerOnLoadHandler(request);
The OpenSocial JavaScript API
61
OpenSocial responses:• Responses are bundled according to the keys specified in the request.• Check for an error at the global response level.• Check for an error at the specific response level.• Use getData() to retrieve the actual information in a request.
function response(data) { if (data.hadError()) { if (data.get("get_owner").hadError()) { ... } if (data.get("get_viewer").hadError()) { ... } ... } var owner = data.get("get_owner").getData(); var viewer = data.get("get_viewer").getData();};
The OpenSocial JavaScript API
62
Working with people:
• opensocial.Person - JavaScript representation of a user.
The OpenSocial JavaScript API
63
Request one person:req.add(req.newFetchPersonRequest(idspec, opt_params), "key");
• idspec can be either “VIEWER”, “OWNER” or an ID number.• opt_params contains extra request parameters, such as which profile
fields to fetch.
newFetchPersonRequest responses:
var owner = data.get("key").getData();alert(owner.getDisplayName());
• Data contains a single opensocial.Person object.
• Person objects can contain lots of information, such as addresses, companies, phone numbers, favorite movies, and thumbnail urls.
The OpenSocial JavaScript API
64
Methods available on an OpenSocial Person:
• getDisplayName()Gets a text display name for this person; guaranteed to return a useful string.
• getField(key, opt_params)Gets data for this person that is associated with the specified key.
• getId()Gets an ID that can be permanently associated with this person.
• isOwner()Returns true if this person object represents the owner of the current page.
• isViewer()Returns true if this person object represents the currently logged in user.
• ABOUT_ME• ACTIVITIES• ADDRESSES• AGE• BODY_TYPE• BOOKS• CARS• CHILDREN• CURRENT_LOCATION• DATE_OF_BIRTH• DRINKER• EMAILS• ETHNICITY• FASHION• FOOD• GENDER• HAPPIEST_WHEN• HAS_APP• HEROES• HUMOR• ID• INTERESTS
• JOB_INTERESTS• JOBS• LANGUAGES_SPOKEN• LIVING_ARRANGEMENT• LOOKING_FOR• MOVIES• MUSIC• NAME• NETWORK_PRESENCE• NICKNAME• PETS• PHONE_NUMBERS• POLITICAL_VIEWS• PROFILE_SONG• PROFILE_URL• PROFILE_VIDEO• QUOTES• RELATIONSHIP_STATUS• RELIGION• ROMANCE• SCARED_OF• SCHOOLS
The OpenSocial JavaScript API
65
An OpenSocial Person's fields:• SEXUAL_ORIENTATION• SMOKER• SPORTS• STATUS• TAGS• THUMBNAIL_URL• TIME_ZONE• TURN_OFFS• TURN_ONS• TV_SHOWS• URLS
The OpenSocial JavaScript API
66
Working with people:
• A Collection represents many opensocial.Person objects.
The OpenSocial JavaScript API
67
Request many people:var idspec = opensocial.newIdSpec({ “userId” : “OWNER”, “groupId” : “FRIENDS”});req.add(req.newFetchPeopleRequest(idspec, opt_params), "key");
• idspec is an object that can represent groups of people. “userId” can be “VIEWER” or “OWNER” or an ID, and “groupId” can be “SELF”, “FRIENDS”, or the name of a group.
• opt_params contains extra request parameters, such as which profile fields to fetch, and how to order or filter the returned people.
newFetchPersonRequest responses:var owner_friends = data.get("key").getData();owner_friends.each(function (person) { alert(person.getDisplayName());});
• Data contains a Collection of opensocial.Person objects. Iterate over these by using the each() method.
The OpenSocial JavaScript API
68
Working 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.
The OpenSocial JavaScript API
69
Set persistent data:req.add(req.newUpdatePersonAppDataRequest(idspec, key, value));
• idspec can only be “VIEWER”.• key is the name under which this data will be stored.• value is a string representing the data to store.
The OpenSocial JavaScript API
70
Fetch persistent data:var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "SELF"});req.add(req.newFetchPersonAppDataRequest(idspec, keys), "key");req.add(req.newFetchPersonRequest("OWNER"), "ownerkey");
• idspec is an object that can represent groups of people, the same as newFetchPeopleRequest.
• keys is a list of persistent data keys to retrieve the data for.• The owner is requested because the data returned is indexed by user ID
and we want the owner’s data.
newFetchPersonAppDataRequest responses:
var app_data = data.get("key").getData();var value = app_data[owner.getId()][key];
The OpenSocial JavaScript API
71
Fetch persistent data:
{ "1234567890" : { "key1" : "value1" }, "2345678901" : { "key1" : "value2" }}
• Data is returned as an object indexed by ID number, then as an object indexed by key name, even if there is only data returned for one user!
{ "1234567890" : { "key1" : "value1" } }
• Multiple people:
{ "1234567890" : { "key1" : "value1", "key2" : "value2" }}
• One person, multiple keys:
The OpenSocial JavaScript API
72
Working 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.
orkut MySpace hi5
The OpenSocial JavaScript API
73
Post 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.• Call opensocial.newActivity() to create a new Activity instance.• Call opensocial.requestCreateActivity() to post the activity to the
container.
74
RESTful and RPC protocolsServers talking to servers
RESTful and RPC protocols
75
Opens new development models• Background processing.• Easier Flash integration.• Mobile applications.
RESTful and RPC protocols
76
Communication methods:• RESTful (Representational State Transfer) • RPC (Remote Procedure Call)
Formats:• XML• JSON• AtomPub
RESTful and RPC protocols
77
REST:• Resources are URLs.
/people/{guid}/@all
• All people connected to the given user:Example - People:
/people/{guid}/@friends
• All friends of the given user:
/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
78
• Response format (JSON, XML, AtomPub)
• Request extra fields
• Filtering:
• Paging:
fields={-join|,|field}.
filterBy={fieldname} filterOp={operation}filterValue={value}updatedSince={xsdDateTime}networkDistance={networkDistance}
count={count} sortBy={fieldname} sortOrder={order} startIndex={startIndex}
format={format}
Querystring parameters customize requests:
<person xmlns="http://ns.opensocial.org/2008/opensocial"> <id></id> <displayName></displayName> <name> <unstructured>Jane Doe</unstructured> </name> <gender>female</gender></person>
RESTful and RPC protocols
79
REST responses (Person):
{ "id" : "example.org:34KJDCSKJN2HHF0DW20394", "displayName" : "Janey", "name" : {"unstructured" : "Jane Doe"}, "gender" : "female"}
• JSON:
• XML:
RESTful and RPC protocols
80
REST responses (Person):• AtomPub:<entry xmlns="http://www.w3.org/2005/Atom"> <content type="application/xml"> <person xmlns="http://ns.opensocial.org/2008/opensocial"> <name> <unstructured>Jane Doe</unstructured> </name> <gender>female</gender> </person> </content> <title/> <updated>2003-12-13T18:30:02Z</updated> <author/> <id>urn:guid:example.org:34KJDCSKJN2HHF0DW20394</id></entry>
RESTful and RPC protocols
81
REST:• Perform operations using different HTTP methods on each URL.
CRUD:•Create•Retrieve•Update•Delete
HTTP:•POST•GET•PUT•DELETE
RESTful and RPC protocols
82
REST has some disadvantages:• Batch support requires multiple HTTP requests, or a contrived URL
scheme.• Specifying multiple users via querystring is difficult. Is ?uid=1234,5678 the same resource as ?uid=5678,1234 ?
RESTful and RPC protocols
83
RPC:• One endpoint - parameters specify methods to call.• Batch support.• Specify collections of users through passed arguments, not URLs.
POST /rpc HTTP/1.1Host: api.example.orgAuthorization: <Auth token>Content-Type: application/json{ "method" : "people.get", "id" : "myself" "params" : { "userid" : "@me", "groupid" : "@self" }}
Example - Fetch current user:
• RequestHTTP/1.x 207 Multi-StatusContent-Type: application/json{ "id" : "myself" "result" : { "id" : "example.org:34KJDCSKJN2HHF0DW20394", "name" : { "unstructured" : "Jane Doe"}, "gender" : "female" }}
• Response
RESTful and RPC protocols
84
Authentication:• 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.
Two-legged OAuth:• The application authenticates directly with the container.• Perform non-user specific operations:
• Update persistent data for app users.• Can request information for users who have shared their profile
information with the app.
Three-legged OAuth:• The user tells the container to give profile access to the application.• Perform user specific operations:
• Post activities.• Fetch friends of the current user.
RESTful and RPC protocols
85
Client libraries are being created for PHP, Java, and Python.• Help you connect to OpenSocial containers, and work with social
data on your server.
Sample: log into a container:
RESTful and RPC protocols
86
RESTful and RPC use OAuth for authentication• OAuth is an open standard.• Client libraries will help make this process easier for developers.
Sample: use OAuth to get an access token for a user:
RESTful and RPC protocols
87
• Once OAuth is used, you can store a user token for later access.
Sample: use an existing token:
RESTful and RPC protocols
88
• Once authentication has happened, requests are easy:
Sample: Fetch the current user:
RESTful and RPC protocols
89
Sample: Fetch the current user’s friends:
90
OpenSocial ToolsWhat sets us apart from the animals
Shindig
91
Writing a gadget server is difficult:• Fast changing API - hard to keep up.• Standardization is hard to get right.• Costs ¥ / 元 !
Shindig
92
Apache Shindig to the rescue!• Open Source project.• Available in Java and PHP.• Run by itself and connect to an
existing social site to addOpenSocial support.
• Goal: Launch a new (simple)container in under an hour’s worth of work
http://incubator.apache.org/shindig/
OpenSocial Dev App
93
Development tool to test out JS code in different containers
http://osda.appspot.com
94
Upcoming FeaturesCaja and Templates
Caja
95
When JavaScript goes bad• Gadgets can be a new vector for phishing, spam, malware.• Social spread of gadgets can spread bad gadgets too.• Caja reduces threats with a JavaScript
sanitizer as an additional "sandbox" on top of iFrame protection.
Caja
96
• A capability-based Javascript sanitizer.• An Open Source project from Google.• Optional but recommended for
OpenSocial containers.• Will eventually be secure enough
to run gadgets inline instead of in iframes.
Caja is:
http://code.google.com/p/google-caja/
Templates
97
Need for a templating language:• Developers need a simple way to convert OpenSocial data to HTML.• DOM manipulation is slow and ugly.• innerHTML is unsafe.
Templates
98
http://ostemplates-demo.appspot.com/
<script type="text/javascript" src="http://ostemplates-demo.appspot.com/ostemplates.js"></script>
<script type="text/os-template"> <b>${owner.displayName}'s friends</b> <ul> <li repeat="friends">${displayName}</li> </ul> </script>
<script type="text/javascript"> function loadData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('OWNER'), 'owner'); var idSpecFriends = opensocial.newIdSpec( {'userId':'OWNER', 'groupId':'FRIENDS'}); req.add(req.newFetchPeopleRequest(idSpecFriends), 'friends'); req.send(function(data) { os.Container.processDocument(data); }); } gadgets.util.registerOnLoadHandler(loadData); </script>
Templates
99
http://ostemplates-devapp.appspot.com/
Templates developer application available:
100
The OpenSocial specification process“We can fix it, we have the technology”
101
The OpenSocial specification process
102
The OpenSocial specification process
103
The OpenSocial specification process
104
The OpenSocial specification process
105
The OpenSocial specification process
106
ChallengesNobody said this was going to be easy
107
ChallengesCross 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
108
ChallengesNo 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.
109
ChallengesScaling is hard:
• Easy to start and get some users.
110
ChallengesScaling is hard:
• Being popular on one social network can push your server to the limit...
111
ChallengesScaling is hard:
• ...being popular on many networks will push you right over.
112
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
• 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
113
Recommended