КИЇВСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ ІМЕНІ ТАРАСА

ШЕВЧЕНКА
Факультет комп’ютерних наук та кібернетики
Кафедра інтелектуальних програмних систем

Курсова робота
за спеціальністю 121 Інженерія програмного забезпечення
на тему:
ВЕБ-ДОДАТОК «ІНТЕРАКТИВНА МАПА УНІВЕРСИТЕТУ»
(«UNIVERSITY INTERACTIVE MAP»)

Виконав: студент 3 курсу бакалаврату

Сазонов Нікіта Віталійович __________
(підпис)

Науковий керівник:
Доцент, кандидат фіз-мат наук
Катеринич Лариса Олександрівна __________
(підпис)

Засвідчую, що в цій роботі немає

запозичень з праць інших авторів без
відповідних посилань.
Студент _________
(підпис)

Київ-2022
 2

РЕФЕРАТ

Обсяг роботи 29 сторінок, 6 ілюстрацій, 9 джерел посилань.

ВЕБ-ДОДАТОК, ВИБІР ОБ’ЄКТІВ НА КАРТІ, ІНТЕРАКТИВНА КАРТА,

ІНТЕРАКТИВНИЙ ІНТЕРФЕЙС, МАПА УНІВЕРСИТЕТУ, НАВІГАЦІЯ,
ПОШУК ТА ПЕРЕГЛЯД ІНФОРМАЦІЇ, ПОШУК ОБ’ЄКТІВ НА МАПІ, СХЕМА
ПОВЕРХУ, ТЕХНІЧНЕ ЗАВДАННЯ.

Об’єктом курсової роботи є процес переглядання та пошуку інформації, а

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

Метою роботи є створення веб-додатку для висвітлення інформації, пошуку

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

Модель процесу розробки: ітераційна модель з використанням ітерацій для

збору даних і формування технічного завдання, створенням макету інтерфейсу
додатку, створення тестової робочої версії для збору відгуків і побажань,
створення фінального продукту відповідно. Інструменти розроблення:
безкоштовне, вільно поширюване середовище розробки Microsoft Visual Studio
Code, мова програмування TypeScript, використання бібліотеки React, а також
CSS бібліотеки Tailwind.

Результати роботи: виконано загальний огляд технічних засобів для

інтерактивної навігації будівлями та територіями, висвітленням інформації про
об’єкти; проаналізовано переваги та недоліки кожного з них, а також
використання інтерактивних мап для навігації в цілому, розроблено програмний
продукт «Інтерактивна мапа університету» для показу інформації про аудиторії,
кабінети викладачів, кафедр, навігації територіями і будівлями університету, а
 3

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

масштабованості.

Веб-додаток «Інтерактивна мапа університету» може застосовуватися під

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

ЗМІСТ

ВСТУП..............................................................................................................................5
РОЗДІЛ 1 НАВІГАЦІЯ ТА КАРТИ...............................................................................8
1.1 Процес сприйняття даних......................................................................................8
1.2 Загальні правила подання навігаційних даних....................................................8
1.3 Методи подання навігаційних даних..................................................................10
1.3.1 Вказівники......................................................................................................10
1.3.2 Карти та схеми................................................................................................11
1.3.3 Інформаційні стенди......................................................................................11
1.4 Особливості навігаційних даних території університету.................................12
1.4.1 Фізична навігація...........................................................................................12
1.4.2 Інтерактивна навігація...................................................................................12
РОЗДІЛ 2 ПРОЦЕС РОЗРОБКИ..................................................................................14
2.1 Модель процесу розробки...................................................................................14
2.2 Технічне завдання................................................................................................16
2.3 Технології розробки.............................................................................................17
2.4 Тестовий прототип...............................................................................................18
2.5 Корегування технічного завдання......................................................................21
РОЗДІЛ 3 РЕАЛІЗОВАНИЙ ДОДАТОК....................................................................22
ВИСНОВКИ...................................................................................................................27
ПЕРЕЛІК ДЖЕРЕЛ ПОСИЛАННЯ.............................................................................29
 5

ВСТУП

Оцінка сучасного стану об’єкта розробки. Правильно побудована система

