ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6026| Title: | Веб-застосунок для управління персональними покупками користувачів |
| Authors: | Оксамитна, Любов Павлівна Стеценко, Аліна Миколаївна |
| Keywords: | СПИСКИ ПОКУПОК,;ВЕБ-ЗАСТОСУНОК,;РОЗРОБКА,;БАЗИ ДАНИХ,;ПРОЄКТУВАННЯ,;УПРАВЛІННЯ,;ФУНКЦІОНАЛЬНІСТЬ,;ОПТИМІЗАЦІЯ. |
| Issue Date: | 11-Jun-2025 |
| Abstract: | У сучасному світі організація повсякденних завдань, таких, як планування покупок стає все більш актуальною. Це пов’язано зі зростанням темпу життя та необхідністю ефективного управління часом. Веб-застосунки для створення списків покупок є зручними інструментами, які дозволяють користувачам швидко і легко організовувати свої потреби. Вони допомагають уникнути непотрібних витрат часу та сприяють оптимізації процесу планування. Метою кваліфікаційної роботи бакалавра є розробка веб-застосунку для створення списків покупок, який забезпечує користувачам можливість швидкого та зручного управління своїми покупками. Об’єкт дослідження: процес створення та управління списками покупок за допомогою веб-застосунків. Предмет дослідження: веб-застосунок для управління персональними покупками користувачів. Розробка такого застосунку сприяє покращенню користувацького досвіду та надає можливість оптимізувати процеси планування. Основні положення і результати кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській науково-практичній конференції ЧДТУ (Черкаси, 2025). |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6026 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Стеценко Аліна_КН-2101_2024-2025.pdf Restricted Access | 2.92 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Веб-застосунок для управління персональними покупками
користувачів»
Виконав: студент 4 курсу, групи КН-2101
спеціальності 122 − «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Стеценко Аліна Миколаївна
Керівник __________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2025 рік
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2025 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Стеценко Аліні Миколаївні
(прізвище, ім’я, по батькові)
1. Тема роботи Веб-застосунок для управління персональними покупками користувачів
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. №53/03-03.
2. Строк подання студентом роботи до 11 червня 2025 року.
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проєктування та розробка веб-застосунку для управління персональними покупками
користувачів.
4.3. Програмна реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 52114-01.
5.2. Додаток Б. Текст програми.
5.4. Презентація у вигляді 32 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 17.12.2024
КАЛЕНДАРНИЙ ПЛАН
Строк
№ з/п Назва етапів кваліфікаційної роботи бакалавра виконання Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
17.12.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 12.01.2025 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 18.03.2025 Виконано
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 05.04.2025 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2025 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
26.05.2025 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 11.06.2025 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2025 Виконано
Студент _____________________________ Аліна СТЕЦЕНКО
(підпис)
Керівник роботи ____________________________ Любов ОКСАМИТНА
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 102 с., 24 рис., 2 таблиці, 15
використаних джерел, 5 додатків.
Актуальність теми. У сучасному світі організація повсякденних завдань,
таких, як планування покупок стає все більш актуальною. Це пов’язано зі зростанням
темпу життя та необхідністю ефективного управління часом. Веб-застосунки для
створення списків покупок є зручними інструментами, які дозволяють користувачам
швидко і легко організовувати свої потреби. Вони допомагають уникнути
непотрібних витрат часу та сприяють оптимізації процесу планування.
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є
розробка веб-застосунку для створення списків покупок, який забезпечує
користувачам можливість швидкого та зручного управління своїми покупками.
Для досягнення поставленої мети в роботі вирішувалися такі завдання:
дослідження аналогів та виявлення їхніх переваг і недоліків;
проєктування та розробка веб-застосунку з інтуїтивно зрозумілим інтерфейсом
для виконання базових функцій;
проєктування структури бази даних для зберігання списків і товарів;
забезпечення функціональності для створення, редагування, видалення та
повторного використання списків;
тестування веб-застосунку для перевірки стабільності, функціональності та
безпеки.
Об’єкт дослідження: процес створення та управління списками покупок за
допомогою веб-застосунків.
Предмет дослідження: веб-застосунок для управління персональними
покупками користувачів.
Методи дослідження. Для досягнення поставленої мети в кваліфікаційній
роботі бакалавра використовувалися наступні методи:
Порівняльний метод – аналіз існуючих веб-застосунків для створення списків
покупок з метою виявлення їхніх функціональних можливостей та визначення
оптимальних рішень для користувачів.
Аналітичний метод – аналіз потреб сучасних користувачів та визначення
ключових функцій, які повинні бути інтегровані у веб-застосунок.
Теоретичний метод – вивчення теоретичних аспектів розробки веб-застосунків,
зокрема методів роботи з базами даних, побудови інтерфейсу та інтеграції
функціональних можливостей.
Апробація результатів роботи. Основні положення і результати
кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській
науково-практичній конференції ЧДТУ (Черкаси, 2025).
Публікації. Результати кваліфікаційної роботи бакалавра опубліковані в
збірнику тез доповідей ЧДТУ: Стеценко А. М., Оксамитна Л. П. Веб-додаток для
управління персональними покупками користувачів: Збірник тез доповідей
студентської науково-практичної конференції ЧДТУ : 22-23 квітня 2025 / [упорядник
Мельник І.В.]; Міністерство освіти і науки України, Черкаський державний
технологічний ун-т. Черкаси : ЧДТУ, 2025. С. 23.
Перелік ключових слів: СПИСКИ ПОКУПОК, ВЕБ-ЗАСТОСУНОК,
РОЗРОБКА, БАЗИ ДАНИХ, ПРОЄКТУВАННЯ, DJANGO, УПРАВЛІННЯ,
ТЕСТУВАННЯ, ФУНКЦІОНАЛЬНІСТЬ, ОПТИМІЗАЦІЯ.
ABSTRACT
Work contains. 102 pages, 24 figures, 2 tables, 15 sources used, 5 attachments.
Actuality of theme. In the modern world, the organization of daily tasks, such as
planning purchases, is becoming increasingly relevant. This is driven by the accelerating
pace of life and the necessity for effective time management. Web applications for creating
shopping lists are convenient tools that allow users to quickly and easily organize their
needs. Such applications help avoid unnecessary time expenditures and contribute to the
optimization of the planning process.
Purpose and tasks of the research. The purpose of this bachelor’s qualification work
is to develop a web application for creating shopping lists, providing users with the ability
to quickly and conveniently manage their purchases.
To achieve this purpose, the following objectives were addressed:
studying existing analogs and identifying their advantages and disadvantages;
designing and developing a web application with an intuitive interface for performing
basic functions;
designing the database structure for storing lists and items;
ensuring functionality for creating, editing, deleting, and reusing shopping lists;
testing the application to verify its stability, functionality, and security.
The object of research. The process of creating and managing shopping lists using
web applications.
The subject of research: A website for creating and managing shopping lists.
Research methods: To achieve the purpose of the bachelor’s qualification work, the
following methods were applied.
Comparative Method – analyzing existing web applications for creating shopping lists
to identify their functional capabilities and determine optimal solutions for users.
Analytical Method – analyzing the needs of modern users and defining the key
features that should be integrated into the web application.
Theoretical Method – studying the theoretical aspects of web application
development, including methods for working with databases, interface design, and
integration of functional features.
Approval of the results of work. The main provisions and results of the bachelor's
qualification work were reported and discussed at the student scientific-practical conference
of CHDTU (Cherkasy, 2025).
Publications. The results of the bachelor's qualification work are published in the
collection of abstracts of reports of the Cherkasy State Technical University: Stetsenko A.
M., Oksamytna L. P. Web application for managing users' personal purchases: Collection
of abstracts of reports of the student scientific and practical conference of the Cherkasy State
Technical University: April 22-23, 2025 / [compiler Melnyk I.V.]; Ministry of Education
and Science of Ukraine, Cherkasy State Technological University. Cherkasy: Cherkasy
State Technical University, 2025. P. 23.
The list of keywords: SHOPPING LISTS, WEB APPLICATION,
DEVELOPMENT, DATABASES, DESIGN, DJANGO, MANAGEMENT, TESTING,
FUNCTIONALITY, OPTIMIZATION.
7
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 9
ВСТУП 10
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ 13
1.1 Аналіз сучасного стану вибору сайтів для створення списків покупок 13
1.2 Огляд існуючих аналогів веб-ресурсів для онлайн-запису клієнтів у сфері
послуг 14
1.2.1 Аналіз веб-ресурсу «Google Keep» 14
1.2.2 Аналіз сайту «Any.do» 16
1.2.3 Аналіз веб-сервісу «Microsoft To Do» 17
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка
завдання 18
Висновки до розділу 1 20
2 ПРОЄКТУВАННЯ ВЕБ-ЗАСТОСУНКУ ДЛЯ СТВОРЕННЯ СПИСКІВ
ПОКУПОК 22
2.1 Опис функціонального програмного середовища для розробки 22
2.2 Основні принципи розробки веб-застосунків 24
2.3 Архітектура веб-застосунку для створення списків покупок 27
2.4 Розробка діаграми варіантів використання 30
2.5 Проєктування структури бази даних 31
2.6 Опис процесу проєктування структури веб-застосунку для створення списків
покупок 33
2.7 Проєктування інтерфейсу користувача 36
Висновки до розділу 2 38
3 ПРОГРАМНА РЕАЛІЗАЦІЯ 39
3.1 Постановка завдання 39
3.2 Інтерфейс веб-застосунку для управління персональними покупками
користувачів 42
8
3.3 Програмна реалізація веб-застосунку для управління персональними
покупками користувачів 44
3.4 Особливості тестування веб-застосунку 50
3.5 Тестування веб-застосунку для управління персональними покупками
користувачів 52
Висновки до розділу 3 56
ВИСНОВКИ 57
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 60
Додаток А. Специфікація 482.ЧДТУ. 52114-01 62
Додаток Б. Текст програми 64
Додаток В. Інструкція користувача 94
Додаток Г. Структура бази даних 98
Додаток Д. Публікація по темі кваліфікаційної роботи бакалавра 101
9
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
CRUD – Базовий набір операцій для управління даними: створення,
читання, редагування та видалення.
HTML – М ова розмітки для створення структури веб-сторінок.
CSS – Мова стилізації, яка визначає зовнішній вигляд елементів
веб-сторінок.
JavaScript – Мова програмування для додавання інтерактивності до веб-
сторінок.
Django – Фреймворк Python для розробки веб-додатків із
використанням принципу MVT.
SQLite – Легка реляційна база даних, що не вимагає серверної
частини для роботи.
UI – Користувацький інтерфейс для взаємодії користувача із
системою.
UX – Досвід користувача, який відображає враження від
взаємодії з додатком.
ORM – Технологія для взаємодії з базою даних через об’єктно-
орієнтовані конструкції.
HTTP – Протокол передачі даних для обміну інформацією між
клієнтом і сервером.
API – Інтерфейс для взаємодії між різними компонентами
програмного забезпечення.
SQL – Мова для запитів до баз даних, яка використовується для
управління та маніпуляції даними.
10
ВСТУП
У сучасному світі, де технології стрімко розвиваються та стають невід’ємною
частиною повсякденного життя, важливою складовою ефективного управління
стають зручні та інтуїтивні цифрові інструменти. Одним із таких рішень є веб-
застосунки, які допомагають організовувати та спрощувати виконання щоденних
завдань. Однією з актуальних потреб є створення інструментів для ефективного
управління покупками, що дозволяють користувачам планувати, контролювати та
оптимізувати процес закупівель.
Враховуючи сучасний темп життя, організація та планування покупок стають
важливими аспектами побуту кожної людини. Веб-застосунок для створення списків
покупок спрощує цей процес, дозволяючи користувачам швидко створювати,
редагувати та керувати своїми списками товарів. Вони дозволяють не тільки
підвищити продуктивність, а й зменшити кількість забутих покупок, що сприяє
економії часу та ресурсів.
Актуальність кваліфікаційної роботи бакалавра.
Актуальність дослідження зумовлена зростаючою потребою суспільства в
автоматизації та цифровізації побутових процесів. Більшість користувачів прагнуть
мати доступ до зручних інструментів для планування покупок, що дозволяє
зекономити час та уникнути непотрібних витрат. Веб-застосунок для створення
списків покупок є практичним рішенням, яке відповідає запитам сучасного
користувача та спрощує процес управління покупками.
Зростання конкуренції серед розробників цифрових рішень також стимулює
створення інноваційних продуктів, що дозволяють користувачам більш ефективно
керувати своїми ресурсами. Розробка такого застосунку сприяє покращенню
користувацького досвіду та надає можливість оптимізувати процеси планування.
Мета кваліфікаційної роботи бакалавра – створення веб-застосунку для
формування та управління списками покупок, який дозволить користувачам легко
створювати, редагувати та повторно використовувати свої списки.
Для досягнення поставленої мети в роботі вирішувалися такі завдання:
11
дослідження аналогів та виявлення їхніх переваг і недоліків;
проєктування та розробка веб-застосунку з інтуїтивно зрозумілим
інтерфейсом для виконання базових функцій;
проєктування структури бази даних для зберігання списків і товарів;
забезпечення функціональності для створення, редагування, видалення та
повторного використання списків;
тестування веб-застосунку для перевірки стабільності, функціональності та
безпеки.
Об’єкт дослідження: процес створення та управління списками покупок за
допомогою веб-застосунків.
Предмет дослідження: веб-застосунок для управління персональними
покупками користувачів.
Методи дослідження. Для досягнення поставленої мети в кваліфікаційній
роботі бакалавра використовувалися наступні методи:
Порівняльний метод – аналіз існуючих веб-застосунків для створення списків
покупок з метою виявлення їхніх функціональних можливостей та визначення
оптимальних рішень для користувачів.
Аналітичний метод – аналіз потреб сучасних користувачів та визначення
ключових функцій, які повинні бути інтегровані у веб-застосунок.
Теоретичний метод – вивчення теоретичних аспектів розробки веб-
застосунків, зокрема методів роботи з базами даних, побудови інтерфейсу та
інтеграції функціональних можливостей.
Апробація результатів роботи. Основні положення і результати
кваліфікаційної роботи бакалавра доповідалися і були обговорені на студентській
науково-практичній конференції ЧДТУ (Черкаси, 2025).
Публікації. Результати кваліфікаційної роботи бакалавра опубліковані у
збірнику тез доповідей ЧДТУ: Стеценко А. М., Оксамитна Л. П. Веб-додаток для
управління персональними покупками користувачів: Збірник тез доповідей
студентської науково-практичної конференції ЧДТУ : 22-23 квітня 2025 /
12
[упорядник Мельник І.В.]; Міністерство освіти і науки України, Черкаський
державний технологічний ун-т. Черкаси : ЧДТУ, 2025. С. 23.
13
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану вибору сайтів для створення списків покупок
В епоху цифрових технологій управління покупками стає дедалі зручнішим
завдяки широкому вибору онлайн-інструментів. Сайти або веб-застосунки для
створення списків покупок дозволяють користувачам ефективно планувати
закупівлі, уникати непотрібних витрат та організовувати споживчі звички. Сучасний
ринок пропонує різноманітні рішення – від простих веб-застосунків до
багатофункціональних платформ, які інтегруються з іншими сервісами, такими як
календарі, системи нагадувань або платформи онлайн-шопінгу.
Розвиток застосунків для створення списків покупок зумовлений потребою
користувачів у спрощенні процесів планування. У повсякденному житті багато
людей стикаються з проблемою забутих товарів або нераціональних витрат під час
відвідування магазинів. Саме тому застосунки для формування списків стають
популярним інструментом для підвищення ефективності покупок. Дослідження
показують, що використання таких застосунків сприяє економії часу та ресурсів, а
також дозволяє уникати зайвих витрат завдяки чітко визначеним пріоритетам.
Сучасні веб-ресурси для створення списків покупок розвиваються в напрямку
автоматизації та інтеграції з великими торговельними мережами. Це дозволяє
користувачам не лише складати списки, а й здійснювати покупки онлайн,
отримуючи товари додому або плануючи самовивіз. Водночас зростає популярність
мобільних застосунків, що синхронізуються з веб-версіями сервісів, надаючи
можливість редагування списків у реальному часі та доступу до них з будь-якого
пристрою.
Важливою особливістю сучасних платформ є можливість повторного
використання списків, що дозволяє економити час при регулярних закупівлях. Деякі
платформи також надають функції аналітики, які дозволяють відстежувати витрати
та коригувати бюджет відповідно до споживчих звичок.
14
Крім того, сучасні платформи для створення списків покупок дедалі частіше
впроваджують функції колективного доступу, що дозволяє кільком користувачам
одночасно редагувати списки. Це стає особливо актуальним для родин та команд,
які планують спільні закупівлі або готуються до заходів.
Ринок веб-застосунків для створення списків покупок постійно зростає
завдяки зростанню попиту та підвищенню конкуренції серед розробників.
Платформи пропонують інтуїтивно зрозумілий інтерфейс, можливість додавання
фотографій товарів, а також функції голосового введення, що спрощує процес
створення списків. Деякі сервіси навіть надають рекомендації щодо товарів на
основі попередніх покупок або поточних акцій в магазинах.
Аналіз сучасного стану веб-застосунків для створення списків покупок
свідчить про високий рівень їхньої популярності та важливість для користувачів у
всьому світі. Збільшення кількості подібних платформ та постійне розширення
їхнього функціоналу робить процес планування покупок зручнішим, швидшим і
більш організованим, сприяючи розвитку культури усвідомленого споживання.
1.2 Огляд існуючих аналогів веб-ресурсів для онлайн-запису клієнтів у
сфері послуг
Сучасний ринок пропонує численні інструменти для створення та управління
списками покупок, які спрощують процес планування та закупівель. Ці сервіси
дозволяють користувачам організовувати свої покупки, зберігати шаблони списків,
додавати товари за допомогою голосових команд та навіть ділитися списками з
іншими членами родини або колегами. Інтеграція таких платформ з мобільними
застосунками та іншими сервісами значно підвищує їхню зручність та
функціональність.
1.2.1 Аналіз веб-ресурсу «Google Keep»
«Google Keep» – це один із найпопулярніших інструментів для створення
списків, зокрема списків покупок. Це безкоштовний сервіс від Google, що дозволяє
створювати нотатки, списки завдань, а також аудіо-замітки та зображення [1].
15
Однією з головних переваг «Google Keep» є його інтеграція з іншими сервісами
Google, такими як «Google Calendar» і «Google Assistant», що робить його зручним
для користувачів екосистеми Google.
Функціонал «Google Keep» дозволяє швидко створювати та редагувати списки
покупок за допомогою тексту або голосових команд. Крім того, користувач може
позначати кожен пункт списку та відзначати виконані завдання. Завдяки
синхронізації в реальному часі всі зміни автоматично оновлюються на всіх
пристроях, підключених до облікового запису Google (рис. 1.1).
Рисунок 1.1 – Інтерфейс користувача додатку «Google Keep» [1]
«Google Keep» також має можливість надавати спільний доступ до списків. Це
дозволяє членам родини або друзям спільно редагувати списки покупок у реальному
часі. Зручність цієї функції полягає у швидкому оновленні інформації та можливості
залишати коментарі або підказки.
Інтерфейс сервісу простий і зрозумілий, що дозволяє легко додавати кольорові
мітки, нагадування та вкладення до нотаток. Це робить «Google Keep»
універсальним інструментом не тільки для створення списків покупок, але й для
загальної організації повсякденних справ.
Проте, недоліком «Google Keep» є обмежений набір функцій для аналітики
витрат або автоматизації процесів. На відміну від спеціалізованих платформ для
16
планування покупок, «Google Keep» не має можливості інтеграції з торговельними
мережами або отримання інформації про актуальні знижки. Водночас, для базових
завдань цей сервіс є ефективним і доступним інструментом.
1.2.2 Аналіз сайту «Any.do»
«Any.do» – це ще один потужний інструмент для створення списків завдань та
покупок [2]. Його головна особливість полягає в можливості інтеграції з
календарями та голосовими помічниками, такими як «Amazon» «Alexa» та «Google
Assistant». «Any.do» дозволяє створювати списки покупок та планувати завдання з
гнучкими параметрами налаштування (рис. 1.2).
Рисунок 1.2 – Інтерфейс користувача додатку «Any.do» [2]
Платформа надає можливість створювати кілька категорій списків, що
дозволяє організовувати не тільки покупки, але й інші види завдань. Завдяки
інтуїтивно зрозумілому інтерфейсу користувачі можуть легко додавати нові пункти
до списку, встановлювати нагадування та терміни виконання.
Одна з ключових функцій «Any.do» – це можливість створення нагадувань на
основі геолокації. Наприклад, користувач отримує сповіщення про список покупок,
коли знаходиться поруч із магазином. Це підвищує ефективність використання
сервісу та допомагає уникати забутих покупок.
17
«Any.do» також пропонує функцію «Планувальник дня», яка дозволяє
користувачеві переглядати всі заплановані завдання та списки покупок на день. Це
сприяє кращій організації часу та допомагає ефективно планувати день.
Недоліком «Any.do» є обмежена кількість безкоштовних функцій. Для
повноцінного використання всього функціоналу користувачам необхідно оформити
преміум-підписку. Водночас, платна версія пропонує широкий набір інструментів
для автоматизації процесів та підвищення продуктивності.
1.2.3 Аналіз веб-сервісу «Microsoft To Do»
«Microsoft To Do» – це популярний сервіс для створення списків. Цей
інструмент дозволяє створювати списки завдань та покупок із можливістю
встановлення пріоритетів та нагадувань [3] (рис. 1.3).
Рисунок 1.3 – Графічний інтерфейс користувача сервісу «Microsoft To Do» [3]
«Microsoft To Do» успадкував від «Wunderlist» простий та функціональний
інтерфейс, який дозволяє швидко додавати та редагувати списки. Користувачі
можуть створювати кілька списків одночасно, а також ділитися ними з іншими
користувачами для спільного виконання завдань.
18
Інтеграція з «Microsoft 365» дозволяє легко використовувати «To Do» в
робочому середовищі, синхронізуючи завдання з іншими продуктами Microsoft. Це
робить платформу ідеальною для корпоративного використання та організації
командної роботи [3].
«Microsoft To Do» має функцію розумних списків, яка автоматично створює
категорії завдань на основі їхніх пріоритетів та термінів виконання. Завдяки цьому
користувачі можуть легко відстежувати прогрес у виконанні покупок або інших
завдань.
Серед недоліків «Microsoft To Do» можна відзначити відсутність деяких
функцій, які були доступні у «Wunderlist», зокрема можливість додавання вкладень
у безкоштовній версії. Проте, загальна функціональність сервісу залишається на
високому рівні, що робить його одним із найкращих аналогів на ринку.
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
Аналіз існуючих рішень для створення списків покупок дозволяє виділити
ключові функції та переваги кожного з розглянутих інструментів. «Google Keep»,
«Any.do» та «Microsoft To Do» є лідерами у сфері управління завданнями та
списками, але мають різні підходи до реалізації своїх функцій.
«Google Keep» – це простий і доступний інструмент, який чудово інтегрується
з екосистемою Google. Його основні переваги – швидкість створення списків,
можливість голосового введення та простий обмін нотатками з іншими
користувачами [1]. Однак, сервіс має обмежений функціонал для аналітики та
автоматизації, що може стати недоліком для користувачів, які шукають більш
просунуті рішення.
«Any.do» – це потужний інструмент, орієнтований на продуктивність і
організацію часу [2]. Його головна особливість – інтеграція з голосовими
асистентами та можливість налаштування геолокаційних нагадувань. Однак, значна
19
частина функцій доступна лише в платній версії, що може обмежити його
використання серед деяких категорій користувачів.
«Microsoft To Do» пропонує надійний набір функцій для організації завдань та
покупок, з інтеграцією з продуктами Microsoft 365 [3]. Його основна перевага –
можливість створювати складні списки та нагадування з використанням пріоритетів.
Водночас деякі функції, які раніше були доступні у «Wunderlist», тепер обмежені у
безкоштовній версії «Microsoft To Do».
На основі порівняння можна зробити висновок, що кожен із розглянутих
інструментів має свої сильні сторони, які можуть задовольнити потреби різних груп
користувачів. «Google Keep» ідеально підходить для швидких та простих списків,
«Any.do» – для більш складних задач із нагадуваннями, а «Microsoft To Do» – для
інтеграції у робоче середовище.
У таблиці 1.1 висвітлено порівняння обраних веб-застосунків для створення
списків покупок, а саме: «Booksy», «Zocdoc», «OpenTable».
Таблиця 1.1 – Порівняльна таблиця веб-застосунків
Функція Google Keep Any.do Microsoft To Do
Спільний доступ до Так Так Так
списків
Інтеграція з Google Google Calendar, Alexa Microsoft 365
календарями Calendar
Нагадування Так Так (геолокація) Так
Голосовий ввід Так Так Так
Доступність Безкоштовно Платна підписка Безкоштовно
(розширено)
Мобільний додаток Так Так Так
Інтерфейс Простий Інтуїтивний Мінімалістичний
Постановка завдання. На основі аналізу існуючих рішень буде розроблено
веб-застосунок, що вирішує основні завдання, характерні для створення та
управління списками покупок.
Основні функціональні можливості застосунку включають:
20
створення списків покупок користувачами;
додавання товарів до списків із можливістю вказувати їх кількість, ціну або
інші параметри;
редагування списків та товарів, що дозволяє користувачам оновлювати
інформацію в реальному часі;
видалення як окремих товарів, так і повних списків;
можливість повторного використання вже створених списків, що спрощує
процес регулярних закупівель.
Висновки до розділу 1
Аналіз ринку веб-ресурсів для створення списків покупок показав значну
кількість доступних платформ, що допомагають користувачам ефективно планувати
закупівлі. Інструменти, такі як «Google Keep», «Any.do» та «Microsoft To Do»,
пропонують різні підходи до створення та управління списками, забезпечуючи
зручність, мобільність та інтеграцію з іншими сервісами.
Кожен із розглянутих сервісів має свої переваги, проте жоден із них не є
універсальним рішенням. Це вказує на необхідність створення інструменту, який
об’єднує простоту, функціональність та можливість повторного використання
списків.
Розроблений веб-застосунок надасть можливість створювати, редагувати,
видаляти та повторно використовувати списки покупок, що спрощує процес
планування та підвищує ефективність. Застосунок орієнтований на задоволення
базових потреб користувачів та є гнучким інструментом для організації закупівель.
Розробка подібних рішень є важливим кроком у спрощенні повсякденних
завдань користувачів. Подальший розвиток додатку може включати додаткові
функції, такі як інтеграція з онлайн-магазинами та аналітика витрат.
21
2 ПРОЄКТУВАННЯ ВЕБ-ЗАСТОСУНКУ ДЛЯ СТВОРЕННЯ СПИСКІВ
ПОКУПОК
2.1 Опис функціонального програмного середовища для розробки
Розробка веб-застосунку для створення списків покупок здійснювалася в
середовищі Visual Studio Code (VSCode) із застосуванням фреймворку Django. Цей
вибір був зумовлений поєднанням зручності, гнучкості та високої продуктивності,
які забезпечує дане середовище. Visual Studio Code є одним із найпопулярніших
редакторів коду (рис. 2.1), який активно використовується розробниками по всьому
світу для створення різноманітних проєктів – від невеликих веб-сайтів до великих
корпоративних систем [4].
VSCode вирізняється своєю легкістю та швидкістю роботи, що є важливим
фактором при розробці веб-додатків [4]. У середовищі забезпечується підтримка
численних мов програмування, зокрема Python, що робить його ідеальним для
роботи з фреймворком Django. Однією з основних переваг Visual Studio Code є
можливість налаштування середовища під індивідуальні потреби розробника
завдяки великій кількості доступних розширень та плагінів.
Під час роботи над проєктом були налаштовані необхідні розширення для
Python та Django, що значно спростило процес написання коду. Завдяки інтеграції з
Git розробка здійснювалася з постійним контролем версій, що дозволяло легко
відстежувати зміни в коді, а також оперативно повертатися до попередніх версій у
разі потреби. Лінтери та автодоповнення коду значно підвищували продуктивність,
дозволяючи розробнику швидко знаходити помилки та покращувати якість коду.
Django як фреймворк був обраний завдяки його популярності та гнучкості в
розробці веб-додатків. Це потужний інструмент, який використовує архітектуру
MVT (Model-View-Template), що дозволяє відокремлювати бізнес-логіку від
представлення даних [5]. Django надає розробникам широкий набір готових
інструментів, таких як: система адміністрування, ORM (Object-Relational Mapping)
для роботи з базами даних, механізми авторизації та аутентифікації користувачів.
22
Усе це значно прискорює процес розробки та дозволяє сконцентруватися на
створенні унікальних функцій застосунку.
Важливою перевагою Django є можливість швидкого прототипування.
Завдяки цьому можна оперативно створювати мінімально життєздатний продукт
(MVP), тестувати його функціонал і вдосконалювати в міру необхідності [5].
Вбудовані засоби для створення форм, обробки запитів та шаблонізація дозволяють
ефективно будувати інтерфейс користувача та забезпечувати взаємодію з базами
даних.
Visual Studio Code забезпечує повну інтеграцію з віртуальними середовищами
Python [4], що є важливим для роботи над Django-проєктами. Використання
віртуальних середовищ дозволяє ізолювати проєкт від глобальних налаштувань
системи, що допомагає уникнути конфліктів між залежностями різних проєктів. У
рамках даного проєкту було створено окреме віртуальне середовище, в якому
встановлювалися всі необхідні бібліотеки та залежності, включно з Django, Pillow
для роботи з зображеннями та інші пакети, необхідні для розширення
функціональності веб-застосунку.
Ще однією важливою перевагою VSCode є інтеграція з терміналом. Це
дозволяє запускати сервер розробки Django, виконувати міграції баз даних,
створювати нові додатки всередині проєкту, а також проводити тестування
безпосередньо в редакторі коду. Завдяки цьому робота над проєктом стала більш
ефективною та організованою.
Також важливим компонентом роботи з Visual Studio Code є можливість
налагодження коду (debugging). У процесі розробки використовувалися засоби для
відлагодження Python-коду, що дозволяло швидко виявляти та виправляти помилки
на етапі їхнього виникнення. Цей підхід значно зменшував час, витрачений на
тестування та усунення багів.
Завдяки Visual Studio Code та Django вдалося створити зручний та
функціональний веб-застосунок для створення списків покупок. У процесі розробки
були враховані потреби користувачів у швидкому та простому створенні списків,
можливості редагування товарів, видалення та повторного використання списків.
23
Усі ці функції були реалізовані завдяки потужному інструментарію Django та
гнучкому середовищу розробки, яке забезпечує Visual Studio Code. Таким чином,
вибір Visual Studio Code як основного середовища для розробки та використання
Django як фреймворку дозволив створити надійний, масштабований і зручний веб-
застосунок, який відповідає сучасним вимогам до розробки програмного
забезпечення.
Рисунок 2.1 – Середовище розробки Visual Studio Code [4]
2.2 Основні принципи розробки веб-застосунків
Розробка веб-застосунків є складним процесом, що включає в себе кілька
етапів, кожен з яких є критично важливим для досягнення кінцевої мети – створення
зручного, продуктивного та безпечного програмного продукту. Веб-застосунки
використовуються в різних сферах – від електронної комерції до управління даними
та соціальних мереж. Незалежно від складності та масштабу проєкту, існує ряд
основних принципів, які забезпечують успішну розробку веб-застосунків.
Першим кроком у створенні веб-застосунку є планування та визначення
вимог. Цей етап включає збір інформації про потреби користувачів, аналіз
конкурентів та визначення ключових функцій, які має виконувати майбутній
24
продукт. Важливо зрозуміти кінцеву мету веб-застосунку аудиторію, на яку він
орієнтований, та проблеми, які має вирішити продукт.
Створення прототипів та макетів є важливою частиною планування.
Прототипування дозволяє створити візуальне представлення веб-застосунку, яке
допомагає розробникам і клієнтам зрозуміти, як виглядатиме продукт і як він
працюватиме. Це зменшує ризик неправильного тлумачення вимог і допомагає
уточнити функціонал ще до початку активної розробки.
Важливим етапом є вибір правильних технологій для створення веб-
застосунку. У процесі розробки веб-застосунків, зазвичай, використовують три
основні компоненти: фронтенд (клієнтська частина), бекенд (серверна частина) та
база даних.
Фронтенд відповідає за інтерфейс користувача та взаємодію з веб-
застосунком. Основні технології для розробки фронтенду – це HTML, CSS та
JavaScript. Сучасні фреймворки, такі як: React, Vue.js або Angular дозволяють
створювати динамічні та інтерактивні інтерфейси, які забезпечують зручний
користувацький досвід.
Бекенд забезпечує обробку даних та логіку застосунку. У цьому контексті
важливими є мови програмування, такі як: Python, JavaScript (Node.js), Ruby або
PHP. Фреймворк Django, який використовувався для створення веб-застосунку
списків покупок, є одним із найпопулярніших серед розробників завдяки своїй
простоті, масштабованості та можливості швидкого прототипування.
Бази даних використовуються для зберігання та управління інформацією.
Популярними рішеннями є реляційні бази даних, такі як: SQLite, PostgreSQL та
MySQL, а також нереляційні бази даних, наприклад MongoDB. У рамках розробки
веб-застосунку було обрано SQLite.
Правильна архітектура є основою для побудови надійного веб-застосунку.
Його архітектура визначає, як різні компоненти взаємодіють між собою, як
обробляються запити та яким чином здійснюється обмін даними між фронтендом і
бекендом.
25
Однією з найбільш популярних архітектур є MVC (Model-View-Controller), яка
дозволяє розділити логіку застосунку на три частини:
Model відповідає за роботу з базою даних та управління бізнес-логікою;
View представляє інтерфейс користувача, відображаючи дані у зручному
форматі;
забезпечення функціональності для створення, редагування, видалення та
повторного використання списків;
Controller обробляє запити користувачів, оновлює дані в моделі та передає їх
до представлення.
Використання такої архітектури дозволяє розробникам ефективно керувати
кодом, спрощує тестування та підтримку застосунку.
Безпека веб-застосунків є надзвичайно важливим аспектом розробки. Кожен
застосунок може стати мішенню для атак, таких як SQL-ін’єкції, міжсайтовий
скриптинг (XSS) або CSRF (Cross-Site Request Forgery). Django, який
використовувався для створення веб-додатку, має вбудовані механізми захисту від
більшості типових атак, що робить його одним із найбезпечніших фреймворків.
До основних заходів безпеки належать:
шифрування даних користувачів;
верифікація введених даних на рівні бекенду;
використання HTTPS для захищеного з’єднання;
обмеження доступу до конфіденційних даних.
Під час розробки веб-застосунку важливо враховувати можливість
масштабування продукту в майбутньому. Це означає, що веб-застосунок має
працювати стабільно при збільшенні кількості користувачів. Django забезпечує
масштабованість завдяки використанню компонентів, які можна легко замінити або
оновити без значних змін в архітектурі застосунку.
Також важливим є забезпечення високої продуктивності застосунку. Це
досягається шляхом оптимізації запитів до бази даних, використання кешування та
мінімізації розміру статичних файлів.
26
Тестування є невід’ємною частиною розробки веб-застосунку. Воно включає
як автоматизовані тести, так і ручне тестування для виявлення можливих помилок
та недоліків. У процесі тестування перевіряється коректність роботи застосунку,
відповідність функціоналу вимогам та зручність користувацького інтерфейсу.
2.3 Архітектура веб-застосунку для створення списків покупок
Архітектура веб-застосунку для створення списків покупок базується на
поєднанні технологій Python, Django, SQLite, HTML і CSS, що забезпечує
ефективність, масштабованість та зручність у розробці. Завдяки використанню
Django як основного фреймворку, розробка додатку здійснюється за принципами
чіткої структури та розділення логіки, що відповідає класичному патерну MVC
(Model-View-Controller) (рис. 2.2). Це дозволяє організувати код у зрозумілий та
структурований спосіб, де кожен компонент відповідає за виконання окремих
функцій [6].
Клієнтська частина, розроблена за допомогою HTML та CSS, забезпечує
створення зручного та інтуїтивно зрозумілого інтерфейсу для користувачів. Основна
увага приділяється адаптивності дизайну та його простоті, щоб користувачі могли
легко створювати списки покупок, додавати нові товари або редагувати вже існуючі
позиції. HTML використовується для побудови структури сторінок, тоді як CSS
відповідає за стилізацію елементів інтерфейсу, надаючи застосунку сучасного
вигляду та забезпечуючи зручність взаємодії з користувачем.
Серверна частина веб-застосунку побудована на основі Django, що забезпечує
обробку запитів користувачів, управління базою даних та виконання бізнес-логіки.
Django як фреймворк надає широкі можливості для швидкої та зручної розробки веб-
застосунків завдяки використанню вбудованих інструментів, таких як: ORM (Object-
Relational Mapping), механізми авторизації та адміністрування. ORM дозволяє
працювати з базами даних без необхідності написання складних SQL-запитів, що
значно прискорює процес розробки та мінімізує ризики помилок.
27
У рамках цього проєкту за базу даних була обрана SQLite, яка є легкою у
використанні та не потребує додаткових налаштувань для інтеграції з Django. SQLite
ідеально підходить для невеликих та середніх проєктів, оскільки не вимагає
розгортання окремого серверу для роботи з базою даних. Вона зберігає всю
інформацію у вигляді файлу, що робить її простою та зручною для розробки та
тестування. У цьому додатку SQLite використовується для зберігання даних про
списки покупок, товари та іншу інформацію, яка необхідна для забезпечення
функціоналу.
Архітектура веб-застосунку базується на концепції розділення обов'язків між
клієнтською та серверною частинами, що дозволяє забезпечити ефективну
взаємодію між різними компонентами системи. При надходженні HTTP-запиту від
користувача до серверної частини застосунку, Django обробляє цей запит за
допомогою View, який є основним обробником логіки взаємодії з базою даних та
шаблонами. Після отримання даних з моделі вони передаються в шаблони
(Templates), де формуються у вигляді HTML-сторінок і повертаються користувачеві
у браузері. Така схема дозволяє чітко розділити бізнес-логіку, дані та інтерфейс
користувача, що полегшує підтримку та масштабування веб-застосунку в
майбутньому.
Окремим важливим аспектом є реалізація повторного використання
компонентів застосунку, що забезпечується завдяки системі шаблонів Django.
HTML-шаблони можуть бути організовані у вигляді блоків, які легко включати в
різні частини сайту, що забезпечує єдність дизайну та спрощує оновлення
інтерфейсу. Наприклад, заголовок, навігаційна панель або футер створюються як
окремі компоненти та підключаються до різних сторінок веб-застосунку.
Django також надає вбудовану систему адміністрування, яка значно полегшує
управління базою даних та дозволяє швидко додавати нові записи, редагувати
існуючі або видаляти непотрібні елементи. Адміністративна панель автоматично
генерується на основі моделей, що дозволяє уникнути додаткових витрат часу на
розробку інтерфейсу для керування даними. У контексті веб-застосунку для
28
створення списків покупок це дає змогу зручно керувати товарами, списками та
користувачами безпосередньо через інтерфейс адміністратора.
Ще одним важливим елементом архітектури є система маршрутизації (URLs),
яка дозволяє прив’язувати конкретні URL-адреси до відповідних функцій View. Це
забезпечує зручну навігацію веб-застосунком та дозволяє організувати логіку
переходів між сторінками. У цьому веб-застосунку маршрутизація
використовується для створення сторінок зі списками покупок, додаванням нових
товарів, редагуванням існуючих позицій та інших операцій, пов’язаних із його
функціоналом.
Іншою важливою складовою є валідація даних та обробка форм. Django надає
широкий набір інструментів для створення та обробки форм, що дозволяє
автоматизувати процес збору та перевірки інформації, яка надходить від
користувачів. У застосунку для створення списків покупок форми
використовуються для додавання нових товарів та редагування існуючих списків.
Система валідації автоматично перевіряє коректність введених даних та виводить
повідомлення про помилки у разі їх виникнення.
Таким чином, архітектура веб-застосунку поєднує в собі всі основні
компоненти сучасної веб-розробки, забезпечуючи зручний, гнучкий та
масштабований підхід до створення веб-продуктів. Django, як основа серверної
частини, спрощує взаємодію з базою даних, а HTML і CSS дозволяють створити
зручний та інтуїтивно зрозумілий інтерфейс для користувачів. Така архітектура
забезпечує ефективну роботу застосунку та спрощує процес його подальшої
підтримки та розвитку. На рис. 2.2 подано схему архітектури проєкту.
29
Рисунок 2.2 – Схема архітектури проєкту [6]
2.4 Розробка діаграми варіантів використання
Розроблена в кваліфікаційній роботі бакалавра діаграма варіантів
використання (рис. 2.3) показує дві основні ролі: User (користувач) та Admin
(адміністратор).
Користувачі мають змогу створювати нові списки покупок, додавати до них
товари, редагувати та видаляти елементи зі списку. Важливою функцією є
можливість повторного використання існуючих списків, що дозволяє спрощувати
процес регулярних закупівель.
Адміністратор має розширені можливості, які включають редагування бази
даних. Це дозволяє підтримувати актуальність інформації в застосунку та
контролювати роботу системи на більш високому рівні.
Взаємозв'язки на діаграмі показують, що деякі дії користувача залежать від
інших. Наприклад, функція додавання товарів до списку можлива лише після
створення нового списку. Аналогічно, повторне використання списку передбачає
його попереднє створення та заповнення товарами.
Дана діаграма відображає ключові функціональні можливості застосунку та
ролі користувачів, що дозволяє структурувати роботу над проєктом і чітко
визначити межі відповідальності кожної ролі в системі [7].
30
Рисунок 2.3 – Діаграма варіантів використання
2.5 Проєктування структури бази даних
Проєктування структури бази даних стало важливим етапом у створенні веб-
застосунку, оскільки від цього залежала ефективність обробки даних, швидкість
виконання запитів і масштабованість системи. У даному проєкті база даних
побудована на основі SQLite, що є зручним та легким рішенням для невеликих веб-
застосунків. SQLite є вбудованою базою даних, яка не потребує окремого сервера
для роботи, що значно спрощує процес налаштування та експлуатації [8].
31
На рисунку 2.4 представлена діаграма «сутність-зв'язок» (ERD), яка візуалізує
структуру бази даних веб-застосунку для створення списків покупок. Діаграма
відображає основні таблиці, їх атрибути та зв'язки між ними.
Нижче наведено опис таблиць та їх зв'язків.
1. main_list – таблиця, яка відповідає за зберігання списків покупок. Вона
містить унікальний ідентифікатор, назву списку та інші атрибути, що можуть бути
додані в процесі розширення функціональності застосунку.
2. main_object – ця таблиця представляє товари, що додаються до списків
покупок. Основними атрибутами є кількість товару, посилання на список та інші
характеристики, такі як назва та ціна.
3. django_admin_log – таблиця для ведення логів адміністративних дій. Вона
містить інформацію про змінені об’єкти, користувачів, які виконували ці дії, та час
їхнього виконання.
4. django_content_type – таблиця, яка зберігає інформацію про всі моделі
застосунку.
Вона використовується Django для визначення типу об’єктів та динамічного
управління контентом.
5. django_session – таблиця, що відповідає за управління сесіями користувачів.
Вона дозволяє зберігати інформацію про активні сесії, що є важливим для роботи з
аутентифікацією та авторизацією.
6. django_migrations – таблиця, яка містить інформацію про міграції бази
даних. Вона допомагає відстежувати всі зміни в схемі бази даних та забезпечує
узгодженість при оновленні структури.
Таблиця main_list пов’язана з main_object, що дозволяє організувати
ієрархічну структуру зберігання списків та товарів. Кожен список може містити
декілька товарів, а кожен товар належить до певного списку.
32
Рисунок 2.4 – Діаграма «сутність-зв'язок»
2.6 Опис процесу проєктування структури веб-застосунку для створення
списків покупок
Проєктування структури веб-застосунку для створення списків покупок
включає кілька етапів, які охоплюють планування основних функцій, визначення
послідовності дій користувачів та опис бізнес-логіки застосунку. Основна мета –
забезпечити простий та інтуїтивний інтерфейс, який дозволить користувачам
33
швидко створювати нові списки, додавати товари, редагувати їх та повторно
використовувати створені раніше списки.
Процес проєктування передбачає створення діаграм діяльності (рис. 2.5, 2.6),
що ілюструють основні сценарії взаємодії користувача із системою, а також
діаграми послідовності (рис. 2.7), яка демонструє, як обмін даними відбувається між
різними компонентами веб-застосунку.
Рисунок 2.5 – Діаграма діяльності створення нового списку
Діаграма діяльності (рис 2.5) відображає процес створення нового списку
покупок. Користувач відкриває веб-застосунок, переходить до сторінки зі списками
та ініціює створення нового списку. Після введення назви і збереження, новий
список додається в базу даних, і користувач бачить оновлену сторінку з доданим
списком (рис. 2.6).
34
Рисунок 2.6 – Діаграма діяльності додавання товарів до списку
Діаграма діяльності (рис 2.6) демонструє процес додавання товару до
існуючого списку покупок. Користувач відкриває список, додає товар, вказує його
кількість та зберігає дані. У разі успішного збереження товар додається до бази
даних, в іншому випадку система виводить повідомлення про помилку.
Діаграма послідовності (рис. 2.7) демонструє процес створення та збереження
нового списку покупок. Користувач ініціює створення списку через веб-інтерфейс,
після чого запит надсилається до контролера (Controller). Контролер обробляє запит
та взаємодіє з базою даних, де новий список зберігається. Після успішного
збереження сторінка оновлюється, і користувач бачить новостворений список.
35
Рисунок 2.7 – Діаграма послідовності створення та збереження списку
2.7 Проєктування інтерфейсу користувача
Проєктування інтерфейсу користувача стало важливою складовою розробки
веб-застосунку для управління персональними покупками користувачів. Основною
метою при проєктуванні було забезпечити простоту та зручність використання,
інтуїтивну навігацію та швидкий доступ до основних функцій. Дизайн застосунку
базується на мінімалістичному підході, що дозволяє користувачам легко
орієнтуватися в системі та виконувати необхідні дії без зайвих кроків.
Інтерфейс веб-застосунку складається з кількох ключових сторінок: головної
сторінки зі списком всіх наявних списків покупок, сторінки окремого списку з
можливістю додавання товарів, сторінки редагування товару, а також сторінки для
створення нового списку. Головна сторінка відображає всі списки покупок,
доступні користувачу. Кожен список представлений у вигляді картки з назвою та
36
кнопками для відкриття або видалення. На сторінці також передбачено кнопку для
створення нового списку та додавання товарів.
Сторінка списку покупок дозволяє переглядати всі товари, які містяться в
обраному списку. Кожен товар відображається з назвою, кількістю та кнопками для
редагування або видалення. Це забезпечує швидкий доступ до функцій управління
товаром без необхідності переходу на інші сторінки.
Форма редагування товару включає поля для зміни назви, кількості та вибору
списку, до якого належить товар. Оновлення інформації про товар здійснюється
натисканням кнопки «Редагувати».
Форма створення списку містить поле для введення назви нового списку та
кнопку для збереження. Цей процес є максимально спрощеним, щоб користувач міг
швидко додати новий список покупок.
Підтвердження видалення передбачає модальне вікно з повідомленням та
кнопкою підтвердження. Це дозволяє уникнути випадкового видалення даних.
Проєктування інтерфейсу орієнтоване на мінімізацію кількості кліків для
виконання основних дій. Вибір кольорової схеми базується на спокійних та
контрастних відтінках, які полегшують візуальне сприйняття елементів інтерфейсу.
Інтерфейс оптимізований для роботи на різних пристроях, включаючи мобільні
телефони та планшети.
Процес проєктування передбачав створення макетів та прототипів, які були
протестовані для оцінки зручності використання. У результаті був створений
графічний інтерфейс користувача (рис. 2.8), який відповідає сучасним вимогам
дизайну та забезпечує високу продуктивність при виконанні базових операцій.
37
Рисунок 2.8 – Інтерфейс користувача веб-застосунку
Висновки до розділу 2
У процесі розробки веб-застосунку для створення списків покупок було
спроєктовано зручну та гнучку архітектуру, яка базується на використанні Django та
SQLite. Це дозволило забезпечити стабільність роботи додатку та швидкість
виконання основних функцій.
Особливу увагу було приділено створенню зрозумілого інтерфейсу
користувача, що дозволяє легко створювати, редагувати та видаляти списки та
товари. Інтуїтивна навігація та мінімалістичний дизайн сприяють швидкому
освоєнню застосунку користувачами.
Проєктування бази даних із використанням ER-діаграми допомогло визначити
зв’язки між основними сутностями та оптимізувати зберігання даних. Використання
діаграм активності та послідовності забезпечило чітке бачення взаємодії
користувачів із додатком на різних етапах роботи.
Результатом роботи став функціональний, зручний та адаптивний веб-
застосунок, який відповідає вимогам сучасних стандартів у сфері розробки
програмного забезпечення.
38
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Постановка завдання
Мета розробки веб-застосунку для управління персональними покупками
користувачів полягає в забезпеченні користувачів інструментом, який дозволяє
швидко та зручно організовувати свої покупки. Завдання включає створення
функціонального додатку, який дозволяє створювати списки, додавати до них
товари, редагувати або видаляти існуючі елементи, а також повторно
використовувати вже створені списки. Водночас необхідно забезпечити зручний
інтерфейс, що сприятиме інтуїтивній взаємодії користувача із застосунком.
При розробці цього проєкту використовувалися сучасні технології, такі як:
Python, Django, SQLite, HTML, CSS і JavaScript. Використання Django стало
ключовим у реалізації бізнес-логіки застосунку, оскільки цей фреймворк забезпечує
потужний набір інструментів для швидкої та гнучкої розробки. Django дозволяє
працювати за принципом MVT (Model-View-Template), що забезпечує чіткий
розподіл відповідальностей між обробкою даних, їхньою презентацією та бізнес-
логікою.
Одним із завдань було створення бази даних, яка повинна зберігати
інформацію про користувачів, списки покупок і товари. Для цього
використовувалася база даних SQLite, яка ідеально підходить для невеликих
проєктів, завдяки простоті інтеграції з Django та легкості налаштування. SQLite
забезпечила зберігання даних у вигляді файлів, що значно спростило процес
розробки та тестування застосунку.
Іншим важливим аспектом завдання було забезпечення зручного та сучасного
інтерфейсу користувача. Для цього використовувалися HTML і CSS у поєднанні з
фреймворком Bootstrap, що дозволило створити адаптивний дизайн, який коректно
відображається на різних пристроях. Структуру сторінок було побудовано таким
чином, щоб користувач міг швидко виконувати основні операції, такі як створення
списків, додавання товарів або їх редагування.
39
Додатково до цього використовувалися базові елементи JavaScript для
реалізації інтерактивних компонентів інтерфейсу, таких як модальні вікна для
підтвердження дій або динамічне оновлення контенту без перезавантаження
сторінки. Ці технології дозволили зробити взаємодію користувача із застосунком
більш швидкою та зручною.
Під час виконання завдання було враховано також вимоги до безпеки
застосунку. Django забезпечує вбудований механізм захисту від найпоширеніших
атак, таких як SQL-ін’єкції чи міжсайтовий скриптинг (XSS). Це дозволило
інтегрувати базові функції захисту без необхідності розробки власних рішень.
Однією з ключових вимог було забезпечення повторного використання
списків, що знижує час на планування регулярних покупок. Ця функція реалізована
через механізми ORM (Object-Relational Mapping), що дозволяє зручно оперувати
даними у вигляді об'єктів.
Таким чином, постановка завдання для розробки веб-застосунку була тісно
пов’язана з вибором технологій, які сприяли його швидкому створенню та легкому
розширенню. Використання Django, SQLite, HTML, CSS та JavaScript дозволило
реалізувати основний функціонал, забезпечити зручність для користувачів та
дотримання сучасних стандартів розробки. Результатом виконання поставлених
завдань є веб-застосунок, який поєднує простоту використання, адаптивний
інтерфейс і надійну базу даних, що відповідає потребам кінцевого користувача.
На рисунку 3.1 наведено загальну структуру проєкту.
Рисунок 3.1 – Структура проєкту
40
Розроблена діаграма класів (рис. 3.2) відображає структуру основних
компонентів веб-застосунку для створення списків покупок, включаючи сутності,
їхні атрибути та методи, а також зв’язки між ними [9].
Рисунок 3.2 – Діаграма класів проєкту
Основними елементами системи є класи, що представляють списки та товари,
а також класи, які реалізують функціональність для роботи з цими об’єктами.
Клас Object відповідає за представлення товарів у системі. Він включає
атрибути, які описують назву товару, кількість та список, до якого належить товар.
41
Метод __str__ забезпечує текстове представлення об’єктів цього класу для зручного
відображення в інтерфейсі користувача.
Клас List призначений для зберігання даних про списки покупок. Він має
атрибут для зберігання назви списку та метод __str__, який також використовується
для відображення текстового представлення списків. Між класами List та Object
існує зв’язок "один до багатьох", що дозволяє одному списку містити кілька товарів.
Функціональність для перегляду, створення, редагування та видалення списків
і товарів реалізована за допомогою класів-представлень. Наприклад, класи
ListObjectView та ListObjectsView відповідають за відображення списків і товарів
відповідно. Вони забезпечують взаємодію з моделями та підготовку даних для
передачі в шаблони. Інші класи, такі як AddObject і AddList, реалізують функціонал
додавання нових товарів і списків. Аналогічно, класи UpdateObject, DeleteObject та
DeleteList забезпечують редагування і видалення відповідних сутностей.
Представлення чітко визначають, які шаблони використовуються для
відображення даних, а також обробляють запити користувачів і взаємодію з базою
даних через моделі. Всі ці компоненти працюють разом, забезпечуючи повний цикл
функціонування веб-застосунку, від зберігання даних до їхньої візуалізації для
користувача.
Діаграма класів наочно демонструє взаємодію між різними компонентами
системи, що дозволяє ефективно реалізувати розробку та підтримку застосунку.
Використання Django спрощує реалізацію цих взаємозв'язків завдяки вбудованим
інструментам для управління моделями, представленнями та шаблонами. Така
архітектура забезпечує гнучкість, масштабованість і простоту в розширенні
функціональності застосунку.
3.2 Інтерфейс веб-застосунку для управління персональними покупками
користувачів
Інтерфейс веб-застосунку для управління персональними покупками
користувачів розроблений таким чином, щоб забезпечити інтуїтивність і простоту
42
використання. Основна мета дизайну полягала у створенні зручного
користувацького досвіду, який дозволяє швидко виконувати основні операції, такі
як створення списків, додавання товарів, редагування та видалення даних.
Головна сторінка є стартовою точкою для користувачів і відображає всі
доступні списки покупок. Кожен список представлений у вигляді картки, яка містить
назву списку, короткий опис та кнопки для доступу до деталей або видалення
списку. У нижній частині сторінки розташовані кнопки для створення нового списку
або додавання товарів. Сучасний і мінімалістичний дизайн забезпечує легкість
навігації та швидкий доступ до функціональних можливостей.
Сторінка окремого списку дозволяє переглядати всі товари, які входять до
цього списку. Кожен товар представлений у вигляді рядка з назвою, кількістю та
кнопками для редагування або видалення. Ця сторінка також містить кнопку для
додавання нових товарів до списку, що забезпечує можливість оперативного
оновлення даних.
Форма додавання товарів реалізована з використанням простого та
зрозумілого інтерфейсу. Користувач має можливість ввести назву товару, його
кількість та вибрати список, до якого буде додано товар. Після натискання кнопки
«Зберегти» дані надсилаються на сервер, і сторінка автоматично оновлюється для
відображення змін. Аналогічно працює форма для додавання списків, де користувач
вводить лише назву нового списку.
Сторінка підтвердження видалення реалізована через модальне вікно, яке
з’являється перед виконанням цієї дії. Користувачеві пропонується підтвердити свій
вибір, що допомагає уникнути випадкового видалення важливих даних.
Інтерфейс адаптований для роботи на різних пристроях, включаючи мобільні
телефони та планшети. Для цього використовуються сучасні веб-технології, такі як
CSS Flexbox і Media Queries. Відповідна кольорова схема та шрифти забезпечують
приємний візуальний досвід і зручність роботи навіть при тривалому використанні.
Загальний підхід до дизайну базується на принципах мінімалізму, що дозволяє
користувачам фокусуватися на виконанні завдань без відволікаючих елементів.
Інтерфейс створений таким чином, щоб нові користувачі могли швидко освоїти
43
роботу з додатком, а досвідчені користувачі отримували інструменти для
максимальної продуктивності.
Розроблений інтерфейс відповідає сучасним стандартам UX/UI-дизайну,
забезпечуючи баланс між функціональністю та естетикою. Це дозволяє зробити
взаємодію із застосунком простою та ефективною для користувачів різного рівня
підготовки.
3.3 Програмна реалізація веб-застосунку для управління персональними
покупками користувачів
Програмна реалізація веб-застосунку для створення списків покупок базується
на клієнт-серверній архітектурі, що забезпечує розподіл функцій між клієнтською
частиною (інтерфейсом користувача) та серверною частиною (обробкою даних і
логікою додатку). Така архітектура дозволяє забезпечити масштабованість,
продуктивність та зручність в експлуатації системи.
Серверна частина розроблена на основі Django – потужного фреймворку
Python, який забезпечує швидку розробку веб-застосунків. Django слідує принципу
MVT (Model-View-Template) (рис. 3.3), що спрощує організацію коду і підвищує
його підтримуваність.
Моделі відповідають за роботу з базою даних. У контексті цього додатку,
моделі представляють сутності «Список покупок» і «Товар». Вони містять опис
полів і взаємозв’язків між ними. Наприклад, модель товару має поле для назви,
кількості та зовнішній ключ до списку, до якого він належить. ORM Django
автоматично генерує SQL-запити для роботи з базою даних на основі визначених
моделей.
Контролери обробляють запити від клієнтської частини. Вони виконують
бізнес-логіку, взаємодіють із моделями для отримання або збереження даних і
повертають відповідь у вигляді HTML-сторінок або JSON. Наприклад, при запиті на
створення нового списку контролер обробляє введені користувачем дані, створює
відповідний запис у базі даних і повертає оновлену сторінку зі списком.
44
Шаблони відповідають за формування інтерфейсу користувача. Django-
шаблони дозволяють динамічно генерувати HTML-код, включаючи дані, отримані з
серверної частини. Це дозволяє забезпечити інтерактивність і персоналізацію для
кожного користувача.
База даних для цього проєкту реалізована на основі SQLite, що забезпечує
легкість у налаштуванні і використанні. Вона зберігає дані про списки, товари та
пов’язані з ними параметри.
Клієнтська частина відповідає за взаємодію користувача із системою. Вона
побудована з використанням HTML, CSS та базових елементів JavaScript.
HTML використовується для створення структури сторінок [10]. Кожна
сторінка містить елементи інтерфейсу, такі як списки, форми введення та кнопки.
CSS забезпечує стилізацію сторінок, роблячи інтерфейс сучасним і адаптивним. Для
цього використовуються такі технології, як Flexbox і Media Queries, які дозволяють
оптимізувати дизайн для різних пристроїв.
JavaScript забезпечує інтерактивність інтерфейсу. Наприклад, використання
модальних вікон для підтвердження видалення або динамічне оновлення елементів
сторінки без її повного перезавантаження. Це підвищує зручність використання
додатку та зменшує час очікування для користувача.
Клієнт і сервер взаємодіють за допомогою HTTP-запитів. Користувач,
виконуючи дію, наприклад створення нового списку, надсилає запит до серверної
частини через браузер. Сервер обробляє запит, виконує необхідні операції з базою
даних і повертає відповідь у вигляді згенерованої HTML-сторінки або повідомлення
про помилку.
Завдяки використанню механізмів CSRF (Cross-Site Request Forgery) і
вбудованих функцій захисту Django, забезпечується безпечна передача даних між
клієнтом і сервером [11].
Розподіл функцій між клієнтською та серверною частинами дозволяє
забезпечити ефективне управління ресурсами та легке масштабування системи.
Серверна частина відповідає за важкі операції, такі як обробка даних і взаємодія з
45
базою даних, тоді як клієнтська частина зосереджується на відображенні інформації
та взаємодії з користувачем.
Клієнт-серверна архітектура робить систему гнучкою та зручною для
розширення [12]. Додаткові функції можуть бути додані як на серверній частині, так
і на клієнтській без необхідності значних змін у загальній структурі застосунку. Це
забезпечує довговічність і адаптивність системи до нових потреб користувачів.
У підсумку, використання клієнт-серверної архітектури у веб-застосунку для
управління персональними покупками користувачів дозволило створити
продуктивний, зручний і безпечний інструмент, який відповідає сучасним вимогам
до веб-застосунків.
Рисунок 3.3 – Схема архітектури MVT
Розроблений проєкт містить класи:
Клас Object (рис. 3.4) представляє сутність товару, що додається до списків
покупок. Він містить атрибути для зберігання назви товару, кількості та зв’язку зі
списком, до якого цей товар належить. Цей зв’язок реалізовано через зовнішній
ключ до моделі List, що забезпечує логічну структуру даних у базі. Завдяки методу
__str__, об’єкти цього класу можуть бути відображені у текстовому вигляді,
46
наприклад, у списках в інтерфейсі. Цей клас є основою для управління товарами в
системі.
Рисунок 3.4 – Клас Object
Клас List (рис. 3.5) відповідає за представлення списків покупок. Він містить
атрибут для назви списку, яка є ключовою характеристикою цієї сутності. Зв’язок
між List і Object забезпечує ієрархічну структуру, де кожен список може містити
кілька товарів. Як і у випадку з класом Object, метод __str__ забезпечує зручність
текстового представлення об'єктів цієї моделі. Клас List використовується для
управління списками, дозволяючи створювати, переглядати, редагувати та видаляти
їх.
Рисунок 3.5 – Клас List
Клас ListObjectView (рис. 3.6) є представленням, яке відповідає за
відображення списків товарів, пов’язаних із певним списком покупок. Цей клас
взаємодіє з моделлю Object для отримання товарів із бази даних та передачі їх у
шаблон. Він визначає ім’я контекстного об'єкта, яке використовується у шаблонах
(objects), та шаблон, який застосовується для відображення сторінки (list.html). Крім
47
того, ListObjectView забезпечує додаткову логіку для формування контексту
сторінки через метод get_context_data.
Рисунок 3.6 – Клас ListObjectView
Клас ListObjectsView (рис. 3.7) реалізує функціональність для відображення
всіх списків покупок, доступних у додатку. Він взаємодіє з моделлю List для
отримання даних та визначає шаблон (index.html) і ім’я контекстного об’єкта (lists).
Цей клас дозволяє користувачам переглядати всі списки, переходити до деталей
окремого списку або створювати нові списки.
48
Рисунок 3.7 – Клас ListObjectsView
Клас AddObject (рис. 3.8) реалізує функціонал для створення нових товарів у
списках. Він працює з моделлю Object та визначає поля, які користувач повинен
заповнити у формі. Шаблон для відображення форми (add.html) забезпечує простий
та зрозумілий інтерфейс. Після успішного додавання товару користувач
автоматично перенаправляється на сторінку списків завдяки визначенню
success_url. Клас також дозволяє передавати додаткові дані у шаблон через метод
get_context_data.
Рисунок 3.8 – Клас AddObject
Клас DeleteList (рис. 3.9) відповідає за видалення списків покупок. Він
взаємодіє з моделлю List і використовує шаблон deletelist.html для підтвердження
49
видалення. Після успішного видалення список видаляється з бази даних, а
користувач перенаправляється на головну сторінку. Цей клас забезпечує контроль
за виконанням операцій видалення, щоб уникнути небажаних змін у даних.
Рисунок 3.9 – Клас DeleteList
3.4 Особливості тестування веб-застосунків
Тестування веб-застосунків є важливим етапом розробки, який забезпечує
їхню функціональність, стабільність та безпеку. Унікальність тестування веб-
додатків полягає в тому, що вони є багаторівневими системами, що охоплюють
клієнтську частину, серверну частину, базу даних та мережеву інфраструктуру. Це
зумовлює необхідність перевірки всіх компонентів, а також їхньої взаємодії для
забезпечення належного рівня якості.
Функціональне тестування є основою перевірки веб-застосунків і дозволяє
переконатися, що всі функції системи відповідають заданим специфікаціям [13].
Наприклад, для застосунку створення списків покупок необхідно переконатися, що
користувач може створювати нові списки, додавати товари, редагувати записи та
видаляти елементи без виникнення помилок. Кожен сценарій взаємодії із
50
застосунком перевіряється на коректність виконання, включаючи випадки, коли дані
вводяться некоректно.
Перевірка інтерфейсу користувача є ще одним важливим аспектом тестування.
Це включає перевірку того, як відображаються елементи інтерфейсу на різних
екранах і пристроях, чи правильно працюють кнопки, форми та посилання.
Особливу увагу приділяють адаптивності дизайну, щоб додаток залишався зручним
для використання на мобільних телефонах, планшетах і настільних комп’ютерах.
Тестування продуктивності дозволяє оцінити, наскільки швидко і стабільно
працює застосунок за різних умов [14]. Наприклад, перевіряється час завантаження
сторінок, швидкість виконання запитів до бази даних і поведінка системи під
високим навантаженням. Це дозволяє виявити вузькі місця, які можуть призводити
до зниження продуктивності, і оптимізувати роботу застосунку.
Забезпечення безпеки веб-застосунків є критичним аспектом тестування.
Необхідно переконатися, що система захищена від поширених атак, таких як SQL-
ін’єкції, міжсайтовий скриптинг (XSS) або підробка міжсайтових запитів (CSRF).
Тестування безпеки також включає перевірку правильності обробки конфіденційних
даних, таких як паролі користувачів, та перевірку відповідності стандартам безпеки.
Сумісність є ще одним важливим критерієм, який перевіряється під час
тестування. Для забезпечення стабільної роботи додатку необхідно переконатися,
що він працює однаково у всіх популярних браузерах, операційних системах і на
різних пристроях. Особлива увага приділяється перевірці коректності відображення
та функціональності в різних середовищах.
Взаємодія між клієнтською та серверною частинами потребує особливої уваги.
У веб-додатку для створення списків покупок це включає перевірку передачі даних
між формами на інтерфейсі користувача та серверними обробниками, таких як
створення нового списку або додавання товару. Тестування API дозволяє оцінити
коректність передачі запитів і відповідей між клієнтом і сервером.
Тестування в Django має свої особливості, оскільки цей фреймворк забезпечує
вбудовані механізми для перевірки функціональності додатків [5]. Розробники
можуть створювати юніт-тести для моделей, представлень і шаблонів, а також
51
виконувати їх у ізольованому середовищі, що не впливає на основну базу даних. Це
значно спрощує процес тестування і дозволяє швидко виявляти та виправляти
помилки.
Особливості веб-застосунків, такі як взаємодія з користувачами, мережеве
середовище і різноманітність платформ, на яких вони використовуються, роблять
тестування складним процесом. Використання сучасних інструментів, таких як
Selenium для автоматизації тестів, Postman для перевірки API, JMeter для тестування
продуктивності та OWASP ZAP для забезпечення безпеки, дозволяє ефективно
вирішувати ці завдання.
Тестування веб-застосунків є комплексним процесом, який охоплює перевірку
функціональності, продуктивності, безпеки та сумісності. Його метою є
забезпечення того, щоб система відповідала потребам користувачів і була надійною
у використанні. Веб-застосунок для створення списків покупок, завдяки ретельному
тестуванню, відповідає всім вимогам до якості, стабільності та безпеки, що дозволяє
забезпечити високий рівень задоволення користувачів.
3.5 Тестування веб-застосунку для управління персональними
покупками користувачів
Тестування веб-застосунку для управління персональними покупками
користувачів охоплювало всі аспекти його роботи, зокрема функціональність,
продуктивність, безпеку, сумісність та зручність використання. Метою тестування
було підтвердження коректної роботи основних функцій, таких як створення
списків, додавання та видалення товарів, а також перевірка взаємодії між
клієнтською та серверною частинами. Особливу увагу було приділено перевірці
відповідності веб-застосунку вимогам і його стабільності під час виконання
складних операцій.
Було виконано функціональне тестування для перевірки базових функцій веб-
застосунку. Перевірялися сценарії створення нового списку покупок, додавання
товарів до списку, редагування інформації про товари та видалення як окремих
52
елементів, так і списків загалом. Результати підтвердили, що кожна функція працює
коректно і відповідає очікуванням.
Інтерфейс користувача перевірявся на відповідність принципам адаптивного
дизайну. Було протестовано відображення сторінок на різних пристроях і розмірах
екранів. Навігація в застосунку працює належним чином, а всі елементи інтерфейсу
правильно реагують на дії користувача.
Продуктивність застосунку оцінювалася під час стрес-тестування. Для цього
моделювалися сценарії високого навантаження, наприклад, одночасне створення
великої кількості списків і товарів. Додаток демонструє високу стабільність і
швидкість обробки запитів навіть за умов значного навантаження.
Безпека застосунку була перевірена за допомогою інструментів для аналізу
вразливостей. Було протестовано захист від SQL-ін’єкцій, міжсайтового скриптингу
(XSS) та CSRF-атак. Результати показали, що вбудовані механізми Django
ефективно запобігають поширеним загрозам.
Додатково проведено модульне тестування ключових компонентів системи
(таблиця 3.1). Юніт-тести дозволили ізольовано перевірити роботу моделей,
представлень і форм, забезпечивши високу точність перевірок.
Нижче наведу приклад проведених модульних тестів системи.
Тест 1: Створення нового списку покупок (рис. 3.10).
Рисунок 3.10 – Модульний тест створення списку покупок
53
Тест 2: Додавання товару до списку (рис. 3.11).
Рисунок 3.11 – Модульний тест додавання товару до списку
Тест 3: Видалення товару із списку (рис. 3.12).
Рисунок 3.13 – Модульний тест видалення товару зі списку
54
Таблиця 3.1 – Результати виконання модульних тестів
Назва тесту Опис Очікуваний результат Фактичний результат Статус
Створення Перевіряє, чи Список зберігається в Список "My Shopping Успішно
нового створюється новий базі даних з List" успішно
списку список із заданою правильною назвою, створено, у базі
назвою. кількість списків у зберігається 1 запис.
базі дорівнює 1.
Додавання Перевіряє, чи Товар зберігається з Товар "Milk" успішно Успішно
товару до додається новий коректною назвою, додано до списку
списку товар із заданою кількістю, прив’язкою "Groceries" з кількістю
назвою, кількістю до списку. "2", у базі зберігається
та прив’язкою до 1 запис.
відповідного
списку.
Видалення Перевіряє, чи Товар успішно Товар "Bread" успішно Успішно
товару із видаляється товар видаляється, жодного видалено, у базі
списку із бази даних після запису з відповідним відсутній запис із
виконання операції ідентифікатором у базі відповідним
видалення. не залишається. ідентифікатором.
Висновки до розділу 3
Було розглянуто програмну реалізацію веб-застосунку для створення списків
покупок, що базується на клієнт-серверній архітектурі. Проведено аналіз основних
компонентів системи, таких як клієнтська та серверна частини, а також описано
процес тестування додатку для забезпечення його стабільності, функціональності та
безпеки.
Клієнтська частина застосунку забезпечує зручний інтерфейс для взаємодії
користувачів із системою. Завдяки використанню HTML, CSS і JavaScript було
створено інтуїтивно зрозумілий і адаптивний дизайн, який забезпечує зручність
роботи на різних пристроях. Серверна частина, реалізована на основі Django,
обробляє запити користувачів, виконує бізнес-логіку та забезпечує доступ до бази
даних, яка зберігає списки й товари.
55
У процесі тестування веб-застосунку було перевірено коректність виконання
основних операцій, таких як створення списків, додавання та видалення товарів, а
також обробка помилок. Результати тестування підтвердили стабільність роботи
системи навіть під час високого навантаження. Завдяки юніт-тестам було перевірено
окремі компоненти застосунку, зокрема моделі та представлення, що дозволило
впевнитися у їхній відповідності функціональним вимогам.
Особливу увагу приділено безпеці системи, що досягнуто завдяки вбудованим
механізмам Django для захисту від типових загроз, таких як SQL-ін’єкції, XSS-атаки
та CSRF-атаки. Це забезпечує надійність застосунку при роботі з конфіденційними
даними.
Результати виконаної роботи демонструють, що розроблений веб-застосунок
відповідає всім сучасним вимогам до функціональності, зручності та безпеки. Він є
готовим до використання та може бути легко розширений для задоволення нових
потреб користувачів.
56
ВИСНОВКИ
У ході написання кваліфікаційної роботи бакалавра було реалізовано веб-
застосунок для управління персональними покупками користувачів, який поєднує
сучасні підходи до розробки, функціональність і зручність використання. Основна
мета розробки полягала у створенні інструменту, що дозволяє користувачам швидко
й легко організовувати свої покупки, забезпечуючи простоту виконання основних
операцій: створення списків, додавання товарів, їхнє редагування та видалення.
Застосунок розроблено з урахуванням сучасних стандартів розробки програмного
забезпечення, що гарантує його стабільну роботу та адаптивність.
Під час реалізації застосунку було обрано стек технологій, що включає Python,
Django, SQLite, HTML, CSS і JavaScript. Використання Django як основного
фреймворку дозволило забезпечити чіткий поділ логіки, взаємодії з базою даних і
відображення даних у інтерфейсі. Завдяки ORM Django обробка даних відбувається
на високому рівні, що мінімізує помилки та підвищує ефективність роботи з базою.
SQLite була обрана як база даних завдяки її простоті налаштування та експлуатації,
що ідеально підходить для невеликих застосунків.
Клієнтська частина застосунку створена з акцентом на мінімалістичний і
адаптивний дизайн, який забезпечує зручність роботи як на настільних комп’ютерах,
так і на мобільних пристроях. HTML використовується для структурування
сторінок, CSS для стилізації, а JavaScript додає інтерфейсу інтерактивності. Усі
елементи додатку організовані таким чином, щоб забезпечити швидкий доступ до
основних функцій і полегшити взаємодію з системою.
Розроблений застосунок побудовано на клієнт-серверній архітектурі, яка
дозволяє розподілити обов’язки між клієнтською частиною та сервером. Це
забезпечує його гнучкість і масштабованість, полегшує додавання нового
функціоналу та спрощує тестування.
Ключові функції застосунку включають створення нових списків покупок,
додавання товарів до списків, їх редагування та видалення. Також реалізована
можливість повторного використання вже створених списків, що значно полегшує
57
організацію регулярних покупок. Завдяки інтуїтивно зрозумілому інтерфейсу
користувачі можуть легко виконувати ці операції, навіть якщо вперше користуються
застосунком.
Особливу увагу під час роботи було приділено тестуванню веб-застосунку, яке
охоплювало функціональні, юніт-тести, а також перевірку продуктивності та
безпеки. Функціональне тестування підтвердило, що всі основні операції
виконуються коректно, а додаток відповідає вимогам до функціональності. Юніт-
тести забезпечили перевірку окремих компонентів системи, таких як моделі,
представлення та взаємодія з базою даних, що гарантує їхню надійність.
Продуктивність застосунку була протестована за допомогою стрес-тестів, які
показали, що система здатна ефективно працювати навіть за високого навантаження.
Це дозволяє використовувати його як у невеликих групах користувачів, так і у
масштабованих середовищах.
Безпека веб-застосунку була забезпечена завдяки вбудованим механізмам
Django, які ефективно захищають від SQL-ін’єкцій, XSS-атак і CSRF-атак. Це
гарантує надійність обробки даних і захист конфіденційної інформації користувачів.
Розроблений веб-застосунок є практичним інструментом, який вирішує
реальні завдання організації покупок. Його використання дозволяє зекономити час і
спростити процес планування покупок. Завдяки адаптивному дизайну і
мінімалістичному підходу він є доступним для широкої аудиторії користувачів.
Крім того, ця робота має значення для подальшого розвитку у сфері розробки
веб-застосунків. Вона демонструє переваги використання сучасних технологій,
таких, як Django і SQLit та їхню здатність вирішувати складні завдання у простій і
зручній формі. Результати можуть бути використані як основа для створення
подібних застосунків у інших сферах, таких як організація завдань чи управління
проєктами.
Результати виконаної роботи підтверджують, що розроблений веб-застосунок
відповідає всім вимогам до сучасного програмного забезпечення. Він демонструє
стабільну роботу, високу продуктивність та безпеку. Завдяки тестуванню було
58
забезпечено його відповідність функціональним вимогам, що робить його готовим
до використання.
Веб-застосунок відкриває перспективи для подальшого розвитку, що
дозволить адаптувати його до нових потреб користувачів і розширити функціонал.
Загалом, ця робота є прикладом успішного застосування сучасних технологій для
вирішення практичних завдань, створення інтуїтивно зрозумілих інтерфейсів і
забезпечення високої якості програмного продукту.
59
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Веб-ресурс «Google Keep». URL: https://keep.google.com/ (дата звернення:
17.04.2025).
2. Сайт «Any.do». URL: https://any.do/ (дата звернення: 17.04.2025).
3. Веб сервіс «Microsoft To Do». URL: https://to-do.office.com/ (дата звернення:
17.04.2025).
4. «Visual Studio Code». URL: https://code.visualtudio.com/ (дата звернення:
20.04.2025).
5. "Django". URL: https://www.djangoproject.com (дата звернення: 23.04.2025).
6. "MVC". URL: https://en.wikipedia.org/wiki/Model–view–controller (дата
звернення: 28.04.2025).
7. "Use case diagram". URL: https://en.wikipedia.org/wiki/Use_case_diagram (дата
звернення: 30.04.2025).
8. "SQLite". URL: https://en.wikipedia.org/wiki/SQLite (дата звернення:
03.05.2025).
9. "Class Diagram". URL: https://en.wikipedia.org/wiki/Class_diagram (дата
звернення: 08.05.2025).
10. "HTML". URL: https://en.wikipedia.org/wiki/HTML (дата звернення: 13.05.2025).
11. "CSRF". URL: https://en.wikipedia.org/w/index.php?search=Cross-
site+request+forgery&title=Special%3ASearch&ns0=1 (дата звернення:
18.05.2025).
12. "Client-server model". URL: https://en.wikipedia.org/wiki/Client–server_model
(дата звернення: 23.05.2025).
13. "Functional Testing". URL: https://en.wikipedia.org/wiki/Functional_testing (дата
звернення: 28.05.2025).
14. "Software performance testing". URL:
https://en.wikipedia.org/wiki/Software_performance_testing (дата звернення:
28.05.2025).
60
15. Стеценко А. М., Оксамитна Л. П. Веб-додаток для управління персональними
покупками користувачів: Збірник тез доповідей студентської науково-
практичної конференції ЧДТУ : 22-23 квітня 2025 / [упорядник Мельник І.В.];
Міністерство освіти і науки України, Черкаський державний технологічний ун-
т. Черкаси : ЧДТУ, 2025. С. 23.
61
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2025 р.
ВЕБ-ЗАСТОСУНОК ДЛЯ УПРАВЛІННЯ ПЕРСОНАЛЬНИМИ
ПОКУПКАМИ КОРИСТУВАЧІВ
Специфікація
482.ЧДТУ. 52114-01
Листів 2
Розробник ____________________ Аліна СТЕЦЕНКО
Керівник ____________________ Любов ОКСАМИТНА
Черкаси – 2025
62
482.ЧДТУ. 52114-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 52114-01 12 01 Текст програми
482.ЧДТУ. 52114-01 34 01 Інструкція користувача
482.ЧДТУ. 52114-01 90 01 Структура бази даних
482.ЧДТУ. 52114-01 91 01 Публікація по темі
кваліфікаційної роботи
бакалавра
63
ДОДАТОК Б
ВЕБ-ЗАСТОСУНОК ДЛЯ УПРАВЛІННЯ ПЕРСОНАЛЬНИМИ
ПОКУПКАМИ КОРИСТУВАЧІВ
Текст програми
482.ЧДТУ. 52114-01 12 01
Листів 38
Розробник _____________ Аліна СТЕЦЕНКО
Черкаси – 2025
64
Views.py
from django.urls import reverse_lazy
from django.views.generic import ListView, CreateView, UpdateView,
DeleteView
from .models import Object, List
class ListObjectView(ListView):
model = Object
template_name = 'list.html'
context_object_name = "objects"
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["title"] = "Весь список"
return data
def get_queryset(self):
listname = self.kwargs.get('pk')
if listname == 't':
return super().get_queryset().order_by("-id")
elif listname:
return
super().get_queryset().filter(список=listname).order_by("-id")
return super().get_queryset().order_by("-id")
list_objects = ListObjectView.as_view()
class ListObjectsView(ListView):
model = List
template_name = 'index.html'
context_object_name = "lists"
def get_context_data(self, **kwargs):
65
data = super().get_context_data(**kwargs)
data["title"] = "Весь список"
data["heading"] = "Ваші списки"
return data
def get_queryset(self):
return super().get_queryset().order_by("-id")
lists_objects = ListObjectsView.as_view()
class AddObject(CreateView):
model = Object
fields = "__all__"
template_name = 'add.html'
success_url = reverse_lazy('list')
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["title"] = "Додати"
data["heading"] = "Додати"
data["button"] = "Додати +"
return data
add_object = AddObject.as_view()
class AddList(CreateView):
model = List
fields = "__all__"
template_name = 'add.html'
success_url = reverse_lazy('list')
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["title"] = "Додати список"
66
data["heading"] = "Додати список"
data["button"] = "Додати +"
return data
add_list = AddList.as_view()
class UpdateObject(UpdateView):
model = Object
fields = '__all__'
template_name = 'add.html'
success_url = reverse_lazy("list")
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["title"] = "Редагувати"
data["heading"] = "Редагувати"
data["button"] = "Редагувати"
return data
update_object = UpdateObject.as_view()
class UpdateList(UpdateView):
model = List
fields = '__all__'
template_name = 'add.html'
success_url = reverse_lazy("list")
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["title"] = "Редагувати"
data["heading"] = "Редагувати"
data["button"] = "Редагувати"
return data
67
update_list = UpdateList.as_view()
class DeleteObject(DeleteView):
model = Object
success_url = reverse_lazy("list")
template_name = 'delete.html'
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["title"] = "Видалити"
data["heading"] = "Видалити"
return data
delete_object = DeleteObject.as_view()
class DeleteList(DeleteView):
model = List
success_url = reverse_lazy("list")
template_name = 'deletelist.html'
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["title"] = "Видалити"
data["heading"] = "Видалити"
return data
delete_list = DeleteList.as_view()
Models.py
from django.db import models
class Object(models.Model):
назва = models.CharField(max_length=25, blank=False, null=False)
кількість = models.CharField(max_length=255, default="0")
список = models.CharField(max_length=255, default="0")
68
def __str__(self):
return self.name
class List(models.Model):
назва = models.CharField(max_length=25, blank=False, null=False)
def __str__(self):
return self.name
Migrations.py
from django.db import migrations, models
class Migration(migrations.Migration):
initial = True
dependencies = [
]
operations = [
migrations.CreateModel(
name='Object',
fields=[
('id', models.BigAutoField(auto_created=True,
primary_key=True, serialize=False, verbose_name='ID')),
('назва', models.CharField(max_length=25)),
('кількість', models.FloatField(default=0)),
('список', models.FloatField(default=0)),
],
),
migrations.CreateModel(
name='List',
69
fields=[
('id', models.BigAutoField(auto_created=True,
primary_key=True, serialize=False, verbose_name='ID')),
('назва', models.CharField(max_length=25)),
],
),
]
index.html
{% extends 'main.html' %}
{% block style %}
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.object {
width: 90%;
max-width: 800px;
display: flex;
border: none;
background: white;
margin: 1.5rem auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-
in-out;
70
}
.object:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.object-content {
flex: 1;
padding: 1.5rem;
}
.object h3 {
margin: 0 0 0.5rem;
font-size: 1.6rem;
color: #333;
}
.object p {
margin: 0 0 1rem;
color: #666;
}
.actions {
display: flex;
align-items: center;
}
a {
padding: 0.75rem 1.5rem;
text-decoration: none;
border: 2px solid #6c63ff;
border-radius: 8px;
margin: 0 0.5rem;
71
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease;
}
a.primary {
background-color: #6c63ff;
color: white;
}
a.secondary {
background-color: transparent;
color: #6c63ff;
}
a:hover {
background-color: #4b49b1;
color: white;
}
.center {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
</style>
{% endblock %}
{% block content %}
<div class="object">
<div class="object-content">
<h3>{{ 'Всі товари' }}</h3>
<p>Оберіть товар для перегляду або редагування.</p>
<div class="actions">
72
<a href="{% url 'objectlist' 't' %}"
class="primary">Відкрити</a>
</div>
</div>
</div>
{% for list in lists %}
<div class="object">
<div class="object-content">
<h3>{{ list.назва }}</h3>
<p>Керувати списком - {{ list.назва }}</p>
<div class="actions">
<a href="{% url 'objectlist' list.назва %}"
class="primary">Відкрити</a>
<a href="{% url 'deletelist' list.id %}"
class="secondary">Видалити</a>
</div>
</div>
</div>
{% endfor %}
<div class="center">
<a href="{% url 'createlist' %}" class="primary">Додати список +</a>
<a href="{% url 'create' %}" class="secondary">Додати товар</a>
</div>
{% endblock %}
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
73
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans",
"Bitstream Vera Sans", Verdana, Arial, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
}
.header {
width: 100%;
height: 15vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #6a11cb, #2575fc);
color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-size: 1.8rem;
}
.object-container {
width: 80%;
margin: 2rem auto;
padding: 2rem;
74
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.object-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width:900px) {
.object-container {
width: 95%;
padding: 1.5rem;
}
}
</style>
{% block style %}
{% endblock %}
</head>
<body>
<header class="header">
{% if heading %}
<h1>{{ heading }}</h1>
{% else %}
<h1>Список покупок</h1>
{% endif %}
</header>
<div class="object-container">
{% block content %}
{% endblock %}
</div>
75
</body>
</html>
list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans",
"Bitstream Vera Sans", Verdana, Arial, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
}
.header {
width: 100%;
height: 15vh;
display: flex;
justify-content: center;
align-items: center;
76
background: linear-gradient(90deg, #6a11cb, #2575fc);
color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-size: 1.8rem;
}
.object-container {
width: 80%;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.object-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.object {
width: 100%;
display: flex;
border: 1px solid #6a11cb;
margin: 1rem 0;
align-items: center;
padding: 1rem;
transition: 0.3s ease-in-out;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.object:hover {
77
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.object h3 {
width: 50%;
padding-left: 2rem;
color: #333;
}
.object p {
width: 25%;
padding-left: 2rem;
color: #666;
}
a {
padding: 0.5rem 1rem;
text-decoration: none;
background-color: white;
border: 2px solid #6a11cb;
border-radius: 2rem;
margin: 0 0.5rem;
color: #6a11cb;
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease;
}
a:hover {
cursor: pointer;
background-color: #6a11cb;
color: white;
}
78
.center {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
@media screen and (max-width:900px) {
.object-container {
width: 95%;
padding: 1.5rem;
}
}
</style>
{% block style %}
{% endblock %}
</head>
<body>
<header class="header">
{% if heading %}
<h1>{{ heading }}</h1>
{% else %}
<h1>Список покупок</h1>
{% endif %}
</header>
<div class="object-container">
{% block content %}
{% for object in objects %}
<div class="object">
<h3>{{ object.назва }}</h3>
<p>Кількість : {{ object.кількість }}</p>
<a href="{% url 'update' object.id %}">Редагувати</a>
79
<a href="{% url 'delete' object.id %}">Видалити</a>
</div>
{% endfor %}
<div class="center">
</div>
{% endblock %}
</div>
</body>
</html>
add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans",
"Bitstream Vera Sans", Verdana, Arial, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
}
80
.header {
width: 100%;
height: 15vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #6a11cb, #2575fc);
color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-size: 1.8rem;
}
.object-container {
width: 80%;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.object-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
input {
width: 90%;
font-size: 1rem;
padding: 0.5rem 1rem;
margin: 0.5rem 0rem;
border-radius: 0.5rem;
81
border: 1px solid #6a11cb;
}
label {
display: block;
margin: 0.5rem 0 0.2rem;
}
.center {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
}
button {
padding: 0.5rem 1rem;
color: #6a11cb;
background-color: white;
border: 2px solid #6a11cb;
border-radius: 1rem;
margin: 1rem;
width: 40%;
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
color: white;
background-color: #6a11cb;
cursor: pointer;
}
@media screen and (max-width:900px) {
82
.object-container {
width: 95%;
padding: 1.5rem;
}
}
</style>
{% block style %}
{% endblock %}
</head>
<body>
<header class="header">
{% if heading %}
<h1>{{ heading }}</h1>
{% else %}
<h1>Список покупок</h1>
{% endif %}
</header>
<div class="object-container">
{% block content %}
<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<div class="center">
<button type="submit">{{ button }}</button>
</div>
</form>
{% endblock %}
</div>
</body>
</html>
delete.html
<!DOCTYPE html>
<html lang="en">
83
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans",
"Bitstream Vera Sans", Verdana, Arial, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
}
.header {
width: 100%;
height: 15vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #6a11cb, #2575fc);
color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-size: 1.8rem;
}
84
.object-container {
width: 80%;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.object-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.object {
width: 100%;
display: flex;
border: 1px solid #6a11cb;
margin: 1rem 0;
align-items: center;
padding: 1rem;
transition: 0.3s ease-in-out;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.object:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.object h3 {
85
width: 50%;
padding-left: 2rem;
color: #333;
}
.object p {
width: 25%;
padding-left: 2rem;
color: #666;
}
a, button {
padding: 0.5rem 1rem;
text-decoration: none;
background-color: white;
border: 2px solid #6a11cb;
border-radius: 2rem;
margin: 0 0.5rem;
color: #6a11cb;
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease;
}
a:hover, button:hover {
cursor: pointer;
background-color: #6a11cb;
color: white;
}
.center {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
86
padding: 1rem;
flex-wrap: wrap;
}
.center p {
width: 100%;
text-align: center;
font-size: 1.5rem;
}
form {
border: 2px solid #6a11cb;
border-radius: 2rem;
padding: 2rem 0rem;
background-color: #f9f9ff;
}
@media screen and (max-width:900px) {
.object-container {
width: 95%;
padding: 1.5rem;
}
}
</style>
{% block style %}
{% endblock %}
</head>
<body>
<header class="header">
{% if heading %}
<h1>{{ heading }}</h1>
{% else %}
<h1>Список покупок</h1>
87
{% endif %}
</header>
<div class="object-container">
{% block content %}
<form method="post">
{% csrf_token %}
<div class="center">
<p>Ви дійсно хочете видалити зі списку "{{ object.назва
}}"?</p>
<button type="submit">Так, видалити</button>
</div>
</form>
{% endblock %}
</div>
</body>
</html>
deletelist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans",
"Bitstream Vera Sans", Verdana, Arial, sans-serif;
}
body {
88
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
}
.header {
width: 100%;
height: 15vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #6a11cb, #2575fc);
color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-size: 1.8rem;
}
.object-container {
width: 80%;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
.object-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
89
.object {
width: 100%;
display: flex;
border: 1px solid #6a11cb;
margin: 1rem 0;
align-items: center;
padding: 1rem;
transition: 0.3s ease-in-out;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.object:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.object h3 {
width: 50%;
padding-left: 2rem;
color: #333;
}
.object p {
width: 25%;
padding-left: 2rem;
color: #666;
}
a, button {
padding: 0.5rem 1rem;
text-decoration: none;
background-color: white;
90
border: 2px solid #6a11cb;
border-radius: 2rem;
margin: 0 0.5rem;
color: #6a11cb;
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease;
}
a:hover, button:hover {
cursor: pointer;
background-color: #6a11cb;
color: white;
}
.center {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
flex-wrap: wrap;
}
.center p {
width: 100%;
text-align: center;
font-size: 1.5rem;
}
form {
border: 2px solid #6a11cb;
border-radius: 2rem;
padding: 2rem 0rem;
background-color: #f9f9ff;
91
}
@media screen and (max-width:900px) {
.object-container {
width: 95%;
padding: 1.5rem;
}
}
</style>
{% block style %}
{% endblock %}
</head>
<body>
<header class="header">
{% if heading %}
<h1>{{ heading }}</h1>
{% else %}
<h1>Список покупок</h1>
{% endif %}
</header>
<div class="object-container">
{% block content %}
<form method="post">
{% csrf_token %}
<div class="center">
<p>Ви дійсно хочете видалити список?</p>
<button type="submit">Так, видалити</button>
</div>
</form>
{% endblock %}
</div>
</body>
</html>
92
ДОДАТОК В
ВЕБ-ЗАСТОСУНОК ДЛЯ УПРАВЛІННЯ ПЕРСОНАЛЬНИМИ
ПОКУПКАМИ КОРИСТУВАЧІВ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 52114-01 34 01
Листів 4
Розробник _____________ Аліна СТЕЦЕНКО
Черкаси – 2025
93
На головній сторінці (рис. В.1) розробленого веб-застосунку відображаються
всі створені списки покупок. Кожен список містить можливість відкривати його для
перегляду, а також є кнопки для створення нового списку чи додавання товару.
Для створення нового списку необхідно натиснути відповідну кнопку, після
чого з’явиться форма для введення назви списку (рис. В.2).
Після введення назви слід натиснути кнопку підтвердження, і новий список
автоматично з’явиться на головній сторінці.
Рисунок В.1 – Головна сторінка
Рисунок В.2 – Форма створення списку
Для додавання товару в список потрібно скористатися функцією "Додати
товар". Після вибору цієї опції користувачеві буде запропоновано форму для
94
введення назви товару, його кількості та вибору списку, до якого цей товар буде
додано (рис. В.3). Після заповнення форми необхідно натиснути кнопку
підтвердження, і товар з’явиться у вказаному списку.
Рисунок В.3 – Форма додавання товару
Перегляд списку відбувається через кнопку "Відкрити", яка знаходиться біля
кожного списку на головній сторінці. Після її натискання користувач побачить усі
товари, додані до цього списку (рис. В.4), з можливістю їх редагування чи видалення
(рис. В.5–В.6). Для редагування товару потрібно натиснути відповідну кнопку поруч
із товаром, після чого з’явиться форма для внесення змін. Після завершення
редагування зміни необхідно підтвердити.
Рисунок В.4 – Список покупок
95
Рисунок В.5 – Форма редагування покупки
Рисунок В.6 – Меню видалення товару зі списку
Видалення всього списку також доступне через відповідну кнопку на головній
сторінці. Перед видаленням система обов’язково запитує підтвердження, щоб
уникнути випадкового видалення даних (рис. В.7).
Рисунок В.7 – Меню видалення списку
96
ДОДАТОК Г
ВЕБ-ЗАСТОСУНОК ДЛЯ УПРАВЛІННЯ ПЕРСОНАЛЬНИМИ
ПОКУПКАМИ КОРИСТУВАЧІВ
Структура бази даних
482. ЧДТУ. 52114-01 90 01
Листів 3
Розробник _____________ Аліна СТЕЦЕНКО
Черкаси – 2025
97
Рисунок Г.1 – Структура бази даних
Рисунок Г.2 – Таблиця списків в базі даних
98
Рисунок Г.3 – Таблиця товарів в базі даних
Рисунок Г.4 – Таблиця відстеження моделей у проєкті
99
ДОДАТОК Д
ВЕБ-ЗАСТОСУНОК ДЛЯ УПРАВЛІННЯ ПЕРСОНАЛЬНИМИ
ПОКУПКАМИ КОРИСТУВАЧІВ
Публікація по темі кваліфікаційноої рооботи бакалавра
482. ЧДТУ. 52114-01 91 01
Листів 4
Розробник _____________ Аліна СТЕЦЕНКО
Черкаси – 2025
100
101
ВЕБ-ДОДАТОК ДЛЯ УПРАВЛІННЯ ПЕРСОНАЛЬНИМИ ПОКУПКАМИ
КОРИСТУВАЧІВ
Стеценко А. М. (студентка ФІТІС), Оксамитна Л. П., к.т.н., доц.
Черкаський державний технологічний університет
У сучасному інформаційному просторі важливим аспектом організації життя стає
ефективне керування повсякденними завданнями. Одним із таких ключових завдань
є складання списків покупок, що стимулює розробку засобів для їх
автоматизації. Виходячи з цього, розробка веб-додатку для персонального
управління покупками набуває значної актуальності в науковому контексті.
У даній роботі було всебічно проаналізовано створення веб-орієнтованого сервісу,
спрямованого на полегшення планування покупок користувачами. Додаток дозволяє
формувати списки, додавати товари, класифікувати їх за категоріями та
встановлювати нагадування про виконання покупок. Основні завдання дослідження
включали:
− аналіз наявних цифрових рішень для планування покупок;
− вивчення зручних методів взаємодії з користувачем;
− вибір оптимального технологічного стеку для створення сучасного веб-додатку;
− реалізацію функцій створення, редагування та збереження списків;
− забезпечення користувацької підтримки через адаптивний інтерфейс.
Для реалізації серверної частини використовували фреймворк Django, тоді як
клієнтська частина була побудована з урахуванням принципів адаптивного дизайну
та UX/UI. Додаток пропонує функції авторизації, керування списками, підтримки
товарних категорій, системи нагадувань та має спеціальний розділ для ідей
подарунків.
Створений веб-додаток суттєво підвищує продуктивність і ефективність
користувачів, забезпечуючи швидке та зручне управління повсякденними
покупками. Таке рішення має потенціал до подальшого розвитку, наприклад,
інтеграції з маркетплейсами або додавання функцій спільного використання
списків.
102