3/18/2012

Ni dung
1.
2.
3.
4.

Thit k giao din v kin trc

Nguyn Hng Phng, MSc
B mn H thng thng tin
Vin CNTT&TT HBK H Ni
Email: phuongnh@soict.hut.edu.vn
Site: http://is.hut.edu.vn/~phuongnh

Gii thiu
Lm nguyn mu giao din ngi dng
Thit k h thng
Bi tp tng hp

1. Gii thiu

2. Lm nguyn mu giao din ngi dng

Phn tch l tr li cu hi what v

ch tp trung p ng cc yu cu chc
nng i vi h thng,

Thit k l tr li cu hi how v li
tp trung p ng cc yu cu phi chc
nng (tin dng, hiu nng, thch ng
vi phn cng) i vi h thng. Thit
k s chnh sa li m hnh phn tch v
s a thm vo nhiu lp mi.

2.1. Mc ch
2.2. M t cc giao din ca h thng
2.3. Lm nguyn mu

2.1. Mc ch

2.2. M t cc giao din ca h thng

Da vo cc b to lp GUI (Graphical user

interface builder) ta thnh lp sm v nhanh mt
nguyn mu (prototype) giao din ngi dng, c
tnh thm d, nhm vo cc mc ch sau:

Nh ta bit, c mi cp i tc - ca s
dng lin quan, c t nht mt lp bin
chuyn i cc thng tin vo-ra. Th hin
ca lp bin chnh l giao din m by gi
ta cn phi m t.

Mun m t chng, ta di theo tng bc
trong kch bn ca mi ca s dng, xt ni
dung ca tng tc gia i tc v h
thng, cc thng tin vo v ra, cc hnh
ng c yu cu xc nh cc phn t
ca giao din.

 To ra mt mi trng lm vic c th, d tip xc, d

lm th, lm cho ngi dng tr nn yn tm hn, v
nng ng hn trong vic ng gp cho vic pht trin h
thng.
 Qua qu trnh dng th, ta thu thp c nhiu kin
phn hi c ch t pha ngi dng.
 Sm pht hin c cc yu cu hay chc nng b b st,
sm nhn thy cc im yu, ch kh khn nht ca h
thng.

3/18/2012

2.2. M t cc giao din ca h thng

2.3. Lm nguyn mu

Bn m t mt giao din thng m u vi cc im sau:

Tn ca giao din;

Din t ngn ni dung giao din vi 2 - 10 dng vn t;

Mc phc tp ca giao din (phc tp/chun/n gin);

Ghi ch thm, nu c.

Tip l cc m t chi tit, vi nhng c im k thut
khc bit, tu thuc vo 4 loi giao din sau:

Lm nguyn mu nn bt u cng sm cng tt.

Chng hn c th bt u lm nguyn mu ngay
sau khi a ra cc ca s dng.

Ngy nay c nhiu b to lp giao din ngi dng
(GUI builders) cho php lm cc nguyn mu giao
din m khng tn my cng sc.

Bc u th cc trng l rng hoc cho gi tr
gi. Cc nt v cc phn t i thoi khc c th
cha c hiu ng r rt v cn gii thch "ming".

Song dn dn qua nhiu vng lp, th giao din
tr nn sinh ng hn v i dn ti phng n
cui. V nh vy ngi dng c th lm vic th
vi cc nguyn mu.






Cc
Cc
Cc
Cc

giao din
thng tin
giao din
giao din

i thoi;
xut (th, bo co v.v...);
d liu t/n cc h thng ngoi;
chc nng n cc h thng ngoi.

2.3. Lm nguyn mu

3. Thit k h thng

Nguyn mu ch c ngha thm d, vy nn lm nhanh v

khng cu ton. Cha nn ch nhiu v trnh by, v m
thut m cn ch ni dung (cc trng, cc frame) v
lung dn dt t phn t giao din ny sang phn t giao
din khc.

Qu trnh pht trin nguyn mu lm ng thi vi qu trnh
phn tch v thit k, v h tr cho phn tch v thit k.

Song cn ch rng nguyn mu v giao din ni chung ch
l mt ngoi ca h thng, n cha phn nh ht tm su
ca h thng. Vy, cn ni r vi ngi dng l khng nn
o tng nguyn mu. Thc ra lm nguyn mu ch l mt
s h tr tt, ch khng th l s thay th cho cc bc
phn tch v thit k h thng mt cch nghim tc c.

3.1. Mc ch
3.2. Phn r HT thnh cc HT con
3.3. Miu t cc thnh phn vt l ca HT
3.4. B tr cc thnh phn kh thi vo cc
nt phn cng

10

3.1. Mc ch

3.2. Phn r HT thnh cc HT con

Thit k h thng chnh l thit k kin trc tng

th ca n.

Cc thnh phn to nn kin trc l g ph thuc
vo tng cch nhn i vi h thng. Trong phn
ny, ta tip cn kin trc theo 3 gc nhn (theo h
con, theo thnh phn phn mm, theo cc n v
phn cng):

Khi nim v h con

 Phn r h thng thnh cc h con (cc gi).

 Miu t cc thnh phn vt l ca h thng.
 B tr cc thnh phn kh thi vo cc nt phn cng.

11

 Cc lp l nhng thc th cu trc qu nh b so vi

mt HT thc. Bi vy, khi s cc lp trong h thng
ln ti hng chc, ta nn gom cc lp lin quan vi
nhau thnh tng nhm gi l cc h con.
 H con (subsystem) l mt s gom nhm lgic cc lp
c s gn kt bn trong mnh v s tng lin bn
ngoi yu.
 Thut ng h con c nhiu tc gi dng, v G.
Booch li gi l phm tr (category), thc ra khng
phi l thut ng chun ca UML. Tri li, UML dng
thut ng gi (package), cho nn ta cng s biu din
h con di dng gi, mang theo khun dp
<<subsystem>>.
12

3/18/2012

3.2. Phn r HT thnh cc HT con

3.2. Phn r HT thnh cc HT con

 Ni dung ca mt h con (gm cc lp v

cc mi lin quan gia chng) c UML 2.0
din t trong mt khung (frame), vi mt
ta vit trong mt hnh ch nht ct gc
theo khun dng:

 S cc lp trong mt h con khng nn t

qu, m cng chng nn nhiu qu (thng
th c khong mi lp l va).

[<loi>] Tn [<tham s>]

14

13

3.2. Phn r HT thnh cc HT con

3.2. Phn r HT thnh cc HT con

S gn kt cao ca cc lp trong cng mt h con th hin:

V mc ch: Chng phi cung cp cc dch v c cng bn
cht cho ngi dng. Nh vy chng phi thuc vo cng
mt lnh vc v cp mt s thut ng chung (chng hn
h con giao din cp cc thut ng nh: ca s, thc n,
nt nhn,...).

V xu th pht trin: Ngi ta tch cc lp bn vng vi cc
lp cn nhiu kh nng thay i. c bit, thng tch cc
lp nghip v vi cc lp ng dng v xp chng vo cc h
con khc nhau.

V ng dng cc cng ngh: tn dng cc dch v cng
ngh c sn, nh cc th vin chng trnh (lp/thnh
phn), cc GUI, cc h qun tr c s d liu v.v..., ta
thng tch cc h con giao tip, h con qun tr d liu ra
khi phn li (ng dng v nghip v) ca HT.

S tng lin gia cc h con th hin mi lin quan ph

thuc gia chng. M s ph thuc gia hai h con phn nh
cc mi lin quan tnh (tha k, lin kt...) v cc mi lin
quan ng (trao i thng ip) gia cc lp thuc hai h
con . S ph thuc gia cc h con phi cng n gin,
lng lo th cng tt. m bo tnh tng lin yu ny,
khi thnh lp h con, p dng cc quy tc sau:




Cc lp thuc vo cng mt ph h tha k nn c xp vo

cng mt h con.
Cc lp c mi lin quan kt nhp v hp thnh vi nhau
thng c xp vo cng mt h con.
Cc lp cng tc vi nhau nhiu, trao i thng tin nhiu, th
hin qua cc biu tng tc, th nn t chung vo mt h
con.
Nn trnh s ph thuc vng quanh gia cc lp.

15

16

3.2. Phn r HT thnh cc HT con

3.2. Phn r HT thnh cc HT con

Kin trc phn tng

T hai hnh thc giao tip m ta c hai cch

v h thng thnh cc h con:

 Mt h con thng c nh ngha bi cc dch v m n

cung cp. Mi lin quan gia mt h con vi phn cn li
ca h thng c th l ngang hng hay l khch
hng/dch v.
 Trong mi lin quan ngang hng (peer-to-peer) th mi
bn u c th truy cp cc dch v ca bn kia. By gi
s giao tip khng nht thit l dng cu hi v tr li
lin sau , m c th l mt s giao tip loanh quanh,
rt d dn ti nhng sai li ng tic v thit k.
 Cn mi lin quan khch hng/dch v (client/server) th
n gin hn: bn khch hng gi bn dch v v bn
dch v thc hin mt dch v theo yu cu v tr kt qu
cho bn khch hng. Bn khch hng th phi bit giao
din ca bn dch v, song bn dch v th khng cn bit
giao din ca bn khch hng.
17

 T chc h thng thnh cc tng theo chiu ngang, vi

mi quan h khch hng/dch v lun lun hng t tng
trn xung (cc) tng di. Mt th d ca h thng phn
thnh tng l h thng to ca s trong giao din ngi
dng ca my tnh.
 T chc h thng thnh lt theo chiu ng, vi quan h
ngang hng gia cc lt, tuy nhin cc lt l kh c lp
hoc tng lin yu vi nhau. Mt th d ca h thng
phn lt l mt h iu hnh, thng gm cc h con
nh l cc h qun l tp, iu khin thit b, qun l s
kin v ngt...

18

3/18/2012

3.2. Phn r HT thnh cc HT con

3.2. Phn r HT thnh cc HT con

R rng l t chc phn tng l ng

c u tin hn, v n mang li nhiu
u th trong thit k, trong ci t cng
nh trong s dng li.

Song i vi cc h thng ln th ta
thng phi phi hp c hai cch t
chc phn tng v phn lt, chng hn
phn h thng thnh tng, nhng trong
mi tng th li phn thnh lt.

Khi thc hin phn tng, th s tng l tu

thuc s phc tp ca h thng:
 Trong mt h n gin, th s tng c th ch l
hai (2-tiers). By gi tng khch hng th qun
l giao din ngi dng v cc qu trnh khai
thc, cn tng dch v th x l vic ct gi cc
d liu.
 Trong mt h phc tp hn, th ngi ta tch
tng trn thnh tng giao din - ng dng, v
di n l tng nghip v (hay lnh vc), bn
vng hn v c nhiu kh nng s dng li
hn. Vy l mt kin trc khch hng/dch
v ba tng (3-tiers).

19

20

3.2. Phn r HT thnh cc HT con

3.2. Phn r HT thnh cc HT con

Cui cng th trong cc h ln, s tng cn c th

nhiu hn (n-tiers), m in hnh l kin trc nm
tng, vi cc tng k t trn xung l:

Mt th d v kin trc
khch hng/dch v nm
tng cho nh bn, trong
mi gi (h con) u c
mang khun dp thch hp,
nh l:

<<user interface
framework>> (khun kh
giao din ngi dng),

 Tng trnh by: Chuyn cc d liu cho ngi dng v

