Міністерство освіти і науки України

Харківський національний університет радіоелектроніки

Факультет Комп’ютерних наук

(повна назва)

Кафедра Штучного інтелекту

(повна назва)

КВАЛІФІКАЦІЙНА РОБОТА
Пояснювальна записка

рівень вищої освіти перший (бакалаврський)

Веб-сервіс менторської допомоги школярам

(тема)

Виконав:
студент 4 курсу, групи ІТКН-18-7
Котелевець К.А.
(прізвище, ініціали)

Спеціальність 122 Комп’ютерні науки

(код і повна назва спеціальності)

Освітня програма Комп’ютерні науки

(повна назва освітньої програми)

Керівник ас.Чала О.С.

(посада, прізвище, ініціали)

Допускається до захисту

Зав. кафедри В.О. Філатов

(підпис) (прізвище, ініціали)

2022 р.
 Харківський національний університет радіоелектроніки

Факультет Комп’ютерних наук

(повна назва)
Кафедра Штучного інтелекту
(повна назва)
Рівень вищої освіти перший (бакалаврський)
Спеціальність 122 Комп’ютерні науки
(код і повна назва)
Освітня програма Комп’ютерні науки
(повна назва)

ЗАТВЕРДЖУЮ:
Зав. кафедри
(підпис)
« » 20 р.

ЗАВДАННЯ
НА КВАЛІФІКАЦІЙНУ РОБОТУ

студентові Котелевцю Кирилу Андрійовичу

(прізвище, ім’я, по батькові)

1. Тема роботи Веб-сервіс менторської допомоги школярам

затверджена наказом університету від 20 р. №

2. Термін подання студентом роботи до екзаменаційної комісії 20 р.
3. Вихідні дані до роботи Матеріали про методи машинного навчання, література про
контейнеризацію додатків, матеріали про створення, розгортання веб-додатків, література
про UI/UX розробку, документація Django

4. Перелік питань, що потрібно опрацювати в роботі Аналіз предметної області та

постановка задачі, вибір технологій розробки та обґрунтування вибору, аналіз інструментарію
для розробки Frontend та Backend-частини, розробка бази даних, аналіз архітектури проекту,
результати програмної реалізації компонентів веб-додатку
5. Перелік графічного матеріалу із зазначенням креслеників, схем, плакатів, комп’ютерних
ілюстрацій (п.5 включається до завдання за рішенням випускової кафедри) Рисунок 3.1 –
Схема відношень у 3НФ, Рисунок 3.2 – Схема роботи шаблону MVT, Рисунок 3.3 – Схема
структури проекту, Рисунок 3.4 – Приклад колізій у розкладі дзвінків, Рисунок 3.5 – Код
наївної реалізації, Рисунок 3.6 – Двійкове дерево розкладу, Рисунок 3.7 – Візуалізація
вставки в дерево, Рисунок 3.8 – Код перевірки валідності та наявності конфлікту, Рисунок 3.9
– 3.10 – Візуалізація злиття піддерев, Рисунок 3.11 – Схема системи категорій та їх тегів,
Рисунок 3.12 – Візуалізація кодування навичок у вектор, Рисунок 4.1 – 4.3 – Візуальний
інтерфейс головної сторінки, Рисунок 4.4 – Сторінка з формою входу в систему, Рисунок 4.5
– 4.6 – Сторінки з питаннями школярів, Рисунок 4.7 – 4.11 – Відображення коментарів,
Рисунок 4.12 – Сторінка зі списком менторів, Рисунок 4.13 – 4.18 – Відображення розкладу

6. Консультанти розділів роботи (п.6 включається до завдання за наявності консультантів

згідно з наказом, зазначеним у п.1 )

Консультант Позначка консультанта

Найменування
(посада, прізвище, ім’я, по про виконання розділу
розділу батькові) підпис дата

КАЛЕНДАРНИЙ ПЛАН

Терміни
№ Назва eтапів роботи виконання етапів Примітка
роботи
1 Отримання завдання 02.05.2022 Виконано
2 Постановка задачі та узгодження з керівником 03.05.2022 – 05.05.2022 Виконано
3 Перед проектне обстеження 06.05.2022 – 08.05.2022 Виконано
4 Опис та аналіз предметної області 09.05.2022 – 12.05.2022 Виконано
5 Постановка задачі 13.05.2022 Виконано
6 Вибір архітектури для програмної реалізації 14.05.2022 – 16.05.2022 Виконано
7 Вибір технологій для програмної реалізації 17.05.2022 – 18.05.2022 Виконано
8 Вибір інструментарію для програмної реалізації 19.05.2022 Виконано
9 Реалізація програмної частини веб-додатку 11.05.2022 – 30.05.2022 Виконано
10 Оформлення пояснювальної записки 15.05.2022 – 04.06.2022 Виконано
11 Попередній захист 05.05.2022 – 15.06.2022 Виконано
12 Захист роботи 16.06.2022 Виконано

Дата видачі завдання 02 травня 20 22 р.

Студент ___________________________________
(підпис)
Kepiвник роботи __________________________ ас.Чала О.С.
(підпис) (посада, прізвище, ініціали)
1
2
3
 4

РЕФЕРАТ

Пояснювальна записка: 88 c., 43 рис., 3 табл., 2 дод., 21 джерело.

ВЕБ-ДОДАТОК, ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД,

ВІДЕОДЗВІНОК, МЕНТОР, РОЗКЛАД, ШКОЛЯР, DJANGO, MVT,
POSTGRESQL, PYTHON, SQL.

Об’єктом дослідження є проектування та розробка прототипу системи

менторської допомоги школярам через їх взаємодію зі студентами-
наставниками, що можуть підказати вирішення нагальних питань щодо
вступу абітурієнта до вишу, підготовки до складання вступних іспитів,
закриття прогалин у розумінні та практичному використанні тем зі шкільної
освітньої програми.
Предмет дослідження – прототип програми «Веб-сервіс менторської
допомоги школярам».
Мета роботи – аналіз існуючої проблеми частих помилок учня при
вступі до закладу вищої освіти та унеможливлення отримання достатнього
рівня знань школярам із віддалених куточків країни чи з малозабезпечених
сімей.
Методи дослідження − аналіз літератури, інтернет джерел, технічної
документації та інструментарію розробки веб-сайтів.
У ході виконання даної роботи був розроблений веб-додаток –
прототип системи «Веб-сервіс менторської допомоги школярам».
На основі досліджень та підходів був зроблений аналіз для
використання обраних технологій, та отримана можливість використання
системи в реальному житті.
 5

ABSTRACT

The explanatory note: 88 p., 43 fig., 3 tabl., 2 ann., 21 sources.

ВЕБ-ДОДАТОК, ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД,

ВІДЕОДЗВІНОК, МЕНТОР, РОЗКЛАД, ШКОЛЯР, DJANGO, MVT,
POSTGRESQL, PYTHON, SQL.

The object of research is the design and development of a prototype of a

system of mentoring through their interaction with students-mentors, who can
suggest solutions to urgent issues of admission to university, preparation for
entrance exams, closing gaps in understanding and practical use of school topics.
programs.
The subject of the research is a prototype of the program «Web service of
mentoring students».
The aim of the work is to analyze the existing problem of frequent mistakes
of a student when entering a higher education institution and to prevent students
from gaining a sufficient level of knowledge from remote parts of the country or
from low-income families.
Research methods – analysis of literature, Internet sources, technical
documentation and tools for website development.
In the course of this work, a web application was developed - a prototype
of the system «Web service of mentoring students».
Based on research and approaches, an analysis was made for the use of
these technologies, and the possibility of using the system in real life was
obtained.
 6

ЗМІСТ

Перелік умовних позначень, символів, одиниць, скорочень і термінів ........ 8

Вступ ..................................................................................................................... 9
1 Аналіз предметної області та постановка задачі ........................................ 11
1.1 Історія розвитку технологій та їх роль у суспільстві .......................... 11
1.2 Перехід світу на ремоут, проблеми та переваги .................................. 14
1.3 Проблема вибору вишу школярами ...................................................... 17
1.4 Актуальність системи ............................................................................. 20
1.5 Існуючі аналоги системи ........................................................................ 24
1.6 Новизна та можливість використання .................................................. 25
1.7 Мета та постановка задачі ...................................................................... 26
2 Вибір технологій реалізації ........................................................................... 27
2.1 Вибір виду майбутньої системи ............................................................ 28
2.2 Вибір мови програмування .................................................................... 29
2.3 Бібліотеки та віртуальне оточення ........................................................ 31
2.4 Вибір та порівняння фреймворків для back-end .................................. 32
2.5 Технології для front-end розробки ......................................................... 36
2.6 Bootstrap ................................................................................................... 39
2.7 HTML шаблонізатор Jinja2..................................................................... 40
2.8 Вибір бази даних ..................................................................................... 41
2.9 Docker ....................................................................................................... 42
2.10 IDE для розробки................................................................................... 43
3 Проектування системи та програмна реалізація ......................................... 45
3.1 Проектування бази даних ....................................................................... 45
3.2 Архітектура проекту ............................................................................... 51
3.3 Система керування розкладом ............................................................... 57
3.4 Система рекомендацій на основі тегів .................................................. 64
4 Візуальний інтерфейс .................................................................................... 68
Висновки ............................................................................................................ 80
 7

Перелік джерел посилання ............................................................................... 82

Додаток А Інтерфейс програми ....................................................................... 84
Додаток Б Відомість кваліфікаційної роботи ................................................. 88
 8

ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, ОДИНИЦЬ,

СКОРОЧЕНЬ І ТЕРМІНІВ

НФ – нормальна форма;
СУБД – система управління базами даних;
API – Application Programming Interface – програмний інтерфейс
додатку;
CLI – Command Line Interface – інтерфейс командного рядка;
CSS – Cascading Style Sheets – каскадна таблиця стилів;
GUI – Graphical User Interface – графічний інтерфейс користувача;
HTML – Hypertext Markup Language – мова гіпертекстової розмітки;
HTTP – Hypertext Transfer Protocol – протокол передачі гіпертексту;
IDE – Integrated development environment – єдине середовище
розробки;
MVT – Model-View-Template – модель-представлення-шаблон;
ORM – Object-Relational Mapping – об’єктно-реляційне відображення;
REST – Representational State Transfer – передача репрезентативного
стану;
SQL – Structured Query Language – мова структурованих запитів;
URL – Uniform Resource Identifier – уніфікований ідентифікатор
ресурсу;
WSGI – Web Server Gateway Interface – стандарт взаємодії між
програмою Python, що виконується на стороні сервера, і самим веб-
сервером.
 9

ВСТУП

Інновації, що принесла зі своїм приходом інформаційна ера, стали

сьогодні звичним явищем для кожної людини. Наукові досягнення у сфері
інформаційних технологій стали невід’ємною частиною тих речей, що
кожного дня використовую майже кожна людина, – мобільний телефон,
комп’ютер, розумний годинник тощо.
З урахуванням пандемії та подій останніх місяців попит на послуги у
сфері інформатизації дуже виріс, оскільки майже кожен зараз використовує
інформаційні технології для навчання чи роботи. У зв’язку з різким
переходом до дистанційної форми навчання часто прослідковується
недостатня або повністю відсутня підготовка закладів освіти до такого
переходу, яка проявляється у вигляді відсутності сайтів для навчання з дому,
необізнаності викладачів щодо користування сучасними технологіями, що
потрібні для забезпечення проведення повноцінного освітнього процесу без
втрати мотивації та самостійності учнів під час навчання, проведення
атестаційного контролю тощо.
Особливо сильно від недостатнього рівня якості вимушеного
дистанційного навчання постраждали учні шкіл. Саме тому гострою стала
потреба надання допомоги школярам у вивченні предметів освітньої
програми, підготовці до вступних іспитів та якісному профорієнтуванні.
Не менш важливо зауважити те, що правильність вибору абітурієнтом
своєї майбутньої професії досить сильно впливає на його подальше життя
та є чи не найважливішим вибором. Цей вибір визначає потенційний
кар’єрний шлях та коло спілкування. Досить важко об’єктивно підійти до
прийняття цього рішення, тому, безумовно, школяру необхідна допомога в
цьому. Школярі мають багато проблем та роблять чисельні помилки,
подаючи документи, вибираючи університет, зважаючи на думки друзів чи
нарікання батьків, отримуючи невірну профорієнтацію від вчителів тощо.
 10

Тому існування наставника для вирішення даних питань може стати

порятунком для школяра.
Об’єктом дослідження даної кваліфікаційної роботи є проектування
та створення «Веб-сервісу менторської допомоги школярам» –
функціонального прототипу системи для взаємодії між студентом-ментором
та школярем з основною ідеєю допомогти в навчанні та визначитись із
вишем і підготуватися до вступу.
Мета даної роботи – створення функціональної платформи для
надання менторської допомоги школярам та абітурієнтам, яка буде надавати
зручну систему формування та керування розкладом відеодзвінків без
колізій та підтримувати інтеграцію з платформою відеоконференцій за
допомогою API. Також система має допомагати з пошуком найбільш
відповідного ментора та університету школяру й навпаки – для студента-
ментора найбільш відповідного школяра чи питання.
 11

1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ

1.1 Історія розвитку технологій та їх роль у суспільстві

У сучасному світі людина звикла до новітніх благ, інновацій та

