Diary of a Windows 8 App: iOS Port

Entry One: Getting Started with iChessKids

This series of diary entries steps through the entire process of developing and marketing a Windows 8 app. The app is iChessKids, a port of my iOS app that’s been in the iTunes market for several years. I will share my thoughts, thrills and disappointments, and what I think are important concepts for successful app development and marketing. We’ll follow Microsoft’s  “build an app in 30 days program”; my entries will follow along, sometimes closely, sometimes loosely. Hopefully, the whole thing will be instructive, fun and maybe will inspire you to try creating your own app.  

Confessions of an iOS Developer

I have spent many hours writing iOS apps. Some projects were intended to make money in the iTunes store, some projects were contracts for others who intended to make money in the iTunes store, and other projects were contacts for vertical apps targeted at specific industries.

The approval process Apple requires for posting an app to the iTunes store can be daunting. It can take anywhere from days to weeks, and possibly months to get approval. I’ve had apps rejected for reasons that came out of nowhere, and were not explicitly stated in the documentation.

In the early days of iOS apps, an app with a good description and well-planned keywords could get a lot of downloads and purchases. Now, with hundreds of thousands of apps in the iTunes store, you are lucky to get any downloads without a lot of external promotion and marketing. (Video Clip 1 provides a short discussion of iOS development from my perspective.)

Video Clip 1: Apple Store: Slow and mysterious approval, crowded   

Perspective, Enthusiasm and Caution

With Windows 8, I think we’re seeing the latest of what I like to call the “opportunity cycle” in the software industry. Think of web site development in the mid ‘90s, inexpensive, mass-market video games in the late ‘90s, and iOS apps beginning in 2007. New technologies come to market offer early-adopting, independent developers fortunes to create within the new space. I remember a game I developed years ago that sold for $10 in many retail outlets. My royalty for each copy sold was 40 cents, but I got respectable quarterly checks for three years.

The point is this: if you catch the wave right, you can make money, especially if you’re an early embracer. Wait for opportunities to mature and you’ll find yourself working for a living. The beginning stages provide the real opportunity, but not forever. I think we’ve got a new cycle with Windows 8 apps. Rags to riches stories based on successful iOS apps are just about over. In contrast, there is a real opportunity for Windows 8 apps since the market is not flooded.

The app approval process is also much friendlier for the Microsoft store.

In spite of my enthusiasm, some words of caution are in order. Nobody wants to spend six months developing something that falls flat. Unfortunately, I have done that more times that I care to remember. Thus, the most important strategy is to pick an app that will sell. Although it seems really obvious, most people gloss right over this. Don’t just ask your best friend if your idea is good. They will almost always give you a thumbs up. The best clues are gleaned from the marketplace: look at which apps are popular. If a lot of people are using an app, analyze why, and use that to your advantage.

I decided to port iChessKids from iOS to Windows 8 because chess games are fairly universal, and usually have long shelf lives. In addition, I already had the art, sound, and music assets thus significantly reducing my development costs. So when weighing my options, it seemed that the rate of return on my efforts would be fairly high. I also looked at the chess games in the store. While there were already four chess games available, none had the same flavor as iChessKids. My research showed two things: others were doing well with chess games, and there was an opportunity for a chess game targeted at kids.

Prerequisites

Before doing anything, you must have the prerequisites for developing Windows 8 apps. First, you must be working from a computer with the Windows 8 operating system.

Second, you have to install Visual Studio 2012. You can look around online to buy Visual Studio 2012 Professional for as little as $400, or you can download Visual Studio 2012 Express for free. Microsoft has provided a download page for all of the developer tools that you’ll need at here

The third prerequisite is a developer license, which allows you to develop, test, and evaluate apps. Visual Studio 2012 prompts you for your developer license when you first create an app project for the store. The dialog box allows you to create a new developer license if you don’t already have one. The licenses last 30 days and can be renewed. A developer license is different than a store account, which you need in order to sell apps. I have had a store account for several years since I have written a number of XBox 360 Indie games. The cost of a store account is $49 per year. If you have a store account your developer licenses will last for 90 days rather than 30 days.

Getting Started with Visual Studio

Visual Studio 2012 makes it easy to get started writing Windows 8 apps. XCode is used for developing on Apple platforms, and I find it extremely frustrating to use. The worst part of XCode is the management of open edit windows. If you work on a complex project in XCode, windows are hard to keep track of since they can be placed anywhere on the screen. That is why I am so thankful for the sensible window management in the Visual Studio IDE.

