Opensocial Tech Talk Beijing - Chinese

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

“ ” ? “ Internet , ?” 10

“ ” 11

“ ” 12

“ ” 13

“ ” 14

“ ” 15

“ ” 16

... • / , • , 17

... 18

... • • , , : • , 19

... • • , , 20

... 21

... • , • , “ ” • , 22

... 23

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

: Social API ? 25

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; <?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

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

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

0.7 102

0.8 106

Nobody said this was going to be easy 107

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

: • , • • , / 109

: • , 110

: • , ... 111

: • ... , 112

• 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

by Arne Roomann-Kurrik on Oct 23, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 5

Statistics

Opensocial Tech Talk Beijing - Chinese — Presentation Transcript

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