ПортфолиоOffice Anatomy

Конструктор инженерных систем Office Anatomy

Конструктор инженерных систем Office Anatomy

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

Программирование конструктора инженерных систем
  • Проектирование
    Разработка технического задания и прототипа приложения
  • Дизайн
    Адаптивный дизайн для ключевых разделов конструктора
  • Frontend
    PUG (HTML) / SASS (CSS) / Javascript
  • Backend
    1С-Битрикс (PHP)
О проекте
Office Anatomy Office Anatomy

Сервис Office Anatomy представляет собой онлайн-конструктор инженерных систем, который рассчитывает стоимость всех работ, материалов и оборудования. Система производит расчёт только для офисных пространств площадью не более 2000 «квадратов». Но в это ограничение вписывается подавляющее большинство московских офисов.

В конструкторе реализована интерактивная карта офисного пространства с возможностью визуального конфигурирования рабочих мест, пересчет цен в зависимости от выбора класса проекта (A, B или C), а также детальная смета со всевозможными группировками и точностью "до винтика".

Задачи проекта
  • Разработка корпоративного сайта компании-интегратора
  • Программирование конструктора инженерных систем с возможностью формирования комплекта необходимых документов для начала работ - Договор и Спецификации
  • Разработка спец. проектов
Процесс работы
Проектирование и дизайн

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

Используя стандартные механизмы обмена данными между 1С-Битрикс и 1С мы в максимально сжатые сроки запустили MVP конфигуратора. Это позволило клиенту начать тестирование функционала, а мы продолжили работу в рамках поддержки и доработки проекта.

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

Конструктор инженерных систем Office Anatomy - фото 3
Frontend-разработка

Конструктор — это SPA (Single Page Application) на Vanilla Javascript. Работая в браузере Вы можете загружать план офиса, или использовать "миллимитровку", создавать рабочие места и распределять их на карте офисного пространства, выбирать количество рабочих мест для каждого подключения, а также добавлять видеонаблюдение, системы контроля доступа и точки доступа Wi-Fi.

Приложение обменивается с backend через API, который реализован на базе 1С-Битрикс. Смотрите работу конструктора на видео ниже.

Конструктор инженерных систем Office Anatomy - фото 4
Программирование (Backend)

В сердце сайта — 1С-Битрикс. Для проекта были разработали собственные компоненты, которые обеспечили большее быстродействие, чем штатные компоненты Битрикс. Компоненты обеспечивают работу как API для конструктора, так и внешней части сайта — блога, публикаций и промо-страниц.

Результат

MVP конструктора запущен в кратчайшие сроки. Вторая версия конструктора доработана и обновлена уже в рамках поддержки. Проект подготовлен к SEO-продвижению и развивается в рамках поддержки сайта.

Обсудить проект

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

Мы свяжемся с вами в течение 1 рабочего дня удобным вам способом, обсудим ваш проект, проконсультируем по срокам и стоимости
Григорий Фролов
Григорий Фролов
NJ Soft