Crossing the Boundaries of Web Applications with OpenSocial
•
0 gostou•711 visualizações
This are the slides for my Devlink OpenSocial talk. Code of the demo is available at https://github.com/bashofmann/statusnet_gadget
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (7)
Destaque
Semelhante a Crossing the Boundaries of Web Applications with OpenSocial
Semelhante a Crossing the Boundaries of Web Applications with OpenSocial (20)
Mais de Bastian Hofmann
Mais de Bastian Hofmann (16)
Último
Último (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