Лабораторна робота №1

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

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

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

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

1. Провести аналіз предметної області «Holiday Resort».
2. Визначити акторів, бізнес-процеси та правила системи.
3. Побудувати Use-case та ER-діаграми моделі.
4. Сформулювати функціональні та нефункціональні вимоги.
5. Реалізувати адаптивний інтерфейс з використанням сучасних технологій верстки.

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

• GitHub: https://github.com/vlladislavii/E-Hotel
• Live demo: https://vlladislavii.github.io/E-Hotel/

Опис предметного середовища

E-Hotel — це інформаційна система для бронювання номерів у готелях курорту Holiday Resort. Курорт містить більше одного готелю, кожен з яких має назву, кількість зірок, адресу та кількість номерів. Кожен готель пропонує номери двох видів: одномісні та двомісні, відповідно до кількості ліжок. Турист може забронювати один або кілька номерів у готелі, зателефонувавши на рецепцію. Касир відповідає та запитує у туриста інформацію: період, кількість номерів, бажану якість та особисті дані, такі як ім’я та ID. Система повинна показувати ситуацію з бронюванням у будь-який момент, щоб касир міг перевірити, чи можна задовольнити запит. Якщо ні, касир може запропонувати альтернативи, наприклад, готель з іншою кількістю зірок або двомісний номер замість одномісного. Клієнт також може обрати додаткові послуги, такі як сніданок, вечеря або інтернет (якщо це можливо). Після того, як клієнт прийме рішення, він повідомить номер кредитної картки, а касир позначить номер як заброньований і видасть клієнту номер бронювання. Касир також повідомляє період, протягом якого клієнт може скасувати бронювання без штрафних санкцій. Гроші з кредитної картки не знімаються, якщо клієнт не скасує бронювання після закінчення пільгового періоду. Коли турист з’являється в офісі, він повинен пред’явити код бронювання. Якщо у нього його немає, він повинен пред’явити посвідчення особи, щоб знайти своє бронювання. Він також може вибрати продовження терміну перебування, якщо номер не заброньований. При виїзді з готелю турист може оплатити послуги готівкою або кредитною карткою, він отримує рахунок, а також купон, який він може використати для отримання знижки при наступному бронюванні на тому ж курорті. Система повинна генерувати щомісячну статистику: прибутки від номерів, які типи номерів бронювалися найчастіше, скільки бронювань було скасовано.

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

Предмет роботи: Методи, алгоритми та програмні інструменти розроблення адаптивного вебзастосунку для бронювання номерів, обліку клієнтів та генерації статистичних звітів з використанням стеку Node.js.

Опис бізнес-системи

Бізнес-системою є курорт Holiday Resort. Вона виступає в ролі організаційної межі, що містить кілька готелів та керує загальними процесами оренди номерів, обслуговування гостей та фінансової звітності.

У цьому проєкті ми можемо зосередитися на аналізі бізнес-системи «Курорт для відпочинку» для пошуку концепцій у програмному забезпеченні «Електронний готель».

Визначення акторов, агентов, бізнес процесів та правил

Бізнес-актор – це роль, сутність (зовнішня), система, яка взаємодіє з нашою бізнес-системою, щоб отримати щось від цієї взаємодії, вирішити певні потреби:

• Турист (Tourist): ініціює взаємодію шляхом бронювання номерів, вибору послуг та оплати проживання.
• Платіжна система (Payment System): сутність, яка забезпечує перевірку кредитних карток та обробку можливих штрафних санкцій.

Бізнес-агент – це роль, сутність (внутрішня), система всередині нашої бізнес-системи, яка реалізує та сприяє бізнес-функціям, що надаються нашою системою:

• Касир (Cashier): обробляє туристичні запити, перевіряє бронювання, пропонує альтернативи та обробляє платежі;
• Бухгалтерія (Accounting Department): внутрішня сутність або підсистема, відповідальна за створення щомісячної статистики.

Суб’єкти, що мають значення для системи, включаючи пряму та непряму участь:

• Керівництво курорту (Resort Management): зацікавлене в щомісячній статистиці (прибутки, популярність номерів, скасування) для контролю за роботою курорту та прийняття стратегічних рішень;
• Власники курортів (Resort Owners): зацікавлені в загальній прибутковості та цінності, яку створює бізнес;
• Туристи (Tourists): зацікавлені в легкості бронювання, наявності послуг (сніданок, інтернет) та знижок;
• Персонал стійки реєстрації (Front Desk Staff): зацікавлені в можливості бачити стан бронювання в будь-який момент для задоволення запитів.

Бізнес-процес — це сукупність структурних заходів, які створюють цінність для організації та її клієнтів. Для системи «Курорт» (Holiday Resort) основними процесами є:

1. Бронювання номерів (Room Booking / Reservation):

   • Вхідні дані (Inputs): запит туриста (період, тип номера, кількість номерів, якість) та особиста інформація (ім’я, ID).
   • Бізнес-агент (Business Agent): касир / рецепція (Cashier / Front Desk).
   • Метод (Method): касир перевіряє наявність вільних місць, за необхідності пропонує альтернативи, обирає додаткові послуги та закріплює бронювання номером кредитної картки.
   • Вихідні дані (Outputs): номер зі статусом «заброньовано», унікальний номер бронювання та повідомлення про умови скасування (можливий підпроцес: Стягнення плати за скасування (Charging a cancellation fee)).

2. Реєстрація гостя (Guest Check-in):

   • Вхідні дані (Inputs): код бронювання або ідентифікаційна картка туриста (Tourist ID card).
   • Бізнес-агент (Business Agent): касир / рецепція (Cashier / Front Desk).
   • Метод (Method): пошук резервації в системі та потенційне продовження терміну перебування, якщо номер вільний (можливий підпроцес: Продовжити перебування (Extend Stay)).
   • Вихідні дані (Outputs): доступ до готельних послуг та зафіксований статус заїзду (recorded check-in status).

3. Виїзд та оплата (Checkout and Billing):

   • Вхідні дані (Inputs): дані про споживання (використані послуги) та метод оплати (готівка або картка).
   • Бізнес-агент (Business Agent): касир / рецепція (Cashier / Front Desk).
   • Метод (Method): розрахунок кінцевої вартості, обробка платежу та видача документації.
   • Вихідні дані (Outputs): офіційний рахунок (bill), квитанція про оплату та купон на знижку для майбутніх візитів.
   • Примітка: на діаграмі процес «Виїзд та оплата» розділений на два підпроцеси для уточнення.

4. Звітність про ефективність (Performance Reporting):

   • Вхідні дані (Inputs): агреговані історичні дані про бронювання та фінансові показники.
   • Бізнес-агент (Business Agent): відділ бухгалтерії (Accounting Department).
   • Метод (Method): статистичний аналіз доходів, популярності типів номерів та рівня скасувань.
   • Вихідні дані (Outputs): вичерпний щомісячний статистичний звіт для перегляду керівництвом.

Бізнес-правила — це обмеження або інваріанти, які керують бізнесом і повинні бути чітко визначені для забезпечення відповідності дизайну програмного забезпечення предметній області.

Аналіз інформаційної системи

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

1. Перегляд списку доступних готелів та їх характеристик.
2. Пошук вільних номерів за заданим періодом та типом.
3. Оформлення бронювання з фіксацією даних кредитної картки.
4. Реєстрація заїзду за кодом бронювання або посвідченням особи.
5. Генерація місячних статистичних звітів.

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

1. Адаптивність: Коректне відображення на мобільних пристроях, планшетах та десктопах.
2. Продуктивність: Швидкий відгук системи при перевірці доступності номерів.
3. Надійність: Безпечне зберігання персональних даних та номерів карток.

Діаграми моделювання

Бізнес Use-Case Діаграма

Описує взаємодію касира та туриста з системою E-Hotel.

Діаграма активності для бізнес-прецедентів

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

ER-Діаграма (Модель предметної області)

Відображає зв’язки між сутностями: Hotel, Room, Booking, Tourist, Service, і тд.

Реалізація вебзастосунку «E-Hotel»

Стек технологій

