Определения
Введение
1. Анализ текущей кодовой базы
1.1. Основные проблемы текущей реализации 12
1.2. Язык программирования 12
1.3. Фреймворк
2. Перевод проекта на новый технологический стек 17
2.1. Перевод проекта на фреймворк Next.js 17
2.2. Перевод проекта на язык программирования TypeScript 19
2.3. Рефакторинг кодовой базы
3. Организация команды разработки
3.1. Описание состава команды
3.2. Трекер задач
3.3. Коммуникация в команде 26
4. Фронтенд-разработка
4.1. Интеграция с бэкендом
4.2. Вёрстка основных компонентов 30
4.3. Структура веб-приложения
4.4. Административные интерфейсы 33
4.5. Интеграция с Яндекс.Картами 34
4.6. Микроанимации
4.7. Автоматизированное тестирование 36
5. Настройка инфраструктуры
5.1. Контейнеризация приложения 38
5.2. Настройка ресурсов на хостинге 40
5.3. Автоматические релизы
5.4. Настройка домена и безопасного соединения 43
5.5. Логгирование
5.6. Хранилище объектов для изображений и excel-файлов 46
5.7. Почта
Заключение
Список источников
Системы учета спортивных объектов становятся важным инструментом в жизни граждан. Они позволяют быстрее и эффективнее построить досуг, способствуют активному и здоровому образу жизни. Все это актуально и для жителей Красногвардейского района Санкт-Петербурга, администрация которого в прошлом году совместно с нашей кафедрой начала проектировать приложение с картой спортивных объектов - “SportsMap”.
Анализ альфа-версии веб-приложения “SportsMap” показал невозможность дальнейшего масштабирования и развития в связи с технологическим стеком. Таким образом, необходимо проанализировать основные проблемы кодовой базы и выбрать пути их решения, в дальнейшем перевести на них проект.
Данная ВКР посвящена реализации основного функционала “SportsMap”, настройке продакшн-инфраструктуры и реализации новой версии проекта на современном технологическом стеке. Также отчет охватывает координацию командной работы, так как над проектом работало несколько человек (фронтенд, бэкенд и дизайн).
Цель ВКР: написать готовую клиентскую часть проекта, настроить продакшн-инфраструктуру и довести приложение до конечного пользователя.
Были поставлены следующие задачи:
● анализ текущей кодовой базы
● перевод кодовой базы проекта на более подходящие технологии (TypeScript, Next.js)
● развертывание проекта на хостинге и настройка дополнительной инфраструктуры
● реализация основного функционала проекта
В ходе данной работы была проанализирована текущая кодовая база приложения “SportsMap”, выявлены ее основные недостатки. Были выбраны и изучены инструменты для исправления этих недочетов, а также ускорения дальнейшей разработки приложения с учетом будущей поддержки и масштабирования функционала. Проект был переведен на новый технологический стек. Помимо этого, была продумана и реализована инфраструктура для дальнейшего использования и развития приложения.
Была организована командная разработка, в ходе которой успешно был создан основной функционал “SportsMap”: сверстаны страницы и компоненты сайта в соответствии с редизайном, написана интеграция с бэкендом, добавлены автотесты, настроен почтовый ящик и работа с excel-файлами.
Проект готов к бета-тестированию, передаче заказчику и запуску в продакшн.
● https://nextjs.org/ - официальная документация по фреймворку Next.js. [Электронный ресурс] Режим доступа: свободный
● https://github.com/ - Крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. [Электронный ресурс] Режим доступа: свободный
● https://www.typescriptlang.org/ - официальная документация по языку TypeScript. [Электронный ресурс] Режим доступа: свободный
● https://habr.com - статьи с материалам по разработке. [Электронный ресурс] Режим доступа: свободный
● https://www.docker.com/ - официальная документация по Docker. [Электронный ресурс] Режим доступа: свободный
● https://cloud.yandex.ru/blog - блог со статьями о разработке от YandexCloud. [Электронный ресурс] Режим доступа: свободный
● https://www.chromatic.com/docs/ - официальная документация по Chromatic. [Электронный ресурс] Режим доступа: свободный
● https://www.framer.com/motion/ - официальная документация по Framer Motion [Электронный ресурс] Режим доступа: свободный