程序代写代做代考 compiler database distributed system ER Java flex SQL concurrency Hive javascript gui Chapter 4

Chapter 4

Chapter 7
Design: Architecture and Methodology

Design Topics Covered
Architectural .vs. Detailed design

“Common” architectural styles, tactics and reference architectures

Basic techniques for detailed design

Basic issues with user-interface design

Design
Starts mostly from/with requirements (evolving mostly from functionalities and other non-functional characteristics)
How is the software solution going to be structured?
What are the main components — (functional comp)
Often directly from Requirements’ Functionalities (use Cases)
How are these components related ?
possibly re-organize the components (composition/decomposition)
Two main levels of design:
Architectural (high-level)
Detailed design
How should we depict design–notation/language?

Relationship between Architecture and Design
Detailed Design
come from
Requirements &
Architecture

Software Architecture
Structure(s) of the solution, comprising:
Major Software Elements
Their externally visible properties
Relationships among elements

Every software system has an architecture

May have Multiple structures !
multiple ways of organizing elements, depending on the perspective

External properties of components (& modules)
Component (Module) interfaces
Component (Module) interactions, rather than internals of components and modules

Views and Viewpoints
View – Representation of a system structure
4+1 views (by Krutchen)
Logical (OO decomposition – key abstractions)
Process (run-time, concurrency/distribution of functions)
Development (package structure)
Physical (mapping of software to hardware)
+1: use cases
Other classification (Bass, Clements, Kazman)
Module
Run-Time
Allocation (mapping to development environment)
Different views for different people

Architectural Styles/Patterns
Pipes-and-Filters
Event-Driven
Client-Server
Model-View-Controller (MVC)
Layered
Database Centric
Three tier
We discuss Architectural Styles/Patterns as
“reusable” starting point for Design activities

Pipe-Filter architecture style
The high level design solution is decomposed into 2 “generic” parts (filters and pipes):
Filter is a service that transforms a stream of input data into a stream of output data

Pipe is a mechanism or conduit through which the data flows from one filter to another
Input
time cards

Prepare for
Check processing

Process Checks

Problems that require batch file processing seem to fit this architecture: e. g. payroll, compilers, month-end accounting
** Reminds one of DFD without the data store or source sink **

Pipe-Filter in Linux

From https://archive.org/details/ProgrammingPearls2ndEditionJonBentley

Event-Driven (Realtime)
The high level design solution is based on an event dispatcher which manages events and the functionalities which depends on those events. These have the following characteristics:
Events may be a simple notification or may include associated data
Events may be prioritized or be based on constraints such as time
Events may require synchronous or asynchronous processing
Events may be “registered” or “unregistered” by components

Personal (device)
dispatcher
voice
call
text
msg

Image

keypad

Phone
processing
Txt
processing
Image
processing

Problems that fit this architecture includes real-time systems such as: airplane control;
medical equipment monitor; home monitor; embedded device controller; game; etc.
– – – try a commercial flight control system – – –

Events in JavaScript

Events in JavaScript
Registering an event listener, extracting data from an occurrence of the event:
var button = window.document.getElementById(“msgButton”);
button.addEventListener(“click”, sayHello, false);

function sayHello(event) {
window.alert(
“Hello World!\n\n” +
“Event type: ” + event.type + “\n” +
“Event target element type: ” + event.target.nodeName);
return;
}

Basic Client-Server Style
Application split into client component and server component

Client-Server
Web applications can be viewed a client-server architecture at some level
Client: Browser + JavaScript code run by the browser
Server: Web server (e.g., apache) + server-side code that stores, manipulates, and accesses data that can be accessed by multiple clients

Client-Server Style
Client may connect to more than one server (servers are usually independent)

Model
Controller 1
View 1
Controller 2
View 2

Separates model (data) from view
Controller often integrated with view nowadays
Model View Control (MVC) Style
most of the internet web applications fall under this style

