Мобильные приложения для интернет-магазина климатического оборудования
Разработка мобильных приложений для крупного бизнеса — это всегда вызов, особенно когда речь идёт об экосистеме, в которой взаимодействуют тысячи людей с разными ролями и задачами. Именно с таким проектом к нам обратился ведущий производитель климатического оборудования Cooper&Hunter Украина. Правда, уже после разработки полнофункционального интернет-магазина на Laravel, о котором мы подробно рассказали в отдельном кейсе.
На этот раз перед нами встала новая амбициозная задача — разработка приложений интернет магазина под Android и iOS, которые бы органично дополнили веб-платформу и позволили потребителям, дилерам и монтажникам работать с системой прямо со смартфона.
Читайте также:
Интернет-магазин климатического оборудования- О новом проекте для Cooper&Hunter — разработка мобильных приложений онлайн-магазина
- Ключевые задачи по разработке мобильных приложений
- Дизайн мобильных приложений Cooper&Hunter
- Разработка Android-приложения на Kotlin
- Swift-разработка приложений под iOS
- Результаты создания приложения интернет магазина C&H
О новом проекте для Cooper&Hunter — разработка мобильных приложений онлайн-магазина
Cooper&Hunter — американский бренд, который производит бытовые и промышленные кондиционеры, тепловые насосы, системы вентиляции и другое климатическое оборудование. В Украине компания работает через широкую сеть официальных дилеров и сертифицированных монтажников, обслуживая тысячи клиентов по всей стране.
После интернет-магазина на Laravel, объединившего каталог товаров, многоуровневую систему личных кабинетов и панель администратора, следующим логичным шагом стала разработка приложений для мобильных устройств. Бизнесу был нужен инструмент, которым удобно пользоваться где угодно: монтажнику на выезде, дилеру во время встречи с клиентом, а покупателю — просто дома на диване.
Веб-версия магазина решала эти задачи лишь частично, ведь нативное мобильное приложение обеспечивает иной уровень взаимодействия — отзывчивый интерфейс, push-уведомления, доступ к камере для сканирования штрихкодов и значительно более комфортную работу без привязки к браузеру.
Важно, что мобильное приложение интернет-магазина C&H — это не упрощённая копия сайта, а полноценный рабочий инструмент с идентичной бизнес-логикой и тем же фирменным дизайном. Общий бекенд на Laravel и единое API гарантируют синхронность данных между веб-платформой и приложениями. То есть монтажник, принявший заявку через приложение, видит ту же информацию, что и менеджер в админ-панели магазина.
Ключевые задачи по разработке мобильных приложений
Перед командой Webnauts встало комплексное техническое задание — разработка мобильных приложений для двух платформ с функционалом веб-версии онлайн-магазина. Помимо многоуровневого каталога со сканером штрихкодов будущее приложение должно было стать удобной точкой входа для трёх групп пользователей, каждая из которых нуждалась в собственном наборе инструментов:
- Личный кабинет покупателя — с возможностью регистрировать приобретённое оборудование, просматривать историю сервисного обслуживания, отслеживать гарантийные сроки и даты очередной профилактики. Также кабинет пользователя должен был обеспечить подачу обращений через чат, а также заказ и оценку монтажных работ.
- Личный кабинет монтажника — с обработкой текущих заказов в реальном времени, календарём запланированных работ и рейтингом качества предоставленного сервиса после каждого выезда. Завершение монтажа либо профилактики должно было подтверждаться клиентом через SMS-код.
- Личный кабинет дилера, где наряду с обработкой обращений было бы доступно пошаговое создание нарядов — от внесения данных клиента и параметров оборудования до выбора монтажника в соответствии с типом и уровнем лицензии.
Фактически разработка приложений для интернет магазина Cooper&Hunter включала не только реализацию удобного каталога с умным поиском, но и создание личного кабинета для покупателей, рабочего инструмента для монтажников и панели управления для дилеров. Всё это должно было работать на устройствах iOS и Android, сохраняя единый фирменный стиль и безупречную синхронизацию с веб-платформой. А теперь расскажем, как мы воплотили это в дизайне и коде.
Дизайн мобильных приложений Cooper&Hunter
Визуальная концепция и фирменный стиль
При разработке мобильных приложений для Cooper&Hunter мы сохранили визуальную идентичность бренда, заложенную ещё на этапе создания сайта интернет-магазина. Бело-синяя цветовая схема, знакомая пользователям веб-версии, стала основой интерфейса мобильных приложений.
Акцентный голубой цвет выделяет активные вкладки, кнопки действий и статусы заказов, тогда как нейтральный белый фон обеспечивает чистоту восприятия даже при большом объёме данных.
Шрифт Cera Compact Pro подобран с учётом читабельности как на крупных, так и на мобильных экранах. Заголовки карточек и разделов обладают достаточным «весом», чтобы сформировать визуальную иерархию, а основной текст технических характеристик остаётся лёгким для восприятия.
Иконки категорий выполнены в едином линейном стиле, что делает навигацию по объёмному каталогу интуитивно понятной.
Структура навигации приложения
Навигационное меню расположено в нижней части экрана и адаптируется в зависимости от роли авторизованного пользователя. Для потребителя доступны четыре вкладки — «Каталог», «Монтажи», «Обращения» и «Профиль». У дилера вместо «Обращений» появляется раздел «Объекты», а монтажник работает с тем же набором, что и потребитель, но с расширенным функционалом в разделе «Монтажи».
Такой подход к созданию приложения интернет магазина позволил избежать перегруженности интерфейса. Каждый пользователь видит лишь те разделы, которые нужны для его повседневных задач. При этом общая структура остаётся узнаваемой, поэтому пользователь не теряется в интерфейсе приложения.
Каталог и карточки товаров
Экран каталога построен как вертикальный список категорий с тематическими иконками и стрелками перехода. Каждая категория раскрывается в подкатегории, далее — в типы оборудования, серии и конкретные модели.
Такая многоуровневая структура зеркалит каталог веб-версии магазина, но при этом адаптирована под последовательную навигацию на мобильных устройствах: вместо сложного многоколоночного меню — один уровень на экран.
Карточка товара вмещает галерею с горизонтальным свайпом между изображениями, цену, выбор цвета (где это предусмотрено моделью) и три вкладки с техническими параметрами — «Питание», «Габариты» и «Спецификация». Возможность добавить модель в список «Избранное» реализована через иконку сердца в правом верхнем углу карточки. Раздел «Избранное» доступен с главного экрана каталога через отдельную соседнюю вкладку.
Поле поиска с автоподсказками размещено в верхней части каталога. Оно предлагает результаты ещё во время набора текста — категории, подкатегории и конкретные модели с миниатюрами. Рядом с полем ввода находится кнопка сканера штрихкодов, которая активирует камеру устройства для быстрого поиска товара по коду на упаковке.
Регистрация, авторизация и настройки профиля
Экран авторизации состоит из двух вкладок — «Вход» и «Регистрация». Регистрация предлагает заполнить имя, фамилию, телефон и email, а также выбрать желаемый профиль клиента — «Потребитель», «Монтажник» или «Проектант», — определяющий набор функций, доступных после авторизации. Для входа в мобильное приложение достаточно номера телефона и пароля с возможностью его быстрого восстановления.
В разделе «Профиль» пользователь видит свои контактные данные, а также настройки уведомлений, смены пароля и языка интерфейса. В соответствии с мультиязычностью веб-версии магазина Cooper&Hunter, в мобильном приложении доступны украинский, польский и английский.
Интерфейс личного кабинета покупателя
Личный кабинет пользователя со статусом «Потребитель» построен вокруг раздела «Монтажи». Его главный экран разделён на две вкладки — «Установленные» и «Запланированные». Карточка завершённого монтажа отображает номер, дату, адрес, место и оценку установки. Красный баннер предупреждает об утрате гарантии в случае пропущенной профилактики — заметный, но ненавязчивый визуальный акцент.
Детализированная карточка монтажа содержит три вкладки — «Оборудование», «История» и «Оценки». В первой вкладке покупатель видит модель, серийные номера, гарантийный срок и дату очередной профилактики с возможностью сразу её заказать.
Вкладка «История» хронологически фиксирует все сервисные события с перечнем выполненных работ — от первичного монтажа до финальной профилактики. Третья вкладка сохраняет оценки качества работ и общения с комментариями клиента.
Форма подачи обращения спроектирована лаконично — тема, текстовое сообщение и возможность прикрепить изображение. Ничего лишнего — всё, чтобы пользователь мог описать проблему и отправить заявку в считанные минуты.
Рабочая среда монтажника
Кабинет пользователя с ролью «Монтажник» превращает приложение в полноценный рабочий инструмент. Экран «Монтажи» здесь находится во вкладке «Запланированные» с возможностью фильтрации по статусу и дате.
Каждая карточка отображает тип работы (монтаж или профилактика), статус с цветным маркером, адрес и комментарии — собственные и клиентские.
Иконка календаря позволяет быстро просмотреть расписание монтажника на месяц. Экран календаря отображает сетку с цветными маркерами под датами, где синие штрихи обозначают запланированные монтажи, а красные — профилактики.
При клике на конкретный день в нижней части экрана появляется перечень работ с временными интервалами, номерами и типами задач. Так монтажник сразу видит загруженность своего расписания и может мгновенно оценить свободные окна без необходимости переключаться между экранами.
Подробная карточка монтажа либо профилактики предоставляет специалисту всю необходимую информацию для выезда — дату, адрес, контакты клиента, перечень оборудования и технические свойства объекта. Соответствующие кнопки позволяют монтажнику оперативно реагировать на новые заказы.
Процесс завершения монтажа спроектирован как пошаговая последовательность из трёх экранов. Сначала монтажник вносит названия и серийные номера установленного оборудования с возможностью добавления блоков и сканирования штрихкода.
Второй экран предусматривает заполнение дополнительных данных и технических деталей, а третий — подтверждение монтажа через SMS-код, отправленный на номер телефона клиента. Такая верификация гарантирует, что заказчик действительно доволен результатом, прежде чем монтаж получит статус «Завершено».
Внешний вид интерфейса завершённой профилактики несколько отличается и имеет собственный набор вкладок — «Оборудование», «Выполнено» и «Оценки». Вкладка «Выполнено» фиксирует перечень проведённых работ, а «Оценки» отображают обратную связь от клиента.
Интерфейс дилерского кабинета
Для создания личного кабинета дилера мы спроектировали расширенный раздел управления нарядами и сервисами.
Пошаговая форма создания наряда состоит из четырёх-пяти этапов в зависимости от его типа — монтаж или сервис. Когда дилер вводит номер телефона клиента, система автоматически находит зарегистрированного пользователя и подтягивает его данные. Затем дилер выбирает нужного специалиста из списка, оснащённого фильтрами и поиском.
Если монтажник не имеет соответствующего уровня сертификации, система предупреждает об этом с помощью модального окна. Следующие шаги предусматривают заполнение деталей оборудования и адреса объекта.
Разработка Android-приложения на Kotlin
Разработка Android приложений на Kotlin — осознанный выбор нашей команды для проекта Cooper&Hunter. Kotlin является официальным языком программирования, рекомендованным Google для платформы Android. Он сочетает выразительный синтаксис со встроенной защитой от распространённых ошибок, что по сравнению с альтернативами позволяет писать надёжный код с меньшим количеством строк.
Для масштабного приложения с десятками экранов и тремя различными ролями пользователей это критически важно, ведь более чистый код означает меньше багов и более простую поддержку в будущем.
Интерфейс на Jetpack Compose
Визуальная часть Android-приложения построена с помощью фреймворка Jetpack Compose — современного инструмента для создания интерфейсов от Google. В отличие от традиционного подхода с XML-разметкой, Compose позволяет описывать каждый элемент экрана на языке Kotlin непосредственно в коде. Благодаря этому интерфейс каталога, товарных карточек и пошаговых форм построен как набор компактных модулей-компонентов, каждый из которых можно повторно использовать на разных экранах. Это существенно ускоряет разработку и гарантирует одинаковый вид элементов во всём приложении.
Архитектура и управление зависимостями
Сложные мобильные приложения содержат десятки компонентов, которые постоянно обмениваются данными между собой — экраны обращаются к серверу, а сервер возвращает ответы, которые нужно обработать и отобразить. Чтобы эти связи оставались управляемыми и прозрачными, мы применили библиотеку Hilt. Она автоматически обеспечивает каждый компонент программы именно теми ресурсами, которые ему нужны, без ручного «связывания» частей кода между собой. Это означает, что добавление новых функций — скажем, ещё одного типа лицензий или дополнительного шага в форме заявки — не потребует переписывания существующего кода в будущем.
Обмен данными с сервером
Связь Android-приложения с серверной частью реализована с помощью фреймворка Ktor. Инструмент написан на языке Kotlin и органично вписывается в архитектуру проекта. Он отвечает за все сетевые запросы — загрузку каталога, авторизацию пользователя, получение списка монтажей, отправку обращений и любой другой обмен данными между смартфоном и бекендом интернет-магазина на Laravel.
Для функций, где важна мгновенная реакция, — в том числе обновления статусов монтажей и заявок — использована библиотека Socket.IO. В отличие от обычных запросов, где мобильное приложение запрашивает сервер и ждёт ответа, Socket.IO поддерживает постоянный двусторонний канал связи. Именно поэтому монтажник видит новую заявку в реальном времени, а потребитель сразу получает обновлённый статус обращения без необходимости обновлять экран вручную.
Push-уведомления
Оперативное информирование пользователей обеспечивает сервис Firebase Cloud Messaging (FCM) от Google. Монтажник получает push-уведомления о новых нарядах, потребитель — об изменении статуса заявок или приближении срока очередного обслуживания, а дилер — о принятых или отклонённых заказах.
Уведомления приходят даже тогда, когда приложение закрыто, что делает создание приложения интернет магазина полноценным каналом коммуникации между всеми участниками экосистемы C&H.
Сканер штрихкодов
Встроенный сканер штрихкодов реализован на основе двух технологий:
- ML Kit Barcode Scanner — библиотека машинного обучения от Google, которая анализирует изображения с камеры и распознаёт штрихкоды в реальном времени.
- Camera2 — API, предоставляющий полный контроль над камерой устройства Android — фокусировкой, экспозицией и обработкой кадров.
Вместе они позволяют монтажнику либо покупателю найти оборудование в каталоге, просто наведя камеру на упаковку, а при завершении монтажа — быстро считать серийные номера установленных блоков без ручного ввода.
Тестирование качества интерфейса
Отдельное внимание при создании мобильного приложения под Android мы уделили визуальному тестированию. Библиотека Roborazzi автоматически создаёт снимки каждого экрана приложения и сравнивает их с эталонными изображениями. Если после очередных изменений в коде хотя бы один элемент интерфейса сдвинулся, изменил цвет или исчез — система мгновенно сигнализирует об этом разработчику.
Для нас это надёжный способ убедиться, что обновление одной части программы не ломает вид другой, а для нашего клиента — гарантия, что каждая новая версия приложения сохраняет безупречный вид на любых устройствах Android.
Swift-разработка приложений под iOS
Разработка приложения для iOS — это второе направление проекта, реализованное параллельно с Android-версией C&H. Родной язык программирования Swift, созданный компанией Apple, отличается высокой производительностью, безопасностью работы с данными и интуитивным синтаксисом, что позволяет создавать надёжные приложения для iPhone с предсказуемым поведением на всех мобильных iOS-устройствах.
Архитектура на базе MVC и MVVM
Архитектура iOS-приложения построена на основе шаблона MVC (Model-View-Controller) с элементами MVVM (Model-View-ViewModel). MVC разделяет программу на три части — модель данных, визуальное представление и контроллер, связывающий их между собой. Элементы MVVM дополняют эту структуру более гибкой логикой обработки данных перед тем, как отобразить их на экране.
Такое сочетание обеспечивает масштабируемость приложения — добавление новых экранов или функций не нарушает работу реализованных разделов, а поддержка проекта останется удобной для любого разработчика.
Построение интерфейса через UIKit
В отличие от Android-версии, где интерфейс создавался с помощью Jetpack Compose, для разработки мобильного приложения под iOS мы применили UIKit — проверенную библиотеку нативных компонентов Apple. UIKit предоставляет готовый набор элементов интерфейса, соответствующих рекомендациям Apple Human Interface Guidelines. В результате кнопки, панели навигации, вкладки, поля ввода и другие компоненты выглядят привычно для всех пользователей iPhone.
Адаптивное расположение элементов на экранах разного размера реализовано через технологии Auto Layout и UIStackView. Auto Layout автоматически рассчитывает позицию и размер каждого элемента в зависимости от диагонали устройства, а UIStackView группирует компоненты в вертикальные и горизонтальные блоки, упрощая построение таких сложных форм, как экраны регистрации, карточки монтажа с несколькими вкладками либо пошаговое создание нарядов.
Списки категорий каталога, перечень моделей оборудования и карточки монтажей реализованы через UITableView и UICollectionView с кастомными компонентами. UITableView отвечает за вертикальные списки — категории, подкатегории, серии оборудования и запланированные работы. UICollectionView использован для сеточного отображения элементов — выбора цвета модели и галерей изображений в товарных карточках.
Анимации и визуальное взаимодействие
Плавные UI-анимации, сопровождающие переходы между экранами, раскрытие вкладок и реакции на касания пользователя, реализованы с помощью UIView.animate и Core Animation. Первая технология отвечает за простые анимационные эффекты — изменение прозрачности, перемещение элементов и масштабирование кнопок при нажатии. Core Animation берёт на себя более сложные визуальные сценарии — рендеринг и компоновку анимаций на уровне графического процессора устройства, что гарантирует высокую частоту кадров без нагрузки на основные вычислительные ресурсы смартфона.
Обмен данными с сервером
При создании приложения интернет магазина, который работает с тем же бекендом на Laravel, мы использовали Alamofire. Это HTTP-библиотека на базе языка Swift, которая упрощает сетевые запросы — авторизацию, загрузку каталога, получение списка монтажей, отправку обращений и любое другое взаимодействие приложения с серверной частью.
Парсинг полученных данных выполняется с помощью встроенного протокола Codable, который автоматически преобразует ответы сервера в удобные для программы структуры данных.
Асинхронная обработка сетевых запросов реализована с использованием GCD (Grand Central Dispatch) и современного механизма async/await. Это означает, что во время загрузки данных с сервера интерфейс приложения остаётся отзывчивым — пользователь может свободно листать каталог или просматривать другие экраны, пока в фоновом режиме происходит обмен данными.
Чат между пользователями
Модуль обмена сообщениями реализован с помощью библиотеки MessageKit — Swift-инструмента с открытым исходным кодом для создания чатов в приложениях для iOS.
MessageKit обеспечивает отправку и отображение текстовых и медиа-сообщений между потребителями, монтажниками и менеджерами платформы. Библиотека предоставляет готовые компоненты чата — поле ввода, индикаторы прочтения, пузыри сообщений — которые мы адаптировали под фирменный дизайн Cooper&Hunter.
Push-уведомления, аналитика и стабильность
Аналогично Android-версии, оперативное информирование пользователей мобильного приложения для iPhone обеспечивает Firebase. Однако для iOS-приложения интеграция с этим сервисом значительно шире и охватывает три направления:
- Firebase Push Notifications доставляет уведомления о новых заявках, смены статусов и напоминания о профилактике.
- Firebase Crashlytics автоматически фиксирует сбои программы, собирает и отправляет подробные отчёты об их причинах — так мы оперативно устраняем ошибки ещё до того, как они повлияют на большинство пользователей.
- Firebase Analytics собирает анонимную статистику использования приложения, что помогает бизнесу понять, какими разделами пользуются чаще всего и где стоит усовершенствовать интерфейс.
Мультиязычность и локальное хранение данных
Поддержка нескольких языков интерфейса — украинского, польского и английского — реализована через стандартный механизм Localizable.strings. Каждый текстовый элемент приложения хранится отдельно для каждого языка, а система автоматически подставляет нужный перевод в соответствии с выбранной локалью в настройках профиля.
Пользовательские настройки — язык приложения, параметры уведомлений и другие персональные предпочтения — сохраняются локально на устройстве через UserDefaults. Это позволяет запомнить выбор пользователя между сессиями без лишних обращений к серверу.
Управление зависимостями и контроль качества
Для подключения сторонних библиотек — Alamofire, MessageKit, Firebase и других — использованы менеджеры зависимостей Swift Package Manager и CocoaPods. Они автоматизируют загрузку, обновление и совместимость всех компонентов проекта между собой.
Контроль версий кода осуществляется через Git и GitHub, что обеспечивает прозрачную историю изменений и слаженную командную работу. Стабильность разработки iOS-приложений подкреплена автоматизированными тестами через XCTest и UI Tests. Первый проверяет внутреннюю логику программы, а второй имитирует действия реального пользователя, чтобы убедиться, что каждый экран и каждая кнопка работают именно так, как задумано.
Результаты создания приложения интернет магазина C&H
Cooper&Hunter получил два нативных приложения для Android и iOS, ставших полноценным продолжением веб-платформы интернет-магазина. Единый бекенд на Laravel, общее API и идентичный фирменный дизайн обеспечили бесшовную работу всей экосистемы: данные синхронизируются между сайтом и смартфонами в реальном времени, независимо от платформы и роли пользователя.
Среди ключевых достижений проекта — многоуровневый каталог со встроенным сканером штрихкодов, три типа личных кабинетов с различным функционалом, пошаговое создание и верификация монтажных нарядов через SMS, календарь работ для монтажников, система обращений и push-уведомлений, а также чат между участниками платформы.
Теперь монтажник управляет заявками прямо из кармана, дилер формирует наряды во время встречи с клиентом, а покупатель контролирует гарантию и заказывает профилактику оборудования в несколько касаний. Три разных рабочих сценария — в одном приложении для пользователей обеих мобильных платформ. Оцените результат на собственном опыте и загружайте приложение в и .
Комментарии