В предыдущем рассказе Знакомство с API-интерфейсами цепей были описаны различные API-интерфейсы цепей, а затем было рассмотрено клиентское веб-приложение, которое использует SDK для цепей JavaScript для общения.
Эта история расширяет возможности приложения IMDb Collaboration с помощью серверного бота. Исходный код доступен на github, а новое живое приложение - здесь.
Таким образом, улучшения:
- Поиск по базе данных фильмов, а не по четырем предустановленным шоу
- Показать сообщение для неаутентифицированных пользователей
- Динамически создавать соответствующий диалог Цепи
- Динамически добавлять пользователя в беседу
- Используйте webpack 2 для сборки и упаковки
- Удалите
lit-html-element
зависимость и используйтеlit-html
напрямую - … И перепишите большую часть клиентского приложения
Для первых 4 пунктов, указанных выше, используется серверное приложение Node.js. Это серверное приложение служит двум основным целям:
- Прокси-запросы к API фильмов (OMDb API) для преодоления ограничений OMDb API, не поддерживающих SSL.
- 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/:id
endpoints
Эти конечные точки используются для поиска фильмов и получения сведений о фильмах из 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 и упаковки для производства.
Я планирую написать следующий пост:
- Специальные вызовы аудио / видеоконференцсвязи для пользователей, находящихся на одной странице фильма
- Улучшите бота с помощью ИИ, чтобы отвечать на простые вопросы в чате
- Показывать аналитику, какие фильмы ищут чаще всего, больше всего комментариев и т. Д.
Сообщите мне в комментариях, какие из этих улучшений вы хотели бы увидеть в следующей статье или какие-либо другие улучшения, которые вы хотели бы увидеть.