Создание 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 минут.
И вот оно у нас!
Завтра
Завтра будет (мягкий) день запуска!