Silverlight and the Netflix API

Even though the Netflix API was released back in October, I just recently discovered it. I enjoy seeing new APIs and was definitely interested in using this one since I'm also a Netflix subscriber. This tutorial will demonstrate how to build a simple Silverlight application on top of the Netflix API.

The Netflix API is very powerful, however it uses OAuth to secure the communications, which is a bit of hurdle starting out. Fortunately for us, the Yedda Dev Blog was nice enough to write a simple C# wrapper around OAuth that was able to be used in Silverlight with only minor changes. Below is an example of the Silverlight application we'll be building today.



The first thing we're going to have to do is figure out how to get data from Netflix. When you register for the Netflix API, you'll be given a consumer key and a shared secret. Let's begin by defining some constants for these values in our C# code.

The API_URL holds what page we want to request from the API. In this case we want to search all titles in their category for a specific term and only return a maximum of 10 results. The CONSUMER_KEY and CONSUMER_SECRET are provided by Netflix. Netflix can handle POST and GET requests, and for this tutorial, we're using GET.

We'll need a couple of other member variables, so let's define those now as well.

OAuthBase is a class provided by Yedda Dev Blog to help build OAuth requests. I had to modify it because Silverlight doesn't support some things they were using. Basically I had to convert all instances of System.Text.AsciiEncoding to System.Text.Encoding.UTF8. My modified version will be included in the Visual Studio project attached to this tutorial. _client is simply the WebClient object that will be handling all of the requests.

All right, we've got our variables out of the way, now let's build a function that will create a query that we can send off to Netflix.

This is where things start to get difficult. OAuth requires a signature that is generated from various parts of the request. This ensures that the request cannot be modified between you and Netflix. This is where we use the function GenerateSignature from the OAuthBase object. This function takes all the pieces required by OAuth and Netflix, builds a signature, and outputs a normalized, url friendly, version of our request URL and parameters.

The two null values passed to the function would be used if we were using tokens. You have to first request a token from the user before you can modify their private data. For this app, no tokens are required since we're just searching Netflix's catalog for movies. Lastly, we combine the pieces into a finished URL and return.

Now let's quickly take a look at the Search function that get's called whenever the user hits the "Go" button.

We have to make sure the WebClient is not already doing something. If it were, an exception would be thrown when you attempted to use it. Next we call DownloadStringAsync and pass it the Url we just created.

WebClient has an event that gets fired when the download is complete. I hooked the event in the Page constructor after I constructed the WebClient object.

I do a simple check to make sure there are no errors, then I call ParseResult passing it the string containing the result xml. Before we look at the contents of ParseResult, we're going to have to create an object to store information about search results. I called mine SearchResult.

Now we can parse the XML returned from Netflix and start populating our user interface. Here's an example XML string returned by the Netflix API.

And here's the function that will parse that into our SearchResult objects.

I'm really happy Silverlight includes Linq support. If you're not familiar with Linq, I would recommend checking out our introductory tutorial. Netflix has really good example XML in their documentation, so you should be able to use that to quickly parse the XML into data structures. I'm setting the ItemsSource of my ListBox to the output of the Linq expression, which will populate my ListBox with search results. Lastly, I make sure I've received at least one result, and if I have, I select the first result.

That's pretty much it for the code behind. Here's the entire constructor so you can see the rest of my initialization.

We've covered most of this already. What we haven't covered is how to display details for the selected search result. Unfortunately, I couldn't do everything in XAML because the binding support isn't quite as feature-rich as the full WPF framework, so I had to hook the event that's fired whenever the selection changes.

In XAML, I have a Grid control called _details that holds all of the details for a selected result. I simply set the DataContext of the Grid to the selected item (which is a SearchResult object) whenever the selection changes.

All right, time to see some XAML. Here's is the entire source for the example application at the top of this tutorial. The XAML is not the focus of this tutorial so I'm not going to explain it in detail. It's very straight forward and doesn't do anything not covered in one of our other XAML tutorials.

As you can see it's a very basic layout using basic binding to populate the user interface. I did have some difficulty when binding the image path to items in the ListBox. For some reason it didn't work when loaded from my hard drive, however if they're loaded from a web server it works fine.

I think that does it for this tutorial. We've seen how to use OAuth and OAuthBase to create Netflix queries, how to parse the results, and how to populate a user interface containing those results. If you've got any questions or comments, feel free to leave them.