AppMaster.io Blog Ru

Настройка модуля Custom SMTP

Модуль «Custom SMTP» добавляет основные настройки, позволяющие отправлять электронные письма прямо из вашего приложения. 
Чтобы в приложении появилась форма отправки писем, вам нужно добавить недостающие настройки и необходимые элементы. Алгоритм действий будет таким:

  1. Добавить страницу или окно, где будет находиться форма письма. 
  2. Подключить модуль, добавить в него параметры SMTP сервера, а также ваш логин и пароль.
  3. Создать связанные с модулем бизнес-процесс, эндпоинт и форму.
Покажем, как это сделать в веб-приложении на примере почтового сервиса Gmail. 


Создание страницы


Зайдите в редактор и создайте новую страницу, с которой вы будете отправлять сообщения. Укажите название вашей страницы («Title»), ее адрес («Page URL») и группы пользователей, которые смогут отправлять сообщения («Show for groups»). Нажмите «Save».    


Сохраните изменения и перейдите в блок модулей. 



Добавление и настройка модуля


Найдите модуль «Custom SMTP» на вкладке «Marketplace» и нажмите кнопку «Install», чтобы добавить его в приложение.  


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

Справа находятся поля, которые вам нужно заполнить:

  1. В поля «Login» и «Password» ввести данные почтового ящика, с которого вы будете отправлять сообщения.
  2. Указать настройки SMTP-соединения — у каждого сервиса электронной почты они разные. По умолчанию в модуль добавлены настройки Gmail.
  3. В поле «From Name» вписать имя, которое будет отображаться у получателей ваших писем.

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

Больше информации о том, что такое модули, как их добавлять и настраивать — в нашей документации.


Не забудьте сохранить изменения.


Создание бизнес-процесса, эндпоинта и формы.


Бизнес-процесс, эндпоинт и форма — взаимосвязанные элементы, которые важно настраивать последовательно. Взаимодействуя друг с другом, они завершат настройку вашего приложения — и форма отправки сообщения появится на странице. 

Подробнее об этих элементах вы можете прочитать в нашей документации.


Бизнес-процесс


Перейдите на вкладку «Business logic» и нажмите на кнопку создания нового бизнес-процесса.


Введите название процесса (обязательно), его описание (по желанию) и нажмите кнопку «Create».


Каждый бизнес-процесс в редакторе визуально разбит на блоки — составные части, отвечающие за разные функции. При создании нового процесса в нем автоматически появляются «Start» (начало процесса) и «End» (завершение). Слева отобразятся все остальные блоки, которые вы можете добавить. 

Модуль «Custom SMTP» после установки добавил в этот список «Custom SMTP: Send Email». Чтобы включить этот блок в бизнес-процесс, перетащите его в поле редактора с помощью указателя мыши. Появится окно «Custom SMTP: Send Email», в полях которого содержатся переменные, от которых зависит содержание вашей будущей формы отправки сообщений: 

  • «subject» — тема письма;
  • «body» — поле с текстом письма;
  • «to» — адрес получателя;
  • «cc» — адрес для отправки копии;
  • «from name» — имя отправителя;
  • «bcc» — адрес для отправки скрытой копии. 
Теперь вам нужно связать «Start», «Custom SMTP: Send Email» и «End» — чтобы показать, что они составляют единый бизнес-процесс:

1.Наведите указатель мыши на поле «Start» в блоке «Start», зажмите левую клавишу мыши и проведите до поля «In» в блоке «Custom SMTP: Send Email» — между блоками образуется связь.


2.Аналогично создайте связь между полем «Out» блока «Custom SMTP: Send Email» и полем «End» блока «End»


Теперь в блоке «Start» нужно создать новые поля (переменные) и связать их с переменными в блоке «Custom SMTP: Send Email». Поля, которые вы добавите в блок «Start», отобразятся в вашей форме отправки сообщений. Представим, что копии и скрытые копии вы отправлять не будете, поэтому в блоке «Start» будут такие поля:

  • «sender» (имя отправителя) — связана с «from_name»;
  • «address» (кому отправлено) – связана с «to»;
  • «subject» (тема); — связана с «subject» (имена переменных в разных блоках могут совпадать);
  • «message» (текст письма) — связана с «body».

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


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

  • «subject», «body» и «from_name» — типа «String»,
  • «to», «cc» и «bcc» —типа «Email Array». 



