1.
OpenSocial

2.
OpenSocial’s goal: <ul><li>Make the web more social </li></ul>

3.
The social internet <ul><li>A social website.. </li></ul><ul><li>Provides a feature that becomes more engaging as the number of users grows. </li></ul><ul><li>Uses relationships between people to present users interesting information. </li></ul>

4.
The social internet Some social websites...

5.
The social internet <ul><li>A social website.. </li></ul><ul><li>Has overhead to manage users and relationships. </li></ul><ul><li>Grows slowly because users must sign up to use the site. </li></ul><ul><li>What if we remove </li></ul><ul><li>the overhead? </li></ul><ul><li>Developers can focus on providing features, not managing users. </li></ul>

6.
The social internet <ul><li>A social network.. </li></ul><ul><li>Manages large numbers of users and relationships. </li></ul><ul><li>Is slow to add new features. </li></ul>

7.
The social internet Many social networks...

8.
The social internet <ul><li>How do we add new features to social networks? </li></ul><ul><li>Make the social network a platform. </li></ul><ul><li>Give creative developers the tools to add the features themselves. </li></ul>

9.
The social internet <ul><li>A social application... </li></ul><ul><li>Lets the social network manage users and relationships. </li></ul><ul><li>Adds new features to the social network. </li></ul><ul><li>Lets users “install” the application without signing up for new accounts. </li></ul><ul><li>Grows quickly because users are already communicating with each other. </li></ul>

10.
The social internet Lots of social apps...

11.
Need for a social API <ul><li>How do we put apps in social networks? </li></ul>

12.
A day in the life of a social app developer

13.
A day in the life of a social app developer

14.
Introduction to OpenSocial <ul><li>Numbers: </li></ul><ul><li>19+ implemented Containers </li></ul><ul><li>40+ committed Containers </li></ul><ul><li>3000+ applications </li></ul><ul><li>400,000,000+ of users </li></ul>In China:

15.
The OpenSocial APIs <ul><li>Client-side: </li></ul><ul><li>Gadgets XML </li></ul><ul><li>Gadgets JavaScript </li></ul><ul><li>OpenSocial JavaScript </li></ul><ul><li>Server-side: </li></ul><ul><li>RESTful protocol </li></ul><ul><li>RPC protocol </li></ul><ul><li>Versions: </li></ul><ul><li>0.6 - Client-side APIs introduced </li></ul><ul><li>0.7 - Server-side APIs introduced </li></ul><ul><li>0.81 (current) - Server-side APIs finalized </li></ul>

16.
Gadgets <ul><li>Not widgets, not sprockets, not gidgets, not wadgets </li></ul>

17.
Gadgets <ul><li>A gadget spec: </li></ul><ul><li>Is an XML file. </li></ul><ul><li>Defines metadata about an OpenSocial app. </li></ul><ul><li>Is highly cacheable and does not need a high performance server. </li></ul><ul><li>Gadgets use existing web standards </li></ul><ul><li>XML to define metadata. </li></ul><ul><li>HTML for markup. </li></ul><ul><li>JavaScript for interactivity. </li></ul><ul><li>CSS for presentation. </li></ul>

18.
Gadgets <ul><li>A gadget server: </li></ul><ul><li>Takes the gadget spec as input. </li></ul><ul><li>Performs optimizations on the gadget spec. </li></ul><ul><li>Outputs HTML , JavaScript , and CSS as one document. </li></ul>

19.
Gadgets <ul><li>A container: </li></ul><ul><li>Displays the social network’s user interface. </li></ul><ul><li>Opens an IFrame to the rendered gadget. </li></ul>Containers and gadget servers are both run by the social network, but do not need to be on the same machine, or even domain.

