Національний університет «Львівська політехніка»

Кафедра автоматизованих систем управління

КУРСОВА РОБОТА
з дисципліни «Інтегровані ієрархічні системи управління»

на тему: «Розробка веб-застосунку для проведення простих розрахунків,

використовуючи веб-браузер».

Студент 2 курсу КНУС-12 групи денної форми

навчання комп’ютерні науки факультету
Заньків Олег Юрійович

Науковий керівник
Сікора Л. С., д.т.н., професор

Львів 2023
Міністерство освіти і науки України
 Національний університет «Львівська політехніка»
Кафедра автоматизованих систем управління

ЗАВДАННЯ
на курсовий проект

Студенту Заньківу Олегу Юрійовичу групи КНУС-12

1. Тема роботи: “Розробка веб-застосунку для проведення простих розрахунків,
використовуючи веб-браузер”.
2. Строк здачі студентом закінченої роботи: **********
3. Вихідні дані до курсового проекту: словник термінів, аналіз обраної методології
моделювання та чинників ризику для системи. Спроектована модель предметної
області, діаграми та схеми даних по системі, зображення поточного стану розробки
модулів системи.
4. Перелік питань, які підлягають розробці в курсовому проекті: які засоби
використовувати для створення системи? Які процеси будуть відбуватися у
системі? Як і які користувачі зможуть працювати з тими чи іншими модулями
системи? Чи доцільне створення подібного продукту?
5. Перелік графічного матеріалу: IDEF0 контекстна діаграма та діаграма
декомпозиції, діаграма класів та діаграма послідовності.

Дата видачі завдання: **********

Керівник роботи: Сікора Л. С.
Завдання прийняв до виконання студент: Заньків О. Ю.

2
 ЗМІСТ
ВСТУП.................................................................................................................................................... 4
1. ПОСТАНОВКА ЗАДАЧІ ................................................................................................................ 5
2. ОГЛЯД ЛІТЕРАТУРИ .................................................................................................................... 7
2.1 Опис вибраної методології проектування ............................................................................. 7
2.2 Огляд типів веб-сайтів ............................................................................................................ 10
2.3 Огляд середовищ розробки веб-сайтів ................................................................................. 12
2.4 Аналіз та порівняльна характеристика аналогів .............................................................. 15
3. СИСТЕМНИЙ АНАЛІЗ ТА ОБ’ЄКТНА МОДЕЛІ ЗАДАЧІ ................................................. 19
3.1 Контекстна діаграма та діаграма декомпозиції IDF0 ....................................................... 19
3.2 Розробка діаграми послідовності .......................................................................................... 21
3.3 Моделювання діаграми класів .............................................................................................. 23
4. ПРОГРАМНЕ РІШЕННЯ ............................................................................................................. 25
5. ОПИС ПРОВЕДЕНИХ ЕКСПЕРИМЕНТІВ ............................................................................. 26
ВИСНОВОК ........................................................................................................................................ 30
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ....................................................................................... 32
ВИХІДНИЙ КОД ................................................................................................................................ 33

3
 ВСТУП
Актуальність роботи. Зараз в любій професійній сфері присутні
різноманітні розрахунки. Для різних математичних виразів як правило вживають
різноманітні калькулятори, які пришвидшують роботу у сфері зв’язаній з
необхідністю обчислень. Все ж існують вже доволі багато видів калькуляторів,
таких як: звичайний для числових обрахунків, калькулятор для конвертування
різних видів валют, ваговий калькулятор, калькулятор калорій та багато інших.
Хоча існує дуже велика кількість калькуляторів, основне в них це точність,
швидкість та зручність у користуванні.
Для виконання курсового проекту було обрано проектування веб-сайту, який
буде давати можливість користувачу зручно вводити дані та обраховувати їх
швидко та без помилок.
Метою роботи є розроблення веб-сайту “Розробка зручного веб-
калькулятора”.
Об’єктом дослідження є процеси збору, опрацювання, зберігання
інформації про дані для обрахунків введені користувачем.
Предметом дослідження є методи, алгоритми та засоби розроблення
інформаційних веб-сайтів.
Практична цінність використання розроблюваного веб-сайту забезпечить
підвищення зручність та швидкість в обробці даних для обрахунків.

4
 1. ПОСТАНОВКА ЗАДАЧІ
Продукт буде представляти веб-ресурс, який дозволятиме користувачу
ввести необхідні дані в поле для розрахунків, отримати необхідний результат та
обрати цікавий дизайн веб-сервісу. Сервіс дозволить швидко та зручно проводити
прості обчислення. Веб-ресурс заставить користувачів переглянути свою точку
зору на google calculator. Користувачі розвиватимуть уміння швидко набирати
необхідні дані для розрахунків.
Загальний погляд на продукт: розроблюваний продукт є певною мірою
копією уже існуючих(схожих) продуктів і повинен стати зручнішим та
унікальнішим за інші. Розроблювана інформаційна система міститиме елементи
красивого дизайну, та зможе в майбутньому за необхідності розвиватись. Продукт
буде давати можливість вводити дані як з клавіатури, так і з кнопок в UI інтерфейсі.

Операційне середовище: операційна система для роботи з розроблюваним

