Your SlideShare is downloading. ×
Open social
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Open social

365
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

×