ТЕХ.ЗАДАНИЕ 1 - На разработку сайта для маркетплейса по продаже напитков

ТЕХ.ЗАДАНИЕ 2 - На тест и реконструкцию сайта и мобильного приложения 

Техническое задание на разработку сайта для маркетплейса 

Техническое задание

на тест и оптимизацию сайта и мобильного приложения

Реконструкция сайта и мобильного приложения (далее – сайта) – это комплекс работ по оптимизации, модернизации и реорганизации без потери функциональности:

• программного кода серверной части;

• пользовательских интерфейсов;

• файловой структуры;

• запросов СУБД.

1. Цели и задачи

Основными целями реконструкции являются:

• устранение неиспользуемого и избыточного функционала;

• унификация используемого функционала;

• ускорение работы сайта;

• автоматизация отчетности.

Задачи:

• рефакторинг и оптимизация кода;

• оптимизация разметки и элементов интерфейса;

• редизайн админ-панели;

• интеграция учетной системы.
  

2. Глоссарий

Сайт

Маркетплейс (онлайн-платформа) алкогольной и смежной продукции с возможностью ее приобретения у партнеров.

Мобильное приложение

Версия сайта, транслируемая на устройствах с операционными системами iOS и Android.

Админ-панель

Интерфейс для управления содержимым сайта.

Партнер

Алкогольный магазин, размещающий свою продукцию на сайте.

Даркстор

Аффилированный партнер сайта.

Учетная система

Программное обеспечение для учета деятельности партнеров сайта – СБИС.

Автоматизация отчетности

Реализуется через учетную систему посредством ее штатного функционала.

Синхронизация

Автоматизированный обмен данными между сайтом, партнером и/или учетной системой.

Интерфейс

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

Неиспользуемый функционал

К неиспользуемому функционалу относятся:

• устаревшие возможности;

• дублированный код;

• «мертвый» код;

• неиспользуемые функции, процедуры, модули.

Унификация используемого функционала

Приведение к единообразию кода php, html, css, js.

Ускорение работы сайта

Способами ускорения работы сайта являются:

• сокращение количества запросов к БД;

• оптимизация запросов к БД;

• минимизация файлов html, css, js;

• оптимизация изображений, внедрение формата WebP;

• внедрение механизмов кэширования.

3. Ключевые моменты системы

Региональность

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

Партнерский кабинет

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

Режимы управления данными

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

Даркстор

Обрабатывает составные и иные заказы, поступившие через сайт, выполнение которых партнерами невозможно или затруднительно.

Синхронизация с учетной системой

Состав данных и приоритет версий для синхронизации с учетной системой настраивается в админ-панели, включая:

• прайс-листы и остатки;

• скидки и комиссии;

• клиенты;

• заказы.

Автоматические отчеты

Отчеты настраиваются и формируются в учетной системе, а в случае невозможности – в админ-панели, включая:

• статистика продаж;

• динамические показатели;

• ассортимент партнеров;

• статусы заказов;

• сверки оплат;

• SEO, управление ставками, внутренняя/внешняя аналитика, Data science;

• затраты на услуги площадки;

• оборачиваемость товара;

• анализ товаров, категорий;

• ценовая сегментация;

• анализ продавцов, топ-товаров;

• сравнение периодов продаж;

• наиболее популярные запросы в поисковой строке.

Возможность фильтрации отчетов включает:

• период;

• партнер;

• ассортимент.
  

4. Анализ Бизнес-процессов

1. Путь клиента (User story)

Клиент хочет найти в интернете, где можно дешевле, быстрее и ближе всего купить нужный ему алкоголь.
Добавить кросс-функциональную схему пути клиента

2. Путь менеджера (Manager story)

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

3. Путь заказа

Привести блок схему к стандарту Visio, внести на кросс-функциональную схему шаги подразделений

4. Схемы бизнес-процессов

1. Схема текущего бизнес-процесса

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

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

