РАЗРАБОТКА ЦИФРОВОЙ ПЛАТФОРМЫ ДЛЯ ОРГАНИЗАЦИИ РАБОТЫ ДНК ИМ. К.А.ВАЛИЕВА ЕЛАБУЖСКОГО ИНСТИТУТА КАЗАНСКОГО ФЕДЕРАЛЬНОГО УНИВЕРСИТЕТА

DEVELOPMENT OF A DIGITAL PLATFORM FOR ORGANIZING THE WORK OF DNA IM. K.A.VALIEV ELABUGA INSTITUTE OF KAZAN FEDERAL UNIVERSITY

Vitaliy Ivanushhenko

Student, Department of Mathematics and Natural Sciences, Elabuga Institute of Kazan Federal University,

Russia, Elabuga

Almaz Minnakhmetov

Student, Department of Mathematics and Natural Sciences, Yelabuga Institute of Elabuga Institute of Kazan Federal University,

Russia, Elabuga

Elvira Galimullina

Scientific Supervisor, Senior Lecturer, b/s, Elabuga Institute of Kazan Federal University,

Russia, Elabuga

АННОТАЦИЯ

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

ABSTRACT

In today's society, where information technology takes center stage, digital services are becoming an integral part of our daily lives. Additional education has not been left out of the digital revolution. This article discusses the creation of a digital platform for the House of Scientific Collaboration (HSC), the main purpose of which is to provide information about clubs and schedules of children attending additional classes, improve their interaction with the teacher, and facilitate and automate the activities of the administration of the educational institution.

Ключевые слова: информационные технологии, цифровые сервисы, дополнительное образование, цифровая платформа, курсы, frontend, фреймворки, Vue, веб-приложение, backend, php, MySQL, SEO, кэширование, PWA.

Keywords: digital technologies, e-services, additional education, digital platform, courses, frontend, frameworks, Vue, web application, teachers, backend, php, MySQL, SEO, caching, PWA.

В современном обществе цифровые технологии играют особую роль, проникая во многие сферы нашей жизни. Такие изменения не могут обойти стороной образование. Так, согласно У.М. Мамажонову, информационные технологии приобретают все большее значение для мышления и развития молодого поколения, в свете чего становится необходимым приспособить систему образования к цифровому обществу [2]. В этом контексте сфера дополнительного образования выступает важным фактором развития, так как занятия в данной сфере чаще всего посещают одаренные и талантливые дети. Однако, в настоящее время в сфере образования наблюдаются противоречия - с одной стороны, отсутствие достаточного уровня понимания материала у обучающихся при прохождении онлайн курсов, а с другой стороны, ограниченность цифровизации местных организаций дополнительного образования. При этом низкий уровень информационных технологий в этой сфере идет в разрез с приоритетами реализации государственной программы “Развитие образования”, нацеленной в том числе на внедрение в образовательные организации цифровой среды, которая позволяет расширить возможности традиционной формы обучения [6]. Именно поэтому возникает необходимость объединить преимущества традиционного формата обучения и возможности современных цифровых технологий. С целью решения данной проблемы нами была разработана цифровая платформа для Дома научной коллаборации Елабужского института Казанского федерального университета.

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

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

Следующим шагом в разработке цифровой платформы, стал   подбор подходящего инструментария. В настоящее время, клиентская часть веб-приложений базируется на трех основных фреймворках, а именно React, Vue и Angular. Согласно исследованию, проведенному В. Фридманом, результаты которого были представлены на конференции Epam Meet Up в сентябре 2021 года, страницы, созданные на Vue, имеют более высокую скорость загрузки по сравнению с другими популярными фреймворками [5]. Кроме того, фреймворк использует концепцию реактивного программирования и шаблон проектирования MVVM, что в совокупности позволяет моментально реагировать на любые действия пользователя, распространяя уведомления об изменении по всей системе компонентов [7, с. 27-29]. В связи с желанием создать не только привлекательный и удобный, но и быстрый сайт, использование Vue стало оптимальным выбором для нашего проекта. Тем не менее, было необходимо определиться с версией данного фреймворка. На момент начала проекта Vue 3 была еще несовершенна. Кроме того, мы учли некоторые особенности третьей версии фреймворка, освещенные в докладе специалистов Росбанка [4], в результате чего было принято решение использовать Vue 2 для разработки логики клиентской части нашего приложения.

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

