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

1.

Министерство профессионального образования и
занятости населения Приморского края
краевое государственное автономное
профессиональное образовательное учреждение
«Владивостокский судостроительный колледж»
Дипломный проект
Разработка клиент-серверного модуля
и внедрение в веб-сайт магазина по
продаже мобильных телефонов
Выполнил студент гр.16-241: М.В. Тараканов
Руководитель: И.Е. Толок

2.

Цели и задачи
Цели:
Разработка и внедрение
полнофункционального
клиент-серверного модуля
для автоматизации онлайнпродаж в интернетмагазине.
Задачи:
1. Изучить предметную область и
структуру организации
2. Разработать пользовательские
сценарии (TaskFlow, CJM)
3. Реализовать клиентскую (React) и
серверную (Node.js) части сайта
4. Обеспечить информационную
безопасность и удобство
использования системы.

3.

Используемые технологии
Frontend: React, Tailwind CSS, Axios
Backend: Node.js, Express.js
База данных: MongoDB (Mongoose)
Среда разработки: Visual Studio Code
Контроль версий: Git + GitHub
Дизайн: Figma
Файлы: Uploadcare

4.

Хостинг и развертывание
Платформа: Render
— Автоматическое
развертывание из Git
— Предоставление и
управление SSLсертификатами
Сайт Render.com
Сайт доступен по адресу:
https://aura-shop.onrender.com

5.

Структура сайта
Для пользователя:
— Главная страница с динамическим контентом
— Каталог с фильтрацией и карточки товаров
— Корзина и пошаговое оформление заказа
— Личный кабинет с историей заказов
— Регистрация, вход и форма обратной связи
Для администратора:
— Защищенная панель управления
(товары, заказы, сообщения)

6.

Организация «Aura Shop»
Формат: интернет-магазин без офлайн-точек
Организационная структура:
— Индивидуальный предприниматель
(руководитель проекта);
— Менеджер по продажам (операционная
работа с заказами и клиентами).
Организационная структура

7.

UX-исследования: Task Flow
Ключевой сценарий: покупка смартфона
— Вход на сайт
— Поиск товара через каталог с
использованием фильтров
— Выбор конфигурации (цвет, память)
— Добавление в корзину и оформление
заказа
— Регистрация/авторизация
— Получение подтверждения о покупке
Task Flow
Task flow — это визуальное представление этапов, которые
пользователь проходит для выполнения определённой задачи в
системе или приложении

8.

UX-исследования: Customer Journey Map
Анализ действий, мыслей, эмоций,
барьеров пользователя
Этапы:
1. Осознание потребности
2. Поиск товара на сайте
3. Оформление и оплата заказа
4. Ожидание и получение доставки
Customer Journey Map
Customer Journey Map (CJM, карта пути клиента) — это
маркетинговый инструмент, который позволяет визуализировать и
проанализировать взаимодействие клиента с брендом или продуктом
от знакомства с ним до совершения покупки и послепродажного

9.

Интерфейс сайта
— Интерактивные компоненты: карточки товаров,
корзина, модальные окна
— Адаптивный дизайн: корректное отображение на
ПК и мобильных устройствах
— Продвинутая навигация: реализованы фильтры,
поиск и сортировка в каталоге
— Современный UX: плавные анимации,
интуитивно понятные переходы, визуальная
обратная связь

10.

База данных MongoDB
— Используется облачный сервис MongoDB Atlas
— Спроектированы и реализованы модели данных: "Товар",
"Пользователь", "Заказ", "Сообщение"
— Взаимодействие с данными через ODM Mongoose и REST API
— Обеспечена целостность данных через схемы и валидацию
MongoDB Atlas

11.

Форма обратной связи
— Разработана форма связи на сайте
— Данные отправляются в MongoDB и отображаются
администратору
— Реализовано подтверждение успешной отправки
— Все обращения сохраняются и доступны для ответа
База данных Mongo
Сообщение в админ-панели

12.

Панель администратора
CRUD-операции с товарами:
добавление, редактирование, копирование, удаление
Управление заказами: просмотр и изменение статусов доставки
Клиентская поддержка: просмотр и ответ на сообщения пользователей
Управление главной страницей:
настройка слайдеров и подборок товаров
Безопасность: доступ защищен ролевой моделью (только для
администраторов)

13.

Информационная безопасность
Аутентификация:
через JWT-токен с ограниченным сроком действия
Авторизация:
разделение доступа на роли
"пользователь" и "администратор"
Защита данных:
1. Хеширование паролей (bcryptjs)
2. Защищенные маршруты на backend и frontend
3. Хранение ключей и паролей в переменных окружения
Безопасность передачи:
весь трафик шифруется по протоколу HTTPS (SSL)

14.

Результаты проекта
1. Реализован функциональный клиент-серверный модуль
2. Сайт доступен онлайн: https://aura-shop.onrender.com
3. Внедрена база данных и админ-панель
4. Обеспечена безопасность и масштабируемость
5. Все пользовательские сценарии реализованы

15.

Заключение
— Проект полностью соответствует поставленным
целям и задачам.
— Разработан современный сайт для онлайн-торговли.
— Применены актуальные технологии и методы
проектирования.
— Готов к дальнейшему развитию и применению на
практике.