Building 2 Mobile Apps: From 0 to Launch in 7 Days [Day 1]

6 min readOct 19, 2018

In this series I am going to build a pair of mobile apps, which I will then launch on the app store. What you are reading now is my chronicle of the entire process.

App #1: Jet Tag

Jet Tag tracks the amount of time you gain / lose when flying from one time zone to another.

Say for instance, if you fly one-way from Tokyo to San Francisco and stay there for a while, you will have gained more than 6.5 hours by the time you land because of the time difference. (Congratulations, you have now successfully time traveled!)

The flight duration of 9.5 hours itself can either be a time gain or time loss depending on how you spend it. It’s something that’s up to you to decide on a case by case basis, and will therefore be listed separately in the app. Does that sound reasonable?

This app will hopefully be useful for digital nomads, or pretty much anyone who flies a lot.

If you don’t find it useful at all, that’s OK. The tutorial part is the real meat here.

As with my 100+ other ideas, I came up with Jet Tag out of the blue late last night. Turns out it’s excellent for tutorial purposes on account of several characteristic advantages:

Its features are straightforward to implement.
The data structures it requires mostly have linear running time — or O(n), for those who are familiar with the Big O Notation.
It can run even without connectivity. Probably good to go on airplane mode as well.
Its small data size means everything can be stored locally. There is no need for hosted or cloud-based data. Thus keeping things simple. (At least in the first version.)

By the way, the name Jet Tag is a play on words as it sounds a little like “jet lag.”

App #2: Cat Pat

Cat Pat tracks the amount of time you have spent playing with your cat(s).

It is simply a re-skinned parody of Jet Tag, just to demonstrate how easy this can be done!

Notice how I am able to describe both apps in just a few words. That’s how most products should be. I, for one, am not too keen on buzzword-ridden descriptions with empty promises.

Now without further ado, let’s get started.

Sprint Planning

Project planning is important regardless of team size. So even though I am the only one working on this project, I went ahead and made a sprint board on Trello.

In technical terms, I am using the Agile Scrum project management methodology. Ignore this jargon if you don’t care for it.

Tools

What I am using to build this project:

Ionic Framework
Adobe Illustrator
macOS High Sierra
(I actually just got a notification to upgrade to macOS Mojave today. But for the sake of stability, I think I am going to hold off on the upgrade until after this project is launched.)
Terminal
Android Studio
Atom, the code editor

That’s not to say you won’t be able to achieve the same results with your favorite alternatives. It’s just that my step-by-step documentation will be more relevant if you also happen to have access to the same setup.

Time to crank out some skeletons.

Creating an App on Ionic

The installation guide can be found on Ionic’s website: https://ionicframework.com/getting-started#cli

I already have it installed on my machine, so to speed things up, I won’t go into detail here for now. I might come back and cover the installation steps later.

To create an app from scratch, I opened up Terminal, navigated to the directory where I want the project folder to be, and entered this:

ionic start JetTag blank

I chose to start with a blank template, though you can pick a ready-made one by replacing the last argument with [tabs] or [sidemenu].

Then I got this prompt:

? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N)

I typed [y].

? Install the free Ionic Pro SDK and connect your app? (Y/n)

[n] for me in this project.

At this point, I was ready to run the app in the browser:

cd JetTag
ionic serve

Next, I wanted to see it running on an Android emulator:

ionic cordova run android --emulator

⚠️ Today’s Issue #1

When I ran that command, Terminal went into “panic mode”:

Waiting for emulator to start...PANIC: Missing emulator engine program for 'x86' CPU.

Solution

Based on past experiences, this can be solved by manually launching an Android emulator via Android Studio first, before re-running the command.

⚠️ Today’s Issue #2

As soon as I opened up Android Studio, I was asked to complete several updates.

Then after the updates, I re-ran the same command above to launch the app on the emulator.

Only, this time the build failed:

FAILURE: Build failed with an exception.* What went wrong:A problem occurred configuring project ':CordovaLib'.> No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

Solution

I fixed the issue by following an answer on Stack Overflow, aka a developer’s best friend.

I had to go through both their Solution and Workaround for it to finally work.

To change the classpath as specified, I went to:

{project folder} > platforms > android > CordovaLib

From there, I opened up /build.gradle on Atom, and made this change (the line in bold):

buildscript {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }dependencies {
        classpath 'com.android.tools.build:gradle:3.2.0'
        classpath 'com.github.dcendents:android-maven-gradle-plugin:1.5'
        classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.7.3'
    }
}

With these issues fixed, the brand new skeleton app ran on Android Studio’s emulator just fine.