практичних наукових досягнень, які наразі присутні в повсякденному житті
кожного. Часом неможливо уявити сучасне життя без таких звичних речей,
як комп'ютер, мобільний телефон чи планшет.
Так, звісно, відбувається й зі сферою інформаційних технологій, про
наявність, стрімкий розвиток та розвинутість яких ще п’ятдесят-сімдесят
років тому не могли уявити й у найсміливіших думках навіть письменники-
фантасти. У вересні 1865-го року побачив світ науковий роман Жуля Верна
«З гармати на місяць», а вже через майже сто років людина зробила свій
перший в історії крок на поверхні місяця. Більшість таких наукових
фантазій людей 19-го – початку 20-го століття стали повсякденною
реальністю. Завдяки неймовірному прогресу інформаційних технологій
кожен має можливість за секунди зв’язатися з будь-якою людиною на
планеті, дізнатися новини з будь-якого куточка землі за лічені секунди,
відстежувати та прогнозувати пожежі, цунамі, землетруси та урагани прямо
з навколоземної орбіти та робити ще багато дивовижних речей лише за
допомогою кількох натискань на гаджеті.
Сучасні інформаційні технології це в першу чергу техніка у вигляді
різноманітних пристроїв, завдяки яким життя багатьох людей стало
набагато простіше, а головне – легше.
Найбільш важливим результатом стрімкої інформатизації вважається
глобальна мережа Інтернет, популярність якої просто шалена. Багато людей
вважають, що Інтернет шкідливий за рахунок залежності людей від нього,
але все ж таки це неймовірний винахід, що має набагато більше реальних та
потенційних переваг, ніж недоліків. Потенціал та невичерпні можливості
Інтернету важко переоцінити. Таким чином, ще минулі покоління років 30
 12

тому витрачали купу часу на дорогу до бібліотеки, пошук необхідних книг

та вичитування потрібної інформації, а сьогодні достатньо ввімкнути
комп’ютер, що має доступ до Інтернету, та ввести в пошуковому рядку
браузера необхідний запит.
Тобто саме доступність та швидкість передачі інформації Інтернетом
є найбільшою перевагою глобальної мережі. Завдяки цій перевазі є
можливим майже миттєвий доступ до тисяч інформаційних ресурсів,
збирання та транспортування величезних обсягів даних для навчання,
наприклад, нейронних мереж, або прогнозування змін погоди в реальному
часі.
Мережа Інтернет надає доступ до величезної кількості різноманітних
інформаційних ресурсів та сервісів. Як правило, інформація, що надають
такі ресурси, представляє собою текстові дані, трохи рідше – фото, відео та
аудіо. Надається ця інформація у вигляді веб-сайтів.
Власне, веб-сайт – це сукупність веб-сторінок, що оформлені в одному
стилі та мають єдину концепцію. Усі сторінки сайту мають унікальні адреси,
проте ця сукупність даних пов’язана одним доменним ім’ям. Тобто з точки
зору користувача веб-сайт виглядає, як цілісна система з можливістю
навігації між сторінками в межах цієї системи.
Перший у світі сайт був створений англійцем Тімом Бернсом-Лі у
1990 році та мав назву info.cern.ch. На цьому ресурсі британський учений
розмістив дані про новітню на той час технологію передачі інформації –
World Wide Web, про яку частіше всі говорять, користуючись абревіатурою
WWW. Саме ці три слова українською й означають відому нам усім
«всесвітню павутину».
Створена Тімом система складалась із сукупності технологічних
засобів та стандартів, що задавали подальші принципи розвитку та роботи
сайтів, браузерів та серверів:
– HTTP – протокол передачі гіпертекстових даних, що дозволив
обмінюватися даними за допомогою мережі Інтернет;
 13

– HTML – мова гіпертекстової розмітки даних, за допомогою якої

інформація відображалась користувачу в зручному для сприйняття вигляді;
– URI – уніфікований ідентифікатор ресурсу у вигляді послідовності
символів, що дозволяла знаходити необхідний фізичний чи абстрактний
ресурс.
Саме інформація про ці новітні технології була розміщена на
створеному Тімом сайті. Після появи деякої кількості інших сайтів учений
розмітив посилання на них на своєму ресурсі, таким чином, перший сайт
став також і першим каталогом [1].
У квітні 1992 року відбувся ще один важливий крок у розвитку веб-
сайтів – презентація браузера Erwise. Він ознаменував кардинальні зміни у
способі відображення контенту користувачеві. Це був перший браузер, що
дозволяв переглядати веб-сайти в графічному режимі. Тобто всі HTML-теги
були приховані, й сайти почали виглядати набагато зручніше та охайніше.
Проте Erwise не отримав високої популярності, та вже в лютому 1993
року з’явився браузер Mosaic, що був гідно оцінений аудиторією та
продовжував розвиватися протягом багатьох років. Саме на основі коду
Mosaic створений Internet Explorer.
Справжній розквіт Інтернет-браузерів почався в середині 90-х років,
саме тоді були створені відомі та популярні сьогодні браузери, такі як Opera.
З 1991 року була знята заборона щодо використання Інтернету в
комерційних цілях, яка була введена з ініціативи Національного наукового
фонду США. Саме ця історична подія дозволила Інтернету та веб-сайтам
процвітати.
Зняття заборони дозволило американським веб-сайтам заробляти.
Таким чином, з вересня 1995 року була запущена всесвітньо відома
торгівельна платформа Ebay. Саме з цього часу фінансові транзакції через
веб-сайти стали повсякденною нормою.
Кількість постачальників різноманітних послуг, що використовують
веб-сайти для залучення нових клієнтів та надання можливості робити
 14

покупки онлайн, зростала кожного дня в геометричній прогресії. Таку ж

тенденцію можна бачити й сьогодні: багато фізичних магазинів повністю
або частково переходять в Інтернет.
У 1996 році відбулося дві надзвичайно важливі події в історії
Інтернету – була створена мова CSS та випущений телефон Nokia 9000.
Мова CSS – каскадні таблиці стилів – дозволила відображати веб-
сторінки в браузері. Саме завдяки ній структура веб-сайтів стала більш
відділеною від дизайну. Простіше кажучи, сталася революція в зовнішньому
вигляді веб-сайтів.
Nokia 9000 став першим телефоном, що міг підключатися до
Інтернету. Це означало просту, але дуже важливу річ – на його екрані можна
було переглядати контент будь-яких веб-сторінок.
У 1997 та 1998 роках дві нові технології знову стали причиною
революції у відображенні контенту веб-сторінок та розвитку Інтернету в
цілому. Це були мови програмування PHP та Java. Перша дозволяла
створювати ще більш візуально привабливі сайти, а друга дозволила
розроблювати перші додатки для запуску в браузері.
Саме після всіх цих важливих подій Інтернет та веб-сайти набули
приблизно того вигляду, у якому ми можемо переглядати їх зараз на
різноманітних пристроях.
На сьогоднішній день існує вже приблизно два мільярди веб-сайтів та
сервісів надзвичайно різноманітної направленості, та це число збільшується
з кожним днем.

1.2 Перехід світу на ремоут, проблеми та переваги

Завдяки надзвичайно стрімкому розвитку Інтернету та новітнім веб-

технологіям людство все більше переходить на дистанційні форми в
більшості сфер повсякденного життя. Зараз важко знайти магазин, який не
має свого власного сайту з можливістю купувати онлайн, або більш-менш
 15

великий заклад харчування без можливості онлайн-замовлення доставки

додому.
Останнім часом світ та особливо Україна зіштовхнулися з гострою
необхідністю, якщо не повністю перейти, то хоча б тимчасовою
використовувати дистанційні форми навчання та роботи.
Кілька років тому на дистанційний формат була переведена
абсолютна більшість навчальних та навчально-виховних закладів. Проте це
стало лише форсованим продовженням процесу переходу навчання на
дистанційну форму. Цей процес почався через бурхливий розвиток
інформаційних технологій, та вже в 2005 році кількість учнів, що навчалась
використовуючи технології e-learning, зрівнялася за кількістю з учнями, що
навчаються за традиційною формою. Згідно з прогнозами до 2025 року
кількість людей, що навчаються дистанційно, досягне 650 мільйонів та
перевищить більше ніж удвічі кількість людей, що продовжують здобувати
знання використовуючи традиційну форму (рисунок 1.1) [2].

Рисунок 1.1 – Графік розподілу учнів за формою навчання

 16

Тобто найбільш сильно після приходу пандемії змінився формат

навчання школярів та студентів. Часткове під час пандемії COVID-19 та
повне з початком війни дистанційне навчання принесло багато позитивних
змін.
Так суттєво зменшилась кількість часу, що необхідно витрачати,
наприклад, на дорогу до університету на назад, графік став більш зручним,
та з’явилось більше вільного часу.
Навчальні матеріали стали більш доступними – не менш важлива
позитивна зміна. Таким чином на сайтах дистанційної освіти знаходяться
всі необхідні лекційні та методичні матеріали, а також записи лекцій чи
уроків, які можна переглянути в зручний для учня час та необхідну кількість
разів.
Дистанційна форма навчання дала можливість навчатись із будь-якого
куточка країни з більш-менш стабільним Інтернетом, тобто студенти з
провінціальних містечок до дистанційної форми навчались безпосередньо в
місті, де знаходиться вищий навчальний заклад, до якого вони вступили, при
цьому проживаючи в гуртожитках. Тепер такі студенти можуть навчатися
онлайн, не залишаючи при цьому рідне місто та сім’ю.
Попри відчутні позитивні аспекти впровадження дистанційної форми
навчання існують і не менш відчутні недоліки таких нововведень. Це
обумовлено тим, що, на жаль, необхідність переходу на дистанційну освіту
з’явилась досить різко.
Недостатня або повністю відсутня готовність навчальних закладів до
часткового чи повного переходу на дистанційне навчання – один з недоліків
переходу на таку форму. До цього відноситься й відсутність необхідних
сайтів, і слабка обізнаність викладачів щодо користування сучасними
інформаційними технологіями з метою викладання матеріалу та проведення
атестацій.
Необхідність самодисципліни та достатнього рівня мотивації учнів –
проблема, що стала актуальною після поширення дистанційного навчання.
 17

Вона виникає, через те що більшість учнів звикли до тиску дедлайнами та

викладачами під час традиційного навчання, і при переході на дистанційну
форму такі учні втратили звичну мотивацію. Найбільше це стосується
школярів, що не мають достатнього рівня самодисципліни, щоб сидіти
частину дня вдома перед комп’ютером, при цьому слухаючи вчителя та не
відволікаючись.
Не менш важливим недоліком стала відсутність живого спілкування з
колегами, однокласниками чи одногрупниками та, як наслідок, відсутність
соціалізації. Особливо гостро відчувається це для школярів молодшого віку,
що позбавлені можливості набуття соціальних навичок протягом живого
спілкування та знаходження в колективі.
Тим не менш, не зважаючи на відчутні проблеми, з якими
зіштовхнулись як навчальні заклади, так і їх учні при переході на
дистанційну форму навчання, такий підхід має величезний потенціал та
продовжує розвиватись, поступово вирішуючи всі перелічені проблеми.
Таким чином, зростає покриття та швидкість Інтернету навіть у найбільш
віддалених регіонах країни, гаджети стають дешевими та доступними для
кожного. Усе це невпинно збільшує популярність отримання дистанційної
освіти, але головна причина – це те, що така форма навчання набагато
зручніша та підходить майже кожному. Тому на даний момент можна
впевнено говорити що форма навчання майбутнього – дистанційна.

1.3 Проблема вибору вишу школярами

Згідно з міжнародним правом, кожна людина має безсуперечне право

на здобуття гідної освіти. Як правило, цю освіту починають здобувати в
школі, яку за дитину вибирають батьки. Уже в останніх класах та після
закінчення школи перед майбутнім абітурієнтом постає, мабуть, один з
найбільш відповідальних виборів у житті – вибір закладу вищої освіти для
вступу.
 18

Саме вибір університету найбільш сильно впливає на подальше життя

кожного учорашнього школяра. Цей вибір визначає коло спілкування,
майбутніх колег та друзів, а головне – майбутню професію. Насправді
досить важко об’єктивно підійти до вибору найбільш відповідного вищого
навчального закладу та майбутньої професії, опираючись на свої знання,
бажання та амбіції. Тому при виборі вишу школярі мають багато проблем та
роблять чисельні помилки.
Помилкова профорієнтація – результат халатного ставлення
викладачів та керівників шкіл до якісної оцінки знань та талантів учнів, така
проблема може стати вирішальною для неправильного вибору школярем
місця подальшого навчання.
Не менш частою проблемою стає вибір стратегії рухатися стопами
батьків, так, якщо школяр буде слідувати завітам батьків, вибір швидше за
все буде нав’язаним, та майбутнє навчання й надалі робота не принесуть
задоволення.
Не менш частим є вибір шляху мінімального опору – школяр обирає
університет, де вчитися простіше. Потрібно пам’ятати, що будь-який успіх
це 1% таланту та 99% важкої праці, якої не потрібно боятись чи уникати.
Вибір професії, що більше оплачується, – стратегія, якою керується
значна кількість школярів. Абітурієнти часто вибирають більш прибуткові
професії, нехтуючи власними талантами та інтересами, нерідко при цьому
слухаючи слова батьків про великі статки.
Частою є практика вибору університету за компанію з другом чи
подругою. Частіше за все призводить до того, що один з товаришів вчиться
із задоволенням, а інший усе більше розчаровується в обраній професії.
Неправильний вибір університету для вступу призводить до того, що
потенційний студент з часом втрачає будь-який інтерес до навчання та
починає усвідомлювати, що обрана професія недостатньо підходить для
нього. Найкращим варіантом у цей момент є кардинальна зміна навчального
закладу, проте на таке наважуються далеко не всі. Якщо ж студент не
 19

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

