30-Jan-2012 14:31:19
by Will

How to make a Windows Phone 7 app in 5 minutes

how to make a windows phone 7 app in 5 minutes

With a future release of the UK rail ticketing app for Windows Phone 7 (WP7) coming up, we wanted to familiarise ourselves with how to provide pre-release versions to clients for feedback. In addition, we wanted to find out in advance how to submit a WP7 app to be made available to the public, as this would uncover any hidden roadblocks that might affect our lead times when publishing the app for real. Expect us to blog about the process of submitting a live app at a later date - at the moment we've just been testing the beta process.

the 5 minute app

So to discover how Microsoft have approached this part of application development, we first wanted to make a simple and fun application which served no real purpose other than to test out the process. There was never any requirement to launch this app live, but it obviously had to do at least something, so I spent just a few minutes quickly making the 'oblongs!' application. The original aim was to simply make it draw a square on a canvas at the point where the user touched.

To get the simple application up and running quickly I just went to the usual New Project wizard in Visual Studio and selected a new Windows Phone Application. You can also do this on the free Express version for Windows Phone 7.

This sets up the structure of a basic application with a single Page, containing the standard application and page title sections (the small and large headings respectively), and a large blank 'Grid' object. At this point I simply just set the grid's background colour, and then made a 'MouseLeftButtonUp' event listener (which visual studio makes incredibly simple), and then moved over to the C# file where the real magic began. I then wrote this in my event listener:

private void ContentPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

Point pos = e.GetPosition(ContentPanel);

Double width = ContentPanel.ActualWidth;

Double height = ContentPanel.ActualHeight;

 

Rectangle r = new Rectangle();

r.Width = OBLONG_SIZE;

r.Height = OBLONG_SIZE;

r.Margin = new Thickness(pos.X-(OBLONG_SIZE/2), pos.Y-(OBLONG_SIZE/2), 0, 0);

r.Fill = new SolidColorBrush(Colors.Red);

 

ContentPanel.Children.Add(r);

}



It's really nothing fancy, but was just enough to ensure that there would be some level of interaction, but ultimately remaining little more than a glorified 'Hello world!' application.

Our initial go at it led to a slight problem where the squares weren't actually appearing where the user tapped, so we updated it to fix this bug and added some random colours to make it more exciting, giving us this:

private void ContentPanel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

Point pos = e.GetPosition(ContentPanel);

Double width = ContentPanel.ActualWidth;

Double height = ContentPanel.ActualHeight;

Rectangle r = new Rectangle();

r.HorizontalAlignment = HorizontalAlignment.Left;

r.VerticalAlignment = VerticalAlignment.Top;

r.Width = OBLONG_SIZE;

r.Height = OBLONG_SIZE;

r.Margin = new Thickness(pos.X-(OBLONG_SIZE/2), pos.Y-(OBLONG_SIZE/2), 0, 0);

r.Fill = GetRandomColour();

ContentPanel.Children.Add(r);

}

private Brush GetRandomColour()

{

Random r = new Random();

int value = r.Next(5);

switch (value)

{

case 0:

return new SolidColorBrush(Colors.Red);

case 1:

return new SolidColorBrush(Colors.Blue);

case 2:

return new SolidColorBrush(Colors.Green);

case 3:

return new SolidColorBrush(Colors.Magenta);

case 4:

return new SolidColorBrush(Colors.Orange);

case 5:

return new SolidColorBrush(Colors.Yellow);

default:

return new SolidColorBrush(Colors.Black);

}

}



Here's a quick demo of it in action:

publishing the app

As a bit of background, different platforms have different approaches to the process of getting development versions of applications on to test devices. For example, when distributing pre-release versions of an Android app you can sign them with a self signed development certificate. These certificates are used to verify the authenticity of the application author. Once signed, any phone can load it via their phone's web browser, email client, etc. (so long as they've set their device to allow applications from "untrusted" sources).

In contrast, iOS developers are required to first create certificates through Apple with which applications can then be signed, but then the user is required to install the certificate and application via iTunes only.

Differences aside, the turnaround time for getting from a developer's computer onto a device for both of these approaches is in the region of a few minutes at most.

For Windows Phone, it's sadly not quite as simple as Android, but also didn't initially appear to be as involved as Apple. Once we got further in, though, it became apparent that it was neither easier nor harder than either, but definitely different.

distributing as a beta

Microsoft offer a "Beta Distribution option" when going through the app submission process. When you pick this, it bypasses the longer process of Microsoft verifying that the application meets their requirements, but in return makes it available to only up to 100 users, identified by their Live ID. So we proudly uploaded our 5 minute 'oblongs!' app, selected this beta option, and set my own personal Windows Phone's account as a recipient.

At the time of submission they claimed the application would be available within two hours - not as fast as Android or iOS, but not the end of the world either.

Another thing that became apparent at this point (which as a busy developer was quite convenient) was that the application signing is done by Microsoft automatically after uploading, and it wasn't expected that I, the developer, do this manually. With the application uploaded, I got back to developing the rail application, secretly keeping an eye on the clock for my two hours to be complete.

Those two hours turned out to be more like 24, and from looking on the internet this was not uncommon.

go live!

An email arrived after four or so hours with a download link, but the link didn't work and just returned a very generic message and rather human unfriendly error code (805a0194). However given more time, once it was available, the process was very simple indeed.

The email contains a link to be used on the phone which launches the 'Marketplace' app on the phone, and was displaying my application. It appeared like any other publicly available application, with the standard pivot offering reviews, screenshots, etc.

some other things we learned:

  • Once uploaded and approved (approximately 24 hours later), the time required to add new users to be able to access the application was nothing more than adding their email address via a form in the 'App Hub' and it was made available to them immediately. This will be very useful for us, as we naturally have clients wanting pre-release versions of the app on multiple devices, but they won't have all the devices to hand.
  • Details of the app including description text and screenshots are available via a website to people that know the link. While it's quite improbable that anyone might guess the link, it's worth being wary of uploading anything particularly sensitive, like unannounced applications or development currently still under NDA.
  • In the interests of security, we did also check and can confirm that even though the link may be guessable, it is not possible for unauthorised people to actually download the app.
  • Rather annoyingly you aren't able to offer an 'upgrade' to an application in beta. You have to explicitly remove the old version and then make a new submission. This might appear a minor inconvenience, but there were two issues for us. Firstly that you can't use it to test any migration of stored application data (if for example, internal data structures have changed) as it will be wiped when the app is removed. Secondly, you're potentially in for another 24 hour wait! It would be nice if, as the platform matures, Microsoft could make the upgrade process available for beta applications. While we are obviously able to test upgrades on our development machines, experience has taught me that you might get real world cases that behave differently to a finite list of test scenarios that we tested against.
  • Overall the experience was definitely a positive one. Microsoft allow up to 100 recipients for a beta application which is plenty for its intended usage. Also, the removal of the requirement of manual code signing was certainly welcome, as this can be confusing to developers who've not come from a background of having to sign code before.

I'm definitely feeling more confident with the process now, and I'm glad these lessons were learned in advance of the day the client was expecting a preview.

We’re really looking forward to the release of our first ever Windows Phone 7 app so stay tuned on this blog and our Twitter @Masabi_com for more news! Alternatively, contact us to learn more about our development ecosystem.


Steven Gurr
Mobile Application Engineer

Written by Will