Introduction To The OpenSocial API


Published on

Quickly get a basic OpenSocial gadget up and running on Orkut. These are the slides from an OpenSocial Developer Garage Dallas presentation on Jan 17th, 2009. See for details.

Published in: Technology, News & Politics
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction To The OpenSocial API

  1. 1. Introduction  to the  OpenSocial API Christopher St. John [email_address]
  2. 2. Goals <ul><li>By lunch, you should: </li></ul><ul><ul><li>Have a developer account on Orkut </li></ul></ul><ul><ul><li>Have a simple OpenSocial application up and running </li></ul></ul><ul><ul><li>Have a clue about the rest of the OpenSocial API </li></ul></ul><ul><ul><li>Know where to go for more information </li></ul></ul><ul><ul><li>Be ready to start a real application </li></ul></ul><ul><ul><li>Have a list of developers friended for testing </li></ul></ul><ul><ul><li>Not a goal: review every last detail. It's assumed you can read the fine manual and figure things out on your own once you get started. </li></ul></ul>
  3. 3. Introductions <ul><ul><li>What's your name? </li></ul></ul><ul><ul><li>Done any OpenSocial development? </li></ul></ul><ul><ul><li>Done any Facebook development? </li></ul></ul><ul><ul><li>Front-end technology like HTML/JavaScript? </li></ul></ul><ul><ul><li>Back-end server-side development? </li></ul></ul><ul><ul><li>Have a hosted account somewhere? </li></ul></ul><ul><ul><li>What do you want to learn? </li></ul></ul>
  4. 4. What is OpenSocial? <ul><ul><li>Framework for writing gadgets </li></ul></ul><ul><ul><ul><li>It's a portal API with some special social network calls </li></ul></ul></ul><ul><ul><ul><li>Like a Facebook application : little boxes on your profile </li></ul></ul></ul><ul><ul><ul><li>XML definition file plus lots of JavaScript </li></ul></ul></ul><ul><ul><ul><li>Can talk back to your server-side code </li></ul></ul></ul><ul><ul><li>REST API for your server to talk to a container </li></ul></ul><ul><ul><ul><li>Socialize your standalone webapp </li></ul></ul></ul><ul><ul><ul><li>Very new, may not be supported on all containers </li></ul></ul></ul><ul><ul><li>Ning, LinkedIn, MySpace, Orkut, Hi5, etc. </li></ul></ul><ul><ul><li>OpenSocial is not really about cross-network sharing </li></ul></ul><ul><ul><li>Containers free to restrict data usage, just like Facebook </li></ul></ul><ul><ul><li>It's about write-once/port-everywhere social widgets </li></ul></ul>
  5. 5.       
  6. 6. A Real Application <ul><ul><li>Demo from apps available on Orkut </li></ul></ul><ul><ul><li>Choose 'Namez'  </li></ul></ul><ul><ul><li>Add to profile, there it is </li></ul></ul><ul><ul><li>Standard set of possible boxes </li></ul></ul><ul><ul><li>Not generally as rich as Facebook </li></ul></ul><ul><ul><li>Least common denominator </li></ul></ul>
  7. 7. Hello Friends! <ul><ul><li>Simplest possible beyond &quot;Hello World&quot; </li></ul></ul><ul><ul><li>Get list of friends and display it </li></ul></ul>
  8. 8. Hello World! <ul><ul><li>Simplest possible OpenSocial application </li></ul></ul><ul><ul><li>Just displays &quot;Hello, World&quot; </li></ul></ul><ul><ul><li>We'll start with this one to get your account configured </li></ul></ul>
  9. 9. But first... <ul><ul><li>Get an Orkut account  </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>Add sandbox access to the account </li></ul></ul><ul><ul><ul><li>google &quot;orkut sandbox signup&quot; </li></ul></ul></ul><ul><ul><ul><li>follow the link, then follow the instructions </li></ul></ul></ul><ul><ul><li>If you have a web hosting account w/ftp, great </li></ul></ul><ul><ul><li>If not, you can use google sites </li></ul></ul><ul><ul><ul><li>  </li></ul></ul></ul>
  10. 10. Hello World! <ul><ul><li>You'll need to upload this somehow: </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>If no web hosting account, try this: </li></ul></ul><ul><ul><ul><li>Create a new google site, call it whatever you want </li></ul></ul></ul><ul><ul><ul><li>Create a new page called &quot;opensocial&quot; </li></ul></ul></ul><ul><ul><ul><li>Add helloworld.xml as an attachment </li></ul></ul></ul><ul><ul><ul><li>The URL should look like the above, more or less </li></ul></ul></ul><ul><ul><li>Go to </li></ul></ul><ul><ul><li>Follow Apps -> edit </li></ul></ul><ul><ul><li>Put in the URL for helloworld.xml </li></ul></ul><ul><ul><li>&quot;Hello World!&quot; now appears in your sandbox apps menu </li></ul></ul>
  11. 11. helloworld.xml <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><Module> </li></ul><ul><li>   <ModulePrefs title=&quot;Hello World!&quot;> </li></ul><ul><li>     <Require feature=&quot;opensocial-0.8&quot; /> </li></ul><ul><li>   </ModulePrefs> </li></ul><ul><li>   <Content type=&quot;html&quot;> </li></ul><ul><li>     <![CDATA[ </li></ul><ul><li>       Hello, world! </li></ul><ul><li>     ]]> </li></ul><ul><li>   </Content> </li></ul><ul><li></Module> </li></ul>
  12. 12. Hello Friends! <ul><ul><li>Shows list of friends </li></ul></ul><ul><ul><li>Lightly modified version of code in Google's tutorial: </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>You know the drill... </li></ul></ul>
  13. 13. hellofriends.xml <ul><li><div id='main'> </li></ul><ul><li>   Your friends: </li></ul><ul><li>   <div id='friends'></div> </li></ul><ul><li></div> </li></ul><ul><ul><li>Markup is mostly plain old HTML </li></ul></ul><ul><ul><li>Lots of DOM manipulation </li></ul></ul>
  14. 14. hellofriends.xml <ul><li>function loadFriends() { </li></ul><ul><li>   var req = opensocial.newDataRequest(); </li></ul><ul><li>   req.add( </li></ul><ul><li>     req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer'); </li></ul><ul><li>   var viewerFriends = opensocial.newIdSpec({ </li></ul><ul><li>     &quot;userId&quot; : &quot;VIEWER&quot;, &quot;groupId&quot; : &quot;FRIENDS&quot; </li></ul><ul><li>   }); </li></ul><ul><li>   var opt_params = {}; </li></ul><ul><li>   opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100; </li></ul><ul><li>   req.add( </li></ul><ul><li>     req.newFetchPeopleRequest(viewerFriends, opt_params), 'viewerFriends'); </li></ul><ul><li>   req.send(onLoadFriends); </li></ul><ul><li>} </li></ul><ul><li>function init() { </li></ul><ul><li>   loadFriends(); </li></ul><ul><li>} </li></ul><ul><li>         </li></ul>
  15. 15. hellofriends.xml <ul><li>function onLoadFriends(data) { </li></ul><ul><li>   var viewer = data.get('viewer').getData(); </li></ul><ul><li>   var viewerFriends = data.get('viewerFriends').getData(); </li></ul><ul><li>   html = new Array(); </li></ul><ul><li>   html.push('<ul>'); </li></ul><ul><li>   viewerFriends.each(function(person) { </li></ul><ul><li>     if (person.getId()) { </li></ul><ul><li>       html.push('<li>', person.getDisplayName(), '</li>'); </li></ul><ul><li>     } </li></ul><ul><li>   }); </li></ul><ul><li>   html.push('</ul>'); </li></ul><ul><li>   document.getElementById('friends').innerHTML = html.join(''); </li></ul><ul><li>   gadgets.window.adjustHeight(); </li></ul><ul><li>} </li></ul>
  16. 16. OpenSocial Calls <ul><ul><li>They're batched up </li></ul></ul><ul><ul><li>The parameters are associated with keys </li></ul></ul><ul><ul><li>You use the keys to index the results </li></ul></ul><ul><ul><li>That pattern is repeated, so get to know it </li></ul></ul>
  17. 17. Quick break... <ul><li>     </li></ul>
  18. 18. Half Baked Application <ul><ul><li>Come up with 10 words in 2 minutes </li></ul></ul><ul><ul><li>Make an idea out of two words </li></ul></ul><ul><ul><li>Implement it as simply as possible (pick one idea) </li></ul></ul><ul><ul><li>Add some graphics </li></ul></ul><ul><ul><li>Add some application metadata </li></ul></ul><ul><ul><li>Give the API a workout </li></ul></ul><ul><ul><li>Steal some ideas from here: </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>And maybe here: </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>And for the hard core, the API spec: </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>Main page at: </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  19. 19.
  20. 20. The End <ul><li>   </li></ul>