crossing the boundaries of web applications with opensocial
DESCRIPTION
This are the slides for my Devlink OpenSocial talk. Code of the demo is available at https://github.com/bashofmann/statusnet_gadgetTRANSCRIPT
Crossing the boundaries of web applications with OpenSocialBastian HofmannVZnet Netzwerke Ltd.
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
OEmbed
OAuth Proxy Requests
DataPipelining
OSAPI
AppData
Proxied Content
https://github.com/bashofmann/statusnet_gadget
DEMO
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
<script type="text/javascript">var viewers= opensocial.data.DataContext.getDataSet("ViewerFriends");var html="<ul>";for (var i=0; i < viewers.length; i++) { html += "<li>" + viewers[i].displayName + "</li>";}document.getElementById("div").innerHTML = html;</script>
BAD
Displaying data
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}
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
h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmann