软件工程实践——软件评测作业

这个作业属于哪个课程	2023春季软件工程实践-W班（福州大学）
这个作业要求在哪里	软件工程实践——软件评测作业
这个作业的目标	软件测评、调研、分析
其他参考文献	《构建之法》、邹欣·现代软件工程团队作业-软件分析和用户需求调查

第一部分 调研，评测

一、InsCode

1.1使用体验

1.1.1 介绍和使用软件

• 介绍
• InsCode是一个无需安装的编程、协作和分享社区。从我个人使用感受来看，这是一个可以在线运行项目代码的平台，开发者可以将自己满意的作品展示在该平台上，供他人观摩、学习和交流。开源的代码仓库很多，但是这样可以在线跑代码，直观感受到代码效果的的平台确实让人耳目一新。我也试玩了大佬们发布一些作品，特别有趣。
• 使用软件
• InsCode主要的功能模块有查看和体验他人项目、创建项目、在线修改和演示项目、社区发布作品。

查看他人项目

进入InsCode主页，可以看见热门推荐中一些优秀项目，项目展示卡片显示了该项目被运行的次数、评论数量以及收藏数，标签表明项目类型或使用的语言和技术。

进入项目详情界面，点击播放按钮就可以在线运行项目，如果是web项目可以点击打开网页直接进入项目网页查看。播放框上方的查看文件按钮可以让用户在线查看该项目的代码，右侧Fork按钮可以直接fork作者的仓库到自己的GitCode里，可以对优秀的代码进行学习。

创建项目

InsCode可以用两种方法创建项目：从Github导入项目和利用平台提供的模板创建项目。

利用模板创建项目时可以选择自己需要的模板类型，InsCode官方模板种类包括目前几乎全部的主流语言。

创建了一个模板后我发现右侧的标题、描述、项目标识和可见性，分别对应了项目创建之后在 gitcode 仓库的中的名称、描述、URL和项目可见性。

从Git URL导入的话只需要将仓库地址（公有仓库或已经添加了SSH Key的私有仓库）复制到输入框里，右侧内容同模板方式创建项目。导入之后可以选择该项目编程所用的语言。

在线修改和演示项目

创建项目后，用户可以在点击Run执行项目，如果是web项目会自动在页面右侧打开网页浏览器，是终端项目则右侧自动打开终端。用户可以直接在页面上对代码进行修改。

同时在右上方的菜单栏也可以对代码进行版本控制、查看终端和调试。

社区发布作品

如果对自己的项目和代码十分满意，用户可以在社区中发布自己的作品供大家互相学习、交流和评价。在发布项目的时候可以选择与自己项目相关的标签，方便大家更快地了解你的项目。

1.1.2 优缺点分析

优点：

• InsCode的在线编译器是一个相当强大和便捷的功能，它极大地简化了开发过程中下载安装和环境配置的过程，并且有多种语言和环境供程序员选择，让我们可以随时随地开始编程。在编程的时候和其它本地编译器一样也提供自动补齐提示功能，这一点超过了大部分其它线上编译工具。且代码可以实时预览。
• 在IndCode上创建和修改的项目都会自动同步至 GitCode，它的IDE主动为我们实现了代码安全托管。
• 分享社区中代码的在线运行功能真是太棒了，它让其它用户相当直观地感受到代码的效果，也不需要发布者费心截图、录屏来演示代码。直接展示源码和提供Fork按钮也为用户之间的交流和学习提供了很大便利。
• UI界面简洁、明了、大方。左侧菜单栏功能划分清晰。项目展示模块的UI制作得相当优秀，既简单，功能和信息也一目了然。

缺点：

