Это более подробная разбивка 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! Вы можете подписаться на него на лендинге здесь и поддержать нас! :)