На грани no-code: как я интегрирую сложные сервисы в конструкторы сайтов на примере Tilda

Любой no-code инструмент похож на конструктор Lego (Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Funsplash.com%2Fphotos%2Fyellow-red-blue-and-green-lego-blocks-kn-UmDZQDjM&postId=1555219" rel="nofollow noreferrer noopener" target="_blank">Xavi Cabrera</a>)
Любой no-code инструмент похож на конструктор Lego (Источник: Xavi Cabrera)

Привет, меня зовут Алексей и я уже достаточно долгое время занимаюсь фулстек веб-разработкой. Это значит, что помимо создания интерфейса для сайтов я также реализую бизнес логику, которая находится, можно так сказать, «за кулисами» — на сервере.

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

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

Примеры no-code инструментов

Существуют разные виды инструментов в зависимости от задачи, которую они решают:

Конструкторы сайтов

Webflow, Wix, Tilda и т.п. — все это конструкторы, которые позволяют создать сайт без программирования.

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

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

Вот так происходит верстка страницы в Webflow (Источник: Webflow)

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

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

Вот так выглядит процесс верстки в Zero-блоке (Источник: Tilda Publishing)

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

Однако ключевой особенностью любого no-code инструмента является наличие интеграций со сторонними сервисами, такими как:

  • Платежные системамы (Stripe, PayPal, ЮКасса, Робокасса и т.д.)
  • Способы доставки (Boxberry, СДЭК для РФ)
  • Email-рассылками (SendGrid, Mailchip, Unisender и другие)
  • CRM пользователя (1С, МойСклад, AmoCrm и прочие)

Конечно в Tilda, как и в любом другом конструкторе подобные интеграции есть. Однако в это же время ахиллесовой пятой всех no-code платформ является то, что их функционал ограничен этими готовыми интеграциями.

На помощь приходят вебхуки — сигналы, которые no-code инструмент может отправлять когда происходит какое-либо событие. Часто это отправка формы (новый лид), создание заказа и т.п.

При наступлении определенного события no-code инструмент может отправить сигнал в другой сервис, который сможет обработать это событие и что-то сделать с полученными данными.

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

Популярные no-code сервисы для автоматизации: Zapier, IFTTT, Make и многие другие — их действительно много.

Подобные сервисы представляют собой набор готовых интеграций, часто порядка десятков или даже сотен сервисов, таких как Google Sheets, Airtable, Twilio, Telegram и более общих протоколов, таких как HTTP, получение E-Mail или вебхуки.

Некоторые интеграции, доступные в <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.make.com%2Fen%2Fintegrations&postId=1555219" rel="nofollow noreferrer noopener" target="_blank">Make</a>
Некоторые интеграции, доступные в Make

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

Пример схемы прохождения сигнала с разветвлением в Make (Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmedium.com%2Fschool-of-content%2Fhow-to-automate-content-creation-with-airtable-make-com-and-openais-api-4b84268c1d33&postId=1555219" rel="nofollow noreferrer noopener" target="_blank">Andreea Macoveiciuc</a>)
Пример схемы прохождения сигнала с разветвлением в Make (Источник: Andreea Macoveiciuc)

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

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

Пример собственной программы в Make из 3 строк кода (вмещается только 2)
Пример собственной программы в Make из 3 строк кода (вмещается только 2)

У Zapier дела обстоят немного лучше — у них есть возможность выполнять собственный JavaScript код из коробки и они даже подсвечивают синтаксис. Однако даже в этом случае среда выполнения очень ограничена по сравнению с собственной программой. Поэтому создать уникальную интеграцию с помощью кода может быть затруднительно.

"К сожалению, вы не можете использовать внешние библиотеки" — <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fhelp.zapier.com%2Fhc%2Fen-us%2Farticles%2F8495980256141-Common-Problems-with-Code-Javascript-on-Zapier%23h_01J7193ADCMVWD4GK99QAWX444&postId=1555219" rel="nofollow noreferrer noopener" target="_blank">Zapier</a>
"К сожалению, вы не можете использовать внешние библиотеки" — Zapier

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

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

На помощь приходит "Облако"

Ваш компьютер тоже своего рода облако
Ваш компьютер тоже своего рода облако

На самом деле для таких вещей сейчас есть еще один вариант — это облачные функции. Возможно вы слышали про AWS, Google Cloud, Azure Cloud, Yandex Cloud. Это облачные провайдеры, которые предоставляют инфрастуктуру для вычислений как сервис (Infrastructure as a Service / IaaS). То есть вы можете арендовать вычислительные мощности и запускать на них все, что угодно.

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

Звучит круто, в чем подвох?

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

Все это вместе с неочевидными подводными камнями serverless подхода выливается в то, что на практике это примерно то же самое, что арендовать сервер. Только теперь вам еще нужно будет объяснять клиенту в каком магическом облаке будет жить его приложение (облачные фукнции как правило распределены сразу по множеству дата-центов).

Поэтому сейчас пока что я остановился на том, что для интеграций своих клиентов поднимаю самый дешевый виртуальный сервер и устанавливаю свою интеграцию на него. После этого уже подключаю no-code решение к этому серверу. Благодаря этому у меня остается высокая гибкость вместе с преимуществами no-code инструментов.

Буду рад услышать ваше мнение: какими no-code инструментами вы пользуетесь, какие задачи решаете с их помощью и как справляетесь с интеграцией сервисов, которых нет в виде готовых блоков?

Также приглашаю вас в свой блог «Код без тайн», где я пишу о веб-разработке, информатике и технологиях, которые меня вдохновляют.

22
1 комментарий

Тоже часто сталкиваюсь с вопросами интеграции сторонних сервисов в no-code платформы. Иногда достаточно стандартных инструментов конструктора, чтобы всё заработало, но если нужны нестандартные решения, вебхуки или API спасают. Главное — заранее продумать, какие именно данные и функции нужны для конкретного проекта, чтобы не усложнять процесс. Одному из своих клиентов подключал недавно платежный сервис Робокасса на Тильде, всё получилось сделать через стандартные инструменты конструктора без сложностей.

От стартапов до корпораций: новая эпоха разработки с No-code и Low-code
От стартапов до корпораций: новая эпоха разработки с No-code и Low-code

Сегодня подходы no-code и low-code открывают возможности разработки даже для тех, кто далёк от написания кода.

11
реклама
разместить
Гайд по AI-инструментам для разработки: что выбрать новичку?

Если вы только знакомитесь с миром AI-инструментов для разработки (Cursor, Bolt.new, Windsurf, Loveable, V0, Replit), этот пост поможет разобраться в их особенностях.

Как правильно и красиво поставить человека на место

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

Как правильно и красиво поставить человека на место
Как интеграторы могут экономить время с помощью low-code платформ

Как это бывает: то CRM с ERP надо подружить, то данные из одной системы в другую перекинуть, то какой-то процесс автоматизировать. И всё это обычно упирается в код, разработчиков и кучу времени.

Как интеграторы могут экономить время с помощью low-code платформ
11
Найм после 40 лет. Есть ли шанс найти работу?

Недавно понял, что инстинктивно пропускаю анкеты тех, кому 40+. Хотя сам давно старик. Со слов HR проблема частая.
Можно обсуждать причины, но факт есть факт. Что делать?

Найм после 40 лет. Есть ли шанс найти работу?
3030
1212
44
33
11
Да можешь дальше игнорить анкеты 40+ С текущей ситуацией на рынке труда просто не найдешь себе сотрудника. Прошли те времена, когда зажратый наниматель брал только от 20 до 25, с "горящими глазами", потому что "очередь за забором"
Neuralink начала искать добровольцев для вживления нейрочипов по всему миру
1212
11
Это здорово.
Китай введёт ответную пошлину в 34% на весь американский импорт

Она начнёт действовать с 10 апреля 2025 года.

Магазины Apple и Nike в Пекине, фото AP
1010
33
Я думаю, что американцам пора его уже импичить, а то за 4 года успееет наломать. Товарищ совсем без тормозов.
«Яндекс» добавил на главную страницу поиска сервис «Ритм» с контентом от брендов и магазинов

По мнению компании, это поможет им получить дополнительный трафик.

Так теперь выглядит главная страница поиска. Скриншот vc.ru
77
55
Amazon добавила в «читалки» Kindle функцию ИИ-пересказа книг

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

33
22