МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ Государственное автономНОЕ образовательное
учреждение высшего образования
«Новосибирский НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ государственный университет»
(нОВОСИБИРСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ, НГУ)
Факультет Механико-математический
Кафедра Программирования
Направление подготовки Математика и компьютерные науки
ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА БАКАЛАВРА
Коробов Владислав Александрович
Тема работы: Разработка и реализация компьютерной обучающей программы.
«К защите допущена» Научный руководитель
Заведующий кафедрой, к.ф.-м.н., с.н.с.,
д.ф.-м.н., профессор ИВМиМГ СО РАН
Марчук А.Г /________ Скопин И.Н. /__________
(фамилия , И., О.) (подпись, МП) (фамилия , И., О.) (подпись, МП)
«…»………………20…г. «…»………………20…г.
Дата защиты: «…» ……………20…г.
Новосибирск, 2017
Реферат
Объем работы составляет 23 страницы, список использованной литературы включает в себя 11 источников, в работе приводятся 9 рисунков.
Цель работы заключается в создании Web-приложения, обеспечивающего поддержку работы преподавателя по созданию учебных материалов. В процессе разработки были предложены функциональные и интерфейсные решения для формирования электронного учебника. Разработаны модули, осуществляющие управление данными.
Помимо этого, были охарактеризованы современные программные средства, предназначенные для составления учебных материалов.
Приложение может быть использовано преподавателями в ходе учебного процесса в качестве основного или дополнительного средства.
Ключевые слова: электронный учебник, Web-приложение, Web-технологии, иерархические структуры.
Оглавление
Введение 4
1.Постановка задачи 6
2.Обоснование выбора использованных технологий. 7
2.1JavaScript 7
2.2React 9
2.3Redux 11
2.4Стандарт ES2015 13
3.5 Twitter Bootstrap 14
4.1 Архитектура приложения 17
4.2 Функциональные и интерфейсные решения 18
Введение
В настоящее время активно разрабатываются компьютерные инструментальные средства для ведения учебных курсов. По многим направлениям учебных дисциплин создаются электронные учебники и самоучители.
Однако создание и организация учебных курсов с использованием электронных обучающих средств, в особенности на базе Интернет - технологий, является непростой технологической и методической задачей.
Тем не менее индустрия компьютерных учебно-методических материалов расширяется в силу их востребованности и социальной значимости. К примеру, компьютерные средства обучения полезны при самостоятельной и индивидуальной работе, они очень важны для личностно - ориентационной системы обучения. [3]
В этой связи актуальной является разработка адекватных современным идеям развития образования концепции построения и использования компьютерных обучающих средств, в частности электронных учебников.
В отличие от классического «бумажного» варианта учебника, электронный учебник предназначен для иного стиля обучения, в котором нет ориентации на последовательное, линейное изучение материала. Учебно-информационный текст электронного учебника должен быть четко иерархически сконструирован по содержанию. Верхний уровень иерархии отражает основные понятия и концепции предметной области. Более низкие уровни должны последовательно детализировать и конкретизировать эти понятия. При этом необходимо четко обозначить определения, примеры, объекты и утверждения. Такой подход позволит изучать предмет с различной степенью глубины.
Электронный учебник – это наглядный пример иерархически структурированного учебного материала. Он должен включать в себя инструменты поддержки задач от самых простейших до сложно устроенных, организационные материалы (журналы, отчеты и т.д.).
Также необходимы унифицированные средства оперирования иерархическими структурами данных, которые позволяют легко создавать требуемые иерархии и модифицировать их. [4]
Основной целью данной работы является создание Web-приложения, представляющего собой шаблон электронного учебника и предназначенного для поддержки работы учителя по созданию различных учебных материалов.
-
Постановка задачи
Для достижения цели данной работы необходимо решить следующие задачи:
1) Провести анализ научно-педагогической литературы и опыта применения информационных технологий в процессе обучения.
2) Реализовать следующие базовые средства и функции приложения:
1) Инструменты формирования иерархических структур данных, обеспечивающие возможности построения иерархий, их редактирования и анализа для заданной предметной области.
2) Создание типовых шаблонов тестов и заданий.
3) Интерфейсные средства наполнения иерархических структур для ввода информации в программу.
Основными требованиями к разработке являются:
- возможность расширения функциональности.
- наличие автономного модуля, допускающего включение его в используемые в настоящее время обучающие среды.
-
Обоснование выбора использованных технологий.
Выбранные Web-технологии позволяют достигнуть оперативности в разработке и корректировании электронных средств обучения. С их использованием можно строить специализированные программные средства, основанные на общих формах организации материала для всех предметных областей дистанционного обучения. [2,10]
Данные средства поддерживаются всеми современными браузерами и не требуют специальных действий для работы с ними.
JavaScript является высокоуровневым,динамическим,нетипизированным, интерпретируемым языком времени выполнения. Он был стандартизован в спецификации языка ECMAScript. Наряду с HTML и CSS, JavaScript является одной из трех основных технологий создания контента в Web-среде; Большинство веб-сайтов используют его, и все современные веб-браузеры поддерживают его без использования плагинов. JavaScript основан на прототипе с первоклассными функциями, что делает его много парадигматическим языком, поддерживающим объектно-ориентированный императив и функциональные стили программирования. Он имеет API для работы с текстом, массивами, датами и регулярными выражениями, но не включает в себя какие-либо операции ввода-вывода, такие как сети, хранилища или графические объекты, полагаясь на них в среде хоста, в которую он внедрен. [7]
JavaScript также используется в средах, которые не основаны на Web, таких как документы PDF, браузеры для конкретных сайтов и виджеты на рабочем столе. Новые и более быстрые виртуальные машины JavaScript и платформы, созданные на их основе, также повысили популярность JavaScript для серверных веб-приложений. На клиентской стороне разработчики традиционно используют JavaScript как интерпретируемый язык, но более поздние браузеры выполняют компиляцию «точно в срок». Программисты также используют JavaScript в разработке видеоигр, при разработке настольных и мобильных приложений, а также при программировании на стороне сервера с использованием среды времени выполнения, такой как Node.js.
Преимущества JavaScript:
1) Универсальность
Все современные веб-браузеры поддерживают JavaScript со встроенными интерпретаторами.
2) Императивность и структурированность
JavaScript поддерживает большую часть структурированного синтаксиса программирования от C (например, if операторы, циклы while, операторы switch, do while циклы и т. д.). Одно частичное исключение - область видимости: JavaScript изначально имел только область действия функции с var. Подобно C, JavaScript делает различие между expressions и statements. Одним синтаксическим отличием от C является автоматическая вставка точки с запятой, что позволяет использовать точки с запятой, которые обычно прерывают выполнение операторов.
3) Основанный на прототипе
JavaScript почти полностью основан на классах. В JavaScript объект - это ассоциативный массив, дополненный прототипом. Каждый строковый ключ предоставляет имя для свойства объекта. Свойство может быть добавлено, восстановлено или удалено во время выполнения. Большинство свойств объекта (и любого свойства, принадлежащего цепочке наследования прототипов объекта) могут быть перечислены с использованием цикла for ... in.
React JS — это JavaScript-библиотека, разработанная в Facebook для создания пользовательских интерфейсов, которая популяризировала идею использования виртуального DOM. [5]
DOM (аббревиатура от Document Object Model) — способ представления структурного документа с помощью объектов. Это кроссплатформенное и языко-независимое соглашение для представления и взаимодействия с данными в HTML, XML и т.д.
React создает дерево из JavaScript-объектов для имитации DOM-дерева. Затем он создает из них HTML, который вставляется или добавляется к нужному DOM-элементу, что вызывает перерисовку страницы в браузере. React позволяет разработчикам создавать крупные веб-приложения, которые используют данные, имеющие возможность изменяться со временем, без перезагрузки страницы. Его основная цель - быть быстрым, простым и масштабируемым.
Функциональные возможности React:
1)Однонаправленный поток данных
Свойства, набор неизменяемых значений, передаются в средство визуализации компонента как свойства в свой тег HTML. Компонент не может напрямую изменять любые свойства, переданные ему, но может быть передан функциями обратного вызова, которые изменяют значения.
2) Виртуальный DOM
Еще одной заметной особенностью является использование «виртуальной модели объектов документа» или «виртуального объекта DOM». React создает кэш структуры данных в памяти, вычисляет получающиеся различия, а затем эффективно обновляет отображаемую DOM браузера. Это позволяет программисту писать код, как если бы вся страница отображалась при каждом изменении, а библиотеки React отображали только подкомпоненты, которые фактически меняются. [9]
3) JSX
Компоненты React обычно записываются в JSX, синтаксисе расширений JavaScript, позволяющем ссылаться на HTML и использовать синтаксис тега HTML для отображения подкомпонентов. Это специфическое для React расширение грамматики для JavaScript, как и ныне несуществующий E4X. Синтаксис HTML обрабатывается в вызовы JavaScript в рамках React.
Redux — это инструмент управления как состоянием данных, так и состоянием интерфейса в JavaScript-приложениях. Он подходит для одностраничных приложений, в которых управление состоянием может со временем становиться сложным. Redux не связан с каким-то определенным фреймворком, и, хотя разрабатывался для React, может использоваться с Angular или jQuery.
Redux является предсказуемым контейнером состояния для JavaScript приложений.Это позволяет создавать приложения, которые ведут себя одинаково в различных окружениях (клиент, сервер), а также просто тестируются. Кроме того, это обеспечивает большой опыт отладки, например, редактирование кода в реальном времени в сочетании с time traveling.
Каждая функция представляет собой объект, который помещается в состояние Redux, группирующее все необходимое для функции. Обычно это будет включать в себя один или несколько компонентов React, редуктор и, возможно, даже промежуточное программное обеспечение. Сгруппировав их вместе и атомарно добавив их в состояние Redux, можно атомарно активировать целые части вашего приложения.
React не рекомендует использовать непосредственное взаимодействие компонентов. Redux предлагает решить это путем хранения всего состояния приложения в одном месте — хранилище. Компоненты передают изменения состояния в хранилище, а не напрямую другим элементам. Компонент, которому важны эти изменения может подписаться на них в хранилище.
Метод dispatch () передает объект, известный как действие, в Redux. Действие можно описать как “полезную нагрузку”, несущую тип и все остальные данные, которые могут быть использованы для обновления состояния — в данном случае пользователя.
Как сказано ранее, React не позволяет приложению вносить изменения в состояние напрямую. Вместо этого переданное действие “описывает” изменение состояния и намерение изменить состояние. А изменяют состояние редукторы (reducers) — это функции, которые пишутся для обработки отправленных действий.
Редуктор принимает текущее состояние как аргумент и может модифицировать состояние, только вернув новое состояние.
Редукторы должны быть написаны как “чистые функции”, этот термин описывает функцию со следующими характеристиками:
-она не делает вызовов за пределы сети или базы данных;
-она возвращает значение, зависящее только от значений ее параметров;
-ее аргументы должны рассматриваться как “неизменные”, это означает, что они не должны быть изменены;
-вызов чистой функции с одинаковым набором аргументов должен всегда возвращать одно и то же значение.
Они называются “чистые”, потому что не делают ничего, кроме возвращения значения в зависимости от их параметров. Они не влекут никаких побочных эффектов для остальной части системы. [11]
ES2015 является существенным обновлением JavaScript и первым крупным обновлением языка с тех пор, как ES5 была стандартизирована в 2009 году.
Основные особенности:
1)Arrow функции
Стрелки - это сокращение функции с использованием синтаксиса =>.
Рис.2.1 Arrow-функции
2) Шаблоны строк
Рис 2.2 Шаблоны строк
3)Ключевое слово let
С введением стандарта ES2015 добавилось ключевое слово let для блочного определения области видимости, то есть JavaScript теперь имеет как функцию, так и область охвата блока. [10]
3.5 Twitter Bootstrap
Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.[6] С его помощью реализуется дизайн приложения.
-
Обзор средств по созданию электронных учебных материалов
PowerPoint
Microsoft PowerPoint — программа подготовки презентаций и их последующего просмотра, являющаяся частью Microsoft Office и доступная в редакциях для операционных систем Microsoft Windows и Mac OS. Материалы, подготовленные с помощью PowerPoint предназначены для отображения на большом экране — через проектор, либо телевизионный экран большого размера.
Рис. 3.1 Интерфейс средства PowerPoint
Stepik
Stepik - это платформа, предназначенная для создания и распространения интерактивного образовательного контента, усиленного различными типами автоматически оцениваемых заданий.
Рис. 3.2 Интерфейс платформы Stepik
-
Программная реализация
4.1 Архитектура приложения
При открытии сайта на основе данных, которые лежат в хранилище, представление отрисовывает интерфейс. При включении режима редактирования в интерфейсе появляются дополнительные компоненты добавления тестовых заданий, редактирования оглавления и форма добавления информации в учебник.
Как только происходит какое-либо действие, модифицирующее данные, через метод dispatch () вызывается обработчик соответствующего действия, который отправляет запросы в Reducer.После этого на основе переданных данных Reducer изменяет состояния в хранилище. Изменённые данные в автоматическом режиме перерисовываются в представлении. Схема процесса отображена на рисунке 5.
Рис. 4.1 Архитектура приложения
4.2 Функциональные и интерфейсные решения
На рисунке 6 показан стартовый экран при открытии сайта. На нем в режиме предпросмотра отображается иерархически структурированное оглавление.
Рис. 4.2 Стартовый экран
При переходе в режим редактирования появляются дополнительные компоненты и опции. Используя форму в верхнем левом углу и вызывая действие при нажатии на кнопки «добавить» и специальных символьных кнопок «плюс» можно добавлять главы и подглавы в соответствующие разделы.
Рис. 4.3 Режим редактирования
Добавление информации осуществляется с помощью компонента библиотеки React – RichTextEditor.Данный компонент является визуальным редактором HTML-кода, то есть корректно отображает тексты, списки, изображения в привычном для пользователя виде и содержит в себе все базовые функции стандартного текстового редактора (шрифт, подчёркивание и т.д.).
Поле под редактором позволяет добавлять задания для каждой главы и подглавы. Задание формируется в виде теста с использованием компонента Radio.Выбранные технологии позволяют без труда расширить класс типов заданий, и наполнить его как простейшими вариантами, так и сложно устроенными.Кнопка «сохранить» в правом нижнем углу вызывает метод JSON.stringify(), который превращает JavaScript-объект в строку и сохраняет его в локальную память браузера. При повторном открытии сайта вызывается метод JSON.parse(), формирующий JavaScript-объект из строки и передающий его в хранилище.
Рис. 4.4 Добавление информации и заданий
При снятии галочки с режима редактирования включается обратно режим просмотра, содержащий в себе разделы, дополненные информацией и тестовыми заданиями.
Рис. 4.5 Режим просмотра
Заключение
В данной дипломной работе была поставлена и решена следующая задача: разработать Web-приложение, позволяющее преподавателю формировать электронные учебные средства, используя собственные дидактические материалы и функциональность приложения.
Основные результаты работы сводятся к следующему:
- предложена архитектура приложения, отвечающая требованиям к разработке системы.
- разработаны модули, осуществляющие управление данными.
- реализованы интерфейсные решения, позволяющие взаимодействовать с системой.
Функциональные возможности:
1)Формирование оглавления и навигации по нему.
2)Инструменты составления типовых заданий для каждого параграфа
3)Информационные вкладки.
Перспективы развития проекта:
1)Добавить дополнительный материал и медиа-вкладки.
2)Реализовать механизмы вызова определенных сценариев в процессе обучения. [1]
3)Поддержка автоматизированного контроля за действиями ученика.
За время написания проекта было освоено:
1)ReactJS
2)ReduxJS
3)Twitter Bootstrap
Закреплен опыт в:
1)JavaScript
2)NodeJS
3)ES2015
Литература
1) Гриншкун В.В “Использование иерархических структур в разработке электронных средств обучения”// Вестник МГПУ. Серия информатика и информатизация образования. / М.: МГПУ, - 2003, №1 (1), С.29-40.
2) Гриншкун В.В “Развитие интегративных подходов к созданию средств информатизации образования”. // диссертация на соискание степени доктора педагогических наук. / М., – 2004.
3) Башмаков А. И., Башмаков И. А. Разработка компьютерных учебников и обучающих систем. М.:2003.
4) Гриншкун В.В “Иерархии в информатизации образования”// Вестник МГПУ. Серия информатика и информатизация образования. / М.: МГПУ, - 2003, №1 (1)
5) https://en.wikipedia.org/wiki/React_(JavaScript_library)
6) Документация Twitter Bootstrap.
http://bootstrap-ru.com/
7) David Flanagan JavaScript: Definitive Guide.2008,982 стр.
8) http://singlepageappbook.com/
9) http://react.tips/
10) Описание стандарта ES2015
http://www.ecma-international.org/ecma-262/6.0/ECMA-262.pdf
11) Руководство по работе с Redux.
https://habrahabr.ru/company/mailru/blog/303456/
|