роки навчання та неможливість працювати за обраної спеціальністю. Але
найбільш сумна ситуація виникає саме тоді, коли людина все ж таки йде
працювати за спеціальністю, а робота зовсім не приносить задоволення.
З вибором майбутнього навчального закладу дуже добре допомагають
дні відкритих дверей та інші різноманітні заходи, що проводяться в
університетах. Наприклад, у Харкові кожного травня та вересня
відбувається так звана «Ніч науки». Під час цього заходу між усіма
університетами міста курсують спеціальні автобуси, за допомогою яких
можна відвідати значну кількість закладів вищої освіти, що цікавлять
більшість школярів. Під час цієї події університети проводять масштабні дні
відкритих дверей, де розповідають школярам про перспективи подальшого
навчання та специфіку кафедр і спеціальностей, показують розробки
студентів та проводять невеличкі майстер-класи.
Дуже корисною можливістю під час будь-якого дня відкритих дверей
є живе спілкування зі студентами цього навчального закладу. Це
обумовлене тим, що саме спілкування з людьми, які навчаються в даний
момент, може доповнити розуміння абітурієнтом картини майбутнього
навчання в обраному закладі для того, щоб визначитися, чи підходить
навчальна програма та спеціальність школяру.
Мало для кого може виявитись новиною факт того, що якість освіти в
невеличких населених пунктах відчутно нижче, ніж у великих містах чи,
тим паче, мегаполісах. Дуже часто це пов’язано з нестачею молодих
учителів та дещо застарілою формою викладання матеріалу. Через це для
школярів з таких містечок дуже часто залишаються незрозумілими деякі
теми з навчальних предметів.
На жаль, не всі родини з дітьми мають достатній дохід для
користування послугами репетитора чи необхідну кількість часу для того,
щоб допомогти дитині із засвоєнням проблемних тем шкільної програми.
Також частіше за все дитині не потрібні довгі заняття з репетиторами, а
 20

потрібно лише трохи детальніше та більш простими словами пояснити

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

1.4 Актуальність системи

З переходом на дистанційне навчання загострились проблеми, що

були розглянуті в попередніх розділах.
Таким чином, для учнів з провінційних частин країни, для яких
викладання в місцевих навчальних закладах не завжди було найкращим, із
заміною традиційного викладання на дистанційне ситуація тільки
погіршилась. У даному випадку заважає технічний аспект, а саме те, що
викладачам у таких закладах бракує практичних знань та навичок роботи з
технікою для проведення відеоконференцій, у наслідок чого учні ще гірше
сприймають матеріал, та прогалин у знаннях стає все більше. Особливо
дуже негативно це впливає на учнів старших класів, яких невдовзі чекає
вступ до вищих навчальних закладів. Такі учні через недостатній рівень
якості вимушеного дистанційного навчання та відсутність фінансової
можливості користування послугами репетиторів мають значно менше
шансів на вступ до закладу вищої освіти на спеціальність, що подобається
найбільше.
Більшість таких прогалин у знаннях школярів старших класів можна
легко закрити одразу після їх появи. Для цього школярі можуть одразу
 21

шукати та використовувати різноманітні онлайн-ресурси, такі як статі,

літературу, невеличкі онлайн-курси чи майстер-класи. При цьому виникає
проблема того, що деяким учням досить важко знайти зручний та
зрозумілий для себе матеріал. При цьому підході існує проблема
недостатнього рівня мотивації школяра для монотонного навчання поза
шкільною програмою, тим самим статі та онлайн-курси виявляються для
таких учнів надзвичайно нудними. Через це такі інформаційні джерела не
приносять достатньої користі або частіше за все залишаються
недочитаними.
Існує й більш діючий підхід до закриття прогалин в знаннях школярів
старших класів – користування менторською допомогою. Для більшості
учнів, що мають проблеми з певними дисциплінами, основною причиною є
недостатня кваліфікація педагогів або застарілий чи непідходящий спосіб
викладання навчального матеріалу. Через те що у віддалених регіонах
країни бракує молодих викладачів та сучасної техніки для викладання
матеріалу, вчителю важко знайти спільну мову та зацікавити учнів своїм
предметом. Тобто для більшості школярів, які мають прогалини в знаннях,
достатньо незабаром після появи таких «білих плям» просто знайти
необхідний підхід та пояснити складні теми більш простою мовою.
Використання менторської допомоги для цього займе не більше, ніж кілька
десятків хвилин або годину відеодзвінку. У якості менторів для школярів
старших класів краще підходять студенти, тому що теж нещодавно
навчались у школах та пам’ятають необхідний для роз’яснення школяру
матеріал. Оскільки різниця у віці між таким ментором та учнем буде
мінімальною, то останній отримає індивідуальний підхід зі зрозумілими
поясненнями від людини, з якою йому простіше знайти спільну мову та
інтереси.
Також загострилась проблема з вибором учнями старших класів
закладу для отримання вищої освіти. Це обумовлено в першу чергу тим, що
на момент нещодавнього вимушеного переходу до дистанційної форми
 22

навчання більшість університетів не мали необхідних сервісів та технічної

оснащення для повного переводу всіх заходів та процесів в онлайн формат.
Саме через це дуже сильно постраждали заходи, що допомагали
більшості абітурієнтів із вибором майбутнього університету. Основними
такими заходами були дні відкритих дверей, що давали абітурієнтам
можливість відвідати обраний навчальний заклад, відчути атмосферу та
специфіку майбутнього навчання. Такі заходи давали живе спілкування з
представниками університету, до яких відносяться як викладачі, так і
студенти. Саме живе спілкування зі студентами факультетів та кафедр
закладу формувало об’єктивне враження про майбутнє навчання, його
перспективи та особливості. Студенти розповідали про свої інтереси та
навички, причини вступу до обраного університету та знання, що необхідні
як для вступу, так і для подальшого навчання.
Зараз дні відкритих дверей перейшли в онлайн-формат та проводяться
в основному у вигляді лекцій та презентацій. Наприклад, деякі університети
проводять такі заходи, користуючись відомою платформою відеохостингу
YouTube. Проходить це у вигляді трансляції, під час якої представники
університету розповідають про навчальні програми, спеціальності, кафедри
та інше. При цьому контакт з аудиторією мінімальний – зазвичай, у вигляді
періодичних відповідей на питання, що абітурієнти чи їх батьки надсилають
у коментарі.
Тобто при такому форматі проведення заходів, присвячених
майбутній вступній кампанії, втрачається головний аспект – живе
спілкування зі студентами університетів.
Із перелічених вище та особливо загострених після введення
дистанційної освіти проблем витікає необхідність існування можливості
зв’язку між студентами вишів та учнями шкіл з метою допомоги із
закриттям прогалин у необхідних для вступу знаннях, розповіді про
особливості та важливі аспекти вибору університету та спеціальності для
подальшого вступу, а також для допомоги з профорієнтацією.
 23

Таким чином, необхідна платформа, що зможе надати можливість

школяру знайти собі студента-ментора для подальшого спілкування за
допомогою відеоконференцій у форматі онлайн, а студенту – допомогти
майбутнім школярам з їх питаннями та профорієнтацією.
Власне ментор у широкому сенсі – це більш досвідчена ніж підлеглий
людина або старший професіонал, що допомагає в кар’єрі чи навчанні. Як
правило, такий наставник має відчутно більший життєвий досвід та знання
у конкретній сфері. У новій галузі або на початку навчання людині дуже
важко зорієнтуватися наодинці та зрозуміти, у який бік треба рухатись.
Ментор допоможе в такій ситуації краще розуміти мету та шляхи її
досягнення, прогалини у важливих знаннях та способи їх усунення. Також
дуже важливим моментом є те, що ментор може поділитися унікальним
власним досвідом та допоможе запобігти допущених колись ним самим
помилок.
Для школяра, як майбутнього абітурієнта, найкращим ментором є
студент середніх або старших курсів. Саме студент нещодавно вивчав ті
самі дисципліни в школі, де зіштовхувався з приблизно тими ж самими
проблемами та непорозуміннями. Також студент лише кілька років тому був
перед тим самим відповідальним вибором майбутнього університету,
відвідував дні відкритих дверей, спілкувався зі студентами, а потім
вирішував, яка спеціальність підійде краще. Не менш важливо для такого
менторства буде й те, що студент уже провчився кілька років та може
об’єктивно розповісти, чого чекати від навчання, чому майбутнього
студента можуть навчити після вступу, наскільки якісний рівень викладання
та наскільки актуальні знання можна отримати під час навчання. Важливим
також є те, що студент нещодавно склав вступні іспити та пройшов
конкурсний відбір до університету, тим самим він може допомогти з
вивченням необхідних предметів та тем, що потрібні для успішного
складання ЗНО (зовнішнього незалежного оцінювання), для подальшого
вступу до бажаного закладу на бюджетну форму навчання.
 24

На основі всього вище сказаного існує необхідність створення

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

1.5 Існуючі аналоги системи

VolunteerMatch – сайт для регуляції волонтерської діяльності,

створений для допомоги людям, що звернулися до даної платформи в
пошуках рішення свого питання [3].
iMentor, що фігурує з тегами «Діти і молодь», «Суспільство», «Освіта
та грамотність» на сайті, – система наставництва, що дає змогу учням з
обмеженими ресурсами отримувати менторську допомогу для того, щоб
закінчити школу, бути успішним студентом в університеті та йти обраним
шляхом для досягнення високих професійних результатів. iMentor
співпрацює з тими учнями державних шкіл, що мають обмежені
можливості, та гарантує те, що кожен з учнів матиме свого індивідуального
наставника. Мета ресурсу полягає у тому, щоб завдяки наставництву кожен
школяр отримав гідну освіту та реалізував амбіції.
Наставники працюють зі школярами протягом чотирьох років: у
молодших і старших класах середньої школи, а потім протягом двох років
після закінчення середньої школи, щоб переконатися, що вони успішно
освоїлися на своєму шляху після закінчення середньої школи.
Тож кожен, хто вчиться у виші чи закінчив коледж, має все необхідне,
щоб стати ментором для потенційного абітурієнта. Згодом кожен учень
може сам обрати собі наставника по душі. Програма наставництва, що
 25

представлена на даній платформі, забезпечує міцні відносини між

старшокласниками та їхніми менторами з вищою освітою, які допомагають
їм вирішити, чим вони хочуть займатися після закінчення школи за
допомогою навчального плану та програми.
Спілкування сторін відбувається один раз на тиждень у режимі
онлайн, також щомісяця проводиться загальний захід, що допомагає
школяру невдовзі обрати бажану професію й побудувати омріяну кар'єру.
До плюсів сайту можна віднести безсуперечну допомогу школярам від
більш обізнаних людей, що можуть поділитися власним досвідом, підказати
рішення нагальних проблем та відповісти на більшість питань школяра.
Серед переваг також можна виділити безоплатну основу допомоги студентів
абітурієнтам, так сайт має волонтерські засади.
Не менш вагомим є досить лаконічний інтерфейс сайту. Важливі
інформаційні блоки, заголовки статей та оголошень, кнопки навігації
розміщені на видних місцях, сайт не перенавантажений функціональними
елементами, кольори та загальне візуальне оформлення не дратують око та
не дратують користувача, своїм простим, стриманим інтерфейсом
приваблює більше відвідувачів.

1.6 Новизна та можливість використання

На сьогоднішній день існує дефіцит систем менторської допомоги

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

Система контролю розкладу дзвінків також обумовлює новизну даної

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

1.7 Мета та постановка задачі

Мета даної роботи – створення функціональної платформи для

надання менторської допомоги школярам та абітурієнтам, яка буде
підтримувати зручну систему формування розкладу відео дзвінків без
колізій, включати інтеграцію з платформою відеоконференцій за
допомогою API та допомагати з пошуком найбільш відповідного ментора
або університету школяру й навпаки – для студента-ментора найбільш
відповідного школяра чи питання.
Для реалізації поставленої мети необхідно виконати наступні задачі:
– проведення аналізу предметної області та існуючих аналогів;
– формування вимог до системи;
– вибір технологій реалізації;
– проектування бази даних та функціональної частини системи;
– проектування системи контролю розкладу;
– проектування та реалізація інтелектуальної системи рекомендацій;
– розробка графічного інтерфейсу;
– тестування та контейнеризація системи.
 27

2 ВИБІР ТЕХНОЛОГІЙ РЕАЛІЗАЦІЇ

Для реалізації будь-якого проекту дуже важливий правильний вибір

технологій для роботи та подальшої швидкої та повноцінної реалізації всіх
необхідних аспектів майбутнього продукту. На сьогоднішній день для
більшості розповсюджених задач є широкий спектр технологій,
інструментів та підходів, серед яких потрібно обирати один або кілька
варіантів. Проте при таких різноманітних можливостях для вибору є
високий ризик помилитися та обрати застарілий або недостатньо
відповідний поставленій задачі стек технологій.
Саме неправильно обрані технології реалізації стають надзвичайно
дорогою або навіть фатальною для комерційних проектів помилкою. Така
помилка вже на початкових етапах проектування та реалізації може звести
нанівець усі витрачені кошти, час та людські ресурси. Якщо ж помилка
вибору виявляється вже на середніх та пізніх етапах роботи над проектом,
то наслідки можуть бути наступними:
– при неправильно обраній мові програмування виникне
необхідність повного переписування всіх програмних частин проекту на
іншу мову; попри великі витрати часу та залучення нових спеціалістів, це
може виявитись на пізніх етапах життєвого циклу проекту вже неможливим,
оскільки мови програмування не завжди підтримують аналоги бібліотек;
– обрана застаріла технологія, мова чи бібліотека призведе до тієї ж
необхідності переходу на інші мови чи версії програмного забезпечення або,
якщо це неможливо, змусить займатись «реінжинірингом» та підтримкою
застарілих бібліотек замість їх авторів.
Оскільки такі наслідки завжди тягнуть за собою значні витрати,
забирають час, людські ресурси, то не завжди виправлення або переробка
проекту на пізніх стадіях розробки є доцільною. Саме тому такі проекти
дуже часто призупиняються чи навіть закриваються, а гроші та час
виявляються витраченими дарма.
 28

