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

ЧАСТИНА 1

Тема, Мета, Місце розташування

Тема: ВИБІР ПРЕДМЕТНОЇ ОБЛАСТІ. АНАЛІЗ,МОДЕЛЮВАННЯ ТА РОЗРОБЛЕННЯ АДАПТИВНОГО WEB-ЗАСТОСУНКУ

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

Місце розташування :

• Репозиторій веб-застосунку (GitHub): https://github.com/marynabndr/Global-Talk

• Веб-застосунок (Жива сторінка): https://marynabndr.github.io/Global-Talk/

• Репозиторій звітного HTML-документа (GitHub): https://github.com/marynabndr/IS-32_appRECORD-BondarMaryna-FIOT-2026

• Звітний HTML-документ (Жива сторінка): https://marynabndr.github.io/IS-32_appRECORD-BondarMaryna-FIOT-2026/

Тематика веб-застосунку: школа іноземних мов GlobalTalk

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

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

Мета та завдання роботи

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

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

• Проаналізувати бізнес-процеси мовної школи та визначити ключові правила системи.

• Сформулювати чіткі функціональні та нефункціональні вимоги до продукту.

• Розробити структуру даних та змоделювати зв’язки за допомогою ER-діаграми.

• Описати функціональні можливості системи через Use-case діаграму.

• Реалізувати адаптивну верстку основних блоків сторінки (header, main, footer).

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

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

Предмет роботи: методи та засоби створення адаптивних веб-інтерфейсів для інформаційної системи школи іноземних мов.

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

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

• Користувач переглядає доступні мовні курси та рівні підготовки.

• Якщо клієнт обирає курс, він може залишити заявку через форму.

• Заявка вважається валідною лише за наявності коректного номера телефону.

• Школа надає знижку 10% при реєстрації на пробне заняття через сайт.

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

• Відображення списку мовних курсів та цін.

• Можливість перегляду викладацького складу.

• Форма зворотного зв’язку для запису на пробний урок.

• Навігація по розділах сторінки (Про нас, Курси, Контакти).

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

• Адаптивність: коректне відображення на екранах від 320px до 1920px.

• Швидкість: час первинного завантаження сторінки до 2 секунд.

• Зручність (Usability): наявність “бургер-меню” для мобільних пристроїв.

• Технологічність: використання семантичної верстки HTML5.

Use-case діаграма

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

• Гість - неавторизований користувач, який шукає інформацію.

• Клієнт - особа, яка вже зацікавлена та взаємодіє з формами зворотного зв’язку.

• Адміністратор - внутрішній користувач, який опрацьовує результати роботи сайту.

ER-діаграма

Зв’язки між сутностями Викладач - Курс (Зв’язок 1:N): один викладач може закріплюватися за кількома рівнями або курсами однієї мови. Це дозволяє користувачу на сторінці бачити, хто саме буде проводити навчання на обраному рівні.

Заявка - Курс (Зв’язок N:1): багато потенційних клієнтів (заявок) можуть стосуватися одного конкретного курсу. Це реалізується через зовнішній ключ (Foreign Key) у сутності «Заявка», що вказує на ID_курсу.

ЧАСТИНА 2

Тема, Мета

Тема: ВСТАНОВЛЕННЯ ТА НАЛАШТУВАННЯ СЕРЕДОВИЩА NODE.JS ОСНОВИ РОБОТИ З EXPRESS.JS

Мета: Ознайомитися з принципами роботи HTTP-серверів. Вивчити основи створення веб-серверів на Node.js. Ознайомитися з архітектурою REST API. Навчитися створювати маршрути (routes) для обробки HTTP-запитів.

Завдання

Завдання 1. Створити Node.js проєкт та встановити бібліотеку Express.js.

• Ініціалізація проєкту: npm init -y

• Встановлення Express: npm install express

• Створення головного файлу server.js

Завдання 2. Створити HTTP-сервер, який повертає повідомлення: Hello from Node.js server

Налаштовано базовий сервер, який прослуховує порт 3000 та відповідає на кореневий GET-запит.

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

app.get('/', (req, res) => {
    res.send('Hello from Node.js server');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Завдання 3. Створити маршрут : GET /students який повертає список студентів у форматі JSON.

let students = [
    { id: 1, name: "Ivan Ivanov", group: "IC-11" },
    { id: 2, name: "Maria Petrenko", group: "IC-12" }
];

app.get('/students', (req, res) => {
    res.json(students);
});

Завдання 4. Створити маршрут : POST /students для додавання нового студента. Поля:

• id

• name

• group

  app.use(express.json());
  app.post('/students', (req, res) => {
     const newStudent = {
         id: req.body.id,
         name: req.body.name,
         group: req.body.group
     };
     students.push(newStudent);
     res.status(201).json(newStudent);
  });
  

Завдання 5. Створити маршрути:

• PUT /students/:id
• DELETE /students/:id

Додано маршрути для редагування існуючих записів та їх видалення за ідентифікатором (id). Використовується динамічний параметр :id для пошуку конкретного студента в масиві.

app.put('/students/:id', (req, res) => {
    const id = parseInt(req.params.id);
    const index = students.findIndex(s => s.id === id);
    
    if (index !== -1) {
        students[index] = { id, ...req.body };
        res.json(students[index]);
    } else {
        res.status(404).send("Student not found");
    }
});

app.delete('/students/:id', (req, res) => {
    const id = parseInt(req.params.id);
    students = students.filter(s => s.id !== id);
    res.send(`Student with id ${id} deleted`);
});

Висновки

У ході виконання першої лабораторної роботи було проведено аналіз предметної області, що дозволило виявити ключові потреби потенційних клієнтів школи іноземних мов та сформулювати стратегію їх задоволення через веб-інтерфейс. На етапі аналізу було обґрунтовано актуальність розробки, визначено об’єкт і предмет дослідження, а також деталізовано завдання, що стоять перед інформаційною системою. Побудовані моделі, зокрема діаграма варіантів використання (Use-case), дали змогу чітко візуалізувати ролі акторів та їхні сценарії взаємодії з сайтом. Спроектована ER-діаграма визначила логічну структуру даних, необхідну для коректного збереження та відображення інформації про навчальні програми, викладацький склад та реєстраційні дані користувачів. Окрім моделювання бізнес-процесів, було сформовано перелік функціональних вимог, що описують конкретні дії системи, та нефункціональних вимог, які висувають критерії до швидкодії, безпеки та кросбраузерності. Обрана структура даних у поєднанні з продуманими сценаріями використання створює надійний фундамент для переходу до етапу верстки, забезпечуючи реалізацію головної мети — створення конверсійного, адаптивного та зручного веб-застосунку, здатного ефективно працювати на будь-яких пристроях користувачів.

В результаті виконання роботи було створено повноцінний REST API сервіс, що підтримує основні операції з даними (CRUD):

• Create: Додавання (POST)

• Read: Отримання списку (GET)

• Update: Редагування (PUT)

• Delete: Видалення (DELETE)