20.
Gadgets <ul><li>Example gadget XML spec: </li></ul><ul><li>Uses HTML to print “Hello World”. </li></ul><ul><li>Colors the text red with CSS . </li></ul><ul><li>Alerts annoying message with JavaScript . </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;Hello World!&quot;> <Require feature=&quot;dynamic-height&quot; /> </ModulePrefs> <Content type=&quot;html&quot;><![CDATA[ <h1>Hello World</h1> <style type=&quot;text/css&quot;> h1 { color: #dd0000; } </style> <script type=&quot;text/javascript“> alert(“Hello More!”); </script> ]]> </Content></Module> Live Demo

21.
Gadgets <ul><li>JavaScript utility functions for gadgets: </li></ul><ul><li>gadgets.io.makeRequest() Make cross-domain AJAX calls to remote servers. </li></ul><ul><li>gadgets.json.parse() and gadgets.json.stringify() Native JSON support. </li></ul><ul><li>gadgets.util.escapeString() Make text safe for display via innerHTML. </li></ul><ul><li>gadgets.util.registerOnLoadHandler() Execute code when the page is finished loading. </li></ul>

22.
Gadgets <ul><li>A gadget can require additional JS libraries (“features”). </li></ul><ul><li>minimessage – Display short messages to the user . </li></ul><ul><li>tabs – Create a tabbed user interface </li></ul><ul><li>dynamic-height - Change the size of your gadget in the container. </li></ul><ul><li>views - Navigate between different surfaces of the container. </li></ul><ul><li>skins - Make your gadget change its styles to match the container. </li></ul><ul><li>Containers may offer custom features... </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;Hello World!&quot;> <Require feature=&quot;dynamic-height&quot; /> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ ... ]]> </Content> </Module> Live Demo

23.
Gadgets <ul><li>What are views? </li></ul><ul><li>Gadgets can render in different locations on a container. </li></ul><ul><li>Rendering area changes from small to large. </li></ul><ul><li>Certain pages might be public, some are private. </li></ul><ul><li>Containers may have different policies depending on the page, especially when the gadget displays ads. </li></ul><ul><li>Views provide a way for gadgets to provide different functionality depending on where it is rendered. </li></ul>

24.
Gadgets <ul><li>iGoogle &quot;home&quot; view: </li></ul><ul><li>On iGoogle, the &quot;home&quot; view is a small, private page that does not allow ads. </li></ul>

25.
Gadgets <ul><li>iGoogle &quot;canvas&quot; view: </li></ul><ul><li>Large private view, allows ads. </li></ul>

26.
Gadgets <ul><li>Working with views in the gadget XML: </li></ul><ul><li><Content> sections are repeated for each view . </li></ul><ul><li>Add a view=&quot;view name&quot; attribute to each section. </li></ul><ul><li>Content sections may support multiple views, for example view=&quot;home,canvas&quot; </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;Hello World!&quot;> <Require feature=“views&quot; /> </ModulePrefs> <Content type=&quot;html&quot; view=&quot;home&quot; > <![CDATA[ ... ]]> </Content> <Content type=&quot;html&quot; view=&quot;canvas&quot; > <![CDATA[ ... ]]> </Content> </Module> Live Demo

27.
Gadgets <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?><Module> <ModulePrefs title=&quot;Hello Social!&quot;> <Require feature=&quot;opensocial-0.8&quot; /> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ ... ]]> </Content> </Module> The OpenSocial JavaScript API is a gadget feature, too! Live Demo

28.
The OpenSocial JavaScript API

29.
Making Gadgets Social <ul><li>Gadgets can become social with OpenSocial JavaScript API </li></ul><ul><li>OpenSocial API has three core services: </li></ul><ul><li>People & Friends </li></ul><ul><li>Access profile information </li></ul><ul><li>Access friends information </li></ul><ul><li>Activities </li></ul><ul><li>See what you’re friends are up to </li></ul><ul><li>Share what you are doing </li></ul><ul><li>Persistence </li></ul><ul><li>Provide state without a server </li></ul><ul><li>Share data with your friends </li></ul>

