【BUAA软工】Visual Lab Online——功能规格说明书
| 项目 | 内容 |
|---|---|
| 班级：北航2020春软件工程 | 博客园班级博客 |
| 作业：明确和撰写软件的功能规格说明书 | 功能规格说明书 |
当前版本：v1.0
修订历史：
| 版本号 | 修订时间 | 修订说明 |
|---|---|---|
| v1.0 | 2020/04/03 | 将产品的基础功能明确并给出定义，在Alpha版本阶段使用。 |
计划任务：在v2.0版本中增加产品的特色功能和杀手功能，在Beta版本阶段使用。
目录
1. 引言
1.1 项目简介
- 项目名称：Visual Lab Online
- 一句话描述：面向学生的开箱即用的云编程环境
- 项目面向用户：
- 学习编程/信息学竞赛的初学者
- 不需要复杂IDE功能、希望简洁高效地集中精力编写代码的程序员
- 对云端编程有需求的普通大陆学生
- 项目开发者：北京航空航天大学软件工程课程 “拒绝VisualStudio” 小组
1.2 预期的读者和阅读建议
- 软件开发团队：根据功能规格说明书进行设计和具体编码以实现本文所述的功能
- 软件用户：介绍了软件的主要功能，便于用户了解以发挥软件的最大潜力
1.3 概念说明
| 概念 | 说明 |
|---|---|
| 云编程环境 | 指支持用户在浏览器网页中进行编程、运行等操作的软件系统，其存储和算力由云端服务器而非本地计算机提供。 |
| Notebook | 指一个包含用户编写的代码文件的存储环境，同时包含支持编译、运行、调试、控制台操作的计算环境。是面向用户的项目单位，不同Notebook之间代码不互通。 |
| Kernel | 是Notebook中的概念，指支持编译、运行、调试、控制台操作的计算环境，具有语言特异性，如有C Kernel、C++ Kernel、Python3 Kernel等。 |
| 编辑器 | 指基于Monaco Editor开发的具有文本编辑、代码着色、代码模版与语言支持等功能的代码编辑器，是面向用户的最主要窗格。 |
| Notebook管理面板 | 指一个包含文件管理、文件上传与下载、Notebook导入与导出等功能的窗格，用于管理Notebook的存储环境，位于用户界面左侧。 |
| Kernel操作面板 | 指一个包含编译结果返回、运行输出返回、可操作Kernel的控制台等功能的窗格，用于对Notebook的计算环境即Kernel进行交互操作，位于用户界面底部。 |
2. 典型用户和典型场景
刚刚接触编程的学生
| 名字 | 小蔡 |
|---|---|
| 用户身份 | 刚上大一，开始学“高级语言程序设计”的学生 |
| 用户情况 | 高中没有学过计算机相关知识，对于复杂的计算机概念难以理解。 使用Code::Blocks等软件经常出现问题，浪费不少时间在“为什么不能运行”“为什么不能调试”上。 |
| 用户动机 | 能找一个软件简单地支持自己学习C语言，并把主要精力花在代码本身而不是配置IDE和环境上。 |
| 用户痛点1 | 现有的IDE功能复杂，要么自己用不上，要么找不到该点什么，要么用不顺手。 |
| 用户痛点2 | 使用IDE需要配置环境、工程（项目）等，一不小心配错了跑不起来只能重建工程试试，浪费不少时间。 |
| 典型场景1 | 在练习平台上做作业，打开Visual Lab Online，点击几个按钮，半分钟之内就可以开写，不需要复杂配置，也不需要理解环境。 写代码时的提示得心应手，不会像高级IDE的提示一样，初学者根本看不懂。 |
| 典型场景2 | 要学习这门课，但听说老师建议使用Visual Studio。自己是苹果电脑，不想装个Windows虚拟机，打开Visual Lab Online就可以编程了。 |
| 用户比例 | 50% |
希望有一个轻量编程环境的非计算机专业学生
| 名字 | 小刘 |
|---|---|
| 用户身份 | 非计算机专业学生 |
| 用户情况 | 在专业学习过程中有时候会编程，但不总是编程。有时候只需要跑跑单文件的Python和C程序，不想在自己电脑上装两个大体量的专业IDE，就是想临时改一下、跑一下代码。 |
| 用户动机 | 想花尽可能低的（时间和精力）成本轻量地编辑、运行代码。 比起自己的专业工作，不让编程的过程喧宾夺主。 |
| 用户痛点1 | 就临时改一下、跑几次代码，不希望还得装个Visual Studio和PyCharm。 不装IDE也不行，因为不熟悉编译、运行的命令行操作等。 |
| 用户痛点2 | 希望一个简单的编程环境解决所有问题，降低学习成本。不想了解什么是编译什么是运行等计算机知识，唯一要求是跑出结果。 |
| 典型场景 | 老师给了一份代码/团队项目需要完成一个功能、在百度上搜到一段CSDN代码，希望针对自己的输入跑一下看看、调调参数。 打开Visual Lab Online创建一个Notebook，选择对应的Kernel就可以跑了，节省时间，也不需要额外装软件。 |
| 用户比例 | 25% |
对云端多设备编程有一定需求的用户
| 名字 | 小强 |
|---|---|
| 用户身份 | iPad党，经常带着iPad而不是笔记本去上课/开会/去图书馆学习 |
| 用户情况 | 一般不背着笔记本，只有一个随身的iPad Pro做做笔记，但有时候希望在iPad上能继续自己在电脑上的工作。 |
| 用户动机 | 希望在平板电脑上编程。虽然不是大部分时间都用平板电脑写，但是希望将不带电脑的时间利用起来。电脑和平板上的修改应当自动同步。 |
| 用户痛点1 | 习惯用iPad上课记笔记，想开小差写写编程作业，还偏得又带着笔记本又带着iPad。 |
| 用户痛点2 | 需要紧急修改代码，但是手头没有开发机，只有平板电脑或者轻薄上网本，希望能在非开发机的设备上修改代码。 |
| 典型场景1 | 在课堂上一边用iPad做笔记一边赶编程作业的ddl。 |
| 典型场景2 | 从公司回到家，靠在沙发上，把iPad和键盘夹架在腿上，悠闲地躺着996，顺便写累了还能摸个鱼看看爱奇艺。 |
| 用户比例 | 25% |
3. 用户界面原型设计
3.1 主页
上图为软件的主页（入口）。用户在未登录时访问主页，会提示请登录/注册。在登录后，主页由My Notebooks、Account、Preferences等卡片组成：
- My Notebooks：面向用户的主要页面，负责展示用户创建的/拥有的所有Notebooks，按语言（Kernel）分类呈现。页面中有搜索框，便与快速查找Notebook。用户可以点击已有的Notebook继续编辑，也可以新创建Notebook：
- 创建空白Notebook。用户点击“New”进入简单的Notebook创建向导，选择Kernel语言和版本之后进入空白的Notebook。此时文件系统中没有文件，用户需要手动创建。
- 导入Notebook。用户可以点击“Import...”进入Notebook导入向导，选择Kernel后从本地上传zip、网盘等渠道导入代码文件生成Notebook。
- Account：用户账户管理页面，功能有查看空间配额与剩余容量、订阅收费的会员服务、管理订阅等。
- Preferences：用户全局偏好设置。每个Notebook的偏好设置继承自全局偏好设置，包括默认网盘路径、默认Kernel、编辑器定制设置等。
- Support：用户帮助文档。
用户点击已有的Notebook或创建新Notebook后，进入编程环境对Notebook的代码进行编辑和运行。
3.2 编程环境
总览
上图为Visual Lab Online编程环境的总览图。用户界面布局与Visual Studio Code十分相近，主要分为以下部分：
- 编辑器。Visual Lab Online的编辑器基于Visual Studio Code的Monaco编辑器开发。编辑器的功能为编辑与显示代码，还包括代码高亮、函数签名和变量类型提示、快速代码跳转、代码重构等提示和操作。
- 标签页与常用工具栏。标签页管理器可以像浏览器一样管理各个打开的文件标签页。常用的构建并运行、构建并调试等工具按钮位于常用工具栏中，便与点击使用。
- Notebook管理面板。Notebook管理面板位于界面左侧，包含文件管理、构建设置、文件上传下载、Notebook导入导出、Notebook设置和用户偏好设置等功能。
- Kernel操作面板。Kernel操作面板位于界面底部，包含显示构建输出、显示运行输出并接受标准输入、远程Kernel控制台和调试控制台。
- 菜单栏和状态栏。菜单栏位于界面顶部，状态栏位于界面最底部，分别负责提供完整操作和功能菜单、显示当前Notebook、Kernel与编辑器状态。
Notebook管理面板
用户可以点击最左侧的六个图标来展开相应的管理面板。一次只能有一个在前景活动的面板，默认打开的是文件管理面板。活动的面板图标以强调色显示。
| 文件管理器 | 构建设置 | 上传与导入 |
|---|---|---|
 |
 |
 |
