Time, time, time

This post is part of the 30 day app challenge: I am building a mobile treasure hunt app using the Ionic Framework.

“I am just so busy at work at the moment.” “I am too tired for this”. “I need to spend time with my family.” “I need to contribute to other Open Source projects” “So many things to do, not enough time left”. “If anything is worth doing, it’s worth doing it right and I can’t do it now.”

All true and all thoughts that have gone through my head in the last two weeks. There is so much I want to throw into this app, so many design ideas and features I have in mind. So what do I do?

Here are my options:

A) Throw more money at it
With services like odesk, freelancer.com I could easily outsource this problem. Freelancers are amazing now and will get it done quickly for me. I can get all the features delivered in no time. They aren’t that expensive either.

B) Do it all, fast!
I could still complete all the features I had in mind. The screenshots would look great in the app store. All the features I had in mind would be showcased. The only sacrifice I would have to make is that the product would be useable only some of the time. Bugs are not a priority.

C) Screw the schedule
Who said 30 days? 30 days? Nothing can be done in that time. I will secretly extend this time to 40 60 days. That ought to fix it.

D) Just give up
I could just throw in the towel at this point. Enough. I have learnt what I needed to. Next project.

The answer: KISS

What’s the right answer here? Every option is very appealing. And I have probably thought of using each one of them at various points.

But for me the actual answer is answer E. Yes the one that’s not listed above: It’s KISS.

Keep it Simple. really, really, really Simple.

For me this means throwing out all the super cool features I had in mind, and making the app only do the most essential things. Anything that is not serving this purpose or that is a nice-to-have, is not part of this 30 day challenge.

What’s was the actual goal with this challenge?

For me, it is to learn more about Ionic and to have fun while learning it. I also wanted to see what I can deliver within these extreme time constraints in 30 days.

When daily life keeps me busy and my own high demands and wanting to impress thoughts keep knocking on my door, it’s easy to lose sight of what I set out to do. Reminding myself about my initial goals: fun and learning, puts this whole challenge into perspective again.

Rabbit Holes: Getting Unstuck

I spent two hours last night figuring out why a plugin for the treasure hunt app kept timing out. It worked in the emulator, on the web, but not on my phone! I scoured stack overflow, forums, documentation, trying numerous variations. I finally packed away my laptop in frustration and tried to get some sleep.

Today, I had to face the question, should I head down that rabbit hole again and dig even deeper? That’s what I, as a software developer, am destined to do: digging deeper to solve these difficult problems.

Pair programming with imaginary friends

In the past, this is when pair programming has helped me the most. I would be head down deep in a rabbit hole and someone on my team would join me.

P: “Where you at?”
Me: “I have been trying to solve this now for THREE hours. Well you see this variable here, I cannot figure out why it is not getting a new value from our web service. Our codebase is so fragile! We should be doing this, that and the other. But there aren’t enough tests and [blah blah blah]. If only we had [shiny new framework] I would not have this problem!”
P: “What problem are you trying to solve?”
Me:”Ok […heading out the rabbit hole…]. I am developing this [ new feature description ]. When the user clicks on the button, this method is called and then this method will …. hmmm… OH that’s where the problem is! I have not done [stupid mistake here]!”.

Ever had this happen to you? Even though I did not have a pair programming partner join me, I talked it through with my imaginary friend (try a rubber duck, if that feels too weird 🙂 ).

Solving the wrong problem

rabbitwarrenIn my case, it turns out, I was actually solving the WRONG problem and did not need that plugin in the first place. Last night, I was so deep in the rabbit hole and kept on digging deeper and deeper. I am glad I forced myself to take a break (mainly due to lack of sleep!) and backtrack out the rabbit hole again.

So, what problem are you trying to solve today*?

PS.
* Hat tip to Kevin Trethewey, who would always ask me: “What problem are we trying to solve?”. I have found that it’s one of the most powerful questions we can ask ourselves.

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.

Setup Dev Environment for Ionic

TL;DR: use the guide here to get Ionic up and running on your machine

Setting up your computer to develop for mobile apps is a bit of a process. There are so many dependencies that need to be installed. That’s why I really appreciate that the ionic team has made and is continuing to make the on boarding process easy.

Here are a couple of options to get you on your way.

Manual Installation

Follow the guidelines how to install it on your machine on the ionic website. I used these guidelines both on a windows machine, using Visual Studio and Telerik App Builder, and on my Mac.

When developing on my Mac, I tend to just use the exact guidelines as posted by the ionic team.