Dr Jackson’s thoughts on Web MVC as a server-side architecture (arrows show flow of data):
Controller
(Servlet)
Model
(DB)
View 1
(JSP)
View 2
(JSP)

Model View Control (MVC) Style

Browser
Input

Browser
Output
Browser
Output

Variation on MVC

Especially useful if we want to run on different types of devices: Ideally, only the View needs to change as we change devices
View
(all GUI calls)
Model
(DB)
Presenter
(logic)

Model View Presenter (MVP)

User
Input

Visual
Output

The “outer” layer can only ask for service from the “inner” layer
or “upper” layer can only ask for service from “lower” layer.
– strict layering—– only directly inside or below layers
– relaxed layering—- any inside or below layers

Layered Style

Hospital
DB

Patient processing
Room Scheduling
Nurses Scheduling

Shared Data (DB) centric style
Very popular within the business applications community

Purchasing

.
.

DB

Client 1a
Client 1b
Client 2

Business
Tier

Three tier style (mixture)
Clients do not access DB directly
Better Flexibility, integrity (why?)
Reminds one of Client-Server or MVC ?

Architectural Tactics
Tactics (in contrast to architectural style) are for solving “smaller, specific” problems

Do not affect overall structure of system

Example: we add specific functionalities or component (e.g. to increase reliability) in the design for fault detection —- especially for distributed systems:
heartbeat
ping / echo

Reference Architectures
Full-fledged architectures
Serves as “templates” or as “a reference” for a class of systems
Example: J2EE Reference Architecture (MVC2)

DB

Client1a
Client1b
Client2

Web
Tier

Business
Tier (EJB)

There also are “application domain specific”
reference architectures

Service-Oriented Architecture (SOA) Reference Architecture

Detailed Design
Further Refine Architecture and match with Requirements

How detailed ?

How formal ?

Maybe of different levels of detail for different views

Detailed Design
Different software elements/different development strategies call for different design skills
Functional decomposition: for non-object-oriented development
Relational database design: if a (standard) relational database will be used
Object-oriented design: widely used
User interface design

Functional Decomposition Technique
Dates back to “structured programming” [now (non-OO)Web apps with PHP tool]

Start with: main (task/requirements) -> module

Refine into sub-modules

There are alternative decompositions

0. Main
1.Student
1.3 Delete
1.2 Modify
1.1 Add
2.Courses
3. Sections
4. Registration
2.1 Add
3.1 Add
4.1 Register
2.2 Modify
3.2 Modify
4.2 Drop
2.3 Delete
3.3 Delete

Possible Decomposition of
(student- course management app)

“Alternative” Decomposition/Composition

Relational Database Design
Most databases use relational technology

Relations (tables)
Two-dimensional sets
Rows (tuples), Columns (attributes)
A Row may be an entity, Columns may be relationship or attributes
Primary key (unique identifier) – for search
Foreign keys (connects tables)

Database Design
Conceptual modeling (done during analysis/requirement phase) produces ER diagram
Logical design (to relational)
Physical design (decide data types, etc.)
Deployment/maintenance
Low-level physical (which hard-drive etc)
Adjustment of indexes

ER diagram

Entity-Relationship diagrams
Entities (rectangles)
Weak – double lines (depends on other entities to identify a specific entity)
Relationships (diamonds)
Attributes (ovals)
Multi-valued – double lines
Identifying – underlined

Requirements Definition using
Entity- Relation-Diagram (ERD)
order
items

includes

1
m
Cardinality: specifies the number of occurrences of entities
customer
order

Modality: specifies the necessities of relationship to exist
Captures – relations among data

Requirements Definition specifying
Entity and Attributes
Employee
Address
Name
Age

Street
City
State
Zip

(a) Graphical form
(a) Tabular form

Employee
– Name

– Address
– Age
– Street
– City
– State
– Zip

Captures – relations among data

