Using the BestBuy API on a WebMatrix website

Best Buy is an electronics retailer that sells consumer electronics in store and online. In addition to it's online services, Best Buy has developed an API for users to retrieve information from their site. This article will go through how easy it is incorporate the Best Buy API on a website using RESTful HTTP request format.

Create a website with WebMatrix

In this article, we will be using WebMatrix. WebMatrix is a free tool that allows you to create, customize, and publish webpages. It gives a number of different ways that you can create websites. One of the features is providing existing open sources applications such as WordPress, Joomla, DotNetNuke or Umbraco.

If you need help downloading and installing WebMatrix, it may be a good idea to read Getting Started with WebMatrix. The article provides step by step instructions on installing WebMatrix

After WebMatrix is finished installing, open it. Click "Site from Template" on the WebMatrix welcome screen.

For this example we will use the Bakery Site template. This template is a full-featured e-commerce HTML5 site. Click the Bakery site and hit ok.

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.

Once in your Files workspace you can see all your files. Since we chose the Bakery Site template, we have many files that make up our website.

Let's take a look at your website to get a feel of what the template has given you. Click "run" on the menu ribbon.

Your default.cshtml file will open in your default browser.

Now let's get started using the Best Buy API.

Create a Best Buy Developer Account

First, visit the Best Buy Developer site. The developer site contains an abundance of information about the Best Buy API.

The developer site also has a handy sidebar the shows you how to get started using the Best Buy API.

The first step is to register for a developer account. Click the link on this side bar or go here.

Here you will have to complete a membership form. Once you're done filling in the form click the "register" button at the bottom of the page.

You will receive a confirmation email where you must confirm your account. Click the link in the email or paste it into your browser. The page will display your API key. In addition to this, you will receive another email with your API key.

Now we can get started making requests to the API.

Add the Best Buy API to your Bakery Site

Information about the Best Buy API can be found here. Here you can see all the different method that you can use in your web request.

For this article we will look at using the Get Products method. Let's go to the products API webpage to see what it offers.

On the right sidebar are all the product methods you can use in your request calls.

We'll start with a simple request and move on to a more complex one. Let's first start with getting a product with certain attributes. Click the "get product with attributes" link on the right sidebar to be taken to it's webpage. This page have sample requests to show you the different ways to use the request.

There are numerous attributes for which we can products with. Let's get a product with the sku attribute. To do this we need to get a product's sku. On BestBuy.com, every products present on the site has their sku number available. All you must do is simply search through the site to find the product you wish to put on your site and find the sku number associated with it.

With the sku number, you can make a request to retrieve that product's info. Your request would look something like this:

http://api.remix.bestbuy.com/v1/products(sku=9454155)?apiKey={your-api-key}

All you have to do is supply your api key in the request. Let's try out this request to see if we will get the correct information back. Simply copy and paste the request into your browser. You should see the results of your web request. It may not look that special but what is displayed is the XML that is retrieved from our web request. Here we can see all of the information associated with the product that we can use.

In addition to one retrieving one product with it's sku value, we can get multiple products by supplying their sku values. The idea is the same but the syntax of the request is a little bit different. A request for multiple products would be similar to this:

http://api.remix.bestbuy.com/v1/products(sku in(9454155,8374341,9109369))?apiKey={your-api-key}

If you made this request in your browser instead of getting one product, we would get the three products we requests with their skus.

More information can be found on the get products with multiple attributes page.

Let's add our request to our webpage. Open your About.cshtml page. This seems like the ideal page to add information about ovens and refrigerators that our business uses. The Best Buy API using a RESTful format. This means that your webpage will make a request and you will receive a response with the information you requested. You can then do something with the requested information on your webpage. Because our response will be in XML, we can use the XMLTextReader class to parse our web response. To do that, we must define some directives. This must be done first thing on the page. At the very top of your About.cshtml file, add:

@using System.Xml;
@using System.IO;
@using System.Text;

Now we’re ready to add our web request. Remember that web request we made in our browser? All we must do is put this web request in a string in our file. Near the top of our About.cshtml (if must be after the code we added earlier) add your web request:

string uri = "http://api.remix.bestbuy.com/v1/products(sku in(9454155,8374341,9109369))?apiKey={your-api-key}";

Make sure to replace {your-api-key} with your actual API key. Now let's take our web request string and add the code that makes our web request and gets the response. Like noted earlier, we can use the XMLTextReader to parse our response. Let’s create that object now also. Add below our recently added code:

    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(uri);     
    WebResponse response = request.GetResponse();
    Stream strm = response.GetResponseStream();
    XmlTextReader reader = new XmlTextReader(strm); 

Here we create our web request with our uri, get our web response and save it into a stream. We then create our XMLTextReader that we will use to parse through our response stream.

A helpful thing to know before we parse our response is to know what our response is. That way we can know if we are retrieving the correct information. Like we did earlier, we can see our XML response by making our web request in our browser. Looking through our response, we can see what information we want to keep. For this example we will want to retrieve the product's name, regular price, sale price, url link to it's page on BestBuy.com, and the url of an image.

Now we know what information we want to retrieve, let's add the code that will parse through our response and get this information. At the bottom of About.cshtml, add the following code:

@{
    string name = String.Empty;
    string regularPrice = String.Empty;
    string salePrice = String.Empty;
    string urlLink = String.Empty;
    string imageURL = String.Empty;
    int itemDepth = 0;
    while (reader.Read()){
        if (reader.Name == "product") {
            itemDepth = reader.Depth;
            reader.Read();
            while(reader.Depth != itemDepth) {
                if(reader.Name == "categoryPath") {
                    reader.Skip();
                } else if (reader.Name == "name") {
                    name = reader.ReadString();
                }else if(reader.Name == "regularPrice") {
                    regularPrice = reader.ReadString();
                } else if (reader.Name == "salePrice") {
                    salePrice = reader.ReadString();
                } else if (reader.Name == "url") {
                    urlLink = reader.ReadString();
                } else if (reader.Name == "image") {
                    imageURL = reader.ReadString();
                } 
                reader.Read();     
            }
                <ul id="products">
                <li style="float: left; margin: 5px; width: 200px;">
                    <div class="productInfo">
                        <h4><a href="@urlLink">@name</a></h4>
                        <img src="@imageURL" alt="Image of @name" />
                        <p class="description"><b>Sale Price:</b> $@salePrice<br /><b>Regular Price:</b> $@regularPrice </p>
                    </div>
                </li>
            </ul>
        }
    }
    response.Close();
} 

Our code reads through our response until it gets to a "product" element. We then retrieve the product's name, regular price, sale price, url, and image url and save them into variables that we have previously created. Once we reach the closing "product" tag, we print out our variables to our webpage. We continue to do this until we reach the end of our response.

Let's run our webpage to see how our code works. Click the "run" button on the menu ribbon.

We now have our three products displayed on our page with their names, image, and sale and regular prices.

All of the other API methods can be used in the same way. All you will simply have to do is change your request string. This was just a simply example to get your started building your own application.

Additional Resources

Download webmatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!