Open Social Summit Korea
-
Upload
arne-roomann-kurrik -
Category
Technology
-
view
2.520 -
download
0
description
Transcript of Open Social Summit Korea
![Page 1: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/1.jpg)
1
OpenSocialKorea - November 2008
Arne Roomann-KurrikDeveloper Relations
Yung Choi Software Engineer
![Page 2: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/2.jpg)
2
GadgetsNot widgets, not sprockets, not gidgets, not wadgets
![Page 3: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/3.jpg)
Gadgets
3
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.
![Page 4: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/4.jpg)
Gadgets
4
A gadget server:• Takes the gadget spec as input.• Performs optimizations on the gadget spec.• Outputs HTML, JavaScript, and CSS as one document.
![Page 5: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/5.jpg)
Gadgets
5
A container:• Displays the social network’s user interface.• Opens an IFrame to the rendered gadget.
![Page 6: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/6.jpg)
Gadgets
6
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>
![Page 7: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/7.jpg)
Gadgets
7
Content sections:• Define the current view:
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Hello World!"> <Require feature="dynamic-height" /> </ModulePrefs> <Content type="html" view="canvas"> <![CDATA[ <h1>Hello World</h1>
<style type="text/css"> h1 { color: #dd0000; }</style><script type="text/javascript"> gadgets.window.adjustHeight();</script>
]]> </Content></Module>
![Page 8: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/8.jpg)
Gadgets
8
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.
![Page 9: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/9.jpg)
Gadgets
9
iGoogle "home" view:• On iGoogle, the "home" view is a small,
private page that does not allow ads.
![Page 10: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/10.jpg)
Gadgets
10
iGoogle "canvas" view:• Large private view, allows ads.
![Page 11: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/11.jpg)
Gadgets
11
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>
![Page 12: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/12.jpg)
Gadgets
12
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>
![Page 13: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/13.jpg)
Gadgets
13
<?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!
![Page 14: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/14.jpg)
Gadgets
14
Requesting the gadget XML spec:1. The client requests an app to be rendered.
![Page 15: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/15.jpg)
Gadgets
15
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.
![Page 16: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/16.jpg)
Gadgets
16
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.
![Page 17: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/17.jpg)
17
GadgetsScaling is hard:
• Easy to start and get some users.
![Page 18: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/18.jpg)
18
GadgetsScaling is hard:
• Being popular on one social network can push your server to the limit...
![Page 19: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/19.jpg)
19
GadgetsScaling is hard:
• ...being popular on many networks can be disastrous.
Caching can help!
![Page 20: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/20.jpg)
Gadgets
20
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.
![Page 21: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/21.jpg)
Gadgets
21
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.
![Page 22: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/22.jpg)
Gadgets
22
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.Your server does not even get a request!
![Page 23: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/23.jpg)
Gadgets
23
Optimizations?• Cache, cache, cache.• Rewrite links to use content proxies.• Rewrite relative links to full paths.• Concatenate JS and CSS.• Return only content for the current view.
![Page 24: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/24.jpg)
24
The JavaScript APIs
![Page 25: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/25.jpg)
Gadgets JavaScript
25
gadgets.* utility functions:• gadgets.io.makeRequest()
Make cross-domain AJAX calls to remote servers.
![Page 26: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/26.jpg)
Gadgets JavaScript
26
gadgets.* utility functions:• gadgets.io.makeRequest()
Make cross-domain AJAX calls to remote servers.• gadgets.json.parse() and gadgets.json.stringify()
Native JSON support.
![Page 27: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/27.jpg)
Gadgets JavaScript
27
gadgets.* utility functions:• 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.
![Page 28: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/28.jpg)
Gadgets JavaScript
28
gadgets.* utility functions:• 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.
![Page 29: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/29.jpg)
Gadgets JavaScript
29
gadgets.io.makeRequest():• Make cross-domain AJAX calls to remote servers.
Remote content:• Work with different servers.• AJAX is not cross-domain!• JSONP is only one-way.• Data needs to be cached for millions
of users.
![Page 30: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/30.jpg)
Gadgets JavaScript
30
Requesting remote content:1.The rendered app calls gadgets.io.makeRequest() to fetch
remote content.
![Page 31: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/31.jpg)
Gadgets JavaScript
31
Requesting remote content:1.The rendered app calls gadgets.io.makeRequest() to fetch
remote content. 2.The container requests content from the specified URL.
![Page 32: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/32.jpg)
Gadgets JavaScript
32
Requesting remote content:1.The rendered app calls gadgets.io.makeRequest() to fetch
remote content. 2.The container requests content from the specified URL.3.The container returns the response to the application, which renders
the data.
![Page 33: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/33.jpg)
The OpenSocial JavaScript API
33
Representing users:• Client-side, users must work with the VIEWER and the OWNER.
![Page 34: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/34.jpg)
The OpenSocial JavaScript API
34
Multiple personalities:• When you visit your own profile, you are both the VIEWER and the
OWNER.
![Page 35: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/35.jpg)
The OpenSocial JavaScript API
35
Representing users:• Sometimes, containers allow anonymous browsing.
??
![Page 36: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/36.jpg)
The OpenSocial JavaScript API
36
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.send(response);};
function response(data) { ... };
gadgets.util.registerOnLoadHandler(request);
![Page 37: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/37.jpg)
The OpenSocial JavaScript API
37
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);
![Page 38: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/38.jpg)
The OpenSocial JavaScript API
38
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();};
![Page 39: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/39.jpg)
The OpenSocial JavaScript API
39
Working with people:
• opensocial.Person - JavaScript representation of a user.
![Page 40: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/40.jpg)
The OpenSocial JavaScript API
40
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.
![Page 41: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/41.jpg)
The OpenSocial JavaScript API
41
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.
![Page 42: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/42.jpg)
• 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
42
An OpenSocial Person's fields:• SEXUAL_ORIENTATION• SMOKER• SPORTS• STATUS• TAGS• THUMBNAIL_URL• TIME_ZONE• TURN_OFFS• TURN_ONS• TV_SHOWS• URLS
![Page 43: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/43.jpg)
The OpenSocial JavaScript API
43
Working with people:
• A Collection represents many opensocial.Person objects.
![Page 44: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/44.jpg)
var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "SELF"});
The OpenSocial JavaScript API
44
IdSpec:
var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "FRIENDS"});
• idspec is an object that can represent groups of people.
IdSpec can represent only one person:
var idspec = opensocial.newIdSpec({ "userId" : "1234567890", "groupId" : "family"});
Or specific data:
![Page 45: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/45.jpg)
The OpenSocial JavaScript API
45
Request many people:var idspec = opensocial.newIdSpec({ "userId" : "OWNER", "groupId" : "FRIENDS"});req.add(req.newFetchPeopleRequest(idspec, opt_params), "key");
• Pass an idspec object to the newFetchPeopleRequest function.• 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.
![Page 46: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/46.jpg)
The OpenSocial JavaScript API
46
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.
![Page 47: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/47.jpg)
The OpenSocial JavaScript API
47
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.
![Page 48: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/48.jpg)
The OpenSocial JavaScript API
48
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];
![Page 49: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/49.jpg)
The OpenSocial JavaScript API
49
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:
![Page 50: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/50.jpg)
The OpenSocial JavaScript API
50
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
![Page 51: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/51.jpg)
The OpenSocial JavaScript API
51
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.
![Page 52: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/52.jpg)
Building apps across containers
52
![Page 53: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/53.jpg)
53
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
![Page 54: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/54.jpg)
54
Robustness - Be Explicit
• Spot the bug in this code! Let's request the owner:
• And access their profile URL:
function request() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest( "VIEWER"), "req"); req.send(response);};
function response(data) { var url = data.get("req").getData().getField( opensocial.Person.Field.PROFILE_URL)); ...}
![Page 55: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/55.jpg)
55
Robustness - Be Explicit
• On hi5, url is:
• On orkut, url is:
http://www.hi5.com/friend/profile/ displayProfile.do?userid=XXXXXXXXXX
• The OpenSocial specification only states the following about fields available on Person objects:
"The server will always include ID, NAME, and THUMBNAIL_URL."*
null
*http://rurl.org/qoo
![Page 56: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/56.jpg)
56
Robustness - Be Explicit
• Introducing
• Assign an array of properties you want to access to this optional parameter
opensocial.DataRequest .PeopleRequestFields.PROFILE_DETAILS
var params = {}; params[opensocial.DataRequest .PeopleRequestFields.PROFILE_DETAILS] = [ opensocial.Person.Field.ABOUT_ME, opensocial.Person.Field.ADDRESSES, opensocial.Person.Field.AGE ];
![Page 57: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/57.jpg)
57
Robustness - Be Explicit
• Fixing the request: From this...
function request() { var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest( "VIEWER"), "req"); req.send(response);};
![Page 58: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/58.jpg)
58
Robustness - Be Explicit
• ...to this:
function request() { var req = opensocial.newDataRequest(); var params = {}; params[opensocial.DataRequest.PeopleRequestFields .PROFILE_DETAILS] = [ opensocial.Person.Field.PROFILE_URL ]; req.add(req.newFetchPersonRequest( "VIEWER", params), "req"); req.send(response);};
![Page 59: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/59.jpg)
59
Robustness - Be Explicit
• On hi5, url is:
• On orkut, url is:
http://www.hi5.com/friend/profile/ displayProfile.do?userid=XXXXXXXXXX
http://www.orkut.com/ Profile.aspx?uid=YYYYYYYYY
![Page 60: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/60.jpg)
60
Robustness - Check For Errors
![Page 61: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/61.jpg)
61
Robustness - Check For Errors
• Why is the following code brittle? Request a user by ID:
function request() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest( "14088281537290874435"), "req"); req.send(response);};
function response(data) { var name = data.get("req").getData() .getDisplayName(); ...};
• And get the display name:
![Page 62: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/62.jpg)
62
Robustness - Check For Errors
• If the passed ID is invalid for any reason, the previous code throws a JavaScript error:
• Check for problems! DataRequest.send callbacks get DataResponse arguments with hadError methods:
function response(data) { if (!data.hadError()) { var name = data.get("req").getData() .getDisplayName(); ... }};
data.get("req").getData() has no properties
![Page 63: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/63.jpg)
63
Robustness - Check For Errors
• Inside of these DataResponse objects are nested ResponseItem objects, which also have hadError methods:
• You can check each response individually to see where the point of failure is.
function response(data) { if (!data.hadError()) { ... } else { if (data.get("req").hadError()) { ... } }};
![Page 64: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/64.jpg)
64
Robustness - Check For Errors
• Handling errors gracefully:
• getErrorMessage() provides a human-readable error message, but varies by container.
function response(data) { if (!data.hadError()) { ... } else if (data.get("req").hadError()) { alert(data.get("req").getErrorMessage()); } else { alert("An unknown error occurred"); }};
• This may not be ideal for display to an end user.
![Page 65: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/65.jpg)
• getErrorCode() provides an enum indicating the type of error
65
Robustness - Check For Errors
data.get("req").getErrorCode()
• Check for the type of error and fall back where possible.
![Page 66: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/66.jpg)
66
Robustness - Check For Errors
• opensocial.ResponseItem.Error.BAD_REQUEST• The request was invalid
• opensocial.ResponseItem.Error.FORBIDDEN• The gadget can never have access to this data
• opensocial.ResponseItem.Error.INTERNAL_ERROR• Server problem
• opensocial.ResponseItem.Error.LIMIT_EXCEEDED• Over quota
• opensocial.ResponseItem.Error.NOT_IMPLEMENTED• No container support
![Page 67: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/67.jpg)
function response(data) { if (!data.hadError()) { ... } else if (data.get("req").hadError()) { switch (data.get("req").getErrorCode()) { case opensocial.ResponseItem.Error.BAD_REQUEST: ... break; case opensocial.ResponseItem.Error.INTERNAL_ERROR: ... break; } } else { ...
67
Robustness - Check For Errors
• Check for error types at runtime:
![Page 68: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/68.jpg)
• Not all errors need to be fatal!
• An appropriate response to UNAUTHORIZED would be to call opensocial.requestPermission()
68
Robustness - Check For Errors
switch (data.get("req").getErrorCode()) { case opensocial.ResponseItem.Error.UNAUTHORIZED: opensocial.requestPermission( [ "VIEWER" ], "Share a gift with your friend", callback); break;}
![Page 69: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/69.jpg)
• While you can react to an UNAUTHORIZED error, there’s also the opensocial.hasPermission()method, which you can check before making the request:
69
Robustness - Off Track For A Second
var has_permission = opensocial.hasPermission( opensocial.Permission.VIEWER);
• has_permission will be boolean true or false
![Page 70: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/70.jpg)
• Let’s go back to that requestPermission call:
70
Robustness - Check For Errors
opensocial.requestPermission( [ opensocial.Permission.VIEWER ], “Share a gift with your friend”, callback);
• callback will be called when this request completes and get a ResponseItem as a parameter.
• What happens if the container doesn’t support requestPermission?
![Page 71: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/71.jpg)
• Unimplemented methods will get an NOT_IMPLEMENTED error code:
71
Robustness - Check For Errors
function callback(data) { if (!data.hadError()) { ... } else { switch(data.getErrorCode()) { case opensocial.ResponseItem.Error.NOT_IMPLEMENTED: ... break; } }};
![Page 72: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/72.jpg)
• A container may not implement any method and still remain spec compliant as long as they return the NOT_IMPLEMENTED error code.
• This applies to any method where the callback receives a DataResponse or ResponseItem, including:
• requestCreateActivity• requestPermission• requestSendMessage• requestShareApp• all new*Request calls
• So be sure to check for such cases!
72
Robustness - Check For Errors
![Page 73: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/73.jpg)
73
Robustness - Check For Support
![Page 74: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/74.jpg)
74
Robustness - Check For Support
• Containers have different purposes. Not every field may be available.
opensocial.Person.Field.LOOKING_FOR
MyOpenSpace.Person.Field.DESIRE_TO_MEET
hi5.PersonField.PRESENCE
• hi5: not supported• MySpace: not supported• orkut: supported
• hi5: not supported• MySpace: supported• orkut: not supported
• hi5: supported• MySpace: not supported• orkut: not supported
![Page 75: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/75.jpg)
if (MySpace) { ...} else if (hi5) { ...} else if (orkut) { ...} else { ...}
75
Robustness - Check For Support
• Your impulse may be to write code like this:
• This is brittle! How do you scale to new containers automatically?
![Page 76: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/76.jpg)
var supports_lookingfor = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, opensocial.Person.Field.LOOKING_FOR);
76
Robustness - Check For Support
• Sounds like a job for capabilities querying:
• Now supports_lookingfor has the following value:• on hi5: false• on MySpace: false• on orkut: true
• Goal: Build apps that programatically utilize extra functionality based on such booleans
• Why is this approach brittle?
![Page 77: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/77.jpg)
var supports_desiretomeet = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, MyOpenSpace.Person.Field.DESIRE_TO_MEET);
77
Robustness - Check For Support
• Try a container-specific profile field:
• Now supports_desiretomeet has the following value:
• Oops!
• on hi5: JavaScript error• on MySpace: true• on orkut: JavaScript error
![Page 78: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/78.jpg)
var supports_desiretomeet = false;if (MyOpenSpace) { var supports_desiretomeet = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, MyOpenSpace.Person.Field.DESIRE_TO_MEET);}
78
Robustness - Check For Support
• What about:
• Now supports_desiretomeet has the following value:• on hi5: false• on MySpace: true• on orkut: false
• This approach defeats the purpose of querying!
![Page 79: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/79.jpg)
var supports_desiretomeet = false;if (MyOpenSpace) { var supports_desiretomeet = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, MyOpenSpace.Person.Field.DESIRE_TO_MEET);}
79
Robustness - Check For Support
• You should be able to see that:
• Is really the same as:
var supports_desiretomeet = (MyOpenSpace) ? true : false;
![Page 80: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/80.jpg)
if (MyOpenSpace) { ...} else if (hi5) { ...} else { ...}
80
Robustness - Check For Support
• Remember, we don't want to write code like this:
• Apps should query by capability, not container name
![Page 81: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/81.jpg)
var env = opensocial.getEnvironment();var supports_presence = env.supportsField( opensocial.Environment.ObjectType.PERSON, hi5.PersonField.PRESENCE);
var supports_desiretomeet = env.supportsField( opensocial.Environment.ObjectType.PERSON, MyOpenSpace.Person.Field.DESIRE_TO_MEET);
var supports_lookingfor = env.supportsField( opensocial.Environment.ObjectType.PERSON, opensocial.Person.Field.LOOKING_FOR);
81
Robustness - Check For Support
• Don't do this:
![Page 82: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/82.jpg)
var env = opensocial.getEnvironment();var supports_presence = env.supportsField( opensocial.Environment.ObjectType.PERSON, "presence");
var supports_desiretomeet = env.supportsField( opensocial.Environment.ObjectType.PERSON, "DESIRE_TO_MEET");
var supports_lookingfor = env.supportsField( opensocial.Environment.ObjectType.PERSON, "lookingFor");
82
Robustness - Check For Support
• A workaround is to ignore the enums and go for string representations:
![Page 83: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/83.jpg)
83
Robustness - Check For Support
Wait a sec, isn’t this a worst practice?
![Page 84: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/84.jpg)
84
Robustness - Check For Support
• Thankfully, the specification addresses this issue:
“Extra person, activity or other object fields should be defined in an enum under the container's namespace, and the environment should allow applications to discover these fields.”
![Page 85: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/85.jpg)
85
Robustness - Check For Support
• Thankfully, the specification addresses this issue:
opensocial.getEnvironment().supportsField( "person", "orkut.specialPersonField")
opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, orkut.PersonField.SPECIAL_FIELD)
*http://rurl.org/qr4
“For example, if the field orkut.PersonField.SPECIAL_FIELD is defined as 'orkut.specialPersonField', then
should both return true.”*
and
![Page 86: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/86.jpg)
86
Robustness - Check For Support
• We now have runtime access to capabilities across all containers:
hi5 MySpace orkut
supports_presence
supports_desiretomeet
supports_lookingfor
TRUE FALSE FALSE
FALSE TRUE FALSE
FALSE FALSE TRUE
• Drawback: Now we have to be sensitive to the underlying string value for Profile field enums
![Page 87: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/87.jpg)
if (MyOpenSpace) { ...} else if (hi5) { ...} else { ...}
87
Robustness - Check For Support
• Now, instead of: • Use:
if (supports_presence) { ...} if (supports_desiretomeet) { ...} if (supports_lookingfor) { ...}
![Page 88: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/88.jpg)
88
Resources / Questions?
![Page 89: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/89.jpg)
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
89
![Page 90: Open Social Summit Korea](https://reader033.fdocuments.us/reader033/viewer/2022050906/55514914b4c905f2288b4f29/html5/thumbnails/90.jpg)
Hacking!
90
Beginner (http://is.gd/7W05):• Write a gadget to display "Hello World" in your favorite container.• Display a list of your friends.• Display the OWNER's favorite movies.• Post an activity update.• Write an app that uses AppData to store preferences (http://is.gd/7W0g)
Intermediate:• Make an app that works on two containers using the same XML.• Use makeRequest to list the OWNER's favorite movies and
information from a web API such as amazon.com or imdb.com• Write a gift giving app using AppData: (http://is.gd/7W0v)
Advanced:• Write a server-side app that uses the Java (http://is.gd/7W0E) or
PHP (http://is.gd/7W0K) client libraries.