Opensocial Tech Talk Beijing - Chinese

  • 2,311 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,311
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
76
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. OpenSocial - 2008 10 Arne Roomann-Kurrik Developer Relations Jacky Wang 1
  • 2. OpenSocial 2
  • 3. “ ” ? “Eliette, ?” 3
  • 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
  • 11. “ ” 11
  • 12. “ ” 12
  • 13. “ ” 13
  • 14. “ ” 14
  • 15. “ ” 15
  • 16. “ ” 16
  • 17. ... • / , • , 17
  • 18. ... 18
  • 19. ... • • , , : • , 19
  • 20. ... • • , , 20
  • 21. ... 21
  • 22. ... • , • , “ ” • , 22
  • 23. ... 23
  • 24. , ? • , • , , , • + = ! 24
  • 25. : Social API ? 25
  • 26. 26
  • 27. 27
  • 28. 28
  • 29. 29
  • 30. API OpenSocial OpenSocial 30
  • 31. ≠ social OpenSocial OpenSocial 31
  • 32. 32
  • 33. 33
  • 34. OpenSocial : • 19+ , 40+ • , • : 34
  • 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
  • 36. Gadgets – , , , ... – 36
  • 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
  • 48. views? • , • , • , , • , views , 48
  • 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
  • 53. – gadgets.io.makeRequest(): • , AJAX : • , , • AJAX • JSONP , • , 53
  • 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
  • 58. OpenSocial JavaScript “ ... , ” 58
  • 59. The OpenSocial JavaScript API • , VIEWER OWNER 59
  • 60. The OpenSocial JavaScript API • , VIEWER OWNER 60
  • 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
  • 63. The OpenSocial JavaScript API OpenSocial “ ” : • opensocial.Person - JavaScript 63
  • 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
  • 67. The OpenSocial JavaScript API OpenSocial “ ” : • Collection opensocial.Person 67
  • 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
  • 69. The OpenSocial JavaScript API OpenSocial “ ” : • SNS “ - ” • , JSON • : • 69
  • 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
  • 73. The OpenSocial JavaScript API OpenSocial “ ” : • API, • HTML • orkut MySpace hi5 73
  • 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
  • 75. RESTful RPC , ... 75
  • 76. RESTful RPC : • • • Flash 76
  • 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
  • 91. OpenSocial “ ” 91
  • 92. Shindig : • API , • • / ¥/ ! 92
  • 93. Shindig Apache Shindig : • • Java PHP • , SNS Web : , , OpenSocial http://incubator.apache.org/shindig/ 93
  • 94. OpenSocial Dev App , SNS JavaScript http://osda.appspot.com 94
  • 95. Caja 95
  • 96. Caja JavaScript ... • , • • Caja iframes , JavaScript , 96
  • 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
  • 100. : http://ostemplates-devapp.appspot.com/ 100
  • 101. OpenSocial “We can fix it, we have the technology” 101
  • 102. 0.7 102
  • 103. , 103
  • 104. 104
  • 105. , 105
  • 106. 0.8 106
  • 107. Nobody said this was going to be easy 107
  • 108. : • • , • : http://tinyurl.com/4nuzll 108
  • 109. : • , • • , / 109
  • 110. : • , 110
  • 111. : • , ... 111
  • 112. : • ... , 112
  • 113. 113
  • 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