навігації, якою зручно користуватися і легко знаходити необхідні об’єкти –
запорука емоційної впевненості та піднятого настрою у користувачів певного
простору [1]. Важливу роль під час процесу навігації відіграють комп’ютерні та
мобільні пристрої – більшість людей перед виходом з дому будує маршрут саме
на комп’ютері, а під час його проходження контролюють свій прогрес, звіряючись
з телефоном.

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

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

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

Актуальність роботи та підстави для її виконання. Доволі часто у

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

З навігацією можуть допомогти інформаційні технології, а саме онлайн

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

Мета й завдання роботи. Метою курсової роботи є створення веб-додатку

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

1. Обговорити наявний опис додатку з користувачами, отримати коментарі

та пропозиції, внести зміни до опису відповідно до них
2. Обрати технології для створення веб-додатку
3. Обрати модель процесу розробки
4. Періодично тестувати та обговорювати з користувачами реалізований
функціонал
5. Розробити мапу території університету, схеми поверхів
6. Розробити макети сторінок додатку
7. Реалізувати сторінки додатку без фунціоналу
8. Сформувати та задокументувати формат зберігання даних про об’єкти
9. Надати користувачам можливість додавати дані відповідно до
створеного формату даних
10. Реалізувати функціонал сторінок додатку

Варто зазначити, що вже створені схеми поверхів Факультету

комп’ютерних наук та кібернетики КНУТШ, які впродовж одного навчального
семестру були частиною навігації факультету. За цей час від студентів було
 7

отримано безліч позитивних відгуків, певні коментарі та зауваження. Не раз

звучало прохання створити онлайн версію цих мап.

Об'єкт, методи й засоби розроблення. Об’єктом розроблення веб-додатку

«Інтерактивна мапа університету» є процес пошуку потрібного об’єкта,
висвітлення інформації про нього, а також навігації територією університету.

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

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

В якості інструменту створення програмного засобу було обрано Microsoft

Visual Studio Code – інтегроване середовище розробки (IDE), яке є безкоштовним,
вільно поширюваним, з відкритим вихідним кодом.

Було обрано мову програмування TypeScript, яка розширює найбільш

відому мову для веб-розробки JavaScript, додаючи статичну типізацію, за
допомогою якої розробникам набагато простіше відстежувати помилки, коли вони
виникають [2].

Можливі сфери застосування. Веб-додаток «Інтерактивна мапа

університету» може застосовуватися під час вступних кампаній до університету,
поселення в гуртожитки, пошуку кабінету в не відвіданій раніше будівлі
університету тощо.
 8

РОЗДІЛ 1 НАВІГАЦІЯ ТА КАРТИ

1.1 Процес сприйняття даних

Перш ніж аналізувати сприймання даних людиною, розглянемо поняття
«сприйняття».
Сприйняття – це відображення у підсвідомості людини предметів і явищ
навколишнього середовища під час їхньої безпосередньої дії на органи чуття.
Цими образами оперують увага, пам’ять, почуття, емоції, мислення. Велику
роль у сприйнятті даних відіграє увага реципієнта, тобто людини, що сприймає
дані.
Увага – це форма психічної діяльності, яка виражається в особливому
зв’язку між свідомістю реципієнта та об’єктом сприйняття, виокремлення
свідомістю об’єкта сприйняття від інших, від інформаційного шуму [3].
Тобто, увага – це зосередженість на одному об’єкті. Найчастіше увага
досягається за рахунок волі реципієнта, тобто психічного стану, який допомагає
усвідомлювати та досягати мету.
Дані, що сприймає людина, можуть бути поділені на чотири основні типи:
1. Віртуальні – сприймаються очима, візуальні образи;
2. Слухові – сприймаються вухами, слухові образи;
3. Кінестетичні – засвоєння даних шляхом зосередження на фізичних
відчуттях;
4. Дигітальні – сприймаються очима, логічні образи.
Кінестетичні дані не підходять для подання навігації в мобільному додатку,
оскільки телефон обмежено може впливати на відчуття (вібрація). Слухові також
не влаштовують, оскільки не у всіх користувачів є навушники. Розглядатимемо
віртуальні та дигітальні типи даних: вони можуть бути подані у вигляді двох
основних видів – це текст та зображення.

1.2 Загальні правила подання навігаційних даних

Правила подання навігаційних даних мало чим відрізняються від правил
подання звичайних даних, лише в перших заголовками є навігаційні відомості –
 9

місцезнаходження, напрям руху тощо. Розглянемо загальні правила подання

