html5-img
1 / 13

Open Social

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)

Jeffrey
Télécharger la présentation

Open Social

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. A Quick Introduction and Tutorial Open Social

  2. 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)

  3. 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!

  4. 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!

  5. 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

  6. 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....

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

  8. 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)

  9. The Demo: Getting Social Data • Let me do this for real....

  10. The Demo: Getting Social Data • Wow! It worked! (hopefully)

  11. 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;

  12. 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();

  13. 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/

More Related