продуктом може бути на всіх девайсах, в яких є доступ до браузерів, частина з них:
iOS, Android, Windows, macOS, Linux та інші. Розроблювана система буде
охоплювати користувачів з любого куточку землі. Сам продукт буде відкриватись
за допомогою найбільш поширених браузерів: Safari, Opera, Edge, Google Chrome,
Mozilla Firefox, Internet Explorer.

Функції системи:

• Функція для обрахунку введених даних – користувач матиме змогу ввести

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

5
• Функція зчитування помилок та інформування користувача – ні для кого не
є загадкою, що обрахунки можуть бути з дефектами, такі як ділення на нуль
тощо. Саме тому користувач не зможе зробити помилку, якщо веб-сервіс
буде правильно її обробляти і показуватиме користувачу, повідомлення про
помилку.

6
 2. ОГЛЯД ЛІТЕРАТУРИ
2.1 Опис вибраної методології проектування
Методологія проектування значною мірою визначає успіх проекту. Отже,
було проаналізовано та обдумано вивчені гнучкі методології SCRUM, KANBAN,
XP, RAD, RUP і вибір отримав напрямок на RAD.
Суть методології RAD – розробляти додатки/веб-сайти швидко, за найменшу
вартість і мати максимальну якість.
Варто зазначити особливості методології RAD:
• ітеративне виробництво;
• базується на управлінні вимогами;
• архітектура базується на компонентах;
• відбувається постійне візуальне моделювання системи;
• здійснюється управління якістю;
• відбувається контроль за змінами.
Основна ідея методології – прискорити розробку за допомогою використання
прототипів.
Життєвий цикл продукту за методологією RAD наведений на рисунку 2.1.

Визначення вимог.
Планування.

Дизайн
користувацького Розробка та
інтерфейсу. програмування.

Впровадження.

Рис. 2.1 Життєвий цикл продукту за методологією RAD

7
 Переваги методології RAD:
• висока якість;
• зменшуються ризики;
• визначені час і необхідні кошти.
Недоліки методології RAD:
• продукти, які будуються на основі RAD не є масштабованими, тобто що
пізніше з продукту не виросте щось надзвичайно велике та багатофункціональне
(може втрачатись бачення системи через те, що відбувається робота конкретними
функціями);
• використання методології RAD не підійде якщо є задача, н-д, зробити
машинне вивчення чи штучний інтелект, бо методологія не передбачає збирання
інформації предметної області і таке використання буде уповільнювати розробку
системи.
Методологія RAD одна з перших працювала з використанням спіральної
моделі життєвого циклу.
Спіральна модель – генератор моделі процесу керування ризиками для
проектів програмного забезпечення. Заснована на унікальних моделях ризиків
даного проекту, спіральна модель скеровує команду на прийняття елементів однієї
чи кількох моделей процесів, як-от інкрементного, водоспадного чи еволюційного
прототипування.
Кожен виток спіралі відповідає створенню працездатного фрагменту чи
версії системи.
Спіральна модель життєвого циклу програмного забезпечення наведена на
рисунку 2.2.

8
 Рис. 2.2 Спіральна модель життєвого циклу ПЗ
Причини з яких було обрано методологію RAD:
• основною причиною є тип життєвого циклу, який базується на побудові
користувацького інтерфейсу завдяки чому продукт постійно підлаштовується під
вимоги замовника;
• на розробку проекту був чітко визначений термін, що є одним з показників
вибору методології RAD;
• для проекту було чітко пропрацьовано предметну область та наповнення веб-
сайту, що є необхідним для застосування обраної методології;
• для розробки та побудови проекту використовуватимуться добре відомі
технології, а також буде здійснюватись їх підлаштування під окремі елементи
системи;
• також для проекту існують чітко сформовані бізнес-процеси, що також
навертає на вибір методології RAD;
• методологія працює за найбільш гнучкою моделюю життєвого циклу.

9
 2.2 Огляд типів веб-сайтів
На цей час в мережі інтернет можна зустріти багато класифікацій сайтів за
ступенем складності, наповненням, структурою, призначенням, і т. ін. Однак немає
загальноприйнятої класифікації типів сайтів. Через відсутність стандартизації,
багато хто відчуває труднощі в розумінні, який саме тип сайту їм потрібен і які
завдання він міг би вирішувати.
Наведемо свій варіант класифікації створення інтернет сайтів. В основу
покладена технічна складова, яка впливає на створення сайту, кількість сторінок,
обсяг контенту та керування вмістом.
Можна визначити наступні типи:
• Промо-сайт.
Його ще можна назвати рекламний сайт (від 5 до 50 сторінок) – інтернет-
ресурс, який рекламує окремий продукт, послугу або бренд. Крім того такий сайт
може бути створений для інформування про разовому подію (виставка,
конференція, свято, концерт). Основними складовими такого сайту є: розгорнута
інформація про майбутню подію, безліч візуальних прийомів для утримання
фокусу відвідувача на необхідній інформації. Для таких промо-ресурсів велике
значення мають якість рекламних текстів, маркетингові елементи і Flash-анімація.
Промо-сайти нагадують рекламні ролики.

