130 likes | 139 Views
Learn how to create open-social gadgets, access user & friend data, and store application data. Use this guide for a hands-on experience!
E N D
A Quick Introduction and Tutorial Open Social
What is Open-Social in a Nutshell? • Open-Social provides a API specification for social networking sites • This allows all applications / gadgets to work across every site that implements the specification (in theory) So you build a gadget for iGoogle, and it works on: ORKUT, BEBO, MYSPACE, NING, etc (but not Facebook, sorry)
What I'm going to show: • How to make a simple open-social gadget • How to get current user information • How to get friends information • How to store and return custom application data • Then I'm going to give you something to do on your own!
Here is a hello-world application: <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Hello World!"> <Require feature="opensocial-0.7" /> </ModulePrefs> <Content type="html"> <![CDATA[ <p>Hello, world!</p> ]]> </Content> </Module> And here it is working in iGoogle (that means demo it) How to Make an Open-Social Gadget • You provide a simple XML file which contains your gadget HTML and JavaScript code • Thats it!
And these sites: iGoogle http://code.google.com/apis/opensocial http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.8.html http://wiki.opensocial.org/index.php?title=Opensocial.DataRequest_(v0.8) http://code.google.com/apis/opensocial/docs/0.8/reference/ The Demo: Tools to be used • We're going to use these tools: • A Text Editor • VMWare Player • Apache Shindig • Partuza
The Demo: Take a look at your VM • The Virtual machine has two web-applications installed • Apache Shindig (http://local.shindig) • Partuza (http://partuza) - a full social networking site We can use these two web-apps to test out gadgets. For example navigate to: http://local.shindig/gadgets/files/samplecontainer/samplecontainer.html Or http://local.shindig/gadgets/ifr?url=http://www.labpixies.com/campaigns/todo/todo.xml You can load any gadget into either page in order to test it. Lets do that with out hello-world xml file....
The Demo: Getting Social Data • I'll be using some stuff covered here: • http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.8.html • Note: We do everything in javascript. (sorry!) • We fetch data using an object called the DataRequest object • var req = opensocial.newDataRequest(); • Then we 'add' a bunch of data requests to this object which represent what we want to retrieve • req.add(some_request_for_data); • Then we send it along with the name of a function that will handle the callback: • req.send(callback_function);
The Demo: Getting Social Data • So to get information about a person (in this case the current user) we do this: • var req = opensocial.newDataRequest(); • req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER), 'viewer'); • req.send(someCallBackFunction); • You can see more request types here: • http://wiki.opensocial.org/index.php?title=Opensocial.DataRequest_(v0.8)
The Demo: Getting Social Data • Let me do this for real....
The Demo: Getting Social Data • Wow! It worked! (hopefully)
The Demo: Getting Social Data • Obviously its more useful if you also have friend information. Getting your friends-list is similar: • var req = opensocial.DataRequest(); • req.add(req.getPeopleRequest(idSpec, parameters), 'friend-data'); • The 'idSpec' object just describes what people you want information for, and the 'parameters' object just specifices things like the number to retrieve, for example: • var idSpec = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" }); • var parameters = {}; • parameters['max'] = 30;
The Demo: Getting Application Data • The javascript API also allows you to store application-data at the social network using the same DataRequest object. • It provides three methods, for fetch, store, and delete. • For example, to fetch basic data stored by the viewer: • var idSpec = opensocial.newIdSpec({"userId" : "VIEWER"}); • req.add(req.newFetchPersonAppDataRequest(idSpec, 'numberOfHelloes'), 'appData'); • Or to add / update some information we could do something like this: • var req = opensocial.newDataRequest();req.add(req.newUpdatePersonAppDataRequest("VIEWER", 'numberOfHelloes', 5)); req.send();
Time to Do Stuff Yourselves! • I showed you how to retrieve application data for the current user, but how do you retrieve application data from other users? • Your goals for the rest of the session: • Make an application where you can click a 'hello' button and it increments a hello count, which it sends to the server. When the application loads it should show you how many times you said hello. • Make an application that shows a list of your friends and you can say hello to each of them. For example, if I said 'hello' three times to bob, when bob loads the application it will say '3 hellos received from Matthew' These links will be useful: http://wiki.opensocial.org/index.php?title=Opensocial.DataRequest_(v0.8) http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.8.html http://code.google.com/apis/opensocial/docs/0.8/reference/