Детальная информация

Данная работа посвящена созданию интерактивного тренажёра, направленного на обучение проектированию сложных распределённых систем. Тренажёр призван решить проблему недостатка практических инструментов для отработки навыков System Design, актуальную для разработчиков, инженеров и студентов IT-направлений. Задачи, которые решались в ходе исследования: 1. Анализ современных образовательных платформ и выявление их ограничений в области System Design. 2. Проектирование пользовательского интерфейса с поддержкой интерактивного редактора архитектурных схем. 3. Разработка базы заданий, охватывающей ключевые аспекты проектирования систем (балансировка нагрузки, выбор баз данных, масштабируемость). 4. Внедрение системы автоматической проверки решений. Исследование проведено на базе СПбПУ с использованием современных технологий разработки. Для анализа существующих решений применены методы сравнительного анализа платформ (LeetCode, Educative.io, System Design Judge). Проектирование тренажёра выполнено с использованием архитектуры Feature-Sliced Design (FSD), обеспечивающей модульность и масштабируемость. Результатом данной работы является прототип тренажёра, включающий 5 тренировочных задач по проектированию систем. Реализован интерактивный редактор на базе библиотеки React Flow, который позволяет пользователям создавать схемы архитектуры с помощью drag-and-drop элементов. По окончании решения задачи осуществляется проверка с выводом ошибок, если они есть. Интерфейс поддерживает выбор уровня сложности задач, многоязычный контент и адаптирован под различные устройства. Разработанный интерактивный тренажёр по System Design представляет собой современное решение для обучения проектированию распределённых систем. Благодаря интуитивному интерфейсу, поддержке визуализации архитектурных схем через React Flow и адаптивному дизайну, платформа предоставляет пользователям удобный инструмент для отработки практических навыков. Тренажёр успешно решает проблему недостатка практических ресурсов в области System Design и может быть интегрирован в образовательные программы вузов или корпоративные обучающие системы, способствуя подготовке высококвалифицированных IT-специалистов.

The subject of the graduate qualification work is « Development of an Interactive System Design Simulator. Frontend». The given work is devoted to creation of an interactive simulator aimed at teaching the design of complex distributed systems. The simulator addresses the lack of practical tools for honing System Design skills, a critical issue for developers, engineers, and IT students. The research set the following goals: 1. Analysis of modern educational platforms and identification of their limitations in System Design training. Detection of most frequent microstructure defects of a steel grade under study. 2. Design of a user interface with an interactive architectural diagram editor. 3. Development of a task database covering key aspects of system design (load balancing, database selection, scalability). 4. Implementation of an automated solution verification system. The work was fulfilled on the premises Peter the Great St. Petersburg Polytechnic University (SPbPU) using modern development technologies. A comparative analysis of platforms such as LeetCode, Educative.io, and System Design Judge was performed to evaluate existing solutions. The simulator was designed using the Feature-Sliced Design (FSD) architecture to ensure modularity and scalability. The result is a prototype simulator containing five training tasks for system design. An interactive editor based on the React Flow library was implemented, enabling users to create architectural diagrams via drag-and-drop elements. Upon task completion, the system performs automated error checks and provides feedback. The interface supports task difficulty levels, multilingual content, and adaptability across devices. The developed interactive System Design simulator offers a modern solution for training in distributed system design. Featuring an intuitive interface, React Flow-based architectural visualization, and adaptive design, the platform provides users with a practical tool to enhance their skills. The simulator effectively addresses the shortage of hands-on resources in System Design education and can be integrated into university curricula or corporate training programs, fostering the development of highly qualified IT professionals.

• СПИСОК ОБОЗНАЧЕНИЙ И СОКРАЩЕНИЙ
• ВВЕДЕНИЕ
• ГЛАВА 1. ПРОЕКТИРОВАНИЕ И АРХИТЕКТУРА РЕШЕНИЯ
  • 1.1. Изучение предметной области
    • 1.1.1. Определение и цели System Design
    • 1.1.2. Роль System Design в IT-индустрии
    • 1.1.3. Проблемы в обучении System Design
    • 1.1.4. Выводы
  • 1.2. Анализ актуальности
    • 1.2.1. Рост спроса на специалистов с навыками System Design
    • 1.2.2. Ограниченный доступ к образовательным материалам
    • 1.2.3. Перспективы использования для разных категорий пользователей
    • 1.2.4. Поддержка практического подхода к обучению
    • 1.2.5. Выводы
  • 1.3. Анализ существующих решений
    • 1.3.1. Онлайн курсы
    • 1.3.2. Тренажеры для подготовки к собеседованиям
    • 1.3.3. System Design Judge
    • 1.3.4. Выводы
  • 1.4. Выводы
• ГЛАВА 2. ПРОЕКТИРОВАНИЕ И АРХИТЕКТУРА РЕШЕНИЯ
  • 2.1. ER-диаграмма
  • 2.2. Структура проекта и архитектурный подход
  • 2.3. Обоснование выбора используемых технологий
  • 2.4. Выводы
• ГЛАВА 3. РЕАЛИЗАЦИЯ ПРЕДЛАГАЕМОГО РЕШЕНИЯ
  • 3.1. UI/UX платформы
    • 3.1.1. Главная страница
    • 3.1.2. Страницы списка курсов и уроков
  • 3.2. Функциональность прохождения урока
    • 3.2.1. Общая концепция
    • 3.2.2. Структура интерфейса
    • 3.2.3. Взаимодействие пользователя
  • 3.3. Реализация логики работы платформы
    • 3.3.1. Взаимодействие с API бекенда
    • 3.3.2. Хранение состояния решения урока и его связь с канвасом
    • 3.3.3. Реализация динамического обновления соединения между компонентами
    • 3.3.4. Создание урока
  • 3.4. Контейнеризация приложения
  • 3.5. Выводы
• ГЛАВА 4. ТЕСТИРОВАНИЕ
  • 4.1. Методология тестирования
  • 4.2. Тестовое покрытие
  • 4.3. Особенности реализации тестов
  • 4.4. Выводы
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ
• Приложение А
• Приложение Б