даних.
В оформлені даних має простежуватись ієрархія – розподіл частин тексту за
важливістю. Це досягається за принципом оберненої піраміди: найголовніше, що
має дізнатися реципієнт, розміщено вгорі, зроблено великим розміром шрифту та
виділено жирним. Навіть якщо людина прочитає лише заголовок (а більшість так
і робить), суть повідомлення буде зрозумілою.
Все інформаційне повідомлення потрібно створювати в єдиному стилі, щоб
його елементи компонували один до одного. Використання цього способу
дозволяє передати дані як одне ціле, в якому частини посилаються одна на одну
та краще запам’ятовуються. Найважливіші слова чи фрази можна виділяти
специфічною формою (інший шрифт, рамка навколо заголовку тощо) чи іншим
кольором.
Кожний колір впливає на емоційний стан та сприймається людиною по
різному:
 Червоний колір підвищує напруженість, активізує її увагу.
 Помаранчевий стимулює увагу, позбавлений зайвої експресії і несе
відчуття внутрішньої рівноваги. [4].
 Жовтий – це колір спілкування, що сприяє імпровізації та «наділяє»
об’єкт інтелектом. Саме тому він використовується під час реклами
високотехнологічних товарів.
 Синій колір допомагає сконцентруватися на найнеобхіднішому,
привертає до себе увагу, проте не несе негативних емоцій як червоний.
 Хоч сірий і є кольором інтелекту, він ще й розслабляє та заспокоює,
проте не сприяє активній розумовій діяльності [4].
 Зелений надає почуття руху, звільняє від негативу, допомагає оцінювати
різні точки зору, сприяє кращій самоорганізації та концентрації.
 10

 Фіолетовий – колір внутрішньої зосередженості. Він стимулює роботу

мозку, сприяє рішенню творчих завдань, допомагає абстрагуватися від
усіх зовнішніх чинників та сконцентруватися на головній проблемі [4].
Необхідно зазначити, що люди можуть по особливому сприймати ті чи інші
кольори – це може бути пов’язано з ментальністю, традиціями народу або
спогадами, особливостями психології окремої людини. В Азії, наприклад, білий –
це колір смерті, хоча в Європі цим кольором є чорний [4].
Зображення одного й того самого об’єкту різними кольорами призведе до
різного його розуміння реципієнтом: якщо, наприклад, написати заголовок
червоним кольором, то людина напружиться після читання, почне хвилюватися, в
неї переплутаються думки. Якщо ж зобразити цей заголовок чорним – він буде
сприйматися серйозно, обдумано. Таким чином потрібно гарно продумувати
дизайн інформаційних повідомлень, щоб підібраний колір правильно передавав
думку цього повідомлення.
Велику роль у сприйнятті текстових повідомлень займають шрифти. Вони,
як і кольори, визначають емоційний стан, який передає текст, наприклад:
 Квадратні шрифти виражають стабільність, довіру.
 Прямі шрифти (витягнуті по вертикалі) є символом спокою, надійності,
комфорту [5].
 Шрифти з насічками або віньєтками виражають красу, легкість,
витонченість.
 Курсивні шрифти передають менш важливі дані [5].
 Рукописні передають дружність, близькість.
 Малі шрифти символізують довіру, важливість відомостей [5].
Окремі групи читачів можуть по-різному сприймати ті чи інші групи
шрифтів. Наприклад, жінки краще сприймають шрифти з округлими
«хвостиками», чоловікам же подобаються навпаки – прямі, геометричні [5].

1.3 Методи подання навігаційних даних

 11

Існують різні типи навігаційних даних, тому й створено декілька способів їх

подання.

