Разработка веб-приложения для формирования информационных ресурсов по специальным предметам

1.

Разработка веб-приложения
для формирования
информационных ресурсов
по специальным предметам
в электронной
информационнообразовательной среде
ДИНО («VectorEd»)

2.

Актуальность проблемы
управления ресурсами по
спецпредметам
Цифровизация образования
Стремительное развитие технологий требует адаптации
образовательных процессов к новым реалиям. Современные
студенты ожидают доступа к образовательным материалам 24/7
Современное высшее образование активно
с любых устройств.
использует компьютерные технологии, которые
значительно влияют на качество обучения. В
Ограничения существующих LMS
российских вузах создаются электронные
Типовые системы управления обучением не учитывают
образовательные среды для управления учебными
материалами. Однако существующие системы часто
специфику технических дисциплин. Существует проблема
интеграции интерактивного контента, 3D-моделей и
симуляций.
не подходят для работы со специальными
предметами, требующими особых форматов
Потребность в специализированном решении
данных и инструментов. В Дмитровском институте
ДИНО нуждается в платформе, которая объединит
непрерывного образования (ДИНО) возникла
потребность в такой системе, что делает разработку
веб-приложения «VectorEd» актуальной.
специфические учебные материалы в единую систему с
удобным поиском, категоризацией и доступом согласно
образовательным программам.

3.

Цель и задачи исследования
Цель исследования
Разработка веб-приложения для формирования, структурирования и управления информационными
ресурсами по специальным предметам в ЭИОС ДИНО
Задачи исследования
Семь ключевых этапов достижения цели
Ожидаемый результат
Функционирующее веб-приложение, интегрированное в
ЭИОС ДИНО
Цель работы — создать веб-приложение «VectorEd», которое станет частью электронной среды
ДИНО и будет специализироваться на учебных ресурсах для спецпредметов. Для этого
было: проанализирована текущая система ДИНО и её ограничения, изучены современные вебтехнологии и архитектуры, чтобы выбрать лучшее, правильно определили требования к системе.
Затем была спроектирована архитектура приложения, разработана как серверная часть, так и
клиентская — то, что видит пользователь

4.

Объект и предмет исследования
Объект исследования
Предмет исследования
Исследование посвящено цифровым
учебным материалам по специальным
предметам в электронной среде
ДИНО. Если говорить проще – было
изучено, как создаются, хранятся и
используются такие материалы в
вузовской системе. Основной фокус
был на двух аспектах: во-первых, на
самом учебном процессе в цифровой
среде, особенно для специальных
дисциплин, а во-вторых - на
разработке приложения VectorEd и его
возможностях для удобного
управления этими учебными
ресурсами
В проекте глубоко проанализированы
методы и технологии для создания вебприложений, управляющих
специализированными учебными
ресурсами — особенно в контексте
вузовской цифровой среды. Конкретно
на подборе практических инструментов
и архитектурных подходов, которые
позволяют эффективно работать с
образовательными материалами: от
поддержки сложных форматов данных
до бесшовной интеграции с
существующей инфраструктурой ДИНО

5.

Методы исследования
Теоретические методы
Практические методы
Анализ научной литературы
Прототипирование
Системный анализ
Программирование
Моделирование
Тестирование
Статистические методы
Эмпирические методы
Сбор и обработка данных
Наблюдение
Визуализация результатов
Эксперимент
Оценка эффективности
Измерение
В основе моей работы лежат современные теории о том, как компьютерные технологии помогают
в обучении. Было взято за основу принципы построения электронных образовательных
сред и самые актуальные методы веб-разработки (вроде React, Node.js и т.д.). Был применен
комплексный подход: сочетание глубокого анализа научной литературы и сравнение разных
технологий с реальной практикой — то есть с программированием и созданием самого вебприложения. И особенно я сосредоточился на том, чтобы интерфейсы были по-настоящему
удобными для пользователей — преподавателей и студентов.

6.

Обзор современных веб-технологий и архитектур
Были детально проанализированы современные технологии для создания образовательных вебприложений. В фокусе были ключевые инструменты для интерфейса: HTML, CSS и JavaScript.
Также разобраны разные архитектурные подходы к построению таких систем и оценили технологии,
напрямую улучшающие пользовательский опыт — например, сделали ставку на прогрессивные вебприложения (PWA), чтобы приложение работало быстро и надежно, почти как нативное
Frontend технологии
Backend технологии
React.js для создания компонентного UI
Python как основной язык программирования
Redux для управления состоянием
FastAPI для создания высокопроизводительного API
Material-UI для стилизации компонентов
Pydantic для валидации данных
Progressive Web App для кроссплатформенности
JWT для аутентификации и авторизации
База данных и хранение
Архитектурные подходы
MongoDB для гибкой схемы данных
Клиент-серверная архитектура
AWS S3 для хранения объемных файлов
REST API для взаимодействия компонентов
Redis для кэширования данных
Микросервисная архитектура для масштабирования
Контейнеризация с Docker

7.

Задачи проектирования приложения «VectorEd»
Определение требований
Функциональные и нефункциональные требования к системе
Архитектура приложения
Проектирование компонентов и их взаимодействия
Модель данных
Проектирование схемы данных и связей между сущностями
Безопасность и доступ
Разработка системы аутентификации и авторизации
Пользовательский интерфейс
Дизайн UI/UX с учетом целевой аудитории
Анализ показал, что «VectorEd» должен решать три ключевые задачи: во-первых, стать удобной
платформой для работы со сложными учебными материалами (включая их загрузку и хранение в
любых форматах), во-вторых — органично встроиться в существующую электронную среду ДИНО, и
в-третьих — обеспечить безопасность данных при интеграции с другими вузовскими системами.
Особое внимание было уделено поиску и фильтрации — они были сделаны максимально
интуитивными, чтобы преподаватели и студенты тратили время на обучение, а не на поиск нужных
материалов

8.

Подготовка среды и
инструментов разработки
Сначала была развернута рабочая среда: серверная часть
написана на Python с фреймворком FastAPI, а для
хранения данных выбрано MongoDB. В процессе активно
использовался Git для контроля версий, виртуальные
окружения Python для изоляции зависимостей, Docker
для контейнеризации и Visual Studio Code как основной
редактор кода
Система контроля версий
GitHub для совместной работы и контроля версий кода. Настройка
репозитория, определение правил ветвления и процесса code
review для повышения качества кода.
Контейнеризация
Docker для создания изолированных сред разработки и деплоя.
Настройка Docker Compose для оркестрации контейнеров с
различными компонентами системы.
Среда разработки
Visual Studio Code с расширениями для Python, React и MongoDB.
Настройка линтеров и форматтеров для обеспечения единого
стиля кода.
CI/CD конвейер
GitHub Actions для непрерывной интеграции и доставки.
Автоматизация процессов тестирования, сборки и развертывания
приложения.

9.

Архитектура и модели данных серверной части
Серверная часть сделана на FastAPI — это современный фреймворк, который отлично справляется
с нагрузкой. Для работы с базой данных MongoDB взят асинхронный драйвер Motor. В связке они
дают отличную скорость: приложение быстро обрабатывает запросы, даже когда пользователей
много
FastAPI фреймворк
Высокопроизводительный API с
автоматической генерацией
документации. Асинхронная
обработка запросов для оптимальной
производительности.
Слой доступа к данным
Абстракция для взаимодействия с
базой данных. Разделение бизнеслогики и операций с данными для
улучшения тестируемости.
MongoDB и Motor
Асинхронный драйвер для работы с
NoSQL базой данных. Гибкая схема
хранения для адаптации к различным
типам образовательных ресурсов.
Модели данных
Pydantic-модели для валидации
данных и определения структуры.
Четкое определение сущностей User,
Resource, Course и их взаимосвязей.

10.

Реализация аутентификации и API бэкенда
Механизм аутентификации
Структура REST API
Была внедрена безопасная система входа
через JWT-токены. По сути, каждый токен —
это цифровой пропуск: он хранит
зашифрованные данные о пользователе и его
правах. Такой подход решает сразу две задачи:
защищает доступ к ресурсам и удобно
управляет сессиями без постоянных
перелогинов.
Так же было создано удобное API с
продуманной системой адресов. Каждый URL
соответствует конкретному действию - будь то
работа с учебными материалами или
управление пользователями. Это позволяет
легко интегрировать систему и делает её
логичной для разработчиков
Генерация токена доступа при успешной
аутентификации
Проверка токена при каждом запросе к защищенным
управления профилем
эндпоинтам
Механизм обновления токена для продления сессии
/api/auth/ - эндпоинты для аутентификации и
/api/resources/ - эндпоинты для работы с учебными
ресурсами
/api/admin/ - административные функции и статистика

11.

Управление состоянием и
взаимодействие с API
Redux Toolkit
В качестве системы управления состоянием выбран Redux Toolkit.
Он работает как единый центр хранения данных для всего
приложения, что даёт два важных преимущества: во-первых,
данные изменяются предсказуемо, а во-вторых - это значительно
упрощает отладку и тестирование всех компонентов.
Axios и Interceptors
Для работы с API использован Axios - это популярная библиотека,
которая делает отправку запросов и обработку ответов
максимально удобной. Она автоматически преобразует данные в
JSON, обрабатывает ошибки и позволяет легко настраивать
заголовки
React Hook Form
Чтобы формы в приложении работали быстро и без лишних
перезагрузок, выбран React Hook Form. Эта библиотека упрощает
валидацию данных, следит за изменениями полей и при этом
минимизирует ненужные обновления интерфейса — всё для
плавного взаимодействия пользователя с формой

12.

Структура и навигация пользовательского
интерфейса
Для интерфейса VectorEd был выбран React с компонентным подходом - это позволило собирать
интерфейс как из кубиков. Использовались принципы атомарного дизайна: сначала создавались
мелкие элементы (вроде кнопок и полей ввода), затем комбинировались в более сложные блоки
(например, формы поиска), и наконец - в целые страницы. Для навигации применен React Router,
чётко разделив общедоступные разделы и закрытые зоны, доступные только авторизованным
пользователям

13.

Функционал «VectorEd»: Роли и система доступа
Администратор
Преподаватель
Студент
В системе «VectorEd» реализована гибкая ролевая модель доступа, которая определяет
возможности пользователей при работе с информационными ресурсами. Администраторы имеют
полный доступ ко всем функциям системы, включая управление пользователями и конфигурацию
платформы.
Преподаватели могут создавать, редактировать и удалять собственные ресурсы, а также
просматривать статистику их использования. Студенты имеют доступ только к просмотру и
поиску опубликованных ресурсов.

14.

Функционал «VectorEd»:
Администрирование и принципы
UI/UX
Принцип UI/UX
Реализация в «VectorEd»
Адаптивность
Интерфейс корректно отображается на
устройствах с разными размерами экрана,
от мобильных телефонов до настольных
компьютеров.
Интуитивность
Использование привычных паттернов
интерфейса и понятных иконок,
минимизация когнитивной нагрузки на
пользователя.
Доступность
Соответствие стандартам WCAG 2.1,
поддержка скринридеров, достаточный
контраст и возможность управления с
клавиатуры.
Обратная связь
Мгновенная реакция интерфейса на
действия пользователя, информативные
уведомления о результатах операций.
Административный интерфейс «VectorEd» предоставляет
инструменты для управления пользователями,
мониторинга активности и настройки системы. Дизайн
основан на принципах материального дизайна с акцентом
на удобство использования и эффективность выполнения
административных задач.

15.

Экономическое обоснование: Оценка эффективности
Экономия времени
Оптимизация процессов
Потенциал развития
Сокращение времени на поиск и
Унификация форматов и структуры
Создание единой базы знаний по
подготовку учебных материалов на
образовательных ресурсов.
специальным предметам.
45%. Автоматизация рутинных
Повышение эффективности
Формирование цифрового актива
процессов позволяет преподавателям
коллаборации между
института, который может быть
сосредоточиться на развитии курсов
преподавателями на 30%.
использован для расширения
и работе со студентами, что
Возможность повторного
образовательных программ и
положительно влияет на качество
использования ресурсов в различных
привлечения новых студентов.
образования.
курсах.
Поскольку VectorEd не предполагает прямой монетизации, экономическая эффективность
оценивалась качественно и через косвенные выгодны. Внедрение приложения позволяет
консолидировать учебные материалы, существенно экономя время преподавателей и
студентом на поиск нужной информации. Оптимизация процессор подготовки и обновления
материалов снижает рутинную нагрузку на преподавательский состав

16.

Заключение и перспективы развития проекта
Достижение цели
Практическая значимость
Перспективы развития
Разработано веб-приложение
Система повышает эффективность
Внедрение элементов искусственного
«VectorEd», полностью
образовательного процесса,
интеллекта для рекомендаций
соответствующее поставленным
упрощает доступ к
материалов, интеграция с внешними
требованиям и успешно решающее
специализированным учебным
образовательными платформами,
задачу управления
материалам и способствует
разработка мобильного приложения.
информационными ресурсами по
цифровизации образования в ДИНО.
специальным предметам в ЭИОС
ДИНО.
В ходе исследования были решены все поставленные задачи, что позволило создать
функциональное веб-приложение для управления информационными ресурсами по
специальным предметам. Практическая значимость работы заключается в создании
инструмента, который обеспечивает эффективное взаимодействие студентов и
преподавателей с учебными материалами.
Дальнейшее развитие проекта может включать интеграцию с внешними образовательными
платформами, улучшение аналитических возможностей и добавление инструментов для
коллаборативной работы с ресурсами.
Спасибо за внимание!