Образцы технических заданий

Маркетплейс, магазин & доска объявлений - Mooby

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

Производим адаптацию программного кода под различные задачи проекта

Подробнее

1. Термины, используемые в техническом задании

Браузер  — программа-клиент (Internet Explorer, FireFox, Opera, Safari, Chrome и т.п.), предоставляющая пользователю возможности навигации по сайтам, просмотру сайтов и скачивания файлов.

Хостинг  —  площадка (сервер) для размещения сайта в интернет.

Сайт — набор веб-страниц, объединенных общей тематикой, графическим оформлением, навигацией и ссылками. Сайт является информационной единицей, доступной для просмотра пользователям через интернет.

Страница — HTML-документ сайта, отображаемый браузером пользователя и имеющий уникальный URL-адрес.

Содержимое сайта (контент) — текстовая, графическая или табличная информация,  размещаемая на сайте, без учета оформления страниц.

Блок  —  функционально законченный элемент страницы.

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

Главная страница — первая страница, которую видит пользователь при входе на сайт (при вводе доменного имени сайта в адресную строку браузера).

Аккаунт –учётная запись пользователя в системе.

Навигаторы (меню) - обособленная группа ссылок, предназначенная для осуществления навигации по сайту.

Личный кабинет (далее ЛК) - это персональная страница пользователя, на которую с помощью уникальной пары электронная почта - пароль.

Административная панель(далее АП) – это раздел, в котором пользователи могут управлять данными на сайте. Доступ в АП осуществляется  по специальному адресу с вводом уникальной пары логин- пароль.

Всплывающее окно (попап, Pop up) – окно, открываемое в браузере  в результате выполнения какой-либо операции.

2. Перечень документов, на основании которых создается сайт

• Ссылка на макет: _______________________
• Структура сайта (см.п. 8)
• Домен сайта __________________

3. Цель и эксплуатационное назначение сайта

3.1. Общее

Основным назначением сайта является - предоставление площадки для безопасной продажи аккаунтов игр (а также Предметов, Услуг и Прочего), сервис выступает гарантом (третьим лицом) выполнения обязательств с той и другой стороны.

3.2. Роли

На сайте должны быть предусмотрены следующие роли:

4. Требования к надежности и безопасности

4.1. Безопасность

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

• Защитить доступ к учетным записям пользователей и странице администрирования сайта:
• полностью отказаться от хеширования с помощью md5 , в качестве более надежного метода хеширования предлагается использовать sha-1
• Подключить протокол SSL для домена и включить перелинковку с http на https.
• Подключить сервер к системе защиты от DDOS атак или изначально выбрать хостинг с возможностью включения данных услуг.
• Все запросы к БД на этапе их формирования, должны проходить проверку на SQL инъекции.
• БД должна выбираться дополнительно со своей системой защиты от SQL инъекций.

4.2. Надежность

Сайт системы должен быть сделан на защищенном протоколе https  с платным SSL сертификатом, который позволяет шифровать данные и  защищать их от перехвата. Бесплатный SSL сертификат недопустим, в связи с его неустойчивостью и не все платежные сервисы готовы работать с сайтами с бесплатными сертификатами.

Внимание: планируемая максимальная нагрузка на сайт системы в день

Незарегистрированные пользователи  50000 человек

Зарегистрированные пользователи   10000 человек

Пользователи АП -  10 человек;

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

4.3. Основные требования к бэкапам

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

Требования:

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

5. ПО и администрирование

Сайт должен быть реализован на React app c NodeJS.

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

Для пользователей АП  требуется реализовать следующие функции(включая, но не ограничиваясь):

• Чаты:
  • Отвечать в чат, удалять сообщения в чате, создание чата с пользователем (любым из БД)
  • Прикрепление файлов к чату, поиск по чату
• Пользователи сайта
  • Управление доступом к ЛК
  • Просмотр информации по всем пользователям сайта(дата регистрации, объявления, приобретенные услуги,чаты и т.д.)
• Объявления
  • Управление публикацией объявлений на сайте с возможность отказать в модерации и написать комментарий(причину)
  • Управление всеми объявлениями на сайте, просмотр информации по каждому объявлению
• Управление контентом на сайте:
  • Редактирование информационных частей сайта
  • Редактирование платных услуг на сайте
  • Редактирование категорий объявлений
• Реферальная система
  • Просмотр и редактирование статистики реферальных переходов по пользователям
  • Информация по привлеченным пользователям на сайт и их оплаченным услугам
  • Управление предоставляемыми опциями по реферальной системе см.п. 6.3.
• Доступы
  • Управление доступом для ролей: Модератор, Менеджер, Администратор
    Внимание: требуется заложить возможность гибкой настройки доступа к конкретным опциям АП, не только к разделам.
    Например, дать возможность Модератору использовать продвижение для объявлений, и убрать возможность удалять сообщения.
    Пример такой настройки:
• Статистика
  • Просмотр общей статистики сайта-посещения, новые, привлеченные по реферальной системе, общее поступление средств, количество объявлений и т.д.
• Настройки сайта(домен, мета теги, видимость и т.д.)
• Биллинг(информация по платежам)

6. Требования к сайту

6.1. Требования к дизайну и верстке

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

Верстка страниц должна осуществляться по технологии послойной верстки, при этом код должен быть правильно структурирован, в случае использования нескольких уровней тега H, соблюдать вложение h5→h6→ h5 и т.д.

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

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

• Internet Explorer 11 и выше;
• Microsoft Edge
• Mozilla Firefox 9 и выше;
• Opera 15 и выше;
• Opera Mini 5.0 и выше;
• Safari 5.0 и выше;
• Google Chrome 10.0 и выше.
• Android Browser 1.0.5 и выше

Страницы 500, 404, 403 должны быть дополнительно разработаны в дизайне и использовать стилистику сайта.

Верстку перед тем, как отдавать программисту PHP, необходимо проверить на HTML валидаторе W3C.

6.1.1. Адаптация элементов в моб. версии

6.1.1.1.1. Шапка

Функционал аналогичен п. 7.4, за исключением:

• иконка меню, по нажатию (тапу) открывается список разделов сайта: О сервисе, Купить, Продать.

6.1.1.1.2. Подвал

Отображение элементов следующее:

Функционал аналогично п. 7.5, за исключением:

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

6.1.1.1.3. Поиск

Функционал аналогичен п. 7.4.

6.1.1.1.4. Карточка объявления

Функционал аналогичен карточке товара на странице объявлений 9.3., за исключением:

• переход к странице заказа(9.4) осуществляется по тапу на любое место карточки объявления, за исключением аватара и имени пользователя , опубликовавшего объявление.

6.1.1.1.5.  Фильтр

Функционал аналогичен п. 9.3, за исключением:

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

6.1.1.1.6. Подать объявление

Функционал аналогичен п. 9.3, за исключением:

Вместо текста и заголовка выводится только кнопка Подать объявление

6.1.1.1.7. Отзывы

Функционал аналогично п. 9.1., за исключением: отзывы можно листать по тапу на стрелки вправо/влево, а также путем свайпа вправо/влево (следующий/предыдущий отзыв в слайдере).

6.1.1.1.8. Страница чата

Аналогично п. 7.9.1., за исключением:

В блоке информации о собеседнике выводятся 2 иконки:

• перейти к заказу
• пожаловаться

6.1.1.1.9. Страница заказа

Аналогично п. 9.4, за исключением:

В блоке информации о пользователе, опубликовавшем объявление, выводятся 2 иконки:

• перейти к чату с пользователем
• пожаловаться

6.1.1.1.10. Страница Настройки

Аналогично п.  9.6.5, за исключением: изменение аватара пользователя происходит по нажатию на сам аватар (открывается папка Галерея/Фото на  устройстве).

6.2. Подключение сторонних сервисов

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

• Подключить captcha от сервиса Google https://developers.google.com/recaptcha/
• Платежный агрегатор- Я.Касса
• Тикет система обработки вопросов от пользователей - рекомендуемая платформа zendesk.com
• Сервисы статистики - Яндекс.Метрики и Гугл. Аналитики

6.3. Реферальная система

На сайте требуется реализовать реферальную платформу для поощрения действий пользователей, направленных на привлечение новых посетителей сайта.

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

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

• За 1 приглашенного пользователя, который выставил на продажу аккаунт, и это объявление прошло проверку и было опубликовано - выдать пользователю продвижение объявления, а именно услугу “Выделить объявление”.

• За 3 приглашенных пользователей (должны быть разные аккаунты), которые выставили на продажу аккаунт, и эти объявления прошли проверку и были опубликованы - выдать пользователю продвижение объявления, а именно услугу “Сделать VIP-объявлением”.

• За 5 приглашенных пользователей (должны быть разные аккаунты), которые выставили на продажу аккаунт, и эти объявления прошли проверку и были опубликованы - выдать пользователю продвижение объявления, а именно услугу “Премиум размещение”.

• За 10 приглашенных пользователей (должны быть разные аккаунты), которые выставили на продажу аккаунт, и эти объявления прошли проверку и были опубликованы - выдать пользователю продвижение объявления, а именно услугу “Быстрая продажа”.

• За 15 приглашенных пользователей (должны быть разные аккаунты), которые выставили на продажу аккаунт, и эти объявления прошли проверку и были опубликованы - выдать пользователю продвижение объявления, а именно услугу “Турбо-продажа”.

