跳到主要内容

前端自研开发指南

概述

本文档旨在帮助前端工程师快速完成 ChatBI 自研前端的开发。你将通过以下三个核心资源，理解业务、获取代码并完成对接。

前提条件

  • 开发环境：Node.js (v16+), Git
  • 权限准备：拥有观远 ChatBI 平台登录权限，并能够正常访问 ChatBI 功能

开发资源与使用指南

资源一：ChatBI 前端示例工程

  • 地址：ChatBI前端示例工程
  • 核心内容：这是一个 ChatBI 前端示例项目，展示了完整的对话式分析 UI。你可以克隆并运行该项目，了解：
    • ChatBI 对话界面的实现方式（如消息列表、输入框等 UI 结构）
    • 项目的整体前端架构与状态管理方式
    • 示例代码如何调用 ChatBI Public API，并处理请求加载、错误和返回结果

资源二：ChatBI Public API 开发指南

  • 地址：ChatBI Public API 开发指南
  • 核心内容：在写代码前，强烈建议先阅读此文档，它将帮你理解：
    • 一次完整的查询流程：从创建或获取会话、发送自然语言问题，到通过轮询获取查询执行结果的完整 API 调用流程。
    • 核心概念模型：解释 ChatBI API 中的重要对象，例如「会话（Session）」「消息（Message）」「主题（Topic）」等。
    • 接口与前端实现的对应关系：说明示例项目中不同功能如何调用 ChatBI Public API。

资源三：ChatBI Public API 接口文档

  • 地址：ChatBI Public API 接口文档
  • 如何使用：这是 ChatBI Public API 的在线接口文档。在开发过程中，你可以在此查阅所有接口的详细定义，例如：
    • 发送消息：查看 /public-api/chat/send-message 接口的请求参数、Header 和响应结构
    • 获取查询结果：了解获取消息或查询结果的相关接口（如消息查询接口）的设计方式
    • 接口分类浏览：文档按「会话」「消息」「知识库」等模块组织，可以按功能模块快速查找接口
    • 接口调试：部分接口支持在线填写参数并直接发起请求进行调试

最小可行开发路径示例

如果希望基于 ChatBI Public API 构建自定义的对话式分析界面，可以按照下面的开发路径快速上手。

  1. 运行示例工程
    克隆示例项目并在本地运行，体验完整的 ChatBI 对话式分析功能。
  2. 阅读开发指南
    了解 ChatBI 的核心概念（如 Session、Message、Topic）以及一次完整查询的 API 调用流程。
  3. 对照 API 文档理解调用方式
    在示例工程中找到对应的 API 调用代码，并结合 API 文档理解接口参数和返回结构。
  4. 开始定制开发
    基于示例工程和 ChatBI Public API，开发符合你业务需求的 UI 组件和业务逻辑。