auto3dtrackingsystem



Руководство разработчика Web-сервиса

Back-end

Структура проекта
Для построения back-end исполоьзовался Spring в связке с  Spring Boot. Подробно про фреймворк можно почитать здесь.
В корневой папке находится pom.xml, хранящий в себе все зависимости приложения. application.properties - файл для настроек находится по пути - src/main/resources.
Все, необходимое для разработки, лежит в пакете src/main/auto3dtrackingsystem. Данный пакет включает в себя 7 пакетов:

config


WebMvcConfig - файл с конфигурацией SpringWebMvc


WebSecurityConfig - файл с конфигурацией SpringSecurity. Авторизация в приложении происходит с помощью OAuth2.0.

WebSocketConfig - файл с конфигурацией SpringSocket


SpringFoxConfig - файл для настрочки Swagger


MailConfig - файл для настрочки SpringEmail


domain
Структура основных классов программы:


controllers
API программы отображаются в Swaggere или их можно посмотреть:
api-documentation.pdf и api-documentation.yaml

repository
Мы используем Spring Data для общения с Базой данных поэтому в данном пакете лежат интерфейсы репозиториев ClaimRepository и UserDetailsRepository

dto
В данном пакете лежат dto файлы для общения с клиентом: EventType,ObjectType,WsEventDto.

service
Пакет service предназначен почти для всей логики проекта. В нем находятся:


ExcelService - сервис формирования Excel документов на основании информации в заявках. Построен на основе библиотеки ApachePoi


MailSender - настройка и формирование сообщений, формирование Бина JavaMailSender


StatusListener - лиснер, предооставляющий внутреннюю логику отправки сообщений.

UserService - сервис, который предоставляет взаимодействие с пользователем.


Front-end

Структура проекта
Данная часть проекта написана на framework - Vue.js, использовав для вёрстки сервиса Vuetify.js. Подробно про фреймворк можно почитать здесь.
Все, необходимое для разработки, лежит в пакете src/main/resources/js. Данный пакет включает в себя 6 пакетов:

api
В данном пакете содержится файл claims.js, реализация которого предназначена на удаление, добавление, обновление заявки для любого компонента.

router
В данном пакете содержится файл router.js, который осуществляет навигацию между основными вкладками:


/createClaim - страница создания заявки

/claimList - страница заявок пользователя

/instruction - страница с информацией по подаче заявки

/changeStatus - страница с панелью администратора


components/messages
Данный пакет является одним из основных и содержит вёрстку основных вкладок на UI, работу с API и 3D-моделью. Содержит в себе 3 "Components":


ClaimForm.vue - форма для подачи заявки

Instruction.vue (/instruction) - вкладка с детальной информацией по подаче заявки

TableListClaims.vue (/changeStatus) - панель администратора (просмотр 3D-модели, назначение проверяющих к заявке, скачиваение отчётности в Excel, изменение статуса готовности заявок, фильтрация таблицы по ключевым полям)

TableListClaims.vue работает на основе компонентов <v-data-table>, <v-dialog>, <v-container>.
Как работать с этими элементами, подробно разобрано в этих статьях: v-data-table , v-dialog , v-container.


<v-data-table> - формирует таблицу данных, где хранятся все поданные заявки всех пользователей

<v-dialog> - создаёт диалоговые окна для назначения проверяющих к заявки, а также для просмотра 3D-модели

<v-container> - структурирует кнопки, фильтры на UI


pages
Данный пакет явлеется одним из основных и содержит панель смены интерфейсов, а также методы, реализующие компоненты в пакете components/messages. Содержит в себе 3 "Components" :


ClaimsList.vue (/claimList) - выводит таблицу со всеми заявками данного пользователя (реализовано на основе компонента TableListClaims.vue)

CreateClaim (/createClaim) - выводит форму подачи заявки, а также сохраняет все данные заявки в БД

App.vue -  навигация, для смены вкладок (количество вкладок определяется в зависимости от того, кто зашёл: пользователь или администратор)

App.vue работает на основе компонентов <v-toolbar>, <v-dialog>. Как подробно работать с компонентом "v-toolbar" можно почитать тут.


<v-dialog> - создаёт диалоговое окно для добавления, удаления администратора

