Over a million developers have joined DZone.

Creating Twitpic client using ASP.NET and OData

· Agile Zone

Learn more about how DevOps teams must adopt a more agile development process, working in parallel instead of waiting on other teams to finish their components or for resources to become available, brought to you in partnership with CA Technologies.

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 @ 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.

My twitpic client
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.

My OData query in Fiddler2
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.

Discover the warning signs of DevOps Dysfunction and learn how to get back on the right track, brought to you in partnership with CA Technologies.

Topics:

Published at DZone with permission of Gunnar Peipman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}