30.
The OpenSocial JavaScript API <ul><li>Representing users: </li></ul><ul><li>Client-side, users must work with the VIEWER and the OWNER . </li></ul>

31.
The OpenSocial JavaScript API <ul><li>Multiple personalities: </li></ul><ul><li>When you visit your own profile, you are both the VIEWER and the OWNER . </li></ul>

32.
The OpenSocial JavaScript API <ul><li>OpenSocial requests: </li></ul><ul><li>An OpenSocial DataRequest is created. </li></ul><ul><li>Requests are added to the DataRequest. </li></ul><ul><li>The DataRequest is sent to the server asynchronously. </li></ul><ul><li>When the request finishes, the supplied callback will be called. </li></ul>function request() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(&quot;OWNER&quot;), &quot;get_owner&quot;); req.add(req.newFetchPersonRequest(&quot;VIEWER&quot;), &quot;get_viewer&quot;); req.add(req.newFetchActivitiesRequest(&quot;VIEWER&quot;), &quot;vactivities&quot;); req.add(req.newFetchPersonAppDataRequest(&quot;OWNER&quot;, &quot;*&quot;), &quot;odata&quot;); ... req.send ( response );}; function response (data) { ... }; gadgets.util.registerOnLoadHandler(request);

33.
The OpenSocial JavaScript API <ul><li>OpenSocial responses: </li></ul><ul><li>Responses are bundled according to the keys specified in the request. </li></ul><ul><li>Check for an error at the global response level . </li></ul><ul><li>Check for an error at the specific response level . </li></ul><ul><li>Use getData() to retrieve the actual information in a request. </li></ul>function response(data) { if ( data.hadError() ) { if ( data.get(&quot;get_owner&quot;).hadError() ) { ... } if ( data.get(&quot;get_viewer&quot;).hadError() ) { ... } ... } var owner = data.get ( &quot;get_owner&quot;). getData (); var viewer = data.get( &quot;get_viewer&quot;). getData (); };

34.
The OpenSocial JavaScript API Working with people: <ul><li>opensocial.Person - JavaScript representation of a user. </li></ul>

35.
The OpenSocial JavaScript API Request one person: req.add(req.newFetchPersonRequest( idspec , opt_params ), &quot;key&quot;); <ul><li>idspec can be either “VIEWER”, “OWNER” or an ID number. </li></ul><ul><li>opt_params contains extra request parameters, such as which profile fields to fetch. </li></ul>newFetchPersonRequest responses: var owner = data.get(&quot;key&quot;).getData(); alert(owner.getDisplayName()); <ul><li>Data contains a single opensocial.Person object. </li></ul><ul><li>Person objects can contain lots of information, such as addresses, companies, phone numbers, favorite movies, and thumbnail urls. </li></ul>

36.
The OpenSocial JavaScript API Methods available on an OpenSocial Person: <ul><li>getDisplayName() Gets a text display name for this person; guaranteed to return a useful string. </li></ul><ul><li>getField(key, opt_params) Gets data for this person that is associated with the specified key. </li></ul><ul><li>getId() Gets an ID is permanently associated with this person. </li></ul><ul><li>isOwner() Returns true if this person object represents the owner of the current page. </li></ul><ul><li>isViewer() Returns true if this person object represents the currently logged in user. </li></ul>Live Demo

