УДК 004

Разработка защищенного веб-приложения для обучения программированию

Кечкин Борис Андреевич – студент направления «Программная инженерия» по магистерской программе «Безопасность и защита программных систем» Южно-Уральского государственного университета Елсаков Сергей Михайлович – кандидат физико-математических наук, преподаватель Южно-Уральского государственного университета

Аннотация: В статье рассмотрена разработка защищенного веб-приложения для обучения программированию. Известно, что детям нравятся различные гаджеты. Увлекаясь этими устройствами, дети пользуются ими в течение всего дня, являясь пассивными потребителями. Данное увлечение детей гаджетами можно преобразовать в полезное занятие и научить ребенка основам программирования при помощи игры, используя виртуального робота. С каждым днем во всем мире востребованность к обучению детей программированию стремительно возрастает. В связи с этим появляется необходимость повысить мотивацию детей в обучении программированию. Для этого необходимо разработать не только веб-приложение для обучения детей программированию, а также многопользовательский режим в данном веб-приложении, который позволит детям взаимодействовать между собой.

Ключевые слова: цифровые технологии, обучение программированию, виртуальный робот, веб-приложение, многопользовательский режим работы, защита информации, языки программирования.

В настоящее время наблюдается постоянное уменьшение возраста детей, с которого они могут начать изучение программирования. Это происходит при помощи людей, которые изобретают все новые и новые способы обучения программированию, доступные детям.

Все знают, что детям нравятся различные гаджеты. К ним относятся не только смартфоны, планшеты, но также и роботы. В основном, считается, что дети, увлекаясь этими устройствами, проводят время без пользы, особенно когда родители позволяют детям пользоваться смартфоном или планшетом в течение всего дня.

Существует возможность данное увлечение детей гаджетами преобразовать в полезное занятие и научить ребенка основам программирования при помощи игры, используя виртуального робота.

Актуальность данной темы состоит в том, что с каждым днем во всем мире востребованность к обучению детей программированию стремительно возрастает. На опыте разных стран можно увидеть, что обучить программированию возможно даже и самых маленьких детей. Необходимо подчеркнуть, что обучение языкам программирования не проводится только для того, чтобы больше людей становились программистами. Существует достаточно большое количество аргументов для обучения детей программированию, так как программирование:

1. Учит мыслить логически.
2. Способствует развитию творчества.
3. Показывает, как нужно решать проблемы.
4. Помогает оказаться в мире технологий.

В связи с этим появляется необходимость повысить мотивацию детей в обучении программированию.

Нужно разработать не только веб-приложение для обучения детей программированию, а также многопользовательский режим в данном веб-приложении, который позволит детям взаимодействовать между собой.

Первым этапом работы стало составление технического задания, в котором представлены общие сведения автоматизированной системы (АС), ее цель и назначение создания, характеристика объектов автоматизации, требования к автоматизированной системе, состав и содержание работ по ее созданию, порядок контроля и приемки автоматизированной системы, требования к составу и содержанию работ по подготовке объекта автоматизации к вводу автоматизированной системы в действие, требования к документированию, источники разработки.

1. Полное наименование АС: «Защищенное веб-приложение для обучения программированию». Условное обозначение АС: ВП «ОП».
2. Целью создания АС является повышение мотивации детей в обучении программированию.
3. Назначение АС: к виду автоматизируемой деятельности относятся процессы получения и обработки информации посредством ВП «ОП», включая создание пользователями приложения алгоритмов, вывод рейтинга пользователей согласно их достижениям и организацию хранения информации.
4. Характеристика объектов автоматизации: объектом автоматизации является виртуальный робот, расположенный в игровом поле. Движением данного робота управляют дети при помощи программы, собранной ими на экране планшета или смартфона, и которая представляет собой набор пиктограмм.

ВП «ОП» обеспечивает использование важнейших концепций программирования.

Методический комплект ВП «ОП» состоит из нескольких цепочек заданий. В первой цепочке осваиваются правила работы с ВП «ОП» и вводятся основные понятия программирования.

Остальные цепочки состоят из многопользовательских заданий, направленных на закрепление этих понятий. Многопользовательский режим выполнения заданий в данном случае подразумевает:

• формирование двух команд с равным числом участников;
• выполнение определенного задания на одном игровом поле.

Требования к структуре АС в целом: ВП «ОП» должно быть реализовано как современное программное решение. В основу создания ВП «ОП» должны быть положены следующие принципы:

• многопользовательский режим работы;
• разграничение доступа к информации;
• защита информации.

Требования к функциям, выполняемым АС:

• создание пользователями приложения алгоритмов;
• оценка приложением алгоритма, который составил пользователь, по определенным критериям;
• возможность пользователей зарабатывать баллы за выполненные задания;
• вывод рейтинга пользователей согласно их достижениям.

Перечень этапов работ по созданию АС:

• создание игрового поля;
• программирование виртуального робота;
• составление методического комплекта заданий;
• организация многопользовательского режима выполнения заданий;
• создание функций, связанных с оценкой алгоритмов, составленных пользователем;
• введение балльной системы и рейтингов.

Состав испытаний АС:

• регистрация нового пользователя или осуществление входа в существующую учетную запись пользователя;
• выполнение однопользовательского задания, в котором вводятся основные понятия программирования;
• выполнение многопользовательского задания, которое подразумевает взаимодействие двух команд с равным числом участников на одном игровом поле;
• проверка функций, связанных с оценкой алгоритмов, составленных пользователем;
• проверка введенных балльной системы и рейтингов.

На втором этапе работы проведено проектирование веб-приложения, в котором были описаны архитектура приложения и компоненты архитектуры.

Проектируемое веб-приложение состоит из двух взаимосвязанных частей: серверной и клиентской. Для создания клиентской части приложения используются языки программирования HTML, JavaScript и CSS, а для серверной части – JavaScript. В качестве библиотеки JavaScript, которая предоставляет удобный API для работы с AJAX, обеспечивающий обмен данными между веб-клиентами и серверами, была выбрана библиотека jQuery. Серверная часть приложения взаимодействует при помощи библиотеки Mongoose с системой управления базами данных MongoDB, не требующей описания схемы таблиц, для получения данных пользователей и их сохранения.

Архитектура веб-приложения представлена на рисунке 1.

Рисунок 1. Архитектура веб-приложения.

Серверная часть веб-приложения состоит из шести частей:

·       app.js;

·       auth.js;

·       refreshToken.js;

·       main.js;

·       secure.js;

·       userModel.js.

Серверная часть веб-приложения представлена на рисунке 2.

Рисунок 2. Серверная часть веб-приложения.

App.js представляет из себя основной компонент сервера, который отвечает за передачу данных, необходимых для выполнения многопользовательского задания, каждому клиенту, а также используется для аутентификации пользователей и подключения к базе данных MongoDB.

Auth.js обрабатывает аутентификацию пользователей при помощи связующего программного обеспечения passport.js, которое предназначено для аутентификации, а также с помощью открытого стандарта для создания токенов доступа JSON Web Token, основанного на формате JSON. Кроме этого, для аутентификации пользователей используется особый тип токенов Refresh Token, чтобы позволить пользователю обновлять свой основной JSON Web Token.

RefreshToken.js включает в себя логику для получения токена обновления из файла cookie и отправки запроса для получения нового токена.

Main.js описывает следующие маршруты данных: sign up (регистрация), login (вход) и logout (выход).

Secure.js описывает маршруты данных для получения рейтингов и для отправки результатов пользователей.

UserModel.js описывает логику хранения и извлечения данных из базы данных MongoDB.

В клиентской части веб-приложения используется фреймворк Phaser, применяемый для создания игр HTML5 для компьютеров и мобильных устройств.

Клиентская часть веб-приложения представлена на рисунке 3.

Рисунок 3. Клиентская часть веб-приложения.

Когда запускается клиентская часть, вызывается метод init. В нем настраиваются параметры для сцены или игры. Далее следует предварительная загрузка (метод preload). Phaser загружает изображения и ресурсы в память перед запуском самой игры.

По завершении предварительной загрузки выполняется метод create. Данный метод, который выполняется один раз, используется для создания основных компонентов игры.

Пока сцена запущена, метод update выполняется несколько раз в секунду, тем самым обновляя игровую сцену.

Модель данных пользователя представлена на рисунке 4.

Рисунок 4. Модель данных пользователя.

Модель данных пользователя состоит из следующих полей:

• email – адрес электронной почты пользователя;
• password – хешированный пароль пользователя;
• name – имя пользователя.

Модель данных многопользовательского задания представлена на рисунке 5.

Рисунок 5. Модель данных многопользовательского задания.

Модель данных многопользовательского задания состоит из следующих полей:

• email – адрес электронной почты пользователя;
• name – имя пользователя;
• program – программа пользователя;
• result – массив с результатами пользователя;
• sum – суммарное значение результата пользователя;
• date – дата выполнения многопользовательского задания.

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

Процесс входа и регистрации представлен на рисунке 6.

Рисунок 6. Процесс входа и регистрации.

В веб-приложении было создано 10 одиночных заданий, а также 4 многопользовательских задания. В каждом одиночном задании пользователю необходимо составить программу при помощи элементов управления, расположенных справа от игрового поля, для того, чтобы собрать определенное количество флажков и закрасить определенное количество клеток. Если пользователю не удалось выполнить задание, то оно начинается сначала.

