Отчет_Тарабан.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/
По указанному адресу доступны все основные функции проекта:
просмотр каталога товаров;
фильтрация и сортировка товаров;
просмотр карточек товаров;
система отзывов;
раздел «Образы»;
корзина покупок;
оформление заказа;
личный кабинет пользователя;
информационные страницы сайта.
Сайт адаптирован для работы как на персональных компьютерах, так и на мобильных устройствах.
Скриншоты проекта
В приложении к отчёту представлены скриншоты основных страниц сайта:
Главная страница.
Каталог товаров.
Карточка товара.
Раздел «Образы».
Корзина.
Личный кабинет.
Страница оформления заказа.
Страница контактов.
Используемые нейросети
Итоговый результат
В результате выполнения учебной практики был разработан и опубликован в сети Интернет полноценный демонстрационный интернет-магазин мужской одежды TaraSale, объединяющий современные технологии веб-разработки, адаптивный дизайн и удобный пользовательский интерфейс.