Создание переменных


Чтобы создать первую переменную в блоке «Start», кликните на него — отобразится список (пока он пуст). Нажмите на «+».


В открывшемся окне введите название переменной: имя «sender», тип «String». Нажмите «Create».


Аналогично добавьте «address», «subject» и «message». Теперь список переменных блока «Start» выглядит так:


Свяжите их с соответствующими переменными блока «Custom SMTP: Send Email»:


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



Эндпоинт


Кликните «Create endpoint»  — вы окажетесь в настройках на вкладке «Business Logic», тут вам нужно указать такие настройки:

  • «Endpoint route» — название эндпоинта, по которому вам будет понятна его функция;
  • «Endpoint Groups» — имя группы, в которой он будет находиться;
  • «Request type» — выберите «POST»;
  • «Business Process» — выберите созданный вами бизнес-процесс send_email.

Затем перейдите на вкладку «Middleware».


На вкладке «Middleware» вам нужно настроить права на выполнение действий с этим эндпоинтом (а значит, и запуск связанного с ним бизнес-процесса). Иными словами, вы укажете, кто может отправлять письма из вашего приложения. Для этого вам нужно изменить настройку токена авторизации «Token Auth».

Внимание! Если эту настройку не изменить, то права на отправку писем будут у всех пользователей!

Нажмите на значок шестеренки напротив «Token Auth». В открывшемся окне включите селектор, в поле «Allowed groups» выберите группу «Admins» (или любую другую, которой хотите дать доступ). Нажмите «Save»


Теперь сохраните эндпоинт, нажав «Create».


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


Форма


Чтобы создать форму, вернитесь в редактор веб-приложений, на ранее созданную вами вкладку. Перетащите элемент «Form» на холст страницы.


В открывшемся окне нажмите «Create record», в поле «Save Record to» отобразится список доступных эндпоинтов — выберите тот, который только что создали. Нажмите «Assign».


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


На вкладке «Look&Feel» введите заголовок формы в поле «Title». Здесь же можно изменить ее внешний вид и увидеть имя, под которым она записана в настройках.


На вкладке «Data» — информация о режиме работы формы и эндпоинте. Также тут можно менять расположение полей, перемещая их относительно друг друга.


Расставьте поля в логичном порядке: «Sender» (отправитель), «Address» (адрес получателя), «Subject» (тема письма), «Message» (текст сообщения). Чтобы изменить детальные настройки каждого поля (например, его название) — кликните на значок шестеренки рядом с ним. Чтобы сохранить изменения, нажмите «Save».



Добавление кнопки для формы


Для того, чтобы форма работала, нужно добавить кнопку подтверждения отправки. Используйте элемент «Button» — перетащите его указателем мыши в область под формой.


Откройте настройки кнопки, кликнув по ней. На вкладке «Look&Feel» измените поля «Label» (название кнопки, которое будет видно в приложении) и «Name» (имя, которое будет отображаться в настройках).


На вкладке «Triggers» добавьте действие к триггеру onClick: в поле «Target» выберите вашу форму, в поле «Action» выберите «Submit form». Нажмите «Save».

Наглядно о том, как настраивать кнопки и триггеры — в этой статье.


Сохранение, публикация и проверка


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


Введите данные для отправки сообщения. Если оставите поле отправителя пустым — автоматически добавится имя, которое вы ввели в настройках модуля. Отправьте тестовое сообщение на любой электронный адрес, к которому у вас есть доступ.


После отправки должно появиться подтверждающее сообщение, а письмо с указанными данными появится у адресата в папке «Входящие». 

Если вы все сделали по инструкции, но вместо подтверждения выходит ошибка или письмо попадает в папку «Спам» — напишите в телеграм-канал нашей техподдержки