OpenSocial - GTUG Stockholm Meeting Oct 1 2009

OpenSocial An open standard for social applications Jacob Gyllenstierna Avatars United GTUG Stockholm Meeting October 1, 2009

What is OpenSocial?
"...a set of common APIs for building social applications across many websites."

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

Who is using OpenSocial?
Many popular social networks and consumer websites
Emerging in the enterprise space
+600M users worldwide

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...)

Development types

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 >

Gadget rendering

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 >

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) {
...
}

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;

OpenSocial concepts
People
Friends / Connections
Activities
Persistent data (key-value store)
Messages
Sharing application

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 >

function 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);
}

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"}}]

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/

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)

Want to learn more?
http://www.opensocial.org
http://wiki.opensocial.org
http://code.google.com/apis/gadgets/
http://code.google.com/apis/opensocial/

Questions? [email_address] twitter.com/jgyllen http://developer.avatarsunited.com

OpenSocial - GTUG Stockholm Meeting Oct 1 2009

by Jacob Gyllenstierna on Oct 01, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

Embed Views

Statistics

OpenSocial - GTUG Stockholm Meeting Oct 1 2009 — Presentation Transcript