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

Implementation / Testing / Deployment

98 Days

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!

<html>
<head>
  <title>Calculatur</title>

  <style>

    body {
      color: white;
      background-color: black;
    }

  </style>

  <script type='text/javascript'>

    function add() {

      var number1 = document.getElementById('number1').value;
      var number2 = document.getElementById('number2').value;

      document.getElementById('result').innerHTML = parseFloat(number1) + parseFloat(number2);

    };

  </script>


</head>
<body>
  <input type='text' id='number1'> + <input type='text' id='number2' onKeyup='add()'> = <span id='result'>?</span>
</body>
</html>

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

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 V

Properties

Methods

Class Diagram

Use Case Diagram

Activity Diagram

Sequence Diagram

Keep it simple!

CS410 Lecture 09

By Daniel Haehn

CS410 Lecture 09

Slides for CS410 Software Engineering at UMass Boston. See https://cs410.net!

  • 326

More from Daniel Haehn