OpenSocial - GTUG Stockholm Meeting Oct 1 2009
Upcoming SlideShare
Loading in...5
×
 

OpenSocial - GTUG Stockholm Meeting Oct 1 2009

on

  • 1,819 views

I gave an introductory talk on OpenSocial at the second Google Technology User Group Stockholm meeting. I included some demos on Avatars United.

I gave an introductory talk on OpenSocial at the second Google Technology User Group Stockholm meeting. I included some demos on Avatars United.

Statistics

Views

Total Views
1,819
Views on SlideShare
1,815
Embed Views
4

Actions

Likes
1
Downloads
6
Comments
0

2 Embeds 4

http://www.linkedin.com 3
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    OpenSocial - GTUG Stockholm Meeting Oct 1 2009 OpenSocial - GTUG Stockholm Meeting Oct 1 2009 Presentation Transcript

    • 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 =&quot; 1.0 &quot; encoding =&quot; UTF-8 &quot;?> < Module >   < ModulePrefs title =&quot; Hello virtual world! &quot; description =&quot; My first application. &quot; thumbnail =&quot; http://stuff.cookiejunkie.com/gtug-sthlm/gadgets/gtug2_thumb.png &quot;>   </ ModulePrefs >
      •     < Content type =&quot; html &quot; view =&quot; profile &quot;>
      •     <![CDATA[
      •       Hello from the profile view!
      •     ]]>
      •   </ Content > 
      •     < Content type =&quot; html &quot; view =&quot; canvas &quot;>
      •     <![CDATA[
      •       Hello from the canvas view!
      •     ]]>
      •   </ Content > </ Module >
    • Gadget rendering
    • Listing my friends
      •  
      •   < ModulePrefs ...>     < Require feature =&quot; opensocial-0.8 &quot; />   </ ModulePrefs >  
      •   < Content type =&quot; html &quot; view =&quot; profile,canvas &quot;>     <![CDATA[
      •       <h3>My friends:</h3><br />       <div id=&quot;friends&quot;></div>
      •       <script type=&quot;text/javascript&quot;>         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), &quot;ownerFriends&quot;);
      •         req.send(showFriends);       }
      •       function showFriends(response) {
      •         ...
      •       }
    • Listing my friends
      •       function showFriends(response) {
      •         var respItem = response.get(&quot;ownerFriends&quot;);
      •                              if (respItem.hadError()) {           alert(&quot;Error fetching friends!&quot;);         }         else {           var data = respItem.getData();           var friendsDiv = document.getElementById(&quot;friends&quot;);           var html = &quot;<ul>&quot;;                                    data.each(function(person) {             var name = person.getDisplayName();             var thumbnailUrl = person.getField(opensocial.Person.Field.THUMBNAIL_URL);             html += &quot;<li>&quot;;             html += &quot;<img src=&quot;&quot; + thumbnailUrl + &quot;&quot; /> &quot; + name;             html += &quot;</li>&quot;;           });                                    html += &quot;</ul>&quot;;           friendsDiv.innerHTML = html;
    • OpenSocial concepts
        • People
        • Friends / Connections
        • Activities
        • Persistent data (key-value store)
        • Messages
        • Sharing application
    • Fetching data from Twitter
      •   < Content type =&quot; html &quot; view =&quot; profile,canvas &quot;>
      •     <![CDATA[
      •       <h3>Top ten trends:</h3><br />       <div id=&quot;trends&quot;></div>
      •       <script type=&quot;text/javascript&quot;>         function fetchTrends() {...}                         function showTrends(response) {...}                         gadgets.util.registerOnLoadHandler(fetchTrends) ;       </script>     ]]>
      •   </ Content >
    • Fetching data from Twitter
      • function fetchTrends() {   url = &quot;http://search.twitter.com/trends.json&quot;;                  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);  
      • }
    • Fetching data from Twitter
      • function showTrends(response) {   if (response.errors && response.errors.size > 0) {     alert(&quot;Error fetching trends!&quot;);   }   else {     var data = response.data;     var trends = data.trends;     var trendsDiv = document.getElementById(&quot;trends&quot;);     var html = &quot;<ul>&quot;;                              for (var i = 0; i < trends.length; i++) {       var trend = trends[i];                                    html += &quot;<li>&quot;;       html += &quot;<a href=&quot;&quot; + trend.url + &quot;&quot; target=&quot;_blank&quot;>&quot; + trend.name + &quot;</a>&quot;;       html += &quot;</li>&quot;;     }                              html += &quot;</ul>&quot;;     trendsDiv.innerHTML = html;   }}
    • DEMO  
    • RESTful & RPC protocols
      • /people/@me/@friends
      • [{&quot;result&quot;:
      •   {&quot;totalResults&quot;: 35,
      •     &quot;list&quot;: [
      •        {&quot;name&quot;: {&quot;unstructured&quot;: &quot;Odonion&quot;, &quot;formatted&quot;: &quot;Odonion&quot;},
      •       &quot;displayName&quot;: &quot;Odonion&quot;,
      •       &quot;isOwner&quot;: false,
      •       &quot;thumbnailUrl&quot;: &quot;http://albums.cf.avatarsunited.com/avatar/odonion/b87897847211421fb2ce578e82d03e22.small.jpg&quot;,
      •       &quot;id&quot;: &quot;au:a:odonion&quot;,
      •       &quot;isViewer&quot;: false},
      •       {..}],
      •   &quot;id&quot;:&quot;ownerFriends&quot;}}]
    • 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