If you are using Visual Studio and Telerik App Builder, download one of the starter templates from the github repo, create a new telerik app builder project, add the folder to the project and you should be good to go. Telerik App Builder.

If you are having troubles getting started, it’s a good idea to look on the ionic forum, post a question. I have found the ionic community to be very helpful!

Ionic-box

If you don’t want to install all the dependencies that ionic needs, you can make use of ionic-box. In summary, ionic-box contains everything you need to develop in a vagrant box. Once you have vagrant and virtual box installed all you need to do is boot up vagrant (vagrant up from the command line) and you are good to go.
The source and instructions on how to get started can be found on the github project page.

Next Task: writing some HTML for the first few screens.

App Idea and Sketches

This is the first post of the 30 Day App Challenge series.

What will I be building?

Treasure Hunt App
treasuremapI have two young boys and they LOVE to play treasure hunt and they LOVE to play on my phone. So why not combine the two together? Using this app I want to easily be able to create a treasure hunt for them. In order to get to each checkpoint on the treasure hunt map they will get some clues; a picture, riddle or GPS hot and cold compass. The app would provide visual clues to say how close they are to the checkpoint. Once they have completed all the checkpoints, they will receive the treasure. … Bribing them to do their chores will be so easy now.

Sketches

treasure_firtTime

treasure_Clue

treasure_editmap

treasure_huntScreen

treasure_list

treasure_editClue

What I learnt

Choosing an idea
There are always a ton of app ideas out there. How do you choose an idea? Seth Godin said that we should treat it like choosing lunch. We do it every day because we have to. We do not delay the decision, because otherwise we will go hungry. I like the fact that this 30-day challenge is forcing me to choose an idea… any idea and then to go ahead with it.

Sketch out ALL screens
I find it easiest to use a tool like balsamiq to flesh out what each individual screen should look like. I do like the fact that right from the get go I am forced to think about what goes on each screen and not to overcomplicate the whole thing. It’s also a great way to get instant feedback. For example, I showed these screens to my wife and she was confused about a few items. After a few more iterations these confusions got ironed out. Because it is in Balsamiq this is quick to do and to change. This exercise is also very helpful when building an app for someone else. They might have a general idea about what to build, but putting it down on paper/mockup tool, in detail screen by screen, always reveals questions that have yet to be answered.

Constraints is a good thing
Having less time and not a lot of screen estate to put lots of different buttons on can be a good thing. It forced me to think about the most essential features. I am nervous that this app is too big for 30 days, but let’s see.

Next Task:
1) Get my dev environment setup for Ionic

On Giving

Day by day you have to give the work before you all the best stuff you have, not saving it up for later projects.

My natural instinct is to store up my energy and my creative thoughts for later projects that I will use one day. But it’s only when I go full steam ahead, being present in the moment, investing all of my talent and creativity, that I get any sense of achievement.

Giving is its own reward, but it is the only thing worth aiming for.

30 Day App Challenge

Update: This challenge started on 20 October 2014 and ended 19 November 2014.

I would like to challenge myself to write a mobile app in 30 days. After the 30 days are up I want to publish it to the App Store. If you would like to join me on this challenge or would like to see my progress, read on.

Posts in this Series

Updates

Updates will be sent via mailing list (see below) and on twitter
Github: http://github.com/bholdt/appchallenge

Questions

When will the challenge start?
20 October 2014

Can I join the challenge by creating my own app too?
That would be great! Easiest would be to post a comment here, or reply to the ionic forum post. If you have a blog or twitter account where you will update your progress add it as well.

How much time will you spend on this?
I will work on the app for an average of an hour a day. That’s not an awful lot of time. But it’s an experiment as well, to see how much can be achieved given those time limits.

What app will you be creating?
I will post my idea on the first day when the challenge starts

Why make this a public challenge?
I have had this goal for a while now and have not had the courage to go ahead with it. Making this challenge a public one, will motivate me to actually go ahead and ship it. And sometimes one just needs that extra kick in the bee-hind.

Will this app be sold for lots of money on the App Store?
I will never say no to lots of cash, BUT my primary aim is to ship an app and to learn from the process of creating it. Marketing and selling an app is not part of this challenge.

What if you fail horribly?
Hopefully it will help anyone reading this afterwards, and me, to avoid the same failures.

What framework are you going to use?
I will be using the Ionic framework. Why? I am familiar with HTML and javascript, whereas ObjectiveC and Swift are all new to me. Plus ionic comes with a whole lot of stuff out of the box, which I will need to get shipping fast.

Where can I read about updates?
I will post updates on this blog, on twitter, on the ionic forum, and via this mailing list (sign up below if you are interested).