In Visual Studio 2012, there is a special Windows Store category. Note that if you run Visual Studio 2012 on an non-Windows 8 operating system, you will not see this category, For iChessKids we will select a Blank App project.

Visual Studio saves projects and files within the Documents folder. I have always found this very inconvenient, so I always create my own folders into which the new projects are saved. In Figure 1 you will notice that the folder which will contain the new iChessKids project is c:\work\iChessKids Development.

CreateiChessKidsApp

Figure 1: Creating the iChessKids project uses the Blank App template from the Windows Store category.

 Application Architecture

When you have the iChessKids project open, you will notice several startup .xaml files. Each has an associated .xaml.cs file, which represents the code behind the XAML markup. If you need a XAML tutorial, I would suggest going to http://msdn.microsoft.com/en-us/library/ms752059.aspx where you will learn enough to understand the iChessKids project.

In the Solution Explorer, double click MainPage.xaml. This opens the file in the XAML editor. You will see in the top half of the screen the visual design tool, and in the bottom half of the screen the XAML markup that can be manually edited.

I edit directly in the XAML code most of the time. I find it easier and faster than using the visual designer and the properties window. I guess it goes back to my DOS days when you had to type everything anyway. The properties window is a good tool when you are learning the user interface objects and getting familiar with their properties. But I think that once you learn the most-used properties, you will find that editing the XAML directly is much faster and easier.

Setting the App Background Image

If you look at the XAML markup you will see a Grid tag. We’re going to add a background image to the grid which will serve as the app background. In order to set a background image, perform the following steps.

1. In the Solution Explorer window, open the Assets folder.

2. Right click on the Assets folder and select Add/New Item.

3. Browse to the image you want to use for the background and select it. It will then be in the Assets folder. (The image that is being used for this program is called Background.png.)

4. In the XAML markup, click on the Grid tag. You will see the Grid object appear in the properties window (in the lower right corner by default).

5. In the properties window, open the Brush category. You will see a number of Background attributes.

6. Click on the Tile brush icon (fourth icon from the left).

7. Use the dropdown in the ImageSource attribute to select the Background image. You will see the background in the visual design window.

8. Optional: set the opacity to something less than 100%. I will set to 50% in order to minimize the distraction of the background image.

Adding Temporary Text

From the Toolbox you can select user interface objects for placement within the XAML.

Running the App

To run the app without debugging, press Ctrl-F5 or select Start Without Debugging from the Debug menu. To run the app with debugging, press F5 or select Start Debugging from the Debug menu.

Video Clip 2: Editing and running the new iChessKids project

You can download the project for this diary post here.

Some Notes About Coding Style

I might get more hate mail from this one section than everything else combined. That’s because the coding style issues I want to mention are almost religion to some people. But I feel like I have to explain why I write code the way I write it.

Classes

I finally understood classes when I realized that they are aligned with methodology. A class is a thing that has properties, methods, and events. When the light bulb went off, my understanding increased and my software designs became much better.

I name all classes as things. For instance, I might have a class that I name Dog. The properties are attributes of the dog such as color, size, and age. This means that I name properties as adjectives (or as adjective-like as makes sense). The methods are things that the dog does such as bark, bite, and eat. This means that I name methods as verbs (or verb-like at the very least).

Variables Names

I learned programming with 37K of available memory, and the language was BASIC. Short variable names saved memory, so a, c, x, and i were optimal. Unfortunately if you forgot what the variable c stood for, it might take you hours to find out.

The habit of short and meaningless variable names carried over to my C programming. But over the course of a couple of years I realized that the compiler did not really care how long the variable names were, and short names did not save memory. Naming variables for exactly what they were became my practice, even if the variable names tended to be long. Of course, with auto-complete in Visual Studio, you don’t even have to retype the entire variable name once it has been created.

I have also found that highly descriptive variable names have another huge advantage. I sometimes skip writing source code comments when I am in a hurry (or just lazy). If the variable names are easily understood, then source code comments are not nearly as important. (Yeah, tell that to the guy who has to maintain my code six months later.)

