В настоящей работе основное внимание уделяется разработке и оптимизации пользовательского интерфейса электронной Agile-доски в системе управления проектами YouTrack. Главная цель работы - создать интуитивно понятный, удобный в использовании и эффективный интерфейс, способный поддерживать принципы Agile и облегчать процесс управления проектами. Разработка основывается на использовании ReactJS, мощной и гибкой библиотеки JavaScript для построения пользовательских интерфейсов. Тестирование полученного результата было произведено с помощью библиотеки Jest. Особое внимание уделено обеспечению гибкости и настраиваемости интерфейса для удовлетворения потребностей различных команд и проектов. В том числе, я рассмотрел использование RTK Query для взаимодействия API сервера и автоматического кэширования, а также применение Redux для управления состоянием приложения на более глобальном уровне. Результатом данной работы является функциональная и эффективная реализация электронной доски в системе управления проектами YouTrack, обеспечивающая гибкое управление проектами и способствующая увеличению производительности команды.

The primary focus of this work is on the development and optimization of the user interface of an Agile board in the YouTrack project management system. The main objective is to create an intuitive, user-friendly, and efficient interface capable of supporting Agile principles and facilitating project management processes. The development is based on the use of ReactJS, a powerful and flexible JavaScript library for building user interfaces. The testing of the obtained result was performed using the Jest library. Special attention is paid to ensuring the flexibility and adaptability of the interface to meet the needs of various teams and projects. In particular, the use of RTK Query for server API interaction and automatic caching is discussed, as well as the application of Redux for managing the state of the application on a more global level. The result of this work is a functional and efficient implementation of an electronic board in the YouTrack project management system, providing flexible project management and contributing to the increase in team productivity.

• 1. Анализ предметной области
  • 1.1. Описание предметной области, обоснование актуальности
    • 1.1.1. Пользовательский интерфейс
    • 1.1.2. Веб-интерфейс
    • 1.1.3. Электронная доска
    • 1.1.4. Электронная Канбан-доска
    • 1.1.5. Система управления проектами YouTrack
    • 1.1.6. Электронная Канбан-доска YouTrack
  • 1.2. Функциональные требования
  • 1.3. Техническое задание
• 2. Функциональные возможности инструментов, используемых для разработки интерфейса
  • 2.1. Изучение ReactJS
  • 2.2. Анализ Redux
    • 2.2.1. Использование Redux
    • 2.2.2. Анализ Redux Toolkit Query
  • 2.3. Анализ и выбор методики CSS стилей
    • 2.3.1. CSS-in-JS
  • 2.4. Архитектура веб-интерфейса электронной доски
• 3. Разработка пользовательского интерфейса
  • 3.1. План разработки
  • 3.2. Авторизация
    • 3.2.1. Механизм авторизации пользователя
    • 3.2.2. Компоненты
    • 3.2.3. Управление состоянием
  • 3.3. Маршрутизация
    • 3.3.1. Иерархия
  • 3.4. Компоненты
  • 3.5. Связь с сервером и обработка данных
    • 3.5.1. Механизм запросов
    • 3.5.2. Обработка данных
    • 3.5.3. Состояние
  • 3.6. Верхний колонтитул
    • 3.6.1. Компоненты
  • 3.7. Настройки электронной доски
    • 3.7.1. Вкладки
    • 3.7.2. Базовые элементы
    • 3.7.3. Компоненты
    • 3.7.4. Блокировка редактирования
  • 3.8. Колонки
    • 3.8.1. Компоненты
    • 3.8.2. Сворачивание и разворачивание колонок
    • 3.8.3. Состояние
    • 3.8.4. Вычисление количества карточек
  • 3.9. Свимлэйны
    • 3.9.1. Компонент
  • 3.10. Карточки
    • 3.10.1. Компоненты
    • 3.10.2. Drag and Drop
    • 3.10.3. Выделение карточек
  • 3.11. Вложенные свимлэйны
    • 3.11.1. Интеграция в настройки
    • 3.11.2. Компоненты
    • 3.11.3. Синхронизация с адресной строкой
    • 3.11.4. Отображение вложенных свимлэйнов на электронной доске
    • 3.11.5. Перегруппировка карточек на доске
    • 3.11.6. Метки и цветовая идентификация
  • 3.12. Фильтрация и поиск
    • 3.12.1. Механизм поиска и фильтрации
    • 3.12.2. Компонент для ввода фильтра
    • 3.12.3. Фильтрация карточек на электронной доске
  • 3.13. Интернационализация и локализация
    • 3.13.1. Фреймворк i18next
    • 3.13.2. Словари переводов
    • 3.13.3. Переключение языка интерфейса
    • 3.13.4. Маркировка текстовых элементов
    • 3.13.5. Локализация графики на русский язык
  • 3.14. Результаты
    • 3.14.1. Общий интерфейс доски
    • 3.14.2. Настройка вложенных свимлэйнов
    • 3.14.3. Цветовая индикация свимлэйнов
    • 3.14.4. Поиск на Agile-доске
• 4. Тестирование
  • 4.1. Модульное тестирование
    • 4.1.1. Подход
    • 4.1.2. Результаты
  • 4.2. Функциональное тестирование
    • 4.2.1. Тестирование стандартной доски
    • 4.2.2. Тестирование доски с вложенными свимлэйнами
• 1. ЛИСТИНГИ
• 2. Отчеты о тестировании