37.
The OpenSocial JavaScript API <ul><li>ABOUT_ME </li></ul><ul><li>ACTIVITIES </li></ul><ul><li>ADDRESSES </li></ul><ul><li>AGE </li></ul><ul><li>BODY_TYPE </li></ul><ul><li>BOOKS </li></ul><ul><li>CARS </li></ul><ul><li>CHILDREN </li></ul><ul><li>CURRENT_LOCATION </li></ul><ul><li>DATE_OF_BIRTH </li></ul><ul><li>DRINKER </li></ul><ul><li>EMAILS </li></ul><ul><li>ETHNICITY </li></ul><ul><li>FASHION </li></ul><ul><li>FOOD </li></ul><ul><li>GENDER </li></ul><ul><li>HAPPIEST_WHEN </li></ul><ul><li>HAS_APP </li></ul><ul><li>HEROES </li></ul><ul><li>HUMOR </li></ul><ul><li>ID </li></ul><ul><li>INTERESTS </li></ul><ul><li>JOB_INTERESTS </li></ul><ul><li>JOBS </li></ul><ul><li>LANGUAGES_SPOKEN </li></ul><ul><li>LIVING_ARRANGEMENT </li></ul><ul><li>LOOKING_FOR </li></ul><ul><li>MOVIES </li></ul><ul><li>MUSIC </li></ul><ul><li>NAME </li></ul><ul><li>NETWORK_PRESENCE </li></ul><ul><li>NICKNAME </li></ul><ul><li>PETS </li></ul><ul><li>PHONE_NUMBERS </li></ul><ul><li>POLITICAL_VIEWS </li></ul><ul><li>PROFILE_SONG </li></ul><ul><li>PROFILE_URL </li></ul><ul><li>PROFILE_VIDEO </li></ul><ul><li>QUOTES </li></ul><ul><li>RELATIONSHIP_STATUS </li></ul><ul><li>RELIGION </li></ul><ul><li>ROMANCE </li></ul><ul><li>SCARED_OF </li></ul><ul><li>SCHOOLS </li></ul>An OpenSocial Person's fields: <ul><li>SEXUAL_ORIENTATION </li></ul><ul><li>SMOKER </li></ul><ul><li>SPORTSSTATUSTAGS </li></ul><ul><li>THUMBNAIL_URL </li></ul><ul><li>TIME_ZONE </li></ul><ul><li>TURN_OFFS </li></ul><ul><li>TURN_ONS </li></ul><ul><li>TV_SHOWS </li></ul><ul><li>URLS </li></ul>

38.
The OpenSocial JavaScript API Working with people: <ul><li>A Collection represents many opensocial.Person objects. </li></ul>

39.
The OpenSocial JavaScript API Request many people: var idspec = opensocial.newIdSpec({ “ userId” : “OWNER”, “groupId” : “FRIENDS”}); req.add(req.newFetchPeopleRequest( idspec , opt_params ), &quot;key&quot;); <ul><li>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. </li></ul><ul><li>opt_params contains extra request parameters, such as which profile fields to fetch, and how to order or filter the returned people. </li></ul>Process the response: var owner_friends = data.get(&quot;key&quot;).getData(); owner_friends.each(function (person) { alert(person.getDisplayName()); }); <ul><li>Data contains a Collection of opensocial.Person objects. </li></ul>Live Demo

40.
The OpenSocial JavaScript API Working with data: <ul><li>Persistent data gives apps key, value storage directly on the container. </li></ul><ul><li>String only, but conversion to JSON allows for storage of complex objects. </li></ul><ul><li>Storage per app per user - scales well with growth. </li></ul><ul><li>Ideal for settings, customizations. </li></ul>

41.
The OpenSocial JavaScript API Set persistent data: req.add(req.newUpdatePersonAppDataRequest( idspec , key , value )); <ul><li>idspec can only be “VIEWER”. </li></ul><ul><li>key is the name under which this data will be stored. </li></ul><ul><li>value is a string representing the data to store. </li></ul>

42.
The OpenSocial JavaScript API Fetch persistent data: var idspec = opensocial.newIdSpec({ &quot;userId&quot; : &quot;OWNER&quot;, &quot;groupId&quot; : &quot;SELF&quot; }); req.add(req.newFetchPersonAppDataRequest( idspec , keys ), &quot;key&quot;); req.add(req.newFetchPersonRequest(&quot;OWNER&quot;), &quot;ownerkey&quot;); <ul><li>idspec is an object that can represent groups of people, the same as newFetchPeopleRequest. </li></ul><ul><li>keys is a list of persistent data keys to retrieve the data for. </li></ul><ul><li>The owner is requested because the data returned is indexed by user ID and we want the owner’s data. </li></ul>newFetchPersonAppDataRequest responses: var app_data = data.get(&quot;key&quot;).getData(); var value = app_data[owner.getId()][key];

