МОДЕРНИЗАЦИЯ КЛИЕНТСКОЙ ЧАСТИ СИСТЕМЫ АДАПТИВНОГО ОБУЧЕНИЯ PLARIO
|
Аннотация
1 Анализ требований 10
1.1 Функциональные и нефункциональные требования 10
1.2 Модель предметной области 11
1.3 Варианты использования 13
1.3 Архитектурно значимые варианты использования 14
2 Технологии и инструменты 19
2.1 Angular 19
2.1.1 Генерация Angular-приложения, Angular CLI 19
2.1.2 Angular-приложение 20
2.1.3 Angular-библиотека 24
2.2 RxJs 26
2.3 Управление состоянием приложения 30
2.4 Используемые для стилизации приложения технологии 33
2.5 Статический анализ и форматирование кода 34
2.6 Тестирование приложения 34
3 Реализация 39
3.1 Core UI 40
3.1.1 Дашборд студента 42
3.1.2 Страница задания 44
3.2 АРМ Преподавателя 48
3.2.1 Страница создания, просмотра и редактирования курса 49
3.2.2 Руководство пользования для преподавателя 53
3.3 Реализация Angular-библиотеки 57
3.4 Стилизация приложения 58
3.5 Настройка окружения и конфигурация утилит для поддержания качества кода 59
3.5.1 Конфигурация ESLint 59
3.5.2 Конфигурация Prettier 61
3.5.3 Конфигурация lint-staged 62
3.5.4 Конфигурация husky 62
Заключение 64
Список используемой литературы 65
Рисунок 1 - Модель предметной области 12
Рисунок 2 - Диаграмма вариантов использования актера с ролью Студент 16
Рисунок 3 - Диаграмма вариантов использования актера с ролью Контент-менеджер 16
Рисунок 4 - Диаграмма вариантов использования актера с ролью Преподаватель 17
Рисунок 5 - Диаграмма вариантов использования актера с ролью Администратор 17
Рисунок 6 - Диаграмма вариантов использования актера с ролью Супер-администратор . 18
Рисунок 7 - Визуализация архитектурного подхода MVVM 21
Рисунок 8 - Пример того, как приложение может быть разбито на компоненты.
Примечание: Разными цветами выделены отдельные компоненты 23
Рисунок 9 - Визуализация паттерна Наблюдатель в общем случае 26
Рисунок 10 - Диаграмма классов, демонстрирующая применение паттерна Наблюдатель в контексте использования библиотеки RxJs 27
Рисунок 11 - Пример Marble-диаграммы [15] 28
Рисунок 12 - Диаграмма, демонстрирующая основной flow состояния приложения при использовании NgRx [24] 32
Рисунок 13 - Диаграмма взаимодействия сервисов. Примечание: желтым отмечены клиентские приложения, оранжевым - серверные приложения на .Net, красным - сервисы на Python, серым - внешние сервисы 39
Рисунок 14 - Структура модулей Core UI. Примечание: цветом выделены модули, которые претерпели наибольшие изменения 40
Рисунок 15 - Структура директорий в модулях, задействованных в АРМ студента 42
Рисунок 16 - Структура компонентов, используемых на странице дашборда в АРМ студента 43
Рисунок 17 - Скриншот страницы дашборда в АРМ студента 44
Рисунок 18 - Структура классов, используемых на странице задания. Примечание: красным выделены классы, включенные в модуль LearnerSharedModule, фиолетовым - в модуль SharedModule, зеленым —в модуль CoreModule, желтым - классы из внешних модулей 44
Рисунок 19 - Диаграмма последовательности процесса ответа студента на задание 46
Рисунок 20 - Скриншот страницы задания с открытым теоретическим материалом 47
Рисунок 21 - Скриншот страницы с открытым практическим материалом 47
Рисунок 22 - Скриншот страницы задания после ответа студента на практический материал 48
Рисунок 23 - Структура модулей приложения Teacher UI 48
Рисунок 24 - Структура классов, используемых на странице просмотра/создания/редактирования курса. Примечание: синим отмечены классы входящие в модуль CoursesModule, зеленым - в модуль CoreModule, желтым - классы из внешних модулей 49
Рисунок 25 - Структура компонентов, используемых на странице просмотра/создания/редактирования курса. Примечание: зеленым выделены компоненты выходящие в CoursesModule, синим - в PrimeNgModule, желтым - в Shared Module 50
Рисунок 26 - Скриншот страницы создания курса 51
Рисунок 27 - Скриншот страницы создания курса с раскрытой таблицей навыков для модуля 52
Рисунок 28 - Скриншот страницы создания курса с раскрытой таблицей студентов 52
Рисунок 29 - Скриншот страницы редактирования курса 53
Рисунок 30 - Скриншот страницы просмотра курса 53
Рисунок 31 - Структура классов, используемых при прохождении руководства в АРМ
преподавателя 54
Рисунок 32 - Диаграмма последовательности процесса прохождения обучения на первой странице пользователем в АРМ преподавателя 55
Рисунок 33 - Скриншот страницы курсов с открытым первым шагом руководства для преподавателей 56
Рисунок 34 - Скриншот страницы создания курса с открытым третьим шагом руководства для преподавателей 56
Рисунок 35 - Диаграмма пакетов PlarioPackages и их взаимодействия с пакетами Core UI. Примечание: зеленым выделены пакеты, входящие в состав библиотеки plario, синим - пакеты, входящие в состав приложения demo, красным - пакеты из библиотеки Angular Material 57
Рисунок 36 - Сравнение компонентов Angular Material до и после стилизации 59
Рисунок 37 - Диаграмма активности действий, выполняемых локально на компьютере разработчика 63
Листинг 1 - Файловая структура Angular-приложения 20
Листинг 2 - Файловая структура Angular-библиотеки 20
Листинг 3 - Пример конфигурации маршрутизатора 22
Листинг 4 - Использование One Way Data Binding в Angular-шаблонах 24
Листинг 5 - Использование Two Way Data Binding в Angular-шаблонах 24
Листинг 6 - Использование One Way Event Binding в Angular-шаблонах 24
Листинг 7 - Файловая структура Angular-библиотеки 25
Листинг 8 - Пример использования RxJs-операторов 29
Листинг 9 - Пример Observable data сервиса 31
Листинг 10 - Пример создания mixins в scss 33
Листинг 11 - Пример css-кода после сборки scss файла с использованием mixins 34
Листинг 12 - Пример функции для которой предполагается написание unit-теста 35
Листинг 13 - Пример unit-теста для функции в листинге 12 35
Листинг 14 - Пример сервиса, для которого предполагается написание unit-тестов 36
Листинг 15 - Пример DatesService mock для DatesService 36
Листинг 16 - Пример конфигурации тестового модуля для тестирования DatesService 37
Листинг 17 - Пример теста для метода validate. Проверка на то, что метод validate объекта класса DatesService был вызван один раз с необходимым параметром 37
Листинг 18 - Пример теста для метода validate. Проверка на то, что метод post класса
HttpClient был вызван один раз с необходимым параметром 38
Листинг 19 - Пример стилизации компонента MatInput из библиотеки Angular Material... 58
Листинг 20 - Пример конфигурации ESLint 60
Листинг 21 - Пример конфигурации Prettier 61
Листинг 22 - Пример конфигурации lint-staged 62
Листинг 23 - Пример конфигурации husky pre-commit скрипта 62
1 Анализ требований 10
1.1 Функциональные и нефункциональные требования 10
1.2 Модель предметной области 11
1.3 Варианты использования 13
1.3 Архитектурно значимые варианты использования 14
2 Технологии и инструменты 19
2.1 Angular 19
2.1.1 Генерация Angular-приложения, Angular CLI 19
2.1.2 Angular-приложение 20
2.1.3 Angular-библиотека 24
2.2 RxJs 26
2.3 Управление состоянием приложения 30
2.4 Используемые для стилизации приложения технологии 33
2.5 Статический анализ и форматирование кода 34
2.6 Тестирование приложения 34
3 Реализация 39
3.1 Core UI 40
3.1.1 Дашборд студента 42
3.1.2 Страница задания 44
3.2 АРМ Преподавателя 48
3.2.1 Страница создания, просмотра и редактирования курса 49
3.2.2 Руководство пользования для преподавателя 53
3.3 Реализация Angular-библиотеки 57
3.4 Стилизация приложения 58
3.5 Настройка окружения и конфигурация утилит для поддержания качества кода 59
3.5.1 Конфигурация ESLint 59
3.5.2 Конфигурация Prettier 61
3.5.3 Конфигурация lint-staged 62
3.5.4 Конфигурация husky 62
Заключение 64
Список используемой литературы 65
Рисунок 1 - Модель предметной области 12
Рисунок 2 - Диаграмма вариантов использования актера с ролью Студент 16
Рисунок 3 - Диаграмма вариантов использования актера с ролью Контент-менеджер 16
Рисунок 4 - Диаграмма вариантов использования актера с ролью Преподаватель 17
Рисунок 5 - Диаграмма вариантов использования актера с ролью Администратор 17
Рисунок 6 - Диаграмма вариантов использования актера с ролью Супер-администратор . 18
Рисунок 7 - Визуализация архитектурного подхода MVVM 21
Рисунок 8 - Пример того, как приложение может быть разбито на компоненты.
Примечание: Разными цветами выделены отдельные компоненты 23
Рисунок 9 - Визуализация паттерна Наблюдатель в общем случае 26
Рисунок 10 - Диаграмма классов, демонстрирующая применение паттерна Наблюдатель в контексте использования библиотеки RxJs 27
Рисунок 11 - Пример Marble-диаграммы [15] 28
Рисунок 12 - Диаграмма, демонстрирующая основной flow состояния приложения при использовании NgRx [24] 32
Рисунок 13 - Диаграмма взаимодействия сервисов. Примечание: желтым отмечены клиентские приложения, оранжевым - серверные приложения на .Net, красным - сервисы на Python, серым - внешние сервисы 39
Рисунок 14 - Структура модулей Core UI. Примечание: цветом выделены модули, которые претерпели наибольшие изменения 40
Рисунок 15 - Структура директорий в модулях, задействованных в АРМ студента 42
Рисунок 16 - Структура компонентов, используемых на странице дашборда в АРМ студента 43
Рисунок 17 - Скриншот страницы дашборда в АРМ студента 44
Рисунок 18 - Структура классов, используемых на странице задания. Примечание: красным выделены классы, включенные в модуль LearnerSharedModule, фиолетовым - в модуль SharedModule, зеленым —в модуль CoreModule, желтым - классы из внешних модулей 44
Рисунок 19 - Диаграмма последовательности процесса ответа студента на задание 46
Рисунок 20 - Скриншот страницы задания с открытым теоретическим материалом 47
Рисунок 21 - Скриншот страницы с открытым практическим материалом 47
Рисунок 22 - Скриншот страницы задания после ответа студента на практический материал 48
Рисунок 23 - Структура модулей приложения Teacher UI 48
Рисунок 24 - Структура классов, используемых на странице просмотра/создания/редактирования курса. Примечание: синим отмечены классы входящие в модуль CoursesModule, зеленым - в модуль CoreModule, желтым - классы из внешних модулей 49
Рисунок 25 - Структура компонентов, используемых на странице просмотра/создания/редактирования курса. Примечание: зеленым выделены компоненты выходящие в CoursesModule, синим - в PrimeNgModule, желтым - в Shared Module 50
Рисунок 26 - Скриншот страницы создания курса 51
Рисунок 27 - Скриншот страницы создания курса с раскрытой таблицей навыков для модуля 52
Рисунок 28 - Скриншот страницы создания курса с раскрытой таблицей студентов 52
Рисунок 29 - Скриншот страницы редактирования курса 53
Рисунок 30 - Скриншот страницы просмотра курса 53
Рисунок 31 - Структура классов, используемых при прохождении руководства в АРМ
преподавателя 54
Рисунок 32 - Диаграмма последовательности процесса прохождения обучения на первой странице пользователем в АРМ преподавателя 55
Рисунок 33 - Скриншот страницы курсов с открытым первым шагом руководства для преподавателей 56
Рисунок 34 - Скриншот страницы создания курса с открытым третьим шагом руководства для преподавателей 56
Рисунок 35 - Диаграмма пакетов PlarioPackages и их взаимодействия с пакетами Core UI. Примечание: зеленым выделены пакеты, входящие в состав библиотеки plario, синим - пакеты, входящие в состав приложения demo, красным - пакеты из библиотеки Angular Material 57
Рисунок 36 - Сравнение компонентов Angular Material до и после стилизации 59
Рисунок 37 - Диаграмма активности действий, выполняемых локально на компьютере разработчика 63
Листинг 1 - Файловая структура Angular-приложения 20
Листинг 2 - Файловая структура Angular-библиотеки 20
Листинг 3 - Пример конфигурации маршрутизатора 22
Листинг 4 - Использование One Way Data Binding в Angular-шаблонах 24
Листинг 5 - Использование Two Way Data Binding в Angular-шаблонах 24
Листинг 6 - Использование One Way Event Binding в Angular-шаблонах 24
Листинг 7 - Файловая структура Angular-библиотеки 25
Листинг 8 - Пример использования RxJs-операторов 29
Листинг 9 - Пример Observable data сервиса 31
Листинг 10 - Пример создания mixins в scss 33
Листинг 11 - Пример css-кода после сборки scss файла с использованием mixins 34
Листинг 12 - Пример функции для которой предполагается написание unit-теста 35
Листинг 13 - Пример unit-теста для функции в листинге 12 35
Листинг 14 - Пример сервиса, для которого предполагается написание unit-тестов 36
Листинг 15 - Пример DatesService mock для DatesService 36
Листинг 16 - Пример конфигурации тестового модуля для тестирования DatesService 37
Листинг 17 - Пример теста для метода validate. Проверка на то, что метод validate объекта класса DatesService был вызван один раз с необходимым параметром 37
Листинг 18 - Пример теста для метода validate. Проверка на то, что метод post класса
HttpClient был вызван один раз с необходимым параметром 38
Листинг 19 - Пример стилизации компонента MatInput из библиотеки Angular Material... 58
Листинг 20 - Пример конфигурации ESLint 60
Листинг 21 - Пример конфигурации Prettier 61
Листинг 22 - Пример конфигурации lint-staged 62
Листинг 23 - Пример конфигурации husky pre-commit скрипта 62
Одной из проблем, с которой сталкиваются студенты и преподаватели в ходе образовательного процесса группы учеников, является отсутствие индивидуального подхода и возможности проконтролировать полученные знания у каждого конкретного студента. Другой проблемой является разный уровень подготовки студентов, приходящих в вуз. Для кого-то даже основы математического анализа будут даваться нелегко, потому что у студента может не быть необходимой для этого базы или могут иметь место пробелы в знаниях. Другим студентам первые темы уже могут быть знакомы, и в их прохождении нет необходимости.
Вариантом решения этой проблемы является составление модели знаний студента на основе его результатов по ходу решения задач. Однако один преподаватель не в силах составить такую модель для сотен обучающихся. В данном случае на помощь может прийти информационная система, которая составит модель, найдет пробелы в знаниях студента и не будет его нагружать той информацией, которая ему уже известна.
Реализацией данной концепции является онлайн система адаптивного обучения Plario, разработанная компанией Enbisys. После создания «движка» всей системы - алгоритма адаптивного обучения, который и составляет снимок знаний студента, необходимо поверх него создать информационную систему, которая будет обслуживать данное ядро, получать и записывать необходимые данные, иметь доступный и понятный интерфейс для работы пользователей с данной системой.
Для реализации современных приложений используется трехуровневая архитектура, состоящая из слоя данных, представляющих из себя базу данных, серверного слоя, в котором выполняется основная бизнес-логика системы, а также клиентской части, которая выполняет роль отрисовки интерфейса, а также управляет логикой отображения приложения. В ходе написания работы был модернизирован ряд приложений, являющихся частью онлайн-системы адаптивного обучения Plario.
Вариантом решения этой проблемы является составление модели знаний студента на основе его результатов по ходу решения задач. Однако один преподаватель не в силах составить такую модель для сотен обучающихся. В данном случае на помощь может прийти информационная система, которая составит модель, найдет пробелы в знаниях студента и не будет его нагружать той информацией, которая ему уже известна.
Реализацией данной концепции является онлайн система адаптивного обучения Plario, разработанная компанией Enbisys. После создания «движка» всей системы - алгоритма адаптивного обучения, который и составляет снимок знаний студента, необходимо поверх него создать информационную систему, которая будет обслуживать данное ядро, получать и записывать необходимые данные, иметь доступный и понятный интерфейс для работы пользователей с данной системой.
Для реализации современных приложений используется трехуровневая архитектура, состоящая из слоя данных, представляющих из себя базу данных, серверного слоя, в котором выполняется основная бизнес-логика системы, а также клиентской части, которая выполняет роль отрисовки интерфейса, а также управляет логикой отображения приложения. В ходе написания работы был модернизирован ряд приложений, являющихся частью онлайн-системы адаптивного обучения Plario.
Таким образом, поставленная цель была достигнута: был существенно
модернизирован существующий и разработан новый функционал клиентских предложений системы адаптивного обучения Plario.
Изменения в функционале, а также новые функции тестировались и вводились в эксплуатацию по мере их разработки. Так как система адаптивного обучения Plario является продуктом компании Enbisys, то для приобретения преимуществ на фоне конкурентов, предполагается дальнейшее развитие продукта. На момент написания работы постоянными клиентами Enbisys, которые используют Plario для обучения студентов, являются Национальный исследовательский Томский государственный университет, Национальный исследовательский Томский политехнический университет и Московский государственный медицинский университет имени И.М. Сеченова.
В ходе работы был приобретен опыт работы с такими популярными технологиями, как Angular, менеджерами состояния NgRx и NGXS; опыт настройки и конфигурации клиентских приложений для поддержания качества кода, написания unit-тестов, создания и внедрения отдельной Angular-библиотеки и работы с npm-пакетами. Опыт и умение применять данные технологии даст преимущество при работе в будущем.
модернизирован существующий и разработан новый функционал клиентских предложений системы адаптивного обучения Plario.
Изменения в функционале, а также новые функции тестировались и вводились в эксплуатацию по мере их разработки. Так как система адаптивного обучения Plario является продуктом компании Enbisys, то для приобретения преимуществ на фоне конкурентов, предполагается дальнейшее развитие продукта. На момент написания работы постоянными клиентами Enbisys, которые используют Plario для обучения студентов, являются Национальный исследовательский Томский государственный университет, Национальный исследовательский Томский политехнический университет и Московский государственный медицинский университет имени И.М. Сеченова.
В ходе работы был приобретен опыт работы с такими популярными технологиями, как Angular, менеджерами состояния NgRx и NGXS; опыт настройки и конфигурации клиентских приложений для поддержания качества кода, написания unit-тестов, создания и внедрения отдельной Angular-библиотеки и работы с npm-пакетами. Опыт и умение применять данные технологии даст преимущество при работе в будущем.
