Создание клиентской части веб-приложения для автоматизированной системы анализа и учета реестра культурных и спортивных объектов

Оглавление
Определения 8
Введение 11
1. Анализ текущей кодовой базы 12

• Основные проблемы текущей реализации 12
• Язык программирования 12
• Фреймворк 13
• Перевод проекта на новый технологический стек 17
  • Перевод проекта на фреймворк Next.js 17
  • Перевод проекта на язык программирования TypeScript 19
  • Рефакторинг кодовой базы 21
• Организация команды разработки 24
  • Описание состава команды 24
  • Трекер задач 24
  • Коммуникация в команде 26
• Фронтенд-разработка 28
  • Интеграция с бэкендом 28
  • Вёрстка основных компонентов 30
  • Структура веб-приложения 32
  • Административные интерфейсы 33
  • Интеграция с Яндекс.Картами 34
  • Микроанимации 35
  • Автоматизированное тестирование 36
• Настройка инфраструктуры 38
  • Контейнеризация приложения 38
  • Настройка ресурсов на хостинге 40
  • Автоматические релизы 43
  • Настройка домена и безопасного соединения 43
  • Логгирование 45
  • Хранилище объектов для изображений и excel-файлов 46

5.7. Почта 46
Заключение 48
Список источников 49

АННОТАЦИЯ

выпускной квалификационной работы


Создание клиентской части веб-приложения для автоматизированной системы анализа и учета реестра культурных и спортивных объектов
Целью данной работы является создание клиентской части веб-приложения – системы учета реестра объектов физической культуры и спорта «SportsMap» для администрации Красногвардейского района города Санкт-Петербург, а также настройка продакшн-инфраструктуры.
Итоговым результатом является готовое к запуску веб-приложение, реализующее систему авторизации, функционал поиска и фильтрации спортивных объектов; создание, редактирование, удаление и скрытие объектов; работу с excel-файлами; интеграцию с Яндекс.Картами и почтовую рассылку. Кроме того, проект развернут на хостинге и доступен по адресу https://sportsmap.spb.ru.
В процессе работы использованы следующие программы: Webstorm, Postman, Figma, Miro, Yandex.Tracker.
Ключевые слова: веб-разработка, Next.js, TypeScript, анализ кодовой базы, проектирование архитектуры, геоинформационная система, фронтенд-разработка.



Введение
Системы учета спортивных объектов становятся важным инструментом в жизни граждан. Они позволяют быстрее и эффективнее построить досуг, способствуют активному и здоровому образу жизни. Все это актуально и для жителей Красногвардейского района Санкт-Петербурга, администрация которого в прошлом году совместно с нашей кафедрой начала проектировать приложение с картой спортивных объектов - “SportsMap”.
Анализ альфа-версии веб-приложения “SportsMap” показал невозможность дальнейшего масштабирования и развития в связи с технологическим стеком. Таким образом, необходимо проанализировать основные проблемы кодовой базы и выбрать пути их решения, в дальнейшем перевести на них проект.
Данная ВКР посвящена реализации основного функционала “SportsMap”, настройке продакшн-инфраструктуры и реализации новой версии проекта на современном технологическом стеке. Также отчет охватывает координацию командной работы, так как над проектом работало несколько человек (фронтенд, бэкенд и дизайн).
Цель ВКР: написать готовую клиентскую часть проекта, настроить продакшн-инфраструктуру и довести приложение до конечного пользователя.