Разработка программного веб-приложения поддержки визуализации данных в бизнес анализе

1.1 Опис предметної області та аналіз програмних рішень

Веб-додаток – це будь-який сайт з елементами інтерактиву. Це означає, що відвідувач може взаємодіяти з матеріалом, функціями: натискати кнопки, заповнювати форми, запитувати прайс, здійснювати покупки.
Практично будь-який інтернет-ресурс входить в їх число. Це пошукові системи, відео сервіси типу youtube, соцмережі, будь-які веб-сайти з функціями аутентифікації користувача, покупки, замовлення, бронювання, калькулятори кредитів.
Технічно це інтернет-додаток з архітектурою «клієнт-сервер». Клієнтом служить браузер, сервером – веб-сервер. Зв’язок відбувається за допомогою мережі. Web-додаток складається спочатку зі сторінок з частково або повністю невизначеним вмістом. Підсумкове зміст веб-сторінок сформується тоді, коли конкретний користувач відправить запит[1].
…

1.2.1 HTML та CSS

HTML – стандартизована мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок містять опис розмітки на мові HTML (або XHTML). Мова HTML інтерпретується браузерами; отриманий в результаті інтерпретації форматований текст відображається на екрані монітора комп’ютера або мобільного пристрою. Ця мова виглядає, як система верстання, яка визначає, як і які елементи повинні розташовуватися на веб-сторінці. Інформація на сайті, спосіб її подання та оформлення залежать виключно від розробника і тих цілей, які він перед собою ставить.
HTML створювався як мова для обміну науковою і технічною документацією, придатний для використання людьми, які не є фахівцями в області верстання.
Будь-який документ на мові HTML являє собою набір елементів, причому початок і кінець кожного елемента позначається спеціальними позначками – тегами. Елементи можуть бути порожніми, тобто не містять ніякого тексту та інших даних (наприклад, тег розриву рядків
).
…

1.2.2 JavaScript

JavaScript спочатку створювався для того, щоб зробити web-сторінки «живими». Програми на цій мові називаються скриптами. У браузері вони підключаються безпосередньо до HTML і, як тільки завантажується сторінка – тут же виконуються. Програми на JavaScript – звичайний текст. Вони не вимагають якоїсь спеціальної підготовки. В цьому плані JavaScript сильно відрізняється від іншої мови, який називається Java.
Коли створювався мову JavaScript, у нього спочатку була інша назва: «LiveScript». Але тоді був дуже популярний мову Java, і маркетологи вирішили, що схожу назву зробить нову мову більш популярним.
Планувалося, що JavaScript буде таким собі «молодшим братом» Java. Однак, історія розпорядилася по-своєму, JavaScript сильно виріс, і зараз це абсолютно незалежний мову, зі своєю специфікацією, яка називається ECMAScript, і до Java не має ніякого відношення.
JavaScript може виконуватися не тільки в браузері, а де завгодно, потрібна лише спеціальна програма – інтерпретатор.
…

1.2.3 Специфіка SPA

SPA – це web-додаток, розміщене на одній web-сторінці, яка для забезпечення роботи завантажує весь необхідний код разом із завантаженням самої сторінки. Додаток такого типу з’явилися порівняно недавно, з початком ери HTML5 і SPA є типовим представником додатків на HTML5. SPA – це додатки написані на мові JavaScript.
Односторінкові додатки працюють в рамках браузера і не вимагають перезавантаження сторінки або завантаження додаткових сторінок під час використання. Подібні додатки щодня використовують мільйони користувачів, навіть не помічаючи цього. Найпопулярніші приклади: GitHub, Gmail, Google Maps і навіть Facebook.
Вони, як правило, максимально інтерактивні, причому настільки, що у користувача складається відчуття, ніби він працює з десктопних додатком: реакція програми на призначені для користувача дії моментальна в більшості випадків.
…

1.3 Мета та завдання для реалізації веб-додатку програмних засобів візуалізації даних у бізнес аналізі

Метою даного проекту є надання користувачам веб-додатку можливості візуалізувати дані для прийняття ефективного рішення у бізнес-аналізі.
Проект розрахований для користувачів, які працюють у сфері бізнес-аналітиці, а також звичайних користувачів.
Основна мета просування проекту в мережі Інтернет – для охоплення більш широкого спектру та територій використання проекту. В подальшому нарощуючи та покращуючи вже існуючий функціонал.
Виділено основні завдання дипломної роботи:
• описати предметну область та зробити аналіз вже існуючих додатків;
• зробити аналіз засобів розробки програмних рішень (HTML, CSS, JavaScript та специфікація SPA);
• вибір шаблону, макету проектування;
• розробка проекту;
• опис методів роботи системи;
• розробка функціональної частини системи;
• можливість користувачів.
…

2.1 Вибір шаблону проектування

Веб-додаток візуалізації даних у бізнес аналізі відповідає стандартам шаблону проектування MVC (Модель-Уявлення-Контролер).
Шаблон MVC є рішенням структури веб-систем, відокремлюючи логіку системи від його візуальної частини.
MVC – схема розділення даних системи, інтерфейсу користувача і управляючою логікою на три окремі компоненти: модель, уявленнята контролер – таким чином, що модифікація кожного компонента може здійснюватися незалежно від інших. Головна мета використання даної концепції полягає у відокремленні бізнес-логіки (моделі) від її візуалізації (уявлення). За рахунок такого відокремлення зростає можливість повторного використання коду. Найбільш доречним застосуванням даної концепції стануть випадки, коли користувач повинен бачити одні й ті ж дані одночасно в різних контекстах.
Модель (Model) зберігає дані, містячи зв’язок з базою даних і реагує на команди контролера, змінюючисвійстан.
…

2.2 Розробка проекту

Проект створюється в середовищі розробки Sublime Text. Середовище Sublime Text має зручний та мінімалістичний інтерфейс, який допомагає розробнику створювати код набагато швидше, при цому гнучко налаштовується. Також Sublime Text – це мультиплатформенний текстовий редактор.
Веб-додаток візуалізації даних у бізнес аналізі був розроблений за допомогою мови розмітки HTML, мови CSS, яка відповідає за візуальне уявлення документів користувачеві, а також мови Javascript, застосовується в браузерах як мова сценаріїв для додання інтерактивності веб-сторінок,
Це популярний комплекс сучасних web-інструментів, які необхідно використовувати для створення проектів.
Встановивши проект, необхідно створити директорію та основні файли проекту (рис.2.2).

Рисунок 2.2 – Директорія та структура файлів
Директорія project_dip містить усі файли веб-додатку, які вікористовуются – файли html, css та javascript. За допомогою цих компонентів виконується логіка програми.
…

2.3 Опис методів роботи системи

Функції – ключова концепція в JavaScript. Функція в JavaScript спеціальний тип об’єктів, що дозволяє формалізувати засобами мови певну логіку поведінки і обробки даних.
Визначення функцій – звичайне визначення перемінної, де значення, яке отримує перемикання, є функцією.
Функція створена вираженням, починающимся з функцією ключового слова.
У функцій є набір параметрів (в даному випадку, тільки x), і те, що містять інструкції, необхідні для виконання при виборі функцій.
Тіло функції завжди укладає в фігурні скобки, навіть якщо воно складається з однієї інструкції.
У функції можуть бути кілька параметрів, або вообще їх не буде.
Параметри функцій – такі ж перемінні, але їх початкові значення задаються при виході функцій, а не в коду.
Важливе властивість функцій в тому, що змінюються, створюються в межах функцій (включаючи параметри), локальних у цій функції.
…

2.4.1 Опис програмного коду

Для розроблення проекта необхідно спочатку створити каркас веб-додатка за допомогою мови розмітки HTML, а також створити зовнішній вигляд веб-сторінки за допомогою мови стилів CSS. За допогою цих мов, була розроблена початкова сторінка веб-додатка і сам додаток – main.html та style.css, project.html та project_style.css. Підключенння css-файл (рис.2.3).

Рисунок 2.3 – Підключенння css-файла

За допомогою мови стилів на початковій сторінці була додана анімація до кнопки при переходу на веб-додаток. Кнопка при наведены курсора обертається та змінює колір, також змінюється текст.
Розробка частини веб-додатка почалась зі створення header. У header входить логотип веб-додатку та спливаюче меню і пошук по таблиці. Спливаюче меню було розроблено на мові стилів CSS.
Для розроблення функціональної частини веб-додатка була використана мова програмування Javascript (дозволяє застосовувати складні речі на web сторінці). Підключенння js-файла (рис.2.4).

Рисунок 2.
…

2.4.2 Опис основних форм інтерфейсу програми

Інтерфейс користувача починається із початкової сторінки (рис.2.7), на якій можна перейти через конопку на головну сторінку веб-додатка.

Рисунок 2.7 – Початкова сторінка

Після натискання на кнопку, користувач буде перенаправленний на головну сторінку додатка, яке є односторінковим додатком SPA, це web-додаток, розміщенний на одній сторінці, яка для забезпечення роботи завантажує все javascript-файли (модулі, віджіти, контроли і т.д.), а також файли CSS разом із завантаженням самої сторінки. Одним з головних плюсів SPA є те, що можлива робота на великій кількості пристроїв, а значить, створивши один додаток, можливо отримувати набагато більшу аудиторію користувачів ніж при використанні стандартного підходу. Тому був обранний односторінковий веб-додаток.
…