Отже, вибір технологій, інструментів та бібліотек для реалізації

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

2.1 Вибір виду майбутньої системи

Перед вибором основних технологій для реалізації системи потрібно

визначитись, який вигляд, структуру матиме створена система в підсумку.
Власне, зважаючи на перелічені раніше необхідні аспекти у вигляді
підтримки системи відеодзвінків, надання зручного розкладу дзвінків і
відсутністю конфліктів у цьому розкладі та системи інтелектуальної
рекомендацій на основі обраних навичок, вибір постає між веб-сайтом та
мобільним додатком.
До важливих особливостей вибору мобільного додатку замість веб-
сайту можна віднести:
– більшу інтерактивність з користувачем завдяки інтеграції
функцій, які неможливі на звичайному веб-сайті;
– збільшену можливість персоналізації під користувача, завдяки
використанню даних про геолокацію, активність та вподобання;
– збільшення витрат на розробку та підтримку, оскільки мобільні
додатки розроблюються довго, та існує дефіцит розробників;
– вартість розгортання, у яку входить відкриття платного акаунту в
магазині додатків та сплачування частини між 15 та 30 відсотками з покупок
у самому додатку;
Щодо особливостей розробки та подальшої роботи системи у вигляді
веб-сайту можна виділити наступне:
– відсутність, порівняно з мобільним додатком, необхідності для
користувачів отримувати та встановлювати постійні оновлення;
– менша швидкість роботи для веб-сайтів із великою кількістю
анімації, ілюстрацій та інтерактивних складових візуального інтерфейсу;
 29

– розробка веб-сайту відбувається швидше та коштує дешевше;

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

2.2 Вибір мови програмування

Завдяки стрімкому розвитку інформаційних технологій та особливо

глобальної мережі Інтернет, веб-розробка стала одним з основних напрямів
у сфері інформаційних технологій. Саме тому на сьогоднішній день
більшість мов програмування тією чи іншою мірою надають можливості для
веб-розробки.
За останнє десятиліття наявні мови програмування досить сильно
змінились: з’явились нові можливості та технології, стали іншими потреби
користувачів та розробників. Динаміка змін у популярності мов
програмування представлена на рисунку 2.1.

Рисунок 2.1 – Графік популярності мов програмування

 30

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

набувають дедалі більшої популярності. Таким чином, Python, Java та C#
продовжують ставати передовими в якості мов для back-end розробки.
Також надзвичайно підскочив рейтинг TypeScript, JavaScript залишився на
тому ж рівні, саме ці мови стали фаворитами для front-end розробки.
Кожного року складаються нові рейтинги популярності мов
програмування. Так, наприклад, рейтинг мов програмування станом на
травень 2022 року за версією TIOBE (індекс, що оцінює популярність мов
програмування на основі кількості пошукових запитів, що містять назву
мови) представлений на рисунку 2.2 [4].

Рисунок 2.2 – Рейтинг мов програмування 2021 року за версією TIOBE

Перше по популярності місце з незначним відривом від С займає мова

програмування Python.
Python – мова програмування високого рівня, та загального
призначення, що інтерпретується. Вона має динамічну нестрогу типізацію
та автоматичний збиральник сміття. Також Python має власну філософію
дизайну розробки, яка наголошує на зручності читання коду з
 31

використанням візуальних відступів та різноманітних правил написання

чистого коду.
До причин вибору Python у якості основної мови для розробки
майбутнього веб-сайту можна віднести:
– універсальність у сферах як веб-розробки так і машинного
навчання;
– велика кількість різноманітних курсів та навчальних матеріалів;
– активна та швидко зростаюча спільнота;
– наявність ряду стабільних та зручних для розробки фреймворків;
– низький поріг знань для входження;
– підтримка різноманітних бібліотек та пакетів для розробки;
– виразний та зрозумілий синтаксис;
– надання простих та інтуїтивних інструментів для налагодження;
– значно більша швидкість розробки;
– активна підтримка та постійні оновлення.
Зважаючи на всі перелічені вище переваги використання Python, у
якості основної мови програмування як для веб-розробки, так і для
машинного навчання, саме він буде кращим вибором для створення
майбутньої системи [5].

2.3 Бібліотеки та віртуальне оточення

При розробці серйозного програмного продукту, зазвичай, необхідно

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

Бібліотеки, як правило, містять такі необхідні речі, як робота з

даними, криптографія та інше.
Саме через активне використання програмних бібліотек більшість
нових проектів містять дуже мало нового унікального коду, порівняно з усім
бібліотечним кодом, який вони використовують.
Проте з використанням бібліотек з’являється також певна проблема –
конфлікти бібліотек. Тобто при роботі над проектом, який використовує
певну бібліотеку та появі нового проекту, у якому застосовується та сама
бібліотека, але нової версії, яка з якихось причин несумісна зі старою,
виникне конфлікт. При такому конфлікті стає неможливим існування цих
проектів у межах однієї системи.
Для уникнення ситуацій виникнення конфліктів між бібліотеками чи
іншими залежностями проектів використовують віртуальні середовища [6].
Віртуальне середовище – це просто інструмент, який розділяє залежності
різних проектів, створюючи окреме ізольоване середовище для кожного
проекту.
Для створення віртуальних середовищ та керування бібліотеками
всередині цих середовищ використовують менеджери. Існує кілька таких
менеджерів, таких як venv, pyenv, poetry та conda. Для реалізації системи
було обрано саме venv [7], тому що цей менеджер створює файл
конфігурацій, який безпосередньо розуміється бінарним файлом Python та
не вимагає копіювання в нове місце. Крім того, venv активно підтримується
розробниками Python.

2.4 Вибір та порівняння фреймворків для back-end

Фреймворк – це готова структура, або «рамка», на основі якої можна

створювати програмне забезпечення. Оскільки він виступає основою, не
потрібно починати все з нуля. Фреймворки зазвичай пов'язані з конкретною
мовою програмування та підходять для різних типів завдань. Оскільки
 33

фреймворк створений та протестований іншими розробниками програмного

забезпечення та досвідченими інженерами, можна бути впевненим, що це
міцна основа для майбутньої розробки.
Проте фреймворк у розробці програмного забезпечення є лише
відправною точкою, а вже додавання до нього функціональності вищого
рівня, яка необхідна для того, щоб він працював, залишається за
розробником майбутнього продукту.
Для реалізації задуманої системи у вигляді веб-сайту необхідно
підібрати найбільш відповідний поставленим цілям фреймворк для веб-
розробки.
Першим та найпростішим веб-фреймворком є Flask. Власне, Flask – це
мікрофреймворк, який надає базові можливості та функціонал для
створення веб-додатку. Цей фреймворк «легкий» та не має залежностей від
зовнішніх бібліотек. Він пропонує вбудовані можливості для валідацій веб-
форм, об'єктно-реляційних відображень (ORM), відкритої системи
автентифікації, механізму завантаження та кількох інших інструментів.
Іншим та найбільш популярним серед веб-розробників на Python є
Django. Цей фреймворк надає стандартизований метод швидкої та
ефективної розробки різноманітних веб-сайтів. Саме Django допоможе у
створенні та підтримці якісних та функціональних веб-додатків. Це
дозволяє робити процес розробки простим та значно економити час.
Основною метою інфраструктури фреймворку Django є створення веб-
систем, керованих базами даних.
Популярність цих обох фреймворків зростала разом зі швидким
розвитком та поширенням веб технологій. Їх використовують для створення
більшості сайтів за допомогою мови програмування Python, користуються
їх вбудованими можливостями зі значною економією часу та інших
ресурсів.
Графік значення відсотку питань на Stack Overflow для кожного з
фреймворків зображений на рисунку 2.3.
 34

Рисунок 2.3 – Графік популярності веб-фреймворків

Flask та Django мають ряд суттєвих відмінностей. Для швидкої

розробки невеликих проектів та більшого контролю майбутньої архітектури
частіше обирають Flask, у той час як Django призначений для розробки
великих проектів із фіксованою структурою. Тобто в разі використання
Django розробник обмежений стандартизованим підходом, а Flask залишає
можливість для вибору або навіть комбінації підходів розробки.
Також суттєвою відмінністю та перевагою Django є підтримка
динамічних HTML-сторінок, що значно полегшують розробку візуального
інтерфейсу. До переваги ж Flask відноситься підтримка API, тоді як
класична версія Django не підтримує API без використання сторонніх
бібліотек.
Ще одною відмінністю є те, що Flask – це фреймворк WSGI, а
Django – повнофункціональний веб-фреймворк.
 35

Також у Django та Flask значно відрізняються диспетчери URL-адрес.

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

Таблиця 2.1 – Особливості веб-фреймворків Flask та Django

Flask
Вбудована підтримка модульних тестів
Велика документація
Диспетчеризація запитів RESTful
Сумісність з додатками та технологіями
від Google
Легка розгортаємість додатку
Підтримка сеансів на стороні клієнта
Проста інтеграція з базою даних
Порівняно менший розмір кодової бази
Легка масштабованість
Має просте та легке для розширення
ядро
Django
Підтримка декількох мов та кодувань
Підтримка декількох баз даних
Надання підтримки моделі MVT
Наявність бібліотек для обробки
зображень та наукових розрахунків
Підтримка кросплатформовості
Підтримка Ajax та jQuery
Легкий у запуску та налаштуванні
Містить простий та функціональний
адміністративний інтерфейс
Має вбудовану систему
інтернаціоналізації
Підтримка кількох механізмів
кешування

Окрім перелічених можливостей та переваг обидва фреймворки

мають також і ряд суттєвих недоліків. Таким чином, Flask надає менш
швидку розробку мінімально життєздатного продукту (MVP) через
відсутність вбудованої бази даних та ORM. Також при використанні Flask
для великих проектів необхідні поглиблені знання фреймворку та зростає
складність з витратами на обслуговування таких проектів. Не менш
важливим може виявитись складність впровадження асинхронності. Для
розробки на Django може бути проблемою монолітність фреймворку, яка
 36

найбільше проявляється в сильній залежності від власної ORM, що потребує

досить широких знань для свого використання. Загалом складність роботи з
Django полягає в достатньо високій кривій навчання, а документація, що не
охоплює сценарії з реального світу не може надати відчутної допомоги в
навчанні. Також Django має недостатньо потужні шаблони та ORM й
обробляє лише один запит за раз. Ще до проблем Django можна віднести
обмеженість розробника в дизайнерських рішеннях та компонентах, погану
сумісність з новими технологіями та необхідність знання мови регулярних
виразів для маршрутизації.
Зважаючи на усі перелічені вище переваги та недоліки фреймворків
для веб-розробки Flask та Django та вимоги до майбутнього веб-сайту, варто
зробити вибір саме на користь Django. Частково обумовлено потенційно
великим розміром системи з періодичної необхідністю додання нових
можливостей, що реально завдяки фіксованій модульній структурі проекту,
яка легко розширюється. В іншому ж Django надає набагато більше
вбудованих можливостей, що будуть необхідні для розробки повноцінної
системи, такі як вбудована систему авторизації та аутентифікації тощо [8].

2.5 Технології для front-end розробки

Зараз основним способом взаємодії між абсолютною більшістю

користувачів та різноманітних системи є GUI (графічний інтерфейс
користувача). Перший графічний інтерфейс користувача з’явився ще
наприкінці 1970-х років у дослідницькій лабораторії Xerox в Пало-Альто та
був комерційно розгорнутий на операційних системах Apple Macintosh і
Microsoft Windows. Цей перший візуальний інтерфейс був розроблений у
якості рішення на проблему неефективного використання в ранніх
текстових інтерфейсах командного рядка або CLI (інтерфейс командної
строки) для звичайного користувача. Перші версії GUI були розроблені для
використання за допомогою миші та клавіатури, але тепер широко
 37

використовуються в багатьох портативних або мобільних пристроях, таких

як смартфони чи планшети, що використовують комбінацію технологій для
забезпечення взаємодії з користувачем. Різниця між зовнішнім виглядом
GUI та CLI для операційної системі Ubuntu версії 20.04 зображена на
рисунку 2.4.

Рисунок 2.4 – GUI та CLI системи Ubuntu версії 20.04

Тобто, GUI дозволяє користувачам переміщатися по екрану

комп'ютера або пристрою та виконувати різноманітні дії за допомогою
візуальних індикаторів і графічних значків. Усі сучасні основні операційні
системи, до яких відносяться Windows, Mac, iOS та Android, мають
графічний інтерфейс, який надає можливість натисканням на значок
виконувати такі дії, як відкриття програми або перегляд меню. Таким
високим рівнем популярності GUI зобов’язаний низкою переваг:
– більш дружній та приємний для очей вигляд;
– легкий доступ до функціоналу системи та встановлених програм;
– низький вхідний поріг для використання користувачами;
– детальніше та інтуїтивно зрозуміліше відображення інформації.
Оскільки майбутня система буде реалізована у вигляді веб-сайту, то
необхідно використовувати спеціальні технології для розробки інтерфейсу
користувача.
 38

