Розробка веб-додатку для дистанційного навчання

Размещено на http://www.allbest.ru/

Розробка веб-додатку для дистанційного навчання

Британ Віктор Богданович

Ольшанецький Андрій Іванович

Столярчук Ігор Дмитрович

Лешко Роман Ярославович

Карпин Дмитро Степанович

Гарбич-Мошора Ольга Романівна

Анотація

В даній статті описується основні аспекти розробки та проектування веб-додатку для дистанційного навчання. У світі, який постійно змінюється, та особливо в епоху пандемії COVID-19, поняття освіти переживає переворот. Перехід до дистанційного навчання став необхідністю для забезпечення безпеки та продовження навчального процесу. Ця реформа, як наслідок, відкрила широкі можливості та виклики для освітнього сектору. Дистанційне навчання -- це не просто перехід від традиційних аудиторних занять до віддалених форматів, це структурний зсув у способі навчання, що відкриває нові можливості для студентів, викладачів та освітніх установ загалом.

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

Результатом дослідження є розробка веб-додатку, який є ефективним інструментом для автоматизації процесів дистанційного навчання. Він допомагає зменшити зусилля та час, необхідні для організації навчальних процесів та сприяє покращенню якості освіти. Зазначено, що розроблений веб- додаток може стати основою для подальших досліджень у галузі дистанційної освіти та сприяти її подальшому розвитку.

Ключові слова: веб-додаток, дистанційне навчання, освітні технології, інновації в освіті.

Abstract

веб-додаток дистанційне навчання

Brytan Victor Bohdanovich candidate of physical and mathematical sciences, senior lecturer of the department of physics and information systems, Ivan Franko Drohobych State Pedagogical University, Drohobych

Olshanetskyi Andrii Ivanovych magister of department of physics and information syste, Ivan Franko Drohobych State Pedagogical University, Drohobych,

Stolyarchuk Ihor Dmytrovych doctor of physical and mathematical sciences, professor of the department of physics and information systems, Ivan Franko Drohobych State Pedagogical University, Drohobych

Leshko Roman Yaroslavovych candidate of physical and mathematical sciences, senior lecturer of the department of physics and information systems, Ivan Franko Drohobych State Pedagogical University, Drohobych

Karpyn Dmytro Stepanovych candidate of physical and mathematical sciences, senior lecturer of the department of physics and information systems, Ivan Franko Drohobych State Pedagogical University, Drohobych

Garbych-Moshora Olha Romanivna candidate of pedagogical sciences, senior lecturer of the department of physics and information systems Ivan Franko Drohobych State Pedagogical University, Drohobych

DEVELOPMENT OF A WEB APPLICATION FOR DISTANCE LEARNING

This article describes the main aspects of developing and designing a web application for distance learning. In a world that is constantly changing, and especially in the era of the COVID-19 pandemic, the concept of education is undergoing a revolution. The transition to distance learning has become a necessity to ensure safety and continue the educational process. This reform has consequently opened up great opportunities and challenges for the education sector. Distance learning is not just a shift from traditional classroom to remote formats, it is a structural shift in the way we learn, opening up new opportunities for students, teachers, and educational institutions in general.

The article discusses the stages of the process of developing a web-based application for distance learning, including the analysis of user needs, the definition of functional and technical requirements, as well as security and data protection aspects. A database scheme is proposed and possible technologies for implementing the web application are considered.

The result of the study is the development of a web application that is an effective tool for automating distance-learning processes. It helps to reduce the effort and time required to organize learning processes and helps to improve the quality of education. It is noted that the developed web application can become the basis for further research in the field of distance education and contribute to its further development.

Keywords: web application, distance learning, educational technologies, innovations in education

Постановка проблеми

веб-додаток дистанційне навчання

У зв'язку зі зростанням доступу до інтернету та розвитком технологій, дистанційне навчання стає все більш популярним [1.2]. Веб-додаток для дистанційного навчання може стати ефективним інструментом для навчання учнів та студентів у будь -який час та в будь-якому місці [3,4]. Основні аспекти:

• Потреба в адаптивному навчанні: Веб-додатки дистанційного навчання можуть бути розроблені з урахуванням індивідуальних потреб і можливостей користувачів. Зокрема, вони можуть надавати різноманітні методи навчання, інтерактивні завдання та зручний інтерфейс для сприяння кращого засвоєння матеріалу [5].

• Пандемія COVID-19 та ріст віддалених навальних форматів:

Пандемія COVID-19 призвела до збільшення попиту на дистанційне навчання через обмеження фізичного контакту та необхідність дистанційного спілкування. Розробка ефективного веб-додатку для дистанційного навчання стає критично важливою для забезпечення неперервного навчання у таких умовах [6].

• Гнучкість та доступність: Веб-додатки дистанційного навчання можуть бути доступні на різних пристроях (комп'ютерах, планшетах, смартфонах), що дозволяє користувачам мати доступ до навчального матеріалу в будь-який час і з будь-якого місця [7,8].

Аналіз існуючих веб-платформ для дистанційного навчання. У сучасному освітньому середовищі широко використовуються різноманітні системи дистанційного навчання, які можуть бути як з відкритим кодом, так і комерційними продуктами. Серед найбільш відомих систем можна виділити ATutor, Claroline, Live@EDU, eFront, Moodle та SharePointLMS [9-11].

ATutor є модульною системою дистанційного керування навчанням з відкритим кодом, яка поширюється за ліцензією GNU General Public License. Ця система розроблена з урахуванням доступності та можливості адаптації за бажанням користувача. ATutor має кросплатформену підтримку і може працювати на різних операційних системах [9].

Claroline також є платформою дистанційного навчання з відкритим кодом, що поширюється на базі GNU General Public License. Вона пропонує інтуїтивно зрозумілий інтерфейс для адміністрування та базується на концепції просторів, пов'язаних з курсами чи педагогічною діяльністю.

Live@EDU є системою дистанційного навчання, розробленою з використанням технології Active Server Pages на платформі Microsoft. Ця система вимагає серверної частини з ОС Microsoft Windows та бази даних Microsoft SQL Server для коректної роботи.

eFront представляє собою нове покоління систем електронного навчання, яка об'єднує в собі функції системи управління навчанням та системи створення та управління навчальними матеріалами.

Moodle є однією з найпопулярніших систем дистанційного навчання з відкритим кодом. Вона призначена для створення курсів та веб-сайтів і підтримує принцип "соціального конструктивізму" [10].

SharePointLMS - це система дистанційного навчання, розроблена на базі платформи MS Office SharePoint Server 2007. Вона забезпечує комплексний інформаційно-навчальний простір та інструментарій для спільної роботи [11].

При виборі системи дистанційного навчання важливо врахувати потреби та можливості користувачів, а також технічні та функціональні характерис - тики кожної системи.

Метою статті є створення інноваційного веб-додатку, який буде сприяти ефективному та зручному проведенню навчального процесу в онлайн - середовищі. Цей додаток буде зорієнтований на використання як викладачами, так і студентами, надаючи їм зручний доступ до курсів, матеріалів, завдань та інструментів для спілкування та взаємодії.

Виконання цієї роботи передбачає дослідження потреб користувачів і вимог до функціональності дистанційного навчання, вибір оптимальних технологій та інструментів для розробки, розробку інтерфейсу користувача, впровадження бізнес-логіки та механізмів безпеки, а також проведення тестування та оптимізації додатку.

Отже, мета цієї роботи полягає у створенні інноваційного веб-додатку, який відповідає сучасним вимогам дистанційного навчання і забезпечить користувачам зручність, ефективність та безпеку під час проведення навчальних заходів у віртуальному середовищі.

Проектування архітектури веб-додатку

Проектування архітектури веб-додатку є критичним етапом у розробці будь -якого програмного забезпечення, включаючи дистанційні навчальні системи. Цей процес передбачає розробку структури та визначення взаємодії між його складовими частинами. Ось кілька ключових кроків при проектуванні архітектури веб - додатку дистанційного навчання:

1. Визначення вимог користувачів: Ретельне вивчення потреб користувачів допоможе визначити функціональність та основні можливості системи. Це може включати в себе створення курсів, взаємодію між викладачами та студентами, оцінювання студентів, спільну роботу над завданнями тощо.

2. Вибір технологій: Вибір правильних технологій є важливим аспектом. Він включає в себе вибір серверної та клієнтської сторінок, бази даних, мов програмування та інших інструментів, які найкраще відповідають потребам проекту.

3. Розробка структури бази даних: Проектування архітектури бази даних полягає у визначенні структури даних, їх взаємозв'язків та способу доступу до них. Наприклад, це може бути таблиця користувачів, курсів, завдань, результатів тощо.

4. Проектування інтерфейсу користувача: Важливо створити зручний та інтуїтивно зрозумілий інтерфейс користувача. Це включає в себе розробку сторінок для реєстрації та входу, сторінок курсів, матеріалів, завдань, форумів, чатів тощо.

5. Розробка бізнес-логіки: Бізнес-логіка визначає логіку та правила, за якими працює додаток. Це може бути автоматизація процесів створення курсів, обробка реєстрацій, обробка результатів тестувань тощо.

6. Забезпечення безпеки: Безпека є критичним аспектом будь-якого веб-додатку. Це включає в себе захист від атак, автентифікацію та авторизацію користувачів, захист від витоку даних тощо.

7. Тестування та оптимізація: Після розробки архітектури необхідно провести тестування на відповідність вимогам та оптимізувати додаток для підвищення продуктивності та швидкодії.

Реалізація веб-додатку. Для реалізації веб-додатка було вибрано мову програмування JavaScript [12-14]. Саме JavaScript має кілька переваг, які роблять цю мову привабливим вибором. По-перше, JavaScript є однією з найпопулярніших мов програмування у сфері веб -розробки. Вона використовується як на клієнтській, так і на серверній стороні, що дозволяє створювати повноцінні веб-додатки, взаємодіючи з обома складовими веб- середовища. Друга перевага JavaScript полягає у її простоті та легкості вивчення. Синтаксис JavaScript досить зрозумілий, що робить її доступною для початківців у програмуванні, а також забезпечує широкий розповсюджений доступ до різних навчальних матеріалів та документації. Крім того, JavaScript - це динамічна мова програмування, яка дозволяє реалізувати інтерактивність на веб-сторінках без перезавантаження сторінки. Це робить JavaScript ідеальним інструментом для створення багатьох функціональних елементів веб-інтерфейсу [15,16]. Ще однією важливою перевагою JavaScript є наявність великої кількості бібліотек та фреймворків, які допомагають розробникам прискорити процес розробки та забезпечити більшу продуктивність. За допомогою таких інструментів, як React, Angular або Vuejs, можна створювати різноманітні веб -додатки швидше та ефективніше. Загалом, JavaScript - це потужний і універсальний інструмент для розробки веб-додатків, який дозволяє створювати сучасні та інтерактивні застосунки з великою швидкістю та ефективністю.

Розробка клієнтської частини була реалізована за допомогою фреймворка Reactjs. React - це JavaScript-бібліотека, яка використовується для створення користувацьких інтерфейсів у веб-додатках [17,18]. Однією з головних концепцій React - є компонентний підхід до розробки. У React інтерфейси розбиваються на невеликі та незалежні компоненти, кожен з яких відповідає за свою частину інтерфейсу. Це дозволяє підтримувати високий рівень модульності, перевикористання коду та простоту управління.

Принцип роботи React базується на використанні віртуального DOM (Document Object Model). При зміні даних React не маніпулює реальним DOM напряму, а замість цього використовує віртуальний DOM для ефективного виявлення та відстеження змін. Після цього React автоматично оновлює реальний DOM, відображаючи лише необхідні зміни, що робить процес відображення швидшим та ефективнішим.

Ще однією важливою концепцією є односторонній потік даних. У React дані передаються з верхніх рівнів ієрархії компонентів до нижніх шляхом пропсів (props). Це дозволяє створювати чітку та передбачувану структуру даних, а також полегшує відлагодження та відстеження змін.

Загалом, принцип роботи React полягає у створенні компонентів, які реагують на зміни даних та автоматично оновлюють відображення інтерфейсу, забезпечуючи швидку та ефективну роботу веб-додатка.

Серверна частина бала розроблена за допомогою фрейморка Nestjs. Nest.js - це фреймворк для розробки серверних додатків на мові програмування JavaScript або TypeScript, який ґрунтується на платформі Nodejs. Він пропонує модульну архітектуру, яка дозволяє розбити додаток на логічні блоки, називані модулями. Кожен модуль містить в собі контролери, сервіси та провайдери, що сприяє покращенню організації коду та збереженню його чистоти [19].

Однією з ключових особливостей Nest.js є його вбудована підтримка TypeScript. TypeScript - це розширення JavaScript, яке додає статичну типізацію та інші покращення до мови [20]. Завдяки цьому, Nest.js надає переваги типізації, такі як автодоповнення, перевірка типів на етапі компіляції та підвищення безпеки коду. Ще однією перевагою Nest.js є його висока продуктивність та масштабованість. Він побудований з використанням ефективних патернів та оптимізованих методів обробки запитів, що дозволяє розробникам створювати швидкі та ефективні додатки.

Вибір бази даних MySQL для вашого проекту може бути обумовлений кількома факторами. Перш за все, MySQL - це одна з найпопулярніших та надійних реляційних баз даних у світі веб -розробки. Вона має широку підтримку серед спільноти розробників та надійну документацію, що робить її відмінним вибором для проектів будь -якого розміру. Другим важливим аспектом є висока продуктивність та ефективність MySQL. Вона має оптимізовані алгоритми обробки запитів, що дозволяють швидко та ефективно обробляти великі обсяги даних. Це особливо важливо для веб-додатків, які мають велику кількість користувачів та вимагають високої швидкодії.

Рис. 1.

Крім того, MySQL є безкоштовною та відкритою базою даних, що робить її доступною для широкого кола розробників та проєктів з обмеженим бюджетом. Вона також має розгорнуту екосистему інструментів та додатків, які полегшують роботу з базою даних, включаючи адміністрування, моніторинг та резервне копіювання.

В процесі створення веб-додатку було реалізовано такі пункти:

Question bank - банк тестових запитань, за допомогою яким можна формувати презентації створювати контрольні робити тощо (рис.1).

Lecture Hall - створення презентацій які можна презентувати онлайн а також є можливість демонстрація на проекторі.

Flashcards - набір карточок запитання відповідей для вірного складання контрольного опитування (рис. 2).

Active Learning - робочий зошит з різними типами запитання на які студенти можуть відповідати у вигляді ігри (рис. 3).

Висновки

У ході розробки веб-додатку "Розробка веб-додатку дистанційного навчання", були розглянуті та проаналізовані різноманітні аспекти, починаючи від актуальності теми та порівняльного аналізу існуючих систем дистанційного навчання до вибору технологій та архітектурного рішення для реалізації проекту.

Актуальність теми підтверджується не лише загальним розвитком технологій та популярністю дистанційного навчання, але й зростанням попиту на зручні та ефективні платформи для онлайн-навчання в умовах сучасного світу.

Під час порівняльного аналізу різних систем дистанційного навчання були розглянуті їхні функціональні можливості, переваги та обмеження, що дозволило визначити кращі підходи та найбільш підходящі рішення для реалізації поставленої задачі.

Обраною технологією для клієнтської частини веб-додатку став React.js, оскільки він надає зручний інструментарій для розробки інтерактивних інтерфейсів та забезпечує швидку реакцію на зміни даних без перезавантаження сторінки.

Серверну частину додатку було обрано розробляти на Nest.js, який володіє модульною структурою та вбудованою підтримкою TypeScript, що полегшує організацію коду та забезпечує високу продуктивність.

Для зберігання та управління даними веб-додатку була обрана база даних MySQL через її популярність, ефективність та доступність.

Загальний висновок полягає в тому, що розробка веб-додатку дистанційного навчання є актуальною та перспективною задачею, а обрані технології та архітектурні рішення дозволять створити функціональний та ефективний продукт, задовольняючи потреби користувачів у сучасному цифровому середовищі.

Література

1. Aguilar, S. J., & Almerich, G. (2009). E-learning adaptation framework. In Advanced Learning Technologies, 2009. ICALT'09. Ninth IEEE International Conference on (pp. 16-18). IEEE.

2. Hodges, C., Moore, S., Lockee, B., Trust, T., & Bond, A. (2020). The difference between emergency remote teaching and online learning. Educause Review, 27.

3. Kizilcec, R. F., Perez-Sanagustin, M., & Maldonado, J. J. (2017). Self-regulated learning strategies predict learner behavior and goal attainment in Massive Open Online Courses. Computers & Education, 104, 18-33.

4. Means, B., Toyama, Y., Murphy, R., Bakia, M., & Jones, K. (2009). Evaluation of evidence-based practices in online learning: A meta-analysis and review of online learning studies. US Department of Education.

5. St-Pierre, D., & Bourdeau, J. (2006). ATutor: An Open Source Web-based LCMS for Adaptive Courseware Development. In Advanced Technology for Learning (pp. 220-229). Springer, Berlin, Heidelberg.

6. Johnson, A., & Velez, J. (2008). Claroline: A Free E-Learning Platform. In Handbook of Research on E-Learning Methodologies for Language Acquisition (pp. 203-219). IGI Global.

7. Wang, Y., & Xie, Y. (2010). Live@EDU: An Active Server Pages-based Distance Learning System. In Proceedings of the International Conference on E-Business and E- Government (pp. 113-116). IEE

8. Zervas, P., & Sampson, D. G. (2008). eFront: A Platform for Developing, Presenting and Managing Educational Content. In 2008 Eighth IEEE International Conference on Advanced Learning Technologies (pp. 775-779). IEEE

9. Coates, H., James, R., & Baldwin, G. (2005). A Critical Examination of the Effects of Learning Management Systems on University Teaching and Learning. Tertiary Education and Management, 11(1), 19-36

10. Dougiamas, M., & Taylor, P. C. (2003). Moodle: Using Learning Communities to Create an Open Source Course Management System. In Proceedings of the EDMEDIA (pp. 171-178).

11. Zorko, V., & Jereb, E. (2010). SharePointLMS: A Comprehensive Learning Management System Built on Microsoft Office SharePoint Server 2007. In Proceedings of the 2nd International Conference on Computer Supported Education (pp. 308-313). SciTePress.

12. Книга "JavaScript для початківців" Олександра Швидюка.

13. Flanagan, D. (2011). JavaScript: The Definitive Guide. O'Reilly Media.

14. Resig, J., Bibeault, B., & Marson, M. (2011). Secrets of the JavaScript Ninja. Manning Publications.

15. Freeman, A., & Robson, J. (2014). Pro JavaScript Techniques: Second Edition. Apress.

16. Crockford, D. (2008). JavaScript: The Good Parts. O'Reilly Media.

17.

18. Green, J. (2019). Learning React: A Hands-On Guide to Building Web Applications Using React and Redux. Addison-Wesley Professional

19. Banks, A. (2017). Learning React: A Hands-On Guide to Building Web Applications Using React and Redux. Addison-Wesley Professional.

20. Gackenheimer, C. (2017). Fullstack React: The Complete Guide to ReactJS and Friends. Fullstack.io.

21. Kamil, M., & Daniel, M. (2019). NestJS: Modern ways to build APIs with TypeScript and NestJS. Independently published.

22. Pluciennik, A. (2020). Nest.js: Everything you need to know to get started. Independently published.

References

1. Aguilar, S. J., & Almerich, G. (2009). E-learning adaptation framework. In Advanced Learning Technologies, 2009. ICALT'09. Ninth IEEE International Conference on (pp. 16-18). IEEE.

2. Hodges, C., Moore, S., Lockee, B., Trust, T., & Bond, A. (2020). The difference between emergency remote teaching and online learning. Educause Review, 27.

3. Kizilcec, R. F., Perez-Sanagustin, M., & Maldonado, J. J. (2017). Self-regulated learning strategies predict learner behavior and goal attainment in Massive Open Online Courses. Computers & Education, 104, 18-33.

4. Means, B., Toyama, Y., Murphy, R., Bakia, M., & Jones, K. (2009). Evaluation of evidence-based practices in online learning: A meta-analysis and review of online learning studies. US Department of Education.

5. St-Pierre, D., & Bourdeau, J. (2006). ATutor: An Open Source Web-based LCMS for Adaptive Courseware Development. In Advanced Technology for Learning (pp. 220-229). Springer, Berlin, Heidelberg.

6. Johnson, A., & Velez, J. (2008). Claroline: A Free E-Learning Platform. In Handbook of Research on E-Learning Methodologies for Language Acquisition (pp. 203-219). IGI Global.

7. Wang, Y., & Xie, Y. (2010). Live@EDU: An Active Server Pages-based Distance Learning System. In Proceedings of the International Conference on E-Business and E-Government (pp. 113-116). IEE

8. Zervas, P., & Sampson, D. G. (2008). eFront: A Platform for Developing, Presenting and Managing Educational Content. In 2008 Eighth IEEE International Conference on Advanced Learning Technologies (pp. 775-779). IEEE

9. Coates, H., James, R., & Baldwin, G. (2005). A Critical Examination of the Effects of Learning Management Systems on University Teaching and Learning. Tertiary Education and Management, 11(1), 19-36

10. Dougiamas, M., & Taylor, P. C. (2003). Moodle: Using Learning Communities to Create an Open Source Course Management System. In Proceedings of the EDMEDIA (pp. 171-178).

11. Zorko, V., & Jereb, E. (2010). SharePointLMS: A Comprehensive Learning Management System Built on Microsoft Office SharePoint Server 2007. In Proceedings of the 2nd International Conference on Computer Supported Education (pp. 308-313). SciTePress.

12. Книга "JavaScript для початківців" Олександра Швидюка.

13. Flanagan, D. (2011). JavaScript: The Definitive Guide. O'Reilly Media.

14. Resig, J., Bibeault, B., & Marson, M. (2011). Secrets of the JavaScript Ninja. Manning Publications.

15. Freeman, A., & Robson, J. (2014). Pro JavaScript Techniques: Second Edition. Apress.

16. Crockford, D. (2008). JavaScript: The Good Parts. O'Reilly Media.

17. Green, J. (2019). Learning React: A Hands-On Guide to Building Web Applications Using React and Redux. Addison-Wesley Professional

18. Banks, A. (2017). Learning React: A Hands-On Guide to Building Web Applications Using React and Redux. Addison-Wesley Professional.

19. Gackenheimer, C. (2017). Fullstack React: The Complete Guide to ReactJS and Friends. Fullstack.io.

20. Kamil, M., & Daniel, M. (2019). NestJS: Modern ways to build APIs with TypeScript and NestJS. Independently published.

21. Pluciennik, A. (2020). Nest.js: Everything you need to know to get started. Independently published.

Размещено на Allbest.ru