OpenSocial CS : Survey of Contemporary Technologies

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

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

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

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

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

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

Creating your first social app You will need to create an XML file that specifies your gadget (social app) Hello-world gadget: <![CDATA[ Hello world, this is my first app. ]]> HTML/ JavaScript code goes here

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)

Simple lab exercise Install the helloworld app  Gadget already uploaded in Installation steps  Go to friendster.com/developer (after logging in)  Select the “Get API Key” tab  Fill in gadget details and other requirements, then click on “Save”  Click on “Test App”, then click on “Add App” Ask a friend to visit your profile

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); };

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)

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 object

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

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 = ' Owner name:' + owner.getDisplayName() + ' '; document.getElementById('msg').innerHTML = html; }; The last line identifies the html code generated  To be inserted inside a div tag: Key specified when the request was made

Putting it all together 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 = ' Owner name:' + owner.getDisplayName() + ' '; document.getElementById('msg').innerHTML = html; }; gadgets.util.registerOnLoadHandler(request);

Demo Install the ownerviewer social app in friendster  Gadget already uploaded in Execute it Ask one of your friends in that container to visit your profile (to execute that application) and observe the output Under what circumstances will owner be different from viewer when your application executes?

Request items v0.8 People:  newFetchPersonRequest  newFetchPeopleRequest Activities:  newFetchActivitiesRequest Application Data: (persistence)  newFetchPersonAppDataRequest  newUpdatePersonAppDataRequest  newRemovePersonAppDataRequest

Request items v0.9 People:  newFetchPersonRequest  newFetchPeopleRequest Activities:  newFetchActivitiesRequest Application Data  newFetchPersonAppDataRequest  newUpdatePersonAppDataRequest  newRemovePersonAppDataRequest Media Items  newCreateMediaItemRequest  newFetchMediaItemsRequest  newUpdateMediaItemRequest Albums  newCreateAlbumRequest  newFetchAlbumsRequest  newUpdateAlbumRequest  newDeleteAlbumRequest

Listing friends Take home exercise Sign up to a free webhost service, and upload listfriends.xml (available via moodle) Install the gadget via friendster Try other containers (MySpace, Orkut, etc)

What’s next? Exploring and understanding other containers and development environments Other features of the API  Persistence: storing app data  Activities: generating app-related updates to be viewed by friends  Third party requests: communicating with other servers