43.
The OpenSocial JavaScript API Fetch persistent data: { &quot;1234567890&quot; : { &quot;key1&quot; : &quot;value1&quot; }, &quot;2345678901&quot; : { &quot;key1&quot; : &quot;value2&quot; } } <ul><li>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! </li></ul>{ &quot;1234567890&quot; : { &quot;key1&quot; : &quot;value1&quot; } } <ul><li>Multiple people: </li></ul>{ &quot;1234567890&quot; : { &quot;key1&quot; : &quot;value1&quot;, &quot;key2&quot; : &quot;value2&quot; } } <ul><li>One person, multiple keys: </li></ul>Live Demo

44.
The OpenSocial JavaScript API Working with activities: <ul><li>API to post information about what users are doing with your app. </li></ul><ul><li>Many containers have support for images and some HTML. </li></ul><ul><li>Channel to grow your application. </li></ul>orkut MySpace hi5

45.
The OpenSocial JavaScript API 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); }; <ul><li>Assign the activity text to the TITLE field. </li></ul><ul><li>Call opensocial.newActivity() to create a new Activity instance. </li></ul><ul><li>Call opensocial.requestCreateActivity() to post the activity to the container. </li></ul>Live Demo

46.
RESTful and RPC protocols <ul><li>Servers talking to servers </li></ul>

47.
RESTful and RPC protocols <ul><li>Opens new development models </li></ul><ul><li>Background processing. </li></ul><ul><li>Easier Flash integration. </li></ul><ul><li>Mobile applications. </li></ul>

48.
RESTful and RPC protocols <ul><li>Communication methods: </li></ul><ul><li>RESTful (Representational State Transfer) </li></ul><ul><li>RPC (Remote Procedure Call) </li></ul><ul><li>Formats: </li></ul><ul><li>XML </li></ul><ul><li>JSON </li></ul><ul><li>AtomPub </li></ul>

49.
RESTful and RPC protocols <ul><li>REST: </li></ul><ul><li>Resources are URLs. </li></ul>/people/{guid}/@all <ul><li>All people connected to the given user: </li></ul>Example - People: /people/{guid}/@friends <ul><li>All friends of the given user: </li></ul>/people/{guid}/@self <ul><li>Profile of the given user: </li></ul>/people/@me/@self <ul><li>Profile of the authenticated user: </li></ul>/people/@supportedFields <ul><li>Supported Person fields: </li></ul>

50.
RESTful and RPC protocols <ul><li>Response format (JSON, XML, AtomPub) </li></ul><ul><li>Request extra fields </li></ul><ul><li>Filtering: </li></ul><ul><li>Paging: </li></ul>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:

51.
RESTful and RPC protocols <person xmlns=&quot; http://ns.opensocial.org/2008/opensocial &quot;> <id></id> <displayName></displayName> <name> <unstructured>Jane Doe</unstructured></name> <gender>female</gender> </person> REST responses (Person): {&quot;id&quot; : &quot;example.org:34KJDCSKJN2HHF0DW20394&quot;, &quot;displayName&quot; : &quot;Janey&quot;, &quot;name&quot; : {&quot;unstructured&quot; : &quot;Jane Doe&quot;}, &quot;gender&quot; : &quot;female&quot;} JSON: XML:

52.
RESTful and RPC protocols REST responses (Person): AtomPub: <entry xmlns=&quot; http://www.w3.org/2005/Atom &quot;> <content type=&quot;application/xml&quot;> <person xmlns=&quot; http://ns.opensocial.org/20 08/opensocial &quot;> <name> <unst ructured>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>

