ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6020| Title: | Веб-сервіс для відстеження цін і графіків криптовалют та аналізу заробітку |
| Authors: | Оксамитна, Любов Павлівна Волосячик, Андрій Іванович |
| Keywords: | ПРЕДМЕТНА ОБЛАСТЬ,;КРИПТОВАЛЮТИ,;ІНВЕСТИЦІЇ,;ФІНАНСОВИЙ РИНОК,;ВЕБ-СЕРВІС,;ЦІНИ,;ПРОЄКТУВАННЯ,;БАЗА ДАНИХ. |
| Issue Date: | 11-Jun-2024 |
| Abstract: | На сьогоднішній день криптовалюти виявляють значний вплив на світову економіку та фінансові ринки. Зростання їхньої популярності викликає потребу у спеціалізованих інструментах для аналізу та відстеження їхніх цін і графіків. Веб-сервіси, які надають зручний доступ до цієї інформації, стають невід'ємною складовою успішних стратегій інвестування та торгівлі на криптовалютних ринках. Завдяки таким сервісам користувачі можуть ефективніше приймати рішення щодо своїх фінансових операцій та здійснювати аналіз заробітку на криптовалютних інвестиціях. Саме такий веб-сервіс для відстеження цін і графіків криптовалют та аналізу заробітку обумовлює актуальність обраної теми кваліфікаційної роботи бакалавра, оскільки він відповідає потребам сучасного фінансового ринку та відображає важливість розвитку інструментів для аналізу криптовалютних інвестицій. Мета кваліфікаційної роботи бакалавра – створення веб-сервісу для відстеження цін і графіків криптовалют та аналізу заробітку. Об’єкт дослідження: процеси відстеження цін і графіків криптовалют та аналіз заробітку. Предмет дослідження: веб-сервіс для відстеження цін і графіків криптовалют та аналізу заробітку. Веб-сервіс для відстеження цін і графіків криптовалют та аналізу заробітку розроблено з використанням фреймворку Vue.js. Управління користувачами та зберігання даних здійснювалось із застосуванням Firebase. Контроль проєкту та написання коду здійснювалось у середовищі WebStorm. Розроблений веб-сервіс має зручний, зрозумілий та приємний інтерфейс, що забезпечує користувачам комфортне використання та ефективний інструмент для управління криптовалютними інвестиціями. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6020 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Волосячик Андрій_КН-2001_2023-24.pdf Restricted Access | 3.47 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Веб-сервіс для відстеження цін і графіків криптовалют та аналізу
заробітку»
Виконав: студент 4 курсу, групи КН-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Волосячик Андрій Іванович
Керівник __________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2024 рік
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2024 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Волосячику Андрію Івановичу
(прізвище, ім’я, по батькові)
1. Тема роботи Веб-сервіс для відстеження цін і графіків криптовалют та аналізу заробітку
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «26» лютого 2024 р. №60/04.
2. Строк подання студентом роботи до 10 червня 2024 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проектування та розробка веб-сервісу для відстеження цін і графіків криптовалют та аналізу
заробітку.
4.3. Тестування веб-сервісу.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 42025-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Презентація у вигляді 33 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 15.01.2024
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
15.01.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 12.02.2024 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 18.03.2024 Виконано
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2024 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2024 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
03.06.2024 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06.2024 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2024 Виконано
Студент _____________________________ Андрій ВОЛОСЯЧИК
(підпис)
Керівник роботи ____________________________ Любов ОКСАМИТНА
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 94 с., 43 рис., 1 таблицю, 13
використаних джерел, 4 додатки.
Актуальність теми. На сьогоднішній день криптовалюти виявляють значний
вплив на світову економіку та фінансові ринки. Зростання їхньої популярності
викликає потребу у спеціалізованих інструментах для аналізу та відстеження їхніх цін
і графіків. Веб-сервіси, які надають зручний доступ до цієї інформації, стають
невід'ємною складовою успішних стратегій інвестування та торгівлі на
криптовалютних ринках. Завдяки таким сервісам користувачі можуть ефективніше
приймати рішення щодо своїх фінансових операцій та здійснювати аналіз заробітку
на криптовалютних інвестиціях. Саме такий веб-сервіс для відстеження цін і графіків
криптовалют та аналізу заробітку обумовлює актуальність обраної теми
кваліфікаційної роботи бакалавра, оскільки він відповідає потребам сучасного
фінансового ринку та відображає важливість розвитку інструментів для аналізу
криптовалютних інвестицій.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра –
створення веб-сервісу для відстеження цін і графіків криптовалют та аналізу
заробітку.
Для досягнення мети були поставлені такі завдання:
дослідити предметну область;
виконати порівняльний аналіз існуючих сервісів для відстеження цін і графіків
криптовалют та аналізу заробітку;
розробити базу даних;
обрати програмно-технічні засоби для реалізації веб-сервісу;
розробити веб-сервіс для відстеження цін і графіків криптовалют та аналізу
заробітку та виконати його тестування.
Об’єкт дослідження: процеси відстеження цін і графіків криптовалют та аналіз
заробітку.
Предмет дослідження: веб-сервіс для відстеження цін і графіків криптовалют
та аналізу заробітку.
Методи дослідження. Для вирішення поставлених завдань були застосовані
наступні методи дослідження: теоретичний (аналіз літератури з проблеми
дослідження); емпіричний – полягав у спостереженні та налаштуванні веб-сервісу для
відстеження цін і графіків криптовалют та аналізу заробітку; порівняльний – для
здійснення порівнянь існуючих аналогів для відстеження цін і графіків криптовалют
та аналізу заробітку.
Перелік ключових слів: ПРЕДМЕТНА ОБЛАСТЬ, КРИПТОВАЛЮТИ,
ІНВЕСТИЦІЇ, ФІНАНСОВИЙ РИНОК, ГРАФІКИ, АНАЛІЗ, ВЕБ-СЕРВІС, ЦІНИ,
ПРОЄКТУВАННЯ, БАЗА ДАНИХ, FIREBASE, FIGMA.
ABSTRACT
Master’s work contains. 94 pages, 43 figures, 1 table, 13sources used, 4 attachments.
Actuality of theme. Today, cryptocurrencies have a significant impact on the global
economy and financial markets. Their growing popularity creates a need for specialized
tools to analyze and track their prices and charts. Web services that provide convenient
access to this information are becoming an integral part of successful investment and trading
strategies on cryptocurrency markets. Thanks to such services, users can more effectively
make decisions about their financial transactions and analyze earnings from cryptocurrency
investments. Such a web service for tracking prices and graphs of cryptocurrencies and
analyzing earnings determines the relevance of the chosen topic of the bachelor's
qualification work, as it meets the needs of the modern financial market and reflects the
importance of the development of tools for analyzing cryptocurrency investments.
Purpose and tasks of the research. The purpose of the bachelor's qualification work
is to create a Web service for tracking prices and charts of cryptocurrencies and analyzing
earnings.
to achieve the goal, the following tasks were set:
research the subject area;
perform a comparative analysis of existing services for tracking prices and charts of
cryptocurrencies and analyzing earnings;
develop a database;
choose software and technical means to implement the Web services;
develop and test a web service for tracking cryptocurrency prices and charts and
earnings analysis.
The object of research: cryptocurrency price and chart tracking processes and
earnings analysis.
The subject of research: a web service for tracking prices and charts of
cryptocurrencies and analyzing earnings.
Research methods: The following research methods were used to solve the tasks:
theoretical (analysis of the literature on the research problem); empirical – consisted in
observing and setting up a web service for tracking prices and graphs of cryptocurrencies
and analyzing earnings; comparative – for making comparisons of existing analogues for
tracking prices and charts of cryptocurrencies and analyzing earnings.
The list of keywords: SUBJECT FIELD, CRYPTOCURRENCIES, INVESTMENT,
FINANCIAL MARKET, GRAPHICS, ANALYSIS, WEB SERVICE, PRICES, DESIGN,
DATABASE, FIREBASE, FIGMA.
6
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 8
ВСТУП .................................................................................................................................. 9
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................... 10
1.1 Аналіз сучасного стану відстеження цін і графіків криптовалют та аналізу
заробітку …………………… ........................................................................................ 10
1.2 Огляд існуючих аналогів сервісів для відстеження цін і графіків криптовалют та
аналізу заробітку ............................................................................................................ 11
1.2.1 Аналіз сервісу «CryptoCompare» .................................................................... 11
1.2.2 Аналіз сервісу «CoinMarketCap» .................................................................... 13
1.2.3 Аналіз сервісу «CoinGecko» ............................................................................ 15
1.2.4 Аналіз сервісу «BitInfoCharts» ......................................................................... 15
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка
завдання ……………….. ............................................................................................... 16
Висновки до розділу 1 ................................................................................................... 20
2 ПРОЄКТУВАННЯ ВЕБ-СЕРВІСУ ДЛЯ ВІДСТЕЖЕННЯ ЦІН І ГРАФІКІВ
КРИПТОВАЛЮТ ТА АНАЛІЗУ ЗАРОБІТКУ .............................................................. 22
2.1 Опис функціонального програмного середовища для розробки ........................ 22
2.2 Основні принципи розробки веб-сервісів ........................................................... 24
2.3 Архітектура веб-сервісів ....................................................................................... 27
2.4 Розробка діаграми варіантів використання ........................................................... 30
2.5 Проєктування структури бази даних .................................................................... 31
2.6 Опис процесу проєктування структури веб-сервісу для відстеження цін і
графіків криптовалют та аналізу заробітку ................................................................. 34
2.7 Проєктування інтерфейсу користувача ................................................................ 36
Висновки до розділу 2 ................................................................................................... 38
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ......................................................................................... 40
3.1 Постановка завдання ............................................................................................... 40
3.2 Інтерфейс веб-сервісу для відстеження цін і графіків криптовалют .................. 41
7
3.3 Програмна реалізація веб-сервісу для відстеження цін і графіків криптовалют та
аналізу заробітку …………………… ........................................................................... 45
3.4 Особливості тестування веб-сервісу ...................................................................... 49
3.5 Тестування веб-сервісу для відстеження цін і графіків криптовалют та аналізу
заробітку ......................................................................................................................... 50
Висновки до розділу 3 ................................................................................................... 54
ВИСНОВКИ ....................................................................................................................... 55
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 56
ДОДАТОК А. Специфікація 482.ЧДТУ. 42025-01……………………………………..57
ДОДАТОК Б. Текст програми ......................................................................................... 59
ДОДАТОК В. Інструкція користувача ............................................................................ 89
ДОДАТОК Г. Структура бази даних ............................................................................... 95
8
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
СКБД – система керування базами даних;
ПЗ – програмне забезпечення;
Unit-testing – рівень тестування програмного забезпечення, на якому
тестуються окремі одиниці/компоненти програмного
забезпечення;
БД – база даних;
AI – Artificial Intelligence;
IDE – інтегроване середовище розробки, розроблене компанією
JetBrains;
UI/UX – User interface/User experience – поняття, які використовуються
для опису дизайну та функціональності сайту;
ТЗ – технічне завдання;
HTTP- – протокол передачі гіпер-текстових документів.
протокол
(Hyper Text
Transfer
Protocol)
9
ВСТУП
У сучасному цифровому світі криптовалюти стають все більш важливим
інструментом для інвестування та заробітку. З цим зростає і потреба у доступі до
надійної та актуальної інформації про їхні ціни та графіки. Відстеження цих даних
може виявитися складною задачею через високу волатильність ринку криптовалют.
Тут на допомогу приходять веб-сервіси, які надають інвесторам і трейдерам зручний
інтерфейс для відстеження цін, графіків та аналізу ринку криптовалют. В цьому
контексті важливо розглянути можливість розробки та впровадження веб-сервісу,
який надасть користувачам доступ до необхідної інформації та інструментів для
аналізу їхнього заробітку на криптовалютних інвестиціях. У цій роботі буде
розглянуто процес розробки такого веб-сервісу, а також його важливість у контексті
сучасного фінансового ринку.
Актуальність кваліфікаційної роботи бакалавра. Актуальність даної
кваліфікаційної роботи бакалавра обумовлена рядом факторів, що визначають
сучасні потреби та тенденції у фінансовій сфері. У зв'язку зі зростанням інтересу до
криптовалют та їхнього значущого впливу на глобальні фінансові ринки, постає
необхідність у розвитку ефективних інструментів для аналізу та моніторингу цього
сегменту ринку. Метою даної кваліфікаційної роботи є розробка веб-сервісу, який
дозволить користувачам вести облік та аналізувати їхні інвестиції в криптовалюти з
урахуванням даних з різних бірж. Це дасть можливість забезпечити користувачам
повний обзор їхніх інвестиційних портфелів та ефективно управляти ними на основі
об'єктивних даних. Такий веб-сервіс буде актуальним та важливим інструментом для
інвесторів та трейдерів, що активно працюють з криптовалютними активами.
Мета кваліфікаційної роботи бакалавра – створення веб-сервісу для
відстеження цін і графіків криптовалют та аналізу заробітку.
Для досягнення мети були поставлені такі завдання:
дослідити предметну область;
виконати порівняльний аналіз веб-сервісів для відстеження цін і графіків
критовалют та аналізу заробітку
10
розробити базу даних;
обрати програмно-технічні засоби для реалізації веб-сервісу;
розробити веб-сервіс для відстеження цін і графіків критовалют та аналізу
заробітку та виконати його тестування.
Об’єкт і предмет дослідження.
Об’єктом дослідження є процеси відстеження цін і графіків криптовалют та
аналіз заробітку.
Предметом дослідження є веб-сервіс для відстеження цін і графіків
критовалют та аналізу заробітку.
Для вирішення поставлених завдань у кваліфікаційній роботі були застосовані
наступні методи дослідження.
Теоретичний метод передбачав аналіз наукової літератури з проблеми розробки
веб-сервісів для відстеження цін і графіків криптовалют та аналізу заробітку.
Використання цього методу дало можливість отримати вичерпний огляд існуючих
підходів та рекомендацій з побудови ефективного веб-сервісу на Vue.js.
Емпіричний метод включав спостереження та налаштування веб-сервісу для
відстеження цін і графіків криптовалют та аналізу заробітку. Цей етап дозволив
перевірити працездатність та функціональність розробленого сервісу в реальних
умовах та внести необхідні коригування.
Порівняльний метод застосовувався для здійснення порівнянь існуючих
аналогів веб-сервісів для відстеження цін і графіків криптовалют та аналізу заробітку.
Це дало можливість визначити переваги та недоліки розробленого сервісу порівняно
з конкурентами на ринку.
Веб-сервіс для відстеження цін і графіків криптовалют та аналізу заробітку
розроблено з використанням Vue.js. Для зберігання даних та забезпечення їх
доступності була використана технологія Firebase. Проєктування та написання коду
відбувалося відповідно до найкращих практик Vue.js.
Обрані технології повністю відповідають функціональним і нефункціональним
вимогам до веб-сервісів для відстеження цін і графіків криптовалют та аналізу
заробітку. Їхнє застосування забезпечило якісну та ефективну реалізацію проєкту.
11
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану відстеження цін і графіків криптовалют та
аналізу заробітку
На сьогоднішній день ринок криптовалют є вкрай динамічним та волатильним.
Ця характеристика ринку створює значний попит на інструменти, які дозволяють
трейдерам та інвесторам відстежувати цінові рухи та прогнозувати подальші
тенденції.
Існують різноманітні платформи та веб-сервіси, що надають можливість
відстеження цін і графіків криптовалют. Деякі з них пропонують лише базовий
функціонал, такий як відображення поточної ціни та графіку, тоді як інші надають
більш розгорнуті аналітичні інструменти, такі як технічний аналіз, новини та
прогнози.
У багатьох таких сервісах можна створювати особисті облікові записи, де
користувачі можуть зберігати та аналізувати свої інвестиційні портфелі, слідкувати
за їхнім розвитком та виконувати торгівельні операції.
Однак, не дивлячись на наявність різноманітних інструментів, багато інвесторів
стикаються з проблемою нестачі універсального інструменту, який би забезпечив
повний обзор ринку та надавав зрозумілу та доступну інформацію для прийняття
обґрунтованих рішень.
Таким чином, аналіз сучасного стану відстеження цін і графіків криптовалют та
аналізу заробітку підкреслює необхідність розвитку комплексних інструментів, які б
задовольняли потреби трейдерів та інвесторів у точних даних, аналізі та
передбаченнях на ринку криптовалют.
Поміж сучасних інструментів для відстеження цін і графіків криптовалют та
аналізу заробітку існує певний прогалина, яка може бути вирішена шляхом розробки
універсального та комплексного веб-сервісу. Мета проєкту – створити такий веб-
сервіс на базі Vue.js, який дозволить користувачам вводити дані з різних бірж,
12
вказувати кількість токенів та дату транзакції та отримувати детальну інформацію
про їх заробіток.
Цей веб-сервіс буде забезпечувати користувачів зручним інтерфейсом для
введення та збереження даних про торгівельні операції на різних біржах
криптовалют. Крім того, він буде автоматично аналізувати ці дані та надавати
користувачам зручний доступ до інформації про їхній заробіток, включаючи
загальний обсяг прибутку, витрат та чистий дохід.
Такий веб-сервіс буде ідеальним інструментом для активних трейдерів та
інвесторів, які бажають ефективно відстежувати свої фінансові операції на
криптовалютному ринку та аналізувати їхній заробіток в реальному часі. Його
функціональність буде забезпечувати повний обзор торгівельних активів, що
дозволить користувачам приймати обґрунтовані рішення та досягати своїх
фінансових цілей на ринку криптовалют.
Крім того, у веб-сервісі буде реалізована функціональність, що дозволяє
користувачам отримувати останні новини про криптовалютний ринок. Це дозволить
трейдерам та інвесторам бути в курсі найважливіших подій та трендів, що впливають
на цінові коливання криптовалют.
1.2 Огляд існуючих аналогів сервісів для відстеження цін і графіків
криптовалют та аналізу заробітку
В кваліфікаційній роботі бакалавра проведено огляд існуючих аналогів сервісів
для відстеження цін і графіків криптовалют та аналізу заробітку, таких як:
«CryptoCompare», «CoinMarketCap», «CoinGecko», «BitInfoCharts».
1.2.1 Аналіз сервісу «CryptoCompare». Спочатку розглянемо сервіс
«CryptoCompare». Головна сторінка сервісу «CryptoCompare» представлена на
рисунку 1.1. Сервіс «CryptoCompare» відрізняється від інших тим, що він має відкриті
ключі API, які дозволяють розробникам та іншим користувачам отримувати доступ
до різних пропонованих функцій і даних. Це робить його особливо привабливим для
13
тих, хто хоче створювати власні програми або інтегрувати дані у свої веб-сайти чи
інші проєкти [1].
Рисунок 1.1 – Головна сторінка сервісу «CryptoCompare» [1]
Ключі API дозволяють отримати доступ до даних про ціни, графіків, новин,
аналітики та іншої інформації, дозволяючи користувачам створювати різноманітні
аналітичні та інформаційні інструменти на основі даних «CryptoCompare».
На рис. 1.1 представлена головна сторінка сервісу «CryptoCompare» та сторінка
з API ключами сервісу, що показано на рис. 1.2.
Рисунок 1.2 – Сторінка з API ключами «CryptoCompare» [1]
14
Крім того, «CryptoCompare» пропонує різні інструменти та аналітичні звіти
для трейдерів та інвесторів, щоб допомогти їм приймати обґрунтовані рішення на
ринку криптовалют. Інформації, наданої через цей сервіс, достатньо для визначення
поточної ситуації на ринку та прийняття відповідних торгових або інвестиційних
рішень.
Переваги сервісу «CryptoCompare»:
Платформа надає широкий спектр данних, включаючи ціни, графіки, обсяги
торгів, ринкову капіталізацію та інші статистичні дані зі світу криптовалют.
«CryptoCompare» пропонує різні інструменти для аналізу криптовалют,
включаючи технічний та фундаментальний аналіз, що дозволяє користувачам
приймати обґрунтовані інвестиційні рішення.
Користувачі можуть створювати власні портфелі криптовалют та відстежувати
їх рухи в реальному часі. Це дозволяє зберігати контроль над своїми інвестиціями та
аналізувати їхній ринковий вплив.
«CryptoCompare» надає доступ до свого API для розробників, що дозволяє
створювати власні додатки та інструменти на основі даних, які надаються
платформою.
Незважаючи на переваги, «CryptoCompare» також має деякі недоліки:
Недоліки сервісу «CryptoCompare»:
Деякі функції та дані доступні лише за плату або для користувачів з підпискою.
Деякі користувачі можуть виявити інтерфейс «CryptoCompare» менш
інтуїтивним, особливо на початкових етапах користування.
У деяких випадках дані на платформі можуть оновлюватися з затримкою, що
може вплинути на точність та актуальність інформації.
1.2.2 Аналіз сервісу «CoinMarketCap». Другим в роботі проаналізовано
сервіс «CoinMarketCap» [2]. Головна сторінка сервісу «CoinMarketCap»
представлена на рис. 1.3. Вона відображає загальну інформацію про
найпопулярніші криптовалюти. «CoinMarketCap» є одним із найвідоміших і
широко використовуваних ресурсів для отримання актуальної інформації про
ринок криптовалют. Його основні функції включають: відстеження ціни, ринкової
15
капіталізації, обсягу торгів та іншої статистики кожної криптовалюти. Користувачі
можуть отримати доступ до детальної інформації про кожну криптовалюту, такої
як історія цін, графіки, технічні індикатори та новини. «CoinMarketCap» також
надає можливість порівнювати різні криптовалюти за різними параметрами. Цей
сервіс є важливим інструментом для трейдерів, інвесторів і всіх, хто цікавиться
криптовалютами.
Рисунок 1.3 – Головна сторінка сервісу «CoinMarketCap» [2]
Основні переваги «CoinMarketCap». включають доступність безкоштовної
версії сервісу, широкий обсяг даних та інтуїтивно зрозумілий інтерфейс. Проте,
«CoinMarketCap» також має деякі недоліки. Наприклад, може виникати певна
нестабільність у даних, особливо у випадку менш відомих або нових криптовалют.
Також, функціональність безкоштовної версії може бути обмеженою і користувачі
можуть потребувати підписки на преміум-плани, щоб отримати доступ до деяких
додаткових функцій або інструментів.
1.2.3. Аналіз сервісу «CoinGecko». Наступним в роботі проаналізовано сервіс
«CoinGecko». Після детального вивчення даного сервісу, можна зазначити, що
«CoinGecko» є ще одним важливим ресурсом для відстеження інформації про
криптовалютний ринок. Його головною особливістю є те, що він надає додаткові
статистичні дані та метрики, які допомагають зрозуміти ринкову динаміку та
тенденції [3].
16
Головна сторінка сервісу «CoinGecko» представлена на рис. 1.4 [3].
Рисунок 1.4 – Головна сторінка сервісу «CoinGecko» [3]
Крім того, «CoinGecko» пропонує інтерактивні графіки, які дозволяють
аналізувати рух цін та тенденції ринку у зручному форматі.
У порівнянні з попередніми сервісами, «CoinGecko» може включати більш
широкий спектр криптовалют та представлення додаткових метрик, що допомагає
забезпечити більш повний обзор ринку. Також «CoinGecko» може надавати більше
додаткових функцій та інструментів для аналізу ринку та прийняття обґрунтованих
інвестиційних рішень. В цілому, «CoinGecko» може бути корисним інструментом для
тих, хто цікавиться криптовалютами та бажає отримати більше інформації для
прийняття обґрунтованих фінансових рішень.
Недоліки сервісу «CoinGecko»:
Обмеження в функціоналі безкоштовної версії сервісу.
Нестабільність даних для менш відомих або нових криптовалют.
Переваги сервісу «CoinGecko»:
Наявність інтерактивних графіків та інших інструментів для аналізу ринку.
Доступність різноманітних метрик та статистики.
17
1.2.4. Аналіз сервісу «BitInfoCharts». Також в кваліфікаційні роботі бакалавра
проаналізовано сервіс «BitInfoCharts». Головна сторінка сервісу «BitInfoCharts»
представлена на рис. 1.5.
Рисунок 1.5 – Головна сторінка сервісу «BitInfoCharts» [4]
Аналізуючи сервіс «BitInfoCharts», можна відзначити його велику корисність
для відстеження ринкової динаміки та роботи зі статистикою. Він надає користувачам
можливість отримувати інформацію про різні індикатори криптовалюти та їхні
зв’язки, що може бути корисним для трейдерів, інвесторів та аналітиків ринку.
Недоліки сервісу «BitInfoCharts»:
Широкий спектр статистичних даних, які охоплюють різні параметри
криптовалют.
Зручний та легко зрозумілий інтерфейс для користувачів.
Можливість отримання інсайтів щодо динаміки ринку та взаємозв'язків між
різними криптовалютами.
Переваги сервісу «BitInfoCharts»:
Нестабільність даних для менш відомих криптовалют.
Обмежена функціональність безкоштовної версії сервісу.
Можливість надання неактуальної або неточної інформації в деяких випадках.
18
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
Проаналізувавши існуючі рішення розглянутих реалізацій, в кваліфікаційній
роботі бакалавра є кілька пропозицій щодо покращення роботи з ними.
1. Додати можливість обрати конкретну криптовалюту для відстеження її ціни та
графіку.
2. Вдосконалення дизайну та користувацького досвіду, щоб зробити сервіси
більш інтуїтивно зрозумілими та зручними для користувачів.
3. Додавання нових криптовалют до бази даних сервісів, особливо для менш
відомих або нових монет.
4. Додати можливіть проаналізувати заробіток за весь час.
У таблиці 1.1 представлено порівняльний аналіз розглянутих сервісів для
відстеження цін і графіків криптовалют та аналізу заробітку, а саме:
«CryptoCompare», «CoinMarketCap», «CoinGecko», «BitInfoCharts».
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих реалізацій
Критерії Назва сервісу
порівняння
сервісів «CryptoCompare» «CoinMarketCap» «CoinGecko» «BitInfoCharts»
Користуваць-
кий
4 5 5 3
інтерфейс
(0-5)
Додаткові
функції 5 5 5 5
(0-5)
Кількість
криптовалют 5 5 5 5
(0-5)
Доступність
даних 5 5 4 3
(0-5)
Актуальність
і оновлення 5 5 5 5
(0-5)
Вартість Безкоштовно Платно Безкоштовно Безкоштовно
19
Підсумовуючи перегляд та оцінку приведених вище сервісів, варто зазначити,
що кожному з них притаманні такі характеристики:
Широке охоплення: усі сервіси, включаючи «CryptoCompare»,
«CoinMarketCap», «CoinGecko», «BitInfoCharts», мають високий рівень покриття
криптовалютних ринків, що дозволяє користувачам отримувати доступ до інформації
про широкий спектр активів.
Різноманітні функції: кожен з цих сервісів надає різноманітні функції та
інструменти, такі як: графіки, аналітика, новини, портфелі та інше, що дозволяє
користувачам здійснювати різноманітні аналізи та діяти відповідно до своїх
інвестиційних потреб.
Актуальність і оновлення: всі сервіси забезпечують актуальну та оновлену
інформацію про криптовалютні ринки, що дозволяє користувачам отримувати доступ
до найсвіжіших даних для прийняття обґрунтованих рішень.
Різний користувацький інтерфейс: хоча у кожного сервісу є свої переваги, що
стосується користувацького інтерфейсу, але вони відображають різні підходи та
візуалізації даних, що дає користувачам можливість вибору сервісу, який найбільше
відповідає їхнім потребам та вподобанням.
Вартість: більшість сервісів, такі як «CryptoCompare», «CryptoCompare» та
«BitInfoCharts», є безкоштовними для використання, хоча можуть бути доступні
платні плани або додаткові функції. Сервіс «CoinMarketCap» пропонує платні плани
з розширеними функціями.
Загалом, кожен з цих сервісів має свої переваги та особливості, і вибір між ними
залежить від індивідуальних потреб та вподобань користувача.
Постановка завдання
1. Загальна характеристика проєкту:
Мета кваліфікаційної роботи бакалавра – створити веб-сервіс для відстеження
цін і графіків криптовалют, а також для аналізу заробітку на ринку криптовалют. Веб-
сервіс буде базуватися на технологіях Vue.js, Firebase та інших сучасних інструментах
розробки.
2. Опис функціональності:
20
Користувачі матимуть можливість переглядати ціни і графіки різних
криптовалют.
Користувачі зможуть вводити дані про торгівельні операції, такі як кількість
токенів та дату транзакції.
Система автоматично аналізуватиме ці дані і надаватиме користувачам звіт про
їхній заробіток на ринку криптовалют.
Користувачі також зможуть переглядати останні новини зі світу криптовалют.
3. Очікуваний результат:
Очікується розробка веб-сервісу, який буде надавати користувачам зручний
інтерфейс для відстеження цін і графіків криптовалют, а також для аналізу їхнього
заробітку на ринку. Сервіс повинен бути швидким, надійним і масштабованим.
4. Технічні вимоги:
Веб-сервіс має бути реалізований з використанням Vue.js для фронтенду та
Firebase для збереження даних.
Система повинна бути легко масштабованою та можливою до розширення з
урахуванням майбутніх потреб користувачів.
Забезпечення високої продуктивності та ефективності роботи сервісу.
5. Терміни реалізації:
Очікується, що веб-сервіс буде розроблений і готовий до випуску протягом 6
місяців з моменту початку розробки.
Ця постановка завдання встановлює основні вимоги та очікування щодо
розробки веб-сервісу для відстеження цін і графіків криптовалют та аналізу заробітку
на ринку криптовалют.
Висновки до розділу 1
Висновки цього розділу включають наступне:
Аналіз існуючих рішень: проаналізовано чотири популярних сервіси для
відстеження цін і графіків криптовалют: «CryptoCompare», «CoinMarketCap»,
«CoinGecko», «BitInfoCharts». Кожен з них має свої особливості та переваги.
21
Оцінка характеристик: порівнюючи ці сервіси, можна визначити, що вони всі
пропонують широкий спектр інформації про криптовалютні ринки, різноманітні
функції та інструменти для аналізу. Кожен з них має свої особливості щодо
користувацького інтерфейсу, доступності даних та інші аспекти.
Необхідність власного рішення: враховуючи обмеження та недоліки існуючих
рішень, виникає необхідність в розробці власного веб-сервісу для відстеження цін і
графіків криптовалют, а також аналізу заробітку. Це дозволить користувачам
отримати доступ до персоналізованих функцій та забезпечити їхні індивідуальні
потреби.
Постановка завдання: сформульовано постановку завдання для розробки веб-
сервісу на основі Vue.js, Firebase та інших технологій. Визначено: мету, завдання,
використані технології та очікуваний результат проєкту.
Отже, на основі аналізу існуючих рішень та постановки завдання можна
визначити шляхи подальшого розвитку та вдосконалення веб-сервісу для
задоволення потреб користувачів.
22
2 ПРОЄКТУВАННЯ ВЕБ-СЕРВІСУ ДЛЯ ВІДСТЕЖЕННЯ ЦІН І
ГРАФІКІВ КРИПТОВАЛЮТ ТА АНАЛІЗУ ЗАРОБІТКУ
2.1 Опис функціонального програмного середовища для розробки
Розглянемо програмне середовище та його особливості розробки веб-сервісу
для відстеження цін і графіків криптовалют та аналізу заробітку.
WebStorm є інтегрованим середовищем розробки (IDE), розробленим
компанією JetBrains, спеціально для веб-розробки. Випущений у 2010 році, WebStorm
став популярним інструментом серед веб-розробників завдяки своїм розширеним
можливостям та інтуїтивному інтерфейсу. [https://www.jetbrains.com/webstorm/]
Історично, WebStorm був розроблений як одне з перших інтегрованих
середовищ розробки, яке підтримувало ECMAScript 6 (тепер відомий як ECMAScript
2015) та інші нові стандарти JavaScript. Це дозволило розробникам використовувати
останній синтаксис JavaScript і отримувати переваги від нових можливостей мови.
Однією з ключових особливостей WebStorm є його розширена підтримка
різних мов програмування, таких як JavaScript, TypeScript, HTML, CSS, а також
препроцесорів CSS, таких як Sass і LESS. Інтелектуальне автодоповнення коду
допомагає розробникам швидко та ефективно писати код, мінімізуючи можливі
помилки.
Крім цього, WebStorm надає інструменти аналізу коду, які допомагають
виявляти та виправляти помилки, а також покращують якість коду. Інтеграція з
системами контролю версій, такими як Git, робить спільну роботу над проектами
більш зручною.
З часом WebStorm став популярним вибором серед розробників завдяки своїй
надійності, продуктивності та багатофункціональності. Історично WebStorm був і
залишається одним з провідних інструментів для веб-розробки, надаючи розробникам
зручне середовище для творчості та вдосконалення своїх проєктів.
Vue.js – це прогресивний JavaScript фреймворк, призначений для створення
користувацьких інтерфейсів веб-додатків та односторінкових додатків. Він був
23
створений юним китайським розробником Еваном Ю (Evan You), який розпочав
роботу над фреймворком у 2013 році [7].
Однією з основних концепцій Vue.js є його легкість вивчення та використання,
приклад вивчення Vue.js можна побачити на рис. 2.1.
Рисунок 2.1 – Карта вивчення Vue.js [8]
Фреймворк пропонує просту та інтуїтивну API, яка дозволяє швидко
створювати динамічні інтерфейси без глибоких знань JavaScript або складних
концепцій. Vue.js також має мінімальну величину, що дозволяє його легко
використовувати в невеликих проектах.
Історично Vue.js виник як відповідь на нестачу гнучкості та складності інших
фреймворків на той момент, таких як Angular та React. Під час розробки, Еван Ю
використовував ідеї з Angular та React, але зосередився на створенні простого та
елегантного рішення.
Vue.js швидко набрав популярність у веб-розробників завдяки своїй легкості
використання та великому співтовариству. Його активна спільнота розробників
продовжує активно розвивати фреймворк, додаючи нові функції та покращення у
кожному оновленні.
24
Сьогодні Vue.js вважається одним з найпопулярніших фреймворків для веб-
розробки та користувацьких інтерфейсів, що використовується в різних проєктах по
всьому світу.
2.2 Основні принципи розробки веб-сервісів
1991 рік. Інженер Тім Бернс-Лі створив перший у світі веб-сайт. Таку собі
примітивну інформаційну сторінку…аби показати, який вигляд має мова розмітки
HTML.
З того моменту, здається, минула ціла вічність. І сьогодні кількість сайтів різної
складності/тематики вже перевищує мільярд.
Більша частина населення Землі все ж залишається простими користувачами у
всесвітній мережі. Однак, є ті, для кого Internet – це щось більше, аніж засіб пошуку
потрібної інформації. Ці люди – веб-розробники.
Веб-розробка для програміста і дизайнера це і хобі, й робота водночас.
Робота, що вимагає постійного розвитку і пошуку нових рішень. Мови
програмування постійно вдосконалюються, а програми оновлюються щомісяця (або
й щодня). Тож розробникам необхідно постійно тримати руку на пульсі, аби не
відстати з огляду на темпи розвитку сучасних технологій.
Розробка для програміста або дизайнера – як творчість для художника. А
кожний створений сайт – предмет гордості. Розробник – перш за все, фахівець. Його
завдання – не просто писати код. А завдання дизайнера не просто створювати дизайн.
Кінцева мета для обох – створення продукту, який повністю задовольняє вимоги
клієнта.
Процес розробки чітко розділений на етапи, що повинні бути реалізовані у
рамках проєкту. Розглянемо їх детальніше.
Отже, основні етапи веб-розробки:
Аналіз брифу і написання технічного завдання (ТЗ).
Бриф – це такий документ, своєрідна анкета, яку заповнює замовник. У брифі
клієнт вказує свої побажання щодо дизайну, функціоналу сайту чи програми та інші
25
деталі проєкту. На основі брифу менеджери IT-компанії складають ТЗ для
розробників.
Прототипування.
Важливий етап, особливо для великих проєктів. Прототип – це схема всіх або
декількох сторінок сайту у формі ескізу або HTML-документа, в якому відображені
взаєм одії та структурні елементи майбутнього сайту: меню, кнопки, форми та інше.
Приклад прототипування в Figma наведений на рис. 2.2 [10].
Рисунок 2.1 – Приклад прототипування в Figma
Розробка дизайну.
На цьому етапі дизайнер малює сторінки ресурсу. Сьогодні важливо, щоб сайт
мав не лише десктопну версію, а й мобільну. Незмінною вимогою до дизайну є
«дружній» інтуїтивно зрозумілий інтерфейс. Тобто, коли користувач легко і швидко
знаходить потрібну інформацію на сайті. Приклад розробки дизайну в 7 етапів
вказаний на рис. 2.2.
Програмування.
Інтерфейсні розробники перетворюють макети з дизайном на інтерактивні веб-
сторінки за допомогою мови HTML (по суті, вони перетворюють зображення на код).
Back-end розробники поєднують/інтегрують готові веб-сторінки з базою даних і
26
системою керування сайтом. Їхнє завдання – зробити сайт не просто закодованою
картинкою, а перетворити його на повноцінний робочий інструмент.
Рисунок 2.2 – Приклад розробки дизайну в 7 етапів
Тестування.
Ресурс перевірено на відповідність дизайну макетів, швидкість роботи,
оптимізацію під мобільні пристрої та відображення в різних браузерах. Остаточна
перевірка якості – це оцінка готового продукту з точки зору як програміста, так і
користувача. Тестується працездатність: чи є можливість зробити покупку, чи
проходить оплата, чи надходять листи тощо. Тестується функціональність проєкту в
цілому.
Наповнення сайту.
Цим займається контент-менеджер, власник сайту або IT-компанія. Етап, коли
сайт оживає і стає унікальним. Він починає «розповідати», навіщо він створений, які
товари та послуги можна надавати.
Деплой сайту.
На цьому етапі компанія-розробник допомагає клієнту вибрати хостинг (місце
в Інтернеті) і отримати домен (адресу ресурсу) – два пункти, необхідні для
розміщення сайту. Після цього сайт переноситься на цей хостинг. Ресурс відкритий
для пошукових систем, а після переказу відбувається етап фінального тестування.
27
2.3 Архітектура веб-сервісів
Архітектура веб-сервісів є ключовим аспектом їх розробки та функціонування.
Вона визначає спосіб побудови, організації та взаємодії компонентів веб-системи з
метою забезпечення швидкодії, масштабованості, безпеки та інших характеристик.
Ось детальний огляд архітектури веб-сервісів [11]:
1. Клієнт-серверна архітектура:
Це найпоширеніший тип архітектури веб-сервісів, де функціональність
розділена між клієнтом (браузером або мобільним додатком) та сервером.
Клієнт відправляє запити на сервер для отримання даних або виконання певних
операцій, а сервер відповідає на ці запити та обробляє їх.
Приклад клієнт-серверної архітектури на рис. 2.3.
Рисунок 2.3 – Клієнт-серверна архітектура
2. RESTful архітектура:
REST (Representational State Transfer) є архітектурним стилем, який
використовується для розробки веб-сервісів.
Вона базується на принципах, що визначають стандартні взаємодії між
клієнтом та сервером, такі як створення, читання, оновлення та видалення
даних (CRUD).
28
RESTful сервіси повинні бути безстановними, тобто не зберігати інформацію
про стан клієнта між запитами.
Приклад клієнт-серверної архітектури на рис. 2.4.
Рисунок 2.4 – RESTful архітектура [15]
3. Мікросервісна архітектура [14]:
Це підхід до розробки веб-сервісів, де додаток розбивається на невеликі,
автономні та повністю функціональні сервіси.
Кожен мікросервіс виконує обмежену кількість функціональних операцій та
може бути розгорнутий, масштабований та керований окремо від інших
сервісів.
Приклад Мікросервісної архітектури представлено на рис. 2.5.
Рисунок 2.5 – Мікросервісна архітектура [14]
4. Схема шарів (Layered architecture) [14]:
Цей підхід полягає в розділенні функціональності додатка на рівні шари, які
взаємодіють один з одним у логічному порядку.
Найбільш типова схема включає шари представлення, бізнес-логіки та даних,
але можуть бути інші шари в залежності від потреб проєкту.
Приклад схеми шарів подано на рис. 2.6.
29
Рисунок 2.6 – Схема шарів
5. Сервіс-орієнтована архітектура (SOA) є підходом до розробки програмного
забезпечення, де додаток будується у вигляді набору сервісів. Кожен сервіс
виконує конкретну функцію і може бути використаний у різних контекстах.
Основною ідеєю SOA є розділення функціональності на окремі модулі
(сервіси), які можуть комунікувати між собою за допомогою стандартизованих
протоколів [14].
Ключові характеристики SOA включають:
Розділення функціональності на невеликі, незалежні сервіси.
Використання стандартизованих протоколів для взаємодії між сервісами, таких
як HTTP, SOAP або REST.
Можливість перевикористання сервісів у різних додатках та проєктах.
Масштабованість, що дозволяє додавати або змінювати сервіси без впливу на
інші частини системи.
Забезпечення гнучкості та легкості розширення за рахунок розділення системи
на окремі компоненти.
Приклад сервіс-орієнтованої архітектури на рис. 2.7.
30
Рисунок 2.7 – Сервіс-орієнтована архітектура [14]
2.4 Розробка діаграми варіантів використання
Розглянемо можливість створення діаграми варіантів використання для веб-
сервісу, щоб відстежувати ціни та графіки криптовалют і аналізувати дохід.
У веб-сервісі є кілька основних акторів:
1. Користувач: головний актор, який використовує сервіс для відстеження цін на
криптовалюту, аналізу заробітку і роботи з сервісом.
2. Адміністратор: особа, відповідальна за управління та підтримку веб-сервісу.
Він може надавати технічну підтримку, модерувати контент і взаємодіяти з
користувачами в разі виникнення проблем або запитів.
На основі цих акторів можна визначити наступні варіанти використання веб-
сервісу.
1. Реєстрація нового користувача.
2. Авторизація в системі.
3. Перегляд графіків цін криптовалют доданих по власному бажанню.
4. Аналіз заробітку користувача на основі введених даних.
5. Додавання нових транзакцій та збереження їх у особистому обліковому записі
користувача.
6. Перегляд історії транзакцій та заробітку.
31
7. Налаштування особистого профілю користувача.
8. Підтримка від адміністратора у випадку технічних або інших проблем.
Перегляньте історію транзакцій і прибутки.
Ці варіанти використання дозволять користувачам зручно працювати з веб-
сервісом та отримувати необхідну інформацію про криптовалютні ринки та їх
діяльність.
2.5 Проєктування структури бази даних
В рамках даної кваліфікаційної роботи спроєктовано структуру бази даних для
веб-сервісу відстеження цін і графіків криптовалют та аналізу заробітку.
Основним завданням роботи є забезпечення надійного зберігання та швидкого
доступу до даних, а також можливість безпечної реєстрації та авторизації
користувачів. Для досягнення цих цілей використовувалися Firebase для реєстрації та
авторизації користувачів і LocalStorage для зберігання користувацьких даних на
клієнтській стороні.
Firebase Authentication обрана для реалізації функцій реєстрації та авторизації
користувачів завдяки її простоті, надійності й безпеці. Firebase Authentication
дозволяє легко інтегрувати різні методи автентифікації, такі як електронна пошта та
пароль.
Для інтеграції Firebase в проєкті виконано наступні кроки:
1. Створення нового проєкту в консолі Firebase.
2. Додавання Firebase Authentication до проєкту.
3. Інсталяція Firebase SDK та його налаштування в проєкті.
Конфігурація Firebase в проєкті виглядає наступним чином (рис. 2.8):
32
Рисунок 2.8 – Конфігурація Firebase в проєкті
LocalStorage обрана для зберігання користувацьких даних на клієнтській
стороні через її простоту у використанні та доступність. LocalStorage дозволяє
зберігати дані у вигляді ключ-значення у браузері користувача, що забезпечує
швидкий доступ до цих даних без необхідності звертатися до сервера. Для зберігання
даних у LocalStorage використовуються прості методи, такі як setItem та getItem.
Збереження та отримання даних про криптовалюти представлено на рис. 2.9:
Рисунок 2.9 – Збереження та отримання даних про криптовалюти
33
При виконанні роботи для організації даних у Firebase вирішено
використовувати наступну структуру бази даних:
Колекція users зберігає інформацію про користувачів. Основні поля включають:
− user_id: Унікальний ідентифікатор користувача.
− email: Адреса електронної пошти користувача.
− displayName: Ім'я користувача.
− cryptocurrencies: Піддокумент, який містить інформацію про криптовалюти, які
відстежує користувач.
Піддокумент cryptocurrencies містить інформацію про криптовалюти:
− cryptocurrency_id: Унікальний ідентифікатор криптовалюти.
− symbol: Символ криптовалюти (наприклад, BTC для Bitcoin).
− name: Назва криптовалюти.
− addedAt: Дата додавання криптовалюти до списку.
Колекція cryptocurrency_prices зберігає історичні дані про ціни криптовалют.
Основні поля включають:
− symbol: Унікальний ідентифікатор криптовалюти.
− name: Назва криптовалюти.
− prices: Піддокумент, який містить дату та відповідну ціну на цю дату.
Піддокумент prices містить інформацію про ціни криптовалюти на різні дати:
− date: Дата, на яку зберігається ціна.
− price: Ціна криптовалюти на цю дату.
Проєктування структури бази даних для веб-сервісу включає в себе
використання Firebase для забезпечення надійної реєстрації та авторизації
користувачів, а також LocalStorage для зберігання даних на клієнтській частині.
Структура бази даних дозволяє ефективно організувати дані про користувачів та
криптовалюти, забезпечуючи їх зручне та швидке відстеження.
34
2.6 Опис процесу проєктування структури веб-сервісу для відстеження
цін і графіків криптовалют та аналізу заробітку
Процес проєктування структури веб-сервісу для відстеження цін і графіків
криптовалют та аналізу заробітку починається з аналізу вимог та потреб користувачів.
На першому етапі необхідно чітко визначити функціональність, яку має надавати веб-
сервіс, а також інструменти для аналізу заробітку на основі інформації про
криптовалютні операції.
Далі, на основі цих вимог, розробляється структура бази даних, яка буде
забезпечувати ефективне зберігання та доступ до даних про ціни і графіки
криптовалют, інформацію про зареєстрованих користуваців а також інформацію про
транзакції та заробіток користувачів. Ця структура бази даних повинна бути
оптимізована для швидкого доступу та високої масштабованості.
Процес реєстрації користувачів є одним із перших етапів взаємодії з веб-
сервісом для відстеження цін і графіків криптовалют та аналізу заробітку. Для
забезпечення доступу до функціоналу сервісу користувач повинен створити
обліковий запис. Процес реєстрації включає наступні кроки:
Користувач заповнює форму реєстрації, вводячи необхідні особисті дані, такі
як ім'я, електронна пошта та пароль.
Система перевіряє введені дані на валідність та унікальність. Наприклад,
перевіряється, чи не використовується вже електронна пошта для іншого облікового
запису.
Після успішної перевірки користувача додається до бази даних, і йому
присвоюється унікальний ідентифікатор.
Користувач отримує підтверджувальне повідомлення або посилання для
завершення реєстрації та активації облікового запису.
Після активації облікового запису користувач може увійти до системи,
використовуючи свої облікові дані.
Цей процес забезпечує конфіденційність та безпеку особистої інформації
користувачів та створює основу для подальшого використання веб-сервісу.
35
На рис. 2.8-2.9 представлено процеси реєстрації та авторизації.
Безумовно, що процес реєстрації є ключовим елементом.
Процес авторизації користувача (рис. 2.9) є не менш важливим із процесів веб-
сервісу, так як кожен користувач повинен мати свою сторінку, де він може зберігати
власну історію заробітку. Для авторизації користувач повинен:
− ввести дані;
− перевірити їх валідність;
− підтвердити авторизацію.
Провівши аналіз ресурсів для відстеження цін і графіків криптовалют та аналізу
заробітку, в кваліфікаційній роботі бакалавра обрано структуру веб-сервісу, що
складається з таких розділів:
− Головна сторінка;
− Реєстрація користувача;
− Авторизація користувача;
− Додавання криптовалют з можливістю відстеження цін;
− Профіль користувача в якому можливо відстежити свій заробіток.
Рисунок 2.8 – Процес реєстрації Рисунок 2.9 – Процес авторизації
36
2.7 Проєктування інтерфейсу користувача
У рамках кваліфікаційної роботи бакалавра було поставлено завдання
розробити макети сторінок для веб-сервісу з відстеження цін і графіків криптовалют
та аналізу заробітку. Для цього використаний популярний веб-сервіс та програма для
дизайну і прототипування інтерфейсів користувача – Figma.
Figma надає ряд зручних інструментів, включаючи веб-платформу, векторний
редактор, можливість створення компонентів і стилів, прототипування, а також
спільну роботу та командну роботу. Однією з ключових переваг є можливість спільно
працювати над проєктами в реальному часі, а також збереження всіх даних в хмарі
для легкого доступу та обміну з колегами або клієнтами [13].
Figma підтримує широкий спектр плагінів і розширень, що розширюють
можливості програми. Ці додатки дозволяють автоматизувати різні завдання,
експортувати ресурси, забезпечують зручний зв'язок з іншими інструментами та
багато іншого.
Щодо захисту даних, Figma забезпечує високий рівень конфіденційності. Всі
дані передаються через зашифроване з'єднання, а доступ до проєктів може бути
обмежений за допомогою різних рівнів доступу та прав користувачів.
Figma стала вибором для багатьох дизайнерів та розробників завдяки своїм
зручним інструментам, спільній роботі та можливостям прототипування. Вона
спрощує спільну роботу команд над проєктами, дозволяючи працювати в реальному
часі з різних місць і пристроїв.
Крім того, Figma забезпечує зручне управління версіями проєкту, автоматично
зберігаючи їх та дозволяючи легко відстежувати зміни та відновлювати попередні
версії.
Ще однією перевагою є можливість створювати інтерактивні прототипи, що
допомагають командам та клієнтам краще зрозуміти функціонал та поведінку
готового продукту.
37
Загалом, Figma є потужним інструментом для розробки дизайну інтерфейсу
користувача, забезпечуючи зручну спільну роботу, можливості прототипування та
ефективне управління проектами.
За допомогою веб-додатку «Figma» розроблені приблизні макети для сторінок
клієнтського інтерфейсу (рис. 2.10–2.12).
Рисунок 2.10 – Інтерфейс сторінки додавання криптовалюти
Рисунок 2.11 – Інтерфейс сторінки з криптовалютами
Рисунок 2.12 – Інтерфейс реєстрації та авторизації
38
Висновки до розділу 2
У даному розділі надано огляд функціонального програмного середовища для
веб-сервісу з відстеження цін і графіків криптовалют, а також проведено аналіз
ключових аспектів розробки такого сервісу та його бази даних.
Була розроблена діаграма Use Case, що відображає можливості та взаємодію
користувачів з веб-сервісом для відстеження цін і графіків криптовалют. Це
дозволило чітко визначити функціональність та потреби користувачів у зручному
інтерфейсі.
За допомогою веб-додатку для дизайну Figma було розроблено інтерфейс веб-
сервісу для відстеження цін і графіків криптовалют. Це дозволило зазирнути в
майбутній вигляд веб-сервісу та вирішити питання дизайну до початку реалізації.
Також було визначено, що використання технології Serverless дозволяє значно
зменшити витрати на хостинг і підвищити масштабованість веб-сервісу для
відстеження цін і графіків криптовалют. Це дозволить забезпечити швидку і
ефективну роботу додатку навіть у випадку великого обсягу даних та трафіку.
39
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Постановка завдання
Завданням кваліфікаційної роботи бакалавра є написання веб-сервісу для
відстеження цін і графіків криптовалют та аналізу заробітку.
Програма буде створена з використанням мови програмування Vue та
програмного середовиза Webstorm.
Розроблений веб-сервіс надасть користувачам можливість автентифікації та
реєстрації за допомогою Firebase. Для цього потрібно реалізувати функціонал
додавання криптовалют і відстеження їх графіків і цін. Крім того, в проєкті повинна
бути сторінка з калькулятором, за допомогою якої користувачі зможуть
розраховувати заробіток на основі введених даних – назви криптовалюти та дат її
купівлі-продажу.
Веб-сервіс повинен стати зручним та ефективним інструментом для аналізу та
відстеження криптовалютних активів. Завдяки авторизації Firebase користувачі
зможуть зручно керувати своїм обліковим записом. Додавання криптовалют і
відстеження їх графіків і цін дозволить користувачам швидко отримувати актуальну
інформацію про ринок. Калькулятор прибутку допоможе їм приймати зважені
рішення щодо інвестування та торгівлі криптовалютами.
Технічною частиною проєкту буде інтеграція Firebase для реалізації авторизації
та реєстрації користувачів. Щоб відстежувати ціни та графіки криптовалюти,
використовуються відповідні API, які надають актуальну інформацію. Написання
калькулятора прибутку передбачає розробку логіки розрахунку на основі вхідних
даних за допомогою Javascript і Vue.js.
Цей проєкт дозволить продемонструвати навички веб-розробки та здатність
створювати корисні та практичні веб-додатки для користувачів.
40
3.2 Інтерфейс веб-сервісу для відстеження цін і графіків криптовалют та
аналізу заробітку
Ключовою частиною проєкту є розробка інтерфейсу веб-сервісу для
відстеження цін і графіків криптовалюти та аналізу заробітку. Інтерфейс повинен
бути інтуїтивно зрозумілим, зручним і привабливим для користувачів. Для цього всі
елементи стилізовані за допомогою CSS, що дозволяє створити сучасний та
адаптивний дизайн.
Головна сторінка веб-сервісу зустрічає користувача зрозумілим і лаконічним
дизайном, де є форма для авторизації та реєстрації через Firebase (рис. 3.1). Цей крок
є критично важливим, оскільки він забезпечує безпеку та персоналізацію взаємодії з
користувачем. Форма реєстрації передбачає введення основних даних, таких як
адреса електронної пошти та пароль. Форма авторизації містить поля для введення
електронної адреси та пароля. Усі форми мають чітке маркування та повідомлення
про помилки для зручності користувача.
Рисунок 3.1 – Форма реєстрації та авторизації
Після успішного входу користувач потрапляє на головну панель, де
розташовані основні функціональні блоки (рис. 3.2). Головне меню, розташоване у
верхній частині сторінки, містить розділи «Додати криптовалюту», «Графіки»,
«Ціни» та «Аналіз заробітку» та кнопку «Вийти», що дозволяє вийти з аккаунту.
41
Кожен із цих розділів доступний через відповідні посилання та кнопки, що робить
навігацію сайтом простою та логічною.
Рисунок 3.2 – Головна сторінка веб-сервісу
Розділ «Додати криптовалюту» дозволяє користувачам додавати криптовалюти
до свого списку спостереження (рис. 3.3).
Рисунок 3.3 – Додавання криптовалюти
Інтерфейс цього розділу містить форму для введення назви криптовалюти та
кнопку підтвердження додавання. Дизайн цього блоку передбачає виділення назви
криптовалюти та конвертація його ціни в «USD» та надає користувачам актуальну
інформацію про поточні ціни на криптовалюту. Таблиця цін має чітку структуру, що
42
дозволяє швидко знайти необхідну інформацію. Кожен рядок таблиці містить дані
про назву криптовалюти і її поточну ціну.
У розділі «Графіки» користувачі можуть переглядати графіки цін для вибраних
криптовалют (рис. 3.4). Графік дозволяє користувачам аналізувати динаміку цін за
короткі терміни часу. Для стилізації графіків використовувалися CSS і бібліотеки.
Рисунок 3.4 – Графік криптовалюти
Сторінка «Аналіз заробітку» дозволяє користувачам розрахувати можливі
заробітки на криптовалюті. Інтерфейс калькулятора містить поля для введення назви
криптовалюти, інвестованої суми, ціна на момент покупки, комісія за інвестиції та за
продаж та ціна на момент продажу (рис. 3.5). Після введення цих даних користувач
може натиснути кнопку «Розрахувати», і калькулятор автоматично розрахує
потенційний заробіток. Результати відображаються на тій же сторінці у вигляді
таблиці, що містить інформацію про ціну відкриття та закриття, а також загальний
прибуток або збиток.
Весь інтерфейс веб-сервісу для відстеження цін і графіків криптовалют та
аналізу заробітку виконано в мінімалістичному стилі з використанням адаптивного
дизайну, що забезпечує його коректне відображення на різних пристроях, включаючи
мобільні телефони та планшети (рис. 3.6). Стилі CSS використовуються для
43
створення єдиної стилістичної концепції, яка включає гармонійні колірні схеми,
читабельні шрифти та зручні елементи керування.
Рисунок 3.5 – Сторінка аналізу заробітку
Рисунок 3.6 – Приклад адаптивності веб-сервісу
44
Таким чином, інтерфейс веб-сервісу для відстеження цін і графіків
криптовалюти та аналізу заробітку надає користувачам зручний доступ до всіх
необхідних функцій і даних, що дозволяє їм легко та ефективно аналізувати свої
інвестиції в криптовалюти.
3.3 Програмна реалізація веб-сервісу для відстеження цін і графіків
криптовалют та аналізу заробітку
Розробка веб-сервісу для відстеження цін і графіків криптовалют і аналізу
заробітку – складне завдання, що включає кілька етапів, кожен з яких має свої
особливості та вимоги. Програмна реалізація проекту базується на використанні
сучасних технологій та інструментів для забезпечення надійності, зручності та
ефективності системи.
Першим кроком програми є створення функціоналу авторизації та реєстрації
користувачів за допомогою Firebase. Під час процесу авторизації користувачам
надається можливість зареєструвати новий обліковий запис або увійти в існуючий
обліковий запис, використовуючи адресу електронної пошти та пароль. Для цього
створено відповідні форми, які інтегруються з Firebase Authentication API (рис. 3.7).
Рисунок 3.7 – Firebase Authentication API
45
Наступним кроком є розробка інтерфейсу для додавання криптовалют до списку
спостереження та оновлення їх цін (рис. 3.7). Ця функція дозволяє користувачам
вибирати криптовалюти, які вони хочуть відстежувати, і додавати їх до свого
особистого списку. Для цього була реалізована форма введення, де користувачі можуть
вводити назву криптовалюти. Після додавання криптовалюти до списку інформація про
неї зберігається через «localStorage» для кожного користувача індивідуально.
Однією з основних функцій веб-сервісу для відстеження цін і графіків
криптовалют та аналізу заробітку є відображення графіків і цін криптовалют. Для цього
використовується API зовнішніх сервісів, які надають актуальну інформацію про
ринкові котирування (рис. 3.8).
Рисунок 3.8 – Програмна реалізація додавання криптовалют до списку
Програмна реалізація оновлення цін за допомогою API представлена на рис. 3.9.
Веб-сервіс надсилає запити до цих API і отримує дані оновлені дані, які потім
обробляються та відображаються у вигляді графіків. Діаграми будуються за допомогою
CSS стилів, які дозволяють створювати інтерактивні та інформативні візуалізації.
46
Рисунок 3.9 – Програмна реалізація оновлення цін за допомогою API
Ключовим елементом веб-сервісу для відстеження цін і графіків криптовалют та
аналізу заробітку є калькулятор прибутку, який дозволяє користувачам розраховувати
потенційний прибуток або збиток від інвестування в криптовалюти.
Інтерфейс калькулятора містить поля для введення назви криптовалюти,
інвестованої суми, ціна на момент покупки, комісія за інвестиції та за продаж та ціна на
момент продажу. Після введення цих даних система виконує розрахунки на основі
написаного алгоритму (рис. 3.10).
Результат розрахунку виводиться у вигляді таблиці, де вказується початкова і
кінцева ціна криптовалюти, а також загальний прибуток або збиток.
Уся логіка програми реалізована в JavaScript з використанням можливостей Vue.js
для керування станом програми та реактивного оновлення даних. Firebase Realtime
Database використовується для забезпечення узгодженості даних і синхронізації між
клієнтом і сервером. Стилізація інтерфейсу виконана за допомогою CSS, що дозволяє
створити привабливий і адаптивний дизайн, який коректно відображається на різних
пристроях.
47
Рисунок 3.10 – Програмна реалізація аналізу заробітку
Таким чином, програмна реалізація веб-сервісу для відстеження цін і графіків
криптовалюти та аналізу заробітку надає користувачам зручний і функціональний
інструмент для управління своїми інвестиціями в криптовалюту.
3.4 Особливості тестування веб-сервісу
Тестування веб-сервісу важливим етапом розробки, який забезпечує надійність,
стабільність і високу якість кінцевого продукту. Функції тестування розробленого
веб-сервісу включають кілька ключових аспектів: функціональне тестування,
тестування інтерфейсу користувача, тестування безпеки та продуктивності, а також
тестування на сумісність.
Функціональне тестування охоплює перевірку основних функцій веб-сервісу,
включаючи авторизацію користувачів і реєстрацію у Firebase, додавання
48
криптовалют у список спостереження, відображення графіків і цін, а також роботу з
калькулятором прибутку. Для кожної з цих функцій було створено тестові сценарії,
які включають різні можливі випадки використання, щоб переконатися, що система
працює правильно в різних ситуаціях. Наприклад, перевірка автентифікації
перевіряла такі сценарії, як успішний вхід із правильними обліковими даними, спроба
входу з неправильним паролем або адресою електронної пошти та реєстрація нового
користувача з існуючою адресою електронної пошти.
Тестування інтерфейсу користувача зосереджено на перевірці зручності
використання та правильності відображення всіх елементів на різних пристроях і
розмірах екрана. Це включає тестування адаптивного дизайну, щоб переконатися, що
такі інтерактивні елементи, як кнопки, форми введення, графіка та таблиці,
функціонують належним чином. Особлива увага приділяється перевірці того, як
інтерфейс реагує на дії користувача, такі як навігація між сторінками, введення даних
у форми, додавання криптовалют до списку та виконання обчислень за допомогою
калькулятора. Використання інструментів автоматизованого тестування, таких як
Selenium або Cypress, дозволяє ефективно тестувати інтерфейс у різних браузерах і на
різних пристроях.
Тестування безпеки є критично важливим аспектом будь-якого веб-сервісу,
особливо тієї, яка обробляє особисті дані користувачів і фінансову інформацію. Цей
веб-сервіс має перевірки безпеки для авторизації та реєстрації користувачів через
Firebase, гарантуючи надійне зберігання даних у базі даних Firebase у режимі
реального часу та захист від можливих атак, таких як впровадження SQL, атаки XSS
і атаки CSRF.
Тестування продуктивності гарантує, що веб-сервіс може ефективно обробляти
великі обсяги даних і підтримувати високу продуктивність під навантаженням. Для
цього були проведені стрес-тести та навантажувальні тести, щоб визначити, як
поводиться система при великій кількості одночасних запитів від користувачів.
Використання інструментів тестування продуктивності, таких як Apache JMeter або
Locust, дозволяє моделювати різні сценарії навантаження та визначати потенційні
проблеми продуктивності, щоб своєчасно їх виправляти.
49
Тестування на сумісність передбачає тестування продуктивності веб-сервісу в
різних операційних системах, браузерах і пристроях. Це важливо для забезпечення
широкої доступності послуги для всіх користувачів, незалежно від їх технічного
стану. Тестування проводилося на популярних браузерах, таких як Google Chrome,
Mozilla Firefox, Safari і Microsoft Edge, а також на мобільних пристроях з
операційними системами iOS і Android. Це гарантує, що веб-сервіс працює та
виглядає правильно на різних платформах.
Усі ці аспекти тестування допомогли розробити веб-сервіс для відстеження цін
і графіків криптовалют та аналізу заробітку. В результаті тестування виявлені
помилки і недоліки виправлено, що дозволяє користувачам отримати стабільний,
безпечний і простий у використанні продукт.
3.5 Тестування веб-сервісу для відстеження цін і графіків криптовалют та
аналізу заробітку
Проведене тестування веб-сервісу для відстеження цін і графіків криптовалют
та аналізу заробітку включало перевірку функціональності, продуктивності, безпеки
та зручності використання ресурсу. Метою тестування було забезпечити високу
якість та надійність веб-сервісу, виявити та виправити всі потенційні помилки перед
його впровадженням у виробниче середовище.
Функціональне тестування охоплювало перевірку всіх ключових функцій веб-
сервісу, включаючи: додавання та видалення криптовалютних токенів; перегляд і
фільтрація списку токенів; перегляд графіку зміни ціни обраного токенів; тестування
проводилося з використанням бібліотеки Jest для написання тестів та Vue Test Utils
для перевірки компонентів.
Для основних функцій розроблено тести: додавання токена; видалення токена;
перегляд графіку зміни ціни.
Кожен тест перевіряв конкретний сценарій використання, забезпечуючи
належну роботу всіх функціональних компонентів веб-сервісу.
50
Тест для додавання токена перевіряє те, що після додавання нового токена,
список токенів містить цей токен (рис. 3.11). Спочатку створюється екземпляр
компонента App з використанням shallowMount, потім викликається метод add, щоб
додати новий токен. Після цього перевіряється, що список токенів містить доданий
токен.
Рисунок 3.11 – Тест додавання токенів
Тест для видалення токена перевіряє, що після видалення токена, цей токен
більше не знаходиться у списку (рис. 3.12). Після додавання токена BTC,
викликається метод handleDelete, щоб видалити цей токен. Після цього перевіряється,
що список токенів порожній.
Тест для перегляду графіку зміни ціни перевіряє, що графік відображається при
виборі токена (рис. 3.13). Після додавання токена BTC, викликається метод select,
щоб вибрати цей токен. Потім перевіряється, що компонент графіка (.graph)
відображається на сторінці.
Кросбраузерне тестування забезпечило коректність роботи веб-сервісу в різних
браузерах і на різних пристроях.
51
Рисунок 3.12 – Тест видалення токенів
Рисунок 3.13 – Тест перевірки зміни цін та графіка
Використовуючи BrowserStack, було проведено тестування в основних
браузерах, таких як Chrome, Firefox, Safari та Edge. Тестування показало, що веб-
сервіс коректно працює у всіх перевірених браузерах та пристроях.
Регресійне тестування забезпечило, що нові зміни в коді не призводять до появи
нових помилок у вже працюючих функціях. Після кожної зміни або оновлення коду
було проведено автоматизоване повторне виконання всіх раніше розроблених тестів.
Проведене тестування забезпечило високу якість, надійність та безпеку веб-
сервісу для відстеження цін і графіків криптовалют та аналізу заробітку. Виявлені
помилки були успішно виправлені, що дозволяє впевнено впроваджувати сервіс у
виробниче середовище.
52
Висновки до розділу 3
У цьому розділі представлено програмну реалізацію веб-сервісу для
відстеження цін і графіків криптовалют та аналізу заробітку. Визначено, що веб-
сервіс буде створено з використанням фреймворку Vue.js для вдосконалення навичок
програмування та забезпечення високої продуктивності, а розробка
здійснюватиметься в середовищі WebStorm.
Описано інтерфейс та програмну реалізацію розробленого веб-сервісу для
відстеження цін та графіків криптовалют, включаючи авторизацію та реєстрацію
користувачів за допомогою Firebase, додавання криптовалют до списку відстеження,
відображення поточних цін та графіків, а також функціонування калькулятора для
аналіз заробітку на основі вхідних даних.
Проведено комплексне тестування розробленого веб-сервісу, яке включало
функціональне тестування, тестування інтерфейсу користувача, перевірку безпеки,
продуктивності та тестування на сумісність. Результати тестування дозволяють
зробити висновок про успішну розробку веб-сервісу та його коректну роботу, яка
надає користувачам зручний і надійний інструмент для управління своїми
інвестиціями в криптовалюту.
53
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її виконання
спроєктовано та розроблено веб-сервіс для відстеження цін і графіків криптовалют та
аналізу заробітку.
Для досягнення мети в роботі розв’язувалися наступні завдання:
досліджено предметну область;
виконано порівняльний аналіз існуючих сервісів для відстеження цін
криптовалют, а саме: CoinGecko», «BitInfoCharts», «CoinMarketCap»,
«CryptoCompare»;
обрано програмно-технічні засоби для реалізації задачі дослідження;
розроблено веб-сервіс для відстеження цін і графіків криптовалют та аналізу
заробітку і виконано його тестування.
Веб-сервіс для відстеження цін і графіків криптовалют та аналізу заробітку
розроблено з використанням фреймворку Vue.js. Управління користувачами та
зберігання даних здійснювалось із застосуванням Firebase. Контроль проєкту та
написання коду здійснювалось у середовищі WebStorm.
Обрані технології задовольняють всім функціональним і нефункціональним
вимогам до такого типу програмного забезпечення. Розроблений веб-сервіс має
зручний, зрозумілий та приємний інтерфейс, що забезпечує користувачам комфортне
використання та ефективний інструмент для управління криптовалютними
інвестиціями.
54
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Сервіс «CryptoCompare». URL: https://www.cryptocompare.com/ (дата
звернення: 21.02.2024).
2. Сервіс «CoinMarketCap». URL: https://coinmarketcap.com/uk/ (дата звернення:
21.02.2024).
3. Сервіс «CoinGecko». URL: https://www.coingecko.com/uk (дата звернення:
21.02.2024).
4. Сервіс «BitInfoCharts». URL: https://bitinfocharts.com/uk/ (дата звернення:
21.02.2024).
5. Vue.js Швидкий старт URL: https://ua.vuejs.org/guide/quick-start.html (дата
звернення: 28.02.2024).
6. Vue.js – The Progressive JavaScript Framework. URL: https://vuejs.org/ (дата
звернення: 26.03.2024).
7. Vue.js як JavaScript фреймворк. URL: https://foxminded.ua/vue-js/ (дата
звернення: 27.03.2024)
8. Як вивчати Vue.js. URL: https://spacelab.ua/articles/dorozhnya-karta-yak-vivchati-
vuejs-u-2023-roci (дата звернення: 28.03.2024).
9. Vue.js Reactivity Fundamentals URL: https://vuejs.org/guide/essentials/reactivity-
fundamentals.html#reactivity-fundamentals (дата звернення: 29.03.2024).
10. Кращі інструменти для UX прототипування URL:
https://evergreens.com.ua/ua/articles/prototyping-tools.html (дата звернення:
03.04.2024).
11. Архітектура веб-додатків URL: https://medium.com/@IvanZmerzlyi/ (дата
звернення: 04.04.2024).
12. RestFull архітектура URL: https://systems.education/what-is-rest (дата звернення:
04.04.2024).
13. Vue.js Тестування. URL: https://ua.vuejs.org/guide/scaling-up/testing.html (дата
звернення: 10.05.2024).
55
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2024 р.
ВЕБ-СЕРВІС ДЛЯ ВІДСТЕЖЕННЯ ЦІН І ГРАФІКІВ КРИПТОВАЛЮТ ТА
АНАЛІЗУ ЗАРОБІТКУ
Специфікація
482.ЧДТУ. 42025-01
Листів 2
Розробник ____________________ Волосячик А.І.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2024
56
482.ЧДТУ. 42025-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 42025-01 12 01 Текст програми
482.ЧДТУ. 42025-01 34 01 Інструкція користувача
482.ЧДТУ. 42025-01 90 01 Структура бази даних
57
ДОДАТОК Б
ВЕБ-СЕРВІС ДЛЯ ВІДСТЕЖЕННЯ ЦІН І ГРАФІКІВ КРИПТОВАЛЮТ ТА
АНАЛІЗУ ЗАРОБІТКУ
Текст програми
482.ЧДТУ. 42025-01 12 01
Листів 31
Розробник _____________ Волосячик А.І.
Черкаси – 2024
58
App.vue
<template>
<div class="container mx-auto">
<div class="container inline-flex gap-3.5">
<div>
<button
style="background-color: #6600ff"
type="button"
class="inline-flex items-center py-2 px-4 border border-transparent shadow-sm
text-sm leading-4 font-medium rounded-full text-white transition-colors duration-300
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 my-4"
>
Головна
</button>
</div>
<div>
<button
style="background-color: #6600ff"
type="button"
class="inline-flex items-center py-2 px-4 border shadow-sm text-sm leading-4
font-medium rounded-full text-white transition-colors duration-300 focus:outline-none
focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 my-4"
>
Аналіз заробітку
</button>
</div>
<div class="logout-container" style="margin-left: auto;">
<button
style="background-color: #6600ff "
type="button"
class="btn logout-btn items-center py-2 px-4 border shadow-sm text-sm leading-4
font-medium rounded-full text-white transition-colors duration-300 focus:outline-none
focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 my-4"
>
Вихід
</button>
</div>
</div>
</div>
<div class="container mx-auto flex flex-col items-center bg-gray-100 p-4">
<div class="container">
59
<div class="w-full my-4"></div>
<add-ticker @add-ticker="add" :disabled="tooManyTickersAdded" />
<template v-if="tickers.length">
<hr class="w-full border-t border-gray-600 my-4" />
<div>
<button
class="my-4 mx-2 inline-flex items-center py-2 px-4 border border-transparent
shadow-sm text-sm leading-4 font-medium rounded-full text-white bg-gray-600 hover:bg-gray-
700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-gray-500"
v-if="page > 1"
@click="page = page - 1"
>
Назад
</button>
<button
class="my-4 mx-2 inline-flex items-center py-2 px-4 border border-transparent
shadow-sm text-sm leading-4 font-medium rounded-full text-white bg-gray-600 hover:bg-gray-
700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-gray-500"
@click="page = page + 1"
v-if="hasNextPage"
>
Вперед
</button>
<div>Фільтр: <input v-model="filter" /></div>
</div>
<hr class="w-full border-t border-gray-600 my-4" />
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div
v-for="t in paginatedTickers"
:key="t.name"
@click="select(t)"
:class="{
'border-4': selectedTicker === t
}"
class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid
cursor-pointer"
>
<div class="px-4 py-5 sm:p-6 text-center">
<dt class="text-sm font-medium text-gray-500 truncate">
60
{{ t.name }} - USD
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
{{ formatPrice(t.price) }}
</dd>
</div>
<div class="w-full border-t border-gray-200"></div>
<button
@click.stop="handleDelete(t)"
class="flex items-center justify-center font-medium w-full bg-gray-100 px-4
py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20
transition-all focus:outline-none"
>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#718096"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0
002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-
1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path></svg
>Видалити
</button>
</div>
</dl>
<hr class="w-full border-t border-gray-600 my-4" />
</template>
<section v-if="selectedTicker" class="relative">
<h3 class="text-lg leading-6 font-medium text-gray-900 my-8">
{{ selectedTicker.name }} - USD
</h3>
<div
class="flex items-end border-gray-600 border-b border-l h-64"
ref="graph"
>
61
<div
v-for="(bar, idx) in normalizedGraph"
:key="idx"
:style="{ height: `${bar}%` }"
class="bg-purple-800 border w-10"
></div>
</div>
<button
@click="selectedTicker = null"
type="button"
class="absolute top-0 right-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svgjs="http://svgjs.com/svgjs"
version="1.1"
width="30"
height="30"
x="0"
y="0"
viewBox="0 0 511.76 511.76"
style="enable-background:new 0 0 512 512"
xml:space="preserve"
>
<g>
<path
d="M436.896,74.869c-99.84-99.819-262.208-99.819-362.048,0c-99.797,99.819-
99.797,262.229,0,362.048 c49.92,49.899,115.477,74.837,181.035,74.837s131.093-
24.939,181.013-74.837C536.715,337.099,536.715,174.688,436.896,74.869z
M361.461,331.317c8.341,8.341,8.341,21.824,0,30.165c-4.16,4.16-9.621,6.251-15.083,6.251c-
5.461,0-10.923-2.091-15.083-6.251 l-75.413-75.435l-75.392,75.413c-4.181,4.16-9.643,6.251-
15.083,6.251c-5.461,0-10.923-2.091-15.083-6.251 c-8.341-8.341-8.341-21.845,0-
30.165l75.392-75.413l-75.413-75.413c-8.341-8.341-8.341-21.845,0-30.165 c8.32-
8.341,21.824-8.341,30.165,0l75.413,75.413l75.413-75.413c8.341-8.341,21.824-8.341,30.165,0
c8.341,8.32,8.341,21.824,0,30.165l-75.413,75.413L361.461,331.317z"
fill="#718096"
data-original="#000000"
></path>
</g>
</svg>
62
</button>
</section>
</div>
</div>
</template>
<script>
import { subscribeToTicker, unsubscribeFromTicker } from "./api";
import AddTicker from "./components/AddTicker.vue";
export default {
name: "App",
components: {
AddTicker
},
data() {
return {
filter: "",
tickers: [],
selectedTicker: null,
graph: [],
maxGraphElements: 1,
page: 1
};
},
created() {
const windowData = Object.fromEntries(
new URL(window.location).searchParams.entries()
);
const VALID_KEYS = ["filter", "page"];
VALID_KEYS.forEach(key => {
63
if (windowData[key]) {
this[key] = windowData[key];
}
});
const tickersData = localStorage.getItem("cryptonomicon-list");
if (tickersData) {
this.tickers = JSON.parse(tickersData);
this.tickers.forEach(ticker => {
subscribeToTicker(ticker.name, newPrice =>
this.updateTicker(ticker.name, newPrice)
);
});
}
setInterval(this.updateTickers, 5000);
},
mounted() {
window.addEventListener("resize", this.calculateMaxGraphElements);
},
beforeUnmount() {
window.removeEventListener("resize", this.calculateMaxGraphElements);
},
computed: {
tooManyTickersAdded() {
return this.tickers.length > 4;
},
startIndex() {
return (this.page - 1) * 6;
},
endIndex() {
return this.page * 6;
},
filteredTickers() {
64
return this.tickers.filter(ticker => ticker.name.includes(this.filter));
},
paginatedTickers() {
return this.filteredTickers.slice(this.startIndex, this.endIndex);
},
hasNextPage() {
return this.filteredTickers.length > this.endIndex;
},
normalizedGraph() {
const maxValue = Math.max(...this.graph);
const minValue = Math.min(...this.graph);
if (maxValue === minValue) {
return this.graph.map(() => 50);
}
return this.graph.map(
price => 5 + ((price - minValue) * 95) / (maxValue - minValue)
);
},
pageStateOptions() {
return {
filter: this.filter,
page: this.page
};
}
},
methods: {
calculateMaxGraphElements() {
if (!this.$refs.graph) {
return;
}
this.maxGraphElements = this.$refs.graph.clientWidth / 38;
},
65
updateTicker(tickerName, price) {
this.tickers
.filter(t => t.name === tickerName)
.forEach(t => {
if (t === this.selectedTicker) {
this.graph.push(price);
while (this.graph.length > this.maxGraphElements) {
this.graph.shift();
}
}
t.price = price;
});
},
formatPrice(price) {
if (price === "-") {
return price;
}
return price > 1 ? price.toFixed(2) : price.toPrecision(2);
},
add(ticker) {
const currentTicker = {
name: ticker,
price: "-"
};
this.tickers = [...this.tickers, currentTicker];
this.filter = "";
subscribeToTicker(currentTicker.name, newPrice =>
this.updateTicker(currentTicker.name, newPrice)
);
},
select(ticker) {
this.selectedTicker = ticker;
},
handleDelete(tickerToRemove) {
this.tickers = this.tickers.filter(t => t !== tickerToRemove);
if (this.selectedTicker === tickerToRemove) {
66
this.selectedTicker = null;
}
unsubscribeFromTicker(tickerToRemove.name);
}
},
watch: {
selectedTicker() {
this.graph = [];
this.$nextTick().then(this.calculateMaxGraphElements);
},
tickers(newValue, oldValue) {
console.log(newValue === oldValue);
localStorage.setItem("cryptonomicon-list", JSON.stringify(this.tickers));
},
paginatedTickers() {
if (this.paginatedTickers.length === 0 && this.page > 1) {
this.page -= 1;
}
},
filter() {
this.page = 1;
},
pageStateOptions(value) {
window.history.pushState(
null,
document.title,
`${window.location.pathname}?filter=${value.filter}&page=${value.page}`
);
}
}
};
</script>
Api.js
const API_KEY =
"380ec498044c900f249ad39326e8320a2cb4ee09b94afe4dff6911e37ef56bfc";
67
const tickersHandlers = new Map(); // {}
const socket = new WebSocket(
`wss://streamer.cryptocompare.com/v2?api_key=${API_KEY}`
);
const AGGREGATE_INDEX = "5";
socket.addEventListener("message", e => {
const { TYPE: type, FROMSYMBOL: currency, PRICE: newPrice } = JSON.parse(
e.data
);
if (type !== AGGREGATE_INDEX || newPrice === undefined) {
return;
}
const handlers = tickersHandlers.get(currency) ?? [];
handlers.forEach(fn => fn(newPrice));
});
function sendToWebSocket(message) {
const stringifiedMessage = JSON.stringify(message);
if (socket.readyState === WebSocket.OPEN) {
socket.send(stringifiedMessage);
return;
}
socket.addEventListener(
"open",
() => {
socket.send(stringifiedMessage);
},
{ once: true }
);
}
function subscribeToTickerOnWs(ticker) {
sendToWebSocket({
action: "SubAdd",
subs: [`5~CCCAGG~${ticker}~USD`]
68
});
}
function unsubscribeFromTickerOnWs(ticker) {
sendToWebSocket({
action: "SubRemove",
subs: [`5~CCCAGG~${ticker}~USD`]
});
}
export const subscribeToTicker = (ticker, cb) => {
const subscribers = tickersHandlers.get(ticker) || [];
tickersHandlers.set(ticker, [...subscribers, cb]);
subscribeToTickerOnWs(ticker);
};
export const unsubscribeFromTicker = ticker => {
tickersHandlers.delete(ticker);
unsubscribeFromTickerOnWs(ticker);
};
Main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import test from "./test.js";
createApp(App).mount("#app");
addTicker.vue
<template>
<section>
<div class="flex">
<div class="max-w-xs">
<label for="wallet" class="block text-sm font-medium text-gray-700"
>Токен</label
>
<div class="mt-1 relative rounded-md shadow-md">
<input
v-model="ticker"
@keydown.enter="add"
type="text"
69
name="wallet"
id="wallet"
class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none
focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
placeholder="Наприклад DOGE"
/>
</div>
</div>
</div>
<add-button @click="add" type="button" :disabled="disabled" class="my-4" />
</section>
</template>
<script>
import AddButton from "./AddButton.vue";
export default {
components: {
AddButton
},
props: {
disabled: {
type: Boolean,
required: false,
default: false
}
},
emits: {
"add-ticker": value => typeof value === "string" && value.length > 0
},
data() {
return { ticker: "" };
},
methods: {
add() {
if (this.ticker.length === 0) {
return;
}
70
this.$emit("add-ticker", this.ticker);
this.ticker = "";
}
}
};
</script>
AddButton.vue
<template>
<section>
<div class="flex">
<div class="max-w-xs">
<label for="wallet" class="block text-sm font-medium text-gray-700"
>Токен</label
>
<div class="mt-1 relative rounded-md shadow-md">
<input
v-model="ticker"
@keydown.enter="add"
type="text"
name="wallet"
id="wallet"
class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none
focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
placeholder="Наприклад DOGE"
/>
</div>
</div>
</div>
<add-button @click="add" type="button" :disabled="disabled" class="my-4" />
</section>
</template>
<script>
import AddButton from "./AddButton.vue";
export default {
components: {
AddButton
},
props: {
disabled: {
71
type: Boolean,
required: false,
default: false
}
},
emits: {
"add-ticker": value => typeof value === "string" && value.length > 0
},
data() {
return { ticker: "" };
},
methods: {
add() {
if (this.ticker.length === 0) {
return;
}
this.$emit("add-ticker", this.ticker);
this.ticker = "";
}
}
};
</script>
Firebase/index.js
import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"
const firebaseConfig = {
apiKey: "AIzaSyC766qEpTMXuiVrj5RLp2wVsL2QRLvwt3k",
authDomain: "vue-fire-auth-beb42.firebaseapp.com",
projectId: "vue-fire-auth-beb42",
storageBucket: "vue-fire-auth-beb42.appspot.com",
messagingSenderId: "693838372715",
appId: "1:693838372715:web:61d95b1d22cefe718f362e"
};
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
72
login.vue
<main class="login">
<section class="forms">
<form class="register" @submit.prevent="register">
<h2>Реєстрація</h2>
<input
type="email"
placeholder="Введіть пошту"
v-model="register_form.email" />
<input
type="password"
placeholder="Введіть пароль"
v-model="register_form.password" />
<input
type="submit"
value="Зареєструватися" />
</form>
<form class="login" @submit.prevent="login">
<h2>Вхід</h2>
<input
type="email"
placeholder="Введіть пошту"
v-model="login_form.email" />
<input
type="password"
placeholder="Введіть пароль"
v-model="login_form.password" />
<input
type="submit"
value="Ввійти" />
</form>
</section>
</main>
</template>
<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
73
export default {
setup () {
const login_form = ref({});
const register_form = ref({});
const store = useStore();
const login = () => {
store.dispatch('login', login_form.value);
}
const register = () => {
store.dispatch('register', register_form.value);
}
return {
login_form,
register_form,
login,
register
}
}
}
</script>
<style>
.forms {
display: flex;
min-height: 100vh;
}
form {
flex: 1 1 0%;
padding: 8rem 1rem 1rem;
}
form.register {
color: #FFF;
background-color: #6600ff;
}
74
h2 {
font-size: 2rem;
text-transform: uppercase;
margin-bottom: 2rem;
}
input {
appearance: none;
border: none;
outline: none;
background: none;
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto;
font-size: 1.5rem;
margin-bottom: 2rem;
padding: 0.5rem 0rem;
}
input:not([type="submit"]) {
opacity: 0.8;
transition: 0.4s;
}
input:focus:not([type="submit"]) {
opacity: 1;
}
input::placeholder {
color: inherit;
}
form.register input:not([type="submit"]) {
color: #FFF;
border-bottom: 2px solid #FFF;
}
form.login input:not([type="submit"]) {
color: #2c3e50;
75
border-bottom: 2px solid #2c3e50;
}
form.login input[type="submit"] {
background-color: #6600ff;
color: #FFF;
font-weight: 700;
padding: 1rem 2rem;
border-radius: 0.5rem;
cursor: pointer;
text-transform: uppercase;
}
form.register input[type="submit"] {
background-color: #FFF;
color: #6600ff;
font-weight: 700;
padding: 1rem 2rem;
border-radius: 0.5rem;
cursor: pointer;
text-transform: uppercase;
}
</style>
store/index.js
import { createStore } from 'vuex'
import router from '../router'
import { auth } from '../firebase'
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
signOut
} from 'firebase/auth'
export default createStore({
state: {
user: null
},
mutations: {
SET_USER (state, user) {
76
state.user = user
},
CLEAR_USER (state) {
state.user = null
}
},
actions: {
async login ({ commit }, details) {
const { email, password } = details
try {
await signInWithEmailAndPassword(auth, email, password)
} catch (error) {
switch(error.code) {
case 'auth/user-not-found':
alert("User not found")
break
case 'auth/wrong-password':
alert("Wrong password")
break
default:
alert("Something went wrong")
}
return
}
commit('SET_USER', auth.currentUser)
router.push('/')
},
async register ({ commit}, details) {
const { email, password } = details
try {
await createUserWithEmailAndPassword(auth, email, password)
} catch (error) {
switch(error.code) {
77
case 'auth/email-already-in-use':
alert("Email already in use")
break
case 'auth/invalid-email':
alert("Invalid email")
break
case 'auth/operation-not-allowed':
alert("Operation not allowed")
break
case 'auth/weak-password':
alert("Weak password")
break
default:
alert("Something went wrong")
}
return
}
commit('SET_USER', auth.currentUser)
router.push('/')
},
async logout ({ commit }) {
await signOut(auth)
commit('CLEAR_USER')
router.push('/login')
},
fetchUser ({ commit }) {
auth.onAuthStateChanged(async user => {
if (user === null) {
commit('CLEAR_USER')
} else {
commit('SET_USER', user)
if (router.isReady() && router.currentRoute.value.path === '/login') {
router.push('/')
78
}
}
})
}
}
})
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import { auth } from '../firebase'
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
79
})
router.beforeEach((to, from, next) => {
if (to.path === '/login' && auth.currentUser) {
next('/')
return;
}
if (to.matched.some(record => record.meta.requiresAuth) && !auth.currentUser) {
next('/login')
return;
}
next();
})
export default router
calculation/index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Аналіз заробітку</title>
</head>
<body>
<div class="button-container">
<button class="btn1">
Головна
</button>
<button class="btn1">
Вихід
</button>
</div>
<h1 style="color: #0c1818">Аналіз заробітку</h1>
<div class="container">
<form id="from-currency">
<div class="form-group">
80
<label for="crypto-select">Оберіть криптовалюту</label>
<select name="crypto-select" id="crypto-select">
<option value="">Оберіть криптовалюту</option>
<option value="BTC">BTC</option>
<option value="ETH">ETH</option>
<option value="LTC">LTC</option>
<option value="XRP">XRP</option>
<option value="UNI">DOGE</option>
</select>
</div>
<div class="form-group">
<label for="amount">Інвестована сумма $</label>
<input
type="number"
name="amount"
id="amount"
placeholder="Введіть сумму"
/>
</div>
<div class="form-group">
<label for="price">Ціна на момент покупки $</label>
<input
type="number"
name="price"
id="price"
placeholder="Введіть ціну"
/>
</div>
<div class="form-group">
<label for="fee">Комісія за інвестиції %</label>
<input
type="number"
name="fee"
id="entry-fee"
placeholder="Введіть комісію"
/>
</div>
<div class="exit-price">
<div class="form-group">
<label for="sell-price">Ціна на момент продажу $</label>
81
<input
type="number"
name="sell-price"
id="sell-price"
placeholder="Введіть суму на момент продажу"
/>
</div>
</div>
<div class="form-group1">
<span class="SelectMarket-price">
<input type="checkbox" id="SelectMarket-price" />
<label for="SelectMarket-price">Market price $</label>
</span>
<input
type="number"
name="Market-price"
id="Market-price"
placeholder="Enter Market price"
value="000000"
disabled
/>
</div>
<div class="form-group">
<label for="fee">Комісія за продаж %</label>
<input
type="number"
name="fee"
id="exit-fee"
placeholder="Введіть комісію"
/>
</div>
<button class="btn btn-primary" type="submit" id="calculate">
Розрахувати
</button>
</form>
<div class="result">
<span id="profit"></span>
82
</div>
</div>
<script src="index.js"></script>
</body>
</html>
calculation/index.js
const container = document.querySelector(".container"),
fromCurrency = document.getElementById("from-currency"),
amount = document.getElementById("amount"),
price = document.getElementById("price"),
entryFee = document.getElementById("entry-fee"),
sellPrice = document.getElementById("sell-price"),
marketPrice = document.getElementById("Market-price"),
selectMarketPrice = document.getElementById("SelectMarket-price"),
exitFee = document.getElementById("exit-fee"),
calculate = document.getElementById("calculate"),
cryptoCurrency = document.getElementById("crypto-select"),
profit = document.getElementById("profit");
cryptoCurrency.addEventListener("change", function () {
switch (cryptoCurrency.value) {
case "BTC":
break;
case "ETH":
break;
case "LTC":
break;
case "XRP":
break;
case "UNI":
break;
default:
83
}
});
cryptoCurrency.addEventListener("change", function () {
switch (cryptoCurrency.value) {
case "BTC":
container.style.background = "var(--btc-color)";
container.style.color = "var(--dark-color)";
getPrice("btc");
break;
case "ETH":
container.style.background = "var(--eth-color)";
container.style.color = "var(--light-color)";
getPrice("eth");
break;
case "LTC":
container.style.background = "var(--ltc-color)";
container.style.color = "var(--dark-color)";
getPrice("ltc");
break;
case "XRP":
container.style.background = "var(--xrp-color)";
container.style.color = "var(--light-color)";
getPrice("xrp");
break;
case "UNI":
container.style.background = "var(--uni-color)";
container.style.color = "var(--light-color)";
getPrice("uni");
break;
default:
container.style.background = "var(--secondary-color)";
container.style.color = "var(--dark-color)";
}
});
84
async function getPrice(cryptoCurrency) {
try {
const res = await fetch(
`https://api.coingecko.com/api/v3/coins/markets?vs_currency=gbp&order=market_cap_desc&per_pa
ge=250&page=1&sparkline=false`
);
const data = await res.json();
const cryptoElement = data.find((ele) => ele.symbol === cryptoCurrency);
document.querySelector("#Market-price").value = cryptoElement.current_price;
return cryptoElement.current_price;
// console.log(cryptoElement);
} catch (error) {
console.log(error);
}
}
calculate.addEventListener("click", function (e) {
e.preventDefault();
getValues();
const investmentWithFee = (amountValue * entryFeeValue) / 100;
const units = (amountValue - investmentWithFee) / priceValue;
const soldCurrency = units * sellPriceValue;
const feeOfTheExitValue = (soldCurrency * exitFeeValue) / 100;
const exitValue = soldCurrency - feeOfTheExitValue - investmentWithFee;
const profitValue = exitValue - amountValue;
const profitPercentage = (profitValue / amountValue) * 100;
let profitLoss;
if (profitValue > 0) {
profitLoss = "Вигідна Інвестиція";
} else {
profitLoss = "Невдала Інвестиція";
}
if (isNaN(profitValue, profitPercentage)) {
profit.innerHTML = `<h2 class= "loss" > Розрахунок невдалий !</h2>`;
85
} else {
profit.innerHTML = `<h2 class=${profitLoss}> ${
profitLoss.charAt(0).toUpperCase() + profitLoss.slice(1)
}</h2>
<div class=${profitLoss}>${profitValue.toFixed(
2
)} $ (${profitPercentage.toFixed(2)}%)</div>
<h4>Початкові інвестиції</h4>
<div class="primary">${amountValue.toFixed(2)} $</div>
<h4>Комісія за покупку</h4>
<div class="primary">${investmentWithFee.toFixed(2)} $</div>
<h4>Інвестиція після комісії</h4>
<div class="primary">${amountValue - investmentWithFee.toFixed(2)} $</div>
<h4>Кількість токенів</h4>
<div class="primary">${units} ${cryptoCurrencyValue}</div>
<h4>Комісія за продаж</h4>
<div class="primary">${feeOfTheExitValue.toFixed(2)}</div>
<h4>Загальна комісія</h4>
<div class="primary">${(feeOfTheExitValue + investmentWithFee).toFixed(
2
)}</div>
<h4>Загальна сума виходу</h4>
<div class="${profitLoss}">${exitValue.toFixed(2)}</div>
`;
}
});
86
function getValues() {
return (
(amountValue = parseFloat(amount.value)),
(priceValue = parseFloat(price.value)),
(entryFeeValue = parseFloat(entryFee.value)),
(sellPriceValue = selectMarketPrice.checked
? marketPrice.value
: parseFloat(sellPrice.value)),
(exitFeeValue = parseFloat(exitFee.value)),
(cryptoCurrencyValue = cryptoCurrency.value)
);
}
selectMarketPrice.addEventListener("change", function () {
if (selectMarketPrice.checked === true) {
sellPrice.disabled = true;
} else {
sellPrice.disabled = false;
}
});
function clearInputs() {
amount.value = "";
price.value = "";
entryFee.value = "";
sellPrice.value = "";
exitFee.value = "";
}
87
ДОДАТОК В
ВЕБ-СЕРВІС ДЛЯ ВІДСТЕЖЕННЯ ЦІН І ГРАФІКІВ КРИПТОВАЛЮТ ТА
АНАЛІЗУ ЗАРОБІТКУ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 42025-01 34 01
Листів 6
Розробник _____________ Волосячик А.І.
Черкаси – 2024
88
Веб-сервіс призначений для відстеження цін криптовалют, перегляду їх
графіків і аналізу потенційного заробітку від інвестицій у криптовалюти. Даний
посібник допоможе вам зрозуміти, як використовувати цей веб-сервіс.
Для реєстрації в додатку, введіть потрібну інформацію на екрані реєстрації.
Після реєстрації користувач зможе увійти на сайт. Для реєстрації дотримуйтесь
інструкцій:
1. Введіть свою електронну пошту.
2. Введіть пароль.
3. Натисніть кнопку реєстрації.
На рис. В.1 представлено процес «Реєстрація».
Рисунок В.1 – Процес «Реєстрація»
89
Після успішної реєстрації можна перейти до авторизації, введіть потрібну
інформацію на екрані та натисніть авторизуватися введіть потрібну інформацію на
екрані (рис. В.2).
Рисунок В.2 – Процес «Авторизація»
Після авторизації ви потрапляєте на головну сторінку додатку, де можна
спостерігати поле для введеня криптовалюти,кнопку «Додати», «Головна», «Аналіз
заробітку» та «Вихід» (рис. В.3).
Рисунок В.3 – Головна сторінка веб-сервісу
90
На даний момент поля пусті, їх потрібно наповнити. В поле над кнопкою
«Додати» введемо назву криптовалюти яку ми хочемо відстежувати, наприклад
«BTC» та натиснемо кнопку додати (рис. В.4).
Рисунок В.4 – Додана криптовалюта
Після додавання криптовалюти. ми можемо спостерігати постійне оновлення
ціни та зміни графіка.
Також в веб-сервісі було реалізована пагінацію та фільтрацію, можна її
перевірити додавжи безліч криптовалют до списку та скориставшись кнопками
«Вперед» і «Назад» перевірити її (рис. В.5-B.6).
Рисунок В.5 – Приклад пагінації
91
Рисунок В.6 – Приклад фільтрації
Натиснувшни на кнопку «Аналіз заробітку» відкриється сторінка з формою для
аналізу заробітку (рис. В.7). Для того, щоб скористатися данною формою потрібно
заповнити поля «Оберіть криптовалюту», «Інвестована сума», «Ціна на момент
покупки», «Комісія за інвестиції», «Ціна на момент продажу » і «Комісія за продаж»
та натиснути «Розрахувати», після чого виведеться результат розрахунку (рис. В.8).
Рисунок В.7 – Сторінка для аналізу заробітку
92
Рисунок В.8 – Результат розрахунку
93
ДОДАТОК Г
ВЕБ-СЕРВІС ДЛЯ ВІДСТЕЖЕННЯ ЦІН І ГРАФІКІВ КРИПТОВАЛЮТ ТА
АНАЛІЗУ ЗАРОБІТКУ
Структура бази даних
482. ЧДТУ. 42025-01 90 01
Листів 2
Розробник _____________ Волосячик А.І.
Черкаси – 2024
94
Рисунок Г.1 – Структура бази даних
Рисунок Г.2 – Таблиця користувачів та криптовалют, які вони відстежують