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

5 min readOct 21, 2018

Sometimes, you just know you are on the right track not only because you have been making good progress, but also when you feel overwhelmingly fired up to start working on a brand new day — even if it’s a Sunday.

That’s me today, on Day 3 of this mobile app development challenge.

The main goal of the day was to modify the user interface (UI) of the Jet Tag app.

But first, here’s the updated sprint board:

Updating the Home Screen UI

What I had from Day 1 was pretty clean looking. All in all, there was nothing wrong with it per se.

But I had a slightly different design in mind.

🤔 Random Note

In the true spirit of developing a minimal viable product (MVP), making the UI prettier normally shouldn’t be a priority at all.

For me, I couldn’t bring myself to completely skimp on this part.

If you didn’t mind going with the default theme, that wouldn’t necessarily be a bad thing. It would speed up your MVP development way more.

Anyway, I wanted Jet Tag’s home screen to look like this:

With this design, users would easily know what to do *AND* be able to take action right away, without having to navigate elsewhere.

To get to this particular stage, I only had to edit a small portion of the code:

1. I overrode some Ionic styling variables under:

/src/theme/variables.scss

$background-color: #6f77c1;$text-color: #f8f0f0;$font-size-base: 2.0rem;$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  main:       #6f77c1,
  highlight:  #51c9c5,
);

2. Then, I modified the home screen page layout via:

/src/pages/home/home.html

<ion-header>
  <ion-navbar color="main">
    <ion-title>
      Jet Tag
    </ion-title>
  </ion-navbar>
</ion-header><ion-content padding>
  <p>
    Are you about to board a flight?
  </p>
  <p>
    Track your <b>TIME TRAVEL</b> power.
  </p>
  <p>
    1. Select the current local date and time.
  </p><p>
    <ion-item>
      <ion-label>Today's Local Date</ion-label>
      <ion-datetime displayFormat="MMM/DD/YYYY"></ion-datetime>
    </ion-item><ion-item>
      <ion-label>Local Time Now</ion-label>
      <ion-datetime displayFormat="HH:mm" pickerFormat="HH mm">        </ion-datetime>
    </ion-item>
  </p><p>
    2. Press the big button below to start tracking!
  </p><p>
    <button ion-button large color="highlight">Now Boarding</button>
  </p><h1>
    Bon voyage!
  </h1>
</ion-content>

Plus some more residual modifications on project information:

/config.xml

<widget id="com.buildiful.jettag" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">    <name>Jet Tag</name>    <description>Track your time travel power whenever you fly from one time zone to another.</description>    <author href="https://kathyli.com/">Kathy Li, Buildiful</author>

Since I’m working off of Ionic’s boilerplate, I expect to run into more of these default components that need to be updated here and there.

Creating a New Page: Landed

The landed page is not to be confused with a landing page.

As I am typing this out loud and clear, it occurs to me that it’s probably less confusing to call the page “Arrival” instead.

It’s settled.

I ran this on the command line:

ionic generate page arrival

This automatically generated a new directory with the following structure:

/pages    
    /arrival
        /arrival.html
        /arrival.module.ts
        /arrival.scss
        /arrival.ts

That said, I would still need to declare the new component in:

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ArrivalPage } from '../pages/arrival/arrival';@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ArrivalPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ArrivalPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Next, the desired flow is to be able to navigate to the ArrivalPage after clicking on the [NOW BOARDING] button on the HomePage.

To implement the navigation, I made the following changes in the code:

/src/home/home.html

<button
      ion-button
      large
      color="highlight"
      (click)="goToArrivalPage()">
      Now Boarding
</button>

/src/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';import { ArrivalPage } from '../arrival/arrival';@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage
{
  constructor(public navCtrl: NavController)
  {}goToArrivalPage()
  {
    this.navCtrl.setRoot(ArrivalPage);
  }}

Then it’s time to update the Arrival page’s layout.

To maintain a consistent look and feel, it would be pretty similar to /home.html

The modified /arrival.html:

<ion-header>
  <ion-navbar color="main">
    <ion-title>
      Jet Tag
    </ion-title>
  </ion-navbar>
</ion-header><ion-content padding>
  <p>
    Have you landed?
  </p>
  <p>
    Don't forget to stop the timer to avoid entering a parallel universe of endless airborne time abyss.
  </p>
  <p>
    (OK, that probably won't happen.)
  </p>
  <p>
    1. Select the current local date and time.
  </p><p>
    <ion-item>
      <ion-label>Today's Local Date</ion-label>
      <ion-datetime displayFormat="MMM/DD/YYYY"></ion-datetime>
    </ion-item><ion-item>
      <ion-label>Local Time Now</ion-label>
      <ion-datetime displayFormat="HH:mm" pickerFormat="HH mm"></ion-datetime>
    </ion-item>
  </p><p>
    2. Press the big button below to get your summary, and to     <b>STOP THE TIMER</b>!
  </p><p>
    <button ion-button large color="danger">JUST LANDED</button>
  </p>
</ion-content>

The result looks like this:

I chose a slightly more ominous color for the main button on this page, in hopes that people will be less likely to forget to press it once they have landed.