«Окна столицы» — завод по производству металлопластиковых конструкций
«Окна столицы» — завод по производству металлопластиковых конструкций. Основные клиенты — оконные компании и строительные организации
Задачи
01
Разработать сайт — конструктор заказа для дилеров «Окон столицы». Клиент хотел предоставить удобный инструмент для сбора металлопластиковых конструкций и управления заказами
02
Создать мобильную и планшетную адаптацию сайта. Дилеры и замерщики часто «работают в полях» — важно было предоставить быстрый и удобный доступ к внутренней системе
Результат
Разработали сайт с мобильной и планшетной адаптацией, в котором можно:
- Проектировать металлопластиковые конструкции под заказ клиента
- Создавать коммерческое предложение под конкретного клиента: устанавливать наценку, добавлять дополнительные товары
- Управлять сотрудниками и клиентами
- Оформлять и редактировать заказы: добавлять металлопластиковые конструкции, дополнительные материалы и услуги, выставлять наценки и скидки, рассчитывать предварительную стоимость, оформлять доставку и т. д.
Настроили импорт данных из 1С — товаров, материалов, услуг, цен и других данных
Интегрировали Яндекс.Карты для доставки
Вход и авторизация
В систему могут попасть только одобренные «Окнами столицы» дилеры: руководители и сотрудники, одобренные дилером
Руководитель
Как устроена регистрация: дилер вводит email и пароль → указывает ИНН, ФИО, номер телефона → получает код подтверждения на почту, вводит его → заявка на регистрацию автоматически отправляется в 1С «Окон столицы» → дилер получает доступ к системе после одобрения его заявки сотрудниками «Окон столицы»
Сотрудник
Как устроена регистрация: сотрудник получает ссылку на регистрацию от своего руководителя → регистрируется: вводит логин и пароль. При этом ИНН вводить не нужно — он предзаполнен
Профиль пользователя
Руководитель
В профиле собраны:
-
Информация о себе
Руководитель может отредактировать любые данные, кроме ИНН компании -
Список сотрудников
Он может отправить ссылку на регистрацию сотруднику, а при клике на «Все» — попасть на страницу с данными всех работников.На ней он редактирует данные, регулирует права доступа к заказам, отправляет ссылки на регистрацию, активирует и блокирует сотрудников -
Наценка
Руководитель может выставлять наценку на конструкции и дополнительные материалы -
Список покупателей
Он может добавлять новых клиентов, а при клике на «Все» — просматривать данные покупателей.
Он вправе редактировать эти данные, добавлять и удалять клиентов, делать примечания -
Услуги и материалы
Руководитель может добавлять услуги и материалы вручную или с помощью загрузки XLS-файла.
Для удобства мы добавили шаблон XLS-файла — руководителю остаётся только внести недостающие данные.При клике на «Все» открывается каталог, в котором можно добавлять, редактировать и удалять материалы и услуги.При открытии материала или услуги он попадает в детальную карточку с данными, которые также можно отредактировать. Также он может добавлять материалы и услуги ко всему заказу или конкретной конструкции
-
Коммерческое предложение
Дилеры создают КП на основе спецификации от «Окон столицы». Раньше им приходилось вручную редактировать её: добавлять свои реквизиты, выставлять наценку и скидки, заменять логотип «Окон столицы» на свой, удалять ненужную информациюПоэтому мы разработали шаблон КП, с которым всё упростилось: достаточно один раз его заполнить, а затем минимально адаптировать под каждого покупателяРуководитель может выбрать готовую тему для шаблона или создать её вручную, использовать фирменные цвета компании.
Для удобства есть предпросмотр
-
Онбординг
При клике на онбординг появлятся демонстрация возможностей профиля. Это удобно — руководитель может в любой момент посмотреть, как управлять информацией в профиле
Сотрудник
В профиле сотрудника собраны его данные о себе, ИНН компании, информация по наценке и онбординг. Он может отредактировать только данные о себе
Конструктор
Конструктор — это инструмент для проектирования металлопластиковых конструкций.
На этапе MVP мы собрали минимальный набор конструкций — все они импортируются из 1С «Окон столицы». В планах — добавить шаблоны для оставшихся конструкций.
Все данные о конструкции импортируются из 1С «Окон столицы»
Как дилер создает конструкцию:
- Выбирает шаблон конструкции: одностворчатое окно, двухстворчатое окно, трёхстворчатое окно, балконная дверь
- Регулирует параметры и расположение створок
- Собирает конструкцию: указывает ширину и высоту, выбирает цвет, фурнитуру, уплотнитель и другие параметры. Если нужно — добавляет дренаж, импост, москитную сетку и другие дополнительные детали
- Сохраняет конструкцию. Если он указывает неверные данные, например, превышает максимальный размер проёма — система сообщает об ошибке. Мы предусмотрели такую опцию для самых распространённых ошибок
Пользователь может зумировать конструкцию, а в десктопной версии — использовать горячие клавиши
Детальная страница заказа
В ней можно посмотреть информацию о покупателе, конструкции, дополнительные материалы и услуги, стоимость, статус оплаты и другие данные, а также кем и когда создан и отредактирован заказ
Редактирование заказа
Дилер может добавлять и удалять конструкции, покупателей, материалы и услуги — заводские или добавленные им самим.
Он также может выставлять скидку — ко всему заказу или конкретно к этой конструкции
Расчёт стоимости и создание КП
Дилер создаёт КП после замеров. Для этого к клиенту замерщик выезжает к клиенту — сразу или после рассчёта предварительной стоимости и согласования её с клиентом.
На основе финальных замеров дилер создаёт КП. Если клиента все устраивает — дилер отправляет конструкцию на изготовление в «Окна столицы».
Важно: стоимость актуальна 1 сутки. Если клиент за это время не успевает дать ответ — партнёр производит перерасчёт. Такой способ позволяет избежать недоразумений: даже если «Окна столицы» изменят цены на материалы — дилер выставит покупателю актуальную стоимость
Доставка
Партнёр указывает способ доставки, выбранный клиентом: курьером или самовывозом. Возможности доставки курьером: ручной подъём изделий, ручной подъём материалов, пронос, разгрузка
Отслеживание изменений
Можно отслеживать последние изменения в заказе и оставлять комментарии — эти опции особенно удобны для групповой работы
Список заказов
Мы продумали удобную фильтрацию, чтобы пользователям было легко ориентироваться в списке
Фильтры
Есть быстрый фильтр по статусу заказа и подробные фильтры — по покупателю, дате создания, стоимости заказа, статусе оплаты, способу получения заказа, дате изготовления заказа, плановой отгрузке
Поиск
Мы добавили поиск по параметрам: производственному номеру, номеру телефона, адресу и другим.
Внедрили такое решение из-за особенностей программы 1С. Она не предназначена для точечного поиска: к примеру, если бы дилер искал заказ с цифрой «15», он бы заодно получал все номера телефонов, адресов и других данных, в которых фигурирует «15»
Просмотр заказа
Если дилер кликает на производственный номер — он переходит на детальную страницу заказа. А если на любые другие данные по заказу — остаётся на странице и видит основные детали с помощью быстрого просмотра. Это упрощает работу: не нужно каждый раз возвращаться назад в список при просмотре заказов
Адаптация под устройства
В мобильной и планшетной версиях мы полностью переработали интерфейс: компактно разместили элементы на небольших экранах устройств.
Для этого свернули все параметры, кроме ключевых, чтобы пользователи не отвлекались на них и раскрывали их только при необходимости
Избранное
Любой заказ или конструкцию легко добавить в «Избранное», нажав на знак звёздочки
Мобильная адаптация
Основная часть работы пришлась на мобильную адаптацию конструктора, потому что просто уменьшить изображение было недостаточно.
В мобильной версии мы оставили основные данные, а дополнительные — свернули. Такое решение позволяет дилерам «не заблудиться» в большом количестве элементов.
Конструкции состоят из множества компонентов, их проще проектировать на горизонтальном экране. Поэтому важно было расположить их на вертикальном экране смартфона так, чтобы они не казались мелкими.
Также нужно было уместить габариты и другие детали таким образом, чтобы они не занимали много места на экране.
Поэтому мы полностью переработали интерфейс
-
На первом экране — конструкция
-
Изображение конструкции — интерактивное. К примеру, при нажатии на створку окна можно изменить поворот механизма или параметры.При проектировании экрана мы предусмотрели, чтобы пользователи могли легко нажимать даже на небольшие детали, например, те же ручки
-
Инструменты переключения между отдельными конструкциями внутри заказа — в виде иконок. Открытие панели — по горизонтальному свайпу
-
Удаление элемента, отмена, возврат последнего действия, отключение размерной сетки — в виде кнопок
-
Удаление элемента — в левой части экрана. Такое расположение снижает вероятность того, что пользователь случайно удалит элемент при проектировании конструкции
-
Отключение размерной сетки — для масштабирования конструкции
-
Параметры конструкции — в самом низу.
Они автоматически перестраиваются, адаптируясь под экран
По желанию клиента мы подготовили дизайн писем для партнёров: о регистрации, блокировке профиля и других оповещениях
Web-разработка
- Среда разработки:
-
WebStorm
- Языки:
-
TypeScript 5.8.3
- Технологии:
-
Vite•React Hooks•Tailwind•Emotion•ESLint/Prettier•Husky + lint-staged
- Фреймворки:
-
React 19
- Библиотеки:
-
Zustand•Konva.js•React Hook Form•Zod•TanStack Query 5•Material UI
- Система контроля версий:
-
git
Backend
- Среда разработки:
-
PyCharm
- Языки:
-
Python 3.13
- Архитектурный стиль:
-
BFF
- Технологии:
-
FastAPI•TaskIQ•SQLAlchemy
- База данных:
-
PostgreSQL
- Очередь задач:
-
TaskIQ
- Контейнеризация:
-
Docker
- Документация:
-
OpenAPI
- СУБД:
-
PostgreSQL 16
- Система контроля версий:
-
git
- Брокер сообщений:
-
RabbitMQ
Статистика проекта
- Менеджеры проекта
-
750 часов
- Аналитики
-
530 часов
- UX/UI-дизайнеры
-
490 часов
- Backend-разработчики
-
380 часов
- Frontend-разработчики
-
1500 часов
- Html-разработчик
-
136 часов
- QA-инженеры
-
740 часов
следующаяSpider Group® специализируется на разработке мобильных приложений, сайтов, CRM-систем и серверной логики, внедрении AI, а также создании дополненной реальности и интернета вещей разработке мобильных приложений, веба, серверных проектов, дополненной реальности, искусственного интеллекта и Интернета вещей.