• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Opensocial Tech Talk Beijing - Chinese
 

Opensocial Tech Talk Beijing - Chinese

on

  • 3,811 views

 

Statistics

Views

Total Views
3,811
Views on SlideShare
3,806
Embed Views
5

Actions

Likes
1
Downloads
75
Comments
0

2 Embeds 5

http://www.slideshare.net 4
http://192.168.10.100 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Opensocial Tech Talk Beijing - Chinese Opensocial Tech Talk Beijing - Chinese Presentation Transcript

    • OpenSocial - 2008 10 Arne Roomann-Kurrik Developer Relations Jacky Wang 1
    • OpenSocial 2
    • “ ” ? “Eliette, ?” 3
    • “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 4
    • “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 5
    • “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 6
    • “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 7
    • “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 8
    • “ ” ? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 9
    • “ ” ? “ Internet , ?” 10
    • “ ” 11
    • “ ” 12
    • “ ” 13
    • “ ” 14
    • “ ” 15
    • “ ” 16
    • ... • / , • , 17
    • ... 18
    • ... • • , , : • , 19
    • ... • • , , 20
    • ... 21
    • ... • , • , “ ” • , 22
    • ... 23
    • , ? • , • , , , • + = ! 24
    • : Social API ? 25
    • 26
    • 27
    • 28
    • 29
    • API OpenSocial OpenSocial 30
    • ≠ social OpenSocial OpenSocial 31
    • 32
    • 33
    • 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; <?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
    • 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
    • – : 1. gadgets.io.makeRequest() , 2. URL 55
    • – : 1. gadgets.io.makeRequest() , 2. URL 3. , 56
    • : • 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
    • OpenSocial JavaScript “ ... , ” 58
    • The OpenSocial JavaScript API • , VIEWER OWNER 59
    • The OpenSocial JavaScript API • , VIEWER OWNER 60
    • 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
    • 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
    • The OpenSocial JavaScript API OpenSocial “ ” : • opensocial.Person - JavaScript 63
    • 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
    • The OpenSocial JavaScript API opensocial.Person : • getDisplayName() , • getField(key, opt_params) , key • getId() ID • isOwner() , • isViewer() , , 65
    • 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
    • The OpenSocial JavaScript API OpenSocial “ ” : • Collection opensocial.Person 67
    • 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
    • The OpenSocial JavaScript API OpenSocial “ ” : • SNS “ - ” • , JSON • : • 69
    • The OpenSocial JavaScript API SNS ( ): req.add(req.newUpdatePersonAppDataRequest(idspec, key, value)); • idspec , “VIEWER” • key • value 70
    • 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
    • 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
    • The OpenSocial JavaScript API OpenSocial “ ” : • API, • HTML • orkut MySpace hi5 73
    • 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
    • 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 95
    • 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
    • <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
    • : http://ostemplates-devapp.appspot.com/ 100
    • OpenSocial “We can fix it, we have the technology” 101
    • 0.7 102
    • , 103
    • 104
    • , 105
    • 0.8 106
    • Nobody said this was going to be easy 107
    • : • • , • : http://tinyurl.com/4nuzll 108
    • : • , • • , / 109
    • : • , 110
    • : • , ... 111
    • : • ... , 112
    • 113
    • • 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