Getting RunCodeRun Build Status for a Specific Project

05 Jun 2009

Are you on RunCodeRun yet? If not, stop, go to RunCodeRun and signup! Now that you have the awesome sauce I am going to show you how to display RunCodeRun build statuses for individual projects anywhere on your website. Earlier this year Glenn Vanderburg created the RunCodeRun Badge Project that allows you to display your RunCodeRun build statues on any website. This project is very cool and gives you a nice piece of art for your site. This project is a modification of Dr. Nic’s Github Badge Project. The focus of this article is to arm you with the codez to have individual control over where and how you display RunCodeRun build statuses. If you look at the landing page for my blog you will notice that I have this hotness already implemented.

It turns out that this is incredibly simple to do. Let’s take a look at the basics…

$.getScript("http://runcoderun.com/api/v1/json/abedra?callback=parseData")

This starts all the magic. It calls out to the RunCodeRun API and returns a JSON payload with all the open source build statuses linked to your account. Let’s break this down quick. $.getScript() is a jQuery function that allows you to do an Ajax request to a different domain than the one your site is currently running on. This is important because what you are essentially doing is a Cross Site Scripting exploit on your own site. This, however, is acceptable to do if you know what is actually happening. The reason a standard jQuery $.get won’t work is because it violates Javascript’s same origin policy constraints. The next thing to break down here is the ?callback=parseData at the end of the request. This is done so that the data we get back from the $.getScript() call can be processed. Under the covers the parseData() function looks like this:

function parseData(data) {
  var castronaut = data.user.projects[0];
  var rcov = data.user.projects[4];
  var safe_erb = data.user.projects[3];
  var mpi_ruby = data.user.projects[2];

  $("#rcov").append(generateStatus(rcov));
  $("#castronaut").append(generateStatus(castronaut));
  $("#mpi-ruby").append(generateStatus(mpi_ruby));
  $("#safe-erb").append(generateStatus(safe_erb));
}

A user object is returned to you that contains an array of projects. For now, the RunCodeRun API does not have a named key for each project, so you have to use the appropriate array index for each project in order to get the details. parseData() calls the generateStatus() function:

function generateStatus(project) {
  if(project.status == "success")
    return "<span class='success'> succeeded </span>" + "<span>" + prettyDate(project.ended_at) + " <a href=" + project.url + ">details</a></span>";
  else
    return "<span class='failure'> failed </span>" + "<span>" + prettyDate(project.ended_at) + " <a href=" + project.url + ">details</a></span>";
}

generateStatus() then calls prettyDate(). This is a small library written by John Resig. I had to make a small patch to get it to work with the dates that the RunCodeRun API sends back. The patched version can be found here.

Takeaway

The full implementation exists in the source of this site at http://github.com/abedra/abedra.github.com. If you just want something simple to display the status of all your builds use the RunCodeRun Badge Project. If you want a little more control over what is displayed this should get you off to a good start.