ЗВІТИ З ЛАБОРАТОРНИХ РОБІТ

1. Тема, мета, посилання

1.1 Тема

«Вибір предметної області. Аналіз, моделювання та розроблення адаптивного web-застосунку (Helpdesk / Ticket System)».

1.2 Мета

Виконати вибір і аналіз предметної області, визначити акторів і бізнес-логіку, сформулювати функціональні та нефункціональні вимоги, побудувати UML-діаграми (Use-case, компонентну) та ER-модель даних; реалізувати адаптивний інтерфейс web-застосунку (header/main/footer, навігація, бургер-меню, адаптивна верстка) та підготувати матеріали для звіту.

1.3 Посилання

• Репозиторій власного веб-застосунку (GitHub): посилання
• Власний веб-застосунок (Жива сторінка): посилання
• Репозиторій звітного HTML-документа (GitHub): посилання
• Звітний HTML-документ (Жива сторінка): посилання

2. Аналіз предметної області

2.1 Актуальність теми

У багатьох командах та організаціях звернення користувачів надходять через різні канали (месенджери, електронна пошта, усні запити), через що виникають типові проблеми: заявки губляться, немає єдиного переліку звернень, складно контролювати статус виконання, неможливо прозоро оцінити навантаження на підтримку.
Helpdesk-система (ticket system) вирішує це, централізуючи облік звернень, підтримуючи категоризацію, коментарі та управління статусами. Адаптивний інтерфейс є критично важливим, оскільки користувачі часто створюють або переглядають заявки зі смартфонів.

2.2 Об’єкт і предмет

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

2.3 Практичне значення

Результатом роботи є прототип helpdesk-вебзастосунку з адаптивним інтерфейсом та сформованою моделлю предметної області. Отриманий результат може використовуватися як основа для подальшої реалізації backend-частини (API, база даних, авторизація, ролі) та розширення функціональності (панель адміністратора, аналітика, нотифікації).

2.4 Завдання роботи

1. Обрати предметну область та описати проблематику.
2. Визначити акторів системи та межі взаємодії.
3. Сформувати бізнес-логіку роботи системи.
4. Сформувати перелік функціональних вимог (FR).
5. Сформувати перелік нефункціональних вимог (NFR).
6. Побудувати Use-case діаграму та описати сценарії використання.
7. Побудувати ER-діаграму даних (логічну модель).
8. Побудувати компонентну діаграму.
9. Реалізувати адаптивний інтерфейс (header/main/footer, адаптивне меню, адаптивна сітка контенту).
10. Підготувати скріншоти та фрагменти коду для звіту.

3. Моделювання системи

3.1 Актори системи

• User — створює заявки, переглядає список/деталі, додає коментарі.
• Support Agent — обробляє заявки: переглядає, коментує, змінює статуси.
• Admin — керує довідниками (категоріями), правилами доступу, налаштуваннями (план на наступні етапи).

3.2 Бізнес-логіка

1) Користувач створює заявку з темою, описом та категорією.
2) Після створення заявка отримує статус Open.
3) Агент підтримки бере заявку в роботу та переводить у In Progress.
4) У межах заявки сторони можуть залишати коментарі для уточнення деталей.
5) Після вирішення заявка переводиться у Resolved, а після підтвердження/завершення — у Closed.
6) Зміни статусу фіксуються в історії статусів (StatusHistory) з часом та ініціатором зміни.

3.3 Функціональні вимоги (FR)

3.4 Нефункціональні вимоги (NFR)

3.5 UML: Use-case діаграма

Рис. 1 – Use-case діаграма вебзастосунку Helpdesk.

3.6 UML: Таблиця Use-case

3.7 ER-модель даних

Рис. 2 – ER-діаграма (логічна модель даних).

Пояснення сутностей:

• User — користувач системи з роллю (User/Agent/Admin).
• Ticket — заявка з темою, описом, статусом та датами.
• Category — довідник категорій.
• Comment — коментарі всередині заявки.
• StatusHistory — історія зміни статусів.