53.
RESTful and RPC protocols <ul><li>REST: </li></ul><ul><li>Perform operations using different HTTP methods on each URL. </li></ul><ul><li>CRUD: </li></ul><ul><li>C reate </li></ul><ul><li>R etrieve </li></ul><ul><li>U pdate </li></ul><ul><li>D elete </li></ul><ul><li>HTTP: </li></ul><ul><li>POST </li></ul><ul><li>GET </li></ul><ul><li>PUT </li></ul><ul><li>DELETE </li></ul>

54.
RESTful and RPC protocols <ul><li>REST has some disadvantages: </li></ul><ul><li>Batch support requires multiple HTTP requests, or a contrived URL scheme. </li></ul><ul><li>Specifying multiple users via querystring is difficult. Is ?uid=1234,5678 the same resource as ?uid=5678,1234 ? </li></ul>

55.
RESTful and RPC protocols <ul><li>RPC: </li></ul><ul><li>One endpoint - parameters specify methods to call. </li></ul><ul><li>Batch support. </li></ul><ul><li>Specify collections of users through passed arguments, not URLs. </li></ul>POST /rpc HTTP/1.1 Host: api.example.org Authorization: <Auth token> Content-Type: application/json { &quot;method&quot; : &quot;people.get&quot;, &quot;id&quot; : &quot;myself&quot; &quot;params&quot; : { &quot;userid&quot; : &quot;@me&quot;, &quot;groupid&quot; : &quot;@self&quot; }} Example - Fetch current user: <ul><li>Request </li></ul>HTTP/1.x 207 Multi-Status Content-Type: application/json { &quot;id&quot; : &quot;myself&quot; &quot;result&quot; : { &quot;id&quot; : &quot;example.org:34KJDCSKJN2HHF0DW20394&quot;, &quot;name&quot; : { &quot;unstructured&quot; : &quot;Jane Doe&quot;}, &quot;gender&quot; : &quot;female&quot; }} <ul><li>Response </li></ul>

56.
RESTful and RPC protocols 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. <ul><li>Two-legged OAuth: </li></ul><ul><li>The application authenticates directly with the container . </li></ul><ul><li>Perform non-user specific operations: </li></ul><ul><ul><li>Update persistent data for app users. </li></ul></ul><ul><ul><li>Can request information for users who have shared their profile information with the app. </li></ul></ul><ul><li>Three-legged OAuth: </li></ul><ul><li>The user tells the container to give profile access to the application . </li></ul><ul><li>Perform user specific operations: </li></ul><ul><ul><li>Post activities. </li></ul></ul><ul><ul><li>Fetch friends of the current user. </li></ul></ul>

57.
RESTful and RPC protocols <ul><li>Client libraries are being created for PHP, Java, Python, Ruby. </li></ul><ul><li>Help you connect to OpenSocial containers, and work with social data on your server. </li></ul>Sample: Login, get thumbnail and friends. OpenSocialClient c = new OpenSocialClient(&quot;myspace.com&quot;); c.setProperty(OpenSocialClient.Properties.REST_BASE_URI, &quot;http://api.myspace.com/v2/&quot;); c.setProperty(OpenSocialClient.Properties.CONSUMER_SECRET, <MYSPACE_SECRET>); c.setProperty(OpenSocialClient.Properties.CONSUMER_KEY, <MYSPACE_APP_KEY>); c.setProperty(OpenSocialClient.Properties.VIEWER_ID, <YOUR_MYSPACE_ID>); OpenSocialPerson p = c.fetchPerson(<YOUR_MYSPACE_ID>); OpenSocialField f = p.getField(&quot;thumbnailUrl&quot;); System.out.println(f.getStringValue()); Collection<OpenSocialPerson> friends = c.fetchFriends(<YOUR_MYSPACE_ID>); for (OpenSocialPerson friend : friends) { System.out.println(friend.getDisplayName()); }