Crossing the Boundaries of Web Applications with OpenSocial
•
0 gefällt mir•711 views
This are the slides for my Devlink OpenSocial talk. Code of the demo is available at https://github.com/bashofmann/statusnet_gadget
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (7)
Andere mochten auch
Ähnlich wie Crossing the Boundaries of Web Applications with OpenSocial
Ähnlich wie Crossing the Boundaries of Web Applications with OpenSocial (20)
Mehr von Bastian Hofmann
Mehr von Bastian Hofmann (16)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Crossing the Boundaries of Web Applications with OpenSocial
- 1. Crossing the boundaries of web applications with OpenSocial Bastian Hofmann VZnet Netzwerke Ltd.
- 9. A set of APIs to access the social graph of users
- 10. A specification for including 3rd party applications (gadgets) into social services
- 19. What is a Gadget? • XML file with HTML and JavaScript (and CSS, Images, Flash, ...) • Application based on the Google Gadgets specification • Can be included on various platforms
- 21. Rendering
- 22. Social APIs
- 23. Views
- 24. CANVAS
- 25. PROFILE
- 26. POPUP
- 27. GROUP
- 28. EMBED
- 29. PREVIEW
- 30. Features
- 33. JavaScript based Container Shindig vz.net apivz.net Ajax HTTP HTTP Gadget Gadget Backend apivz.net api.twitter.com
- 34. Proxy Container Shindig vz.net apivz.net Ajax HTTP Gadget Gadget Backend Ajax apivz.net api.twitter.com
- 35. JavaScript RPC Container - window.postMessage vz.net - Iframes with relay files Method Call - Flash Gadget apivz.net
- 36. Flash Container Shindig vz.net apivz.net Ajax HTTP Gadget apivz.net HTTP Gadget Backend api.twitter.com Flash HTTP
- 37. Redirecting Container Shindig vz.net apivz.net HTTP iframe api.twitter. Gadget Backend com api.twitter.com Ajax
- 38. Additional Iframe Container Shindig vz.net apivz.net Ajax HTTP Gadget apivz.net Gadget Backend api.twitter.com iframe Ajax
- 39. Proxied Content OpenSocial Templates OAuth Proxy Requests OSAPI AppData DataPipelining OEmbed Let‘s start programming
- 41. DEMO
- 42. OAuth 1.0a Flow +----------+ +---------------+ | -+----(B)-- Request Token -------->| | | End-user | | Authorization | | at |<---(C)-- User authenticates --->| Server | | Browser | | | | -+----(D)-- Verifier -------------<| | +-|----|---+ +---------------+ | | ^ v (B) (D) | | | | | | ^ v | | +---------+ | | | |>---(A)-- Redirect URL ---------------| | | Web |<---(A)-- Request Token + Secret -----| | | Client |>---(E)-- Request Token, Verifier ----' | | |<---(E)-- Access Token + Secret -------------' +---------+ Every Request: Client Credentials, Nonce, Timestamp, Signature http://oauth.net/
- 43. DEMO
- 44. Displaying data <script type="text/javascript"> var viewers= opensocial.data.DataContext.getDataSet BAD ("ViewerFriends"); var html="<ul>"; for (var i=0; i < viewers.length; i++) { html += "<li>" + viewers[i].displayName + "</li>"; } document.getElementById("div").innerHTML = html; </script>
- 45. DEMO
- 48. From: notifications@socialnetwork.com To: johndoe@example.com Subject: Social Network: Mary Has Commented On Your Status MIME-Version: 1.0 Content-Type: multipart/alternative; boundary="XXXXboundary text" --XXXXboundary text Content-Type: text/html <html> <!-- HTML representation here --> </html> --XXXXboundary text Content-Type: application/embed+json { "gadget" : "http://www.socialnetwork.com/embedded/ commentgadget.xml", "context" : 123 }
- 49. OpenSearch
- 50. <Optional feature="opensearch"> <Param name="description"> <![CDATA[ <OpenSearchDescription xmlns="http://a9.com/-/spec/ opensearch/1.1/"> <ShortName>Example Search</ShortName> <Description>Realtime Example Search</Description> <Url type="application/atom+xml" method="get" template="http://search.example.com/search.atom?q= {searchTerms}"/> <Image width="16" height="16">http://search.example.com/ favicon.png</Image> <InputEncoding>UTF-8</InputEncoding> <SearchForm>http://search.example.com/</SearchForm> </OpenSearchDescription> ]]> </Param> </Optional>
- 51. Common Container
- 54. <Module> <ModulePrefs title="View Level Features Sampe"> <Require feature="opensocial" views="canvas,profile" /> </ModulePrefs>
- 56. <Module> <ModulePrefs title="Sample VOIP"> <Optional feature="actions"> <Param name="action-contributions"> <![CDATA[ <action id="org.samplevoip.callbyperson" dataObject="opensocial.Person" label="Call using VOIP Phone" view="DialByPerson" icon="http://ww.samplervoip.org/ phone.gif" /> <action id="org.samplervoip.navLink" path="container/ navigationLinks" label="Phone" /> ]]> </Param> </Optional> </ModulePrefs>
- 57. <Content type="html"> <![CDATA[ <script> // Bind javascript function to action ID function mycallback{ ... } var myaction = { id: "org.samplevoip.callbyperson", callback: mycallback } container.actions.updateAction(myaction); </script> ]]> </Content> </Module>
- 58. Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation