【BUAA软工】Visual Lab Online——功能规格说明书

项目	内容
班级：北航2020春软件工程	博客园班级博客
作业：明确和撰写软件的功能规格说明书	功能规格说明书

当前版本：v1.0

修订历史：

版本号	修订时间	修订说明
v1.0	2020/04/03	将产品的基础功能明确并给出定义，在Alpha版本阶段使用。

计划任务：在v2.0版本中增加产品的特色功能和杀手功能，在Beta版本阶段使用。

目录

• 1. 引言
  • 1.1 项目简介
  • 1.2 预期的读者和阅读建议
  • 1.3 概念说明
• 2. 典型用户和典型场景
  • 刚刚接触编程的学生
  • 希望有一个轻量编程环境的非计算机专业学生
  • 对云端多设备编程有一定需求的用户
• 3. 用户界面原型设计
  • 3.1 主页
  • 3.2 编程环境
    • 总览
    • Notebook管理面板
    • Kernel操作面板
    • 菜单
• 4. 主流的用户-软件交互步骤
• 5. 系统功能描述及验收验证标准
• 6. 产品可能的副作用

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. 主流的用户-软件交互步骤

1. 用户用浏览器打开产品主页，注册账户，登录账户，自动导航至主页的“My Notebooks”界面。
2. 用户查找其拥有的Notebook，点击继续编辑；或点击“New”按钮进入新建Notebook向导，开始编辑。编辑中可能用到的编辑功能，可以通过菜单栏-编辑、菜单栏-代码操作或在编辑器中使用鼠标右键或快捷键调用。
3. （可选）用户可以在Notebook管理面板-Notebook设置中设置自动同步的网盘或GitHub项目。
4. 用户在“文件”菜单中新建文件，在编辑器中编辑文件，在Notebook管理面板-文件管理器中管理文件，在Notebook管理面板-构建设置中勾选参与构建的代码文件（C/C++）。
5. 用户点击标签和常用工具栏右侧的“运行”按钮或“调试”按钮，开始构建并运行或构建并调试。构建时自动展开构建输出，显示编译过程的输出。运行时自动展开运行输出，提供标准输入输出接口。调试时自动展开调试控制台，用户添加断点、添加监视项等。
6. （可选）用户使用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中的运行效果与其他期望的运行环境中不完全相同