Важно:

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

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

2. Чтобы все можно было регулировать, начиная от кол-ва приглашенных пользователей, заканчивая услугами продвижения, которые будут применяться к объявлению(см.п. 5.)

6.4. Требования на период разработки, включения сервиса и на период внедрения

На период разработки:

• Закрыть код всего сайта от индексации поисковыми системами с помощью robots.txt
• Закрыть доступ к страницам всего сайта с помощью протокола HTTP authentication , по схемам Basic или Digest

Перед включением :

• Провести комплексное тестирование результата разработки
• Проверить еще раз страницы сайта на HTML валидаторе W3C.
• Удалить тестовые данные из базы данных
• Подготовить систему хранения версий, например, Git и полную копию рабочего сайта для дальнейшей поддержки и доработки сервиса на ней перед внедрением в рабочую

После включения:

• Настроить robots.txt
• Отключить защиту всего сайта по протоколу HTTP authentication , кроме страницы администрирования, описано выше.
• Отключить вывод ошибок и предупреждений работы php скриптов на экран браузера.
• Сделать вывод этих ошибок в файл log.

Этап внедрения:

На этом этапе собирать ошибки в чек-лист,  править их только на копии сайта,  используя систему хранения версий. Внедрять на рабочий вариант сайта только версию, где исправлены сразу несколько ошибок . Поштучно допустимо внедрять только исправления по критическим ошибкам, которые не позволяют сервису выполнять основные функции.

6.5. Язык

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

7. Общие элементы

На сайте есть элементы, работа которых строится по единому принципу.

7.1. Правила валидации

E-mail, Адрес эл.почты, E-mail address

Максимальная длина 256 символов

Если представить email в виде username@hostname, тогда username может содержать:

• латиницу
• цифры
• знаки ! # $ % & * ‘ + - = ? _ { | } ~
• точку, за исключением первого и последнего знака, которая не может повторяться
• максимум 100 знаков

hostname может содержать

• латиницу
• цифры
• дефисы, которые не могут быть в начале или в конце компонента
• список доменов первого уровня

Сообщение, Введите описание- тип: текстовое поле, максимальное количество символов 1000

Написать - тип: текстовое поле, максимальное количество символов 3000

Текст отзыва - тип: текстовое поле, максимальное количество символов 300.

Добавить фото (при добавлении объявления см.п. 9.2.), Выбрать файл (изменить аватар пользователя в 9.6.5.)

Требования к файлам:

• допустимый формат .png, .jpg, .jpeg, .bmp
• максимальный размер файла 10 MB.

Цена - тип: input, ввод цифр

Поле Пароль, Подтвердите новый пароль, Подтвердите старый пароль

Пароль должен содержать :

• Латиница*
• Символы в нижнем регистре
• Символы в верхнем регистре
• Минимум одна цифра
• Минимум один спец. символ
• Минимальное количество символов 8*

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

• Если введенный пароль одновременно соответствует требованиям 1,2,6, то выводится уровень надежности Слабый
  
  Закрашен только первый прямоугольник в шкале, цвет заливки-красный
• Если введенный пароль одновременно соответствует требованиям 1,2,3, 6, то выводится уровень надежности Средний

Закрашены 1 и 2 прямоугольник в шкале, цвет заливки-желтый

• Если введенный пароль одновременно соответствует требованиям 1-6, то выводится уровень надежности Надежный

Закрашены все 3 прямоугольника в шкале, цвет заливки-зеленый

Всегда в поле Пароль(если не оговорено иного) выводится иконка Глаз, которая показывает (когда выбрана)/скрывает(не выбрана) вводимые символы до звездочек (******). Значение по умолчанию - не выбрано.

7.2. Формы

Все формы на сайте работают по единому принципу:

1. Поля помеченные к обязательному заполнению звездочкой(*) должны проверяться со стороны браузера или серверной части на валидность и заполненность.
2. Все данные из формы и перед записью в базу дополнительно проверяются на наличие SQL-инъекций, в случае если такая есть, пользователь блокируется:
   1. если был авторизован, до выяснения причин и подтверждения, что пользователь не сам это сделал, а его аккаунт взломали
   2. если был неавторизован, блокируется текущая его сессия
   3. если был неавторизован и с одного ip в течение часа пытались трижды сделать инъекцию, блокируется ip.
3. Все данные перед записью в базу дополнительно экранируются от кавычек и наличия html вставок
4. Проверка полей на валидность и заполненность осуществляется после нажатия кнопки для отправки формы.
5. При нажатии на любую кнопку отправки данных формы на самой кнопке появляется лоадер, кнопка становится некликабельной для защиты от множественных кликов. Интерфейс блокируется до завершения операции.
6. В случае, если при отправке формы произошла системная ошибка данные об этой ошибке(данные из полей и тип ошибки) должны писаться в отдельный файл log для дальнейшей работы с ней. При этом в интерфейсе появляется сообщение о том, что сейчас невозможно выполнить операцию, попробуйте позже: An error occurred. Please try again.
7. В полях должны работать стандартные операции:

• выделение всего Ctlr/Cmd + A,
• вставка Ctrl/Cmd + V
• выделение текста с клавиатуры шифт + стрелки вправо/влево,
• выделенный текст должен стираться при наборе
• отмена Ctlr/Cmd + Z и отмена отмены Ctrl/Cmd + Shift + Z перемещение стрелками ← → ↑ ↓

7.3. Оповещения

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

Внимание: в тексте оповещения кликабельны и визуально выделяются ссылки, такие как Номер заказа(по клику-переход к странице заказа см.п.9.4), Логин пользователя (по клику переход к странице пользователя см.п 9.6.2.1).

Остальные оповещения по согласованию с Заказчиком.

Перед оповещениями ставится отметка:

Если несколько оповещений подряд в чате, то метка выводится только перед первым.

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

Шапка сайта содержит следующие элементы:

• иконка меню “бутерброд”. При нажатии будет появляться меню:

По клику ссылки Техподдержка будет переход к форме заявки на странице 9.5.Контакты
Оставить отзыв -  при нажатии пользователь переходит на страницу в группе  вк, в раздел Обсуждение, где может оставить отзыв.
Ссылку на раздел Обсуждение уточнить у Заказчика

По клику иконки соцсети пользователь переходит на страницу компании с данной соцсети(в соседней вкладке).

• ссылка к разделу сайта Купить (9.3)
• якорь к блоку на Главной
• ссылка Продать
  Если пользователь авторизован на сайте, по клику он переходит к разделу Купить (см.п.9.3), при этом в попапе открывается форма добавления объявления (см.п.9.2).
  Если пользователь не авторизован-видит уведомление о необходимости авторизации.
• логотип - является ссылкой на главную страницу сайта
• ссылка к странице Правила (аналогична п.9.2, за исключением-отсутствует кнопка Принять условия)
• иконка “поиск”, по клику будет появляться окно поиска
  При обращении к полю пользователь видит попап:

Если пользователь кликает по названию игры (в запросах или найденных результатах при вводе), то  происходит переход к странице найденных результатов (аналогично п.9.3.1 ), где в поле поиска указан поисковый запрос.

• иконка “техподдержка”, при клике будет переход на страницу Отправить запрос(см.п.9.5)
• иконка “аккаунт”, при клике будет появляться всплывающее окно для авторизации

7.5. Подвал

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

7.6. Регистрация

Пользователь видит форму для заполнения

• Имя*^[1]
• Логин*
• Почта*
• Пароль*
• Шкала надежности пароля(см.п. 7.1.)
• Подтвердите пароль*
• Чебокс Я прочитал и согласен с политикой конфиденциальности* (значение по умолчанию-выбран)

По нажатию кнопки Зарегистрироваться:

• Происходит проверка на заполненность полей
  • Если найдены незаполненные поля, они выделяются цветом и выводится текст ошибки
• Происходит проверка наличия пользователя с таким Логином и Почтой (e-mail) в БД.
  • Если совпадение найдено-выводится ошибка
  • Если совпадений не найдено, пользователь видит уведомление о том, что письмо с подтверждением регистрации на сервисе было отправлено на указанный E-mail.

Завершением регистрации считается клик по ссылке в письме. Если пользователь не подтвердил свой E-mail в течение 15 дней, данные о пользователе удаляются из БД.

7.7. Авторизация

Форма содержит

• Поля ввода E-mail*, пароль*
• Ссылку Забыли пароль
• Кнопку Войти, по нажатию
  • Происходит проверка наличия данного E-mail в БД
    • Если не найден-пользователь видит текст ошибки.
    • Если найден-пользователь успешно авторизуется на сайте
  • Происходит проверка соответствия пароля, записанного в БД и введенного.
    • Если совпадают, пользователь успешно авторизуется в системе
    • Если не совпадают-выводится текст ошибки.
  • Блок входа на сайт с помощью соцсетей
  • Блок перехода к регистрации
    Содержит текст + кнопка Зарегистрироваться, по нажатию кнопки пользователь переходит к форме регистрации (см.п.7.6)

7.8. Сброс пароля

Сброс пароля происходит путем отправки письма на электронную почту пользователя

• Пользователь вводит в поле E-mail address и нажимает кнопку Отправить.
• Система проверяет наличие пользователя с таким E-mail в БД
  • Если не найден-выводится текст ошибки.
  • Если совпадение найдено, то происходит отправка письма на указанный электронный адрес, а пользователь видит уведомление о том, что ссылка для сброса пароля была отправлена на указанный E-mail.

