3.5 months

2/5

2/19

2/26

3/26

5/21

Team Selection

Client Presentations

Project Proposal

Revised Project Proposal

Final Project Documentation

No class

No class

No class

Project Presentations

5/03

No class

Implementation / Testing / Deployment

99 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>
    
    <script type='text/javascript'>

      // this one has UI elements and logic mixed -> NOT GOOD
      function add() {

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

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

        // dont forget to parse value as integer
        var result = parseInt(number1,10) + parseInt(number2,10);

        var output = document.getElementById('output');
        output.innerHTML = result;

      }


      // split up above function into stricter VIEW and CONTROLLER
      // package UI
      function calculate(operation) {

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

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

        var operator = add;

        if (operation == 'sub') {
          operator = sub;
        }

        var result = operator(parseInt(number1,10), parseInt(number2,10));

        var output = document.getElementById('output');
        output.innerHTML = result;

      }

      // just pure logic
      // package CONTROLLER
      /**
       * @param number1 needs to be a number
       * ...
       */
      function add(number1, number2) {

        return number1 + number2;

      }
      function sub(number1, number2) {

        return number1 - number2;

      }



    </script>

  </head>
  <body>

    <input id='number1'> + <input id='number2' onkeyup='javascript:add();'> = <span id='output'>?</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!

  • 157

More from Daniel Haehn