Monday, January 26, 2009

Building an application ...

.. from idea to reality

As posted before I have some plans for this year. One of these plans is building a complete on-line application all by myself using interesting technology. In this first post I will tell you a bit about the architecture I am using to build it.

Let me first explain (maybe again) that I am web developer and I specialize in C#, ASP.NET, HTML and CSS. Above all I like to experiment with these and do ineteresting stuff from time to time.

With the application I am building I want to solve a problem that I experience myself. This ensures that I will have at least one satisfied costumer. First I will very briefly describe the problem I try to solve and then I will tell a bit about the architecture I have planned.

The problem to solve

When you try to build any application you must have a purpose for it and understanding the purpose is part of the solution. Also being able to relate with the owner of the problem is a big advantage. In this project that is all taken care of. I am the owner of the problem.

In my spare time I am trainer slash coach of the Ladies fieldhockey team of MHC Steenwijk. They are doing great this season and have so far won every of their ten games. This puts more pressure on me than on them as I need to give ever better training to them. I see that as an extra challenge and it gives me even more fun and satisfaction.

As part of the preparation of each training I give I need to document my training. I have to think of a subject for the training (like improve position play, penalty corners, scoring) and then I have to find excercises that support that goal. These excercises need to be drawn in a diagram. I simply have to place some pilons, players, opponents and then add some arrows showing where the players should run and pass.

This is something I usually do on paper with a pencil and I can do it in just a few minutes. But if I want to have these drawings in a digital form, then I could scan those or fire up Visio with a special stencil or go into an even bigger tool like Photoshop or Fireworks. All these tools are way too big for this and way too expensive. I want something that is simple and fast and does that what I want and maybe a little more.

Basic archtiecture

Being a web enthousiast I decided quickly that I want to build as an online tool. I looked at drawing using Javascript libraries and even studied SVG. But I let that be and thought this would be a really interesting project to build using Microsoft Silverlight.

All in all I needed a couple of components in my solution that makes it a complete, fully fledged application.

  • First there is a ASP.NET web page that holds the components.
  • One of the components is the editor with a drag and drop interface and some textboxes for inputting data like name and description of the excercise. This is done in Silverlight.
  • The Silverlight editor uses Isolated Storage for storing intermediate data on the client.
  • The Silverlight editor saves the data to the server through webservice. I have implemented an asynchronous call.
  • The webservice is the layer that gives access to the database, which will hold all excercises and, later, user data.
  • There is also a SQL Server database for storing the data.
  • Also on the page a PNG is shown as the result of the lines and symbols placed within the editor. When the excercise is saved to the database succesfully a callback function to the Silverlight editor the adds some HTML to the DOM among which is dynamically generated image.
  • The HttpHandler generates the images using the data from the database, which it retrieves through the webservice.

All these components are relatively simple. Well, except maybe the SilverLight editor. That will have all sorts of editing functionality. The image handler will just take the excercise data to generate the image. Quite a straight forward process. The database is quite simple and have only a few tables and stored procedures.


At this moment I am close to having solved all the problems that are part of this solution. I can save and retrieve data, drag and drop symbols. Save to Isolated Storage. I have the HttpHandler producing some output.

Basically, I can start to fill in the gaps and then start to test in a real server and see if I can get the configuration all set up correctly. But then it just starts, there is much ore that needs to be added and there's a lot code that I need to rerfactor and clean up.

I have only just begun.

But do read on in part 2.

Reblog this post [with Zemanta]