Whizzy — логістичний додаток для послуг доставки

Завдання

Whizzy — це служба доставки товарів, що працює в країнах Близького Сходу. Завдання Stfalcon полягало в створенні з нуля мобільних додатків для iOS та Android двома мовами: арабською та англійською. Крім того, необхідно було розробити адмін панель і дизайн сайту для залучення клієнтів.

Платформа Whizzy складається з двох додатків: для клієнтів і для водіїв. Клієнти формують замовлення і обирають водіїв, які будуть їх виконувати. Водії шукають необхідні предмети і виконують заявки.

Whizzy складається з:

• Додатка для Android і iOS для клієнта,
• Додатка для Android і iOS для водія,
• Панелі адміністратора,
• Інтернет сайту.

Рішення

Під час виконання проєкту для Whizzy, Stfalcon реалізував наступні етапи:

• Дослідження,
• UX / UI дизайн,
• Backend розробка,
• Frontend розробка,
• Розробка під iOS и Android,
• Мануальне тестування.

Команда Stfalcon розпочала роботу над проєктом з етапу дослідження, щоб з'ясувати потреби двох категорій користувачів, зрозуміти контекст використання сервісу і, як наслідок, створити шлях користувача, призначені для користувача історії, і концепцію продукту. Це було необхідно для загального розуміння проєкту, його оцінки і надання клієнту план-графіка розробки програмного рішення.

На основі призначених для користувача історій, які ми отримали під час дослідження, ми розділили додаток на дві версії. Перша повинна була стати продуктом з мінімально необхідним функціоналом (MVP), а друга версія повинна бути розроблена з додатковими функціями після запуску MVP.

Ключові функції в MVP

Додаток для замовника

Клієнти — це люди, яким потрібна допомога з переїздом, транспортуванням дрібних предметів або навіть продуктів харчування. Для цього їм потрібно: вибрати дату і час доставки, бути на зв'язку з водієм, відстежувати відправлення в реальному часі, бути впевненими в цілісності своїх речей. Зважаючи на ці потреби, ми виділяємо найбільш важливі функції для MVP:

• Швидка реєстрація за номером телефону,
• Створення замовлення: вибір адреси, вибір дати і часу, інфо про одержувача, додавання фото посилки, вибір типу машини, додаткова допомога вантажників,
• Вибір водія, який пропонує кращу ціну,
• Можливість оплати,
• Відстеження замовлень у реальному часі,
• Список активних замовлень,
• Підтримка.

Вибір часу

Вибір часу Нативний TimePicker — це просте, швидке в розробці рішення з мінімалістичним і зрозумілим інтерфейсом. Але ми вирішили піти далі. У цьому проєкті користувачу було б зручніше бачити найпопулярніші години замовлень, тому ми відключили нічний час і залишили проміжок з 8:00 до 20:00 години. Це дозволило зменшити кількість дій. Для стандартного TimePicker потрібно 5 дій, а реалізовані нами тайм-слоти вимагають лише одну дію. Ми не тільки оптимізували екран вибору часу, а й прискорили цей процес у 5 разів.

Додаток для водія

Водії — це люди, які хочуть отримати додатковий заробіток за допомогою свого легкового чи вантажного автомобіля. Їм важливо встановлювати власну вартість доставки, шукати замовлення поруч із поточним місцезнаходженням, бути на зв'язку з клієнтом. Тому найбільш важливими функціями для MVP ми виділили наступні:

• Реєстрація з перевіркою документів,
• Пошук замовлення,
• Запит з пропозицією ціни і очікування підтвердження,
• Виконання замовлення з різними статусами,
• Список активних замовлень,
• Підтримка

Логотип

Ми створили простий символ дороги у вигляді літери і стрілок, що позначають різні способи доставки. Це лаконічний символ, його легко запам'ятати. Розроблений у 2020 році логотип можна використати у друкованій продукції і цифровій рекламі, він читабельний як на великому рекламному щиті, так і на компактному банері в Instagram. На разі у 2022 році цей символ є недоречним в Україні, тому ми вилучили його з нашого портфоліо і замінили на лого з назвою.

