Google Devfest Bangkok - OpenSocial

OpenSociala standard for the social web

Patrick Chanezonchanezon@google.com

BangkokOctober 31 2008

OpenSocial’s goal:Make the web more social

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 License

“Internet, what do you do with your friends?”

“We look at each other”

“Talking”

“Laughing”

“We help each other”

“We read together”

“We do projects together”

The social internet

A social website..•Provides a feature that becomes more engaging as the number of usersgrows.•Uses relationships between people to present users interesting information.

The social internetSome social websites...

The social internetA social website..•Has overhead to manage users and relationships.•Grows slowly because users must sign up to use the site.

What if we removethe overhead?•Developers can focuson providingfeatures, notmanaging users.

The social internetA social network..•Manages large numbers of users and relationships.•Is slow to add new features.

The social internetMany social networks...

The social internetHow 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 internetA 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 internetLots of social apps...

Need for a social APIHow do we put apps in social networks?

A day in the life of a social app developer

Introduction to OpenSocialNumbers:•19+ implemented Containers•40+ committed Containers•3000+ applications•400,000,000+ of users

In Thailand:

8 M users

33Today: 375 Million User Reach

OpenSocial “Containers”

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

Containers in the region

The OpenSocial APIs

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

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) launchedhttp://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!

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.

GadgetsNot widgets, not sprockets, not gidgets, not wadgets

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.•JavaScript for interactivity.•CSS for presentation.

GadgetsA gadget server:•Takes the gadget spec as input.•Performs optimizations on the gadget spec.•Outputs HTML, JavaScript, and CSS as one document.

Gadgets

A container:•Displays the social network’s user interface.•Opens an IFrame to the rendered gadget.

Containers and gadgetservers are both run bythe social network, butdo not need to be onthe same machine, oreven domain.

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.

<?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>

</script> ]]> </Content></Module>

GadgetsRequesting the gadget XML spec:1. The client requests an app to be rendered.

GadgetsRequesting the gadget XML spec:1. The client requests an app to be rendered.2. The container fetches the gadget XML spec from its host.

GadgetsRequesting 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.

GadgetsRequesting 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 ofusers.

GadgetsRequesting 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.

GadgetsRequesting 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.

GadgetsWhat 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.

GadgetsWhat 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 dependingon where it is rendered.

Gadgets

iGoogle "home" view:•On iGoogle, the "home" view is a small,private page that does not allow ads.

Gadgets

iGoogle "canvas" view:•Large private view, allows ads.

GadgetsWorking 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 exampleview="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>

GadgetsJavaScript 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

gadgets.io.makeRequest():•Make cross-domain AJAX calls to remote servers.

Remote content:•Most interesting gadgets will need towork 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.

GadgetsRequesting remote content:1.The rendered app calls gadgets.io.makeRequest() to fetch remote content. This call is sent to the container.

GadgetsRequesting 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.

GadgetsRequesting 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

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

<?xml version="1.0" encoding="UTF-8" ?><Module><ModulePrefs title="Hello Social!"> <Requirefeature="opensocial-0.8" /> </ModulePrefs> <Contenttype="html"> <![CDATA[ ... ]]></Content></Module>

The OpenSocial JavaScript API is a gadget feature, too!

The OpenSocial JavaScript API“It's people!”

The OpenSocial JavaScript APIRepresenting users:•Client-side, users must work with the VIEWER and the OWNER.

The OpenSocial JavaScript API

Multiple personalities:•When you visit your own profile, you are both the VIEWER and the OWNER.

The OpenSocial JavaScript APIOpenSocial 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 APIOpenSocial 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.

The OpenSocial JavaScript APIWorking with people:

• opensocial.Person - JavaScript representation of a user.

The OpenSocial JavaScript APIRequest 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.Personobject.

• Person objects can contain lots of information,such as addresses, companies, phone numbers,favorite movies, and thumbnail urls.

The OpenSocial JavaScript APIMethods available on an OpenSocial Person:

• getDisplayName()Gets a text display name for this person; guaranteed to return a usefulstring. 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 ownerof the current page. isViewer()Returns true if this person object represents thecurrently logged in user.

• ABOUT_MEACTIVITIESADDRESSESAGEBODY_TYPEBOOKSCARSCHILDRENCURRENT_LOCATIONDATE_OF_BIRTHDRINKEREMAILSETHNICITYFASHIONFOODGENDERHAPPIEST_WHENHAS_APPHEROESHUMORIDINTERESTS

• JOB_INTERESTSJOBSLANGUAGES_SPOKEN• LIVING_ARRANGEMENTLOOKING_FORMOVIESMUSICNAMENETWORK_PRESENCENICK

NAMEPETSPHONE_NUMBERSPOLITICAL_VIEWSPROFILE_SONGPROFILE_URLPROFILE_VIDEOQUOTESRELATIONSHIP_STATUSRELIGIONROMANCESCARED_OFSCHOOLS

The OpenSocial JavaScript APIAn OpenSocial Person's fields:

• SEXUAL_ORIENTATION• SMOKER• SPORTSSTATUSTAGS• THUMBNAIL_URL• TIME_ZONETURN_OFFSTURN_ONSTV_SHOWSURLS

The OpenSocial JavaScript APIWorking with people:

• A Collection represents many opensocial.Person objects.

The OpenSocial JavaScript APIRequest 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 profilefields 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.Personobjects. Iterate over these by using the each() method.

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.

The OpenSocial JavaScript APISet 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 APIFetch 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 asnewFetchPeopleRequest.

• 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 APIFetch persistent data:

