Opensocial Tech Talk Beijing - Chinese

OpenSocial
- 2008 10

Arne Roomann-Kurrik
Developer Relations

Jacky Wang

1

“ ” ?

“Eliette, ?”
3

“ ” ?

This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
4

“ ” ?

5

“ ” ?

6

“ ” ?

7

“ ” ?

8

“ ” ?

9

“ ” ?

“ Internet , ?”
10

...
• / ,
• ,

17

...
•
• ,

,

:
•

,

19

...
• ,
• , “ ”
• ,

22

, ?
• ,
• , ,
,
• + = !

24

API OpenSocial

OpenSocial

30

≠ social

OpenSocial OpenSocial

31

OpenSocial
:
• 19+ , 40+
• ,
•

:

34

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

Gadgets –
, , , ... –

36

–
Gadget Spec ( ):
• XML , OpenSocial
• Web , Web Google Pages
• ,

Web
• XML
• HTML
• JavaScript
• CSS

37

–
:
• Gadget Spec ( )
• Gadget Spec , JavaScript
• HTML, JavaScript, CSS ,

38

–
:
• ,
• iframe , Gadget

,

,
Domain

39

– 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

–
Gadget Spec XML
1. , Gadget

41

–
Gadget Spec XML
1. , Gadget
2. XML Web , Gadget Spec XML

42

–
Gadget Spec XML
1. , Gadget
2. XML Web , Gadget Spec XML
3. XML Spec HTML ,

43

–
Gadget Spec XML
• Gadget Spec ,
• ,

44

–
Gadget Spec XML
1. , Gadget
Spec

45

–
Gadget Spec XML
1. , Gadget
Spec
2. XML Spec HTML ,

46

–
?
• ,
• ,
• view,

47

views?
• ,
• ,
• , ,

• , views ,

48

Gadgets

iGoogle quot;homequot; view:
• iGoogle , quot;homequot; view ,
,
49

Gadgets

iGoogle quot;canvasquot; view:
• iGoogle , quot;canvasquot; view
,

50

Gadget Spec XML views:
• view, <Content>
• view=quot;view namesquot;
• view , view=quot;home,canvasquot;
<Module>
</ModulePrefs>
<Content type=quot;htmlquot; view=quot;homequot;>
<![CDATA[
...
]]>
</Content>
<Content type=quot;htmlquot; view=quot;canvasquot;>
<![CDATA[
...
]]>
</Content>
</Module>
51

JavaScript :
• gadgets.io.makeRequest()
, AJAX
• gadgets.json.parse() and gadgets.json.stringify()
JSON , eval
• gadgets.util.escapeString()
innerHTML
• gadgets.util.registerOnLoadHandler()
,

52

–
gadgets.io.makeRequest():
• , AJAX

:
• ,
,
• AJAX
• JSONP ,

• ,

53

–
:
1. gadgets.io.makeRequest() ,

54

–
:

2. URL

55

–
:

2. URL
3. ,

56

:
• dynamic-height - /
• views - ,
• skins -
• ...
• OpenSocial JavaScript API !
<Module>
<Require feature=quot;opensocial-0.8quot; />
</ModulePrefs>
<Content type=quot;htmlquot;>
<![CDATA[
...
]]>
</Content>
</Module>
57

OpenSocial JavaScript
“ ... , ”

58

The OpenSocial JavaScript API

• , VIEWER OWNER

59


• , VIEWER
OWNER

60

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

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

OpenSocial “ ” :
• opensocial.Person - JavaScript

63

:
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

opensocial.Person :

• getDisplayName()
,
• getField(key, opt_params)
, key
• getId()
ID
• isOwner()
,
• isViewer()
, ,

65

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

• Collection opensocial.Person

67

:
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

• SNS “ - ”
• , JSON
• :
•

69

SNS ( ):
req.add(req.newUpdatePersonAppDataRequest(idspec, key, value));

• idspec , “VIEWER”
• key
• value

70

:
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

:
• 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

• API,
• HTML
•

orkut MySpace hi5

73

:
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

RESTful RPC
, ...

75

RESTful RPC
:
•
•
• Flash

76

RESTful RPC
:
• RESTful (Representational State Transfer)
• RPC (Remote Procedure Call)
:
• XML
• JSON
• AtomPub

77

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

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

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

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

RESTful RPC
REST:
• Perform operations using different HTTP methods on each URL.

CRUD: HTTP:
• Create • POST
• Retrieve • GET
• Update • PUT
• Delete • DELETE

82

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

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

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

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

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

RESTful RPC
• Once OAuth is used, you can store a user token for later access.

Sample: use an existing token:

88

RESTful RPC
• Once authentication has happened, requests are easy:
Sample: Fetch the current user:

89

RESTful RPC
Sample: Fetch the current user’s friends:

90

OpenSocial
“ ”

91

Shindig
:
• API ,
•
• / ¥/ !

92

Shindig
Apache Shindig :
•
• Java PHP
• ,
SNS Web

: ,

,
OpenSocial

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

OpenSocial Dev App
, SNS JavaScript

http://osda.appspot.com
94

Caja
JavaScript ...
• ,
•
• Caja iframes ,
JavaScript
,

96

Caja
Caja :
• JavaScript , Google
• OpenSocial , ,
• , inline
, iframe

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

:
• OpenSocial HTML
• DOM ,
• innerHTML
OpenSocial :
• : ,
- HTML,
• : XSS ( ) ,
XSS
• / :
• JavaScript, OpenSocial
• : OpenSocial API ,
; Repeated
98

:

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

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

101

Nobody said this was going to be easy

107

:
•
• ,
• :
http://tinyurl.com/4nuzll

108

:
• ,
•
• , /

109

• 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

Opensocial Tech Talk Beijing - Chinese

Recommended

Recommended

More Related Content

Similar to Opensocial Tech Talk Beijing - Chinese

Similar to Opensocial Tech Talk Beijing - Chinese (20)

Recently uploaded

Recently uploaded (20)

Opensocial Tech Talk Beijing - Chinese