2. Схема автоматизированной системы B2B Кабинета

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

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

3. Схема автоматизированного бизнес-процесса

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

Ключевым звеном всех процессов становится Учетная система, в которую сводятся различные данные, обрабатываются в ней и выдаются в необходимом виде по разным получателям.

Так, в автоматизированном процессе партнеры изначально настраивают процесс синхронизации с Учетной системой через Партнерский кабинет и работают в нем. Фильтрация данных производится редакторами на Сайте, чтобы Учетная система содержала максимально чистые данные.

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

Сайт синхронизируется с Учетной системой с использованием API Учетной системы.

5. Концепция и структура системы

1. Структура системы в схеме

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

2. Концепция системы

//////– мультирегиональный алкогольный маркетплейс, на котором размещается продукция специализированных магазинов-партнеров.

Основным источником клиентов в онлайне является сайт, в офлайне – даркстор. Сайт и даркстор работают на единой уточной системе. Клиенты с ними коммуницируют напрямую.

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

Коммуникации максимально автоматизированы для сокращения времени обработки заказа.

3. Структура системы

На схеме 5.1. отображены ключевые элементы системы.

1. Учетная система – ключевое звено системы, отвечающее за накапливание, обработку и представление различных данных (продукция, заказы, продажи, статистика).

2. Сайт – источник клиентов в онлайне.

3. Партнеры – поставщики продукции и точки выдачи заказов.

4. Даркстор – точка выдачи заказов.

5. Клиенты – покупатели продукции.

6. Отдел продаж – звено, обрабатывающее поступающие с сайта заказы и ищущее новых клиентов.

7. Логистика – звено, доставляющее заказы покупателям.

8. Менеджмент – руководство, бухгалтерия и другой аппарат.
   

6. Пользовательский интерфейс

Интерфейс разделяется в зависимости от роли пользователя:

• клиентский сайт, включая:

• каталог и карточки товаров;

• корзину;

• другие разделы для общего доступа;

• админ-панель;

• партнерский кабинет.

Клиентский сайт

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

Схемы UX/UI были разработаны в рамках дизайна 2022 года.

Интерфейс включает:

• акции и скидки;

• отзывы;

• личный кабинет B2B;

• разделение корзины при наличии товаров с разными сроками доставки;

• блок рекомендуемых товаров;

• неограниченное количество уровней каталога;

• топ продаж;

• предложение недели;

• дополнительный, комплиментарный ассортимент;

• рекомендация сомелье;

• предложение оставить персональные данные для получения персональных предложений;

• предложение замены отсутствующему ассортименту.

Требуется максимально облегчить страницы путем оптимизации HTML, JS и CSS, а также ускорить загрузки страниц, включая внедрение частичной загрузки HTML с помощью AJAX без потери элементов, необходимых для SEO.

Кроме того, в рамках реструктуризации сайта необходимо отказаться от лишнего кода и оптимизировать рабочий.

Админ-панель

Дизайн админ-панели требуется сделать современным и адаптивным под все размеры дисплеев.

Из интерфейса убрать лишние и оставить только рабочие и востребованные элементы.

Структура админ-панели:

• содержимое сайта;

• заказы;

• корзины (брошенные);

• магазины (партнеры);

• учет (добавления нового ассортимента);

• отзывы;

• вопросы (сейчас не используется);

• прайс-лист;

• товары и цены;

• акции;

• пользователи сайта;

• структура сайта (пользовательского);

• списки (справочники);

• технические разделы настройки админ-панели:

• структура;

• шаблоны;

• связи.

В мобильной версии должен был доступен весь функционал админ-панели.

Партнерский кабинет

Интерфейс ПК включает в себя возможности:

• управления заказами;

• загрузки и обновления остатков с помощью файла Excel.

Требуется добавить возможности:

• добавление ссылки на файл с ассортиментом в формате XML для загрузки ассортимента по расписанию вместо ручной загрузки в формате Excel;

