...
- 觉得Smartbi内置的对话界面不好看，可以使用Smartbi扩展包机制重新开发使用界面
- 需要将对话嵌入到集团内部APP中，可以定制Android/IOS原生界面，或者嵌入自定义H5页面
- 需要嵌入到其他的Web平台中，可以定制H5页面
- 需要嵌入其聊天工具中（如：钉钉、微信等），可以定制符合聊天工具要求的页面
- 其他使用场景，可以咨询Smartbi客服团队，获取支持
2. 逻辑架构
【用户自定义对话界面-逻辑架构图】
说明：
- 用户自定义界面，可以脱离Smartbi，嵌入在第三方平台里面，包括：
- 第三方Web应用
- 第三方Android应用
- 第三方IOS应用
...
参数名 | 说明 | |
接口URL | ||
输入参数 | className | 服务类名 |
methodName | 服务方法名 | |
params | 方法参数，以数组形式传递 | |
返回值 | 返回JSON对象 | |
retCode | 返回码：0 - 正确 | |
result | 方法返回结果，不同方法返回不一样 | |
duration | 执行时间：毫秒 | |
【PostMan - 登录方法测试样例】
4. API说明
...
{
"queryIntention": "sim_table",
"rhetoricalQuestionType": "sim_table",
"desc": "发现多个相似表，请从以下列表进行选择并确认。",
"fuzzyObjects": null,
"alternatives": [
[
"业务主题：主流热销私家车",
"数据模型：hcy热销车"
]
],
"alternativesRealValue": [
[
"THEME.demo2019.CSAC汽车销售分析",
"I8a8aa3ed017bc404c404760a017bc40bc0b90004"
]
],
"userSelected": null,
"otherParams": "{\"system_question\":\"发现多个相似表，请从以下列表进行选择并确认。\",\"id_list\":[[\"THEME.demo2019.CSAC汽车销售分析\",\"I8a8aa3ed017bc404c404760a017bc40bc0b90004\"]],\"fuzzy_entity_list\":[],\"option_list\":[[\"业务主题：主流热销私家车\",\"数据模型：hcy热销车\"]],\"theme_id\":\"\",\"question_ori\":\"去年长安各车型的销售量\"}"
},
【interActionItems--选择表格部分】
【配套页面样子】
- 选择维度、指标、成员样例（fuzzy_entity）
...
本次教程，仅以Web开发作为示例，说明如何调用Smartbi NLA的二次开发API实现自定义对话界面的过程。Android应用和IOS应用基本调用API的方法是一致的，区别只是使用的开发平台不同。开发工程师需要在对应的开发平台上做调整。
5.1 界面设计
【Smartbi V11 中的自然语言对话界面设计】
...
本次教程，我们没有必要做这么复杂的设计，我们以一个简单的设计，来说明Smartbi NLA 二次开发的API是如何使用的。
【Demo开发样例-界面设计】
...
在界面设计中，我们需要将界面按照功能区域，拆分成不同的组件。
【界面组件拆分】
- 组件设计
- 标题栏与输入框比较简单，不需要单独做展示组件
- 查询条件组件
- 结果区组件：
- 表格显示组件（交叉表、清单表）
- 图形显示组件（柱图、线图、饼图、散点图）
- 交互式问答组件（选择模型、选择实体）
...
- Java框架 -- Springboot 2
- 前端框架 -- Vue2 、elementui、 jquery、Echarts
- SmartbiV11 -- 非常重要，本次开发对接的API是基于V11版本提供的
6.2 代码结构说明
【代码结构】
@startuml
前端HTML -> JS_API: 调用前端接口
JS_API --> APIController: 调用服务端接口
APIController --> SmartbiAPI: 调用Java远程接口
SmartbiAPI --> Smartbi_Server: 调用Smartbi接口
@enduml
...
文件 | 说明 | |
后端Java代码 | SmartbiAPI.java | Smartbi api 接口 |
APIController.java | 演示程序，提供给前端的接口，实现内容与SmartbiAPI.java对应 | |
前端JS | api.js | 前端API接口，与APIController.java 对应 |
components/result-view.js | 查询结果展示路由组件 | |
components/query-tip.js | 查询条件展示组件 | |
components/select-entity.js | 选择实体展示组件 | |
components/result/chart-view.js | 图形显示组件 | |
components/result/table-view.js | 表格显示组件 | |
components/result/text-view.js | 文字显示组件 | |
components/result/select-view.js | 模糊实体选择组件 | |
前端HTML | index.html | 页面文件 |
6.3 登录
【登录部分】
<el-form :inline="true" :model="form1" class="demo-form-inline">
<el-form-item label="账号：">
<el-input v-model="form1.user" placeholder="账号"></el-input>
</el-form-item>
<el-form-item label="密码：">
<el-input v-model="form1.password" placeholder="密码" show-password></el-input>
</el-form-item>
<el-form-item label="Smartbi地址：">
<el-input v-model="form1.server" placeholder="Smartbi地址" style="width:350px"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login" :disabled="loginOk">登录</el-button>
</el-form-item>
</el-form>
...
交互式问答，返回的模糊内容，主要在query方法返回的result.interActionItems属性中。详细可以参考“query接口”
6.6.1 选择模糊数据集
【query方法返回result.interActionItems】
<div v-else-if="interactionItem.rhetoricalQuestionType == 'sim_table'">
<div class="bot-answer-message" ref="chatRecord">{{ interactionItem.desc }}</div>
<el-radio-group v-model="userSelected[0]" style="margin-top: 10px">
<div v-for="(item, index) in alternativesItems" :key="index">
<el-radio :label="index">{{ item }}</el-radio>
</div>
</el-radio-group>
<div>
<el-button class="btn" @click="handleClickConfirmSimTable" :disabled="userSelected.length == 0">确定</el-button>
</div>
</div>
【选择模糊数据集界面代码】
【选择模糊数据集界面效果】
...
manualChangeTheme接口的详细定义，请参考对应API部分说明。
6.6.2 选择模糊维度、指标、成员
【query方法返回result.interActionItems】
...