В письме выводится уникальная ссылка для подтверждения сброса пароля. Срок жизни ссылки - 24 часа, после этого при переходе выводится ошибка.

По нажатию ссылки в письме, пользователь переходит к форме Восстановить пароль, где указывает Новый пароль.

После успешного указания нового пароля  пользователь нажимает Отправить и авторизуется на сайте (переход на страницу Мой профиль 9.6.2).

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

7.9. Чат

Чат содержит 2 блока: информация о собеседнике и поле переписки.

7.9.1. Информация о собеседнике

Содержит:

• Аватар и логин Продавца
• Иконка Онлайн.
  Иконка имеет 2 состояния
  • Если пользователь сейчас онлайн, то выводится соответствующая иконка у аватара:
  • Если пользователь оффлайн, выводится иконка меняет цвет:

и выводится дата, когда в последний раз пользователь был онлайн (несколько минут назад, сегодня в чч:мм, дата чч:мм):

• Иконка Пожаловаться
  По клику открывается форма заявки для написания жалобы. Если пользователь авторизован на сайте, то данные для обратной связи заполняются из профиля, заявка в АП поступает с указанием пользователя(на которого поступила жалоба и кто отправил заявку)

7.9.2. Переписка

В поле переписки  выводятся как сообщения пользователей, так и системные сообщения(Оповещения).

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

Слева располагаются входящие сообщения, справа собственные отправленные.

Оповещения выводятся также с текстом и временем поступления

Типы оповещений см.п. 7.3.

Отправка сообщений в чат происходит  помощью поля ввода и нажатия иконки  (или клавиатурной кнопки Enter)

К сообщению можно прикрепить изображение (валидация см.п.7.1.), в таком случае загруженное изображение отображается в теле переписки:

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

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

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

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

Если с данным пользователем еще не было переписки (нет сообщений), то в чате выводится информация об отзывах и рейтинге данного пользователя:

7.10. Платные услуги

Требуется заложить возможность подключения платных услуг для объявлений.Стоимость/Описание услуг должна редактироваться в АП. На данный момент предусмотрены следующие услуги:

• Премиум размещение
  
  Если пользователь подключает для объявления данный тип услуги, то в выдаче данное объявление будет выделено цветом и дополнено иконкой:
• Сделать VIP-объявление
  
  Если пользователь подключает для объявления данный тип услуги, то объявление будет выводиться в блоке Спецпредложения (см.п.9.3.) 7 дней с момента публикации.
• Выделить объявление

Если пользователь подключает для объявления данный тип услуги, то объявление будет выводиться выделяться цветом 7 дней с момента публикации.

• Поднять в поиске
  
  Если пользователь подключил данный тип услуги, то данное объявление единовременно выводится в начало списка объявлений.
• Пакетные услуги:
  • Турбо-продажа
    
    Внимание: настройка услуг, которые будут при этом подключаться, должна осуществляться в АП.
  • Быстрая продажа
    
    Внимание: настройка услуг, которые будут при этом подключаться, должна осуществляться в АП.

7.11. E-mail рассылки

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

• регистрация на сайте
• успешная смена пароля
• новые события в заказе (включая информацию о непрохождении модерации)
• ежедневная рассылка (например в 05:00)

с краткой сводкой того, что было размещено на сайте за последние сутки

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

7.12 Попапы

Все попапы на сервисе должны работать по единому принципу, если не оговорено иного.

• Закрытие происходит по иконке крестик в правом/левом углу попапа или с помощью клавиатурной клавиши Esc. При этом внесенные изменения отменяются (аналогично при закрытии вкладки или окна браузера).
• Попап должен располагаться посередине экрана, как по ширине, так и по высоте
• Попап должен занимать всю возможную полезную площадь экрана. Высота от верхнего края экрана должна меняться динамически в зависимости от высоты окна браузера. Т.е не должно получиться ситуации при которой у нас по высоте или по ширине есть свободное место, при этом часть попапа по высоте или ширине скрыта.
• Скролл показывается только в том случае, если высота попапа не позволяет разместить его внутри экрана
• Скролл появляется только у экрана браузера, не внутри попапа
• Скролл должен прокручивать только сам попап, страница скрытая попапом, не должна скролиться
• При отправке данных из попапа, происходит блокировка интерфейса, появляется лоадер до завершения операции.

7.13 Общий принцип обработки ошибок

Проверка корректности заполнения полей происходит в двух случаях:

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

В случае корректного заполнения поля, в поле проставляется зеленая галочка, обозначающая успешность заполнения

8. Структура сайта

Ссылка на исходник: __________________________________

9. Описание страниц

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

Содержит:

• баннер с предложением продать или купить аккаунт. При наведении курсора мыши на одну из сторон баннера вторая должна затемняться (пример: https://www.kupivip.ru)

При нажатии кнопки Хочу купить будет переход на страницу Купить (см.п. 9.3)

Функционал кнопки Хочу продать аналогичен кнопке Продать в шапке сайта (см.п. 7.4)

• баннер с информацией, что делает сервис и ссылкой “Узнать больше”. При клике по ссылке “Узнать больше” будет переход на страницу О сервисе.
• блок в цифрах о преимуществах

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

Данные в блоке редактируются в АП.

• блок Как происходит процесс продажи аккаунта, представлен в виде инфографики
• баннер с информацией о продаже аккаунта. Функционал кнопки Выбор игры в данном блоке аналогичен кнопке Продать в шапке сайта (см.п. 7.4)
• блок Как происходит процесс покупки аккаунта, представлен в виде инфографики
• баннер с информацией о покупке аккаунта. При нажатии кнопки “Выбор игры” будет переход к п. 9.3
• блок Что о нас говорят. Представлен в виде слайдера отзывов и кнопки Оставить отзыв.

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

По клику на фото в слайдере, пользователь видит данный отзыв в качестве основного (слайдер пролистывается).

При нажатии на кнопку Оставить отзыв пользователь переходит в соседнюю вкладку, в которой открывается группа ВК на страницу Обсуждение. Ссылку на группу уточнить у Заказчика.

Отзывы должны редактироваться в АП.

9.2. Добавить объявление

По нажатию кнопки Подать объявление пользователь:

• если не авторизован-видит форму авторизации(7.7.)
• если авторизован переходит к странице ознакомления с Правилами сервиса.

На странице выводятся следующие блоки:

• Текстовый блок
• Таблица со столбцами:
  • Тип нарушения и санкции

По наведению курсора мыши на строку в таблице, пользователь видит подчеркивание слева:

Под таблицей выводится кнопка Принять условия:

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

Форма содержит поля для заполнения (валидация п. 7.1)

• Тип объявления*

Выпадающий список значений: Аккаунты , Предметы, Услуги, Прочее

• Выбор игры*: поле ввода с функцией автокомплита, после ввода 2-го символа пользователь видит список найденных игр.

Выбрать игру можно кликом по названию.

• Добавление изображений к объявлению.
  Максимальное количество загруженных изображений к одному объявлению - 10
• Поле Описание*
• Поле Цена*

Кнопка Разместить объявление, по нажатию, пользователь попадает к экрану выбора услуг (список платных услуг см.п.7.10):

..

По наведению курсора мыши на кнопку Подключить пользователь видит ее изменение цвета на синий:

При нажатии кнопки Подключить, происходит проверка условия

стоимость подключения услуги≤баланс пользователя (см.п.9.6.4)

• Если условие выполняется, пользователь видит уведомление:

А его баланс на сайте уменьшается на сумму, равную стоимости предоставления конкретной  услуги.

• Если условие не выполняется, пользователь переходит к пополнению баланса (см.п.9.4).

Внимание: для пользователей доступно размещение объявлений с бесплатным продвижением по реферальной программе (см.п.6.3).

Информация об этом содержится в одном из блоков:

 По нажатию кнопки пользователь видит окно:

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

Внимание: код генерируется один раз, при повторном открытии окна пользователь увидит тот же код, и этот же уникальный идентификатор сохраняется в БД для данного пользователя. 

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

Ниже списка услуг выводится кнопка для публикации объявления без подключения услуг:

По нажатию кнопки Обычное размещение пользователь видит уведомление

Внимание: все объявления поступают в АП на предварительную модерацию перед публикацией.

По нажатию кнопки Понятно, окно закрывается, пользователь оказывается на странице, с которой была нажата кнопка Подать объявление.

9.3. Раздел Купить

На странице выводятся следующие блоки:

• Заголовок страницы
• Блок сортировки
  Выпадающий список:

На этапе разработки требуется настроить следующие типы сортировки:

Новинки - сортировка по дате публикации от новых к старым сверху вниз

От дешевого к дорогому - сортировка по возрастанию по цене объявления

От дорогого к дешевому - сортировка по убыванию по цене объявления

От платных объявлений - сортировка объявлений, при которых в начале списка будут выводиться все объявления, для которых было приобретено Продвижение (см.п. 7.10)

• Список объявлений, разделен на 2 части по 10 элементов, далее постраничная пагинация.
• Объявление ( состояние по умолчанию)

Содержит:

• Описание (200 символов, далее ...)
  По клику-переход на страницу заказа (см.п.9.4)
• Аватар автора по клику-переход к Профилю пользователя 9.6.2.1)
• Логин автора (по клику-переход к Профилю пользователя 9.6.2.1)
• Цена объявления

