Open social


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

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>