So far, I think I am on solid ground. Few can argue that variables names should be descriptive of the variable contents. But at a certain point in my programming career, I bought into the idea that Hungarian modifiers allow the variable name to be even more descriptive because you could tell by looking at the variable what data type it is. For that reason, I precede integers with the letter ‘n’, doubles with the letter ‘d’, and strings with the string ‘str’. This helps enormously when I debug and also when I come back six months later and have forgotten the data types for many of the variables.

I go one step further than a simple Hungarian implementation. I precede class member variables with m_ to indicate that they are member variables. That way, local variables and member variables are easy to differentiate when reading the code.

Coding Style

When I first started writing in the C language, the following function style was popular, and I adopted it for myself.

1
void MyFunction(){
2
  // Stuff here
3
}

I soon realized that debugging complex code with embedded loops and if statements, that matching curly braces which were not lined up was difficult. I then started to line up the starting and ending curly brace as follows.

While this coding style was very popular at one time, it has fallen out of favor now. As a matter of fact, many JavaScript editors force you to use the style where curly braces are not lined up. I recommend lining up your curly braces. It will help your debugging efforts immensely.

01
void MyFunction()
02
{
03
  // Stuff here
04
 
05
  for( int i=0; i<50; i++ )
06
  {
07
    // More stuff here.
08
  }
09
 
10
}

Moving Forward

In the next diary entry we will start getting the app to look and sound like something. That includes showing the boards and pieces, and playing sound and music.

Curious about developing for Windows 8?  

Check out the live App Builder Virtual Summit. May 2, 9 am-12:30 pm Pacific Time. 

________________________________________________________________

Untitled

Rick Leinecker is a veteran software engineer and developer of numerous apps for iPhone, iPad, Android, Blackberry and Windows phone as well as dozens of retail software products and XBox 360 games. He has authored 23 books for professional programmers on mobile device programming, C# and C++ and other topics and has written hundreds of magazine articles on programming and tech. He is Chief Technology Officer overseeing software development at a Greensboro, N.C. maker of cloud, collaboration, storage and communications services.      

5 comments
IndieProgrammer
IndieProgrammer

I am a independent programmer who has been thinking of entering the Windows 8 market. I agree that this marketplace is presenting an opportunity that smaller programmers like me shouldn't ignore. I look forward to following your project and see how the app building and submission process works for the Windows 8 store.

rickleinecker
rickleinecker

@IndieProgrammer  Now is the time to get started. I remember the early iOS days when people made a lot of money because the market was not saturated. That's the way it is with with Windows 8 market right now. You can actually release an app and not be swalloed up by 500,000 other apps.

Microsoft has been really helpful, too. They definitely want to help app developers get their programs in the store. But for sure read the next three article to follow my progress.

Tatsh
Tatsh

Very short-sighted point on curly brackets. Any decent editor will show you what curly brackets are for which. Even vi has ^5 to go between brackets. Get a better editor (even Visual Studio has so-called 'vi mode').

Almost all JavaScript projects use non-aligned brackets (including for arrays) and almost all C/C++ projects use non-aligned on both function definitions, structs, classes, etc.

Also curly brackets will break a return literal object (or array) statement in JavaScript in 99% of implementations right now.

The only exception that comes to mind quickly is PHP but even this (in PSR-0) prefers non-aligned brackets for loops, if statements, etc. It only recommends aligned brackets for function and class definition.

I do not recommend aligning brackets for any reason. Follow standards, ,make your code clear and use a better editor.

rickleinecker
rickleinecker

@Tatsh Thanks for your comments. I knew that I would get quite a bit of heated response on coding style. It is interesting that this particular thing (lined up or unlined up curly braces) has cycled both ways over the years. For a number of years one is in vogue, and then for a number of years the other is in vogue. As I said in the article, I used to prefer curly braces that are not lined up, but earned too many bruises along the way.

My recommendations are based on 27 years of C/C++/Java/C# coding. I also taught university programming courses for 14 years and found out what worked best for most students. I also do a great deal of contract programming, and when the rubber hits the road the companies I work for prefer curly braces that are lined up.

Your mention of JavaScript is valid. Unlined curly braces are almost required for JavaScript, and most editors enforce this. I am not sure how that came about. I think there are quite a few coding issues within JavaScript that are unfortunate.

joemaglitta
joemaglitta

Nice job Rick. Frank, interesting, hands-on from someone with LOTS of perspective. 

Folks, if you have questions for comments for Rick, post 'em up here. Thanks, Joe Maglitta. Editor, Windows 8 Center at SourceForge