《带UI的小初高数学学习软件》项目总结

1.概述

本文为我与张楠同学一同合作的软件工程结对项目《带UI的小初高数学学习软件》的总结。项目使用了html,css,javascript作为前端，Bootstrap框架以适配响应式布局和不同尺寸的设备界面，IDE为VScode。Flask框架作为后端，并且部署到云服务器的方式来实现。服务器和短信验证码API均来自阿里云。

2.需求分析

首先进行需求分析，总结用户功能需求：

l  图形化界面

l  登录界面输入用户和密码并根据已有账户验证正确性

l  题目难度分为小学、初中、高中，其对应题目要求按个人编程题目要求

l  界面输入数字生成对应数量对应难度的题目，并且按照顺序递送给用户。

|  通过选择页面可切换生成题目难度

l  用户可以通过手机号接受短信验证码注册

l  用户可以在登陆的状态下修改密码

用户非功能需求：

l  在服务器端部署代码使得网站可以直接访问

l  对于用户的登陆检测，防止用户输错网址错误进入功能

l  界面设计简洁友好

l  界面输出相应的正确信息

l  用户交互流畅

l  用户可以通过一些按钮修改已做出的选项

l  用户可以进行重新测试，返回选择和退出系统的选项

l  每题四个选项，一张卷子题目不能重复

3.项目总结

3.1 项目界面

 3.2 项目功能逻辑

上图是各个功能之间的关系，可以看到整个功能的逻辑类似于一个带有循环的单向流程，并且对于登录的检测贯穿始终，结合重定向来预防用户不小心输入了错误的域名导致体验不佳。

3.3 后端的各功能模块

DataProcess

对于本地的账户文件进行I/O操作并且提供信息给其他的模块，向用户发送短信验证码

GenerateProgram

这是之前个人项目的文件，其为生成题目的功能，将会在复用的部分详细讲解如何与其他功能相结合。

Question

生成返回给用户的问题和选项，同时返回给后端答案，并且对用户的答题进行处理。

Receive

与前端，其他模块相结合，后端的核心文件。对于不同的页面构建了不同的函数对于用户的操作进行了处理并与本地文件，远程请求进行交互，最后把用户需要的信息整合进html的模板里返回给前端并存储信息到服务器。

3.4 后端的架构

后端的核心是使用了Flask框架的服务器代码，其依赖于DataProcess和Question文件为其提供Web网站应用需要的数据，之后Receive文件（也就是服务器代码文件）提供给前端。在这个过程中，生成题目由GenerateProgram文件的内容构成，得到DataProcess的数据后，其很好的复用了之前的个人项目中的代码，具体将会在代码复用的部分讲解。生成后通过包装，在Question模块组合成用于提供给服务器的形式。

后端处理的风格是一个多管道-过滤器风格和层次风格的异构组合，将各个功能模块很好的分开了并且能够高效的去处理数据，结构清晰，在代码调试的时候方便快捷。

3.5前端的各功能模块

Index

开始使用按钮，点击可进入SignIn页。

SignIn

登录按钮，输入用户名（手机号）和密码后可登录，错误时进行提示。注册按钮，跳转SignUp页。

signup

发送验证码按钮，输入合法手机号和密码并二次确认密码后可发送验证码。验证码发送后有60s冷却时间。注册按钮，验证账号合法性和验证码正确后可注册密码。

ChoiceSelection

单选框选择难度并且输入框输入题目数量。开始做题按钮，点击后由后端返回一系列题目页面以供完成。右上角修改密码超链接，点击转到修改页面。

ChangePassword

输入原密码和新密码并二次确认后可更改已登录账户密码。更改成功后跳转回到登陆页面，更改失败会发送提示。

Exam

四个单选框为待选答案，四选一。提交答案按钮，可提交本题答案。上一题按钮，可回到上一题重新选择。

Grat

展示得分。重做按钮，以当前难度和题目数量重做一张卷子。重选难度按钮，回到选择难度界面。退出系统按钮，回到欢迎页。

3.6 前端的架构

4.经验总结

4.1 项目复用经验

个人项目中在最核心的生成题目部分，我采用了GenerateQuestion类作为一个账户的生成载体.GenerateQuestion类具有GenerateQuestions函数与GenerateQuestionsForUser两个成员函数，并且具有账户姓名，生成题目数量，生成题目类型，操作符的成员，在一个类中集成了所有生成题目和之后操作需要的信息。

因此在结对项目中我认为可以很好的复用这个核心函数，于是我将其作为生成问题的整套逻辑（包括问题，答案，选项）的一个部分，其结果作为处理的中间过程与一部分的结果连接到生成问题的函数。也就是其结果作为Question类的函数参数与成员。这样生成题目的部分只需要将问题的答案计算出来，并且生成其他的选项就可以了。

同时在文件I/O中，充分复用了之前对于账户信息的函数，将其核心的函数进行修改，就可以实现包括用户账户添加，检查账户与密码，修改密码等操作了。

总而言之，复用的过程需要抽取出之前的项目和现在的项目的相同或是相似的功能部分，然后将其包装或是改写成为需要的样式，可以大大减少新项目的工作量。

4.2 结对编程的经验

在结对编程中我学到的经验大致可以概括为以下的几点:

项目的分工

当需要对一个项目进行完成时，项目的分工是非常重要的，我和张楠同学在项目的一开始就把我们的职责划分的很清晰，张楠同学负责前端，我负责后端，这样在开发过程中就不会出现开发范围的重叠和没有覆盖到。

需求的认知

对于需求的认知对于完成一个多人合作的项目来说是非常重要并且是不可或缺的，我们将需求一同讨论并且将其具象化为能够被我们都认可的形式，之后才动手开始做，这样避免了需求不清晰带来的双方认知偏差的开发成本陡然增高。

合作的沟通

在开发途中沟通是非常重要的，一个项目能否有很好的沟通的水平可以很大程度上决定项目的成败。

4.3 结对编程的教训

没有正确认知项目的工程量

在项目开始的时候我并没有正确的认知项目后端的工程量，以为很简单就能够完成，但是当我真正的去学习Flask框架并且去实现功能的时候，我发现工程量是要大于我所估计的，因此在时间上陷入了一些不利，在之后的项目中我应该更多地去练习自己对于工程量的估计能力。

实现方法的选择纠结

一个功能可以被多个实现方法来完成，但是我在一开始并没有很好的去思考哪一种方法是对于项目来说最适合并且更容易去debug或增加新的feature。因此在debug和与其他方法进行交互的时候造成了不小的麻烦，因此我必须得重新构建了方法，才能和其他的方法进行更好的交互。在之后的项目中应该先思考方法和模块的交互关系，先决定一个合适的实现方法再去写代码。

 5.总结

最后能够做出一个功能实现完备，界面清晰的网站并且能够部署到服务器上是对于我来说很开心的体验，与张楠同学合作的非常愉快。