SPA-додаток на Vue.js для керування даними
Про проект
Temporal Games – компанія, яка займається розробкою програмного забезпечення в сферах Game Development, AI Research & Deployment. Саме вони є творцями мобільної гри Riflecore та нейронної мережі fluxNEAT, здатної навчатися ігровим навичкам у реальному часі з практично нульовою кількістю заданої інформації.
Temporal Games звернулися до нас з метою створення односторінкового веб-додатку для fluxCortex Azur — гібридної архітектури штучного інтелекту, що самонавчається, яка працює на основі генетичних алгоритмів.
Постановка завдань
Нам потрібно було створити зручну платформу для управління ігровими програмами, яка включатиме:
- Інтерфейс для створення, редагування та видалення даних конкретної гри це можуть бути як самі персонажі, так і їх голоси або цілі діалоги;
- Візуалізацію статистичних даних – перетворення великої кількості інформації на зрозумілі та мінімалістичні графіки;
- Експорт – можливість зручного вивантаження великої кількості даних;
і багато іншого.
Веб-додаток призначається для внутрішнього використання, тому SEO-оптимізація та пошукові роботи, на нашу думку, тут не потрібні. З цієї причини ми відмовилися і від рендерингу за сервера (SSR).
Як інструмент для реалізації frontend-частини ми використовували фреймворк Vue.js (а саме його 3-ю версію). Back-end частину сервісу надавав замовник, тому наші розробники змогли сконцентруватися на front-end розробці, написанні окремих модулів, компонентів та підключенні API.
Процес розробки
Насамперед, ми реалізували авторизацію користувачів на основі токенів access та refresh. Для цього найкраще підійшли Axios Interceptors, що перевіряє токен перед виконанням запиту, та хуки Vue Router, що проводить перевірку безпосередньо перед переходом на іншу сторінку. Якщо перевірку пройти не вдалося, користувач повернеться назад на сторінку входу.
Для візуалізації даних ми впровадили таблицю з пагінацією, фільтрами та можливістю сортування. Завдяки цьому користувачеві простіше знаходити потрібну інформацію в алфавітному порядку, за часом створення та ID.
Крім цього, ми реалізували можливість редагування кожного запису шляхом переходу на окрему сторінку або безпосередньо через поля таблиці. Створювати та правити дані можна як у контексті вибраного фільтра, так і на власний розсуд.
Головна проблема, з якою ми зіткнулися під час роботи з Voice API — затримка. Через це введений з нуля текст не передавався «на льоту», як того хотіли у Temporal Games. Щоб вирішити цю проблему, ми написали middleware — сполучне програмне забезпечення, яке перевіряло статус відповіді сервера і чекало закінчення генерації звукової доріжки.
Ще одне цікаве завдання, з яким ми зіткнулися під час розробки, — реалізація експорту даних. Справа в тому, що вибірка є даними за кожен окремий день, які групуються помісячно. Тому для збільшення зручності ми вирішили додати нову можливість розміщення даних за день в окремі файли JSON формату. Після закінчення місяця вони архівуються і стають доступними для завантаження одним файлом формату zip.
Підсумок
Під час роботи з Temporal Games ми не тільки покращили власні навички, але й отримали насолоду від вирішення нестандартних проблем. Як підсумок, ми змогли створити класичний односторінковий додаток (SPA) з великим функціоналом і можливістю подальшого масштабування. Замовники при цьому отримали не тільки привабливий, але й зручний продукт, написаний на останній версії одного з найактуальніших фреймворків сучасності Java Script.
Комментарии