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/6021| Title: | Веб-ресурс для онлайн-запису клієнтів у сфері послуг |
| Authors: | Оксамитна, Любов Павлівна Кочуров, Андрій Володимирович |
| Keywords: | ОНЛАЙН-ЗАПИС,;ВЕБ-РЕСУРС,;ПРОЄКТУВАННЯ,;ПОСЛУГИ,;ІНТЕРФЕЙС,;АНАЛІЗ. |
| Issue Date: | 11-Jun-2024 |
| Abstract: | У сучасному світі, коли швидкість і зручність стають ключовими факторами для бізнесу, важливо мати ефективні інструменти для взаємодії з клієнтами. Саме тому розробка веб-ресурсів для онлайн-запису клієнтів у сфері послуг є актуальною та важливою. Такий ресурс дозволить підприємству оптимізувати свою діяльність, забезпечуючи зручний та швидкий спосіб запису для клієнтів, що відповідає сучасним вимогам споживачів. Метою кваліфікаційної роботи бакалавра є створення веб-ресурсу для онлайн-запису клієнтів у сфері послуг. Об’єкт дослідження: процес онлайн-запису клієнтів у сфері послуг. Предмет дослідження: веб-ресурс, призначений для забезпечення процесу онлайн-запису клієнтів у сфері послуг. Основна мета роботи полягала в створенні зручного, інтуїтивно зрозумілого та ефективного інструменту, який забезпечить користувачам можливість швидко та зручно записуватися на прийом до лікаря, а також керувати своїми медичними записами. У результаті виконання роботи було створено надійний та зручний у використанні веб-ресурс для онлайн-запису клієнтів у сфері медичних послуг. Розроблений веб-ресурс надає користувачам можливість швидко та зручно записуватися на прийом до лікаря, керувати своїми медичними записами та отримувати зворотній зв'язок. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6021 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Кочуров Андрій_КН-2001_2023-24.pdf Restricted Access | 3.92 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 червня 2023 року.
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проєктування та розробка веб-ресурсу для онлайн-запису клієнтів у сфері послуг
4.3. Програмна реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 42030-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5.4. Додаток Г. Структура бази даних.
5.5. Презентація у вигляді 37 слайдів.
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 Виконано
Студент _____________________________ Андрій КОЧУРОВ
(підпис)
Керівник роботи ____________________________ Любов ОКСАМИТНА
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 115 с., 24 рис., 1 таблицю, 14
використаних джерел, 4 додатки.
Актуальність теми. У сучасному світі, коли швидкість і зручність стають
ключовими факторами для бізнесу, важливо мати ефективні інструменти для
взаємодії з клієнтами. Саме тому розробка веб-ресурсів для онлайн-запису клієнтів у
сфері послуг є актуальною та важливою. Такий ресурс дозволить підприємству
оптимізувати свою діяльність, забезпечуючи зручний та швидкий спосіб запису для
клієнтів, що відповідає сучасним вимогам споживачів.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра є
створення веб-ресурсу для онлайн-запису клієнтів у сфері послуг.
Завдання, які необхідно вирішити для досягнення цієї мети, включають:
аналіз потреб та вимог сучасних споживачів щодо послуг онлайн-запису;
аналіз існуючих аналогів та виявлення їхніх переваг та недоліків;
проєктування та розробка веб-ресурсу, який би забезпечував зручну та
інтуїтивно зрозумілу систему онлайн-запису для користувачів;
проєктування та розробка бази даних;
інтеграція функціоналу для автоматизації процесу запису, включаючи
можливості вибору послуг, дати та часу запису.
Об’єкт дослідження: процес онлайн-запису клієнтів у сфері послуг.
Предмет дослідження: веб-ресурс, призначений для забезпечення процесу
онлайн-запису клієнтів в сфері послуг.
Методи дослідження. Для досягнення поставленої мети в кваліфікаційній
роботі бакалавра використовувалися наступні методи:
Порівняльний метод: проведення аналізу існуючих веб-ресурсів для онлайн-
запису клієнтів у сфері послуг, зокрема, порівняння їх функціональних
можливостей, інтерфейсу та ефективністі. Визначення переваг та недоліків
існуючих систем.
Аналітичний метод: проведення аналізу та систематизації отриманих даних
щодо вимог і потреб сучасних споживачів щодо онлайн-запису послуг.
Виявлення основних тенденцій та пріоритетів в споживчому попиті, для
урахування під час розробки та проєктування веб-ресурсу.
Теоретичний метод: вивченння теоретичних аспектів і методів розробки веб-
ресурсів, що використовуються для онлайн-запису клієнтів у сфері послуг.
Ознайомлення з технологічними рішеннями, архітектурами додатків та
методами взаємодії з користувачами.
Перелік ключових слів: ОНЛАЙН-ЗАПИС, ВЕБ-РЕСУРС,
ПРОЄКТУВАННЯ, АВТОМАТИЗАЦІЯ, ПОСЛУГИ, ІНТЕРФЕЙС, АНАЛІЗ,
ЕФЕФКТИВНІСТЬ.
ABSTRACT
Master’s work contains. 115 pages, 24 figures, 1 table, 14 sources used, 4
attachments.
Actuality of theme. In today's world, where speed and convenience are key factors
for business, it is important to have effective tools to interact with customers. That is why
the development of web resources for online customer registration in the service sector is
relevant and important. Such a resource will allow the enterprise to optimize its activities,
providing a convenient and fast way of recording for customers, which meets the modern
requirements of consumers.
Purpose and tasks of the research. The purpose of the bachelor's thesis is to create
a web resource for online customer registration in the service sector.
The tasks that must be solved to achieve this goal include:
analysis of the needs and requirements of modern consumers regarding online
recording services;
analysis of existing analogues and identification of their advantages and
disadvantages;
design and development of a web resource that would provide a convenient and
intuitive online recording system for users;
database design and development;
integration of functionality to automate the recording process, including the ability to
choose services, date and time of recording.
The object of research. online customer registration process in the service sector.
The subject of research: a web resource designed to ensure the process of online
registration of clients in the service sector.
Research methods: To achieve the goal, the following methods were used in the
bachelor's qualification work:
Comparative method: conducting an analysis of existing web resources for online
customer registration in the service sector, in particular, comparing their
functionality, interface and efficiency. Determination of advantages and
disadvantages of existing systems.
Analytical method: analysis and systematization of the received data regarding the
requirements and needs of modern consumers regarding online registration of
services. Identification of the main trends and priorities in consumer demand, to be
taken into account during the development and design of the web resource.
Theoretical method: study of theoretical aspects and methods of development of web
resources used for online customer registration in the service sector. Familiarization
with technological solutions, application architectures and user interaction methods.
The list of keywords: ONLINE RECORDING, WEB RESOURCE, DESIGN,
AUTOMATION, SERVICES, INTERFACE, ANALYSIS, EFFICIENCY.
7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 9
ВСТУП ................................................................................................................................ 10
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................... 12
1.1 Аналіз сучасного стану вибору веб-ресурсів для онлайн-запису клієнтів у сфері
послуг …………………… ............................................................................................. 12
1.2 Огляд існуючих аналогів ресурсів для онлайн-запису клієнтів у сфері послуг 13
1.2.1 Аналіз веб-ресурсу «Booksy» .......................................................................... 14
1.2.2 Аналіз платформи «Zocdoc» ............................................................................ 15
1.2.3 Аналіз веб-ресурсу «OpenTable» ..................................................................... 16
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка
завдання……………….. ................................................................................................ 18
Висновки до розділу 1 ................................................................................................... 22
2 ПРОЄКТУВАННЯ ВЕБ-РЕСУРСУ ДЛЯ ОНЛАЙН-ЗАПИСУ КЛІЄНТІВ У СФЕРІ
ПОСЛУГ ............................................................................................................................. 23
2.1 Опис функціонального програмного середовища для розробки ........................ 23
2.2 Основні принципи розробки веб-ресурсів ............................................................ 26
2.3 Архітектура веб-ресурсу для онлайн-запису клієнтів у сфері послуг................ 27
2.4 Розробка діаграми варіантів використання ........................................................... 30
2.5 Проєктування структури бази даних .................................................................... 32
2.6 Опис процесу проєктування структури веб-ресурсу для онлайн-запису клієнтів
у сфері послуг ................................................................................................................. 35
2.7 Проєктування інтерфейсу користувача ................................................................ 37
Висновки до розділу 2 ................................................................................................... 39
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ......................................................................................... 41
3.1 Постановка завдання ............................................................................................... 41
3.2 Інтерфейс веб-ресурсу для онлайн-запису клієнтів у сфері послуг ................... 44
3.3 Програмна реалізація веб-ресурсу для онлайн-запису клієнтів у сфері послуг 46
3.4 Особливості тестування веб-ресурсу ..................................................................... 53
8
3.5 Тестування веб-ресурсу для онлайн-запису клієнтів у сфері послуг ................. 55
Висновки до розділу 3 ................................................................................................... 59
ВИСНОВКИ ....................................................................................................................... 61
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 63
ДОДАТОК А. Специфікація 482.ЧДТУ. 42030-01 ……………………………………64
ДОДАТОК Б. Текст програми ......................................................................................... 66
ДОДАТОК В. Інструкція користувача .......................................................................... 114
ДОДАТОК Г. Структура бази даних ............................................................................. 123
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
UML – уніфікована мова моделювання;
UX – користувацький досвід;
ООП – об’єктно орієнтоване програмування;
БД – база даних;
СУБД – система управління базами даних;
UI – користувацький інтерфейс;
API – інтерфейс програмного забезпечення (application
programming interface).
10
ВСТУП
В сучасному світі, в якому інновації та технологічний прогрес перетворюються
на основні рушійні сили розвитку бізнесу, важливим стає впровадження ефективних
інструментів для взаємодії з клієнтами. Одним із ключових аспектів цього є
можливість онлайн-запису клієнтів у сфері послуг через спеціалізований веб-ресурс.
Сучасні підприємства, незалежно від галузі, зіштовхуються з викликом
забезпечення зручності та швидкості обслуговування клієнтів. Процес онлайн-запису
стає ключовим компонентом для забезпечення конкурентоспроможності та
задоволення потреб споживачів.
Актуальність кваліфікаційної роботи бакалавра.
Актуальність дослідження полягає у розробці та впровадженні ефективних
інструментів для взаємодії з клієнтами. Зараз більшість клієнтів шукають зручний та
швидкий спосіб записатися на послуги, і веб-ресурс для онлайн-запису є ідеальним
рішенням для цього. Він дозволяє клієнтам легко здійснювати запис в будь-який
зручний для них час, не витрачаючи час на дзвінки або особисті візити. Ця робота
важлива не лише з практичної точки зору, а й з точки зору наукових досліджень,
оскільки вона спрямована на збагачення наукового аспекту розвитку електронної
комерції та розробки інформаційних технологій.
Крім того, у зв'язку зі зростанням конкуренції на ринку, підприємства шукають
способи покращити власний обслуговування клієнтів, а також збільшити їхню
лояльність. Веб-ресурс для онлайн-запису не лише сприяє зручності клієнтів, а й
дозволяє підприємствам ефективно керувати часом та ресурсами, оптимізувати
робочі процеси та покращувати якість обслуговування. Таким чином, дослідження та
розробка веб-ресурсу для онлайн-запису клієнтів у сфері послуг має велике значення
для сучасного бізнесу і суспільства в цілому.
Мета кваліфікаційної роботи бакалавра – створення веб-ресурсу для онлайн-
запису клієнтів у сфері послуг.
Завдання, які необхідно вирішити для досягнення цієї мети, включають:
аналіз потреб та вимог сучасних споживачів щодо послуг онлайн-запису;
11
аналіз існуючих аналогів та виявлення їх переваг та недоліків;
проєктування та розробка веб-ресурсу, який би забезпечував зручну та
інтуїтивно зрозумілу систему онлайн-запису для користувачів;
проєктування та розробка бази даних;
інтеграція функціоналу для автоматизації процесу запису, включаючи
можливості вибору послуг, дати та часу запису.
Об’єкт дослідження: процес онлайн-запису клієнтів у сфері послуг.
Предмет дослідження: веб-ресурс, призначений для забезпечення процесу
онлайн-запису клієнтів в сфері послуг.
Методи дослідження. Для досягнення поставленої мети в кваліфікаційній
роботі бакалавра використовувалися наступні методи:
Порівняльний метод: проведення аналізу існуючих веб-ресурсів для онлайн-
запису клієнтів у сфері послуг, зокрема, порівняняння їх функціональних
можливостей, інтерфейсу та ефективністі. Визначення переваг та недоліків
існуючих ресурсів.
Аналітичний метод: проведення аналізу та систематизації отриманих даних
щодо вимог і потреб сучасних споживачів щодо онлайн-запису послуг.
Виявлення основних тенденцій та пріоритетів в споживчому попиті, для
урахування під час розробки та проєктування веб-ресурсу.
Теоретичний метод: вивченння теоретичних аспектів і методів розробки веб-
ресурсів, що використовуються для онлайн-запису клієнтів у сфері послуг.
Ознайомлення з технологічними рішеннями, архітектурами додатків та
методами взаємодії з користувачами.
12
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану вибору веб-ресурсів для онлайн-запису клієнтів
у сфері послуг
Сучасний стан вибору веб-ресурсів для онлайн-запису клієнтів у сфері послуг є
предметом уваги як науковців, так і практиків. Необхідно провести аналіз сучасних
тенденцій та особливостей вибору веб-ресурсів для онлайн-запису клієнтів,
звертаючи увагу на провідні фірми та вчених у даній області для успішної реалізації
та досягнення мети кваліфікаційної роботи бакалавра.
Однією з ключових тенденцій вибору веб-ресурсів для онлайн-запису клієнтів
є зростання популярності цифрових технологій у всіх сферах життя. Сучасні
споживачі все більше віддають перевагу онлайн-сервісам та мобільним додаткам для
здійснення покупок, бронювання подорожей, а також запису на різноманітні послуги.
Ця тенденція є результатом зростання впливу інтернету та смартфонів на нашу
поведінку та спосіб життя.
Ще однією важливою тенденцією є зростання конкуренції серед веб-ресурсів
для онлайн-запису клієнтів. Із збільшенням кількості підприємств, які надають
послуги, таких як салони краси, медичні заклади, ресторани та інші, зростає і попит
на веб-ресурси, що дозволяють здійснювати запис онлайн. Це призводить до того, що
підприємства шукають найефективніші та найбільш зручні рішення для своїх
клієнтів.
Провідні веб-ресурси для онлайн-запису клієнтів в сучасному світі
відрізняються своїм функціоналом, інтерфейсом та швидкістю реакції. Найбільш
успішні сервіси, що мають свої власні онлайн-системи запису, відзначаються
певними особливстями.
Провідні веб-ресурси надають користувачам можливість легко та швидко
здійснювати запис на послуги без зайвих труднощів чи запитань. Інтуїтивно
зрозумілий та простий у використанні інтерфейс забезпечує позитивний досвід
користувача.
13
Велика кількість провідних веб-ресурсів для онлайн-запису клієнтів мають веб-
ресурси або мобільні додатки, які дозволяють користувачам здійснювати запис через
смартфони та планшети. Це дозволяє клієнтам бути підключеними до сервісу у будь-
який час та в будь-якому місці.
Провідні веб-ресурси для онлайн-запису надають широкий спектр
функціональних можливостей, таких як: можливість вибору часу та місця запису,
перегляд доступних послуг та спеціальних пропозицій, а також можливість
скасування або зміни запису.
Ці веб-ресурси враховують індивідуальні потреби та уподобання клієнтів,
надаючи можливість налаштувати свій профіль, зберігати улюблені послуги або
майстерів, а також отримувати персоналізовані рекомендації.
У зв'язку зі зростанням свідомості щодо приватності даних, провідні веб-
ресурси для онлайн-запису вкладають значні зусилля в захист особистої інформації
користувачів, використовуючи сучасні технології шифрування та дотримуючись
відповідних правил та стандартів.
Успішні оператори цього ринку створюють можливості для взаємодії з
клієнтами, надаючи їм можливість залишати відгуки та оцінки про отримані послуги,
а також звертатися зі своїми питаннями та пропозиціями через онлайн-чати або
електронну пошту.
Аналіз сучасного стану вибору веб-ресурсів для онлайн-запису клієнтів у сфері
послуг вказує на важливе значення цього питання для сучасного бізнесу та
споживачів. Відповідно до цих тенденцій буде спроєктовано та розроблено
ефективний веб-ресурс для онлайн-запису клієнтів в сфері послуг.
1.2 Огляд існуючих аналогів веб-ресурсів для онлайн-запису клієнтів у
сфері послуг
Одним із важливих аспектів створення веб-ресурсу для онлайн-запису клієнтів
є огляд існуючих аналогів у даній області. Для успішної реалізації задачі дослідження
14
у кваліфікаційній роботі бакалавра проведено аналіз деяких з найпопулярніших веб-
ресурсів для онлайн-запису клієнтів у різних сферах послуг.
1.2.1 Аналіз веб-ресурсу «Booksy». «Booksy» – це інноваційний веб-ресурс,
який став популярним серед клієнтів та фахівців у сфері краси та перукарських
послуг. Він надає можливість легко та зручно записуватися на послуги у салонах
краси та перукарнях, забезпечуючи високу якість обслуговування та відмінний
користувацький досвід [1].
Головну сторінку веб-ресурсу «Booksy» висвітлено на рис. 1.1.
Рисунок 1.1 – Головна сторінка веб-ресурсу «Booksy» [1]
«Booksy» надає користувачам можливість швидко та легко записатися на
послуги у салонах краси та перукарнях через зручний онлайн-інтерфейс. Користувачі
можуть вибрати дату, час та вид послуги, а також обрати улюбленого майстра, якщо
така можливість є.
Веб-ресурс надає користувачам можливість знайти салони краси та перукарні у
своєму регіоні за допомогою зручної пошукової системи. Користувачі можуть шукати
за назвою салону, місцем розташування або послугами, які надаються [1].
«Booksy» надає користувачам можливість переглядати оцінки та відгуки інших
клієнтів про салони краси та майстрів. Це допомагає користувачам зробити обізнаний
вибір та вибрати найкращого фахівця для своєї потреби.
15
«Booksy» надає користувачам можливість отримувати повідомлення та
нагадування про заплановані записи, що допомагає уникнути забуття та
непорозумінь.
Кожен користувач ресурсу має особистий кабінет, де можна переглядати
історію записів, відслідковувати використання послуг та отримувати спеціальні
пропозиції та знижки.
«Booksy» дозволяє клієнтам здійснювати запис на послуги у салонах краси та
перукарнях в будь-який час та з будь-якого пристрою з доступом до Інтернету. Це
забезпечує максимальну зручність та доступність для клієнтів [1].
Узагальнюючи вищевикладене, варто зазначити, що «Booksy» є потужним
інструментом для покращення процесу запису на послуги у сфері косметичних та
перукарських послуг. Його зручний та ефективний інтерфейс, великий вибір майстрів
та послуг, а також безпека та надійність роблять його дуже важливим помічником для
клієнтів та фахівців у цій сфері.
1.2.2 Аналіз платформи «Zocdoc». «Zocdoc» – це популярний веб-ресурс,
спеціалізований на онлайн-записі до медичних закладів та лікарів. Він забезпечує
клієнтам можливість швидко та зручно знаходити лікарів у своєму регіоні та
записуватися на прийом через онлайн-систему [2].
Перевагами платформи «Zocdoc» є допомога медичним працівникам в
залученні нових пацієнтів та розширення своєї клієнтської бази, оптимізування часу
роботи лікарів, надання медичним працівникам можливості використовувати
різноманітні маркетингові інструменти для просування своїх послуг та залучення
нових пацієнтів [2].
«Zocdoc» надає користувачам можливість знаходити лікарів у своєму регіоні за
допомогою зручної пошукової системи. Користувачі можуть шукати лікарів за
спеціалізацією, місцем розташування та доступністю часу прийому.
Користувачі можуть здійснювати запис на прийом до лікаря через онлайн-
систему «Zocdoc». Вони можуть вибрати зручний для них час та дату прийому, а
також переглянути доступність лікарів у реальному часі.
16
Також платформа надає користувачам докладну інформацію про кожного
лікаря, включаючи їхню спеціалізацію, освіту, досвід роботи та відгуки пацієнтів. Це
допомагає клієнтам зробити обізнаний вибір та знайти лікаря, який найкраще
відповідає їхнім потребам.
Головна сторінка платформи «Zocdoc» висвітлена на рис. 1.2.
Рисунок 1.2 – Головна сторінка платформи «Zocdoc» [2]
Окрім того, платформа «Zocdoc» автоматично надсилає користувачам
нагадування про заплановані прийоми, що допомагає уникнути забуття та
непорозумінь.
Деякі лікарі, представлені на платформі «Zocdoc», можуть надавати онлайн-
консультації через відеозв'язок. Це дозволяє клієнтам отримувати консультації та
рекомендації від лікаря без необхідності відвідувати медичний заклад особисто.
В цілому, платформа «Zocdoc» є потужним веб-ресурсом для покращення
досвіду пацієнтів та оптимізації роботи медичних закладів. Його зручний та
ефективний інтерфейс, широкі можливості вибору лікарів та доступність онлайн-
запису роблять його незамінним помічником для пацієнтів та медичних працівників.
1.2.3 Аналіз вебр-ресурсу «OpenTable». «OpenTable» – це популярний веб-
ресурс, спеціалізований на онлайн-бронюванні столиків у ресторанах. Цей ресурс
17
надає користувачам можливість швидко та легко знаходити ресторани у своєму
регіоні та бронювати столики через Інтернет. «OpenTable» став необхідним
інструментом як для покупців, так і для власників ресторанів, сприяючи покращенню
процесу резервування та забезпечуючи високий рівень обслуговування [3].
Головна сторінка веб-ресурсу «OpenTable» висвітлена на рис. 1.3.
Рисунок 1.3 – Головна сторінка веб-ресурсу «OpenTable» [3]
Веб-ресурс «OpenTable» забезпечує власникам ресторанів доступ до широкої
аудиторії клієнтів та допомагає їм залучати нових гостей. Ресторани, які працюють з
«OpenTable», мають можливість привертати увагу клієнтів за допомогою фотографій,
відгуків та рейтингів. Це допомагає створити позитивний імідж закладу та збільшити
його популярність серед місцевих мешканців та туристів.
Для клієнтів «OpenTable» є зручним та ефективним інструментом для пошуку
та резервування столиків у ресторанах. Платформа надає можливість швидко знайти
ресторани за різними критеріями, такими як місцезнаходження, кухня та рейтинг, та
здійснити бронювання в реальному часі. Це дозволяє клієнтам уникнути зайвих
очікувань та забезпечує найкращий столик у вибраному закладі.
«OpenTable» також допомагає покращити процес обслуговування в ресторанах
та оптимізувати робочий процес для персоналу. Веб-ресурс надає можливість
18
ресторанам вести електронні записи та вести статистику відвідуваності, що допомагає
власникам ресторанів аналізувати та оптимізувати свою роботу.
Крім того, «OpenTable» створює сприятливі умови для співпраці між
ресторанами та клієнтами, дозволяючи здійснювати замовлення та оплату онлайн. Це
спрощує процес оплати та забезпечує безпеку для обох сторін.
Незважаючи на велику кількість переваг, у «OpenTable» також є деякі недоліки,
які варто врахувати:
Хоча «OpenTable» має велику базу даних (БД) ресторанів, у деяких регіонах
може бути обмежений вибір закладів або вони можуть бути недоступними для
онлайн-бронювання через платформу.
Іноді можуть виникати проблеми з процесом резервування столика через
«OpenTable», такі як затримки в підтвердженні бронювання або технічні неполадки
на платформі.
Ресторани, які не мають високого рейтингу або не входять до списку
рекомендованих закладів на «OpenTable», можуть мати менші шанси на привертання
нових клієнтів через платформу.
Для деяких ресторанів використання веб-ресурсу «OpenTable» може
призводити до додаткових витрат на комісійні за кожне успішне бронювання, що
може позначитися на їхньому прибутку.
Незважаючи на певні недоліки, проаналізований веб-ресурс «OpenTable»
дозволяє ресторанам ефективно управляти своєю бізнес-діяльністю та залучати нових
клієнтів, а клієнтам – швидко та зручно знаходити та бронювати столики у вибраних
закладах. Веб-ресурс став невід'ємною частиною ресторанного бізнесу та сприяє
покращенню якості обслуговування та задоволення потреб клієнтів.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
У кваліфікаційній роботі бакалавра проведено аналіз порівняння обраних
програмних реалізацій у сфері онлайн-запису користувачів. Серед них обрано –
19
платформу «Zocdoc» та веб-ресурси «Booksy», «OpenTable». Розглянуті аналоги
стають невід'ємною частиною щоденного життя для мільйонів людей, які шукають
зручні та ефективні способи отримання різних послуг.
«Booksy», «Zocdoc» та «OpenTable» спрямовані на різні сфери послуг та мають
відмінність у своєму функціоналі. «Booksy» спеціалізується на послугах у сферах
краси та здоров'я, таких як салони краси, перукарні, солярії, тоді як «Zocdoc»
призначений для медичних послуг та лікарів, включаючи лікарів загальної практики,
стоматологів та інших спеціалістів. У свою чергу, «OpenTable» фокусується на
гастрономічній сфері, де клієнти можуть бронювати столики у ресторанах та кафе.
Основними перевагами «Booksy» є зручність у використанні для клієнтів та
ефективність для власників бізнесу, оскільки вони можуть ефективно управляти своїм
графіком та бронюваннями. «Zocdoc» надає клієнтам можливість швидко знайти
лікаря та отримати медичну допомогу, тоді як «OpenTable» допомагає вибрати
ресторан та забронювати столик.
«Booksy», зосереджений на сфері краси та здоров'я, надає можливість клієнтам
бронювати прийоми у салонах краси, перукарнях, масажних салонах та інших
закладах цієї галузі. Основною перевагою «Booksy» є його зручний та інтуїтивно
зрозумілий інтерфейс, який робить процес бронювання максимально простим для
користувачів. Крім того, власники бізнесу отримують можливість ефективно
керувати графіком та бронюваннями, що покращує їхню організацію та підвищує
клієнтську базу.
«Zocdoc» спеціалізується на медичних послугах та надає користувачам
можливість швидко знаходити лікарів різних спеціальностей, ознайомлюватися з
їхнім графіком та записуватися на прийом онлайн. Особливою перевагою «Zocdoc» є
можливість перегляду відгуків та рейтингів лікарів, що дозволяє клієнтам зробити
обдуманий вибір. Такий підхід сприяє покращенню якості медичних послуг та
забезпечує довіру користувачів.
«OpenTable», в свою чергу, спрямований на гастрономічну сферу і надає
можливість клієнтам бронювати столики у ресторанах та кафе. Однією з ключових
переваг «OpenTable» є широкий вибір закладів та можливість знайти бажаний
20
ресторан залежно від геолокації та власних вподобань. Крім того, клієнти можуть
ознайомлюватися з меню та відгуками, що дозволяє зробити свідомий вибір.
Незважаючи на переваги, кожен з цих ресурсів має свої недоліки. Наприклад,
обмеженість «Booksy» та «Zocdoc» у сферах послуг, що не відноситься до їхньої
спеціалізації, а також можливість виникнення проблем з бронюванням у «OpenTable»
через обмежену кількість вільних місць у певні часи. Крім того, певні клієнти можуть
виявити недоліки в інтерфейсі або функціоналі певної платформи, що може вплинути
на їхній вибір.
Розглянуті аналоги програмних ресурсів для онлайн-запису в сфері
обслуговування спрощують процес запису та бронювання, що забезпечує клієнтам
зручність та швидкість. Вони також створюють умови для інформованого вибору,
дозволяючи користувачам ознайомитися з відгуками та рейтингами. Кожна з цих
платформ має свої переваги та обмеження, які варто враховувати при виборі
найкращого рішення для клієнтів і бізнесу.
У таблиці 1.1 висвітлено порівняння обраних веб-ресурсів для онлайн-запису в
сфері обслуговування, а саме: «Booksy», «Zocdoc», «OpenTable».
Таблиця 1.1 – Порівняльна таблиця, обраних для аналізу, програмних реалізацій
Особливості «Booksy» «Zocdoc» «OpenTable»
Сфера послуг Краса та здоров'я Медична допомога Гастрономія
Зручність Висока зручність та Висока зручність та Висока зручність та
користування інтуїтивно простота у доступність
зрозумілий використанні
інтерфейс
Можливість Легке та швидке Простий процес Зручний і швидкий
бронювання бронювання без бронювання без процес бронювання
зайвих складностей зайвих складностей
Рейтинги та Можливість Інформація про Можливість
відгуки перегляду рейтингів рейтинги та відгуки ознайомлення з
та відгуків клієнтів допомагає при виборі
21
відгуками та
рейтингами
Широкий вибір Обмежена кількість Велика база Велика кількість
закладів закладів у базі даних медичних закладів доступних
для вибору ресторанів та кафе
Можливість Немає можливості Можливість пошуку Немає можливості
знайти фахівця знаходження лікарів за різними знаходження
фахівців в суміжних спеціалізаціями фахівців в суміжних
сферах сферах
Недоліки в Обмежена кількість Обмеження у виборі Іноді можливість
обмеженні сфер послуг, які спеціалістів за проблем з
підтримуються іншими напрямками бронюванням у
популярних
закладах
Постановка завдання. Розробка веб-ресурсу для онлайн-запису клієнтів у сфері
послуг має на меті створення ефективної та зручної платформи, яка сприятиме
ефективній взаємодії між клієнтами та підприємцями, підвищить ефективність
управління бізнесом, а також покращить якість обслуговування.
Для досягнення поставленої мети та успішного проєктування і розробки
проєкту поставлено такі завдання:
Проведення детального дослідження та аналізу потреб цільової аудиторії у
різних сферах. Визначення основних вимог до функціоналу та інтерфейсу веб-
ресурсу з урахуванням потреб користувачів.
Розробка зручного користувацького інтерфейсу веб-ресурсу, який дозволить
клієнтам легко та швидко здійснювати запис на потрібні послуги. Забезпечення
простого та ефективного механізму пошуку та вибору послуг.
Розробка інструментів для власників бізнесу, які дозволять ефективно керувати
графіком роботи, прийомом клієнтів, а також надавати зручний механізм для
спілкування з клієнтами.
22
Аналіз засобів аналітики та звітності, які дозволять власникам бізнесу
отримувати детальну інформацію про ефективність роботи, а також визначення
ключових тенденцій та потребів клієнтів.
Забезпечення повної підтримки різних пристроїв, розробка адаптивного
дизайну та функціоналу, який працює оптимально на будь-яких пристроях та
розмірах екранів.
Розробка та впровадження ефективних заходів безпеки даних для забезпечення
конфіденційності та ціліснісності особистої інформації користувачів і
підприємців.
Проведення тестування веб-ресурсу залежно від різних сценаріїв використання.
Висновки до розділу 1
При дослідженні предметної області було проведено аналіз сучасного стану
вибору онлайн-ресурсів для онлайн-запису клієнтів у сфері послуг. Ретельно
проаналізовано поточний ринок та визначено основні фактори, які впливають на
вибір таких ресурсів.
При огляді існуючих аналогів виявлено різноманітні платформи та сервіси, які
пропонують клієнтам можливість вибору обраних послуг в онлайн-режимі. Всі мають
свої переваги та обмеження, які буде враховано при розробці веб-ресурсу для онлай-
запису клієнтів у сфері послуг.
Проведений аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання надали можливість чітко сформулювати цілі та завдання.
Визначено мету – розробити ефективний та зручний веб-ресурс для онлайн-
запису клієнтів у сфері послуг, який задовольнить потреби користувачів та підвищить
конкурентнтоспроможність на ринку.
23
2 ПРОЄКТУВАННЯ ВЕБ-РЕСУРСУ ДЛЯ ОНЛАЙН-ЗАПИСУ КЛІЄНТІВ У
СФЕРІ ПОСЛУГ
2.1 Опис функціонального програмного середовища для розробки
Для розробки веб-ресурсу для онлайн-запису клієнтів у сфері послуг було
використано функціональне програмне середовище «JetBrains WebStorm».
«WebStorm» – це потужне інтегроване середовище розробки (IDE), спеціально
призначене для JavaScript та суміжних технологій, яке забезпечує зручні інструменти
для розробників для ефективного кодування, а також тестування та налагодження
застосунків [4].
«WebStorm» пропонує інтелектуальний редактор коду з розширеним
автодоповненням для JavaScript, HTML, CSS та інших технологій, що значно
прискорює процес написання коду. Вбудовані інспекції коду автоматично
перевіряють код на наявність помилок та пропонують виправлення, що допомагає
підтримувати високу якість коду [4].
Інтеграція з системами контролю версій, такими як Git, забезпечує повний набір
інструментів для роботи з репозиторіями, включаючи коміти, злиття, вирішення
конфліктів та перегляд історії змін. Також підтримуються інші системи контролю
версій, такі як «SVN», «Mercurial» та «Perforce».
Інструменти для роботи з фреймворками, зокрема React, надають спеціальні
можливості для роботи з JSX, інспекції коду та швидкого рефакторингу. «WebStorm»
забезпечує зручні інструменти для розробки на Node.js, включаючи відладчик та
менеджер пакетів npm.
Вбудовані інструменти для тестування інтегруються з популярними
фреймворками для тестування, такими як Jest, Mocha та Karma, що дозволяє легко
запускати тести безпосередньо з IDE та переглядати результати у зручному форматі.
Підтримка різних технологій, включаючи HTML та CSS, забезпечує розширені
можливості редагування, автодоповнення, попередній перегляд змін у реальному часі
та підтримку препроцесорів (SASS, LESS). Повна підтримка сучасного JavaScript та
24
TypeScript включає автодоповнення, перевірку типів та можливості для
рефакторингу.
Налагодження та профілювання забезпечують відладчик, що дозволяє
встановлювати точки зупину, переглядати значення змінних та виконувати код
покроково, що значно полегшує процес пошуку та виправлення помилок.
Інструменти профілювання допомагають ідентифікувати проблеми з продуктивністю
та оптимізувати код.
JetBrains «WebStorm» має ряд переваг, які роблять його ідеальним вибором для
розробки веб-застосунків.
По-перше, «WebStorm» забезпечує високу ефективність роботи завдяки
інтелектуальним інструментам та зручному інтерфейсу. Автодоповнення коду та
вбудовані інспекції значно прискорюють процес написання коду та допомагають
уникати помилок, що підвищує продуктивність розробників [4].
По-друге, регулярні оновлення «WebStorm» гарантують підтримку останніх
версій мов програмування, фреймворків та інструментів. Це дозволяє розробникам
завжди користуватися найсучаснішими технологіями та підтримувати актуальність
своїх проєктів.
По-третє, інтеграція з системами контролю версій, такими як Git, полегшує
управління проєктами та сприяє ефективній командній роботі. Повна підтримка
командних операцій, таких як коміти, злиття та вирішення конфліктів, робить процес
розробки більш організованим та контрольованим.
Ключову роль грає інтеграція з фреймворками для тестування, такими як Jest та
Mocha, дозволяє легко запускати та аналізувати тести безпосередньо в IDE. Це
забезпечує високу якість коду та дозволяє швидко виявляти та виправляти помилки.
«WebStorm» пропонує потужні інструменти для налагодження та
профілювання, що дозволяє розробникам швидко знаходити та виправляти помилки,
а також оптимізувати продуктивність застосунків. Відладчик дозволяє
встановлювати точки зупину, переглядати значення змінних та виконувати код
покроково, що значно полегшує процес налагодження.
25
В розроблюваному продукті був використаний стек технологій MERN, який є
популярним вибором для сучасних застосунків, що дозволяє створювати
повнофункціональні застосунки з використанням єдиної мови програмування –
JavaScript. «WebStorm» є ідеальним інструментом для розробки на MERN стеку з
кількох причин.
WebStorm надає відмінну підтримку для всіх компонентів MERN стека.
Інтелектуальне автодоповнення, інспекції коду та можливості рефакторингу значно
полегшують розробку на JavaScript та TypeScript, які є основою для всіх чотирьох
технологій.
Інтеграція з npm дозволяє легко керувати залежностями та пакетами, що є
критичним для проєктів на Node.js. «WebStorm» надає зручний інтерфейс для
встановлення, оновлення та видалення пакетів, а також для налаштування скриптів
npm, що спрощує процес налаштування та підтримки проєкту.
«WebStorm» забезпечує потужні інструменти для роботи з базами даних,
включаючи MongoDB. Інтеграція з MongoDB дозволяє легко підключатися до бази
даних, виконувати запити та переглядати результати безпосередньо з IDE, що значно
прискорює процес розробки та налагодження.
JetBrains WebStorm забезпечує комплексне середовище для розробки веб-
застосунків, надаючи потужні інструменти для написання, тестування та
налагодження коду [4]. Використання цього IDE у проєкті дозволило створити
високоякісний продукт з інтуїтивно зрозумілим інтерфейсом та стабільною
продуктивністю, що відповідає потребам як пацієнтів, так і лікарів.
Рисунок 2.1 – Середовище розробки JetBrains WebStorm
26
2.2 Основні принципи розробки веб-ресурсів
Розробка веб-ресурсів вимагає дотримання ряду принципів, які забезпечують
ефективність, масштабованість, безпеку та зручність використання програмного
продукту. Ці принципи допомагають створювати веб-ресурси, які відповідають
потребам користувачів та забезпечують стабільну роботу системи.
Нижче розглянуто основні принципи розробки сучасних веб-ресурсів.
Модульність передбачає поділ веб-ресурсу на окремі компоненти, кожен з яких
відповідає за певну функціональність [5]. При розробці це дозволяє працювати над
різними частинами додатку незалежно один від одного, полегшує тестування та
обслуговування коду, а також сприяє повторному використанню компонентів у
різних проєктах.
Масштабованість означає здатність веб-ресурсу обробляти зростаючий обсяг
даних та користувачів без зниження продуктивності. Це досягається шляхом
використання ефективних алгоритмів, оптимізації запитів до бази даних, розподілу
навантаження та інших технік. Масштабовані системи можуть легко адаптуватися до
змін у навантаженні, забезпечуючи стабільну роботу.
Безпека є критичним аспектом розробки веб-ресурсів. Це включає захист даних
користувачів, запобігання несанкціонованому доступу, захист від атак (таких як SQL-
ін'єкції, XSS, CSRF) та забезпечення конфіденційності та цілісності даних.
Використання шифрування, безпечної аутентифікації та авторизації, а також
регулярне оновлення залежностей допомагають забезпечити високий рівень безпеки.
Продуктивність веб-ресурсу визначається його швидкістю та здатністю
ефективно обробляти запити користувачів. Оптимізація продуктивності включає
мінімізацію розміру файлів, кешування даних, використання асинхронних запитів,
оптимізацію бази даних та серверного коду. Висока продуктивність забезпечує
швидке завантаження сторінок та зручність користування.
Зручність використання визначає, наскільки легко і інтуїтивно зрозуміло
користувачам взаємодіяти з ресурсом. Це досягається за рахунок логічної структури
інтерфейсу, зручної навігації, доступності функцій та забезпечення гарного
27
користувацького досвіду (UX). Проведення юзабіліті-тестувань допомагає виявити та
виправити проблеми, що заважають користувачам.
Ефективна взаємодія з користувачем передбачає надання зворотного зв'язку на
дії користувача, використання спливаючих підказок, анімацій та повідомлень про
помилки. Це допомагає користувачам розуміти, що відбувається в ресурсі та сприяє
позитивному досвіду взаємодії.
Дотримання стандартів розробки та рекомендацій забезпечує сумісність веб-
ресурсу з різними браузерами та пристроями. Використання стандартів HTML, CSS
та JavaScript, а також дотримання рекомендацій W3C сприяє створенню доступних та
функціональних додатків чи ресурсів.
Тестування є важливою частиною процесу розробки, що включає перевірку
функціональності, продуктивності, безпеки та зручності використання веб-ресурсів.
Використання автоматизованих тестів, включаючи юніт-тести, інтеграційні тести та
енд-то-енд тести, допомагає виявляти та виправляти помилки на ранніх етапах
розробки, забезпечуючи високу якість програмного продукту.
Безперервна інтеграція та доставка (CI/CD) передбачає автоматизацію
процесів розгортання та тестування коду, що дозволяє швидко і безпечно доставляти
нові версії ресурсу користувачам. Використання інструментів CI/CD допомагає
мінімізувати ризики, пов'язані з випуском нових функцій, та забезпечує швидке
реагування на зміни вимог ринку.
Документування коду є важливою практикою, яка забезпечує зрозумілість та
підтримуваність проєкту. Добре документований код допомагає розробникам швидко
орієнтуватися у проєкті, розуміти логіку та функціональність різних компонентів, що
полегшує підтримку та розвиток веб-ресурсу.
Дотримання основних принципів розробки веб-ресурсів забезпечує створення
надійних, безпечних, продуктивних та зручних для користувачів програмних
продуктів. Ці принципи допомагають створювати високоякісні веб-ресурси, які
відповідають сучасним вимогам ринку та потребам користувачів.
28
2.3 Архітектура веб-ресурсу для онлайн-запису клієнтів у сфері послуг
Спроєктована архітектура веб-ресурсу для онлайн-запису клієнтів у сфері
послуг, зокрема, запису на прийом до лікаря у приватній лікарні, побудована на
основі MERN-стека. MERN-стек та включає чотири ключові технології: MongoDB,
Express.js, React.js і Node.js. Ця архітектура забезпечує високу продуктивність,
масштабованість та гнучкість веб-ресурсу.
Клієнтська частина веб-ресурсу реалізована в роботі за допомогою React.js.
React.js – це популярна бібліотека для створення інтерфейсів користувача, яка
дозволяє будувати динамічні та інтерактивні веб-додатки [11].
Основні особливості клієнтської частини включають:
React Hooks: використання хуків для керування станом та життєвим циклом
компонентів.
React Bootstrap: забезпечення адаптивного та зручного інтерфейсу користувача.
OAuth2: аутентифікація користувачів через сторонні сервіси, такі як Google.
Серверна частина веб-ресурсу буде реалізована за допомогою Node.js і
Express.js. Node.js забезпечує асинхронне виконання коду, що підвищує
продуктивність ресурсу [7], а Express.js надає простий та гнучкий фреймворк для
побудови веб-серверів та API [8].
Основні особливості серверної частини включають:
Mongoose: ORM для MongoDB, що дозволяє легко працювати з БД.
JWT: JSON Web Tokens для безпечної аутентифікації користувачів.
Express.js: роутинг та обробка HTTP-запитів.
Для зберігання даних буде використовуватися MongoDB – документно-
орієнтована база даних NoSQL. MongoDB забезпечує гнучке зберігання даних та
високу продуктивність при роботі з великими обсягами інформації [9]. Основні дані,
які зберігаються в базі даних, включають інформацію про лікарів, пацієнтів та записи
на прийом.
Комунікація між клієнтською та серверною частинами буде здійснюватися за
допомогою REST API. Всі запити від клієнта до серверу та відповіді від серверу до
29
клієнта формуються у форматі JSON. Це дозволить забезпечити швидкий та
ефективний обмін даними.
Для забезпечення безпеки веб-ресурсу будуть використовуватися різні методи,
такі як:
SSL/TLS: шифрування даних при передачі між клієнтом і сервером.
JWT: аутентифікація та авторизація користувачів за допомогою токенів.
OAuth2: безпечна аутентифікація через сторонні сервіси.
Спроєктована архітетура має низку значних переваг. Однією з ключових
переваг є масштабованість. Використання MERN-стеку дозволяє легко масштабувати
веб-ресурс відповідно до зростання навантаження, оскільки кожен компонент
системи може бути розширений або модифікований без значних зусиль. Це особливо
важливо для веб-ресурсів, які очікують на збільшення кількості користувачів і даних.
Висока продуктивність є ще однією суттєвою перевагою. Асинхронна природа
Node.js, яка використовується у серверній частині, дозволяє обробляти одночасно
велику кількість запитів без зниження швидкості роботи. MongoDB, як документно-
орієнтована БД, забезпечує ефективне управління великими обсягами даних, що
також сприяє високій продуктивності системи в цілому.
Гнучкість є ще одним важливим аспектом. Використання React.js на фронтенді
дозволяє створювати модульний і легко керований інтерфейс користувача. Це
означає, що будь-які зміни в дизайні або функціональності можуть бути впроваджені
швидко і без необхідності переробляти всю систему. Це особливо корисно у випадках,
коли потрібно оперативно реагувати на відгуки користувачів або зміни в бізнес-
вимогах.
Безпека також є важливою перевагою цієї архітектури. Використання сучасних
методів аутентифікації та шифрування, таких як JWT для токен-базованої
аутентифікації та OAuth2 для безпечної аутентифікації через сторонні сервіси,
забезпечує високий рівень захисту даних користувачів. Це допомагає запобігти
несанкціонованому доступу та зловживанням, що є критично важливим для додатків,
які обробляють особисту та медичну інформацію. Таким чином, архітектура веб-
ресурсу, побудована на MERN-стеку, поєднує в собі високу продуктивність,
30
масштабованість, гнучкість і безпеку, що робить її ідеальним вибором для реалізації
проєктів, які вимагають надійності і ефективності.
На рисунку 2.2 представлено розроблену схему архітектури продукту:
Рисунок 2.2 – Схема архітектури
2.4 Розробка діаграми варіантів використання
Діаграма варіантів використання (Use Case Diagram) дозволяє візуалізувати
взаємодію користувачів із веб-ресурсом. Це дуже важливий аспект у процесі
розробки програмного забезпечення (ПЗ).
З метою розробки веб-ресурсу для онлайн-запису клієнтів у сфері послуг в
роботі створено діаграму варіантів використання, яка ілюструє основні дії пацієнтів
та лікарів веб-ресурсу.
Діаграма варіантів використання показує взаємодію пацієнтів та лікарів із
системою записів пацієнтів до лікаря. Пацієнти можуть виконувати такі дії, як вхід
через Google, пошук лікарів, запис на прийом, здійснення оплати, перегляд
запланованих прийомів, приєднання до віртуальних прийомів, а також залишення
відгуків про лікарів. Лікарі, у свою чергу, можуть входити в систему, переглядати
заплановані прийоми та переглядати відгуки пацієнтів.
Діаграма варіантів використання представлена на рис. 2.3. Тут є актори та
варіанти використання:
31
Рисунок 2.3 – Діаграма варіантів використання
Актори:
Пацієнт (Patient): користувач, який взаємодіє із веб-ресурсом для запису на
прийом до лікаря.
Лікар (Doctor): користувач, який взаємодіє із веб-ресурсом для управління
своїми прийомами та перегляду відгуків пацієнтів.
Варіанти використання:
Login with Google: пацієнти можуть увійти на веб-ресурс за допомогою своїх
облікових записів Google.
Login: лікарі можуть увійти на веб-ресурс, використовуючи свої облікові дані.
Search Doctor: пацієнти можуть шукати лікарів за спеціалізацією.
Book Appointment: пацієнти можуть записатися на прийом до лікаря, обравши
зручний час.
Payment: пацієнти можуть здійснювати оплату за послуги онлайн.
View Appointments: пацієнти та лікарі можуть переглядати заплановані
прийоми.
32
Join Virtual Appointment: пацієнти можуть приєднатися до віртуальних
прийомів через відеоконференцію.
Give Feedback: пацієнти можуть залишати відгуки про прийоми.
View Feedback: лікарі можуть переглядати відгуки, залишені пацієнтами.
2.5 Проєктування структури бази даних
Проєктування структури бази даних стало критичним етапом у розробці веб-
додатку, оскільки воно визначило, як дані будуть зберігатися, організовані та
взаємодіяти між собою. Для веб-додатку онлайн-запису клієнтів у сфері послуг було
обрано MongoDB як основну базу даних. MongoDB – це документно-орієнтована база
даних NoSQL, яка забезпечує гнучке зберігання даних та високу продуктивність при
роботі з великими обсягами інформації [9].
На рисунку 2.4 представлена структура бази даних, яка складається з трьох
основних колекцій: Doctor Collection, Appointment Collection та Patient Collection.
Рисунок 2.4 – Модель «сутність-зв'язок» веб-ресурсу
33
Кожна з цих колекцій містить документи з відповідними полями, які зберігають
дані про лікарів, пацієнтів та записи на прийом.
Колекція Doctor зберігає інформацію про лікарів. Основні поля включають:
_id: Унікальний ідентифікатор лікаря.
username: Ім'я користувача лікаря.
name: Повне ім'я лікаря.
password: Пароль для доступу до системи.
feesPerSession: Вартість однієї сесії прийому.
phoneNumber: Номер телефону лікаря.
specialization: Спеціалізація лікаря.
dates: Піддокумент Schedule, який містить розклад лікаря.
Піддокумент Schedule містить розклад прийомів лікаря, включаючи:
_id: Унікальний ідентифікатор розкладу.
date: Дата прийому.
slots: Масив піддокументів Slot, які містять інформацію про часові слоти.
Піддокумент Slot містить інформацію про конкретні часові слоти:
_id: Унікальний ідентифікатор слоту.
isBooked: Позначка про те, чи заброньований слот.
time: Час слоту.
Колекція Appointment зберігає інформацію про записи на прийом. Основні поля
включають:
_id: Унікальний ідентифікатор запису.
doctorId: Ідентифікатор лікаря.
dateId: Ідентифікатор дати прийому.
slotId: Ідентифікатор слоту.
patientId: Ідентифікатор пацієнта.
date: Дата прийому.
slotTime: Час прийому.
doctorName: Ім'я лікаря.
34
doctorEmail: Електронна пошта лікаря.
patientName: Ім'я пацієнта.
feedback: Піддокумент Feedback, який містить відгуки пацієнтів.
Піддокумент Feedback містить інформацію про відгуки пацієнтів:
_id: Унікальний ідентифікатор відгуку.
given: Позначка про те, чи був наданий відгук.
stars: Кількість зірок (рейтинг).
title: Заголовок відгуку.
review: Текст відгуку.
Колекція Patient зберігає інформацію про пацієнтів. Основні поля включають:
_id: Унікальний ідентифікатор пацієнта.
googleId: Ідентифікатор Google облікового запису пацієнта.
email: Електронна пошта пацієнта.
name: Повне ім'я пацієнта.
picture: Фото пацієнта.
phoneNumber: Номер телефону пацієнта.
У структурі БД використовується посилання (Reference) на документи між
різними колекціями. Наприклад, в Appointment Collection зберігаються
ідентифікатори лікарів (doctorId) та пацієнтів (patientId), що дозволяє легко знайти
інформацію про відповідних лікарів та пацієнтів. Такий підхід забезпечує гнучкість
та ефективність у роботі з даними.
Проєктування структури БД для веб-додатку онлайн-запису клієнтів у сфері
послуг забезпечує надійне зберігання даних та ефективний доступ до них.
Використання MongoDB, як документно-орієнтованої бази даних, дозволяє
зберігати дані у гнучкому форматі, що сприяє швидкому розвитку та масштабуванню
веб-ресурсу для онлайн-запису клієнтів у сфері послуг. Така структура бази даних
забезпечує високу продуктивність, надійність та зручність роботи з даними.
35
2.6 Опис процесу проєктування структури веб-ресурсу для онлайн-запису
клієнтів у сфері послуг
Проєктування структури веб-ресурсу для онлайн-запису клієнтів у сфері послуг
стало багатоетапним процесом. Основна мета полягає у забезпеченні зручного та
ефективного запису клієнтів на послуги, такі як медичні консультації, через
інтуїтивно зрозумілий веб-ресурс. Використання діаграм активності та послідовності
допомогли візуалізувати та моделювати процеси, що відбуваються в системі, а також
взаємодію між різними компонентами та користувачами.
На діаграмі активності пацієнта (рис 2.5) показані основні етапи взаємодії
пацієнта з веб-ресурсом.
Рисунок 2.5 – Діаграма активності пацієнта
Пацієнт входить у веб-ресурс згідно власного облікового запису Google. Після
успішного входу, він може переглядати особисті дані та доступні лікарські
спеціалізації. Наступним кроком є пошук лікаря за спеціалізацією. Після вибору
лікаря, пацієнт обирає дату та час прийому, підтверджує бронювання та здійснює
36
оплату за послуги. Після цього створюється подія в календарі Google з посиланням
на відеозустріч. Пацієнт може переглядати поточний статус прийому, попередні
прийоми та залишати відгуки про лікаря.
Діаграма активності лікаря (рис. 2.6) показує основні етапи взаємодії лікаря з
веб-ресурсом.
Рисунок 2.6 – Діаграма активності лікаря
Лікар входить у веб-ресурс, використовуючи свої облікові дані. Після
успішного входу він може переглядати особистий поточний розклад прийомів,
підтверджувати або скасовувати прийоми пацієнтів. Лікар також може переглядати
історію попередніх прийомів та відгуки, залишені пацієнтами.
Діаграми послідовності деталізують взаємодію між різними компонентами
системи під час виконання конкретних операцій [10]. Вони показують, як
повідомлення передаються між компонентами системи та користувачами.
На діаграмі послідовності запису на прийом (рис. 2.7) показаний процес запису
на прийом. Пацієнт входить у систему через веб-ресурс, що ініціює запит на сервер.
Сервер запитує дозволи через Google API. Далі пацієнт здійснює пошук лікаря.
Сервер обробляє запит та повертає список лікарів. Пацієнт обирає дату та час
37
прийому, а сервер обробляє запит та резервує слот у базі даних. Пацієнт вводить
платіжні дані, а сервер обробляє платіж через API платіжного шлюзу. Після успішної
оплати сервер створює запис у базі даних та надсилає підтвердження пацієнту.
Рисунок 2.7 – Діаграма послідовності запису на прийом
38
2.7 Проєктування інтерфейсу користувача
Проєктування інтерфейсу користувача (UI) є критичним аспектом у розробці
веб-ресурсів, оскільки саме від нього залежала зручність та ефективність взаємодії
користувачів з ним. Згідно розробки веб-ресурсу для онлайн-запису клієнтів у сфері
послуг, було забезпечено інтуїтивно зрозумілий, зручний та привабливий інтерфейс.
Для розробки інтерфейсу користувача веб-ресурсу використовуються сучасні
технології та фреймворки, що забезпечують високу продуктивність, адаптивність та
зручність використання.
React.js – це популярна бібліотека для побудови інтерфейсів користувача,
розроблена компанією Facebook [11]. Вона дозволила створити компонентно-
орієнтовані інтерфейси, що спростило розробку та підтримку великих веб-ресурсів.
Використання React Hooks дозволило ефективно керувати станом компонентів та
життєвим циклом додатків.
Bootstrap – це CSS-фреймворк для створення адаптивних та зручних
інтерфейсів користувача. Використання компонентів Bootstrap для React (React
Bootstrap) дозволило швидко створити сучасні інтерфейси з використанням готових
стилів та компонентів, що забезпечило єдиний вигляд та зручність використання на
всіх пристроях.
Інтерфейс користувача складається з кількох ключових елементів, кожен з яких
має свої особливості та функціональність.
Головна сторінка дозволяє пацієнтам та лікарям увійти до своїх облікових
записів. Для зручності використовується аутентифікація через Google, що забезпечує
швидкий та безпечний доступ до системи.
Після входу пацієнт може переглядати свої персональні дані, такі як ім'я,
електронна пошта та номер телефону. Цей розділ дозволяє користувачам легко
оновлювати та переглядати свою інформацію.
Пацієнт може шукати лікарів за спеціалізацією. Результати пошуку
відображаються у вигляді списку, де кожен лікар має кнопку для запису на прийом.
Це забезпечує швидкий доступ до інформації про лікарів та їхні послуги.
39
Пацієнт обирає зручну дату та час для прийому за допомогою календаря. Після
вибору доступних часових слотів пацієнт може підтвердити запис на прийом.
Система дозволяє здійснювати оплату за послуги онлайн. Інтерфейс оплати
інтегрований з платіжним шлюзом Stripe, що забезпечує безпечні та зручні платежі.
Пацієнт може переглядати поточний статус своїх прийомів, включаючи
підтверджені та попередні прийоми. Це допомагає користувачам тримати під
контролем свої медичні записи.
Після завершення прийому пацієнт може залишити відгук про лікаря, оцінивши
якість послуг та надавши коментарі. Це сприяє покращенню якості медичних послуг.
Лікарі також мають свій користувацький інтерфейс, який дозволяє переглядати
розклад прийомів, переглядати персональні дані та історію прийомів, а також
залишати відповіді на відгуки пацієнтів. Це забезпечує лікарів всією необхідною
інформацією для ефективної роботи.
На рисунку 2.8 представлено розроблений інтерфейс користувача веб-ресурсу
для онлайн-запису клієнтів у сфері послуг на прикладі сторінки з записами на прийом
до лікаря.
Рисунок 2.8 – Розроблений графічний інтерфейс користувача
40
Висновки до розділу 2
В підсумку, при проєктуванні веб-ресурсу для онлайн-запису клієнтів у сфері
послуг було розглянуто функціональне програмне середовище розробки, основні
принципи розробки веб-ресурсів, архітектуру системи, структуру бази даних,
діаграми активності та послідовності, а також процес проєктування інтерфейсу
користувача.
На основі аналізу вимог та потреб користувачів було обрано оптимальні
інструменти та технології для реалізації веб-ресурсу для онлайн-запису клієнтів у
сфері послуг, включаючи MERN-стек (MongoDB, Express.js, React.js, Node.js). Це
забезпечує високу продуктивність, масштабованість та гнучкість ресурсу.
Використання сучасних технологій, таких як React.js, Bootstrap, OAuth2 та Stripe,
дозволяє створювати адаптивний та безпечний інтерфейс користувача, що забезпечує
привабливий дизайн та зручність використання.
Проєктування структури бази даних було виконано з урахуванням вимог щодо
зберігання та обробки даних про користувачів, лікарів, записи на прийом та відгуки.
Діаграми активності та послідовності допомогли візуалізувати основні процеси та
взаємодію між компонентами системи, що сприяло кращому розумінню логіки
роботи веб-ресурсу.
В цілому, виконані етапи проєктування забезпечили надійну основу для
подальшої розробки та впровадження веб-ресурсу для онлайн-запису клієнтів у сфері
послуг.
41
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Постановка завдання
Завданням кваліфікаційної роботи бакалавра є розробка веб-ресурсу для
онлайн-запису клієнтів у сфері послуг, зокрема – для медичних консультацій у
приватних лікарнях. Веб-ресурс повинен забезпечувати зручний і швидкий спосіб
запису на прийом до лікаря, а також дозволяти лікарям ефективно керувати своїм
розкладом.
Розглянемо основні завдання:
Розробка зручного інтерфейсу користувача, для забезпечення інтуїтивно
зрозумілої комунікації для пацієнтів та лікарів, яка дозволить легко виконувати всі
необхідні дії, такі як запис на прийом, перегляд розкладу та залишення відгуків.
Інтеграція з Google API з використанням Google OAuth2 для аутентифікації
користувачів.
Реалізація безпечної аутентифікації та авторизації, з використанням JSON Web
Tokens (JWT) для забезпечення безпечної аутентифікації та авторизації користувачів.
Створення функціональної бази даних з використанням MongoDB для
зберігання інформації про користувачів, лікарів та записи на прийом.
Інтеграція платіжного шлюзу, який буде Використовувати Stripe для здійснення
онлайн-оплат за медичні послуги.
Забезпечити високу продуктивності та масштабованість. Оптимізувати додаток
для роботи з великою кількістю користувачів та даних.
Також було виділено основні технічні вимоги для забезпечення можливості
виконання основних завдань.
Технічні вимоги включають:
реалізацію фронтенду за допомогою React.js з використанням React Hooks для
керування станом та життєвим циклом компонентів;
використання Bootstrap для забезпечення адаптивного дизайну.
42
Бекенд реалізується за допомогою Node.js та Express.js для обробки запитів та
керування бізнес-логікою веб-ресурсу, з використанням Mongoose для взаємодії з
MongoDB. Для забезпечення безпеки використовуються JWT для аутентифікації та
авторизації, SSL/TLS для шифрування даних при передачі. Інтеграція з Google
OAuth2 для аутентифікації користувачів.
В ході виконання роботи розроблено загальну структру проєкту (рис. 3.1).
Рисунок 3.1 – Структура проєкту
43
Також розроблено діаграми класів розроблюваного проєкту (рис. 3.2-3.3).
Рисунок 3.2 – Діаграма класів для фронтенду
44
Рисунок 3.3 – Діаграма класів для бекенду
3.2 Інтерфейс веб-ресурсу для онлайн-запису клієнтів у сфері послуг
Розробка інтерфейсу користувача є ключовим аспектом створення веб-ресурсу
для онлайн-запису клієнтів у сфері медичних послуг. Розроблений зручний та
інтуїтивно зрозумілий інтерфейс сприяє підвищенню ефективності взаємодії
користувачів із системою, забезпечуючи їх задоволення від використання додатку.
Розроблений інтерфейс веб-ресурсу є адаптивним, доступним з різних
пристроїв (комп'ютери, планшети, смартфони), забезпечено інтуїтивно зрозумілу
навігацію.
45
Основні функціональні можливості, які реалізовані в інтерфейсі, включають:
Реєстрацію та вхід користувачів.
Пошук лікарів за спеціалізацією.
Запис на прийом до лікаря.
Перегляд розкладу прийомів.
Оплату послуг онлайн.
Перегляд та залишення відгуків про лікарів.
Розроблено основні компонети користувацького інтерфейсу, опис кожного
наведено нижче.
Сторінка входу дозволяє користувачам увійти до ресурсу за допомогою своїх
облікових даних або через сторонні сервіси, такі як Google. Використання OAuth2
забезпечує безпеку та зручність входу.
Компонент пошуку лікаря дозволяє пацієнтам знаходити лікарів за
спеціалізацією. Результати пошуку відображаються у вигляді списку, де кожен лікар
має кнопку для запису на прийом.
Компонент бронювання слотів дозволяє пацієнтам обирати дату та час прийому
з доступних варіантів. Інформація про наявні слоти завантажується з сервера, і
пацієнти можуть підтвердити запис, вибравши зручний час.
Компонент перегляду персональних даних дозволяє користувачам переглядати
та редагувати свої особисті дані, такі як ім'я, електронна пошта, номер телефону.
Компонент залишення відгуків дозволяє пацієнтам оцінювати якість послуг
лікарів, залишаючи коментарі та оцінки. Лікарі можуть переглядати ці відгуки у
своєму інтерфейсі.
Компонент розкладу прийомів дозволяє лікарям переглядати свій розклад на
поточний день. Лікарі можуть бачити деталі кожного прийому, включаючи
інформацію про пацієнтів та запланований час.
Розробка інтерфейсу веб-ресурсу для онлайн-запису клієнтів у сфері послуг
включила створення зручних та інтуїтивно зрозумілих компонентів, які забезпечують
ефективну взаємодію користувачів із системою. Використання сучасних технологій
46
та фреймворків дозволяє створювати адаптивний та безпечний інтерфейс, що
задовольняє потреби як пацієнтів, так і лікарів.
3.3 Програмна реалізація веб-ресурсу для онлайн-запису клієнтів у сфері
послуг
Програмна реалізація веб-ресурсу для онлайн-запису клієнтів у сфері послуг
включила розробку бекенду для обробки запитів та взаємодії з БД, а також фронтенду
для взаємодії користувачів із системою. Процес розробки включав використання
сучасних технологій та фреймворків для забезпечення високої продуктивності,
надійності та зручності використання веб-ресурсу.
Для бекенду було використано Node.js і Express.js, що забезпечують швидку
обробку запитів і гнучкість у розробці API. Для роботи з БД було обрано MongoDB,
яка надає гнучке зберігання документів. Фронтенд було реалізовано за допомогою
React.js, що забезпечує створення динамічних та інтерактивних інтерфейсів
користувача.
Схема взаємодії між фронтендом та бекендом показана на рис. 3.4.
Рисунок 3.4 – Схема взаємодії між фронтендом та бекендом
47
Розроблений бекенд містить класи:
Appointment.model.js – клас, який визначає модель для записів на прийом за
допомогою Mongoose. Схема включає поля для ідентифікаторів лікаря, пацієнта,
дати, часу, статусу та відгуку (рис. 3.5). Поля визначені з відповідними типами даних
та обов'язковими обмеженнями, що забезпечує цілісність даних при створенні та
зберіганні записів у базі даних. Взаємодія з іншими моделями здійснюється через
посилання (референси) на відповідні документи в колекціях Doctor та Patient.
Рисунок 3.5 – appointment.model.js
В класі doctor.model.js (рис. 3.6) визначається модель для лікарів. Він включає
поля для імені користувача, пароля, імені, електронної пошти, номера телефону,
спеціалізації, вартості послуг та розкладу прийомів. Схема включає масив об'єктів
dates, де кожен об'єкт містить дату та масив часових слотів. Це дозволяє лікарям
48
зберігати розклад прийомів у структурованому форматі. Взаємодія з іншими
моделями здійснюється через референси до записів та відгуків.
Рисунок 3.6 – doctor.model.js
Клас patient.model.js (рис. 3.7) визначає модель для пацієнтів. Він включає поля
для Google ID, електронної пошти, імені, фото та номера телефону. Це забезпечує
зберігання основної інформації про пацієнтів та дозволяє інтегрувати аутентифікацію
через Google. Взаємодія з іншими моделями здійснюється через референси до записів
на прийом.
49
Рисунок 3.7 – patient.model.js
На фронтенді взаємодія між класами здійснюється через компоненти та API-
запити. Фронтенд компоненти використовують Axios для надсилання запитів до
бекенду, де маршрути обробляють ці запити, виконують відповідні операції з базою
даних та повертають відповіді. Це забезпечує динамічну взаємодію користувачів із
системою та дозволяє реалізувати повний цикл обробки даних від створення та
редагування записів до відображення та залишення відгуків.
Нижче описано основні компоненти, що використовуються на фронтенді.
DoctorLogin.js – компонент, який забезпечує інтерфейс для входу лікарів у
системи. Він використовує компоненти Navbar для відображення верхньої панелі
навігації, LoginForm для форми входу та Footer для нижньої панелі. Всі ці компоненти
50
організовані у вигляді контейнерів, що забезпечує зручний користувацький досвід
(рис. 3.8).
Рисунок 3.8 – DoctorLogin.js
DoctorDashboard.js – компонент, що відображає панель керування для лікарів,
включаючи їх розклад на поточний день. Він використовує компоненти Navbar для
верхньої панелі навігації, LeftsideDoctor для бокової панелі та TodaysSchedule для
51
відображення розкладу прийомів. Основний вміст відображається у вигляді таблиці з
інформацією про заплановані прийоми (рис. 3.9).
Рисунок 3.9 – DoctorDashboard.js
PaitentDashboard.js – компонент, що відображає панель керування для пацієнтів,
включаючи їх особисті дані та зображення профілю. Він використовує контекст
52
аутентифікації AuthContext для отримання Google ID пацієнта, завантажує дані про
пацієнта з сервера та відображає їх у вигляді карток та зображення (рис. 3.10).
Рисунок 3.10 – PaitentDashboard.js
Компонент Selectdate.js (рис. 3.11) дозволяє пацієнтам вибирати дату для
запису на прийом. Він використовує компонент Calendar для відображення календаря,
в якому користувачі можуть обирати зручну дату. Компонент також включає кнопки
для підтвердження вибору дати та переходу до наступного кроку.
Крім вище розглянутого, розроблена низка інших ключових компонентів для
реалізації фронтенду.
53
Рисунок 3.11 – SelectDate.js
3.4 Особливості тестування веб-ресурсів
Тестування є критично важливою частиною процесу розробки веб-ресурсів.
Воно забезпечує виявлення помилок, перевірку функціональності, продуктивності та
безпеки додатку перед його випуском у виробництво. Веб-ресурси мають специфічні
особливості, що вимагають використання різних методів та інструментів для
ефективного тестування.
Функціональне тестування перевіряє, чи відповідає функціональність ресурсу
вимогам та специфікаціям [12]. Воно включає тестування користувацьких
інтерфейсів, баз даних, API та інших компонентів системи. Для автоматизації
тестування використовуються такі інструменти, як Selenium, Cypress, Jest та Mocha.
Тестування продуктивності оцінює, як ресурс працює під різними
навантаженнями. Це включає тестування швидкості відгуку, часу завантаження
54
сторінок, обробку великої кількості запитів. Для цього використовуються
інструменти, такі як JMeter, Gatling та LoadRunner.
Безпекове тестування виявляє вразливості веб-ресурсу, що можуть бути
використані для атак. Це включає тестування на SQL-ін'єкції, XSS-атаки, CSRF та
інші види атак. Інструменти для цього: OWASP ZAP, Burp Suite, Nessus.
Юзабіліті тестування перевіряє зручність використання веб-ресурсу кінцевими
користувачами. Воно включає оцінку дизайну інтерфейсу, навігації, доступності та
загального користувацького досвіду. Методи включають спостереження за
користувачами, анкетування та A/B тестування.
Кросбраузерне тестування перевіряє коректність роботи ресурсу в різних
браузерах і на різних пристроях. Це забезпечує сумісність додатку з основними
браузерами, такими як Chrome, Firefox, Safari, Edge. Інструменти для цього:
BrowserStack, CrossBrowserTesting, Sauce Labs.
Регресійне тестування забезпечує, що нові зміни в коді не призводять до появи
нових помилок у вже працюючих функціях [13]. Це включає повторне виконання
раніше проведених тестів після внесення змін до коду. Інструменти для цього:
автоматизовані тестові фреймворки, такі як Selenium та Jest.
Процес тестування включає кілька етапів. Планування тестування починається
з визначення обсягу та цілей тестування, розробки тестових сценаріїв та випадків, а
також вибору інструментів для автоматизації та мануального тестування. Далі
відбувається розробка тестів, яка включає написання тестових сценаріїв для
функціональних, продуктивних та інших видів тестування, а також створення
тестових даних для використання під час тестування.
Виконання тестів відбувається на різних етапах розробки: під час інтеграції,
перед релізом та після впровадження. Це включає виконання автоматизованих та
мануальних тестів. Після цього відбувається аналіз результатів, що включає збір та
аналіз результатів тестування, виявлення та реєстрація помилок у системі
відстеження помилок, а також пріоритизацію помилок для подальшого виправлення.
Виправлення помилок здійснюється розробниками, після чого відбувається
повторне тестування для перевірки виправлень та виконання регресійних тестів.
55
Завершення тестування включає підготовку звіту про результати тестування, аналіз
якості додатку на основі результатів тестування та реліз додатку у виробниче
середовище.
Для автоматизації браузерного тестування використовувався інструмент
Selenium, який підтримує різні мови програмування, такі як Java, C#, Python,
JavaScript. Він забезпечує запис і відтворення тестових сценаріїв для веб-додатків.
Jest використовувався як фреймворк для тестування JavaScript та React-додатків, що
підтримує створення модульних тестів та тестів інтеграції. Він швидкий та зручний у
використанні завдяки вбудованому інструменту для моків та знімків.
Cypress, сучасний інструмент для кінцевого тестування веб-ресурсу,
використовувався для запису та відтворення тестів, інтерактивного налагодження та
швидкого виконання тестів у реальному браузері [14]. Для тестування продуктивності
веб-ресурсу використовується JMeter, який підтримує симуляцію великої кількості
користувачів та різних сценаріїв навантаження, забезпечуючи детальний аналіз
результатів тестування.
Для автоматизованого тестування безпеки веб-ресурсу використовувється
OWASP ZAP, який підтримує виявлення вразливостей, таких як SQL-ін'єкції, XSS,
CSRF, та забезпечує інтеграцію з CI/CD пайплайнами для постійного тестування
безпеки.
3.5 Тестування веб-ресурсу для онлайн-запису клієнтів у сфері послуг
Проведене тестування веб-ресурсу для онлайн-запису клієнтів у сфері
медичних послуг включало: перевірку функціональності, продуктивності, безпеки та
зручності використання ресурсу. Тестування мало на меті забезпечити високу якість
та надійність веб-ресурсу, виявити та виправити всі потенційні помилки перед його
впровадженням у виробниче середовище.
Тестування проводилося з використанням бібліотеки Chai та Chai-HTTP для
створення HTTP-запитів і перевірки відповідей сервера. Було розроблено тести для
основних функцій, включаючи наступне:
56
реєстрацію,
аутентифікацію,
пошук лікарів,
запис на прийом,
залишення відгуків.
Кожен тест перевіряв конкретний сценарій використання, забезпечуючи
належну роботу всіх функціональних компонентів ресурсу.
У файлі 2_doctors.test.js (рис. 3.12) були розроблені тести для перевірки
функціональності, пов'язаної з лікарями.
Рисунок 3.12 – Тести перевірки функціональності для лікарів
57
Спочатку база даних очищалася перед кожним тестом для забезпечення чистоти
експерименту. Проводилися тести для отримання списку всіх лікарів, додавання
нового лікаря, оновлення даних лікаря та перевірки обробки помилок при додаванні
лікаря з
Тест для отримання списку лікарів перевірено, що після додавання нового
лікаря, список лікарів містить одного лікаря. Тест для додавання нового лікаря
перевіряв, що сервер правильно обробляє запит і повертає статус 200. Оновлення
даних лікаря перевірялося шляхом надсилання запиту на зміну телефону,
спеціалізації та вартості за сеанс, після чого перевірялося, що сервер повертає статус
200. Тест для перевірки дублювання ключів перевіряв, що сервер повертає статус 400
при спробі додати лікаря з вже існуючим іменем користувача.
У файлі 3_patients.test.js (рис. 3.13) були розроблені тести для перевірки
функціональності, пов'язаної з пацієнтами.
Рисунок 3.13 – Тест перевірки функціональності для пацієнтів
58
Як і у випадку з лікарями, база даних очищалася перед кожним тестом.
Проводилися тести для отримання списку всіх пацієнтів, додавання нового пацієнта,
оновлення даних пацієнта та перевірки обробки помилок при додаванні пацієнта з
дубльованим ключем.
Тест для отримання списку пацієнтів перевірено, що після додавання нового
пацієнта, список пацієнтів містить одного пацієнта. Тест для додавання нового
пацієнта перевірено, що сервер правильно обробляє запит і повертає статус 200.
Оновлення даних пацієнта перевірялося шляхом надсилання запиту на зміну номера
телефону, після чого перевірялося, що сервер повертає статус 200. Тест для перевірки
дублювання ключів перевірено, що сервер повертає статус 400 при спробі додати
пацієнта з вже існуючим Google ID.
Функціональне тестування охоплювало перевірку всіх ключових функцій
ресурсу, таких як:
реєстрація та вхід користувачів,
пошук лікарів,
запис на прийом,
оплата послуг,
перегляд розкладу прийомів,
залишення та перегляд відгуків.
Під час тестування реєстрації та входу до ресурсу було перевірено коректність
обробки даних, створення нових облікових записів, аутентифікацію через Google
OAuth2 та безпечне збереження паролів.
Під час тестування продуктивності було проведено навантажувальне
тестування для оцінки швидкості відгуку веб-ресурсу під високим навантаженням.
Використовуючи JMeter, було змодельовано одночасну роботу великої кількості
користувачів, що виконують різні операції: пошук лікарів, запис на прийом, перегляд
розкладу та оплата послуг. Тестування показало, що ресурс здатний обробляти велику
кількість запитів без значних затримок. Середній час відгуку залишався в межах
допустимих значень навіть при пікових навантаженнях. Було виявлено та
59
оптимізовано декілька вузьких місць, що підвищило загальну продуктивність веб-
ресурсу.
Безпекове тестування було спрямоване на виявлення потенційних
вразливостей, які можуть бути використані для атак на веб-ресурс. Використовуючи
«OWASP ZAP» та «Burp Suite», було проведено тестування на SQL-ін'єкції, XSS-
атаки, CSRF та інші види атак. Веб-ресурс пройшов всі тестування без виявлення
критичних вразливостей. Всі введені дані належним чином фільтруються та
перевіряються, що забезпечує захист від SQL-ін'єкцій та XSS-атак. Було забезпечено
належний захист від CSRF-атак шляхом впровадження токенів CSRF у всі форми, що
здійснюють зміну даних.
Кросбраузерне тестування забезпечило коректність роботи веб-ресурсу в різних
браузерах і на різних пристроях. Використовуючи «BrowserStack», було проведено
тестування в основних браузерах, таких як Chrome, Firefox, Safari, Edge, а також на
різних мобільних пристроях. Тестування показало, що веб-ресурс коректно працює у
всіх перевірених браузерах та пристроях. Виявлені незначні стилістичні помилки
були виправлені для забезпечення єдиного вигляду та функціональності на всіх
платформах.
Регресійне тестування забезпечило, що нові зміни в коді не призводять до появи
нових помилок у вже працюючих функціях. Після кожної зміни або оновлення коду
було проведено автоматизоване повторне виконання всіх раніше розроблених тестів.
Це дозволило виявити та виправити потенційні помилки, що могли з'явитися після
внесення змін. Регресійне тестування забезпечило стабільність і надійність веб-
ресурс на всіх етапах розробки та впровадження.
Висновки до розділу 3
Охоплено важливі аспекти програмної реалізації та тестування веб-ресурсу для
онлайн-запису клієнтів у сфері послуг. У процесі розробки було використано сучасні
технології та інструменти для забезпечення ефективної та надійної роботи веб-
ресурсу.
60
Бекенд реалізовано за допомогою Node.js та Express.js, що дозволило створити
гнучке та масштабоване API. Використання MongoDB забезпечило ефективне
зберігання та обробку даних. Описані основні класи бекенду, такі як моделі для
записів на прийом, лікарів та пацієнтів, а також маршрути для обробки запитів, що
забезпечують взаємодію між компонентами ресурсу.
Фронтенд розроблено з використанням React.js, що дозволило створити
динамічні та інтерактивні інтерфейси користувача. Описані основні компоненти
фронтенду, що забезпечують взаємодію користувачів із системою, такі як вхід
лікарів, пошук лікарів, панель керування для лікарів та пацієнтів, перегляд розкладу
прийомів та залишення відгуків.
Особливу увагу було приділено тестуванню веб-ресурсу. Проведене
функціональне тестування забезпечило перевірку всіх ключових функцій веб-
ресурсу, включаючи реєстрацію, аутентифікацію, пошук лікарів, запис на прийом та
оплати послуг. Тестування продуктивності показало, що ресурс здатний обробляти
велику кількість запитів без значних затримок, а безпекове тестування виявило
відсутність критичних вразливостей. Юзабіліті тестування підтвердило зручність
використання веб-ресурсу, а кросбраузерне тестування забезпечило коректну роботу
його на різних платформах.
В підсумку, було створено надійний, безпечний та зручний у використанні
продукт, що задовольняє потреби користувачів у сфері онлайн-запису на медичні
послуги. Усі етапи розробки та тестування були спрямовані на досягнення високої
якості та надійності веб-ресурсу, що є запорукою успішної експлуатації його у
виробничому середовищі.
61
ВИСНОВКИ
Кваліфікаційна робота на тему "Веб-ресурс для онлайн-запису клієнтів у сфері
послуг" охопила повний цикл розробки, реалізації та тестування інноваційного веб-
ресурсу, призначеного для полегшення процесу запису клієнтів на прийом у сфері
медичних послуг.
Основна мета роботи полягала у створенні зручного, інтуїтивно зрозумілого та
ефективного інструменту, який забезпечить користувачам можливість швидко та
зручно записуватися на прийом до лікаря, а також керувати своїми медичними
записами.
На початковому етапі роботи був проведений аналіз сучасного стану вибору
веб-ресурсів для онлайн-запису клієнтів у сфері послуг та огляд існуючих аналогів
ресурсів з порівнянням.
Натсупним кроком проведений детальний аналіз вимог та визначено основні
функціональні можливості, які повинні бути реалізовані у веб-ресурсі. Було обрано
технологічний стек, який включає сучасні та надійні інструменти для розробки веб-
додатків: Node.js, Express.js, MongoDB для бекенду та React.js для фронтенду.
Використання цих технологій забезпечило гнучкість, масштабованість та високу
продуктивність системи.
Розробка веб-ресурсу розпочалася з проєктування архітектури системи,
створення моделей даних та визначення основних маршрутів для обробки запитів.
Було реалізовано базові функції, такі як: реєстрація та вхід користувачів, пошук
лікарів, запис на прийом, оплата послуг, перегляд розкладу прийомів та залишення
відгуків. Кожна з цих функцій була детально описана та реалізована з використанням
передових підходів та методів програмування.
Особлива увага була приділена тестуванню веб-ресурсу. Було проведено
функціональне, продуктивне, безпекове та кросбраузерне тестування. Кожен вид
тестування мав на меті забезпечити високу якість та надійність ресурсу.
Функціональне тестування підтвердило коректну роботу всіх основних функцій веб-
веб-ресурсу. Тестування продуктивності показало, що він здатний обробляти велику
62
кількість запитів без значних затримок. Безпекове тестування виявило відсутність
критичних вразливостей, що забезпечує захист даних користувачів. Юзабіліті
тестування підтвердило зручність та інтуїтивність інтерфейсу, а кросбраузерне
тестування забезпечило коректну роботу веб-ресурсу на різних платформах та
пристроях.
У результаті виконання роботи було створено надійний та зручний у
використанні веб-ресурс для онлайн-запису клієнтів у сфері медичних послуг.
Розроблений веб-ресурс надає користувачам можливість швидко та зручно
записуватися на прийом до лікаря, керувати своїми медичними записами та
отримувати зворотній зв'язок. Висока якість розробки та тестування забезпечила
стабільну роботу веб-ресурсу, що є запорукою успішної експлуатації його у
виробничому середовищі.
Загалом, виконана кваліфікаційна робота бакалавра продемонструвала
важливість використання сучасних технологій та методів розробки для створення
ефективних та надійних веб-ресурсів. Отримані результати свідчать про досягнення
поставлених цілей та виконання всіх завдань, що підтверджує високу якість
проведеної роботи та її відповідність вимогам сучасного програмного забезпечення.
63
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Веб-ресурс «Booksy». URL: https://booksy.com/ (дата звернення: 23.02.2024).
2. Платформа «Zocdoc» URL: https://zocdoc.com/ (дата звернення: 23.02.2024).
3. Веб ресурс «OpenTable» URL: https://opentable.com/ (дата звернення:
23.02.2024).
4. WebStorm. URL: https://www.jetbrains.com/webstorm/ (дата звернення:
01.03.2024).
5. Модулі в JavaScript. URL: https://uk.javascript.info/modules-intro (дата звернення:
103.03.2024).
6. MERN Stack. URL: https://appmaster.io/glossary/mern-stack-mongodb-express-js-
react-node-js (дата звернення: 03.03.2024).
7. NodeJS. URL: https://nodejs.org/en (дата звернення: 18.03.2024).
8. Express.js. URL: https://expressjs.com/ (дата звернення: 18.03.2024).
9. MongoDB. URL: https://www.mongodb.com/ (дата звернення: 18.03.2024).
10. Sequence Diagram MongoDB. URL:
https://en.wikipedia.org/wiki/Sequence_diagram (дата звернення: 01.04.2024).
11. React.js. URL: https://legacy.reactjs.org (дата звернення: 18.03.2024).
12. Functional Testing. URL: https://en.wikipedia.org/wiki/Functional_testing (дата
звернення: 29.04.2024).
13. Regression Testing. URL: https://en.wikipedia.org/wiki/Regression_testing (дата
звернення: 30.04.2024).
14. Cypress. URL: https://www.cypress.io/ (дата звернення: 02.05.2024).
64
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2024 р.
ВЕБ-РЕСУРС ДЛЯ ОНЛАЙН-ЗАПИСУ КЛІЄНТІВ У СФЕРІ ПОСЛУГ
Специфікація
482.ЧДТУ. 42030-01
Листів 2
Розробник ____________________ Кочуров А.В.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2024
65
482.ЧДТУ. 42030-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 42030-01 12 01 Текст програми
482.ЧДТУ. 42030-01 34 01 Інструкція користувача
482.ЧДТУ. 42030-01 90 01 Структура бази даних
66
ДОДАТОК Б
ВЕБ-РЕСУРС ДЛЯ ОНЛАЙН-ЗАПИСУ КЛІЄНТІВ У СФЕРІ ПОСЛУГ
Текст програми
482.ЧДТУ. 42030-01 12 01
Листів 38
Розробник _____________ Кочуров А.В.
Черкаси – 2024
67
appointments.txt
const router = require('express').Router();
const appointmentImport = require("../models/appointment.model");
const { Appointment, Feedback } = appointmentImport;
router.route('/add-meet-link').put((req, res) => {
const meetLink = req.body.meetLink;
const appointmentId = req.body.appointmentId;
Appointment.findOne({ _id: appointmentId }).then((appointment) => {
if (appointment) {
appointment.googleMeetLink = meetLink;
console.log(`Received meet link : ${meetLink}`);
appointment.save().then(() => {
console.log(`Updated the meet link!`);
res.status(200).json({ message: "Meet link updated!" });
}).catch((err) => {
console.log(`Cannot add meet link to the appointment due to ${err}`);
res.status(400).json({ message: `Cannot add meet link to the appointment due
to ${err}` });
})
}
})
})
router.route('/feedback').put((req, res) => {
const appointmentId = req.body.appointmentId;
const stars = req.body.stars;
const title = req.body.title;
const review = req.body.review;
Appointment.findOne({ _id : appointmentId }).then((appointment) => {
if(appointment) {
appointment.feedback.stars = stars;
appointment.feedback.title = title;
appointment.feedback.review = review;
appointment.feedback.given = true;
appointment.save().then(() => {
res.status(200).json({message : `Feedback updated successfully!`});
68
}).catch(err => {
console.log(err);
res.status(400).json(err);
})
}
}).catch(err => {
console.log(err);
res.status(400).json(err);
})
})
module.exports = router;
Doctors.js
const router = require("express").Router();
const doctors = require("../models/doctor.model");
const jwt = require("jsonwebtoken");
require("dotenv").config();
const appointmentImport = require("../models/appointment.model");
const { Doctor, Slot, DateSchedule } = doctors;
const { Appointment, Feedback } = appointmentImport;
const bcrypt = require('../bcrypt/bcrypt');
function createDate(date) {
return new DateSchedule({
date: date,
slots: [
new Slot({
time: "09:00:00",
isBooked: false,
}),
new Slot({
time: "12:00:00",
isBooked: false,
}),
new Slot({
time: "15:00:00",
isBooked: false,
}),
],
});
}
69
router.route("/").get((req, res) => {
Doctor.find()
.then((doctors) => {
res.json(doctors);
})
.catch((err) => {
res.status(400).json(`Error : ${err}`);
});
});
router.route("/createFake").get((req, res) => {
const username = "Doctor"; // Required.. can't be undefined
const password = "12345";
const name = "Vasya";
const phoneNumber = "+380943245432";
const specialization = "prfi";
const feesPerSession = "100";
const newDoctor = new Doctor({
username,
password,
name,
phoneNumber,
specialization,
feesPerSession,
});
newDoctor
.save()
.then(() => {
res.json("Doctor added");
// console.log(`${newDoctor} added!`)
})
.catch((err) => {
res.status(400).json(`Error : ${err}`);
// console.log(err);
});
});
router.route("/add").post((req, res) => {
70
const username = req.body.username; // Required.. can't be undefined
const password = req.body.password;
const name = req.body.name;
const phoneNumber = req.body.phoneNumber;
const specialization = req.body.specialization;
const feesPerSession = req.body.feesPerSession;
const newDoctor = new Doctor({
username,
password,
name,
phoneNumber,
specialization,
feesPerSession,
});
newDoctor
.save()
.then(() => {
res.json("Doctor added");
// console.log(`${newDoctor} added!`)
})
.catch((err) => {
res.status(400).json(`Error : ${err}`);
// console.log(err);
});
});
router.route("/update").put((req, res) => {
const username = req.body.username; // Required.. can't be undefined
Doctor.findOne({ username: username }).then((doctor) => {
if (doctor) {
doctor.name = req.body.name;
doctor.phoneNumber = req.body.phoneNumber;
doctor.specialization = req.body.specialization;
doctor.feesPerSession = req.body.feesPerSession;
doctor
.save()
.then(() => {
71
res.json("Doctor updated");
// console.log(`${doctor} updated!`)
})
.catch((err) => {
res.status(400).json(`Error : ${err}`);
// console.log(err);
});
}
});
});
// Doctor login
router.route("/login").post(async (req, res) => {
try {
const username = req.body.username;
// Password entered by the user
const plainTextPassword = req.body.password;
// Password Salt for hashing purpose
const passwordSalt = process.env.PASSWORD_SALT;
// Encrypted password after hashing operation
const encryptedPassword = bcrypt.hash(plainTextPassword, passwordSalt)
const doctor = await Doctor.findOne({
username: username,
password: encryptedPassword,
});
console.log(doctor);
if (doctor === null) {
return res.status(201).json({ message: "wrong username or password" });
}
// Doctor found, return the token to the client side
const token = jwt.sign(
JSON.stringify(doctor),
process.env.KEY,
{
72
algorithm: process.env.ALGORITHM,
}
);
return res.status(200).json({ token: token.toString() });
} catch (err) {
console.log(err);
return res.status(400).json(err);
}
});
// To get the slots available for the date
router.route("/get-slots").post(async (req, res) => {
try {
const id = req.body.doctorId; // Doctor's id
const date = req.body.date; // Date to book
const doctor = await Doctor.findOne({ _id: id });
// Doctor not found
if (doctor === null) {
console.log("Doctor not found in the database!");
return res.status(201).json({
message: "Doctor not found in the database!",
});
}
// Doctor found
// Find the date
let count = 0;
for (const i of doctor.dates) {
if (i.date === date) {
return res.status(200).json(i);
}
count++;
}
const oldLength = count;
// Add new slots if date not found in the db
73
const dateSchedule = createDate(date);
const updatedDoctor = await Doctor.findOneAndUpdate(
{ _id: doctor._id },
{ $push: { dates: dateSchedule } },
{ new: true }
);
if (updatedDoctor) {
return res.status(200).json(updatedDoctor.dates[oldLength]);
} else {
const err = { err: "an error occurred!" };
throw err;
}
} catch (err) {
console.log(err);
return res.status(400).json({
message: err,
});
}
});
router.route("/book-slot").post((req, res) => {
const patientId = req.body.googleId; // Patient's google id
const patientName = req.body.patientName; // Patient's name
const doctorId = req.body.doctorId; // Doctor's id 606460d2e0dd28cc76d9b0f3
const slotId = req.body.slotId; // Id of that particular slot
const dateId = req.body.dateId; // Id of that particular date
const meetLink = "";
Doctor.findOne({ _id: doctorId }).then((doctor) => {
const date = doctor.dates.id(dateId);
const slot = date.slots.id(slotId);
slot.isBooked = true;
doctor
.save()
.then(() => {
// Create an entry in the appointment database
const newAppointment = new Appointment({
doctorId,
dateId,
slotId,
74
patientId,
date: date.date,
slotTime: slot.time,
doctorName: doctor.name,
doctorEmail: doctor.email,
patientName: patientName,
googleMeetLink: meetLink,
feedback: new Feedback()
});
console.log(newAppointment);
newAppointment
.save()
.then((appointment) => {
return res.status(200).json(appointment);
})
.catch((err) => {
console.log(err);
res.status(400).json(err);
});
})
.catch((err) => {
console.log(err);
res.status(400).json({
message: `An error occurred : ${err}`,
});
});
});
});
router.route("/appointments").post(async (req, res) => {
try {
const doctorId = req.body.doctorId;
const appointments = await Appointment.find({
doctorId: doctorId,
});
// res.status(200).json(appointments);
const sortedAppointments = appointments.sort((a, b) => {
return (
Date.parse(b.date + "T" + b.slotTime) -
75
Date.parse(a.date + "T" + a.slotTime)
);
});
res.status(200).json(sortedAppointments);
} catch (err) {
console.log(err);
res.status(400).json(err);
}
});
router.route("/appointment/:id").get(async (req, res) => {
try {
const appointmentId = req.params.id;
const appointment = await Appointment.findOne({
_id: appointmentId,
});
res.status(200).json(appointment);
} catch (err) {
console.log(err);
res.status(400).json(err);
}
});
router.route('/todays-appointments').post(async (req, res) => {
try {
const date = new Date()
let currDate = date.getFullYear().toString()
const month = date.getMonth() + 1
const day = date.getDate()
currDate += month < 10 ? ('-0' + month.toString()) : '-' + month.toString()
currDate += day < 10 ? ('-0' + day.toString()) : '-' + day.toString()
const doctorId = req.body.doctorId;
const appointments = await Appointment.find({ doctorId: doctorId, date:
currDate });
const sortedAppointments = appointments.sort((a, b) => {
76
return (
Date.parse(a.date + "T" + a.slotTime) - Date.parse(b.date + "T" +
b.slotTime)
);
});
res.status(200).json(sortedAppointments);
}
catch (err) {
console.log(err);
res.status(400).json(err);
}
})
router.route('/previous-appointments').post(async (req, res) => {
try {
const doctorId = req.body.doctorId;
const appointments = await Appointment.find({ doctorId: doctorId });
// Get current dateTime
const date = new Date()
let currDateTime = date.getFullYear().toString()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minutes = date.getMinutes()
const seconds = date.getSeconds()
currDateTime += month < 10 ? ('-0' + month.toString()) : '-' + month.toString()
currDateTime += day < 10 ? ('-0' + day.toString()) : '-' + day.toString()
currDateTime += hour < 10 ? ('T0' + hour.toString()) : 'T' + hour.toString()
currDateTime += minutes < 10 ? (':0' + minutes.toString()) : ':' +
minutes.toString()
currDateTime += seconds < 10 ? (':0' + seconds.toString()) : ':' +
seconds.toString()
const filteredAppointments = appointments.filter((appointment) => {
return Date.parse(currDateTime) >= Date.parse(appointment.date + 'T' +
appointment.slotTime)
})
77
const sortedAppointments = filteredAppointments.sort((a, b) => {
return Date.parse(b.date + 'T' + b.slotTime) - Date.parse(a.date + 'T' +
a.slotTime)
})
res.status(200).json(sortedAppointments);
}
catch (err) {
console.log(err);
res.status(400).json(err);
}
})
module.exports = router;
FeedbackDetails.js
import React, { useEffect, useState } from 'react';
import Navbar from '../Basic/Navbar';
import { Row, Input, Button } from 'reactstrap'
import { Link, useParams } from 'react-router-dom';
import StarPicker from 'react-star-picker';
import Spinner from "react-bootstrap/Spinner";
import axios from 'axios';
const FeedbackDetails = () => {
const { id } = useParams();
const [feedback, setFeedback] = useState({});
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
async function init() {
setIsLoading(true);
const { data } = await axios.get(
`${process.env.REACT_APP_SERVER_URL}/doctors/appointment/${id}`
);
setFeedback(data?.feedback);
setIsLoading(false);
}
78
init();
}, [])
if (isLoading) {
return (
<div>
<Navbar />
<div style={{ width: "100%", display: "flex", justifyContent:
"center", marginTop: '20px' }}>
<Spinner animation="border" variant="danger" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
</div>
</div>
)
}
return (<div>
<Navbar />
<div class="container mt-5 mb-5"
style={{
display: 'flex',
flexFlow: 'column',
padding: '20px',
border: "15px solid #03203C ",
height: "max-content",
backgroundColor: "#35BDD0",
}}
>
<Row style={{ justifyContent: 'center' }}>
<StarPicker value={feedback?.stars} size={40}></StarPicker>
</Row>
<Row className="m-3">
<Input
readOnly='true'
value={feedback?.title}
/>
</Row>
<Row className="m-3">
<Input
type="textarea"
79
maxLength="50px"
style={{ height: "30vh" }}
readOnly='true'
value={feedback?.review}
/>
</Row>
<Row
style={{
display: 'flex',
justifyContent: 'space-around',
padding: '20px 0px'
}}>
<Link to="/doctor/payment-history">
<Button color="danger">GO BACK</Button>
</Link>
</Row>
</div>
</div>)
}
export default FeedbackDetails;
Home.js
import React from "react";
import Footer from "../Basic/Footer";
import Navbar from "../Basic/Navbar";
import About from "../Home/About";
import Jumbo from "../Home/Jumbo";
import LoginButton from "../Home/LoginButton";
const Home = () => {
return (
<div>
<Navbar />
<Jumbo />
<About />
<LoginButton />
<Footer />
</div>
);
80
};
export default Home;
AppointmentStatus.js
/* global gapi */
import React, { useState, useEffect } from "react";
import Axios from "axios";
import jwt_decode from "jwt-decode";
import Navbar from "../Basic/Navbar";
import "../Dashbaord/dashboard.css";
import Leftside from "../Dashbaord/LeftsidePatient";
const AppointmentStatus = () => {
const [appointments, setAppointments] = useState([]);
const [isLoading, setIsLoading] = useState()
const [filteredAppointments, setFilteredAppointments] = useState()
function getMeetLink(id) {
if(filteredAppointments !== undefined){
const meetCode = filteredAppointments.find((apntmnt) => {
return apntmnt.id === id
})
return meetCode ? meetCode.hangoutLink : "#"
}
return '#'
}
useEffect(() => {
setIsLoading(true)
const fetchAppointments = async () => {
var { data } = await Axios.post(
`${process.env.REACT_APP_SERVER_URL}/patients/upcoming-appointments/`,
{
googleId: localStorage.getItem("googleId"),
}
);
// const response = await window.gapi.client.calendar.events.list({
// 'calendarId': 'primary',
81
// 'timeMin': (new Date()).toISOString(),
// 'showDeleted': false,
// 'singleEvents': true,
// 'maxResults': 100,
// 'orderBy': 'startTime'
// })
// // Filter google calendar events
// const events = response.result.items
// const filteredEvents = events.filter((event) => {
// return data.find((it) => it._id === event.id)
// })
console.log(data)
setAppointments(data);
// console.log(filteredEvents)
// setFilteredAppointments(filteredEvents)
};
fetchAppointments()
setIsLoading(false)
}, []);
return (
<div className="bg-dark" style={{ height: "100vh" }}>
<Navbar />
<div>
<div className="row m-5" style={{ maxWidth: "100%" }}>
<div
className="col-3 col-md-3 p-4 bg-white "
style={{ height: "80vh" }}
>
<Leftside />
</div>
{isLoading && <h1>Loading</h1>}
{!isLoading && <div
className="col-9 col-md-9 p-4"
style={{
border: "15px solid yellow ",
82
height: "80vh",
backgroundColor: "#6c757d",
}}
>
<table className="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Doctor Name</th>
</tr>
</thead>
<tbody>
{appointments.map((Appointment) => (
<tr key={Appointment._id}>
<th scope="row">{Appointment.date}</th>
<th scope="row">{Appointment.slotTime}</th>
<th scope="row">{Appointment.doctorName}</th>
</tr>
))}
</tbody>
</table>
</div> }
</div>
</div>
</div>
);
};
export default AppointmentStatus;
BookingSlots.js
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Navbar from "../Basic/Navbar";
import LeftsidePatient from "../Dashbaord/LeftsidePatient";
import Axios from "axios";
const BookingSlots = (props) => {
// console.log(props.location.state)
const { date, doctor } = props.location.state;
83
// console.log("Date: " + date + " DoctorId: " + doctorId);
const [dateId, setdateId] = useState();
const [Slots, setSlots] = useState([]);
useEffect(() => {
const fetchDate = async (dateToPost) => {
const { data } = await Axios.post(
`${process.env.REACT_APP_SERVER_URL}/doctors/get-slots/`,
{
doctorId: doctor._id,
date: dateToPost
}
);
console.log(data);
setdateId(data._id);
setSlots(data.slots);
};
function getDateString() {
let finalDate = date.getFullYear().toString()
const month = date.getMonth() + 1
const day = date.getDate();
if(month < 10) {
finalDate += ('-0' + month.toString())
}
else {
finalDate += '-' + month.toString()
}
if(day < 10) {
finalDate += ('-0' + day.toString())
}
else {
finalDate += '-' + day.toString()
}
return finalDate
}
const dateToSend = getDateString()
84
fetchDate(dateToSend);
}, []);
return (
<div className="bg-dark" style={{ height: "100vh" }}>
<Navbar />
<div>
<div className="row m-5" style={{ maxWidth: "100%" }}>
<div className="col-3 col-md-3 p-4 bg-white ">
<LeftsidePatient />
</div>
<div
className="col-9 col-md-9 p-4"
style={{
border: "15px solid yellow ",
height: "80vh",
backgroundColor: "#6c757d",
}}
>
<table className="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Slot</th>
<th scope="col">Booking Status</th>
</tr>
</thead>
<tbody>
{Slots.map((slot) => (
<tr key={slot._id}>
<th scope="row">{slot.time}</th>
{slot.isBooked ? (
<td>Booked</td>
) : (
<td>
<Link
to={{
pathname: "/patient/payment",
data: {
dateId:dateId,
doctor:doctor,
slotId:slot._id,
85
},
}}
>
Book Now
</Link>
</td>
)}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
};
export default BookingSlots;
DoctorDashboard.txt
import React from "react";
import Navbar from "../Basic/Navbar";
import Leftside from "../Dashbaord/LeftsideDoctor";
import TodaysSchedule from "../Doctor/TodaysSchedule";
import "../Dashbaord/dashboard.css";
const DoctorDashboard = () => {
return (
<div className="bg-dark" style={{ height: "100vh" }}>
<Navbar />
<div>
<div className="row m-5" style={{ maxWidth: "100%" }}>
<div
className="col-3 col-md-3 p-4 bg-white "
style={{ height: "80vh" }}
>
<Leftside />
</div>
<div
className="col-9 col-md-9 p-4"
style={{
86
border: "15px solid yellow ",
height: "80vh",
backgroundColor: "#6c757d",
}}
>
<TodaysSchedule />
</div>
</div>
</div>
</div>
);
};
export default DoctorDashboard;
PaitentDashboard.js
import React, { useContext } from "react";
import Navbar from "../Basic/Navbar";
import Leftside from "../Dashbaord/LeftsidePatient";
import { useState, useEffect } from "react";
import Axios from "axios";
import "../Dashbaord/dashboard.css";
import { AuthContext } from "../Auth/AuthContext";
const PersonalDetails = () => {
const [patient, setPatient] = useState({});
const [loading, setLoading] = useState(true);
const { googleId } = useContext(AuthContext);
useEffect(() => {
setLoading(true);
const getPatientDetails = async () => {
const res = await Axios.get(
`${process.env.REACT_APP_SERVER_URL}/patients/getPatientDetails/${googleId}`
);
if (res.status === 200) {
setPatient(res.data);
window.localStorage.setItem("user", JSON.stringify(res.data));
setLoading(false);
} else {
console.log(res.data.message);
setLoading(false);
87
}
};
getPatientDetails();
}, [googleId]);
return (
<div className="bg-dark" style={{ height: "100vh" }}>
<Navbar />
{loading ? (
<div className="row justify-content-center position-relative">
<div
className="spinner-border align-middle d-flex justify-content-center position-
absolute top-50 start-50 translate-middle"
style={{ width: "10rem", height: "10rem" }}
role="status"
></div>
</div>
) : (
<div>
<div className="row m-5" style={{ maxWidth: "100%" }}>
<div
className="col-3 col-md-3 p-4 bg-white "
style={{ height: "80vh" }}
>
<Leftside />
</div>
<div
className="col-9 col-md-9 p-4"
style={{
border: "15px solid yellow ",
height: "80vh",
backgroundColor: "#6c757d",
}}
>
<div className="row ">
<div className="col-9 col-md-9 p-4">
<div className="card mb-4">
<h4 className="card-header">Personal Details</h4>
<ul className="list-group">
<li className="list-group-item">
<span className="badge badge-success mr-2 p-2">
88
Name:
</span>
{patient.name}
</li>
<li className="list-group-item">
<span className="badge badge-success mr-2 p-2">
Email:
</span>
{patient.email}
</li>
<li className="list-group-item">
<span className="badge badge-success mr-2 p-2">
Phone No:
</span>
{patient.phoneNumber}
</li>
</ul>
</div>
</div>
<div className="col-3 col-md-3 p-4 ">
<img
src={patient.picture}
// className="rounded-circle"
style={{ width: "100%" }}
alt=""
/>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default PersonalDetails;
DoctorLogin.js
import React from 'react';
import Footer from '../Basic/Footer';
import Navbar from '../Basic/Navbar';
89
import LoginForm from '../Doctorlogin/LoginForm';
const DoctorLogin=()=>{
return(
<div >
<div style={{height: "71vh"}}>
<Navbar/>
<LoginForm/>
</div>
<div className="fixed-bottom" style={{width: "100%"}}>
<Footer />
</div>
</div>
)
}
export default DoctorLogin
patients.js
const router = require('express').Router();
const Patient = require('../models/patient.model');
const appointmentImport = require('../models/appointment.model');
const jwt = require('jsonwebtoken');
const stripe =
require("stripe")("sk_test_51IabQNSCj4BydkZ38AsoDragCM19yaMzGyBVng5KUZnCNrxCJuj308HmdAvoRcUE
e2PEdoORMosOaRz1Wl8UX0Gt00FCuSwYpz")
const { v4: uuidv4 } = require('uuid');
const { Appointment } = appointmentImport;
// To get all the patients
router.route('/').get((req, res) => {
Patient.find().then(patients => {
res.status(200).json(patients);
}).catch((err) => {
res.status(400).json(`Error : ${err}`);
})
})
90
// To add a patient
router.route('/add').post((req, res) => {
const googleId = req.body.googleId;
const name = req.body.name;
const picture = req.body.picture;
const newPatient = new Patient({
googleId, name, picture
})
newPatient.save().then(() => {
res.status(200).json('Patient added');
}).catch(err => {
res.status(400).json(`Error : ${err}`);
})
})
// To update a patient's phone number
router.route('/update-phone').put((req, res) => {
const googleId = req.body.googleId;
Patient.findOne({ googleId: googleId }).then(patient => {
if (patient) {
patient.phoneNumber = req.body.phoneNumber;
patient.save().then(() => {
res.status(200).json('Patient\'s phone number updated');
}).catch(err => {
res.status(400).json({ message: `Error : ${err}` });
});
}
})
})
router.route('/google-login').post(async (req, res) => {
try {
const tokenId = req.body.tokenId;
// Decode the jwt
const decoded = jwt.decode(tokenId, process.env.KEY);
91
const googleId = await decoded.sub;
// Check if the user already exists in the database
const patient = await Patient.findOne({ googleId: googleId });
// If the patient is not found
if (patient === null) {
const { email, name, picture } = decoded;
const newPatient = new Patient({
googleId, email, name, picture
})
const savedPromise = await newPatient.save();id
if (savedPromise) {
return res.status(200).json({ phoneNumberExists: false });
}
else {
throw savedPromise;
}
}
// If the phone number is not present in the database
else if (patient.phoneNumber === undefined) {
return res.status(200).json({ phoneNumberExists: false });
}
// Patient's phone number already exists in the database
else {
return res.status(200).json({ phoneNumberExists: true })
}
}
catch (err) {
console.log(err);
return res.status(400).json(err);
}
})
router.route('/getPatientDetails/:googleId').get(async (req, res) => {
try {
const googleId = req.params.googleId;
const patient = await Patient.findOne({ googleId: googleId });
92
if (patient) {
return res.status(200).json(patient);
}
else {
return res.status(201).json({ message: "Patient not found!" });
}
}
catch (err) {
console.log(err);
res.status(400).json({ message: err });
}
})
router.route('/previous-appointments').post(async (req, res) => {
try {
const googleId = req.body.googleId;
const appointments = await Appointment.find({ patientId: googleId });
// Get current dateTime
const date = new Date()
let currDateTime = date.getFullYear().toString()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minutes = date.getMinutes()
const seconds = date.getSeconds()
currDateTime += month < 10 ? ('-0' + month.toString()) : '-' + month.toString()
currDateTime += day < 10 ? ('-0' + day.toString()) : '-' + day.toString()
currDateTime += hour < 10 ? ('T0' + hour.toString()) : 'T' + hour.toString()
currDateTime += minutes < 10 ? (':0' + minutes.toString()) : ':' +
minutes.toString()
currDateTime += seconds < 10 ? (':0' + seconds.toString()) : ':' +
seconds.toString()
const filteredAppointments = appointments.filter((appointment) => {
return Date.parse(currDateTime) >= Date.parse(appointment.date + 'T' +
appointment.slotTime)
})
const sortedAppointments = filteredAppointments.sort((a, b) => {
93
return Date.parse(b.date + 'T' + b.slotTime) - Date.parse(a.date + 'T' +
a.slotTime)
})
res.status(200).json(sortedAppointments);
}
catch (err) {
console.log(err)
res.status(400).json(err)
}
})
router.route('/upcoming-appointments').post(async (req, res) => {
try {
const googleId = req.body.googleId;
const appointments = await Appointment.find({ patientId: googleId });
// Get current dateTime
const date = new Date()
let currDateTime = date.getFullYear().toString()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minutes = date.getMinutes()
const seconds = date.getSeconds()
currDateTime += month < 10 ? ('-0' + month.toString()) : '-' + month.toString()
currDateTime += day < 10 ? ('-0' + day.toString()) : '-' + day.toString()
currDateTime += hour < 10 ? ('T0' + hour.toString()) : 'T' + hour.toString()
currDateTime += minutes < 10 ? (':0' + minutes.toString()) : ':' +
minutes.toString()
currDateTime += seconds < 10 ? (':0' + seconds.toString()) : ':' +
seconds.toString()
const filteredAppointments = appointments.filter((appointment) => {
return Date.parse(currDateTime) <= Date.parse(appointment.date + 'T' +
appointment.slotTime)
})
const sortedAppointments = filteredAppointments.sort((a, b) => {
94
return Date.parse(a.date + 'T' + a.slotTime) - Date.parse(b.date + 'T' +
b.slotTime)
})
res.status(200).json(sortedAppointments);
}
catch (err) {
console.log(err)
res.status(400).json(err)
}
})
router.route("/payment").post(async (req, res) => {
const { finalBalnce, token } = req.body;
// console.log(product);
const idempotencyKey = uuidv4();
return stripe.customers
.create({
email: token.email,
source: token.id
})
.then(customer => {
stripe.charges
.create(
{
amount: finalBalnce * 100,
currency: 'usd',
customer: customer.id,
receipt_email: token.email,
description: `Booked Appointement Successfully`,
shipping: {
name: token.card.name,
address: {
line1: token.card.address_line1,
line2: token.card.address_line2,
city: token.card.address_city,
country: token.card.address_country,
postal_code: token.card.address_zip
}
}
95
},
{
idempotencyKey
}
)
.then(result => res.status(200).json(result))
.catch(err => {
console.log(`Error : ${err}`);
res.status(400).json(err);
});
})
.catch((err) => {
console.log(err);
res.status(400).json(err);
});
})
module.exports = router;
PersonalDetails.js
import React, { useContext, useMemo } from "react";
import Navbar from "../Basic/Navbar";
import Leftside from "../Dashbaord/LeftsideDoctor";
import jwt_decode from "jwt-decode";
import "../Dashbaord/dashboard.css";
import { AuthContext } from "../Auth/AuthContext";
const PersonalDetails = () => {
const { token } = useContext(AuthContext);
const doctor = useMemo(() => jwt_decode(token), [token]);
return (
<div className="bg-dark" style={{ height: "100vh" }}>
<Navbar />
<div>
<div className="row m-5" style={{ maxWidth: "100%" }}>
<div
className="col-3 col-md-3 p-4 bg-white "
style={{ height: "80vh" }}
>
96
<Leftside />
</div>
<div
className="col-9 col-md-9 p-4"
style={{
border: "15px solid yellow ",
height: "80vh",
backgroundColor: "#6c757d",
}}
>
<div className="card mb-4">
<h4 className="card-header">Personal Details</h4>
<ul className="list-group">
<li className="list-group-item">
<span className="badge badge-info mr-2 p-2 text-uppercase ">
Name:
</span>
<span className="text-uppercase">{doctor.name}</span>
</li>
<li className="list-group-item">
<span className="badge badge-info mr-2 p-2 text-uppercase">
Specialization:
</span>
<span className="text-capitalize">
{doctor.specialization}
</span>
</li>
<li className="list-group-item">
<span className="badge badge-info mr-2 p-2 text-uppercase">
Phone No:
</span>
{doctor.phoneNumber}
</li>
<li className="list-group-item">
<span className="badge badge-info mr-2 p-2 text-uppercase">
Fees Per Session:
</span>
{doctor.feesPerSession}
</li>
</ul>
</div>
97
</div>
</div>
</div>
</div>
);
};
export default PersonalDetails;
Search.js
import React, { useState, useEffect, useMemo } from "react";
import Axios from "axios";
import Scrollbar from "react-scrollbars-custom";
// import { ListGroup, ListGroupItem } from "reactstrap";
import {
Row,
Col,
Input,
Button,
InputGroup,
InputGroupAddon,
} from "reactstrap";
import Trie from "./Trie.js";
import specialization from "./specialization";
import { Link } from "react-router-dom";
const Search = () => {
const [text, setText] = useState();
const [suggestions, setSuggestions] = useState([]);
const memoized_trie = useMemo(() => {
const trie = new Trie();
// Insert
for (let i = 0; i < specialization.length; i++) {
trie.insert(specialization[i]);
}
return trie;
}, []);
98
function onTextChanged(e) {
let value = e.target.value;
setText(value);
fetchDoctor();
value = value.toLowerCase();
if (value !== "") setSuggestions(memoized_trie.find(value));
else setSuggestions([]);
}
function suggestionSelected(value) {
setText(value);
setSuggestions([]);
}
function renderSuggestions() {
if (suggestions.length === 0) {
return null;
}
return (
<InputGroup>
<ul className="list-group dropdown-menu pt-0 pb-0">
{suggestions.map((item) => (
<li
className="list-group-item list-group-item-action"
onClick={() => suggestionSelected(item)}
key={item}
>
{item}
</li>
))}
</ul>
</InputGroup>
);
}
const [Doctor, setDoctor] = useState([]);
const fetchDoctor = async () => {
const { data } = await Axios.get(
`${process.env.REACT_APP_SERVER_URL}/doctors/`
);
99
setDoctor(data);
console.log(data);
};
const UpdateDisplay = (text) => {
setDoctor((Doctor) => {
return Doctor.filter(
(doctor) => doctor.specialization.toLowerCase() === text.toLowerCase()
);
});
console.log(Doctor);
};
useEffect(() => {
fetchDoctor();
}, []);
return (
<div>
<Row className="mb-3">
<Col>
<InputGroup>
<Input
value={text}
type="text"
placeholder="Search Your Doctor"
onChange={onTextChanged}
className="mb-1"
/>
<div style={{ height: 10 }} className="">
<InputGroupAddon addonType="append">
<Button
className="h-10 d-inline-block"
color="primary"
onClick={() => UpdateDisplay(text)}
>
Search Doctor
</Button>
</InputGroupAddon>
</div>
</InputGroup>
1 00
{renderSuggestions()}
</Col>
</Row>
{/* <ListGroup> */}
<Scrollbar
noScrollX
style={{ position: "", height: "64vh", width: "144vh" }}
className="col-12 col-md-12"
>
<div className="row">
{Doctor.map((doc) => (
// <ListGroupItem key={doc.id} className="mb-3">
<div className="col-sm-6 mb-2" key={doc._id}>
<div className="card">
<div className="card-body">
<div className="text-info">
<h6>
Doctor Name:
<span className="text-uppercase"> {doc.name}</span>
</h6>
</div>
<div>Specialization : {doc.specialization}</div>
<div>Phone Number : {doc.phoneNumber}</div>
<div className="row mb-0 pb-0">
<div className="col-md-6 ">
FeesPerSession: {doc.feesPerSession}
</div>
<div
className=" col align-self-end col-md-2 offset-md-3 inline"
style={{ textAlign: "center" }}
><Link to={{ pathname: "/patient/selectdate", doctor: { doctor: doc }
}}>
<button className="btn btn-sm btn-primary"
> Book</button> </Link>
</div>
</div>
{/* </ListGroupItem> */}
</div>
1 01
</div>
</div>
))}
</div>
</Scrollbar>
{/* </ListGroup> */}
</div>
);
};
export default Search;
SearchDoctor.js
import React from "react";
import Navbar from "../Basic/Navbar";
import LeftsidePatient from "../Dashbaord/LeftsidePatient";
import Search from "../Doctor/Search";
const SearchDoctor = () => {
return (
<div className="bg-dark" style={{ height: "100vh" }}>
<Navbar />
<div>
<div className="row m-5" style={{ maxWidth: "100%" }}>
<div className="col-3 col-md-3 p-4 bg-white ">
<LeftsidePatient />
</div>
<div
className="col-9 col-md-9 p-4"
style={{
border: "15px solid yellow ",
height: "80vh",
backgroundColor: "#6c757d",
}}
>
<Search />
</div>
</div>
</div>
</div>
);
};
1 02
export default SearchDoctor;
TodaysSchedule.js
import React, { useState, useEffect } from "react";
import Axios from "axios";
import jwt_decode from "jwt-decode";
const TodaysSchedule = () => {
const [appointments, setAppointments] = useState([]);
useEffect(() => {
const fetchAppointments = async () => {
var token = localStorage.getItem("token");
var decoded = jwt_decode(token);
const { data } = await Axios.post(
`${process.env.REACT_APP_SERVER_URL}/doctors/todays-appointments`,
{
doctorId: decoded._id,
}
);
setAppointments(data);
console.log(data);
};
fetchAppointments();
}, []);
return (
<table className="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Patient Name</th>
</tr>
</thead>
<tbody>
{appointments.map((appointment) => (
<tr key={appointment._id}>
<th scope="row">{appointment.date}</th>
1 03
<th scope="row">{appointment.slotTime}</th>
<th scope="row">{appointment.patientName}</th>
</tr>
))}
</tbody>
</table>
);
};
export default TodaysSchedule;
1 04
ДОДАТОК В
ВЕБ-РЕСУРС ДЛЯ ОНЛАЙН-ЗАПИСУ КЛІЄНТІВ У СФЕРІ ПОСЛУГ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 42030-01 34 01
Листів 9
Розробник _____________ Кочуров А.В.
Черкаси – 2024
1 05
В розробленому веб-додатку для онлайн-запису клієнтів у сфері послуг
користувач може відкрити сторінку входу в систему, натиснувши кнопку "Login As A
Patient" (Увійти як пацієнт) (рис. В.1). Після цього потрібно ввести свої облікові дані
для входу у вікні авторизації Google (рис. В.2).
Рисунок В.1 – Головна сторінка з кнопкою входу
Рисунок В.2 – Вхід за допомогою GoogleAuth
Після входу на ресурс користувач потрапляє на сторінку особистих даних. Тут
він має змогу переглядати та редагувати свою інформацію, включаючи ім'я,
електронну пошту та номер телефону (рис. В.3).
1 06
Рисунок В.3 – Персональні дані користувача
Користувач має змогу знайти лікаря, натиснувши кнопку "Search Doctor"
(Пошук лікаря) у меню зліва. Потрібно ввести ім'я або спеціалізацію лікаря в
пошуковий рядок та натиснути кнопку "Search Doctor". Зі списку результатів можна
обрати лікаря та натиснути кнопку "Book" (Забронювати) (рис. В.4).
Рисунок В.4 – Пошук лікаря
Користувач може вибрати дату прийому після вибору лікаря. Потрібно обрати
потрібну дату у календарі та натиснути кнопку "Confirm And Go to Next Step"
(Підтвердити та перейти до наступного кроку) (рис. В.5).
1 07
Рисунок В.5 – Вибір дати прийому
Користувач має змогу вибрати зручний час із запропонованих варіантів після
вибору дати. Для цього потрібно натиснути кнопку "Book Now" (Забронювати зараз)
поруч із вибраним часом. (рис. В.6).
Рисунок В.6 – Вибір часу прийому
Після вибору часу користувач переходить на сторінку оплати. Він має змогу
ввести свої платіжні дані у формі та натиснути кнопку "Pay Now" (Оплатити зараз)
(рис. В.7). Далі користувач може оплатити прийом, заповнивши всі поля (рис. В.8).
1 08
Рисунок В.7 – Сторінка підтвердження запису
Рисунок В.8 – Оплата запису на прийом
Користувач має змогу переглядати статус своїх запланованих прийомів,
натиснувши кнопку "Appointment Status" (Статус прийомів) у меню зліва. На цій
1 09
сторінці він бачить список запланованих прийомів, включаючи дату, час та ім'я лікаря
(рис. В.9).
Рисунок В.9 – Сторінка з інформацією про прийоми
Користувач має змогу переглядати історію своїх прийомів, натиснувши кнопку
"Previous Appointments" (Попередні прийоми) у меню зліва. На цій сторінці він бачить
список усіх минулих прийомів із зазначенням дати, часу, ім'я лікаря та свого відгуку
про прийом (рис. В.10).
Рисунок В.10 – Сторінка з попередніми записами
1 10
Користувач має змогу залишити відгук після завершення прийому. Для цього
потрібно натиснути кнопку "Details" (Деталі) поруч із відповідним прийомом у
списку попередніх прийомів, заповнити форму відгуку та натиснути кнопку "Submit"
(Відправити) (рис. В.11).
Рисунок В.11 – Сторінка для залишення відгуку
Після успішного входу в систему лікар може переглядати свій робочий графік,
переглядати деталі особистого профілю та переглядати попередні прийоми. Головний
екран містить панель навігації з опціями "Today's Schedule", "Personal Details" та
"Previous Appointments". На екрані "Today's Schedule" лікар може переглядати свій
розклад на поточний день. Інтерфейс показує дату, час, ім'я пацієнта та посилання на
1 11
зустріч. Лікар має змогу легко приєднатися до онлайн-зустрічі, натиснувши на
посилання "Join Meet" (рис. В.12).
Рисунок В.12 – Головна сторінка лікаря
На сторінці "Personal Details" лікар може переглядати та оновлювати свою
особисту інформацію, включаючи ім'я, спеціалізацію, номер телефону та вартість
сеансу. Це допомагає лікарю тримати свої дані актуальними (рис. В.13).
Рисунок В.13 – Персональна інформація лікаря
Сторінка "Previous Appointments" дозволяє лікарю переглядати історію
попередніх прийомів (рис. В.14). Тут відображається дата, час, ім'я пацієнта та
1 12
зворотний зв'язок. Лікар може переглядати деталі кожного прийому для аналізу та
покращення своєї роботи (рис. В.15).
Рисунок В.14 – Попередні прийоми лікаря
Рисунок В.15 – Сторінка перегляду відгуку
1 13
ДОДАТОК Г
ВЕБ-РЕСУРС ДЛЯ ОНЛАЙН-ЗАПИСУ КЛІЄНТІВ У СФЕРІ ПОСЛУГ
Структура бази даних
482. ЧДТУ. 42030-01 90 01
Листів 3
Розробник _____________ Кочуров А.В.
Черкаси – 2024
1 14
Рисунок Г.1 – Структура бази даних
Рисунок Г.2 – Таблиця лікарів в базі даних
Рисунок Г.3 – Таблиця пацієнтів в базі даних
1 15
Рисунок Г.3 – Таблиця записів на прийом в базі даних