• установки и правки акционных предложений;

• сопоставления продукции партнера с товарами сайта для быстрой привязки цен;

• редактирования контактных данных.

ПК должен включать следующие разделы и возможности:

• регистрация, подписание договора поставки/оферты;

• выбор схем взаимодействия с площадкой, варианты доставки;

• блок описания экономики взаимодействия с площадкой;

• элементы управления загрузкой ассортимента, фото, описаний;

• элементы управления отзывами;

• дашборды с аналитикой продаж, показателями магазина, карточек товара;

• штрафы, бонусы, возвраты.
  

7. Описание функционала

В описании везде указывается, что модерация производится в админ-панели – режиме работы по умолчанию. При необходимости можно перейти на модерацию в Учетной системе, установив в админ-панели источника.

1. Регистрация и авторизация пользователей

Новые пользователи могут зарегистрироваться на сайте самостоятельно в разделе «Регистрация».

Автоматическая регистрация производится при оформлении заказа в «Корзине» – пользователю выдается логин (адрес его почты) и сгенерированный пароль, которые также отправляются ему на почту.

Пользователя также можно создать в админ-панели.

Сейчас логином считается адрес почты. Требуется перейти на авторизацию по номеру телефона и СМС, которые будут отправляться пользователям с сайта.

Регистрацию сделать скрытой, т.к. клиенты зачастую не помнят, где они зарегистрированы. Если посетитель вводит незарегистрированный в системе номер телефона, он автоматически регистрируется и ему отправляется 4-значный код по СМС для входа.

2. Модерация новых пользователей

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

Механизм модерации включает возможности:

• поиск дубликатов пользователей и их объединение;

• исправление данных пользователя;

• создание меток для группировки пользователей с фильтраций на их основе;

• блокировка пользователя.

3. Функционал B2B Кабинета

В партнерском кабинете необходим следующий функционал:

• автоматическое получение, подтверждение обработки и наличия, даты доставки заказа клиенту

• автоматическая загрузка и обновление остатков и цен (цены для MW и продажи) с помощью файла Excel;

• создание и правка акционных предложений;

• добавление ссылки на файл XML для загрузки ассортимента и остатков по расписанию в автоматическом режиме;

• механизм опознавания и сопоставления товарных позиций у партнера и на сайте для их быстрого присвоения;

• автоматическая отправка карточек нового товара для модерации;

• подписание шаблона договора поставки, счетов, актов сверки, загрузка учредительных документов, связь с ЭДО;

• подписание договора оферты, счетов, актов сверки, загрузка учредительных документов, связь с ЭДО;

• построение графиков заказов и их исполнения, замер уровня сервиса и времени отклика по заказам;

• возможность формировать шаблонные отчеты по продажам на уровне артикула, если менеджер устанавливает их видимость для поставщика, в том числе отчеты по продажам артикулов конкурентами.

4. Договор поставки

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

Функционал включает:

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

• форма для заполнения данных ООО (данные подставляются автоматически в случае их заполнения ранее);

• отправка заявки на оформление заказа;

• оповещение продавца о поступлении новой заявки;

• подтверждение продавцом возможности отгрузки по договору поставки с последующим автоматическим выставлением счета;

• уведомления об оплате, даты отгрузки, даты поставки, движении груза, получения груза, выполнении договора;

• возможность загрузки договора, счета, акта поставки.

5. Каталог и товарные предложения

В каталоге пользователи должны иметь возможности:

• пролистывать товары с помощью кнопки «Показать еще» вместо пагинатора;

• сортировать товары по популярности, убывающей цене, возрастающей цене;

• просмотра увеличенного изображения товара;

• просмотра краткого описания товара;

• добавления товара в корзину или быстрого оформления заказа без перехода в корзину;

• добавить в список «Избранного»;

• перейти из карточки в каталоге по свойству фильтра на соответствующую страницу каталога;