<v-toolbar> - здесь расположены вкладки, каждая из которых содержит определённый API для перехода на соответствующую страницу, учитывая роль.


store
В данном пакете содержится файл store.js, который напрямую работает с back-end. При старте сервиса, функционал этого файла вытаскивает из сервиса определённые значения и инициализирует их на front-end части.

util
В данном пакете содержится файл ws.js, который содержит настройку web-socket.

Работа с сетью
Запросы к серверу выполнялись с помощью библиотеки $http.

API
Здесь кратко указано назначение каждого API:


/auth - авторизация на сервере, куда под капотом отправляется google token

/claim/create - создание заявки, в качестве параметров передаются все, заполненные пользователем, поля

/claim/single-file - загрузка файла модели на сервер, привязан к id заявки, который мы получаем в /claim/create


/claim/list/ - получение заявок для конкретного пользователя, в качестве параметра передается id пользователя

/claim - получение списка всех заявок, вызывается в администраторской версии

/claim/user/role/ - получение уровня доступа пользователя (админ или обычный пользователь), на основе которого определяется сколько заявок получить

/claim/file - получение модели с сервера для просмотра, доступно администратору

/claim/statusChange - смена статуса заявки, доступно только администратору, в качесвте параметра передается новый статус заявки


Руководство пользователя Web-сервиса

Авторизация
При первом запуске приложения пользователь попадает на экран авторизации.
Здесь он авторизуется в сервисе с помощью почты Google.
Если авторизация успешна - переходит в основное меню приложения, где в зависимости от того, кто зашёл пользователь или администратор, появятся соответствующие вкладки меню, иначе, если авторизация не прошла, пользователь получает Alert о проблеме с интернетом или сервером.
Пользователю доступны только 3 вкладки: Создать заявку, Мои заявки, Инструкция по подготовке 3D-модели.
Администратору вдобавок к этим 3 вкладкам доступны ещё 2 (Панель Администратора): Список поданных заявок, Добавление (Удаление) администратора.


Инструкция по подаче заявки
Перед тем, как подать заявку на 3D-печать, пользователю необходимо внимательно ознакомиться с инструкцией, где описаны все требования.
Эти требования описаны во вкладке Инструкция по подготовке 3D-модели, которая находится на верхней панели меню.


Подача заявки
При открытии пользователем на верхней панели вкладки Создать заявку ему открывается данный экран, представленный ниже.
Пользователь должен заполнить свои ФИО, курс, контактный номер, образовательную программу, название проекта КР/ВКР, ФИО научного руководителя,
комментарий к заявке, загрузить файлы 3D-модели для печати и указать для них количество копий. После этого следует нажать кнопку Сохранить, чтобы заявка отправилась на сервер.
В итоге, после успешной отправки заявки, пользователю придёт уведомительное письмо на почту, от которой он авторизовался, об успешном создании заявки.


Поданные заявки пользователя
При открытии пользователем на верхней панели вкладки Мои заявки ему открывается данный экран, представленный ниже.
Здесь пользователю в виде таблицы показываются все, поданные им, заявки. Пользователь может посмотреть, в каком статусе готовности находятся его заявки, кто ответственный за них из администраторов. Также пользователь для быстрого поиска может отфильровать свои заявки по полям: Студент (ФИО), Научный Руководитель (ФИО), Название проекта или КР/ВКР.


Панель Администратора
При открытии пользователем на верхней панели вкладки Список поданных заявок ему открывается данный экран, представленный ниже.
Здесь администратору в виде таблицы показываются заявки всех пользователей. Администратор может менять статусы готовности заявок в работе, готово, отклонить, назначать проверящих за заявку,
скачивать всю отчётность в виде Excel таблицы, для быстрого поиска может отфильровать заявки пользователей по полям: Студент (ФИО), Научный Руководитель (ФИО), Название проекта или КР/ВКР, а также в новом диалоговом окне видеть 3D-модель, которую загрузил пользователь.
Когда администратор меняет статусы готовности заявки, при каждой смене пользователю приходят уведомления на почту о данном статусе.


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


Добавить (удалить) администратора
При открытии пользователем на верхней панели вкладки Добавить (удалить) администратора ему открывается данный экран, представленный ниже.
Здесь администратор должен ввести почтовый адрес администратора которого хочет либо добавить, либо удалить.