技术规格说明书
技术栈
前端
语言
HTML5，CSS3，ECMAScript 6
HTML是网页内容的载体，CSS用于以不同样式表示网页内容，ECMAScript（JavaScript）用于实现网页特殊效果
应用开发框架
React
React 是一个用于构建用户界面的 JAVASCRIPT 库。
运行环境
Chrome 86及以上，Firefox 86及以上
后端
语言
Python 3
现代的深度学习基本都是基于Python及相关的机器学习库（如Pytorch，Tensorflow）进行，相关数据集大多为Pytorch，Tensorflow设计了Dataloader，因此我们选用Python可以更方便地进行数据集的解析。
应用开发框架
Django
Django 最初被设计用于具有快速开发需求的新闻类站点，目的是要实现简单快捷的网站开发。我们选用Django以快速实现一个 实现一个数据库驱动的 Web 应用。
mpld3
mpld3项目将Matplotlib（流行的基于Python的图形库）和D3js（流行的JavaScript库）结合在一起，用于为网页创建交互式数据可视化。
数据库
MySql
我们将在公开网站的服务端使用Mysql作为数据库。
SQLite
对于本地部署端需要用到数据库的场景，我们可能会使用更轻量的SQLite作为数据库。
运行环境
Ubuntu 18.04 LTS
总体架构
子系统
软件总体分为客户端、服务器端、数据集解析引擎和可视化系统四个子系统
- 服务端
- 接受客户端请求并解析；
- 调用解析引擎相关功能得到选中的数据；
- 调用可视化系统创建对应的可视化描述；
- 将结果发送回客户端；
- 客户端
- 接受客户的操作，触发相关请求，将请求传递给服务端；
- 根据服务端返回的可视化数据，向用户呈现可视化结果；
- 数据集解析引擎
- 读取数据集配置文件或调用数据集解析脚本，对数据集进行解析，得到规范的Key-Value对形式的数据单元；
- 可视化系统
- 对外部传入的规范数据单元，根据每个字段的数据类型逐字段进行可视化，组合后返回结果。
系统整体交互的UML顺序图如下：
子系统内部
客户端内部概述
客户端内部分为主页模块，关于模块，设置模块，数据集管理模块，数据集内容浏览模块和数据详情模块。
- 主页模块：用户主页，提供产品特性的简要介绍，并且作为导航引向各个模块；
- 关于模块：开发团队信息和反馈渠道；
- 设置模块：进行个性化的设置功能；
- 数据集管理模块：对数据集进行添加，删除和查找；
- 数据集内容浏览模块：以列表或图库形式显示数据集的内容；
- 数据详情模块：详细查看数据集中某个数据的信息，并给出对应的格式解析
各模块之间的转移关系如下图：
服务端内部概述
服务端主要分为参数解析及请求分发模块，数据集管理模块，数据集内容展示模块，用户管理模块和数据库模块。
- 参数解析及请求分发模块：处理客户端系统发来的HTTP请求，解析参数，验证用户权限并分发给对应的模块处理；
- 用户管理模块：负责用户登录、鉴权等相关内容；
- 数据集管理模块：根据其他模块传来的参数，和数据库模块交互完成数据集信息的管理
- 数据集内容展示模块：根据其他模块传来的参数，与数据集解析引擎和可视化系统交互，完成用户对数据集内容展示的请求；
- 数据库模块：管理服务端系统的相关数据。
各模块在主要功能中交互的UML顺序图如下：
数据集解析引擎内部简介
数据集解析引擎动态加载数据集描述文件，并根据数据集描述文件使用合适的解析方法从数据集中读取数据，整合成较统一的Key-Value对类型暴露给外部。
可视化系统内部简介
借助第三方库mpld3，可视化系统可以将matplotlib的绘图操作序列化后传输给客户端呈现。在可视化系统内部针对不同的数据类型有不同的可视化模块。将按类型调用不同可视化模块返回的数据进行组合，即可获得完整的数据可视化结果。
功能设计
| 模块 | 功能 | 验收标准 |
|---|---|---|
| 主页 | 提供引导、功能入口 | 1. 可以简要展示产品特点 2. 可以导航至数据集管理 3. 可以导航至反馈和设置页面 |
| 管理数据集 | 查看，管理数据集 | 1. 能展示用户已经添加的数据集 2. 能通过选中某个数据集进入数据集查看页面 3. 可以根据用户输入筛选出需要的数据集 4. 能添加、删除、从磁盘删除数据集 |
| 设置页面 | 控制个性化选项 | 1. 用户可以选择是否参加用户体验计划（收集用于改进产品质量和服务的数据） |
| 反馈界面 | 用户提供反馈 | 1. 用户可以向开发人员提交反馈 |
| 数据集内容查看 | 查看数据集具体内容 | 1. 可以展示选中数据集中的数据，通过分页等方式查看 2. 可以根据用户输入对标签进行单选、多选筛选，展示部分数据 3. 可以展示数据的附加信息 4. 可以导航至数据集格式示例 *在Alpha阶段，暂时只支持工作量最大受众也最多的图片方面的数据集 |
| 数据集格式解析 | 形象解析数据集格式 | 1. 可以以十六进制形式展示数据集真实数据，并且标明各部分意义 |
| 用户系统 | 实现用户系统和对应的权限管理 | 1. 用户可以注册、登录 2. 用户可以创建用户组 3. 用户可以在用户组内为其他用户设置相应的权限 |
| 数据集类型拓展 | 将数据集类型拓展到文本、音频等数据集上 | 1. 可以对文本数据集进行可视化展示 2. 可以对音频数据集进行可视化展示 |
| 本地部署端 | 使得用户可以在本地部署端进行数据集可视化的查看，上传 | 1. 提供可以安装的本地部署端 2. 用户可以上传自己的数据集并对其进行可视化 |
| 数据集及其条目筛选 | 使得用户可以通过标签、内容等方式对数据集和其中的条目进行筛选 | 1. 为数据集设置相应的标签，并提供根据标签筛选的功能 2. 可以根据数据集条目的内容进行筛选 3. 可以组合数据集条目的内容满足的条件，进行复杂地筛选 |
| 可视化页面提供数据和可视化的对应 | 使用户可以在可视化界面直观地看到数据和可视化图片的对应关系 | 1. 提供数据和可视化图片的对应关系 |
| 视觉效果优化 | 提供更好的首页展示效果 | 1. 提供一个有良好视觉效果的首页，对项目进行介绍 |
接口设计
参见Swagger文档： https://gitlab.buaaoo.top/2021_alige_homeworks/group_projects/mi_yu_ren_dui/Docs/tree/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3开发目标
代码编写
-
客户端：
- 使用React框架，UI库则使用Material UI；
- Alpha阶段主要实现主页、仪表盘和详情页面，封装为对应模块，便于后续迭代；
- Beta阶段主要实现用户界面、其他可视化界面，得到功能完整，细节完善的软件。
单元测试
- 对于客户端而言，使用测试框架完成脱离场景模块化测试，包括模拟前端操作，模拟后端传输报文等；
- 对于服务端而言，使用
pytest，unitest等框架，并根据所有可能出现的情况划分等价类，构建单元测试样例。
尽可能做到代码全覆盖。
压力测试
采用压测工具模拟网站大量访问，对服务器进行施压，观察一些重点指标（TPS，响应时间，带宽流量，CPU，内存，DB）；
对本地部署端，尝试多次上传大数据集、不支持的数据集，查看是否触发边界条件，有无出现相应提示。
真实测试
项目过程中，主要使用编写测试脚本模拟按钮点击的方式对前端各模块进行真实测试。具体而言，将功能规格说明书中的典型场景按照一定规则转化为对应的测试用例，执行脚本进行测试，若出现预期之外的结果则认为该测试用例未通过测试。此外，在 \(\alpha\) 和 \(\beta\) 阶段发布前，我们将首先发布一个内部版本，并邀请数位用户进行体验和测试，收集其反馈并对较为严重的Bug进行修复。
我们要求软件在真实测试过程中不出现以下严重Bug，若不慎出现则以最高优先级进行定位和修复：
- 频繁的或不知原因的崩溃（包括但不限于闪退、操作系统卡死等）
- 有歧义的文字、图标、按钮、提示信息或乱码
- 不正常加载的页面（包括但不限于CSS崩坏、缩放比例不正常等）
- 错误显示的信息（与团队预期不符）
- 无效或无响应的按钮、链接等
系统文档
项目开发计划：由PM编写，合理安排项目进度、各部分的负责人员、开发中的资源分配。由于本项目的开发阶段只有两周，因此项目开发计划应该精确到天。
功能规格说明书：需要说明产品的典型用户和场景、功能、界面设计、验收标准、概念定义等。
详细设计说明书：对软件的实现细节进行说明，描述每一模块是怎么设计的，对于复杂模块，应说明实现算法、逻辑流程等。包括但不限于前后端接口说明、输入输出设计、安全性设计。
测试文档：在测试前需要编写测试文档，在测试时需要在测试文档中记录测试情况。需要包含测试人员、测试进度、测试环境、测试情况大体描述、测试内容、测试结果等。
