RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


OpenSocial: The Power of Social Networks in Your Applications : Page 5

What is OpenSocial and how can you use it to build web applications that leverage the power of social networks? Find out while going from a basic example application in a local sandbox to a full-featured application deployed in a live container.

A Concrete Example: Movie Hotlist and Travel Sharing
Now that you have a complete overview of the OpenSocial APIs, consider a pair of more complex applications that deal with data persistence. The first application stores movie rankings collected from users and provides a view that aggregates such rankings from a network of friends. The second application stores itineraries and places visited by each user and shows an interactive map that displays such itineraries from the whole network of friends. Both are good examples on how a social network can share data (movies, places) across its members. Refer to Figure 1 and Figure 2 to get an idea of the results. The two applications work in similar ways. Refer to the source code attached to this article to access the entire listings.

The first thing to do is initialize the application and read the data to be displayed. The itineraries application uses the initialization code shown in Listing 2.

The code uses a mixture of Google Maps API and OpenSocial API calls. First, it initializes a map, then it prepares the requests for the user and friends data, and finally handles them in the callback function. The renderFriendsListing() function draws the itineraries created by friends as follows:

function renderFriendsListing(friends, friendsData) {
  friends.each(function(person) {
    var data = friendsData[person.getId()];
    if (data) {
      var geodata =
        map, person.getDisplayName(), 
        geodata.homeAddress, geodata.locations);

The above code uses the geodata object, as read from the users' stored data. (Refer to the source code for the functions that perform the effective drawing on the map.) Such data are stored using the OpenSocial persistence APIs:

function saveData() {
  userdata = {};
  userdata.homeAddress = 
  userdata.locations  = 
  var stringy = gadgets.json.stringify(userdata);

  var req = opensocial.newDataRequest();
    'VIEWER', 'userdata', stringy));

function onSaveData(response) {

  // cleanup and map reset
  markersCounter = 0;
  document.getElementById("legenddata").innerHTML  = "";

Data are read from HTML form fields and passed to the container after converting them into a JSON string. After save, the map is redrawn to show the updated information.

The movie ratings application uses the same functions to deal with data persistence. One difference is it uses the Google AJAX search APIs to look up movie posters, given the titles suggested by the user. In addition, it defines multiple Content sections in its XML descriptor file. This allows for different renderings of the same application, depending on the container placement of the application (in a whole page by itself, or in a small panel of an existing page) as described in the multiple views documentation.

Figure 5 and Figure 6 show how the applications appear in the Shindig container, using some custom application state to provide user persistence data. The downloadable source code attached to the article contains all the details.

Figure 5. The Travel Itineraries Application Loaded Within the Shindig Container: When MMIT is installed the icon to create new mobile projects will show up in the start pane of VS.NET.
Figure 6. The Movie Ratings Application Loaded Within the Shindig Container: Designing apps in MMIT will be very familiar to ASP.NET developers.

Deploying Your Open Social Applications
You are now ready to deploy your applications. Every container uses its own process, but since your application is ultimately a Google Gadget, it:

  1. Moves the XML descriptor file and related resources (images, JavaScript files) on to some location on the web, such as your personal web site.
  2. Goes to your container of choice and either adds the application by directly referencing the URL that points to the XML descriptor, or adds it to the gallery of available applications for that container.

For example, if you want to publish your applications on orkut (after enabling application development on your account as described in this article), just access sanbox.orkut.com and follow the "Edit Apps" link to add your application, specifying the URL for the XML descriptor file when requested. Then, it's just about spreading the word to your network of friends and using your creations!

What Have We Learned?
In this article, you have learned what OpenSocial is and gone all the way from a basic example application in a local development environment to a full-featured application deployed in a live container. You can now further explore the OpenSocial APIs for features that were not discussed here, such as permission management and remote requests. Or you can start creating the next killer application and prepare to deploy it to your social network.

Email AuthorEmail Author
Close Icon