结对编程——四则运算界面化

结对编程

组员

---

 

陈福鹏：201421122096

林    栋：201421122098

 

项目地址

---

 

https://gitee.com/royal_cfp/ArithmeticSystem

 

题目内容

---

 

不知道大家是否尝试过这样一种开发模式：你有一个伙伴，你们坐在一起，并肩作战，面对着同一台显示器，使用着同一键盘，同一个鼠标，你们一起思考，一起分析，一起编程？这次，就让我们来体验一下结对编程的魅力：

http://www.cnblogs.com/xinz/archive/2011/08/07/2130332.html

 

我们在个人作业1中，用各种语言实现了一个命令行的四则运算小程序。进一步，本次要求把这个程序做成GUI，成为一个有基本功能、一定价值的程序。在下面的功能需求中实现两个：

1. 实现WEB界面；
2. 记录用户的对错总数，程序退出再启动的时候， 能把以前的对错数量保存并在此基础上增量计算；
3. 有计时功能，能显示用户开始答题后的消耗时间;
4. 界面支持中文简体/中文繁体/英语，用户可以选择一种；

 

需求分析

---

 

GUI

1. 简单易操作的界面风格
2. 分为开始、答题、结果还有查看答案4个界面
3. 在答题前设置题目数量和参数范围

增量记录对错总数

1. 每次测试完成时，将对错总数量和保存在本地的总数量相加，并将相加后的值保存
2. 将对错总数显示在测试结果面板上

计时功能

1. 在用户答题时实时更新已用时间
2. 答题完成后显示所用时间

界面语言多样化

1. 通过下拉框切换语言
2. 切换语言后，界面立刻刷新文字，显示切换后的语言，所有界面都可以即时切换语言

程序设计

---

 

我负责做的是前端界面、实现计时功能和界面语言多样化的设计：

项目的思维导图如下：

 

 

代码展示

---

 

实现计时功能

<form action="MathAction!submitAnswers.action"  method="post" namespace="/">

<div class="face" >
   <p id="lazy"  >00:00:00</p> 
   <input type="hidden" id="timer" name="lazy"></input> 
</div>
<script>
var defaults = {}
  , one_second = 1000
  , one_minute = one_second * 60
  , one_hour = one_minute * 60
  , one_day = one_hour * 24
  , startDate = new Date()
  , face = document.getElementById('lazy');

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var requestAnimationFrame = (function() {
  return window.requestAnimationFrame       || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame    || 
         window.oRequestAnimationFrame      || 
         window.msRequestAnimationFrame     || 
         function( callback ){
           window.setTimeout(callback, 1000 / 60);
         };
}());

tick();

function tick() {

  var now = new Date()
    , elapsed = now - startDate
    , parts = [];

  parts[0] = '' + Math.floor( elapsed / one_hour );
  parts[1] = '' + Math.floor( (elapsed % one_hour) / one_minute );
  parts[2] = '' + Math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );

  parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];
  parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];
  parts[2] = (parts[2].length == 1) ? '0' + parts[2] : parts[2];

  face.innerText = parts.join(':');
  requestAnimationFrame(tick);
   document.getElementById('timer').value=face.innerText;
}
</script>
<br>
<div class="txt">
<%=txt %>
<br>
<input type="submit" align="middle"  data-localize="index.submitAnswer"></input>
</div>
</form>

系统界面语言多样化通过Jquery实现，设计的文件比较多就不贴上代码了

 

程序运行

---

 

 

 

 

结对过程

---

 

讨论用什么语言做这次作业，用什么方式做GUI界面。

 

PSP

---

 

PSP2.1	Personal Software Process Stages	Time Senior Student	Time
Planning	计划	5小时	5小时
· Estimate	估计这个任务需要多少时间	5小时	5小时
Development	开发	3小时	3小时
· Analysis	需求分析 (包括学习新技术)	30分钟	30分钟
· Design Spec	生成设计文档	30分钟	10分钟
· Design Review	设计复审	10分钟	0分钟
· Coding Standard	代码规范	10分钟	10分钟
· Design	具体设计	20分钟	20分钟
· Coding	具体编码	1天	0.8天
· Code Review	代码复审	10分钟	5分钟
· Test	测试（自我测试，修改代码，提交修改）	20分钟	10分钟
Reporting	报告	20分钟	20分钟
·	测试报告	1小时	1小时
·	计算工作量	5分钟	0
·	并提出过程改进计划	50分钟	0

 

小结感受

---

 

在结对编程中，感觉因为不是同一个宿舍的，所以在有些沟通方面不是很多，没有1+1>2的效果。

 

评价合作伙伴

---

 

他编程能力挺强的，在C++方面（优），不过在JAVA和WEB方面不是很强，所以这次做的不是很多（缺），希望他可以有空多学学其他语言，毕竟程序员都是需要不断学习的。