Мы создали сайт-калькулятор, который рассчитывает стоимость звукоизоляции и генерирует индивидуальное коммерческое предложение. И всё это, используя только ноукод-инструменты.
Как возникла задача
Наша компания «Втишине» занимается установкой звукоизоляции в квартирах и других помещениях. Компания работает в 4-х городах и имеет большой ассортимент разных типов звукоизоляционных решений.
Когда к нам обращается потенциальный клиент, важно быстро подготовить индивидуальное коммерческое предложение (КП) в рамках первого звонка.
Для этого у компании есть универсальный шаблон КП. Это большой табличный файл, в котором учитываются все типы звукоизоляции и цены для каждого города. В шаблон вписываются размеры поверхностей и автоматически рассчитываются три варианта стоимости. Затем таблица сохраняется в PDF-файл — и КП для клиента готово!Мы захотели автоматизировать этот процесс: сделать общедоступный калькулятор, где можно указать параметры нужных поверхностей и получить на выходе готовое КП. Ключевая особенность такого калькулятора — это его полная идентичность нашему “карманному” расчетчику, ведь он подготавливает полноценное КП с рабочими решениями и реальной стоимостью. По факту нам нужно было, чтобы калькулятор составлял полную смету в онлайн режиме по размерам заказчика и предлагал 3 варианта решения на каждую поверхность.
Но мы не готовы были тратиться на полноценную разработку. Нам хотелось сначала проверить, насколько такой инструмент вообще будет востребованным. Поэтому мы стали смотреть в сторону ноукод-решений и в результате обратилась в компанию Ratio.
Наша идея
Когда компания “Втишине” обратилась к нам в Ratio, мы выдвинули идею, что стоит продолжить использовать сам файл шаблона для всех расчетов. А автоматизировать только все остальные процессы вокруг этого шаблона.
Уже не менеджер вручную будет копировать шаблон, подставлять туда тип, длину и ширину поверхностей и сохранять всё в формате PDF, а это будет происходить автоматически через специальный сервис.
Понятно, что скорость расчета через файл будет медленней, чем если бы мы запрограммировали эту механику с нуля. Поэтому нам нужно было проверить, что скорость будет приемлемой. За несколько часов мы создали грубый прототип и убедились, что идея работает и скорость расчета занимает не более 10 секунд, что нам подходит.
Теперь нужно было подобрать стек инструментов и убедиться, что и остальные части системы тоже можно реализовать.
Как подобрали инструменты
Integromat для автоматизации
На наш взгляд, главный инструмент в подобном проекте — это сервис автоматизации. Именно он выполняет основную обработку информации и склеивает все остальные части системы между собой.
Мы предпочитаем работать в Integromat из-за низкой стоимости операций и большого количества интеграций.
Google Workspace для онлайн-документов и хранения файлов
Для работы с шаблонами и другими файлами мы решили использовать привычные и удобные сервисы от Google — Диск и Таблицы. Они входят в офисный набор Google Workspace.
Airtable в роли базы данных
Нам нужно где-то хранить данные о всех расчетах и сессиях пользователей. Мы решили использовать Airtable — самый известный ноукод-сервис для онлайн-баз. К нему легко подключаться по API, а бесплатный тариф покрывает наши нужды на первое время.
Чат-бот в Telegram с логикой в Integromat для отправки КП
Нужно было придумать удобный способ доставки сгенерированного КП пользователю. Нам не хотелось давать PDF на скачивание прямо на странице калькулятора, потому что в таком случае мы не сохраняем контакта с клиентом. Да и генерация будет занимать некоторое время, и пользователь может за это время отвлечься и закрыть страницу.
Поэтому решили, что пользователь будет оставлять на странице свои контакты для связи в WhatsApp или Telegram, и после генерации КП будет отправляться к нему в мессенджер через чат-бота.
Раз уж мы используем Integromat, то мы решили сделать чат-бота там же, тем более у нас довольно простой сценарий взаимодействия.
Api2pdf
Api2pdf - простой и недорогой сервис, который позволяет нам склеивать несколько PDF в один файл.
Wappler для веб-страницы
И наконец нужно было определиться с тем, как будет создана веб-страница с калькулятором. На ней нам нужны блоки с контентом, форма для отправки параметров поверхности, вывод информации после расчета. И все это с приятным глазу дизайном и адаптивностью под разные устройства.
Это несложные требования, но найти подходящее решение всё равно непросто. Самым бюджетным вариантом было бы создать веб-страницу на Tilda, и вставить через iframe стандартную форму Airtable. Но пользоваться такой страницей было бы неудобно.
Bubble не понравился ограничениями в плане дизайна. А Webflow — ограничениями в плане работы с записями, формами и API. Эти сервисы, конечно, можно было использовать, но хотелось что-то более гибкое и доступное. Рассматривали даже вариант создать веб-страницу с помощью фронтенд-разработчика.
Но как раз в это время мы обратили внимание на ноукод-инструмент Wappler. В нем можно верстать страницы на обычном html-css и прописывать нужную логику на фронтенде и на бэкенде сайта, а также подключаться к внешним источникам по REST API. Кроме того, код проекта с самого начала принадлежит нам и мы можем размещать его на любом подходящем сервере. Это было как раз то, что мы искали.
Итого наш стэк составил:
- Integromat
- Google Workspace
- Airtable
- Telegram
- Api2pdf
- Wappler
Как подготовили базу и шаблоны
Если бы мы использовали исходный шаблон, то расчет и генерация КП шли бы долго. Поэтому мы сделали отдельные облегчённые файлы шаблонов для разных городов и типов поверхностей. 28 шаблонов для расчетов и ещё столько же — для генерации КП.
Все файлы шаблонов мы загрузили в Google Drive. Кроме этого, мы создали папки для хранения рабочих и временных файлов.
В Airtable мы создали 2 связанные таблицы: сессии и расчёты. Расчет — это каждый запрос на калькуляцию стоимости конкретной поверхности. Все расчеты объединяются в сессии пользователя. У каждой сессии считается суммарная стоимость всех входящих в нее расчетов.
Как сделали веб-страницу
Возможности Wappler позволили не ограничивать себя и реализовать на странице всё, что мы хотели:
- Шапка и футер, идентичные основному сайту.
- Простой контент: текст, видео, изображения.
- Айфреймы с видео, отзывами и Яндекс-картой.
- Кнопки-блоки для выбора нужного типа поверхности.
- Форма для ввода длины и ширины с проверкой допустимых значений.
- Таблица с результатами всех расчетов.
- Форма обратной связи, которая открывается в модальном окне и создает новый лид в Bitrix24.
- Инструменты аналитики: Яндекс.Метрика, Google-Аналитика, пиксели Facebook и Вконтакте.
- Определение города по IP.
- Можно переключить город, и сразу меняется связанный контент: телефон, адрес, блок с отзывами Flamp и Яндекс-карты.
В Wappler можно верстать страницу визуально, но увы, не всё можно настроить через интерфейс. Поэтому иногда мы напрямую прописывали нужные стили в css-файлах. Это уже не совсем nocode, зато страница выглядит и работает так, как нам нужно: всё адаптивно, загружается быстро, есть приятные анимации, тени и разная интерактивность.
Хоть страница и простая, но в ней много логики: вывод данных, появление и скрытие блоков, замена контента при смене города. Всё это запрограммировано через собственный встроенный фреймворк программы. Причём визуально, без написания кода вручную.
Удобно, что Wappler позволяет вставлять собственный код на страницу, например сторонние скрипты. Мы, в частности, используем imaskjs для маски телефона в форме обратной связи и lite-youtube-embed для отложенной загрузки iframe с ютубом. Для вставки этих скриптов на страницу навыки программирования не потребовались — это был copy-paste.
Страница с калькулятором находится на поддомене от основного сайта, но размещена на своем отдельном сервере.
Как происходит расчет поверхностей и генерация PDF
Весь сценарий работы калькулятора можно разделить на 5 этапов.
1. Сайт отправляет данные для расчета.
Пользователь выбирает тип поверхности, указывает ее длину и ширину и нажимает кнопку отправки. Форма исчезает и появляется спиннер. Сайт создает в Airtable две новые записи: одну в таблице сессий и другую в таблице расчетов. После этого по вебхуку запускается сценарий расчета в Integromat.
2. Integromat выполняет расчет поверхности.
В Интегромате выбирается нужный шаблон и создается его копия. Затем в файл подставляются длина и ширина и забирается итог расчета. Сумма сохраняется в Airtable. Запускается вебхук на сайте, чтобы просигнализировать, что расчет закончен.
3. После расчета данные выводятся на веб-страницу.
Когда срабатывает вебхук, на сайте исчезает спиннер и появляется таблица с результатами расчетов. Снова показываются кнопки выбора типа поверхности, чтобы пользователь мог, при желании, запустить расчет следующей поверхности.
4. Когда все поверхности добавлены и рассчитаны, пользователь может запустить генерацию КП.
При запуске сайта создать КП можно было или самому автоматически через бота в Telegram, или через обращение в чат компании. Сейчас кнопка для генерации КП доступна сразу на сайте.
5. Integromat генерирует КП в формате PDF и отправляет пользователю.
Сценарий создания КП сложнее сценария расчета. Сначала создается несколько таблиц по количеству типов поверхностей в сессии. В таблицы проставляются все данные о расчетах и каждая таблица сохраняется в формате PDF. Все файлы склеиваются, добавляется титульный и финальный листы. Файл сохраняется в Airtable и через бота отправляется пользователю в Telegram.
Стоимость сервисов
Вот во что обходится работа калькулятора:
- На бесплатном тарифе Airtable можно хранить до 1000 записей в одной таблице. Нам этого хватает, но нужно периодически подчищать таблицу от старых записей. Хотя Airtable негласно разрешает хранить больше, чем указано в тарифах.
- Integromat тратит по 13 операций на один расчет и по 37 операций на одну генерацию коммерческого предложения в PDF. Мы начали с минимального тарифа BASIC, который стоит $9 в месяц и дает 10000 операций в месяц. Если поделить их поровну, то выходит около 400 расчетов в месяц и 135 генераций КП.
- Для полноценной работы с сервисами Google в Integromat нужна платная корпоративная подписка — Google Workspace, которая стоит от $6 за пользователя. Если использовать обычный бесплатный гугл-аккаунт, то соединение с гугл-документами будет периодически отключаться, что для работающего проекта не подходит.
- Api2pdf берет по $1 каждый месяц плюс стоимость операций. Например, 100 файлов по 1 мб обойдутся чуть больше $1.
- Хостинг Digital Ocean обходится в $5 за 1 VPS-сервер в месяц.
- За Wappler оплачивается только стоимость рабочего места ноукод-специалиста каждый месяц. Но это не включено в стоимость проекта для заказчика.
Итого ежемесячные расходы напрямую зависят от объема посетителей. В минимальном варианте — около $20 или 1500 руб. в месяц без учета налогов и комиссий.
Ограничения инструментов
Nocode-инструменты по определению содержат в себе какие-то ограничения.
Например, в Integromat нельзя одновременно запустить несколько исполнений одного сценария. Каждому новому посетителю сайта пришлось бы ждать, пока другие посетители не закончат свои расчеты.
Чтобы это обойти, мы создали по несколько копий каждого сценария, и эти копии запускаются по очереди.
А у Airtable есть ограничение, которое усложняет внешние интеграции — можно отправлять не более 5 запросов в секунду к одной базе. И хотя пока наш проект не страдает от этого, но потом возможно придется как-то оптимизироваться.
Как вариант, можно создать свою базу данных в Wappler и тем самым совсем отказаться от Airtable. Также, можно и все сценарии в Integromat заменить на аналогичные сценарии на самом сайте. Это потребует затрат на переход, но позволит сэкономить в перспективе и не волноваться об ограничениях.
Результаты проекта
Проект был запущен 1 июля. Для привлечения трафика принципиально пока использовался только один инструмент — оптимизированная (тестовая) рекламная кампания в Яндекс Директ. Кроме этого, ссылка на проект есть и с главного сайта компании.
За месяц страницу посетили 620 пользователей. 280 из них сделали хотя бы один расчёт стоимости поверхности. Всего выполнено 300 расчетов.
При этом мало кто обращался к Telegram-боту, что говорит о неэффективности этого способа общения для привлекаемой аудитории. Скоро ему на замену придет WhatsApp-бот. Ну а пока мы добавили возможность для всех желающих генерировать и скачивать КП прямо на сайте.
Оценить результат вы можете на самом сайте Калькулятора.
Честно признаться, когда мы только начали работать над проектом с ребятами из Ratio, я не до конца верила в успех предложенного решения. Оно казалось топорным, состоящим из большого количества переменных и связок. А для нас было важно сделать работу калькулятора быстрой. Никто не будет долго ждать свои расчеты, ведь правда? Поэтому это стало одним из ключевых аспектов при работе. Реализация через nocode, казалось, не сможет обеспечить должной времени обработки.
Словом, вошли мы в проект с недоверием, ни к ребятам, ни к логике процессов, ни к предложенным сервисам.
С момента первых договоренностей, ребята были сильно вовлечены в задачу и предлагали несколько путей решения с дополнительными комментариями о плюсах и минусах каждого. Это стало отправной точкой для продуктивного сотрудничества и зарождения доверия к команде. Я часто веду работу с подрядчиками разных уровней и рынков, поэтому могу четко оценить качество обработки задачи, вовлечения и реализации. Николай Неустроев (именно с ним мы вели работы) покорил своим подходом и 1001 ответным сообщением на мой вопрос. Все технические аспекты решались в моменте, в краткие сроки и крайне профессионально. Проект продвигался быстро и легко менялся в моменте.
Сейчас у нас есть рабочий продукт, сделанный полностью в соответствии с нашим техническим заданием и дизайном.
Калькулятором пользуются, а значит мы достигли своей цели. Нам есть еще над чем поработать и что улучшить, но это уже совсем другая история.
На этом проекте мы убедились, что удачно подобранный набор ноукод-инструментов позволяет создать сайт и настроить автоматизацию даже без знания программирования.
Открытием для нас на этом проекте стал ноукод-инструмент Wappler, который позволяет собрать отличный фронтенд, а на перспективу может и заменить другие ноукод-инструменты, к которым мы привыкли, вроде Airtable или Integromat.
Если вы хотите такой же проект
Ниша бюджетной и быстрой разработки в стиле nocode активно развивается, поэтому самое время оценить ее преимущества. Если у вас есть интересный проект, и вы хотите обсудить его, пишите нам на https://t.me/realratio.
Если вам интересно подробней узнать о том, как был сделан проект и как он работает, мы с радостью ответим на ваши вопросы в комментариях.
Такое впечатление, что куча людей приложили кучу усилий, чтобы по сути взять хтмл страничку на ВордПресс и добавить туда немножко сервисов
Конечно, можно было бы тоже самое сделать на вордпрессе или на обычном фреймворке. И тогда были бы свои плюсы. Но в нашем случае ноукод был уместен.
В Airtable очень быстро создается база данных, к ней легко подключаться по апи и с ней сразу удобно работается менеджерам. В Integromat уже есть готовые интеграции с гугл таблицами, гугл диском и тем же эйртейблом, поэтому не нужно разбираться с апи. Поэтому сценарии в интегромате составляются легко, если понимать его логику работы. Хотя и выглядят громоздко на скринах)
Так что экономия времени все-таки была у нас.
Но главный плюс ноукода, что у него низкий порог входа по сравнению с классической разработкой. Поэтому стоимость часа работы на ноукоде обходится дешевле.
Мы в Ratio работаем и с фреймворками, и с цмс, поэтому предлагали заказчику разные варианты реализации, с разными сроками и стоимостью. Выбор пал на ноукод.
Но конечно надо всегда смотреть, что лучше подойдет для проекта, в том числе на перспективу. Чтобы не делать ноукод просто чтобы делать ноукод)
Кажется, говоря о том что можно было и классически все сделать, комментаторы забывают что в использованном подходе никто не лез в логику расчетов в гугл таблицах. А там, наверняка, наворочено!
Ещё прикиньте, что вам надо все расчеты оформить. А потом, надо же админку для вычислительной части, те же константы менять. А если заказчик решит обновить формулы, например, в связи с изменением ставки НДС? Тут и парой недель не нахнет.
Всё так, да. Решили не программировать сам шаблон расчета, потому что бюджета на это уйдет много, а сам по себе проект пока — экспериментальный. Надо было просто проверить идею минимальными затратами.
Для расчета на сайте используются по сути те же самые гугл-таблицы из шаблона КП, и менеджеры заказчика могут сами вносить туда изменения (в оговоренных пределах).
С базой в Airtable заказчик тоже работает сам без проблем, это плюс.
Не берусь судить, как поняли кейс участники дискуссии)
Да, можно было бы закодить, можно было использовать ноукод-инструменты. Мы с заказчиком выбрали второй вариант, и по итогу остались довольны.
Статья супер, спасибо, что подробно расписали. Это, конечно, не ноукод, а скорее лоукод, но не могу не согласиться с автором выше, впечатление, как будто написать все это было бы проще
Спасибо за поддержку! Ответил в том комментарии
Наконец-то показали что за результат получается после использования ноу/Лоу кода. Как писали выше кажется проще было сделать нормально. А для полноценного сравнения не хватает времени которое потратил менеджер чтобы все это интегрировать умножить на стоимость его часа и сравнить это с обычно разработкой. Тут делов то смотрится максимум на час работы Джуна, который по ставке 200-500р/час работает. Отдавать 1500 в месяц на простейший калькулятор который делает такие "огромные вычисления", как по мне странно.
А что именно не так с результатом?
У популярных ноукод-инструментов есть свои минусы, тут не спорю. Как раз то, что нужно платить за операции, да и скорость работы не идеальна. Поэтому я уже нашел замену Integromat и Airtable, в лице того же Wappler, где этих проблем нет.
Но даже при своих минусах ноукод-инструменты полезны и часто оправданы (как в данном кейсе).
По вашей оценке тут час работы джуна на обычном коде. Ну ок. У нас была другая оценка.
Мы пишем на фреймворках и CMS, но тут выбрали ноукод.
Да с результатом все хорошо, я и пишу что хоть раз увидел в рекламе лоу кода пример того, для чего используется. А какова была ваша оценка если бы это делалось на фрейморке или cms?
Согласен с Иваном в части необходимости расчетов для наглядности .
Конечно, не правильно раскрывать калькуляцию реального проекта, но было бы любопытно насчет расчетов типовых задач.
По сравнению - не уверен, что джун (или повыше спец) и за пару часов наваяет. Легко по логике, но рутина. Здесь каждая часть имеет свой доступ с UI и открыта не технарям для контроля. Опыт же показывает, что оценка времени у программиста сильно занижена b сильно разнится у него и у продуктового менеджера (у последнего она обычно реалистичней)
*потерто*