bin i cc hnh ng ca ngi dng thnh cc s kin
vo ca h thng.
 Tng ng dng: bao gm cc i tng iu khin v
dn dt cc quy lut ca ng dng.
 Tng nghip v: bao gm cc i tng nghip v (hay
lnh vc), cng s ci t cc quy tc qun l chng.
 Tng truy cp d liu: phc hi cc i tng nghip
v t cc phng tin lu tr.
 Tng lu tr d liu: bo m s lu gi lu di cc d
liu.

<<user interface>> (giao din ngi dng),

<<domain>> (lnh vc),

<<infrastructure>> (c s h tng),

<<database>> (c s d liu).

21

3.3. Miu t cc thnh phn vt l ca HT

Thnh phn v biu thnh phn
 Nu nh biu gi (h con) m ta ni phn
trn phn nh cho gc nhn v cu trc lgic
ca h thng ( mc cao so vi biu lp), th
biu thnh phn, vi cc n nguyn trong
l cc thnh phn, li cho ta mt cch nhn
v cu trc vt l ca h thng.
 Ch "vt l" y c hiu theo ngha l s
miu t hng ti cc sn phm phn mm, l
kt qu ca s ci t v thc s tn ti, ch
khng phi l cc sn phm lgic, kt qu ca
qu trnh phn tch. Tuy nhin y ta cng
cha cp ti phn cng, mc d tnh vt l
ca n cng l ng nhin.
23

22

3.3. Miu t cc thnh phn vt l ca HT

 UML nh ngha thnh phn (component) l
mt b phn vt l v thay th c ca h
thng, thch ng v cung cp s thc hin
cho mt tp cc giao din.
 Ni n gin hn , th thnh phn l mt ci
t ca mt tp hp cc phn t lgic, nh
cc lp hay cc hp tc.

24

3/18/2012

3.3. Miu t cc thnh phn vt l ca HT

3.3. Miu t cc thnh phn vt l ca HT

C ba loi thnh phn:

 Cc thnh phn trin khai (deployment
components): l cc thnh phn cn v
to nn mt h thng kh thi, nh l cc th
vin ng (DLL) v cc m kh thi
(executables). nh ngha thnh phn ca UML
l rng bao hm cc m hnh i tng
kinh in, nh l COM+, CORBA, v Enterprise
Java Beans, cng nh cc m hnh i tng
khc bit nh l cc trang Web ng, cc bng
c s d liu, v cc m kh thi s dng nhng
c ch truyn thng ring.

 Cc thnh phn sn phm lm vic (work

product components): l cc thnh phn c
t qu trnh pht trin h thng, bao gm cc
tp m ngun, cc tp d liu, t m ta
to lp ra cc thnh phn trin khai. Cc thnh
phn ny khng trc tip tham gia vo h
thng thc thi, nhng khng c chng th
khng to c h thng thc thi.
 Cc thnh phn thc hin (execution
components): l cc thnh phn c to
nn nh l mt kt qu ca mt h thc hin,
chng hn mt i tng COM+, c c th
ho t mt DLL.
26

25

3.3. Miu t cc thnh phn vt l ca HT

3.3. Miu t cc thnh phn vt l ca HT

t chc cc thnh phn li vi nhau, ta c hai

cch:

Cc mc ch m hnh ho ca biu
thnh phn

 Gom cc thnh phn vo cc gi, ngha l a chng vo

cc h con;
 Thit lp cc mi lin quan ph thuc gia chng, v nh
th ta c mt biu thnh phn.

 Nh trnh by, c nhiu loi thnh phn

(t nht c ba loi chnh l thnh phn trin
khai, thnh phn sn phm lm vic v
thnh phn thc hin), vy biu thnh
phn lp ra phi c mc ch m t loi
thnh phn no.

27

28

3.3. Miu t cc thnh phn vt l ca HT

3.3. Miu t cc thnh phn vt l ca HT

M hnh ho cc thnh phn kh thi v th vin: C th

