Introduction
I have three problems I’ve been trying to solve for a while. First, the “Smart Client” buzz is beginning to dominate the technology charts and I want to have a better understanding of this new paradigm. Second, I need to start learning all the new features of the .NET 2.0 framework. Third, my cell phone is dieing and I could really use one that works.
Enter the CodeProject Smart Client Competition
I'm using this competition as a way to solve all three problems. The first order of business is understanding the nature of a Smart Client application. A solid definition is the foundation for a Smart Cliet’s architecture and design choices.
MSDN defines a smart client as follows:
“Smart clients are easily deployed and managed client applications that provide an adaptive, responsive and rich interactive experience by leveraging local resources and intelligently connecting to distributed data sources.”
This is the definition I’ll be following throughout this article to, and the definition on which this application is built. You can read here for a comprehensive explanation.
The Task
Before we get going, feel free to check out http://www.tylerbrinks.com/pinpoint to get an idea of the end result for this application. Now, on to the task.
Google recently opened their mapping API to developers. I thought it would be interesting to combine a Smart Client application with Google’s mapping. The idea for the application is to allow a user to enter appointments (similar to Outlook), but incorporate an address or intersection for the location of the appointment. Then, that appointment could be mapped using Google’s mapping service. The problem is that Google’s mapping API requires latitude and longitude values to generate a map, and they don’t have a geo-coding service to turn an address into latitude and longitude.
The Solution
Part of our Smart Client definition the ability to connect to distributed data sources. I’m relying on the http://www.geocoder.us/ web service to turn an address into the needed latitude and longitude values. Then I’m using a custom built web service to save scheduled appointments and lat/long values to a server. That server also hosts a web site to allow anyone to view all scheduled appointmentts and see a map of where the appointment is physically located. In other words, you create appointments and anyone can see a map or satellite images of where you are at any given time!
Step 1: Geo-Coding
Geocoding is the process of taking a address (
123 Main Street, Denver, CO
) and turning it into a pair of latitude/longitude values. Luckily,
http://www.geocoder.us/ provides a geo-coding service free of charge in the form of a web service. Because their WSDL isn’t 100% compatible with .NET, I created a custom web service proxy to call the remote web service to resolve addresses and intersections. This is the first of two remote data sources for the application.
Step 2: Scheduling
Our Smart Client definition requires a rich UI. This application lets you create an Outlook-like appointment tied to an address. When you create a new appointment you enter the dates, times, and the location of the appointment. Before you can save the appointment you have to verify the address. The process uses Step 1 to get the latitude and longitude of your appointment. Following our Smart Client definition, the app uses a rich UI to manage scheduling appointments. This step is in the form of a WinForms app with a very rich, "Outlook-style" UI.
Step 3: Persisting Data – Online and Offline
Out Smart Client definition says that we need to leverage both local and remote resources. To stay consistent to our definition, the application uses the Microsoft Onlinen Application Block to determine if the app is online or offline.
When the app is online, all appointments are loaded from and saved to a server via a custom web service. The web service accepts and returns a strongly typed dataset with the appointment schedule and lat/long data, and stores the data in a SQL database.
When the app is offline, all appointments are loaded from and stored am XML document in each user’s application directory (multiple users can use the app on the same machine). Then, when the application is online again, all appointments that were saved locally are sent to the remote server.
Step 4: Mapping –The Fun Part
In Step 3 the data is sent to a SQL database via a web service. Now, via an ASP.NET web site, the data is made available to the world. When you sign up to use Google’s mapping API you get a key and a sample javascript. I’m using the latitude and longitude values for the appointments saved in the SQL database to generate the required mapping script on the fly. In the script I tell the mapping API to center on the given location, add a pin icon on the location, and a popup overlay displaying the address. I’m also using the extended mapping options so a user can toggle between map and satellite view. That means you can see the actual building you’re in for every appointment! (Take a look at where I'm at right now!)
The End?
There you have it! It’s a rich UI, it intelligently connects to 2 remote data sources, it uses local and remote resources… It’s a Smart Client!
Where do we go from here? There are plenty of additions that could be made like importing appointments from Outlook, adding distance or travel directions to the map etc.. For now you have a .NET 2.0 Smart Client to play with, and the ability to add mapping to your own website if you want.
As for me – if this app is worthy of one of the 3 prize phones I’ll be sure to write a small Smart Phone app to transmit the phone’s location to my server to add a real time aspect to the mapping!
