Developing a Windows Phone App

I recently published the Kentico Mobile Manager Windows Phone 7 app to the Windows Phone Marketplace. This was my first Windows Phone application and I wanted to let everyone know my development experience, tips I learned along the way, and things to watch out for.

First, let me begin by saying not only was this my first Windows Phone app, but my first mobile app all together. With mobile development comes a new platform and considerations that developers need to keep in mind. Unlike traditional application/ web development, mobile apps are more integrated and tied to the operating system. This close connection between the two means that applications running on mobile devices need to be much more mindful of memory, CPU utilization, and user experience. Microsoft, much like Apple, has taken many precautions to ensure that apps published to their respective marketplaces have passed a number of certification tests and procedures. This ensures a consistent experience for the end-user, as well as protects the integrity of the underlying operating system.

Step 1 – Planning

The first step I took when developing the app was to figure out what I wanted to make. As a Kentico Certified developer and trainer, I quickly identified a legitimate business need for Kentico CMS applications. Often, administrators need to perform basic functions on their site. Currently, the only way to accomplish these is to log into the site directly. Enter the Kentico Mobile Manager concept.

I thought a mobile-based application would be a great platform for exposing this functionality, allowing site administrators a portable interface for controlling their applications. With help from Thom Robbins, Chief Evangelist for Kentico, we defined the functionality and design of the application.

Tip: I recommend identifying a specific business/market need before developing. This will help you isolate functionality requirements, identify use cases, and assist in planning for the platform you are developing for.

Step 2 – Choosing a platform

After I figured out what I wanted to make, I had to decide how I was going to make it. There are several markets for mobile devices (Apple, Windows Phone, Android, RIM, etc.) so I knew I had a choice to make. I ultimately chose Windows Phone as the initial platform due to the familiarity of the development environment and operating system in general. Having created several Silverlight applications, choosing Windows Phone seemed the most logical choice so that I could leverage my previous experience with .NET and Expression Blend. Additionally, Microsoft has provided a number of free developer tools and SDKs to help developers get started.

Step 3 – Creating the Windows Phone 7 app

I created a new Visual Studio 2010 Windows Phone Application. That template is included with the Windows Phone Developer kit, a collection of tools and samples from Microsoft to assist in the development on Windows Phone applications.

Visual Studio 2010 New Project

The base project contains a sample “main” page and icons. Also included are the base references and images for creating a Windows Phone application.

Base Project

Tip: Another option during the development process is to use Sketch Flow in Expression Blend 4. SketchFlow allows you to plan out your development and functionality. SketchFlow enables developers to architect their solution with “placeholders” to determine the application flow and design.

Once I had the initial project, I started adding my custom functionality and recognized that my application would require a login page. I found it easier to add/manipulate pages using Expression Blend, which you can launch right from Visual Studio 2010 by right clicking a page and selecting “Open in Expression Blend”.

Open in Expression Blend

In Blend, I added a new Windows Phone Pivot Page directly to my solution. I chose the Pivot (one of Microsoft’s provided interactive templates) to allow users to rotate between options quickly.

Pivot Page

Tip: Also included in Microsoft’s templates is the “Panorama” page type, which allows users to view a larger “background” image while navigating through different screens of the application.

After adding the Pivot page, I added new pivot items for each section of the Home page. These included the Login section itself, a Help section for support, and an About section for information about the app and Bit-Wizards. I then added my .NET login code and styling/images for my design.

Tip: I used the “PhoneAccentBrush” color for many of my controls. This setting allows the controls to change color when the user selects a new accent color for their theme. This enhances the user experience and adds more customization options for the application.

After creating the Login page, I followed the same process to create the Manage page, again using the Pivot template. The Manage page gives the ability to control the application, provide site information, a custom Help section, and the same About section.

Manage section

All communication between Silverlight and the database needs to occur over the web service. This is due to Silverlight not natively supporting direct database connections. The use of the web service allows you to isolate specific functionality and plan accordingly. After creating the web service and its methods, I updated the Windows Phone application to make asynchronous calls to perform the desired actions.

/// <summary>
/// Validates user. Calls web service to validate user.
/// </summary>
private void ValidateUser()
{
    try
    {
        mclient.ValidateUserCompleted += new EventHandler<KenticoMobileManagerService.ValidateUserCompletedEventArgs>(mclient_ValidateUserCompleted);
        mclient.ValidateUserAsync(txtUsername.Text, pbPassword.Password);
    }
    catch
    {
        //Redirect to error page
        NavigationService.Navigate(new Uri("/Error.xaml", UriKind.RelativeOrAbsolute));
    }
}

To secure the web service, I decided to have it require a valid SSL certificate on the Kentico site. This encrypts all traffic to the server to prevent phishers from obtaining the login information. Also, I required every web service call to have the username/password, to ensure authentication.

The final project with all files and images was now complete.

Final Project

Step 4 – Testing the application

While developing, I used the Windows Phone Emulator to test my application to ensure functionality. The emulator provides a quick way to make sure the application works as expected and looks correct on a device.

Emulator

After creating an account in App Hub (Microsoft’s Windows Phone Developer area) I was able to register my phone for testing. After confirming my account and registering my device, I was able to load the app on my Windows Mobile Phone to test everything out.

Live device test

Step 5 – Submitting to Windows Phone Marketplace

Publishing an application to the Windows Phone Marketplace is a multi-step process. To break it down simply, here are the main areas:

Purchase an App Hub subscription ($99 / year)
Build an application
Create images (icons, marketplace images, screen shots)
Select a category/sub category (if needed)
Set a price
Define application specifics (support contact, legal URL, etc.)
Submit it for certification

Microsoft outlines this process in depth on the App Hub site. The two areas I will highlight are the images and the certification.

Images: Submitting an app will require you to create a number of images. These images are used in several areas: in the App itself, on the Windows Phone device, and in the Marketplace. Be sure to follow the development guidelines on App Hub for the size/DPI to ensure you are submitting the correct value.
Tip: Be sure to submit images that will work well on dark and light background. Pay attention to how the application icons look on different “themes’ on a device as well.
Certification: The certification process for Windows Phone is fairly strict, due to the reasons above. Review the certification guidelines in depth to ensure a quick approval. Not accounting for all the areas will result in a failed submission and a repeat of the certification process.
Tip: Pay close attention to areas around “Navigating to / from an application” in the documentation. You will need to program you application to properly restore its state after being closed or tombstoned.

Step 6 – Profit!

After passing the certification process, I had officially published our application. I then researched the pricing and adjusted it accordingly. Included in the App Hub site are reports to view downloads, profile management options, and options to modify a marketplace submission.

Published to Marketplace

Tip: Linking to an app in the marketplace was not as easy as I expected. If a user has the Zune software it is simple to search and view application details, as well as if they have a Windows Phone. If a user does not have one of those, you will have to “find” the app on Microsoft, or use a third party application list. I published my app to http://www.flwp7.com/ to have a static location to view it.

Overall I really enjoyed creating the Kentico Mobile Manager. I always like doing Silverlight development and it was a great project to introduce me to mobile development. From here I will continue making Windows Phone apps, as well as porting our application to other platforms.