ЗВІТ З ЛАБОРАТОРНОЇ РОБОТИ № 1

Тема: Вибір предметної області. Аналіз, моделювання та розроблення адаптивного web-застосунку

Виконав: Вересоцький Арсеній Група: ІК-33

1 АНАЛІЗ ТА МОДЕЛЮВАННЯ СИСТЕМИ

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

У сучасному світі концепція “Sharing Economy” (економіка спільного споживання) набуває стрімкої популярності. Багато побутових предметів (дрилі, намети, садовий інвентар) купуються для разового використання, що призводить до зайвих фінансових витрат та захаращення житлового простору. Платформа “Library of Things” дозволяє користувачам орендувати або безкоштовно позичати речі у межах своєї громади. Це не лише економить кошти, а й сприяє екологічному споживанню, зменшуючи обсяги виробництва та відходів.

1.2 Мета роботи

Метою проєкту є створення цифрової екосистеми для розвитку економіки спільного споживання, яка дозволяє членам громади ефективно та безпечно обмінюватися побутовими речами. Платформа спрямована на зменшення надмірного споживання, заощадження фінансових ресурсів користувачів та популяризацію екологічного способу життя шляхом надання зручного інструментарію для оренди, позичання та монетизації предметів, що рідко використовуються.

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

Сформулювати концепцію та бізнес-логіку системи.
Визначити функціональні та нефункціональні вимоги.
Побудувати Use-case та ER-діаграми.
Розробити адаптивну верстку основних компонентів (Header, Main, Footer).
Реалізувати навігаційне меню (“бургер-меню”) для мобільних пристроїв.
Налаштувати систему контролю версій Git та репозиторій на GitHub.

1.4 Об’єкт та предмет роботи

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

1.5 Бізнес-логіка роботи

Система працює за наступними правилами:

Користувач може бути як власником речі, так і орендарем.
Предмет стає доступним для оренди після перевірки модератором.
Система автоматично перевіряє доступність речі на обрані дати.
Якщо сума застави перевищує ліміт, система вимагає верифікації профілю.
Замовлення автоматично скасовується, якщо власник не підтвердив запит протягом 24 годин.

1.6 Функціональні вимоги

FR-1: Система повинна дозволяти користувачу створювати профіль.
FR-2: Система повинна надавати можливість додавати опис речі, фото та категорію.
FR-3: Система повинна забезпечувати пошук речей за фільтрами та категоріями.
FR-4: Система повинна реалізовувати процес бронювання на конкретні дати.

1.7 Нефункціональні вимоги

NFR-1: Адаптивність (коректне відображення на екранах від 320px до 1920px).
NFR-2: Продуктивність (час завантаження сторінки не більше 2 секунд).
NFR-3: Доступність (відповідність стандартам WCAG для людей з обмеженими можливостями).
NFR-4: Безпека (шифрування персональних даних користувачів).

1.8 Use-case діаграма

Діаграма відображає основні сценарії взаємодії користувачів та адміністратора з системою.
Скрін 1

1.9 ER-діаграма даних

Логічна структура бази даних, що описує взаємозв’язки між користувачами, предметами та процесом оренди.
Скрін 2

2 РЕАЛІЗАЦІЯ ІНТЕРФЕЙСУ ТА ФАЙЛОВА СТРУКТУРА

2.1 Файлова структура проєкту

/library-of-things
├── /assets # Зображення та іконки
├── /css # Стилі (style.css)
├── /html # Додаткові сторінки
├── /js # Скрипти (script.js)
├── index.html # Головна сторінка
└── README.md # Опис проєкту

2.2 Фрагменти коду

Адаптивна сітка карток (CSS Grid): Скрін 3 Скрін 4

.grid-gallery {
    display: grid;
    /* 4 колонки для десктопу */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 75rem) { /* 1200px */
    .grid-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid-gallery {
        grid-template-columns: 1fr;
    }
}

Реалізація Header з бургер-меню (HTML/JS): Скрін 5

