Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Opensocial Tech Talk Beijing - Chinese

2,866 views

Published on

Published in: Technology, News & Politics
  • Be the first to comment

Opensocial Tech Talk Beijing - Chinese

  1. 1. OpenSocial - 2008 10 Arne Roomann-Kurrik Developer Relations Jacky Wang 1
  2. 2. OpenSocial 2
  3. 3. “ ” ? “Eliette, ?” 3
  4. 4. “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 4
  5. 5. “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 5
  6. 6. “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 6
  7. 7. “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 7
  8. 8. “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 8
  9. 9. “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 9
  10. 10. “ ” ? “ Internet , ?” 10
  11. 11. “ ” 11
  12. 12. “ ” 12
  13. 13. “ ” 13
  14. 14. “ ” 14
  15. 15. “ ” 15
  16. 16. “ ” 16
  17. 17. ... • / , • , 17
  18. 18. ... 18
  19. 19. ... • • , , : • , 19
  20. 20. ... • • , , 20
  21. 21. ... 21
  22. 22. ... • , • , “ ” • , 22
  23. 23. ... 23
  24. 24. , ? • , • , , , • + = ! 24
  25. 25. : Social API ? 25
  26. 26. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. API OpenSocial OpenSocial 30
  31. 31. ≠ social OpenSocial OpenSocial 31
  32. 32. 32
  33. 33. 33
  34. 34. OpenSocial : • 19+ , 40+ • , • : 34
  35. 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. 36. Gadgets – , , , ... – 36
  37. 37. – Gadget Spec ( ): • XML , OpenSocial • Web , Web Google Pages • , Web • XML • HTML • JavaScript • CSS 37
  38. 38. – : • Gadget Spec ( ) • Gadget Spec , JavaScript • HTML, JavaScript, CSS , 38
  39. 39. – : • , • iframe , Gadget , , Domain 39
  40. 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. 41. – Gadget Spec XML 1. , Gadget 41
  42. 42. – Gadget Spec XML 1. , Gadget 2. XML Web , Gadget Spec XML 42
  43. 43. – Gadget Spec XML 1. , Gadget 2. XML Web , Gadget Spec XML 3. XML Spec HTML , 43
  44. 44. – Gadget Spec XML • Gadget Spec , • , 44
  45. 45. – Gadget Spec XML 1. , Gadget Spec 45
  46. 46. – Gadget Spec XML 1. , Gadget Spec 2. XML Spec HTML , 46
  47. 47. – ? • , • , • view, 47
  48. 48. views? • , • , • , , • , views , 48
  49. 49. Gadgets iGoogle quot;homequot; view: • iGoogle , quot;homequot; view , , 49
  50. 50. Gadgets iGoogle quot;canvasquot; view: • iGoogle , quot;canvasquot; view , 50
  51. 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. 52. JavaScript : • gadgets.io.makeRequest() , AJAX • gadgets.json.parse() and gadgets.json.stringify() JSON , eval • gadgets.util.escapeString() innerHTML • gadgets.util.registerOnLoadHandler() , 52
  53. 53. – gadgets.io.makeRequest(): • , AJAX : • , , • AJAX • JSONP , • , 53
  54. 54. – : 1. gadgets.io.makeRequest() , 54
  55. 55. – : 1. gadgets.io.makeRequest() , 2. URL 55
  56. 56. – : 1. gadgets.io.makeRequest() , 2. URL 3. , 56
  57. 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. 58. OpenSocial JavaScript “ ... , ” 58
  59. 59. The OpenSocial JavaScript API • , VIEWER OWNER 59
  60. 60. The OpenSocial JavaScript API • , VIEWER OWNER 60
  61. 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. 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. 63. The OpenSocial JavaScript API OpenSocial “ ” : • opensocial.Person - JavaScript 63
  64. 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. 65. The OpenSocial JavaScript API opensocial.Person : • getDisplayName() , • getField(key, opt_params) , key • getId() ID • isOwner() , • isViewer() , , 65
  66. 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. 67. The OpenSocial JavaScript API OpenSocial “ ” : • Collection opensocial.Person 67
  68. 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. 69. The OpenSocial JavaScript API OpenSocial “ ” : • SNS “ - ” • , JSON • : • 69
  70. 70. The OpenSocial JavaScript API SNS ( ): req.add(req.newUpdatePersonAppDataRequest(idspec, key, value)); • idspec , “VIEWER” • key • value 70
  71. 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. 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. 73. The OpenSocial JavaScript API OpenSocial “ ” : • API, • HTML • orkut MySpace hi5 73
  74. 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. 75. RESTful RPC , ... 75
  76. 76. RESTful RPC : • • • Flash 76
  77. 77. RESTful RPC : • RESTful (Representational State Transfer) • RPC (Remote Procedure Call) : • XML • JSON • AtomPub 77
  78. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 88. RESTful RPC • Once OAuth is used, you can store a user token for later access. Sample: use an existing token: 88
  89. 89. RESTful RPC • Once authentication has happened, requests are easy: Sample: Fetch the current user: 89
  90. 90. RESTful RPC Sample: Fetch the current user’s friends: 90
  91. 91. OpenSocial “ ” 91
  92. 92. Shindig : • API , • • / ¥/ ! 92
  93. 93. Shindig Apache Shindig : • • Java PHP • , SNS Web : , , OpenSocial http://incubator.apache.org/shindig/ 93
  94. 94. OpenSocial Dev App , SNS JavaScript http://osda.appspot.com 94
  95. 95. Caja 95
  96. 96. Caja JavaScript ... • , • • Caja iframes , JavaScript , 96
  97. 97. Caja Caja : • JavaScript , Google • OpenSocial , , • , inline , iframe http://code.google.com/p/google-caja/ 97
  98. 98. : • OpenSocial HTML • DOM , • innerHTML OpenSocial : • : , - HTML, • : XSS ( ) , XSS • / : • JavaScript, OpenSocial • : OpenSocial API , ; Repeated 98
  99. 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. 100. : http://ostemplates-devapp.appspot.com/ 100
  101. 101. OpenSocial “We can fix it, we have the technology” 101
  102. 102. 0.7 102
  103. 103. , 103
  104. 104. 104
  105. 105. , 105
  106. 106. 0.8 106
  107. 107. Nobody said this was going to be easy 107
  108. 108. : • • , • : http://tinyurl.com/4nuzll 108
  109. 109. : • , • • , / 109
  110. 110. : • , 110
  111. 111. : • , ... 111
  112. 112. : • ... , 112
  113. 113. 113
  114. 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

×