Як ми створили вебверсію додатка за 10% від запланованого часу за допомогою AI

💡 Усі статті, обговорення, новини про Mobile — в одному місці. Приєднуйтесь до Mobile спільноти!

Перетворення мобільного застосунку на веб-версію часто сприймається як окремий великий проєкт. Саме так було у випадку з Dovkolo Club, мобільному застосунку, створеному спеціалістами Sigma Software, що успішно працює з 2023 року. Dovkolo Club — це платформа, що поєднує українців і українські бізнеси по всьому світу.

Виклик

Нам потрібна була веб-версія з таким само функціоналом, як у мобільному застосунку, але з мінімальними інвестиціями — щоб після запуску сайту (це в процесі) перевірити гіпотезу, що це покращуватиме користувацький досвід.

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

Початкова оцінка на інших розповсюджених UI фреймворках була 400+ годин на дизайн, верстку та розробку.

Тому, замість того, щоб йти традиційним шляхом, один з наших розробників вирішив поекспериментувати з генерацією коду за допомогою АІ. В чому інтрига? Це був мобільний розробник :)

Підхід

• Інструмент: Cursor, AI-асистент для генерації коду. Насправді, будь-який інший AI-асистент міг би також бути обраним, але команда вже мала досвід саме з цим.

• Початкова точка: мобільний застосунок на Flutter та Node.js, що ми використали як джерело бізнес-логіки.

• Процес:
  — Спочатку ми планували використовувати Swagger, але основна бізнес-логіка закладена у коді застосунку, тому це не спрацювало і цей варіант відкинули.
  — Ми надали Cursor доступ до наявної кодової бази мобільного застосунку та генерували функціонал веб-версії сторінка за сторінкою, застосовуючи принципи вебдизайну в процесі.
  — Автентифікація та інші основні функції мали бути реалізовані подібно до мобільної версії. Оскільки бізнеслогіка вже була закладена в мобільному застосунку, АІ зосередився на її переносі та адаптації під вебплатформу.
  — Після генерації кожної фічі витрачали 15-30 хвилин на рев’ю.
  — Технології: React + TypeScript, API з бекенду.
  — Дизайн: Cursor створив базовий варіант, але ми залучили дизайнера, щоб покращити UX — «дати йому трохи любові», як сказав дизайнер J. Навіть попри чіткі інструкції протягом генерації, код потребував ручних правок.

Результат
За тиждень у нас була веб-версія, готова для демо! Не ідеальна — деякі функції були відсутні, були баги — але вона працювала.
Витрачено часу: ~40 годин замість 400. Багфіксинг зайняв би ще стільки ж, але для демо ідеальність не була потрібна.

Ключові висновки
— Гнучкість технологій: Знаючи одну мову програмування, можна створити рішення на іншій за допомогою AI.
— Стратегічне використання AI: Для створення MVP або демо-версії AI може радикально скоротити час.
— Короткі ітерації: Швидко створюємо прототип — потім покращуємо UX. Робоча версія все ще потребуватиме доопрацювання, але менше ніж інші варіанти.
Цей експеримент був неідеальним — баги лишилися — але мета була досягнута: робоча веб-версія мобільного застосунку за мінімум часу й бюджету.