Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Open social


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Open social

  1. 1. OpenSocial
  2. 2. Outline <ul><li>OpenSocial concepts overview </li></ul><ul><ul><li>Containers, people, relationships, activities, viewers, owners, friends </li></ul></ul><ul><li>Hello world application </li></ul><ul><ul><li>Demo: installing an application in a container </li></ul></ul><ul><li>Requesting social data </li></ul><ul><ul><li>Using the OpenSocial namespace </li></ul></ul><ul><ul><li>Demo: owner and viewer </li></ul></ul><ul><ul><li>Demo: listing friends </li></ul></ul>
  3. 3. OpenSocial concepts <ul><li>What is OpenSocial? </li></ul><ul><ul><li>OpenSocial is an API that enables the development of applications within a social networking environment </li></ul></ul><ul><ul><li>First version released in 2007 (version 0.9 released early this year) </li></ul></ul><ul><li>Based on HTML and JavaScript </li></ul><ul><li>Code can be used across multiple social websites </li></ul><ul><ul><li>Supported in several containers : Orkut, MySpace, hi5, friendster, and many others </li></ul></ul>
  4. 4. OpenSocial concepts <ul><li>People: users in a social networking environment </li></ul><ul><li>Relationships: friends and connections between people </li></ul><ul><li>Activities: actions that users carry out (that they want friends to know about) </li></ul><ul><li>OpenSocial apps: applications/gadgets written using the OpenSocial API through which users can interact </li></ul>
  5. 5. Key namespaces <ul><li>opensocial : defines classes that represent key objects and data in a social networking environment (persons, activities, messages) and functions that facilitate object creation and social data requests </li></ul><ul><li>gadget : defines classes and functions that facilitate remote data requests and container-specific user interface features </li></ul>
  6. 6. Roles <ul><li>Viewer: user who logged in, who may be viewing another person’s profile </li></ul><ul><li>Owner: user who owns the profile </li></ul><ul><li>Friends: users who have been added as friends (of the viewer or owner) within the container </li></ul>
  7. 8. Creating your first social app <ul><li>What you need </li></ul><ul><ul><li>A container (social networking website) that supports OpenSocial </li></ul></ul><ul><ul><ul><li>Create an account (or a sandbox/developer account, as necessary) </li></ul></ul></ul><ul><ul><li>A webhost where you can store your application code in </li></ul></ul><ul><ul><ul><li>Should be publicly accessible, or accessible from the container </li></ul></ul></ul>
  8. 9. Creating your first social app <ul><li>You will need to create an XML file that specifies your gadget (social app) </li></ul><ul><li>Hello-world gadget: </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=&quot;my first app&quot;> <Require feature=&quot;opensocial-0.8&quot; /> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ Hello world, this is my first app. ]]> </Content> </Module> HTML/ JavaScript code goes here
  9. 10. Demo: friendster <ul><li>Relatively straightforward container to use: apps can be installed and immediately executed without special developer or sandbox accounts </li></ul><ul><li>Steps: </li></ul><ul><ul><li>Upload gadget (XML file) to a website </li></ul></ul><ul><ul><li>Log in to friendster, then go to to install application </li></ul></ul><ul><ul><li>Execute the application (your friends may execute or install the applications as well) </li></ul></ul>
  10. 11. Requesting social data <ul><li>Steps: </li></ul><ul><ul><li>Create an opensocial.DataRequest object </li></ul></ul><ul><ul><li>Add request items to the object </li></ul></ul><ul><ul><li>Send the object to the container, specifying a callback function </li></ul></ul><ul><li>Example: requesting owner data </li></ul><ul><li>function request() { </li></ul><ul><li>var req = opensocial.newDataRequest(); </li></ul><ul><li>req.add( req.newFetchPersonRequest( </li></ul><ul><li>opensocial.IdSpec.PersonId.OWNER), 'get_owner' ); </li></ul><ul><li>req.send(response); </li></ul><ul><li>}; </li></ul>
  11. 12. opensocial.DataRequest.add() <ul><li>add(request, opt_key) </li></ul><ul><li>Adds a request item to fetch or update data from the server </li></ul><ul><li>Parameters </li></ul><ul><ul><li>request: specifies which data to fetch/update </li></ul></ul><ul><ul><li>opt_key: string that the generated response maps to (for future retrieval from the callback function) </li></ul></ul>
  12. 13. Request items <ul><li>There are functions under opensocial.DataRequest that create request items </li></ul><ul><li>newFetchPersonRequest: </li></ul><ul><ul><li>Creates an item to request person data for the given person </li></ul></ul><ul><ul><li>Returns a Person object </li></ul></ul><ul><li>newFetchPeopleRequest: </li></ul><ul><ul><li>Creates an item to request friends from the server </li></ul></ul><ul><ul><li>Returns a Collection<Person> object </li></ul></ul>
  13. 14. opensocial.DataRequest.send() <ul><li>send(callback_function) </li></ul><ul><li>Sends the data request to the server in order to get a data response </li></ul><ul><li>Parameter </li></ul><ul><ul><li>callback_function: The function to call with the data response generated by the server </li></ul></ul>
  14. 15. Call back function example <ul><li>You need a Javascript function through which the response will be processed </li></ul><ul><li>function response(dataResponse) { </li></ul><ul><li>var owner = dataResponse.get('get_owner').getData(); </li></ul><ul><li>var html = ' <h3> Owner name:' + owner.getDisplayName() + ' </h3> '; </li></ul><ul><li>document.getElementById('msg').innerHTML = html; </li></ul><ul><li>}; </li></ul><ul><li>The last line identifies the html code generated </li></ul><ul><ul><li>To be inserted inside a div tag: <div id='msg'> </div> </li></ul></ul>Key specified when the request was made
  15. 16. Putting it all together <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function request() { </li></ul><ul><li>var req = opensocial.newDataRequest(); </li></ul><ul><li>req.add( req.newFetchPersonRequest( </li></ul><ul><li>opensocial.IdSpec.PersonId.OWNER), 'get_owner' ); </li></ul><ul><li>req.send(response); </li></ul><ul><li>}; </li></ul><ul><li>function response(dataResponse) { </li></ul><ul><li>var owner = dataResponse.get('get_owner').getData(); </li></ul><ul><li>var html = ' <h3> Owner name:' + owner.getDisplayName() + ' </h3>'; </li></ul><ul><li>document.getElementById('msg').innerHTML = html; </li></ul><ul><li>}; </li></ul><ul><li>gadgets.util.registerOnLoadHandler(request); </li></ul><ul><li></script> </li></ul><ul><li><div id='msg'> </div> </li></ul>
  16. 17. Request items v0.8 <ul><li>People: </li></ul><ul><ul><li>newFetchPersonRequest </li></ul></ul><ul><ul><li>newFetchPeopleRequest </li></ul></ul><ul><li>Activities: </li></ul><ul><ul><li>newFetchActivitiesRequest </li></ul></ul><ul><li>Application Data: (persistence) </li></ul><ul><ul><li>newFetchPersonAppDataRequest </li></ul></ul><ul><ul><li>newUpdatePersonAppDataRequest </li></ul></ul><ul><ul><li>newRemovePersonAppDataRequest </li></ul></ul>
  17. 18. Request items v0.9 <ul><li>People: </li></ul><ul><ul><li>newFetchPersonRequest </li></ul></ul><ul><ul><li>newFetchPeopleRequest </li></ul></ul><ul><li>Activities: </li></ul><ul><ul><li>newFetchActivitiesRequest </li></ul></ul><ul><li>Application Data </li></ul><ul><ul><li>newFetchPersonAppDataRequest </li></ul></ul><ul><ul><li>newUpdatePersonAppDataRequest </li></ul></ul><ul><ul><li>newRemovePersonAppDataRequest </li></ul></ul><ul><li>Media Items </li></ul><ul><ul><li>newCreateMediaItemRequest </li></ul></ul><ul><ul><li>newFetchMediaItemsRequest </li></ul></ul><ul><ul><li>newUpdateMediaItemRequest </li></ul></ul><ul><li>Albums </li></ul><ul><ul><li>newCreateAlbumRequest </li></ul></ul><ul><ul><li>newFetchAlbumsRequest </li></ul></ul><ul><ul><li>newUpdateAlbumRequest </li></ul></ul><ul><ul><li>newDeleteAlbumRequest </li></ul></ul>