• Сайт-візитка.
Сайт-візитка – це невеликий сайт (від 5 до 20 сторінок), містить основну
інформацію про власника, видах діяльності організації, історію створення, прайс-
лист товарів або послуг, контактні дані, реквізити, схему проїзду. Тексти мають
велике значення для подібних ресурсів, оскільки повинні бути максимально
короткими та інформативними. Корпоративний сайт.
Корпоративний сайт (від 10 до 100 сторінок) – це повнофункціональний web-
сайт, ефективний інструмент для залучення та обслуговування клієнтів. Такий сайт
має містити повну інформацію про компанію, про товари та послуги, прайс-листи,
форми спілкування відвідувачів і персоналу компанії. Для такого ресурсу
обов'язково проводиться оптимізація сайту, для підняття позиції у видачі
10
пошукових роботів. Обов'язково розробляється зручна і зрозуміла навігаційна
структура сайту, для того, що б відвідувач міг легко та швидко знайти потрібну
інформацію, замовити товар або послугу. Якісний і правильний корпоративний
сайт може стати основним засобом залучення клієнтів.

• Інтернет-магазин.
Інтернет-магазини (від 100 до 1000 сторінок) призначені для продажу товарів
чи послуг через Інтернет. Розробка інтернет магазину відрізняється від інтернет-
каталогу тим, що такі сайти дають можливість замовити і оплатити товар прямо на
сайті, а також працювати з кошиком покупок. В інтернет-магазинах існують різні
системи розрахунків: відправка товарів післяоплатою, моментальний розрахунок
за допомогою банківських карт або віртуальних гаманців, автоматична відправка
рахунок-фактури по факсу або електронною поштою. На сторінках сайту можна
дізнатися про наявність товару на складі, акційні пропозиції, найбільш популярні
товари, та багато іншої корисної інформації про товари.

• Інтернет-каталог.
Інтернет-каталог (від 10 до 500 сторінок) – це корпоративний web-сайт
компанії, яка пропонує великий асортимент товарів або послуг. Такий сайт
передбачає таку структуру, яка дає можливість для:
o добавлення або видалення товарів чи послуг;
o створення рубрик та підрубрик наданих сервісів;
o створення розгалуженої структури категорій;
o зручного розміщення інформації або зображення товарів.
Сайт може містити презентації, детальну інформацію про кожен товар,
відгуки експертів, ціни на товари та послуги. Відвідувачі сайту можуть замовляти
товари та послуги за допомогою електронної форми замовлення. Інформаційний
портал.
Для ресурсів цього типу (від 100 сторінок) характерна велика кількість
інформаційних матеріалів (новини, аналітичні статті, репортажі, інтерв'ю,
коментарі, огляди) по тематиці сайту. Матеріали регулярно оновлюються, зручна
11
навігація та пошук, додаткові сервіси, інтерактивні форми: форум, чат,
обговорення, анкети, опитування, голосування та ін. Такий сайт являє собою
мережеве видання, інформаційне агентство або інтернет-представництво ЗМІ.

• Соціальна мережа.
Соціальна мережа (від 500 сторінок) спрямована на створення спільнот в
інтернеті з людей зі спільними інтересами або родом діяльності. Зв'язок між
користувачами соціальних мереж здійснюється за допомогою внутрішньої пошти
або миттєвого обміну повідомленнями. Це можуть бути різноманітні тематичні
форуми, або такі ресурси як Телеграм і Вконтакте.
2.3 Огляд середовищ розробки веб-сайтів
Середовища розробки відкривають можливості перед користувачем.
Можливості залежать від обраної користувачем мови програмування та самого
середовища.
Найбільш використовувані середовища:
• WebStorm.
WebStorm — це інтегроване середовище розробки для JavaScript, HTML та
CSS від компанії JetBrains, розроблена на основі платформи IntelliJ IDEA.
WebStorm є спеціалізованою версією PhpStorm, пропонуючи підмножину з його
можливостей. WebStorm постачається з перед-установленим плаґінами JavaScript
(такими як для Node.js), котрі доступні для PhpStorm безкоштовно.
WebStorm підтримує мови JavaScript, CoffeeScript, TypeScript та Dart.
WebStorm забезпечує автодоповнення, аналіз коду на льоту, навігацію по
коду, рефакторинг, зневадження та інтеграцію з системами управління версіями.
Важливою перевагою інтегрованого середовища розробки WebStorm є робота з
проектами (у тому числі, рефакторинг коду JavaScript, що міститься в різних
файлах і теках проекту, а також вкладеного в HTML). Підтримується множинна
вкладеність (коли в документ на HTML вкладений скрипт на Javascript, в який
вкладено інший код HTML, всередині якого вкладений Javascript) — в таких
конструкціях підтримується коректний рефакторинг.
• Visual Studio Code.
12
 Visual Studio Code – засіб для створення, редагування та зневадження
