Калькулятор доставки: 6 шагов до своей формы на вайб-кодинге

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

Практическая задача здесь начинается с повторяющегося пересчёта одного и того же заказа разными способами.

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

Особенно раздражало не само число. Раздражало, что его приходилось добывать. Сначала нужно уточнить зону, затем посмотреть вес и проверить, относится ли заказ к срочному. Потом объяснить клиенту, почему вчера называлась одна сумма, а сегодня другая.

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

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

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

Что меняет такая схема в службе доставки?

Раньше заказ жил сразу в нескольких местах. Клиент писал в мессенджер, диспетчер заносил данные в заметку, курьер получал адрес в чате. Если маршрут задерживался, статус можно было поменять на «позже», но это не отвечало на главный вопрос: кто теперь доведёт заказ до конца.

Схема состоит из двух связанных, но разных частей.

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

Вторая часть - доска курьерских задач. На карточке заказа видно:

• кто сейчас отвечает за заказ;
• куда идёт маршрут;
• когда нужна доставка;
• есть ли задержка;
• почему она возникла;
• кому передали работу.

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

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

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

Для меня изменение не в том, что появилась ещё одна страница. Изменение в ответственности. За задержкой теперь стоит причина, за причиной - человек, а за расчётом - строка в тарифной таблице.

Почему я не стала брать готовый сервис?

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

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

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

У конкретного готового сервиса способ изменения нестандартной логики нужно проверить по его настройкам и условиям поддержки. До подтверждения правки полезно проверить расчёт на тестовых значениях.

Это не значит, что готовый сервис плохой. Он лучше подходит, если нужны:

• интеграции с конкретными перевозчиками;
• сложная маршрутизация;
• автоматический обмен статусами;
• большое количество заказов;
• готовая поддержка и ответственность поставщика;
• проверенные процессы работы с персональными данными.

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

Главное правило я оставила одинаковым для калькулятора и для доски: нельзя прятать смысл за одним статусом. «Позже» не объясняет задержку. «Стоимость доставки» без расшифровки тоже не объясняет, откуда взялась сумма.

Из чего состоит калькулятор стоимости доставки?

У решения четыре части.

Форма на странице. Клиент выбирает зону, вводит вес и отмечает обычную или срочную доставку. Для зоны и срочности подходит выпадающий список, для веса - числовое поле. На первом экране не нужны параметры, которые не участвуют в базовом расчёте.

Таблица тарифов. В ней лежит правило расчёта. Например, одна строка описывает зону, диапазон веса, обычную цену и срочную цену.

Зона | Вес от | Вес до | Обычная доставка | Срочная доставка
Зона 1 | 0 | 5 | 400 | 600
Зона 1 | 5.01 | 10 | 550 | 800
Зона 2 | 0 | 5 | 600 | 850

Это только форма структуры. Реальные значения нужно внести по своим тарифам, а не копировать пример.

Серверный расчёт. Apps Script принимает данные формы, читает тарифную таблицу и ищет строку, в которой совпадают зона и диапазон веса. Если выбрана срочная доставка, берётся срочный тариф. Результат возвращается на страницу.

Google описывает HTML Service как способ отдавать веб-страницы, взаимодействующие с серверными функциями Apps Script.

Документация Google об HTML Service описывает веб-страницы, которые взаимодействуют с серверными функциями Apps Script.

Страница может быть файлом Index.html. Серверная часть содержит функцию doGet(e) или doPost(e). В первом случае скрипт отдаёт страницу, во втором принимает отправленные значения. Google указывает, что для веб-приложения скрипт должен содержать одну из этих функций и возвращать HTML- или текстовый результат.

Результат. На странице нужно показать не только итоговую сумму. Лучше вывести выбранную зону, вес, вид доставки, базовый тариф, надбавку за срочность и итог. Так клиент видит логику, а диспетчер может быстро проверить расчёт.

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

Сколько стоит собрать такую вещь?

Редактор кода нужен как рабочая папка. В нём лежат Index.html, серверная часть и другие файлы проекта. Помощник может создать часть файлов и изменений, но результат нужно проверить и протестировать. Открой изменённый файл, проверь, что в нём поменялось, и вернись к помощнику с описанием следующей задачи.

Claude Code работает с проектом через поддерживаемый интерфейс; способ подключения к Visual Studio Code нужно проверить для выбранной конфигурации. Я пишу обычными словами:

• что должна делать форма;
• какие поля нужны;
• откуда брать тариф;
• что показывать при ошибке;
• какие файлы нельзя менять.

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

Порядок установки зависит от выбранного способа запуска и операционной системы. Перед началом проверь официальную инструкцию Claude Code, а доступ к платному плану рассмотри отдельно. При годовой оплате на странице Anthropic указана цена $17 в месяц, но списание происходит за год вперёд. Для сравнения ниже использую ту же помесячную цену, без пересчёта в рубли.

Эту неопределённость нужно учитывать при расчёте бюджета: российская цена и доступность оплаты не подтверждены.

Для самой схемы понадобятся ещё доступы:

• аккаунт Google для Google Таблицы и Apps Script;
• право создать таблицу тарифов;
• доступ к редактору сайта или месту, где будет опубликована форма;
• доступ к настройкам публикации веб-приложения;
• отдельное решение по хранению персональных данных, если форма собирает телефон, имя или адрес.

Apps Script имеет квоты. Для обычного потребительского аккаунта Google указывает максимальную длительность одного запуска 6 минут, до 30 одновременно выполняемых скриптов на пользователя и до 1000 одновременно выполняемых скриптов на проект. При превышении квоты выполнение останавливается. Google также предупреждает, что ограничения могут измениться без предварительного уведомления.

Для небольшого калькулятора это не причина отказываться от схемы. Это причина не выдавать её за систему без ограничений.

Как собрать калькулятор доставки по шагам?

1. Открой инструменты и папку.

   Установи Visual Studio Code, подключи Claude Code и открой в редакторе отдельную папку, которую не будешь смешивать с другими автоматизациями.

   Разобрать задачу до начала сборкиСкопировать промпт

   У меня небольшая служба доставки. Клиент должен рассчитать предварительную стоимость доставки на странице сайта. В форме нужны только три параметра: зона доставки, вес заказа и обычная или срочная доставка. Тарифы хочу хранить в Google Таблице. Результат должен показываться на странице после отправки формы.
   
   Пока не пиши код. Разбери задачу простыми словами: какие части нужны, какие данные должна содержать таблица, как страница передаст значения серверной функции Apps Script и какие вопросы нужно решить до сборки. Сохрани разбор в файл plan.md в папке проекта. Не добавляй личный кабинет, регистрацию, интеграции с перевозчиками и дополнительные поля без моего отдельного согласия. Если для работы понадобится установить ещё инструмент, скажи об этом прямо.

   Помощник должен вернуть план, список вопросов и перечень будущих частей. Если сразу появился большой объём кода, останови работу и попроси сначала закончить разбор.

2. Задай структуру тарифов.

   Создай Google Таблицу с листом Тарифы. Внеси зоны, диапазоны веса и две цены. Одна строка должна описывать один диапазон.

   Создать структуру тарифной таблицыСкопировать промпт

   Подготовь структуру данных для листа «Тарифы» в Google Таблице. Нужны столбцы: «Зона», «Вес от», «Вес до», «Обычная доставка», «Срочная доставка».
   
   Объясни, как заполнить строки для трёх зон и нескольких диапазонов веса. Не придумывай реальные цены вместо меня. Покажи тестовый пример только как пример формата. Отдельно укажи, что делать с весом ровно на границе диапазона, нулевым весом и весом выше последнего диапазона. Если тариф не найден, калькулятор должен показать понятное сообщение, а не подставлять случайную цену.

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

3. Опиши поля формы.

   Теперь попроси помощника собрать только HTML-форму. Не подключай расчёт, пока не убедишься, что поля работают и подписаны понятно.

   Собрать HTML-форму калькулятораСкопировать промпт

   Создай файл Index.html с формой предварительного расчёта доставки. В форме должны быть:
   
   - выпадающий список «Зона доставки»;
   - числовое поле «Вес заказа»;
   - выбор «Обычная доставка» или «Срочная доставка»;
   - кнопка «Рассчитать стоимость».
   
   Сделай подписи на русском языке. Запрети отправку пустой зоны и веса меньше нуля. Добавь понятные сообщения об ошибках рядом с полями. Пока не подключай Google Таблицу и не пиши серверный расчёт. Используй тестовые зоны только для проверки отображения, а в коде отдельно укажи место, где список зон будет заменён на реальные.

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

