Мобільний додаток для гуртових продажів автозапчастин
Розробка мобільного додатка для 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-платформи відкривається після покрокової реєстрації. Щоб не перевантажувати нових користувачів і підвищити конверсію, ми розбили її на 3 етапи, додавши індикатор прогресу.
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. Завантажуйте застосунок в і та переконайтеся в цьому самі.
Комментарии