сучасних веб-застосунків і програм для хмарних систем. Visual Studio Code
розповсюджується безкоштовно і доступний у версіях для платформ Windows,
Linux і OS X.
За основу для Visual Studio Code використовуються напрацювання вільного
проекту Atom, що розвивається компанією GitHub. Зокрема, Visual Studio Code є
надбудовою над Atom Shell, що використовують браузерний рушій Chromium і
Node.js. Примітно, що про використання напрацювань вільного проекту Atom на
сайті Visual Studio Code і в прес-релізі і в офіційному блозі не згадується.
Редактор містить вбудований зневаджувач, інструменти для роботи з Git і
засоби рефакторингу, навігації по коду, автодоповнення типових конструкцій і
контекстної підказки. Продукт підтримує розробку для платформ ASP.NET і
Node.js, і позиціонується як легковагове рішення, що дозволяє обійтися без повного
інтегрованого середовища розробки.
Серед підтримуваних мов і технологій: JavaScript, C++, C#, TypeScript, jade,
PHP, Python, XML, Batch, F#, DockerFile, Coffee Script, Java, HandleBars, R,
Objective-C, PowerShell, Luna, Visual Basic, Markdown, JSON, HTML, CSS, LESS і
SASS, Haxe.
• Microsoft Visual Studio.
Microsoft Visual Studio – серія продуктів фірми Майкрософт, які включають
інтегроване середовище розробки програмного забезпечення та низку інших
інструментальних засобів. Ці продукти дозволяють розробляти як консольні
програми, так і програми з графічним інтерфейсом, в тому числі з підтримкою
технології Windows Forms, а також веб-сайти, веб-застосунки, веб-служби як в
рідному, так і в керованому кодах для всіх платформ, що підтримуються Microsoft
Windows, Windows Mobile, Windows Phone, Windows CE, .NET Framework, .NET
Compact Framework та Microsoft Silverlight [7].
• PyCharm.
PyCharm – інтегроване середовище розробки для мови програмування
Python. Надає засоби для аналізу коду, графічний зневаджувач, інструмент для
запуску юніт-тестів і підтримує веб-розробку на Django.
13
 Можливості:
o статичний аналіз коду, підсвічування синтаксису і помилок;
o навігація серед проектів і сирцевого коду: відображення файлової структури
проекту, швидкий перехід між файлами, класами, методами і використаннями
методів;
o рефакторинг: перейменування, витяг методу, введення змінної, введення
константи, підняття і опускання методу тощо;
o інструменти для веб-розробки з використанням фреймворку Django;
o вбудований зневаджувач для Python;
o вбудовані інструменти для юніт-тестування;
o розробка з використанням Google App Engine;
o підтримка систем контролю версій: загальний користувацький інтерфейс для
Mercurial, Git, Subversion, Perforce і CVS з підтримкою списків змін та злиття [8].
• Intellij IDEA.
IntelliJ IDEA – комерційне інтегроване середовище розробки для різних мов
програмування (Java, Python, Scala, PHP) від компанії JetBrains. Система
поставляється у вигляді урізаної по функціональності безкоштовної версії
«Community Edition» і повнофункціональної комерційної версії «Ultimate Edition»,
для якої активні розробники відкритих проектів мають можливість отримати
безкоштовну ліцензію.
Можливості залежать від версії середовища:
o community версія середовища IntelliJ IDEA підтримує інструменти (у вигляді
плагінів) для проведення тестування TestNG і JUnit, системи контролю версій CVS,
Subversion, Mercurial і Git, засоби складання Maven, Ant, Gradle, мови
програмування Java, Scala, Clojure, Groovy і Dart. Підтримується розробка
застосунків для мобільної платформи Android. До складу входить модуль
візуального проектування GUI-інтерфейсу Swing UI Designer, XML-редактор,
редактор регулярних виразів, система перевірки коректності коду, система
контролю за виконанням завдань і доповнення для імпорту та експорту проектів з
Eclipse. Доступні засоби інтеграції з системами відстеження помилок JIRA, Trac,
Redmine, Pivotal Tracker, GitHub, YouTrack, Lighthouse.
14
 o комерційна версія «Ultimate Edition» відрізняється наявністю підтримки
додаткових мов програмування (наприклад, PHP, Ruby, Python, JavaScript,
CoffeeScript, HTML, CSS, SQL), підтримкою технологій Java EE, UML-діаграм,
підрахунок покриття коду, можливістю роботи з фреймворками (Rails, Grails,
Google Web Toolkit, Spring, Play Framework і Hibernate), засобами інтеграції з
Perforce, Microsoft Team Foundation Server і Rational ClearCase [9].
2.4 Аналіз та порівняльна характеристика аналогів
1) Google calculator.
Всім відомий калькулятор від компанії Google, в якому можна зробити такі
обчислення як логарифт, вирахувати корінь та квадрат числа та багато інших.
Новий нічний дизайн калькулятору Google наведений на рисунку 2.3.

Рис. 2.3 Вигляд веб-сайту Gentleman`s Journal

Калькулятор дає змогу змогу обчислити наступні операції:
• Операції базових виразів “+”, “/”, “*”, “-”;
• Операції кореня та квадрату “√”, “𝑥 𝑦 ”;
• Операції зміни градусної міри в радіанах та градуси;
• Операції косинусів, синусів, тангенсів, котангенсів;
• Операція факторіалу;
• Операція логарифму;
• Операція вирахування проценту від числа;
15
• Операція взяття в дужки “(”, ”)”;
• Операція обчислення “=”;
• Операції для числа пі;

16
 2) Online-Calculator.
Сайт, який містить багато різновидів калькуляторів. Ресурс також підтримує
вигляд калькулятору у весь екран, та пошук різних калькуляторів.
Головна сторінка веб-сайту Online-Calculator наведена на рисунку 2.4.

Рис. 2.4 Вигляд веб-сайту Gentleman`s Gazette