Logical DB Design- Entities
Table per entity
Flatten composite attributes
For weak entities, add the primary key of the strong entity
Course Number
Title
CreditHours
CourseNumber
SectionNumber
Semester
Year
Time
Location

Course
Section

Logical DB Design – Multi-valued
New table needed for multi-valued attributes

Logical DB Design – Relationships
If one side related to just one entity, add foreign key to that side
For many-to-many, need new table
For ternary, need new table

Physical DB Design
Data types for each attribute
Check which ones your DBMS support
Encoding
Decide on Indexes
Searches are faster, updates are slower
Indexes consume space
Can always adjust during deployment
Denormalization done sometimes (avoid)

OO Design
First step: Review & Refine use cases/user stories
Decide
Which classes to create
How the classes are related
Use UML as the Design Language

Register For Section
Add Course
Add Section
Add Student
Choose Section

Student
Registrar

Use case diagram
<>
<>
<>

Class Design
Classes represent real-world entities or system concepts
Organized into classes: objects in a class have similar characteristics
Classes have properties (attributes or data)
Classes also have methods (performs functions)
Student
dateOfBirth : Date
name : String

getAgeInYears() : int
getAgeInDays() : int

Student

School

0..*
1..1
Is Enrolled
UML Class diagrams

Association

Composition: Strong form of aggregation (composed objects do not exist independent of their composition)

School

Building

Bldg-Name: String
Bldg_number: int
Street-name: string
city : String
state : String
zipCode : int

Use unfilled diamond for aggregation (part-of)

Student

Person

Employee

UML Class diagrams – Inheritance
Triangle points from subclass(es) to superclass

Accepted

Active

Alumni

Expelled

Inactive

enroll:
graduate:
expel:
fails to
enroll:
enroll:
UML State diagram
depicting a student’s “status” in school

UML “Sequence Diagram”
used to depict a flow of interactions

Object-Relational Impedance Mismatch
(an “advanced” topic)

Elem 1
Elem 2
Elem 3
Elem 4
Elem 5
Relational Table
Encapsulated Object
?
How do we handle mismatches between object-oriented concepts and
Relational DB such as :
– typing
– private and public
– inheritance and polymorphism
– nested structure versus table structure

User Interface Design
Most apparent to the user
Two main issues
i) Flow of interactions
Ii) Look and feel
Types of interfaces
Command-Line
Text menus
Graphical (GUI)

Flow of interactions
Prototype Screens
Registration:
Select term
Registration: shows term
Select first course
Registration: shows term, course(s) with schedule and cost
Select *Additional course; *Delete course; *Finish registration
Registration: shows final schedule
Select Confirm or Cancel

High Fidelity Prototype

User: Screens: Process:
aStudent

Student selects course and clicks “Add Course”

User interaction added to the sequence diagram

Norman’s 7 Stage Model

3 specifies action

4 executes action

5 user perceives feedback

6 interprets feedback

7 evaluates

1 user forms goal

2 forms intention

The GOMS Model
(an “advanced” topic for UI)
Consider different kinds of users
Evaluation and prediction of UI’s
Four factors (for the kind of user)
Goals of the user
Operations provided by the system
Methods or the sequence of operations
Selection Rules for the methods

Other UI Issues
Kinds of users
Heuristics: consistency!
UI Guidelines for specific systems
Multicultural issues
Metaphors
Multiplatform software
Accessibility
Multimedia Interfaces

HTML-Script simple example

Sample HTML Visual result (possible)

Username:

Password:


Model-View-Controller (MVC) software project
Model
SQL database
View HTML
Controller PHP

E-MAIL
StudentId
e-mail
Id
STUDENT
Name
Gender

Id
STUDENT
Name
Gender
SECTION
CourseNumber
SectionNumber
Semester
Year
Time
Location
TAKES
CourseNumber
SectionNumber
Semester
Year
Student_id
Grade

/docProps/thumbnail.jpeg