Presentation from SURFnet OpenSocial Code Jam

1. How to create an OpenSocial
Gadget in 45 minutes (hopefully)
Bastian Hofmann

8. Questions? Ask!

9. http://slideshare.net/bashofmann

10. http://www.opensocial.org/

18. I. A set of APIs to access the social graph
of users

19. II.
A specification for including 3rd party
applications (gadgets) into social services

20. CONTAINER GADGET
meinvz.net apivz.net

22. Rendering

23. Features

25. Container Shindig
vz.net apivz.net
HTTP GET
Gadget apivz.net/gadgets/render?
apivz.net xml=....

26. Container Shindig
vz.net apivz.net
HTML Page with OpenSocial
Gadget JavaScript API
apivz.net

27. Container Shindig
vz.net apivz.net
Ajax Requests to API
Gadget
apivz.net

28. Container
vz.net
Gadget Gadget Backend
Ajax
apivz.net api.twitter.com

29. Same Origin Policy

30. Container
vz.net
Gadget Gadget Backend
Ajax
apivz.net api.twitter.com

31. Container Shindig
vz.net apivz.net
Ajax
Gadget Gadget Backend
apivz.net api.twitter.com

32. Container Shindig
vz.net apivz.net
Ajax
HTTP
Gadget Gadget Backend
apivz.net api.twitter.com

33. Container Shindig
vz.net apivz.net
Ajax
HTTP
Owner ID
Viewer ID
Gadget
OAuth Signature
apivz.net
Gadget Backend
api.twitter.com

34. Shindig
apivz.net
HTTP
Gadget Backend
api.twitter.com

35. Container
vz.net
Not Allowed
Gadget
apivz.net

37. JavaScript RPC
Container - window.postMessage
vz.net
Message - Iframes with relay files
Gadget - Flash bridge
apivz.net

38. Application models

39. JavaScript based
Container Shindig
vz.net apivz.net
Ajax
HTTP HTTP
Gadget Gadget Backend
apivz.net api.twitter.com

40. Flash
Container Shindig
vz.net apivz.net
Ajax
HTTP
Gadget
apivz.net HTTP Gadget Backend
api.twitter.com
Flash
HTTP

41. Redirecting
Container Shindig
vz.net apivz.net
HTTP
iframe
api.twitter. Gadget Backend
com api.twitter.com
Ajax

42. Additional Iframe
Container Shindig
vz.net apivz.net
Ajax
HTTP
Gadget
apivz.net Gadget Backend
api.twitter.com
iframe
Ajax

43. Views

44. CANVAS

45. PROFILE

46. GROUP

47. Proxied Content
OpenSocial Templates
OAuth Proxy Requests
OSAPI
Embedded Experiences
DataPipelining
Let‘s start programming

48. https://github.com/bashofmann/statusnet_gadget_2nd

49. http://www.partuza.nl/
https://github.com/bashofmann/partuza

50. DEMO

51. 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?

52. Templates

53. DEMO

54. Authorization

56. Pre Registration of Client at
Twitter:
twitter.com
- Shared Consumer Key
- Shared Consumer Secret
lanyrd.com

57. HTTP POST
Connect with Twitter
lanyrd.com

58. twitter.com
HTTP POST
Connect with Twitter
HTTP GET
lanyrd.com Consumer Key
Redirect URI
Signature (Consumer
Secret)

59. twitter.com
HTTP POST
Connect with Twitter
lanyrd.com
Request Token
Request Token Secret

60. HTTP Redirect
http://twitter.com/authorize?
requestToken=...&consumerKey=...
lanyrd.com

61. HTTP GET
twitter.com/
authorize

62. Login
twitter.com/
authorize

63. Grant permission
twitter.com/
authorize
Create verifier
and bind it to
User and Request
Token

64. HTTP Redirect
Redirect URI?verifier=...
twitter.com/
authorize

65. HTTP GET
lanyrd.com
(RedirectURI?
verifier=...)

66. twitter.com
HTTP GET
HTTP GET
lanyrd.com Consumer Key
Verifier
Signature (Consumer &
Request Token Secret)

67. twitter.com
HTTP GET
lanyrd.com
Access Token
Access Token Secret

68. twitter.com
HTTP GET
lanyrd.com
API Request
Consumer Key
Signature (Consumer &
Access Token Secret)

69. DEMO

70. Documentation
http://docs.opensocial.org
http://developer.studivz.net/wiki/index.php/
Gadgets_Technical_Documentation

71. Rate and Comment
http://spkr8.com/t/8873

72. h"p://twi"er.com/Bas2anHofmann
h"ps://profiles.google.com/bashofmann
h"p://lanyrd.com/people/Bas2anHofmann/
h"p://slideshare.net/bashofmann
mail@bas2anhofmann.de