«Втишине»: Как мы создали онлайн-калькулятор с помощью Airtable, Integromat и Wappler

Мы создали сайт-калькулятор, который рассчитывает стоимость звукоизоляции и генерирует индивидуальное коммерческое предложение. И всё это, используя только ноукод-инструменты.

Когда компания “Втишине” обратилась к нам в Ratio, мы выдвинули идею, что стоит продолжить использовать сам файл шаблона для всех расчетов. А автоматизировать только все остальные процессы вокруг этого шаблона.

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

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

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

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

Мы предпочитаем работать в Integromat из-за низкой стоимости операций и большого количества интеграций.

Для работы с шаблонами и другими файлами мы решили использовать привычные и удобные сервисы от Google — Диск и Таблицы. Они входят в офисный набор Google Workspace.

Нам нужно где-то хранить данные о всех расчетах и сессиях пользователей. Мы решили использовать Airtable — самый известный ноукод-сервис для онлайн-баз. К нему легко подключаться по API, а бесплатный тариф покрывает наши нужды на первое время.

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

Поэтому решили, что пользователь будет оставлять на странице свои контакты для связи в WhatsApp или Telegram, и после генерации КП будет отправляться к нему в мессенджер через чат-бота.

Раз уж мы используем Integromat, то мы решили сделать чат-бота там же, тем более у нас довольно простой сценарий взаимодействия.

Api2pdf - простой и недорогой сервис, который позволяет нам склеивать несколько PDF в один файл.

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

Это несложные требования, но найти подходящее решение всё равно непросто. Самым бюджетным вариантом было бы создать веб-страницу на Tilda, и вставить через iframe стандартную форму Airtable. Но пользоваться такой страницей было бы неудобно.

Bubble не понравился ограничениями в плане дизайна. А Webflow — ограничениями в плане работы с записями, формами и API. Эти сервисы, конечно, можно было использовать, но хотелось что-то более гибкое и доступное. Рассматривали даже вариант создать веб-страницу с помощью фронтенд-разработчика.

Но как раз в это время мы обратили внимание на ноукод-инструмент Wappler. В нем можно верстать страницы на обычном html-css и прописывать нужную логику на фронтенде и на бэкенде сайта, а также подключаться к внешним источникам по REST API. Кроме того, код проекта с самого начала принадлежит нам и мы можем размещать его на любом подходящем сервере. Это было как раз то, что мы искали.

Итого наш стэк составил:

Если бы мы использовали исходный шаблон, то расчет и генерация КП шли бы долго. Поэтому мы сделали отдельные облегчённые файлы шаблонов для разных городов и типов поверхностей. 28 шаблонов для расчетов и ещё столько же — для генерации КП.

Все файлы шаблонов мы загрузили в Google Drive. Кроме этого, мы создали папки для хранения рабочих и временных файлов.

В Airtable мы создали 2 связанные таблицы: сессии и расчёты. Расчет — это каждый запрос на калькуляцию стоимости конкретной поверхности. Все расчеты объединяются в сессии пользователя. У каждой сессии считается суммарная стоимость всех входящих в нее расчетов.

Возможности Wappler позволили не ограничивать себя и реализовать на странице всё, что мы хотели:

В Wappler можно верстать страницу визуально, но увы, не всё можно настроить через интерфейс. Поэтому иногда мы напрямую прописывали нужные стили в css-файлах. Это уже не совсем nocode, зато страница выглядит и работает так, как нам нужно: всё адаптивно, загружается быстро, есть приятные анимации, тени и разная интерактивность.

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

Удобно, что Wappler позволяет вставлять собственный код на страницу, например сторонние скрипты. Мы, в частности, используем imaskjs для маски телефона в форме обратной связи и lite-youtube-embed для отложенной загрузки iframe с ютубом. Для вставки этих скриптов на страницу навыки программирования не потребовались — это был copy-paste.

Страница с калькулятором находится на поддомене от основного сайта, но размещена на своем отдельном сервере.

Весь сценарий работы калькулятора можно разделить на 5 этапов.

Пользователь выбирает тип поверхности, указывает ее длину и ширину и нажимает кнопку отправки. Форма исчезает и появляется спиннер. Сайт создает в Airtable две новые записи: одну в таблице сессий и другую в таблице расчетов. После этого по вебхуку запускается сценарий расчета в Integromat.

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

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

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

Сценарий создания КП сложнее сценария расчета. Сначала создается несколько таблиц по количеству типов поверхностей в сессии. В таблицы проставляются все данные о расчетах и каждая таблица сохраняется в формате PDF. Все файлы склеиваются, добавляется титульный и финальный листы. Файл сохраняется в Airtable и через бота отправляется пользователю в Telegram.

Вот во что обходится работа калькулятора:

Итого ежемесячные расходы напрямую зависят от объема посетителей. В минимальном варианте — около $20 или 1500 руб. в месяц без учета налогов и комиссий.

Nocode-инструменты по определению содержат в себе какие-то ограничения.

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

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

А у Airtable есть ограничение, которое усложняет внешние интеграции — можно отправлять не более 5 запросов в секунду к одной базе. И хотя пока наш проект не страдает от этого, но потом возможно придется как-то оптимизироваться.

Как вариант, можно создать свою базу данных в Wappler и тем самым совсем отказаться от Airtable. Также, можно и все сценарии в Integromat заменить на аналогичные сценарии на самом сайте. Это потребует затрат на переход, но позволит сэкономить в перспективе и не волноваться об ограничениях.

Проект был запущен 1 июля. Для привлечения трафика принципиально пока использовался только один инструмент — оптимизированная (тестовая) рекламная кампания в Яндекс Директ. Кроме этого, ссылка на проект есть и с главного сайта компании.

За месяц страницу посетили 620 пользователей. 280 из них сделали хотя бы один расчёт стоимости поверхности. Всего выполнено 300 расчетов.

При этом мало кто обращался к Telegram-боту, что говорит о неэффективности этого способа общения для привлекаемой аудитории. Скоро ему на замену придет WhatsApp-бот. Ну а пока мы добавили возможность для всех желающих генерировать и скачивать КП прямо на сайте.

Оценить результат вы можете на самом сайте Калькулятора.

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

Открытием для нас на этом проекте стал ноукод-инструмент Wappler, который позволяет собрать отличный фронтенд, а на перспективу может и заменить другие ноукод-инструменты, к которым мы привыкли, вроде Airtable или Integromat.

Ниша бюджетной и быстрой разработки в стиле nocode активно развивается, поэтому самое время оценить ее преимущества. Если у вас есть интересный проект, и вы хотите обсудить его, пишите нам на https://t.me/realratio.

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

#ноукод #nocode #зерокод #zerocode #airtable #integromat #wappler