Это более подробная разбивка 14-часовой временной шкалы, задействованной в прототипе InboxKitten.com, и часов после доработки продукта.

Оригинальную статью о проекте см. Здесь.

Добро пожаловать! Так создается InboxKitten. У нас есть два человека, Юджин Чеа и я (Цзя Мин Тионг), которые вместе работают над созданием этого продукта.

Мы хотели разделить InboxKitten на три компонента: API, пользовательский интерфейс и интерфейс командной строки, где API будет выполнять тяжелое взаимодействие с Mailgun и пользовательским интерфейсом для нормального взаимодействия с пользователями, а также интерфейс командной строки для тех, кто может жить без пользовательского интерфейса.

Этот график рассказывается с точки зрения младшего инженера.

Начало проекта: в 0-й час

Мы начали с пользовательского интерфейса (UI) InboxKitten на клочке бумаги, чтобы знать, как InboxKitten будет использоваться пользователями.

После чернового наброска пользовательского интерфейса мы определились с тем, как мы хотим, чтобы InboxKitten выглядел, и я занялся пользовательским интерфейсом, решая, какой фреймворк использовать, а Юджин приступил к работе над структурой API.

На отметке 1-го часа

  • VueJS для пользовательского интерфейса: я научился развертывать и создавать простое веб-приложение vue с помощью инструментария vue-cli.
  • ExpressJS для API: Евгений погрузился в то, как работает Mailgun API, протестировал его на почтальоне и понял, что для большинства пакетов NPM они используются для отправки электронных писем, а не для их получения.
  • Перейти на CLI: над ним поработают позже

На отметке 2 часа

  • Евгений завершил первую версию класса mailgunReader на JS

На отметке 2,5 часа

  • Я просмотрел простую целевую страницу приложения и приступил к работе со страницей входящих

На 3-й отметке

  • Евгений создать учетную запись в Mailgun с данными кредитной карты (требуется только для пользовательских доменов)
  • Я подключил страницу почтового ящика и целевую страницу

На отметке 3,5 часа

  • Обновление до новой учетной записи Mailgun
  • Я учился использовать миксин во Vue

На отметке 4 часа

  • Евгений устранял неполадки в тестовом пакете Mailgun, письмо не приходит даже через 2 минуты

На отметке 4,5 часа

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

На пятой отметке

  • Юджин завершил полный набор тестов для `mailgunReader.js`: странная вещь происходит с именами электронной почты, использующими shortID, когда обработка через api занимает более 2 минут, но строки md5« в порядке »: yoloz, переключено на модульное тестирование с использованием md5 строки.
  • Я добавил vuescroll для пользовательского интерфейса, чтобы пакет мог позаботиться обо мне, прокручивая содержимое в div