4. Попроси собрать расчёт.

   Подключи серверную функцию Apps Script. Она должна читать лист Тарифы, искать совпадение по зоне и диапазону веса и выбирать обычную или срочную цену.

   Добавить серверный расчёт по тарифной таблицеСкопировать промпт

   Добавь серверную часть Apps Script для калькулятора. Она должна принимать три значения: зона доставки, вес заказа и тип доставки.
   
   Прочитай лист «Тарифы» из Google Таблицы. Заголовки столбцов такие: «Зона», «Вес от», «Вес до», «Обычная доставка», «Срочная доставка». Найди строку, где совпадает зона и вес попадает в диапазон от «Вес от» до «Вес до». Для обычной доставки используй столбец «Обычная доставка», для срочной - «Срочная доставка».
   
   Верни результат с расшифровкой: зона, вес, тип доставки, выбранный тариф и итоговая стоимость. Если строка не найдена, верни понятное сообщение «Для этих параметров тариф не найден». Не подставляй нулевую или случайную цену. Перед изменением перечисли файлы, которые собираешься менять.

   Помощник должен создать серверную функцию и описать, какие данные она возвращает. Сверь один обычный и один срочный расчёт вручную по строке таблицы. Первый результат от помощника должен быть понятен без чтения кода. Опиши помощнику задачу обычными словами и проверь, что он собрал.

5. Соедини страницу и сервер.

   Форма должна передавать значения Apps Script, а результат возвращаться на ту же страницу. В Apps Script для этого можно использовать серверную функцию и вызов через google.script.run.

   Соединить форму с серверным расчётомСкопировать промпт

   Соедини Index.html с серверной функцией Apps Script. После нажатия кнопки форма должна передать на сервер значения зоны, веса и типа доставки. Сервер должен прочитать лист «Тарифы», выполнить расчёт и вернуть результат.
   
   На странице покажи блок результата с полями: зона, вес, тип доставки, тариф и итоговая стоимость. Во время ожидания напиши «Считаю стоимость». При ошибке покажи понятное сообщение на русском языке и не стирай введённые значения.
   
   Не добавляй отправку телефона, имени или адреса. Не меняй структуру тарифной таблицы без отдельного объяснения. Перед правкой перечисли файлы, которые будут изменены.

   Правильный результат появляется после отправки формы и содержит те же параметры, которые были введены. Если страница зависает, попроси помощника показать отдельную обработку успешного ответа и ошибки. Вызовы google.script.run асинхронные, поэтому результат нельзя считать мгновенным.

6. Опубликуй и проверь.

   Открой в Apps Script Deploy -> New deployment -> Web app, задай доступ по требованиям проекта и сначала проверь ссылку самостоятельно. Не передавай клиентам ссылку до проверки тарифов.

   Подготовить калькулятор к проверке перед публикациейСкопировать промпт

   Проведи меня по проверке калькулятора перед публикацией веб-приложения. Не меняй код без моего разрешения.
   
   Составь таблицу тестов для таких случаев:
   - минимальный допустимый вес;
   - вес ровно на границе диапазона;
   - вес сразу после границы;
   - вес выше последнего диапазона;
   - обычная доставка;
   - срочная доставка;
   - пустая зона;
   - пустой вес;
   - отрицательный вес;
   - зона, для которой нет строки в таблице.
   
   Для каждого теста укажи, что я должна увидеть на странице и какой результат сверить вручную с Google Таблицей. Если найдёшь неоднозначное место в тарифах, не исправляй его сам, а остановись и задай вопрос.

   Проверь результат не только на правильном тарифе. Посмотри, что произойдёт при ошибке и при отсутствии подходящей строки. Оставь ручной способ расчёта на случай, если веб-приложение временно недоступно.

Какие файлы появились после сборки?

Index.html - видимая часть калькулятора. В нём находятся поля зоны, веса и срочности, кнопка, сообщения об ошибках и блок результата.

Серверная часть Apps Script принимает данные и обращается к таблице. В зависимости от выбранной схемы там будет doGet(e), doPost(e) или отдельная серверная функция, которую вызывает страница. Не нужно запоминать все имена. Достаточно понимать, что страница отправляет значения, а сервер возвращает результат.

Google Таблица - место для тарифов. Её удобнее менять, чем искать цену среди строк кода. Для каждой записи должны быть понятны зона, нижняя и верхняя границы веса, обычная и срочная цена.

Опубликованное веб-приложение - адрес, по которому открывается форма. После каждой существенной правки нужно снова пройти тесты. Ссылка сама по себе не подтверждает правильность расчёта.