Незважаючи на більше, ніж тридцятирічну історію та стрімкий

розвиток веб-технологій, основними технологіями для розробки веб-
інтерфейсів досі залишаються HTML та CSS.
HTML – мова розмітки гіпертексту, яка вважається офіційним веб-
стандартом. Консорціум World Wide Web (W3C) підтримує та розробляє
специфікації HTML, а також надає регулярні оновлення.
HTML дозволяє створювати та структурувати розділи, абзаци та
посилання за допомогою використання елементів, тегів та атрибутів.
Важливо, що HTML не є мовою програмування, оскільки не може
створювати динамічні частини та функції.
Використовують HTML для проектування того, як браузер
відображатиме різноманітні елементи веб-сторінки, такі як текст,
гіперпосилання та мультимедійні файли. Також завдяки підтримці
вбудованих гіперпосилань користувачі можуть легко переходити та
розміщувати посилання на інші веб-сторінки.
CSS – каскадні таблиці стилів, проста мова дизайну, що призначена
для спрощення процесу створення привабливих веб-сторінок. Такі стилі
описують як елементи HTML документу мають відображатись користувачу
на екрані, папері або інших носіях інформації. Використовуючи CSS,
можливо керувати кольорами різноманітних елементів, шрифтами,
відстанню між абзацами, розміром та положенням стовпчиків чи рядків,
варіантами відображення на різних пристроях у залежності від розміру
екрану тощо.
Велику популярність CSS обумовлює ряд суттєвих переваг, до яких
відноситься те, що таблиці стилів досить прості для вивчення та
використання, економлять час обслуговування за рахунок повторного
використання. Також CSS має набагато ширші та покращені атрибути ніж
HTML та сумісний з усіма типами пристроїв.
Зв’язка HTML та CSS це достатньо потужний інструмент для веб-
розробки [9]. Користуючись ними, можливо створити будь-який сайт з
 39

неймовірним візуальним дизайном. Проте такому сайту буде бракувати

інтерактивності.
Мову програмування JavaScript вигадали саме з метою додання
сайтам інтерактивності. Такі сайти можуть реагувати на дії користувача,
наприклад додають відмітку «лайк» на контент при натисканні на
відповідну кнопку, завантажують новини до стрічки, коли користувач
дійшов до кінця сторінки, відображають повідомлення про певну дію або
новий лист [10].
Саме за допомогою використання HTML, CSS та JavaScript буде
створений майбутній веб-інтерфейс розроблюваного сайту.

2.6 Bootstrap

Елементи візуального інтерфейсу більшості веб-сайтів досить типові,

часто вони відрізняються лише у незначних змінах стилів CSS. Також
більшість необхідних JavaScript скриптів для навігації або приховування
бокової панелі при натисканні для різних сайтів однакові. Тобто написання
всіх необхідних стилів та скриптів з нуля не має великого сенсу та буде
займати набагато більше часу.
Саме для економії часу розробки візуального інтерфейсу є набори
готових рішень та стилізованих елементів, одним з таких є Bootstrap.
Bootstrap представляє собою безкоштовне середовище розробки веб-
інтерфейсу з відкритим вихідним кодом для створення веб-сайтів та веб-
програм. Платформа Bootstrap побудована на HTML, CSS та JavaScript для
полегшення розробки адаптивних мобільних сайтів та програм.
Оскільки Bootstrap містить велику кількість шаблонів HTML та CSS
для елементів користувацького інтерфейсу, таких як форми, кнопки та
віджети, розширення на JavaScript та готові каркаси сторінок, він є гарним
вибором для економії часу розробки візуальної частини майбутньої
системи.
 40

2.7 HTML шаблонізатор Jinja2

Веб-сторінки дуже часто містять велику кількість різноманітного

контенту, який відображається користувачеві. Так, наприклад, сторінка
онлайн-кінотеатру має відображати список із кількох десятків фільмів, для
кожного з яких необхідно показати зображення, назву, жанри та іншу
інформацію. Для оптимізації процесу додавання інформації до HTML
сторінки використовують шаблонізатори.
Шаблонізатором називають програмне забезпечення, що дозволяє
формувати кінцеві HTML-сторінки на основі HTML-шаблонів. Основною
метою використання шаблонізаторів є відділення майбутніх даних від
іншого коду. Те, як працює Jinja2, зображеного на рисунку 2.5.

Рисунок 2.5 – Схема роботи шаблонізатора Jinja2

При використанні шаблонізаторів значно покращується читаність

коду та спрощується внесення змін до зовнішнього вигляду сторінки, у разі
виконання проекту лише одною людиною. У випадку ж паралельної роботи
програміста та верстальника над проектом відділення даних від
відображення значно прискорює час розробки продукту. Це можливо тому,
 41

що верстальнику не потрібно працювати з програмуванням, а програмісту –

торкатись аспектів роботи з інтерфейсом.
Обраний веб-фреймворк Django використовує за замовчуванням
шаблонізатор Jinja2 для динамічної генерації HTML-сторінок. Jinja2
представляю собою найпопулярніший шаблонізатор, що використовують
разом з мовою програмування Python. Популярність Jinja2 та використання
в Django обумовлені низкою переваг:
– швидкість роботи за рахунок компіляції до байт коду;
– гнучкість завдяки підтримці подібних до Python конструкцій;
– підтримка асинхронного виконання.
Тобто зважаючи на розглянуті переваги використання шаблонізаторів
в цілому та зокрема Jinja2, більшість HTML сторінок сайту будуть створені
у вигляді шаблонів та динамічно генеруватимуться у якості відповіді на
запит користувача [11].

2.8 Вибір бази даних

Django підтримує більшість сучасних баз даних, проте за

замовчуванням використовує SQLite. SQLite – це система управління
реляційними базами даних (СУБД) з відкритим вихідним кодом. Також ця
СУБД є автономною та безсерверною, що звільняє від моделі хост-сервер з
постійним надсиланням запитів та значно спрощує налаштування.
Незважаючи на переваги своєї простоти, SQLite також має ряд
критичних недоліків для великих веб-сервісів:
– обмеження розміру усіх даних до 2ГБ;
– погана продуктивність при обробці HTTP-запитів з високим
трафіком;
– низький рівень захисту даних через відсутність серверу;
– обмежений паралелізм (лише один процес може вносити зміни);
– відсутність керування користувачами.
 42

Зважаючи на всі вище перелічені недоліки SQLite необхідно вибрати

більш потужну СУБД, що буде підтримувати всі необхідні аспекти для
ефективної роботи з базою даних майбутньої системи [12].
Такою потужнішою заміною, може виступити PostgreSQL, що також
відома як Postgres. Postgres позиціонує себе як найпередовішу реляційну
базу даних з відкритим вихідним кодом у світі. Також PostgreSQL
представляє собою об’єктно-реляційну базу даних, що означає підтримку
успадкування таблиць та перевантаження функцій. До сильних сторін
Postgres можна також віднести:
– підтримка паралелізму усіх операцій без блокування зчитування;
– висока відповідність стандартам SQL;
– відкритий вихідний код, що підтримується спільнотою;
– велика кількість різноманітних функцій;
– відповідність ACID;
– гнучка система пошуку.
Зважаючи на недоліки бази даних за замовчуванням фреймворку
Django більш доцільним буде використання саме PostgreSQL, функції та
переваги якої краще підійдуть для реалізації системи [13].

2.9 Docker

Повністю реалізований продукт має багато залежностей від зовнішніх

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

У якості відкритої платформи для розробки, доставки та розгортання

програмних комплексів найкраще підходить Docker. Ця платформа дозволяє
відокремити програму від інфраструктури для швидкої доставки та
зручного керування останньою.
Docker використовує слабко ізольоване середовище, куди упаковує та
де запускає програму. Таке середовище називається контейнером. Ізоляція
та безпека дозволяють запускати безліч контейнерів одночасно на одному
пристрої (хості). Такі контейнери легкі та містять все необхідне для запуску
програми, тому не потрібно турбуватись про наявність необхідного
програмного забезпечення на хості [14].

2.10 IDE для розробки

Для ефективної роботи важливий не тільки правильний вибір

відповідних технологій, а й програмне середовище для комфортної
розробки системи.
Середовища програмної розробки представляють собою сукупність
різноманітних програмних засобів, що призначені для підтримки та
допомоги в процесі створення програмних продуктів. Такі середовища
включають компілятор або інтерпретатор для запуску програми, наладник
для пошуку помилок та налаштування та багато інших інструментів, що
прискорюють та полегшують написання коду.
У якості середовища розробки була обрана найпопулярніша IDE для
написання скриптів мовою Python – PyCharm. Ця IDE містить повний набір
інструментів для написання коду мовою Python, що значно прискорюють
розробку програм. До основних переваг PyCharm можна віднести:
– інтелектуальне автодоповнення коду та виділення помилок;
– швидкий, гнучкий та безпечний рефакторинг;
– інтелектуальна навігація між файлами та кодом;
– вбудований інтерфейс для роботи з базами даних;
 44

– підтримка веб-фреймворків, таких як Django та Flask;

– підтримка наукового стеку (Pandas, Numpy, Matplotlib);
– додаткові плагіни для інтеграції з необхідними технологіями.
Оскільки PyCharm має широку підтримку для роботи з веб-
технологіями та обраним фреймворком, а також, зважаючи на перелічені
вище переваги, саме ця IDE найкраще підходить у якості середовища
програмної розробки для майбутньої системи [15].
 45

3 ПРОЕКТУВАННЯ СИСТЕМИ ТА ПРОГРАМНА РЕАЛІЗАЦІЯ

3.1 Проектування бази даних

Для абсолютної більшості веб-додатків необхідна база даних. Саме

вона забезпечує довгострокове зберігання та надає доступ до усіх
необхідних для роботи додатку даних. Правильно спроектована база даних
гарантує надійне зберігання, відсутність протирічь, захист від зловмисників
та можливість відновлення даних про поламках.
Проектування бази даних – один з головних етапів розробки
програмного продукту, метою якого є отримання схеми відносин сутностей.
Оскільки була обрана реляційна база та модель даних, то при проектуванні
необхідно позбавитись від аномалій такого представлення даних.
Аномалією в реляційній моделі даних називають ряд ситуацій при
роботі з базою даних, які призводять до появи логічних протирічь або
значно збільшують складність обробки даних [16]. До таких аномалій
відносяться:
– аномалія зміни, яка проявляється в можливій необхідності
перегляду всіх та наступної зміни деяких записів таблиці при внесенні змін
одного рядка;
– аномалія вставки виникає в той момент, коли неможливо додати
новий рядок до таблиці, доки він неповний, або коли необхідно додатково
продивитись усі інші рядки таблиці;
– аномалія видалення полягає в тому, що при видаленні одного
рядка, може зникнути ще кілька, які напряму не пов’язані з видаленим.
В основному виникнення аномалій зумовлене надмірним
дублюванням даних, які зберігаються в базі даних. Причиною такого
дублювання виступає наявність залежності між атрибутами, при якій
підмножина атрибутів однозначно визначає значення інших. Така
залежність між атрибутами називається функціональною.
 46

Для позбавлення від функціональних залежностей, що призводять до

аномалій і відповідно дублювання даних використовують метод
нормальних форм. Нормальною формою (НФ) називають набір вимог до
відношення, які прибирають функціональні залежності. Нормалізація ж
полягає у збиранні інформації про предметну область та її залежності, що
дозволить розділити одне відношення на кілька, пов’язаних між собою [17].
Першою нормальною формою (1НФ) називають відношення, у якого
значення всіх атрибутів атомарні, рядки та стовбці невпорядковані, та немає
повторів рядків.
Другою нормальною формою (2НФ) є відношення, що знаходиться у
1НФ та у якого всі неключові атрибути функціонально незалежні від частин
складовий ключа.
Третьою нормальною формою (3НФ) вважають відношення, яке
знаходиться у 2НФ, та всі неключові атрибути якого функціонально
незалежні один від одного.
На даний момент виділяють шість нормальних форм, але, як правило,
для втілення необхідного функціоналу бази даних більшості проектів
вистачає приведення схеми відношень до третьої нормальної форми [18].
Надмірна нормалізація збільшує кількість часу, що необхідний для
виконання транзакцій або запитів через використання більшого обсягу
пам’яті та операцій вводу-виводу. Це обумовлено тим, що в нормалізованій
базі даних необхідно знаходити відповідні таблиці та зв’язувати дані для
вилучення та подальшої обробки необхідної інформації.
Після вивчення предметної області були виділені шість сутностей:
користувач, проблема, коментар, відеодзвінок, навичка та категорія. Також
був проведений аналіз зв’язків між сутностями, у результаті якого виявлено
основні функціональні залежності. На основі виявлених залежностей було
проведено декомпозицію та подальшу нормалізацію схеми відношень
сутностей. У результаті було отримано схему, що знаходиться у третій
нормальній формі (рисунок 3.1).
 47

Рисунок 3.1 – Схема відношень у 3НФ

Оскільки Django за замовчуванням додає кожній моделі первинний

ключ у вигляді натурального цілого числа, що автоматично збільшуються
на одиницю при вставці до таблиці, то в подальшому описі атрибутів
сутностей поле id не буде розглядатись.
Сутність «Тема» необхідна для групування навичок згідно їх
специфіки та забезпечує подальшу роботу інтелектуальної підсистеми
рекомендацій. Тема представляє собою узагальнену галузь, наприклад,
«Математика», яка буде включати такі навички як «Алгебра», «Геометрія»,
«Дискретна математика» та інші. До полів цієї сутності відносяться:
– color – обов’язковий унікальний колір для відображення у
інтерфейсі, який зберігається у HEX форматі та представляє собою строку
довжиною 7 символів;
 48

