Crossing the Boundaries of Web Applications with OpenSocial

1,480 views

Published on

This are the slides for my Devlink OpenSocial talk. Code of the demo is available at https://github.com/bashofmann/statusnet_gadget

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,480
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Crossing the Boundaries of Web Applications with OpenSocial

  1. 1. Crossing theboundaries of webapplications withOpenSocialBastian HofmannVZnet Netzwerke Ltd.
  2. 2. Questions? Ask!
  3. 3. http://slideshare.net/bashofmann
  4. 4. http://www.opensocial.org/
  5. 5. A set of APIs to access the social graph of users
  6. 6. A specification for including 3rd partyapplications (gadgets) into social services
  7. 7. 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
  8. 8. Rendering
  9. 9. Social APIs
  10. 10. Views
  11. 11. CANVAS
  12. 12. PROFILE
  13. 13. POPUP
  14. 14. GROUP
  15. 15. EMBED
  16. 16. PREVIEW
  17. 17. Features
  18. 18. Application models
  19. 19. JavaScript basedContainer Shindigvz.net apivz.net Ajax HTTP HTTP Gadget Gadget Backend apivz.net api.twitter.com
  20. 20. ProxyContainer Shindigvz.net apivz.net Ajax HTTP Gadget Gadget Backend Ajax apivz.net api.twitter.com
  21. 21. JavaScript RPCContainer - window.postMessagevz.net - Iframes with relay files Method Call - Flash Gadget apivz.net
  22. 22. FlashContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net HTTP Gadget Backend api.twitter.com Flash HTTP
  23. 23. RedirectingContainer Shindigvz.net apivz.net HTTP iframe api.twitter. Gadget Backend com api.twitter.com Ajax
  24. 24. Additional IframeContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net Gadget Backend api.twitter.com iframe Ajax
  25. 25. Proxied ContentOpenSocial Templates OAuth Proxy Requests OSAPI AppData DataPipelining OEmbed Let‘s start programming
  26. 26. https://github.com/bashofmann/statusnet_gadget
  27. 27. DEMO
  28. 28. 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, Signaturehttp://oauth.net/
  29. 29. DEMO
  30. 30. 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>
  31. 31. DEMO
  32. 32. Embedded Experience
  33. 33. From: notifications@socialnetwork.comTo: johndoe@example.comSubject: Social Network: Mary Has Commented On Your StatusMIME-Version: 1.0Content-Type: multipart/alternative; boundary="XXXXboundary text"--XXXXboundary textContent-Type: text/html<html><!-- HTML representation here --></html>--XXXXboundary textContent-Type: application/embed+json{ "gadget" : "http://www.socialnetwork.com/embedded/commentgadget.xml", "context" : 123}
  34. 34. OpenSearch
  35. 35. <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>
  36. 36. Common Container
  37. 37. http://activitystrea.ms/
  38. 38. View Level Features
  39. 39. <Module> <ModulePrefs title="View Level Features Sampe">  <Require feature="opensocial" views="canvas,profile" /> </ModulePrefs>
  40. 40. Declarative actions
  41. 41. <Module> <ModulePrefs title="Sample VOIP">  <Optional feature="actions">   <Param name="action-contributions">    <![CDATA[   <action id="org.samplevoip.callbyperson"dataObject="opensocial.Person" label="Call using VOIPPhone"     view="DialByPerson" icon="http://ww.samplervoip.org/phone.gif" />   <action id="org.samplervoip.navLink" path="container/navigationLinks" label="Phone" />   ]]>   </Param>  </Optional> </ModulePrefs> 
  42. 42. <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>
  43. 43. Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation
  44. 44. h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de

×