Мобильное приложение для оптовых продаж автозапчастей
Разработка мобильного приложения для B2B-компаний в современных реалиях становится важным инструментом оптимизации бизнес-процессов. Когда харьковская компания «Агромаркет» решила масштабировать свою онлайн-площадку E&ETURBOS на мобильные платформы, команда Webnauts принялась создать приложение для магазина запчастей с полным функционалом веб-версии.
Результатом стали нативные приложения на Android и iOS, превратившие оптовую закупку турбокомпрессоров в удобный процесс онлайн-заказа со смартфона. Мобильное приложение для B2B-магазина стало еще одним эффективным инструментом в исполнении Webnauts, доступным каждому покупателю и менеджеру E&ETURBOS.
Читайте также:
B2B интернет-магазин запчастей для турбокомпрессоровСодержание:
- Проект E&ETURBOS: от онлайн-магазина до создания мобильных приложений
- Задачи на пути к созданию мобильных приложений
- UX/UI дизайн мобильных приложений
- Функциональность мобильного приложения для e-commerce
- Разработка мобильного приложения на Android — нативная продуктивность для B2B-компаний
- Разработка мобильного приложения на iOS — премиальный опыт для пользователей iPhone
- Выводы
Проект E&ETURBOS: от онлайн-магазина до создания мобильных приложений
Компания «Агромаркет» — официальный дистрибьютор китайского производителя E&E Turbo. Это наш постоянный клиент, для которого мы ранее уже разработали мощный B2B интернет-магазин турбокомпрессоров и запчастей к ним, ориентированный на украинского и европейского потребителя.
Успех онлайн-платформ подтолкнул клиента к логическому шагу — заказать мобильное приложение, которое бы обеспечило доступ к каталогу запчастей и персональному кабинету прямо со смартфона.
Специфика разработки B2B приложений состояла в том, что пользователи — это не случайные покупатели, а профессионалы автосервисов, ежедневно работающие с заказами. Они нуждаются в сканировании и поиске запчастей по кодам производителей, отслеживании статусов заказов и сообщений о появлении нужных товаров в наличии. Поэтому разработка мобильного приложения для B2B-сегмента оправдывается повышением эффективности и удовлетворенности клиентов.
Задачи на пути к созданию мобильных приложений
Студия разработки мобильных приложений Webnauts получила задачу не просто реализовать функционал интернет магазина в элегантном формате, но и оснастить мобильное приложение функцией сканирования кода деталей.
Кроме того, разработка мобильных приложений для E&ETURBOS предусматривала реализацию:
- Каталога из 30 категорий, оснащенного поиском и фильтрацией товаров;
- Корзины с функцией сохранения данных;
- Личного кабинета пользователя и менеджера;
- Мультиязычности и мультивалютности;
- Интеграции с интернет-магазином.
UX/UI дизайн мобильных приложений
Разработка мобильных приложений начинается с продуманного дизайна. Команда Webnauts адаптировала фирменный стиль E&ETURBOS для мобильных экранов, улучшив юзабилити и укрепив узнаваемость бренда.
Минимализм в деталях
Белый и серо-голубой фон создает достаточное количество пространства и контраста для навигационных элементов акцентного синего цвета — цен, кнопок, иконок и ссылок. Структурированный контент и минималистичный шрифт Montserrat обеспечивают отличную читабельность на экранах разных размеров.
Микроанимация для улучшения взаимодействия
Плавный скролл страниц и тонкие эффекты при тапе на кнопки, товарные карточки и выпадающие списки дарят приятный опыт, сообщая пользователю об успешном взаимодействии с системой.
Удобная навигация для пользователей
По сравнению с вебверсией B2B магазина создание мобильных приложений требовало полного переосмысления навигации. Вместо горизонтального мегаменю в хедере мобильный интерфейс получил нижнюю панель навигации с основными разделами: каталог, корзина и профиль. Это позволяет менеджерам автосервисов легко найти нужные запчасти и оформить заказ в считанные минуты. Подробнее обо всем функционале приложения можно узнать уже в следующем разделе.
Функциональность мобильного приложения для e-commerce
Разработка мобильных приложений E&ETURBOS предусматривала два режима работы:
- полнофункциональный B2B-магазин — для авторизованных B2B-клиентов,
- сайт-каталог — для незарегистрированных пользователей.
Зарегистрировавшиеся и авторизовавшиеся в системе пользователи имеют личный кабинет, доступ к ценам и данным о количестве имеющихся товаров, а также возможность переключаться между валютами. Такой подход не только защищает коммерческую информацию компании, но мотивирует пользователей регистрироваться, чтобы получить все преимущества платформы.
Каталог продукции — сердце e-commerce приложения
Мобильное приложение для оптовых продаж E&ETURBOS нуждалось в структурированном каталоге из более чем 30 категорий товаров — от готовых турбокомпрессоров до мельчайших гаек. Оптимизация обширного каталога результировала в удобную систему навигации по тысячам товарных позиций.
Экран каталога представляет категории товаров как плитки с изображениями, заголовками и стрелками. Он оснащен функцией поиска и выпадающим списком товарного склада.
Поисковое поле позволяет находить товар не только по названию или №ТКР, но и по цифровому коду — достаточно навести камеру смартфона и отсканировать нужную запчасть. Система мгновенно подбирает нужные товары и тем самым ускоряет оформление заказа в приложении.
Страница категории с фильтрацией товаров
Мобильное приложение для e-commerce E&ETURBOS отображает категорию товаров как список с компактными карточками. Каждая карточка содержит не только фото, название, цену и количество товара на складе, но и числовой степпер с кнопкой для быстрого заказа.
Кроме поиска и выпадающего списка складов все товары можно фильтровать по наличию через ползунок, и по всем категориям — через радиокнопку.
Товарная карточка
Карточка товара в e-commerce приложении E&ETURBOS содержит всю необходимую информацию для авторизованных пользователей: название, цену и количество позиций на складе, а также фотослайдер, характеристики и таблицы совместимости запчастей с разными моделями турбин и автомобилей. Кроме того, страница товара имеет модуль с карточками запчастей, которые его составляют.
Оптимизированный процесс заказа
Мобильное приложение для B2B магазина E&ETURBOS было призвано обеспечить максимально простой и понятный процесс оформления и оплаты заказа. Для этого мы реализовали товарную корзину с автозаполнением личных данных из профиля и функцией сохранения шаблона для повторных заказов.
Личный кабинет пользователя
Профиль клиента
Разработка приложения для интернет-магазина E&ETURBOS предусматривала создание полноценного профиля для B2B-клиентов. В отличие от незарегистрированных пользователей авторизованные покупатели могут видеть не только цены в каталоге, но и персональные скидки, историю заказов и уведомления о наличии. Одноразовое заполнение разделов «Получатели» и «Приоритетные склады» помогает быстрее осуществлять все будущие закупки товаров.
Профиль менеджера
Одной из ключевых функций мобильного приложения стал личный кабинет для сотрудников онлайн-магазина E&ETURBOS. Теперь менеджеры могут отслеживать и обрабатывать заказы прямо с телефона. Хотя B2B продажи в E&ETURBOS автоматизированы, функции приложения позволяют управлять доставкой, редактировать статусы, предоставлять скидки, отправлять сообщения и создавать целые рассылки.
Поиск и удобные фильтры помогают быстро находить заказы, клиентов и компании по номеру, названию, статусу, менеджеру, дате и т. д.
Профиль администратора
Создание мобильных приложений позволяет администраторам интернет-магазина E&ETURBOS управлять продажами где и когда угодно. Персональный кабинет администратора имеет более широкие возможности и содержит дополнительные разделы, такие как «Менеджеры» и «Руководители склада», «Запросы» и «Сообщения», а также «Возвращение» заказов.
Мобильное приложение для e-commerce глазами незарегистрированных пользователей
Для пользователей, которые не прошли регистрацию, мобильное приложение для оптовых продаж E&ETURBOS работает как каталог товаров без цен, а раздел, где должен находиться персональный кабинет, представляет собой информационный хаб онлайн-магазина с формой для входа.
Доступ к полному функционалу B2B-платформы открывается после пошаговой регистрации. Чтобы не перегружать новых пользователей и повысить конверсию, мы разбили ее на три этапа, добавив индикатор прогресса.
Push-уведомления
По сравнению с интернет-магазином мобильное приложение для оптовых продаж имеет важное преимущество — мгновенные оповещения. Приложение B2B-магазина E&ETURBOS использует push-уведомления для информирования об акциях и скидках, новых и вновь доступных товарах, изменении статуса заказа и напоминаниях о незавершенных покупках.
Мультиязычность и мультивалютность
Мобильное приложение для автобизнеса E&ETURBOS работает на украинском и европейском рынке, поэтому наша команда позаботилась о поддержке шести языков (украинского, английского, польского, немецкого, французского, испанского) и четырех валют (гривны, злотого, доллара и евро).
Разработка мобильного приложения на Android — нативная продуктивность для B2B-компаний
Мобильная экосистема E&ETURBOS началась с создания приложения на Android. Для обеспечения максимальной продуктивности и полной интеграции с возможностями операционной системы, студия разработки мобильных приложений Webnauts использовала Kotlin 2.1.20 — новейшую версию языка программирования, рекомендованного Google.
Визуальный интерфейс приложения построен на фреймворке Jetpack Compose, который позволяет создавать динамические UI-компоненты, мгновенно реагирующие на изменения данных. Это особенно важно для приложения с каталогом товаров и онлайн оплатой, где цены и остатки обновляются в реальном времени.
Архитектура B2B-приложения
Разработка приложения для магазина автозапчастей E&ETURBOS требовала построения архитектуры, которая бы обеспечила четкое разделение логики интерфейса и бизнес-процессов. Поэтому мы реализовали Clean Architecture по паттерну MVVM (Model-View-ViewModel), а надежный доступ к базе данных реализовали с помощью библиотеки Room. Кроме того, она кэширует данные, позволяя приложению работать в условиях нестабильного интернета, что часто бывает в промышленных зонах, где обычно расположены автосервисы.
Для внедрения зависимостей использован фреймворк Koin, который делает код модульным и тестируемым. В том числе, с помощью Koin настраивается еще один фреймворк Ktor, который обеспечивает сетевое взаимодействие через REST API. Такая архитектура позволяет пользователям легко переключаться между украинским и европейским серверами интернет-магазина без дублирования кода.
Сканирование товаров
Разработка приложения для магазина автозапчастей не обошлась без новейших технологий Google. Мы реализовали уникальную функцию распознавания деталей с помощью мощного инструмента для работы с мобильной камерой ML Kit.
В результате мобильное приложение для автобизнеса E&ETURBOS не просто сканирует штрихкоды товаров, а распознает OEM-номера и другие серийные коды на упаковках и корпусах турбокомпрессоров. Автомеханики могут навести камеру на изношенную деталь, распознать код и мгновенно найти ее в каталоге приложения.
Анимация в приложении на Android
Благодаря возможностям Jetpack Compose, а именно инструменту compose.animation, мы добавили мобильному приложению интерактивности. Нажатие на кнопки, ползунки, карточки и фото сопровождаются плавными эффектами, такими как заливка цвета и изменение размера элементов.
При тапе выпадающие списки поочередно разворачиваются с эффектом elevation, изменяя свой цвет, а тач на карточки категорий вызывает прелоадер, информирующий пользователя о процессе загрузки товаров.
Как видим, анимация в мобильном приложении не только визуально подтверждает действия пользователей, но и создает ощущение живого и респонсивного интерфейса.
Контроль качества через автоматизацию
Разработка мобильного приложения в компании Webnauts означает не просто рабочий, но и качественный продукт. Для Android-версии E&ETURBOS мы настроили комплексную систему анализа кода с помощью инструментов:
- Detekt, который проверяет код на соответствие best practices Kotlin и выявляет потенциальные проблемы производительности;
- KtLint, который обеспечивает единый стиль кода в соответствии со стандартами Kotlin Code Conventions;
- Android Lint, который сканирует код на наличие ошибок, и Compose Rules, гарантирующий оптимальное использование Jetpack Compose для построения нативного интерфейса на Android.
B2B-платформы, предусматривающие финансовые операции, требуют безупречной безопасности. Поэтому в разработке мобильного приложения мы применили GitLeaks — инструмент, который автоматически сканирует код, предотвращая потенциальные взломы и утечки конфиценционных данных. Обновлять мобильное приложение для e-commerce без каких-либо ошибок и задержек позволяет CI/CD автоматизация по тестированию каждого релиза.
Таким образом, мобильное приложение на Android стало мощным инструментом для B2B-клиентов E&ETURBOS, объединив передовые технологии с практическими потребностями автобизнеса.
Разработка мобильного приложения на iOS — премиальный опыт для пользователей iPhone
Разработка приложений на Android и iOS для B2B-магазина E&ETURBOS предполагала создание равноценных по функционалу, но уникальных по реализации платформ. Для устройств iOS команда Webnauts выбрала нативную разработку приложения на языке Swift, чтобы обеспечить премиальный пользовательский опыт и использовать возможности экосистемы Apple на максимум.
Архитектура для долгосрочного развития
Разработка мобильных приложений для сектора B2B требует продуманной архитектуры. Чтобы обеспечить четкое распределение ответственности между компонентами и упростить добавление новых функций в будущем, мы реализовали гибридный подход к организации кода и спроектировали модульную структуру с помощью архитектурного шаблона MVC с элементами MVVM.
UIKit — фундамент мобильного приложения под iOS
Основой для создания интерфейса приложения на iOS стал набор инструментов UIKit. Так, данные в виде списков и сеток были реализованы с помощью компонента UITableView (например, таблицы с характеристиками товаров), а кастомные ячейки, созданные через UICollectionView, стали основой для отображения товарного каталога.
Инструмент Auto Layout в сочетании с UIStackView позволили создать действительно адаптивный интерфейс, который элегантно масштабируется под размеры дисплея — от компактного iPhone SE до крупного iPad Pro — динамически перестраивая расположение всех элементов.
Анимации по стандартам Apple
Создание мобильных приложений на iOS не обходится без фирменных анимаций Apple. Следуя Human Interface Guidelines, мы обеспечили естественный для поклонников iPhone пользовательский опыт. Например, метод UIView.animate позволил реализовать плавные эффекты появления объектов, а Core Animation — приветственную анимацию логотипа E&ETURBOS.
Распознавание кодов с помощью камеры
Мобильное приложение на iOS тоже имеет функцию сканирования штрихкодов автозапчастей, важную для работы в реальных условиях автомастерских. Фреймворк AVFoundation позволяет камере iPhone распознавать OEM-номера — специфические маркировки турбокомпрессоров и деталей к ним. Следовательно, поиск товаров в приложении упрощается в разы: вместо ручного ввода длинных артикулов автомеханик просто наводит камеру на поврежденную турбину и мгновенно получает список подходящих запчастей — з актуальними цінами, кількістю на складах і сумісністю з конкретними моделями авто.
Сетевое взаимодействие с интернет-магазином
Интеграция приложения с сайтом E&ETURBOS реализована через сетевую Swift-библиотеку Alamofire, а парсинг данных с сервера B2B магазина происходит через протокол Codable, который автоматически преобразует JSON-ответы в Swift-объекты, минимизируя вероятность ошибок.
Мобильное приложение для e-commerce требует высокой ресурсоемкости операций и надежной обработки данных. Мы обеспечили такой результат с помощью фреймфорка GCD (Grand Central Dispatch) и синтаксического сахара async-await, которые позволяют обрабатывать запросы асинхронно, то есть загружать данные в фоновом режиме. К примеру, пока обновляются цены либо синхронизируются остатки на складах, пользователь может параллельно просматривать товарный каталог. В случае потери соединения мобильное приложение автоматически ставит запросы в очередь и выполняет их после восстановления сети.
Аналитика и коммуникация в приложении
Облачная платформа для мобильной разработки от Google Firebase дала нам мощные инструменты для сбора данных и взаимодействия с пользователями, в том числе:
- Firebase Cloud Messaging — для реализации push-уведомлений об изменении статуса заказов, новых поступлениях, скидках и т. п.;
- Firebase Analytics — для отслеживания поведения пользователей в реальном времени;
- Firebase Crashlytics — для мгновенного обнаружения сбоев и ошибок.
Локализация и персонализация
Поддержка шести языков через Localizable.strings и четырех европейских валют делает мобильное приложение E&ETURBOS доступным для широкой аудитории.
Все персональные настройки пользователя, такие как язык приложения, выбранная валюта либо данные профиля, сохраняются в UserDefaults.
Автоматизация релизов
Разработка мобильного приложения на iOS не заканчивается публикацией в . Для эффективной поддержки и обновления приложения мы автоматизировали тестирование и развертывание новых версий с помощью технологии CI/CD (Continuous Integration/Continuous Deliver) с использованием GitHub Actions и Fastlane.
Для проверки новых функций перед каждым релизом мы используем фреймворк для написания и запуска UI и unit-тестов XCTest, а для оптимизации процесса разработки — менеджеры управления зависимостями Swift Package Manager и CocoaPods, и системы управления версиями приложения Git и GitHub.
Выводы
Разработка мобильных приложений стала логическим продолжением B2B-платформы E&ETURBOS и сотрудничества с украинской компанией «Агромаркет». Опираясь на опыт разработки мультиязычного и мультивалютного B2B-магазина, нам удалось создать функциональные нативные приложения на Android и iOS. Однако мы не просто перенесли мощность онлайн-площадки в карманы закупщиков и автомехаников, а создали возможность сканирования штрихкодов с помощью мобильной камеры, что значительно сократило время на поиск запчастей.
Читайте также:
B2B интернет-магазин запчастей для турбокомпрессоровТеперь мобильное приложение обеспечивает положительный опыт не только для B2B-клиентов из Украины и Европы, но и для сотрудников интернет-магазина E&ETURBOS. Благодаря личному кабинету клиенты отслеживают онлайн-заказы и принимают push-уведомления, а менеджеры и администраторы компании получают полную мобильность и автоматизацию бизнес-процессов без привязки к офису.
Сочетание технической экспертизы с пониманием специфики автобизнеса позволило создать удобный инструмент, который ежедневно упрощает работу владельцев автосервисов и повышает лояльность клиентов E&ETURBOS.
Мобильное приложение для e-commerce уже оценили сотни пользователей Android и iOS. Загружайте приложение в и и убедитесь в этом сами.
Комментарии