1.3.1 Вказівники
Цей метод використовується при керуванні потоками людей, вказівці
напрямку чи наданні відомостей стосовно цього напрямку. В підсвідомості
подорожуючого існує мета – дістатися пункту призначення, тому він буде
уважнішим, буде придивлятися та шукати об’єкти навігації.
На вказівниках розміщують небагато тексту, лише декілька фраз, та стрілку,
яка вказує напрям. Людина, побачивши стрілку, активізує увагу та серед поданих
на вказівнику даних шукає ті, які їй потрібні – це відбувається за декілька секунд.
Всі навігаційні вказівники потрібно оформлювати в єдиному стилі, щоб
вони візуально пасували один до одного та щоб подорожуючий, побачивши
вказівник один раз, знав, де на ньому знаходяться ті чи інші елементи та як він
виглядає.
1.3.2 Карти та схеми
Карта – схематичне зменшене зображення земної поверхні, на якому
позначаються дані деякого типу (політичні, геологічні, топологічні тощо). На
навігаційних картах найчастіше зображують місцевість поблизу
місцезнаходження цієї карти: вулиці, пам’ятки, відомі будівлі, туристичні
маршрути, парки, місця громадського відпочинку.
Більшість об’єктів на карті потрібно позначати значками, штриховками,
лініями, областями різного кольору, щоб людина легко сприймала те, що
зображено. Не можна підписувати абсолютно всі об’єкти – тоді карта
перетвориться у текст поверх зображення, зрозуміти щось з якого буде дуже
складно.
Схема (схематичне зображення) – це спрощений вигляд об’єкту, що передає
його особливості. Зазвичай спрощується форма об’єкту, не дотримується
відношення його розмірів, не зазначаються деякі його частини, але необхідно
 12

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

основний об’єкт.
1.3.3 Інформаційні стенди
Інфостенди (інформаційні стенди) – це сукупність навігаційних даних
зібраних в одному місці. Фактично це зібрання навігаційних відомостей,
необхідних для уточнення маршруту, його візуалізації, а також для вказання
альтернативного шляху.
Найчастіше на інформаційних стендах розміщується схема об’єкту, карта
місцевості навколо, вказівники напрямку та розклад громадського транспорту,
маршрути якого проходять поряд.
Інформаційні стенди також можуть бути й інтерактивними – показувати
одразу декілька маршрутів, порівнювати розклад громадського транспорту тощо.
1.4 Особливості навігаційних даних території університету
1.4.1 Фізична навігація
Коли людина може з легкістю зрозуміти напрям, в якому їй потрібно
рухатися для досягнення бажаного об’єкту, а потім успішно подолати цей
маршрут – вона відчуває радість через успіх досягнення мети. Більше того, зручна
навігація може доволі значно економити людський час на пошуки маршруту.
Враховуючи вищенаведені аргументи, можна прийти до висновку, що якісна
навігація є дуже важливим аспектом організації простору.

Університетський простір є доволі специфічним: для студентів та

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

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

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

1.4.2 Інтерактивна навігація

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

Однак не буде ефективним помістити всі дані, що наявні на фізичних картах

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

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

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

Також існує «правило трьох кліків», яке стверджує, що ефективному

інтерфейсу аби задовольнити запит користувача, потрібно щоб той зробив не
більше трьох кліків [6]. Під час розробки веб-додатку будемо активно
використовувати його.
 14

РОЗДІЛ 2 ПРОЦЕС РОЗРОБКИ

2.1 Модель процесу розробки

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

Серед найвідоміших моделей можна виділити наступні:

1. Каскадна або водоспад (Waterfall). Одна з найстаріших, має на увазі

послідовне проходження стадій, кожна з яких має завершитись повністю до
початку наступної. У моделі Waterfall легко керувати проектом. Завдяки її
жорсткості, розробка проходить швидко, вартість та терміни заздалегідь
визначені. Але не все так просто. Каскадна модель даватиме відмінний
результат тільки в проектах з чітко і наперед визначеними вимогами та
способами їх реалізації. Немає можливості зробити крок назад, тестування
починається тільки після того, як розробку завершено або майже завершено
[7].

2. Ітераційна модель (Iterative model). Ітераційна модель не вимагає знати

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

3. Гнучка (Agile). У гнучкій методології розробки після кожної ітерації

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

змінюються. Варто згадати клас творчих людей, яким властиво генерувати,

видавати та випробувати нові ідеї щотижня чи навіть щодня. Гнучка
розробка найкраще підходить для цього психотипу керівників. Компанії
розробляють стартапи якраз за Agile [7].

Задля реалізації веб-додатку «Інтерактивна мапа університету» оберемо

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

Перед початком роботи над проектом важливо чітко сформулювати

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

Наступним етапом є циклічна розробка і покращення проекту. Першим у

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

Далі створений макет необхідно реалізувати, додавши до нього функціонал.

Це основний етап у цій роботі і йому буде приділено найбільша кількість уваги у
наступних пунктах.

Після реалізації додаток варто протестувати на наявність помилок, які

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

2.2 Технічне завдання

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