Сайт дає змогу обрати такі види різних калькуляторів:
• Simple Calculator – звичайний калькулятор показаний на рисунку 2.4;
• Scientific Calculator – калькулятор призначений для просунутих
користувачів;
• Online Abacus – всім знайома радянська рахівниця;
• Darts Calculator – калькулятор для розрахунку очків гри в дартс;
• Stopwatch – аналог таймеру;
• Patio calculator – калькулятор для матриць;
• Ring size converter – калькулятор для обрахунку розмірів кільця на палець;
• Distance converter – калькулятор для обрахунку дистанції;
• Length converter – калькулятор для обрахунку довжини;
• Weight converter – калькулятор для обрахунку ваги;
• Percentage converter – калькулятор для обрахунку відсотків;
17
 • Temperature converter – калькулятор для обрахунку температури;
• Volume converter – калькулятор для обрахунку гучності звуку;
• Random name picker – калькулятор для обрахунку випадкового імені за
допомогою випадкового числа;
• Simple Calculator – простіший калькулятор, без додаткових операцій;

18
 3. СИСТЕМНИЙ АНАЛІЗ ТА ОБ’ЄКТНА МОДЕЛІ ЗАДАЧІ
3.1 Контекстна діаграма та діаграма декомпозиції IDF0
IDEF0 — методологія функціонального моделювання і графічного опису
процесів, призначена для формалізації і опису бізнес-процесів. Особливістю
IDEF0 є її акцент на ієрархічне представлення об'єктів, що значно полегшує
розуміння предметної області. В IDEF0 розглядаються логічні зв'язки між
роботами, а не послідовність їх виконання в часі.
Так само відображаються всі сигнали управління. Така модель є однією з
найпрогресивніших моделей і використовується в організації бізнес проектів і
проектів, що базуються на моделюванні всіх процесів як адміністративних, так і
організаційних.
Методологію IDEF0 можна вважати наступним етапом розвитку мови описання
функціональних систем SADT (Structured Analysis and Design Teqnique).
Сімейство стандартів IDEF взяло своє позначення від назв цієї програми
(IDEF=ICAM DEFinition). В процесі практичної реалізації, учасники програми
ICAM зіткнулись з необхідністю розробки нових методів аналізу процесів
взаємовідносин в промислових системах. Іншими словами, новий метод повинен
був забезпечити групову роботу над створенням моделі, з безпосередньою участю
всіх аналітиків і спеціалістів, які беруть участь в рамках проекту.
Методологія функціонального моделювання IDEF0 може бути використана як
для моделювання процесів економіки, так і для формування вимог до складних
технічних систем. Прикладом став проєкт, започаткований TARDEC (США) щодо
ідентифікації критичних вимог до основного бойового танку НАТО.

Констекстну діаграму IDF0 для веб-сайту наведено на рисунку 3.1.

19
 Рис. 3.1 Контекстна діаграма IDF0

Діаграму декомпозиції IDF0 показано на рисунку 3.2

20
 Рис. 3.2 Діаграма декомпозиції IDF0

3.2 Розробка діаграми послідовності

Діаграма послідовності (sequence diagram) – діаграма, на якій показані
взаємодії об'єктів, впорядковані за часом їх прояву.
На діаграмі послідовності неявно присутня вісь часу, що дозволяє
візуалізувати тимчасові відносини між переданими повідомленнями. За допомогою
діаграми послідовності можна представити взаємодію елементів моделі як
своєрідний часовий графік "життя" всієї сукупності об'єктів, пов'язаних між собою
для реалізації варіанту використання програмної системи, досягнення бізнес-мети
або виконання якої-небудь задачі.
Діаграму послідовності для веб-сайту наведено на рисунку 3.3.

21
Рис. 3.3 Діаграма послідновності

22
 3.3 Моделювання діаграми класів

Діаграми класів називають «статичними діаграмами», оскільки на них

показано класи разом з атрибутами і операціями (методами).

Діаграми класів дозволяють:

• на концептуальному рівні формувати «словник предметної області»;

• на рівні специфікації і реалізації визначати структуру класів у програмній
реалізації системи.
Клас визначає атрибути і методи набору об’єктів. Всі об’єкти цього класу
(екземпляри цього класу) мають спільну поведінку і однаковий набір атрибутів
(кожен з об’єктів має свій власний набір значень). Позначення класу –
прямокутник, розділений на 3 частини: назва класу, атрибути, операції.

Рис. 3.7 Способи зв’язку класів