3.8 Діаграма компонентів

Рис. 3 – Компонентна діаграма клієнтської частини та планованих інтеграцій.

4. Реалізація адаптивного інтерфейсу

4.1 Загальна структура сторінок

Інтерфейс побудовано на базових структурних блоках: Header, Main, Footer. Навігація доступна з будь-якої сторінки, а ключові сценарії винесені на окремі маршрути.

4.2 Фрагмент коду: адаптивне бургер-меню (Header)

Нижче наведено фрагмент реалізації кнопки бургер-меню. На екранах md і більше елемент приховано (md:hidden), а на mobile — відображається. Додано cursor-pointer, hover:*, transition та aria-атрибути.

<button
  type="button"
  onClick={() => setOpen((v) => !v)}
  className="md:hidden cursor-pointer inline-flex h-10 w-10 items-center justify-center rounded-xl border hover:bg-neutral-50 transition"
  aria-label="Відкрити меню"
  aria-expanded={open}
>
  <span className="sr-only">Menu</span>
  {/* Іконка з трьох ліній з анімацією (скорочено для звіту) */}
</button>

4.3 Фрагмент коду: адаптивна hero-секція (Головна сторінка)

<section className="rounded-2xl border bg-white p-6 shadow-sm">
  <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
    <div className="max-w-2xl">
      <h1 className="mt-4 text-3xl font-semibold leading-tight md:text-4xl">
        Підтримка без хаосу: заявки, статуси, категорії — в одному місці
      </h1>
      <div className="mt-6 flex flex-wrap gap-3">
        <Link href="/tickets/new" className="rounded-xl bg-neutral-900 px-4 py-2 text-sm font-medium text-white">
          Створити заявку
        </Link>
        <Link href="/tickets" className="rounded-xl border px-4 py-2 text-sm font-medium">
          Перейти до заявок
        </Link>
      </div>
    </div>
    <div className="w-full md:w-90">
      {/* блок з коротким переліком можливостей */}
    </div>
  </div>
</section>

4.4 Сторінки-заглушки для навігації

Щоб переходи з header/footer не приводили до помилок 404, додано сторінки-заглушки: /categories, /profile, /login, /docs, /about, /privacy.

export default function AboutPage() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-10">
      <h1 className="text-2xl font-semibold">Про сервіс</h1>
      <p className="mt-2 text-neutral-600">
        Заглушка сторінки. Контент буде розширено на наступних етапах.
      </p>
      <Link href="/" className="mt-6 inline-flex rounded-xl border px-3 py-2 text-sm font-medium">
        На головну
      </Link>
    </div>
  );
}

5. Скріншоти результатів

Рис. 4 – Головна сторінка (desktop).

Рис. 5 – Головна сторінка (mobile).

Рис. 6 – Відкрите бургер-меню (mobile).

Рис. 7 – Сторінка зі списком заявок /tickets.

Рис. 8 – Форма створення заявки /tickets/new.

Рис. 9 – Приклад сторінки-заглушки (інформаційна сторінка).

6. Висновки

У межах лабораторної роботи виконано вибір предметної області та сформовано модель майбутньої helpdesk-системи. Обґрунтовано актуальність теми, визначено мету, завдання, об’єкт і предмет, описано бізнес-логіку процесу обробки звернень. Сформовано функціональні та нефункціональні вимоги, побудовано Use-case, ER та компонентну діаграми. Реалізовано адаптивний інтерфейс вебзастосунку з базовими структурними компонентами (header/main/footer), бургер-меню на мобільних екранах та навігацією без помилок 404. Отриманий результат є основою для подальшого розвитку (API, база даних, ролі, адміністрування).

7. Перелік використаних джерел

1. Документація Next.js (App Router) та React.
2. Документація Tailwind CSS (breakpoints, utility-класи).
3. Conventional Commits (офіційна специфікація).
4. W3Schools: HTML та CSS довідка.