EE4001/IM2001

Software Engineering
Dr. Chen
Dr
Chen, Lihui
Division of Information Engineering
School of EEE
EEE, NTU
Phone: (65)
(65)-6790-4484
6790 4484
Office: S1-B1C-96
Email: elhchen@ntu.edu.sg
@
g

Teachingteam&Overview
L t
Lecturers:
Two more Tutors:

A/P. Chen
A/P
Ch LiHui
LiH i
Dr. Tan Hee Beng Kuan
A/P Wang Lipo (week2-6)
(week2 6)
Mr. Arnatovich Yauhen (week2-6)

P t I:
Part
I Week
W k 1-6,
16 T
Tutorial
t i l1
1-5,
5 b
by D
Dr. Ch
Chen Lih
Lihuii
Web Engineering
Project Management
Part II: Week 7-13,
7 13 Tutorial 6
6-12,
12 by Dr.
Dr Tan Hee Beng Kuan
Software Requirements Analysis and Design
Software Testing

References

RogerS.PressmanandDavidLowe,WebEngineering:A
g
g
g
PractitionersApproach,McGraw-Hill, 2009.
BobHughesandMikeCotterell :SoftwareProjectManagement,
5th Edition,McGrawHill,2009.
Edition McGraw Hill 2009

Online:https://NTULearn.ntu.edu.sg
3

SoftwareEngineering
The seminal definition:
[Software engineering is] the establishment and use of
sound engineering principles in order to obtain
economicallyy software
f
that is reliable and works
efficiently on real machines.
TheIEEEdefinition:
Software Engineering: (1) The application of a systematic,
systematic
disciplined, quantifiable approach to the development,
operation,
p
, and maintenance off software;
f
; that is,, the
application of engineering to software. (2) The study of
approaches as in (1).
4

FeaturesofSoftware?
Its characteristics that make it different from other things human
being build.
Features of such logical system:
Software is developed or engineered, it is not manufactured in the
classical sense which has quality problem.
Software doesn't "wear out. but it deteriorates (due to change).
Hardware has bathtub curve of failure rate ( high failure rate in the
b i i
beginning,
th drop
then
d
t steady
to
t d state,
t t then
th cumulative
l ti effects
ff t off
dust, vibration, abuse occurs).
Although
g the industryy is movingg toward componentbased
p
construction (e.g. standard screws and offtheshelf integrated
circuits), most software continues to be custombuilt. Modern
reusable components encapsulate data and processing into
software parts to be reused by different programs. E.g. graphical
user interface, window, pulldown menus in library etc.
5

SoftwareApplications

System software: such as compilers, editors, file management utilities

Application software: stand-alone programs for specific needs.
Engineering/scientific software: Characterized by number crunchingalgorithms. such as
automotive stress analysis,
y , molecular biology,
gy, orbital dynamics
y
etc
Embedded software resides within a product or system. (key pad control of a microwave
oven, digital function of dashboard display in a car)
Product-line software focus on a limited marketplace to address mass consumer market.
market
(word processing, graphics, database management)
WebApps (Web applications) network centric software. As web 2.0 emerges, more
sophisticated computing environments is supported integrated with remote database and
business applications.
AI software uses non-numerical algorithm to solve complex problem. Robotics, expert
system pattern recognition game playing
system,
playing.
Open world computingpervasive, ubiquitous, distributed computing due to wireless
networking. How to allow mobile devices, personal computer, enterprise system to
communicate
i t across vastt network.
t k
Netsourcing the Web as a computing engine. How to architect simple and sophisticated
applications to target end-users worldwide.
Open sourcefree source code open to the computing community (a blessing, but also a
potential curse!) more see Chapter 31.
6

waterfall

SoftwareDevelopmentProcess

incremental

Software Modeling Techniques

Data: info to deal with

Requirements:
Processes: tasks to perform
Structure Analysis: model data and process separately

Requirement Analysis:

OO Analysis : model data & process together

Modeling: to describe and depicture what to build

Data : ER

Modeling Techniques:
(UML)

Process/Behavior: DFD, Use-Case, StateD,

Sequence Diagram,
g
Activityy Diagram
Class Diagram: both Data & Processes

cope with Fluidity and Uncertainty

Set of Activities

Propose :

An
A

agile,
il yett disciplined
di i li d framework
f
k for
f

building industry-quality WebApps.

(Software Eng: App of Eng. to Software: systematic, disciplined, quantifiable)
(Old school approach: informality,
informality intuition
intuition, Art)

worldEco: 77.6 in 2014

WebEco: ~4.2 in 2016

R or W: Student Handbook
Airline reservation

Banking; eShop

Web 1.0, 2.0, 3.0

p g
> 2 billions users;; > trillions web-pages
In Amazon: order > 73 items/sec => 426 items/sec (Dec26,13)

(optical fiber, bandwidth) (> 2 Billions)

(no control on who ,when, where )

(take more )

(real time in nature)

((shut down? back up

p ?))

(data intensive, handle, store, index)

((correct,,
accuracy
artistic)

(e.g. promotion )

(immediate changes; technology )

(Insecure media,
media hackers
hackers, encryption)

(high competition)

WebE Process

Must accommodate:
Incremental delivery
Frequent
Frequent changes
Short timeline
Therefore,
An incremental process model should be used in virtually
all situations
An agile process model is appropriate in many situations
6

(what, why )

(key functions, all needs, doc ->use case modeling)

(core/non-core)

((2 levels )

(Text =>UML, SD, DFD, )

( to build & test )

(fine tune)

(another round of life cycle )

( need +

scope )

(data: Entity / Classes )

( function:
f
ti
use case )

( l
(planning)
i )

different user groups => access different info

VIP/frequent ; admin; decision makers
entity, classes

select : related operations to get it done.

checkout

Req. from Customer: max response time

( 6 categories team members )

L1:summary

WhatisSoftEng?
What
is SoftEng ?
SEFeatures;Applications;Processes;modellingTechniques
WhatisWebApp?(
h
b
? (site,function,app)
WebAppAttributes:11keyattributes
WebEngProcess incremental

Communication=>Formulation
Planning
Modeling
Construction
Delivery&Evaluation

Formulation
F
l ti
PreliminaryAnalysis
WebEngTeam

( create conceptual representation

better understanding: Developer vs. Customer )

We model our perception of reality so that we can understand + change it

+ shape it.

UML: Str+Graph

14

Modeling

Customer, VIP, Books

ER, Class, DataTree

UCD, SqD, SD
keyword => select => purchase =>payment

UCD, ActivityD

observable f: highlight
g g
Unobservable f: update

Hardware, Software, Balance

SafeHome

UseCaseDiagram

One actor
11 functions use cases
3 admin; 2 FP

(floor plan + select Eq.)

d e s c r ib e
h o m e la y o u t
< < in c lu d e > >

perus e
d e s c r ip t iv e
content

c u s t o m iz e
Sa f e Ho m e

s e le c t
Sa f e Ho m e
c omponent s

<< in c lu d e >>

<< in c lu d e >>

save
c o n f ig u r a t io n
c u s t o m iz a t io n f u n c t io n a lit y

lo g - in t o
Sa f e Ho m e A s s u r e d .c o m

v ie w
s h o p p in g c a r t
< < in c lu d e > >

purc has e
c o n f ig u r a t io n

new c us tomer

<< in c lu d e >>

p r o v id e
purc has e dat a
r e c a ll s a v e d
c o n f ig u r a t io n

< <in c lu d e > >

(purchasing)

c o m p le t e
Sa f e Ho m e o r d e r

e - c o m m e r c e f u n c t io n a lit y

F i g u r e 1 8 .2 Use -c a se d i a g r a m f o r n e w -c u st o m e r

16

understand => shape up

Detail enough

minimize
i i i maintenance
i t
costt

Guideline: <=3 levels

customer will interact with the system and specify the books he wants

Info/objects the WebApp needs to deal with

functions
u ct o s
time ordering
h
how
to
t reactt
how the interface looks like

SequenceDiagram:
:Room

:FloorPlan

how user actions work with classes

:Product
Component

:Billof
Mat erials

FloorPlan
Reposit ory

BoM
Reposit ory

new cust omer

desc ri bes
room *
plac es room
i n f l oor pl an

sav e f l oor pl an c onf i gurat i on

sel ec t s produc t c om ponent *

add t o BoM

sav e bi ll of m at erial s

Figure 18.5 Sequence diagram f or use

use-case:select
case:select Saf eHome component s
20a

StateDiagram
Validat ing user
select log-in

Select ing user act ion

userid
v alidat ed

sy st em st at us=input ready
display msg = ent eruserid
display msg =ent er pswd

password v alidat ed
n e w cu st o m e r

To model dynamic
behavior of WebApp

ent ry / log
log-in
in request ed
do: run user v alidat ion
exit / set user access swit ch

selec t ot her f unc t ions

sy st em st at us=link ready
display : nav igat ion choices
ent ry / v alidat ed user
do: link as required
exit / user act ion select ed

c ust omiz at ion c omplet e

How WebApp changes

from one state to
another

selec t e-c ommerc e (purc hase) f unc t ionalit y

selec t c ust omiz at ion f unc t ionalit y

next select ion
Cust omiz ing

select descript iv e
cont ent

sy st em st at us=input ready
display : basic inst ruct ions

Def ining room

room being def ined

ent ry / v alidat ed user

do: process user select ion
exit / cust omiz at ion t erminat ed

select descript iv e
cont ent

Sav ing f loor plan

sy st em st at us=
us=input
input ready
display : st orage indicat or
ent ry / f loor plan sav e select ed
do: st ore f loor plan
exit / sav e complet ed

sy st em st at us=input ready
display : roomdef . window

ent ry / roomdef . select ed

allll rooms do: run room queries
do: st ore room v ariables
def ined
exit / room complet ed

select sav e f loor plan

select ent er room in f loor plan

Building f loor plan

select descript iv e
cont ent

sy st em st at us=
us=input
input ready
display : f loor plan window
ent ry / f loor plan select ed
do: insert room in place
do: st ore f loor plan v ariables
exit / room insert ion complet ed

room insert ion complet ed

Figure 1 8 .6 Part ial st at e diagram f or n e w c u s t o m eint

r eract ion

20b

ActiveInterfacePrototype

Aprototypeshowsthelayoutoftheuserinterface,thecontent,
interactionmechanismsandoverallaesthetic
Supports validation with the client of the requirements and analysis
Supportsvalidationwiththeclientoftherequirementsandanalysis
21

ActivityDiagram

to show flow of actions: UC, op. logic, entire system

purchase:
h
comp
in it ia liz e

n o

o m

p o n e n t s

r e m

a in

o nB o M

t o t a lC o s t

L is t

in v o k e
c a lc S h ip p in g C o s t
r e t u r n s :
s h ip p in g C o s t

g e t
p r ic e
q u a n t it y

d is c o u n t

a in

o n B o M

L is t

a n d

a d d
lin e C o s t
t o t a lC o s t

d is c

<

r e m

in e D is c o u n t

r e t u r n s :

o u n t

p o n e n t s

lin e C o s t
=
p r ic e
x
q u a n t it y

in v o k e
d e t e r m

d is c

o m

o u n t > 0

t o

t o t a lC o s t =
t o t a lC o s t

d is c o u n t

t a x T o t a l=
t o t a lC o s t
x t a x r a t e

p r ic e T o t a l =
t o t a lC o s t
+
t a x T
+
s h ip p in g C o s t

F i g u r e

. 7

c t i v i t y

d i a g r a m

f o r

o t a l

i c
( )e

i o

23

l
large
DB access, other
th IT applications
li ti

Local OS, software

Combinations of H/S

L2:summary
Modeling:Analysis+Designmodeling

AnalysisModeling
Analysis Modeling
Contentmodel:identifyobjects
UseCaseDescription=>ER/ClassD;dataTree;
U C D
i ti
ER/Cl D d t T

Interactionmodel:describeinteractions
Usecases;SeqD(actors/classes;)StateD;Prototype
U
S D(
/ l
)S
D P

Functionalmodel:operation+ob/unobfunctions
UseCaseDescription(Sceneries)=>ActivityDiagram
(
)

Configuremodel:
CombinationsofHardware+Software/Server+Client

Chapter 19
Design Modeling for Web Apps
(artistic + engineering idea )
Analysis(commun)

Problem
what

Q + goals+ non-fs
Design(Modeling)

how
Models
software blueprint

Development

Solution
Testing
Objectives:
Object
es importance;
po ta ce; ttranslation;
a s at o ; p
principles
c p es
Design Rept: data design/rept; arch; interface; procedure design; etc

25

WebApp Design Modeling

WebAppDesignModeling
Designmodelencompasses:
content;aesthetics;architecture;interface;
;
;
;
;
navigation;componentleveldesignissues;

P
Providessufficientinfotoconstructthefinal
id
ffi i t i f t
t t th fi l
WebApp
Consider:alternativesolutions
Assess:effectiveimplementation.
Assess: effective implementation

25a

close related

firewall, authentification, encryption

filtering

cost

b k
backup,
update
d t

substantial overloads, IRAS 103 ~ 106

not true quality attribute in technical sense,

but quality in business.

26a

content, graphic, arch, interface, navigation

+precisely: data handled

screen look, color, font, tone

not just top-down, bottom-up;
diff. user => diff. tasks to perform
save learning time
diff dept -> same mode of interaction:
many ways to move around

eShop vs. Holiday

Withstand hiccup
p from end-users

easy move about

next

color
l info
i f rich
i h
operate on diff. os + configurations

Design Modeling: 6 Elements

Analysis Modeling - 4 elements : content; interaction; function; configuration

login => download / print

basic human need
IRAS

next choice is immediate obvious; time to acquire is negligible.

cut down waiting time; MT features: threads

no jargon

auto-load in

focus on 1 function

design matches well with nature

list of books => group => sections

diff: developer vs. end-users

things of past

book catelog

display=> used=>process info

ID, Price
two types of attributes

font, size, color, menu/popup

nature extension of Interaction/Functions models

Info arch
Info.
How do yyou organize/label/navigate/search
g
g
content objects
j

consider all factors concurrently

L3:summary
Modeling:Analysis+Designmodeling
Modeling: Analysis + Design modeling
DesignModeling:

How

Design&WebAppQuality
Security;Availability;Scalability;TimetoMarket

DesignGoals
SixlayersofDesign
Interface:anticipation/comm/consistency/less
effort/multiTasks/learnable/Readability/intelligence

Aesthetic:
A
th ti spaceok/organise/group/noscrollbar/display
/
/
/
/
Content:contentspec+implementationspecific
Architecture:
hi
content+WebApp
Navigation:design& manage the flow control
Component:additionalfunctionsfor localized processing +DB

design the flow

move f/bwd in a
controlled manner

Bank system

screen + steps
t
to
t complete
l t transaction
t
ti
why complicated: each category interacts diff.
Customers
Custo
e s vs.
s Bank
a managers:
a age s d
different
e e t use cases

(explicit/inexplicit)

Each NNi = webpage, object, functionality

SafeHome: How users can purchase security equipments

various ways to provide links

Table of Contents => Book

additional functionalities

raw data Server =>Local Processor: format

relieve concurrent users
dumb T=> smart D.

e.g.:
g banking
g system
y
Major Advantages:
make use of local processors => speed up T. /min network usage
min data communications =>
> improve security

41

+usability

object

Flow of trans.

functions: b/w box

non-functional req.
Loading
oad g

St
Stress
42

typo; photo => news

price- book; net/gross

right template?

logo

button

Selected end-users to test

track user activity=> temp files;

design help; modifications

test from button-up: individual; screen; Webapp

Not about WebApp written correctly, but executions on different platforms

mobile;; desktop;
p; laptop
p p

No new test cases but

put together existing ones
to check

All

f : observable + not observable

business rules;
unobservable functions: update inventory;
Search sth => DB retrieval => show on screen

check if works acc.to design

auto redirect to new location

set memory; come back easily

web screen hierarchy

direct access to specific screen

book catalog

Server
Client
Network

ghost processors; take up Resources.

If can respond acc to prescribe response time

Plot graph
processor, memory?
?
plot the graph
Yes: data inside memory if transaction is not complete
over load => crash=> DB integrity

to assess recommended conn. speeds

One of performance T.
3 factors

exceed operational limits

communicate
i t ?
overflow area
try to avoid
protected?

diff load=-> diff reactions

ASAP

Shut down some backend P: IRAS

IRAS- only eFiling
To cope with more concurrent users

L4:summary
DesignModelingSixlayersofDesign
Interface;Art;Content;Arch;
Interface; Art; Content; Arch;

Navigation:design& manage the flow control

Component:
Component additionalfsfor
ddi i
l f f localized
l li d processing
i +DB
DB

TestingWebApp uncovererrors
Thetestingprocess(linktoDesignmodels)
Content;UI;Usability;Compatibility;
Content; UI; Usability; Compatibility;
Componentlevel(functions)
Navigation;Security;Performance;
i i
i
f
Loading;Stress;