Реалізувати наступні сторінки з вказаним функціоналом:

1. Мапа університету
a. Перегляд мапи університету
b. Перегляд точок інтересу (магазини, аптеки та інші об’єкти, що є
корисними для студентів та викладачів)
c. Пошук за адресою чи назвою структурного підрозділу
d. Обрання структурного підрозділу для перегляду інформації про нього
(опис, посилання на сайт, посилання на онлайн мапу тощо)
e. Обрання структурного підрозділу для переходу на його сторінку
2. Сторінка структурного підрозділу
a. Перегляд списку поверхів з виділенням короткої інформації про кожен з
них
b. Обрання поверху структурного підрозділу для переходу на його
сторінку
3. Схема поверху структурного підрозділу
a. Перегляд схеми поверху структурного підрозділу з можливістю вибору
аудиторії та перегляду інформації про неї
b. Можливість скопіювати та надіслати посилання на вибрану аудиторію
іншим користувачам

Варто зазначити, що веб-додаток розробляється з можливістю додавання

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

Також існує можливість додавання внутрішньо просторової навігації (з

англ. indoor navigation), але це є темою для написання окремої роботи.

2.3 Технології розробки

Чи не найважливішим аспектом розробки є обрані технології, адже вони
впливатимуть на швидкість і структуру реалізації проекту.

Для створення роботи було обрано середовище розробки Microsoft Visual

Studio Code. Це безкоштовний кросплатформовий редактор з відкритим вихідним
кодом, який працює на Windows, Linux та macOS, тому розробник може вільно
змінювати операційні системи, використовуючи одне і те саме середовище
розробки. Також VS Code підтримує безліч мов програмування: Python, JavaScript,
HTML, CSS, TypeScript, C++, Java, PHP, Go, C#, PHP, SQL, Ruby, Objective-C і
багато інших. Ця підтримка є можливою завдяки величезній кількості розширень,
які можна безкоштовно і швидко інсталювати у середовище розробки [8].

Іншою, але не менш важливою і зручною особливістю VS Code є так звана

підтримка IntelliSense, що надається JavaScript, CSS, HTML, TypeScript, JSON, і
відображає багато корисної інформації, аналізуючи внутрішню реалізацію, аби
користувачі могли краще зрозуміти код на основі виведення типів, анотацій JSDoc
або файлів оголошень. Він забезпечує інтелектуальне завершення коду,
інформацію про параметри, пошук за посиланнями та багато інших розширених
функцій мови.

Для першої ітерації розробки були обрані наступні технології:

 JavaScript – це мова програмування, яка є однією з основних технологій

всесвітньої мережі (World Wide Web), поряд з HTML і CSS. Понад 97% веб-
сайтів використовують JavaScript на стороні клієнта для програмування
поведінки веб-сторінок, часто включають сторонні бібліотеки. Усі основні
веб-браузери мають спеціальний рушій (engine) JavaScript для виконання
коду на пристроях користувачів. JavaScript — це інтерпретована мова
високого рівня, яка відповідає стандарту ECMAScript. Він має динамічну
 18

типізацію, орієнтацію на прототипізовані об’єкти та функції класів.

ECMAScript мультипарадигмальний, підтримує керованість подіями,
функціональні та імперативний стилі програмування. Він має інтерфейси
прикладного програмування (API) для роботи з текстом, датами,
регулярними виразами, стандартними структурами даних і об’єктною
моделлю документа (DOM).

 React – це бібліотека JavaScript із відкритим вихідним кодом для створення

інтерфейсів користувача на основі компонентів. Його підтримують Meta
(раніше Facebook) і спільнота окремих розробників і компаній. React можна
використовувати як основу для розробки односторінкових, мобільних або
серверних додатків із такими фреймворками, як Next.js. Однак React
займається лише керуванням станом і відтворенням цього стану в DOM,
тому створення додатків React зазвичай вимагає використання додаткових
бібліотек для маршрутизації, а також певної функціональності на стороні
клієнта.

 Bootstrap - це безкоштовний фреймворк CSS з відкритим вихідним кодом,

спрямований на адаптивну веб-розробку, у тому числі і для мобільних
пристроїв. Він містить шаблони дизайну на основі HTML, CSS JavaScript
для типографіки, форм взаємодії, кнопок, навігації та інших компонентів
інтерфейсу.

2.4 Тестовий прототип

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

