|
|
@@ -0,0 +1,741 @@
|
|
|
+# ОТЧЁТ ПО СОЗДАНИЮ ИНТЕРНЕТ-МАГАЗИНА МУЖСКОЙ ОДЕЖДЫ TARASALE
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## Выполнил
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+**Студент 26 группы**
|
|
|
+
|
|
|
+**Тарабан Матвей**
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Введение
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В рамках учебной практики был разработан демонстрационный интернет-магазин мужской одежды **TaraSale**.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Целью проекта являлось создание современного интернет-магазина с удобным каталогом товаров, системой оформления заказов, личным кабинетом пользователя и адаптивным интерфейсом.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Разработка выполнялась с использованием искусственного интеллекта **Codex**. Работа велась поэтапно: сначала была сформирована концепция сайта, после чего последовательно добавлялись новые функции, улучшался интерфейс и исправлялись найденные ошибки.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Моей задачей являлось формирование технических заданий, тестирование сайта, поиск недостатков и постановка задач на их исправление.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Личный вклад в разработку проекта
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Несмотря на использование Codex для программной реализации проекта, значительная часть работы была выполнена самостоятельно.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+На протяжении всей разработки мной выполнялись следующие задачи:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* формирование концепции интернет-магазина;
|
|
|
+
|
|
|
+* разработка структуры сайта;
|
|
|
+
|
|
|
+* постановка технических заданий для Codex;
|
|
|
+
|
|
|
+* тестирование функционала сайта;
|
|
|
+
|
|
|
+* поиск ошибок и недочётов интерфейса;
|
|
|
+
|
|
|
+* принятие решений по дизайну страниц;
|
|
|
+
|
|
|
+* подбор ассортимента товаров;
|
|
|
+
|
|
|
+* самостоятельный поиск изображений товаров;
|
|
|
+
|
|
|
+* подготовка изображений для размещения на сайте;
|
|
|
+
|
|
|
+* загрузка изображений в репозиторий проекта;
|
|
|
+
|
|
|
+* передача подготовленных материалов в Codex для интеграции на сайт;
|
|
|
+
|
|
|
+* проверка корректности отображения товаров и фотографий;
|
|
|
+
|
|
|
+* контроль соответствия результата первоначальной задумке проекта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Все фотографии товаров, использованные в каталоге, были найдены и отобраны мной самостоятельно.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+После поиска изображения загружались в репозиторий проекта и использовались для формирования каталога товаров, карточек товаров и раздела **«Образы»**.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Таким образом, моя работа заключалась не только в постановке задач, но и в наполнении сайта контентом, тестировании его работы и управлении процессом разработки на всех этапах создания проекта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Концепция проекта
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В качестве тематики был выбран интернет-магазин мужской одежды.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Основная идея проекта — создать современный магазин мужской одежды с минималистичным дизайном и удобным пользовательским интерфейсом.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В каталоге представлены:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* футболки;
|
|
|
+
|
|
|
+* лонгсливы;
|
|
|
+
|
|
|
+* худи;
|
|
|
+
|
|
|
+* свитеры;
|
|
|
+
|
|
|
+* рубашки;
|
|
|
+
|
|
|
+* поло;
|
|
|
+
|
|
|
+* джинсы;
|
|
|
+
|
|
|
+* спортивные штаны;
|
|
|
+
|
|
|
+* куртки;
|
|
|
+
|
|
|
+* кроссовки.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Дизайн выполнен в светлых нейтральных тонах с акцентом на фотографии товаров.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Создание структуры сайта
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## Исходный промпт для создания сайта
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для создания первоначальной версии сайта был подготовлен следующий запрос к системе искусственного интеллекта ChatGPT.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+### Основные требования
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* высокая производительность и быстрая загрузка;
|
|
|
+
|
|
|
+* адаптивный дизайн (Mobile First);
|
|
|
+
|
|
|
+* современный минималистичный стиль;
|
|
|
+
|
|
|
+* каталог товаров;
|
|
|
+
|
|
|
+* корзина покупок;
|
|
|
+
|
|
|
+* фильтрация и сортировка товаров;
|
|
|
+
|
|
|
+* карточки товаров с описанием и характеристиками;
|
|
|
+
|
|
|
+* страницы «О бренде», «Доставка», «Возврат», «Контакты»;
|
|
|
+
|
|
|
+* сохранение корзины через LocalStorage;
|
|
|
+
|
|
|
+* демонстрационная система оформления заказа;
|
|
|
+
|
|
|
+* автоматическое создание товаров на основе изображений из папки проекта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В запросе также был указан полный список товаров, категорий, требований к дизайну, структуре сайта, способам оплаты, оформлению карточек товаров и адаптивности интерфейса.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Полный текст исходного промпта был использован как техническое задание для генерации первой версии проекта TaraSale.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+После генерации первой версии сайта проект дорабатывался дополнительными запросами к ChatGPT и Codex, в результате чего были реализованы новые функции, исправлены ошибки и улучшен дизайн сайта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+### Основные разделы сайта
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* Главная страница;
|
|
|
+
|
|
|
+* Каталог;
|
|
|
+
|
|
|
+* Образы;
|
|
|
+
|
|
|
+* О бренде;
|
|
|
+
|
|
|
+* Доставка и оплата;
|
|
|
+
|
|
|
+* Возврат и обмен;
|
|
|
+
|
|
|
+* Контакты;
|
|
|
+
|
|
|
+* Корзина;
|
|
|
+
|
|
|
+* Личный кабинет.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Также была реализована система навигации между страницами.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Реализация каталога товаров
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+На сайте был реализован каталог товаров.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для каждого товара были добавлены:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* фотографии;
|
|
|
+
|
|
|
+* название;
|
|
|
+
|
|
|
+* описание;
|
|
|
+
|
|
|
+* цена;
|
|
|
+
|
|
|
+* размеры;
|
|
|
+
|
|
|
+* характеристики;
|
|
|
+
|
|
|
+* категория.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для удобства пользователей были реализованы фильтры по категориям товаров.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Каталог автоматически отображает только те категории, в которых присутствуют товары.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Также была реализована сортировка товаров по различным параметрам.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Реализация карточки товара
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для каждого товара была создана отдельная карточка.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Карточка содержит:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* галерею фотографий;
|
|
|
+
|
|
|
+* описание товара;
|
|
|
+
|
|
|
+* состав ткани;
|
|
|
+
|
|
|
+* рекомендации по уходу;
|
|
|
+
|
|
|
+* таблицу размеров;
|
|
|
+
|
|
|
+* выбор размера;
|
|
|
+
|
|
|
+* выбор цвета;
|
|
|
+
|
|
|
+* добавление в корзину;
|
|
|
+
|
|
|
+* добавление в избранное.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В процессе разработки были исправлены ошибки отображения фотографий.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Изначально некоторые изображения отображались слишком увеличенными. После доработки фотографии стали корректно отображаться без растягивания и потери пропорций.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Также была реализована автоматическая прокрутка страницы вверх при открытии карточки товара для улучшения пользовательского опыта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Реализация отзывов
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для повышения реалистичности сайта была разработана система отзывов.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для каждого товара отображается собственный набор отзывов покупателей.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В рамках доработки были выполнены следующие изменения:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* отзывы стали индивидуальными для каждого товара;
|
|
|
+
|
|
|
+* комментарии написаны в разговорном стиле;
|
|
|
+
|
|
|
+* устранены повторяющиеся имена пользователей;
|
|
|
+
|
|
|
+* устранены повторяющиеся фамилии пользователей;
|
|
|
+
|
|
|
+* отзывы сделаны более естественными и похожими на реальные комментарии покупателей.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Это позволило значительно повысить реалистичность интернет-магазина.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Реализация системы скидок
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для части товаров были добавлены небольшие скидки.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В карточках товаров отображаются:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* текущая цена;
|
|
|
+
|
|
|
+* старая цена;
|
|
|
+
|
|
|
+* размер скидки в процентах.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Скидки имеют демонстрационный характер и используются для имитации работы реального интернет-магазина.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Реализация раздела «Образы»
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для повышения удобства пользователей был создан отдельный раздел **«Образы»**.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В данном разделе представлены готовые комплекты одежды, собранные из товаров каталога.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для каждого образа отображаются:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* фотография образа;
|
|
|
+
|
|
|
+* описание комплекта;
|
|
|
+
|
|
|
+* перечень входящих товаров;
|
|
|
+
|
|
|
+* кнопка перехода к товарам образа.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Данный раздел помогает пользователям подобрать сочетающиеся между собой вещи.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Реализация личного кабинета
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+На сайте была реализована система пользовательских аккаунтов.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Созданы следующие страницы:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* Регистрация;
|
|
|
+
|
|
|
+* Авторизация;
|
|
|
+
|
|
|
+* Личный кабинет.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Пользователь может:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* зарегистрироваться;
|
|
|
+
|
|
|
+* войти в аккаунт;
|
|
|
+
|
|
|
+* выйти из аккаунта;
|
|
|
+
|
|
|
+* сохранять данные между посещениями сайта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для хранения информации используется **LocalStorage** браузера.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Также было реализовано выпадающее меню пользователя, которое появляется только после нажатия на иконку аккаунта и автоматически закрывается при повторном нажатии или клике вне области меню.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Использованные технологии
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В ходе разработки использовались следующие технологии:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* HTML5;
|
|
|
+
|
|
|
+* CSS3;
|
|
|
+
|
|
|
+* JavaScript;
|
|
|
+
|
|
|
+* SVG-анимации;
|
|
|
+
|
|
|
+* LocalStorage;
|
|
|
+
|
|
|
+* GitHub;
|
|
|
+
|
|
|
+* ChatGPT;
|
|
|
+
|
|
|
+* Codex;
|
|
|
+
|
|
|
+* Beget.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для хранения и управления файлами проекта использовался репозиторий GitHub.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для публикации сайта использовался хостинг Beget.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Публикация сайта в сети Интернет
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+После завершения разработки и тестирования интернет-магазина **TaraSale** была выполнена публикация проекта в сети Интернет.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для размещения сайта был выбран хостинг **Beget**, который предоставляет удобные инструменты для загрузки файлов и управления веб-проектами.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## Выполненные действия
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В ходе размещения проекта были выполнены следующие этапы:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* зарегистрирован аккаунт на платформе Beget;
|
|
|
+
|
|
|
+* создан домен для размещения проекта;
|
|
|
+
|
|
|
+* настроена структура сайта на хостинге;
|
|
|
+
|
|
|
+* подготовлены файлы проекта к публикации;
|
|
|
+
|
|
|
+* выполнена загрузка файлов сайта на сервер через файловый менеджер Beget;
|
|
|
+
|
|
|
+* проверена корректность размещения файлов в директории `public_html`;
|
|
|
+
|
|
|
+* проведено тестирование работоспособности сайта после загрузки.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## Загруженные файлы
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для публикации были размещены все основные компоненты проекта:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* HTML-страницы;
|
|
|
+
|
|
|
+* таблицы стилей CSS;
|
|
|
+
|
|
|
+* JavaScript-файлы;
|
|
|
+
|
|
|
+* изображения товаров;
|
|
|
+
|
|
|
+* изображения готовых образов;
|
|
|
+
|
|
|
+* дополнительные ресурсы сайта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## Проверка работоспособности
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+После загрузки файлов и проверки структуры каталогов сайт был успешно запущен и стал доступен через доменное имя в сети Интернет.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В процессе размещения были выявлены и устранены ошибки, связанные с отсутствием некоторых файлов и некорректными путями к изображениям. После исправления данных ошибок все страницы сайта начали корректно отображаться и функционировать.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## Результат
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Размещение проекта на хостинге позволило получить полноценный работающий веб-сайт, доступный пользователям через браузер без необходимости запуска локального сервера.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В результате интернет-магазин **TaraSale** был успешно опубликован в сети Интернет и готов к демонстрации и использованию в рамках учебной практики.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+# Заключение
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В ходе выполнения учебной практики был разработан полноценный демонстрационный интернет-магазин мужской одежды **TaraSale**.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В рамках проекта были реализованы:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* каталог товаров;
|
|
|
+
|
|
|
+* карточки товаров;
|
|
|
+
|
|
|
+* система фильтрации;
|
|
|
+
|
|
|
+* корзина;
|
|
|
+
|
|
|
+* оформление заказа;
|
|
|
+
|
|
|
+* поиск отделений Почты России;
|
|
|
+
|
|
|
+* система аккаунтов;
|
|
|
+
|
|
|
+* избранное;
|
|
|
+
|
|
|
+* история просмотров;
|
|
|
+
|
|
|
+* отзывы покупателей;
|
|
|
+
|
|
|
+* раздел образов;
|
|
|
+
|
|
|
+* информационные страницы;
|
|
|
+
|
|
|
+* адаптивный интерфейс;
|
|
|
+
|
|
|
+* анимированная главная страница.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Для реализации проекта использовалась технология искусственного интеллекта Codex, выступавшая в роли инструмента разработки. При этом постановка задач, поиск и подготовка контента, тестирование, выявление ошибок и контроль качества выполнялись автором проекта самостоятельно.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Поставленная цель была достигнута. В результате был создан современный демонстрационный интернет-магазин, соответствующий основным требованиям, предъявляемым к подобным веб-ресурсам, и пригодный для использования в качестве учебного проекта.
|
|
|
+
|
|
|
+# Доступ к проекту
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+После завершения разработки и публикации интернет-магазин TaraSale был размещён на хостинге Beget и стал доступен в сети Интернет.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+**Адрес сайта:**
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+👉 http://tarasale.mtarabpu.beget.tech/
|
|
|
+
|
|
|
+[Cайт](http://tarasale.mtarabpu.beget.tech/)
|
|
|
+
|
|
|
+По указанному адресу доступны все основные функции проекта:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+* просмотр каталога товаров;
|
|
|
+
|
|
|
+* фильтрация и сортировка товаров;
|
|
|
+
|
|
|
+* просмотр карточек товаров;
|
|
|
+
|
|
|
+* система отзывов;
|
|
|
+
|
|
|
+* раздел «Образы»;
|
|
|
+
|
|
|
+* корзина покупок;
|
|
|
+
|
|
|
+* оформление заказа;
|
|
|
+
|
|
|
+* личный кабинет пользователя;
|
|
|
+
|
|
|
+* информационные страницы сайта.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+Сайт адаптирован для работы как на персональных компьютерах, так и на мобильных устройствах.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+## Скриншоты проекта
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В приложении к отчёту представлены скриншоты основных страниц сайта:
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+1. Главная страница.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+2. Каталог товаров.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+3. Карточка товара.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+4. Раздел «Образы».
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+5. Корзина.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+6. Личный кабинет.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+7. Страница оформления заказа.
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+8. Страница контактов.
|
|
|
+
|
|
|
+[Фотографии](https://imgur.com/a/XFHxQLd)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Используемые нейросети
|
|
|
+
|
|
|
+[chatgpt](https://chatgpt.com/)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+[Codex](https://openai.com/ru-RU/codex/)
|
|
|
+
|
|
|
+## Итоговый результат
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+В результате выполнения учебной практики был разработан и опубликован в сети Интернет полноценный демонстрационный интернет-магазин мужской одежды **TaraSale**, объединяющий современные технологии веб-разработки, адаптивный дизайн и удобный пользовательский интерфейс.
|
