You are on page 1of 8

3/18/2012

Ni dung

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

1. 2. 3. 4.

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

1. Gii thiu
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. Lm nguyn mu giao din ngi dng

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

2.1. Mc ch
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:
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.

2.2. M t cc giao din ca h thng


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.
6

3/18/2012

2.2. M t cc giao din ca h thng


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:
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
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.
8

2.3. Lm nguyn mu
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. Thit k h thng
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
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):
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.

3.2. Phn r HT thnh cc HT con


Khi nim v h con
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

11

3/18/2012

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:

3.2. Phn r HT thnh cc HT con


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>]

13

14

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.
15

3.2. Phn r HT thnh cc HT con


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.

16

3.2. Phn r HT thnh cc HT con


Kin trc phn tng
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

3.2. Phn r HT thnh cc HT con


T hai hnh thc giao tip m ta c hai cch v h thng thnh cc h con:
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


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.

3.2. Phn r HT thnh cc HT con


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).
20

19

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:
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.
21

3.2. Phn r HT thnh cc HT con


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),

<<user interface>> (giao din ngi dng), <<domain>> (lnh vc), <<infrastructure>> (c s h tng), <<database>> (c s d liu).
22

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

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 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.
25

3.3. Miu t cc thnh phn vt l ca HT


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

3.3. Miu t cc thnh phn vt l ca HT


t chc cc thnh phn li vi nhau, ta c hai cch:
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.

3.3. Miu t cc thnh phn vt l ca HT

Cc mc ch m hnh ho ca 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


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.

3.3. Miu t cc thnh phn vt l ca HT

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 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.
31

3.3. Miu t cc thnh phn vt l ca HT

Th d: T biu trn, thm vo cc bng, cc tp v cc t liu

32

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.

3.3. Miu t cc thnh phn vt l ca HT

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 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.
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.

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

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:
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

35

3/18/2012

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.
37

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

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.
38

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


Khun dp Asynchronous HTTP JDBC ODBC 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

4. Bi tp tng hp
xut mt kin trc phn tng cho HT YCT
layer Tng trnh by GD-Nhnvin GD-NgiPTT

layer Tng ng dng layer Tng nghip v Tiv CatalT layer Tng dch v KT Quyntruycp nghT

Java

39

40

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:
GD-NgiPTT +W-NgiPTT +W-Nidung +W-LpT +W-Khc GD-Nhnvin +W-Nhnvin +W-nxinT layer Tng ng dng +K-LpT +K-CsT +K-Ch +K-nxinT

4. Bi tp tng hp
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 :Ngi PTT

CSDL-Catalo

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

Aplication QuyenTruycap nghT +Nhnvin +nxinT +ngk +Trli +ng +Khngng Applet GUI Nhanvien

EXE CataloDT DLL Lich

Tiv +Hon +PhiuChi

CSDL-NV

EXE DenghiDT
41

:Nhnvin

42

3/18/2012

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

Hi - p

PC Trm client Unix Server nghip v


EXE CataloDT CSDL-Catalo

Applet GUI nguoiPTD T

PC NT server Intranet Server

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