ni mc ch chnh ca vic s dng biu thnh
phn l m hnh ho cc thnh phn trin khai, to
nn ci ci t ca h thng.
 Nu ta mun ci t mt h thng ch gm ng
mt tp kh thi (.EXE), th ta chng cn dng ti
thnh phn.
 Ngc li nu h thng gm nhiu tp kh thi v
lin kt vi cc th vin i tng th ta cn dng
biu thnh phn gip ta hin th, c t,
thnh lp v t liu ho cc quyt nh ca chng ta
i vi h thng vt l.

Th d: Mt biu cc thnh phn trin

khai

29

30

3/18/2012

3.3. Miu t cc thnh phn vt l ca HT

3.3. Miu t cc thnh phn vt l ca HT

M hnh ho cc bng, cc tp v cc t
liu: Bn cnh cc tp kh thi v th vin
to nn phn chy c ca h thng, th
cn nhiu thnh phn b tr khc, gi l
cc thnh phn ph tr, cn cho vic ci
t h thng. Chng hn ci t, ta vn
cn cc tp d liu, cc t liu tr gip, cc
scripts, cc tp log, cc tp khi to, cc
tp xp ch hay g b. M hnh ho cc
thnh phn ny cng l mt phn quan
trng din t hnh trng ca h thng.

Th d: T biu trn, thm vo cc

bng, cc tp v cc t liu

31

32

3.3. Miu t cc thnh phn vt l ca HT

3.3. Miu t cc thnh phn vt l ca HT

M hnh ho m ngun: M hnh ho m ngun

cng l mt mc ch ca vic to lp biu
thnh phn. Cc tp ngun dng cha cc chi
tit v cc lp, cc giao din, cc hp tc v cc
phn t lgic khc; chng to nn mt bc trung
gian to lp cc thnh phn vt l, nh phn
(nh mt cng c no ). Cc cng c (chng
hn chng trnh bin dch) thng i hi cc tp
ngun phi c t chc theo mt quy cch nht
nh no (thng thng l mt hay hai tp cho
mt lp). Cc mi lin quan ph thuc gia cc
tp ny phn nh mt trt t bin dch.

Th d: M hnh ho cc tp ngun dng

xy dng th vin render.dll t cc
th d trc

33

34

3.4. B tr cc thnh phn kh thi vo cc nt phn cng

3.4. B tr cc thnh phn kh thi vo cc nt phn cng

b tr cc thnh phn phn mm ln cc phn cng, ta

dng cc biu trin khai.

Biu trin khai (deployment diagram) l mt biu din
t s b tr cc executable artifacts trn underlying platform.
N gm cc nt v cc kt ni gia cc nt .

Mt nt (node) l mt phn t vt l tn ti vo lc chy v
biu din cho mt ti nguyn tnh ton (computational
resource), ni chung th phi c t nht mt ch nh, v
thng thng th c thm kh nng x l. Mt nt c biu
din bi mt hnh hp, c mang tn.

Nh vy c hai mc din t ca biu trin khai:

mc lp (tng t mt biu lp) v mc c th
(tng t mt biu i tng).

Theo nh ngha nh trn, nt c th l:




Nu tn ny khng gch di, th nt th hin mt lp cc ti

nguyn,
Nu tn c gch di, th nt th hin mt c th ti nguyn.

35

 Mt thit b (nt cng), thng mang khun dp

<<device>> (hoc c th hn l processor, console,
kiosk, printer,...);
 Mt mi trng thc hin (nt mm), thng mang
khun dp <<execution env>>, nh l EJB Container hay
l J2EEServer.

Hnh sau y cho mt biu trin khai ( mc c

th) biu din cho hnh trng vt l ca h thng
thng tin v trng i hc.
36

3/18/2012

3.4. B tr cc thnh phn kh thi vo cc nt phn cng

3.4. B tr cc thnh phn kh thi vo cc nt phn cng