| 以树状结构查看、管理文件和文件系统，支持移动文件、重命名、文件夹展开与折叠等操作。 | 以勾选形式设置参与构建的源代码（Python除外）。选中的文件参与构建，未选中的不参与。 | 弹出对话框的按钮，进一步引导用户上传文件、从网盘下载或GitHub克隆到当前Notebook。 |
| 下载与导出 | 偏好设置 | Notebook设置 |
|---|---|---|
 |
 |
 |
| 弹出对话框的按钮，进一步引导用户下载文件到本地、将当前Notebook存储到网盘或推送到GitHub。 | 用户偏好设置。用户可以在该面板定制编辑器的外观、使用习惯和快捷键等，默认继承自用户全局偏好。 | Notebook设置。用户可以更改Notebook的Kernel、设置自动保存与同步的方式、共享Notebook等。 |
Kernel操作面板
用户可以点击四个标签来展开相应的面板。一次只能有一个在前景活动的面板，默认打开的是文件管理面板。活动的面板图标以强调色显示。
标签分别有“构建输出”、“运行输出”、“Kernel控制台”、“调试控制台”等。
“构建输出”显示代码构建（C/C++编译等）时的错误信息，便于用户修改错误。
“运行输出”为一个标准输入输出交互平台，将程序的标准输出显示，将用户输入重定向至标准输入。
“Kernel控制台”为本Notebook内的远程Kernel的bash终端。
“调试控制台”能支持用户添加监视变量、显示监视变量等调试操作。
菜单
菜单栏位于用户界面的顶端，包含“文件”“编辑”“代码操作”“运行”等菜单。其中“编辑”给出了常用的编辑操作，包括插入多光标等特色功能。“代码操作”给出了代码折叠、代码跳转、重构变量和函数、插入模版和自定义模版等特色功能，能较大地提升编程效率。
4. 主流的用户-软件交互步骤
- 用户用浏览器打开产品主页，注册账户，登录账户，自动导航至主页的“My Notebooks”界面。
- 用户查找其拥有的Notebook，点击继续编辑；或点击“New”按钮进入新建Notebook向导，开始编辑。编辑中可能用到的编辑功能，可以通过菜单栏-编辑、菜单栏-代码操作或在编辑器中使用鼠标右键或快捷键调用。
- （可选）用户可以在Notebook管理面板-Notebook设置中设置自动同步的网盘或GitHub项目。
- 用户在“文件”菜单中新建文件，在编辑器中编辑文件，在Notebook管理面板-文件管理器中管理文件，在Notebook管理面板-构建设置中勾选参与构建的代码文件（C/C++）。
- 用户点击标签和常用工具栏右侧的“运行”按钮或“调试”按钮，开始构建并运行或构建并调试。构建时自动展开构建输出，显示编译过程的输出。运行时自动展开运行输出，提供标准输入输出接口。调试时自动展开调试控制台，用户添加断点、添加监视项等。
- （可选）用户使用Kernel控制台完成更高级的操作，如新建文件、编写脚本、安装Python库等。
5. 系统功能描述及验收验证标准
| 页面/模块/面板 | 操作/功能 | 验收标准 |
|---|---|---|
| 主页 | 未登录状态下访问 | 1. 状态显示未登录，展示登录/注册入口 2. 能引导用户进行登录/注册，之后重新导航到主页 |
| 主页 | 登录状态下访问 | 1. 能展示My Notebooks页面，页面中能按Kernel分类展示用户已有的Notebooks；查找框能通过Notebook名称的子串搜索到Notebook 2. 点击能展示Account页面，页面中能显示当前订阅方案（Free/Premium） 3. 点击能展示Preferences页面，页面中能显示绑定的网盘和GitHub账户设置、编辑器偏好设置等，且能被每个Notebook继承 4. 点击能展示Support页面，显示一些帮助文档 |
| 编程环境-编辑器 | 代码显示 | 1. 能显示所有支持语言的代码高亮，不同的代码成分能以不同格式显示 2. 能显示行号、修改行、断点行等标记，能自动折行，能显示minimap和滚动条 3. 能根据用户偏好设置显示编辑器的定制外观 4. 能显示代码块折叠/展开的按钮，点击可以折叠/展开代码块 |
| 编程环境-编辑器 | 代码编辑 | 1. 支持简单的编辑操作和快捷键操作（拷贝、剪切、粘贴、复制等） 2. 支持按行的编辑操作（拷贝行、剪切行、粘贴行、复制行、移动行等） 3. 支持多光标（多光标的添加、多光标模式的取消、多光标移动、多光标编辑等） 4. 支持单文件的查找和替换、全Notebook的查找和替换，查找模式支持正则表达式、区分大小写等选项 5. 支持上述操作的快捷键 |
| 编程环境-编辑器 | 代码操作 | 1. 支持代码的折叠与展开，支持三种操作逻辑（折叠/展开光标所在的代码块、递归折叠/展开光标所在的代码块、折叠/展开当前文件的全部代码块） 2. 在光标位于一个变量/函数的实现/引用处时，支持跳转到其声明/定义位置 3. 在光标位于一个变量/函数的声明/定义处时，支持列出到其实现/引用位置 4. 支持重命名选中的标识符，并列出待替换的字段位置供用户审查 5. 支持在当前位置插入默认和自定义的Live Templates，并使光标进入Templates模式，按Tab键能够在可操作处（如for循环的变量名、终止条件处）切换，按Esc退出 6. 支持用户自定义Live Templates，并能够正确插入。关闭Notebook重新打开后，自定义Templates不应丢失 |
| Notebook管理面板 | 面板显示 | 1. 能够根据左侧6个工具按钮展示对应的面板，再次点击按钮收起面板 2. 面板能够通过光标调整水平大小 |
| Notebook管理面板 | 文件管理器 | 1. 能够正确显示文件树，并每隔一定时间刷新文件树显示 2. 能添加文件和文件夹，并支持拖拽更改文件/文件夹位置，且同步到云端 3. 能够通过点击打开文件到编辑器中 4. 能够及时显示通过上传和导入功能添加的文件/文件夹 |
| Notebook管理面板 | 构建设置 | 1. 对于需要构建设置的语言的Notebook，能够列出全部源代码（如.c, .h, .cpp）文件的勾选框，并默认全部勾选2. 用户能够通过点击修改勾选状态 3. 勾选状态能够反映在远程Kernel构建命令中 |
| Notebook管理面板 | 上传/下载、导入/导出 | 1. 能够通过点击“上传文件”按钮弹出文件选择浏览器，并将文件上传添加到当前Notebook中 2. 能够通过点击“下载文件”按钮弹出带勾选框的文件树，并将勾选的文件打包通过浏览器下载 3. 能够通过按钮导入/导出Notebook到网盘/GitHub，内容包括当前Notebook的文件系统和Visual Lab Online的Notebook设置文件 4. 文件的上传和导入应及时显示在文件管理器中 |
| Notebook管理面板 | 偏好设置和Notebook设置 | 1. 能够使用户自定义编辑器外观、快捷键等偏好设置，并及时体现在编辑器中 2. 在Notebook设置中，能重新选择Kernel，且及时反映到构建命令中 3. 能更改从用户全局Preferences继承的自动同步链接，能生成并显示Notebook共享链接 4. 关闭Notebook重新打开后，上述设置不应丢失 |
| Kernel操作面板 | 面板显示 | 1. 能够根据顶端4个标签按钮展示对应的面板，再次点击按钮收起面板 2. 面板能够通过光标调整垂直大小 |
| Kernel操作面板 | 构建、运行信息的显示与交互 | 1. 能实时显示构建和运行的输出 2. 在运行输出中能用户输入内容并发送给远程Kernel中正在运行的命令行程序 3. 当内容行数过多后，能显示滚动条 4. 每次构建/运行时对应的窗格能够自动清屏 |
| Kernel操作面板 | Kernel控制台和调试控制台 | 1. 能显示一个bash，文件系统与当前Notebook的文件系统相同 2. 支持tmux、vim等bash程序 3. 在调试控制台中能添加、修改、删除监视变量，调试时能显示其值 4. 在调试控制台中能执行单步、跳过、继续等调试操作 |
| 标签页与常用工具栏 | 标签页管理 | 1. 能显示打开的代码编辑器，能提供点击或快捷键切换标签页 2. 点击关闭按钮或右键关闭能关闭标签页，并保证修改被保存 3. 能够通过按住拖拽更改标签页的排序 |
| 标签页与常用工具栏 | 常用工具 | 1. 能显示构建并运行、构建并调试、分栏、比较等常用工具按钮 2. 按下按钮能执行对应操作 |
| 菜单栏 | 菜单 | 1. 能显示菜单中的选项和对应的快捷键（如果存在） 2. 操作应与按钮、管理面板等其他操作入口触发的操作完全相同 |
| 状态栏 | 显示状态 | 能显示当前Notebook、当前Kernel、当前光标位置、当前语言等信息 |
6. 产品可能的副作用
- 不排除服务器遭到攻击或出现意外，导致云端文件发生丢失等意外改变
- 不排除对接的存储系统（云盘和GitHub等）出现意外，或其提供的接口出现故障，导致文件未及时同步到存储系统中
- 不排除由于Kernel的环境与生产环境不完全相同（如编译器、操作系统、版本差异等），导致用户代码在Visual Lab Online中的运行效果与其他期望的运行环境中不完全相同
