Crappy First Drafts

This is the third post in the 30 Day App Challenge series

The best advice I have ever received about writing was to “Write Crappy First Drafts”. I believe it is relevant for the app I am about to write too. See I am a perfectionist by nature and can easily get stuck in the details. I can rewrite a single sentence about ten times and still not be happy with the result. The major problem with this kind of perfectionism is that I can easily get stuck in an endless circle, obsessing about the details, and not focusing on the big picture.

In order to combat this in writing, I write really crappy first drafts. They are terrible. I keep that voice in my mind quiet, that keeps telling me: “I am sure we can express that in a better way”, “That doesn’t make any sense”. If I am not embarrassed about my first drafts, I have not done a good enough job to keep that voice quiet. Writing this way helps get all the words that you possibly want on paper. Getting to a flow-state is much easier that way. The editing can always happen at a later stage.

I have applied the same principle here to the app: writing crappy first screens. My goal is to get to an overall picture quickly (like writing a chapter outline for a book) and then obsess about the small details later on in the process.

What does this process look like?

1) Code up each screen in HTML

From each sketch that I drew in the previous step, I create a very quick HTML version of it. This shouldn’t take more than 3min per page.

For example for the Clue Editing page:

The Sketch

Sketch

Sketch

The Result

Clue Edit Page

Display

HTML version


clue.html
<ion-view>
<div class="bar bar-header">
<a class="button button-clear button-positive" href="#/edit”>Cancel</a>
<h1 class="title”>Edit Clue</h1>
<a class="button button-clear button-positive" href="#/edit">Done</a>
</div>
<ion-content class="has-header">
<h2>Clue Details</h2>
<ul>
<li>add Picture</li>
<li>add Riddle</li>
<li>add GPS location</li>
</ul>
</ion-content>
</ion-view>

 

2) Place each HTML into components folder

Component Folder Structure
I create a new folder called components under www and for each HTML page I now have, I create a feature folder for it. i.e. For the clue page I create a clue folder.

Later on, this becomes easier to manage the application as a whole, because the controllers, any css, any directives will also go into this feature folder. Google has released how to best lay out your angularjs app and the same principles apply to a mobile app too.

3) Add Routing

Next, I add each screen as a state to the following file: app.js. Ionic uses ui-router to know which screen to show for each url or state. In past projects, I have spent a few hours debugging to find out how I messed up this router, so it’s good to get this out of the way early on in the project. After this step is done, all your screens should be accessible, right from the start.

For the treasure hunt app, this is what the routing looks like:

app.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('welcome', {
url: "/welcome",
templateUrl: "components/welcome/welcome.html"
})
.state('list', {
url: '/',
templateUrl: 'components/list/list.html'
})
.state('details', {
url: '/details',
templateUrl: 'components/details/details.html'
})
.state('edit', {
url: '/edit',
templateUrl: 'components/edit/edit.html'
})
.state('play', {
url: '/play',
templateUrl: 'components/play/play.html'
})
.state('finish', {
url: '/finish',
templateUrl: 'components/finish/finish.html'
})
.state('clue', {
url: '/clue',
templateUrl: 'components/clue/clue.html'
})
;

$urlRouterProvider.otherwise('/welcome');

});

Summary

Once this is all done, I have an app that I am too embarrassed to show anyone, but I have a very good starting point and know what my screen flow looks like.

Next Task

I can’t stand these screens for very long, so the next task will be to make it a little less embarrassing by making use of Ionic’s CSS components.