Розробка

• Android
• iOS
• Backend для додатків
• Backend для панелі адміністратора

Backend для додатків

Backend для мобільних додатків реалізований за допомогою сервісу RESTful API. Основними backend-технологіями, які ми використали, були PHP 7.4 і Symfony 5.1. Ми використовували новітні версії PHP і Symfony, які були доступні на момент реалізації проєкту. Це допомогло створити кращу внутрішню архітектуру і відкрило ширші можливості при розробці. Також ми скористалися Postgres, Redis і RabbitMQ, ми добре знаємо ці інструменти, і вони дозволяють нам вирішувати необхідні завдання.

Предметне середовище додатка Whizzy пов'язане з переходом між статусами замовлень. У кожному замовленні їх 10, і перехід до кожного нового статусу здійснюється з різною логікою і діями (відправка сповіщень, перевірка можливостей переходу, асинхронні фонові завдання, бухгалтерія і т.д.).

На backend це реалізовано за допомогою компонента Symfony Workflow, який дозволяє описувати всі можливі статуси і переходи між ними. Крім того, ви можете реалізувати підказки для переходу від одного статусу до іншого, позначивши бізнес-логіку, яка повинна виконуватися в даній ситуації.

Постійні зміни статусу замовлення вимагають передачі оновлень з сервера клієнту. Для цього ми використали сервер веб-сокетів Centrifugo.

Крім того, у користувачів мобільного додатка Whizzy є можливість оплатити доставку платіжною карткою. Для цього була інтегрована платіжна система Tap, що працює в Близькосхідному регіоні.

Автоматичні тести також є важливою частиною серверної частини. API-виклики і всі внутрішні сервіси покриваються модульними тестами, функціонал адмін-панелі покривається функціональними тестами, разом ці тести дають 100% тестове покриття коду.

Backend для панелі адміністратора

Для адміністраторів додатка ми реалізували особистий кабінет, де вони можуть управляти сервісом, робити необхідні налаштування і переглядати звіти. Особистий кабінет також реалізований на Symfony з використанням EasyAdminBundle.

В процесі розробки проєкту була випущена нова версія Bundle 3.0, і ми використовували саме її. EasyAdminBundle дозволяє швидко й легко налаштувати основні операції. Крім того, завдяки збереженню Symfony підходів у своїй архітектурі, бандл дозволяє зручну кастомізацію відповідно до потреб проєкту.

Мобільні додатки

• Android
• iOS

Ми здійснили розробку мобільних додатків на основі модульної архітектури, відповідно до принципів чистої архітектури. Ми також використовували архітектуру MVVM для модулів презентації та бібліотеку впровадження залежностей для управління ними.

Це дозволило нам уникнути дублювання бізнес-логіки в версіях додатків для водія і для клієнта. Крім того, це значно спрощує розробку і супровід нових функцій у майбутньому.

Android App

Для платформи Android ми використовували Kotlin і Coroutines, оскільки сьогодні це — передові технології в розробці рішень Android Native. Дані програми оновлюються в реальному часі за рахунок реалізації з'єднання WebSocket на основі бібліотеки Centrifuge. Оскільки бібліотека Centrifuge-Android досить нестабільна, ми розробили власну реалізацію підключення до Centrifugo за допомогою бібліотеки Scarlet.

iOS app

Додаток iOS використовує бібліотеку SwiftCentrifuge для підключення до сокета, проте в дещо модифікованому вигляді. Мобільні додатки підтримують інтерфейс справа наліво, оскільки вони мають арабську локалізацію. Ми керувалися рекомендаціями щодо матеріального дизайну і використовували найкращі практики розробки інтерфейсу, призначеного для користувача. Це дозволило нам додати підтримку інтерфейсів LTR, RTL і BiDirectional без будь-яких проблем і витрат часу.