项目 | 内容 |
---|---|
班级:北航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. 主流的用户-软件交互步骤
- 用户用浏览器打开产品主页,注册账户,登录账户,自动导航至主页的“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中的运行效果与其他期望的运行环境中不完全相同