Як прототип було прийнято рішення реалізувати структуру, яку було

описано вище. Таким чином, створено додаток «Інтерактивна мапа факультету» з
наступним функціоналом:

 Перегляд мапи поверхів Факультету комп’ютерних наук та кібернетики, яка

є зображенням будівлі факультету в профіль (Рис. 1)
 Висвітлення короткої інформації про кожен з поверхів, яка включає основні
аудиторії чи кабінети, розміщені на ньому (Рис. 1)

Рисунок 1 – Сторінка Факультету комп’ютерних наук та кібернетики

 Натискання на поверх для переходу на його сторінку

 Перегляд схеми поверху (Рис. 2)
 Наведення на аудиторію чи кабінет для показу інформації про неї
 Натискання на аудиторію чи кабінет для виділення
 Пошук аудиторії чи кабінету у списку зліва (Рис. 2)
 20

 Якщо викладачів приписано до певного кабінету, то натискання на

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

Рисунок 2 – Схема поверху

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

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

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

ними, потрібно повертатися на сторінку факультету
 Відсутність пошуку аудиторії серед всіх поверхів факультету, оскільки
користувач може не знати, на якому саме поверсі розташовано шукану
аудиторію

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

динамічно-типізованого JavaScript, оскільки через приведення типів виникали
помилки, які було складно знаходити. Не можна не зазначити, що використання
 21

Bootstrap та React-Bootstrap вносило певні незручності через особливості цих

бібліотек.

2.5 Корегування технічного завдання

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

 Перегляд списку поверхів з можливістю фільтрації списку поверхів за

номером аудиторії чи даними про неї
 Можливість змінювати поверх, не залишаючи сторінку схеми поверху

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

використовувані технології:

 Додамо TypeScript – це строго типізована мова для веб-розробки, що є

надбудовою над JavaScript, яка допомагає значно зменшити кількість
помилок через використання різних типів. Також додає можливість
використання швидкого вибору пропозицій зміни коду [2].
 І також замінимо Bootstrap на Tailwind CSS - це першокласний CSS-
фреймворк для швидкого створення користувацьких інтерфейсів. Він є
низькорівневим фреймворком CSS з безліччю налаштувань, який надає усі
так звані будівельні блоки, необхідні для створення дизайнів на будь-який
смак без необхідності перевизначення стилів.
 22

РОЗДІЛ 3 РЕАЛІЗОВАНИЙ ДОДАТОК

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

не були описані раніше, а саме

 React Icons – бібліотека для React, яка додає велику кількість векторних
іконок, що з легкістю можна додати на сторінку.

 React-Router – бібліотека також для React, з допомогою якої можна

перетворити односторінковий веб-додаток в багатосторінковий. Вона додає
можливості керування url-адресою, у тому числі і створення динамічних
посилань. Таким чином, ця бібліотека фактично замінює створення великої
кількості html файлів для переходу на них [9].

 React-svg-map – бібліотека, яка дозволяє додавати svg-об’єкти, виділяти їх

та додавати їм опис.

Переглянемо функціонал додатку:

На головній сторінці розміщено інтерактивну карту (Рис. 3)

Рисунок 3 – Головна сторінка веб-додатку

 23

На карті якій можна обирати об’єкти, вони будуть підсвічуватися, а також

виділятися в боковому меню (Рис. 3). У боковому меню також можна виділяти
об’єкти і в такому разі вони будуть підсвічуватися на карті. Це зроблено для
зручності користувача, аби він розумів, що список і мапа – зв’язані структури. У
списку представлені всі структурні будівлі університету, їх скорочені назви,
адреси, посилання на google карти і посилання на сайт. Певна інформація скрита
від користувача, аби йому не заважати, і її можна переглянути, натиснувши на
будь-яке місце області про структурний підрозділ (Рис. 4).

Рисунок 4 – Інформація про факультет: адреса і посилання на сайт факультету

Також, факультети у списку можна фільтрувати, вписуючи символи у

форму «Пошук факультетів», що розташована зверху.

Якщо ж натиснути на скорочену чи повну назву структурного підрозділу,

користувача перенаправить на сторінку першого поверху цього підрозділу (Рис.
5). Перенаправлення відбувається одразу на схему поверху, а не на сторінку
 24

підрозділу, оскільки таким чином вдається уникнути зайвого кліку користувачу,

про що згадувалося раніше.

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

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

Справа розташована панель поверхів для швидкого переходу між ними. Цю

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

Зліва розташовано список з кабінетами цього поверху, який також можна

фільтрувати, як і список структурних підрозділів. Також за умови приписання
викладача до аудиторії, він з’являється у списку під відповідною аудиторією. Для
 25

зручності було додано і посилання на сторінку викладача на сайті відповідної

кафедри. Список з кабінетами можна сховати аналогічно списку з поверхами.

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

цей кабінет підсвічується, а на схемі з’являється назва кабінету (Рис. 6).

Рисунок 6 – Виділення обраного кабінету на схемі та у списку

При натисканні на кабінет на мапі або у списку, він обирається і

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

Також є можливість фільтрувати / шукати кабінет не тільки обраного

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

Варто зазначити, що також є можливість скопіювати посилання на будь-яку

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

ВИСНОВКИ

У відповідності до поставленої мети та завдань роботи «Веб-додаток

«Інтерактивна карта університету» отримано такі основні результати:
1. Проаналізовано методи подання навігаційних даних, а саме вказівники,
карти та схеми.
2. Розглянуто різницю між фізичними та інтерактивними навігаційними
даними.
3. Проаналізовано навігаційні дані, необхідні користувачу для успішної
подорожі.
4. Створено додаток для висвітлення інформації, пошуку потрібних аудиторій
чи кабінетів викладачів, кафедр, зручної і простої навігації територіями і
будівлями університету, а також їх поверхами.
5. Протестовано створений додаток та виправлено виявлені помилки,
більшість опитаних користувачів планують використовувати створений
додаток у майбутньому.
На основі результатів дослідження можна зробити такі висновки:

1. Під час розробки технічного проекту дуже важливо заздалегідь визначити

технічне завдання, методику розробки, а також технології, що будуть
використовуватися.
2. Варто бути готовим до змін як технологій, так і технічного завдання, тому
необхідно реалізовувати код, який легко читати, оптимізувати і
використовувати повторно.
3. Величезну роль у процесі розробки грає тестування, причому не тільки
розробником своєї роботи, але й від третьої особи – тобто коли кінцеві
користувачі використовують проміжну версію для виявлення помилок чи
пропозицій покращень.
4. Створений веб-додаток «Інтерактивна мапа університету» можна
використовувати як людям, які лише знайомляться з університетом і ще не
знають або не вивчили, де знаходяться ті чи інші об’єкти, так і досвідченим
 28

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

підрозділу, в якому вони раніше не були.
5. Варто зазначити, що до створеного додатку можна додавати функціонал і
продовжувати його розвивати. Так, можна додати інтеграцію з сервісом
“MyTimetable.live”, який також був реалізований студентами Факультету
комп’ютерних наук та кібернетики як наукова робота. Ще одним доволі
важливим напрямом покращення є створення мобільної версії додатку,
оскільки у сучасний час все більше і більше людей користуються
смартфонами для вирішення задач пересування.
 29

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

1. Лавров 1974 – Лавров В. А. Городская среда, её состояние, преобразование

и условия восприятия // Строительство и архитектура Белоруссии. 1974. № 
2. — 214 с.

2. Programming with Types: Examples in TypeScript / Vlad Riskutia // Manning.

2019. — 336 p. ISBN 9781638350262.

3. Платонов К.К. Занимательная психология. М. : Молодая гвардия, 1986. —

280 с.
4. Цойгнер Г. Учения о цвете. М. : Стройиздат, 1971. — 158 с.
5. Могилев А.В. Технологии обработки текстовой информации. Технологии
обработки графической и мультимедийной информации / А.В. Могилев,
Л.В. Листрова. СПб. : БХВ-Петербург, 2010. — 320 с.
6. Taking your talent to the Web : a guide for the transitioning designer / Jeffrey
Zeldman // Indianapolis, Ind. : New Riders. 2001. — 452 p. ISBN 0735710732.

7. The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business
Win / Gene Kim, George Spafford, Kevin Behr. // IT Revolution. Portland. 2013.
— 607 p. ISBN 0988262592.

8. Why did we build Visual Studio Code? / VS Code User guide // Джерело
доступу: https://code.visualstudio.com/docs/editor/whyvscode

9. React Router docs // Джерело доступу: https://reactrouter.com/docs/en/v6