Кількість асоційованих об'єктів:
0..1 нуль або 1 об'єкт.
n..m від n до m об'єктів.
0..* або * будь-яка кількість (включаючи відсутність об'єктів).
1 точно один об'єкт
1..* не менше одного об'єкта
Діаграма класів веб-сайту наведена на рисунку 3.4.

23
Рис. 3.4 Діаграма класів веб-сайту

24
 4. ПРОГРАМНЕ РІШЕННЯ
Перш за все весь веб-сайт будувався за допомогою фреймворку React.js.
Для побудови функціональної частини було використано мову Typescript, а
також архітектуру Flux.
Також для стейт-менеджменту була використана бібліотека Redux.
React — відкрита JavaScript бібліотека для створення інтерфейсів
користувача, яка покликана вирішувати проблеми часткового оновлення вмісту
веб-сторінки, з якими стикаються в розробці односторінкових застосунків.
Розробляється Facebook, Instagram і спільнотою індивідуальних розробників.
React дозволяє розробникам створювати великі веб-застосунки, які
використовують дані, котрі змінюються з часом, без перезавантаження сторінки.
Його мета полягає в тому, щоб бути швидким, простим, масштабованим. React
обробляє тільки користувацький інтерфейс у застосунках. Він також може бути
використаний з React на основі надбудов, щоб піклуватися про частини без
користувацького інтерфейсу побудови веб-застосунків. Як бібліотеку інтерфейсу
користувача React найчастіше використовують разом з іншими бібліотеками,
такими як Redux.
FLUX - це архітектура. FLUX більше підходить як архітектура додатків для
користувальницького інтерфейсу додатків для будівництва. Архітектура додатків
Flux використовується Facebook для створення веб-додатків на стороні клієнта. Він
доповнює композиційний вигляд React однонаправленим потоком даних.
За розробку візуальної складової відповідає JSX – спрощений синтаксис для
створення “html” в javascript/ компоненти React зазвичай написані на JSX. Код
написаний на JSX компілюється у виклики методів бібліотеки React. Розробники
можуть так само писати на чистому JavaScript. JSX нагадує іншу мову, яку
створили у компанії Фейсбук для розширення PHP, XHP..
Redux — відкрита JS бібліотека призначена для управління станом програм
JavaScript. Найчастіше використовується разом з React або Angular для побудови
інтерфейсів користувача.

25
 5. ОПИС ПРОВЕДЕНИХ ЕКСПЕРИМЕНТІВ
Розроблено та оформлено сторінку веб-сайту, яка наведена на рисунку 5.1.

Рис. 5.1 Вигляд основної сторінки

Далі розроблено введення даних за допомого натискання на кнопки мишою,
наведено на рисунку 5.2.

26
Рис. 5.2 Вигляд введення даних за допомогою миші

27
 Для обробки помилок розроблено спеціальний функціонал для цього, що
зображено на рисунку 5.3.

Рис. 5.3 Вигляд помилки при діленні на нуль

Також розроблений функціонал для очищення введених даних за
допомогою однієї кнопки, що наведено на рисунку 5.4.

28
 Рис. 5.4 Вигляд до та після очищення введених даних

Також було додано можливість вибору дизайну самого калькулятора, де

можна побачити зміну фону сторінки, кольору калькулятора, окремий дизайн
кнопок, то внутрішнього світла екрану для вводу.
Всього є в наявності три види дизайну: базовий, блакитний та червоний — що
наведено на рисунку 5.5.

29
 Рис. 5.5 Вигляд різних тем

ВИСНОВОК
Для виконання роботи я обрав тему дану тему, тому що основний
калькулятор (google calculator) для веб-браузерів є не зовсім зручним. А так як я
30
працюю з схожими технологіями, то було вирішено взятись за реалізацію свого
продукту. Я провів визначення та оцінку актуальності вибраної теми та
необхідності її поширення та сформулював напрямки, задачі та цілі по яких я її
розробляв.
Я провів аналіз методологій розробки інформаційних систем і обрав
методологію RAD, для якої визначив позитивні і негативні сторони для побудови
обраного типу веб-сайту. Також оцінив спіральну модель життєвого циклу
програмного забезпечення, яка використовується обраною методологією.
Середовища розробки відіграють для мене важливу роль у розробці ПЗ, тому я
провів огляд середовищ та вибрав найкраще з них для розробки сервісу. Також
здійснив огляд веб-сайтів аналогів та визначив їх позитивні та негативні сторони, а
також їх переваги і недоліки.
Окрім вище сказаного, я ознайомився та вивчив декілька типів діаграм.
Змоделював діаграми видів послідовності. Побудував діаграму класів для обраної
інформаційної системи. Для обраної системи також змоделював діаграми потоків
даних, а саме контекстну та діаграму декомпозиції IDEF0.
Зрештою, здійснив розробку та налаштував веб-сайт на основі підібраних
засобів розробки, а також описав інтерфейс системи.
Враховуючи все вище сказане, я вважаю, що веб-система є актуальна для
людей, яким швидко та зручно необхідно провести розрахунки. Як бонус можна
вважати те, що сервіс має багато можливостей для його подальшого оновлення і
доопрацювання з більш складними математичними операціями.

31
 СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. RAD (програмування) [Електронний ресурс]. Режим доступу:
https://elearning.sumdu.edu.ua/free_content/lectured:de1c9452f2a161439391120
eef364dd8ce4d8e5e/20160217112601/233994/index.html
2. Спіральна модель [Електронний ресурс]. Режим доступу:
https://uk.wikipedia.org/wiki/Спіральна_модель
3. Web-студія Можемо Все [Електронний ресурс]. Режим доступу:
https://www.can-all.com/site/types-of-sites.html
4. Visual Studio Code [Електронний ресурс]. Режим доступу:
https://uk.wikipedia.org/wiki/Visual_Studio_Code
5. Microsoft Visual Studio [Електронний ресурс]. Режим доступу:
https://uk.wikipedia.org/wiki/Microsoft_Visual_Studio
6. PyCharm [Електронний ресурс]. Режим доступу:
https://uk.wikipedia.org/wiki/PyCharm
7. Intellij IDEA [Електронний ресурс]. Режим доступу:
https://uk.wikipedia.org/wiki/IntelliJ_IDEA
8. Online-Calculator [Електронний ресурс]. Режим доступу:
https://www.online-calculator.com/scientific-calculator/
9. Google Calculator [Електронний ресурс]. Режим доступу:
https://www.google.com/search?q=google+calculator&ie=UTF-8&oe=UTF-8
10. React [Електронний ресурс]. Режим доступу: https://reactjs.org

32
 ВИХІДНИЙ КОД
Клас “Calculator” виду Model
export interface ICalculator {
enteredString: string;

computeValue: () => void;

clearValue: () => void;
removeLastSymbol: () => void;

getCopyInstance: () => ICalculator;

}

export class Calculator implements ICalculator {

private readonly OP_REX = /[-+*/%]/;

private _enteredString: string = '';

constructor(enteredString = '') {
this._enteredString = enteredString;
}

get enteredString(): string {

return this._enteredString || '0';
}

set enteredString(symbol: string) {

if (['NaN', 'Infinity', 'Error'].includes(this._enteredString))
this._enteredString = '';

if (this.isOperationSymbol(symbol)) {
if (this.isOperationSymbol(this.lastSymbol)) this._enteredString =
this._enteredString.replace(/.$/, symbol)
else if (!this._enteredString) this._enteredString = `0${symbol}`;
else this._enteredString += symbol;

return;
}

if (symbol === '.') {

if (this.isOperationSymbol(this.lastSymbol) || !this._enteredString) {
this._enteredString += '0.';
} else if
(!/\./.test(this._enteredString.split(this.OP_REX).filter(Boolean).slice(-1)[0]))
{
this._enteredString += '.';
}
return;
}

this._enteredString += symbol;

if (/^0+$/.test(this._enteredString)) this._enteredString = '';

}

computeValue = () => {
try {
if (this.isOperationSymbol(this.lastSymbol)) {
// eslint-disable-next-line no-new-func
this._enteredString = new Function(`return
${this._enteredString.slice(0, -1) || 0}`)().toString()
} else {
33
 // eslint-disable-next-line no-new-func
this._enteredString = new Function(`return ${this._enteredString
|| 0}`)().toString()
}
} catch (e: any) {
this._enteredString = 'Error';
}
}

clearValue = () => this._enteredString = '';

removeLastSymbol = () => {
if (this._enteredString) {
this._enteredString = this._enteredString.slice(0, -1)
}
}

getCopyInstance = () => new Calculator(this._enteredString);

private isOperationSymbol = (symbol: string) => this.OP_REX.test(symbol);

get lastSymbol(): string {

return !!this._enteredString ?
this._enteredString[this._enteredString.length - 1] : '';
}
}

34
Класи “BaseTheme”, “BlueTheme”, “RedTheme” та Interface “ITheme”
export type ThemeStylesKey = 'BASE' |'RED' | 'BLUE';

export type CalculatorStyleType = {

key: ThemeStylesKey,
pageColor: string,
calculatorColor: string,
clearButtonGradient: string,
operationButtonsGradient: string,
numberButtonsGradient: string,
ledScreenShadowColor: string
}

export interface IThemeButton {

btnColor: string;
title: string;
getTheme: () => CalculatorStyleType
}
export const THEME_KEY = 'THEME_KEY';

import {CalculatorStyleType, IThemeButton} from "./IThemeButton";

export class RedThemeButtonModel implements IThemeButton {

readonly btnColor = 'red';
readonly title = 'RED';

getTheme(): CalculatorStyleType {
return {
key: 'RED',
pageColor: '#2a1515',
clearButtonGradient: 'linear-gradient(300deg, rgb(250 0 0) 0%, rgb(255
0 0) 100%)',
numberButtonsGradient: 'linear-gradient(300deg, rgb(255 186 186) 0%,
rgb(241 127 127) 100%)',
operationButtonsGradient: 'linear-gradient(300deg, rgb(255 130 102)
0%, rgb(235 12 74) 100%)',
calculatorColor: 'rgb(255 204 204)',
ledScreenShadowColor: 'rgb(255 128 128)',
};
}
}
import {CalculatorStyleType, IThemeButton} from "./IThemeButton";

