Автор оригинала: FreeCodeCamp Community Member.
Пол Пинард
В этой статье мы узнаем, как интегрировать SAP Conversational AI Chatbot в любое из ваших веб-приложений и предоставлять пользователям веселый и интуитивный способ взаимодействия с пользовательским интерфейсом!
Разговорные интерфейсы набирают популярность, особенно для транзакции с, казалось бы, непрозрачные бэкэндские системы. Например, мы можем развернуть Chatbot, чтобы пройти клиента посредством процесса устранения неполадок и создать билет, если им требуется дополнительная помощь; Все без клиента необходимо знать процесс создания билета.
Это позволяет для более интуитивного опыта для вашего клиента, увеличивая удовлетворенность клиентов, а также повышая эффективность, освобождая сотрудников от обработки классификации и маршрутизации билетов.
Разговор AI может обрабатывать это из коробки, но что, если ваши пользователи хотят иметь возможность взаимодействовать с приложением переднего конца?
Например, для вашего пользователя может быть приятно ориентироваться на определенную страницу на вашем сайте, без необходимости найти точную ссылку. Или позвольте вашему пользователю применить сложный фильтр в список продуктов без нажатия вокруг меню.
Хотя наш WebChat может быть вставлен на любой веб-сайт, он не имеет контекстуальной осведомленности о UI, необходимых для таких видов взаимодействий. Чтобы продемонстрировать, как мы можем достичь этой контекстной осведомленности, мы создадим простое приложение MAP с встроенным ботом, который имеет возможность перемещать карту и увеличить или выйти:
Ресурсы
Создайте свой первый чатбот на SAP Consveration AI
Узнайте, как самостоять WebChat
Google Maps APIS.
Map Mover Bot.
Frontend Исходный код приложения
Окончательная карта приложения
Предпосылки
- Во-первых, вам нужно будет удобное построение простого бота, используя SAP Consveration AI Отказ Если вы не знакомы с платформой, отправляйтесь на Это руководство Чтобы узнать, как построить веселая шутка бота.
- Вам также нужно будет иметь возможность разместить наш компонент WebChat где-то, где вы контролируете. Наше Github есть вся информация, чтобы начать вас.
- Также ожидается, что вы по крайней мере знакомы с базовыми веб-сайтами JavaScript и Front End.
Руководство
Для начала нам нужно будет определить интерфейс для нашего бота, чтобы иметь возможность отправлять команды и сообщения на наш передний конец. Это будет достигнуто, отправив строгий объект JSON на месте обычной строки сообщения, мы вообще отправляем пользователю. Наш модифицированный WebChat сможет понять этот объект JSON, принять определенное действие и, наконец, отобразить «сообщение» для пользователя.
Это может быть достигнуто довольно просто; Мы отправим объект с действием либо « переместить » или « Zoom », а затем сообщение, которое мы можем показать пользователю. Обратите внимание, что мы пройдем этот объект JSON как строку, и наше предположение о том, что приложение будет разобрать его и отображать только значение «сообщения» для пользователя.
{ "action": "move" || "zoom", "message": "This will be displayed to the user" }Если наш тип действия: « Переместить », карта понадобится координаты для навигации к. Итак, мы включаем координаты местоположения в нашем объекте JSON. В качестве альтернативы, если наше действие – zoom нам нужно будет знать, до Увеличить или OUT Отказ Для этого мы включаем направление, представленное как 1 для или A -1. С этим определенным, вот несколько примеров того, как можно выглядеть наши объекты JSON:
{"action": "move", "location": { "lat": -8.3405389, "Ing": 115.0919509 "message": "Going to Bali, Indonesia!" }{"action": "zoom" "direction": 1, "message": "Zooming in!"}С учетом того, мы можем начать строить наш бот. Как всегда, мы начнем с определения намерений наш пользователь мог сказать. В этом случае у нас есть zoom и move-map Отказ
Обратите внимание, что нам нужно будет пометить предложения в @zoom С помощью объекта «Направление», но «местоположение» автоматически распознается в @ move-map Отказ К счастью для нас, объект золота местоположения поставляется с долготой и широты из коробки, поэтому мы сможем легко передавать их на передний конец.
Чтобы получить 1 или -1, который представляет наше направление масштабирования, мы будем использовать пользовательские обогащения. Мы добавим ключи «имя» и «направление» со следующими значениями. Затем сопоставьте правильные значения сущности в соответствующие значения ключевых элементов.
Теперь, когда мы можем распознать нашу намерение MAP-MAP, нам просто нужен навык, который срабатывает, если наш намерение соответствует:
И требует местоположения:
И, наконец, отправляет сообщение обратно, рассказывая передней частью, куда идти:
Уменьшение масштабирования может быть реализовано почти таким же образом; Я призываю вас попробовать его для себя!
Теперь, когда наш бот сделан, нам нужно будет провести вебзачатую локально, чтобы мы могли изменить его, чтобы понять наши «необычные» ответы. Если вы не знакомы с процессом самообеспечения, проверьте этот гиттуб Отказ
Наконец, пришло время построить наше веб-приложение. Мы начнем с включения контейнера Div для нашей карты, скрипт мы напишем, чтобы обработать взаимодействие на карте (map_controls.js), необходимый скрипт, как описано в Это руководство от Google и тег скрипта указывает на наш локально размещенный бот. Это должно выглядеть что-то подобное:
Чтобы завершить наше простое приложение, мы будем реализовать нашу карту инициализацию и масштабирование/Move методов:
function initMap () { window.map = new google.maps.Map(document.getElementById('map'), { // OPTIONS center: {lat: -34.397, lng: 150.644}, zoom: 8, zoomControl: false, streetViewControl: false, mapTypeControl: false, rotateControl: false, scaleControl: false, fullscreenControl: false });} const zoom = (direction) => { window.map.setZoom(window.map.getZoom() + direction);}const setCenter = (lat, lng) => { window.map.setCenter({lat: lat, lng: lng});}Как только у нас будет добавлен чатбот в наше приложение, мы сможем просить его перемещаться или увеличить/выходить, но он все равно будет просто отображать эту уродливую json string для нас. Чтобы решить, что мы добавим следующий код в WebChat/Src/Contaners/Chat/index.js. Это будет искать объект Window для функции, называемого applyparse и вызывать его, если она существует.
const getApplicationParse = messages => { return new Promise(resolve => { if (!window.webchatMethods || !window.webchatMethods.applicationParse) { return resolve() } // so that we process the message in all cases setTimeout(resolve, MAX_GET_MEMORY_TIME) try { const applicationParseResponse = window.webchatMethods.applicationParse(messages) if (!applicationParseResponse) { return resolve() } if (applicationParseResponse.then && typeof applicationParseResponse.then === 'function') { // the function returned a Promise applicationParseResponse .then(applicationParse => resolve()) .catch(err => { console.error(FAILED_TO_GET_MEMORY) console.error(err) resolve() }) } else { resolve() } } catch (err) { console.error(FAILED_TO_GET_MEMORY) console.error(err) resolve() } })}Теперь мы позвоним GetAPlicationParse перед вызовом для SetState в ComponentWillreceiveProops. Это гарантирует, что наше приложение имеет возможность разбирать ответ от бота до того, как все будет отправлено пользователю.
componentWillReceiveProps(nextProps) { const { messages, show } = nextProps if (messages !== this.state.messages) { getApplicationParse(messages) this.setState({ messages }, () => { const { getLastMessage } = this.props if (getLastMessage) { getLastMessage(messages[messages.length - 1]) } }) } if (show && show !== this.props.show && !this.props.sendMessagePromise && !this._isPolling) { this.doMessagesPolling() }}Наконец, нам нужно реализовать applientarse и включать его в окно объекта из map_controls.js. Здесь мы будем зацикливаться через наши сообщения, и если это допустимая команда действий от бота, возьмите действие и верните только сообщение обратно пользователю.
window.webchatMethods = { applicationParse: (messages) => { messages.map(message => { try { var obj = JSON.parse(message.attachment.content); console.log(obj); if(obj !== undefined && obj.action == 'zoom' && typeof obj.direction === "number"){ message.attachment.content = obj.message.toString(); zoom(obj.direction); } else if (obj !== undefined && obj.action == 'move' && typeof obj.location.lat === "number" && typeof obj.location.lng === "number") { message.attachment.content = obj.message.toString(); setCenter(obj.location.lat, obj.location.lng); } } catch (err) { // Invalid JSON - treat it as a regular message and pass it back to UI as is } message }) return messages; }}Теперь вы можете попросить вашего бота переместить или увеличить карту, и она отправит сообщение о том, что приложение может интерпретировать и действовать.
С помощью этого инструмента на вашем ремне инструментов вы теперь можете интегрировать чатбот в любое из ваших веб-приложений!
Первоначально опубликовано SAP разговорчивый ай блог .