crossing the boundaries of web applications with opensocial
DESCRIPTION
TRANSCRIPT
Crossing the Boundaries of Web Applications with OpenSocial
Bastian HofmannResearchGate GmbH
Questions? Ask!
A set of APIs to access the social graph of users
A specification for including 3rd party
applications (gadgets) into social services
• XML file with HTML and JavaScript (and CSS, Images, Flash, ...)
• Application based on the Google Gadgets specification
• Can be included on various platforms
What is a Gadget?
Rendering
Social APIs
Views
CANVAS
PROFILE
POPUP
GROUP
EMBED
PREVIEW
Features
Application models
JavaScript basedContainervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Ajax
HTTP
Shindigapivz.net
HTTP
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
Ajax
HTTP
Proxy
Containervz.net
Gadget apivz.net
Method Call
- window.postMessage
- Iframes with relay files
- Flash
JavaScript RPC
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
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
OAuth 1.0a Flow +----------+ +---------------+ | -+----(B)-- Request Token -------->| | | End-user | | Authorization | | at |<---(C)-- User authenticates --->| Server | | Browser | | | | -+----(D)-- Verifier -------------<| | +-|----|---+ +---------------+ | | ^ v (B) (D) | | | | | | ^ v | | +---------+ | | | |>---(A)-- Redirect URL ---------------| | | Web |<---(A)-- Request Token + Secret -----| | | Client |>---(E)-- Request Token, Verifier ----' | | |<---(E)-- Access Token + Secret -------------' +---------+
Every Request: Client Credentials, Nonce, Timestamp, Signaturehttp://oauth.net/
DEMO
Embedded Experience
From: [email protected]: [email protected]: Social Network: Mary Has Commented On Your StatusMIME-Version: 1.0Content-Type: multipart/alternative; boundary="XXXXboundary text"
--XXXXboundary textContent-Type: text/html
<html><!-- HTML representation here --></html>
--XXXXboundary textContent-Type: application/embed+json{ "gadget" : "http://www.socialnetwork.com/embedded/commentgadget.xml", "context" : 123}
DEMO
OpenSearch
<Optional feature="opensearch"> <Param name="description"> <![CDATA[ <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Example Search</ShortName> <Description>Realtime Example Search</Description> <Url type="application/atom+xml" method="get" template="http://search.example.com/search.atom?q={searchTerms}"/> <Image width="16" height="16">http://search.example.com/favicon.png</Image> <InputEncoding>UTF-8</InputEncoding> <SearchForm>http://search.example.com/</SearchForm> </OpenSearchDescription> ]]> </Param></Optional>
Common Container
View Level Features
<Module> <ModulePrefs title="View Level Features Sampe"> <Require feature="opensocial" views="canvas,profile" /> </ModulePrefs>
Declarative actions
<Module> <ModulePrefs title="Sample VOIP"> <Optional feature="actions"> <Param name="action-contributions"> <![CDATA[ <action id="org.samplevoip.callbyperson" dataObject="opensocial.Person" label="Call using VOIP Phone" view="DialByPerson" icon="http://ww.samplervoip.org/phone.gif" /> <action id="org.samplervoip.navLink" path="container/navigationLinks" label="Phone" /> ]]> </Param> </Optional> </ModulePrefs>
<Content type="html"> <![CDATA[ <script>
// Bind javascript function to action ID function mycallback{ ... } var myaction = { id: "org.samplevoip.callbyperson", callback: mycallback } container.actions.updateAction(myaction);
</script> ]]> </Content></Module>
Documentation
http://developer.studivz.net/wiki/index.php/Gadgets_Technical_Documentation
http://docs.opensocial.org
Mashing up JavaScriptTomorrow 2:45pm
h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmann