No Class Next Week!
Prototyping Time
Modeling Time
+
+
Reporting Time
First Part: WHAT
Requirements vs Specs vs Design
Requirements
Specifications
Non-Technical!
Second Part: HOW
Technical!
Understandable by Non-Engineers
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...
Stand Up!
Project Proposal Template
Updated template coming soon!
02/16/2022
Guest Lecture by Professor Nam Wook Kim
Human-centered Design
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 = ['+', '-'];
Jupyter Notebook ("glue"-code)
Package structure
Package structure
from .controller import *
from .view import *
from .mathengine import MathEngine
class MathEngine:
def __init__(self):
'''
A constructor.
'''
print('Really new Math Engine instance.')
def add(self, number1, number2):
'''
Takes 2 integers, and adds them.
'''
return number1 + number2
No user interaction here! Just Logic!
from .ui import UI
class UI:
def __init__(self):
'''
'''
print('New UI')
def start(self, controller):
'''
We ask the user for 2 numbers.
'''
print('Please enter number1')
number1 = input()
print('Please enter number2')
number2 = input()
result = controller.add(int(number1), int(number2))
print('Result:', result)
UI stuff here that calls the logic!
Package structure
Controller is separate! (All calculations, logic, algorithms etc.)
View is separate! (All user interactions)
Everything is bundled as one package!
We can import the package and use it!
This was the VC (View and Controller) part of the MVC pattern!
Why structure the code like this?
Architecture is more important than features!
Remember this!
Use Case Diagram
Activity Diagram
Properties
Methods
Class Diagram
Sequence Diagram
Keep it simple!
Divide and Conquer
Problem
Sub-Problem
Sub-Problem
Sub-Problem
Solved
Sub-Problem
Solved
Solution
Divide
Divide
Conquer
Conquer
It's a lifestyle!
Modularity
Split things up...
Subsystem
Module
vs.
independent value
can not function on its own
Information Hiding
treat stuff as black boxes!
Information Hiding
class MathEngine:
def __init__(self):
'''
A constructor.
'''
print('Really new Math Engine instance.')
def add(self, number1, number2):
'''
Takes 2 integers, and adds them.
'''
return number1 + number2
....
controller = MathEngine()
result = controller.add(int(number1), int(number2))
....