Проєктування навчальної системи візуалізації роботи алгоритмів

  • Д. Р. Козак Національний університет "Львівська політехніка", м. Львів
  • Т. О. Коротєєва Національний університет "Львівська політехніка", м. Львів https://orcid.org/0000-0002-6287-5895
Ключові слова: архітектура системи, категорії алгоритмів, статичний веб-сайт, 2D графіка

Анотація

Розглянуто особливості проектування навчальної системи для студентів спеціальності 121 "Інженерія програмного забезпечення" У межах дисципліни "Алгоритми і структури даних". Мета системи – полегшити процес вивчення основних принципів роботи алгоритмів через динамічну візуалізацію їх кроків та подання інформаційної складової (покроковий опис алгоритму та загальна інформація про нього) до кожного з них. Проведено дослідження візуалізації як методу навчання. Виявлено основні проблеми студентів під час вивчення теоретичного матеріалу. Проаналізовано сучасні засоби візуалізації покрокової роботи алгоритмів, які можна використовувати у навчальному процесі. Встановлено основні завдання системи і розроблено основні вимоги до програмного продукту. На основі виконаних досліджень спроєктовано архітектуру системи, яка є гнучкою до змін у сфері навчання. Побудовано структуру компонент програмного додатку, діаграму розгортання, діаграму прецедентів, діаграму класів і діаграму станів системи. Систему реалізовано як статичний веб-сайт для зручного способу доступу до ресурсів. Для реалізації системи використано React-бібліотеку для створення графічних інтерфейсів. Для графічної візуалізації використовувався примітив html canvas, що дає змогу зображати 2D графіку на веб-сторінці. Усі алгоритми в системі розбиті на категорії, а саме: сортування, пошуку стрічки, пошуку шляху та алгоритми на деревах. Для зручності кожна категорія представлена окремою веб-сторінкою. Загалом розглянуто 24 алгоритми. Користувач має змогу виконувати алгоритми покроково або автоматично, коли система сама здійснює наступний крок із певним заданим користувачем часовим інтервалом. Реалізована можливість виконання алгоритму у зворотному напрямку, Також користувач може згенерувати вхідні дані алгоритму або задати їх вручну. Розроблений веб-сайт є самодостатнім ресурсом для дистанційного вивчення дисципліни "Алгоритми і структури даних".

Біографії авторів

Д. Р. Козак, Національний університет "Львівська політехніка", м. Львів

бакалавр, кафедра програмного забезпечення

Т. О. Коротєєва, Національний університет "Львівська політехніка", м. Львів

канд. техн. наук, доцент, кафедра програмного забезпечення

Посилання

Auden, E., Toutain, T., & Zharkov, S. (2007). eSDO algorithms, data centre and visualization tools. Astronomical Notes, 328(3-4), 356–361. https://doi.org/10.1002/asna.200610742

Carlos, A. S., Oliveira, Panos, M. Pardalos, & Prokopyev, O. A. (2007). Data Structures and Algorithms. Wiley Encyclopedia of Computer Science and Engineering. https://doi.org/10.1002/9780470050118.ecse097

Craig, Larman, & Kent, Beck. (2004). Applying UML and Patterns: An Introduction to Object-Oriented Analysis and Design and Iterative Development, 3rd edition. Great Britain: Pearson, 736. [In English].

Donald, Knuth. (2021). Art of Computer Programming, Volume 3: Sorting and Searching. Kyiv: Dialektyka, 832. [In Ukrainian].

Evergreen, S., & Metzner, C. (2013). Design Principles for Data Visualization in Evaluation. New Dir. Eval. 2013(140), 5–20. https://doi.org/10.1002/ev.20071

Frits, H. Post. (2011). Data Visualization: Featuring Interactive Visual Analysis. Computer Graphics Forum, 30(2). https://doi.org/10.1111/j.1467-8659.2011.01911.x

Kukharenko, V. M. (2020). Development of a modern e-learning system in the university. Ukrainian Journal of Information Technologies, 2(1), 95–102. https://doi.org/10.23939/ujit2020.02.095

Linsiya, Patrao. (2019). Needs and Benefits of Data Visualization. Edureka! Ebook (New). Data Visualization with Tableau. Retrieved from: https://www.edureka.co/blog/needs-and-benefits-of-data-visualization/

Miles, R., & Hamilton, K. (2006). Learning UML 2.0: A Pragmatic Introduction to UML. California: OReilly Media, 290. [In English].

Peter, Brown, Henry, Roediger, & Mark, McDaniel. (2019). Make it stick. The Science of Successful Learning. Kyiv: Nash Format, 240. [In Ukrainian].

Scott, Berinato. (2022). Good Charts Workbook: Tips, Tools, and Exercises for Making Better Data Visualizations. Kyiv: ArtHuss, 288. [In Ukrainian].

Shakti, Gawain. (2010). Creative Visualization: Use the Power of Your Imagination to Create What You Want in Your Life. California: New World Library, 192. [In English].

Website. (2022). Algoexpert.io. Streamlined platform for learning algorithms. Retrieved from: https://www.algoexpert.io/product. [In English].

Website. (2022). An example of visualization of algorithms. Retrieved from: https://algorithm-visualizer.org. [In English].

Website. (2022). An example of visualization of algorithms. Retrieved from: https://clementmihailescu.github.io/Pathfinding-Visualizer/. [In English].

William, Lidwell, Kritina, Holden, & Jill, Butler. (2010). Universal Principles of Design: 125 Ways to Enhance Usability. Cummings Center: Rockport Publishers, 280. [In English].

Zac, Gordon, Mikall, Angela, Hill, & Robbie, Adair. (2019). React Explained: Your Step-by-Step Guide to React. Independently published, 366. [In English].

Опубліковано
2022-11-02
Як цитувати
Козак, Д. Р., & Коротєєва, Т. О. (2022). Проєктування навчальної системи візуалізації роботи алгоритмів. Науковий вісник НЛТУ України, 32(5), 80-86. https://doi.org/10.36930/40320511
Розділ
Інформаційні технології