Разработчики — разработчикам: виртуальный почтовый сервер

May 02 2023

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

Что такое Debug Mail
Как работает сервис
Функциональность
Возможность совместного доступа
Что можно делать в Debug Mail
Отличительные особенности сервиса
Процесс разработки
Технологический стек и рабочее окружение
Дизайн и проектирование
Фронтенд
Результат

Что такое Debug Mail

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

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

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

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

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

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

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

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

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

Создание короткой ссылки для быстрого доступа к письму.

Вкладка Plain (Обычное) отображает исходное нераспарсенное письмо.

В Debug Mail всегда есть доступ к исходному письму.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фронтенд

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

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

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

Дизайн выпадающего меню с непрозрачной скругленной границей блока.

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

Результат

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

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

Узнайте, сколько стоит разработка сервиса Debug Mail в WB—Tech.

Автор статьи
Кирилл Гришанин
Последние 10 лет руковожу командой аналитиков, дизайнеров и разработчиков

Подпишитесь на блог WB—Tech

Никакого спама, только анонсы новых статей

    Последние статьи

    Что такое Zapier? – «Клей для тысяч приложений» 

    Zapier — это no-code платформа, которая помогает компаниям объединять приложения, создавая автоматические цепочки событий. Ключевое преимущество сервиса — зерокодинг: работа с ним не требует навыков программирования. А технология drag-and-drop и обширная библиотека готовых интеграций, делают Zapier едва ли не самым популярным решением для малого бизнеса, и, в общем, для всех, кто не знаком с разработкой, но желает автоматизировать однотипные задачи.

    Как работает Zapier и чем он может вам помочь 

    Чаще всего сервис используется для автоматизации повторяющихся действий, требующих последовательной коммутации различных приложений по принципу «если/то». Такой подход позволяет оптимизировать рабочие процессы, например, копирование с переносом данных, исключив присутствие человека.

    Популярные модели использования Zapier:

    • автоматизация ответов на электронные письма;
    • подключение чат-ботов (продажи, консультации, техподдержка);
    • организация рассылки, сбор и синхронизация баз подписчиков;
    • централизованное управление онлайн-заказами; 
    • обновление электронных таблиц;
    • автопостинг в социальные сети;
    • мониторинг счетов и управление товарными каталогами;
    • создание резервных копий.

    Понять устройство сервиса будет проще, если знать, из каких элементов он состоит. Для объяснения процессов в системе используют следующие понятия:

    • zaps (запы) — автоматизированные связки (шаблоны взаимодействия) двух и более веб-приложений в рамках определенной задачи;
    • триггер — событие, инициирующее запуск процесса;
    • действие (action) — задача, которая стартует после активации триггера;
    • интеграция — любое приложение, связанное через Zapier.

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

    По сути: интерфейс Zapier — это подготовленная среда для создания сценариев и запов разной длины и сложности. Каждый из них включает триггер («если произойдет…») и действие («…то сделай…»). Скажем, при добавлении новой карточки в Trello, система будет автоматически фиксировать событие в календаре Google. 

    Пример интерфейса Zapier создания сценариев и запов разной длины и сложности

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

    В рамках запа можно настроить поиск и отправку писем в Gmail, подключить автоматическое форматирование данных (чисел, текста, CSV-файлов), указать условия активации избранных сценариев при определенных условиях, установить временной интервал запуска задач и приоритет событий.

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

    Преимущества и недостатки Zapier

    Сочетание функциональности и технической доступности, делает Zapier одним из наиболее актуальных средств автоматизации бизнеса и позволяет на равных конкурировать с такими платформами, как Integromat, IFTTT, Boomi, N8N. 

    Причины популярности Zapier

    • Большая база приложений — в экосистеме сервиса свыше 7 тысяч интеграций для автоматизации производительности, маркетинга, продаж, поддержки клиентов.
    • Линейный интерфейс с механизмом drag-and-drop дает возможность технически неподготовленным пользователям конструировать любые по масштабу и сложности сценарии, легко управляя трафиком данных между платформами.
    Причины популярности Запер
    • Гибкость настроек: сервис учитывает потребности всех аудиторий, предлагая разные по функциональности решения как новичкам, так и продвинутым разработчикам, последним открыт доступ к мощному API.
    • Инструменты визуализации и совместный доступ помогают наглядно схематизировать рабочие процессы, упрощая восприятие и делая понятными всем членам команды.
    • Искусственный интеллект — новое направление в развитии Zapier. Поддержка ИИ бесшовно встроена в каждый продукт платформы, расширяя возможности администратора за счет оптимизации скорости и точности решений.
    • Удобная модель ценообразования, в основе которой плавное повышение лимитов с оплатой за фактическое количество задач. Готовые пакеты функций для частных пользователей и предприятий.

    Ошибки и тонкие места: на что обратить внимание

    Как и всякой большой системе, местами, Zapier не хватает стабильности. Согласно недавнему отчету компании, 28% пользователей минимум раз в неделю сталкиваются с проблемами.

    По статистике чаще всего клиенты жалуются на ошибки 400 (уровень сервиса) и 500 (уровень приложения). 

    Коды «популярных» ошибок Zapier 

    • 400 «Неверный запрос»: принимающее приложение не может обработать структуру данных из Zapier. Перепроверьте настройки полей шага Zap.
    • 401 «Неавторизованно»: повторно авторизуйте приложение; учетные данные устарели или срок действия токена истек.
    • 403 «Запрещено»: вашему уровню доступа не хватает необходимых разрешений в интегрированном приложении или наборе данных. По возможности обновите приложение.
    • 404 «Не найдено»: элемент, на который воздействует шаг Zap, не был найден в приложении назначения. Проверьте, не удалены ли записи, не потеряны ли связи между идентификаторами. При возможности восстановите или создайте запись заново.
    • 503 «Сервис недоступен»: приложение-адресат не работает или работает с перебоями/сниженной производительностью. Проверьте страницу состояния и обратитесь в службу поддержки, если проблема не устранена.
    • 504 «Превышено время ожидания шлюза»: приложению потребовалось слишком много времени (30–60 секунд), чтобы ответить на запрос серверов Zapier. Повторите попытку позже или обратитесь в службу поддержки для проверки производительности.
    коды популярных ошибок Запер

    Если самостоятельные попытки исправить ситуацию с ошибкой 400 неэффективны, рекомендуем обращаться в техническую службу Zapier, если проблема обозначена кодом 500, к администраторам приложения.

    Практика показывает, что значительная часть сбоев, как правило, вызвана ошибками самих пользователей при настройке Zaps или попытками интеграций нестандартных/«сырых» сервисов и сложных сценариев. Например, платформа автоматически будет ограничивать количество логических развилок, если их больше пяти. 

    Также возможны задержки в выполнении операций при слишком большом объеме информации: в отличие от аналогов, того же Integromat, Zapier обрабатывает данные последовательно, а не параллельно — это здорово тормозит процесс.

    Эрго: решению большинства проблем помогут внимательность, регулярный аудит ошибок и своевременное обновление инструментов. В особенно тяжелых случаях обращайтесь в техподдержку или сообщество Zapier.

    Кейсы успешных интеграций

    Чем на практике возможности сервиса могут помочь бизнесу? Мы собрали несколько примеров из общей и собственной практики.

    • Автоматическое создание задач в интерфейсах CPM-систем типа Trello, Asana, KanbanFlow, Todoist, Jira, при получении нового письма в Gmail, заполнении клиентом формы, помещении товара в корзину и т. д.
    • Оптимизация взаимодействия с клиентами при помощи ИИ: подключение бота через Push to Zapier экономит массу времени. Машина сама соберет целевые запросы вашей аудитории по всем каналам, отфильтрует и направит к нужному сотруднику. 
    • Оперативное оповещение клиентов о статусе обращения, покупки. Например, автоматическое уведомление на email или в мессенджер о передаче заявки персональному менеджеру, поступлении товара на склад или отправке. 
    • Создание воркфлоу, в котором происходит непрерывный парсинг контактов на заданных платформах с последующей email-рассылкой. Полученные ответы также автоматически передаются в CRM с параллельным сообщением ответственному специалисту.
    Как интегрировать запер
    • Автопостинг в рамках SMM-продвижения. Zapier позволяет настроить режим публикаций так, что каждый новый пост будет появляться в целевых социальных сетях одновременно или с заданным интервалом. 
    • Распределение и синхронизация данных по HR-базам компании. При помощи Zapier-автоматизаций можно создать правила для всех приложений компании, при которых изменения в профиле сотрудника тут же дублируется в связанных сервисах.
    • Контроль процессов. Интеграция инструментов Zapier упрощает менеджмент команды. Например, если создать Zap для автоматического сохранения файлов из рабочих программ персонала в общее хранилище, с рассылкой уведомлений об изменениях на канбан-панель или в корпоративный мессенджер, то руководитель проекта в режиме реального времени сможет наблюдать за прогрессом. 

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

    Пошаговое руководство по созданию учетной записи и настройке первого Zap

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

    Настраиваем первый Zap

    Шаг 1: Создание учетной записи:

    • перейдите на сайт Zapier и нажмите «Зарегистрироваться»;
    • введите адрес электронной почты, создайте пароль или зарегистрируйтесь, используя учетную запись Google или Microsoft;
    • подтвердите адрес электронной почты, нажав на ссылку, отправленную на ваш почтовый ящик.

    Шаг 2: Настройка Zap

    Есть два способа. Первый — с помощью карты автоматизации рабочих процессов, где вы можете настроить триггеры и действия между приложениями. Вот пример настройки простого Zap между Gmail и Trello:

    • после входа в систему нажмите на кнопку «Создать Zap»;
    • выберите Gmail в качестве приложения-триггера;
    • выберите «Новое электронное письмо» в качестве триггерного события;
    • подключите свое приложение Trigger, выполнив процедуру OAuth и предоставив необходимые разрешения;
    • выберите Trello в качестве приложения для действий;
    • выберите действие «Создать карточку»;
    • подключите приложение Action, аналогичное процессу приложения Trigger;
    • настройте действие, сопоставив информацию из приложения-триггера (например, тему электронного письма с заголовком карточки Trello);
    • протестируйте получившийся Zap, чтобы убедиться, что он работает правильно, затем включите его.

    Второй способ — привлечь Copilot, ИИ-помощника Zapier. Это — робот, который помогает создавать Zap от начала до конца, предлагая нужные приложения, триггеры и действия. 

    Copilot ИИ-помощник Запер

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

    Сколько стоит

    Стоимость Zapier, как уже говорилось, легко трансформируется в обе стороны в зависимости от динамики использования. 

    Сервис предлагает четыре категории инструментов:

    • zaps
    • таблицы;
    • интерфейсы;
    • чат-боты.

    Каждая из категорий, в свою очередь, содержит несколько готовых пакетов, рассчитанных на определенный уровень задач:

    • бесплатный;
    • профессиональный;
    • командный;
    • для организаций (доступен только для Zaps).

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

    У него есть лимит — 750 задач, 2 чат-бота, 2 интерфейса и 5 таблиц в месяц, но нет ограничений по количеству Zaps и присутствует возможность создания двухэтапных команд. Словом, достаточно, чтобы понять суть технологии и потенциал сервиса без вложений.

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

    Например:

    • тариф «Профессиональный» позволяет создавать уже многоступенчатые запы с неограниченным количеством избранных приложений;
    • «Командный» подразумевает расширенный доступ к настройкам нескольких администраторов и общие рабочие пространства;
    • «Предприятие» дает высший уровень безопасности, выделенный аккаунт, и персонального менеджера.

    Большинству частных клиентов, представляющих малый бизнес, будет достаточно начального тарифа «Профессиональный» (от 29,99$), крупным компаниям и масштабным проектам, вероятно, понадобится «Командный» (от 103,50$), а для корпоративных нужд лучше использовать Enterprise — пакет с максимальным техническим оснащением, расширенными правами администратора и доступом ко всем актуальным решениям платформы.

    Детально узнать о каждом тарифе и выбрать подходящий можно здесь.

    Вывод

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

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

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

    Где и как найти хорошего программиста: особенности поиска разработчиков

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

    Code Review — зачем и как использовать в команде

    Что такое Code Review и зачем это нужно. Как проводят проверку программного кода: кто его проводит, какие инструменты используют. Преимущества и недостатки код-ревью.

    ИП Гришанин Кирилл Олегович
    ИНН 774313842609

    Коворкинг Starthub

    Б. Новодмитровская ул., 36, стр. 12, вход 6,
    Москва, Россия, 127015

    Коворкинг Wework

    Ahad Ha'am 54,Tel Aviv-Yafo,Израиль

    © 2023 WB—Tech. Мы разрабатываем уникальные решения для компаний из России, США и Европы.