Учимся выдавать авторам ключи

Я намеренно выбрал не пытаться опираться на систему логинов и паролей. В децентрализованной сети организовать уникальность логинов непросто, есть куда более натуральное решение. Каждый автор в словаре — пара ключей для асимметричного шифрования, т.е. взаимосвязанные публичный и приватный ключи. Это которий текст, который не сложно хранить у себя в телефоне или на компе и загружать при входе. Либо из галереи фото (в случае если хранить в виде QR-кода на мобильном), либо из папки в виде файла JSON. Но важно, чтобы автор сохранил их после регистрации и понимал, как это работает. Первая версия уведомления об этом сделана на экране создания аккаунта и показывается после входа пользователя, пока он не нажмет кнопку "Спасибо, ключи у меня". Пока получилось не супер-интуитивно, но это уже важный прогресс, случившийся благодаря первой обратной связи, которая пошла от самых первых испытателей словаря.

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

Практически все готово к запуску

После того, как основной раздел игры — слова и определения — были относительно завершены, пришло время страниц и карточек авторов и комнат. Теперь и они на минимальном уровне готовы. Страница автора содержит Имя, Полное имя и Город, которые сам автор может редактировать прямо на месте. Тут же — списки слов, определений и комнат этого автора. Внизу — возможность вывести QR-код страницы или поделиться ссылкой (на iOS).

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

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

В остальном, видимо, пришло время приглашать первых авторов и дорабатывать код уже в соответствии с обратной связью от них. Это — большая веха!

Минимальная модерация есть

Итак, связи между словами и определениями авторы могут включать и выключать, но сами слова и определения добавляются бесповоротно — удалить их невозможно ну никак. Даже владельцу комнаты это не под силу. Это дает крутую уверенность в сохранности данных и делает работу над словарем куда увлекательнее для всех авторов. Ответственность! Но что, если кто-то просто опечатался? Заснул на клавиатуре и добавил совсем уж кривое слово? Или дубликат определения с опечаткой закрался? Ну или кто-то добавил существующее слово или откровенную матершину в твою комнату? Теперь есть треш-список. Добавить в него что-то может только владелец комнаты. При выводе списков эти записи не показываются. Этого вполне достаточно!

В целом весь функционал есть. Нужно доделать карточки авторов, чуть облагородить интерфейс владельца комнаты. В плане — добавление модераторов. Но это пока не так уж важно. Куда важнее — пригласить живых людей играть и исследовать. Протестировать в разных ситуациях и оптимизировать для максимального веселья. ))) После первого такого раунда внесу все важные правки и можно выпускать версию 1.0.0! Готовимся!

Личные связи работают как надо

С самого старта разработки не было понятно, как именно реализовать связи между хешированными записями слов и определений. Теперь разобрался! Каждая связь — это две записи с ключом вида хэш1.хэш2@пубключ и с переставленными хешами. Все это укладывается в схему сертификации личных записей SEA.certify { '+':'*' } и позволяет дать возможность пользователям управлять своими связями — добавлять и удалять их по желанию. Если связь добавили несколько человек, то пока они все свои не удалят — она не исчезнет. Очень живая динамика. В приложении все интереснее проводить время. Особенно когда кто-то там есть еще и ты видишь как все меняется на ходу )

Это изменение потребовало изменить сертификаты в главной комнате и это стало поводом начать все заново с чистой комнаты. На ней осталось отработать администирование владельцем и назначенными им модераторами и можно считать первую версию полностью функциональной.

Страницы авторов

Авторы обзавелись полноценными страничками с возможностью базового редактирования профиля, а также работы с ключами. Генерация пароля уже настроена, но нужно доделать вход по этим паролям. Паролем зашифрована криптопара пользователя и лежит у него по пути 'pass'. Там же лежит зашифрованный парой пароль. Т.е. для входа нужно знать публичный ключ пользователя и пароль от него. Войдя, можно посмотреть свой пароль и поменять его на новый. Можно и другие стратегии продумать, это не сложно внедрять.

На странице пользователя можно посмотреть его слова и определения в данной комнате + его собственные комнаты. Вообще гулять по пространству становится все увлекательнее и многообразнее. А с возвратом полных аватарок авторов в карточки — еще и ярче! Нажимаешь на аватарку — идешь на страницу автора. Круто!

Дополнение

В зависимости добавлен zenbase, включающий хранение данных в децентрализованной сети SKYnet. Он включается строчкой import 'zenbase/dist/main.js' в store@db, дальше все вроде работает неплохо. Позволяет делать данные еще более надежными. Но есть одно но — размер бандла прибавляет 500 кБ! Это много, т.к. vendor.js становится более 800 кб. Их можно разбить, но этот скрипт так и так грузится в самом начале инициализации базы данных. Этот размер может быть не так страшен, когда будет активирован режим PWA. Так что когда выйдет первая стабильная версия словаря — можно будет пробовать снова включать SKYnet.

Комнатами теперь удобно управлять

Сертификация на новом уровне — владелец комнаты сразу выпускает для себя сертификаты и потом может редактировать ее заголовок и подзаголовок от своего имени, не пользуясь криптопарой комнаты. Она остается нужна только для перевыпуска сертификатов для обновленной конфигурации. Интересно сделать для этого какое-то версионирование — можно будет видеть какой версии комната и предлагать обновлять ее владельцам.

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

Готовы внедрять ведущих комнат

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

Странички слов и определений и QR-фотоключи

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

Другой важный момент - внедрение полноценного распознавания QR-кодов с любых фотографий. Это позволяет сделать надежную систему хранения ключей на мобильных устройствах — вывел QR-ключ у себя в профиле, сделал скриншот и доступ к личной страничке у тебя всегда в кармане. Удобно? Наверняка. Правда, эта возможность прибавила 150 кБ к размеру бандла — это довольно много, около 30% роста! Но это естественно и пока я не напрягаюсь из-за размера — он все еще принебрежительно мал для современного веба. А в последствии я включу асинхронную подгрузку роутов и кеширование PWA и проблема вообще сойдет на нет. Дальше — больше!

Избранные и собственные комнаты

Приложение постепенно приходит к четкой структуре. Страницы содержат компоненты. Компоненты включают модели. Модели работают с хранилищем. Четкие слои абстрации помогают связывать код на нескольких уровнях. При этом компоненты получаются максимально гибкими и независимыми (хоть и неразрывно связанными с моделями. По сути модель — готовый модуль бизнес-логики. Работа с базой данных происходит только там.

Дальше — страницы слов и определений, корзина и банлист. + личные пароли пользователей.

Аккуратный дизайн с WindyCSS

Плагин WindiCSS генерирует стили из классов-утилит аля TailwindCSS на лету. Это позволяет не париться с удалением ненужных стилей и делает pug-компоненты еще короче. Так, правда, краткость приводит к излишне плотной упаковке — оформление смешивается со структурой компонентов. Но это не так уж страшно, особенно если учитывать, что основные стили в компонентах — структурные (.flex и проч). Если нужно сложное оформление — всегда можно дополнить их в stylus.