<header class="header">
    <div class="container header-container">
        <div class="logo">
            <a href="index.html">ЛоТ</a>
        </div>
        <nav class="nav">
            <ul class="nav-links">
                <li><a href="#">Головна</a></li>
                <li><a href="#">Каталог речей</a></li>
                <li><a href="#">Правила</a></li>
                <li><a href="#">Контакти</a></li>
            </ul>
            <div class="burger" aria-label="Відкрити меню" role="button">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>
    </div>
</header>

document.addEventListener('DOMContentLoaded', () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    
    if (burger && nav) {
        burger.addEventListener('click', () => {
            nav.classList.toggle('nav-active');
            burger.classList.toggle('toggle');
        });
    }
});

2.3 Робота з Git

Репозиторій організовано за моделлю Git Flow:

main — стабільна версія.
develop — гілка розробки.
feature/layout, feature/navigation, feature/content — тематичні гілки.

Приклади комітів:

[main] d6bac81 Ініціалізація репозиторію
[feature/layout] 224c524 Створено базову структуру проєкту та загальні стилі
[feature/navigation] 8644e35 Додано навігацію та адаптивне бургер-меню
[feature/content] 6d41cda Додано контент: сітку карток, футер та адаптивність

2.4 Посилання на проєкт

GitHub Репозиторій: https://github.com/senyasaysmeow/library-of-things
GitHub Pages (Живий сайт): https://senyasaysmeow.github.io/library-of-things/

3 ОСНОВИ РОБОТИ З NODE.JS ТА EXPRESS.JS (ЧАСТИНА 2)

3.1 Встановлення та ініціалізація проєкту

Було створено директорію проєкту lab1-rest-api та ініціалізовано package.json. Після цього встановлено фреймворк express.

mkdir lab1-rest-api
cd lab1-rest-api
npm init -y
npm install express

Скрін 6

3.2 Розробка сервера та REST API

Для виконання завдань 2, 3, 4 та 5 було створено файл server.js, який містить базовий маршрут та повноцінний CRUD (Create, Read, Update, Delete) для сутності “Студенти”.

Код файлу server.js:

const express = require("express");
const app = express();
const PORT = 3000;

// Middleware для обробки JSON-тіла запитів
app.use(express.json());

// База даних в пам'яті для тестування (Завдання 3, 4, 5)
let students = [
    { id: 1, name: "Вересоцький Арсеній", group: "ІК-33" },
    { id: 2, name: "Іван Іванов", group: "ІК-33" }
];

// Завдання 2: Базовий HTTP-сервер
app.get("/", (req, res) => {
    res.send("Hello from Node.js server");
});

// Завдання 3: GET /students - Отримання списку студентів
app.get("/students", (req, res) => {
    res.json(students);
});

// Завдання 4: POST /students - Додавання нового студента
app.post("/students", (req, res) => {
    const { id, name, group } = req.body;
    
    // Перевірка на наявність необхідних даних
    if (!id || !name || !group) {
        return res.status(400).json({ error: "Необхідно вказати id, name та group" });
    }

    const newStudent = { id, name, group };
    students.push(newStudent);
    res.status(201).json({ message: "Студента додано", student: newStudent });
});

// Завдання 5.1: PUT /students/:id - Оновлення даних студента
app.put("/students/:id", (req, res) => {
    const studentId = parseInt(req.params.id);
    const { name, group } = req.body;
    
    const studentIndex = students.findIndex(s => s.id === studentId);
    
    if (studentIndex !== -1) {
        students[studentIndex] = { 
            id: studentId, 
            name: name || students[studentIndex].name, 
            group: group || students[studentIndex].group 
        };
        res.json({ message: "Дані оновлено", student: students[studentIndex] });
    } else {
        res.status(404).json({ error: "Студента не знайдено" });
    }
});

// Завдання 5.2: DELETE /students/:id - Видалення студента
app.delete("/students/:id", (req, res) => {
    const studentId = parseInt(req.params.id);
    const initialLength = students.length;
    
    students = students.filter(s => s.id !== studentId);
    
    if (students.length < initialLength) {
        res.json({ message: "Студента успішно видалено" });
    } else {
        res.status(404).json({ error: "Студента не знайдено" });
    }
});

