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…

Getting Lost Adventures

Being Lost

My son’s snapshot of us being lost

One of the things that we as a family love to do while on holiday is to get lost. We are often forced out of bed at a far too early time by our two boys, who are both eager for a new adventure. After quickly packing a picnic, we will choose to walk down a random street (asking our 4 or 2 year old where to go helps getting lost quickly too). We try and spot a few locals and ask them which coffee shop or bakery is their favourite. At the coffee shop, old men and women, who are always eager to talk and the only ones with enough time, will tell us stories of what this place used to look like; and where we should go next. It’s fun and one of the best ways to discover a new city, or indeed a place you have been to many times before.

Programming Adventures

I have tried to adopt this same philosophy in my programming journey recently. I have been lost in NodeJS caves and took a ride on the ruby Rails. I speak to the locals in these communities and ask them for advice: “How would they tackle this problem?” “What do they recommend?”. I am always surprised how helpful everyone is in every community.

I know the alleys and nuget packages of the .NET space quite well, but joining a .net open source community allowed me to talk to people from different countries and different experiences all together.

A beginner’s mindset

I feel like a complete beginner when I enter these foreign lands. It forces me to adopt a beginner’s mindset. It forces me to be lost for a while; and that’s a great place to be sometimes.

So…
be your name Buxbaum or Bixby or Bray
or Mordecai Ali Van Allen O’Shea,
you’re off to Great Places!
Today is your day!
Your mountain is waiting.
So…get on your way!
– Dr Seuss, Oh the places you’ll go

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.