2024秋软工实践——现场编程作业
| 作业所属课程 | https://edu.cnblogs.com/campus/fzu/SE2024 |
|---|---|
| 作业要求 | https://edu.cnblogs.com/campus/fzu/SE2024/homework/13302 |
| 作业的目标 | 实现一个记账网站，能够提供基础记账、查看数据、收支统计等功能 |
| 团队名称 | 旺仔水饺 |
| 102201140 黎曼 | 102201138 黄俊瑶 |
| 102201127 罗永辉 | 102201130 郑哲浩 |
| 102202144 傅钰 | 102202147 赖越 |
| 172209028 伊晓 | 052101418 陈宇杰 |
| 102202154 王梓联 | 102201125 林智烽 |
1.组员职责分工
| 姓名 | 任务 |
|---|---|
| 郑哲浩 | 修改账单的路由以及后端文件处理部分的代码 |
| 陈宇杰 | 筛选条件和统计的路由 |
| 林智烽 | 删除账单的路由 |
| 伊晓 | 增加账单的路由 |
| 王梓联 | 获取所有记录和获取指定ID记录的路由 |
| 黄俊瑶 | 首页、导航栏以及添加账单记录、登录注册的vue组件 |
| 赖越 | 查看账单vue组件 |
| 罗永辉 | 图表vue组件 |
| 傅钰 | 负责收入统计分析vue组件页面美化 |
| 黎曼 | 负责分工、支出统计分析vue组件、撰写博客 |
2.程序运行环境
前端
-
VScode
-
python 3.9 flask框架 后改为node.js
3.软件运行截图和视频
根据类型进行筛选账单：
4.软件关键代码
导航栏实现路由跳转
实现账单分类：
5.软件亮点
登录注册功能
我们的网页能够实现网页登录功能；
账单编辑查看
对账单能够进行修改和查看详情：
数据统计分析
对账单进行简单的统计分析：
6.收获事件
这次的现场团队编程对我们来说是一次比较大的挑战，以下是我们认为收获最大的三个事件：
6.1 接口设计与定义的讨论补救
由于项目初期讨论不足，导致前后端的接口设计不够明确，埋下了后续 Bug 的隐患。后期我们投入大量时间重新审视接口定义，梳理数据格式、字段命名和响应结构，甚至一度引发争论。经过反复沟通，我们决定使用统一的接口管理工具来规范接口定义，并制定了统一的命名和数据格式标准。这次补救让我们深刻意识到，充分的初期讨论和标准化接口管理工具对避免项目混乱至关重要。
6.2 前后端交互 Bug 排查与修复
由于前期接口定义不清晰，导致前后端数据交互出现频繁的 Bug，尤其在数据格式和结构方面不一致。
我们花费大量时间逐步排查、分析日志、进行数据验证，最终找出问题所在。这一过程强化了我们对调试流程和工具的掌握，也让我们明白，在开发前期进行全面、准确的接口定义是减少交互错误的关键。
6.3 代码复审与优化
为了解决前期问题带来的代码冗余和结构混乱，我们在后期进行了一次彻底的代码复审。团队花费大量时间对代码结构、命名规范和功能实现进行了详尽讨论和优化。复审不仅纠正了潜在 Bug，还大幅提升了代码的可读性和性能。这次复审让我们认识到，代码的清晰结构和规范的编码习惯可以显著提升开发质量，并为后续的团队项目提供了宝贵的经验。
7.组员编程体验
郑哲浩：
这次实验我让我知道了合作的重要性，一个人能完成好的任务分发给多个人不一定能做得很好，同时我也理解了规范的重要性，编程一开始应该先定好规范，否则写一半时发现问题代码很难修改，同时规范也能更好的指导如何合作。
前后端的协同也很重要，前后端的对接应该在代码刚开始时就有个demo或者样例能够指导对接。同时后端应该要学会有自己测试代码的手段，遇到问题时应该要能迅速定位是前端还是后端的问题。
陈宇杰：
问题
由于我们组前后端一开始交流不够紧密，没有商讨并规定交互的数据格式，导致接口文档不完整不规范。后来要在开发阶段增加一个type类型导致代码多处需要变动，耗费了不少时间，也给后续上线的确认测试和验收带来了麻烦。
经验
往后开发前后端需要认真定义好交互——接口文档，以避免后续开发过程中改动带来时间和人力损失。
林智烽：
通过这次现场编程，深刻体会到在最开始的数据格式以及接口规范需要设置的合理且符合逻辑，不然后面再去修改会非常难改，大部分代码都会受到影响，也会让代码结构改着改着变得越来越复杂；同时团队协作和协调沟通也是很重要的，需要发挥每个人的特长和能力，才能在限定的时间里更好更高效的完成任务；在后端开发的过程中，需要先行测试可行性和正确性，不然在前后端接起来后，出现的错误感觉还是比较难定位的，前后端的协调也是一个重点，合理的规范和安排会让整个过程更加流畅。
伊晓：
在软件工程实践课程的现场编程中，我收获颇丰。
这是一场知识与技能的实战较量。当手指在键盘上敲击，代码一行行出现，我感受到了编程的魅力。在和小组成员共同编程的过程中，团队协作的重要性也凸显出来，沟通和分工决定了我们能否高效地完成任务。这次现场编程就像一面镜子，让我看到了自己的优势和不足，为今后的学习和实践指明了方向。
王梓联：
在项目开发过程中，我遇到了许多预料之外的问题和挑战。通过不断地学习和探索，我成功地解决了这些问题，并积累了宝贵的经验。这次经历极大地提升了我的问题解决能力。软件工程现场编程实践课是一门非常有意义和有价值的课程。通过本次实践课，我不仅掌握了软件开发的核心技术和方法，还学会了如何与团队成员有效沟通和协作。我相信，这次经历将对我未来的学习和工作产生深远的影响。
黄俊瑶：
在这次团队编程中，我负责前端开发。在本次开发过程中由于项目初期对接口的设计和定义不够详细，导致在前后端交互时出现了接口请求错误等问题。为了解决这些问题，我学会了使用浏览器的开发者工具深入调试，通过网络请求查看数据传输的细节，并分析控制台的报错信息。这个过程虽然耗时，但极大提升了我的调试和问题排查能力，也让我更加注重代码的严谨性。
同时，在遇到技术难题时，团队成员的讨论和帮助非常关键。每个人都从不同的角度提出了有价值的建议，经过多次交流，我们逐步解决了困扰的问题。这次编程让我更深刻地体会到团队协作的力量，也意识到有效的沟通能帮助我们避免重复工作，提高效率。在今后的项目中，我会更加积极主动地与团队成员沟通，确保开发进度顺利。
总的来说，这次团队编程不仅让我在技术上得到提升，也增强了我的团队协作意识，帮助我更好地应对未来的开发挑战。
赖越：
这次编程时间很紧迫，需要在短时间内完全投入去完成。组长在开始的时候就先列出了大的框架，我们再往里面设计就方便了很多，做任务也更加具有目的性。这次任务我们选择做的是网页，使用的前端工具是Vue.js，与我之前在微信小程序开发平台上相比，Vue.js提供了一种全新的开发体验，尤其是在处理接口调用和数据绑定方面。这种差异不仅让我学到了新的技术，也让我对前端开发有了更深入的理解。同时github协作非常的方便，我们可以同步更新团队成员的代码，减少了代码冲突和错误的可能性，确保了代码的质量和项目的顺利进行。
罗永辉：
作为前端开发人员，我的任务是为个人记账本实现附加功能，特别是数据的图表展示。我将注重用户体验，选择适合的图表类型来直观展示收支数据，并确保设计的响应式和可访问性，以适应不同设备和用户需求。我需要优化前端性能，以处理大量数据并保持流畅的用户体验。选择合适的技术栈和图表库，与后端紧密合作，确保数据的准确传输和展示。此外，我会保持良好的代码注释和文档，以便于团队协作和未来的维护。
傅钰：
在团队编程过程中，我负责收入统计的前端实现。在筛选收入类别时，调用后端函数出现了一些问题。通过与队友的讨论，我们一起调整了筛选逻辑，让整个过程更加顺畅。我非常感激队友们的支持，他们的建议让我更好地理解了需求。这次合作不仅提升了我的技能，也加深了我们之间的默契，让我对团队编程有了更深的体会。
黎曼：
通过这次的团队现场编程，我深刻体会到一个好的接口管理工具对项目的重要性。最初，由于缺乏有效的沟通，导致前端和后端的接口处理上出现了困难，影响了整体的开发进度。尤其是在接口定义不够明确的情况下，前后端的交互频频出现 bug，导致我们的调试变得异常繁琐。
然而，在团队成员的共同努力下，我们逐步发现并解决了这些问题，并最终实现了所需的功能。每个人在不同的任务中都展现了自己的优势，大家也明白了团队协作的重要性！
另外，作为本队的队长，我在这次现场编程中也意识到自己需要加强的地方还很多。从技术上来说，接口管理、代码优化等方面还需进一步提高；从管理角度而言，在项目初期的沟通和角色分配上我也有改进空间。我会继续努力学习，争取在未来的项目中更加从容地带领团队完成任务。
8.PSP表格
| PSP 阶段 | 预估耗时（分钟） | 实际耗时（分钟） | 备注 |
|---|---|---|---|
| 计划 | 20 | 25 | 理解题目需求，制定开发计划和分工。 |
| 需求分析 | 30 | 35 | 分析记账本的主要功能，包括收入、支出记录及统计需求。 |
| 设计 | 40 | 45 | 设计系统的基本结构，包括前后端交互接口设计和数据库结构。 |
| 实现 | 80 | 90 | 开始编码，完成基本的前端界面和后端 API 开发。 |
| 代码集成 | 30 | 25 | 整合前后端代码，确保数据正常传递与显示。 |
| 测试 | 50 | 60 | 对主要功能进行测试，修复前后端交互中的 Bug。 |
| 问题解决 | 30 | 40 | 排查和解决接口定义不清晰带来的 Bug。 |
| 代码复审 | 40 | 45 | 对代码结构进行复查和优化，确保代码的可读性和性能。 |
| 演示答辩 | 30 | 30 | 演示并答辩项目。 |
| 博客撰写 | 120 | 150 | 撰写团队编程的总结博客，详细描述项目经历和收获。 |
| 合计 | 470 | 545 | 总耗时 |
PSP 反思
在此次项目中，我们认识到初期需求分析和接口设计的清晰定义对后续开发的重要性。若能在项目开始前花更多时间进行需求分析和接口规划，代码集成和测试阶段的 Bug 会减少很多。通过这次团队编程，我们深刻体会到团队协作和各个 PSP 阶段严格执行的重要性。
9.组员分数（满分为100分）
| 姓名 | 分值 |
|---|---|
| 郑哲浩 | 97 |
| 陈宇杰 | 97 |
| 林智烽 | 95 |
| 伊晓 | 92 |
| 王梓联 | 93 |
| 黄俊瑶 | 97 |
| 赖越 | 93 |
| 罗永辉 | 92 |
| 傅钰 | 92 |
| 黎曼 | 95 |