Nt WebServer cha c
khun dp, l v ngi
pht trin h thng cha c
quyt nh: nt c th
n gin l mt loi phn
mm
no (chng hn mt
Browser), hoc l mt thit
b vt l.
Cc nt c th cha cc nt
khc hoc cc sn vt phn
mm. Chng hn nt
ApplicationServer cha nt
EJBContainer (mt nt
mm), v nt ny li cha
ba thnh phn phn mm,
mt c t b tr, v mt sn
vt phn mm.

Cc kt ni (connections) l cc mi lin
quan giao tip gia cc cp nt, th hin
v mt vt l bng mt ng truyn (nh
l mt kt ni Ethernet, mt ng truyn
tun t hay mt bus dng chung).

Mi kt ni h tr cho mt hay nhiu giao
thc truyn thng, m ta cn ch r bng
cc khun dp thch hp. Bng sau cho mt
s khun dp thng dng cho cc kt ni,
cng vi ngha ca chng.
37

38

3.4. B tr cc thnh phn kh thi vo cc nt phn cng

4. Bi tp tng hp

Khun dp
Asynchronous
HTTP
JDBC
ODBC

xut mt
kin trc
phn tng
cho HT YCT

RMI
RPC
Synchronous
Web services

ngha
Mt kt ni khng ng b,
HyperText Transport Protocol, mt giao thc Internet
Java Database Connectivity, mt Java API truy cp CSDL
Open Database Connectivity, mt MicroSoft API truy cp
CSDL
Remote Method Invocation, mt giao thc lin lc ca Java
Remote Procedure Call
Mt kt ni ng b, trong bn gi ch tr li t bn nhn
Lin lc qua cc giao thc web services nh l SOAP v UDDI

layer
Tng trnh by
GD-Nhnvin

GD-NgiPTT

layer
Tng ng dng

Java

layer
Tng nghip v
Tiv

nghT
CatalT
layer
Tng dch v KT

Quyntruycp

40

39

4. Bi tp tng hp

4. Bi tp tng hp

Trong kin trc phn tng trn, th gi java cha cc lp c

s dng chung cho mi tng, cn cc gi con th cha cc lp
nh sau:
layer
Tng ng dng

GD-NgiPTT
+W-NgiPTT
+W-Nidung
+W-LpT
+W-Khc

GD-Nhnvin
+W-Nhnvin
+W-nxinT

CatalT

Tiv
+Hon
+PhiuChi

+Catal
+PhntCatal
+LpT
+Ch
+Khc
+Nidung
+CsT

Cu hi 27: Hy xut mt B thnh phn cho hai vng

lp u ca HT. Ch cn a ra cc thnh phn khng ln
lm, biu din cho mt hp tc gia nhiu lp. ng
qun ngn ng ch l Java.
Applet
GUI nguoiPTDT

+K-LpT
+K-CsT
+K-Ch
+K-nxinT

CSDL-Catalo

:Ngi PTT

Aplication
QuyenTruycap

EXE
CataloDT

nghT

DLL
Lich

+Nhnvin
+nxinT
+ngk
+Trli
+ng
+Khngng

CSDL-NV

Applet
GUI
Nhanvien
EXE
DenghiDT

41

:Nhnvin

42

3/18/2012

Hi - p

4. Bi tp tng hp
Cu hi 28: Hy xut mt B b tr cho hai vng lp u ca HT.

PC
Trm client

Applet
GUI
nguoiPTD
T

Unix
Server nghip v

PC NT server
Intranet Server

EXE
CataloDT
CSDL-Catalo

PC
Trm client

Aplication
QuyenTruyca
p

EXE
DenghiD
T

CSDL-NV

Applet
GUI
Nhanvien

43

44

Li hay p

"T ra hn bn, bn s thnh th ca ta;

chu nhng bn, bn s lin kt vi ta"
La Rochefoucauld

45