export class BlueThemeButtonModel implements IThemeButton {

readonly btnColor = 'blue';
readonly title = 'BLUE';

getTheme(): CalculatorStyleType {
return {
key: 'BLUE',
pageColor: '#1a1928',
clearButtonGradient: 'linear-gradient(300deg, rgb(0 135 250) 0%,
rgb(51 0 255) 100%)',
numberButtonsGradient: 'linear-gradient(300deg, rgb(172 178 183) 0%,
rgb(110 119 123) 100%)',
operationButtonsGradient: 'linear-gradient(300deg, rgb(109 120 143)
0%, rgb(61 67 106) 100%)',
calculatorColor: '#e2e7ff',
ledScreenShadowColor: '#9980ff',
};
}
}

35
import {CalculatorStyleType, IThemeButton} from "./IThemeButton";

export class BaseThemeButtonModel implements IThemeButton {

readonly btnColor = '#5a5a5a';
readonly title = 'BASE';

getTheme(): CalculatorStyleType {
return {
key: 'BASE',
pageColor: '#171717',
clearButtonGradient: 'linear-gradient(300deg, rgb(250, 127, 0) 0%,
rgb(255, 96, 0) 100%)',
numberButtonsGradient: 'linear-gradient(300deg, rgb(183, 178, 172) 0%,
rgb(123, 119, 110) 100%)',
operationButtonsGradient: 'linear-gradient(300deg, rgb(119, 112, 104)
0%, rgb(58, 54, 51) 100%)',
calculatorColor: '#e0e0e0',
ledScreenShadowColor: '#888888',
};
}
}