– title – обов’язкова строкова назва теми з максимальною довжиною

32 символи.
Сутність «Навичка» представляє собою певне уміння чи тег, за
допомогою якого можна категоризувати менторів або питання школярів та
містить наступні атрибути:
– title – обов’язкова назва навички у вигляді унікальної строки з
максимальною довжиною 32 символи;
– topic – обов’язковий зовнішній ключ теми, до якої відноситься
навичка.
Головною для розробленої схемі відносин та системи в цілому є
сутність «Користувач», що представляє собою аккаунт школяра чи
студента, який пройшов реєстрацію на сайті. Обраний фреймворк Django
має вбудовану готову та базову для подальшого успадкування моделі
користувача. Ці моделі надають функції для хешування паролів, відправки
електронних листів а також призначення та перевірки спеціальних дозволів.
Для додання нових атрибутів та більшого контролю їх обмежень була
використана базова модель, що містить наступні поля:
– username – обов’язкове унікальне ім’я в системі, що зберігається у
вигляді строки, довжина якої не менше 3 та не більше 150 символів;
– password – обов’язковий пароль для входу в систему, зберігається у
вигляді строкового хешу з максимальною довжиною 128 символів;
– email – обов’язкова унікальна для системи адреса електронної
пошти, що необхідна для підтвердження реєстрації та зміни паролю, та
зберігається у вигляді строки з максимальною довжиною 128 символів та
відповідною валідацією на основі регулярних вирази, що надає Django;
– first_name – ім’я, що представляє собою обов’язкове строкове
значення з максимальною довжиною 64 символи, яке містить лише букви;
– last_name – прізвище, що представляє собою обов’язкове строкове
значення з максимальною довжиною 64 символи, яке містить лише букви;
 49

– old_name – по-батькові, строкове значення з максимальною

довжиною 64 символи, яке містить лише букви;
– image – обов’язковий локальний шлях до зображення профілю
користувача, який зберігається у вигляді строки з максимальною довжиною
64 символи;
– is_staff – обов’язкове логічне значення, що вказує на те, чи має
акаунт права модератора, за замовчуванням встановлюється False;
– is_mentor – обов’язкове логічне значення, що вказує на те, що
зареєстрований акаунт належить ментору при значенні True та школяру при
False;
– is_active – обов’язкове логічне значення, яке є індикатором того, чи
акаунт активний (мав хоча б якусь активність протягом останніх 6 місяців);
– is_superuser – обов’язкове логічне значення, що вказує на те, чи має
акаунт привілеї адміністратора, за замовчуванням встановлюється False;
– last_login – обов’язкові дата та час останнього входу в систему;
– date_joined – обов’язкові дата та час моменту реєстрації в системі;
– calendar – обов’язковий зовнішній ключ для календаря, що містить
прийняті користувачем відеодзвінки.
Сутність «Проблема» являє собою питання чи складність, із якою
зіштовхнувся школяр під час навчання або вибору університету. Ця сутність
складається з наступних полів:
– title – обов’язкова унікальна строкова назва з обмеженням
максимальної довжини у 32 символи;
– content – обов’язковий опис питання або проблеми, текст з
максимальною довжиною 1024 символи;
– created_at – обов’язкові дата та час створення проблеми;
– updated_at – обов’язкові дата та час останнього внесення змін;
– author – обов’язковий зовнішній ключ для автора проблеми.
Для можливості вирішення проблеми або питання школяра ментором
була додана сутність «Коментар», що складається з наступних полів:
 50

– content – обов’язковий текст коментаря, що зберігається у вигляді

строки та має максимальну довжину 128 символів;
– created_at – обов’язкові дата та час створення коментаря;
– updated_at – обов’язкові дата та час останньої зміни коментаря;
– author – обов’язковий зовнішній ключ для автора коментаря;
– problem – обов’язковий зовнішній ключ для проблеми, на яку
створено коментар;
– solution_on – обов’язковий зовнішній ключ для проблеми, для якої
коментар є рішенням;
– reply_on – обов’язковий зовнішній ключ для коментаря, для якого
даний є відповіддю.
Для забезпечення подальшої можливості створення та контролю за
відео дзвінками між ментором та школярем необхідна сутність «Дзвінок»,
що буде складатись з наступних полів:
– start – обов’язкові дата та час початку дзвінка;
– end – обов’язкові дата та час закінчення дзвінка;
– status – обов’язкова строки статусу, що має максимальну довжину
10 символів;
– learner – обов’язковий зовнішній ключ для школяра;
– mentor – обов’язковий зовнішній ключ для ментора;
– creator – обов’язковий зовнішній ключ для автора дзвінка.
Розклад дзвінків між ментором та школярем не повинен мати
конфліктів, тобто ситуацій коли дзвінок або його частина накладаються з
іншим. Для підтримки та забезпечення швидкої обробки розкладу дзвінків
створена сутність «Дерево подій», що представляє собою двійкове дерево
пошуку з двома ключами та має наступні атрибути:
– call – обов’язковий зовнішній ключ для дзвінка;
– left – зовнішній ключ для лівого дочірнього дерева подій;
– right – зовнішній ключ для правого дочірнього дерева подій.
 51

Реляційна модель даних для зв'язків типу «багато до багатьох»

потребує створення додаткової сутності. Ця сутність слугує об’єднанням
первинних ключів відношень, для яких виступає зв’язком. Саме тому у
спроектованій схемі відношень присутні таблиці «Навички користувача»,
«Теги проблеми» та «Теми дзвінку».
Сутність «Навички користувача» слугує для можливості зв’язку
користувача з набором його навичок або інтересів.
Сутність «Теги проблеми» необхідна для класифікації проблеми щодо
її специфіки та необхідних для вирішення навичок.
Сутність «Теми дзвінку» допомагає орієнтуватись користувачам щодо
причин та специфіки дзвінку.
Ці три додаткові сутності допомагають працювати системі
інтелектуальних рекомендацій завдяки тому, що вони зв’язані з таблицею
«Навички».

3.2 Архітектура проекту

Обраний фреймворк для розробки веб-сайту Django задає готову

структуру для роботи. Ця структура заснована на шаблоні проектування
програмного забезпечення, що має назву MVT (Model-View-Template).
Шаблон MVT пропонує розділення архітектури проекту на три окремі
частини: модель (model), представлення (view) та шаблон (template).
Модель – це рівень абстракції для структурування та керування
даними веб-програми. Такий рівень діє як інтерфейс для зберігання даних і
представляє собою логічну структуру даних, що стоїть за всім додатком та
допомагає працювати з базою даних. Django модель виглядає та функціонує,
як Python клас з набором атрибутів, що пов’язаний з конкретною сутністю
бази даних завдяки ORM.
Представлення інкапсулює логіку, що відповідає за обробку HTTP-
запиту від користувача та повертає HTTP-відповідь на цей запит. Основним
 52

завданням представлень є виконання логіки взаємодії з моделями шляхом

обробки та відображення всіх або частини даних користувачеві.
Шаблон надає зручний для використання дизайнером синтаксис
відображення інформації, яка буде представлена користувачеві. Також він
містить статичні частини структури HTML-сторінки разом зі спеціальним,
дуже схожим на Jinja2, синтаксисом, також відомим як мова шаблонів
Django (DTL), що описує, як буде додаватись та відображатись динамічний
контент.
Взаємодія між моделлю, представленням та шаблоном відбувається у
кілька етапів. Спершу за допомогою візуального інтерфейсу, що надає
шаблон, користувач надсилає HTTP-запит. Далі цей запит потрапляє до
представлення, яке, засновуючись на певній бізнес-логіці, вносить зміни до
бази даних та повертає певний набір даних за допомогою моделей. Цей
набір даних передається до шаблону, що надсилається користувачу у
вигляді HTTP-відповіді [19]. Схема взаємодії зображена на рисунку 3.2.

Рисунок 3.2 – Схема роботи шаблону MVT

 53

Використання шаблону проектування MVT робить частини коду

проекту менш зв’язаними, підходить як для великих, так і для маленьких
проектів та надає гнучку структуру для подальшого розширення та
модифікації однієї або кількох частин системи.
Структура Django проекту є модульною. Це означає, що весь проект
складається з самостійних частин, що працюють разом, як єдине ціле. Такий
архітектурний підхід до групування частин системи дає змогу для
паралельної роботи над різними частинами сайту, легку розширюваність
проекту та можливість повторного використання розроблених модулів в
інших проектах.
Головним модулем є пакет core, що створюється автоматично при
ініціалізації проекту. Цей модуль складається з чотирьох файлів: settings.py,
urls.py, wsgi.py та asgi.py.
Файл settings.py включає налаштування проекту. Саме в ньому
реєструються інші модулі, вказуються шляхи до розміщення статичних
файлів та шаблонів, зберігаються ключі для підключення бази даних тощо.
Файл urls.py зберігає асоціації URL-адрес з відповідними
представленнями. Цей файл може зберігати всі необхідні налаштування
адрес, проте зазвичай їх розділяють на кілька файлів, що містяться у
відповідних модулях.
Файли wsgi.py та asgi.py представляють собою утиліти, що
використовуються для налагодження зв’язку між додатком Django та веб-
сервером.
Окрім головного модуля, при створенні нового проекту також
автоматично додається файл manage.py. Цей файл необхідний для
подальшої взаємодії з Django за допомогою використання CLI для
створення нових модулів, роботи з базами даних, запуску скриптів та
запуску налагоджувального серверу [20].
Інші модулі створюються вже розробником та складаються з кількох
автоматично згенерованих файлів.
 54

Django має потужну адміністративну панель, що допомагає в розробці

та тестуванні проекту завдяки підтримці великій кількості інструментів. Ця
панель вбудована та доступна кожному користувачу, який зареєстрований в
системі, як superuser. Саме в автоматично доданому при створенні модуля
файлі admin.py відбувається реєстрація моделей та налаштування віджетів
для адміністративної панелі.
Створений за допомогою команди модуль необхідно зареєструвати у
списку налаштувань всередині головного модуля. Для того, щоб Django міг
знайти новий модуль, автоматично додається файл apps.py, який допомагає
з конфігуруванням та налаштуванням нового модуля.
Файл models.py створюється за замовченням та описує одну з частин
патерну MVT – моделі. Моделі є єдиним джерелом інформації про дані.
Вони визначають структуру даних, що зберігаються, до якої відноситься тип
поля, їх максимальний розмір та інші обмеження, значення за
замовчуванням, набір можливих значень, текст для документації та інше.
Зазвичай одна модель є відображенням однієї таблиці бази даних. Моделі
реалізуються у вигляді python класів, що успадковуються від базового класу
db.models.Model, який містить необхідний функціонал для виконання
запитів та обробки даних. Поля таких класів відповідають атрибутам
сутностей бази даних. Окрім полів, класи моделей містять вбудовані методи
та підтримують створення додаткових функцій для зчитування, обробки та
маніпулювання як одним об’єктом, так і цілою вибіркою даних.
Автоматично створений файл views.py є складовою частиною
шаблону MVT, на якому побудовано Django, а саме представленнями.
Представлення містять бізнес-логіку, згідно з якою система працює з базою
даних за допомогою взаємодії з моделями, та підтримки усіх CRUD (Create-
Retrieve-Update-Delete) методів. Так саме цей модуль описується класами,
що допомагають маніпулювати даними, виконуючи над ними операції
create (створення), retrieve (зчитування), update (оновлення),
delete (видалення) та описувати бажану поведінку програми за допомогою
 55

перевизначення вбудованих функцій представлень Django, таких як

get_context_data, get_qweryset тощо.
Tests.py – це файл, що автоматично додається при створенні нового
модуля. У цей файл додаються unit-тести розробленого у відповідному
модулі функціоналу та бізнес-логіки. Для тестів використовують підхід на
основі класів завдяки використанню модуля стандартної бібліотеки Python
– unittest.
Файл маршрутизації urls.py зазвичай одразу створюється
розробником з метою зберігання посилань для відповідного модуля. Цей
файл використовується для зв’язування представлень із відповідними
посиланнями, саме за допомогою цього зв’язування Django розуміє, якому
представленню необхідно передати запит користувача.
Для зберігання необхідних для роботи модуля форм часто створюють
окремий файл forms.py. Форми дозволяють користувачу вводити дані, які
будуть отримані представленням та оброблені. Django дозволяє створювати
форми у вигляді python класів з усім необхідним функціоналом та
налаштованими полями. Ці форми спочатку будуть ініціалізуватись даними
які надішле користувач у HTTP запиті, потім проходити валідацію та
відображатись у шаблоні з відповідними сповіщеннями про помилки
валідації або успішне завершення дії.
Django підтримує розширення Django-filters для надання гнучкої
системи фільтрації даних. Такі фільтри представляють собою клас форми з
підтримкою різноманітних полів та опцій для фільтрації. Також це
розширення дозволяє легко створювати необхідну форму фільтрації для
будь-якої моделі. Саме для зберігання фільтрів створюють окремий файл
filters.py.
Кожний модуль, як правило, містить формалізацію та функціонал
окремої частини предметної області, такої як, наприклад, авторизація та
автентифікація. Цей функціонал складається з моделей, представлень та
різноманітних форм.
 56

Для зберігання каркасів відображення всього необхідного контенту

