How to create OpenSocial Apps in 45 minutes

  • 2,224 views
Uploaded on

Presentation from SURFnet OpenSocial Code Jam

Presentation from SURFnet OpenSocial Code Jam

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,224
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
34
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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