Состояние  при подключении платных услуг см.п. 7.10

• Спецпредложения

Данный блок представлен в виде слайдера объявлений, который работает по клику на иконок вправо/влево

• Поиск

Функционал аналогичен п.7.4, за исключением-отображение окна не в попап.

• Фильтр

Содержит следующие параметры:

• Цена(Бегунок цен)
  Состоит из полей ввода минимального и максимального значения, а также шкалы под полями.

На шкале выводятся 2 точки, левая - соответствует минимальному значению объявления, правая-максимальному.
При взаимодействии с точками на шкале меняются значения полей, при взаимодействии с полями меняется положение точек на шкале.

• Тип объявлений (чекбоксы, значения по умолчанию-не выбран

Блок Хотите продавать

По нажатию кнопки пользователь видит попап Создания нового объявления (см.п.9.2)

9.3.1. Результаты поиска

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

При этом поисковый запрос должен выделяется цветом в описании.

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

9.4. Страница заказа

Страница содержит следующие блоки:

• Фото, загруженные при добавлении объявлений(слайдер, выводится превью)
  По клику на фото-увеличенный просмотр.
• Статус, требуется заложить статусы: Открыт, Закрыт, В обработке
• Цена объявления
• Название игры
• Категория(тип объявления)
• Описание, выводится полностью
• Целевая кнопка
  Зависит от статуса заказа
  • Открыт - выводится кнопка Приобрести товар
  • Закрыт - выводится кнопка Оставить отзыв с формой добавления отзыва:
    • Форма содержит иконки выставления оценки по шкале 0-5 (звезды) и текстовое поле для отзыва (максимум 300 символов).
  • В обработке - выводится кнопка Подтвердить выполнение работы:
• Чат (см.п.7.9.)

9.4.1. UC1: Совершение сделки

Действующие лица: Покупатель, Продавец, Система, Менеджер

Предыстория: Продавец размещает объявление и оно успешно проходит модерацию.

1. Покупатель заходит на страницу заказа
2. Покупатель нажимает на кнопку Приобрести товар
3. Система отправляет Покупателя на страницу пополнения баланса
4. Покупатель пополняет баланс на сумму, необходимую для приобретения товара
5. Система генерирует оповещение в чат, что сумма зарезервирована
6. Продавец выполняет свои обязательства и нажимает кнопку Подтвердить выполнение заказа
7. Система генерирует оповещение в чат, что Продавец подтвердил выполнение заказа.
8. Покупатель проверяет выполнение условий заказа и нажимает кнопку Подтвердить получение товара
9. Система генерирует оповещение в чат о том, что сделка Закрыта и можно оставить отзыв по сотрудничеству
10. Покупатель и Продавец оставляют отзыв о сотрудничестве
11. Система генерирует уведомления (пуш/на e-mail в зависимости от настроек, выставленных в п. 9.6.5)
12. Система переводит на счет Продавца сумму с учетом комиссии 5%
13. Продавец получает уведомление в ЛК о поступлении средств.

Расширения

3а. Покупатель не внес необходимую сумму для приобретения товара

3а1. Статус заказа остается Открыт, любой другой Покупатель может нажать кнопку Приобрести товар.

3а2. В Истории операций Покупатель видит новую запись со статусом Не оплачен

6а. Продавец не получил товар (Покупатель не выполнил свои условия)

6а1. Продавец может обратиться в службу поддержки с помощью формы в 9.5. Контакты

6а2. Система генерирует обращение в АП

6а3. Менеджер может вручную завершить сделку в АП.

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

6б1. Спустя 15 дней Система генерирует оповещение в АП, где Менеджер видит, что сделка долгое время не подтверждалась

6б2. Менеджер может вручную завершить сделку в АП.

10а. Участники сделки не оставили отзыв по завершению сделки

10а1. Форма добавления отзыва отображается на странице заказа в течение 30 дней, далее-возможности оставить отзыв по сделке нет.

9.5. Контакты

На данной странице выводится форма обратной связи, которая содержит следующие поля (Валидация см.п.7.1.):

• Адрес эл. почты*
• Тема сообщения*
• Выпадающий список значений Тема сообщения*
• Ваш логин*
• Номер заказа
• Поясняющий текст “Если ваш запрос не связан с заказом, поставьте прочерк”
• Ваше сообщение*
• Поясняющий текст “Постарайтесь описать всё как можно подробнее и указать все детали (это позволит решить проблему быстрее)”
• Форма Drag&drop Добавить файл
• Поясняющий текст “При необходимости прикрепите файлы (необязательно)”
• Каптча* (https://developers.google.com/recaptcha/ )
• Кнопка Отправить

9.6. Личный кабинет

9.6.1. Меню

Содержит ссылки на разделы ЛК:

• Мой профиль
• Сообщения
• Финансы
• Настройки
• История
• Выйти, выход осуществляется с дополнительным подтверждением.

Рядом с разделами, в которых произошли новые события (по ним есть новые уведомления), появляется иконка с количеством уведомлений^

9.6.2. Мой профиль (как видит владелец аккаунта)

На странице выводятся следующие блоки:

• Данные, указанные в настройках (см.п.9.6.5)

+ рейтинг пользователя по шкале 0-5 в виде иконок (звезды), где оценка 5 соответствует всем закрашенным звездам в рейтинге, а 0-отсутствие закрашивания.

Рядом с рейтингом выводится общее количество отзывов.

• Последние отзывы

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

Можно посмотреть предыдущие отзывы, кликнув по иконкам стрелки вправо (переход к 3 более поздним отзывам), влево-к новым отзывам по дате добавления.

• Последние объявления

В данном блоке выводится последние 6 объявлений пользователя, отсортированных по дате добавления.от новых к поздним слева направо сверху вниз.

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

При этом список всех объявлений открывается списком вниз на данной странице.

Объявления в списке содержат следующие элементы: Название игры, Тип объявления, описание (200 символов, далее ...), цена, статус(Открыт/Завершен/В обработке), целевая кнопка (меняется в зависимости от состояния объявления см.ниже)

Объявления в списке имеют несколько состояний в зависимости от статуса и подключенных платных услуг.

• Не выбрано и не оплачено продвижение:
• Статус объявления-Завершен

По клику на объявление пользователь переходит к странице заказа.

9.6.2.1. Профиль (как видят остальные пользователи)

По клику на аватар или логин пользователя осуществляется переход к профилю данного пользователя.

Страница аналогична п. 9.6.2., за исключением:

• Рядом с аватаром пользователя указываются данные по регистрации на сервисе и дате последней активности (или метка сейчас Online)
• В блоке Объявлений отсутствуют кнопки, выводится только Название игры, Тип объявления, Описание (200 символов, далее ...) и статус Открыт/Завершен

Сначала выводятся все объявления со статусом Открыт, далее - со статусом Завершен.

9.6.3. Сообщения

На странице выводятся следующие блоки:

• Список диалогов

Сортировка по последнему в чате событию от новых к поздним сверху вниз

Каждый диалог содержит аватар пользователя, последнее сообщение в чате (ограничено 200 символами, далее ...)

• Поиск по диалогам

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

Поиск осуществляется по всем параметрам чатов(тексты сообщений пользователей и системных оповещений, имя пользователя, прикрепленные файлы).

• Чат(см.п.7.9), по умолчанию открывается первый в списке чатов диалог Открыть любой диалог из списка слева можно, кликнув по строке диалога в списке, выбранный/открытый диалог всегда выделяется цветом:

9.6.4. Финансы

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

Таблица операций содержит:

• дату и время совершения операции, а также информацию о давности ее совершения относительно текущего дня
• описание операции (заказ или пополнение баланса)
• статус операции(Вывод, Пополнение)
• сумма операции

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

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

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

По всем операциям предусмотрена фильтрация

9.6.5. Настройки

На странице выводятся следующие блоки:

• Аватар пользователя
• Логин на сервисе
• Описание
• Блок управления Push уведомлениями
• Блок управления оповещениями по электронной почте
  Нажатие по кнопке Включить меняет цвет и текст кнопки на Включено, при этом для данного аккаунта подключаются рассылки на электронную почту (рассылки с событиями см.п. 7.11) и push уведомления, когда пользователь авторизовался с моб. устройства.

По нажатию кнопки Редактировать профиль пользователь видит поля для изменения личных данных (валидация см.п.7.1)

• Аватар

Если пользователь выбирает чекбокс Удалить аватар совсем, то вместо аватара будет выводиться стандартный плейсхолдер:

• Логин
• Описание
• Изменение пароля

Содержит 2 поля ввода: Новый пароль и Подтвердите старый пароль

Новый пароль - поле открыто (видны вводимые символы)

Подтвердите старый пароль (вводимые символы скрыты, посмотреть можно по клику иконки Глаз).

9.6.6. История операций

Страница представлена в табличном виде и содержит:

• Дату и время совершения операции (формат: дд месяц чч:мм) а также информацию о том, как давно она была совершена с текущего момента.
• Номер заказа (по клику-переход к странице данного заказа см.п. 9.4.)
• Описание (Название игры, Тип объявления и Описание (150 символов, далее ...))
• Информацию о продавце(аналогично п.7.9)
• Статус операции (оплачен/не оплачен)
• Сумма операции

^[1] Здесь и далее-поля, обозначенные *, обязательны для заполнения.

Купить готовый "движок" для магазина цифровых товаров