AiFront мобильное приложение

После запуска веб-платформы AiFront команда Piplos Media разработала полноценную PWA-версию приложения, адаптированную для мобильного использования и быстрого доступа с любых устройств без установки через App Store или Google Play.

Основная задача проекта заключалась в том, чтобы превратить AI-визуализатор фасадов в максимально удобный мобильный инструмент для работы “в поле” — непосредственно на объектах, стройках или при общении с клиентом.

Задача проекта

Создать мобильный формат AiFront, который:

• работает как нативное приложение
• устанавливается на смартфон в один клик
• поддерживает быстрый доступ к AI-визуализации фасадов
• сохраняет высокую производительность и UX веб-версии
• работает на Android, iOS, планшетах и desktop

Проблема

Классическая веб-версия проекта была удобна для desktop-сценариев, однако в реальных условиях пользователи часто работают со смартфонов:

• делают фото фасада прямо на объекте
• показывают варианты клиенту на встрече
• быстро сравнивают материалы
• используют сервис в дороге

При этом разработка отдельных нативных приложений под iOS и Android существенно увеличивала сроки и стоимость запуска.

Решение

PWA-архитектура

Вместо создания двух отдельных мобильных приложений была реализована современная PWA-архитектура (Progressive Web App).

Это позволило:

• запускать приложение прямо из браузера
• устанавливать его на главный экран устройства
• использовать fullscreen-режим как у нативного приложения
• сократить стоимость и сроки разработки
• сохранить единую кодовую базу

UX и мобильный опыт

Интерфейс был полностью переработан под мобильные сценарии использования:

• упрощённая навигация
• адаптация editor-интерфейса под touch-управление
• оптимизированные зоны взаимодействия
• улучшенная работа drag-and-drop на мобильных устройствах
• плавные переходы и анимации

Особое внимание уделялось скорости работы и ощущению “нативности” приложения.

Основной функционал

PWA-версия поддерживает:

• загрузку фотографий фасадов со смартфона
• AI-визуализацию материалов
• работу с проектами пользователя
• просмотр результатов в fullscreen
• сохранение и повторное редактирование проектов
• адаптивную работу на смартфонах и планшетах

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

Frontend

• React + TypeScript
• Vite
• Tailwind CSS
• PWA configuration и service workers
• Responsive UI architecture

UX/UI

• Mobile-first адаптация
• Touch-friendly интерфейсы
• Glassmorphism и современные UI-эффекты
• Плавные micro-interactions

Производительность

• lazy loading
• оптимизация изображений
• кэширование ресурсов
• ускоренная загрузка через service worker

Преимущества PWA-подхода

Для бизнеса

• запуск без публикации в App Store и Google Play
• единая кодовая база
• более быстрое развитие продукта
• снижение стоимости поддержки

Для пользователя

• установка в 1 клик
• работа как обычное приложение
• быстрый доступ с главного экрана
• отсутствие необходимости скачивания из магазинов приложений

Результат

В результате AiFront получил полноценную мобильную версию, которая:

• расширила сценарии использования продукта
• сделала сервис удобным для работы на объектах
• повысила вовлечённость пользователей
• сохранила единый UX между web и mobile

Проект стал ещё ближе к формату полноцененного AI SaaS-продукта для строительной и фасадной индустрии.