Одиночное задание представлено на рисунке 7.

Рисунок 7. Одиночное задание.

В многопользовательских заданиях пользователю необходимо составить универсальную программу для того, чтобы робот обошел все игровое поле. Далее пользователь отправляет свою программу в базу данных, и она сравнивается с программой каждого пользователя, выполнившего данное задание, при разном расположении флажков на игровом поле. После этого средний результат можно просмотреть в таблице лидеров.

Многопользовательское задание и таблица лидеров к данному заданию представлены на рисунке 8.

Рисунок 8. Многопользовательское задание и таблица лидеров.

Считается, что учиться никогда не поздно. Сегодня подтверждается и тот факт, что основы программирования могут достаточно хорошо усваиваться детьми возрастом до 4-х лет. Также сохраняется такая закономерность, что чем меньше ребенку лет, тем он лучше воспринимает новые знания.

Конечно, методы и способы обучения обязательно должны быть подобраны под возраст ребенка. Одним из главных положительных моментов получения навыков программирования является логическое мышление. Кроме этого, программирование – это не только написание инструкций и функций, но также исследование важных факторов и прогнозирование результатов при принятии каких-либо решений, что является немаловажной составляющей способности к анализу.

Программирование обучает детей творчеству, благодаря которому они могут найти интересные решения, приводящие их к определенной цели. Это осуществляется для детей в виде игры.

Современные цифровые технологии, включая компьютеры, используются человеком практически во всех областях его жизни. Эта тенденция будет являться актуальной и в будущем. Современные люди, которые умеют использовать новые технологии, быстрее адаптируются к окружающему их миру.

В процессе обучения программированию дети меняют свое отношение к цифровым технологиям от пассивного потребления до осознанного применения. Тем самым, развивая данную способность к пониманию современного мира, они открывают для себя новые возможности.

Список литературы

1. Будаев Е.С. Обзор и сравнительный анализ библиотек и фреймворков JavaScript / Е.С. Будаев, А.В. Димова // Вестник современных исследований. – 2019. – № 6.2 (33). – С. 33–37.
2. Шкарбан Ф.В. JavaScript-фреймворки и библиотеки / Ф.В. Шкарбан, З.Э. Халилова, А.Н. Абдуллаев // Информационно-компьютерные технологии в экономике, образовании и социальной сфере. – 2017. – № 3 (17). – С. 48-52.
3. Андреева А.Ю. Прогрессивные веб-приложения как один из трендов веб-разработки в 2020 году / А.Ю. Андреева // Образование в России и актуальные вопросы современной науки: сборник статей III Всероссийской научно-практической конференции – Пенза: Пензенский государственный аграрный университет, 2020. – С. 25-28.
4. Сафин А.М. Прогрессивные веб-приложения / А.М. Сафин, К.А. Кадыров // Молодёжь, наука, инновации: Актуальные вопросы современности: сборник статей II Международной научно-практической конференции – Пенза: Наука и Просвещение, 2021. – С. 22-24.
5. Магомадов В.С. Основные принципы разработки прогрессивного веб-приложения / В.С. Магомадов // Тенденции развития науки и образования. – 2020. – № 62 (4). – С. 81–83.
6. Янковская А.В. Робототехника и программирование в дополнительном образовании: опыт работы, проблемы и векторы развития в технологическом образовании / А.В. Янковская // Технолого-экономическое образование: Достижения, инновации, перспективы: материалы XIX Всероссийской научно-практической конференции с международным участием – Тула: Тульский государственный педагогический университет им. Л.Н. Толстого, 2021. – С. 185-189.
7. Николаенкова М.Н. Особенности обучения младших школьников основам робототехники и визуального программирования / М.Н. Николаенкова // Математика и информатика в образовании и бизнесе: сборник материалов международной научно-практической конференции – М.: Aegitas, 2020. – С. 396-401.
8. Пацева Е.В. Использование элементов робототехники при изучении алгоритмизации и основ программирования / Е.В. Пацева, М.В. Богданова // Информационные технологии в образовательном процессе вуза и школы: материалы ХIII Всероссийской научно-практической конференции – Воронеж: Научная книга, 2019. – С. 109–114.
9. Варенина Л.П. Геймификация в образовании / Л.П. Варенина // Историческая и социально-образовательная мысль. – 2014. – Т. 6, № 6 (2). – С. 314-317.
10. The effect of challenge-based gamification on learning: An experiment in the context of statistics education / Nikoletta-Zampeta Legaki, Nannan Xi, Juho Hamari and others // International Journal of Human-Computer Studies. – 2020. – V. 144. – P. 1-14.