I spent a lot of today cleaning out our garage (yuck) and doing other 'offline' things. There seems to be a Sat. trend developing here!
Anyway, since I don't have much to report in terms of 'new' development, and since MySpace just made their app network live, I figured I would take a minute to break down a simple MySpace app.
If you want to play along with this example, you'll have to first get approved to be a MySpace App Developer. It's pretty easy but it can take a few days because (as I write this) they are manually approving all applications.
So moving along and assuming you have access to develop a MySpace application, let's get into some of the details of building a HTML/Javascript MySpace app (using OpenSocial).
First, there are currently three places you can write code for your MySpace app. The canvas, the profile, and the homepage.
The canvas is intended to be the main page/area of your application. This is where all the real action (ie. the real program that is your app) is intended to run. You pretty much get all the space on the page to play with.
The profile is for a section of space that will show up on your app user's profile page. This is generally intended for basic notifications and simple controls of your application. This is the MySpace page that a user who installs your app will see most often as it's the area that they control their MySpace page(s) from.
Finally the homepage is for a section of space that will show up on your app user's homepage - that is the page that everyone else sees when they visit someone's MySpace page. This is generally intended for basic notifications or the 'front-facing' bits of your application (ie. the things you want the general public to see as a result of your user having the app installed on their page).
The example I'm going to dump on you could really be used in any of these three areas, but for my testing I wrote it for the canvas section. Since it doesn't really do anything all that exciting that other people would care about, you should probably do the same.
OK with all of that out of the way, let's get into the code deatils already!
When it comes to coding your app., the most important thing to remember is that all we can do is HTML and Javascript. Luckily, that gives us enough power to do just about anything we really want. In our example, all we are going to do list out the app owner's friends. But trust me, there is a lot more you can do with this stuff (maybe down the road I'll get into some more of the interesting things for you).
With all that in mind, let's start with the basic HTML of our example. We define a header, and a simple div tag. This div tag is what we will manipulate via our Javascript later.
<h1>Your Friends »</h1>
<div id="friends"></div>
Next up is our Javascript (where all the real action occurs). The basic idea behind the MySpace (and OpenSocial) Javascript features is to define actions and callbacks. We start with a init function (a common initialize type of function), within that we'll define a new opensocial data request, set up the request to get a list of our app installer's friends, and finally make the actual request.
<script>
function init() {
var dataRequest = opensocial.newDataRequest();
var friendRequest = dataRequest.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS);
dataRequest.add(friendRequest);
dataRequest.send(responseCallback);
}
</script>
I think it's all pretty self-explanitory, but I do feel like I need to point out that last little bit - the dataRequest.send method. That method is actually making the call and then passing back the results (asynchronously or rather whenever it can regardless of what else is going on on the page) to our second function (ie. the call back function).
So now that we know we are sending results to another function, we have to actually write that callback bit. That is, write the code that deals with the list of opensocial friend objects we'll get back. Again it's pretty simple. Here we put the JSON (all the opensocial and myspace calls return JSON formatted data) response into a simple Javascript variable. Then we loop through the results, getting the name value for each of our friends and appending it to a variable (our running list of results). Once we've done we just update the innerHTML of our div tag with the variable we just populated.
<script>
function responseCallback(dataResponse) {
var friendsData = dataResponse.get(opensocial.DataRequest.Group.OWNER_FRIENDS).getData();
var friendlist = "";
var friendcount = 0;
friendsData.each(
function(friendData) {
var friendName = friendData.getField(opensocial.Person.Field.NAME);
friendcount++;
friendlist += friendcount + ". " + friendName + "<br>";
}
);
friends.innerHTML = friendlist;
}
</script>
We're almost done. The only thing left to do is actually kick off the execution of all this (did you notice we haven't done that yet?). We do that with a simple call to our init() function, like so:
<script>
init();
</script>
There you have it, a simple little MySpace app that lists out your friends (with a basic counter). Nothing too fancy, but hopefully it shows you how easy this stuff can be (once you learn the details of the OpenSocial and MySpace features like dataRequest).
Below is the full code that I broke down above (for easy copy/paste). Go ahead and dump it into your app canvas source, save it, and give it a run...it *should* list out your friends just like we wanted.
<h1>Your Friends »</h1>
<div id="friends"></div>
<script>
function init() {
var dataRequest = opensocial.newDataRequest();
var friendRequest = dataRequest.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS);
dataRequest.add(friendRequest);
dataRequest.send(responseCallback);
}
function responseCallback(dataResponse) {
var friendsData = dataResponse.get(opensocial.DataRequest.Group.OWNER_FRIENDS).getData();
var friendlist = "";
var friendcount = 0;
friendsData.each(
function(friendData) {
var friendName = friendData.getField(opensocial.Person.Field.NAME);
friendcount++;
friendlist += friendcount + ". " + friendName + "<br>";
}
);
friends.innerHTML = friendlist;
}
init();
</script>
