В предыдущем рассказе Знакомство с API-интерфейсами цепей были описаны различные API-интерфейсы цепей, а затем было рассмотрено клиентское веб-приложение, которое использует SDK для цепей JavaScript для общения.

Эта история расширяет возможности приложения IMDb Collaboration с помощью серверного бота. Исходный код доступен на github, а новое живое приложение - здесь.

Таким образом, улучшения:

  • Поиск по базе данных фильмов, а не по четырем предустановленным шоу
  • Показать сообщение для неаутентифицированных пользователей
  • Динамически создавать соответствующий диалог Цепи
  • Динамически добавлять пользователя в беседу
  • Используйте webpack 2 для сборки и упаковки
  • Удалите lit-html-element зависимость и используйте lit-html напрямую
  • … И перепишите большую часть клиентского приложения

Для первых 4 пунктов, указанных выше, используется серверное приложение Node.js. Это серверное приложение служит двум основным целям:

  1. Прокси-запросы к API фильмов (OMDb API) для преодоления ограничений OMDb API, не поддерживающих SSL.
  2. Circuit Bot для
    - Поиск соответствующего разговора
    - Создание разговора
    - Добавление пользователя в качестве участника разговора
    - Получение сообщений для неаутентифицированных пользователей

Поток приложений

Поиск фильмов и телешоу осуществляется с помощью нового веб-компонента imdb-search. Этот компонент показывает поле ввода с результатами поиска. Запросы отправляются в серверное приложение и передаются через прокси в API OMDb.

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

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

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

Пользователям, не прошедшим проверку подлинности, предлагается пройти проверку подлинности через OAuth 2.0 и принять разрешения при попытке опубликовать сообщение.

Пользователи, которые недавно вошли в систему, входят в систему автоматически.

Бот-приложение

Как упоминалось выше, бот-приложение на стороне сервера написано на Node.js и использует Circuit Node.js SDK в качестве бота. Бот является участником любого разговора IMDb (фактически даже создателем) и, следовательно, может добавлять других участников в разговор.

Бот предоставляет следующие конечные точки.

/find/:imdb конечная точка

Эта конечная точка самая сложная. Он использует startBasicSearch API с CONVERSATION областью действия, чтобы найти беседу по названию. Цепочки названы IMDB: <imdb ID>. Результаты поиска вызываются событиями basicSearchResults и searchStatus.

/join/:conv/:user конечная точка

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

/posts/:conv конечная точка

Эта конечная точка получает 50 последних сообщений беседы. Пейджинг поддерживается Circuit SDK, но для простоты здесь не реализован.

Сообщения содержат только creatorId, а не полный объект пользователя. Приведенный ниже код определяет уникальных создателей (авторов сообщений) и использует getUsersById API для получения их пользовательских объектов. Клиентскому приложению нужны только атрибуты avatar и displayName, поэтому эти атрибуты копируются в объекты сообщения.

/user/:userId конечная точка

Эта конечная точка получает объект пользователя по его userId. Он используется, когда кто-то добавляет новое сообщение на той же странице. Событие Circuit SDK itemAdded содержит сообщение только с CreatorId, а не пользовательский объект. Таким образом, используя эту конечную точку, клиент может получить avatar и displayName.

Переменная users представляет собой кеш пользовательских объектов и снижает потребность в выборке пользователя из Circuit. В идеале это приложение должно периодически проверять, изменились ли аватар или отображаемое имя кэшированных пользователей.

/search/:query и /details/:idendpoints

Эти конечные точки используются для поиска фильмов и получения сведений о фильмах из API OMDb. Конечные точки являются прямыми и не связаны с Circuit SDK, поэтому здесь не показаны подробно.

Обновленное клиентское приложение

Веб-компоненты app, imdb-header и circuit-chat остались, но в основном переписаны для использования новых конечных точек, предоставляемых ботом. Они также больше не зависят от lit-html-element, а вместо этого напрямую используют lit-html’s lit-extended.

Был добавлен новый компонент imdb-search для отображения поля ввода для поиска фильмов и отображения результатов. Этот компонент не использует Circuit SDK, поэтому мы не будем вдаваться в подробности.

Сборка и упаковка с помощью webpack

Webpack - это сборщик модулей, но он способен на гораздо большее. В этом приложении он используется для переноса кода ES6 в старые браузеры с использованием babel, поиска зависимостей, объединения файлов JavaScript, использования горячей замены модуля и webpack-dev-server и упаковки для производства.

Я планирую написать следующий пост:

  1. Специальные вызовы аудио / видеоконференцсвязи для пользователей, находящихся на одной странице фильма
  2. Улучшите бота с помощью ИИ, чтобы отвечать на простые вопросы в чате
  3. Показывать аналитику, какие фильмы ищут чаще всего, больше всего комментариев и т. Д.

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