{ "1234567890" : { "key1" : "value1" }, "2345678901" : { "key1" : "value2" }}

• Data is returned as an object indexed by ID number, then as an objectindexed 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 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.

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.• Call opensocial.newActivity() to create a new Activity instance.• Call opensocial.requestCreateActivity() to post the activity to the

container.

RESTful and RPC protocolsServers talking to servers

RESTful and RPC protocolsOpens new development models•Background processing.•Easier Flash integration.•Mobile applications.

RESTful and RPC protocolsCommunication methods:•RESTful (Representational State Transfer)•RPC (Remote Procedure Call)

Formats:•XML•JSON•AtomPub

RESTful and RPC protocolsREST:•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

• 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 protocolsREST responses (Person):

{ "id" : "example.org:34KJDCSKJN2HHF0DW20394", "displayName" : "Janey","name" : {"unstructured" : "Jane Doe"}, "gender" : "female"}

• JSON:

• XML:

RESTful and RPC protocolsREST 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 protocolsREST:•Perform operations using different HTTP methods on each URL.

CRUD:•Create•Retrieve•Update•Delete

HTTP:•POST•GET•PUT•DELETE

RESTful and RPC protocolsREST has some disadvantages:•Batch support requires multiple HTTP requests, or a contrived URLscheme.•Specifying multiple users via querystring is difficult. Is?uid=1234,5678 the same resource as ?uid=5678,1234 ?

RESTful and RPC protocolsRPC:•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: <Authtoken>Content-Type: application/json{"method" : "people.get", "id" : "myself""params" : { "userid" : "@me","groupid" : "@self" }}

Example - Fetch current user:• Request

HTTP/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 protocolsAuthentication:•Both protocols use OAuth to identify users and apps.•Depending on what the application needs to do, it can use two-leggedor 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 protocolsClient libraries are being created for PHP, Java, and Python.•Help you connect to OpenSocial containers, and work with socialdata on your server.

Sample: log into a container:

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•Once OAuth is used, you can store a user token for later access.

Sample: use an existing token:

RESTful and RPC protocols•Once authentication has happened, requests are easy:

Sample: Fetch the current user:

Sample: Fetch the current user’s friends:

Development ModelsHow OpenSocial apps are built

OpenSocial ToolsWhat sets us apart from the animals

ShindigWriting a gadget server is difficult:•Fast changing API - hard to keep up.•Standardization is hard to get right.•Costs ¥ / 元 !

ShindigApache Shindig to the rescue!•Open Source project.•Available in Java and PHP.•Run by itself and connect to anexisting social site to addOpenSocial support.•Goal: Launch anew (simple)container in underan hour’s worthof work

http://incubator.apache.org/shindig/

OpenSocial Dev AppDevelopment tool to test out JS code in different containers

http://osda.appspot.com

101101

Upcoming FeaturesCaja and Templates

CajaWhen JavaScript goes bad•Gadgets can be a new vector for phishing, spam, malware.Social spread ofgadgets can spread bad gadgets too.Caja reduces threats with a JavaScriptsanitizer as an additional "sandbox"on top of iFrame protection.

• A capability-based Javascript sanitizer.An Open Source project fromGoogle.Optional but recommended forOpenSocial containers.Will eventually be secure enoughto run gadgetsinline instead of in iframes.

Caja is:

http://code.google.com/p/google-caja/

TemplatesNeed 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

http://ostemplates-demo.appspot.com/

Templates

http://ostemplates-devapp.appspot.com/

Templates developer application available:

107107

The OpenSocial specification process“We can fix it, we have the technology”

The OpenSocial specification process

113113

ChallengesNobody said this was going to be easy

Challenges

This lumberjack willthank anyone who

helps solve thefollowing problems...

David Glazer, Director of Engineering, GoogleOpenSocial Foundation board member

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

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.

ChallengesScaling is hard:•Easy to start and get some users.

ChallengesScaling is hard:•Being popular on one social networkcan push your server to the limit...

119119

Scaling is hard:•...being popular on many networkswill push you right over.

120120

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

OpenSocial Gadget Contest for Southeast Asia

• To support the developer community and encourageinnovation on the OpenSocial platform in SoutheastAsia

• Countries: Malaysia, Philippines, Singapore, Thailand,Vietnam

• 4 winners per country: Nintendo Wii, Apple iPod Touchprizes

• Judging panel: Google, eXo Platform, Friendster,Globant, hi5

• Dates:Registration opens: Nov 15, 2008Registration ends: Jan 10, 2009Winners notified: Jan 23, 2009Results announced: Feb 6, 2009

• The REAL reward for local developers: winning gadgetsto be promoted on OpenSocial partner websites topotentially reach hundreds of millions of Internet usersworldwide

• http://code.google.com/events/apacdevfest/contest

Learn morecode.google.com

Google Devfest Bangkok - OpenSocial

creative commons

peopleguid

domain ajax

side apis

extra request

gadget xml

fetch remote

rpc protocolsrest

Technology

OpenSocial Kevin Marks Chris Chabot Agenda Introduction -...

Introduction to Online Tools for Business - GDG DevFest...

OpenSocial gadgets at Eclipse

Creating OpenSocial Apps

State Of Opensocial

2011 AMIA OpenSocial Presentation

OpenSocial done right€¦ · OpenSocial done right...

OpenSocial Done Right

2008년 OpenSocial 컨퍼런스 발표

Primeiro Dia Livre Opensocial

data spec opensocial

Sonico: OpenSocial Virality Guide

Getting Social with OpenSocial

OpenSocial Dashboard

Sonico OpenSocial Launch

Programmer Lady - GDG DevFest Bangkok 2013