how to create opensocial apps in 45 minutes

How to create an OpenSocial Gadget in 45 minutes

Bastian Hofmann

(hopefully)

Questions? Ask!

http://slideshare.net/bashofmann

http://www.opensocial.org/

A set of APIs to access the social graph of users

I.

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

II.

GADGETapivz.net

CONTAINERmeinvz.net

Rendering

Features

Containervz.net

Gadget apivz.net

HTTP GETapivz.net/gadgets/render?xml=....

Shindigapivz.net

Containervz.net

Gadget apivz.net

HTML Page with OpenSocial JavaScript API

Shindigapivz.net

Containervz.net

Gadget apivz.net

Ajax Requests to API

Shindigapivz.net

Containervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Ajax

Same Origin Policy

Containervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Ajax

Containervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Shindigapivz.net

Ajax

Containervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Shindigapivz.net

Ajax

HTTP

Containervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Shindigapivz.net

Ajax

HTTPOwner IDViewer IDOAuth Signature

Gadget Backendapi.twitter.com

Shindigapivz.net

HTTP

Containervz.net

Gadget apivz.net

Not Allowed

Containervz.net

Gadget apivz.net

Message

- window.postMessage

- Iframes with relay files

- Flash bridge

JavaScript RPC

Application models

JavaScript basedContainervz.net

Gadget apivz.net

Gadget Backendapi.twitter.com

Ajax

HTTP

Shindigapivz.net

HTTP

FlashContainervz.net

Gadget apivz.net Gadget Backend

api.twitter.comHTTP

Shindigapivz.net

Flash

Ajax

HTTP

HTTP

RedirectingContainervz.net

Gadget Backendapi.twitter.com

Shindigapivz.net

iframeapi.twitter.com

HTTP

Ajax

Additional IframeContainervz.net

Gadget apivz.net Gadget Backend

api.twitter.com

Shindigapivz.net

iframe

Ajax

Ajax

HTTP

Views

CANVAS

PROFILE

GROUP

Let‘s start programming

OpenSocial Templates

Embedded Experiences

OAuth Proxy Requests

DataPipelining

OSAPI

Proxied Content

https://github.com/bashofmann/statusnet_gadget_2nd

http://www.partuza.nl/

https://github.com/bashofmann/partuza

DEMO

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?

Templates

DEMO

Authorization

lanyrd.com

twitter.com

Pre Registration of Client at Twitter:

- Shared Consumer Key- Shared Consumer Secret

HTTP POSTConnect with Twitter

lanyrd.com

twitter.com

HTTP POSTConnect with Twitter

HTTP GETConsumer KeyRedirect URISignature (Consumer Secret)

lanyrd.com

twitter.com

HTTP POSTConnect with Twitter

Request TokenRequest Token Secret

lanyrd.com

http://twitter.com/authorize?requestToken=...&consumerKey=...

HTTP Redirect

lanyrd.com

HTTP GET

twitter.com/authorize

Login

twitter.com/authorize

Grant permission

twitter.com/authorize

Create verifier and bind it to User and Request Token

Redirect URI?verifier=...HTTP Redirect

twitter.com/authorize

HTTP GET

lanyrd.com(RedirectURI?

verifier=...)

HTTP GET

HTTP GETConsumer KeyVerifierSignature (Consumer & Request Token Secret)

twitter.com

lanyrd.com

HTTP GET

Access TokenAccess Token Secret

twitter.com

lanyrd.com

HTTP GET

API RequestConsumer KeySignature (Consumer & Access Token Secret)

twitter.com

lanyrd.com

DEMO

Documentation

http://developer.studivz.net/wiki/index.php/Gadgets_Technical_Documentation

http://docs.opensocial.org

Rate and Comment

http://spkr8.com/t/8873

h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmann

mail@bas2anhofmann.de