Услуги

  • Сайты

  • Контент

  • Продвижение

  • Битрикс24

  • Приложения

Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс
		Array
(
    [0] => 
    [1] => https://webnauts.pro/wp-content/uploads/2022/03/chrome_wc2xnhowkf-1-1536x721.png
    [2] => 1536w
)
		

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-разработчиков, способных решить задачу любой сложности! Готовы обсудить проект сегодня

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