Послуги

  • Сайти
  • Контент
  • Просування
  • Бітрікс24
  • Додатки
Усі послуги Оплата
Бітрікс24
Усі послуги Оплата

Пошук

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

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, яка відтворює написаний текст голосами різних персонажів. Завдяки цьому до кожного із створюваних/створених персонажів (запис у таблиці) можна вибрати унікальний голос зі списку, прослухати його за заданою фразою або написати власний текст.

Головна проблема, з якою ми зіткнулися під час роботи з Voice API — затримка. Через це введений з нуля текст не передавався «на льоту», як того хотіли у Temporal Games. Щоб вирішити цю проблему, ми написали middleware — сполучне програмне забезпечення, яке перевіряло статус відповіді сервера і чекало закінчення генерації звукової доріжки.

Ще одне цікаве завдання, з яким ми зіткнулися під час розробки, — реалізація експорту даних. Справа в тому, що вибірка є даними за кожен окремий день, які групуються помісячно. Тому для збільшення зручності ми вирішили додати нову можливість розміщення даних за день в окремі файли JSON формату. Після закінчення місяця вони архівуються і стають доступними для завантаження одним файлом формату zip.

Підсумок

Під час роботи з Temporal Games ми не тільки покращили власні навички, але й отримали насолоду від вирішення нестандартних проблем. Як підсумок, ми змогли створити класичний односторінковий додаток (SPA) з великим функціоналом і можливістю подальшого масштабування. Замовники при цьому отримали не тільки привабливий, але й зручний продукт, написаний на останній версії одного з найактуальніших фреймворків сучасності Java Script.

Цікавить технологія на vue.js?

У нас є команда vue-розробників, здатних вирішити завдання будь-якої складності! Готові обговорити проект сьогодні

Над проектом работали