Example Application: Hello World

Become familiar with the process of creating a simple MySpace Application by following the steps on this page. To create a MySpaceID (off-site) Application, please read: What is MySpaceID?

Prior to creating an application and adding it to a User Profile, do the following:

1. Create a MySpace Profile (or sign in to an existing account).
2. Request access to the MySpace Developer Platform. This links the Developer's MySpace Profile to the Developer's applications.

Create an Application

STEP 1: Create an Application Profile Account

A unique Application Profile and email address is required for every application.

1. Go to http://developer.myspace.com
2. Click the Build button in the navigation bar.
   
   
   
3. Click the Create On-Site App button located under "Application Platform" as shown in the screenshot.
   
   
   
4. Fill in the form:
   1. Enter the Application Title "Hello World" or another title, a unique email address and password.
   2. Type the sequence of numbers and letters to solve the CAPTCHA challenge that appears on the screen.
   3. Click on the checkbox to agree to the Developer Addendum to MySpace Terms of Use Agreement.
   4. Click on the Next button.
   
   
   
   

STEP 2: Upload Application XML

The Upload Application XML tab of the Application Builder appears. For the purpose of the Hello World example, click the Skip This Step button.

STEP 3: Provide Information About the Application

The Edit App Information tab of the Application Builder appears. Take a minute to look at the various options on the page.

1. Enter a short description of the application in the Description field (required).
2. Choose a Primary Category for the application (required).
3. Click the Save button on the bottom of the page.
   
   
   A SUCCESS message displays at the top of the page:
   
   
   

STEP 4: Provide the Source of the Application

Click the Edit App Source tab of the Application Builder. The default sub-tab shown is for the Canvas Surface. Developers can use HTML/JavaScript Source, Inline Flash or an External IFrame for the Canvas Surface, Profile Surface and Home Surface.

1. Click the Profile Surface tab.
   
   
   
2. Choose the Left Column option to display the application on the left side of the User Profile.
   
   
   
3. Copy the application source code from the example below:
   
   EXAMPLE: Hello World Source Code

   <div id='heading'></div>
   <hr size="1px" />
   <script type="text/javascript">
    
   var os;
   var dataReqObj;
   var heading = null;
    
   function init() {
       os = opensocial.Container.get();
       dataReqObj = os.newDataRequest();
    
           // 0.8 Container - Use of IdSpec
           if (MyOpenSpace.Version === "0.8") {
                   var viewerReq = os.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER);
           // 0.7 Container
           } else if (MyOpenSpace.Version === "0.7") {
                   var viewerReq = os.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER);
           }
       dataReqObj.add(viewerReq, "viewer");
       dataReqObj.send(viewerResponse);
   }
    
   function viewerResponse(data) {
       var viewer = data.get("viewer").getData();
       heading = 'Hello, ' + viewer.getDisplayName();
       document.getElementById('heading').innerHTML = heading;
   }
   init();
   </script>

4. Paste the source code into the HTML/ JavaScript Source window for the Profile Surface.
   
   
   
5. Click the Save Application Source button. A SUCCESS message displays at the top of the page.
   
   
   

At this point, the Hello World application is saved, but unpublished. The next step is to add the application

Add the Hello World Application to a Developer Profile

Use the following process to add the application while logged into a Developer account:

1. Click the My Apps button in the navigation bar to go to My Applications.
   
   
   
2. Click the logo to the left of the application's name to go the Application Profile.
   
   
   
3. Click the Add the App button towards the top-right of the Application Profile.
   
   
   
4. Click the Add button on the window that appears with options for the installation of the application.
   
   
   

View the Application on a User Profile

The Profile Surface of the Hello World application now appears in the left column of the Developer's User Profile:

Related Links

Learn more about Callback URL Settings.

Next Steps

Learn how to create an OpenSocial application with error checking, additional functionality and other features.