Разработка интернет-магазина Pokupki.by

1.

Разработка интернетмагазина Pokupki.by
С момента своего основания в 1989 году Всемирная паутина
кардинально изменила нашу жизнь, став публичной площадью,
библиотекой, магазином и многим другим. Интернет-магазины
произвели революцию в деловом мире, сделав покупки
доступными одним щелчком мыши.
Актуальность исследования интернет-магазинов и их разработки с
использованием современных технологий очевидна. В рамках
дипломного проекта поставлена задача разработать веб-сайт
«интернет-магазин Pokupki.by» для продажи одежды с
возможностью определения точного размера онлайн.

2.

Обзор интернет-магазинов
Что такое веб-сайт?
Интернет-магазин
Набор веб-страниц, доступных
Сервис для онлайн-покупок,
в Интернете, сгруппированных
популярный вид B2C торговли,
по содержанию и навигации.
не имеющий
пространственных
ограничений.
Особенности
Предлагает больше товаров и информации, чем офлайн-магазины,
позволяя персонализацию для повышения продаж.
Интернет-магазины стали основным средством коммерческих сделок,
позволяя потребителям напрямую покупать товары или услуги у продавца
через веб-браузер. Это помогает покупателям-аналитикам приобрести товар
после тщательного поиска.

3.

Преимущества и недостатки онлайн-покупок
Преимущества
Недостатки
• Экономия времени и усилий
• Невозможность физически осмотреть товар
• Удобство покупки из дома
• Потеря возможности договариваться о цене
• Широкий ассортимент продукции
• Проблемы с обратным заказом
• Хорошие скидки / низкие цены
• Риск мошенничества
• Подробная информация о товаре
• Расходы на возврат и доставку
• Возможность сравнить разные модели/марки
• Отсутствие личного контакта при проблемах
• Отсутствие толпы и очередей
• Нестабильный ассортимент
• Анонимность
• Необходимость регистрации
Покупки в интернет-магазинах предоставляют ряд преимуществ, таких как удобство, лучшие цены и большее разнообразие.
Однако существуют и недостатки, включая проблемы с доставкой, безопасностью и невозможностью физического осмотра
товара.

4.

Принципы разработки интернет-магазинов
Предварительный этап
Обсуждение общих концепций и определение цели веб-сайта.
Этап проектирования
Определение структуры сайта: меню, ссылки, размещение модулей.
Этап разработки и тестирования
Создание и проверка функциональности сайта.
Размещение сайта
Публикация веб-ресурса в Интернете.
Развитие ресурса
Постоянное улучшение и обновление сайта.
Разработка интернет-магазина включает несколько ключевых этапов, от предварительного обсуждения до постоянного развития ресурса.
Современные подходы включают ручную реализацию или использование CMS, каждая из которых имеет свои преимущества и недостатки.

5.

Классификация интернет-магазинов
По методу розничной продажи
Интернет-магазины, веб-витрины, системы для торговли, потребительские энциклопедии.
По бизнес-модели
Онлайн-магазин в симбиозе с офлайн-бизнесом (продажа товаров из существующего физического
магазина).
По взаимодействию с поставщиком
Магазины с собственной базой товаров или сотрудничающие по договору с поставщиком.
По проценту автоматизации
Веб-витрины, интернет-магазины и торговые Интернет-системы (ТИС).
Интернет-магазины классифицируются по различным критериям, включая метод розничной продажи,
бизнес-модель, взаимодействие с поставщиком и процент автоматизации. Веб-витрины, например,
выступают инструментом для привлечения клиентов и проведения маркетинговых операций.

6.

Постановка задачи для Pokupki.by
Проектирование структуры
Разработка структуры интернет-магазина для клиента и администратора.
Моделирование UML-диаграмм
Определение классов, атрибутов, методов и процессов работы сайта с помощью UML.
Разработка основных модулей
Создание функций просмотра товара, определения размера, корзины, оформления заказа и административной панели.
Наполнение контентом
Создание категорий, информационных блоков и наполнение магазина.
Расчет затрат
Определение затрат на разработку и внедрение проектного решения.
Основная задача дипломной работы — разработка интернет-магазина Pokupki.by. Цель — провести анализ электронной коммерции,
рассмотреть аналоги и создать функциональный интернет-магазин для продажи одежды с учетом удобства для пользователя.

7.

Структура интернет-магазина
Важность структуры
Типы структур
Удобная и логичная структура сайта — это "каркас",
• Линейная (последовательная)
который обеспечивает быстрое и эффективное
• Иерархическая (древовидная)
взаимодействие клиента с ресурсом.
• Сетевая
• Комбинированная
Выбор структуры интернет-магазина является одним из важнейших этапов проектирования. Неправильно
структурированный сайт приведет к потере клиента. Большинство онлайн-ресурсов содержат одинаковые
функциональные части, но их внешний вид уникален.

8.

Проектирование структуры
Pokupki.by
Главная страница
Хедер и навигация
Основной блок
Неотъемлемая часть сайта с
Верхняя часть сайта с
Содержит контент, баннеры
адаптированной навигацией
логотипом, языком,
для рекламы и повышения
и полезным контентом.
валютой, корзиной и
продаж.
основными разделами.
Футер
Нижняя часть сайта с
авторскими правами,
контактами, ссылками на
соцсети и подпиской.
Для интернет-магазина Pokupki.by выбрана комбинированная структура, обеспечивающая
простоту и удобство для посетителя. Особое внимание уделено главной странице, которая
должна привлекать клиентов своей четкостью и информативностью.

9.

Моделирование работы веб-сайта с UML
1
Язык UML
Общецелевой язык визуального моделирования для спецификации, визуализации,
проектирования и документирования ПО.
2
Диаграмма классов
Показывает структуру системы на уровне классов и интерфейсов, их особенности,
ограничения и связи.
3
Диаграмма вариантов использования
Описывает функциональные требования системы с точки зрения пользователей.
4
Диаграмма последовательности
Указывает последовательность обмена сообщениями между жизненными действиями.
Для функциональной и понятной работы сайта необходимо его спроектировать, используя язык
UML. UML является стандартным языком моделирования, который облегчает разработку
программного продукта, позволяя легко преобразовать модель в программный код.

10.

Диаграмма классов интернетмагазина Pokupki.by
Класс Admin
Администратор интернет-магазина
Класс Users
Пользователь и клиент интернетмагазина
Класс Orders
Заказ, который осуществляет
покупатель
Класс Products
Товар в магазине
Класс Cart
Корзина для покупок
Класс Authorization
Авторизация пользователя
Класс Registration
Регистрация пользователя
Диаграмма классов интернет-магазина Pokupki.by включает основные классы:
пользователь, администратор, продукт, список пожеланий, заказ, корзина, новости.
Она отражает их атрибуты, операции и ассоциации, такие как агрегация, композиция и
зависимость, обеспечивая основу для объектно-ориентированного проектирования.

11.

Проектирование и
Реализация Интернетмагазина "Pokupki.by"
Данная презентация подробно описывает процесс проектирования
и программной реализации интернет-магазина "Pokupki.by". Мы
рассмотрим ключевые диаграммы, структуру базы данных и
архитектурные решения, а также основные функции и
экономическое обоснование проекта.

12.

Диаграмма Классов: Структура Системы
Диаграмма классов является основным строительным блоком объектно-ориентированного метода, показывая
структуру спроектированной системы на уровне классов и интерфейсов, их особенности, ограничения и связи. Она
позволяет изобразить разные аспекты концепции ООП, ускоряет анализ и является базой для развертывания.
Основные классы
Цели использования
• Пользователь
• Изображение концепции ООП
• Администратор
• Быстрый и эффективный анализ
• Продукт
• База для развертывания
• Заказ
• Моделирование с точки зрения бизнеса
• Корзина

13.

Диаграмма Вариантов
Использования: Поведение Системы
Диаграмма вариантов использования отражает поведение системы через
функциональную модель, содержащую прецеденты, действующих лиц (актеров) и
связи между ними. Она идеально подходит для представления целей взаимодействия
система-пользователь и определения функциональных требований.
Клиент
(незарегистрированный)
Покупатель
(авторизованный)
Просмотр каталога, поиск товаров,
Все возможности клиента, плюс
добавление в корзину, создание
авторизация, редактирование
учетной записи.
профиля, список пожеланий,
управление корзиной.
Администратор (менеджер)
Все функции покупателя, плюс управление контентом и заказами.

14.

Диаграмма Последовательности:
Процесс Оформления Заказа
Диаграмма последовательности используется для отображения интерактивности объектов
поведения системы в языке UML. Она демонстрирует связи между объектами в
последовательном порядке, что удобно для детализации процессов, таких как оформление
заказа.
Авторизация пользователя
Пользователь заполняет форму, запрос отправляется на веб-сервер, затем в
БД для проверки, и возвращается подтверждение.
Переход к оформлению заказа
Покупатель запрашивает страницу оформления заказа, веб-сервер
возвращает интерфейс.
Внесение данных и сохранение
Пользователь вводит данные, запрос на сохранение отправляется на сервер и
в БД, затем возвращается страница с информацией о заказе.

15.

Проектирование Структуры Базы Данных
Для организации четкой работы с данными интернет-магазина "Pokupki.by" была спроектирована база данных. Концептуальное
проектирование включало сбор требований, анализ предметной области и определение сущностей (таблиц), атрибутов и связей
между ними.
Концептуальное
проектирование
Основные сущности
Цель
Users, Products, Orders, Categories,
Автоматизация информационных
Сбор и анализ требований к данным,
Reviews, Images, Wishlist,
процессов для быстрого и
определение сущностей и связей.
Discount_cards.
качественного взаимодействия
продавца, менеджера и клиентов.

16.

Архитектура Веб-приложения:
Клиент-Сервер
Архитектура веб-приложений – это схема взаимодействия между
компонентами. Для интернет-магазина "Pokupki.by" выбрана
трехуровневая архитектура: Клиент, Сервер и База данных. Это
обеспечивает устойчивость, эффективность и безопасность.
Клиент
Браузер (Google
Chrome, Safari),
отображает HTML,
реагирует на ввод
пользователя.
Сервер Веб-сервер
(FuelPHP),
обрабатывает
запросы,
формирует HTMLответы, хранит
данные.
База данных
MySQL, хранит
устойчивые данные
(профили, товары,
заказы).

17.

Выбор Программных Средств Реализации
Для реализации проекта были выбраны передовые технологии. На стороне сервера используется framework
FuelPHP, а для клиентской части – ReactJS. Это обеспечивает гибкость, производительность и удобство разработки.
FuelPHP (Сервер)
ReactJS (Клиент)
• HMVC-шаблон
• Интерактивные UI
• Модульная архитектура
• Декларативный подход
• Гибкие компоненты
• Компонентная структура
• Поддержка RESTful API
• JSX синтаксис
• Безопасное хеширование
• Односторонняя передача данных
• Virtual DOM

18.

Программная Реализация Базы
Данных с MySQL
Для разработки базы данных использовалась система управления базами данных
MySQL, а для ее администрирования – веб-приложение phpMyAdmin. MySQL – это
популярная реляционная СУБД, обеспечивающая высокую скорость и гибкость
работы с данными.
MySQL
phpMyAdmin
Реляционная СУБД, хранит
Интуитивно понятный веб-
данные в отдельных таблицах,
инструмент для
связанных отношениями.
администрирования MySQL.
Используется SQL для доступа.
Позволяет создавать,
просматривать, редактировать
таблицы и записи.
Взаимодействие с веб-приложением
Настройка PHP-скриптов и конфигурационных файлов FuelPHP для связи с
базой данных.

19.

Основные Функции Магазина:
Клиентская и Серверная Части
Проект имеет клиент-серверную архитектуру, где ReactJS отвечает за клиентскую часть, а
FuelPHP – за серверную. Реализованы ключевые функции, такие как авторизация, регистрация,
управление корзиной и списком пожеланий, а также обновление валюты.
1
Авторизация и Регистрация
Асинхронные функции с проверкой данных на сервере и сохранением usertoken в
cookie.
2
Управление Корзиной
Добавление, удаление и обновление товаров в корзине с сохранением состояния.
3
Список Пожеланий и Сравнение
Функции для добавления товаров в список пожеланий и сравнения с проверкой
условий.
4
Обновление Валюты
Получение актуальных курсов валют с Национального банка Республики Беларусь.

20.

Интерфейс Пользователя и
Администрирование
Интернет-магазин "Pokupki.by" обладает понятным и удобным интерфейсом. Главная страница содержит верхнее
меню, баннер, рекомендованные и популярные товары, а также футер. Предусмотрены формы
авторизации/регистрации, личный кабинет, страницы товаров, корзина и возможность оставить отзыв.
Клиентский интерфейс
Административная панель
• Главная страница с навигацией
• Статистика сайта
• Формы авторизации/регистрации
• Управление категориями и товарами
• Личный кабинет с историей заказов
• Просмотр и редактирование заказов
• Страницы товаров с фильтрами и сортировкой
• Обработка вопросов клиентов
• Корзина и оформление заказа
• Наполнение контентом
• Отзывы о товарах