Building MiniComp

Thursday, June 28th, 2012     #development #everything

Yesterday I released my first iPhone App - MiniComp , a simple way to run friendly competitions with your mates. Today I thought I'd write up a little about how it was built.

The Idea

The idea for MiniComp came about when my teenage son was telling me about a competition he and his mates were running for their school sport. They play squash once a week and wanted to run a simple leaderboard, just to make it a little more fun. The system they had was a bit flawed so I suggested using the Elo ranking algorithm (the same algorithm Zuckerberg used for FaceMash), and the idea for MiniComp sort of flowed from there.

It's pretty simple:

  1. Enter the names of everyone playing.
  2. Enter the results of games as you play.
  3. That's it! MiniComp ranks everyone and shows a leader board.

The Proof Of Concept

As a long time fan of Mono, choosing MonoTouch as the development tool was a no brainer. I'd used MonoTouch before for some prototype work and some tiny throw away type apps and figured it would be perfect for this. And it was, the first version took just two nights to build and supported the basic idea described above as well as support for multiple competitions.

And it passed the proof of concept. My son used it for their squash round the next day and immediately they were hooked.

It was at this point I realized this app might have some potential - mainly because of just how easy it is to use and the immediate leaderboard it generates. There's no need write down results on scraps of paper, or to get back to a PC to enter results, no spreadsheets etc... it's just very convenient and the results are instant. It simply adds a new layer of fun.

As for the name? It's just something I grabbed out of thin air right at the moment I created the C# project.

A Little More Functionality

Thinking about how MiniComp might be used I realized that with a few simple options I could make it flexible enough to work with just about any game or sport.

  • Scoring Mode controls whether to record actual point score results, and whether highest or lowest score wins. In most games the highest score wins, but some games it's the opposite (eg: golf). And sometimes there's just no score - it's either win/loss/draw situation, or perhaps you just couldn't be bothered entering a score.

  • Ranking System controls how players are ranked. Elo is great but sometimes the most wins, or most points is a better system. It also supports a points-for-place mode where first place gets so many points, second gets so many etc...

  • Two Player and Multi Player. Whether the game is played head-to-head between two players (eg: squash) or everyone plays at the same time (eg: motor racing).

Some Polish

I was now about a week in and happy with the functionality, but the UI looked a bit plain using the standard iOS controls. So I just started playing around with colors and came up with the blue on black look which made the whole thing a little more interesting.

I also tried a few variations on the background texture before settling on the "tiny carbon fiber" look that's now used through out the app and the website.

All the artwork was done in Inkscape. By picking a simple flat look, I managed to knock together all the in-app icons in practically no time. It's a minimal UI - as in minimal effort.

The main app icon was a different story altogether - this took alot of work and many iterations to get right, but worth it I think.

Total effort so far: two weeks part time.

The Server

By now, some of my son's mates were asking for copies of the results and it became obvious that the ability to publish and share the leaderboard would add another interesting dimension to it. I didn't want to spend too much time on this so the requirements were the bare minimum:

  • Ability to publish a competition without any signup or registration.
  • Ability to share published competitions by Twitter, Facebook and Email.
  • Enough security to prevent someone hacking your published competition.
  • Optional, minimal privacy by obscurity.

The server is written in ASP.NET MVC and runs on a Linode server under Mono.

Published competitions are stored in a single table database (using PetaPoco of course) with the serialized competition stored as a text blob. Because both the app and the server are written in C# all the serialization code for competitions just worked on both platforms and generating the leaderboard views was really just an excercise in HTML formatting.

Security takes the form of an authentication token that's allocated by the server when competition is published. That token is required to update an already published competition and is returned to and stored by the app.

For privacy, although everything published to the website is publicly viewable you need to know the published URL. Since thisis made up from the database record ID and the name of the competition in slug form it's pretty hard to guess. For the insensitive nature of this data it's good enough to keep things private if you want... just don't give out the URL in public.

The server and the associated changes to the app took about another week, bringing it up to 3 weeks.

The Promo Site

For the promo site I wanted something that looked slick, gave a brief overview of what the app was and then linked off to the AppStore. It's a very simple design consisting of just the one landing page, but there's a few interesting things.

  • It's Responsive and a scales well from iPhone resolution all the way up to a large desktop monitor. I've not done a responsive design before and a simple site like this seemed a good way to learn the basics. Also I figured it's the kind of site that will be viewed from range of different devices and therefore worth the effort.

  • It's Retina enabled. Looking at the first version of the site on my iPad 3 the screenshots and icon was noticably blurry. I thought I could use CSS media queries to do some simple image replacement, but in the end a simple JavaScript routine proved easier. I might write this up in a later post, but you can view the source and figure it out pretty easily. The site now looks super crisp even on high-res devices.

  • Getting Twitter buttons and Facebook Like buttons to look good together and on a dark background is difficult. The biggest problem here was the white iFrame background that flashed behind the Like button - very distracting. I tried a number of approaches to mitigate this, but in the end just hid their containing div until they finished loading and faded them in with jQuery. The script is simple, view the source of the site if you're interested.

Aside from the promo site I also set up a Facebook page, Twitter account , and a press kit which includes marketing material, media images, a press release and more.

All up the promo site and marketing resources took about another week. 4 weeks elapsed.

Other Services

In building MiniComp I used a number of neat products and services:

TestFlight

I think anyone who's done iOS development would already be familiar with TestFlight, but for those who aren't it's a way to distribute ad-hoc builds of your app to testers. Beautifully designed, does what it says, worked perfectly.

Also, MonoDevelop has a built-in command to push to TestFlight. It's actually easier to publish to TestFlight from MonoDevelop than it is from XCode.

Flurry

I looked into a few analytics options, but decided on Flurry for two reasons - I liked the design of their site and MonoTouch already had bindings written for it.

AppAnnie

I haven't used AppAnnie much yet, but I'm confident. It's a better way to track downloads and sales figures from the AppStore. Unlike the AppStore, AppAnnie keeps your sales figures indefinitely and seems to have nicer reports and charts.

Their sign-up process is painless, their emails are friendly and helpful, I can only assume the rest of the service lives up to the hype.

prMac

prMac is a public relations outlet for Apple and Mac related news. I'm not sure how effective this will be in the long run but I've been reasonably impressed so far. For $20 they'll push out your press release to 700+ media partners. Their site also has some great of information on how to write a decent press release which I found very useful (I think you need to sign up before you can access this, but sign up is free).

MonoTouch and Mono

I've already mentioned Mono and Xamarin but they really do deserve another mention.

At the same time as developing MiniComp I was doing contact work developing another mobile app for iOS and for Android, using ObjectiveC/XCode and Java/IntelliJ. The difference between the two experiences was night and day - especially for the iOS development. I find XCode/Objective-C to be overwhelmingly infuriating and switching back to MonoDevelop after using XCode all day was a huge relief.

Since this was the first complete app I'd done with MonoTouch I was a little concerned that it might start to crack around the edges as I got more into it, but it really didn't. In fact the more I got into it the more it shone.

Conclusion

So there you have it. All up the whole project went extremely smoothly taking just 5 weeks, including a week of waiting for the the app submission/review cycle. I have no idea how it will sell, but at the very least I've learned a lot and my son has a cool app.

Interested in MiniComp? Check it out here: http://minicompapp.com.

« Older - Icon Evolution Newer - Long Time No Post and PetaPoco v5 »