EE4001/IM2001 Software EngineeringSoftware Engineering

Dr Chen LihuiDr. Chen, LihuiDivision of Information EngineeringSchool of EEE NTUSchool of EEE, NTU

Phone: (65)-6790-4484Phone: (65) 6790 4484Office: S1-B1C-96Email: elhchen@ntu.edu.sg@ g

1

Teaching team & OverviewL t A/P Ch LiH iLecturers: A/P. Chen LiHui

Dr. Tan Hee Beng KuanTwo more Tutors: A/P Wang Lipo (week2-6)Two more Tutors: A/P Wang Lipo (week2 6)

Mr. Arnatovich Yauhen (week2-6)

P t I W k 1 6 T t i l 1 5 b D Ch Lih iPart I: Week 1-6, Tutorial 1-5, by Dr. Chen Lihui Web Engineering

Project Management

Part II: Week 7 13 Tutorial 6 12 by Dr Tan Hee Beng KuanPart II: Week 7-13, Tutorial 6-12, by Dr. Tan Hee Beng Kuan Software Requirements Analysis and Design

Software Testing

2

References

Roger S. Pressman and David Lowe, Web Engineering: A g g gPractitioner’s Approach, McGraw-Hill, 2009.

Bob Hughes and Mike Cotterell : Software Project Management,  5th Edition McGraw Hill 2009

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

5th Edition, McGraw‐Hill, 2009.

3

Software Engineering

The seminal definition:[Software engineering is] the establishment and use of[Software engineering is] the establishment and use ofsound engineering principles in order to obtaineconomically software that is reliable and worksy fefficiently on real machines.

The IEEE definition:Software Engineering: (1) The application of a systematicSoftware Engineering: (1) The application of a systematic,disciplined, quantifiable approach to the development,operation, and maintenance of software; that is, thep , f f ; ,application of engineering to software. (2) The study ofapproaches as in (1).

4

Features of Software?• 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.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 theb i i th d t t d t t th l ti ff t fbeginning, then drop to steady state, then cumulative effects ofdust, vibration, abuse occurs).

• Although the industry is moving toward component‐basedg y g pconstruction (e.g. standard screws and off‐the‐shelf integratedcircuits), most software continues to be custom‐built. Modernreusable components encapsulate data and processing intoreusable components encapsulate data and processing intosoftware parts to be reused by different programs. E.g. graphicaluser interface, window, pull‐down menus in library etc.

5

Software Applications• System software: such as compilers, editors, file management utilities• Application software: stand-alone programs for specific needs. • Engineering/scientific software: Characterized by “number crunching”algorithms. such as

automotive stress analysis, molecular biology, orbital dynamics etc y , gy, y• 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 Product-line software focus on a limited marketplace to address mass consumer 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 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 playingsystem, pattern recognition game playing.

• Open world computing—pervasive, ubiquitous, distributed computing due to wireless networking. How to allow mobile devices, personal computer, enterprise system to

i t t t kcommunicate across vast network.• Netsourcing —the Web as a computing engine. How to architect simple and sophisticated

applications to target end-users worldwide.• Open source—”free” source code open to the computing community (a blessing, but also a

potential curse!) more see Chapter 31. 6

Software Development Processwaterfall

incremental

7

Software Modeling Techniques

Requirements: Data: info to deal with

Processes: tasks to performProcesses: tasks to perform

Requirement Analysis:Structure Analysis: model data and process separately

Requirement Analysis:OO Analysis : model data & process together

Modeling: to describe and depicture what to buildModeling: to describe and depicture what to build

• Data : ER

Modeling Techniques: (UML)

• Process/Behavior: DFD, Use-Case, StateD,Sequence Diagram, Activity Diagramy g

• Class Diagram: both Data & Processes

8

cope with Fluidity and Uncertaintycope with Fluidity and UncertaintySet of Activities

“A il t di i li d f k f

Propose :

“An agile, yet disciplined framework for

building industry-quality WebApps.”

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

worldEco: 77.6 in 2014WebEco: ~4.2 in 2016

R or W: Student Handbook

Airline reservationAirline reservation

Banking; eShop

Web 1.0, 2.0, 3.0 > 2 billions users; > trillions web-pages; p gIn Amazon: order > 73 items/sec => 426 items/sec (Dec26,13)

(> 2 Billions)(optical fiber, bandwidth)

(no control on who ,when, where )

(take more )

(real time in nature)(real time in nature)

(shut down? back up ?)( p )

(data intensive, handle, store, index)

(correct, ( ,accuracyartistic)

(e.g. promotion )

(immediate changes; technology )

(Insecure media hackers encryption)(Insecure media, hackers, encryption)

(high competition)

WebE Process

Must accommodate:Must accommodate:•Incremental delivery•Frequent changesFrequent changes•Short timelineTherefore,•An incremental process model should be used in virtually all situations•An agile process model is appropriate in many 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 )( need + scope )

(data: Entity / Classes )

( f ti )( function: use case )

( l i )(planning)

different user groups => access different infoVIP/frequent ; admin; decision makers

entity, classes

VIP/frequent ; admin; decision makers

