Ladysign

Flex: Create a lastfm artist playcount app

Feb9

• 

Difficulty:

I have to say. I love music, so I adore LastFm. But I’m also a lover of Adobe and it’s application Flex. So let’s learn something about Flex, XML webservices and the LastFM API. We are gonna create (with Flex Builder 3), a simple but cool application which loads your artist and playcount information from your LastFM account.

First create a LastFM developer account, it will give you the LastFM API_KEY.
It will also grand you access to the big LastFM API, with LastFM methods and webservices:
Last FM API Dev account.

When you have a LastFM API account, you can access the following URL with your details ([your_key_here] prefill with your api_key and [last_fm_user] prefill with the lastfm username from who you want to retrieve the artist and playcount info from), to receive the XML of your artist info/playcount.

http://ws.audioscrobbler.com/2.0/?method=library.getartists&api_key=[your_key_here]&user=[last_fm_user]

Check this XML, and see its structure. (we need this structure in Flex!)

<lfm>
  <artists>
     <artist>
       <name>Guano Apes</name>
       <playcount>100</playcount>
       ...
    </artist>
     <artist>
       <name>Felix the housecat</name>
       <playcount>50</playcount>
       ...
    </artist>
  </artists>
</lfm>

Now you have your api_key let’s run Adobe Flex, and create a Flex Project.
Add the following code into the source tab:

This will start a nice Flex panel, with the title: “Favourite Artists”.

Now add the webservice: HTTPService, with the previous mentioned url to the Lastfm XML, and give it the idname: “fetchData”. I added this code above my panel code.
Please note that you have to encode the “&” signs, so Flex sees the URL as one line.

&

We can now add a datagrid, for the Artist column (see headerText), we want to prefill this with
the xml node ‘name’ (lfm.artists.artist.name), and the playcount column with ‘playcount’ (lfm.artists.artist.playcount):

And the button to fetch the xml data. Use your HTTPService id .send() method:

Okay, let’s build and run it in Flex. Wow!

Here’s the complete code: