Создание 2 мобильных приложений: от 0 до запуска за 6 дней [день 5]

🔥 Важное обновление

В этот четверг на моем радаре появилось событие, которое совпадает с днем ​​7 этой задачи по разработке мобильных приложений!

В свете этого календарного конфликта я принял несколько безумное решение:

Я собираюсь увеличить запуск на день!

Я просто думаю, что это звучит намного лучше, чем задержка. Кроме того, у меня, скорее всего, будет довольно много дополнительных задач, которые нужно решить после мероприятия, так что я мог бы завершить вызов заранее.

В некотором смысле это служит хорошим примером того, почему мы всегда должны смягчать наши оценки времени, чтобы учесть непредвиденные обстоятельства.

Скрестим пальцы, чтобы я мог найти время, чтобы позаботиться о работе после запуска и обновлениях.

Название этой серии было фактически изменено на «От 0 до запуска за 6 дней», чтобы отразить это изменение.

Учитывая нынешнее состояние, я думаю, что у меня все получится.

Вот и финиш! :)

Математика — это весело

Когда я вчера отказался от ведения блога, сводка о путешествиях во времени Jet Tag все еще представляла собой неясное целое число чистых миллисекунд.

С тех пор это было исправлено.

Вот простые математические операции, которые я проделал в коде:

резюме.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!";
    }

резюме.html

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

Наблюдая за этим в действии

Пока выглядит хорошо.

Какая небольшая жертва времени с моей стороны — если бы я мог познакомить больше людей, чтобы они заметили эту часто неожиданную удивительную вещь — путешествие во времени с помощью самолетов.

Пограничный случай: недопустимые значения даты и времени выбора

Это произойдет, если пользователи нажмут большую кнопку, чтобы продолжить *без* выбора из средств выбора.

Чтобы покрыть этот сценарий, я добавил несколько резервных значений для компонентов даты и времени.

дом.тс

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 });
  }

прибытие.тс

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 });
  }

Импорт

Теперь, когда я использую Moment.js в машинописных текстах «Домой» и «Прибытие», сначала необходимо его импортировать.

Помимо /home.ts и /arrival.ts

import moment from 'moment';

Делать чудеса

В качестве быстрого теста я нажал кнопку [Now Boarding] на главной странице, не выбрав сначала дату и время.

Затем на странице прибытия я подождал 2 минуты, прежде чем нажать кнопку [Только что приземлился], также ничего не выбрав.

И журнал консоли, и страница сводки эмулятора подтвердили, что резервный метод сработал.

Это решило этот крайний случай.

Так с какой стати нам понадобился ручной выбор даты и времени?

Это выбор дизайна, который был рассмотрен ранее в этой серии.

В двух словах, это как-то связано с возможностью использовать это приложение без подключения к сети, в том числе в режиме полета.

Итак, вот и все — прошло 5 дней, и у нас есть приложение, готовое к программному запуску.

А второе приложение?

Сейчас я покажу вам, какой может быть прогулка в парке, так как я просто повторно использую большую часть Jet Tag.

Скажи привет приложению № 2, Cat Pat

Просто краткое описание задач:

  • Создание нового значка приложения и заставки:
    20 минут.
  • Установка нового каркаса Ionic:
    3 минуты.
  • Установите Moment.js:
    ‹ 1 минута
  • Добавление 2 новых страниц, как в Jet Tag:
    2 минуты
  • Незначительное изменение кода на основе Jet Tag:
    15 минут.

И вот оно у нас!

Завтра

Завтра будет (мягкий) день запуска!

Хроника