// Запуск сервера
app.listen(PORT, () => {
    console.log(`Server started on port ${PORT}`);
});

3.3 Результати тестування API

Сервер було запущено командою node server.js. Нижче наведено результати тестування маршрутів (за допомогою Postman / браузера).

Тест Завдання 2 (GET /):

Скрін 7

Тест Завдання 3 (GET /students):

Скрін 8

Тест Завдання 4 (POST /students):

Скрін 9

Тест Завдання 5 (PUT та DELETE /students/:id):

Скрін 10

4 ВІДПОВІДІ НА КОНТРОЛЬНІ ПИТАННЯ

Що таке HTTP-протокол і для чого він використовується.

HTTP (HyperText Transfer Protocol) — це протокол передачі даних, який використовується для обміну інформацією між клієнтом (наприклад, браузером) та сервером у мережі Інтернет.
Архітектура клієнт-сервер.

Це обчислювальна архітектура, де завдання розподілені між постачальниками ресурсів або послуг (серверами) та замовниками цих послуг (клієнтами).
Що таке HTTP-сервер?

Це програмне забезпечення, яке приймає HTTP-запити від клієнтів, обробляє їх та повертає відповідні HTTP-відповіді (HTML-сторінки, файли, JSON-дані тощо).
Що таке платформа Node.js та її призначення?

Node.js — це середовище виконання коду JavaScript на стороні сервера, побудоване на рушії V8 (від Google Chrome). Призначене для створення масштабованих та швидких мережевих застосунків.
Які переваги Node.js?

Асинхронна (неблокуюча) модель вводу-виводу, висока продуктивність, використання єдиної мови (JavaScript) для фронтенду і бекенду, величезна екосистема пакетів (npm).
Для чого використовується Express.js?

Express.js — це мінімалістичний вебфреймворк для Node.js, який значно спрощує процес створення вебсерверів, маршрутизації (роутингу) та обробки HTTP-запитів.
Що таке REST API?

REST (Representational State Transfer) — це архітектурний стиль для розробки вебсервісів, а REST API — це програмний інтерфейс, побудований за принципами цього стилю для взаємодії між системами.
Які основні принципи REST?

Клієнт-серверна архітектура, відсутність стану (Stateless — сервер не зберігає стан клієнта між запитами), кешованість, єдиний інтерфейс (використання стандартних HTTP методів) та багаторівнева система.
Які існують HTTP-методи?

Основні: GET (отримання), POST (створення), PUT/PATCH (оновлення), DELETE (видалення). Також існують HEAD, OPTIONS та інші.
Який метод використовується для створення ресурсу?

Метод POST.
У якому форматі зазвичай передаються дані в REST API?

Найчастіше використовується формат JSON (JavaScript Object Notation), рідше — XML.
Які інструменти використовуються для тестування API?

Postman, Insomnia, Thunder Client (розширення VS Code), Swagger або командні утиліти на кшталт curl.

ВИСНОВКИ

У ході виконання лабораторної роботи було проаналізовано предметну область “Економіка спільного споживання” та спроектовано веб-застосунок “Library of Things”. Було сформульовано бізнес-логіку, вимоги до системи та побудовано моделі даних. В результаті розроблено адаптивний інтерфейс, який забезпечує зручне користування платформою на будь-яких пристроях завдяки використанню Flexbox, Grid та Media Queries. Отримано навички професійної роботи з Git та організації файлової структури веб-проєктів.

У другій частині було успішно розгорнуто серверне середовище Node.js. За допомогою фреймворку Express.js було розроблено базовий HTTP-сервер та імплементовано повноцінне REST API для сутності “Студенти”. На практиці закріплено розуміння основних HTTP-методів (GET, POST, PUT, DELETE) та принципи клієнт-серверної взаємодії, що є фундаментальним кроком до створення повноцінних Fullstack-додатків.