"Шапка" должна содержать панель навигации, слайдер и кнопку входа в аккаунт/личный кабинет. Также нужно учитывать, что из-за авторизации на странице должны происходить изменения, и внешний вид модуля может меняться на некоторых страницах. Поэтому необходимо предусмотреть ре-рендер модуля в соответствии с его поведением.

Одной из наиболее важных функциональных частей платформы является страница курсов Дома научной коллаборации. Изменчивость количества курсов и их описания делает проблематичным создание статичной верстки. Для решения этой задачи было принято решение хранить данные всех курсов в JSON файле. При загрузке соответствующей страницы скрипт парсит данные из файла и помещает их в массив. Затем, с использованием директивы v-for [7, с. 108], которую предоставляет выбранный фреймворк, макет курса проходит по массиву, создавая полный список курсов. Этот подход автоматизирован и сокращен относительно первоначального решения. Однако, возникают новые проблемы, так как администраторам платформы необходимо иметь особый функционал на этой странице. Например, кнопки удаления курсов и отдельный блок для их создания. Нами было найдено решение – директива v-if [7, с. 104], которая отображает отдельные элементы в зависимости от роли посетителя. Позднее этот метод неоднократно был применен на страницах сайта.

Отметим, что сложности также возникают при создании страницы с подробной информацией о курсе. В данном случае не представляется возможным создание отдельных страниц для каждого курса из-за указанных ранее причин. Кроме того, написание отдельных, в значительной степени повторяющих друг друга страниц, является нарушением одного из основных принципов программирования – DRY (Don't Repeat Yourself). После тщательного изучения документации, мы обнаружили подходящее решение – использование модуля vue-router. С его помощью стало возможным передавать необходимые переменные внутри URL. Теперь ссылка на каждую отдельную страницу содержит идентификатор курса, который был получен системой. Имея этот идентификатор, платформа может обращаться к базе данных.

На странице курса были размещены основные данные курса, берущиеся из JSON объекта, всплывающее окно расписания, форма записи на курс для зарегистрированных родителей, достающийся из базы данных список записанных на курс детей для каждого конкретного родителя, а также полный список групп для преподавателей и администраторов. При помощи этого же списка родители и администраторы могут удалять детей с курса, а педагоги – отмечать отсутствующих на занятии детей. Помимо всего прочего, на экран администраторов платформы выводится список педагогов, назначенных на этот курс, а также поля, позволяющие редактировать курс, назначать и удалять педагогов и так далее. Важно было обеспечить администратору максимальную гибкость в настройке курса, поскольку в любой момент требования к курсу могут измениться, а “сложность в таких случаях должна быть пропорциональна лишь масштабу изменения, но никак не его форме” [3, с. 18].

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

Однако веб-приложение не ограничивается только клиентской его частью. Для разработки бэкенда был выбран PHP, который широко используется для разработки веб-приложений, благодаря своим преимуществам перед другими языками. Он поддерживается большинством хостинг-провайдеров и обладает возможностью взаимодействия с различными системами управления базами данных, такими как MySQL. PHP также обеспечивает работу с HTTP-авторизацией, cookie и сессиями, а также автоматическое извлечение POST- и GET-параметров в предопределенные массивы, что значительно облегчает выполнение задач.

Для хранения данных о пользователях мы использовали базу данных MySQL. Она обладает гибкостью благодаря поддержке различных типов таблиц, таких как MyISAM и InnoDB, которые поддерживают полнотекстовый поиск и транзакции на уровне записей соответственно. MySQL обладает высокой скоростью работы, надежностью и легкостью использования благодаря хранению данных в отдельных таблицах, что сделало ее идеальным выбором для нашего проекта.

Следует отметить, что значительная часть логики приложения была вынесена в клиентскую часть, что привело к недостаточному уровню безопасности платформы. Учитывая особенности выбранной архитектуры платформы, механизм взаимодействия клиента и сервера, а также особенности доступности клиентских скриптов, улучшение надежности платформы было возможно только при помощи серверных скриптов. В наших исследованиях мы не рассматривали возможность аппаратных сбоев, так как сосредоточились исключительно на программных ошибках и человеческом факторе [1, с. 27-31]. Это подразумевало, что на стороне сервера мы должны были проводить валидацию всех поступающих данных, проверять их достоверность, оценивать потенциальную угрозу, а также устанавливать права доступа пользователей и выявлять попытки манипулирования пользовательскими данными.

Для понимания принципов работы серверной части платформы рассмотрим алгоритм обработки запроса списка детей на курсе. Сначала происходит прием данных и их проверка на безопасность. Потенциальными проблемами здесь могут быть попытки подделать данные пользователей, а также SQL-инъекции. Затем проверяется роль пользователя: родители видят только своих детей, а преподаватели и администраторы получают информацию о детях выбранной группы. После этого формируется соответствующий SQL запрос, выполняется выборка из базы данных, а результат работы скрипта отправляется пользователю.

В ходе разработки платформы особое внимание было придано вопросам обеспечения ее защиты, а также презентации платформы пользователям и другим разработчикам. Оформление README и GitHub репозитория было важным шагом, так как мы планировали публиковать исходный код в открытый доступ. Также мы провели поисковую оптимизацию, написав метатеги ключевых слов, заголовки и описания для поисковых систем, а также оформили ссылки для соцсетей. После этого мы подключили аналитику Google* для отслеживания позиций сайта в поисковой выдаче. Проведенные аудиты Google Lighthouse* помогли нам обнаружить и исправить некоторые недочеты, что способствовало повышению позиций сайта и улучшению пользовательского опыта. Для ускорения загрузки страницы необходимо было настроить политику кэширования. Это привело нас к идее воспользоваться технологией PWA (Progressive Web App), которая позволяет установить веб-приложение на любое устройство и использовать его в режиме offline за счет заранее загруженного кэша.

Далее мы занялись конфигурационными файлами. Для обеспечения дополнительной защиты пользовательских данных была настроена политика CORS, которая запрещает запросы к API с источников, не внесенных в список доверенных адресов. Также было задано правило, блокирующее загрузку страницы при обнаружении сторонних скриптов в URL запросах, которые могут быть использованы для межсайтового скриптинга или XSS атаки. Также стоит упомянуть еще один тип атаки - SQL-инъекции, связанные с использованием MySQL. SQL-инъекция представляет собой простой и доступный способ взлома сайта. Его суть заключается во внедрении произвольного SQL-кода в данные, передаваемые через GET, POST запросы или значения Cookie. Если сайт не защищен от таких инъекций, база данных может быть подвергнута полной или частичной потере данных, а также утечке. Защита от подобных атак сводится к проверке всех входящих данных - строк, чисел, дат. Можно ограничить входные данные по их длине или типу, а также запретить определенные символы и их комбинации.

Рисунок 1. Итоговый вид платформы

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

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

*(По требованию Роскомнадзора информируем, что иностранное лицо, владеющее информационными ресурсами Google является нарушителем законодательства Российской Федерации – прим. ред.)

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

1. Клеппман, М. Высоконагруженные приложения. Программирование, масштабирование, поддержка / М. Клеппман. – Санкт-Петербург : Питер, 2018. – 640 с. (Бестселлеры O’Reilly) – ISBN 978-5-4461-0512-0
2. Мамажонов, У.М. Цифровые технологии: их роль в образовательном процессе / У.М. Мамажонов // Проблемы современного образования : электронный журнал. – URL: http://pmedu.ru/index.php/ru/2022-year/nomer-5 – ISSN 2218-8711
3. Мартин, Р. Чистая архитектура. Искусство разработки программного обеспечения. / Р. Мартин. – Санкт-Петербург : Питер, 2018. – 401 с. (Библиотека программиста) – ISBN 9785446107728
4. Миграция на Vue 3: провал и еще один провал // HolyJs : доклад – URL: https://holyjs.ru/talks/66a1d702ddf642f69f7b89b5a605b2fb/
5. Новые приключения в FrontEnd, Издание 2021 года // Epam Meet Up Mobile & Frontend : доклад – URL: https://live.jugru.org/video?v=MTAwMTE2iiM3NDkxijA
6. Стратегические приоритеты в сфере реализации государственной программы Российской Федерации "Развитие образования" до 2030 года : Государственная программа Российской Федерации "Развитие образования" // Постановление Правительства РФ от 26.12.2017 N 1642 в ред. Постановления Правительства РФ от 01.09.2023 N 1435
7. Хэнчетт, Э. Vue.js в действии / Э. Хэнчетт, Б. Листуон. – Санкт-Петербург : Питер, 2019. – 304 с. (Библиотека программиста) – ISBN 978-5-4461-1098-8