2/7
2/21
2/28
3/27
5/22
Team Selection
Client Presentations
Project Proposal
Revised Project Proposal
Final Project Documentation
No class
No class
No class
Project Presentations
5/04
No class
3.5 months
Implementation / Testing / Deployment
102 Days
Kristen Laird
Wednesday 2/12
Product Management / Team Work
Design: Architecture
Example: Building a Simple Calculator
that adds 2 numbers
Requirements
Design
Implementation
Verification
Maintenance
Testing and Deployment
What?
How?
Build
More Testing / Evaluate
Bugs / New Features
- allows input of 2 numbers
- calculates the sum and displays it
- HTML/CSS for UI
- JavaScript for logic
- write JS code
- comment code
- write unit tests
- deploy on github pages
- does the UI show the sum?
- do users understand the UI?
- what if numbers are too long?
- subtract? multiply?
- fix bugs, create future plan
First Part: WHAT
Project Proposal
Requirements
Specifications
Non-Technical!
Second Part: HOW
Technical!
Understandable by Non-Computer Scientists
Third Part: HOW IN DETAIL
Design
But not too detailed!
Implementation Details!
Input fields for two numbers that then are added.
Web-based form for client-side calculations.
HTML/CSS for UI and JavaScript for Logic. 2 Classes with attributes...
Features
- allows input of 2 numbers
- calculates the sum and displays it
- web-based
- client-side calculations
- HTML/CSS for UI
- JavaScript for logic
Let's code!
We don't want to use the console to call add()!
What about decimals?
What about a dark background?
Fix the bug!
What about subtraction?
What about multiplication?
What about division?
What about dynamic numbers?
What about night mode on/off?
What about customizable themes?
What about three numbers?
What about combining addition/subtraction/multiplication?
Not part of the project proposal!
Re-factor
Re-factor
Re-factor
Optimize
Delete
Re-write
Extend
Re-factor
Not worth it!
What is the mistake?
Architecture
Features
Chapter 2
Behavior of software
Structure of software
vs.
Some programmers think that implementing requirements and fixing bugs is their main job
That's wrong!
Features can be
easily developed
easily modified
easily extended
That's better!
Architecture is more important than features!
The MVC Pattern
Model
View
Controller
Logic and calculations separate from any data storage or user interface
User interface
Data access / Data storage
Equation = function() {
this.numbers = [];
this.operators = [];
}
Equation.prototype.toString = function() {
var output = "";
for (var o in this.operators) {
var n = this.numbers[o];
output += n + this.operators[o];
}
output += this.numbers[this.numbers.length-1];
return output;
};
var eq = new Equation();
eq.numbers = [22, 33.4, 55];
eq.operators = ['+', '-'];
Object Oriented JavaScript
We want a command line interface
But we have a client-side web-based application with HTML/CSS/JS!
and a web-based interface
and multi-user support!
Model
View
Controller
Equation = function() {
this.numbers = [];
this.operators = [];
}
Equation.prototype.toString = function() {
var output = "";
for (var o in this.operators) {
var n = this.numbers[o];
output += n + this.operators[o];
}
output += this.numbers[this.numbers.length-1];
return output;
};
Server
Clients
Equation = function() {
this.numbers = [];
this.operators = [];
}
Equation.prototype.toString = function() {
var output = "";
for (var o in this.operators) {
var n = this.numbers[o];
output += n + this.operators[o];
}
output += this.numbers[this.numbers.length-1];
return output;
};
HTML/CSS
Hands-on
Day!
Part IV