• 搜索框输入长内容导致搜索框卡住
• 个人主页的发布作品按钮和上方导航栏距离极近，几乎连在一起，视觉体验差。并且很多按钮的文字和矩形没有居中对齐，很令人难受
• 在线IDE的编辑框和预览框不能像开发者工具那样将窗口独立出来拖动，只能调整宽度
• 上传封面功能不能对图片格式和大小进行校验
• 创建项目功能引导性较弱，对新用户不太友好。
• 评论里的楼中楼不论是一条还是多条，都要展开才能看到，较为不便
• 该平台打开弹窗后右侧滚动条会消失，而关闭弹窗时滚动条重新出现，每次都顶部导航栏出现向左跳动又回去的情况，用户体验较差
• 自己创建的异常项目在首页的展示卡上并没有体现这是异常项目的信息。要点开才有弹窗。

1.1.3 改进意见

• 对搜索的输入框长度进行限制或自动截取用户输入的前20词
• 部分UI细节需要优化，例如对齐和组件距离
• 让在线IDE的编辑框和预览框像开发者工具那样可以将窗口独立出来拖动
• 对平台模板概念和用法进行简单解释，至少让新用户知道模板的具体用法
• 对个人主页的封面图片进行大小和格式校验
• 评论楼中楼如果数量少，仅一两条建议可以不用点击更多而展示出来。目前用户量不多，等之后用户数量和活跃度更高的时候，热度较高的评论可以权重高些。
• 滚动条可以写成仅在滚动时出现的形式，或哪怕弹窗在上级也一直存在的形式
• 异常项目的展示卡片上用一些标志提示

1.1.4 采访另一个用户

• 采访对象：被采访者是一位本校20级计算机技术实验班本科生。他经常作为产品经理和原型设计师参与比赛并获得不少荣誉，对创新产品十分感兴趣。
• 聊天记录：

根据该采访对象的评价，InsCode引导页的UI设计十分吸引用户，但有一些实现上的小瑕疵。引导内容详细，易上手对新用户友好，首页展示的项目有趣、吸引用户，但主页布局比较传统（他对UI要求很高哈哈哈）。并且他帮助我发现了一个底栏内容无法稳定出现在界面的BUG！

1.2 BUG描述

BUG评价标准：

BUG等级	等级描述
LOW	一些建议类的缺陷。如界面缺少说明或帮助、界面设计不规范、辅助说明描述不清楚、用户体验较差。
MID	导致某个步骤不能正常执行或期望结果不正确，但不引起严重后果的错误，或数据刷新、操作不便等不影响用户正常功能使用的错误。功能没有达到客户需求，用户体验差的问题。
HIGH	导致整个模块或整个项目奔溃、导致业务流不正确的错误、致命性安全漏洞；造成数据泄漏的安全性问题；用户体验极其糟糕。

1.2.1 BUG（1）

BUG发生时的测试环境：

运行浏览器：Firefox 111.0.1 (64 位)
运行操作系统：Windows 10 家庭中文版 21H2

Bug的可复现性及具体复现步骤:

该BUG出现的前提是用户打开了网页中的某个弹窗，当关闭弹窗时该BUG必然产生。

每次关闭网页弹窗时顶部导航栏都左右跳动一下。

BUG分析：

经观察不难发现出现该问题的原因是网页右侧的滚动条在弹窗出现时消失导致导航栏整体位置右移，而在关闭弹窗是滚动条重新出现导致导航栏再整体左移。

等级：LOW

该问题不会造成严重的情况，只是导航栏的闪烁跳动让用户以为出现了卡顿之类的情况，带来较差的用户体验。

我认为前端实现是可以将滚动条通过写成仅在滚动时出现的形式避免该情况（elementui可以设置），或通过穿透的设置使其实现哪怕弹窗在上级也一直存在的形式。

1.2.2 BUG（2）

BUG发生时的测试环境：

运行浏览器：Firefox 111.0.1 (64 位)
运行操作系统：Windows 10 家庭中文版 21H2

Bug的可复现性及具体复现步骤:

该BUG出现的前提是用户打开了自己项目的在线编译器，想返回时点击了浏览器的回退按钮，此时该BUG必然产生。

当用户想从在线IDE的界面退出时，点击浏览器回退按钮会发现页面内容全部消失，并不会如用户预想的那样返回上级页面，而一直停留在该空白页面，除非刷新页面重回在线IDE的界面或再点击一次回退才会返回上级页面。