Vebzastosunok-magazinu-z-admin-panellyu-na-Flask

1.

Вебзастосунок магазину з
адмін-панеллю на Flask
Автори: Чаркін Дмитро, Пахольчук Максим, Мельник Станіслав
Група:ІПЗ-23
Дата: 17.12.2025
Цей проєкт демонструє розробку повнофункціонального
вебзастосунку магазину, який поєднує в собі зручний інтерфейс для
покупців та потужну адміністративну панель для керування
контентом.

2.

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

3.

Розроблене рішення
Наш проєкт пропонує комплексне рішення для електронної комерції, що охоплює як
інтерфейс користувача, так і потужну адміністративну частину.
Стислий опис
Ключова цінність
Розроблено повноцінний
Зручне керування товарами,
вебзастосунок магазину з frontend-
централізована адміністративна
частиною, backend на Flask та
панель та гнучкий API для взаємодії
ефективною базою даних.
з даними.
Унікальні особливості
Повноцінний REST API для
інтеграції
Захищений адмін-доступ для
керування
Чітке розділення frontend і
backend для масштабованості

4.

Використаний технологічний стек
Для створення цього вебзастосунку було обрано перевірені та сучасні технології, які забезпечують надійність,
швидкість та легкість розширення.
Git
Система контролю версій для командної
Frontend
HTML: Структура контенту
CSS (Tailwind CSS): Стилізація інтерфейсу
JavaScript: Динамічна поведінка
роботи та відстеження змін.
Docker
Платформа для контейнеризації, що
забезпечує послідовне розгортання.
Flask CLI
Backend
Python: Мова програмування
Flask: Вебфреймворк
База даних
SQLite: Легка та вбудована БД
Інструмент командного рядка для
керування застосунком Flask.

5.

Архітект ура системи
Вебзастосунок побудований за принципом клієнт-серверної архітектури, де frontend та backend
взаємодіють через API.
Корист увач
Взаємодіє з інтерфейсом
База даних
SQLite зберігає дані
B ackend (F las k)
В зає модія
компонентів
F rontend
HTML, CSS, JS
API (маршрути)
Обробка логіки і бізнесу
REST-підходи на Flask
Користувач взаємодіє з Frontend, який надсилає HTTP-запити до REST API. Backend на Flask обробляє

6.

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

7.

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

8.

Нові ф ункції та покращення (ЛР 9)
В рамках лабораторної роботи №9 було реалізовано значні покращення, що зробили проєкт більш завершеним та готовим до використання.
Завершена структура проє кту
API Endpoints
Оптимізована та логічна організація файлів та директорій для зручності розробки.
Реалізовані всі необхідні API-точки для взаємодії з даними та функціоналом.
Повноцінна адмін-панель
Підготовка до production
Розроблена інтуїтивно зрозуміла та функціональна панель для керування магазином.
Впроваджені рішення для стабільності та масштабованості застосунку.
Покращення
Чітка архітектура: Модульний підхід, що спрощує підтримку та розвиток.
Зручне розширення: Легкість додавання нового функціоналу та інтеграції.

9.

Структура бази даних
База даних SQLite організована для ефективного зберігання інформації про користувачів та товари, забезпечуючи
зв'язок між ними.
USERS
POSTS / PRODUCTS
id (PK): Унікальний ідентифікатор користувача
id (PK): Унікальний ідентифікатор товару
username: Ім'я користувача для входу
user_id (FK): Зв'язок з користувачем (автором)
email: Електронна пошта користувача
title / name: Назва товару/публікації
content / description: Детальний опис товару
Зв'язок: Один користувач може створювати багато записів/товарів (відношення "один до багатьох").

10.

API Endpoints
REST API надає гнучкий інтерфейс для взаємодії з даними, дозволяючи виконувати всі основні операції (CRUD) з користувачами та товарами.
1
GET /api/feedback
Отримати список всіх відгуків
2
POST /api/feedback
Створити новий відгук
3
DELETE /api/v1/feedback/{feedback_id}
Видалення відгуку
4
GET /api/v1/orders
Отримати всі замовлення
5
POST /api/v1/orders
Сворити нове замовлення
6
DELETE /api/v1/orders /{orders_id}
Видалити замовлення
7
GET /api/v1/orders /{orders_id}
Отримати інформацію про замовлення
8
PUT /api/v1/orders /{orders_id}
Оновити статус замовлення
9
GET /api/v1/products
Отримати всі товари

11.

Технічні виклики
Під час розробки вебзастосунків часто виникають технічні складнощі, які вимагають
ретельного підходу до архітектури та реалізації.
Проблеми
Рішення
Підключення JavaScript: Забезпечення
Використання REST API:
безшовної взаємодії динамічного
Стандартизований інтерфейс для
клієнтського функціоналу з серверною
взаємодії між frontend та backend, що
логікою без перезавантаження
дозволяє компонентам працювати
сторінки.
незалежно.
Передача даних: Ефективна, безпечна
Чітке розділення логіки: Розподіл
та стандартизована організація обміну
відповідальності між клієнтською
інформацією між клієнтською та
(відображення) та серверною (бізнес-
серверною частинами застосунку.
логіка, дані) частинами для зручності
Масштабованість: Розробка системи,
розробки та масштабованості.
здатної обробляти зростаючу кількість
Модульна архітектура: Побудова
користувачів та даних без втрати
системи з незалежних, легко замінних
продуктивності.
модулів, що спрощує підтримку та
подальший розвиток.

12.

Цікаві технічні рішення
Розглянемо приклад реалізації API endpoint для створення замовлень, який демонструє ключові аспекти розробки Backend-логіки.
@api_v1.post("/orders")
Обробка HTTP-запитів
def api_add_order():
data = request.get_json() or {}
Використання декоратора @api_v1.post("/orders") для легкого визначення маршруту та методу
validate_json(["email", "address", "product_id", "quantity"], data)
POST.
conn = get_db_connection()
product = conn.execute(
"SELECT price FROM products WHERE id = ?",
(data["product_id"],)
).fetchone()
if not product:
return jsonify({"error": "Product not found"}), 404
Валідація даних
Функція validate_json забезпечує перевірку наявності всіх необхідних полів перед обробкою
замовлення.
Взаємодія з базою даних
З'єднання з SQLite для отримання інформації про продукт та використання параметризованих
cart = {
запитів для безпеки.
"1": {
"id": data["product_id"],
"quantity": data["quantity"],
"price": product["price"]
}
Коректна обробка помилок
Використання статусу 404, якщо продукт не знайдено, що робить API передбачуваним для клієнтів.
}
conn.close()
add_order(data["email"], data["address"], cart)
Формована відповідь API
return jsonify({"created": True}), 201
Повернення JSON-відповіді з відповідним HTTP-статусом (201 Created) після успішного виконання.

13.

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

14.

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

15.

Висновки
1
Реалізовано: Повнофункціональний вебзастосунок
Створено комплексне рішення для онлайн-магазину з продажу тюнінгованих
автомобілів, включаючи повноцінний користувацький інтерфейс та
адміністративну панель для управління.
2
Отримані ключові навички
Глибокі знання фреймворку Flask
Проектування та розробка REST API
Ефективна робота з базами даних (SQLite)
Інтегрована Frontend та Backend розробка
Дякую за увагу!