• неограниченное количество уровней каталога;

• блок рекомендуемых товаров;

• акции и скидки;

• отзывы.

6. Карточка товара

На странице с карточкой товара должны быть возможности (помимо п. 7.5):

• сравнения предложений партнеров с фильтрацией по объему и году;

• сортировки предложений по цене, количеству на остатке, удаленности от геопозиции посетителя;

• просмотра точек партнеров на интерактивной карте;

• просмотра отзывов товара и добавления своего;

• просмотра похожих и покупаемых с этим товаров;

• варианты доставки/ самовывоза;

• сроки доставки.

7. Корзина

В корзине должны быть следующие возможности:

• изменение количество добавленного товара;

• удаления товаров;

• перехода на каталог с ассортиментом указанного партнера;

• ввода промокода;

• авторизации в соответствии с п. 7.1.;

• разделение корзины при наличии товаров с разными сроками доставки;

• рекомендации по дополнительным товарам.

8. Механика оформления заказа

Для оформления заказа пользователю достаточно указать свое имя и номер телефона.

В случае указания зарегистрированного номера телефона, этот заказ присваивается соответствующему пользователю в соответствии с п. 7.1.

После оформления заказа пользователю отправляется СМС с текстом подтверждения.

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

Отразить в схеме пользовательского пути в соответствии с bpmn

9. Заказы

В Личном кабинете пользователя есть раздел «Заказы», в котором можно отслеживать ход их выполнения, включая дату готовности.

Статусы заказов меняются в Учетной системе менеджерами и партнерам.

Структура личного кабинета:

• заказы с возможностью повторить заказ;

• личные (регистрационные) данные;

• программа лояльности (накопленные баллы, календарь списаний и начислений).

10. Документы

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

11. Платежи

Возможность выставления счёта по номеру телефона или qr-кода для оплаты (Сбис-розница).

12. Аналитика

Функционал построения аналитических и статистических отчетов находится в Учетной системе, куда собираются все необходимые данные.

Необходимо создание рабочих отчетов, понятных менеджерам по продажам и руководству.

Метрики отчетов и состав дашборда утверждается перед началом этого этапа работ.

13. Маркетинговый блок и рекомендации

Маркетинговый функционал должен включать в себя возможность работы со скидками на:

• весь ассортимент;

• любые группы товаров;

• комбинации фильтров товаров;

• отдельные товары.

Блок с рекомендациями должен формироваться на основе функционала Учетной системы.

Маркетинговый блок включает:

• возможность применения промокода;

• возможность комбинации промокода и скидки на товар;

• правила работы рекомендательных блоков;

• подсветка супер-цен.

14. Администраторская панель

Админ-панель сайта должна включать все необходимые разделы для управления содержимым сайта:

• товары;

• справочники;

• заказы;

• брошенные корзины;

• отзывы;

• баннеры;

• скидки;

• комиссии;

• прайс-листы;

• пользователи сайта.

15. Обратная связь и прочий функционал

В качестве обратной связи на сайте используется:

• телефон;

• онлайн-чат;

• почта.

Сообщения из чата и почты попадают в Учетную систему (сейчас – Бирикс24).

16. Панель менеджера

Менеджер использует в работе Учетную систему (сейчас – Битрик24) и раздел

«Заказы» админ-панели.

Весь функционал для работы менеджера реализован Учетной системе.

Потребуется создание синхронизации с новой Учетной системой для работы менеджера в ней.

Прописать путь менеджера в схеме bmpn

8. Структура и архитектура системы

1. Общая структура и архитектура системы

Технически система разделяется на 2 ключевых блока:

1. Учетная система – сторонний сервис, работающий на сторонних серверах и связанных с другими элементами системы посредством API;

2. Сайт состоит из файлов (php, изображения и т.д.) и сервера БД, размещенных на виртуальном выделенном сервере.

В качестве почтового сервера используется Яндекс-Почта.