‘select ’: related operations to get it done.

‘checkout ’

Req. from Customer: max response time

( 6 categories team members )

L1: summary• What is SoftEng ?What is SoftEng ? • SE Features; Applications; Processes; modelling Techniques

h b ? ( )• What is WebApp?   (site, function, app)• WebApp Attributes:  11 key attributes• WebEng Process  ‐‐ incremental 

– Communication => Formulation– Planning– Modeling– Construction– Delivery & Evaluation

F l ti• Formulation• Preliminary Analysis• WebEng Team

( 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

ModelingModeling

Customer, VIP, BooksCustomer, VIP, BooksER, Class, DataTree

keyword => select => purchase =>paymentUCD, SqD, SD

observable f: highlightUCD, ActivityD

g gUnobservable f: update

Hardware, Software, Balance

Use‐Case DiagramSafeHome

d e s c r ib e h o m e la y o u t

One actor11 functions – use cases 3 admin; 2 FP

(floor plan + select Eq.)

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

h o m e la y o u t

s e le c t Sa f e Ho m e

c o m p o n e n t s

p e r u s e d e s c r ip t iv e

c o n t e n t

< < i n c l u d e > >

< < i n c l u d e > >

s a v e 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

< < i n c l u d e > >

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

< < i n c l u d e > >

n e w c u s t o m e r p u r c h a s e c o n f ig u r a t io n

p r o v id e p u r c h a s e d a t a

r e c a ll s a v e d

< < i n c l u d e > >

c o n f ig u r a t io n

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

< < i n c l u d e > >

(purchasing)

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

16

understand => shape up

Detail enough

i i i i t tminimize maintenance cost

Guideline: <=3 levels

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

Info/objects the WebApp needs to deal with

functionsu ct o s

time ordering

h t thow to reacthow the interface looks like

Sequence Diagram: how user actions work with classes

new cust omer

:Room :FloorPlan:Product

Component:Billof

MaterialsFloorPlan

Reposit oryBoM

Reposit ory

desc ribes room*

plac es room in f loor planin f loor plan

sav e f loor plan c onf igurat ion

selec t s produc t c omponent *

add t o BoM

sav e bi l l of mat erials

Figure 18.5 Sequence diagram for use-case:select SafeHomecomponentsFigure 18.5 Sequence diagram for use case:select SafeHomecomponents

20a

State Diagram To model dynamic behavior of WebApp

Validat ing user

system status=“input ready” display msg = “enter userid” display msg =“enter pswd”

ent ry/ log-in requested

select “log-in”

userid validated

password validated

Select ing user act ion

system status=“link ready” display: navigat ion choices”

ent ry / validated user

select other funct ions

How WebApp changesn e w cu st o m e rent ry/ log in requesteddo: run user validat ion exit / set user access switch

do: link as required exit /user act ion selected

select e-commerce (purchase) funct ionalit ycustomizat ion complete

How WebApp changes from one state toanother

select customizat ion funct ionalit y

Customizing select descript ivecontent

Saving f loor plan

system status=“input ready”

next select ion

system status=“input ready” display: basic inst ruct ions

ent ry /validated user do: process user select ion exit / customizat ion terminated

content

room being def ined

Def ining room

system status=“input ready” display: room def . window

ent ry/ room def . selected

select descript ivecontent

system status= input readydisplay: storage indicator

ent ry/ f loor plan save selected do: store f loor plan exit / save completed

llexit / customizat ion terminated do: run room queries do: store room variables exit / room completed

Building f loor plan

system status=“input ready”

select descript ivecontentselect save f loor plan

all roomsdef ined

system status= input readydisplay: f loor plan window

ent ry/ f loor plan selected do: insert room in place do: store f loor plan variables exit / room insert ion completed

select enter room in f loor plan

room insert ion completed

Figure 1 8 .6 Part ial st at e diagram f or ne w c us t ome r int eract ion

room insert ion completed

20b

Active Interface Prototype

• A prototype shows the layout of the user interface, the content, interaction mechanisms and overall aesthetic

• Supports validation with the client of the requirements and analysisSupports validation with the client of the requirements and analysis

21

Activity Diagram“ h ”

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

i n i t i a l i z e t o t a l C o s t

“purchase”: comp

i n v o k el S h i i C t

g e t p r i c e a n d

c o m p o n e n t s r e m a i n o n B o M L i s tn o c o m p o n e n t s r e m a i n o n B o M L i s t

c a l c S h i p p i n g C o s t q u a n t i t y

i n v o k e d e t e r m i n e D i s c o u n t

l i n e C o s t = p r i c e x q u a n t i t y

r e t u r n s : s h i p p i n g C o s t

d i s c o u n t > 0 t o t a l C o s t = t o t a l C o s t - d i s c o u n t

a d d l i n e C o s t t o t o t a l C o s t

r e t u r n s : d i s c o u n t

d i s c o u n t < = 0

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

p r i c e T o t a l = t o t a l C o s t + t a x T o t a l + s h i p p i n g C o s t

F i g u r e 1 8 . 7 A c t i v i t y d i a g r a m f o r c o m p u t e P r i c e( ) o p e r a t i o

23

l DB th IT li tilarge DB access, other IT applications

Local OS, software

Combinations of H/S

L2: summary• Modeling:  Analysis + Design modeling

• Analysis ModelingAnalysis Modeling– Content model: identify objects

U C D i ti ER/Cl D d t T– UseCaseDescription=>ER/ClassD; dataTree; 

– Interaction model: describe interactionsU S D ( / l ) S D P– Use cases; SeqD (actors/classes;) StateD; Prototype

– Functional model: operation + ob/unob functions( )– UseCaseDescription( Sceneries)=>ActivityDiagram

– Configure model:– Combinations  of Hardware+Software/Server+Client

Chapter 19Design Modeling for Web Apps

Problem

Design Modeling for Web Apps(artistic + engineering idea )

Analysis(commun) what

Q + goals+ non-fs

ModelsDesign(Modeling) how

software blueprint

Development

software blueprint

SolutionTestingTesting

Objectives: importance; translation; principles

Design Rept: data design/rept; arch; interface; procedure design; etc

Object es po ta ce; t a s at o ; p c p es

25

WebApp Design ModelingWebApp Design Modeling

• Design model encompasses:content; aesthetics; architecture; interface;; ; ; ;navigation; component‐level design issues;

P id ffi i t i f t t t th fi l• Provides sufficient info to construct the final WebApp

• Consider: alternative solutions • Assess: effective implementation• Assess: effective implementation.

25a

close related

firewall, authentification, encryption

filtering costfiltering cost

b k d tbackup, update

substantial overloads, IRAS 103 ~ 106

not true quality attribute in technical sense, but quality in business.

26a

+precisely: data handled

content, graphic, arch, interface, navigation

screen look, color, font, tone

not just top-down, bottom-up; diff. user => diff. tasks to perform

save learning timediff dept -> same mode of interaction:

many ways to move around

eShop vs. Holiday

Withstand hiccup from end-usersp

nexteasy move about

l i f i hcolor info rich

operate on diff. os + configurations

Design Modeling: 6 ElementsDesign Modeling: 6 Elements

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

login => download / print

basic human needIRAS

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

cut down waiting time; MT features: threadscut down waiting time; MT features: threads

no jargon

auto-load in

focus on 1 function

design matches well with naturedesign matches well with nature

list of books => group => sections things of past

diff: developer vs. end-users

book catelog

display=> used=>process info

font, size, color, menu/popuptwo types of attributes

ID, Price

Info arch

nature extension of Interaction/Functions models

How do you organize/label/navigate/search content objects

Info. arch

y g g j

consider all factors concurrently

L3: summary• Modeling: Analysis + Design modeling• Modeling:  Analysis + Design modeling

• Design Modeling: How?– Design & WebApp Quality

– Security; Availability; Scalability; Time to Market

– Design Goals– Six layers of Design 

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

A th ti / / / /• Aesthetic : space ok/organise/group/no scroll bar/display• Content: content‐spec + implementation‐specific

hi• Architecture: content + WebApp

• Navigation:  design& manage the flow control

• Component:  additional functions for localized processing +DB

design the flow

move f/bwd in amove f/bwd in a controlled manner

Bank system

t t l t t tiscreen + steps to complete transactionwhy complicated: each category interacts diff.

Customers vs. Bank managers: different use casesCusto e s s a a age s d 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.: banking systemg g yMajor Advantages:• make use of local processors => speed up T. /min network usage• min data communications => improve securitymin data communications > improve security

41

object +usability

Flow of trans.

functions: b/w box

non-functional req.

Loading Stoad g Stress

42

typo; photo => news

price- book; net/gross

right template?

logo

button

Selected end-users to test

design ‘help’; modificationstrack user activity=> temp files;

test from button-up: individual; screen; Webapp

Not about WebApp written correctly, but executions on different platforms

mobile; desktop; laptop; p; p p

No new test cases but put together existing ones to check

All f : observable + not observable

business rules; unobservable functions: update inventory;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

direct access to specific screen

web screen hierarchy

book catalog

ServerClientClientNetwork

ghost processors; take up Resources.

If can respond acc to prescribe response time

?

Plot graph

processor, memory?

plot the graphplot the graph

Yes: data inside memory if transaction is not complete

over load => crash=> DB integrity

3 factorsOne of performance T.to assess recommended conn. speeds

3 factors

exceed operational limits

i t ?

overflow area

communicate ?

try to avoidprotected?

diff load=-> diff reactionsASAPASAP

Shut down some backend P: IRAS only eFilingShut down some backend P: IRAS- only eFilingTo cope with more concurrent users

L4: summary• Design Modeling Six layers of Design

– Interface; Art; Content; Arch;Interface; Art; Content; Arch; 

– Navigation:  design& manage the flow control

Component ddi i l f f l li d i DB– Component:  additional fs for localized processing +DB

• Testing WebApp – uncover errors– The testing process (link to Design models)– Content; UI; Usability; Compatibility;Content;  UI;  Usability; Compatibility; – Component‐level (functions)

i i i f– Navigation; Security; Performance; – Loading;  Stress ;