Представляем ReduxVCR
Очаровательный инструмент, который позволяет записывать и пересматривать пользовательские сеансы.
Несколько недель назад я работал над синтезатором веб-аудио под названием Key & Pad.
Когда я создавал его, меня поразило, что я не смогу слышать интересные / красивые / нелепые звуки, которые пользователи издают с его помощью. Что хорошего в создании забавного игрушечного приложения, если вы не можете видеть (слышать), что с ним делают!
Однако, поскольку в этом проекте использовался Redux, решение было очевидным: поскольку каждое действие пользователя уже проходило через хранилище, мне просто нужно было какое-то промежуточное программное обеспечение, чтобы захватить его и отслеживать время между каждым действием. Тогда я мог просто «воспроизвести» эти действия в реальном времени.
Как выяснилось, было изрядное количество проблем, которых я не ожидал, и их решение в общих чертах было сложной задачей. Этот инструмент все еще находится в ранней альфа-версии, и многое еще предстоит решить, но я без проблем использую его в производственной среде. Думаю, пора, чтобы другие начали тыкать и играть с этим :)
Результаты, достижения
Вот некоторые из моих любимых записанных сессий:
(дайте кассетам секунду или две для загрузки)
- Noisecore
Набор по-настоящему аккуратных, по-настоящему диссонирующих звуков с использованием басов, искажений и множества других эффектов. - Постепенное экспериментирование
Этот пользователь издает интересные звуки хором. В основном мне нравится эта сессия, потому что процесс экспериментов и открытий настолько очевиден. - Совершенно красивая
Прекрасная мелодия, завораживающая стереотремоло. Превращается в бас-гитару вуб-вуб дабстеп.
Ремиксируемый
Redux VCR не против, чтобы его прервали; он будет продолжать выполнять свою последовательность действий, не жаловавшись, если вы будете заедать вместе с ним.
Я отлично играл ноты или настраивал эффекты на записанных сессиях. Вот простая тренировка, с которой можно повеселиться; попробуйте сыграть несколько нот или изменить эффекты!
Прочтите, чтобы узнать больше о том, как это работает, как начать работу и в каком направлении будет развиваться проект, или переходите прямо к проекту на GitHub.
Как это работает
Видеомагнитофон Redux построен по модульному принципу. Он состоит из 4 основных частей. Каждая из этих частей работает с кассетами, простыми объектами, которые содержат последовательность действий, необходимых для воссоздания сеанса пользователя, а также некоторые метаданные.
Захватывать
Capture отвечает за наблюдение за потоком действий Redux и выбор тех, которые он хочет записать.
Это довольно гибко: вы можете занести в черный список определенные действия, которые не хотите записывать, или указать «начальное действие», которое запустит запись (если, скажем, вы не хотите беспокоиться о записи процесса адаптации).
Он создает объект Cassette, отслеживает, сколько времени прошло между действиями, и передает его следующему модулю, когда что-то происходит.
Сопротивляться
Persist отвечает за упорство. Модуль по умолчанию использует Firebase и будет обновлять удаленную копию кассеты всякий раз, когда будет передана обновленная версия.
Его можно заблокировать, чтобы избежать спама на сервере.
Забрать
Retrieve - это противоположность Persist; он отвечает за безопасную загрузку кассет. Модуль по умолчанию также использует Firebase.
В отличие от двух предыдущих модулей, вы, скорее всего, не захотите выпускать Retrieve в производство. Он используется исключительно в разработке, так что вы и только вы можете повторно просматривать сеансы пользователей.
Воспроизвести
Наконец, Replay - это симпатичный маленький пользовательский интерфейс видеомагнитофона, который позволяет вам выбирать кассеты и управлять ими. Он предлагает возможность изменять скорость воспроизведения действий, и я надеюсь добавить ползунок, который позволит вам переходить к определенным частям последовательности.
Он также состоит из промежуточного программного обеспечения, которое позволяет нам передавать настраиваемые параметры. Например, мы можем указать максимальное время ожидания между действиями, чтобы сократить длинные промежутки, в которых пользователи бездействуют.
Он также использует редуктор более высокого порядка для обновления состояния при загрузке и извлечении кассет.
Подобно Retrieve, это производственный модуль.
Бессерверная безопасность
Задача при разработке этого проекта заключалась в обеспечении безопасности сеансов пользователей. В то же время я не хотел навязывать какой-либо серверной части. Key & Pad живет на страницах GitHub без серверной логики.
Firebase предлагает отличное решение со своим пользовательским API правил.
Когда ваше приложение загружается, все пользователи автоматически проходят аутентификацию с использованием анонимной аутентификации. По сути, это просто дает им уникальный идентификатор, который сохраняется для сеанса.
Обычные пользователи вообще не могут читать из базы данных, и им разрешено писать только в свой настраиваемый фрагмент базы данных, используя свой уникальный идентификатор в качестве ключа.
Для администраторов я использую GitHub OAuth. Вы указываете в правилах Firebase, что доступ для чтения предоставляется только пользователям, которые соответствуют определенной учетной записи GitHub, а затем аутентифицируете, щелкнув VCR и войдя в GitHub.
Подготовка к настройке
Каждый проект индивидуален, и я постарался сделать настройку как можно более простой, допуская при этом различные конфигурации.
Полное руководство можно найти на GitHub, но я думаю, что более простой способ разобраться в концепциях высокого уровня - это посмотреть на несколько примеров.
Я создал репо redux-vcr-todomvc, которое устанавливает Redux VCR несколькими способами. Каждый из них представляет собой не объединенный запрос на включение, поэтому вы можете просмотреть различия, необходимые для интеграции Redux VCR в TodoMVC:
- Быстрый запуск
Это самый простой способ начать работу, но он не рекомендуется для производственного использования. - Готово к производству
Эта версия заботится о том, чтобы модули только для администратора не попали в производственную сборку. - С исходной кассетой
Автоматическая загрузка определенной кассеты, указанной параметром запроса. Это полезно для добавления в избранное определенной кассеты, но также может использоваться для загрузки последней проигранной кассеты из localStorage. - Еще не все!
Помимо настройки в коде, также требуется некоторая настройка Firebase. Ознакомьтесь с документами Firebase Config, чтобы узнать, как это работает.
Помогите создать что-нибудь крутое
Это очень ранний проект, и предстоит еще много работы. У меня мало времени, чтобы посвятить это проекту, и я ищу участников! У меня огромные амбиции по поводу этого инструмента, но я не могу справиться со всем в одиночку.
В его нынешнем виде видеомагнитофон Redux отлично работает с простыми игрушечными приложениями, такими как мой синтезатор, но он еще недостаточно сложен, чтобы справиться с большинством сценариев использования.
Я бы хотел добавить кое-что:
- Способ подавления запросов к серверу. Скорее всего, мы не хотим отправлять настоящие запросы API при воспроизведении сеансов.
- Собственный захват событий на уровне окна, например, движения мыши и прокрутки.
- Надлежащий веб-интерфейс для управления записанными кассетами.
- Ползунок для возможности «переходить к» разделам ленты, быстро воспроизводить определенные разделы и т. Д.
Авторы, открывшие значительный и приемлемый PR, получат полные права сотрудничества. Я хочу, чтобы этот проект был твоим не меньше моего. Для сообщества, сообществом.