В мае я написал пост про то, что уже много лет я в пассивном режиме коллекционирую монеты и, чтобы не держать в голове содержимое всей коллекции, сделал себе Coin Index. С самого начала я вел дневник проекта, в который записывал ход развития мысли. В этом посте я попробую вытянуть что-нибудь полезное из того, что записывал.
Итак. Пару лет назад я подумал про то, что моя коллекция монет растет, хоть и не с постоянной скоростью, и я никогда не помню, что у меня есть, а чего нет. И что вообще мне нужно. Я пробовал найти специализированные приложения или приспособить что-нибудь типа Эверноута или Экселя для этих нужд. Ничего из этого у меня не получилось. В голове были мысли сделать что-нибудь свое. Но меня отпугивала перспектива вбивать информацию про тысячу монет и нянчить это все в будущем. Я отложил это все на какое-то время.
И однажды меня осенило: не нужно вбивать информацию о появляющихся монетах. Нужно скачать заранее большую базу про все монеты и потом просто расставлять флаги у имеющихся экземпляров. После этой мысли я понял, что можно очень дёшево решить наболевший вопрос. Да и к тому же наконец-таки занять руки пет-проектом.
Источник информации
Я перерыл вагон тематических сайтов с каталогами монет, но ничего толкового не нашел. В идеале я искал хорошо каталогизированную и достаточно полную базу с картинками и с информацией по разным фасетам.
Перерыв кучу сайтов, неожиданно для себя я нашел страшный, но насыщенный информацией сайт для коллекционеров любого жанра: colnect.com. Colnect — это краудфаундинговая платформа, на которой помешанные люди со всего мира собирают базы экспонатов. Начиная от марок, заканчивая пластиковыми ключами из отелей. Я не поверил своим глазам: более 50 тысяч монет с фотографиями, информацией по стране, периоду, материалу, тиражу и даже с текстовым описанием реверса и аверса. И все это можно скачать в CSV-формате. Каюсь, но я не мог не украсть это.
Я ограничил свою коллекцию странами Европы. Colnect на этот случай заботливо подготовил вкладки с разбиением по континентам. Теперь для каждой страны нужно было просто скачать CSV-файл.
Правда тут меня ждал неприятный сюрприз: в скаченных CSV-шках было только 100 записей для каждой страны. Я даже успел расстроиться, но выход был найден: у премиум-пользователей такого ограничения нет. К тому же первые 14 дней после регистрации любой пользователь этого сайта получает статус «премиум».
Все складывается как какой-то пасьянс!
Интерфейс
Понимаю, что теперь могу в любой момент отпарсить эти CSV-шки и выкачать картинки. Нужно подумать, чего я хочу от интерфейса. Начинаю рисовать: умный поиск монет, страница страны, разбитая на периоды, сценарии добавления в коллекцию. Кажется, из умного списка можно сделать конфетку. Страница страны должна состоять тупо из монет. На ховер монеты повешу переворачивание, на клик — добавление в коллекцию. Монеты, которые еще не в коллекции, пусть рендерятся полупрозрачными.
После верстки прототипа понимаю, что получается слишком много моргания: мерцают иконки, переворачиваются повсюду монеты. А ведь на самом деле реверс бывает нужен очень редко. К тому же часто приходится сравнивать один реверс с другим. Поэтому принимаю решение переключать аверс и реверс по клику. А добавление и удаление монеты из коллекции повешу на пиктограммы плюса и минуса.
Внешний вид монеты
Начинаю изучать, что есть в CSV-файлах и как я могу использовать эту информацию. Сразу обратил внимание на информацию о диаметре монеты. Это позволит приблизить внешний вид монеты на экране к реальным размерам. Но нужно не забыть сделать минимальное и максимальное ограничение на случай аномальных размеров и на случай отсутствия инфы о размерах. Пишу в инлайн-стилях каждой монеты ширину: $coin→diameter × 5,5. Коэффициент 5,5 получен эмпирически. Именно с таким коэффициентом монета на экране совпадает по размерам с настоящей такой же монетой.
Смотрим дальше. Как известно, не все монеты круглые. И в CSV-шке есть инфа про форм-фактор.
А это дает мне возможность сделать страницу с монетами немного опрятнее. В случае, если монета круглая, я могу задать ей border-radius: 100 %, чтобы обрезать ненужный фон, на котором была сфотографирована монета.
Таким образом получаю 99 % монет в шикарном виде в масштабе 1:1 без лишнего фона. Супер!
Поиск
Попробовал сделать живой умный поиск. Раз нигде на странице нет полей ввода текста, то можно повесить на нажатие любой клавиши фильтрацию контента. Переписал все так, чтобы при любом нажатии клавиатуры инициировался поиск и результаты показывались сразу. Придумал логику понимания того, что введено в поисковой строке: если не цифры, то скорее всего вводили название страны. Если не название страны — то название валюты. Если цифра — то номинал или год. Все выглядит красиво, но, откровенно говоря, это какая-то синтетика. Искать монету по номиналу или году — бессмысленно. Да и по валюте — тоже не очень удобно. То есть проще всего искать монету по стране, а затем уже уточнять годом, номиналом или валютой. Но такой поиск делать дорого. Проще сделать нормальный список стран.
Так что от поиска отказываюсь. Дешевое решение для такого проекта — это лучше решение.
Срез
Меня не интересуют все монеты вообще. Мне интересна Европа, XX и XXI век, монеты в регулярном обороте. Ну и еще некоторые страны мне не интересны. Пока что достаточно будет это захардкодить на уровне условий во всех SQL-запросах. Когда будет нужно — сделаю интерфейс.
Обновления базы
В CSV таблицах есть замечательное поле — URL монеты на сайте colnet.com. Если в моей таблице в базе данных в качестве уникального поля использовать не авто-инкремент, а этот URL, то я облегчу себе жизнь в будущем, когда захочу сделать апдейт базы данных и отпарсить сайт заново: все монеты в моей базе будут привязаны к базе Colnect. И не будет дубликатов.
Коллекция
Вбил все свои монеты в базу. Все как по маслу. Но вылезло пару проблем с производительностью.
Например, список стран рендерится несколько секунд. После индексации базы все стало работать в сто раз быстрее.
После вбивания коллекции в базу, вылез явный косяк: сложно из страницы страны вернуться на список стран и выбрать другую страну. Решение: выводить список стран на всех страницах.
Pending purchases
Новый кейс: я собираюсь купить какие-то монеты. Я хочу их пометить каким-нибудь специальным флагом о том, что эта монета у меня уже почти есть, чтобы нечаянно не купить ее на другом параллельном аукционе. Добавил иконку с часиками на карточку монеты. Плюс вывел эти монеты отдельным списком. Пополнять коллекцию стало еще проще.
Список стран
Список стран — это дашборд. Я хочу видеть на дашборде статус по каждой из стран: почти полные страны, пустые страны. Добавил прогрес-бары у каждой страны. А потом придумал красить их в разные цвета. Правда, с первого раза цвета получились какие-то странные и все выглядит шумно. Как покрасить лучше, придумаю позже.
Кстати, а почему бы не превратить все горизонтальные линейки-сепараторы в прогресс-бары. Таким образом на любом уровне коллекции — эпоха, страна, все монеты — я могу видеть полноту коллекции.
Пользуясь случаем убрал полужирное начертание со всего, уменьшил размер шапок и уменьшил тень под карточкой монеты при наведении.
Цвета какие-то стремные. Сделать кодирование статуса градусником «красный → желтый → голубой» не вышло. Желтый сбивает с толку, нужно оставить только два цвета.
Сделал в фотошопе пятиступенчатый градиент от красного к голубому. И все равно получилось шило. И тут пришла в голову идея, которая придала градуснику ту самую опрятность, которую я искал: от красного к голубому нужно менять еще и прозрачность — от 0,3 у красного до 0,1 у голубого.
Вся шапка целиком должна быть кликабельна и вести на главную. Это кажется странно: ведь в шапке название страны, и с какого перепуга оно должно вести на главную. Не знаю. Мне просто постоянно хочется кликнуть туда и вернуться из страны в список. Тот самый случай, когда дизайн VS юзер-экспериенс.
Мобильная версия
На мобилах можно пренебречь контроллами добавления/удаления: все равно это лучше делать на десктопе в спокойной обстановке, а с телефона или планшета скорее всего нужно будет просто глянуть наличие.
Админка
Все это время Coin Index висел у меня на локалке. Все хорошо, но я не могу пользоваться приложением с телефона. Придумал простую схему. Нужно сделать две веб-морды для одной базы данных. Одна будет лежать в интернете и просто отдавать страницы рид-онли. А вторая — админка — будет крутиться у меня на локалке и общаться с внешней базой. Супер-дешевое решение, которое позволит не заморачиваться с системой авторизации, хотя и тут можно было дешево закрыть все авторизацией на уровне Апача.
В итоге получилось три хоста: статика (картинки, стили, скрипты), вьюер и админка.
Ориентация монеты
Монеты бывают двух ориентаций. Чтобы увидеть обратную сторону монеты с медальной ориентацией, нужно ее поворачивать на 180 градусов вокруг вертикальной оси. У монетной ориентации — горизонтальная ось. Например, все монеты в России имеют медальную ориентацию, а все евро — монетную. И это ведь можно кодировать с помощью CSS-трансфорамаций scaleX и scaleY! Пару строчек CSS и JS — и монета по клику переворачивается согласно своей ориентации. Тот самый случай, когда эстетическое улучшение добавило еще и пользы.
Благодарности
У меня ничего не получилось, если бы не помощь коллег. Женя Шпилевский, Сергей Самсонов, Саша Демух, Ваня Грищенко и Андрей Малыхин, спасибо!