В этом уроке подробно разберемся с тем, как можно выполнить интеграцию 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.

Was this article helpful?

AppMaster.io 101 Полный курс

10 модулей
2 недели

Не знаете с чего начать? Начните с нашего ускоренного курса для начинающих и изучите AppMaster от А до Я.

Начать обучение
Development it’s so easy with AppMaster!

Остались вопросы?

Наши эксперты с радостью ответят на все ваши вопросы о платформе AppMaster и помогут вам в создании приложений.

headphones

Служба поддержки

Поделитесь своей проблемой с нашими специалистами.

message

Комьюнити AppMaster

Обсудите вопросы с другими пользователями в нашем чате.

Присоединиться