opensocial - gtug stockholm meeting oct 1 2009
DESCRIPTION
I gave an introductory talk on OpenSocial at the second Google Technology User Group Stockholm meeting. I included some demos on Avatars United.TRANSCRIPT
![Page 1: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/1.jpg)
OpenSocial
An open standard for social applications
Jacob GyllenstiernaAvatars United
GTUG Stockholm MeetingOctober 1, 2009
![Page 2: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/2.jpg)
What is OpenSocial?
"...a set of common APIs for building social applications across many websites."
![Page 3: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/3.jpg)
What is OpenSocial?
• Applications that leverage social connections and communication channels on a website
• Fetch and post social data about friends and activities, send messages, etc.
• Single programming model - Write once, run anywhere (almost)
• Can be used both inside and outside enabled website ("OpenSocial container")
• Module language using XML + JavaScript APIs + HTML for embedded applications
• RESTful & RPC protocols for external applications
![Page 4: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/4.jpg)
Who is using OpenSocial?
• Many popular social networks and consumer websites• Emerging in the enterprise space• +600M users worldwide
![Page 5: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/5.jpg)
OpenSocial vs. Google Gadgets
• OpenSocial is an extension of the Google Gadgets specification
• Google Gadgets: framework for embedding small applications on websites - rendering, UI components, cross-domain proxying, i18n, user settings, inter-frame communication, security
• Rendered in an iframe on the container• OpenSocial adds social APIs to Google Gadgets (and
server-side protocols...)
![Page 6: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/6.jpg)
Development types
![Page 7: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/7.jpg)
Hello virtual world!
<?xml version="1.0" encoding="UTF-8"?><Module> <ModulePrefs title="Hello virtual world!" description="My first application." thumbnail="http://stuff.cookiejunkie.com/gtug-sthlm/gadgets/gtug2_thumb.png"> </ModulePrefs> <Content type="html" view="profile"> <![CDATA[ Hello from the profile view! ]]> </Content> <Content type="html" view="canvas"> <![CDATA[ Hello from the canvas view! ]]> </Content></Module>
![Page 8: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/8.jpg)
Gadget rendering
![Page 9: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/9.jpg)
Listing my friends
<ModulePrefs ...> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html" view="profile,canvas"> <![CDATA[ <h3>My friends:</h3><br /> <div id="friends"></div>
<script type="text/javascript"> function fetchFriends() {...} function showFriends(response) {...} gadgets.util.registerOnLoadHandler(fetchFriends); </script> ]]> </Content>
![Page 10: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/10.jpg)
Listing my friends function fetchFriends() { var req = opensocial.newDataRequest(); var idSpecParams = {}; idSpecParams[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER; idSpecParams[opensocial.IdSpec.Field.GROUP_ID] = opensocial.IdSpec.GroupId.FRIENDS; var idSpec = opensocial.newIdSpec(idSpecParams); req.add(req.newFetchPeopleRequest(idSpec), "ownerFriends"); req.send(showFriends); }
function showFriends(response) { ... }
![Page 11: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/11.jpg)
Listing my friends function showFriends(response) { var respItem = response.get("ownerFriends"); if (respItem.hadError()) { alert("Error fetching friends!"); } else { var data = respItem.getData(); var friendsDiv = document.getElementById("friends"); var html = "<ul>"; data.each(function(person) { var name = person.getDisplayName(); var thumbnailUrl = person.getField(opensocial.Person.Field.THUMBNAIL_URL); html += "<li>"; html += "<img src=\"" + thumbnailUrl + "\" /> " + name; html += "</li>"; }); html += "</ul>"; friendsDiv.innerHTML = html;
![Page 12: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/12.jpg)
OpenSocial concepts
• People• Friends / Connections• Activities• Persistent data (key-value store)• Messages• Sharing application
![Page 13: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/13.jpg)
Fetching data from Twitter <Content type="html" view="profile,canvas"> <![CDATA[ <h3>Top ten trends:</h3><br /> <div id="trends"></div>
<script type="text/javascript"> function fetchTrends() {...} function showTrends(response) {...} gadgets.util.registerOnLoadHandler(fetchTrends); </script> ]]> </Content>
![Page 14: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/14.jpg)
Fetching data from Twitterfunction fetchTrends() { url = "http://search.twitter.com/trends.json"; var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON; params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.NONE; params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
gadgets.io.makeRequest(url, showTrends, params); }
![Page 15: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/15.jpg)
Fetching data from Twitterfunction showTrends(response) { if (response.errors && response.errors.size > 0) { alert("Error fetching trends!"); } else { var data = response.data; var trends = data.trends; var trendsDiv = document.getElementById("trends"); var html = "<ul>"; for (var i = 0; i < trends.length; i++) { var trend = trends[i]; html += "<li>"; html += "<a href=\"" + trend.url + "\" target=\"_blank\">" + trend.name + "</a>"; html += "</li>"; } html += "</ul>"; trendsDiv.innerHTML = html; }}
![Page 16: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/16.jpg)
DEMO
![Page 17: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/17.jpg)
RESTful & RPC protocols
/people/@me/@friends
[{"result": {"totalResults": 35, "list": [ {"name": {"unstructured": "Odonion", "formatted": "Odonion"}, "displayName": "Odonion", "isOwner": false, "thumbnailUrl": "http://albums.cf.avatarsunited.com/avatar/odonion/b87897847211421fb2ce578e82d03e22.small.jpg", "id": "au:a:odonion", "isViewer": false}, {..}], "id":"ownerFriends"}}]
![Page 18: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/18.jpg)
Want to run your own container?
• Apache Shindig - open source OpenSocial server• Renders gadgets, proxies requests and handles social data
requests• Available in Java & PHP• Implement services for social data (people, activities, etc.)
and OAuth credentials (inbound & outbound)• http://incubator.apache.org/shindig/
![Page 19: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/19.jpg)
Worth looking at
• OpenSocial 0.9 - proxied content, data pipelining, lightweight JS API, OSML, templating
• Google Friend Connect - any site can be a container!• OpenSocial Virtual Currency API (proposal)
![Page 20: OpenSocial - GTUG Stockholm Meeting Oct 1 2009](https://reader033.vdocuments.site/reader033/viewer/2022052505/55514938b4c905f2288b4f44/html5/thumbnails/20.jpg)
Want to learn more?
• http://www.opensocial.org• http://wiki.opensocial.org• http://code.google.com/apis/gadgets/• http://code.google.com/apis/opensocial/