36
Файл “CalculatorPage.tsx”, який містить опис розмітки сторінки та первну
логіку
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import s from './Calculator.module.css'
import {CalculatorButtonModel} from "../../models/CalculatorButtonModel";
import {CalculatorButtonSizeType, CalculatorButtonType} from "../../types";
import {CalculatorLedScreen} from
"../componentns/CalculatorLedScreen/CalculatorLedScreen";
import {CalculatorButton} from "../componentns/CalculatorButton/CalculatorButton";
import {useDispatch} from "react-redux";
import {addNewValue, getCalculateValue, removeLastSymbol} from "../../actions";
import {IThemeButton} from "../../models/ThemeButtons/IThemeButton";
import {BaseThemeButtonModel} from
"../../models/ThemeButtons/BaseThemeButtonModel";
import {BlueThemeButtonModel} from
"../../models/ThemeButtons/BlueThemeButtonModel";
import {RedThemeButtonModel} from "../../models/ThemeButtons/RedThemeButtonModel";
import {ThemeButton} from "../componentns/ThemeButton/ThemeButton";
import {useGetTheme} from "../../../../hooks/useGetTheme";

export const CalculatorPage = () => {

const dispatch = useDispatch();

const [needAnimation, setNeedAnimation] = useState(false);

const firstLoad = useRef(true);

const theme = useGetTheme();

const buttons = useMemo<CalculatorButtonModel[]>(() => [

new CalculatorButtonModel({title: 'C', type: CalculatorButtonType.CLEAR}),
new CalculatorButtonModel({title: '%', type:
CalculatorButtonType.OPERATION}),
new CalculatorButtonModel({title: '/', type:
CalculatorButtonType.OPERATION}),
new CalculatorButtonModel({title: '*', type:
CalculatorButtonType.OPERATION}),
new CalculatorButtonModel({title: '7', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '8', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '9', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '-', type:
CalculatorButtonType.OPERATION}),
new CalculatorButtonModel({title: '4', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '5', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '6', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '+', type:
CalculatorButtonType.OPERATION}),
new CalculatorButtonModel({title: '1', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '2', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({title: '3', type:
CalculatorButtonType.NUMBER}),
new CalculatorButtonModel({
title: '=',
type: CalculatorButtonType.OPERATION,

37
 size: CalculatorButtonSizeType.BIG_VERTICAL
}),
new CalculatorButtonModel({
title: '0',
type: CalculatorButtonType.NUMBER,
size: CalculatorButtonSizeType.BIG_HORIZONTAL
}),
new CalculatorButtonModel({title: '.', type:
CalculatorButtonType.NUMBER}),
], []);

const makeOperationFromKeyboard = useCallback((key: string) => {

switch (key) {
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
case '*':
case '/':
case '+':
case '-':
case '%':
case '.':
dispatch(addNewValue(key))
break;
case '=':
case 'Enter':
dispatch(getCalculateValue())
break;
case 'Backspace':
dispatch(removeLastSymbol())
break;
}
}, [dispatch])

const themeButtons = useMemo<IThemeButton[]>(() => [

new BaseThemeButtonModel(),
new BlueThemeButtonModel(),
new RedThemeButtonModel()
], [])

useEffect(() => {
document.addEventListener('keydown', e =>
makeOperationFromKeyboard(e.key));
}, [makeOperationFromKeyboard])

useEffect(() => {
if (firstLoad.current) {
firstLoad.current = false;
return;
}

setNeedAnimation(true);
setTimeout(() => setNeedAnimation(false), 150)
}, [theme])

38
 return <div className={s.pageWrapper} style={{backgroundColor:
theme.pageColor}}>
<div className={s.calculatorWrapper + ` ${needAnimation ?
s.calculatorAnimation : ''}`}
style={{backgroundColor: theme.calculatorColor}}>
<div className={s.themeButtonsWrapper}>
{themeButtons.map(btn => <ThemeButton button={btn}
key={btn.title}/>)}
</div>
<CalculatorLedScreen/>
<div className={s.buttonsWrapper}>
{
buttons.map(btn => <CalculatorButton button={btn}
key={btn.title}/>)
}
</div>
</div>
</div>
};

39