Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/6029| Назва: | Веб-орієнтована інформаційна система для отримання прогнозу погоди |
| Автори: | Оксамитна, Любов Павлівна Корніюк, Олександр Олександрович |
| Ключові слова: | ВЕБ-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА,;ПРОГНОЗ ПОГОДИ,;REACT,;API,;МЕТЕОДАНІ,;АДАПТИВНИЙ ДИЗАЙН,;ГЕОЛОКАЦІЯ,;МОДАЛЬНИЙ ІНТЕРФЕЙС. |
| Дата публікації: | 11-чер-2025 |
| Короткий огляд (реферат): | Наявні метеорологічні сервіси часто перевантажені зайвими функціями або недоступні на локалізованих рівнях. Створення веб-орієнтованої інформаційної системи для отримання прогнозу погоди дозволяє користувачам швидко отримувати необхідну інформацію без встановлення додаткового програмного забезпечення, використовуючи лише веб-браузер. Метою кваліфікаційної роботи бакалавра є розробка веб-орієнтованої інформаційної системи для отримання прогнозу погоди, що забезпечує отримання актуального прогнозу погоди на основі зовнішніх API, з урахуванням простоти використання, адаптивного дизайну та надійності. Об’єкт дослідження: процес отримання, обробки та представлення метеорологічної інформації в мережі Інтернет. Предмет дослідження: веб-орієнтована інформаційна система для отримання прогнозу погоди. Розроблена веб-орієнтована інформаційна система для отримання прогнозу погоди відповідає сучасним вимогам до клієнтських веб-застосунків, забезпечує зручність для кінцевого користувача, має логічну структуру та гнучку архітектуру. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/6029 |
| Розташовується у зібраннях: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| Пояснювальна записка_Корніюк Олександр_КН-2101_2024-2025.pdf Restricted Access | 3.02 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Веб-орієнтована інформаційна система для отримання прогнозу
погоди»
Виконав: студент 4 курсу, групи КН-2101
спеціальності 122 − «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Корніюк Олександр Олександрович
Керівник __________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2025 рік
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2025 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Корніюку Олександру Олександровичу
(прізвище, ім’я, по батькові)
1. Тема роботи Веб-орієнтована інформаційна система для отримання прогнозу погоди
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. №53/03-03
2. Строк подання студентом роботи до 11 червня 2025 року.
3. Вихідні дані до роботи:
Практичні навички роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проєктування та розробка веб-орієнтованої інформаційної системи для отримання
прогнозу погоди.
4.3. Програмна реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 52110-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Презентація у вигляді слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 17.12.2024
КАЛЕНДАРНИЙ ПЛАН
Строк
№ з/п Назва етапів кваліфікаційної роботи бакалавра виконання Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
17.12.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 12.02.2025 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 18.03.2025 Виконано
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2025 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2025 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
03.06.2025 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06.2025 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2025 Виконано
Студент _____________________________ Олександр КОРНІЮК
(підпис)
Керівник роботи ____________________________ Любов ОКСАМИТНА
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 83 с., 16 рис., 2 таблиці, 15
використаних джерел, 4 додатки.
Актуальність теми. Наявні метеорологічні сервіси часто перевантажені
зайвими функціями або недоступні на локалізованих рівнях. Створення веб-
орієнтованої інформаційної системи для отримання прогнозу погоди дозволяє
користувачам швидко отримувати необхідну інформацію без встановлення
додаткового програмного забезпечення, використовуючи лише веб-браузер.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є
розробка розробка веб-орієнтованої інформаційної системи для отримання прогнозу
погоди, що забезпечує отримання актуального прогнозу погоди на основі зовнішніх
API, з урахуванням простоти використання, адаптивного дизайну та надійності.
провести аналіз існуючих веб-систем для отримання погодних даних;
визначити вимоги до функціоналу та архітектури майбутньої системи;
реалізувати веб-інтерфейс користувача з відображенням прогнозів;
організувати отримання та обробку метеорологічної інформації через зовнішні
API;
протестувати працездатність та зручність використання системи.
Об’єкт дослідження: процес отримання, обробки та представлення
метеорологічної інформації в мережі Інтернет.
Предмет дослідження: веб-орієнтована інформаційна система для отримання
прогнозу погоди.
Методи дослідження. У процесі виконання кваліфікаційної роботи бакалавра
було використано такі наукові методи дослідження:
аналізу та порівняння існуючих інформаційних систем;
системного аналізу для визначення вимог і проєктування архітектури;
методи структурного моделювання програмного забезпечення.
Перелік ключових слів: ВЕБ-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА,
ПРОГНОЗ ПОГОДИ, ІНФОРМАЦІЙНА СИСТЕМА, REACT, API, ІНТЕРФЕЙС
КОРИСТУВАЧА, МЕТЕОДАНІ, КЛІЄНТ-СЕРВЕРНА АРХІТЕКТУРА,
КЕШУВАННЯ, ГЕОЛОКАЦІЯ, JAVASCRIPT, АДАПТИВНИЙ ДИЗАЙН,
МОДАЛЬНИЙ ІНТЕРФЕЙС.
ABSTRACT
Work contains. 83 pages, 16 figures, 2 tables, 15 sources used, 4 attachments.
Relevance of the topic. Existing meteorological services are often overloaded with
excessive functions or unavailable at localized levels. The development of a web-oriented
information system enables users to quickly access necessary weather information without
installing additional software, relying only on a web browser.
Purpose and objectives of the research. The aim of this work is to develop a web-
oriented information system that provides up-to-date weather forecasts based on external
APIs, with an emphasis on simplicity, adaptive design, and reliability. The objectives of the
study include:
analyzing existing web systems for weather data retrieval;
defining the functional and architectural requirements of the future system;
implementing a web-based user interface for displaying forecasts;
organizing the retrieval and processing of meteorological data through external APIs;
testing the operability and usability of the system.
The object of research. the process of obtaining, processing, and presenting
meteorological information on the Internet.
The subject of research: web-oriented information systems that deliver weather data
to users using modern web technologies and APIs.
Research methods: In the course of the bachelor's qualification work, the following
scientific research methods were used:
analysis and comparison of existing information systems;
systems analysis for requirement definition and architectural design;
web application development methods.
The list of keywords: WEB APPLICATION, WEATHER FORECAST,
INFORMATION SYSTEM, REACT, API, USER INTERFACE, METEODATA,
CLIENT-SERVER ARCHITECTURE, CACHING, GEOLOCATION, JAVASCRIPT,
ADAPTIVE DESIGN, MODAL INTERFACE.
7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 9
ВСТУП 10
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ 12
1.1 Аналіз сучасного стану вибору веб-орієнтованих інформаційних система для
отримання прогнозу погоди 12
1.2 Огляд існуючих аналогів веб-орієнтованих інформаційних система для
отримання прогнозу погоди 14
1.2.1 Аналіз веб-ресурсу «Sinoptik.ua» 17
1.2.2 Аналіз веб-ресурсу «Meteoprog» 19
1.2.3 Аналіз веб-ресурсу «Windy.com» 21
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка
завдання 24
Висновки до розділу 1 26
2 ПРОЄКТУВАННЯ ВЕБ-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ СИСТЕМИ ДЛЯ
ОТРИМАННЯ ПРОГНОЗУ ПОГОДИ 28
2.1 Опис функціонального програмного середовища для розробки 28
2.2 Основні принципи розробки веб-орієнтованих інформаційних систем для
отримання прогнозу погоди 30
2.3 Архітектура веб-орієнтованої інформаційної системи для отримання прогнозу
погоди 33
2.4 Розробка діаграми варіантів використання 36
2.5 Взаємодія із зовнішнім API 38
2.6 Опис процесу проєктування структури веб-орієнтованої інформаційної
системи для отримання прогнозу погоди 39
2.7 Проєктування інтерфейсу користувача 42
Висновки до розділу 2 45
3 ПРОГРАМНА РЕАЛІЗАЦІЯ 46
3.1 Постановка завдання 46
8
3.2 Інтерфейс веб-орієнтованої інформаційної системи для отримання прогнозу
погоди 49
3.3 Програмна реалізація веб-орієнтованої інформаційної системи для отримання
прогнозу погоди 50
3.4 Особливості тестування веб-ресурсів 54
3.5 Тестування веб-орієнтованої інформаційної системи для отримання прогнозу
погоди 54
Висновки до розділу 3 60
ВИСНОВКИ 62
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 64
Додаток А. Специфікація 482.ЧДТУ. 52110-01 65
Додаток Б. Текст програми 67
Додаток В. Інструкція користувача 78
Додаток Г. Структура бази даних 82
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
– Програмний інтерфейс прикладного програмування
API
(Application Programming Interface).
UI – Інтерфейс користувача (User Interface).
UX – Досвід користувача (User Experience).
JSON – Формат обміну даними (JavaScript Object Notation).
°C – Градуси за Цельсієм.
hPa – Гектопаскаль – одиниця вимірювання атмосферного тиску.
Km/h – Кілометри на годину – одиниця швидкості вітру.
Km – Кілометр – одиниця довжини для вимірювання видимості.
API key – Ключ доступу до API.
Компонент – Незалежний функціональний блок інтерфейсу в React.
Кешування – Збереження результатів запиту для повторного використання.
Геолокація – Визначення координат пристрою користувача через браузер.
Модальне – Діалогове вікно, яке відображається поверх сторінки.
вікно
10
ВСТУП
Сучасний світ потребує оперативного та точного доступу до метеорологічної
інформації, яка є важливою для повсякденної діяльності людини, бізнесу, логістики,
сільського господарства та багатьох інших сфер. У зв’язку з розвитком
інформаційних технологій зростає інтерес до створення веб-орієнтованих систем,
які дозволяють отримувати погодні прогнози в зручному форматі, незалежно від
місцезнаходження користувача.
Актуальність кваліфікаційної роботи бакалавра полягає в необхідності
створення доступної, зручної та інтерактивної веб-орієнтованої інформаційної
системи для оперативного отримання прогнозу погоди. Наявні метеорологічні
сервіси часто перевантажені зайвими функціями або недоступні на локалізованих
рівнях. Створення такої системи дозволяє користувачам швидко отримувати
необхідну інформацію без встановлення додаткового програмного забезпечення,
використовуючи лише веб-браузер.
Мета кваліфікаційної роботи бакалавра – розробка веб-орієнтованої
інформаційної системи, що забезпечує отримання актуального прогнозу погоди на
основі зовнішніх API, з урахуванням простоти використання, адаптивного дизайну
та надійності.
Для досягнення поставленої мети необхідно вирішити наступні завдання:
провести аналіз існуючих веб-систем для отримання погодних даних;
визначити вимоги до функціоналу та архітектури майбутньої системи;
реалізувати веб-інтерфейс користувача з відображенням прогнозів;
організувати отримання та обробку метеорологічної інформації через зовнішні
API;
протестувати працездатність та зручність використання системи.
Об’єкт дослідження: процес отримання, обробки та представлення
метеорологічної інформації в мережі Інтернет.
Предмет дослідження: веб-орієнтована інформаційна система для отримання
прогнозу погоди.
11
Методи дослідження. У процесі виконання кваліфікаційної роботи бакалавра
було використано такі наукові методи дослідження:
аналізу та порівняння існуючих інформаційних систем;
системного аналізу для визначення вимог і проєктування архітектури;
методи структурного моделювання програмного забезпечення.
12
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану вибору веб-орієнтованих інформаційних
система для отримання прогнозу погоди
У сучасному світі, що характеризується стрімким розвитком цифрових
технологій, особливої актуальності набувають системи, які забезпечують
своєчасний доступ до важливої інформації. Однією з таких категорій інформації є
погодні умови, що мають суттєвий вплив на діяльність окремих осіб, бізнесу,
транспорту, сільського господарства, медицини, авіації, енергетики тощо. З цієї
причини прогноз погоди є незамінним інструментом для прийняття рішень,
планування повсякденних справ і забезпечення безпеки. Саме тому зростає попит на
сучасні веб-орієнтовані інформаційні системи, які надають можливість отримання
метеорологічної інформації в зручній, швидкій і доступній формі.
Під веб-орієнтованими інформаційними системами прогнозу погоди
розуміють програмні комплекси, які функціонують на основі веб-технологій і
забезпечують взаємодію користувача з погодними даними через інтернет-браузер.
Такі системи, зазвичай, реалізовуються у вигляді односторінкових веб-застосунків
або мультисторінкових платформ із можливістю інтеграції зовнішніх джерел даних
через API. Вони забезпечують динамічне оновлення інформації, відображення
прогнозів в реальному часі, доступ до історичних даних, аналітику кліматичних
показників, а також персоналізовані сервіси для користувачів.
Сучасний стан веб-орієнтованих систем характеризується високим рівнем
розвитку технологій, широким спектром функцій та орієнтацією на кінцевого
споживача. У процесі розробки таких систем використовуються різноманітні
інструменти та фреймворки, зокрема HTML5, CSS3, JavaScript, а також популярні
бібліотеки та фреймворки, як-от React, Vue.js, Angular тощо. Для обробки запитів та
інтеграції з метеорологічними сервісами застосовуються технології REST API,
GraphQL, а також модулі для асинхронної обробки даних. На серверному боці часто
використовуються середовища Node.js, Express, Django, Flask та інші.
13
Джерелом метеорологічної інформації для більшості сучасних веб-систем є
спеціалізовані API, що надають доступ до даних про поточну погоду, прогноз на
декілька днів, погодні аномалії, рівень опадів, напрямок і силу вітру, атмосферний
тиск, температуру повітря, індекс ультрафіолетового випромінювання та інші
параметри. Деякі API також надають можливість отримання метеорологічних карт,
супутникових зображень та інтеграції з геолокаційними сервісами.
Особливістю сучасних веб-орієнтованих систем прогнозування є
інтерактивність і адаптивність. Успішна система повинна бути здатна реагувати на
запити користувача в режимі реального часу, мати адаптивний дизайн для
коректного відображення на різних пристроях – від настільних комп’ютерів до
мобільних телефонів і планшетів. Також важливою є підтримка кількох мов,
включаючи локалізовані версії, що сприяє її широкому розповсюдженню.
Незважаючи на значний розвиток, існують певні недоліки та проблеми,
притаманні багатьом сучасним веб-системам прогнозу погоди. Серед них можна
виділити:
перевантаженість інтерфейсу другорядною інформацією або рекламою;
незрозуміле структурування інформації, що ускладнює сприйняття
користувачем;
недостатня точність прогнозу в регіонах із малим покриттям метеостанцій;
повільне оновлення погодних даних через обмеження сторонніх API;
відсутність персоналізації або можливості налаштування інтерфейсу під
потреби конкретного користувача.
Важливим напрямом розвитку є персоналізація сервісів прогнозу. Користувачі
очікують не лише базову інформацію про погоду, а й можливість адаптувати
систему під власні потреби – обирати параметри, які їх цікавлять, отримувати
сповіщення про погодні зміни, переглядати прогнози на обраний період, створювати
профілі з урахуванням місця проживання або частих переміщень. Це можливо
завдяки інтеграції з базами користувачів, збереженню історії запитів, а також
технологіям машинного навчання для прогнозування поведінки користувача.
14
Також актуальним є питання точності прогнозів. Веб-системи повинні
надавати дані з високою просторовою та часовою роздільною здатністю. Цього
можна досягти за рахунок об’єднання даних з різних джерел, включаючи
супутникові системи, метеостанції, метеорадарні спостереження, та їх подальшого
аналізу з використанням моделей чисельного прогнозування. У цьому контексті
великого значення набуває можливість масштабування веб-системи, оптимізація
запитів до API та реалізація кешування для мінімізації затримок і навантаження на
сервер.
Загальною тенденцією є поступовий перехід до універсальних,
багатофункціональних платформ, які поєднують прогнози погоди з іншими типами
інформації – наприклад, новинами, географічними картами, екологічними
індикаторами, транспортними даними, аналітикою ризиків, аграрними порадами
тощо. Це дозволяє створити комплексні інформаційні продукти, що орієнтовані на
вузькі цільові аудиторії.
Підсумовуючи вищевикладене, можна зазначити, що сучасний стан розвитку
веб-орієнтованих інформаційних систем прогнозу погоди характеризується великою
кількістю рішень, високим рівнем технологічної реалізації та активним
впровадженням новітніх підходів до візуалізації та персоналізації даних. Водночас
існує потреба в подальшій оптимізації інтерфейсів, підвищенні точності прогнозів,
забезпеченні швидкодії та адаптації до локальних умов. Усе це створює підґрунтя
для розробки нової, ефективної, доступної та сучасної веб-системи прогнозу погоди,
що стане корисним інструментом для широкого кола користувачів.
1.2 Огляд існуючих аналогів веб-орієнтованих інформаційних систем
для отримання прогнозу погоди
Станом на сьогодні існує велика кількість веб-орієнтованих платформ, що
забезпечують доступ до оперативної інформації про погоду. Такі сервіси є
популярними серед широкого кола користувачів, оскільки дозволяють швидко
отримувати прогнози на поточний день, найближчі години, тиждень або триваліші
15
періоди, а також дізнаватися про метеорологічні явища, які можуть впливати на
повсякденну діяльність. У цьому розділі розглядаються найбільш відомі та активно
використовувані інформаційні системи прогнозу погоди, доступні в Україні та за її
межами.
Одним із найпопулярніших погодних веб-ресурсів серед українських
користувачів є Sinoptik.ua. Цей сайт пропонує детальний прогноз погоди для
більшості населених пунктів України та зарубіжжя [1]. Основною перевагою
ресурсу є простота інтерфейсу, наявність історії погодних умов, зручне
представлення даних у вигляді таблиць і графіків. Сервіс відображає прогноз на 10
днів, включає відомості про температуру повітря, опади, тиск, вологість, вітер, а
також пропонує «відчутну» температуру, яка враховує вітер і вологість. Sinoptik.ua
також має мобільну версію сайту, адаптовану до перегляду з телефонів і планшетів.
Іншим відомим ресурсом є Weather.com (офіційний сайт The Weather Channel)
є одним із найстаріших і найавторитетніших світових сервісів прогнозу погоди. Цей
веб-сайт орієнтований на глобальну аудиторію, пропонує розширений функціонал,
включаючи погодні карти, супутникові знімки, новини про погодні явища, блоги, а
також тематичні розділи для подорожей, здоров’я, спорту тощо. Інтерфейс ресурсу
підтримує декілька мов, і хоча українська мова не завжди доступна, англомовна
версія досить зручна для використання.
Ще одним ресурсом, який часто використовують українські користувачі, є
Meteoprog.ua. Цей сайт надає метеорологічну інформацію для міст України та світу.
Сервіс пропонує погодні прогнози на 15 днів, графіки температури, рівня опадів і
атмосферного тиску [2]. Крім того, користувачам доступна інформація про
геомагнітну активність, якість повітря, рівень УФ-випромінювання, місячний
календар, а також ризик застуд або головного болю. Ресурс має зручну навігацію,
зрозумілу структуру та адаптивний дизайн.
Серед інтерактивних і візуально орієнтованих платформ виділяється
Windy.com. Цей сервіс надає прогноз погоди у вигляді динамічних карт, які
відображають розподіл температури, хмарності, опадів, вітру, тиску тощо.
Windy.com є особливо корисним для користувачів, які бажають бачити атмосферні
16
процеси не лише у вигляді чисел, а й наочно [3]. Такий підхід знаходить
застосування серед авіаторів, моряків, туристів, рибалок та інших категорій
користувачів, яким важлива візуалізація погодних даних. Інтерфейс сервісу
підтримує українську мову, є мобільна версія, а також додатки для Android та iOS.
Значну популярність також має Foreca.com – європейський погодний портал,
який пропонує прогнози погоди для всього світу. Сайт має простий інтерфейс і дає
можливість переглядати погодні дані у вигляді таблиць та графіків. Крім
стандартного прогнозу, Foreca пропонує погодні мапи, супутникові зображення, а
також прогноз дорожніх умов, що є корисним для водіїв. Прогнозування
реалізується на основі різних джерел і моделей, що забезпечує доволі високу
точність у короткостроковій перспективі.
Ще один сервіс, що заслуговує на увагу – Yr.no, створений Норвезьким
метеорологічним інститутом. Цей сайт має міжнародне покриття, зокрема й
українські міста, і пропонує детальні погодні прогнози на 10 днів. Характерною
особливістю Yr.no є науково обґрунтоване джерело даних, простий, не
перевантажений інтерфейс, підтримка кількох мов та мобільна версія сайту.
Прогнози супроводжуються графічними візуалізаціями змін температури, опадів і
вітру протягом доби.
Загалом, розглянуті сервіси можна умовно поділити на два типи:
інформаційно-аналітичні, які надають користувачеві погодні дані у вигляді
числових значень і графіків (наприклад, Sinoptik.ua, Meteoprog.ua, Foreca);
візуалізаційні, що зосереджуються на інтерактивних картах і моделях
атмосферних процесів (наприклад, Windy.com, Yr.no).
Усі ці сервіси мають свої сильні сторони, але жоден із них не є універсальним
для всіх категорій користувачів. Деякі з них мають надлишковий функціонал, що
ускладнює інтерфейс для звичайного користувача; інші – недостатню деталізацію
прогнозу для окремих регіонів України. Тому, виникає потреба у створенні нової
веб-орієнтованої системи, яка буде локалізованою, простою у використанні,
17
водночас гнучкою для розширення, з можливістю інтеграції з популярними
джерелами даних і врахуванням сучасних принципів UI/UX-дизайну.
Детальний порівняльний аналіз згаданих сервісів буде проведено у наступних
підрозділах, з метою визначення їх переваг і недоліків, що дозволить обґрунтувати
архітектуру та функціональність власної інформаційної системи.
1.2.1 Аналіз веб-ресурсу «Sinoptik.ua»
Серед найбільш відомих та широко використовуваних веб-орієнтованих
інформаційних систем для отримання прогнозу погоди в Україні особливе місце
посідає ресурс Sinoptik.ua (рис. 1.1). Цей сайт протягом багатьох років забезпечує
мільйони користувачів актуальними даними про погодні умови, будучи одним з
лідерів у своїй галузі. Його функціональність, простота інтерфейсу та висока
швидкість завантаження роблять сервіс популярним серед різних категорій
користувачів – від пересічних громадян до підприємців, що потребують точного
планування зовнішньої діяльності.
Основне призначення платформи – надання коротко- та довгострокового
прогнозу погоди для конкретних населених пунктів [1]. Веб-ресурс охоплює велику
кількість міст України та світу, що забезпечує широку географічну доступність. При
першому відвідуванні сайт автоматично визначає місцезнаходження користувача,
пропонуючи прогноз для відповідного регіону, однак також надає можливість
ручного вибору місця.
Інтерфейс ресурсу є інтуїтивно зрозумілим (рис. 1.1).
Центральне місце займає прогноз погоди на поточний день, а також на 7–10
днів наперед. Для кожного дня відображається:
мінімальна та максимальна температура;
рівень хмарності;
ймовірність опадів;
напрям і швидкість вітру;
атмосферний тиск.
18
Рисунок 1.1 – Інтерфейс веб-ресурсу «Sinoptik.ua» [1]
Окрім звичайної температури, ресурс також відображає так звану «відчутну
температуру», яка враховує вплив вітру та вологості, що є корисною особливістю
для суб’єктивного сприйняття погодних умов.
Також платформа надає додаткові дані у вигляді історії погодних умов,
зокрема середні температури, опади та інші параметри за попередні роки. Це
дозволяє користувачеві оцінити погодні тенденції, порівняти поточні умови з
типовими для конкретного періоду.
Окремо слід відзначити швидкодію сайту – завдяки легкому дизайну сторінки
завантажуються досить швидко навіть при повільному інтернет-з’єднанні. Також
передбачено мобільну версію ресурсу, що адаптується до екранів смартфонів і
планшетів. При цьому функціональність мобільної версії практично не поступається
повноцінному варіанту для настільних комп’ютерів.
Серед додаткових можливостей сервісу – наявність блоку із прогнозом
магнітних бур, що може бути корисним для метеозалежних осіб, та коротка
інформація про погодні умови на курортах. Однак платформа практично не надає
19
інтерактивних елементів – таких як карти, анімації або візуалізація атмосферних
процесів, що дещо обмежує можливості аналізу складних погодних сценаріїв.
Певним недоліком ресурсу можна вважати наявність реклами, яка займає
помітну частину екранного простору і може заважати сприйняттю інформації,
особливо на мобільних пристроях. Також варто відзначити, що структура сторінок
не завжди є логічною – частина інформації дублюється або розміщена в місцях,
неочікуваних для користувача.
Таким чином, «Sinoptik.ua» – це ефективний приклад класичної інформаційної
системи прогнозу погоди з акцентом на простоту, швидкість доступу до основних
показників та широку географічну підтримку. Його популярність в Україні
зумовлена доступністю українською мовою, адаптованістю до локального
користувача та стабільною роботою. Однак для користувачів, зацікавлених у
глибшому аналізі погодних процесів, цей ресурс може здатися дещо обмеженим у
функціональності.
1.2.2 Аналіз веб-ресурсу «Meteoprog.ua»
Веб-ресурс «Meteoprog.ua» є одним із провідних українських онлайн-сервісів,
що надають метеорологічну інформацію в режимі реального часу (рис. 1.2). Він
орієнтований як на внутрішнього користувача, так і на іноземну аудиторію,
пропонуючи підтримку декількох мов, зокрема української та англійської. Сайт
активно використовується як для особистих потреб, так і в професійному
середовищі, де точність і достовірність погодних прогнозів мають критичне
значення.
Головною функцією платформи є надання прогнозу погоди для населених
пунктів України та інших країн світу [2]. Інтерфейс ресурсу структурований таким
чином, щоб користувач міг швидко отримати основні метеорологічні показники:
температуру повітря вдень і вночі, відчутну температуру, швидкість і напрям вітру,
вологість, атмосферний тиск, хмарність, ймовірність опадів тощо. Прогноз
подається у вигляді таблиці, що охоплює як поточний день, так і коротко- та
середньострокову перспективу – до 15 днів.
20
На відміну від деяких інших сервісів, «Meteoprog.ua» має розширений
функціонал для аналітичного перегляду погодних даних. Зокрема, користувачеві
доступні:
графіки зміни температури та атмосферного тиску протягом дня;
погодинний прогноз;
інформація про геомагнітні бурі, рівень УФ-випромінювання;
біометеорологічні індекси (вплив погоди на самопочуття);
прогнози для аграрного сектору, туризму, риболовлі.
Окрему увагу ресурс приділяє спеціальним категоріям користувачів.
Наприклад, на сайті можна знайти розділи, присвячені прогнозу погоди для
курортів, гірськолижних баз, морських узбережь, а також метеодані для водіїв
(прогноз дорожньої обстановки). Така деталізація є корисною для користувачів, які
планують подорожі або здійснюють професійну діяльність, залежну від погодних
умов.
Сайт має адаптивну верстку і коректно відображається як на десктопних
пристроях, так і на смартфонах. Мобільна версія не втрачає функціональності і
зберігає логічну структуру подання даних. Крім того, «Meteoprog.ua» пропонує
мобільні застосунки, що забезпечують швидкий доступ до прогнозів у будь-який
час.
З візуальної точки зору, інтерфейс ресурсу дещо перевантажений – на головній
сторінці розміщено велику кількість інформаційних блоків, що може ускладнити
навігацію для нового користувача. Проте для тих, хто вже знайомий із сервісом, це
дозволяє отримати широкий спектр даних без необхідності переходити між
сторінками. Окремо варто зазначити наявність рекламних блоків, які періодично
відволікають увагу або зменшують доступну область екрану, особливо в мобільній
версії.
Щодо точності прогнозів, «Meteoprog.ua» використовує комплексну модель
обробки даних з урахуванням супутникових знімків, локальних метеостанцій,
математичних моделей та статистичних методів. Важливо, що платформа враховує
21
особливості клімату України, що підвищує релевантність прогнозу для локального
користувача.
Однією з позитивних рис сервісу є наявність історії погодних умов та
можливість перегляду архівних даних. Це може бути корисним для дослідження
кліматичних змін або для аграріїв, які планують посівні кампанії на основі погодних
трендів минулих років.
У цілому, «Meteoprog.ua» є потужним багатофункціональним інструментом
для отримання погодної інформації, який поєднує простоту базового прогнозу з
розширеними можливостями для більш вимогливих користувачів. Його перевагами
є висока деталізація, підтримка локальної специфіки, наявність аналітичних та
галузевих розділів. До недоліків можна віднести деяке перевантаження інтерфейсу
та наявність великої кількості реклами.
Рисунок 1.2 – Інтерфейс веб-ресурсу «Meteoprog.ua» [2]
1.2.3 Аналіз веб-ресурсу «Windy.com»
Серед сучасних веб-орієнтованих інформаційних систем, що забезпечують
доступ до прогнозу погоди, особливе місце займає «Windy.com» – інтерактивна
платформа, яка акцентує увагу на візуалізації атмосферних процесів у вигляді
22
погодних карт (рис. 1.3) [3]. Даний ресурс вирізняється серед інших насамперед
своїм функціональним наповненням та способом подання метеорологічної
інформації, що робить його популярним серед професійних користувачів – пілотів,
моряків, туристів, рибалок, а також тих, хто потребує точного аналізу погодної
ситуації у реальному часі.
«Windy.com» реалізований як веб-застосунок із можливістю перегляду даних
без реєстрації. Після відкриття сайту користувач бачить інтерактивну мапу, на якій
у режимі реального часу відображаються погодні умови. Основу інтерфейсу
становить карта з анімацією повітряних потоків, що дає змогу спостерігати за рухом
вітру, хмарністю, опадами, температурою, атмосферним тиском та іншими
параметрами. У нижній частині інтерфейсу розміщена шкала часу, яка дозволяє
змінювати період прогнозу – від поточного моменту до кількох днів наперед.
Сервіс підтримує різні джерела метеорологічних даних, зокрема глобальні
моделі прогнозування, такі як ECMWF, GFS, ICON, а також локальні моделі для
деяких регіонів. Це дозволяє користувачеві самостійно обирати джерело прогнозу
для порівняння точності або глибини прогнозування. Такий підхід є особливо
корисним для професійної аудиторії, яка має потребу в моделюванні погодних умов
з різних джерел.
Серед основних функціональних можливостей «Windy.com»:
перегляд векторної карти вітру, температури, опадів, хмарності, хвиль, тиску
тощо;
можливість вмикання шарів з різними погодними параметрами;
прогноз на 10 днів уперед з погодинною деталізацією;
побудова графіків погодних змін для конкретної геолокації;
використання GPS або ручного введення координат;
підтримка аеронавігаційних даних (аеродромів, маршрутів);
перегляд супутникових знімків в реальному часі.
Інтерфейс сайту має адаптивний дизайн і доступний українською мовою, що
забезпечує зручність використання на різних типах пристроїв. Крім веб-версії,
23
«Windy.com» також має мобільні застосунки для iOS та Android, що надають
практично повний функціонал основного ресурсу.
З технічної точки зору, «Windy.com» побудований на WebGL та JavaScript, що
забезпечує плавну роботу навіть при великій кількості анімованих елементів.
Система функціонує швидко та стабільно, ефективно обробляючи великі обсяги
даних у реальному часі.
До безперечних переваг сервісу можна віднести:
високий рівень деталізації погодних показників;
можливість візуального аналізу метеорологічних процесів у просторі й часі;
підтримку різних джерел прогнозування;
функціонал для професійного використання;
гнучкість налаштувань та візуальних шарів.
Рисунок 1.3 – Інтерфейс веб-ресурсу «Windy.com» [3]
Проте варто зазначити, що «Windy.com» не завжди є зручним для пересічного
користувача, який очікує отримати базову інформацію у спрощеному вигляді.
Велика кількість інструментів, параметрів і налаштувань може здатися
надлишковою для людини без спеціальної підготовки. Також сервіс не надає
простого текстового опису прогнозу, як це роблять традиційні погодні ресурси, що
іноді ускладнює швидке ознайомлення з умовами. У контексті локального
24
використання важливо, що «Windy.com» охоплює територію України з доволі
високою просторовою деталізацією. Однак, точність прогнозу залежить від обраної
моделі та джерел даних, які, як правило, формуються на основі глобальних
метеорологічних спостережень.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
На підставі проведеного аналізу веб-ресурсів «Sinoptik.ua», «Meteoprog.ua» та
«Windy.com» можна зробити висновок, що ці сервіси мають як спільні риси, так і
суттєві відмінності, що впливають на зручність, гнучкість та інформативність
використання. Усі три платформи забезпечують доступ до актуального прогнозу
погоди, але реалізують це різними способами – від табличного представлення до
інтерактивної візуалізації.
Веб-ресурс «Sinoptik.ua» орієнтований на базові потреби користувача. Він
пропонує простий текстовий прогноз на 10 днів, не має розширеної аналітики,
погодинної деталізації або картографічної візуалізації, проте вирізняється
зрозумілим інтерфейсом і швидким доступом до інформації. Сайт повністю
адаптований до українськомовної аудиторії, не вимагає реєстрації, а інтерфейс добре
пристосований до мобільних пристроїв.
«Meteoprog.ua» характеризується ширшими функціональними можливостями.
Окрім стандартного прогнозу на 15 днів, він надає погодинну деталізацію, графіки
зміни температури та тиску, біометеорологічні індекси, а також спеціалізовані
розділи для водіїв, туристів, аграріїв тощо. Інтерфейс менш інтуїтивний, ніж у
Sinoptik.ua, однак пропонує більше інформації для аналітики. Також сайт
адаптований до різних пристроїв і підтримує українську мову.
«Windy.com», на відміну від двох попередніх, зосереджений на візуалізації
метеорологічних процесів на інтерактивній карті. Він дозволяє переглядати погодні
умови з використанням кількох моделей прогнозування, обирати джерела даних,
перемикати погодні шари та слідкувати за змінами атмосферних явищ у динаміці.
25
Прогноз також доступний у погодинному режимі. Хоча інтерфейс менш інтуїтивний
і орієнтований більше на підготовлених користувачів, сервіс вирізняється високим
технічним рівнем реалізації, візуальною привабливістю та гнучкістю налаштувань.
З метою формування чіткої картини, доцільно подати порівняльну
характеристику зазначених сервісів у вигляді таблиці:
Таблиця 1.1 – Порівняльна таблиця систем для отримання прогнозу погоди
Критерій «Sinoptik.ua» «Meteoprog.ua» «Windy.com»
Наявність української мови Так Так Так
Адаптивний інтерфейс Так Так Так
Тривалість прогнозу 10 днів 15 днів 10 днів
Погодинний прогноз Частково Так Так
Візуалізація даних на карті Ні Ні Так
Графіки та аналітика Ні Так Так
Тематичні розділи Ні Так Так
Простота та інтуїтивність
Висока Середня Низька
інтерфейсу
Наявність мобільної версії Так Так Так
Необхідність реєстрації Ні Ні Ні
Аналіз таблиці свідчить про те, що жоден із розглянутих сервісів не є
універсальним рішенням, яке б повною мірою задовольняло потреби як звичайного
користувача, так і спеціаліста, що потребує розширених погодних даних. Sinoptik.ua
зручний у використанні, але функціонально обмежений. «Meteoprog.ua» пропонує
широку інформацію, але інтерфейс може бути перевантаженим для недосвідченого
користувача. «Windy.com» є надзвичайно потужним інструментом, але його
використання потребує певних навичок, що обмежує доступність для широкої
аудиторії.
26
Постановка завдання. Для досягнення мети кваліфікаційної роботи бакалавра
необхідно вирішити такі основні завдання:
спроєктувати архітектуру веб-застосунку, включаючи клієнтську та серверну
частини;
реалізувати клієнтську частину системи з адаптивним веб-інтерфейсом;
реалізувати серверну логіку з підключенням до відкритого API для отримання
метеорологічної інформації;
забезпечити базову візуалізацію основних параметрів прогнозу погоди
(температура, вологість, опади, вітер, тиск);
надати користувачеві можливість пошуку та вибору населеного пункту;
виконати тестування працездатності системи та оцінити її функціональність,
зручність та швидкодію.
Результатом виконання кваліфікаційної роботи бакалавра має стати повністю
функціональна веб-орієнтована інформаційна система для отримання прогнозу
погоди, яка демонструє основні принципи побудови інформаційних систем на основі
сучасних веб-технологій та відповідає актуальним вимогам до простоти
використання, ефективності та доступності погодних даних.
Висновки до розділу 1
У розділі здійснено теоретичне обґрунтування теми кваліфікаційної роботи
бакалавра, проаналізовано актуальність створення веб-орієнтованої інформаційної
системи для отримання прогнозу погоди, визначено об'єкт і предмет дослідження,
сформульовано мету та завдання роботи.
Проведено огляд сучасного стану використання веб-технологій у сфері
метеорології, встановлено основні тенденції розвитку таких інформаційних систем.
Окрему увагу приділено аналізу найбільш популярних веб-ресурсів, які надають
погодну інформацію: «Sinoptik.ua», «Meteoprog.ua» та «Windy.com». Розглянуто їхні
основні функціональні можливості, особливості інтерфейсу, формат подачі даних,
сильні та слабкі сторони.
27
Узагальнення результатів аналізу подано у вигляді порівняльної таблиці, що
дозволило виявити недоліки існуючих сервісів, зокрема відсутність універсального
рішення з одночасною підтримкою простоти використання, візуалізації, швидкодії
та доступності базових даних без перевантаження інтерфейсу. На підставі цього
сформульовано постановку завдання на кваліфікаційну роботу бакалавра, яка
передбачає розробку веб-орієнтованої інформаційної системи для отримання
прогнозу погоди, здатної забезпечити користувача стислим і наочним прогнозом
погоди з використанням сучасних інструментів веб-розробки.
28
2 ПРОЄКТУВАННЯ ВЕБ-ОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИ ДЛЯ ОТРИМАННЯ ПРОГНОЗУ ПОГОДИ
2.1 Опис функціонального програмного середовища для розробки
Для ефективної реалізації веб-орієнтованої інформаційної системи прогнозу
погоди було обрано сучасне інтегроване середовище розробки WebStorm, створене
компанією JetBrains. Це потужне інструментальне середовище спеціально
орієнтоване на веб-розробку, з акцентом на роботу з мовами JavaScript, TypeScript,
HTML, CSS та фреймворками, що базуються на них [4]. WebStorm забезпечує
широкий спектр можливостей, які значно спрощують розробку, налагодження,
тестування та підтримку веб-додатків (рис. 2.1).
Рисунок 2.1 – Інтерфейс середовища розробки JetBrains WebStorm [4]
29
Середовище WebStorm надає розробнику зручний графічний інтерфейс,
систему автодоповнення коду, розширені засоби рефакторингу, інтегровану систему
контролю версій, вбудований термінал, а також засоби відлагодження як на
клієнтському, так і на серверному боці. Однією з ключових переваг WebStorm є
глибока інтеграція з популярними інструментами та бібліотеками, зокрема Node.js,
React, Express, npm, Webpack, Babel тощо, що дозволяє налаштовувати повноцінне
середовище для створення повнофункціональної веб-системи.
WebStorm підтримує розширення проєктів за допомогою шаблонів, дозволяє
створювати структуру застосунку з урахуванням сучасних архітектурних підходів
(наприклад, компонентно-орієнтованої розробки у React). Також середовище
містить вбудований перегляд HTML-сторінок у браузері, миттєве оновлення після
збереження файлів (live reload), а також потужну систему linting-аналізу, яка
забезпечує контроль якості коду відповідно до стандартів ESLint або Prettier.
Особливу увагу варто приділити інтеграції WebStorm із системами контролю
версій, такими як Git. Розробник має змогу безпосередньо з інтерфейсу середовища
виконувати всі основні дії: ініціалізацію репозиторію, коміти, відкат змін, злиття
гілок тощо. Це дозволяє контролювати всі етапи розробки програмного продукту без
потреби перемикання між середовищами. WebStorm також підтримує налаштування
середовища розробки через файл package.json, дозволяє легко підключати
залежності, налаштовувати скрипти запуску, тестування та збірки проєкту.
Наявність автоматизованої перевірки помилок, підсвічування синтаксису, а також
інтеграція з дебагерами робить цей інструмент універсальним рішенням для
створення якісних і стабільних веб-додатків.
Підсумовуючи, слід зазначити, що WebStorm є доцільним вибором для
розробки веб-орієнтованої інформаційної системи прогнозу погоди. Це середовище
дозволяє швидко реалізовувати функціонал, ефективно працювати з компонентами
інтерфейсу, обробляти запити до API, налагоджувати взаємодію між клієнтською та
серверною частинами.
30
2.2 Основні принципи розробки веб-орієнтованих інформаційних
систем для отримання прогнозу погоди
Розробка веб-орієнтованої інформаційної системи для отримання прогнозу
погоди базується на сукупності технічних, архітектурних і функціональних
принципів, які забезпечують надійну, швидку, зручну у використанні та
масштабовану програмну платформу. Такі системи мають забезпечити
користувачеві своєчасний доступ до актуальної метеорологічної інформації у
форматі, зручному для сприйняття, з урахуванням можливості доступу з різних
типів пристроїв – комп’ютерів, планшетів, смартфонів.
Веб-орієнтовані інформаційні системи подібного типу умовно складаються з
двох ключових компонентів – клієнтської частини (frontend), яка відповідає за
взаємодію з користувачем, і серверної частини (backend), що здійснює обробку
запитів, роботу з API [5], кешування даних, а також забезпечує логіку
функціонування системи. При цьому важливим є дотримання певних принципів, що
визначають якість, ефективність і зручність програмного продукту.
Одним із ключових принципів є архітектурна модульність. Система повинна
мати чітко визначену структуру, де кожен компонент виконує конкретну функцію.
Це забезпечує гнучкість у розробці, полегшує тестування, оновлення окремих
частин додатка та дозволяє масштабувати систему в майбутньому. Наприклад,
окремо реалізуються модулі для пошуку населених пунктів, отримання погодних
даних, відображення прогнозу, а також логіка обробки помилок.
Іншим фундаментальним підходом є розділення логіки клієнта та сервера.
Серверна частина, яка виконує роль посередника між користувачем і зовнішнім
джерелом даних (наприклад, метеорологічним API), повинна бути відповідальною
за формування необхідної інформації, її обробку та передачу клієнтському
застосунку. Клієнтська частина зосереджується виключно на інтерфейсі та взаємодії
з користувачем. Це дозволяє зменшити навантаження на фронтенд та підвищити
продуктивність.
31
Особливе значення в контексті таких систем має інтеграція з зовнішніми
джерелами метеорологічних даних. Сучасні сервіси надають API для отримання
актуальної погодної інформації у форматі JSON або XML. При цьому важливо
враховувати обмеження кількості запитів, правила авторизації через API-ключі,
особливості структури відповідей та механізми обробки помилок. Правильна
реалізація взаємодії із зовнішнім API дозволяє отримувати точну та актуальну
інформацію без затримок [5].
Ще одним важливим принципом є асинхронність обробки запитів. Погодні
дані надходять із віддалених серверів, тому їх отримання може займати певний час.
Щоб уникнути блокування інтерфейсу користувача під час очікування відповіді,
застосовуються асинхронні методи, зокрема використання технології fetch,
async/await або промісів. Це дозволяє підтримувати плавну роботу застосунку навіть
за умови повільного з’єднання.
Оптимізація запитів і кешування також є невід’ємною складовою якісної веб-
системи. З метою зменшення навантаження на API, підвищення швидкодії та
зменшення кількості повторних звернень до одного й того самого ресурсу
рекомендується реалізовувати кешування результатів попередніх запитів у
локальному сховищі браузера або на сервері. Наприклад, інформація про погоду для
певного населеного пункту може зберігатися протягом 10–15 хвилин, після чого
буде оновлена при повторному зверненні.
Одним із визначальних чинників зручності використання є адаптивний
інтерфейс. Інформаційна система повинна коректно працювати на різних пристроях,
зокрема мобільних. Для цього застосовується адаптивна верстка з використанням
медіа-запитів CSS та фреймворків для компонентної розмітки (наприклад, Chakra
UI, Tailwind CSS тощо). Зміст і структура інтерфейсу мають автоматично
підлаштовуватись до розміру екрана користувача без втрати функціональності.
Особливу увагу при розробці слід приділяти юзабіліті – зручності
користування системою. Інтерфейс повинен бути інтуїтивно зрозумілим, містити
мінімальну кількість кліків до цільової інформації, мати логічно структуровані
елементи, читабельні шрифти, помітні візуальні акценти. Важливо уникати
32
перевантаження інтерфейсу другорядною інформацією, надаючи користувачу лише
найбільш значущі параметри – температуру, опади, вітер, тиск. При потребі
розширена інформація може бути доступною за окремим запитом або в розділі
“детальніше”.
Значну роль у процесі розробки відіграє тестування. На всіх етапах створення
веб-застосунку необхідно перевіряти коректність обробки даних, роботу API-
запитів, відображення інтерфейсу на різних пристроях і браузерах. Тестування
включає перевірку поведінки системи при втраті інтернет-з’єднання, обробку
помилок API, неправильні введення з боку користувача тощо. Завдяки цьому
забезпечується стабільність і надійність роботи системи у реальних умовах.
Захист від збоїв також є важливою складовою. Оскільки система залежить від
зовнішніх джерел, необхідно передбачити повідомлення для користувача у випадку
помилки, відсутності даних або перевищення ліміту запитів. Замість технічного
повідомлення слід реалізовувати дружні до користувача повідомлення на кшталт:
"На жаль, не вдалося завантажити прогноз. Спробуйте пізніше."
Ще один принцип – можливість масштабування. Проєкт має бути побудований
таким чином, щоб в майбутньому можна було додати нові функціональні
можливості: наприклад, прогноз на основі кількох джерел, додаткові параметри,
статистику, мапи тощо. Це досягається завдяки правильному структурованому коду,
поділу логіки на незалежні компоненти, дотриманню шаблонів проектування та
використанню сучасних фреймворків.
Не менш важливим є дотримання стандартів безпеки. Попри те, що система не
обробляє конфіденційні дані, підключення до API має здійснюватися з урахуванням
безпечної передачі даних через HTTPS, уникнення жорстко закодованих ключів API
на клієнтській стороні та обмеження доступу до службових маршрутів сервера. Усі
ключі мають зберігатися в захищених середовищах виконання або .env-файлах, які
не передаються у відкритому доступі.
Врахування всіх перелічених принципів дозволяє побудувати ефективну,
масштабовану, зручну та надійну веб-орієнтовану інформаційну систему прогнозу
погоди. Її структура повинна передбачати мінімум затримок у роботі, швидке
33
реагування на дії користувача, легкість підтримки та простоту впровадження нових
функцій. Урахування вимог до юзабіліті, адаптивності, кешування та безпеки
формує основу для створення якісного програмного продукту, придатного для
практичного використання в реальних умовах.
Таким чином, ефективна розробка веб-орієнтованої інформаційної системи
подібного типу можлива лише за умови комплексного підходу, що поєднує технічну
компетентність, дотримання архітектурних принципів, орієнтацію на кінцевого
користувача та використання перевірених рішень сучасної веб-розробки.
2.3 Архітектура веб-орієнтованої інформаційної системи для
отримання прогнозу погоди
Архітектура веб-орієнтованої інформаційної системи для отримання прогнозу
погоди побудована на основі принципів клієнт-серверної взаємодії з реалізацією у
вигляді односторінкового веб-застосунку (рис. 2.2).
Рисунок 2.2 – Архітектурна схема системи [6]
Вона передбачає розділення програмної логіки на окремі функціональні
блоки, що дозволяє забезпечити масштабованість, модульність і зручність у
підтримці. Користувацький інтерфейс реалізовано з використанням сучасного
фреймворку React компонентного типу, що дозволяє ефективно керувати
відображенням даних та забезпечує гнучку побудову структури застосунку.
Клієнтська частина системи відповідає за взаємодію з користувачем,
динамічне оновлення даних та графічне відображення погодних показників. Вона
34
реалізована як набір окремих візуальних компонентів, кожен з яких виконує
конкретне призначення – виведення прогнозу, візуалізація повідомлень, індикація
завантаження або помилки, відображення карти місцевості. Компоненти
поєднуються між собою у межах головного представлення застосунку, яке
формується при першому завантаженні сторінки. Весь інтерфейс має адаптивну
верстку, що забезпечує його коректне функціонування на різних пристроях з різною
шириною екрана.
Програмна логіка застосунку організована на основі реактивного підходу, при
якому зміна стану автоматично спричиняє оновлення відповідних елементів
інтерфейсу. Для керування даними використано механізм глобального стану, що дає
змогу централізовано зберігати, передавати та оновлювати інформацію, пов’язану з
прогнозом погоди. Це особливо важливо у випадку взаємодії з асинхронними
джерелами даних, такими як зовнішні програмні інтерфейси, через які здійснюється
отримання прогнозів. Використання глобального стану дозволяє уникнути
дублювання запитів і забезпечити узгодженість даних між різними частинами
системи.
Зовнішня інформація надходить із метеорологічного веб-сервісу через API.
Система надсилає запити на основі координат користувача або введеного населеного
пункту, після чого отримані дані обробляються та передаються у вигляді
структурованої інформації до інтерфейсу. Для зменшення навантаження та
підвищення продуктивності реалізовано збереження погодних даних у локальній
памʼяті браузера, що дозволяє при повторному відвідуванні сторінки миттєво
завантажити останній отриманий прогноз без необхідності повторного звернення до
API. Такий підхід також дозволяє зменшити ризик досягнення ліміту запитів, який
часто встановлюється зовнішніми постачальниками погодних даних.
Уся логіка запитів до API винесена в окремий шар взаємодії з даними, що чітко
відокремлений від презентаційного рівня. Це дозволяє легко змінювати джерело
прогнозу або адаптувати формат обробки відповіді без втручання в структуру
інтерфейсу. Важливо, що система враховує можливі збої в роботі API та реалізує
відповідне оброблення помилок. У випадку відсутності інтернет-з’єднання або
35
помилкової відповіді від сервера користувач отримує зрозуміле повідомлення про
проблему, що підвищує зручність і передбачуваність системи.
Користувацький інтерфейс побудований за принципами мінімалізму та
акценту на основних параметрах. При першому запуску сторінки система визначає
місцезнаходження користувача або дозволяє ввести назву населеного пункту, для
якого буде здійснено запит. Отримана інформація відображається у вигляді окремих
блоків з прогнозом на декілька днів, значеннями температури, вологості,
атмосферного тиску, вітру та загальним описом погодних умов. Усі дані
представлені у доступній та компактній формі без перевантаження інтерфейсу
другорядними деталями.
Статичні ресурси, зокрема зображення, піктограми, фавікони, а також базові
HTML-файли, розміщено в окремому каталозі, що забезпечує їх незалежність від
основного коду застосунку. Це сприяє швидшому завантаженню сторінки та
дозволяє браузеру кешувати повторно використовувані елементи. Для стилізації
інтерфейсу використано адаптивні таблиці стилів, які забезпечують правильне
масштабування елементів, їх взаємне позиціювання та коректне відображення в
різних браузерах.
Важливим елементом архітектури є система збирання та запуску застосунку.
Для цього використовується інструмент, що дозволяє швидко компілювати проєкт,
оптимізувати розмір фінального коду, автоматично оновлювати сторінку при зміні
компонентів у середовищі розробки, а також створювати готову до публікації
версію. Це значно прискорює цикл розробки та дозволяє розгортати застосунок на
різних платформах – як локально, так і на хостингу.
Структура проєкту є чітко впорядкованою: програмна логіка, інтерфейс,
обробка даних і стилі поділені між собою, що підвищує читабельність коду та
спрощує підтримку. У разі необхідності розширення системи, наприклад, додавання
нових параметрів або розділів, це може бути здійснено без суттєвого переписування
наявного функціоналу, що свідчить про ефективність обраної архітектури.
Враховуючи, що застосунок створено як односторінковий, усі оновлення вмісту
36
здійснюються без перезавантаження сторінки, що позитивно впливає на швидкість і
зручність взаємодії.
Побудована архітектура забезпечує високий рівень ізоляції відповідальності
між різними частинами застосунку. Кожен функціональний блок може бути
протестований окремо, що значно полегшує налагодження та пошук помилок. У
майбутньому систему можна адаптувати для підключення альтернативних джерел
погодних даних, розширити її картографічними модулями або реалізувати
функціональність особистого кабінету користувача без зміни основної структури.
Це дозволяє розглядати створений застосунок як гнучку базу для подальшого
розвитку.
Таким чином, архітектура веб-орієнтованої інформаційної системи для
отримання прогнозу погоди побудована на основі сучасних принципів модульності,
масштабованості, реактивності та розділення логіки. Її реалізація забезпечує
ефективну взаємодію з користувачем, стабільне отримання погодних даних, високу
швидкодію та простоту адаптації до нових функціональних потреб. У наступному
розділі буде детально описано процес реалізації окремих компонентів системи.
2.4 Розробка діаграми варіантів використання
Розробка діаграми варіантів використання (use case diagram) є важливим
етапом моделювання функціональної структури інформаційної системи. Така
діаграма дозволяє візуалізувати взаємодію зовнішніх учасників із системою та
визначити основні сценарії її використання [7]. У контексті веб-орієнтованої
інформаційної системи для отримання прогнозу погоди діаграма варіантів
використання описує, які дії може виконувати користувач і як система реагує на ці
дії.
Основним учасником системи є користувач, який взаємодіє із застосунком
через веб-інтерфейс. Усі сценарії, що відображаються на діаграмі, спрямовані на
забезпечення доступу до актуальної метеорологічної інформації у зручному
форматі. Основні варіанти використання включають: перегляд прогнозу погоди для
37
певного міста, вибір місця розташування, отримання розширеного прогнозу,
оновлення даних, а також обробку ситуацій, коли погодна інформація тимчасово
недоступна.
При завантаженні застосунку користувач має можливість переглянути погодні
умови за замовчуванням або вказати потрібне місто вручну. Система надсилає
відповідний запит до зовнішнього джерела даних і після отримання відповіді
відображає базову метеорологічну інформацію. За бажанням користувача можна
здійснити оновлення прогнозу або змінити місце розташування для перегляду даних
іншого регіону.
Важливим функціональним елементом є також обробка виняткових ситуацій,
наприклад, помилки під час завантаження даних або відсутності з'єднання з
сервером. У таких випадках система повинна інформувати користувача про
проблему та запропонувати повторити запит.
Діаграма варіантів використання дозволяє структурувати основні функції, які
виконує система з точки зору зовнішнього користувача, що, у свою чергу, є
корисним при проєктуванні та реалізації програмної логіки. Застосування цієї UML-
діаграми надає змогу узагальнити вимоги до системи, оптимізувати взаємодію її
частин та забезпечити зручну основу для подальшого розширення функціоналу.
У наступному фрагменті буде наведено відповідну діаграму варіантів
використання (рис. 2.3), що відображає основні дії користувача та реакцію системи.
Рисунок 2.3 – Діаграма варіантів використання
38
2.5 Взаємодія із зовнішнім API
У розробленій веб-орієнтованій інформаційній системі для отримання
прогнозу погоди традиційна база даних не використовується. Уся метеорологічна
інформація надходить у реальному часі через інтеграцію з зовнішнім програмним
інтерфейсом (API), що надає доступ до актуальних погодних даних. Таким чином,
постійне збереження даних у локальному або серверному сховищі в межах проєкту
не передбачається.
Запити до API здійснюються безпосередньо з клієнтської частини застосунку
[5]. У відповідь система отримує структуровані дані у форматі JSON, які
обробляються в межах сесії користувача та відображаються в інтерфейсі без потреби
у проміжному збереженні. Такий підхід забезпечує високу актуальність інформації,
зменшує обсяг локальної інфраструктури, а також спрощує архітектуру системи.
З метою підвищення продуктивності застосунку та уникнення надмірної
кількості запитів до зовнішнього сервера реалізовано механізм тимчасового
кешування отриманої інформації в локальному сховищі браузера. Це дозволяє
зберігати результати останнього успішного запиту в межах поточної сесії. У разі
повторного звернення до тієї самої локації протягом короткого проміжку часу дані
завантажуються з кешу, що знижує затримку в роботі та навантаження на зовнішній
API. На рис. 2.4 наведено діаграму структури даних, які надходять від API.
Варто зазначити, що вибір моделі без використання бази даних є виправданим
для систем, основною метою яких є відображення динамічної інформації, що
регулярно оновлюється. Такий підхід дозволяє уникнути дублювання даних,
зменшити складність підтримки проєкту та забезпечити простоту його розгортання.
У разі подальшого розширення функціональності системи, зокрема
впровадження історії переглядів, персоналізації користувачів або ведення журналу
запитів, можлива інтеграція з базою даних. У такому випадку буде доцільним
застосування легких схем зберігання на основі документних або реляційних
структур. Наразі ж обрана модель без використання постійного сховища повністю
задовольняє потреби проєкту та відповідає поставленим функціональним вимогам.
39
Рисунок 2.4 – Схема структури даних
2.6 Опис процесу проєктування структури веб-орієнтованої
інформаційної системи для отримання прогнозу погоди
Процес проєктування структури веб-орієнтованої інформаційної системи
прогнозу погоди передбачає поетапне формування архітектурної моделі, яка
забезпечує ефективну, гнучку та масштабовану побудову клієнтського застосунку.
Структура системи формується з урахуванням функціональних вимог, принципів
модульності, розділення відповідальності та дотримання сучасних підходів до веб-
розробки.
40
На початковому етапі було визначено базову функціональність системи.
Основним її завданням є надання користувачеві актуальної метеорологічної
інформації у зручному форматі з можливістю вибору населеного пункту. Оскільки
прогноз отримується безпосередньо через API, структура системи не потребує
розгортання серверної частини з базою даних. Це дозволило зосередити
проєктування на побудові клієнтської частини та логіці взаємодії з API.
Далі було сформовано загальну архітектуру застосунку, у якій виділено кілька
ключових рівнів: інтерфейс користувача, логіку керування станом, модуль взаємодії
з API, систему кешування, а також блок обробки помилок. Взаємодія між цими
рівнями організована таким чином, щоб забезпечити максимальну незалежність
компонентів та їх легке масштабування або модифікацію в разі потреби. Основна
увага при проєктуванні приділялася тому, щоб інформація виводилася швидко, була
актуальною, а інтерфейс залишався зрозумілим і стабільним.
При формуванні структури інтерфейсу було враховано вимогу до
адаптивності. Система повинна однаково добре відображатися як на великих
екранах настільних комп’ютерів, так і на мобільних пристроях. Для цього обрано
технології, що підтримують адаптивну верстку з можливістю автоматичної зміни
розміщення елементів залежно від розміру вікна браузера. При проєктуванні
інтерфейсу також було передбачено логічне розташування елементів: пошукове
поле, основна панель прогнозу, розширений прогноз, індикатори стану та додаткові
повідомлення.
Процес взаємодії з зовнішнім API спроєктовано з урахуванням ефективності
та відмовостійкості. Структура системи передбачає виклик API лише у разі зміни
міста або за відсутності даних у кеші. Отримані JSON-дані обробляються
відповідним модулем, який формує структуровану відповідь і передає її до
головного стану застосунку. Паралельно реалізовано обробку типових помилок,
таких як недоступність API або неправильні координати. У таких випадках
користувач отримує зрозуміле повідомлення без переривання роботи інтерфейсу.
Проєктування структури системи також включало опис потоків даних та
способу їх обробки. Було враховано, що метеорологічні дані містять вкладену
41
структуру, а тому потрібно реалізувати механізм їх розбору, відображення й
оновлення без надмірної затримки. У структурі передбачено збереження частини
даних у сесії, що дозволяє уникати повторних запитів при короткостроковому
поверненні користувача до програми.
Особливу увагу під час проєктування було приділено можливості подальшого
розвитку системи. Компоненти реалізовані таким чином, щоб при потребі можна
було легко додати нові блоки – наприклад, карту, графіки змін погодних показників
або багатомовний інтерфейс. Завдяки цьому система не є жорстко обмеженою, а її
структура підтримує гнучкість і масштабованість.
У процесі проєктування також було створено моделі, що описують логіку
виконання основних дій у вигляді UML-діаграм. На діаграмі діяльності (рис. 2.5)
показано загальний алгоритм роботи веб-застосунку: від моменту ініціалізації
інтерфейсу до отримання та виведення прогнозу погоди. Сценарій охоплює як
роботу з кешем, так і взаємодію з API у разі відсутності актуальних даних.
Рисунок 2.5 – Діаграма діяльності користувача під час отримання прогнозу погоди
42
Також для уточнення механізму взаємодії між окремими компонентами
системи побудовано діаграму послідовності (рис. 2.6) [8], яка демонструє
взаємозв’язки між користувачем, інтерфейсом, менеджером кешу та зовнішнім API.
Вона відображає порядок викликів функцій, обробку результатів та оновлення
інтерфейсу.
Рисунок 2.6 – Діаграма послідовності отримання повідомлення в реальному часі
2.7 Проєктування інтерфейсу користувача
Інтерфейс користувача є ключовим елементом будь-якої веб-орієнтованої
інформаційної системи, оскільки саме він забезпечує основну взаємодію між
людиною та функціональною логікою програмного продукту. При проєктуванні
інтерфейсу веб-застосунку для отримання прогнозу погоди було враховано вимоги
до доступності, зручності використання, мінімалізму, читабельності й адаптивності.
Основна мета полягала в тому, щоб надати користувачеві можливість швидко
43
отримати актуальний прогноз із мінімальними зусиллями та без необхідності
навігації через надлишкові елементи.
На головному екрані інтерфейсу користувач бачить поточну температуру,
опис погодних умов, а також базові метеорологічні показники — відчутну
температуру, вологість, швидкість вітру, видимість, мінімальну та максимальну
температуру. Вся інформація згрупована в окремі візуальні блоки, які логічно
розділено за змістом, що підвищує зручність сприйняття. Використання кольорів зі
спокійною палітрою та достатнім контрастом між текстом і фоном сприяє кращій
читаємості навіть на мобільних пристроях.
У верхній частині інтерфейсу розташоване поле введення для пошуку міста та
кнопки керування – запуск пошуку й отримання прогнозу для поточного
розташування. Це дозволяє користувачу самостійно вибрати будь-яке місто або
просто натиснути відповідну кнопку для автоматичного визначення координат і
виклику API. Поруч із поточними даними розміщено інтерактивну карту Google
Maps, яка відображає географічне розташування обраного населеного пункту. Такий
підхід поєднує географічну візуалізацію з фактичними метеоданими.
В нижній частині екрану розміщено блок із прогнозом погоди на наступні дні.
Кожен день представлено у вигляді окремої картки з датою, піктограмами стану
погоди (сонце, хмари, дощ), температурою вдень і вночі, а також коротким
текстовим описом. Користувач може клацнути на будь-який день, щоб переглянути
розширену інформацію про погоду на цей день – з додатковими деталями,
включаючи тиск, температуру вранці, вдень, ввечері та вночі, відчутну температуру
та інші показники. Це реалізовано у вигляді модального вікна, яке з'являється поверх
основного інтерфейсу.
На рисунку 2.7 продемонстровано загальний вигляд сторінки після виконання
пошуку. Тут можна побачити структуру розташування елементів, відображення
поточної погоди та прогноз на декілька днів. На рисунку 2.8 показано розширене
модальне вікно з деталізованим прогнозом на один обраний день, яке відкривається
після натискання на одну з карток нижнього блоку.
44
Проєктування інтерфейсу здійснювалося з орієнтацією на кінцевого
користувача, що не має спеціалізованих технічних знань. Завдяки цьому вдалося
досягти інтуїтивно зрозумілого користувацького досвіду. Інформація виводиться у
чіткій ієрархії, без інформаційного перевантаження, що відповідає принципам
сучасного UX-дизайну.
Рисунок 2.7 – Загальний вигляд сторінки
Таким чином, розроблений інтерфейс забезпечує швидкий доступ до
ключових показників погоди, гнучкість у виборі локації, зручне сприйняття
інформації та можливість отримання розширеної інформації без складної навігації.
Це відповідає цілям, поставленим при проєктуванні, і створює якісний та
функціональний користувацький досвід.
Рисунок 2.8 – Розширене модальне вікно
45
Висновки до розділу 2
У цьому розділі здійснено технічне обґрунтування розробки веб-орієнтованої
інформаційної системи для отримання прогнозу погоди, що включає вибір
інструментальних засобів, опис архітектури, логіки функціонування, структури
інтерфейсу та механізмів взаємодії з зовнішніми сервісами.
На основі аналізу особливостей реалізації було обґрунтовано використання
сучасного середовища розробки WebStorm, що забезпечує ефективну побудову
інтерфейсу, зручність тестування та модульність коду. Визначено основні принципи
створення веб-застосунку: асинхронна обробка запитів, адаптивність інтерфейсу,
кешування даних, розділення відповідальності між компонентами та централізоване
керування станом. Архітектура системи побудована на основі односторінкового
застосунку, де реалізовано взаємодію з API без залучення бази даних.
Під час розробки було описано логічну структуру системи, а також
представлено її діаграми: архітектурну, варіантів використання, діяльності та
послідовності. Ці моделі наочно ілюструють основні процеси, що відбуваються у
веб-застосунку – від завантаження інтерфейсу до отримання та відображення даних.
Також сформовано структуру відповіді від зовнішнього API, що дозволяє
формалізувати обробку метеорологічної інформації на рівні коду.
Окрему увагу приділено процесу проєктування інтерфейсу користувача.
Враховано принципи мінімалізму, доступності, візуальної ієрархії та зручності
взаємодії. Система дозволяє переглядати як поточний прогноз, так і погодні умови
на кілька днів, а також відкривати розширену інформацію для кожного окремого
дня. Продемонстровано приклади реалізації інтерфейсу у вигляді скріншотів, що
підтверджують завершеність і працездатність розробленого рішення.
Таким чином, результати другого розділу створюють комплексну технічну
основу для реалізації інформаційної системи. Усі ключові архітектурні та
інтерфейсні рішення прийнято з урахуванням функціональних вимог, актуальності,
гнучкості та можливості подальшого масштабування.
46
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Постановка завдання
На основі проєктних рішень, сформованих у попередньому розділі, на даному
етапі поставлено завдання щодо технічної реалізації веб-орієнтованої інформаційної
системи для отримання прогнозу погоди. Основною метою є створення системи у
вигляді веб-застосунку, який у реальному часі взаємодіє з зовнішнім API та надає
користувачеві погодну інформацію у зручному, адаптивному та візуально
зрозумілому форматі.
Розробку реалізовано з використанням сучасного технологічного стека, що
включає мову програмування JavaScript, бібліотеку React для побудови інтерфейсу
користувача [9], бібліотеку Redux для керування станом [10], а також інструмент
збірки Vite, що забезпечує швидке налаштування та ефективну оптимізацію під час
розробки [11]. Вся клієнтська логіка побудована у вигляді модульних компонентів,
що забезпечує гнучкість, масштабованість та повторне використання коду.
Важливою умовою реалізації є відсутність серверної частини застосунку: уся
взаємодія з погодним джерелом даних відбувається безпосередньо через клієнтські
запити до відкритого API. Відповіді від API обробляються у форматі JSON,
парсяться, фільтруються та відображаються на інтерфейсі без використання
проміжного зберігання у базі даних. Однак для оптимізації повторного доступу
застосунок використовує кешування даних у локальному сховищі браузера, що
дозволяє зменшити кількість запитів до API й покращити швидкість відгуку.
Поставлене технічне завдання включає реалізацію таких функціональних
блоків:
головного екрану з поточним прогнозом погоди та ключовими показниками
(температура, вологість, вітер, тиск, видимість);
модуля пошуку населеного пункту з можливістю автоматичного визначення
поточного розташування користувача через браузер;
47
відображення прогнозу погоди на кілька днів у вигляді карток із основними
даними;
відкриття модального вікна з детальною інформацією про обраний день;
інтеграції карти з відображенням місцезнаходження обраного міста;
обробки виняткових ситуацій, таких як помилки API або втрата мережевого
з’єднання.
Інтерфейс має бути адаптивним, тобто коректно відображатися як на великих
екранах (настільні ПК), так і на мобільних пристроях. Відповідно до поставленого
завдання, усі стилі реалізуються за допомогою CSS, із використанням сучасного
підходу до гнучкої верстки (Flexbox, media-запити). Компонентна структура коду
дозволяє легко додавати нові функціональні можливості без порушення вже
реалізованої логіки.
Крім того, для забезпечення контрольованості коду в процесі розробки
використовується система контролю версій Git. Розробка здійснюється у середовищі
WebStorm, що дозволяє ефективно налагоджувати логіку взаємодії між
компонентами, використовувати вбудовані інструменти для перевірки синтаксису та
підтримувати єдині стандарти оформлення.
Таким чином, поставлене технічне завдання охоплює реалізацію
повнофункціонального веб-застосунку з інтеграцією до зовнішнього API,
забезпеченням якісного інтерфейсу та високої швидкодії при обробці
метеорологічних даних. Наступні підрозділи міститимуть детальний опис реалізації
кожного з функціональних блоків системи.
У рамках реалізації веб-орієнтованої інформаційної системи прогнозу погоди
її структура побудована на основі компонентного підходу, притаманного бібліотеці
React. Кожен візуальний та логічний блок реалізовано як окремий компонент, що
взаємодіє з іншими через пропси, хук-стани, контекст або глобальне сховище Redux.
На основі аналізу ключових компонентів застосунку побудовано діаграму
класів (рис. 3.1), що відображає взаємозв’язки між основними елементами. До
головних логічних одиниць належать: «Navbar» (пошукова панель), «Details»
(основний вивід даних), «Map» (відображення карти), «Forecast» і «ForecastModal»
48
(погода на кілька днів і детальна інформація), «Loading» та «Error» (статуси
відображення), а також допоміжні компоненти: «Newbox», «NewText»,
«ForecastBox».
Крім візуальних компонентів, структура програми містить логічні модулі
«actions.js» і «sessionStorage.js», які реалізують API-запити, синхронізацію,
кешування та обробку стану. Дані надходять до головного компонента «Details»,
який розподіляє їх між візуальними блоками відповідно до структури прогнозу.
Рисунок 3.1 – Діаграма класів
49
3.2 Інтерфейс веб-орієнтованої інформаційної системи для отримання
прогнозу погоди
Інтерфейс розробленої інформаційної системи прогнозу погоди реалізований
на основі компонентного підходу, що характерний для бібліотеки React. Це дозволяє
будувати інтерфейс у вигляді модульної структури, де кожен візуальний або
функціональний блок оформлений як окремий компонент з власною логікою,
стилями та життєвим циклом.
Основним елементом інтерфейсу є головна сторінка, яка динамічно
оновлюється без перезавантаження завдяки механізмам внутрішнього стану
(useState) та побічних ефектів (useEffect). Для обробки глобального стану
застосунку, включно з погодними даними, станом завантаження та помилками,
використано бібліотеку Redux. Це дозволило централізувати логіку оновлення
інтерфейсу, зробити її передбачуваною, а також забезпечити легкість у
масштабуванні проєкту.
Компонент навігаційної панелі реалізує поле введення з можливістю пошуку
населеного пункту. Обробка подій здійснюється за допомогою React-хук функцій, а
ініціалізація API-запитів виконується за допомогою асинхронних дій, які через
Redux викликають відповідні функції у файлі логіки actions.js. У результаті
інтерфейс оновлюється відповідно до отриманих даних, а введене місто зберігається
у локальному сховищі сесії браузера для повторного використання.
Блок основної інформації про погоду створено як незалежний компонент, у
якому виводяться такі параметри, як температура, тиск, вологість, вітер, видимість,
стан неба (хмарність, дощ), а також графічна піктограма, що ілюструє погодні
умови. Відповідність між API-даними та виводом в інтерфейсі забезпечується через
обробку JSON-структури відповіді. Значення параметрів округлюються,
форматуються та передаються у візуальні блоки через пропси.
Для виводу багатоденного прогнозу реалізовано окремий компонент, який
генерує набір карток з інформацією по кожному дню. Дані прогнозу парсяться з API,
після чого кожен день трансформується у компонент з датою, піктограмою погоди,
50
температурою вдень і вночі. За натисканням на окрему картку відкривається
модальне вікно з розширеною інформацією, реалізоване з використанням UI-
компонентів бібліотеки Chakra UI. Це дозволяє підтримувати однаковий стиль усіх
елементів, спрощує доступність і забезпечує адаптивність без надлишкових CSS-
налаштувань.
Інтерактивна карта Google Maps інтегрована через iframe, у який динамічно
підставляється координата обраного міста. Вона слугує візуальним доповненням до
метеорологічної інформації та дозволяє користувачеві орієнтуватися в
географічному розташуванні.
Система реалізована без серверної частини – усі дані отримуються напряму
через API-запити з клієнта, а кешування здійснюється локально в браузері за
допомогою обгорток над sessionStorage. Це значно спрощує архітектуру застосунку
й забезпечує його швидкодію.
Для стилізації застосовано кастомізовані компоненти Chakra UI разом з
власними CSS-класами. Візуальна структура інтерфейсу побудована з урахуванням
адаптивності, завдяки чому інтерфейс коректно відображається як на великих
моніторах, так і на екранах мобільних пристроїв. Застосовано сучасні підходи до
верстки, зокрема Flexbox та Grid, що дозволяє гнучко формувати сітку інтерфейсу
відповідно до змісту та розміру екрана.
У результаті реалізовано легкий, зручний, інтуїтивно зрозумілий інтерфейс,
який швидко реагує на дії користувача, коректно обробляє помилки, а також
дозволяє безперешкодно взаємодіяти з системою у будь-який час, без потреби
встановлення додаткового програмного забезпечення.
3.3 Програмна реалізація веб-орієнтованої інформаційної системи для
отримання прогнозу погоди
Процес реалізації веб-орієнтованої інформаційної системи прогнозу погоди
розпочався з ініціалізації структури проєкту за допомогою фреймворку React і
збирача Vite. Було створено базове середовище з необхідними залежностями,
51
зокрема Chakra UI для інтерфейсних компонентів, Redux для керування глобальним
станом, а також бібліотеки для роботи з геолокацією, API-запитами та локальним
сховищем. Структура проєкту передбачала окремі директорії для візуальних
компонентів, логіки, допоміжних функцій та стилів.
Розробка інтерфейсу почалась з компонента Navbar.jsx (рис. 3.2), у якому
реалізовано пошукову панель для введення назви міста, кнопку виклику геолокації
та обробку подій користувача. У цьому компоненті було реалізовано функції
handleChange, handleLocationData та handleSubmit, які ініціюють відповідні Redux-
екшени для отримання прогнозу. Отримане значення з поля введення передається
далі через глобальний стан.
Рисунок 3.3 – Компонент Navbar.jsx
Центральним блоком є компонент Details.jsx (рис. 3.3), що відповідає за
відображення загального стану інтерфейсу: завантаження, помилки, основні погодні
дані та прогноз. У цьому компоненті використано хук useEffect для ініціалізації
погодного запиту під час першого рендерингу. Залежно від стану, Details умовно
відображає компонент Loading.jsx, якщо триває запит, або Error.jsx, якщо сталася
52
помилка при зверненні до API. У разі успішного отримання даних вони передаються
до візуальних блоків для подальшого виводу.
Рисунок 3.3 – Компонент Details.jsx
Для відображення поточних погодних показників використано допоміжні
візуальні компоненти з SmallComponents.jsx, зокрема Newbox і NewText, які
відповідають за структуроване виведення таких параметрів, як температура,
відчутна температура, вологість, тиск, видимість, вітер. Значення форматуються
через функції-обгортки, які округлюють дані, додають одиниці вимірювання та
розміщують їх у стилізованих блоках. Головний текстовий блок з назвою міста,
країни та описом погоди також включено до Details.jsx.
Для виводу прогнозу на декілька днів було реалізовано компонент Forecast.jsx
(рис. 3.4). Він отримує масив із прогнозом по днях і генерує набір карток, кожна з
яких відображає температуру вдень і вночі, дату, стан неба та піктограму погодного
символу. Кожна картка містить функцію відкриття модального вікна для
розширеного перегляду. Відкриття вікна ініціює компонент ForecastModal.jsx, який
побудований з використанням модального API бібліотеки Chakra UI. У модальному
вікні відображено деталізований прогноз: температура на ранок, день, вечір і ніч,
53
відчутна температура, вітер, вологість, тиск та інші параметри. Передавання даних
у модальне вікно реалізовано через пропси й внутрішній стан.
Рисунок 3.4 – Компонент Forecast.jsx
Компонент Map.jsx виконує візуалізацію обраного міста на карті. Він
реалізований як iframe з динамічно сформованим URL на Google Maps, у якому
передаються координати широти й довготи з відповіді API. Цей компонент
розміщено нижче основного блоку з прогнозом і він оновлюється щоразу при зміні
локації.
З метою оптимізації роботи з API було реалізовано кешування останнього
запиту в локальному сховищі браузера. За це відповідає модуль sessionStorage.js, в
якому визначено функції getItem та setItem. Вони використовуються у компоненті
Details.jsx при ініціалізації застосунку: якщо дані є в сховищі, вони відображаються
без додаткового запиту до API; у разі відсутності або застарілості – виконується
новий запит і результат зберігається.
54
Функції для отримання даних з API винесено до окремого модуля actions.js
(рис. 3.5), який містить асинхронні методи getWeatherByLocation, getWeatherByCity
та syncData. Ці функції використовуються у Navbar.jsx та Details.jsx для ініціалізації
погодних запитів і оновлення прогнозу. У разі помилки відповіді або тайм-ауту
ініціюється відповідний Redux-стан, який активує компонент Error.jsx для
інформування користувача.
Рисунок 3.5 – Модуль action.js
Під час усієї реалізації проєкту дотримано принципів повторного
використання коду, динамічної адаптації до стану, мінімізації логіки в інтерфейсних
компонентах, а також забезпечено ізоляцію від зовнішніх залежностей. Усі стилі
створено або через компоненти Chakra UI, або за допомогою базових CSS-класів із
Flexbox-структурою.
3.4 Особливості тестування веб-ресурсів
Тестування є невід’ємною складовою процесу розробки будь-якої програмної
системи. Особливого значення воно набуває у випадку веб-орієнтованих
інформаційних систем, які працюють у мережевому середовищі, взаємодіють з
великою кількістю користувачів і функціонують у непередбачуваних умовах
зовнішніх сервісів. Головна мета тестування в цьому контексті полягає в тому, щоб
забезпечити стабільність, правильність роботи, доступність функцій і стійкість до
55
збоїв. Враховуючи специфіку таких систем, тестування повинно охоплювати не
лише логіку застосунку, а й поведінку інтерфейсу, адаптивність, відповідь на
мережеві події та коректну інтеграцію з API.
Однією з головних особливостей веб-систем є клієнт-серверна архітектура, де
частина функціоналу виконується на боці клієнта, а частина залежить від відповідей
віддалених серверів. Це накладає додаткові вимоги до тестування взаємодії через
API, включаючи перевірку валідності запитів, обробку помилок відповіді,
тестування тайм-аутів і несподіваних структур JSON. У разі використання відкритих
або сторонніх API необхідно також враховувати ймовірність зміни формату
відповіді, обмеження по частоті запитів або тимчасову недоступність сервера. Таким
чином, на етапі тестування важливо перевірити, як система реагує на часткові збої
або відсутність даних, і чи зберігає вона працездатність у разі критичних винятків.
Іншою важливою характеристикою є асинхронна природа дій у клієнтській
частині веб-застосунку. Більшість подій, таких як надсилання запитів, обробка
відповідей, оновлення інтерфейсу та взаємодія з користувачем, відбуваються не
послідовно, а паралельно. У зв’язку з цим тестування повинно охоплювати сценарії
з відкладеною реакцією, наприклад перевірку станів завантаження, відображення
спінерів, повідомлень про помилки та повторних спроб. Асинхронна логіка також
ускладнює застосування класичних підходів до модульного тестування, що вимагає
використання спеціалізованих бібліотек або фреймворків, здатних обробляти
проміси, мок-дані або емуляцію відповіді сервера.
У веб-орієнтованих системах значну роль відіграє інтерфейс користувача,
тому окремим етапом є тестування відображення компонентів, адаптивності до
різних розмірів екранів і браузерів, коректності розмітки та стилізації. У разі
використання компонентних бібліотек або фреймворків, таких як React, часто
застосовуються підходи до тестування UI, що ґрунтуються на перевірці рендерингу,
реакції на події, зміни стану та відображення компонентів у відповідь на пропси.
Важливо, щоб компоненти залишалися стабільними при будь-яких зовнішніх
впливах, включаючи недійсні або порожні дані, неправильний формат API-відповіді
або втрату підключення до мережі.
56
Складовою частиною тестування є перевірка логіки переходів між станами,
особливо в системах, що використовують глобальне керування станом, наприклад
через Redux. У таких випадках тестування включає перевірку правильності
редукторів, коректності переданих типів дій, а також результатів дії асинхронних
мідлварів, які можуть змінювати хід взаємодії системи з користувачем. Важливо
також протестувати початкову ініціалізацію стану, дії при повторному завантаженні
сторінки, збереження даних у кеші або локальному сховищі браузера, і як ці дії
впливають на роботу інтерфейсу.
Особливого значення набуває тестування поведінки при нестабільному
інтернет-з’єднанні. У системах, що працюють із зовнішніми джерелами даних,
потрібно впевнитися, що у разі відсутності відповіді або помилки сервера
користувач не залишиться без зворотного зв’язку. Для цього проводиться
тестування механізмів резервного відображення, повідомлень про помилки та
відновлення з кешу. У випадку застосування механізмів кешування або збереження
сесії в браузері необхідно протестувати валідність і термін зберігання даних,
очищення при перевантаженні або оновленні даних.
Також варто враховувати вимоги до адаптивності та кросбраузерності.
Тестування повинно проводитися на різних пристроях, операційних системах і
версіях браузерів. Це дає змогу виявити проблеми з відображенням, розміщенням
або функціональністю окремих компонентів. У більшості сучасних інструментів
передбачено можливість емуляції різних розмірів екрана, однак реальне тестування
на фізичних пристроях або в емуляторах також залишається доцільним, особливо
при підготовці до публічного розгортання системи.
Важливу роль відіграє також тестування з точки зору користувацького
досвіду. Потрібно перевірити, наскільки інтуїтивним є інтерфейс, як швидко
користувач знаходить потрібну інформацію, чи очевидні його дії та чи не викликає
застосунок когнітивного навантаження. У разі необхідності проводяться юзабіліті-
тести або візуальне A/B-тестування для порівняння різних варіантів реалізації.
На завершальному етапі застосовується інтеграційне та системне тестування,
яке дозволяє оцінити роботу системи в цілому. Перевіряється, чи правильно
57
передаються дані між компонентами, чи зберігається логіка переходів, як
поводиться система у разі взаємодії з реальним API або у процесі оновлення
сторінки. Результати тестування фіксуються, і за потреби вносяться правки в логіку
або інтерфейс застосунку.
Таким чином, тестування веб-орієнтованих інформаційних систем є
багаторівневим, комплексним процесом, що охоплює як технічну, так і візуальну
частину системи. Враховуючи динамічність і складність сучасних веб-застосунків,
тестування повинно враховувати не лише внутрішню логіку, а й зовнішні умови
функціонування, взаємодію з API, реакцію на дії користувача, а також стійкість до
збоїв. Усе це вимагає системного підходу, вибору відповідних інструментів і
регулярної перевірки системи на всіх етапах її життєвого циклу.
3.5 Тестування веб-орієнтованої інформаційної системи для отримання
прогнозу погоди
Після завершення основної реалізації системи було проведено поетапне
тестування її функціональних компонентів та взаємодії між ними. Метою тестування
є перевірка працездатності застосунку в реальних умовах використання, зокрема у
ситуаціях змінної якості інтернет-з’єднання, повторного завантаження сторінки,
некоректного вводу даних та взаємодії з API. Система тестувалася вручну, через
емуляцію типових дій користувача, із контролем змін стану та очікуваних реакцій
інтерфейсу [12].
Одним із перших етапів стало тестування компонента Navbar.jsx, який
відповідає за пошук міста та запуск запиту погоди. Було перевірено, як обробляється
введення тексту, як реагує система на наявне місто в API та як вона поводиться при
введенні некоректного або неіснуючого запиту. У випадку успішного запиту
система коректно завантажує нові погодні дані, які передаються в Details.jsx, що
підтвердило правильність реалізації зв’язку між компонентами.
Компонент Details.jsx тестувався з акцентом на динамічне оновлення
інформації, перевірку станів завантаження та відображення повідомлень про
58
помилки. Під час відсутності інтернету ініціюється виклик компонента Error.jsx, а
при зверненні до API без затримок – Loading.jsx автоматично зникає після
завершення запиту. Було проведено перевірку, чи зберігаються останні отримані
дані у локальному сховищі браузера через модуль sessionStorage.js, і чи коректно
система їх використовує при повторному відкритті сторінки.
Окрема увага приділялася багатоденному прогнозу, реалізованому у
Forcast.jsx. Сценарії тестування включали перевірку кількості відображених днів,
коректність дат, відповідність іконок стану погоди значенню параметра
weather.main, а також коректність обробки масиву з прогнозом. При натисканні на
картку окремого дня відкривається компонент ForcastModal.jsx, який перевірявся на
наявність усіх параметрів (температура, тиск, вітер, вологість тощо), коректність їх
округлення та стилізацію. Після закриття модального вікна перевірялося, чи
очищується його стан.
Також було протестовано інтеграцію з мапою в компоненті Map.jsx, який
формує динамічний посилання для iframe. Сценарій передбачав перевірку, чи
змінюється відображення карти при зміні міста, чи коректно формуються
координати, та як поводиться iframe при відсутності даних. Усі тестові кейси дали
позитивний результат, карта оновлювалася відповідно до поточного міста.
Проведено перевірку кешування даних у sessionStorage.js, зокрема збереження
та зчитування при першому та повторному завантаженні застосунку. У результаті
вдалося підтвердити, що кеш використовується лише тоді, коли нові дані ще не
отримані або користувач не оновлював прогноз вручну. При натисканні на кнопку
синхронізації викликається дія syncData() з модуля actions.js, після чого погодна
інформація оновлюється й кеш перезаписується.
Особливу увагу було приділено тестуванню поведінки при втраті інтернет-
з’єднання. Під час імітації розриву мережі API не повертає відповіді, система
автоматично показує компонент Error.jsx, і пропонує оновити дані. Це підтверджує
стійкість системи до несприятливих умов та її здатність коректно повідомляти
користувача про проблеми без блокування інтерфейсу.
59
У підсумку всі основні функціональні блоки веб-застосунку пройшли повний
цикл ручного тестування. Виявлені під час перевірок дрібні візуальні неточності
були виправлені на рівні стилів. Результати тестування систематизовано в табл. 3.1:
Таблиця 3.1 – Результати тестування компонентів системи
№ Тестований компонент / Очікуваний результат Статус
функція тестування
1 Відображення поточних Коректне відображення Пройдено
погодних даних температури, вологості, тиску,
тощо
2 Пошук міста через Місто обробляється, дані Пройдено
Navbar.jsx завантажуються, сторінка
оновлюється
3 Запит погоди за Автоматично визначається Пройдено
координатами місцезнаходження, виводяться
дані
4 Кешування даних у Повторне завантаження Пройдено
sessionStorage використовує кеш без нового
запиту
5 Відображення прогнозу Виводиться 7 днів прогнозу, дати, Пройдено
на 7 днів (Forcast.jsx) температура, іконка
6 Модальне вікно з По кліку відкривається вікно з Пройдено
розширеним прогнозом деталями прогнозу
(ForcastModal.jsx)
7 Показ карти місцевості Мапа відображає актуальну Пройдено
(Map.jsx) позицію міста
8 Індикатор завантаження Під час запиту зʼявляється спінер Пройдено
(Loading.jsx)
9 Повідомлення про У разі помилки – повідомлення з Пройдено
помилку (Error.jsx) поясненням
60
10 Оновлення даних Після натискання відбувається Пройдено
кнопкою «Оновити» повторний запит
(FaSyncAlt, функція
syncData)
Висновки до розділу 3
У розділі реалізовано повноцінну веб-орієнтовану інформаційну систему для
отримання прогнозу погоди, що функціонує виключно на клієнтській стороні. На
основі попередньо розробленої архітектури здійснено розгортання структури
компонентів, створено інтерфейс користувача, налагоджено інтеграцію з API та
впроваджено логіку кешування даних у локальному сховищі браузера.
Під час реалізації системи застосовано сучасні технології веб-розробки:
бібліотеку React для побудови інтерфейсу, Redux для централізованого керування
станом, Chakra UI для адаптивного візуального оформлення, а також засоби
взаємодії з відкритим API прогнозу погоди. Інтерфейс спроєктовано таким чином,
щоб користувач мав змогу отримувати актуальні погодні дані з мінімальною
затримкою, з можливістю пошуку за містом, перегляду багатоденного прогнозу та
розширеної інформації про кожен день. Додатково реалізовано відображення мапи
із географічним положенням обраного міста.
Система складається з низки компонентів, кожен з яких відповідає за окремий
фрагмент інтерфейсу або логіки – від пошукового поля до модального вікна
прогнозу. Особливу увагу приділено побудові структури даних, обробці
асинхронних запитів, обробці помилок API та забезпеченню стійкості до збоїв. При
розробці враховано вимоги до адаптивності, кросбраузерності та інтуїтивної
зручності інтерфейсу.
Веб-застосунок протестовано у середовищі браузера на етапі розробки.
Проведено перевірку функціональності кожного з основних компонентів, зокрема
відображення даних, оновлення прогнозу, роботи з геолокацією, кешування запитів,
обробки помилок та роботи без інтернету. Результати тестування засвідчили, що
61
система стабільно виконує всі задані функції, правильно реагує на зовнішні умови,
забезпечує передбачувану поведінку та високу швидкість взаємодії з користувачем.
У результаті виконано повний цикл створення веб-орієнтованої інформаційної
системи, яка забезпечує інтерактивну роботу з метеорологічними даними, виведення
прогнозу в зрозумілому вигляді, та реалізована на сучасних програмних засобах.
Отриманий застосунок є завершеним та придатним до використання.
62
ВИСНОВКИ
У результаті виконання кваліфікаційної роботи бакалавра досягнуто основної
мети – розроблено, реалізовано та протестовано веб-орієнтовану інформаційну
систему, що дозволяє користувачеві отримувати актуальний прогноз погоди в
інтерактивному форматі з використанням сучасних веб-технологій.
Результати виконаної роботи демонструють ефективність обраного підходу до
побудови клієнтського веб-застосунку з динамічним отриманням метеорологічних
даних із зовнішнього API, без залучення серверної інфраструктури та баз даних.
У ході дослідження було здійснено комплексний аналіз стану сучасних веб-
рішень для відображення прогнозу погоди. Встановлено, що більшість таких систем
базуються на клієнт-серверній взаємодії, де ключову роль відіграє швидкість
доступу до даних, якість інтерфейсу та адаптивність до різних пристроїв. Було
обґрунтовано актуальність створення власної системи такого типу, що дозволяє
зосередитися на зручності користувацького досвіду, модульності архітектури та
швидкодії.
У процесі розробки застосовано актуальні методики побудови інтерфейсів на
основі бібліотеки React. Такий підхід дав змогу створити багаторазово
використовувані компоненти з чіткою логікою взаємодії, а також організувати
керування станом за допомогою Redux. Реалізація асинхронної взаємодії з
відкритим API забезпечила оперативне отримання прогнозу погоди для заданого
міста або поточного місцезнаходження користувача. Структура даних була
організована відповідно до стандартів JSON-відповіді, що забезпечило стабільне
функціонування системи навіть при великому обсязі інформації.
Веб-інтерфейс системи розроблено з орієнтацією на простоту, читабельність і
логічну організацію інформаційних блоків. Користувач може легко отримати
інформацію про поточну температуру, атмосферний тиск, вологість, вітер, рівень
видимості, а також переглянути прогноз на кілька наступних днів. Для кожного дня
передбачено можливість відкриття розширеної інформації в модальному вікні. У
застосунку реалізовано виведення карти місцевості, де розташоване вибране місто,
63
що додає географічний контекст до прогнозу. Весь інтерфейс є адаптивним і
відображається коректно як на десктопних, так і на мобільних пристроях.
Особливу увагу приділено стійкості системи до збоїв. У разі втрати з’єднання
або помилки API застосунок не зупиняє роботу, а інформує користувача про
проблему. Також реалізовано механізм кешування останнього успішного запиту в
локальному сховищі браузера, що дозволяє повторно використовувати отримані
дані без зайвих звернень до сервера. Це покращує продуктивність системи та
зменшує навантаження на API. Під час повторного завантаження сторінки
застосунок автоматично перевіряє наявність збережених даних та використовує їх
для швидкого первинного відображення.
Усі основні функціональні компоненти системи були протестовані на
коректність відображення, обробку помилок, реакцію на дії користувача та
взаємодію між собою. Результати тестування показали, що система є стабільною,
передбачуваною у поведінці та готовою до використання в реальних умовах. Була
підтверджена працездатність таких функцій, як динамічне оновлення прогнозу,
пошук міста, відкриття розширеної інформації, відображення карти, кешування
даних та опрацювання ситуацій втрати з’єднання.
Таким чином, розроблена веб-орієнтована інформаційна система для
отримання прогнозу погоди відповідає сучасним вимогам до клієнтських веб-
застосунків, забезпечує зручність для кінцевого користувача, має логічну структуру
та гнучку архітектуру. Її функціональність повністю реалізує поставлені завдання, а
використані технології дозволяють у майбутньому доповнювати систему новими
можливостями, такими як графіки змін погодних параметрів, історія переглядів,
багатомовний інтерфейс або персоналізація результатів. Отримані результати
свідчать про успішне досягнення цілей кваліфікаційної роботи та можливість
практичного застосування розробленої системи.
64
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Веб-ресурс «Sinoptik». URL: https://sinoptik.ua/ (дата звернення: 19.04.2025).
2. Веб-ресурс «Meteoprog.ua». URL: https://meteoprog.com/ (дата звернення:
18.04.2025).
3. Веб-ресурс «Windy». URL: https://windy.com/ (дата звернення: 19.04.2025).
4. «JetBrains WebStorm». URL: https:// https://www.jetbrains.com/webstorm/ (дата
звернення: 21.04.2025).
5. «API». URL: https://en.wikipedia.org/wiki/API (дата звернення: 22.04.2025).
6. «Rest API». URL: https://en.wikipedia.org/wiki/REST (дата звернення:
22.04.2025).
7. "Use case diagram". URL: https://en.wikipedia.org/wiki/Use_case_diagram (дата
звернення: 02.05.2025).
8. "Sequence diagram". URL: https://en.wikipedia.org/wiki/Sequence_diagram (дата
звернення: 03.05.2025).
9. "React". URL: https://legacy.reactjs.org/ (дата звернення: 04.05.2025).
10. "Redux". URL: https://redux.js.org/ (дата звернення: 06.05.2025).
11. "Vite". URL: https://vite.dev/ (дата звернення: 07.05.2025).
12. "Manual Testing". URL: https://en.wikipedia.org/wiki/Manual_testing (дата
звернення: 21.05.2025).
13. Wieruch R. The Road to React: Your journey to master plain yet pragmatic React.js.
2023. 244 с.
14. Gamma E., Helm R., Johnson R., Vlissides J. Design Patterns: Elements of Reusable
Object-Oriented Software. Addison-Wesley, 1995. 395 p.
15. Глушаков С. В. Веб-технології та веб-програмування. Навчальний посібник.
Харків: ХНУРЕ, 2021. 204 с.
65
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2025 р.
ВЕБ-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ДЛЯ ОТРИМАННЯ
ПРОГНОЗУ ПОГОДИ
Специфікація
482.ЧДТУ. 52110-01
Листів 2
Розробник ____________________ Корніюк О.О.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2025
66
482.ЧДТУ. 52110-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 52110-01 12 01 Текст програми
482.ЧДТУ. 52110-01 34 01 Інструкція користувача
482.ЧДТУ. 52110-01 90 01 Структура бази даних
67
ДОДАТОК Б
ВЕБ-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ДЛЯ ОТРИМАННЯ
ПРОГНОЗУ ПОГОДИ
Текст програми
482.ЧДТУ. 52110-01 12 01
Листів 10
Розробник _____________ Корніюк О.О.
Черкаси – 2025
68
Details.jsx
import { Box, Flex, Grid, Heading, Icon, Text, useToast } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { celsius } from "../helpers/extraFunctions";
import { getItem } from "../helpers/sessionStorage";
import { getWeatherByLocation, syncData } from "../redux/actions";
import { Error } from "./Error";
import { Loading } from "./Loading";
import { Map } from "./Map";
import { FaSyncAlt } from "react-icons/fa";
import { Newbox, NewText } from "./SmallComponents";
import { Forcast } from "./Forcast";
export const Deatils = () => {
const { isLoading, weatherData: data, forcastData, isError } =
useSelector((state) => state, shallowEqual);
const [isRotate, setIsRotate] = useState(false);
const dispatch = useDispatch();
const toast = useToast();
useEffect(() => {
let weather = getItem("weather");
!weather && dispatch(getWeatherByLocation(toast));
}, []);
const handleSyncData = () => {
setIsRotate(true);
dispatch(syncData(data.name, toast))
}
return isLoading ? (
<Loading />
) : isError ? (
<Error />
) : (
69
<>
<Box maxW={'1400px'} m={'20px auto 5px'} p={'20px'} minH={'550px'}>
<Grid gridTemplateColumns={['100%', 'repeat(2, 1fr)', 'repeat(2,
1fr)', '30% 27.5% 38%']} gap={'30px'}>
<Newbox>
<Box color={'#5e82f4'} p={'20px'} textAlign={'center'}>
<Flex justify={'end'}>
<Icon
onClick={handleSyncData}
onAnimationEnd={() => { setIsRotate(false) }}
className={isRotate ? "iconRotate" : undefined}
cursor={'pointer'} w={'23px'} h={'23px'}
as={FaSyncAlt}
/>
</Flex>
<Heading>{data.name}</Heading>
<Heading fontSize={['100px', '120px', '120px', '100px',
'120px']}>{Math.round(data.main.temp - 273)}<sup>o</sup>C</Heading>
<Heading>{data.weather[0].main}</Heading>
</Box>
</Newbox>
<Newbox>
<Grid templateColumns={'50% 50%'} h={'100%'} p={'8px'}>
<Box py={'10px'} pl={'15%'}>
{['Felt Temp.', 'Humidity', 'Wind', 'Visibility',
'Max Temp.', 'Min Temp.'].map((e, i) => (
<Text key={i} color={'#5e82f4'} fontWeight={500}
mt={'15px'} fontSize={'18px'} >{e}</Text>
))}
</Box>
<Box borderRadius={'30px'} bg={'#5e82f4'} py={'10px'}
pl={'15%'}>
<NewText>{celsius(data.main.feels_like)}<sup>o</sup>
C</NewText>
<NewText>{data.main.humidity}%</NewText>
70
<NewText>{(data.wind.speed * 3.6).toFixed(2)}
Km/h</NewText>
<NewText>{(data.visibility * 0.001).toFixed(2)}
Km</NewText>
<NewText>{celsius(data.main.temp_max)}<sup>o</sup>
C</NewText>
<NewText>{celsius(data.main.temp_min)}<sup>o</sup>
C</NewText>
</Box>
</Grid>
</Newbox>
<Newbox>
<Map city={data.name} />
</Newbox>
</Grid>
<Grid mt={'40px'} templateColumns={['repeat(2, 1fr)', 'repeat(3,
1fr)', 'repeat(4, 1fr)', 'repeat(5, 1fr)', 'repeat(8, 1fr)']} gap={'20px'}>
{forcastData.map((e, i) => <Forcast key={i} data={e} />)}
</Grid>
</Box >
</>
);
};
ForecastModal.jsx
import { Box, Grid, Icon, Modal, ModalBody, ModalCloseButton, ModalContent,
ModalFooter, ModalHeader, ModalOverlay, Text, useDisclosure } from "@chakra-
ui/react";
import { dateFormat } from "../helpers/extraFunctions";
import { NewText } from "./SmallComponents";
import { ImSun } from "react-icons/im";
import { MdOutlineNightsStay } from "react-icons/md";
export const ForcastModal = ({ data }) => {
71
const { date, day } = dateFormat(data.dt);
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Box onClick={onOpen} cursor={'pointer'} mt={'10px'}>
<Text color={'#5e82f4'} fontWeight={500} fontSize={'27px'}>
<Icon as={ImSun} /> {Math.round(data.temp.day)}<sup>o</sup> C
</Text>
<Text color={'#5e82f4'} fontWeight={500} fontSize={'27px'}>
<Icon as={MdOutlineNightsStay} />
{Math.round(data.temp.night)}<sup>o</sup> C
</Text>
<Text color={'#5e82f4'} fontWeight={500} fontSize={'20px'}>
{data.weather[0].main}
</Text>
</Box>
<Modal isOpen={isOpen} onClose={onClose} >
<ModalOverlay />
<ModalContent>
<ModalHeader></ModalHeader>
<ModalCloseButton />
<ModalBody>
<Box p={'10px'}>
<Box p={'5px'} bg={'#5e82f4'} textAlign={'center'}
borderRadius={'30px'} mb={'20px'} >
<Text fontWeight={500} color={'white'}
fontSize={'18px'}>{date}</Text>
<Text fontWeight={500} color={'white'}
fontSize={'18px'}>{day}</Text>
</Box>
<Grid templateColumns={'50% 50%'} >
<Box pb={'10px'} pl={'15%'}>
72
{['Felt Temp.', 'Humidity', 'Wind', 'Pressure',
'Day Temp.', 'Evening Temp.', 'Night Temp.', 'Max Temp.', 'Min Temp.'].map((e, i) =>
(
<Text key={i} color={'#5e82f4'} fontWeight={500}
mt={'15px'} fontSize={'18px'} >{e}</Text>
))}
</Box>
<Box borderRadius={'30px'} bg={'#5e82f4'} pb={'10px'}
pl={'15%'}>
<NewText>{data.feels_like.day}<sup>o</sup>
C</NewText>
<NewText>{data.humidity}%</NewText>
<NewText>{(data.wind_speed * 3.6).toFixed(2)}
Km/h</NewText>
<NewText>{data.pressure} hPa</NewText>
<NewText>{data.temp.day}<sup>o</sup> C</NewText>
<NewText>{data.temp.eve}<sup>o</sup> C</NewText>
<NewText>{data.temp.night}<sup>o</sup> C</NewText>
<NewText>{data.temp.min}<sup>o</sup> C</NewText>
<NewText>{data.temp.max}<sup>o</sup> C</NewText>
</Box>
</Grid>
</Box>
</ModalBody>
<ModalFooter></ModalFooter>
</ModalContent>
</Modal>
</>
);
};
Navbar.jsx
import { Button, Center, Flex, Icon, Input, useToast } from "@chakra-ui/react";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { getWeatherByCity, getWeatherByLocation } from "../redux/actions";
73
import { HiLocationMarker } from "react-icons/hi";
export const Navbar = () => {
const [city, setCity] = useState("");
const dispatch = useDispatch();
const toast = useToast();
const handleChnage = () => {
dispatch(getWeatherByCity(city, toast));
}
const handleLocationData = () => {
dispatch(getWeatherByLocation(toast));
}
return (
<Flex p={'10px'} minH={'70px'} bg={'#d7defa'} justifyContent={'center'}
flexDirection={['column', 'row']} gap={['10px', '0px']}>
<Center px={'10px'}>
<Input
onKeyPress={({ key }) => { key === "Enter" ? handleChnage() :
undefined }}
onInput={(e) => { setCity(e.target.value) }}
value={city}
borderRadius={'15px 0px 0px 15px'}
bg={'white'}
_focus={{ 'border': 'none' }}
placeholder="City"
/>
<Button
onClick={handleChnage}
borderRadius={'0px 15px 15px 0px'}
color={'white'}
bg={'#5e82f4'}
_hover={{ 'bg': '5e82f4' }}
>
74
Search
</Button>
</Center>
<Center px={'10px'}>
<Button
bg={'#5e82f4'}
_hover={{ 'bg': '5e82f4' }}
color={'white'}
w={'100%'}
borderRadius={'15px'}
leftIcon={<Icon w={'30px'} h={'30px'} as={HiLocationMarker} />}
onClick={handleLocationData}
>
Your Location Weather
</Button>
</Center>
</Flex >
);
};
action.js
import axios from "axios";
import { weatherAppAPI } from "../helpers/API";
import { myToast } from "../helpers/extraFunctions";
import { setItem } from "../helpers/sessionStorage";
import { GET_DATA_ERROR, GET_DATA_LOADING, GET_DATA_SUCCESS } from "./actionTypes";
export const getDataLoading = () => {
return { type: GET_DATA_LOADING };
}
export const getDataSuccess = (payload) => {
return { type: GET_DATA_SUCCESS, payload };
}
export const getDataError = () => {
return { type: GET_DATA_ERROR };
75
}
export const getWeatherByLocation = (toast) => (dispatch) => {
const success = async (position) => {
try {
let { latitude, longitude } = position.coords;
dispatch(getDataLoading());
let response = await
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longit
ude}&appid=${weatherAppAPI}`);
let weatherData = await response.json();
console.log(weatherData)
let forcastData = await
axios.get(`/onecall?lat=${latitude}&lon=${longitude}&exclude=hourly,minutely&units=
metric&appid=${weatherAppAPI}`);
forcastData = forcastData.data.daily;
console.log(forcastData)
let payload = { weatherData, forcastData }
console.log(payload)
dispatch(getDataSuccess(payload));
setItem("weather", payload);
myToast(toast, "Your location weather updated", "success")
} catch (err) {
console.log(err);
dispatch(getDataError());
}
}
const error = (err) => {
console.warn(`ERROR(${err.code}): ${err.message}`);
myToast(toast, "Please turn on your location", "error")
}
navigator.geolocation.getCurrentPosition(success, error);
}
76
export const getWeatherByCity = (city, toast) => async (dispatch) => {
try {
dispatch(getDataLoading());
let response = await
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${weatherApp
API}`);
let weatherData = await response.json();
let { lon, lat } = weatherData.coord;
let forcastData = await
axios.get(`/onecall?lat=${lat}&lon=${lon}&exclude=hourly,minutely&units=metric&appi
d=${weatherAppAPI}`);
forcastData = forcastData.data.daily;
let payload = { weatherData, forcastData };
dispatch(getDataSuccess(payload));
setItem("weather", payload);
myToast(toast, "City weather data updated", "success");
} catch (err) {
console.log(err);
dispatch(getDataError());
myToast(toast, "City weather data doesn't exist", "error");
}
}
export const syncData = (city, toast) => async (dispatch) => {
try {
let response = await
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${weatherApp
API}`);
let weatherData = await response.json();
let { lon, lat } = weatherData.coord;
let forcastData = await
axios.get(`/onecall?lat=${lat}&lon=${lon}&exclude=hourly,minutely&units=metric&appi
d=${weatherAppAPI}`);
forcastData = forcastData.data.daily;
let payload = { weatherData, forcastData };
dispatch(getDataSuccess(payload));
77
setItem("weather", payload);
myToast(toast, "Data sync successfully", "success");
} catch (err) {
console.log(err);
dispatch(getDataError());
myToast(toast, "City weather data doesn't exist", "error");
}
}
78
ДОДАТОК В
ВЕБ-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ДЛЯ ОТРИМАННЯ
ПРОГНОЗУ ПОГОДИ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 52110-01 34 01
Листів 3
Розробник _____________ Корніюк О.О.
Черкаси – 2025
79
На головній сторінці веб-застосунку відображено зручний інтерфейс для
взаємодії з системою прогнозу погоди (рис. В.1). Користувач має змогу одразу
ввести назву будь-якого населеного пункту у спеціальне поле у верхній частині
сторінки. Після введення назви потрібно натиснути кнопку «Search», після чого
система автоматично надсилає запит до погодного сервера, отримує дані про поточні
метеоумови у вибраному місті та відображає їх у центральній частині екрана. Якщо
користувач бажає отримати прогноз для свого поточного місця розташування, він
може натиснути кнопку «Your Location Weather». Після підтвердження дозволу на
геолокацію система самостійно визначає координати пристрою та завантажує
відповідні метеодані.
Рисунок В.1 – Головна сторінка системи
У центральному блоці екрана відображається поточна температура повітря,
тип погодних умов (наприклад, дощ, хмарність), а також додаткові параметри:
відчутна температура, вологість, швидкість вітру, видимість, мінімальна та
максимальна температура на день. Інформація подана у зручному, читабельному
форматі з використанням зрозумілих одиниць вимірювання. Поруч розміщено
інтерактивну мапу, на якій відображено місцезнаходження обраного населеного
пункту. Карта оновлюється автоматично залежно від того, які координати надійшли
від API.
80
Нижче на сторінці розташовано блок із семиденним прогнозом погоди. Для
кожного дня подано дату, температуру вдень і вночі, графічне зображення погодних
умов та короткий текстовий опис. Користувач може переглянути прогноз на тиждень
вперед та зорієнтуватися у загальних кліматичних тенденціях. Якщо потрібно
переглянути розширену інформацію для окремого дня, достатньо натиснути на
відповідну картку. Після натискання відкривається модальне вікно, у якому
відображено повний набір метеорологічних параметрів: температура повітря на
ранок, день, вечір і ніч, тиск, вологість, швидкість вітру, а також відчутна
температура (рис. В.2).
Рисунок В.2 – Модальне вікно з деталями прогнозу погоди
У випадку виникнення труднощів із мережею або недоступності API, система
автоматично інформує користувача про помилку. У правій частині блоку поточної
температури розміщено кнопку з іконкою оновлення, натискання якої дозволяє
вручну перезавантажити погодні дані. Це може бути корисно при тривалому
перебуванні на сторінці або для примусового оновлення інформації без повторного
введення міста.
Інтерфейс системи є адаптивним. Це означає, що під час відкриття веб-
застосунку на мобільному телефоні або планшеті структура сторінки автоматично
перебудовується так, щоб залишатися зручною для читання й взаємодії. Усі
81
елементи мають належний контраст кольорів, шрифтів і піктограм, що забезпечує
високий рівень доступності для користувачів з різними рівнями підготовки.
Після першого запиту система автоматично зберігає дані у локальному кеші
браузера. У разі повторного відкриття сторінки метеоінформація завантажується
миттєво без додаткового звернення до зовнішнього сервера. Це дозволяє працювати
навіть у режимі обмеженого інтернет-з’єднання або при короткотривалих
мережевих затримках.
Веб-застосунок не потребує встановлення або завантаження додаткового
програмного забезпечення. Для роботи з системою достатньо будь-якого сучасного
веб-браузера з підтримкою JavaScript. Застосунок надає можливість швидко й
зручно переглянути погодні умови, не перевантажуючи користувача зайвою
інформацією, і є повністю готовим до щоденного практичного використання.
82
ДОДАТОК Г
ВЕБ-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ДЛЯ ОТРИМАННЯ
ПРОГНОЗУ ПОГОДИ
Структура даних
482. ЧДТУ. 52110-01 90 01
Листів 1
Розробник _____________ Корніюк О.О.
Черкаси – 2025
83
Рисунок Г.1 – Структура бази даних у вигляді діаграми