Иногда вместо работы над проектами нужно создать что-то своё, что в итоге упростит жизнь не только тебе и твоей команде, но и огромному сообществу разработчиков. Так у нас и получилось, когда тимлид Юра придумал Debug Mail. Мы запустили собственный сервис.

Что такое Debug Mail

Это виртуальный SMTP-сервер для тестирования почтовых рассылок при разработке сайтов, приложений. Когда разработчики делают проекты, у них возникает необходимость отправлять разные сервисные e-mail и смотреть, нормально ли они отправляются, корректно ли отображаются, что случается при нажатии той или иной кнопки на сайте или в почте.

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

Как работает сервис

Сервис предоставляет командный доступ к виртуальному SMTP-серверу, который перехватывает и хранит тестовые рассылки. Адреса отправителя и получателя могут быть любыми, так как реальной отправки писем не происходит.

При создании проекта пользователь получает параметры подключения к smtp-серверу и login/password. На основе этих данных сервер определяет, к какому проекту относится то или иное полученное письмо.

Технология, используемая разработчиками приложения, не имеет значения, сервис будет работать с PHP, Python, Ruby, Node.js, .NET и так далее.

Функциональность

После нажатия на письмо отображается подробная информация о нём. Первая вкладка содержит email адреса отправителя и получателя, все заголовки письма, прямую ссылку на письмо. Вкладка Html содержит отрендеренный HTML контент (если он задан, иначе вкладка не активна).

Также есть ссылка, которая запрашивает short-link для прямой ссылки на письмо:

Вкладка Plain отображает исходное, нераспарсенное письмо:

Возможность совместного доступа

Возможность командного доступа — главная особенность сервиса. Чтобы посмотреть, как будут выглядеть сервисные и другие рассылки, достаточно подключить нужных пользователей к проекту в Debug Mail, и они увидят все то же самое, что и разработчик, который тестирует отправку писем.

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

Что можно делать в Debug Mail

  • При тестировании отправлять письма не реальным пользователям и не на существующие адреса.
  • Решать проблемы с настройкой email-рассылок совместно с коллегами при командном доступе.
  • В сервисе могут работать несколько разработчиков на staging-сервере.

Отличительные особенности сервиса

Его не нужно устанавливать на компьютер. Вы получаете доступ в личный кабинет с любого устройства.

Польза для работы тестировщика. Если в письме ошибка — тестировщик легко получит на него прямую ссылку и отправит ошибку в баг-трекер.

  1. Удобство для дизайнеров. Если есть какая-то ошибка в дизайне письма, можно добавить к нему комментарии через сервис coment.me. Это делается в один клик.
  2. Быстрый поиск сообщений, группировка по заголовку и дате получения.
  3. Просмотр заголовков, html, text, plain-версий письма.
  4. А ещё можно показать письмо по прямой ссылке кому-то не приглашенному в проект, если есть необходимость.

Процесс разработки

Первую версию Юра придумал и запустил за 3 месяца в далеком 2012 году.

Подробно о бэкенд-разработке сервиса он рассказал в своём блоге. Опишу здесь ключевые моменты процесса.

Технологический стек и рабочее окружение

Backend сервиса состоит из трёх основных компонентов, которые можно запускать отдельно и масштабировать.

  • SMTP-сервер, который сохраняет все полученные письма и умеет отличать проект, к которому относится письмо.
  • REST Api, который позволяет выполнять операции по работе с проектами, пользователями и письмами.
  • Сервер для поддержки real-time обновлений при получении новых писем.

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

Дизайн и проектирование

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

Дизайн сделали за месяц. Дизайнер Саша Резанов, который тогда работал над проектом, сделал невозможное — создал такой внешний вид Debug Mail, в который буквально влюбились все пользователи. Мы получили очень много положительной обратной связи именно за простоту использования и функциональный внешний вид нашего сервиса.

Так выглядит основная страница сервиса в личном кабинете пользователя

Фронтенд

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

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

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

В итоге нам удалось пойти на компромисс с дизайнером и оставить выпадашку в том виде, в каком он планировал, а границы сделали непрозрачными.

Результат

Мы сами занимались продвижением сервиса, при этом не вкладывая огромные деньги в маркетинг. Все, что мы сделали — лендинг о сервисе с предложением оставить эмейл, если сервис заинтересовал. Мы получили 100 эмейлов и сделали по ним рассылку, когда выкатили сервис.

Сервисом пользуется 7 тысяч человек. Наши клиенты — крупнейшие ИТ-компании, Tech Media (ex. Тематические Медиа) и разработчики, которым наш сервис оказался полезен. Множество положительных отзывов от пользователей нашего продукта это доказывает.