Search

Opensocial Tech Talk Beijing - Chinese

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    1 Favorite

    Opensocial Tech Talk Beijing - Chinese - Presentation 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=\"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> 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 \"home\" view: • iGoogle , \"home\" view , , 49
    50. Gadgets iGoogle \"canvas\" view: • iGoogle , \"canvas\" view , 50
    51. Gadget Spec XML views: • view, <Content> • view=\"view names\" • view , 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> 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=\"1.0\" encoding=\"UTF-8\" ?> <Module> <ModulePrefs title=\"Hello World!\"> <Require feature=\"dynamic-height\" /> <Require feature=\"opensocial-0.8\" /> </ModulePrefs> <Content type=\"html\"> <![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(\"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); 61
    62. The OpenSocial JavaScript API OpenSocial : • , Key • , • , • getData() 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(); }; 62
    63. The OpenSocial JavaScript API OpenSocial “ ” : • opensocial.Person - JavaScript 63
    64. The OpenSocial JavaScript API : req.add(req.newFetchPersonRequest(idspec, opt_params), \"key\"); • idspec “VIEWER”, “OWNER” ID • opt_params , newFetchPersonRequest : var owner = data.get(\"key\").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), \"key\"); • idspec . “userId” “VIEWER”, “OWNER” ID, “groupId” “SELF”, “FRIENDS” • opt_params , , newFetchPersonRequest : var owner_friends = data.get(\"key\").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({ \"userId\" : \"OWNER\", \"groupId\" : \"SELF\" }); req.add(req.newFetchPersonAppDataRequest(idspec, keys), \"key\"); req.add(req.newFetchPersonRequest(\"OWNER\"), \"ownerkey\"); • idspec , newFetchPeopleRequest • keys • ID , OWNER newFetchPersonAppDataRequest : var app_data = data.get(\"key\").getData(); var value = app_data[owner.getId()][key]; 71
    72. The OpenSocial JavaScript API : • ID , ID, { \"1234567890\" : { \"key1\" : \"value1\" } } • , : { \"1234567890\" : { \"key1\" : \"value1\", \"key2\" : \"value2\" } } • : { \"1234567890\" : { \"key1\" : \"value1\" }, \"2345678901\" : { \"key1\" : \"value2\" } } 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: { \"id\" : \"example.org:34KJDCSKJN2HHF0DW20394\", \"displayName\" : \"Janey\", \"name\" : {\"unstructured\" : \"Jane Doe\"}, \"gender\" : \"female\" } • XML: <person xmlns=\"http://ns.opensocial.org/2008/opensocial\"> <id></id> <displayName></displayName> <name> <unstructured>Jane Doe</unstructured> </name> <gender>female</gender> </person> 80
    81. RESTful RPC REST responses (Person): • AtomPub: <entry xmlns=\"http://www.w3.org/2005/Atom\"> <content type=\"application/xml\"> <person xmlns=\"http://ns.opensocial.org/2008/opensocial\"> <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 \"id\" : \"myself\" { \"result\" : { \"method\" : \"people.get\", \"id\" : \"example.org:34KJDCSKJN2HHF0DW20394\", \"id\" : \"myself\" \"name\" : { \"unstructured\" : \"Jane Doe\"}, \"gender\" : \"female\" \"params\" : { } \"userid\" : \"@me\", } \"groupid\" : \"@self\" } } 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=\"text/javascript\" src=\"http://ostemplates-demo.appspot.com/ostemplates.js\"> </script> <script type=\"text/os-template\"> <b>${owner.displayName}'s friends</b> <ul> <li repeat=\"friends\">${displayName}</li> </ul> </script> <script type=\"text/javascript\"> 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

    Arne Roomann-kurrikArne Roomann-kurrik, 8 months ago

    custom

    1185 views, 1 favs, 1 embeds more stats

    More Info

    © All Rights Reserved

    Go to text version
    • Total Views 1185
      • 1184 on SlideShare
      • 1 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 53
    Most viewed embeds
    • 1 views on http://192.168.10.100

    more

    All embeds
    • 1 views on http://192.168.10.100

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories

    Tags

    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved