Отчет_Тарабан.md 20 KB
# ОТЧЁТ ПО СОЗДАНИЮ ИНТЕРНЕТ-МАГАЗИНА МУЖСКОЙ ОДЕЖДЫ 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/
По указанному адресу доступны все основные функции проекта:
* просмотр каталога товаров;
* фильтрация и сортировка товаров;
* просмотр карточек товаров;
* система отзывов;
* раздел «Образы»;
* корзина покупок;
* оформление заказа;
* личный кабинет пользователя;
* информационные страницы сайта.
Сайт адаптирован для работы как на персональных компьютерах, так и на мобильных устройствах.
---
## Скриншоты проекта
В приложении к отчёту представлены скриншоты основных страниц сайта:
1. Главная страница.
2. Каталог товаров.
3. Карточка товара.
4. Раздел «Образы».
5. Корзина.
6. Личный кабинет.
7. Страница оформления заказа.
8. Страница контактов.
---
## Итоговый результат
В результате выполнения учебной практики был разработан и опубликован в сети Интернет полноценный демонстрационный интернет-магазин мужской одежды **TaraSale**, объединяющий современные технологии веб-разработки, адаптивный дизайн и удобный пользовательский интерфейс.