OpenSocial

CS 195.35: 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 needA 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-worldgadget:

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="my first app"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"> <![CDATA[ Hello world, this is my first app. ]]> </Content> </Module>

HTML/JavaScript codegoes 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

http://sites.google.com/site/jpvopenapps/helloworld.xml

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/updateopt_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<Person> 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 = ' <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 whenthe request was made

Putting it all together

<script type="text/javascript">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>

Demo

Install the ownerviewer social app in friendster Gadget already uploaded in

http://sites.google.com/site/jpvopenapps/ownerviewer.xml

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 APIPersistence: storing app dataActivities: generating app-related updates to

be viewed by friendsThird party requests: communicating with

other servers