这是由两部分组成的教程的第一部分。
非常简短的摘要
这篇文章展示了在UI5中为聊天机器人构建自定义用户界面的步骤。chatbot可以添加到已经部署在SAP云平台上的现有UI5应用程序中。SAP Conversational AI API用于处理用户输入、检测意图并根据我们创建的技能给出响应。最后，使用片段视图显示用户和聊天机器人之间的聊天。还包括语音到文本等功能，以增强用户体验。
目标受众
您希望为聊天机器人创建自己的UI。
您有一个UI5 web应用程序。
您希望能够添加SAP Conversational AI平台上当前不存在的新的非本机功能。
您不希望使用默认的web聊天SAP提供的UI。（此webchat用户界面可在您的SAP Conversational AI平台帐户的此视图中找到。
关于此帖子
我想将语音控制添加到我的聊天机器人中，我正试图将其集成到现有的SAP云平台应用程序中。在撰写本文时，语音控制并不是SAP会话人工智能的本机功能。我需要为聊天机器人创建自己的用户界面，这样我就可以添加一个麦克风按钮来激活语音到文本功能https://cai.tools.sap/blog/how-to-integrate-sap-conversational-ai-chatbot-to-sap-ui5/https://blogs.sap.com/2019/04/05/integration-of-speech-enabled-chatbot-with-sap-fiori/
第一个是关于通过Google DialogFlow自然过程引擎进行语音识别。
第二个是关于ChatBot与Fiori应用程序的集成。感谢那些博客作者Manisha Madhwani和Rishikesh Aarsh的创意，因为他们启发了我。
我找到了chatbot集成教程和其他一些SAP Conversational AI博客文章，还有一些关于如何添加自定义功能的文章，但没有一个地方能帮到我。我不得不从几种不同的资源中收集信息。这篇文章不是定制chatbot UI或非本机chatbot功能的灵丹妙药，而是一个全面的入门点，适合任何想开始开发具有非本机功能（如语音激活）的chatbot UI的人。
前提条件：
您熟悉API用法和Ajax调用。
您在SAP Conversational中有一个帐户AI.
您使用的是谷歌Chrome网络浏览器（语音识别仅适用于Chrome）
您将学到的知识：
本文第一部分
获取SAP Conversational AI开发者代币向SAP会话AI端点发出获取请求创建欢迎信息在你的Fiori应用程序中创建一个弹出片段，用户可以点击打开机器人
这篇文章的第2部分
添加自定义CSS来修改chatbot容器的界面创建SAP会话人工智能的基本技能实现一个按钮弹出，以激活您的麦克风和语音文本转换。向聊天机器人添加回退技能，以便在机器人不清楚输入时，机器人会说"我不明白"在弹出框中添加"机器人正在键入状态"
什么是聊天机器人以及您需要它的原因
聊天机器人可以加快用户交互，提高网站的保留率并增强用户体验。它可以提高用户的导航效率，帮助他们在网站上找到他们想要的东西。
什么是SAP会话人工智能？
SAP Conversational AI被SAP收购并整合到我们的系统中。它的前身是重铸.ai目前，淘客cms，SAP员工可以在撰写本文时免费创建一个帐户，并通过访问此处开始使用他们的APIhttps://cai.tools.sap/。
如何遵循本帖中的步骤？
我将给出函数的片段。在UI5应用程序中，可以将这些功能添加到根组件中，而不会影响应用程序中的现有功能。在您的应用程序中，根组件可能是这样的，这取决于您是扩展控制器还是从头开始创建控制器。
学习#1获取SAP会话AI开发者令牌
我们需要在获取请求代码中包含开发者和请求令牌。令牌可以在SAP Conversational AI平台中找到，如下所示：
学习#2向SAP Conversational AI端点发出获取请求
我们将使用从步骤1获得的开发人员令牌向SAP Conversational AI API发出请求。在这一步中，什么是数据中台，我们必须在视图呈现完成后初始化bot的实例。
我有一个组件名为"mydomain.myappname.mycomponentname"在我的BaseController.extend扩展(). 当您使用这些代码片段时，请确保您的应用程序名称替换此占位符。
学习#3：打开弹出窗口时创建欢迎消息
我们需要一个功能来分析用户输入，人工智能技术发展，创建消息元素，用消息元素响应用户，返利啦，并在我们的UI上显示消息。
首先，淘客app原生，我们添加了createMessage函数。
有一个tweeter琰标志，它构建了一个查询字符串，从Twitter API获取tweets。Tweeter功能超出了本文的范围，现在可以被视为占位符。
一旦我们完成解析和响应，我们就为用户创建一个生成欢迎消息的函数。
一旦我们实现了前面的函数，发送欢迎消息是通过在openBot函数中使用欢迎消息调用createMessage函数来实现的。确保您在openBot功能中调用以下行
当您的聊天机器人打开时，这将发送欢迎消息。
学习#4:在您的Fiori应用程序中创建一个弹出窗口片段，以便用户可以单击打开机器人
