Creating Twitpic client using ASP.NET and OData

Open Data Protocol (OData) is one of new HTTP based protocols for updating and querying data. It is simple protocol and it makes use of other protocols like HTTP, ATOM and JSON. One of sites that allows to consume their data over OData protocol is Twitpic – the picture service for Twitter. In this posting I will show you how to build simple Twitpic client using ASP.NET.

Source code

You can find source code of this example from Visual Studio 2010 experiments repository at GitHub.

Source code repository GitHub

Simple image editor belongs to Experiments.OData solution, project name is Experiments.OData.TwitPicClient.

Sample application

My sample application is simple. It has some usernames on left side that user can select. There is also textbox to filter images. If user inserts something to textbox then string inserted to textbox is searched from message part of pictures. Results are shown like on the following screenshot.

Click on image to see it at original size.

Maximum number of images returned by one request is limited to ten. You can change the limit or remove it. It is hear just to show you how queries can be done.

Querying Twitpic

I wrote this application on Visual Studio 2010. To get Twitpic data there I did nothing special – just added service reference to Twitpic OData service that is located at http://odata.twitpic.com/. Visual Studio understands the format and generates all classes for you so you can start using the service immediately.

Now let’s see the how to query OData service. This is the Page_Load method of my default page. Note how I built LINQ query step-by-step here.

protected override void OnLoad(EventArgs e)

{

    var uri = new Uri("http://odata.twitpic.com/");

    var user = Request.QueryString["user"];

    if (string.IsNullOrWhiteSpace(user))

    {

        user = "gpeipman";

    }

    var client = new TwitpicData.TwitpicData(uri);

    client.IgnoreMissingProperties = false;

    client.IgnoreResourceNotFoundException = false;

    var images =  from u in client.Users

                  from i in u.Images

                  where u.UserName == user                          

                  select i;

    if (!string.IsNullOrWhiteSpace(filterField.Text))

    {

        var searchString = filterField.Text.ToLower();

        images = from i in images

                 where i.Message.ToLower().Contains(searchString)

                 select i;

    }

    images = images.OrderByDescending(i => i.Timestamp);

    picsByLabel.Text = user;

    imagesRepeater.DataSource = images.Take(10);

    imagesRepeater.DataBind();

}

My query is built by following steps:

• create query that joins user and images and add condition for username,
• if search textbox was filled then add search condition to query,
• sort data by timestamp to descending order,
• make query to return only first ten results.

Now let’s see the OData query that is sent to Twitpic OData service. You can click on image to see it at original size.

Click on image to see it at original size.

This is the query that our service client sent to OData service (I searched belgrade from my pictures):

/Users('gpeipman')/Images()?$filter=substringof('belgrade',tolower(Message))&$orderby=Timestamp%20desc&$top=10

If you look at the request string you can see that all conditions I set through LINQ are represented in this URL. The URL is not very short but it has simple syntax and it is easy to read. Answer to our query is pure XML that is mapped to our object model when answer is arrived. There is nothing complex as you can see.

Conclusion

Getting our Twitpic client work and done was extremely simple task. We did nothing special – just added reference to service and wrote one simple LINQ query that we gave to repeater that shows data. As we saw from monitoring proxy server report then the answer is a little bit messy but still easy XML that we can read also using some XML library if we don’t have any better option. You can find more OData services from OData producers page.