В этом уроке подробно разберемся с тем, как можно выполнить интеграцию Tilda и AppMaster. Предположим, что в Tilda создана некая форма и наша задача заключается в том, чтобы данные при ее заполнении поступали в AppMaster, обрабатывались там и сохранялись в базе данных.
Создание вебхука в AppMaster
Отправку данных на сторонние сервисы Tilda осуществляет по вебхуку. Поэтому стоит начать именно с создания необходимого вебхука и в первую очередь подготовить бизнес-процесс для его работы.
Особенностью данного процесса является то, что заранее неизвестно, какие точно данные будут получены. Вебхук будет работать с “сырыми” запросами, которые необходимо правильно обработать. Для этого воспользуемся блоком Get Request Body. Посмотрим, какие данные вообще приходят от Тильды, преобразуем их в String, запишем в лог и выведем в ответе на запрос.
В разделе эндпойнтов сразу же создадим новый вебхук. Важно отметить, что тип запроса должен быть Raw, ведь у него нет каких-то жестко установленных входных параметров и он готов принимать любые данные. Также обязательно нужно отключить Middleware Token Auth, ведь для заполнения формы в Тильде не нужно проходить авторизацию в AppMaster и отправка данных открыта для всех.
Создание формы Tilda
Следующий шаг - подключение созданного вебхука в Тильде. Для этого в настройках форм сайта достаточно указать URL, хотя, при необходимости, можно воспользоваться и дополнительными опциями. Например, для дополнительной защиты, передавать еще и специальный ключ, в теле запроса или в заголовке.
Если все было сделано правильно, то появится соответствующее сообщение с возможностью сразу же привязать данный вебхук ко всем формам на сайте.
Остается лишь опубликовать страницу с формой и проверить ее в деле.
Открыв логи AppMaster можно убедиться в том, что данные с формы действительно были получены.
Message: “Email=test%40gmail.com&Name=John+Smith&Phone=%2B1-202-202-22-22&Comments=Hello%2C+world%21%0AThis+is+my+comment&tranid=6355139%3A3971256761&formid=form513738662”
Можно увидеть всю информацию, заполненную в форме. При этом становится понятно, что данные поступают в формате x-www-form-urlencoded, соответственно их можно обрабатывать уже не как набор сырых данных, а как совокупность отдельных полей.
Модель базы данных AppMaster
Остается лишь сделать правильный обработчик. И начать лучше всего с модели базы данных, где вся информация будет храниться.
Для стандартной формы достаточно простой модели с 4 полями:
- Email (String)
- Name (String)
- Phone (String)
- Comments (Text)
Далее необходимо вернутся к созданному бизнес-процессу и изменить его с учетом полученной информации о составе запроса.
В качестве входных параметров будут использоваться названия полей из заполняемой таблицы. Данные из них будут использоваться для создания модели (Make Tilda) с последующей записью в базу данных (DB: Create Tilda).
Последнее, что необходимо сделать - изменить ранее созданный эндпойнт для вебхука. Мы знаем формат поступающих данных и обрабатываем их, поэтому Request payload type должен быть Form. При этом нужно сопоставить параметры, созданные в бизнес-процессе с точными названиями полей из заполненной формы (видели их в логах, когда получали данные из запроса в сыром виде). В данном примере они практически одинаковы, но отличаются регистром первого символа.
Теперь можно опубликовать созданное приложение и испытать его в деле. Если повторить заполнение и отправку формы в Tilda, то данные будут отправлены в AppMaster, записаны в базу данных и в этом можно убедиться с помощью Swagger.