• HTML5 — семантична розмітка сторінок для бронювання, каталогів та дашбордів.
• CSS3 — стилізація інтерфейсу, використання Flexbox та Grid для адаптивної верстки, а також Media Queries.
• JavaScript (Vanilla) — реалізація бізнес-логіки: динамічне завантаження меню, фільтрація готелів, пошук номерів та розрахунок вартості.
• Vite — інструмент для збірки проекту та управління модулями.
• Lucide Icons — набір легких іконок для візуалізації сервісів та елементів навігації.

Структура проєкту

Проєкт побудований за модульним принципом, де логіка даних відокремлена від представлення.

• /public — статичні файли (favicon, іконки та шаблон sidebar.html).
• /src/assets — графічні ресурси проєкту (зображення героїв, SVG логотипи Vite та JS).
• /src/css — стилі проєкту (style.css), що використовують Flexbox та Grid.
• /src/html — набір сторінок для функціоналу системи:
  • booking.html — форма оформлення броні.
  • hotel-catalog.html — каталог готелів.
  • search-availability.html — інтерфейс перевірки вільних номерів.
  • stay-management.html — управління поточними бронюваннями.
• /src/js — модульна бізнес-логіка (js-скріпти)

Структура документа

Нижче наведено узагальнену структуру HTML для головних сторінок проекту — index.html (Дашборд) та booking.html (Форма бронювання). Це спрощені DOM-скелети, які демонструють розміщення основних блоків: sidebar-container для навігації, header із заголовками сторінок та card для контенту.

1) Структура сторінки booking.html (Бронювання)

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Booking - E-Hotel</title>
    <link rel="stylesheet" href="/src/css/style.css">
</head>
<body>
    <div class="layout-wrapper">
        <div id="sidebar-container"></div>

        <div class="dashboard-container">
            <header class="header">
                <h2 class="title">New Booking</h2>
                <p id="hotel-name-display" class="subtitle">Створення нової резервації</p>
            </header>

            <div id="selected-room-card" class="card">
                </div>

            <form id="booking-form">
                <div class="card">
                    <h3>Tourist Information</h3>
                    </div>

                <div class="card">
                    <h3>Booking Summary</h3>
                    <div id="total-booking-price">$0</div>
                </div>
            </form>
        </div>
    </div>
    
    <script type="module" src="/src/js/load-sidebar.js"></script>
    <script type="module" src="/src/js/booking.js"></script>
</body>
</html>

2) Структура сторінки hotel-catalog.html (Каталог)

<!DOCTYPE html>
<html lang="uk">
<body>
    <div class="layout-wrapper">
        <div id="sidebar-container"></div>

        <div class="dashboard-container">
            <header class="header">
                <h2 class="title">Hotel Catalog</h2>
            </header>

            <div class="catalog-layout">
                <aside class="filters-sidebar">
                    <div class="filter-group">
                        <h4>Star Rating</h4>
                        </div>
                </aside>

                <main class="catalog-main">
                    <div class="hotels-grid" id="hotels-grid">
                        </div>
                </main>
            </div>
        </div>
    </div>
    <script type="module" src="../js/hotel-catalog.js"></script>
</body>
</html>

Адаптивна верстка та стилістичні рішення

Для забезпечення коректного відображення на різних пристроях реалізовано наступні механізми:

1. Адаптивна навігація: Використано скрипт load-sidebar.js, який динамічно підвантажує меню. На мобільних пристроях реалізовано «бургер-меню» (кнопка #menu-toggle), яке перемикає клас .is-visible для відображення навігації.

   

2. Гнучкі сітки (Flexbox & Grid):

   • Для карток готелів у каталозі використано display: grid (клас .hotels-grid), що дозволяє контенту автоматично адаптуватися під ширину екрана.
   • Статистичні картки на дашборді та елементи форми бронювання використовують Flexbox для гнучкого вирівнювання.

   

3. Медіа-запити: У CSS налаштовано переходи для різних брекпоінтів, що змінюють структуру сторінки (наприклад, перехід від горизонтального до вертикального розташування полів у формах).

   

4. Відносні одиниці вимірювання: Шрифти та відступи налаштовані через rem, а ширина контейнерів — через % та vw, що забезпечує гнучкість інтерфейсу на різних роздільних здатностях.