створюють окрему директорію templates усередині кожного окремого
модуля. Саме ця директорія зберігає всі необхідні для роботи модуля
шаблони.
Структура проекту складається з модулів та директорій, що зображені
на рисунку 3.3.

Рисунок 3.3 – Схема структури проекту

 57

Таким чином, проект містить наступні частини:

– головний модуль core з усіма необхідними налаштуваннями та
інструментами для підключення до веб-серверу;
– директорія для зберігання незмінних файлів static, таких як
зображення, таблиці стилів (CSS) та скрипти для динамічних частин
сайту (JavaScript);
– директорія templates, що містить базові шаблони для сторінок та
додаткові шаблони, що можуть бути вбудовані в будь-яку сторінку;
– директорія media зберігає медійні файли, що додаються до бази
даних під час безпосередньої роботи додатку;
– утиліти CLI manage.py для виконання адміністративних задач;
– модуль base, що містить шаблон, представлення та маршрут
головної сторінки сайту;
– модуль accounts з моделями користувача, навички та теми,
необхідними представленнями, формами, фільтрами та шаблонами для
реєстрації, авторизації та перегляду користувачів;
– модуль problems з моделями проблеми та коментаря, а також
формами, фільтрами та шаблонами для перегляду та створення проблеми
або коментаря до проблеми;
– модуля calls з моделями дерева подій та дзвінка, представленнями
та формами для створення і перегляду дзвінків.

3.3 Система керування розкладом

Важливою частиною системи, що проектується, є комунікація між

ментором та школярем. Для підтримки спілкування не тільки в момент
знаходження на сайті обох користувачів, а й у майбутньому, необхідно
створити систему, що дозволить керувати розкладом дзвінків. Важливими
атрибутами дзвінка для розкладу будуть його дата та час, а також
статус (прийнятий, відхилений, в очікуванні відповіді). Такий розклад буде
 58

складатись з прийнятих дзвінків та не повинен містити жодної пари дзвінків,

що конфліктують. Конфлікт між дзвінками з’являється у тому випадку, коли
час початку чи закінчення одного з них знаходиться між часом початку та
кінця іншого. Розклад, що містить конфлікти зображений на рисунку 3.4.

Рисунок 3.4 – Приклад колізій у розкладі дзвінків

Підтримка можливості додавання нових дзвінків та швидкої перевірки

наявності конфлікту має критичне значення для системи, оскільки,
наприклад, ситуація існування одночасних дзвінків між ментором та
кількома школярами закінчиться тим, що тільки один зі школярів зможе
отримати індивідуальну консультацію ментора.
Швидкість перевірки наявності конфлікту надзвичайно важлива,
оскільки буде використовуватись не лише при додаванні нового дзвінку, а й
при відображенні існування конфліктів між прийнятими дзвінками та
дзвінками, що були відхилені або очікують підтвердження. Останнє
необхідно для розуміння автором дзвінку причин його відхилення.
Наївна реалізація базується на звичайному списку, що призводить до
пришвидшення операцій додавання нових та видалення старих дзвінків.
Також специфіка такої реалізації значно сповільнює пошук та перевірку
наявності конфліктів.
Для визначення та порівняння швидкості виконання операцій
використовують асимптотичну поведінку (характер зміни функції при
прагненні її аргументу до великого значення). Найчастіше використовують
запис 𝑂(𝑓) (велике «О»), який означає те, що функція росте не швидше ніж
 59

𝑓 [21]. Асимптотична швидкість операцій для наївної реалізації наведена в

таблиці 3.1.

Таблиця 3.1 – Асимптотична швидкість операцій наївної реалізації

Операція Асимптотична швидкість
Кращий випадок У середньому Гірший випадок
Вставка 𝑂(1) 𝑂(1) 𝑂(1)
Видалення 𝑂(1) 𝑂(1) 𝑂(1)
Пошук 𝑂(1) 𝑂(𝑛) 𝑂(𝑛)
Перевірка конфлікту 𝑂(1) 𝑂(𝑛) 𝑂(𝑛)

Код наївної реалізації системи розкладу з підтримкою функцій

вставки і видалення дзвінку та перевірки виникнення конфлікту для нового
дзвінка приведений на рисунку 3.5.

Рисунок 3.5 – Код наївної реалізації

Зважаючи на лінійний час виконання критичних операцій пошуку та

перевірки конфлікту для наївної реалізації розкладу, необхідно обрати іншу
структуру даних, що прискорить відповідні операції. Прискорення можна
досягнути навіть за рахунок відчутного сповільнення операцій вставки та
 60

видалення дзвінків з розкладу, оскільки вони використовуються значно

рідше.
У якості такої структури даних краще використати двійкове дерево
пошуку (BST). Специфіка використання дерева пошуку буде полягати у
наявності двох ключів замість одного – час початку та завершення дзвінку.
Впорядкованість елементів такого дерева буде виявлятись у тому, що ліве
піддерево кожного вузла містить дзвінки, час закінчення яких менше, ніж
час початку дзвінка у вузлі, а праве піддерево складається з дзвінків, у яких
час початку більше або рівний часу закінчення дзвінка у вузлі. Приклад
дерева розкладу зображений на рисунку 3.6.

Рисунок 3.6 – Двійкове дерево розкладу

Пошук необхідного дзвінка в такому дереві буде відбуватись

наступним чином: порівнюється початок та закінчення шуканого дзвінка з
початком та закінченням дзвінка, що знаходиться в кореневому вузлі, якщо
вони повністю збігаються, то повертається поточний вузол. Коли початок
або закінчення шуканого дзвінка відрізняються від часу поточного
дзвінком, то за умови, що шуканий час початку більше, ніж закінчення
поточного дзвінка, пошук відбувається рекурсивно в правому піддереві,
якщо ж шуканий час закінчення менше, ніж час початку поточного дзвінка,
 61

то пошук продовжується в лівому піддереві. Візуалізація роботи алгоритму

пошуку у двійковому дереві з розкладом зображена на рисунку 3.7.

Рисунок 3.7 – Візуалізація вставки в дерево

Саме на основі алгоритму пошуку в дереві подій працюють функції

перевірки наявності конфлікту is_valid та конфлікту при вставці нового
дзвінка has_conflict, код яких приведено на рисунку 3.8.

Рисунок 3.8 – Код функцій перевірки валідності та наявності конфлікту

 62

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

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

Рисунок 3.9 – Візуалізація злиття піддерев

Важливо те, що наведений вище алгоритм працює лише для випадку

злиття піддерев одного вузла двійкового дерева пошуку, оскільки в такому
випадку заздалегідь відомо, що всі значення у лівому піддереві менше будь-
якого зі значень елементів у правому піддереві. Тобто для злиття таких
піддерев одного вузла достатньо помістити перше дерево лівим піддеревом
крайнього лівого листа (вузол, що не має дочірніх) другого дерева. Код для
пошуку та видалення вузла дзвінка з дерева подій з подальшим злиттям його
піддерев наведений на рисунку 3.10.
 63

Рисунок 3.10 – Код функцій видалення з дерева та злиття дерев

Використання двійкового дерева пошуку у якості структури даних

значно пришвидшує операції пошуку та визначення наявності конфліктів,
але уповільнює операції додавання та видалення. Проте звичайна реалізація
двійкового дерева не гарантує його збалансованості, тобто того, що в будь-
який момент висота піддерев не буде відрізнятись більш ніж на одиницю.
Це може призвести до виродження дерева та сповільнення всіх операцій.
Асимптотична швидкість роботи усіх операцій наведена в таблиці 3.2.

Таблиця 3.2 – Асимптотична швидкість операцій реалізації з BST

Операція Асимптотична швидкість
Кращий випадок У середньому Гірший випадок
Вставка 𝑂(1) 𝑂(log 2 𝑛) 𝑂(𝑛)
Видалення 𝑂(1) 𝑂(log 2 𝑛) 𝑂(𝑛)
Пошук 𝑂(1) 𝑂(log 2 𝑛) 𝑂(𝑛)
Перевірка конфлікту 𝑂(1) 𝑂(log 2 𝑛) 𝑂(𝑛)
 64

3.4 Система рекомендацій на основі тегів

Оскільки на сайті може бути багато зареєстрованих користувачів та

розміщених питань від школярів, то необхідно розробити підсистему, що
здатна допомогти школяру знайти найкращого для себе ментора, а ментору
– питання школяра, яке він у змозі вирішити.
Для того, щоб було можливо оцінити те наскільки підходять один
одному школяр та ментор або ментор та проблема, був розроблений
прототип системи тегів (рисунок 3.11), у якій кожний тег належить до
узагальненої категорії та за допомогою якої можна охарактеризувати як
питання, так й інтереси школяра або навички ментора.

Рисунок 3.11 – Схема системи категорій та їх тегів

 65

При реєстрації користувач, незалежно від того ментор він чи школяр,

вказує обмежену кількість власних інтересів або навичок. При створенні
питання школяр також обирає обмежену кількість тегів для задання опису.
Оскільки й для питань, і для школярів, і для менторів використовуються
одні й ті самі теги, то можливо створити універсальний спосіб опису. Таким
описом буде вектор, що складається з числових векторів. Кожний з цих
числових векторів позначає певну категорію та містить позитивні числові
значення, які відображають рівень відповідності для кожного тегу з
категорії. Порядок категорій тегів – лексикографічний. Приклад кодування
інтересів школяра у вектор зображений на рисунку 3.12.

Рисунок 3.12 – Візуалізація кодування навичок у вектор

Для ментора такий вектор обчислюється не тільки за допомогою

навичок, що були обрані при реєстрації, а й з використанням тегів питань,
на які він відповів, та тем консультацій для школярів, що були успішно
завершені. Тобто у випадку ментора однакові навички додаються, з чого
випливає те, що значення вектору категорії можуть значно перевищувати
одиницю.
Отримавши вектори для школяра та ментора, необхідно обчислити
наскільки їх навички та інтереси збігаються. Для цього необхідно спочатку
обчислити відповідність навичок для кожної категорії. Для цього
використовується формула 3.1, що працює на основі добутку, оскільки
навички школяра не дублюється, а отже обчислений вектор для будь-якого
 66

школяра є булевим. Тобто навички ментора для категорій, які не обрані

школярем у якості інтересів помножуються на нуль.

𝑣(𝑝, 𝑞) = ∑ 𝑝𝑗 𝑞𝑗 , (3.1)
𝑗=0

де p – вектор категорії для школяра;

q – вектор категорії для ментора;
m – кількість тегів для категорії.
Після того, як отримана оцінка відповідності навичок у межах однієї
категорії, потрібно також обчислити вагу оцінки для певної категорії
відносно інших категорій. Це необхідно для того, щоб ментори, які
спеціалізуються на тих категоріях, що обрані школярем, отримували більшу
оцінку відповідності. Для обчислення вектору ваг використовується
формула 3.2. Важливо те, що оцінка ваги для кожної категорії може
перераховуватись в залежності від обраного школярем списку категорій на
фільтраційні панелі для пошуку ментора.

𝑣
𝑤= 𝑛 ,
𝑣𝑗 (3.2)
∑
𝑗=0

де v – вектор оцінок відповідності між навичками для кожної категорії;

n – загальна кількість категорій.
За допомогою використання формул для обчислення відповідності
навичок (формула 3.1) для кожної категорії та ваг цих оцінок (формула 3.2)
стає можливим обчислення загальної оцінки відповідності між інтересами
школяра та навичками ментора. Отриману загальну оцінку можна
використовувати для сортування списку менторів від найбільш до найменш
 67

підходящого в якості наставника для школяра. Оцінка обчислюється за

формулою 3.3.

𝑛
𝑛 𝑚𝑖

𝑐𝑜𝑚𝑝 = ∑ 𝑤𝑖 𝑣(𝑆𝑖 , 𝑀𝑖 ) = ∑ 𝑤𝑖 ∑ 𝑆𝑖𝑗 𝑀𝑖𝑗 , (3.3)

𝑖̇=0 𝑗=0
𝑖=0

де Si – вектор i-тої категорії для школяра;

Mi – вектор i-тої категорії для ментора;
v – оцінка відповідності між навичками для категорії;
n – загальна кількість категорій;
mi – кількість тегів для i-тої категорії.
Для підбору ментора немає необхідності у сортуванні усіх менторів
згідно значення оцінки відповідності. Як правило, достатньо надати
школяру для вибору список з 5-10 менторів з найкращою оцінкою. Для
цього краще усього використовувати метод машинного навчання k
найближчих сусідів (KNN).
 68

4 ВІЗУАЛЬНИЙ ІНТЕРФЕЙС

Головна сторінка сайту (рисунок 4.1) складається з верхньої

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

Рисунок 4.1 – Верхня частина головної сторінки

Нижче розміщена секція анонсів найближчих подій (рисунок 4.2), що

можна відвідати в онлайн-форматі. Кожний блок з анонсом складається з
зображення університету та його логотипу, заголовку, стислої інформації та
тегів, що описують майбутню подію. Також відображено дату з часом
проведення та кількість учасників. Після натискання на заголовок
відкривається сторінка події з детальною інформацією та можливістю
реєстрації у якості учасника.
 69

Рисунок 4.2 – Секція анонсів найближчих подій

Під секцією анонсів знаходиться блок з картками менторів сервісу

(рисунок 4.3). Для кожного ментора наведено особисте фото, курс та
навчальний заклад, стисла цитата та посилання на сторінки в соціальних
мережах.

Рисунок 4.3 – Секція з менторами сервісу

 70

У кінці головної сторінки знаходиться нижня панель (рисунок А.1), на

