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 фреймворков современности.
Про проект
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.
Комментарии