210 likes | 380 Views
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
E N D
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 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-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 inhttp://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/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<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 inhttp://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 API • Persistence: storing app data • Activities: generating app-related updates to be viewed by friends • Third party requests: communicating with other servers