Лабораторная работа №4 по Веб-программированию

Left part	Right part

Содержание проекта

Использованы следующие технологии

• Уровень back-end основан на Spring Boot.
• Уровень front-end построен на Angular 17
• Взаимодействие между уровнями back-end и front-end организовано посредством REST API.

Структура приложения

1. Main page (Стартовая страница)
2. Sign up (Страница для регистрации)
3. Log in (Страница для входа в аккаунт)
4. Dashboard (Страница с выбором сервисов)
5. Dots Manager (Страница с сервисом отслеживания попадания точки(Форма ввода координат, таблица с результатами, координатная плоскость))

Все страницы адаптированы для корректного отображения в 3 режимах:

1. "Десктопный"
2. "Планшетный"
3. "Мобильный"

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

Набор полей ввода для задания координат точки и радиуса области в соответствии с вариантом задания:

Checkbox {'-2','-1.5','-1','-0.5','0','0.5','1','1.5','2'} для координаты по оси X, Text (-5 ... 3) для координаты по оси Y, и Checkbox {'-2','-1.5','-1','-0.5','0','0.5','1','1.5','2'} для задания радиуса области. Динамически обновляемую картинку, изображающую область на координатной плоскости в соответствии с номером варианта и точки, координаты которых были заданы пользователем. Клик по картинке должен инициировать сценарий, осуществляющий определение координат новой точки и отправку их на сервер для проверки её попадания в область. Цвет точек должен зависить от факта попадания / непопадания в область. Смена радиуса также должна инициировать перерисовку картинки.

Back-end

• Все результаты проверки сохраняются в базе данных под управлением СУБД PostgreSQL.
• Для доступа к БД используется Spring Data.
• Аутентификация происходит с помощью JWT-токенов (Также реализованы refresh токены)
• Используется библиотека Java Mail для отправки электронных писем с помощью Spring
• Реализована кастомная пагинация с использованием PagingAndSortingRepository

Front-end

• Используется Tailwind v3.3.5
• Используется Angular Guards (Доступ к "внутренним" страницам и сервисам запрещен неавторизированным пользователям)
• Angular Validating Form (Валидация полей ввода для регистрации, контакт формы и полей ввода для создания точки на графике)
• Angular Material modules (MatSortModule,MatTableModule). Вместо MatPaginatorModule используется кастомная пагинация.

Краткое описание некоторых моментов работы приложения

1. Регистрация просходит следующим образом
   1. Пользователь вводит свои данные. Email и Имя пользователя должны быть уникальны.
   2. На указанную пользователем почту приходит письмо с подтверждением регистрации. Пока пользователь не подтвердит регистрацию переходом по ссылке, содержащейся в письме, его аккаунт не будет активирован.
   3. После подтверждения регистрации, пользователь может войти в свой аккаунт.
2. Таблица с данными точек (как и график ) содержит не все точки, хранящиеся в базе данных , а только то количесто, которое выберет пользователь (изначально выставлено значение 3).
3. Jwt токены позволяют пользователю не проходить заново аутентификацию в течение 7 дней, после последней аутентификация. (Если пользователь пользуется приложением с того же браузера и не проводил очистку хранилища браузера)
4. Контакт форма доступна пользователям без регистрации. Данные отправляются на email-организации(В данном случае на мою почту)