Building 2 Mobile Apps: From 0 to Launch in 6 Days [Day 5]

5 min readOct 23, 2018

🔥 Important Update

An event just came up on my radar for this Thursday, which happens to coincide with — that’s right — Day 7 of this mobile app development challenge!

In light of this calendar clash, I have made a somewhat insane decision:

I am going to push the launch up a day!

I just think it sounds way better than delaying it. And besides, I will most likely have quite a bit of followup tasks to handle after the event, so I might as well wrap up the challenge beforehand.

In a way, this is serving as a good example of why we should always cushion our time estimates to account for unforeseen circumstances.

Fingers crossed that I can find time to take care of post-launch work and updates.

The title of this series has effectively been updated to “From 0 to Launch in 6 Days” to reflect the change as well.

Considering the current status, I think I just may pull it off.

Here’s to the home stretch! :)

Math is Fun

When I signed off of blogging yesterday, Jet Tag’s time travel summary was still just an obscure integer of net milliseconds.

That has since been fixed.

Here’s the straightforward math operations that I did in the code:

summary.ts

// Set up the display info
    var new_val = this.time_difference;// Normalize the number for easier calculations
    if (new_val < 0) { new_val *= -1; }// More than a 1-day difference
    if (new_val >= 86400000) // 24 x 60 x 60 x 1000
    {
        // Round it down to its nearest integer
        this.diff_in_days = Math.floor(new_val / 1000 / 60 / 60 / 24);new_val -= (this.diff_in_days * 1000 * 60 * 60 * 24);
    }
    else
    {
        this.diff_in_days = 0;
    }
    console.log("new val: " + new_val);// More than a 1-hour difference
    if (new_val >= 3600000) // 60 x 60 x 1000
    {
        this.diff_in_hours = Math.floor(new_val / 1000 / 60 / 60);new_val -= (this.diff_in_hours * 1000 * 60 * 60);
    }
    else
    {
        this.diff_in_hours = 0;
    }// More than a 1-minute difference
    if (new_val >= 60000) // 60 x 1000
    {
        this.diff_in_minutes = Math.floor(new_val / 1000 / 60);
    }
    else
    {
        this.diff_in_minutes = 0;
    }this.result_num = this.diff_in_days
                        + ( (this.diff_in_days > 1) ? " days " : " day " )
                        + this.diff_in_hours
                        + ( (this.diff_in_hours > 1) ? " hours " : " hour " )
                        + this.diff_in_minutes
                        + ( (this.diff_in_minutes > 1) ? " minutes " : " minute " );// AHEAD OF TIME
    if (this.time_difference >= 0)
    {
       this.result_txt = ">>>>> into the future!";
    }
    // BEHIND
    else
    {
      this.result_txt = "<<<<< backward in time!";
    }

summary.html

<h1>Time Traveler Status:</h1>
  <p>
    <em>{{ result_num }}</em>
  </p><p>
    <em>{{ result_txt }}</em>
  </p>

Watching It in Action

Looks good so far.

What’s a little time sacrifice on my part — if I could introduce more people to notice this often unsuspected awesomeness that is time travel via flights.

Edge Case: Invalid Date and Time Picker Values

This would occur if users press the big button to proceed *without* making any selections from the pickers.

To cover this scenario, I added some fallback values for the date-time components.

home.ts

goToArrivalPage()
  {
    if (this.date == undefined) this.date = moment().format("YYYY-MM-DD");
    if (this.time == undefined) this.time = moment().format("HH:mm");console.log("start date: " + this.date);
    console.log("start time: " + this.time);this.navCtrl.setRoot(ArrivalPage, { start_date: this.date, start_time: this.time });
  }

arrival.ts

goToSummaryPage()
  {
    if (this.curr_date == undefined)
    {
      this.curr_date = moment().format("YYYY-MM-DD");
    }
    
    if (this.curr_time == undefined)
    {
      this.curr_time = moment().format("HH:mm");
    }console.log("end date: " + this.curr_date);
    console.log("end time: " + this.curr_time);this.navCtrl.setRoot(SummaryPage, { start_date: this.start_date,
                                        start_time: this.start_time,
                                        end_date: this.curr_date,
                                        end_time: this.curr_time });
  }