ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6022| Title: | Онлайн-сервіс «Team Tracker» для управління IT-проєктами |
| Authors: | Оксамитна, Любов Павлівна Лук'яненко, Олександр Віталійович |
| Keywords: | ПРЕДМЕТНА ОБЛАСТЬ,;ОНЛАЙН-СЕРВІС,;УПРАВЛІННЯ ІТ-ПРОЄКТАМИ,;ПРОЄКТУВАННЯ,;БАЗА ДАНИХ,;ПРОГРАМНІ ЗАСОБИ. |
| Issue Date: | 11-Jun-2024 |
| Abstract: | Сучасний бізнес все більше розвивається в онлайн-сфері, що призводить до збільшення кількості ІТ-проєктів. Управління цими проєктами стає складнішим завдяки їхній розмаїтості та складності. Компанії все частіше розуміють важливість ефективного управління ІТ-проєктами для досягнення своїх бізнес-цілей. Застосування онлайн-сервісу для цього може значно полегшити процес та збільшити продуктивність. Тому, дослідження роботи сервісів управління проєктами та розробка аналогічного є корисним для кожного розробника. Мета кваліфікаційної роботи бакалавра – створення онлайн-сервісу для організації роботи команди розробників. Об’єкт дослідження: процеси управління ІТ-проєктами. Предмет дослідження: онлайн-сервіс для управління ІТ-проєктами. Для вирішення поставлених завдань були застосовані наступні методи дослідження: теоретичний (аналіз літератури з проблеми дослідження); емпіричний – полягав у спостереженні та налаштуванні онлайн-сервісу управління ІТ-проєктами; порівняльний – для здійснення порівнянь існуючих аналогів систем управління проєктами. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6022 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Лук'яненко Олександр_КН-2001_2023-24.pdf Restricted Access | 2.5 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Онлайн-сервіс «Team Tracker» для управління IT-проєктами»
Виконав: студент 4 курсу, групи КН-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Лук’яненко Олександр Віталійович
Керівник __________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2024 року
2
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2024 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Лук’яненку Олександру Віталійовичу
(прізвище, ім’я, по батькові)
1. Тема роботи «Онлайн-сервіс «TeamTracker» для управління IT-проєктами»
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «26» лютого 2024 р. №60/04.
2. Строк подання студентом роботи до 10 червня 2024 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проєктування та розробка онлайн-сервісу «Team Tracker» для управління ІТ-проєктами.
4.3. Програмна реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 42032-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Презентація у вигляді 24 слайдів.
3
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
консультанта завдання видав завдання прийняв
7. Дата видачі завдання 15.01.2024
КАЛЕНДАРНИЙ ПЛАН
Строк
№ з/п Назва етапів кваліфікаційної роботи бакалавра виконання Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
15.01.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та
до 12.02.2024 Виконано
предмету дослідження.
3 Написання теоретичного розділу
до 18.03.2024 Виконано
кваліфікаційної роботи бакалавра.
4 Написання аналітичного розділу
до 01.04.2024 Виконано
кваліфікаційної роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2024 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
03.06.2024 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 08.06.2024 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2024 Виконано
Студент _____________________________ Олександр ЛУК’ЯНЕНКО
(підпис)
Керівник роботи ____________________________ Любов ОКСАМИТНА
(підпис)
4
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 65 с., 33 рис., 1 таблицю, 13
використаних джерел, 3 додатки.
Актуальність теми. Сучасний бізнес все більше розвивається в онлайн-сфері,
що призводить до збільшення кількості ІТ-проєктів. Управління цими проєктами
стає складнішим завдяки їхній розмаїтості та складності. Компанії все частіше
розуміють важливість ефективного управління ІТ-проєктами для досягнення своїх
бізнес-цілей. Застосування онлайн-сервісу для цього може значно полегшити процес
та збільшити продуктивність. Тому, дослідження роботи сервісів управління
проєктами та розробка аналогічного є корисним для кожного розробника.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра –
створення онлайн-сервісу для організації роботи команди розробників.
Завдання кваліфікаційної роботи бакалавра:
− дослідити предметну область;
− виконати порівняльний аналіз існуючих систем управління проєктами;
− розробити базу даних;
− обрати програмно-технічні засоби для реалізації онлайн-сервісу «Team
Tracker»;
− розробити онлайн-сервіс «Team Tracker» для управління ІТ-проєктами та
виконати його тестування.
Об’єкт дослідження: процеси управління ІТ-проєктами.
Предмет дослідження: онлайн-сервіс для управління ІТ-проєктами.
Методи дослідження. Для вирішення поставлених завдань були застосовані
наступні методи дослідження: теоретичний (аналіз літератури з проблеми
дослідження); емпіричний – полягав у спостереженні та налаштуванні онлайн-
сервісу управління ІТ-проєктами; порівняльний – для здійснення порівнянь
існуючих аналогів систем управління проєктами.
5
Перелік ключових слів: ПРЕДМЕТНА ОБЛАСТЬ, ОНЛАЙН-СЕРВІС,
УПРАВЛІННЯ ІТ-ПРОЄКТАМИ, ПРОЄКТУВАННЯ, БАЗА ДАНИХ, ПРОГРАМНІ
ЗАСОБИ.
ABSTRACT
Master’s work contains. 60 pages, 31 figures, 1 table, 10 sources used, 3
attachments.
Actuality of theme. Modern business is increasingly developing in the online
sphere, which leads to an increase in the number of IT projects. Management of these
projects becomes more difficult due to their variety and complexity. Companies
increasingly understand the importance of effective IT project management to achieve
their business goals. Using an online service for this can greatly facilitate the process and
increase productivity. Therefore, researching the operation of project management services
and developing a similar one is useful for every developer.
Purpose and tasks of the research. The goal of the bachelor's thesis is to create an
online service for organizing the work of the development team.
Tasks of the bachelor's qualification work:
− research the subject area;
− perform a comparative analysis of existing project management systems;
− develop a database;
− choose software and technical means for the implementation of the online service
"Team Tracker";
− develop the online IT project management service "Team Tracker" and perform its
testing.
The object of research: IT project management processes.
The subject of research: online IT project management service.
Research methods: The following research methods were used to solve the tasks:
theoretical (analysis of the literature on the research problem); empirical – consisted in
6
observing and setting up the online IT project management service; comparative – for
making comparisons of existing analogues of project management systems.
The list of keywords: SUBJECT FIELD, ONLINE-SERVICE, IT-PROJECT
MANAGEMENT, DESIGN, DATABASE, SOFTWARE.
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 9
ВСТУП ................................................................................................................................ 12
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ .............................................................. 12
1.1 Аналіз сучасного стану управління ІТ-проєктами ............................................... 12
1.2 Огляд існуючих аналогів систем управління проєктів ........................................ 13
1.2.1 Аналіз сервісу «Trelo» ..................................................................................... 13
1.2.2 Аналіз сервісу «Asana» .................................................................................... 14
1.2.3 Аналіз сервісу «Microsoft To Do» ................................................................... 16
1.2.4 Аналіз сервісу «Jira Software» ........................................................................ 17
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка
завдання ......................................................................................................................... 19
Висновки до розділу 1 ................................................................................................... 21
2 ПРОЄКТУВАННЯ ТА РОЗРОБКА ОНЛАЙН-СЕРВІСУ «TEAM TRACKER» ДЛЯ
УПРАВЛІННЯ ІТ-ПРОЄКТАМИ ........................................................................................
2.1 Опис функціонального програмного середовища для розробки……………….22
2.2 Основні принципи розробки онлайн-сервісу «Team Tracker» ............................ 25
2.3 Розробка діаграми варіантів використання ........................................................... 27
2.4 Проєктування структури бази даних ..................................................................... 29
2.5 Опис процесу проєктування структури онлайн-сервісу ...................................... 32
Висновки до розділу 2 ................................................................................................... 34
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ......................................................................................... 35
3.1 Постановка завдання ............................................................................................... 35
3.2 Інтерфейс онлайн-сервісу «Team Tracker» для управління ІТ-проєктами ........ 36
3.3 Програмна реалізація онлайн-сервісу …………………………………………...66
3.4 Особливості тестування онлайн-сервісу ............................................................... 44
3.5 Тестування онлайн-сервісу «Team Tracker» ......................................................... 46
Висновки до розділу 3 ................................................................................................... 48
ВИСНОВКИ ....................................................................................................................... 49
8
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 50
Додаток А. Специфікація 482.ЧДТУ. 42032-01………………………………………..51
Додаток Б. Текст програми……………………………………………………………...53
Додаток В. Інструкція користувача…………………………………………………….63
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
СКБД – система керування базами даних;
БД – база даних;
ПЗ – програмне забезпечення;
Unit-testing – рівень тестування програмного забезпечення, на якому тестуються
окремі одиниці/компоненти програмного забезпечення;
AI – Artificial Intelligence;
UI/UX – User interface/User experience – поняття, які використовуються для опису
дизайну та функціональності сайту;
HTTP-протокол (Hyper Text Transfer Protocol) – протокол передачі гіпер-текстових
документів.
10
ВСТУП
У сучасному світі, де швидкість, ефективність та спільна робота стали
невід'ємними складовими успішного ведення бізнесу та реалізації проєктів,
інструменти для управління проєктами в ІТ-сфері набувають особливої важливості.
З кожним днем темпи розвитку технологій зростають, тому необхідно мати
ефективний механізм контролю та координації проєктів, щоб досягати успіху в
цьому конкурентному середовищі.
Актуальність кваліфікаційної роботи бакалавра. Сучасний бізнес все більше
розвивається в онлайн-сфері, що призводить до збільшення кількості ІТ-проєктів.
Управління цими проєктами стає складнішим завдяки їхній розмаїтості та
складності. Компанії все частіше розуміють важливість ефективного управління ІТ-
проєктами для досягнення своїх бізнес-цілей. Застосування онлайн-сервісу для
цього може значно полегшити процес та збільшити продуктивність. Тому,
дослідження роботи сервісів управління проєктами та розробка аналогічного є
корисним для кожного розробника.
Мета кваліфікаційної роботи бакалавра – створення онлайн-сервісу для
організації роботи команди розробників.
Завдання кваліфікаційної роботи бакалавра:
− дослідити предметну область;
− виконати порівняльний аналіз існуючих систем управління проєктами;
− розробити базу даних;
− обрати програмно-технічні засоби для реалізації онлайн-сервісу «Team
Tracker»;
− розробити онлайн-сервіс «Team Tracker» для управління ІТ-проєктами та
виконати його тестування.
Об’єкт і предмет дослідження.
Об’єктом дослідження є процеси управління ІТ-проєктами.
Предметом дослідження є онлайн-сервіс для управління ІТ-проєктами.
11
Для вирішення поставлених завдань були застосовані наступні методи
дослідження:
− теоретичний (аналіз літератури з проблеми дослідження);
− емпіричний – полягав у спостереженні та налаштуванні онлайн-сервісу для
управління ІТ-проєктами;
− порівняльний – для здійснення порівнянь існуючих аналогів систем
управління проєктами.
Онлайн-сервіс «Team Tracker» для управління ІТ-проєктами розроблений на
мові JavaScript з використанням Node.js. Створення та робота з базою даних (БД)
відбувалась із застосуванням Couchbase Server. Контроль проєктування власної
розробки та написання коду проводилось в програмному середовищі VScode.
Обрані технології задовольняють всім функціональним і не функціональним
вимогам до такого типу програмного забезпечення (ПЗ).
12
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану управління ІТ-проєктами
У сучасному ІТ-середовищі швидкість інновацій та зміни є неминучими
факторами. Це ставить перед управлінцями проєктів завдання забезпечення
ефективного керування, спільної роботи та координації зусиль команди над
різноманітними проєктами. Саме цим обумовлюється вибір теми кваліфікаційної
роботи бакалавра.
Зараз ринок онлайн-інструментів для управління проєктами пропонує
широкий вибір рішень. Вони включають в себе: інструменти для планування,
відстеження прогресу, спільної роботи, аналізу даних та звітності. Однак, серед цієї
різноманітності важко обрати інструмент, який буде найбільш відповідати потребам
конкретного проєкту та команди.
Управління ІТ-проєктами є важливою складовою для успішної реалізації
інформаційних технологій у різних сферах бізнесу та суспільства загалом.
Розглянемо кілька аспектів сучасного стану управління ІТ-проєктами:
1. Агільний підхід: за останні кілька років агільні методики управління, такі як
Scrum, Kanban та Lean, стали популярними серед ІТ-проєктів. Вони дозволяють
більш гнучко адаптуватися до змін вимог клієнта та ринкових умов.
2. Використання інструментів керування проєктами: з розвитком технологій
з'явилися нові інструменти для управління проєктами, такі як «Jira Software»,
«Asana», «Trello» тощо. Вони допомагають командам ефективніше організовувати
роботу та взаємодіяти.
3. Зростання значення керування ризиками: у світі ІТ-проєктів ризики є
невід'ємною частиною. Сучасні підходи до управління проєктами акцентують увагу
на ідентифікації, аналізі та керуванні ризиками для запобігання можливим
проблемам.
4. Зростання значення комунікацій: ефективна комунікація між учасниками
проєкту стала ключовим фактором успіху. Інструменти спільної роботи,
13
відеоконференції, чати дозволяють зберігати зв'язок між розподіленими командами
та зацікавленими сторонами.
5. Зростання важливості культури розробки: культура розробки, що базується на
співпраці, відкритості, взаємоповазі та навчанні з помилок, стає все більш
важливою. Команди, які працюють у таких середовищах, зазвичай досягають
кращих результатів.
Загалом, сучасний стан управління ІТ-проєктами показує тенденцію до
більшої гнучкості, співпраці та уваги до людського фактору в процесі розробки та
впровадження інформаційних технологій.
1.2 Огляд існуючих аналогів систем управління проєктами
У кваліфікаційній роботі бакалавра проведено огляд існуючих аналогів систем
управління проєктами провідних компаній, таких як: «Trelo», «Asana», «Microsoft To
Do», «Jira Software».
1.2.1 Аналіз сервісу «Trelo». «Тrello» – це онлайн-сервіс для керування
проєктами та організації завдань, який базується на концепції «дошки» і «карток».
Головна сторінка сервісу «Trello» представлена на рис. 1.1.
Рисунок 1.1 – Головна сторінка сервісу «Trello» [1]
14
Основна ідея полягає в тому, щоб візуалізувати завдання та процес їх
виконання у вигляді карток на віртуальних дошках [1].
Основні компоненти «Trello» [1]:
− Дошка: дошка – це основний контейнер, на якому розміщуються всі картки.
Користувач може створювати нові дошки для різних проєктів або завдань.
− Картка: картка – це окремий елемент на дошці, який представляє собою
окреме завдання, проєкт або ідею. На картці можна вказувати назву, опис, додавати
прикріплені файли, встановлювати дедлайни, призначати відповідальних та
додавати коментарі.
− Список: список – це розділ на дошці, який містить картки. Завдяки цьому
можна створити декілька списків на одній дошці, щоб упорядковувати завдання за
різними категоріями, наприклад: «У роботі», «У процесі перевірки», «Завершені»
тощо.
− Команди: користувачі можуть об'єднувати дошки в команди, щоб спільно
працювати над проєктами. Команди дозволяють ділитися дошками, картками та
коментарями з учасниками команди.
− Учасники: можна додавати користувачів до своїх дошок та карток,
призначаючи їм різні ролі (наприклад, «Адміністратор», «Учасник», «Спостерігач»).
Це дозволяє розподіляти відповідальність та спільно працювати над завданнями.
«Trello» надає можливості для розширення функціональності за допомогою
різних додатків та інтеграцій з іншими сервісами, такими як: Google Drive, Dropbox,
Slack, GitHub тощо. Це робить його потужним інструментом для керування
проєктами та спільної роботи над завданнями у різних командних середовищах.
1.2.2 Аналіз сервісу «Asana». «Asana» – це онлайн-сервіс для керування
проєктами та організації робочих процесів, який дозволяє командам ефективно
співпрацювати, встановлювати цілі, відстежувати завдання і керувати ресурсами [2].
Головна сторінка сервісу «Asana» представлена на рис. 1.2.
Варто зазначити, що сервісу «Asana», як і його аналогам, притаманні як
позитивні сторони, так і негативні. Тому важливе значення потрібно приділяти тим
складовим сервісу, які суттєво вплинуть на власну розробку, на її ефективність та
15
зручний інтерфейс для користувача.
Розглянемо детальніше особливості даного онлайн-сервісу.
Рисунок 1.2 – Головна сторінка сервісу «Asana» [2]
Основні можливості «Asana» включають:
− Шаблони проєктів: «Asana» має набір шаблонів проєктів, що дозволяє швидко
створювати нові проєкти з попередньо встановленими структурами та завданнями.
− Календар та гант-діаграми: «Asana» надає можливість відображення завдань у
вигляді календаря або гант-діаграми, що допомагає керувати часовими лініями та
дедлайнами проєктів.
− Команди і спільна робота: користувачі можуть створювати команди та
додавати учасників для спільної роботи над проєктами. Команди можуть
об'єднувати кілька проєктів та забезпечувати доступ до них для усіх членів команди.
− Шаблони проєктів: «Asana» має набір шаблонів проєктів, що дозволяє швидко
іншими (рис. 1.3) створювати нові проєкти з попередньо встановленими
структурами та завданнями. Злито слова, правильно вказати назву рис.
− Звіти та аналітика: сервіс надає можливість створювати звіти та аналітичні
звіти щодо прогресу проєктів, розподілу завдань, терміновому виконанню та іншим
аспектам управління.
16
− Інтеграції з іншими сервісами: «Asana» інтегрується з багатьма іншими
популярними сервісами, такими як: «Slack», «Google Drive», «Dropbox», «GitHub»
тощо, що дозволяє зручно обмінюватися інформацією та спільно використовувати
ресурси.
«Asana» допомагає організовувати робочі процеси, збільшувати
продуктивність команд та досягати цілей проєктів шляхом ефективного керування
завданнями та ресурсами.
1.2.3 Аналіз сервісу «Microsoft To Do». «Microsoft To Do» – це безкоштовний
сервіс для керування списками завдань і задач, розроблений компанією Microsoft.
Головна сторінка сервісу «Microsoft To Do» показана на рис. 1.3 [3].
Рисунок 1.3 – Головна сторінка сервісу «Microsoft To Do» [3]
Цей сервіс дозволяє користувачам створювати, відстежувати і організовувати
свої завдання в зручний спосіб, на основні функції «Microsoft To Do» включають [3]:
− Створення списків: користувачі можуть створювати різні списки завдань для
різних цілей, таких як робота, особисте життя, покупки тощо.
− Додавання завдань: вони можуть додавати нові завдання до своїх списків,
встановлювати пріоритети, дедлайни та нагадування.
− Організація завдань: користувачі можуть пересувати завдання між списками,
групувати їх за категоріями, використовувати мітки та фільтри для кращої
організації.
17
− Інтеграція з Microsoft 365: «Microsoft To Do» інтегрується з іншими сервісами
Microsoft, такими як Outlook, що дозволяє автоматично переносити завдання з
електронної пошти або календаря в список завдань
− Мобільний доступ: додаток «Microsoft To Do» доступний на різних
платформах, включаючи Windows, iOS та Android, що дозволяє користувачам мати
доступ до своїх списків завдань у будь-який час і з будь-якого пристрою.
«Microsoft To Do» допомагає користувачам організовувати свої завдання,
підвищувати продуктивність і керувати часом за допомогою простого та зручного
інтерфейсу, даючи інтеграцію з іншими продуктами Microsoft, такими як Outlook,
Microsoft 365 та іншими (рис. 1.3).
Основні функції «Microsoft To Do» включають [3]:
− Створення списків: користувачі можуть створювати різні списки завдань для
різних цілей, таких як робота, особисте життя, покупки тощо.
− Додавання завдань: вони можуть додавати нові завдання до своїх списків,
встановлювати пріоритети, дедлайни та нагадування.
− Організація завдань: користувачі можуть пересувати завдання між списками,
групувати їх за категоріями, використовувати мітки та фільтри для кращої
організації.
− Інтеграція з Microsoft 365: «Microsoft To Do» інтегрується з іншими сервісами
Microsoft, такими як Outlook, що дозволяє автоматично переносити завдання з
електронної пошти або календаря в список завдань
− Мобільний доступ: додаток «Microsoft To Do» доступний на різних
платформах, включаючи Windows, iOS та Android, що дозволяє користувачам мати
доступ до своїх списків завдань у будь-який час і з будь-якого пристрою.
«Microsoft To Do» допомагає користувачам організовувати свої завдання,
підвищувати продуктивність і керувати часом за допомогою простого та зручного
інтерфейсу.
1.2.4 Аналіз сервісу «Jira Software». «Jira Software» – це потужна платформа
для керування проєктами та відстеження задач, розроблена компанією Atlassian.
Вона широко використовується для розробки програмного забезпечення, управління
18
проєктами різного типу та спільної роботи в команді. «Jira Software» дозволяє
створювати, відстежувати та керувати різними типами задач, від простих завдань до
складних проєктів розробки програмного забезпечення (рис. 1.4).
Рисунок 1.4 – Головна сторінка сервісу «Jira Software» [4]
Основні характеристики сервісу «Jira Software» включають [4]:
− Створення проєктів: «Jira Software» дозволяє створювати різноманітні проєкти
для різних типів діяльності, таких як розробка ПЗ, управління проєктами, IT-
підтримка тощо.
− Завдання і задачі: користувачі можуть створювати завдання, призначати їх
відповідальним особам, встановлювати пріоритети, додавати коментарі та
відстежувати статус виконання.
− Спринти та релізи: для розробки програмного забезпечення «Jira Software»
підтримує концепції спринтів (Scrum) та ітерацій (Kanban), що дозволяє
організовувати та відстежувати роботу команди протягом певного періоду часу.
− Дошки завдань (Boards): «Jira Software» надає можливість відображати задачі
на спеціальних дошках, що допомагає візуалізувати поточний стан роботи та
відстежувати прогрес.
19
− Звіти та аналітика: платформа «Jira Software» надає різноманітні засоби для
аналізу продуктивності команди, відстеження трендів, оцінки часу та іншу
аналітичну інформацію.
− Інтеграції з іншими інструментами: «Jira Software» має широкий спектр
інтеграцій з іншими інструментами розробки програмного забезпечення, системами
управління версіями, засобами комунікації та іншими сервісами, що полегшує
спільну роботу та обмін інформацією.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
У таблиці 1.1 представлено порівняльний аналіз розглянутих сервісів.
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих реалізацій
Критерії Сервіси
«Trello» «Asana» «Microsoft To Do» «Jira Software»
Тип Невеликі Різні типи Особисте Команди
користувачів команди, команд та використання, розробників,
особисте проєктів невеликі проєкти проєкти ПЗ
використання
Інтерфейс Простий, Професійний, Простий, Складний,
візуальний, більш заснований на професійний,
заснований на складний списках багато функцій
дошках
Функціонал Основні Розширені Основні функції Розширені
функції для можливості керування можливості для
керування для керування завданнями розробки ПЗ
завданнями завданнями
Командна Можливість Спільна Можливість Спільна робота,
робота спільної робота, обмін обміну списками обмін
роботи, обмін інформацією та завданнями інформацією
коментарями
Інтеграції Обмежений Розширений Інтеграція з Багато
набір набір Microsoft 365, інтеграцій з
інтеграцій інтеграцій Outlook іншими
інструментами
20
Підтримка Можливість Повна Немає підтримки Повна
Agile використання, підтримка Agile підтримка Agile
але обмежена Agile методологій методологій
методологій
Спринти, Немає Підтримка Немає підтримки Повна
Релізи, Звіти підтримки спринтів, підтримка
релізів, звітів
Для порівняння в якості критеріїв було обрано наступні: тип користувачів,
інтерфейс, функціонал, командна робота, інтеграції, підтримка Agile, спринти,
релізи, звіти.
Як висновок проведеного аналізу, зазначимо те, що кожному з них належать
такі характеристики:
− зрозумілий дизайн;
− базовий набір функцій безкоштовної версії;
− наявний набір інтеграцій.
При розробці онлайн-сервісу «Team Tracker» для управління ІТ-проєктами
варто звернути увагу на такі моменти:
− онлайн-сервіс «Team Tracker» повинен мати зручний, зрозумілий та приємний
інтерфейс;
− онлайн-сервіс «Team Tracker» повинен мати мінімальний набір функцій;
− онлайн-сервіс «Team Tracker» повинен містити базу даних користувачів і
розподіл їх по ролям;
− ціна на додаткові функції повинна бути не високою.
Постановка завдання
1. Аналіз бізнес-логіки роботи, функціональних вимог та використаних засобів
користувацьких інтерфейсів існуючих сервісів.
2. Дослідження та вибір найактуальніших технологій веб-розробки для
створення сучасних онлайн-сервісів.
3. Розробка онлайн-сервісу «Team Tracker» для управління ІТ-проєктами
задовольняє таким функціональним вимогам:
− автентифікація та реєстрація користувачів;
21
− перегляд завдань;
− додавання завдань і дедлайнів;
− можливість розподілу ролей і прав доступу в відповідності до ролей;
− перегляд інформації по проєкту.
Висновки до розділу 1
У даному розділі досліджено предметну область, а саме: системи управління
проєктами; основні проблеми створення систем управління проєктами; огляд
аналогічних систем управління проєктами.
Виконано порівняльний аналіз існуючих онлайн-сервісів управління
проєктами: «Trello», «Asana», «Microsoft To Do», «Jira Software».
Представлено таблицю порівнянь існуючих рішень розглянутих реалізацій та
визначено постановку завдання.
22
2 ПРОЄКТУВАННЯ ОНЛАЙН-СЕРВІСУ «TEAMTRACKER» ДЛЯ
УПРАВЛІННЯ ІТ-ПРОЄКТАМИ
2.1 Опис функціонального програмного середовища для розробки
Розглянемо детальніше програмне середовище та його особливості для
розробки онлайн-сервісу «Team Tracker».
Visual Studio Code – це редактор вихідного коду, який можна використовувати
з різними мовами програмування, включаючи C, C#, C++, Fortran, Go, Java,
JavaScript, Node.js, Python, Rust. Він базується на структурі Electron, яка
використовується для розробки вебдодатків Node.js, які працюють на механізмі
компонування Blink. Visual Studio Code використовує той самий компонент
редактора, який використовується в Azure DevOps [5]. На рисунку 2.1
представлений інтерфейс користувача VScode.
Рисунок 2.1 – Інтерфейс користувача VScode
23
Коробка Visual Studio Code містить базову підтримку для більшості
поширених мов програмування. Ця базова підтримка включає підсвічування
синтаксису, зіставлення дужок, згортання коду та настроювані фрагменти. Visual
Studio Code також постачається з IntelliSense для JavaScript, TypeScript, JSON, CSS і
HTML, а також підтримує налагодження Node.js. Підтримка додаткових мов може
бути забезпечена безоплатними розширеннями на VS Code Marketplace [5].
Замість системи проєктів вона дозволяє користувачам відкривати один або
кілька каталогів, які потім можна зберегти в робочих областях для подальшого
використання. Це дозволяє йому працювати як мовно-агностичний редактор коду
для будь-якої мови. Він підтримує багато мов програмування та набір функцій, який
відрізняється для кожної мови. Небажані файли та папки можна виключити з дерева
проєкту за допомогою налаштувань. Багато функцій Visual Studio Code не доступні
через меню чи інтерфейс користувача, але доступ до них можна отримати через
палітру команд.
Керування джерелом є вбудованою функцією Visual Studio Code. Він має
спеціальну вкладку всередині панелі меню, де користувачі можуть отримати доступ
до налаштувань керування версіями та переглянути зміни, внесені до поточного
проєкту. Щоб використовувати цю функцію, Visual Studio Code має бути зв’язано з
будь-якою підтримуваною системою керування версіями Git, Apache Subversion,
Perforce тощо. Це дозволяє користувачам створювати репозиторії, а також робити
запити push і pull безпосередньо з програми Visual Studio Code.
Visual Studio Code містить кілька розширень для FTP, що дозволяє
використовувати програмне забезпечення як безплатну альтернативу для веб-
розробки. Код можна синхронізувати між редактором і сервером без завантаження
додаткового програмного забезпечення.
Код Visual Studio дозволяє користувачам встановлювати кодову сторінку, на
якій буде збережено активний документ, символ нового рядка та мову
програмування активного документа. Це дозволяє використовувати його на будь-
якій платформі, у будь-якій локальній мережі та для будь-якої заданої мови
програмування.
24
Visual Studio Code збирає дані про використання та надсилає їх до Microsoft,
хоча це можна вимкнути. Через відкритий вихідний код програми, код телеметрії
доступний для громадськості, яка може бачити, що саме збирається.
JavaScript (JS) – динамічна, об'єктно-орієнтована прототипна мова
програмування. Найчастіше використовується для створення сценаріїв веб-сторінок,
що надає можливість на боці клієнта (пристрої кінцевого користувача) взаємодіяти з
користувачем, керувати браузером, асинхронно обмінюватися даними з сервером,
змінювати структуру та зовнішній вигляд веб-сторінки [9].
JavaScript класифікують як прототипну (підмножина об'єктно-орієнтованої),
скриптову мову програмування з динамічною типізацією. Окрім прототипної,
JavaScript також частково підтримує інші парадигми програмування (імперативну та
частково функціональну) і деякі відповідні архітектурні властивості, зокрема:
динамічна та слабка типізація, автоматичне керування пам'яттю, прототипне
наслідування, функції як об'єкти першого класу [5].
Мова JavaScript використовується для:
– написання сценаріїв веб-сторінок для надання їм інтерактивності;
– створення односторінкових та прогресивних веб-застосунків;
– програмування на стороні сервера;
– стаціонарних застосунків;
– мобільних застосунків;
– сценаріїв в прикладних програмах;
– всередині PDF-документів тощо.
Попри схожість назв, мови Java та JavaScript є двома різними мовами, що
мають відмінну семантику, хоча й мають схожі риси в стандартних бібліотеках та
правилах іменування. Синтаксис обох мов отриманий «у спадок» від інших мов, але
семантика та дизайн JavaScript є результатом впливу мов Self та Scheme.
25
2.2 Основні принципи розробки онлайн-сервісу «Team Tracker»
Розробка онлайн-сервісів базується на декількох основних принципах, що
допомагають створити ефективний та зручний продукт для користувачів.
Node.js – платформа з відкритим кодом для виконання високопродуктивних
мережевих застосунків, написаних мовою JavaScript. Засновником платформи є Раян
Дал (Ryan Dahl). Якщо раніше JavaScript застосовувався для обробки даних в
браузері користувача, то node.js надав можливість виконувати JavaScript-скрипти на
сервері та відправляти користувачеві результат їхнього виконання. Платформа
Node.js перетворила JavaScript на мову загального використання з великою
спільнотою розробників [8].
Однією з головних особливостей Node.js є асинхронна та подієво-орієнтована
модель програмування. Замість того, щоб блокувати виконання коду під час
очікування операцій введення-виведення, Node.js використовує неблокувальні
операції, дозволяючи додаткам одночасно обробляти безліч запитів. Це робить
Node.js дуже ефективним для створення масштабованих та чуйних серверних
додатків.
Node.js має низку унікальних характеристик, які роблять його привабливим
для розробників. Ось деякі з ключових особливостей Node.js:
Висока швидкість виконання. Node.js заснований на рушії JavaScript V8 від
Google, який забезпечує швидку та ефективну обробку коду. Це дозволяє Node.js
виконувати операції швидко, що особливо важливо для створення
високопродуктивних серверних додатків [8].
Універсальність та гнучкість. Node.js дозволяє використовувати JavaScript як
мову програмування для розробки серверних та клієнтських додатків. Це дозволяє
розробникам використовувати одну мову та ділитися кодом між серверною та
клієнтською стороною. Завдяки цій універсальності Node.js полегшує розробку
повноцінних веб-додатків та спрощує командну взаємодію.
Безліч модулів та бібліотек. Node.js має велику екосистему модулів та
бібліотек, доступних через вбудований менеджер пакетів npm. Розробники можуть
26
використовувати ці модулі та бібліотеки для розширення функціональності своїх
додатків та прискорення розробки. Завдяки величезній спільноті розробників, яка
підтримує npm, можна знайти рішення практично для будь-якого завдання.
Сумісність з декількома платформами. Node.js може бути запущений на
різних операційних системах, таких як Windows, MacOS та Linux. Це робить його
універсальним та забезпечує розробникам свободу вибору платформи розгортання
своїх додатків. Крім того, Node.js також сумісний з контейнеризацією та хмарними
платформами, що спрощує розгортання та масштабування додатків.
Ці характеристики роблять Node.js потужним інструментом розробки
різноманітних додатків. Він забезпечує високу швидкість виконання,
універсальність та гнучкість, а також має велику екосистему модулів та бібліотек.
Завдяки своїй сумісності з різними платформами, Node.js надає розробникам
гнучкість у виборі інфраструктури для своїх проєктів [8].
React – відкрита JavaScript бібліотека для створення інтерфейсів користувача,
яка покликана вирішувати проблеми часткового оновлення вмісту веб-сторінки, з
якими стикаються в розробці односторінкових застосунків. Розробляється Meta і
спільнотою індивідуальних розробників [7].
React використовується для розробки користувацького інтерфейсу веб-
додатків. Основною метою React фронтед є створення інтерактивних, динамічних та
відзивчивих інтерфейсів для користувачів. React фронтенд дозволяє створювати
багатофункціональні та інтерактивні застосунки зі швидким рендерингом і
перехідом між сторінками. Також він має такі переваги:
– використання віртуального DOM та ефективного алгоритму оновлення
дозволяє робити мінімальні зміни в реальному DOM, що покращує продуктивність
застосунків;
– React базується на компонентній архітектурі, що дозволяє розбивати
інтерфейс на незалежні компоненти. Це спрощує розробку, тестування та підтримку
коду, оскільки компоненти можуть бути повторно використані та легко змінюються;
27
– React пропагує односторонній потік даних, що сприяє простоті та
передбачуваності управління станом додатків, полегшує відлагодження та
тестування застосунків;
– спільнота розробників, що використовує React велика та активна. Є безліч
ресурсів, бібліотек та інструментів для розробки. Також існує багато сторонніх
бібліотек, які підтримують React і допомагають розширити його функціональність;
– React добре підходить для розробки проєктів будь-якого масштабу. Він надає
можливості для легкого розширення та перевикористання компонентів, інтеграції з
іншими бібліотеками та фреймворками. Також підтримує серверний рендеринг, що
дозволяє поліпшити швидкість завантаження сторінок та оптимізувати пошукову
оптимізацію [6].
Загалом, використання бібліотеки дає можливість React розробникам
ефективно будувати потужні та швидкі інтерфейси, полегшує роботу з
компонентами та станом додатків, і має широку підтримку спільноти розробників.
Він відмінно підходить для командної розробки завдяки дотриманню UI та шаблона
робочого процесу.
2.3 Розробка діаграми варіантів використання
Діаграма варіантів використання (Use Case Diagram) є важливим елементом
при плануванні кожного проєкту, оскільки вона просто демонструє взаємодію між
акторами та прецедентами. Це найпростіша форма поведінкової діаграми.
Створення такої діаграми надає інформацію про функціонал майбутньої системи та
показує, як актори можуть взаємодіяти з цією системою.
Один з акторів, що використовується при створенні діаграми, це «User
Programmer» – це особа, яка вибирає певну систему та має намір взаємодіяти з нею.
Після вибору всіх потенційних користувачів системи формується перелік можливих
варіантів взаємодії з цією системою.
У кваліфікаційній роботі бакалавра розроблена діаграма Use Case на основі
інформації про користувачів онлайн-сервісу, а також можливих варіантів взаємодії з
28
ним. На діаграмі представлено три типи юзерів: темно зеленим кольором
визначаються загальні дії, а решта – відповідно до кольору кожного юзера (рис. 2.2).
Рисунок 2.2 – Діаграма варіантів використання Use Case
Варіанти використання онлайн-сервісу наступні:
− Реєстрація.
− Авторизація.
− Створення/редагування/перегляд проєкту.
− Створення/редагування/перегляд/виконання завдань.
− Створення/редагування/перегляд звітів.
− Підримка Юзерів.
− Підтримка сервісу.
− Налаштування профілю особистого кабінету.
Отже, на основі сформованих даних про акторів та всіх можливих варіантів
використання онлайн-сервісу сформовано Use Case діаграму.
29
2.4 Проєктування структури бази даних
Проєктування структури бази даних (БД) є важливою складовою розробки
онлайн-сервісу. Ефективна структура БД забезпечує ефективне зберігання, доступ і
оновлення даних. Розглянемо кілька ключових кроків проєктування структури бази
даних.
Розуміння потреб бізнесу та вимог до даних є першим кроком. Потрібно
встановити, які дані необхідні, як вони пов'язані між собою і як вони будуть
використовуватися. Сутності визначаються як основні об'єкти, для яких будуть
зберігатися дані. Наприклад, якщо створюємо базу даних для онлайн-сервісу,
сутностями можуть бути користувач, проєкт, завдання і т. д.
Кожна сутність має свої атрибути, які описують властивості цих сутностей.
Наприклад, для сутності «користувач» атрибутами можуть бути «ім'я», «прізвище»,
«адреса електронної пошти» і т. д.
Визначення взаємозв'язків між сутностями є важливим аспектом проєктування
бази даних. Відношення можуть бути один-до-одного, один-до-багатьох або багато-
до-багатьох. Наприклад, завдання можуть мати відношення один-до-багатьох з
виконавцями, оскільки одне завдання може виконуватись багатьма виконавцями.
Нормалізація є процесом оптимізації структури бази даних шляхом розбиття
даних на менші та більш узгоджені таблиці. Це допомагає уникнути аномалій даних.
Під час проєктування структури бази даних важливо вибрати відповідні типи
даних для кожного атрибуту. Наприклад, цілочисельні дані можуть бути
представлені типом INTEGER, а текстові дані – типом VARCHAR. Також можна
встановити обмеження на значення атрибутів, наприклад, обов'язкове поле або
обмеження унікальності. На основі визначених сутностей, атрибутів та відношень
створюються таблиці бази даних. Кожна таблиця представляє сутність, а кожен
атрибут стає стовпчиком. Зв'язки між таблицями встановлюються за допомогою
зовнішніх ключів.
Для поліпшення продуктивності запитів до бази даних можна створити
індекси. Індекси допомагають швидко знаходити дані за певними стовпчиками і
30
прискорюють операції пошуку. Важливо забезпечити цілісність даних в базі даних.
Це включає в себе встановлення правил перевірки даних, обмежень цілісності та
використання транзакцій для збереження консистентності даних.
Після створення структури бази даних важливо оптимізувати запити, які
будуть виконуватися до бази даних. Це може включати створення відповідних
запитів, використання індексів і переглядів для підвищення продуктивності.
Для створення backend частини в кваліфікаційній роботі бакалавра обрано
базу даних MySQL.
MySQL – вільна система керування реляційними базами даних, яка була
розроблена компанією «ТсХ» для підвищення швидкодії обробки великих баз
даних. Ця система керування базами даних з відкритим кодом була створена як
альтернатива комерційним системам. MySQL з самого початку була дуже схожою
на mSQL, проте з часом вона все розширювалася і зараз MySQL – одна з
найпоширеніших систем керування базами даних. Вона використовується, в першу
чергу, для створення динамічних вебсторінок, оскільки має чудову підтримку з боку
різноманітних мов програмування [9].
База даних для проєкту має нижче наведену структуру (рис. 2.3):
Рисунок 2.3 – Структура бази даних
31
Представимо опис таблиць БД.
Таблиця users:
– user_id: Унікальний ідентифікатор користувача.
– username: Унікальне ім'я користувача.
– password_hash: Захешований пароль.
– email: Унікальна електронна пошта.
– role: Роль користувача.
– created_at: Дата створення запису.
Таблиця projects:
– project_id: Унікальний ідентифікатор проєкту.
– project_name: Назва проєкту.
– description: Опис проєкту.
– created_at: Дата створення запису.
Таблиця tasks:
– task_id: Унікальний ідентифікатор завдання.
– project_id: Зовнішній ключ до таблиці projects.
– assignee_id: Зовнішній ключ до таблиці users.
– description: Опис завдання.
– status: Статус завдання.
– created_at: Дата створення запису.
– updated_at: Дата останнього оновлення запису.
Таблиця reports:
– report_id: Унікальний ідентифікатор звіту.
– task_id: Зовнішній ключ до таблиці tasks.
– user_id: Зовнішній ключ до таблиці users.
– description: Опис звіту.
– creation_date: Дата створення запису.
Таблиця user_projects:
– user_id: Зовнішній ключ до таблиці users.
– project_id: Зовнішній ключ до таблиці projects.
32
– role: Роль користувача в проєкті.
– Первинний ключ складається з user_id та project_id.
2.5 Опис процесу проєктування структури онлайн-сервісу
У завдання кваліфікаційної роботи бакалавра, крім опису предметної області
та вибору програмно-технічних засобів, входить реалізація онлайн-сервісу «Tem
Tracker» з його тестуванням. Щоб представити функціонал онлайн-сервісу, потрібно
виділити наступні процеси:
− реєстрації користувача;
− авторизації користувача;
− використання інформації;
− створення проєкту;
− створення завдання.
Процес реєстрації користувача в онлайн-сервісі (рис. 2.2) є одним із
найголовніших. Для реєстрації користувач повинен: ввести дані; перевірити їх на
валідність; зареєструватися.
Рисунок 2.4 – Діаграма процесу реєстрації користувача
Процес авторизації користувача (рис. 2.4) є також важливим, оскільки кожен
користувач повинен мати свою сторінку, де він може зберігати особисту
інформацію.
Для авторизації користувач повинен:
− ввести дані;
33
− перевірити їх валідність;
− підтвердити авторизацію.
Рисунок 2.5 – Діаграма процесу авторизації користувача
Провівши аналіз ресурсів для управління проєктами, в роботі обрано
структуру онлайн-сервісу «Team Tracker» для управління ІТ-проєктами, що
складається з таких розділів:
− Головна сторінка.
− Реєстрація користувача.
− Авторизація користувача.
− Сторінка проєкту.
− Сторінка з завданнями.
− Створення, оформлення звітів.
Висновки до розділу 2
У даному розділі представлено опис функціонального програмного
середовища для розробки онлайн-сервісу «Team Tracker», а також досліджено
основні принципи створення онлайн-сервісів та бази даних.
На основі інформації про користувачів онлайн-сервісу для управління ІТ-
проєктами розроблена діаграма Use Case.
34
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Постановка завдання
Основним завданням кваліфікаційної роботи баклавра є створення онлайн-
сервісу «Team Tracker» для управління IT-проєктами.
При розробці онлайн-сервісу «Team Tracker» були сформульовані наступні
завдання:
1. Реалізація інтуїтивно зрозумілого та ергономічного інтерфейсу для зручного
користування. Для цього потрібно створення різноманітних компонентів з
метою відображення різних аспектів управління IT-проєктами.
2. Створення можливостей для створення, редагування та видалення проєктів, а
також надання інструментів для створення завдань проєкту.
3. Розробка функціоналу для створення, відстеження та оновлення задач в межах
кожного проєкту. Реалізовувалась можливість додавання описів, встановлення
статусів та призначення відповідальних для кожної окремої задачі.
Під час розробки програмної частини онлайн-сервісу "Team Tracker" для
управління IT-проєктами були використані наступні технології:
React – JavaScript бібліотека для створення користувацьких інтерфейсів. React
був обраний завдяки своїй ефективності при розробці веб-додатків та зручності у
використанні всіх компонентів.
JavaScript – мова програмування, що використовується для взаємодії з
користувацьким інтерфейсом та обробки даних на стороні клієнта.
TailwindCSS – CSS-фреймворк, який дозволяє швидко створювати стилізовані
компоненти за допомогою високорівневих класів. Це дозволило ефективно керувати
виглядом інтерфейсу онлайн-сервісу "Team Tracker" без необхідності написання
великої кількості власного CSS.
Vite, HTML, CSS – інструменти для розробки веб-додатків, що допомогли у
швидкому розгортанні та оптимізації коду.
35
Вказані технології були обрані з урахуванням їхньої популярності,
продуктивності та зручності у використанні для досягнення мети розробки онлайн-
сервісу "Team Tracker".
Основну структуру онлайн-сервісу представлено на рис 3.1.
Рисунок 3.1 – Компоненти програми
3.2 Інтерфейс онлайн-сервісу «Team Tracker» для управління IT-
проєктами
Графічний інтерфейс користувача онлайн-сервісу «Team Tracker» реалізовано
за допомогою бібліотеки React. Для опису реалізації графічного інтерфейсу обрано
компонент NewProject (рис. 3.2).
Компонент NewProject – це функціональний компонент React, який
відображає форму для введення даних нового проєкту (рис. 3.3–3.4).
36
У програмній реалізації використовуються Refs (посилання), а також useRef –
для створення посилань на різні елементи «DOM», такі як поля вводу та модальне
вікно. Ці посилання використовуються для отримання значень введених
користувачем даних під час події збереження.
Компонент Modal реалізує модальне вікно, яке відображається, якщо
користувач спробує зберегти форму без заповнення всіх обов'язкових полів. Modal
містить текстові повідомлення для інформування користувача про помилку.
Компонент містить обробник подій handleSave, який викликається при
натисканні на кнопку «Save». Цей обробник перевіряє, чи всі поля введені коректно,
і, якщо «так», то викликає передану функцію «onAdd» з введеними даними нового
проєкту. Якщо дані не введено коректно, то відкривається модальне вікно.
Компонент відображає поля вводу для назви проєкту, опису та дати
завершення. Також він містить кнопки «Cancel» та «Save», які дозволяють
користувачеві скасувати або зберегти новий проєкт відповідно.
Рисунок 3.2 – Розроблений графічний інтерфейс користувача в компоненті
NewProject
37
Рисунок 3.3 – Створення проєкту
Рисунок 3.4 – Створення завдання
Сторінка створення проєкту містить поля для введення даних про проєкт:
назву проєкту, опис, дедлайн проєкту. Сторінка створення завдання містить поля
для вводу даних по завдання.
3.3 Програмна реалізація онлайн-сервісу
Основою онлайн-сервісу «Team Tracker» для управління IT-проєктами є
компонент App.jsx.
Компонент App, який має стан «projectState», зберігає інформацію про обрані
проєкти, їх завдання та обраний проєкт.
Функції обробника подій, такі як: «handleAddTask», «handleDeleteTask»,
«handleSelectProject», «handleStartAddingProject», «handleCancelAddProject»,
38
«handleAddProject» та «handleDeleteProject» використовуються для зміни стану
сервісу.
Залежно від значення «selectedProjectId», відображається відповідний контент.
Якщо обраний проєкт існує, то відображається його сторінка з відповідними
завданнями та можливістю додавання нових. Якщо користувач обрав додати новий
проєкт, тоді відображається форма для створення нового проєкту. Якщо ж жоден
проєкт не обрано, то відображається повідомлення про відсутність обраного проєкту
з опцією його створення.
Дані передаються до дочірніх компонентів для відображення та обробки.
Наприклад, дані про обраний проєкт передаються до компоненти SelectedProject, а
також функції обробника подій передаються до компонентів NewProject та
NoProjectSelected.
Компоненти SelectedProject, NewProject та NoProjectSelected відповідають за
відображення вмісту в залежності від стану сервісу. Наприклад, SelectedProject
показує інформацію про обраний проєкт та його завдання, NewProject відображає
форму для створення нового проєкту, а NoProjectSelected повідомляє користувача
про відсутність обраного проєкту.
Така структура створює зручне середовище для користувачів керувати своїми
проєктами та завданнями, надаючи їм можливість додавати, видаляти та вибирати їх
у зручний спосіб. На рис. 3.5 показано функції обробника подій.
Компонент «Button.jsx» є функціональним компонентом React, який приймає
дитячі елементи children та інші властивості props (рис. 3.6). Він відображає кнопку
з текстом, переданим як дитячий елемент, та властивостями, переданими через
props. Кнопка має наступні характеристики стилю:
px-4 py-2: Встановлює відступи по горизонталі та вертикалі для кнопки.
text-xs md:text-base: Задає розмір тексту для кнопки, що залежить від розміру.
rounded-md: Закруглює кути кнопки за допомогою радіусу.
bg-stone-700: Встановлює колір фону кнопки.
text-stone-200: Встановлює колір тексту кнопки.
hover:bg-stone-600 hover:text-stone-100: Встановлює стиль кнопки.
39
Рисунок 3.5 – Функції обробника подій
Рисунок 3.6 – Компонент «Button.jsx»
Компонент «Input.jsx» може приймати додаткові властивості та пропагувати
посилання (ref) до свого дочірнього елемента, використовуючи forwardRef з
бібліотеки React (рис. 3.7).
Властивості, передані в Input, включають label (мітку для поля вводу), textarea
(логічне значення, що вказує, чи є вхідний елемент текстовою областю) та інші
властивості «(props)», які можуть бути передані напряму до вхідного елемента.
Компонент генерує поля вводу або текстові області, залежно від значення
textarea. Вони мають наступні характеристики стилю.
40
За допомогою компоненти «Input.jsx» створюються поля вводу та текстові
області веб-форм для введення даних в онлайн-сервісі, забезпечуючи при цьому
стандартизований та стильний вигляд.
Рисунок 3.7 – Компонент «Input.jsx»
Компонент «Modal.jsx» призначений для відображення модальних вікон. Він
використовує forwardRef для пропагування посилання (ref) до свого дочірнього
елемента, що дозволяє зовнішньому коду керувати відкриттям модального вікна
(рис. 3.8).
Компонент використовує useImperativeHandle, щоб визначити, як зовнішній
код може контролювати цей компонент через ref. У цьому випадку метод open()
дозволяє відкривати модальне вікно.
41
Рисунок 3.8 – Компонент «Modal.jsx»
Компонент створюється за допомогою createPortal, що дозволяє вбудовувати
дочірні елементи в інший DOM вузол, що розташований поза ієрархією компонентів
React. Це дозволяє модальному вікну відображатися навіть якщо батьківський
компонент має фіксовану позицію.
Структура модального вікна містить елемент <dialog>, що відповідає за
відображення самого вікна. Дочірній елемент, переданий в компонент через children,
відображається всередині модального вікна.
У модальному вікні є форма з кнопкою, яка призначена для закриття
модального вікна. Кнопка створюється за допомогою компонента Button, який був
імпортований з іншого файлу. Кнопка отримує текст для свого зображення з
властивості buttonCaption.
Компонент «Tasks.jsx» відображає список завдань (рис. 3.9) для певного
проєкту.
42
Рисунок 3.9 – Компонент «Tasks.jsx»
Компонент відображає заголовок «Tasks» з використанням елементу <h2>,
щоб вказати користувачеві, що ця секція містить завдання.
Використовується компонент NewTask, який імпортується з файлу NewTask.js,
для додавання нових завдань до списку.
Якщо відсутні завдання для відображення, виводиться повідомлення «This
project does not have any tasks yet».
Якщо є завдання для відображення, вони відображаються у вигляді списку.
Кожне завдання має текст та кнопку «Delete», яка дозволяє користувачеві видалити
це завдання.
У «Main.jsx» використовується бібліотека react-dom/client для рендерингу
кореневого компонента додатка (рис. 3.10). Імпортується React та ReactDOM з
бібліотеки React, а також компонент App з файлу App.jsx.
Імпортуються стилі з файлу index.css.
43
Рисунок 3.10 – Компонет «Main.jsx»
Використовується ReactDOM.createRoot для створення кореневого вузла
додатка, який визначений за допомогою document.getElementById('root').
Використовується .render() для рендерингу компонента App в цей кореневий
вузол.
Обгортається компонент App в <React.StrictMode>, щоб включити строгий
режим відображення, який допомагає виявляти потенційні проблеми онлайн-
сервісу.
3.4 Особливості тестування онлайн-сервісів
Особливості тестування онлайн-сервісів включають широкий спектр аспектів,
які варто враховувати для забезпечення якості та надійності програмного продукту.
Під час тестування онлайн-сервісу "Team Tracker" для управління IT-проєктами
розглянуто ключові аспекти тестування.
Функціональне тестування спрямоване на перевірку того, чи працює
програмний продукт відповідно до визначених вимог та очікувань користувачів.
Тестування можливостей створення, редагування та видалення проєктів, додавання
та оновлення задач, а також інших ключових функцій сервісу. Перевірка
інтерактивності та зручності використання інтерфейсу для користувачів з різним
рівнем експертизи [13].
Відмовостійке тестування спрямоване на виявлення поведінки системи в
умовах непередбачуваних ситуацій або в разі виникнення помилок. Відбувається
44
перевірка того, як сервіс поводиться в умовах, коли користувач вводить некоректні
дані або вчиняє дії, які вийшли за межі очікуваного. Також відбувається перевірка
можливості коректно відновлювати свою роботу після виникнення помилок або
аварійних ситуацій [13].
Тестування безпеки націлене на виявлення та усунення потенційних загроз
безпеці програмного продукту. Сюди входить тестування онлайн-сервісу на предмет
вразливостей, таких як XSS-атаки, аутентифікаційні або авторизаційні уразливості.
Перевірка прав доступу до даних користувачів та контроль доступу до функціоналу
онлайн-сервісу для запобігання несанкціонованому використанню [13].
Тестування продуктивності орієнтоване на визначення ефективності та
швидкодії онлайн-сервісу під навантаженням. Визначається те, як швидко він реагує
на запити користувачів під час одночасного використання багатьма користувачами.
Вимірюється час відповіді сервісу на різні види запитів та дій користувачів для
забезпечення оптимальної продуктивності [13].
Тестування сумісності спрямоване на перевірку роботи сервісу на різних
пристроях, операційних системах та веб-браузерах. Перевіряється те, як він працює
на різних типах пристроїв, таких як комп'ютери, планшети та мобільні телефони.
Визначається сумісності програмного продукту з різними веб-браузерами, такими
як: «Google Chrome», «Mozilla Firefox», «Safari», «Microsoft Edge» тощо.
Результати тестування сумісності в «Microsoft Edge» подано на рис. 3.11, а
результати тестування сумісності в «Google Chrome» – на рис. 3.12.
Використання автоматизованих тестів дозволяє ефективно та швидко
виконувати тестові сценарії, зменшуючи ризик помилок та витрат часу.
Розробляються скрипти або тестові сценарії.
Проводяться автоматизовані тести на регулярній основі для перевірки
стабільності та якості продукту.
Ці аспекти тестування є важливими для забезпечення якості та надійності
сервісу.
45
Рисунок 3.11 – Результати тестування сумісності в «Microsoft Edge»
Рисунок 3.12 – Результати тестування сумісності в «Google Chrome»
3.5 Тестування онлайн-сервісу «Team Tracker»
Для забезпечення надійності та ефективності роботи онлайн-сервісу "Team
Tracker" було проведено комплексне тестування на різних етапах розробки та перед
випуском в експлуатацію.
46
Під час модульного тестування онлайн-сервісу "Team Tracker" перевірялася
коректність роботи окремих функцій та можливостей системи згідно з її
функціональними вимогами. Основні етапи тестування включали наступне:
Створення проєкту, де користувач мав можливість створити новий проєкт,
вказавши його назву та опис. Після цього перевірялося, чи правильно створюється
новий проєкт та чи відображається він у списку проєктів користувача [10].
Після створення проєкту, користувач мав можливість додавати завдання до
нього. Під час тестування перевірялося, чи можна додавати, редагувати та видаляти
завдання, а також їхні описи, дати завершення тощо.
Окрім призначення відповідальних осіб, користувач може встановлювати
терміни виконання завдань. Під час тестування перевірялось, чи можливе
встановлення, зміна та відображення термінів виконання для кожної задачі.
Рисунок 3.13 – Вигляд модульного тесту
Результати модульного тестування показали, що всі основні функції онлайн-
сервісу працюють коректно та відповідають вимогам, встановленим у специфікації
вимог до програмного забезпечення. Виявлені дрібні проблеми були виправлені, а
сервіс готовий до подальшого тестування та впровадження.
Інтеграційне тестування було спрямоване на перевірку взаємодії між різними
компонентами онлайн-сервісу під час їх об'єднання в єдину функціональну
одиницю.
Перевірялася правильність передачі даних з користувацького інтерфейсу,
реалізованого з використанням React, JavaScript та TailwindCSS.
Тестування відбувалось на коректність збереження та отримання даних з бази
даних, яка могла бути використана для зберігання інформації про проєкти, завдання
47
та користувачів. Випробовувалась відповідність структури бази даних вимогам, а
також правильність виконання запитів до бази даних [11].
Інтеграційне тестування відіграло важливу роль у забезпеченні коректної
роботи онлайн-сервісу "Team Tracker". Цей вид тестування дозволив переконатися в
тому, що різні частини сервісу працюють разом належним чином, що є важливим
аспектом для забезпечення якості та надійності продукту.
Автоматизоване тестування використовувалаось для автоматизації
виконання тестових сценаріїв, що дозволило ефективно та швидко виконувати
тести, зменшуючи ризик помилок та витрат часу (рис. 3.14).
Рисунок 3.14 – Атоматизований модульний тест для тестування можливості
додавання завдань до проєкту
Також було розроблено скрипти, які можуть автоматично виконувати різні дії
та перевіряти функціональність програмного продукту "Team Tracker". Були
розроблені тестові скрипти для створення нового проєкту, додавання завдань до
проєкту та інші типові дії користувача.
48
Автоматизовані тести запускалися автоматично після кожного внесення змін у
код для перевірки роботи сервісу в різних умовах [10].
Автоматизоване тестування стало важливою складовою процесу розробки
програмного продукту "Team Tracker", яке допомагло забезпечити його якість та
надійність у швидкорозвиваючому середовищі програмування.
Висновки до розділу 3
Під час програмної реалізації було представлено практичну сторону створення
та тестування програмного продукту, включаючи розробку його функціональності,
інтерфейсу користувача та взаємодії з користувачем.
Визначено основні завдання розроблюваного проєкту. Розглянуто процес
створення різних компонентів, таких як: форми, кнопки, модальні вікна та інші, які
використовуються для побудови інтерфейсу користувача.
Продемонстровано різні способи рендерингу елементів, включаючи
використання методів для відображення компонентів у кореневому вузлі онлайн-
сервісу.
Розглянуто способи організації компонентів та структури сервісу для
забезпечення чистого та легкого для розуміння коду.
Проведено комплексне тестування онлайн-сервісу «Team Tracker» для
управління ІТ-проєктами. Модульне тестування показало, що основні функції
розробленого сервісу працюють коректно та відповідають вимогам. Інтеграційне
тестування підтвердило правильність взаємодії різних його компонентів між собою,
що є важливим аспектом для забезпечення його коректної роботи. Автоматизоване
тестування забезпечило ефективність та швидкість виконання тестів, допомогло
ефективно забезпечити якість та надійність онлайн-сервісу «Team Tracker». У
результаті тестування підтвердилися високі якість та надійність онлайн-сервісу
«Team Tracker» для управління IT-проєктами. Всі виявлені проблеми були успішно
виправлені.
49
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її виконання
спроєктовано та розроблено онлайн-сервіс «Team Tracker» для управління ІТ-
проєктами.
Для досягнення поставленої мети в роботі розв’язувалися наступні завдання:
досліджено предметну область;
виконано порівняльний аналіз існуючих онлайн-сервісів для управління
проєктами, а саме: «Trello», «Asana», «Microsoft To Do», «Jira Software»;
розроблено базу даних;
обрано програмно-технічні засоби для реалізації задачі дослідження;
розроблено онлайн-сервіс «Team Tracker» для управління ІТ-проєктами.
Онлайн-сервіс «Team Tracker» розроблений на мові JavaScript.
Створення та робота з базою даних відбувалась із застосуванням Couchbase
Server. Контроль проєкту та написання коду здійснювалось у середовищі VScode.
Обрані технології задовольняють всім функціональним і не функціональним
вимогам до такого типу програмного забезпечення.
Розроблений онлайн-сервіс має зручний, зрозумілий та приємний інтерфейс.
50
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Сервіс «Trello». URL: https://trello.com/home (дата звернення: 15.01.2024).
2. Сервіс «Asana». URL: https://asana.com (дата звернення: 15.01.2024).
3. Сервіс «Microsoft To Do». URL: https://to-do.office.com/tasks (дата звернення:
15.01.2024)
4. Сервіс «Jira Software». URL: https://www.atlassian.com/software/jira (дата
звернення: 15.01.2024)
5. Visual Studio Code. URL: https://uk.wikipedia.org/wiki/Visual_Studio_Code (дата
звернення: 21.01.2024).
6. React: Що таке React? Як почати вивчати Реакт? Основні навички URL:
https://cases.media/en/article/sho-take-react-js-yak-pochati-vivchati-reakt-navichki-
dlya-react-developer (дата звернення: 21.01.2024).
7. React URL: https://uk.wikipedia.org/wiki/React (дата звернення: 21.01.2024)
8. Проєктування бази даних. URL:
https://stud.com.ua/62415/menedzhment/proektuvannya_bazi_danih (дата
звернення: 24.01.2024).
9. MySQL. URL: https://uk.wikipedia.org/wiki/MySQL (дата звернення:
09.03.2024).
10. Все що потрібно знати про Node.js: особливості, характеристики, область
застосування URL: https://wezom.com.ua/ua/blog/vse-chto-nuzhno-znat-o-nodejs
(дата звернення: 09.04.2024)
11. Теоретичні відомості мови програмування JavaScript. URL:
https://uk.wikipedia.org/wiki/JavaScript (дата звернення: 03.05.2024).
12. Модульне тестування – QALight. URL: https://qalight.ua/baza-znaniy/modulne-
testuvannya (дата звернення: 12.05.2024).
13. Що таке тестування програмного забезпечення: види, етапи, інструменти.
URL: https://university.sigma.software/what-is-software-testing (дата звернення:
13.05.2024).
51
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2024 р.
ОНЛАЙН-СЕРВІС «TEAM TRACKER» ДЛЯ УПРАВЛІННЯ ІТ-ПРОЄКТАМИ
Специфікація
482.ЧДТУ. 42032-01
Листів 2
Розробник ____________________ Лук’яненко О.В.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2024
52
482.ЧДТУ. 42032-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 42032-01 12 01 Текст програми
482.ЧДТУ. 42032-01 34 01 Інструкція користувача
53
ДОДАТОК Б
ОНЛАЙН-СЕРВІС «TEAM TRACKER» ДЛЯ УПРАВЛІННЯ ІТ-ПРОЄКТАМИ
Текст програми
482.ЧДТУ. 42032-01 12 01
Листів 10
Розробник _____________ Лук’яненко О.В.
Черкаси – 2024
54
Фрагмент програми
App.jsx
import { useState } from "react";
import NewProject from "./components/NewProject";
import NoProjectSelected from "./components/NoProjectSelected";
import ProjectSidebar from "./components/ProgectSidebar";
import SelectedProject from "./components/SelectedProject";
function App() {
const [projectState, setProjectState] = useState({
selectedProjectId: undefined,
projects: [],
tasks: [],
});
function handleAddTask(text) {
setProjectState((prevState) => {
const taskId = Math.random();
const newTask = {
text: text,
projectId: prevState.selectedProjectId,
id: taskId,
};
return {
...prevState,
tasks: [newTask, ...prevState.tasks],
};
});
}
function handleDeleteTask(id) {
setProjectState((prevState) => {
return {
...prevState,
tasks: prevState.tasks.filter((task) => task.id !== id),
};
});
}
function handleSelectProject(id) {
setProjectState((prevState) => {
return { ...prevState, selectedProjectId: id };
});
55
}
function handleStartAddingProject() {
setProjectState((prevState) => {
return { ...prevState, selectedProjectId: null };
});
}
function handleCancelAddProject() {
setProjectState((prevState) => {
return { ...prevState, selectedProjectId: undefined };
});
}
function handleAddProject(projectData) {
setProjectState((prevState) => {
const newProject = {
...projectData,
id: Math.random(),
};
return {
...prevState,
selectedProjectId: undefined,
projects: [...prevState.projects, newProject],
};
});
}
function handleDeleteProject() {
setProjectState((prevState) => {
return {
...prevState,
selectedProjectId: undefined,
projects: prevState.projects.filter(
(project) => project.id !== prevState.selectedProjectId
),
};
});
}
const selectedProject = projectState.projects.find(
(project) => project.id === projectState.selectedProjectId
);
56
let content = (
<SelectedProject
project={selectedProject}
onDelete={handleDeleteProject}
onAddTask={handleAddTask}
onDeleteTask={handleDeleteTask}
tasks={projectState.tasks}
/>
);
if (projectState.selectedProjectId === null) {
content = (
<NewProject onAdd={handleAddProject} onCancel={handleCancelAddProject}
/>
);
} else if (projectState.selectedProjectId === undefined) {
content = (
<NoProjectSelected onStartAddProject={handleStartAddingProject} />
);
}
return (
<main className="h-screen my-8 flex gap-8">
<ProjectSidebar
onStartAddProject={handleStartAddingProject}
projects={projectState.projects}
onSelectProject={handleSelectProject}
selectedProjectId={projectState.selectedProjectId}
/>
{content}
</main>
);
}
export default App;
Main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
57
<React.StrictMode>
<App />
</React.StrictMode>,
)
NewTask.jsx
import { useState } from "react";
export default function NewTask({ onAdd }) {
const [enteredTask, setEnteredTask] = useState("");
function handleChange(event) {
setEnteredTask(event.target.value);
}
function handleClick() {
if (enteredTask.trim() === "") {
return;
}
onAdd(enteredTask);
setEnteredTask("");
}
return (
<div className="flex items-center gap-4">
<input
type="text"
className="w-64 px-2 py-2 rounded-sm bg-stone-200"
onChange={handleChange}
value={enteredTask}
/>
<button
className="text-stone-700 hover:text-stone-950"
onClick={handleClick}
>
Add Task
</button>
</div>
);
}
NewProject.jsx
import { useState } from "react";
58
export default function NewTask({ onAdd }) {
const [enteredTask, setEnteredTask] = useState("");
function handleChange(event) {
setEnteredTask(event.target.value);
}
function handleClick() {
if (enteredTask.trim() === "") {
return;
}
onAdd(enteredTask);
setEnteredTask("");
}
return (
<div className="flex items-center gap-4">
<input
type="text"
className="w-64 px-2 py-2 rounded-sm bg-stone-200"
onChange={handleChange}
value={enteredTask}
/>
<button
className="text-stone-700 hover:text-stone-950"
onClick={handleClick}
>
Add Task
</button>
</div>
);
}
Button.jsx
export default function Button({ children, ...props }) {
return (
<button
className="px-4 py-2 text-xs md:text-base rounded-md bg-stone-700 text-
stone-200 hover:bg-stone-600 hover:text-stone-100"
{...props}
>
{children}
</button>
);
}
59
Input.jsx
import { forwardRef } from "react";
const Input = forwardRef(function Input({ label, textarea, ...props }, ref) {
const classes =
"w-full p-1 border-b-2 rounded-sm border-stone-300 bg-stone-200 text-
stone-600 focus:outline-none focus:border-stone-600";
return (
<p className="flex flex-col gap-1 my-4">
<label className="text-sm font-bold uppercase text-stone-500">
{label}
</label>
{textarea ? (
<textarea ref={ref} className={classes} {...props} />
) : (
<input ref={ref} className={classes} {...props} />
)}
</p>
);
});
export default Input;
Modal.jsx
import { forwardRef, useImperativeHandle, useRef } from "react";
import { createPortal } from "react-dom";
import Button from "./Button";
const Modal = forwardRef(function Modal({ children, buttonCaption }, ref) {
const dialog = useRef();
useImperativeHandle(ref, () => {
return {
open() {
dialog.current.showModal();
},
};
});
return createPortal(
<dialog
ref={dialog}
60
className="backdrop:bg-stone-900/90 p-4 rounded-md shadow-md"
>
{children}
<form method="dialog" className="mt-4 text-right ">
<Button>{buttonCaption}</Button>
</form>
</dialog>,
document.getElementById("modal-root")
);
});
export default Modal;
NoProjectSelected.jsx
import noProjectImage from "../assets/no-projects.png";
import Button from "./Button";
export default function NoProjectSelected({ onStartAddProject }) {
return (
<div className="mt-24 text-center w-2/3">
<img
src={noProjectImage}
alt="An empty task list"
className="w-16 h-16 object-contain mx-auto"
/>
<h2 className="text-xl font-bold text-stone-500 my-4">
No Project Selected
</h2>
<p className="text-stone-400 mb-4">
Select a project or get started with a new one
</p>
<p className="mt-8">
<Button onClick={onStartAddProject}>Create new project</Button>
</p>
</div>
);
}
ProjectSidebar.jsx
import Button from "./Button";
export default function ProjectSidebar({
onStartAddProject,
projects,
onSelectProject,
selectedProjectId,
}) {
61
return (
<aside className="w-1/3 px-8 py-16 bg-stone-900 text-stone-50 md:w-72
rounded-r-xl">
<h2 className="mb-8 fond-bold uppercase md:text-xl text-stone-200">
Your Projects
</h2>
<div>
<Button onClick={onStartAddProject}>+ Add Project </Button>
</div>
<ul className="mt-8">
{projects.map((project) => {
let cssClasses =
"w-full text-left px-2 py-1 rounded-sm my-1 hover:text-stone-200
hover:bg-stone-800";
if (project.id === selectedProjectId) {
cssClasses += " bg-stone-800 text-stone-200";
} else {
cssClasses += " text-stone-400";
}
return (
<li key={project.id}>
<button
className={cssClasses}
onClick={() => onSelectProject(project.id)}
>
{project.title}
</button>
</li>
);
})}
</ul>
</aside>
);
}
Task.jsx
import NewTask from "./NewTask";
export default function Tasks({ tasks, onAdd, onDelete }) {
return (
<section>
<h2 className="text-2xl font-bold text-stone-700 mb-4">Tasks</h2>
<NewTask onAdd={onAdd} />
{tasks.length === 0 && (
<p className="text-stone-800 my-4">
62
This project does not have any tasks yet.
</p>
)}
{tasks.length > 0 && (
<ul className="p-4 mt-8 rounded-md bg-stone-100">
{tasks.map((task) => (
<li key={task.id} className="flex justify-between my-4">
<span>{task.text}</span>
<button
className="text-stone-700 hover:text-red-500"
onClick={() => onDelete(task.id)}
>
Delete
</button>
</li>
))}
</ul>
)}
</section>
);
}
index.jsx
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Project Manager</title>
</head>
<body class="bg-stone-50">
<div id="modal-root"></div>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
63
ДОДАТОК В
ОНЛАЙН-СЕРВІС «TEAM TRACKER» ДЛЯ УПРАВЛІННЯ ІТ-ПРОЄКТАМИ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 42032-01 34 01
Листів 3
Розробник _____________ Лук’яненко О.В.
Черкаси – 2024
64
Під час першого входу користувач буде бачити головну сторінку і вікно
авторизації входу, в якому є поля для вводу електроної пошти і паролю. Вікно входу
представлено на рис. В.1– В.2.
Рисунок В.1 – Вікно входу
Рисунок В.2 – Головна сторінка
Після входу користувач зможе користуватись головною сторінкою, а саме:
створити проєкт і завдання, де є поля для вводу назви проєкту, завдання і дедлайну
(рис. В.3–В.4).
65
Рисунок В.3 – Сторінка створення проєкту
Рисунок В.4 – Сторінка створення завдання