Мобільний додаток на iOS та Android для доставки дизеля
Про проект
Навесні 2022 року ми взяли участь у реалізації стартапу київської мережі заправних станцій DiDiDo — створенні мобільного додатку для доставки дизеля оптом. Продукт унікальний і поки що не має аналогів в Україні. Все, що ми мали на початку — ідею замовника та логотип. Тому перед нами стало завдання з нуля розробити iOS- і Android-додаток для споживачів пального та підготувати продукт до релізу.
Завдання
Мета стартапу — створити мобільні додатки, що дозволяють швидко та зручно замовити доставку дизеля в Києві та Київській області. Для її досягнення нам було потрібно:
- Спроєктувати дизайн інтерфейсу і зрозумілу логіку додатка.
- Реалізувати програму для користувачів iPhone та Android-пристроїв.
- Інтегрувати сервіси для ідентифікації клієнтів.
- Налаштувати функцію безготівкової оплати.
- Здійснити можливість автоматичного формування документів.
- Протестувати та завантажити додатки на маркетплейси.
UX / UI дизайн додатка
Вебдизайнер у зв’язці з UX-райтером і проджект-менеджером продумали механіку замовлення та спроєктували сторінки на різних етапах взаємодії з користувачем.
Реєстрація / Авторизація
Завантаживши додаток в Google Play чи App Store, користувача зустрічає екран реєстрації чи авторизації з функціями відновлення пароля:
Реєстрація можлива за трьома сценаріями залежно від статусу клієнта:
Це пов’язано з правилами здійснення безготівкових розрахунків, що впливає на вигляд форми, зміст і перелік накладних, які автоматично формуються додатком після кожного замовлення (товарно-транспортна, видаткова та акцизна). Зауважимо, що перед кожним виїздом на точку заправки водій повинен роздрукувати товарно-транспортну накладну, сформовану на основі заявки клієнта. Крім того, замовник укладає договори з фізичними особами-підприємцями та юридичними особами. Звісно, всі ці тонкощі ми передбачили в розробці додатків.
1) Реєстрація фізичної особи передбачає реєстрацію за допомогою індивідуального податкового номера. Ця інформація потрібна для ідентифікації клієнта та формування товарно-транспортної й видаткової накладної. Наразі ми очікуємо дозвіл на реалізацію технології BankID, яка надалі полегшить процес реєстрації й авторизації та звільнить користувачів від необхідності ручного введення податкового номера.
Для фізичних осіб оплата здійснюється за допомогою особистої банківської картки.
2) Реєстрація фізичної особи-підприємця, крім податкового номера РНОКПП, потребує додаткової інформації: назви банку та номера рахунку IBAN. Це потрібно для автоматичного формування договору, товарно-транспортної, видаткової й акцизної накладної. Ідентифікація клієнта відбувається через сервіс моніторингу реєстраційних даних українських компаній OpenData.
Оплата послуг здійснюється з поточного рахунку фізичної особи-підприємця.
3) Реєстрація юридичної особи також потребує інформації про податковий номер, назву банку та банківський рахунок IBAN. Знову ж таки верифікація відбувається через OpenData. Інтегрувавши цю технологію, ми полегшили клієнту заповнення й без того довгої реєстраційної форми, адже при введенні ЄДРПОУ автоматично підтягується назва, адреса компанії та ПІБ керівника. Надалі після заповнення форми додаток автоматично формує необхідний перелік документів (договір і накладні) на кожне замовлення.
Юридичні особи сплачують доставку пального з поточного бізнес-рахунка.
Ми піклуємось про захист особистих даних користувачів, тому кожен етап реєстрації передбачає перевірку пошти, мобільного та податкового номера клієнта через спеціальний код підтвердження:
Профіль користувача доволі мінімалістичний і містить декілька розділів: «Профіль», «Особовий рахунок», «Архів замовлень» та «Інструкція». Не зважаючи на те, що додаток автоматизований, він має «Службу підтримки» та функцію «Подзвонити нам»:
Замовити пальне можна 2-ма способами: доставка чи самовивіз.
Передбачає доставлення пального в межах Києва та Київської області. До того ж, доставку можна запланувати на певний день і час:
Під час оформлення заявки клієнт, окрім адреси, вказує кількість точок зливу та необхідний літраж пального, а також може оплатити замовлення онлайн і залишити відгук.
1) Замовлення:
2) Очікування водія:
3) Процес заправки:
Ба більше: додаток також пропонує можливість вводу координат. Зручне рішення незручних ситуацій, коли клієнт-водій не має ні пального, ні уявлення про своє місцезнаходження:
Доставку пального на далекі відстані можна вирішити індивідуально через додаткову заявку:
Другий спосіб замовлення пального — самовивіз, — відбувається за принципом розміщення заявки та бронювання найближчого паливовоза на карті в режимі реального часу.
1) Замовлення:
2) Самовивіз і заправка:
iOS-додаток був створений для клієнтів автозаправних станцій DiDiDo за допомогою мови Swift.
Функціональність додатка спроєктована на основі архітектурного шаблону MVC, який складають 3 компоненти:
Для передачі та отримання даних був використаний фреймворк Alamofire, який дозволяє виконувати запити у фоновому режимі, не перешкоджаючи роботі додатка.
Дизайн був відтворений за допомогою графічної програми Figma з точністю до пікселя, що забезпечило високу якість відображення макетів у реальному додатку.
Користувальницький інтерфейс розроблений за допомогою фреймворку UIKit, який містить в собі набір елементів (іконок, кнопок, таблиць, списків тощо), який відповідає стилістиці Apple.
Для відображення анімацій у режимі реального часу була використана бібліотека Lottie. У створенні динамічного і плавного інтерфейсу допоміг ще один фреймворк — Core Animation, який оптимізує процес відтворення візуальних ефектів і, відповідно, покращує досвід користувачів.
У розробці iOS-додатка також були використані такі фреймворки, як:
Під час розробки додатка стали в пригоді Google-сервіси:
У розробці додатків ми використали мову Kotlin, відому своєю кросплатформністю, тобто можливістю працювати на різних операційних системах: Android, iOS, macOS, Windows, Linux абощо.
Проєктуючи архітектуру додатка для Android, ми використали шаблон MVVM (Model-View-ViewModel), який, подібно до вищезгаданого MVC, ділить програму на 3 функціональні частини. Різниця в тому, що MVVM має гнучкішу логіку та ширші можливості структурування програми.
Інтерактивний користувальницький інтерфейс створений за допомогою фреймворку Jetpack Compose, який «дружить» із Kotlin і дозволяє легко змінювати стилі та теми оформлення застосунку.
Фреймворки Retrofit 2 і бібліотека Socket.IO забезпечують надійний зв’язок між клієнтом і сервером без великої затримки та навантаження на додаток.
Анімаційні ефекти відтворені завдяки бібліотеці Lottie. Крім неї були використані й інші бібліотеки:
Оплата за доставку пального здійснюється через інтеграцію додатка із сервісом LiqPay.
Окрім уже згаданих Google-сервісів Maps і Firebase був також використаний інструмент Places API. Він значно розширює можливості взаємодії додатка з геопросторовими даними, а саме дозволяє знаходити локації за адресою, координатами чи іменем і отримувати про них додаткову інформацію.
Оформлення заявки
Доставка
Самовивіз
iOS-розробка додатка
Розробка додатка на Android