ТЗ
ПРЕАМБУЛА
Доступ: admin/1503
Есть сайт на котором пользователь в режиме предпросмотра может выбрать карту, создать контур интересующей его области, а потом создать файл карты в различных векторных форматах. При этом сначала у него будет возможность скачать и оценить качество карты, скачивая файл в формате jpg с наложенным поверх изображения водяным знаком.
После выбора требуемой области клиенту предлагается выбрать формат карты из списка.
После выбора формата и оплаты заказа, ссылка на карту приходит на емэил клиента.
На сайте при этом:
После выбора требуемого форматы карты, отправляется письмо со ссылкой на карту выбранную пользователем менеджеру сайта в формате pdf. После чего менеджер его экспортирует в нужный пользователю формат и высылает пользователю ссылку на файл в нужном формате.
Сайт запущен на арендном выделенном сервере.
На нём можно работать.
Вот ссылка на сайт:
доступ: Admin/1503
1) Присоединить каталог со странами, областями, районами и городами к сайту.
Сейчас пользователь заходя на сайт может выбрать произвольную область для экспорта. Либо воспользоваться поиском и найти нужный участок на карте.
Нужно добавить возможность пользователю видеть каталог стран в виде списка стран, как тут:
https://data.nextgis.com/ru/?lvl=countries
То есть мы делаем полноценный магазин карт с товарами и описаниями каждой карты, которую можно купить и у которой есть своя страница, на которую можно ссылаться.
Это всё делается для лучшей индексации поисковыми системами.
Вверху экрана мы добавим ссылку на общий каталог карт всех стран мира, в котором будет каталог, как по ссылке выше, где будут все страны, с регионами, районами и городами на языке, который выбран в качестве основного на сайте.
Сами данные для БД можно взять тут:
https://osmnames.org/about/
Список стран показывается в виде таблицы с изменяемым числом столбцов в зависимости от ширины экрана.
Тянущаяся вёрстка
Нужно сделать тянущуюся вёрстку сайта, чтобы на мобильных устройствах он хорошо отображался.
Таблица с названиями областей, районов, городов
Отдельно на каждой, и главной странице сайта под областью для генерации карты будет идти таблица с каталогом областей России.
(Для российской аудитории, по умолчанию будет Россия, для других стран, будет каталог “раскрыт” на другой стране.)
Принцип работы каталога
Работа сайта построена по принципу обычного магазина, например такого:
https://mapsshop.ru/karty_kamchatskogo_kraia/
Разница только в том, что на примере есть много товаров с разными типами карт, и потому над таблицами районов - нужны ссылки на разные типы карт (товаров)
У нас же в продаже только один тип карт (векторный), потому он представлен просто как онлайн окно с рамкой, где можно сгенерировать карту нужно размера.
Всё остальное, так же, как на https://mapsshop.ru/karty_kamchatskogo_kraia/
При клике на область, открывается список районов и городов областного уровня.
Показать контур выбранной области
При клике на любую область, пользователь переходит на страницу, как картинка выше, но при этом на онлайн карте видит уже контур выбранной области.
Типа такого:
И этот контур области должен быть заключен в прямоугольный контур, который человек может сразу же сгенерировать, просто нажав кнопку “вперед”.
При клике на район, открывается список городов и нас. Пунктов районного уровня.
При этом все эти списки районов, областей и городов внизу экрана, а сверху снова есть карта с возможностью выбора произвольной области с заключенной в квадрат выделенным регионом:
Описание карты (товара): шаблон
Ниже под таблицей с названиями регионов, описание текущего открытого региона.
Описание и текст сделан на основе шаблона. В шаблон подставляется название региона, который сейчас открыт.
Вот так примерно выглядит шаблон описания карты:
Векторная карта {city} - детальную карту {city} в формате ai, cdr, svg, pdf, eps, dwg скачать и т.п.
Более подробно этот пункт прописан во втором разделе ТЗ (Шаблон описания)
2) Переработать функционал сайта
Из мелких работ:
Нужно будет почистить сайт от ненужных функций и ссылок, а также местами изменить текст на страницах.
Сначала чистим сайт от ненужных элементов, потом я уже самостоятельно в таблице SQL правлю тексты на сайте.
Тексты на сайте сделаны на множестве языков. Все тексты сайта должны быть в табличке sql, в которой можно будет исправить перевод, или текст.
Сделать это нужно удобно, чтобы в будущем можно было править тексты сайта и переводы без обращения к программистам.
Если это нужно будет делать в phpmyadmin это будет нормально, но так чтобы найти нужный текст для правки было не сложно.
Сайт сделан на множестве языков, это нужно сохранить, и иметь возможность в одной таблице со всем текстами по сайту всё быстро править и при необходимости переводить.
Многоязычный интерфейс сделать сетью региональных сайтов
Сейчас вместо одного многоязычного сайта, нужно сделать много сайтов на разных языках с отдельными доменами на национальных доменах.
По сути получится много сайтов на разных языках.
БД с названиями областей, районов и городов по всему миру можно найти тут:
https://osmnames.org/about/
А также есть и другие ресурсы с базами данных на национальных языках.
У нас не стоит задача сделать все мелкие нас.пункты, достаточно только города от 10 000 и все районы, и области.
Сейчас сделать систему адресов вида:
ru.cdrmap.shop
ua.cdrmap.shop
kz.cdrmap.shop
pl.cdrmap.shop
и т.д по тем языкам, что есть на сайте.
Ссылки на эти проекты должны быть на каждой странице сайта в виде раскрывающегося списка, так же, как сейчас сделана многоязычность.
Главная сайта будет страница Генерации карты:
Желтым зачеркнуто то, что нужно будет убрать из функционала.
Из сложного, нужно убрать кнопку выделения области, так как и так требуется от пользователя выбрать область генерации, а потому пусть просто всегда висит уже частично выбранная область на экране, которая будет масштабироваться в зависимости от того, какой товар (название карты области) просматривает пользователь в этот момент.
Первая и главная страница сайта будет выглядеть так:
Вот так должна будет выглядеть каждая страница сайта.
Сейчас из сложного, у нас появляется аналог каталога карт всего мира с описанием.
На главной странице под полем для выбора прямоугольника для генерации карты должен появиться список областей страны, для которой сайт открыт, например России.
Выбор региона пользователем
Если пользователь зашёл на сайт по адресу вида: ru.cdrmaps.shop
То ему должна показываться карта России (раскрытый каталог областей России на главной странице)
Если он зашёл на сайт вида pl.cdrmaps.shop
То сайт уже будет раскрыт на Польше и сайт отображается на польском языке.
Примеры карт (пиктограммы)
Простая и маленькая доработка, добавить пиктограммы ввиде ссылок на разные форматы карт для скачивания, чтобы пользователь мог убедится в качестве предоставляемых карт.
Пользователь может на главной скачать примеры карт, кликнув по ссылкам в виде пиктограмм с названиями в разных форматах.
Кнопка “Вперёд”
На онлайн карте вверху страницы всегда отображается карта того места, которое в каталоге выбрал пользователь.
Рамка области очерчивает область, которая “подсвечена”.
Также пользователь может скорректировать на онлайн карте рамкой область, которую он хотел бы получить.
После выделения нужной области нажимает красную кнопку “вперед”.
И переходит на “линейку” генерации карты, которая расписана дальше.
Принцип работы каталога
Также пользователь может кликнуть на ссылки с названиями регионов ниже.
(Если по какой-то причине, посчитает, что ему текущая область не подходит. А вручную зумить и выделять он не хочет, или не понимает, что так можно.)
Перейдя на определённую область, и там уже можно выбрать нужный фрагмент карты и нажать вперёд, или скачать пример, или пройти ещё глубже по ссылкам в более мелкие деления.
Уже будет две таблицы ниже, карты районов, и карты нас.пунктов.
И снова можно приступить либо к генерации карты, либо перейти ещё глубже.
То есть как бы глубоко по каталогу пользователь не шёл, станицы будут выглядеть одинаково. Сверху поле для генерации карты с рамкой и кнопкой “вперед”.
Ниже примеры карт в разных форматах, ещё ниже таблица каталога карт просматриваемого региона, ещё ниже описание карты региона, который в данный момент просматривает пользователь.
Вот так:
Шаблоны описания
Описание товаров (карт, которые просматривает пользователь) построено по принципу шаблонов.
Есть текст, в котором подставляется название региона, который в данный момент просматривает пользователь.
Сам шаблон хранится в БД в mysql, и есть БД со всем каталогом регионов и городов, откуда подставляются название текущего района в текст
Вот так примерно выглядит шаблон описания карты:
Векторная карта {city} - детальную карту {city} в формате ai, cdr, svg, pdf, eps, dwg скачать и т.п.
У нас будет множество шаблонов описания на разных языках. Они должны быть представлены в одной таблице для удобного редактирования и перевода, как и остальные элементы сайта, которые нужно переводить.
Сложность будет в том, что у нас должен быть каталог по всему миру для каждой версии сайта.
То есть, если человек заходит на сайта с ru.cdrmap.shop то он видит раскрытой карты России, но и при открытии каталога карт, он увидит карты по всему миру на русском и с описаниями на русском.
А если зайдёт через польскую версию, то описание и каталог уже будут на польском.
Так что для каждой версии сайта, нужна своя БД с названиями всех регионов мира.
На второй странице генерации карты
убираем всё тоже самое, что и на главной, а также последние два варианта макета.
На третьей странице генерации:
На странице выбора стиля нужно будет убрать большую часть стилей, названия стилей перевести на русский.
Для лучшей визуализации стили сделать в виде таблицы, а не раскрывающегося списка.
Слева название стиля, справа картинка, которая показывает как он выглядит.
Четвёртая страница генерации:
На странице выбора дополнительных слоёв нужно следующее:
Обязательно перевести все названия слоёв
Убрать лишние слои
Сделать не в виде раскрывающегося списка, а в виде таблицы.
Слева название слоя, справа картинка визуализации слоя.
Слоёв можно выбрать несколько, потому тут уже должны быть галочки, или как сейчас подсветка, а не “radio button”
Пятая “финишная” страница генерации карты
На странице выбора формата бумаги нужно убрать возможность быстрого выбора форматов, оставив только функционал в мм ширина длина
Но нужно добавить возможность онлайн просмотра получающегося масштаба (детализации) при текущем размере для печати.
Вот так это будет выглядеть:
На онлайн карте нельзя будет пользоваться колёсиком (зумом), так как карта будет показываться как есть.
То есть, если пользователь выбрал размер к примеру 4000 на 4000, то в этом случае у него выбранный фрагмент влезает при зуме 11, значит нужно отобразить карту на 11 зуме без возможности её приближать, но с возможностью её двигать.
Получится так, что мы будем видеть какой-то центр карт, так как край будет не влезать в поле экрана. Если карту двигать в сторону, то нужно показать границы выделенной области, которые пользователь обозначил ранее.
Ориентировочный размер карты
Сейчас карта создаётся по указанному размеру пользователем.
Но размер этот имеет мало общего с реальностью, так как при печати карты даже на меньшем размере бумаги всё равно, карта вполне читабельна и удобна.
Оценочно можно смело уменьшать размер в 2 раза, если карта будет использоваться для печати на стену, и в 3 раза, если печатная копия будет на столе лежать.
Эту информацию нужно будет добавить в виде комментария на странице выбора размера. Пока ещё не решил как это юзабельно сделать.
Вывод файла генерации
Сейчас при создании файла карты создаётся также рамка с информацией о карте и названием файла, это не красиво.
Нужно убрать рамку при создании карты, оставить только саму карту без какой-либо информации.
3) Привязать систему оплаты.
Пользователь выбирает нужную область на карте и генерирует файл карты. Все эти этапы и их правки в этом этапе мы прописали в пункте 2 ТЗ и потому переходим сразу к последним шагам перед оплатой:
Обязательный емэил
После прохождения всех этапов генерации карты пользователь попадает на страницу, где нужно вписать название карты и свою почту.
Пользователь указывает обязательно свой email. (Сейчас емэил не обязателен)
Процесс генерации:
После этого на оригинальном сайте пользователь переходит на страницу процесса генерации карты.
Но у нас нет возможности показывать пользователю страницу с технической информацией. Потому мы сразу же “как бы”перекидываем его на страницу результата генерации. Понятно, что генерация не выполнена, она и не нужна, если пользователь не купит карту.
Потому нужно сначала показать ему страницу с вариантами карт и ссылками для оплаты, а уж если он захочет посмотреть бесплатную версию в формате jpg, то выслать ему ссылку на неё на емэил.
Также вышлем ему ссылку на мыло на карту в формате jpg, чтобы напомнить о себе, если он вдруг ушёл с сайта так и не купив карту.
После указания своего емэила и нажатия кнопки вперед, пользователю приходит письмо со ссылкой на страницу результата генерации, а также, после окончания генерации, ссылка на карту в формате jpg. То есть два письма.
Страница результата генерации:
Сразу после указания мыла и нажатия кнопки вперёд, пользователь попадает на страницу результата генерации карты.
На странице нужно:
Переместить и немного увеличить картинку превьюшки. (Возможно с этим будут сложности, так как формально ещё карта не создана, и превьющки нет. Если получится, лучше показать превью, вдруг оно быстро генерится, если нет, тогда на месте превью у нас будет написано, что оно ещё генерируется.
Добавить ссылки с плашками разных форматов доступных для покупки.
В характеристиках карты добавить данные о масштабе и зуме карты. (Он есть на предыдущей странице при выборе размера для печати.)
В результате генерации создаётся карта в формате jpg, с наложенным полупрозрачными надписями.
Остальные форматы на месте кнопки скачать, написано цена и кнопка оплатить.
На карте в формате jpg наложен полупрозрачный текст, который не позволит пользователю нормально использовать карту. (Функционал с наложением полупрозрачного текста уже реализован. Осталось просто утвердить текст наложения).
Формат JPG ограничен размером примерно 65000 пикселей, потому некоторые генерации завершаться без вывода карты в формате JPG.
Так как генерация занимает несколько минут, иногда ещё больше, то сразу после указания емэила и перехода на страницу процесса генерации, мы как бы пропускаем эту техническую страницу и сразу показываем пользователю выбор из доступных платных форматов.
Так как генерация на самом деле ещё идёт и карта в jpg ещё не готова, мы её не показываем. Так как возможно пользователь купит карту и без просмотра в формате jpg, а если мы скажем ему, что ещё будет карта в jpg, то он точно будет ждать, пока она появится. И пока будет ждать уйдёт с сайта и забудет…
Скорость генерации файлов карты
Сейчас сайт генерирует карты довольно долго, но делает он сразу много форматов.
Нам нужно изначально только формат jpg
Нужно убрать из генерации все остальные форматы, а сделать очень быстро карту в формате jpg
Если получится её создавать в течении минуты, мы будем её подгружать на страницу с выбором вариантов карт для покупки.
После окончания генерации
Пользователь просто увидит, что страница перезагрузилась, и появилось превьюшка карты, а также появился бесплатный файл для скачивания.
Кнопка купить
После нажатия кнопки купить, пользователь сразу переходит на страницу сайта приёма платежей, а ему на емэил приходит уведомление о том, что он сделал заказ на карту такого-то типа (название формата) и ссылка на страницу результатов генерации.
Система оплаты, которую нужно подключить: https://www.walletone.com/ru/merchant/
На данный момент я пользуюсь услугами этого агрегатора. Там уже всё настроено и нужно будет просто добавить кнопку на сайт. Там даже не нужно прописывать адрес сайта, она работает везде. Но этот агрегатор принимает платежи только от граждан РФ.
Международные агрегаторы платежей
Для других версий сайта других стран, нужно будет подключить международного агрегатора.
После оплаты
Сразу после оплаты также высылается письмо с информацией клиенту, в котором указано, что заказ на карту выполняется в порядке очереди заказов и занимает от 1 часа до 8 часов в рабочее время по МСК. В письме должно быть прописано, какой формат карты выбрал клиент.
Такое же письмо приходит и админу сайта, с таким же текстом и ссылкой на пдф версию карты.
Так как мы не создаём сразу карту в пдф, для ускорения работы сайта, то уже после оплаты нужно будет сгенерировать карту в формате pdf
На сайте есть кнопка создать повторно, возможно её функционал можно задействовать для создания карты в формате pdf
Файлы созданные в результате генераций должны хранится не более 7 суток, а потом автоматически удаляться с сервера.
Далее админ вручную делает карту, и высылает её вручную клиенту.
Возможно в будущем добавим функционал, автоматического сохранения файлов в разных форматах через сервер. Пока в этом нет необходимости, так как очень мало заказов.