3, 2, 1 … Shipped

This post is part of the 30 day app challenge. An overview of the journey and progress can be found here.

30 Day Challenge Status
Download Treasure Hunt Challenge on App Store

30 days ago, I challenged myself to write an app using the Ionic Framework in 30 days. I had lots of doubts at the beginning of this process, whether I would have enough time, what app I would write, etc etc.
Well, 30 days have now passed. Coding time is up. The app has been sent to Apple to review. I did finish writing an app. And the two users who I wrote this app for, are very busy using the app already (my two sons) Here are some screenshots and lessons learnt.

App Overview

Allow users to create treasure hunts, by taking pictures and recording riddles which will reveal where the next clue is to be found.

Screenshots:
IMG_8321IMG_8324IMG_8322IMG_8328IMG_8326

What went well

Test the app with actual users as early as possible
Whenever I was unclear if I should add a button here, or should I add a listbox there, I would ask whoever was closest to me, to test the app (hallway usability testing). I had to suppress my need to show them how it works, and rather observe how they discovered functionality. Exclamations like the following were very common:”Oh that’s how they interpret that!”, “Whoops. I forgot about that bug.” “Tapping vs clicking seems to be different”

My sons loved testing the app. They are included in the credits because of this very reason. The main thing they loved was recording “You are a poo poo Pirrate, Arrr!” and playing that over and over again, laughing hysterically. Come to think of it, I should have just created a sound recording app! They do occasionally use it to hunt for treasures too though.

Having fun and keeping it simple
Creating a new app was a whole lot of fun. This whole experience reminded me of creating my first webpage on geocities: learning, coding, playing, testing. A whole new playground! I did not have many technical mishaps along the way. I do think this is because I kept the feature set simple and achievable.

What didn’t go so well

Perfection
I am a perfectionist. There are a thousand things I would still like to add to the app, designs I would like to polish off, screens I want to change. But shipping in 30 days is more important than this. And I know my perfection hunger is never satisfied. It’s good to have a deadline and constraints (time, time, time).

Design
It took me a while to settle in on a design that I felt comfortable with. I don’t love the design, but it is good enough for this challenge. If I were to sell this app, I would invest more money into the design aspect of the app and get a professional designer. I love the concept behind 99designsand would make use of their service.

Major feature left out
I had to make a tough call early on in the project. The geo location plugin wasn’t working to the accuracy that I needed it to. I really wanted to have a compass that showed the way to the next treasure and how far away you were. I got 90% of the way there. Unfortunately, I could not get it to work accurately enough for clues that were close to one another, and for in-house treasure hunts. I did not have much time, so I decided to leave it out entirely and get the rest of the features working. Perhaps in version 2 (if there is ever going to be one), this will become part of it.

Resources Used

Ionic Framework
The ionic team have done a great job. They have taken away a lot of the pain you have to deal with when building mobile, hybrid apps. This has helped me tremendously in order to ship something in 30 days. It’s more than just an open source framework.

Envato
Most of the assets I used for the app came from here. Great marketplace for music, sound effects, graphics, stock photos etc. At great prices too!

iStockPhoto
Whenever I browse the library here, I am inspired. I love what photographers and artists are doing at iStockPhoto. You do pay a hefty price for many of the items. But who can put a price on beauty, right?

Summary

I really enjoyed writing this app. It’s great to see it being used already by my own family. If you have been wanting to write an app for a while read on…

Gulp-Inject and Ionic

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

As your app starts to grow, you will be creating more controllers, services and stylesheets for your app. Every time you create a new file, you have to remember to manually insert this link into your index.html file. I keep forgetting about this last step and often wonder why my new service is not working. If you are in the same boat, read on. Gulp-inject allows us to automate this last step.

Gulp Inject: What it does

Whenever you create a new file or change a file, gulp watch will pick up on this change and call the gulp-inject task.

Gulp Inject Ionic

Gulp Inject Ionic

Get it setup for Ionic

This is how to get it setup for your ionic project.

1) npm install -g gulp
This installs gulp globally, which means you can use gulp with all your projects.

2) npm install —-save-dev gulp-inject
This adds gulp-inject as a dev dependency to your project. Dev-dependendies won’t be installed automatically when you run npm install, because it is not needed to run the project. However, anyone who wants to use the project for development needs to have dev-dependencies installed.

3) Add a new task in your gulp file: index
Next we are going to add a task to the gulp file, that will instruct gulp to inject any js and css files into the index.html file

In the gulp.js file add the following task:

gulp.js
var inject = require('gulp-inject');

gulp.task('default', ['sass', 'index']);

gulp.task('index', function(){
return gulp.src('./www/index.html')
.pipe(inject(gulp.src('./www/components/**/*.js', {read: false}), {relative: true}))
.pipe(inject(gulp.src('./www/components/**/*.css', {read: false}). {relative: true}))
.pipe(gulp.dest('./www'));
})

I also want to make sure that whenever a new file is added or changed this task gets run.

gulp.js
var paths = {
sass: ['./scss/**/*.scss'],
components: ['./www/components/**/*.js', './www/components/**/*.css']
};

gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.components, ['index']);
});

5) Add gulp watch task to Ionic Project


ionic.project
{
"name": "treasureHunt",
"app_id": "",
"gulpStartupTasks": ["sass", "index", "watch"]
}

This means that whenever you start up ionic on the command line using, ionic serve, the above gulp tasks will be run.

6) Add html comment to inject js and css files
Add the following lines into your index.html file to allow gulp-inject to insert the new links:

<html>
<head>
...
<!-- inject:js -->
<!-- endinject -->
...
<!-- inject:css -->
<!-- endinject -->
</html>

If you are looking for a different setup or want to read up more on how gulp inject works, the gulp-inject documentation covers a bit. To see what this setup looks like within an ionic app,

This setup took me about 10 minutes but is already paying dividends. It’s one less thing to worry about in the development cycle.

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

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).