In this post I share the process of rapidly prototyping a simple weather app using WPF and the AccuWeather API.
Figure:Video overview of the text-based search feature.
1. Overview
To start, I selected a WPF UI framework that would do the heavy-lifting in terms of overall presentation, layout, and "wow-factor"; from a variety of options, I chose a popular and free UI library called MahApps Metro, which is available on GitHub (https://github.com/MahApps/MahApps.Metro). Since the library is hosted as a Nuget package, project integration was very easy from within Visual Studio via the Nuget Package Manager.
Next, I needed to choose an API to integrate with. I decided to go with the AccuWeather API, since their free-tier access is sufficient for prototyping and their API documentation is detailed and readily accessible. AccuWeather also provides suggestions for best practices when setting up flow-based API sequences, which is an added bonus.
In terms of layout, I chose a "Tab-strip" based layout in which the menu items reside in a bar that is typically aligned alongside one of the margins of the application window; this is a popular layout strategy for desktop apps and closely aligns with analogous mobile menu-based layouts. Within the main content area, I implemented a page-based navigation strategy that would allow movement between three main pages (Weather, Settings, and About); this was sufficient since the navigation topology is only one level deep.
Arguably the most important aspect of the weather app is the means by which the weather data is accessed, so the first user input control I implemented was the API-entry Passwordbox within the Settings page. MahApps makes theming very easy (i.e. light and dark modes), so I was able to quickly add ComboBoxes on the Settings page for selectable app themes and color accents.
Figure:Video overview of the theme and accent settings.
The Weather page has two main sections: a header for location-entry, and a body for viewing the current conditions and forecast details of a queried location. The current conditions display is a tile-based Grid, wherein each tile contains an individual metric; the forecast display is a sequence of tiles that begins with a brief text description and is followed by tiles depicting subsequent days.
In terms of the backend, the app uses Service Oriented Architecture (SOA) to provide the weather service via a service bus, which is accessed primarily by the weather ViewModel - I use the Model-View-ViewModel (#MVVM) approach to maintain a separation of concerns between frontend and backend code. The weather service contains methods for asynchronously getting HTTP responses from calls to the Location, Current Conditions, and Forecast AccuWeather APIs; the results from these methods are then processed by the weather ViewModel, which in turn exposes the data to the weather page View.