Сохрани копии:

• исходный файл Index.html;
• проект Apps Script;
• Google Таблицу с тарифами;
• список тестовых значений;
• адрес опубликованного веб-приложения;
• описание того, какой лист и какие заголовки читает сервер.

Тарифы лучше менять в таблице, а в код без необходимости не заходить. Если меняется правило, которого нет в текущей структуре, сначала опиши его помощнику словами и попроси показать список изменений.

Что делать, если калькулятор считает неправильно?

В расчёте нет НДС

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

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

После исправления сравни базовую цену, сумму НДС и итог отдельно. Не оставляй на странице одно число без пояснения.

Показан «голый» тариф

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

«Калькулятор часто показывает "голый" тариф: только перевозку между терминалами».

• VC.ru, «Лучшие службы доставки для интернет-магазинов и маркетплейсов»

Проверь, не показывает ли калькулятор только базовую перевозку. Сопоставь текущую формулу с этим списком: забор заказа, страховка, упаковка, въезд на территорию, подъём, платная зона, НДС и минимальная стоимость. Для каждого пункта укажи: он уже включён, считается отдельной строкой, не учитывается или требует ручной проверки. Не добавляй значения, которых нет в тарифной таблице. Если итог нельзя получить надёжно, измени текст результата на «Предварительный расчёт» и добавь сообщение о ручном уточнении.

Если точная цена допуслуги неизвестна, не подставляй её в формулу. Лучше честно показать ограничение.

Одинаковые названия городов

Название населённого пункта нельзя хранить как обычный текст, если расчёт строится по городам. Одинаковые названия могут привести к неправильной зоне. В такой схеме для базовой версии безопаснее использовать заранее заданные зоны, а не свободное поле города.

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

Если позже появится выбор города, показывай регион вместе с названием. «Каменка, Пензенская область» безопаснее, чем просто «Каменка».

Срочность считается не на тот день

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

Проверь, зависит ли расчёт срочной доставки от часового пояса браузера, сервера или настроек проекта Apps Script. Найди все места, где используется текущая дата или время. Составь тесты для 23:55 и 00:05, укажи ожидаемый день по часовому поясу бизнеса. Не меняй настройки без моего подтверждения. Если расчёт стоимости не должен зависеть от времени, предложи убрать скрытую зависимость и оставить срочность отдельным выбором формы.

Проверь границу дня отдельно. Надпись «срочно» не должна означать разные вещи для клиента и диспетчера.

Форму сделали слишком длинной

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

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

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

Не найден подходящий тариф

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

Клиент получил стоимость, но я не могу подтвердить её по тарифной таблице. Проверь путь от введённых значений до итоговой суммы: зона, вес, диапазон, тип доставки, доплаты и округление. Покажи строку или строки таблицы, которые использовались. Если подходящей строки нет или тариф неполный, не подставляй ближайшее значение. Верни ошибку «Тариф требует уточнения» и добавь в результат список параметров для проверки диспетчером. Сначала объясни причину, потом предложи изменение.

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

Своё решение дешевле готового?

Google Apps Script и Google Таблица могут использоваться в рамках доступных квот, но точную стоимость дополнительных сервисов, хостинга или публикации я не называю: подтверждённой цифры в фактуре нет.

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

Она не подойдёт без дополнительной архитектуры, если нужны:

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

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

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

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

Что сделать сегодня, если я не разбираюсь в технологиях?

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

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

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

4. Сделай тестовый заказ. Проверь не только число, но и путь заявки. Должно быть понятно, что расчёт предварительный, кто уточняет условия и как заказ попадает к ответственному.

5. Оставь ручной fallback. Храни актуальную тарифную таблицу и способ посчитать заказ без страницы. Если веб-приложение недоступно или тариф неполный, клиент не должен получить случайную сумму.

6. Проверь персональные данные. Телефон, имя и адрес могут быть персональными данными. Согласие на расчёт и согласие на рекламную рассылку лучше разделять. Если данные попадают в Google Таблицу или другой облачный сервис, отдельно проверь требования к локализации.

Минимальный калькулятор не заменяет диспетчера. Он убирает повторяющийся пересчёт и показывает клиенту понятную предварительную сумму. Доска курьерских задач решает другую часть работы: при задержке у заказа появляются причина и новый ответственный.

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

Вопросы и ответы

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