Web Services for Where’s George

The basic architecture of Where’s George will consist of two components – the iOS/Android clients and the web services that the clients call to receive updates on George’s status.

I decided to work on the web services piece first since that’s the area where I have the least experience (I’ve connected to web services from mobile apps in the past but never created one on my own from scratch). Given my C# .NET background I took a look at Microsoft’s ASP.NET Web API.

One of the examples on the site, Getting Started with ASP.NET Web API 2, walks you through the creation of two simple web services to display a list of products and allow you to query the product repository by product ID. Interaction with the web services is done through JQuery in the browser (another technology I’ve had little experience with up till now).

The Product class is a simple Plain Old C# Object (POCO).

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public decimal Price { get; set; }
}

This POCO is used to create an array of Products in the ProductsController (which inherits from ApiController instead of the usual MVC Controller class).

public class ProductsController : ApiController
{
    Product[] products = new Product[]
    {
        new Product() { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
        new Product() { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M},
        new Product() { Id = 3, Name = "Hammer", Category ="Hardware", Price = 16.99M }
    };
}

And two methods are also created in the ProductsController, one to get all products and another to get a specific product by product ID.

public class ProductsController : ApiController
{
    Product[] products = new Product[]
    {
        new Product() { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
        new Product() { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M},
        new Product() { Id = 3, Name = "Hammer", Category ="Hardware", Price = 16.99M }
    };</pre>
<pre><code>public IEnumerable&lt;Product&gt; GetAllProducts()
{
    return products;
}

public IHttpActionResult GetProduct(int id)
{
    var product = products.FirstOrDefault((p) =&gt; p.Id == id);
    if (product == null) { return NotFound(); }

    return Ok(product);
}
</code></pre>
<pre>
}

There’s an index.html page which contains HTML markup to setup the structure of the page – there’s a section at the top where all the products will be displayed in an unordered “products” list followed by a “product” search section where you can type a product’s ID and click a Search button to display it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Product App</title>
</head>
<body>
    <div>
        <h2>All Products</h2>
        <ul id="products" />
    </div>
    <div>
        <h2>Search by ID</h2>
        <input type="text" id="prodId" size="5" />
        <input type="button" value="Search" onclick="find();" />
        <p id="product" />
    </div>
</body>
</html>

The Web API is called using Javascript and JQuery. The first script tag gets the JQuery library from the Microsoft Ajax Content Delivery Network. The second script tag contains the Javascript code which uses JQuery to make the actual Ajax calls.

<script src=&quot;http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js&quot;></script>
<script>
    var uri = 'api/products';</pre>
<pre><code>$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(uri)
        .done(function (data) {
            $.each(data, function (key, item) {
                $('&lt;li&gt;', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

function formatItem(item) {
    return item.Name + ': $' + item.Price;
}

function find() {
    var id = $('#prodId').val();
    $.getJSON(uri + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}
</code></pre>
<pre>
</script>

$(document).ready() detects the document’s state of readiness and runs the Ajax request code once the Document Object Model (DOM) is ready for Javascript code to execute (JQuery uses “$” as shorthand for “JQuery”).

The Ajax request is done using $.getJSON(), which loads JSON data from the server using a GET request to a specific URL. On success, data contains a list of products which a used to create list items for the unordered list.

$(document).ready(function () {
    $.getJSON(uri)
        .done(function (data) {
            $.each(data, function (key, item) {
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });</pre>
<pre><code>function formatItem(item) {
    return item.Name + ': $' + item.Price;
}
</code></pre>
<pre>
});

Which looks like this.

ASP.NET Web Services Products 2

The product search by ID is handled by a find() function that’s mapped to the Search button’s onclick event.

<div>
    <h2>Search by ID</h2>
    <input type="text" id="prodId" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
</div>

The product ID entered into the text box is concatenated with the uri and is used as as the parameter in another Ajax request with $.getJSON.

function find() {
    var id = $('#prodId').val();
    $.getJSON(uri + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}

If the product ID exists, its name and price are displayed.

ASP.NET Web Services Products 3

Otherwise we display an error message.

ASP.NET Web Services Products 4

The big question in my mind was XYZ

This entry was posted in Side Projects, Software Development and tagged , , , . Bookmark the permalink.