¶ Frontend
Пользовательский интерфейс и функции, которые работают на клиентской стороне веб-сайта.
¶ ReactJS
React JS — это библиотека JavaScript с открытым кодом для создания внешних пользовательских интерфейсов. В отличие от других библиотек JavaScript, предоставляющих полноценную платформу приложений, React ориентируется исключительно на создание представлений приложений через инкапсулированные единицы (компоненты), которые сохраняют состояние и генерируют элементы пользовательского интерфейса.
¶ Общая структура
Все содержимое frontend части web-сайта хранится в src.
- public
- src
- components
- services
- api
- views
- analytics
- general-stats
- nvr
- search
- stats
- App.js
- index.js
components - глобальные общие/повторно используемые компоненты.
views — здесь храняться все страницы web-приложения.
services/api - запросы к форматтерам.
index.js - является точкой входа.
App.js - настраивает маршрутизацию.
¶ Описание компонентов
¶ Аналитика
Данный каталог содержит страницу аналитики.
¶ Теги компетенций
Пользовательский интерфейс представляет из себя компонент облака тегов на основе открытой библиотеки React-Wordcloud
Данные предоставляет форматтер Word Cloud
Подробное описание его свойств, методов и действий можно найти в комментариях к коду
¶ Сентимент анализ отзывов на пользователей
В данной вкладке представлен результат анализа отзывов на студентов и преподавателей. Для реализации графика был использован фреймворк HighCharts Stacked Percentage Column
Данные предоставляет форматтер Sentiment analysis
Подробное описание его свойств, методов и действий можно найти в комментариях к коду
¶ Общая статистика
Модуль содержит страницу общей статистики по сервисам Jitsi и Zulip.
Для предоставления статистики конечному пользователю используются диаграммы HighCharts Column drilldown с возможностью содержания вложенных данных по каждому столбцу и таблицы MDBDataTable с ранжированными списками самых активных пользователей сервисов.
Подробное описание его свойств, методов и действий можно найти в комментариях к коду
¶ NVR
Данный каталог содержит страницу записей занятий из сервиса NVR.
Страница содержит инкапсулированную единицу DateRangePicker и кастомный компонент Subject необходимый для реализации аккордеона курсов с быстрым доступом к записям занятий в сервисе NVR.
Данные предоставляет форматтер NVR
Подробное описание его свойств, методов и действий можно найти в комментариях к коду
¶ Поиск студентов и преподавателей
Модуль содержит главную страницу сайта.
Компонент включает в себя поисковую строку и кнопки для перехода к аналитике, статистике и записям занятий. Функция автозаполнения реализована с использованием форматтера User Search.
Подробное описание его свойств, методов и действий можно найти в комментариях к коду
¶ Индивидуальная статистика
Данный модуль содержит страницу с личной статистикой пользователей по сервисам Jitsi, Zulip.
Страница реализована в формате вкладок (навигация осуществляется с использованием компонента Nav ) с помещенными в них результатами сбора статистики по сервисам. Базовыми библиотеками для диаграмм являются для Zulip и Jitsi. Для построения круговых диаграмм с подробной информацией использования видеосервиса и чата используется следующий фреймворк HighCharts Pie Chart. Таблица с данными о полученных оценках студентов реализована на основе MDBDataTable.
Данные предоставляют форматтеры Zulip и Jitsi.
Подробное описание его свойств, методов и действий можно найти в комментариях к коду
¶ Инструкция разработки нового дизайна web-сайта MIEM Portfolio
Разработка персональной страницы пользователя:
Этапы верстки:
-
Каждый блок верстается отдельно, начиная с Header
-
Персональная страница представляет собой набор небольших блоков (компонентов), каждый из является изолированным блоком кода, который отвечает за своё отображение и несёт в себе определённую логику по отображению данных.
Все компоненты имеют расширение ".js".
При создании персональной страницы были созданы компоненты "Header", "ChooseSelect" и "Personal". -
Header
Компонент Header является верхней панелью на которой расположены две иконки которые перенаправляют пользователя на сайт миэма или же на страницу с поиском студентов и сотрудников МИЭМ. -
Компонент Personal
Этот компонент предназначен для отображения и управления данными профиля пользователя, а также взаимодействия с внешними API для получения информации о пользователе, его рейтинге и аватарах.
Внутри компонента Personal определены следующие состояния с помощью хуков useState:value - текущее значение поискового запроса.
slug - строка, представляющая идентификатор пользователя.timer - таймер для отложенного поиска.
users - информация о пользователях, полученная из API.
isMessageShow - флаг для отображения сообщения об ошибке.
isFinderShow - флаг для отображения поисковой панели.
userData - информация о текущем пользователе.
showModal - флаг для отображения модального окна с аватарками.
carouselImages - изображения для отображения в модальном окне карусели.
staticImage - массив с одним изображением по умолчанию.
ratingData - информация о рейтинге пользователя.
avatarImages - изображения аватаров пользователя.
searchInit - инициализация поискового запроса.
Внутри компонента Personal есть несколько вызовов хуков useEffect, которые выполняют побочные эффекты в зависимости от разных событий:
Первый useEffect добавляет слушатель событий клавиатуры для скрытия поисковой панели при нажатии клавиши "Esc".
Второй useEffect пытается получить инициализированный поисковый запрос из локального хранилища и устанавливает его в состояние компонента.
Третий useEffect также пытается получить инициализированный поисковый запрос из локального хранилища, но сохраняет его в состояние searchInit.
Четвертый useEffect пытается получить slug (идентификатор пользователя) из текущего URL и вызывает функцию fetchUserData(slug) для получения информации о пользователе.
Данный блок кода рассчитывает средний рейтинг пользователя на основе данных из ratingData, а также визуализирует этот рейтинг с использованием вспомогательного окна.
Возвращается JSX разметка, представляющая профиль пользователя. Эта разметка включает в себя информацию о пользователе, его аватар, рейтинг, и возможность просматривать аватары в модальном окне.
- Запросы на сервер для получения аватарок и рейтинга:
- fetchRating:
RequestUrl_Rating содержит URL-адрес, по которому будет отправлен запрос для получения рейтинга.
Функция sendRequest выполняет фактический запрос с использованием метода fetch.
Она принимает следующие параметры:
method - HTTP-метод запроса (в данном случае 'POST').
url - URL-адрес, по которому будет отправлен запрос (в данном случае RequestUrl_Rating).
body - тело запроса в формате JSON (в данном случае объект с полем 'slug' для отправки на сервер).
Заголовки запроса устанавливаются, чтобы указать серверу, что данные отправляются в формате JSON.
После отправки запроса, функция ожидает ответ от сервера и обрабатывает его. Если ответ успешен (HTTP-статус 200 OK), то выполняется парсинг JSON-данных и возвращается результат. В противном случае, если ответ содержит ошибку, создается исключение (Error) с сообщением "Что-то пошло не так", и в этом исключении содержатся данные об ошибке.
RequestUrl_Avatars содержит URL-адрес, по которому будет отправлен запрос для получения аватаров.
Функция sendRequest выполняет запрос аналогично тому, как описано выше.
Функция fetchAvatars также принимает slug в качестве аргумента и включает его в тело запроса.
Результат выполнения функции fetchAvatars также предполагает, что данные будут возвращены в виде JSON-объекта.
Итак, обе эти функции выполняют HTTP-запросы на сервер с определенными URL-адресами, ожидают JSON-ответа, и возвращают полученные данные. fetchRating используется для получения рейтинга пользователя, а fetchAvatars для получения его аватаров. Эти функции могут быть использованы в React-компоненте для получения информации о пользователе.
-
Отработка запросов
Ниже преведены примеры с запросами на сервер, запрашиваются данные о рейтинге студента и его аватарки.
С Фронтенда передаётся параметр "slug", который берется из адресной строки браузера пользователя. И в случае успешной отправки сервер выставляет статус-код: 200, что означает успешную отработку запроса. Для запроса с аватарами пользователя нам в ответ от сервера приходит массив с ссылками на аватары. А для рейтинга массив, каждый элемент которого это объект, содержащий два поля "project_rating" (рейтинг в формате десятичного чила округленного до сотых долей) и "source" в параметре "source" содержится название сервиса по которому высчитывается рейтинг студента (wekan, gitlab, zulip)
-
Ниже представлен результат всех вышеперечисленных операций по визуализации данных с сервера:
-
Tabs
Компонент предоставляет интерфейс с вкладками для переключения между разными разделами страницы, где каждая вкладка отображает разный набор данных или компонентов, в зависимости от активной вкладки.
Создается функциональный компонент Tabs. Внутри него определено состояние toggleState, которое отслеживает активную вкладку (по умолчанию установлена на вкладку с индексом
Функция toggleTab: принимает индекс вкладки и обновляет состояние toggleState, чтобы переключить активную вкладку.JSX разметка компонента включает следующие элементы:
Верхнюю панель с вкладками. Здесь отображаются названия вкладок и соответствующие изображения. Вкладки представлены элементами "div" с классов "arrows" (см 34 строчку кода), каждая из которых содержит: Изображение из импортированных файлов.Текстовое описание вкладки. Классы CSS, которые определяют стили в зависимости от активной вкладки (с использованием toggleState).Контейнер для содержимого вкладок. Внутри него содержатся разные компоненты:
*Sentiment,
*CompetenceTags,
*Courses,
*ChartsGeneralJitsi,
*ChartsGeneralZulip,
*NVR
для отображения различных данных в зависимости от активной вкладки. Компоненты, соответствующие активной вкладке, имеют классы CSS для отображения или скрытия.