Details

Данная работа посвящена разработке клиентской части веб-приложения, предназначенного для стандартизации учета и анализа результатов спортивных соревнований. В ходе исследования проведен сравнительный анализ существующих решений (Sportlyzer, Kinomap, TrainHeroic), выявлены их ключевые недостатки, такие как сложность интерфейсов, ограниченная аналитика и проблемы интеграции. В ходе работы, с применением языка программирования JavaScript (TypeScript) и фреймворков Vue.js, Quasar и PrimeVue была реализована клиентская часть информационно-аналитической системы, включающая интерактивные таблицы, формы ввода данных и механизмы авторизации. Фронтенд развернут в виде SPA-приложения, интегрированного с серверной частью через REST API с использованием JWT для аутентификации. Для оценки производительности клиентской части системы проведено тестирование с помощью Lighthouse, подтвердившее соответствие ключевых метрик (LCP, TBT, CLS) рекомендованным значениям. Разработанная система удобна в использовании и восполняет недостатки своих аналогов.

This work is devoted to the development of the client part of a web application designed to standardize the accounting and analysis of sports competition results. The study conducted a comparative analysis of existing solutions (Sportlyzer, Kinomap, TrainHerotic), identified their key drawbacks, such as the complexity of interfaces, limited analytics and integration problems. In the course of work, using the JavaScript programming language (TypeScript) and Vue frameworks.js, Quasar, and PrimeVue implemented the client part of the information and analysis system, which includes interactive tables, data entry forms, and authorization mechanisms. The frontend is deployed as a single-page application integrated with the backend via a REST API using JWT for authentication. To evaluate the performance of the client side of the system, testing was conducted using Lighthouse, which confirmed the compliance of key metrics (LCP, TBT, CLS) with the recommended values. The developed system is easy to use and makes up for the shortcomings of its analogues.

• РЕФЕРАТ
• ABSTRACT
• СПИСОК СОКРАЩЕНИЙ
• ВВЕДЕНИЕ
• 1. ОБЗОР ЛИТЕРАТУРЫ
• 1.1. Сравнительный анализ существующих ИАС
  • 1.1.1. Sportlyzer
  • 1.1.2. Kinomap
  • 1.1.3. TrainHeroic
  • 1.1.4. Сравнительный анализ
• 1.2. Обзор технологий
  • 1.2.1. JS-фреймворк
  • 1.2.2. Библиотеки для отрисовки таблиц
• 1.3. Вывод
• 2. КОНЦЕПЦИЯ
• 2.1. Клиент-серверная архитектура
• 2.2. Архитектура кода
• 2.3. Вывод
• 3. РЕАЛИЗАЦИЯ
• 3.1. Организация процесса разработки
• 3.2. Авторизация в системе
• 3.3. Метамодель данных
  • 3.3.1. Структура метамодели
  • 3.3.2. Работа с метамоделью
  • 3.3.3. Преимущества метамодели
• 3.4. Структура приложения
  • 3.4.1. Слой «App»
  • 3.4.2. Слой «Pages»
  • 3.4.3. Слой «Widgets»
  • 3.4.4. Слой «Entities»
  • 3.4.5. Слой «Shared»
  • 3.4.6. Папка «css»
• 3.5. Клиентская часть аналитического функционала
  • 3.5.1. Вычислимые показатели в журнале результатов соревнований
  • 3.5.2. Формы для выгрузки отчётов
• 3.6. Вывод
• 4. АНАЛИЗ РЕЗУЛЬТАТОВ
• 4.1. Общая оценка производительности
• 4.2. Разбор метрик
• 4.3. Вывод
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ
• Отчет Lighthouse