Example App: Lots of OpenSocial Calls

Happy holidays for you who had time off, and happy work for you who didn't. Of course, for those of us who are developers we no doubt had a working holiday :). Such is life in the world of tech...

Where's my Data API? Where's my Activities API?

Just wanted to let you folks know that we're working hard on the Data and Activities portions of OpenSocial. A lot of forum participants have been asking about them, and we're quite eager to get them up for you.

Why aren't they here already? Well, MySpace is kind of huge, and MySpace profiles tend to be very public--especially profiles of popular bands and celebrities. That creates a lovely atmosphere for virality, because popular profiles tend to be loci of friendship clusters, thus minimizing the degrees of separation between users. Hopefully those popular profiles will pick up your app and make it go viral. If your app goes viral, there is much cause to celebrate. That celebration might be cut short if the app goes down due to load. Because of the rather large scale of MySpace, we need to make sure that our middle tier is ready to go--your app will potentially be utilized by millions of simultaneous users, so we want your data to be served smoothy and error free.

Speaking of virality, we're also working on the Activities API. It's quite challenging to make it both flexible and scalable. As soon as we have a good picture of how it will look, we'll give you examples so you can get started coding.

Yes, there's Sample Code!

What blog post would be complete without sample code? The below app, which I recommend that you paste into the Canvas section, issues quite a few requests (different person, friends, photos, and albums requests). It then dumps the response objects into HTML so you can look at the properties that are available to you. Pretty straightforward, but illuminatory if you're new to the OpenSocial development process. I won't do much explaining of the workings of the code--it's more of a cut and paste deal. If you want basic documentation, head over to the "Learn and Play" section.

Working App 1 : Request example and data dump app
<style>

#output
{ overflow:scroll;height:100%; }
.objectGraph
{

font-size
:small;
background-color
:whitesmoke;
margin
:10px;

padding
:10px;
border
:solid;
border-width
:1px;

}
.arrayGraph
{
font-size
:small;
}
pre
{

padding
:20px;
background-color
:white;
border
:dashed;

border-width
:1px;

}
</style>
<div id="output"></div>

<script type="text/javascript">


function init()
{
//Set the owner id so we don't have to use it later
var personId = opensocial.DataRequest.PersonId.OWNER;

//Create our DataRequest object

var dr = opensocial.newDataRequest();

//Set up an empty params object so we can use it for functions that require params.
var opt_params = {};

//Request Albums

var albumReq =
dr.newFetchAlbumsRequest(personId,opt_params);

//Request Person data
var personReq =
dr.newFetchPersonRequest(personId);

//Request Friends

var friendReq =
dr.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS);

//Request Online Friends
var onlineFriends_Params = {};
onlineFriends_Params[opensocial.DataRequest.PeopleRequestFields.FILTER]
=
opensocial.DataRequest.FilterType.ONLINE_FRIENDS;
var onlineFriendsReq =
dr.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS,onlineFriends_Params);

//Request First 5 Friends (using paging)

var pagedFriends_Params = {};
pagedFriends_Params[opensocial.DataRequest.PeopleRequestFields.FIRST]
= 1;
pagedFriends_Params[opensocial.DataRequest.PeopleRequestFields.MAX]
= 5;
var pagedFriendsReq =
dr.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS,pagedFriends_Params);

//Request Extended Person data

var extendedPersonParams = {};
extendedPersonParams[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS]
=
[opensocial.Person.Field.ID,MyOpenSpace.Person.Field.ABOUT,
MyOpenSpace.Person.Field.BOOKS];
var bigPersonReq = dr.newFetchPersonRequest(personId,extendedPersonParams);

//Request Photos

var photoReq = dr.newFetchPhotosRequest(personId,opt_params);

//Add all the requests to the DataRequest
dr.add(albumReq,'Albums');
dr.add(personReq,
'SmallPerson');
dr.add(bigPersonReq,
'ExtendedPerson');
dr.add(friendReq,
'BasicFriends');
dr.add(onlineFriendsReq,
'OnlineFriends');
dr.add(pagedFriendsReq,
'PagedFriends');
dr.add(photoReq,
'Photos');

writeToOutput(
"Requesting data...");
dr.send(response);
}


//Response callback...
function response(data)
{
writeToOutput(
"Got response back");

var albums = data.get('Albums').getData();
var bigPerson = data.get('ExtendedPerson').getData();
var person = data.get('SmallPerson').getData();
var friends = data.get('BasicFriends').getData();
var onlineFriends = data.get('OnlineFriends').getData();
var pagedFriends = data.get('PagedFriends').getData();
var photos = data.get('Photos').getData();

dumpArray(
"Albums","album",albums);
dumpObject(
"Person","person",person);
dumpObject(
"Extended Person","person",bigPerson);
dumpArray(
"Friends","friend",friends);
dumpArray(
"Online Friends","friend",onlineFriends);
dumpArray(
"Paged Friends","friend",pagedFriends);
dumpArray(
"Photos","photo",photos);
}


//Takes an object and dumps it out, with some example code
function spillTheBeans(name, input)
{
var docOutput = "";
var cOutput = "";
var out = "";

if(input.fields_ != null)
{
input
= input.fields_;
}


for(var prop in input)
{
if(typeof(input[prop]) != "function")
{
docOutput
+= "<br /><b>" + prop + ":</b> " + input[prop];
cOutput
+= "var _" + prop + " = " + name + ".getField(\""+prop+"\")" + ";\n";
}

}

out
+= "<div class=\"objectGraph\">";
out
+= "<b>Properties of "+name+":</b><br />";
out
+= docOutput;
out
+= "<br /><br /><b>Code to access:</b>";
out
+= "<pre>" + cOutput + "</pre>";
out
+= "</div>";

return out;
}



//Writes a response object's data and example code
function dumpObject(name,smallname,obj)
{
var out = "";
out
+= "<div class=\"arrayGraph\">";
out
+= "<h2>Got response back: Object of type "+name + "</h2>";
out
+= spillTheBeans(smallname,obj.fields_);
out
+= "</div>";
writeRaw(out);
}


//Writes a response array's data and example code
function dumpArray(name,subname,obj)
{
var out = "";
out
+= "<div class=\"arrayGraph\">";
out
+= "<h2>Got response back: Array of "+name+" with " + obj.size() + " items</h2>";


var iterator = 1;

obj.each(
function(myObj)
{
out
+= "<h4>" + subname +" " + iterator +"</h4>";
iterator
++;
out
+= spillTheBeans(subname,myObj);
});

out
+= "</div>";

writeRaw(out);
}


function writeToOutput(message)
{
document.getElementById(
"output").innerHTML += "<br />" + message;
}

function writeRaw(message)
{
document.getElementById(
"output").innerHTML += message;
}

init();

</script>
Published Sunday, February 24, 2008 1:49 AM by Chris
Filed under:

Comments

# re: Example App: Lots of OpenSocial Calls

Monday, March 03, 2008 1:17 PM by jbum

A very useful sample app - thank you.

I assume you are aware that your use of

opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS

isn't working yet, nor does it appear to be working with the OWNER_FRIENDS call...

This will be helpful, since it will greatly pare down the content of the FetchPerson call...

Powered by Community Server (Commercial Edition), by Telligent Systems