Создание веб-интерфейса системы агрегации данных вузов для привлечения студентов

Данная работа посвящена разработке клиентской части веб-приложения для системы агрегации данных вузов, ориентированной на привлечение студентов в ВУЗы. В ходе работы были решены следующие задачи:

1. Анализ потребностей целевой аудитории и обзор современных решений для проектирования агрегирующих платформ;

2. Выбор технологического стека и проектирование архитектуры веб-приложения;

3. Реализация графического интерфейса приложения;

4. Внедрение бизнес-логики и трехмерной графики в приложение;

5. Комплексное тестирование веб-приложения.

Клиентская часть веб-приложения реализована как Single Page Application с использованием React и TypeScript, что обеспечило модульность и расширяемость. Для сборки использован Vite, интеграция 3D-графики выполнена с помощью Three.js и React Three Fiber. Для управления состоянием применяются Redux Toolkit и RTK Query, для работы с API – Axios.

В результате создано клиентское приложение, помогающее абитуриентам искать и сравнивать вузы с помощью интуитивно понятного интерфейса, интеллектуального поиска и интерактивной 3D-графики. Решение адаптировано для широкой аудитории, включая иностранных пользователей, и стабильно работает на разных устройствах.

СОДЕРЖАНИЕ

СПИСОК ОБОЗНАЧЕНИЙ И СОКРАЩЕНИЙ ......................................................................... 8

ВВЕДЕНИЕ .................................................................................................................................... 9

ГЛАВА 1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ .................................................................... 11

1.1. Описание проблем, возникающих у абитуриентов при поиске информации об учебных заведениях .................................................................................................................. 11

1.2. Анализ существующих решений ..................................................................................... 14

1.3. Выводы ............................................................................................................................... 16

ГЛАВА 2. АРХИТЕКТУРА ПРЕДЛАГАЕМОГО РЕШЕНИЯ ............................................... 17

2.1. Техническое задание ......................................................................................................... 17

2.2. Анализ технического задания и структурного макета приложения ............................ 19

2.3. Основные этапы разработки ............................................................................................ 23

2.4. Анализ и выбор методов и инструментов для разработки ........................................... 25

2.4.1. Анализ и сравнение архитектурных подходов......................................................... 26

2.4.2. Анализ и сравнение языков программирования ...................................................... 30

2.4.3. Инструмент для стилизации ...................................................................................... 31

2.4.4. Анализ и сравнение фреймворков для фронтенд-разработки ................................ 32

2.4.5. Выбор системы сборки проекта................................................................................. 36

2.4.6. Выбор технологии для визуализации трехмерной графики ................................... 36

2.4.7. Инструмент для взаимодействия с сервером ........................................................... 40

2.5. Выводы ............................................................................................................................... 41

ГЛАВА 3. РЕАЛИЗАЦИЯ .......................................................................................................... 43

3.1. Разработка архитектурных составляющих веб-приложения ........................................ 44

3.1.1. Построение компонентов ........................................................................................... 44

3.1.2. Механизм смены цветовой темы ............................................................................... 48

3.1.3. Обеспечение адаптивности интерфейса ................................................................... 50

3.1.4. Реализация мультиязычности .................................................................................... 51

3.1.5. Механизм управления состоянием приложения ...................................................... 53

3.1.6. Механизм маршрутизации ......................................................................................... 55

3.2. Разработка бизнес-логики ................................................................................................ 56

3.2.1. Аутентификация .......................................................................................................... 56

3.2.2. Форма обратной связи ................................................................................................ 58

3.2.3. Фильтрация ВУЗов по параметрам ........................................................................... 59

3.2.4. Профиль пользователя ................................................................................................ 61

3.3. Внедрение трехмерной графики ...................................................................................... 63

3.3.1. Компонент карты ........................................................................................................ 63

3.3.2. Компонент университета ............................................................................................ 66

3.3.3. Компонент информационной панели ........................................................................ 67

3.3.4. Хук для работы с состоянием карты ......................................................................... 68

3.4. Выводы ............................................................................................................................... 68

ГЛАВА 4. ТЕСТИРОВАНИЕ ..................................................................................................... 70

4.1. End-to-end тестирование ................................................................................................... 70

4.2. Тестирование адаптивности интерфейса ........................................................................ 75

4.3. Выводы ............................................................................................................................... 78 ЗАКЛЮЧЕНИЕ............................................................................................................................ 79

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ ....................................................................... 81

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ

1. Паттерн MVC // SkillFactory URL: (Дата обращения: 09.05.2025)

2. Портал о поступлении // Postupi.online URL: (Дата обращения: 13.04.2025)

3. Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию. Token-BasedAuthentication // GitHubGist URL: (Дата обращения: 12.05.2025)

4. Путеводитель абитуриента // A-AI URL: https:// (Дата обращения: 13.04.2025)

5. Axios Documentation // Axios URL: (Дата обращения: 12.05.2025)

6. Playwright Documentation // Playwright URL: (Дата обращения: 20.05.2025)

7. Progressive web apps // Mozilla URL: (Дата обращения: 09.05.2025)

8. React Three Fiber Documentation // pmndrs URL: (Дата обращения: 15.05.2025)