Представляем 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, получат полные права сотрудничества. Я хочу, чтобы этот проект был твоим не меньше моего. Для сообщества, сообществом.

Проверьте это сейчас на GitHub