Open Social A Standard for the OPEN WEB

OpenSocial a standard for the social web Patrick Chanezon chanezon@google.com Bangkok October 31 2008 1 OpenSocial’s goal: Make the web more social 2 What does “social” mean? “Eliette, what do you do with your friends?” 3 What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 4 What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 5 What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 6 What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 7 What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 8 What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 9 What does “social” mean? “Internet, what do you do with your friends?” 10 “We look at each other” 11 “Talking” 12 “Laughing” 13 “We help each other” 14 “We read together” 15 “We do projects together” 16 The social internet 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. 17 The social internet Some social websites... 18 The social internet 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. 19 The social internet A social network.. •Manages large numbers of users and relationships. •Is slow to add new features. 20 The social internet Many social networks... 21 The social internet 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. 22 The social internet 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. 23 The social internet Lots of social apps... 24 Need for a social API How do we put apps in social networks? 25 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 Numbers: •19+ implemented Containers •40+ committed Containers •3000+ applications •400,000,000+ of users In Thailand: 8 M users 32 Today: 375 Million User Reach 33 OpenSocial “Containers” 34 Where is OpenSocial live today? • Live to Users: • • • • • • • • • • • MySpace orkut hi5 Freebar Friendster Webon from Lycos IDtail YiQi Netlog Hyves LinkedIn - New! Live Developer Sandboxes: • iGoogle • imeem • CityIN • Tianya • Ning • Plaxo Pulse • Mail.ru • lokalisten • Viadeo • 51.com - New! • Yahoo! - New! • MyAOL! - New! Full List: http://code.google.com/apis/opensocial/gettingstarted.html 35 Containers in the region 36 The OpenSocial APIs Versions: •0.6 - Client-side APIs introduced •0.7 - Server-side APIs introduced •0.81 (current) - Server-side APIs finalized Client-side: •Gadgets XML •Gadgets JavaScript •OpenSocial JavaScript Server-side: •RESTful protocol •RPC protocol 37 OpenSocial is moving fast: bews from this week! • LinkedIn launched to 100% of users, and has a REST endpoint • Mail.ru launched to users • 51.com (large Chinese network) launched http://developers.51.com • Yahoo! launch launched a sandbox -• Tools: • Announced the OpenSocial Dev App • http://wiki.opensocial.org is live • Community updates: • OpenSocial is having a birthday event on November 13 in San Francisco • OpenSocial Foundation community election: vote by Monday! 38 Popular OpenSocial apps on hi5 in Thailand • Engrish • Daily Pablo -- get a new Picasso painting on your profile every day • Kitten Club & KittyPix -- pictures of kittens • PuppyPix -- pictures of puppies • BuddyPoke! -- Poke your friends, powered by Google App Engine • Soccer • Speed Racing! -- design your car and engine and race your friends. 39 Gadgets Not widgets, not sprockets, not gidgets, not wadgets 40 Gadgets 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. 41 Gadgets A gadget server: •Takes the gadget spec as input. •Performs optimizations on the gadget spec. •Outputs HTML, JavaScript, and CSS as one document. 42 Gadgets A container: •Displays the social network’s user interface. •Opens an IFrame to the rendered gadget. Containers and gadget servers are both run by the social network, but do not need to be on the same machine, or even domain. 43 Gadgets 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. Hello World ]]> 44 Gadgets Requesting the gadget XML spec: 1. The client requests an app to be rendered. 45 Gadgets 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. 46 Gadgets 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. 47 Gadgets 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. 48 Gadgets 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. 49 Gadgets 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. 50 Gadgets 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. 51 Gadgets 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. 52 Gadgets iGoogle "home" view: •On iGoogle, the "home" view is a small, private page that does not allow ads. 53 Gadgets iGoogle "canvas" view: •Large private view, allows ads. 54 Gadgets Working with views in the gadget XML: • 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" 55 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 56 Gadgets gadgets.io.makeRequest(): •Make cross-domain AJAX calls to remote servers. Remote content: •Most interesting gadgets will need to work with content stored on different servers. •AJAX cannot cross domains, so you cannot request content from your own server. •JSONP is only really good for one-way data transfer. •Gadgets with millions of users can overwhelm a remote site. 57 Gadgets Requesting remote content: 1.The rendered app calls gadgets.io.makeRequest() to fetch remote content. This call is sent to the container. 58 Gadgets 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. 59 Gadgets 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. 60 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... 61 Gadgets The OpenSocial JavaScript API is a gadget feature, too! 62 The OpenSocial JavaScript API “It's people!” 63 The OpenSocial JavaScript API Representing users: •Client-side, users must work with the VIEWER and the OWNER. 64 The OpenSocial JavaScript API Multiple personalities: •When you visit your own profile, you are both the VIEWER and the OWNER. 65 The OpenSocial JavaScript API 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); 66 The OpenSocial JavaScript API 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(); }; 67 The OpenSocial JavaScript API Working with people: • opensocial.Person - JavaScript representation of a user. 68 The OpenSocial JavaScript API 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. 69 The OpenSocial JavaScript API 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. 70 The OpenSocial JavaScript API An OpenSocial Person's fields: • ABOUT_MEACTIVITIESADDRESSESAGEBODY_TYPEBOOKSCARSCHILDRENCURRENT_ • JOB_INTERESTSJOBSLANGUAGES_SPOKEN • SEXUAL_ORIENTATION LOCATIONDATE_OF_BIRTHDRINKEREMAILSETHNICITYFASHIONFOODGENDERHAPPIE • LIVING_ARRANGEMENTLOOKING_FORMOVIESMUSICNAMENETW • SMOKER ST_WHENHAS_APPHEROESHUMORIDINTERESTS • SPORTSSTATUSTAGS NAMEPETSPHONE_NUMBERSPOLITICAL_VIEWSPROFILE_SONG _VIDEOQUOTESRELATIONSHIP_STATUSRELIGIONROMANCESCA • THUMBNAIL_URL • TIME_ZONETURN_OFFSTURN_ONSTV 71 The OpenSocial JavaScript API Working with people: • A Collection represents many opensocial.Person objects. 72 The OpenSocial JavaScript API 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. 73 The OpenSocial JavaScript API 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. 74 The OpenSocial JavaScript API 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. 75 The OpenSocial JavaScript API 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]; 76 The OpenSocial JavaScript API Fetch persistent data: • 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" } } • One person, multiple keys: { "1234567890" : { "key1" : "value1", "key2" : "value2" } } • Multiple people: { "1234567890" : { "key1" : "value1" }, "2345678901" : { "key1" : "value2" } } 77 The OpenSocial JavaScript API 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 78 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); }; • 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. 79 RESTful and RPC protocols Servers talking to servers 80 RESTful and RPC protocols Opens new development models •Background processing. •Easier Flash integration. •Mobile applications. 81 RESTful and RPC protocols Communication methods: •RESTful (Representational State Transfer) •RPC (Remote Procedure Call) Formats: •XML •JSON •AtomPub 82 RESTful and RPC protocols REST: •Resources are URLs. Example - People: • All people connected to the given user: /people/{guid}/@all • All friends of the given user: /people/{guid}/@friends • Profile of the given user: /people/{guid}/@self • Profile of the authenticated user: /people/@me/@self • Supported Person fields: /people/@supportedFields 83 RESTful and RPC protocols Querystring parameters customize requests: • Response format (JSON, XML, AtomPub) format={format} • Request extra fields fields={-join|,|field}. • Filtering: filterBy={fieldname} filterOp={operation}filterValue={value} updatedSince={xsdDateTime} networkDistance={networkDistance} • Paging: count={count} sortBy={fieldname} startIndex={startIndex} sortOrder={order} 84 RESTful and RPC protocols REST responses (Person): • JSON: { "id" : "example.org:34KJDCSKJN2HHF0DW20394", "displayName" : "Janey", "name" : {"unstructured" : "Jane Doe"}, "gender" : "female"} • XML: Jane Doe female 85 RESTful and RPC protocols REST responses (Person): • AtomPub: Jane Doe female