На отметке 5,5 часа

  • Мои знания о миксинах определенно нуждаются в улучшении, я не мог этого понять :(
  • Завершенный API на ExpressJS
  • Евгений начал работать над набором инструментов CLI

Следует отметить, что хотя Mailgun имеет ключ для каждого электронного письма, для его получения мы не можем вызвать api для этого. В примере, предоставленном Mailgun, вы не сможете получить ключ, просто позвонив.

// Not working api
url = "https://api.mailgun.net/v3/domains/%s/messages/%s"

Чего не хватает, так это настроек региона. Поэтому Mailgun предоставил полный URL-адрес в ответе, когда мы перечисляем электронные письма.

Во время первоначальной реализации, когда мы извлекаем подробные сведения об электронном письме, мы вызываем URL-адрес, предоставленный Mailgun.

Однако это приводит к проблемам с безопасностью, когда злоумышленники могут изменить URL-адрес другой конечной точки для вредоносных эксплойтов с помощью нашего ключа api mailgun. Вместо того, чтобы просто проверять URL-адрес, лучше всего исправить реализацию получения отдельного электронного письма.

Следовательно, в текущей реализации пользователь будет передавать наш настраиваемый `mailKey`, который содержит регион и адрес электронной почты, предоставленные Mailgun.

<region>-<emailkey>

Затем URL-адрес сообщения будет восстановлен сервером с параметрами mailKey.

Примечание. Канал поддержки Mailgun был уведомлен о несоответствии документации: хотя в идеале я хочу получить уведомление разработчика

На шестой отметке

  • Добавлено использование магазина Vuex для отслеживания переменных.

На полпути проекта - на 7-м часу

  • Выполните рефакторинг страницы входящих сообщений, чтобы остановить обновление страницы и повторно использовать переменную в магазине.

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

На отметке 10,5 часа

  • Конечная точка в облачной функции Google работала
  • Остановился на дизайне пользовательского интерфейса (у меня это плохо получается)

На 11-й отметке

  • Добавлена ​​конфигурация для пользовательского интерфейса домена,
  • Отладка облачной функции Google, чтобы заставить ее работать

На отметке 11,5 часа

  • Отклонился от работы и рисовал кошачьи мордашки с помощью CSS

На 12-й отметке

  • Развернуто на функции Firebase Cloud на функции облака GCP
  • Скрипты тестирования пользовательского интерфейса автоматизации выполнены

Несмотря на то, что Firebase и Google Cloud Platform - это два разных продукта, они используют одну и ту же инфраструктуру. Запутанная документация затрудняла его правильную работу.

Во-первых, облачные функции будут развернуты на определенной конечной точке URL с заданным именем под URL-адресом облака Google. Это означает, что я не смогу напрямую назвать это на «inboxkitten.com/api/…»

Балансировщик нагрузки Google Cloud не может выполнять маршрутизацию к облачным функциям, и единственное решение (насколько мы выяснили) - это, по иронии судьбы, развертывание сервера балансировки нагрузки. Что вроде бы лишает смысла бессерверность.

К счастью, firebase, которая технически (а может, и нет, я запутался) является продуктом GCP. Может быть развернут без сервера, с серверной маршрутизацией firebase. Это означает, что я размещу свои статические ресурсы «inboxkitten.com» на firebase. Он может направить «/ api» в функцию. Ура. Проблема решена.

Завершение проекта - на 14-й отметке

  • API, UI и CLI работают
  • Дизайн по-прежнему ужасен.
  • Готово и развернуто: автоматическое тестирование электронной почты

Woohooo !, прототип готов!

Следующие 10 часов…

После завершения прототипа есть еще много возможностей для улучшения, уточнения того, как пользователь взаимодействует с приложением, обеспечения того, чтобы внешний вид не выглядел ужасно (с помощью дизайнера) на мобильных устройствах, и исправления существующих ошибок. Но с точки зрения функциональности пользователя: он идентичен. И в этот период времени происходит визуальная трансформация.

Уроки выучены

Мне нужно расставить приоритеты и иметь четкий набор целей для работы, иначе я обнаружу, что отклоняюсь от того, что необходимо сделать. При первом развертывании InboxKitten пользовательский интерфейс определенно нуждается в большом улучшении, но мы оставим это на потом и доработаем.

Наличие различных средств развертывания обеспечивает большую гибкость для распространения и развертывания вашего приложения. Как и InboxKitten, вы можете развернуть его на ExpressJS как сервер для локальной разработки или выбрать развертывание как бессерверное приложение на Firebase для «производства».

Бесплатные вещи, полезные в хакертоне: #NotASponor

MailGun потрясающий! Это позволяет вам получать бесплатные входящие электронные письма, а также бесплатно отправлять 10 000 писем в месяц! Если вам нужно больше, загляните на их страницу с ценами и выберите план, который вам больше всего подходит.

Что ж, интернет полон добра! Получите свой бесплатный домен от freenom.com! Вы можете просто зарегистрировать учетную запись на freenom.com и найти доменное имя по своему вкусу, и вот оно что! Ваш собственный бесплатный домен. .

Более того, Firebase позволяет нам развернуть наш API и пользовательский интерфейс как бессерверное приложение, и это лишь одна часть Firebase, в зависимости от ваших потребностей, вы можете проверить их здесь.

Наконец, Google Cloud Platform - это еще один сервис, который можно использовать для развертывания бессерверных приложений, и у него есть бессрочный бесплатный тарифный план, который вы можете использовать вместе с firebase (что сбивает с толку).

Бесплатные материалы для вас: #ShamelessSelfPromotion

[Полное раскрытие информации: я работаю на uilicious.com]

Ужасная платформа для публичного тестирования. С помощью этой платформы вы можете создать простой сценарий автоматического тестирования, чтобы проверить функциональность вашего веб-сайта и показать результаты своим друзьям по общей ссылке!

Не стесняйтесь, чтобы оставить комментарий ниже! И, кстати, скоро мы запускаем InboxKitten на Product Hunt! Вы можете подписаться на него на лендинге здесь и поддержать нас! :)