Мобільні застосунки для інтернет-магазину кліматичного обладнання
Розробка мобільних додатків для великого бізнесу — це завжди виклик, особливо коли йдеться про екосистему, в якій взаємодіють тисячі людей із різними ролями та завданнями. Саме з таким проєктом до нас звернувся провідний виробник кліматичного обладнання Cooper&Hunter Україна. Щоправда, після розробки повнофункціонального інтернет-магазину на Laravel, про який ми детально розповіли в окремому кейсі.
Цього разу перед нами постало нове амбітне завдання — розробка застосунків інтернет магазину під Android та iOS, які б органічно доповнили вебплатформу та дали змогу споживачам, дилерам і монтажникам працювати з системою просто зі смартфона.
Читайте також:
Інтернет-магазин кліматичного обладнанняПро новий проєкт для Cooper&Hunter — розробка мобільних додатків онлайн-магазину
Cooper&Hunter — американський бренд, який виробляє побутові й промислові кондиціонери, теплові насоси, системи вентиляції й інше кліматичне обладнання. В Україні компанія працює через широку мережу офіційних дилерів і сертифікованих монтажників, обслуговуючи тисячі клієнтів у всій країні.
Після інтернет-магазину на Laravel, який об’єднав каталог товарів, багаторівневу систему особистих кабінетів і панель адміністратора, наступним логічним кроком стала розробка додатків для мобільних пристроїв. Бізнес потребував інструменту, яким зручно користуватися будь-де: монтажнику на виїзді, дилеру під час зустрічі з клієнтом, а покупцю — просто вдома на дивані.
Вебверсія магазину вирішувала ці завдання лише частково, адже нативний мобільний застосунок забезпечує інший рівень взаємодії — чуйний інтерфейс, push-сповіщення, доступ до камери для сканування штрихкодів і значно комфортнішу роботу без прив’язки до браузера.
Важливо, що мобільний застосунок інтернет-магазину C&H — це не спрощена копія сайту, а повноцінний робочий інструмент з ідентичною бізнес-логікою та тим самим фірмовим дизайном. Спільний бекенд на Laravel і єдине API гарантують синхронність даних між вебплатформою та застосунками. Тобто монтажник, який прийняв заявку через застосунок, бачить ту саму інформацію, що й менеджер в адмінпанелі магазину.
Ключові завдання зі створення мобільних додатків
Перед командою Webnauts постало комплексне технічне завдання — розробка мобільних додатків для двох платформ із функціоналом вебверсії онлайн-магазину. Крім багаторівневого каталогу зі сканером штрихкодів майбутній застосунок мав стати зручною точкою входу для трьох груп користувачів, кожна з яких потребувала свого набору інструментів:
- Особистий кабінет покупця — з можливістю реєструвати придбане обладнання, переглядати історію сервісного обслуговування, відстежувати гарантійні терміни та дати чергової профілактики. Також кабінет користувача мав уможливити подання звернень через чат, а також замовлення й оцінювання монтажних робіт.
- Особистий кабінет монтажника — з обробкою поточних замовлень у реальному часі, календарем запланованих робіт і рейтингом щодо якості наданого сервісу після кожного виїзду. Завершення монтажу чи профілактики мало бути затверджено клієнтом через SMS-код.
- Особистий кабінет дилера, де поряд з опрацюванням звернень було б доступне покрокове створення нарядів — від внесення даних клієнта та параметрів обладнання до вибору монтажника відповідно до типу та рівня ліцензії.
Фактично розробка додатків для інтернет магазину Cooper&Hunter передбачала не лише реалізацію зручного каталогу з розумним пошуком, а й створення особистого кабінету для покупців, робочого інструменту для монтажників і панелі управління для дилерів. Усе це мало працювати на пристроях iOS і Android, зберігаючи єдиний фірмовий стиль і бездоганну синхронізацію з вебплатформою. А тепер розповімо, як ми втілили це в дизайні та коді.
Дизайн мобільних додатків Cooper&Hunter
Візуальна концепція та фірмовий стиль
Під час розробки мобільних додатків для Cooper&Hunter ми зберегли візуальну ідентичність бренду, закладену ще на етапі створення сайту інтернет магазину. Біло-синя колірна схема, знайома користувачам вебверсії, стала основою інтерфейсу мобільних застосунків.
Акцентний блакитний колір виділяє активні вкладки, кнопки дій і статуси замовлень, тоді як нейтральний білий фон забезпечує чистоту сприйняття навіть за великого обсягу даних.
Шрифт Cera Compact Pro підібраний з огляду на читабельність як на великих, так і мобільних екранах. Заголовки карток і розділів мають достатню «вагу», щоб сформувати візуальну ієрархію, а основний текст технічних характеристик залишається легким для сприйняття.
Іконки категорій виконані в єдиному лінійному стилі, що робить навігацію великим каталогом інтуїтивно-зрозумілою.
Структура навігації застосунку
Навігаційне меню розташоване у нижній частині екрана й адаптується залежно від ролі авторизованого користувача. Для споживача доступні чотири вкладки — «Каталог», «Монтажі», «Звернення» і «Профіль». У дилера замість «Звернень» з’являється розділ «Об’єкти», а монтажник працює з тим самим набором, що й споживач, проте з розширеним функціоналом у розділі «Монтажі».
Такий підхід до створення додатку інтернет магазину дозволив уникнути перевантаження інтерфейсу. Кожен користувач бачить лише ті розділи, що потрібні для його щоденних завдань. Водночас загальна структура залишається впізнаваною, тому користувач не губиться в інтерфейсі застосунку.
Каталог і товарні картки
Екран каталогу побудований як вертикальний список категорій з тематичними іконками та стрілками переходу. Кожна категорія розгортається в підкатегорії, далі — у типи обладнання, серії та конкретні моделі.
Така багаторівнева структура дзеркалить каталог вебверсії магазину, але водночас адаптована під послідовну навігацію на мобільних пристроях: замість складного багатоколонкового меню — один рівень на екран.
Картка товару вміщує галерею з горизонтальним свайпом між зображеннями, ціну, вибір кольору (де це передбачено моделлю) і три вкладки з технічними параметрами — «Живлення», «Габарити» та «Специфікація». Можливість додати модель до списку «Обране» реалізована через іконку серця в правому верхньому куті картки. Розділ «Обране» доступний із головного екрана каталогу через окрему сусідню вкладку.
Поле пошуку з автопідказками розміщене у верхній частині каталогу. Воно пропонує результати ще під час набору тексту — категорії, підкатегорії та конкретні моделі з мініатюрами. Поруч із полем введення знаходиться кнопка сканера штрихкодів, яка активує камеру пристрою для швидкого пошуку товару за кодом на упаковці.
Реєстрація, авторизація та налаштування профілю
Екран авторизації складається з двох вкладок — «Вхід» і «Реєстрація». Реєстрація пропонує заповнити ім’я, прізвище, телефон та імейл, а також вибрати бажаний профіль клієнта — «Споживач», «Монтажник» або «Проєктант», — який визначає набір функцій, доступних після авторизації. Для входу в мобільний застосунок достатньо номера телефону та пароля з можливістю його швидкого відновлення.
У розділі «Профіль» користувач бачить свої контактні дані, а також налаштування сповіщень, зміни пароля та мови інтерфейсу. Відповідно до мультимовності вебверсії магазину 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-сповіщень, а також чат між учасниками платформи.
Тепер монтажник керує заявками просто з кишені, дилер формує наряди під час зустрічі з клієнтом, а покупець контролює гарантію та замовляє профілактику обладнання за кілька дотиків. Три різні робочі сценарії — в одному застосунку для користувачів обох мобільних платформ. Оцініть результат на власному досвіді та завантажуйте додаток у та .
Комментарии