OpenSocial - GTUG Stockholm Meeting Oct 1 2009

  • 1,228 views
Uploaded on

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.

More in: Technology , Spiritual
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,228
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. OpenSocial An open standard for social applications Jacob Gyllenstierna Avatars United GTUG Stockholm Meeting October 1, 2009
  • 2. What is OpenSocial?
    • "...a set of common APIs for building social applications across many websites."
  • 3. 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
  • 4. Who is using OpenSocial?
      • Many popular social networks and consumer websites
      • Emerging in the enterprise space
      • +600M users worldwide
  • 5. 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...)
  • 6. Development types
    •  
  • 7. 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 >
  • 8. Gadget rendering
  • 9. 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 >
  • 10. 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) {
    •         ...
    •       }
  • 11. 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;
  • 12. OpenSocial concepts
      • People
      • Friends / Connections
      • Activities
      • Persistent data (key-value store)
      • Messages
      • Sharing application
  • 13. 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 >
  • 14. 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);  
    • }
  • 15. 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;   }}
  • 16. DEMO  
  • 17. 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;}}]
  • 18. 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/
  • 19. 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)
  • 20. Want to learn more?
      • http://www.opensocial.org
      • http://wiki.opensocial.org
      • http://code.google.com/apis/gadgets/
      • http://code.google.com/apis/opensocial/
  • 21. Questions? [email_address] twitter.com/jgyllen http://developer.avatarsunited.com