Quickie HelloWorld-esque Application
Let's make a quick HelloWorld app on MySpace.
Step 1:
Step 2:
Click on "My Apps" and you should see a Create New App button:
NOTE: In order to access My Apps, you must have access to the MySpace Developer's Platform. Request access here.
Step 3:
Click "Build New App". You'll be prompted to fill out some information...
Step 4:
Click the Next button. You are now required to to solve captcha text to prove that you're in fact a human being ;). Click Next when complete.
Step 5:
The first screen dislays is the Upload Application XML tab. If you have an XML file, you can upload it here. If not, click the SKIP THIS STEP button.
Step 6:
The next page is the Edit App Information tab. The application URI is a unique identifier for your application, and is auto-generated although you can change this name if you wish.You must select a primary category. Your next page will look like the following:
NOTE: You don't need to upload icons if you don't have them prepared. Click the SAVE button , and you'll finally get to the meat!
Step 7:
Next, click the Edit App Source tab.
Step 7:
The Profile Surface code will show up on the user's profile page when they install it, so let's start with that.
Below is sample code for a working test application . Paste this test code verbatim into the Profile Surface box and click the Save Application Source button..
Test Code: Simple HelloWorld that grabs the user information
<div id='heading'></div>
<hr size="1px" />
<div id='main'></div>
<script type="text/javascript">
var os;
var dataReqObj;
var html = '';
var heading = '';
function init() {
os = opensocial.Container.get();
dataReqObj = os.newDataRequest();
var viewerReq = os.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER);
dataReqObj.add(viewerReq);
dataReqObj.send(viewerResponse);
}
function viewerResponse(data) {
var viewer = data.get(opensocial.DataRequest.PersonId.VIEWER).getData();
heading = 'Hello, ' + viewer.getDisplayName();
var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
var profile = viewer.getField(opensocial.Person.Field.PROFILE_URL);
document.getElementById('heading').innerHTML = heading;
document.getElementById('main').innerHTML = html;
}
init();
</script>
NOTE: The above test code would probably work, unmodified, on any social networking site that implements OpenSocial. While Orkut or Plaxo's internal systems might look completely different, the JavaScript you develop against will look the same. Certainly you may wish to modify the look and feel of your app to fit the site you're planting it on, but the important thing is that you don't need to learn the ins and outs of a particular site's API--which is where the real learning curve typically is.
Step 8:
At this point, you'll have the option to enter code into both the Canvas or Home Surfaces.
Step 9:
After saving your code, click on the MyApps link on the left hand navigation bar to view your applications, including the one you just created:
Step 10:
Click on
Application Profile and you'll now see a ready-made profile for your app. You can log into that profile using the credentials you supplied in step 3. Your app can have friends, forum posts, and comments. This is a great way for you to get a quick start at getting your app out to other people.
Step 10:
To install the application, click the Install this Application button in the upper right hand corner of the page.
Step 11:
Now is a greaet time to take a look at your own profile (the profile of the user you are logged in as). The app should be running there!
Now that you've learned some basics, let's create an OpenSocial app for real.