якій розміщені дані про сервіс, список корисних сайтів та навчальних
платформ та посилання на сторінки соціальних мереж сервісу. Також наявна
форма підписки на інформаційну розсилку, для якої необхідно вказати
адресу електронної пошти.
Верхня частина сторінки «Про нас» (рисунок А.2) складається з опису
сервісу, його призначення та функцій. Трохи нижче відображаються
напрями, по яким ментори сервісу надають допомогу школярам. Під
списком напрямів розміщена шкала підрахунків поточної кількості
школярів, менторів, подій та питань, що містить сервіс. Нижня частина
сторінки (рисунок А.3) відображає відгуки школярів, які отримали
допомогу завдяки менторам сервісу.
Сторінка з формою авторизації (рисунок 4.4) надає можливість увійти
у систему за допомогою вводу нікнейму з паролем та натискання
відповідної кнопки. Нижче кнопки «Увійти» знаходиться посилання на
сторінку реєстрації та кнопки, що дозволяють увійти за допомогою акаунта
Google чи Facebook за умови, що користувач заздалегідь зареєстрований в
системі.

Рисунок 4.4 – Сторінка з формою входу в систему

 71

Сторінка з формою реєстрації (рисунок А.4) дає змогу

зареєструватись, вказавши нікнейм, адресу електронної пошти, пароль та
його підтвердження. Для реєстрації необхідно зазначити ментором чи учнем
буде користувач, а також обрати від трьох до восьми навичок. Унизу
сторінки знаходяться кнопки, які надають можливість зареєструватись,
використовуючи існуючий Google чи Facebook аккаунт.
Сторінка з питаннями від школярів (рис 4.5) складається з бокової
панелі для фільтрації та списку питань.

Рисунок 4.5 – Сторінка з питаннями школярів

Бокова панель дозволяє фільтрувати питання за допомогою вводу

частини назви та вибору кількох тегів зі списку (рисунок А.5).
Картки питань складаються з назви, дати та часу публікації, перших
128 символів тексту питання та списку тегів, до яких поточне питання
відноситься. Також на кожній картці відображається кількість доданих
коментарів.
Список налічує шість карток на кожній сторінці з можливістю
навігації між сторінками за допомогою кнопок, що знаходяться під ним.
 72

Клік по заголовку картки на сторінці зі списком питань відкриває

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

Рисунок 4.6 – Сторінка питання

Під основним блоком знаходиться секція коментарів. Якщо питання

вирішене, то зверху закріплюються всі коментарі, що відмічені автором, як
рішення. Усі інші коментарі відображаються нижче рішень по два на кожній
сторінці з можливістю навігації між відповідними сторінками за допомогою
 73

використання кнопок із номерами сторінок, що розташовані одразу під

коментарями.
При натисканні на кнопку стрілочки, що знаходиться у верхньому
правому куті картки коментаря відкривається секція з відповідями на
коментар (рисунок 4.7).

Рисунок 4.7 – Секція з відповідями на коментар

Для автора питання відображається кнопка «Галочка» (рисунок 4.8)

для додання коментаря до рішень списку рішень.

Рисунок 4.8 – Відображення коментаря для автора питання

Після натискання, коментар буде закріплений під питання у якості

рішення (рисунок 4.9), та до навичок його автора будуть додані теги
питання. За допомогою хрестика можливо прибрати коментар зі списку
рішень.
 74

Рисунок 4.9 – Відображення рішення питання для автора

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

коментаря (рисунок 4.10) та блок відповіді на коментар іншого ментора
(рисунок 4.11). Після натискання на кнопку в кутку форми коментар буде
опубліковано.

Рисунок 4.10 – Форма додання нового коментаря

Рисунок 4.11 – Форма додання відповіді на коментар

 75

Для пошуку ментора школярем створена сторінка зі списком

наставників (рисунок 4.12). Для кожного ментора відображається фото,
нікнейм, кнопка для створення дзвінку та шкали для кожної категорії
навичок з кількістю вирішених питань та тегами.
З метою покращення пошуку ментора зліва додана панель, за
допомогою якої можна проводити фільтрацію за обраними навичками або
ім’ям. За замовчуванням для авторизованого школяра ментори відсортовані
системою рекомендацій від найбільшої відповідності інтересам школяра до
найменшої.

Рисунок 4.12 – Сторінка зі списком менторів

Після натискання на кнопку «Зв’язатися» відкривається сторінка з

формою створення дзвінку, на якій необхідно ввести дату з часом початку
та кінця дзвінка. Ці дата та час мають наступні обмеження:
– початок дзвінка має бути не раніше наступних 24 годин;
– мінімальна тривалість не менше п’яти хвилин;
– максимальна тривалість дзвінка не більше години;
– кінець дзвінка не пізніше наступних 7 днів.
 76

Також необхідно вказати в залежності від типу користувача, який

створює дзвінок, ментора або учня, та теми, з приводу яких буде відбуватися
консультація. Після завершення дзвінка ці навички будуть додані до
навичок ментора.
При натисканні кнопки «Зв’язатися» на картці наставника учнем
вказується школяр, що натиснув на кнопку, а ментором стає відповідний
наставник (рисунок А.6).
При натисканні наставника на кнопку «Надати консультацію» на
сторінці питання ментором записується наставник, учнем вказується автор
питання, а теги питання автоматично стають темами дзвінка (рисунок А.7).
Щойно створений дзвінок має статус «В очікуванні відповіді»,
оскільки співрозмовнику потрібно прийняти його в залежності від свого
розкладу. Розклад дзвінків можна переглянути на відповідній сторінці «Мій
розклад» (рисунок 4.13), посилання на відображається на навігаційній
панелі та з’являється після авторизації.

Рисунок 4.13 – Сторінка керування розкладом

 77

На сторінці перегляду розкладу відображається календар з

можливістю вибору необхідної дати для відображення дзвінків у три
колонки згідно з їх статусами. За замовчуванням відображаються дзвінки
для поточної дати.
При натисканні на дзвінок відображається співрозмовник та теми, що
будуть обговорюватись (рисунок 4.14). Також присутня кнопка у вигляді
символу «гіперпосилання», при натисканні на яку відкриється відеозустріч
на платформі Google Meet.

Рисунок 4.14 – Детальна інформація про прийнятий дзвінок

Дзвінки, що були прийняті, можна відмінити за допомогою кнопки у

вигляді хрестика, якщо користувач не є автором дзвінку, або видалити
натисканням на кнопку у вигляді урни в іншому випадку (рисунок 4.15).

Рисунок 4.15 – Список прийнятих дзвінків

 78

Дзвінки, які очікують відповіді можна прийняти натисканням на

кнопку у вигляді галочки та відмінити натисканням на кнопку хрестика.
Кнопка хрестик відображається тільки тоді, коли дзвінок створив не
користувач, у іншому випадку відображається кнопка у вигляді урни, що
видаляє дзвінок (рисунок 4.16).

Рисунок 4.16 – Список дзвінків, що очікують відповідь

Відхилені дзвінки можна прийняти натисканням кнопки у вигляді

галочки (рисунок 4.17).

Рисунок 4.17 – Список відхилених дзвінків

Дзвінки, що мають конфлікт з прийнятими дзвінками, не мають опцій

для взаємодії та відображаються в списку червоним кольором з відповідним
написом (рисунок 4.18).
 79

Рисунок 4.18 – Відображення дзвінків, що мають колізії з розкладом

При маніпулюванні існуючими дзвінками та створенні нових для

запобігання конфліктів між ними в системі працюють наступні правила:
– при підтвердженні користувачем дзвінка, що має статус очікування,
усі інші дзвінки з тим самим статус, що конфліктують з даним
відхиляються;
– користувач не може створити дзвінок, який має конфлікт з його
розкладом прийнятих дзвінків.
 80

ВИСНОВКИ

Таким чином, було спроектовано та реалізовано систему менторської

допомоги школярам через використання взаємодії зі студентами-
наставниками, що можуть підказати вирішення нагальних питань щодо
вступу абітурієнта до вишу, підготовки до складання вступних іспитів,
закриття прогалин у розумінні та практичному використанні тем зі шкільної
освітньої програми.
Тож було проведено аналіз предметної області, встановлено
актуальність проблеми частих помилок учня при вступі до закладу вищої
освіти та унеможливлення отримання достатнього рівня знань школярам із
віддалених куточків країни чи з малозабезпечених сімей. Проаналізувавши
аналоги системи, що мали за мету створити в рамках даної роботи, було
сформовано список вимог до розроблюваної системи, у результаті обрано
технології, що використовувались для реалізації задуму. Було спроектовано
базу даних, що має зберігати та надавати можливість для швидкої обробки
інформації про сутності обраної предметної галузі. Після проектування
системи та реалізації її основних функціональних можливостей було
розроблено графічний інтерфейс, лаконічний та комфортний для будь-якого
користувача.
Серед особливостей та переваг створеної системи можна виділити
такі:
– безоплатна основа платформи;
– інтуїтивний та зручний візуальний інтерфейс;
– інтеграція з системою відеодзвінків;
– наявність системи вирішення колізій дзвінків;
– розроблена системи автоматичного підбору питань для ментора та
студентів-наставників для школяра;
– відсутність аналогів системи з реалізованими можливостями, що
обумовлює новизну.
 81

Незважаючи на те що отриманий прототип системи надання

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

ПЕРЕЛІК ДЖЕРЕЛ ПОСИЛАННЯ

1. History of the Web. URL:

https://webfoundation.org/about/vision/history-of-the-web/ (дата звернення:
02.05.2022).
2. Анализ мирового рынка дистанционного образования. URL:
https://moluch.ru/archive/100/22587/ (дата звернення: 03.05.2022).
3. VolunteerMatch. URL: https://www.volunteermatch.org/ (дата
звернення: 05.05.2022).
4. TIOBE Index for May 2022. URL: https://www.tiobe.com/tiobe-index/
(дата звернення: 10.05.2022).
5. Python Advantages and Disadvantages – Step in the right direction.
URL: https://techvidvan.com/tutorials/python-advantages-and-disadvantages/
(дата звернення: 10.05.2022).
6. Why you should use a virtual environment for EVERY python project!
URL: https://towardsdatascience.com/why-you-should-use-a-virtual-
environment-for-every-python-project-c17dab3b0fd0 (дата звернення:
12.05.2022).
7. venv — Creation of virtual environments.
https://docs.python.org/3/library/venv.html. URL: (дата звернення: 12.05.2022).
8. Flask vs. Django – Which One Outperforms the Other? URL:
https://scoutapm.com/blog/flask-vs-django (дата звернення: 15.05.2022).
9. HTML & CSS. URL:
https://www.w3.org/standards/webdesign/htmlcss (дата звернення: 16.05.2022).
10. What is JavaScript used for? URL:
https://www.hackreactor.com/blog/what-is-javascript-used-for (дата звернення:
16.05.2022).
11. Jinja advantages and disadvantages. URL:
https://www.webforefront.com/django/usejinjatemplatesindjango.html (дата
звернення: 17.05.2022).
 83

12. About SQLite. URL: https://www.sqlite.org/about.html (дата

звернення: 18.05.2022).
13. About PostgreSQL. URL: https://www.postgresql.org/about/ (дата
звернення: 18.05.2022).
14. Docker overview. URL: https://docs.docker.com/get-started/overview/
(дата звернення: 19.05.2022).
15. About PyCharm. URL:
https://www.componentsource.com/product/pycharm/about (дата звернення:
20.05.2022).
16. Database Anomaly Meaning & Definition. URL:
https://www.mbaskool.com/business-concepts/it-and-systems/12909-database-
anomaly.html (дата звернення: 21.05.2022).
17. Introduction of Database Normalization. URL:
https://www.geeksforgeeks.org/introduction-of-database-normalization/ (дата
звернення: 21.05.2022).
18. Normal Forms in DBMS. URL:
https://www.geeksforgeeks.org/normal-forms-in-dbms/ (дата звернення:
21.05.2022).
19. Django Model View Template (MVT) Overview. URL:
https://www.onlinetutorialspoint.com/django/django-model-view-template-mvt-
overview.html (дата звернення: 23.05.2022).
20. Django Project MVT Structure. URL:
https://www.geeksforgeeks.org/django-project-mvt-structure/ (дата звернення:
24.05.2022).
21. What is Big O Notation Explained: Space and Time Complexity. URL:
https://www.freecodecamp.org/news/big-o-notation-why-it-matters-and-why-it-
doesnt-1674cfa8a23c/ (дата звернення: 27.05.2022).
 84

ДОДАТОК А
Інтерфейс програми

Рисунок А.1 – Нижня панель сторінки

Рисунок А.2 – Блок «Про нас» головної сторінки

 85

Рисунок А.3 – Блок відгуків школярів головної сторінки

Рисунок А.4 – Сторінка з формою реєстрації

 86

Рисунок А.5 – Сторінка з результатом фільтрації по тегам

Рисунок А.6 – Форма створення дзвінку

 87

Рисунок А.7 – Форма надання консультації

 88
ДОДАТОК Б
Відомість кваліфікаційної роботи

Дод.
Позначення Найменування
відомості
Текстові документи
1. Пояснювальна записка 88 с.

Інші документи

2. Презентаційні матеріали 18 плакатів

. . Прізвище та Підп. Дата

ініціали.
Розробив Котелевець К.А. Шифр групи Код напр./спец.
Веб-сервіс менторської
Перевірив Чала О.С. ІТКН-18-7 122
допомоги школярам
Н.контр. Лавська В. ХНУРЕ
Затв. Філатов В.О. кафедра ШІ