会话界面越来越受欢迎，特殊是处理看似并不透明的后端系统交易。
例如，我们可以支配谈天机器人以勾引客户完成故障打消过程，并在客户须要帮助时创建票据，而无需客户知道票据创建过程。
这样可以为您的客户供应更直不雅观的体验，提高客户的满意度，同时避免了员工出来故障单分类等事情，提高事情效率。

会话AI可以办理这个问题，但如果您的用户希望能够与您的前端运用程序进行交互呢?例如，用户可以不需确切链接就能浏览网站中的某个页面，或者用户能够在繁芜的产品列表中快组找到自己的目标，而不须要运用繁芜的过滤器。
虽然我们的网络谈天可以嵌入到任何网站上，但它没有这些交互所必需的UI的高下文感知意识。
为了演示我们如何实现这种高下文感知，本文将创建一个大略的舆图运用程序，它带有一个嵌入式机器人，能够移动舆图并放大或缩小:

通过定义向用户界面发送的“非常”办法，许可舆图运用程序拦截、解析并移动舆图、所有这统统都可以在终极显示给用户之前完成。

先决条件

首先，您须要利用SAP Conversational AI轻松构建一个大略的机器人。
如果您不熟习该平台，请转到本教程以理解如何构建一个搞笑的笑话机器人。

您还须要能够在您掌握的某个位置托管我们的Webchat组件。

您还该当至少熟习JavaScript和前端Web开拓根本知识。

教程

首先，我们须要为我们的机器人定义接口，以便能够向我们的前端发送命令和。
这将通过在发送给用户的普通字符串的位置，发送字符串化的JSON工具来完成。
修正过的网络谈天将能够理解这个JSON工具，并能采纳定义的操作，末了向用户显示“”。

这个操作非常大略，我们将发送一个具有“移动”或“缩放”动作的工具，然后发送一条可以向用户显示的。
须要把稳的是，我们须要将此JSON工具作为字符串发送，并且我们假设运用程序将解析它并仅向用户显示“message”的值。

如果我们的动作类型是“move”，舆图须要导航到坐标。
因此，我们将在JSON工具中包含一个位置的坐标。
或者，如果我们的动作是zoom，我们须要知道是放大还是缩小。
为此，我们将包括一个方向表示为1代表in或-1代表out。
定义了这些之后，下面是JSON工具的一些示例:

考虑到这一点，我们可以开始构建我们的机器人。
和往常一样，我们将从定义用户可以表达的意图开始。
在本例中，我们有缩放和移动舆图。

请把稳，我们须要利用实体“direction”标记@zoom中的句子，但在@ move-map中会自动识别“location”。
幸运的是，location gold实体供应了开箱即用的经度和纬度，因此我们能够轻松地将这些通报到前端。
为了得到代表缩放方向的1或-1，我们将利用定制的资源。
利用以下值添加键“name”和“direction”，然后将精确的实体值映射到它们各自的键值。

现在可以识别我们的移动舆图意图，只需一个操作，如果我们的意图匹配的话就会触发：

并须要一个位置：

末了发回一条关照前端：

缩放技能同样可以用相似的办法实现，大家可以大略试一下。

现在机器人已经完成，接下来须要在本地主持网络谈天，以便我们可以对其进行修正以理解“非常”相应。

末了，来构建我们的Web运用程序。
我们将首先为我们的舆图创建一个容器div，编写用于处理舆图交互的脚本（map_controls.js）， 它该当看起来像这样：

为了实现大略运用程序，我们将实现舆图初始化和缩放/移动方法：

一旦谈天机器人成功地添加到运用程序中，我们就能够哀求它移动或放大/缩小，但它仍旧会向我们显示JSON字符串。
为理解决这个问题，须要在Webchat/src/containers/Chat/index.js中添加以下代码。
在窗口工具中搜索名为applicationParse的函数，并在它存在时调用它。

现在我们将在componentWillReceiveProps中调用setState之前调用getApplicationParse。
这将确保我们的运用程序有机会在将任何内容发送回用户之前解析来自机器人的相应。

末了，我们须要实现applicationParse并将其包含在map_controls.js的window工具中。
通过循环，如果它是来自bot的有效操作命令，则实行该操作并只将返回给用户。

现在就可以哀求机器人移动或缩放舆图了，它将发送运用程序可以阐明并采纳行动的。
通过此工具，您可以将谈天机器人集成到任何Web运用程序中，并为用户供应有趣且直不雅观的UI交互办法！

编译出品