В 2023 году используется сервер со следующими характеристиками:

• Процессор: 6 X QEMU Virtual CPU version 4.2.0 2599.996MHz;

• Оперативная память: 18055MB – <20% использовано;

• Размер дискового пространства: 177.08GB NVMe – <50% использовано;

• Версии программного обеспечения

• Apache 2.4.29-1ubuntu4.27;

• MySQL 5.7.42-0ubuntu0.18.04.1;

• PHP 5.4.45 и 7.2.24-0ubuntu0.18.04.17.

Для управления хостингом используется ISPManager.

Приложите архитектурную схему системы (взаимодействие блоков + приложение + даркстор)

2. Требования к нагрузке на сайт В2В Кабинета

Партнерский кабинет был протестирован на загрузку файлов объемом более 15МБ. Рекомендуется не загружать файлы большего размера.

3. Требования к оптимизации В2B кабинета

Для загрузки файла в формате XML по ссылке требуется разработка стандарта. Рекомендуется использовать формат Яндекса YML как знакомый всем вебмастерам, описанный Яндексом и встроенный во множество CRM.

https://yandex.ru/support/marketplace/assortment/auto/yml.html

4. Прочие требования к системе

Результат правильно сделанной оптимизации кода и верстки следует проверить на сервисе Google PageSpeed Insights (https://pagespeed.web.dev/).

Сейчас он выдает результат «Проверка не пройдена»

Должен выдавать результат «Проверка пройдена».

В сервисе Google Search Console в разделе «Удобство страниц» после проведения реструктуризации сайта должно быть более минимум 50% удобных страниц для мобильных устройств. Следует учитывать, что потребуется время для переиндексации страниц.

Сейчас их – 0%.

5. Требования к коду PHP

Новый программный код PHP должен быть написан на версии 7.2.24 (нативная версия на сервере) вместо текущей 5.6.

Все входящие запросы и их параметры по соображениям безопасности должны очищаться от инъекционных конструкций PHP и SQL. Динамические адреса должны проверяться на наличие неразрешенных параметров и отсекаться.

Админ-панель и скрипты синхронизации должны быть физически размещены отдельно от пользовательского сайта.

Новый код после рефакторинга и оптимизации должен соответствовать следующим критериям:

• отсутствие избыточности;

• минимальное количество зависимостей;

• минимальное количество классов и методов;

• встроенные функции PHP должны иметь «аналоги» на случай перевода сайта на новую версию;

• функциональность и легкочитаемость без ущерба производительности;

• именование классов и методов должно быть однообразным и простым для понимания:

• имена классов должны быть в PascalCase,

• константы классов – в MACRO_CASE,

• имена методов – в camelCase;

• при необходимости использовать комментарии к коду.
  

9. Дизайн

1. Общие требования к дизайну

Текущая версия дизайна была утверждена и реализована осенью 2022 года. Она удовлетворяет представлениям о современном дизайне маркетплейса, содержа необходимый функционал и элементы.

Однако, требуется его очистка от лишних неиспользуемых элементов или доработка до конца недоработанного заявленного функционала, включая:

• избранное;

• сравнение товаров;

• более точный поиск.

Кроме того, требуется приведение элементов оформления к единообразию, исключив при этом лишнее.

2. Требования к адаптивности и отображению на мобильных устройствах

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

В результате реструктуризации должна сохраниться такая же минимальная ширина 320 пкс.

3. Верстка макетов

Оптимизация верстки макетов должна улучшить технические показатели в соответствии с п. 9.2. и 8.4.

10. Этапы работ

1. Аудит функционала и кода (проведен в рамках составления настоящего ТЗ).

2. Рефакторинг и оптимизация кода PHP.

3. Оптимизация HTML, CSS и JS.

4. Синхронизация с Учетной системой.

5. Доработка функционала, перечисленного в ТЗ.

6. Написание документации.

11. Реестр ответственных ли