More Related Content Similar to Opensocial Tech Talk Beijing - Chinese Similar to Opensocial Tech Talk Beijing - Chinese (20) 1. OpenSocial
- 2008 10
Arne Roomann-Kurrik
Developer Relations
Jacky Wang
1
4. “ ” ?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
4
5. “ ” ?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
5
6. “ ” ?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
6
7. “ ” ?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
7
8. “ ” ?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
8
9. “ ” ?
This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
9
10. “ ” ?
“ Internet , ?”
10
22. ...
• ,
• , “ ”
• ,
22
24. , ?
• ,
• , ,
,
• + = !
24
30. API OpenSocial
OpenSocial
30
31. ≠ social
OpenSocial OpenSocial
31
35. OpenSocial API
:
• 0.6 - API (JavaScript)
• 0.7 - API (RESTful)
• 0.81 ( )- API
: JavaScript, Web
• Gadgets XML
• Gadgets JavaScript
• OpenSocial JavaScript
: JSON / XML , OAuth
• RESTful protocol
• RPC protocol
35
37. –
Gadget Spec ( ):
• XML , OpenSocial
• Web , Web Google Pages
• ,
Web
• XML
• HTML
• JavaScript
• CSS
37
38. –
:
• Gadget Spec ( )
• Gadget Spec , JavaScript
• HTML, JavaScript, CSS ,
38
39. –
:
• ,
• iframe , Gadget
,
,
Domain
39
40. – Gadget Spec XML
• HTML “Hello World”
• CSS
• JavaScript
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
<ModulePrefs title=quot;Hello World!quot;>
<Require feature=quot;dynamic-heightquot; />
</ModulePrefs>
<Content type=quot;htmlquot;>
<![CDATA[
<h1>Hello World</h1>
<style type=quot;text/cssquot;>
h1 { color: #dd0000; }
</style>
<script type=quot;text/javascriptquot;>
gadgets.window.adjustHeight();
</script>
]]>
</Content>
</Module>
40
41. –
Gadget Spec XML
1. , Gadget
41
42. –
Gadget Spec XML
1. , Gadget
2. XML Web , Gadget Spec XML
42
43. –
Gadget Spec XML
1. , Gadget
2. XML Web , Gadget Spec XML
3. XML Spec HTML ,
43
44. –
Gadget Spec XML
• Gadget Spec ,
• ,
44
45. –
Gadget Spec XML
1. , Gadget
Spec
45
46. –
Gadget Spec XML
1. , Gadget
Spec
2. XML Spec HTML ,
46
47. –
?
• ,
• ,
• view,
47
49. Gadgets
iGoogle quot;homequot; view:
• iGoogle , quot;homequot; view ,
,
49
50. Gadgets
iGoogle quot;canvasquot; view:
• iGoogle , quot;canvasquot; view
,
50
51. Gadget Spec XML views:
• view, <Content>
• view=quot;view namesquot;
• view , view=quot;home,canvasquot;
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
<ModulePrefs title=quot;Hello World!quot;>
<Require feature=quot;dynamic-heightquot; />
</ModulePrefs>
<Content type=quot;htmlquot; view=quot;homequot;>
<![CDATA[
...
]]>
</Content>
<Content type=quot;htmlquot; view=quot;canvasquot;>
<![CDATA[
...
]]>
</Content>
</Module>
51
52. JavaScript :
• gadgets.io.makeRequest()
, AJAX
• gadgets.json.parse() and gadgets.json.stringify()
JSON , eval
• gadgets.util.escapeString()
innerHTML
• gadgets.util.registerOnLoadHandler()
,
52
54. –
:
1. gadgets.io.makeRequest() ,
54
55. –
:
1. gadgets.io.makeRequest() ,
2. URL
55
56. –
:
1. gadgets.io.makeRequest() ,
2. URL
3. ,
56
57. :
• dynamic-height - /
• views - ,
• skins -
• ...
• OpenSocial JavaScript API !
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
<ModulePrefs title=quot;Hello World!quot;>
<Require feature=quot;dynamic-heightquot; />
<Require feature=quot;opensocial-0.8quot; />
</ModulePrefs>
<Content type=quot;htmlquot;>
<![CDATA[
...
]]>
</Content>
</Module>
57
61. The OpenSocial JavaScript API
OpenSocial :
• OpenSocial DataRequest
• DataRequest
• DataRequest OpenSocial
• ,
function request() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(quot;OWNERquot;), quot;get_ownerquot;);
req.add(req.newFetchPersonRequest(quot;VIEWERquot;), quot;get_viewerquot;);
req.add(req.newFetchActivitiesRequest(quot;VIEWERquot;), quot;vactivitiesquot;);
req.add(req.newFetchPersonAppDataRequest(quot;OWNERquot;, quot;*quot;), quot;odataquot;);
...
req.send(response);
};
function response(data) { ... };
gadgets.util.registerOnLoadHandler(request);
61
62. The OpenSocial JavaScript API
OpenSocial :
• , Key
• ,
• ,
• getData()
function response(data) {
if (data.hadError()) {
if (data.get(quot;get_ownerquot;).hadError()) {
...
}
if (data.get(quot;get_viewerquot;).hadError()) {
...
}
...
}
var owner = data.get(quot;get_ownerquot;).getData();
var viewer = data.get(quot;get_viewerquot;).getData();
};
62
64. The OpenSocial JavaScript API
:
req.add(req.newFetchPersonRequest(idspec, opt_params), quot;keyquot;);
• idspec “VIEWER”, “OWNER” ID
• opt_params ,
newFetchPersonRequest :
var owner = data.get(quot;keyquot;).getData();
alert(owner.getDisplayName());
• opensocial.Person
• , ,
, , ,
64
65. The OpenSocial JavaScript API
opensocial.Person :
• getDisplayName()
,
• getField(key, opt_params)
, key
• getId()
ID
• isOwner()
,
• isViewer()
, ,
65
66. The OpenSocial JavaScript API
opensocial.Person :
• ABOUT_ME • JOB_INTERESTS • SEXUAL_ORIENTATION
• ACTIVITIES • JOBS • SMOKER
• ADDRESSES • LANGUAGES_SPOKEN • SPORTS
• AGE • LIVING_ARRANGEMENT • STATUS
• BODY_TYPE • LOOKING_FOR • TAGS
• BOOKS • MOVIES • THUMBNAIL_URL
• CARS • MUSIC • TIME_ZONE
• CHILDREN • NAME • TURN_OFFS
• CURRENT_LOCATION • NETWORK_PRESENCE • TURN_ONS
• DATE_OF_BIRTH • NICKNAME • TV_SHOWS
• DRINKER • PETS • URLS
• EMAILS • PHONE_NUMBERS
• ETHNICITY • POLITICAL_VIEWS
• FASHION • PROFILE_SONG
• FOOD • PROFILE_URL
• GENDER • PROFILE_VIDEO
• HAPPIEST_WHEN • QUOTES
• HAS_APP • RELATIONSHIP_STATUS
• HEROES • RELIGION
• HUMOR • ROMANCE
• ID • SCARED_OF
• INTERESTS • SCHOOLS
66
68. The OpenSocial JavaScript API
:
var idspec = opensocial.newIdSpec({
“userId” : “OWNER”,
“groupId” : “FRIENDS”
});
req.add(req.newFetchPeopleRequest(idspec, opt_params), quot;keyquot;);
• idspec . “userId” “VIEWER”,
“OWNER” ID, “groupId” “SELF”, “FRIENDS”
• opt_params ,
,
newFetchPersonRequest :
var owner_friends = data.get(quot;keyquot;).getData();
owner_friends.each(function (person) {
alert(person.getDisplayName());
});
• opensocial.Person
each()
68
70. The OpenSocial JavaScript API
SNS ( ):
req.add(req.newUpdatePersonAppDataRequest(idspec, key, value));
• idspec , “VIEWER”
• key
• value
70
71. The OpenSocial JavaScript API
:
var idspec = opensocial.newIdSpec({
quot;userIdquot; : quot;OWNERquot;,
quot;groupIdquot; : quot;SELFquot;
});
req.add(req.newFetchPersonAppDataRequest(idspec, keys),
quot;keyquot;);
req.add(req.newFetchPersonRequest(quot;OWNERquot;), quot;ownerkeyquot;);
• idspec , newFetchPeopleRequest
• keys
• ID ,
OWNER
newFetchPersonAppDataRequest :
var app_data = data.get(quot;keyquot;).getData();
var value = app_data[owner.getId()][key];
71
72. The OpenSocial JavaScript API
:
• ID ,
ID,
{ quot;1234567890quot; : { quot;key1quot; : quot;value1quot; } }
• , :
{
quot;1234567890quot; : {
quot;key1quot; : quot;value1quot;,
quot;key2quot; : quot;value2quot;
}
}
• :
{
quot;1234567890quot; : { quot;key1quot; : quot;value1quot; },
quot;2345678901quot; : { quot;key1quot; : quot;value2quot; }
}
72
74. The OpenSocial JavaScript API
:
function postActivity(text) {
var params = {};
params[opensocial.Activity.Field.TITLE] = text;
var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity(activity,
opensocial.CreateActivityPriority.HIGH, callback);
};
• TITLE
• opensocial.newActivity() opensocial.Activity
• opensocial.requestCreateActivity() Activity
SNS
74
77. RESTful RPC
:
• RESTful (Representational State Transfer)
• RPC (Remote Procedure Call)
:
• XML
• JSON
• AtomPub
77
78. RESTful RPC
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
78
79. RESTful RPC
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}
sortOrder={order}
startIndex={startIndex}
79
80. RESTful RPC
REST responses (Person):
• JSON:
{
quot;idquot; : quot;example.org:34KJDCSKJN2HHF0DW20394quot;,
quot;displayNamequot; : quot;Janeyquot;,
quot;namequot; : {quot;unstructuredquot; : quot;Jane Doequot;},
quot;genderquot; : quot;femalequot;
}
• XML:
<person xmlns=quot;http://ns.opensocial.org/2008/opensocialquot;>
<id></id>
<displayName></displayName>
<name>
<unstructured>Jane Doe</unstructured>
</name>
<gender>female</gender>
</person>
80
81. RESTful RPC
REST responses (Person):
• AtomPub:
<entry xmlns=quot;http://www.w3.org/2005/Atomquot;>
<content type=quot;application/xmlquot;>
<person xmlns=quot;http://ns.opensocial.org/2008/opensocialquot;>
<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>
81
82. RESTful RPC
REST:
• Perform operations using different HTTP methods on each URL.
CRUD: HTTP:
• Create • POST
• Retrieve • GET
• Update • PUT
• Delete • DELETE
82
83. RESTful RPC
REST has some disadvantages:
• Batch support requires multiple HTTP requests, or a contrived URL
scheme.
• Specifying multiple users via querystring is difficult. Is
?uid=1234,5678 the same resource as ?uid=5678,1234 ?
83
84. RESTful RPC
RPC:
• One endpoint - parameters specify methods to call.
• Batch support.
• Specify collections of users through passed arguments, not URLs.
Example - Fetch current user:
• Request • Response
POST /rpc HTTP/1.1 HTTP/1.x 207 Multi-Status
Host: api.example.org Content-Type: application/json
Authorization: <Auth token> {
Content-Type: application/json quot;idquot; : quot;myselfquot;
{ quot;resultquot; : {
quot;methodquot; : quot;people.getquot;, quot;idquot; : quot;example.org:34KJDCSKJN2HHF0DW20394quot;,
quot;idquot; : quot;myselfquot; quot;namequot; : { quot;unstructuredquot; : quot;Jane Doequot;},
quot;genderquot; : quot;femalequot;
quot;paramsquot; : {
}
quot;useridquot; : quot;@mequot;,
}
quot;groupidquot; : quot;@selfquot;
}
}
84
85. RESTful RPC
Authentication:
• Both protocols use OAuth to identify users and apps.
• Depending on what the application needs to do, it can use two-legged
or three-legged OAuth.
Two-legged OAuth:
• The application authenticates directly with the container.
• Perform non-user specific operations:
• Update persistent data for app users.
• Can request information for users who have shared their profile
information with the app.
Three-legged OAuth:
• The user tells the container to give profile access to the application.
• Perform user specific operations:
• Post activities.
• Fetch friends of the current user.
85
86. RESTful RPC
Client libraries are being created for PHP, Java, and Python.
• Help you connect to OpenSocial containers, and work with social
data on your server.
Sample: log into a container:
86
87. RESTful RPC
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:
87
88. RESTful RPC
• Once OAuth is used, you can store a user token for later access.
Sample: use an existing token:
88
89. RESTful RPC
• Once authentication has happened, requests are easy:
Sample: Fetch the current user:
89
90. RESTful RPC
Sample: Fetch the current user’s friends:
90
92. Shindig
:
• API ,
•
• / ¥/ !
92
93. Shindig
Apache Shindig :
•
• Java PHP
• ,
SNS Web
: ,
,
OpenSocial
http://incubator.apache.org/shindig/
93
97. Caja
Caja :
• JavaScript , Google
• OpenSocial , ,
• , inline
, iframe
http://code.google.com/p/google-caja/
97
98. :
• OpenSocial HTML
• DOM ,
• innerHTML
OpenSocial :
• : ,
- HTML,
• : XSS ( ) ,
XSS
• / :
• JavaScript, OpenSocial
• : OpenSocial API ,
; Repeated
98
99. <script type=quot;text/javascriptquot;
src=quot;http://ostemplates-demo.appspot.com/ostemplates.jsquot;>
</script>
<script type=quot;text/os-templatequot;>
<b>${owner.displayName}'s friends</b>
<ul>
<li repeat=quot;friendsquot;>${displayName}</li>
</ul>
</script>
<script type=quot;text/javascriptquot;>
function loadData() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('OWNER'), 'owner');
var idSpecFriends = opensocial.newIdSpec(
{'userId':'OWNER', 'groupId':'FRIENDS'});
req.add(req.newFetchPeopleRequest(idSpecFriends), 'friends');
req.send(function(data) {
os.Container.processDocument(data);
});
}
gadgets.util.registerOnLoadHandler(loadData);
</script> http://ostemplates-demo.appspot.com/
99
108. :
•
• ,
• :
http://tinyurl.com/4nuzll
108
114. • OpenSocial : http://rurl.org/ss3
• OpenSocial , , : 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 : http://ostemplates-demo.appspot.com/
• OpenSocial Dev App: http://osda.appspot.com
• Partuza: http://partuza.nl
• OpenSocial :
http://groups.google.com/group/opensocial-and-gadgets-spec/topics
114
