Your SlideShare is downloading. ×
How to create OpenSocial Apps in 45 minutes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

How to create OpenSocial Apps in 45 minutes

2,371
views

Published on

Presentation from SURFnet OpenSocial Code Jam

Presentation from SURFnet OpenSocial Code Jam

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,371
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
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