Кейс / Азия Тут / Website / Backend / VK / MAX / Integrations
Коммерческий проект · Production
Редизайн и разработка системы доставки
От сайта на Flexbe до связанной системы заказов для сайта, сотрудников и MAX
Проект начался как доработка действующего сайта доставки на Flexbe, но постепенно вырос в связанную production-систему: новый frontend, собственный Flask backend, аккаунты клиентов, скидки и промокоды, VK workflow сотрудников и полноценный MAX-бот для оформления и сопровождения заказов.
Расширить действующий сайт доставки и связать пользовательский опыт, бизнес-правила, работу сотрудников и заказы внутри MAX, сохранив Flexbe как ecommerce-основу.
Подход
Как устроено решение
Custom frontend поверх Flexbe, Flask backend и SQLite, VK для управления статусами и MAX для полного клиентского сценария. Заказы проходят общую production-цепочку.
01 / Редизайн сайта
Редизайн и расширение существующего сайта
Существующий Flexbe был сохранён как ecommerce-основа, а поверх него построен большой custom HTML/CSS/JS слой.
Азия Тут · Custom frontend / Flexbe
азия тутКаталог · доставка · самовывоз
Поиск по названию и ингредиентам
КаталогТовары и доступность Flexbe
Ingredient chipsSprites
Карточка товара
Наггетсы
6 шт270 ₽
12 шт380 ₽
Вариант → корзина Flexbe
Добавить в корзину
Оформление
Корзина и checkout
Доставка / самовывозВремя и адресАккаунт · акции · birthdayПалочки и upsell
Подтверждение заказа
строк custom frontend · технический snapshot
19k+
Каталог и карточка товара
Новый header и hero, внешний вид каталога, мобильные карточки и product modal. Ingredient chips и sprites, поиск по названию и ингредиентам.
Корзина и оформление
Стилизация cart / checkout, доставка и самовывоз, адрес квартиры или частного дома, выбор времени, палочки, upsell и success overlay.
Личный опыт клиента
Автозаполнение из аккаунта, повтор заказа на сайте, UI акций и birthday-механики, mobile drawer и мобильные исправления.
Объём frontend показан как срез масштаба разработки, а не как показатель качества.
Прозрачный фон товарных изображений и единый стиль серой керамики для блюд. Реальный продукт сохранён без придуманных ингредиентов; фон карточки формирует UI/CSS. Используются ingredient sprites.
Upsell больше не хранит жёстко заданные ссылки на картинки. Изображение берётся из актуальной карточки товара Flexbe, поэтому при замене фотографии товара дополнительная продажа автоматически получает новое изображение.
Наггетсы: 6 шт — 270 ₽, 12 шт — 380 ₽. Вариант выбирается в product modal, обе версии добавляются в корзину. Палочки: 1–5 пар бесплатно, свыше 5 — 10 ₽ за дополнительную пару. Custom modal/dropdown интегрирован со штатным Flexbe field.
01
02 / Архитектура
Сайт, сотрудники и MAX работают в одной системе
Flexbe остаётся источником истины для меню, цен, доступности, корзины, checkout и lead/order. Custom frontend отвечает за UX сайта, а Flask связывает все части системы.
Custom HTML/CSS/JS расширяет существующий сайт. Ecommerce-основа и реальные заказы остаются в Flexbe.
Flask и SQLite
Backend связывает website, accounts, Flexbe, VK, MAX, SQLite и бизнес-логику.
Два рабочих интерфейса
VK — управление статусами для сотрудников. MAX — меню, корзина, checkout, история, повтор, отмена, timeline и уведомления для клиента.
02
03 / Аккаунты клиентов
Клиент, профиль и заказы — в одной системе
Регистрация, вход, профиль, история заказов, повтор, отмена, автозаполнение checkout и выход из аккаунта.
Личный кабинет
Мои заказы
Текущий заказПринят
Состав · доставка · время получения
Повторить заказ ↗Отмена в первые 15 минут
История заказовЗавершён
Товары и количества сохранены
До первого заказа
Новый клиент может создать аккаунт до первого заказа. Для существующего номера остаётся защита через подтверждение прошлым заказом.
История и повтор
Номер, состав, сумма, статус, доставка и время. Прошлый заказ возвращается в корзину с проверкой актуальных товаров и цен; новый заказ создаётся только после подтверждения клиента.
Контролируемая отмена
Сервер повторно проверяет владельца, возможность отмены и текущий статус. После успешной отмены меняет статус в Flexbe, отправляет событие в VK и уведомление в MAX.
В текущей реализации website используется отмена в первые 15 минут с серверной проверкой времени и статуса.
03
04 / Birthday и промокоды
Скидка на день рождения — отдельная бизнес-механика
10% только на товары: доставка в скидке не участвует. Подписанный токен, один раз в календарный год и idempotency защищают правило от повторного применения.
Birthday engine10%Автоматически · один раз в год
Дата рождения проверенаТокен подписанЗаказ принадлежит клиентуСкидка рассчитанаИспользование записано
birthday_discount_uses user_id · phone · year · expiration
01Signed token→
02Проверка заказа→
03Сравнение скидок→
04Flexbe update→
05Учёт использования
Клиент получает выгодную скидку
Если обычная скидка выгоднее или равна birthday, birthday-бонус не расходуется.
Промокоды управляются через backend
Backend API, локальная таблица промокодов и applied promo. Frontend показывает доступные акции; custom logic не конфликтует с birthday.
Без старого fallback
Legacy BIRTHDAY10 не используется как frontend fallback.
04
05 / Оплата и сдача
Оплата наличными и подготовка сдачи
Для доставки и самовывоза доступны «Мобильный банк» и «Наличные». При оплате наличными клиент выбирает «Без сдачи» или «Нужна сдача».
Доставка / самовывоз
Способ оплатыМобильный банк / Наличные
Без сдачи
Нужна сдачаСумма, с которой подготовить сдачу
Финальная pay sum после серверных корректировок → расчёт сдачи
Условный пример · карточка сотрудникаПодготовить сдачу
Способ оплаты
Наличные
Клиент даст
1000 ₽
Финальная сумма
230 ₽
Подготовить сдачу
770 ₽
Расчёт выполняет backend
Понятный checkout
Поля появляются по выбранному сценарию. Если нужна сдача, клиент вводит сумму, с которой её подготовить. Поле принимает только цифры.
Расчёт на сервере
Backend получает финальную сумму заказа после серверных корректировок, рассчитывает сдачу и передаёт информацию сотрудникам.
Информация для сотрудников
В карточке VK видны «Без сдачи» либо сумма клиента и рассчитанная сдача. Рассчитанная сдача клиенту на frontend не показывается.
Пример в схеме условный и не содержит данных реального клиента.
05
06 / Бизнес-правила
Условия доставки и время закреплены в коде
доставка при subtotal < 1000 ₽
150 ₽
доставка бесплатно
от 1000 ₽
приём заказов · Asia/Chita
11:00–23:30
Доставка и самовывоз
Самовывоз бесплатный. Минимального заказа нет. Порог доставки определяется subtotal.
Время получения
ASAP доступен. Отложенный заказ — минимум +2 часа, шаг выбора времени — 30 минут.
Точные границы
11:00 считается открытием; в 23:30 заказ ещё доступен, в 23:31 приём закрыт.
06
07 / VK Staff Workflow
Сотрудники управляют статусами через VK
VK — основной рабочий интерфейс сотрудников. Карточка заказа объединяет состав, получение, оплату, скидки и итоговую сумму.
VK
Азия Тут · ЗаказыРабочая беседа сотрудников
Автоматическая карточка
Новый заказ
Клиент
Имя и телефон
Состав
Товары, количества, цены
Получение
Доставка / самовывоз
Адрес
Квартира, подъезд, этаж
Время
Время получения
Оплата
Наличные / мобильный банк
Сдача
Без сдачи / сумма клиента и расчёт
Скидки
Промокод / birthday
Итого
Итоговая сумма
Обработано без повторной отправки
Доставка
Новый → Принят → Готовится → Передан курьеру → Выполнен.
Самовывоз
Новый → Принят → Готовится → Готов к выдаче → Выполнен.
Независимый commit
MAX notification может отправляться после успешного database commit. Ошибка MAX не должна ломать изменение статуса заказа и работу VK.
new, accepted, cooking, courier, ready, completed, cancelled. Карточка содержит номер, клиента и телефон, товары, количества и цены, получение и адрес, время, оплату, комментарии, скидки и итог. Website cash orders дополнительно показывают «Без сдачи» или сумму клиента и рассчитанную сдачу.
07
08 / MAX Customer Bot
Полноценный заказ внутри MAX
MAX — полноценный клиентский order bot. Заказ, оформленный в MAX, создаёт реальный заказ в Flexbe и проходит через ту же production-цепочку обработки.
MAXАзия Тут
Клиентский order bot
Меню → корзина → заказ
Категории и фирменные карточкиНазвание · цена · вес · ингредиенты4 карточки на страницуТекущий заказ · корзина · мои заказы
Подтверждение → Flexbe order
Защита от двойного заказа
checkout_confirm
↓
checkout_submittingАтомарный переход checkout session
Первый claim успешенПовторный отклонён
01Меню→
02Корзина→
03Доставка / Самовывоз→
04Время→
05Имя→
06Адрес→
07Квартира / подъезд / этаж / домофон→
08Оплата→
09Палочки→
10Пожелания→
11Подтверждение→
12Реальный Flexbe order
Фирменное меню
Каталог и категории, серверный renderer карточек: название, цена, вес, ингредиенты и кнопка добавления. Пагинация — 4 карточки на страницу.
Главная по контексту
Главная показывает текущий заказ, корзину, меню и «Мои заказы». В рабочее время: «Принимаем заказы с 11:00 до 23:30», вне рабочего времени: «Приём заказов закрыт». Меню и корзина остаются доступны.
Защита от двойного заказа
Повторное нажатие кнопки подтверждения не должно создать второй заказ.
Checkout session атомарно переходит checkout_confirm → checkout_submitting. Первый claim успешен; повторный отклоняется.
08
09 / Production round trip
MAX → Flexbe → VK → MAX
Полный production round trip: клиент оформляет заказ, сотрудники обрабатывают его, а обновления возвращаются клиенту в MAX.
Полный production round trip
01MAX Customer→
02Flexbe Order→
03Flexbe Webhook→
04VK Staff
↓
Сотрудники меняют статус
Accepted
Cooking
Ready / Courier
Completed
↓
MAX Customer NotificationPNG + text · после успешного commit
Отправка без дублей. Ошибка MAX не прерывает обработку заказа.
Клиент открывает прошлый заказ и подтверждает повтор. Проверяются текущая доступность и цены, корзина перестраивается. Новый заказ автоматически не создаётся до подтверждения checkout.
Отмена с повторной проверкой
Перед отменой проверяются ownership, can_cancel и текущий статус. После успеха Flexbe получает cancelled, локальный статус обновляется, VK получает событие, MAX — cancelled notification.
10
11 / Backend и инфраструктура
Независимый production-сервис и три интеграции
Flask связывает сайт и мессенджеры, а инфраструктура обеспечивает работу production-системы.
01Flexbe webhook / VK callback / MAX webhook→
02Flask + Gunicorn→
03SQLite→
04systemd · Nginx · HTTPS · VPS
Backend
Flask, Gunicorn, systemd и SQLite. Собственная бизнес-логика и обработка событий.
Инфраструктура
VPS, DNS, Nginx, HTTPS, CORS, секреты в переменных окружения и backups.
Инструменты
Pillow renderer для карточек и Playwright QA для проверки интерфейса.
11
12 / QA
Автоматические проверки и реальные сценарии
Зафиксированные результаты QA проекта. Автоматические проверки и ручные подтверждения показаны отдельно.
Чистая консоль браузера, production service active, Python syntax OK, production DB integrity OK и backup DB integrity OK.
12
13 / Production recovery
Проверенная точка восстановления перед передачей
Финальная recovery-точка проекта проверена checksum и сохранена отдельно от production-сервера.
Full project backup
SQLite backup
Flexbe source / snapshot
Infrastructure snapshot
↓
SHA256 manifestПроверка checksum
↓
Master recovery bundle
↓
Off-server copyКопия отдельно от production-сервера
Проект и данные
Full project backup и отдельный SQLite backup.
Исходники и инфраструктура
Flexbe custom source, public Flexbe snapshot и infrastructure snapshot.
Проверка и отдельная копия
SHA256 manifest, master recovery bundle и off-server copy.
Проект находится в production и на этапе финальной передачи.
13
Результат
Из сайта на конструкторе — в связанную систему заказов.
В результате существующий сайт доставки превратился в связанную production-систему. Flexbe остался источником истины для каталога и заказов, custom frontend отвечает за пользовательский опыт сайта, Flask связывает аккаунты, бизнес-логику, VK и MAX, сотрудники управляют статусами через VK, а клиент может оформить и сопровождать заказ как на сайте, так и внутри MAX.
Проект включает не только frontend и backend, но и реальные бизнес-сценарии: доставку и самовывоз, время заказа, оплату, сдачу, скидки, birthday-механику, повтор, отмену, статусы, клиентские уведомления, QA и recovery.