rapaul.com

The making of Rockin’ Robin

This post details the making of Rockin’ Robin, a client side mashup between last.fm and twitter.  If you missed my introduction to Rockin’ Robin, you can read the post here. Or you can try it out @ http://robin.rapaul.com/

Querying

What makes this mashup special is that the entire mashup runs client side, all requests to the last.fm and twitter services are made in the user’s browser.  Being a purely in-browser mashup there are some restrictions as to what requests can be made, specifically current browsers do not support cross-site requests for regular XmlHttpRequests (XHR).  While this is a proposed feature for upcoming browsers, we need a solution that works with current browsers.

Enter dojo.io.script.get(), Dojo’s workaround for cross-domain requests.  The general gist of this hack is that it adds a script block to the page with the src attribute set to the query URL, the server then returns the JSON data as the content of the script block, this technique is known as JSONP.  Fortunately Dojo hides the complexity of this hack behind a similar interface to the regular request (dojo.xhrGet()).

Last.fm

Accessing last.fm’s API requires a registration key, which can bet set up on http://www.last.fm/api This page also details all the available API methods broken down into areas.  For the Rockin’ Robin mashup we are concerned with finding the most recently scrobbled tracks which are accessible via the user.getRecentTracks method.  Below is a code snippet for making the request to load the data from the last.fm API.

The data returned by this request includes that meta information for the last 5 tracks submitted to the user’s last.fm profile.  This information includes the artist, album (including cover art links), track name as well as when the track was played.  This information is used to build up the recent track HTML as shown below.

Twitter

The next step is to query twitter for tweets that contain the keyword artist and title combination.  Twitter’s API can be viewed at http://apiwiki.twitter.com/Search+API+Documentation.  No registration key is required, simply make a call to their public search API, e.g.  http://search.twitter.com/search.json?q=MGMT+Kids

It is now simply a matter of extracting the required data to build the elements to add to the page.

Building the HTML

Dojo provides a handy method for setting attributes on nodes (attr), the API was designed for existing nodes, however it can be used by passing in a newly created node. Here we use dojo.query to return a nodelist which gives access to the attr function then returns the first item (the node we just created).

I’ve heard from @amatix that a Builder equivalent is slated for a post 1.2 release of Dojo which will hopefully do away with the above build function and make element creation tasks simpler.

Bookmarking Support

To allow users to bookmark and link to their Rockin’ Robin page, the username is stored in the URL hash. This is a two stage process, the first is to append the username to the URL, e.g. http://robin.rapaul.com/#GexNZ The below snippet strips off any existing hash and adds ‘#username’ to URL.

The username also needs to be extacted from the URL when the page is first loaded.  The username is then used to populate the username text box and kick off the mashup.

That wraps up the major technical details of Rockin’ Robin, you can browse the full source on github.

Tags: dojo, dojotoolkit, javascript, json, jsonp, last.fm, mashup, rockin' robin, social, twitter, web

Rockin’ Robin

Introducing Rockin’ Robin, a mashup between Last.fm and Twitter.  Head over to http://robin.rapaul.com/ to check it out if you haven’t already.

The basic premise is that you enter your Last.fm username, Rockin’ Robin fetches your recently scrobbled tracks, then mashes them up with the latest tweets from Twitter. It’s an excellent way to see what the Twitter community thinks of your tracks and to find Twitter users who have similar musical tastes. Of course you don’t need to enter your own username, you can enter the username of any Last.fm user to mashup their latest tracks.

Below is a screenshot (click to enlarge) highlighting some of the mashup goodness. Electric Feel by MGMT is the recently played track, with tweets shown from different Twitter users. To view more details on the artist, track or Twitter user you can click through to Last.fm or Twitter using the links (orange text).

Rockin’ Robin is in its early stages of development, as such there are many things that should/could be done to make Rockin’ Robin more rockin’.

Some ideas include:

• Allow Twitter users to add there own tweets to the conversation from within Rockin’ Robin.
• Show more tweets for popular tracks.
• Tweak the Twitter API search to favour real user comments over radio station type tweets.
• Show shortcut links to your Last.fm friends to make mashing up their recent tracks a simple click away.

If you have any suggestions or comments please feel free to add them below.

Also stay tuned for a follow up post “The making of Rockin’ Robin” which will cover the technical side including: Accessing Twitter & Last.fm APIs, JSONP and Dojo Toolkit (query, behavior, script.io).

Tags: last.fm, mashup, music, rockin' robin, social, twitter, web