How to create OpenSocial Apps in 45 minutes

2,987 views
2,789 views

Published on

Presentation from SURFnet OpenSocial Code Jam

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

No Downloads
Views
Total views
2,987
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

How to create OpenSocial Apps in 45 minutes

  1. 1. How to create an OpenSocialGadget in 45 minutes (hopefully) Bastian Hofmann
  2. 2. Questions? Ask!
  3. 3. http://slideshare.net/bashofmann
  4. 4. http://www.opensocial.org/
  5. 5. I. A set of APIs to access the social graph of users
  6. 6. II. A specification for including 3rd party applications (gadgets) into social services
  7. 7. CONTAINER GADGETmeinvz.net apivz.net
  8. 8. Rendering
  9. 9. Features
  10. 10. Container Shindigvz.net apivz.net HTTP GET Gadget apivz.net/gadgets/render? apivz.net xml=....
  11. 11. Container Shindigvz.net apivz.net HTML Page with OpenSocial Gadget JavaScript API apivz.net
  12. 12. Container Shindigvz.net apivz.net Ajax Requests to API Gadget apivz.net
  13. 13. Containervz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com
  14. 14. Same Origin Policy
  15. 15. Containervz.net Gadget Gadget Backend Ajax apivz.net api.twitter.com
  16. 16. Container Shindigvz.net apivz.net Ajax Gadget Gadget Backend apivz.net api.twitter.com
  17. 17. Container Shindigvz.net apivz.net Ajax HTTP Gadget Gadget Backend apivz.net api.twitter.com
  18. 18. Container Shindigvz.net apivz.net Ajax HTTP Owner ID Viewer ID Gadget OAuth Signature apivz.net Gadget Backend api.twitter.com
  19. 19. Shindigapivz.net HTTP Gadget Backend api.twitter.com
  20. 20. Containervz.net Not Allowed Gadget apivz.net
  21. 21. JavaScript RPCContainer - window.postMessagevz.net Message - Iframes with relay files Gadget - Flash bridge apivz.net
  22. 22. Application models
  23. 23. JavaScript basedContainer Shindigvz.net apivz.net Ajax HTTP HTTP Gadget Gadget Backend apivz.net api.twitter.com
  24. 24. FlashContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net HTTP Gadget Backend api.twitter.com Flash HTTP
  25. 25. RedirectingContainer Shindigvz.net apivz.net HTTP iframe api.twitter. Gadget Backend com api.twitter.com Ajax
  26. 26. Additional IframeContainer Shindigvz.net apivz.net Ajax HTTP Gadget apivz.net Gadget Backend api.twitter.com iframe Ajax
  27. 27. Views
  28. 28. CANVAS
  29. 29. PROFILE
  30. 30. GROUP
  31. 31. Proxied ContentOpenSocial Templates OAuth Proxy Requests OSAPI Embedded Experiences DataPipelining Let‘s start programming
  32. 32. https://github.com/bashofmann/statusnet_gadget_2nd
  33. 33. http://www.partuza.nl/https://github.com/bashofmann/partuza
  34. 34. DEMO
  35. 35. var html="<ul>";for (var i=0; i < viewers.length; i++) {   html += "<li>" + viewers[i].displayName+ "</li>";}html += "<ul>";document.getElementById("div").innerHTML =html; Where is the error?
  36. 36. Templates
  37. 37. DEMO
  38. 38. Authorization
  39. 39. Pre Registration of Client atTwitter: twitter.com- Shared Consumer Key- Shared Consumer Secret lanyrd.com
  40. 40. HTTP POST Connect with Twitterlanyrd.com
  41. 41. twitter.com HTTP POST Connect with Twitter HTTP GETlanyrd.com Consumer Key Redirect URI Signature (Consumer Secret)
  42. 42. twitter.com HTTP POST Connect with Twitterlanyrd.com Request Token Request Token Secret
  43. 43. HTTP Redirect http://twitter.com/authorize? requestToken=...&consumerKey=...lanyrd.com
  44. 44. HTTP GET twitter.com/ authorize
  45. 45. Login twitter.com/ authorize
  46. 46. Grant permission twitter.com/ authorize Create verifier and bind it to User and Request Token
  47. 47. HTTP RedirectRedirect URI?verifier=... twitter.com/ authorize
  48. 48. HTTP GET lanyrd.com(RedirectURI? verifier=...)
  49. 49. twitter.com HTTP GET HTTP GETlanyrd.com Consumer Key Verifier Signature (Consumer & Request Token Secret)
  50. 50. twitter.com HTTP GETlanyrd.com Access Token Access Token Secret
  51. 51. twitter.com HTTP GETlanyrd.com API Request Consumer Key Signature (Consumer & Access Token Secret)
  52. 52. DEMO
  53. 53. Documentation http://docs.opensocial.org http://developer.studivz.net/wiki/index.php/ Gadgets_Technical_Documentation
  54. 54. Rate and Comment http://spkr8.com/t/8873
  55. 55. h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmannmail@bas2anhofmann.de

×