Пример технического задания для Vue-проекта

В качестве примера рассмотрим типовое техническое задание для интернет-магазина. Подобное ТЗ может быть использовано как основа для вашего самостоятельного проекта.

1. Общая концепция

Веб-приложение представляет собой интернет-магазин с конструктором товаров. Сервис даёт пользователю возможность выбрать и настроить товар по своему вкусу, а затем оформить заказ.

Неавторизованному пользователю доступны лишь страница конструктора товаров и страница корзины, при этом заказ не сохраняется.

Авторизованному пользователю, помимо конструктора и корзины, доступны создание и редактирование адресов доставки, оформление заказа, просмотр истории заказов и возможность их повторения.

Основные сценарии использования сервиса:

1. Создание товара с индивидуальными параметрами.
2. Добавление дополнительных товаров.
3. Оформление заказа с указанием адреса.
4. Добавление, удаление и редактирование адресов доставки.
5. Просмотр истории заказов.
6. Повторение ранее оформленных заказов.

Обзор проекта

Проект включает следующие ключевые экраны: главная страница с конструктором товаров, страница авторизации, корзина, личный кабинет с данными пользователя, история заказов и экран подтверждения заказа.

2. Техническое описание

Для разработки сайта предоставляется готовая вёрстка. От программиста требуется написать клиентскую часть, превратив статический сайт в динамическое приложение, с которым пользователь сможет взаимодействовать и получать нужный результат.

Клиентская часть должна быть реализована на JavaScript-фреймворке Vue.js версии 3.x.

Работы по вёрстке не предполагаются, однако при необходимости допускаются незначительные правки HTML-разметки, CSS-стилей и изображений. Разработка серверной части не входит в задание.

3. Описание процессов

В данном контексте процесс — это отдельная операция, выполняющая определённое полезное действие. Например, добавление параметра к товару или изменение его конфигурации — это процессы.

3.1. Авторизация пользователя

Выполняется после заполнения формы на странице «Авторизация».

Последовательность действий:

1. Убедиться, что все обязательные поля заполнены.
2. Проверить, что пользователь отправил форму (кликнул по кнопке или нажал enter).
3. При наличии ошибок в заполнении формы — отобразить их на экране.
4. Отправить запрос на сервер и обработать полученный ответ.
5. После получения ответа от сервера:
6. перенаправить пользователя на главную страницу при успешной авторизации;
7. либо показать соответствующее сообщение об ошибке.

Поля для валидации:

• Поле email обязательно для заполнения и должно содержать валидный email-адрес.
• Поле пароль обязательно для заполнения.

3.2. Работа конструктора товаров

Конструктор товаров расположен на главной странице проекта. Настроить товар в конструкторе может любой пользователь. При изменении любого параметра товара итоговая цена должна пересчитываться. Цены на компоненты и параметры поступают с сервера (см. раздел 5. Документация серверной части (backend)).

3.2.1. Выбор основы товара

Пользователь может выбрать один из доступных вариантов основы товара. При смене основы может меняться визуальное отображение товара.

3.2.2. Изменение размера

Пользователь может выбрать один из доступных размеров товара.

3.2.3. Выбор дополнительных параметров

Пользователь может выбрать дополнительные параметры из предоставленного списка. При смене параметров может обновляться визуальное отображение товара.

3.2.4. Изменение компонентов

Пользователь может выбрать любую комбинацию компонентов. При добавлении или удалении компонента пересчитывается итоговая цена товара.

Максимальное количество одинаковых компонентов на одном товаре определяется бизнес-логикой.

Добавление компонентов может осуществляться несколькими способами:

• Drag-n-drop — пользователь перетаскивает компонент мышью на товар. Процесс сопровождается анимацией.
• Нажатие кнопки + рядом с нужным компонентом.

Удалить компонент можно нажатием кнопки -.

Если количество компонента достигло максимума, кнопка + становится неактивной, а перенос компонента блокируется.

Если количество компонента равно 0, кнопка - становится неактивной.

3.2.5. Название товара

Поле «Название товара» является обязательным для заполнения.

3.2.6. Итоговая цена товара

Итоговая цена складывается из добавленных компонентов и выбранных параметров. Для каждого размера товара предусмотрен свой мультипликатор стоимости.

Формула расчёта стоимости:

мультипликатор размера * (стоимость основы + дополнительные параметры + компоненты).

3.3. Работа корзины

Корзина доступна всем пользователям. Если в корзине нет товаров, отображается блок с сообщением о пустой корзине. При наличии товаров выводятся все основные блоки:

• Список товаров.
• Список дополнительных товаров.
• Блок с данными по доставке.
• Подвал с кнопками.

3.3.1. Список товаров

В списке отображаются товары, созданные в конструкторе. Каждый пункт содержит название товара, введённое пользователем, и его состав.

Количество товара можно увеличить кнопкой + или уменьшить кнопкой -. При изменении количества пересчитывается сумма пункта и общий итог корзины. Если количество товара становится нулевым, он удаляется из корзины.

По нажатию кнопки «Изменить» происходит переход в конструктор, где применяются все ранее заданные параметры товара.

3.3.2. Дополнительные товары

Пользователь может выбрать дополнительные товары. Механика работы с ними аналогична обычным товарам, описанным в пункте 3.3.1. Список товаров.

Перечень дополнительных товаров можно получить через запрос к API (см. раздел 5. Документация серверной части (backend)).

3.3.3. Данные о доставке

Неавторизованному пользователю в поле «Получение заказа» доступны два варианта:

• «Получу сам» — в этом случае элементы адреса скрываются, отображается только поле телефона.
• «Новый адрес» — отображаются поля адреса и поле телефона.

Авторизованному пользователю доступны дополнительные варианты:

• «Получу сам» — поведение совпадает с неавторизованным пользователем.
• «Новый адрес» — поведение совпадает с неавторизованным пользователем.
• «Существующий адрес» — адрес, ранее добавленный пользователем в личном кабинете.

Сохранённых адресов может быть несколько. При выборе существующего адреса в полях отображаются его параметры. Изменять параметры существующего адреса на странице корзины нельзя.

3.3.4. Оформление заказа

При нажатии кнопки «Оформить заказ» неавторизованным пользователем появляется поп-ап с подтверждением. По клику на кнопку подтверждения или при закрытии поп-апа выполняется переход на главную страницу.

При нажатии кнопки «Оформить заказ» авторизованным пользователем также появляется поп-ап с подтверждением, данные заказа отправляются на backend. По клику на кнопку подтверждения или при закрытии поп-апа выполняется переход на страницу «История заказов».

В обоих случаях необходимо:

1. Анимировать закрытие модального окна.
2. Выполнить переход на соответствующую страницу.
3. Сбросить состояния конструктора и корзины (очистить менеджер состояния).

3.4. История заказов

Страница доступна исключительно авторизованным пользователям. На ней отображаются ранее созданные заказы и боковое меню.

3.4.1. Блок заказа

Показывается ранее оформленный заказ пользователя. Данные о заказе загружаются с сервера через API:

• По кнопке «Удалить» заказ удаляется, а информация об удалении отправляется на сервер.
• По кнопке «Повторить» все данные заказа помещаются в корзину, и пользователь перенаправляется на страницу корзины.

3.5. Мои данные

Страница доступна исключительно авторизованным пользователям. На ней отображаются:

• Имя пользователя.
• Контактный телефон.
• Адреса доставки, созданные пользователем.

Обязательные поля формы адреса:

• Название.
• Улица.
• Дом.

Необязательные поля формы адреса:

• Квартира.
• Комментарий.

3.5.1. Блок адреса доставки

Отображаются данные адреса доставки, полученные с сервера через API:

• По нажатию на иконку карандаша данные адреса становятся редактируемыми.
• По кнопке «Сохранить» данные адреса отправляются на backend.
• По кнопке «Удалить» адрес удаляется.
• По кнопке «Добавить новый адрес» открывается форма для создания нового адреса. При сохранении выполняется API-запрос. Кнопка «Удалить» в этом случае скрыта.

3.6. Меню

Меню отображается только на страницах «Мои данные» и «История заказов». В меню активным подсвечивается пункт, соответствующий текущей странице.

3.7. Шапка сайта

Отображается на всех страницах:

• Если пользователь не авторизован — показывается ссылка для входа, ведущая на страницу авторизации.
• Если пользователь авторизован — показываются аватар и имя пользователя, при нажатии происходит переход на страницу «Мои данные».

Корзина отображается для всех пользователей. Сумма складывается из стоимости всех добавленных в корзину товаров.

3.8. Поп-ап подтверждения заказа

Появляется при нажатии кнопки «Оформить заказ» на странице корзины. Появление и скрытие поп-апа должны сопровождаться анимацией, реализованной средствами Vue.js.

4. Список всех страниц

Сайт состоит из следующих страниц:

1. Главная страница (конструктор товаров).
2. Корзина.
3. Страница авторизации.
4. История заказов.
5. Мои данные.

4.1. Главная страница

Доступна всем пользователям. Функциональность одинакова для авторизованных и неавторизованных пользователей. Описание функционала — в пункте 3.2. Работа конструктора товаров.

4.2. Страница авторизации

Доступна только неавторизованным пользователям по адресу /login. Описание функционала — в пункте 3.1. Авторизация пользователя.

4.3. Страница корзины

Доступна всем пользователям по адресу /cart.

• Неавторизованный пользователь: при нажатии «Оформить заказ» появляется поп-ап, при закрытии которого выполняется переход на главную страницу.
• Авторизованный пользователь: при нажатии «Оформить заказ» появляется поп-ап, при закрытии которого выполняется переход на страницу «История заказов», а данные заказа отправляются на сервер.

Описание функционала — в пункте 3.3. Работа с корзиной.

4.4. Страница истории заказов

Доступна только авторизованным пользователям по адресу /orders. Описание функционала — в пункте 3.4. История заказов.

4.5. Страница «Мои данные»

Доступна только авторизованным пользователям по адресу /profile. Описание функционала — в пункте 3.5. Мои данные.

4.6. Переходы между экранами

Все переходы между экранами должны сопровождаться анимацией, реализованной средствами Vue.js.

5. Документация серверной части (backend)

Документация доступна при локально запущенном проекте по адресу http://localhost:3000.

В документации описаны все доступные эндпоинты и сущности для получения, создания, изменения и удаления данных.