VEKA catalogue

«Прорубили окно» в мир окон: создали приложение-каталог для окон VEKA

VEKA 2.0 — приложение с каталогом окон и их характеристиками. Создано на KMM. Работает на Android и iOS.

12 видов профилей

которые можно сравнить

16 готовых решений

со своим набором профилей

2 модели

визуализации профилей

Задача

Создать приложение для b2b-сегмента — партнеров, которые изготавливают оконные конструкции, — чтобы продемонстрировать им свою продукцию. В приложении должны быть представлены оконные профили клиента и все сопутствующие товары и услуги.

Решение

Разработали приложение на KMM с каталогом оконных профилей. Для каждого профиля есть 3D-модель, которую можно рассмотреть со всех сторон и в разных вариантах ламинации.

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

Все профили и решения можно сравнить между собой.

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

Процесс разработки

Разработка на Kotlin Multiplatform Mobile. Мы могли сами выбрать инструмент разработки и потому использовали KMM. У нас большой опыт работы с ним и множество собственных библиотек, что ускоряет процесс разработки. KMM позволил написать бизнес-логику сразу для Android- и iOS-версий и сэкономить клиенту деньги на разработке iOS-приложения.

Логика приложения. Приложение представляет собой каталог оконных профилей с характеристиками. Пользователь может выбрать подходящий профиль и сравнить с другими с помощью специальной функции. Встроенная 3D-модель позволяет рассмотреть выбранный профиль со всех сторон.

Также в приложении есть раздел «Готовые решения». В нем представлены готовые комплекты профилей для различных задач. Например, окна для коттеджей, специальные окна с шумоподавлением или окна с защитой от солнца. В этом разделе встроены интерактивные модели, на них можно в режиме онлайн менять цвета профилей и фурнитуры.

Собственная админка с гибкими настройками. Для хранения и загрузки всех характеристик профилей, мы использовали собственный фреймворк — admin toolkit. Это готовая развернутая административная панель, в которой собраны необходимые инструменты и которую можно кастомизировать под себя. Ее использование ускорило процесс разработки.

Для того чтобы необходимые параметры автоматически подтягивались в «Готовые решения», нам нужно было перестроить в админке логику связи объектов. В итоге приложение умеет просчитывать, можно ли использовать определенные типы ламинаций в данном готовом решении, и подгружает только доступные.

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

Планы на будущее. Клиент планирует расширение в целую экосистему. Мы уже сделали два приложения для этой системы:

VEKA-замерщик. Это приложение для партнеров клиента. Сюда они вводят данные замеров и отправляют заявку непосредственно на изготовление.
VEKA-калькулятор. Позволяет рассчитать стоимость работ исходя из заданных характеристик и материалов.

Что было самым сложным

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

Как мы решили эту задачу

Когда проблема возникла в первый раз, при переносе «тестовых» моделей, мы отправили правки заказчику, и он на своей стороне внес изменения в модели. Но при переносе остальных моделей проблема повторилась. Тогда мы стали конвертировать модели в различные форматы, и это помогло.

Технологический стек

Backend на Kotlin

Frontend на React

Android на Kotlin

iOS на Swift

iOS на Kotlin

Результат

Готовое приложение содержит полный каталог оконных профилей клиента. Пользователь может выбрать любой из представленных профилей и рассмотреть его со всех сторон благодаря 3D-модели.

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

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

3D-модели

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

Давайте обсудим ваш проект!

Это бесплатно. Мы расскажем, как приложение решит конкретные бизнес-задачи.