Котики в шляпах:

задача для начинающих

программистов

Для начала подумайте: что общего у интернет-магазина, новостного портала, сетевой библиотеки и CRM-системы?

Думаем, вы уже догадались: в данном случае перед нами огромные массивы однотипной информации — товары, новости, книги — которую необходимо упорядочить. Это могут быть и другие виды данных — не важно. Значение имеет лишь то, что с этой информацией нужно работать:

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

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

Вспомним про наш пример. Существует 71 порода кошек. Предположим, что у каждой породы может быть самец или самочка — уже 142 варианта. А теперь шляпы. Их 28 видов. Умножим 142 на 28, вроде бы не так много… НО! В выдаче у нас будет 3976 карточек. И даже треть из них будет обрабатываться столько времени, что пользователь просто убежит прочь, не желая дожидаться ответа от нашего сайта. Давайте придумаем, что делать…

Мы сэкономим время, если не будем показывать сразу все результаты поиска. Как это сделать?

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

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

Поиск может происходить двумя способами. В классическом варианте пользователь заполняет некую форму, где указывает свои предпочтения, например, «кот"/"кошка», «пушистая"/ «гладкошерстная"/ «лысая», шляпа «высокая"/ «плоская» и т. п., а затем нажимает «Искать» или «Показать». В данном случае, на сайте магазина техники DNS мы выбираем параметр, затем нажимаем «Показать». Минус данного способа — необходимость каждый раз нажимать на кнопку, пользователю это может надоесть.

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

Карточка товара (услуги, книги, новости…), как правило, содержит много разной информации.

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

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

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

Познакомьтесь с нашим кейсом по автоматизации процесса модерации.

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

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

Во-вторых нужно заполнить поля характеристик, которые зависят от категории карточек. В-третьих, есть текстовые поля и для них нюанс в том, что нужно «научить» админку экранировать код, который случайно «накопируют» пользователи с других сайтов или напихают туда вероломные злоумышленники. Поскольку вводится текст, то коварный пользователь может попробовать ввести туда полноценный html-код. Можно экранировать код, можно вырезать тэги, главное — сделать так, чтобы невозможно было вставить код, который браузер может попытаться выполнить. А еще в админке нужно упорядочить работу с категориями карточек: то есть, как-то определять эти категории, привязывать к ним сами карточки, настроить поиск по этим параметрам и т. д.

Когда карточек становится очень много, то они могут не помещаться в карту сайта (sitemap), следовательно, надо не только научиться генерировать эту карту сайта, но и сделать ее такой, которая разбивается на несколько карт — это актуально для очень объемных каталогов.

Самый банальный способ — водяные знаки. Самый наивный способ — не давать «Сохранять как» нашу картинку. Но есть много гораздо более интересных и эффективных методов защиты. Еще один важный момент — выявление ботов и защита от них.

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