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
![Page 1: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/1.jpg)
Crossing the boundaries of web applications with OpenSocialBastian HofmannVZnet Netzwerke Ltd.
![Page 2: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/2.jpg)
![Page 3: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/3.jpg)
![Page 4: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/4.jpg)
![Page 5: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/5.jpg)
![Page 6: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/6.jpg)
Questions? Ask!
![Page 9: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/9.jpg)
A set of APIs to access the social graph of users
![Page 10: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/10.jpg)
A specification for including 3rd party
applications (gadgets) into social services
![Page 11: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/11.jpg)
![Page 12: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/12.jpg)
![Page 13: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/13.jpg)
![Page 14: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/14.jpg)
![Page 15: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/15.jpg)
![Page 16: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/16.jpg)
![Page 17: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/17.jpg)
![Page 18: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/18.jpg)
![Page 19: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/19.jpg)
• 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?
![Page 20: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/20.jpg)
![Page 21: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/21.jpg)
Rendering
![Page 22: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/22.jpg)
Social APIs
![Page 23: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/23.jpg)
Views
![Page 24: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/24.jpg)
CANVAS
![Page 25: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/25.jpg)
PROFILE
![Page 26: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/26.jpg)
POPUP
![Page 27: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/27.jpg)
GROUP
![Page 28: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/28.jpg)
EMBED
![Page 29: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/29.jpg)
PREVIEW
![Page 30: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/30.jpg)
Features
![Page 31: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/31.jpg)
![Page 32: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/32.jpg)
Application models
![Page 33: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/33.jpg)
JavaScript basedContainervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Ajax
HTTP
Shindigapivz.net
HTTP
![Page 34: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/34.jpg)
Containervz.net
Gadget apivz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
Ajax
Ajax
HTTP
Proxy
![Page 35: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/35.jpg)
Containervz.net
Gadget apivz.net
Method Call
- window.postMessage
- Iframes with relay files
- Flash
JavaScript RPC
![Page 36: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/36.jpg)
FlashContainervz.net
Gadget apivz.net Gadget Backend
api.twitter.comHTTP
Shindigapivz.net
Flash
Ajax
HTTP
HTTP
![Page 37: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/37.jpg)
RedirectingContainervz.net
Gadget Backendapi.twitter.com
Shindigapivz.net
iframeapi.twitter.com
HTTP
Ajax
![Page 38: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/38.jpg)
Additional IframeContainervz.net
Gadget apivz.net Gadget Backend
api.twitter.com
Shindigapivz.net
iframe
Ajax
Ajax
HTTP
![Page 39: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/39.jpg)
Let‘s start programming
OpenSocial Templates
OEmbed
OAuth Proxy Requests
DataPipelining
OSAPI
AppData
Proxied Content
![Page 40: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/40.jpg)
https://github.com/bashofmann/statusnet_gadget
![Page 41: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/41.jpg)
DEMO
![Page 42: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/42.jpg)
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/
![Page 43: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/43.jpg)
DEMO
![Page 44: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/44.jpg)
<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
![Page 45: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/45.jpg)
DEMO
![Page 46: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/46.jpg)
![Page 47: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/47.jpg)
Embedded Experience
![Page 48: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/48.jpg)
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}
![Page 49: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/49.jpg)
OpenSearch
![Page 50: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/50.jpg)
<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>
![Page 51: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/51.jpg)
Common Container
![Page 53: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/53.jpg)
View Level Features
![Page 54: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/54.jpg)
<Module> <ModulePrefs title="View Level Features Sampe"> <Require feature="opensocial" views="canvas,profile" /> </ModulePrefs>
![Page 55: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/55.jpg)
Declarative actions
![Page 56: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/56.jpg)
<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>
![Page 57: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/57.jpg)
<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>
![Page 58: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/58.jpg)
Documentation
http://developer.studivz.net/wiki/index.php/Gadgets_Technical_Documentation
http://docs.opensocial.org
![Page 59: Crossing the Boundaries of Web Applications with OpenSocial](https://reader035.vdocuments.site/reader035/viewer/2022070302/5480061fb4af9f207d8b466d/html5/thumbnails/59.jpg)
h"p://twi"er.com/Bas2anHofmannh"ps://profiles.google.com/bashofmannh"p://lanyrd.com/people/Bas2anHofmann/h"p://slideshare.net/bashofmann