Timhieumanguonmophonegapvaxaydungungdung Ngoquangtrung 130421105036 Phpapp02

Ti: Tm hiu nn tng m ngun m Phonegap v xy dng ng dng
Ng Quang Trung email: ngotrung.poli.t@gmail.com - 1

Website: http://aboutsedi.blogspot.com/
MC LC
LI NI U ........................................................................................................ 4
CHNG I: TNG QUAN V HTML5 ................................................................ 5
1.1. Khi nim HTML5 ....................................................................................... 5
1.1.1. Lch s hnh thnh.................................................................................. 5
1.1.2. Qu trnh chun ha ............................................................................... 6
1.2. Mt s c im ni bt ca HTML5 ............................................................ 7
1.2.1. Ni dung a dng ................................................................................... 8
1.2.2. H tr thay th Flash .............................................................................. 8
1.2.3. Tng tnh bo mt .................................................................................. 9
1.2.4. n gin ha vic pht trin web ......................................................... 10
1.3. Cc tnh nng mi c trong HTML5 ........................................................... 10
1.3.1. HTML5 h tr cc phn t nh ngha mi .......................................... 10
1.3.2. HTML5 h tr ha tng tc vi phn t <canvas> ........................ 12
1.3.3. HTML5 cho php cc ng dng Lu tr cc b vi local storage ........ 13
1.3.4. HTML5 h tr pht <audio> v <video> ............................................. 14
1.3.5. HTML5 Ci tin biu mu Web ........................................................... 15
1.3.6. HTML5 h tr kh nng truy cp ti h thng file system.................... 17
1.3.7. HTML5 tng tc hiu nng x l vi Web Worker v Application Cache
...................................................................................................................... 18
1.3.8. HTML5 h tr nh v ngi dng ....................................................... 19
1.3.9. HTML5 h tr kh nng cng tc v giao tip thi gian thc ............... 19
1.3.10. HTML5 h tr tip nhn cc s kin events c gi t my ch ...... 20
1.3.11. Nhng tnh nng khc ........................................................................ 21
CHNG II: GII THIU V FRAMEWORK M NGUN M PHONEGAP 22
2.1. Phonegap l g ? .......................................................................................... 22
2.2. i nt v lch s ca Phonegap ................................................................. 23
2.3. Ti sao li s dng Phonegap ? ................................................................... 24
2.4. Cch thc Phonegap hot ng ................................................................... 25
2.5. Cc hm APIs m Phonegap h tr hin ti trn cc nn tng mobile ......... 29
CHNG III : CCH THIT LP CI T MI TRNG LP TRNH CHO
PHONEGAP ......................................................................................................... 30
3.1. Cch thit lp ci t Phonegap cho Android Project bng Eclipse ............. 30
3.1.1. Yu cu ci t ..................................................................................... 30
3.1.2. To project mi s dng Phonegap trong Eclipse IDE ......................... 31
3.1.3. To project mu HelloWorld. ............................................................... 36
3.1.4. Chy chng trnh trn nn Android Emulator ..................................... 38
3.2. Tng tc qu trnh Debug m ngun bng cch s dng AndroVM........ 38
3.2.1. Yu cu ci t ..................................................................................... 39
3.2.2. Cch thit lp ci t AndroVM ........................................................... 39
3.2.3. Cch thc hin lnh kt ni my o vi Android Debug Bridge (adb) .. 43
3.2.4. Cch kt ni mi trng lp trnh Eclipse IDE vi my o AndroVM .. 45
CHNG IV : PHN TCH V THIT K CHNG TRNH NG DNG .... 47
4.1. Gii thiu v chng trnh ng dng .......................................................... 47
4.2. Phn tch chng trnh ng dng v chc nng ........................................... 48
4.2.1. Biu phn r chc nng ................................................................... 48
4.2.2. c t chc nng ca chng trnh ...................................................... 49
4.3. Phn tch chng trnh ng dng v lung d liu ...................................... 51
4.3.1. Biu lung d liu mc khung cnh ................................................ 51
4.3.2. Biu lung d liu mc nh ........................................................... 52
4.3.3. Biu lung d liu mc di nh gii thch chc nng thc hin thao
tc chm ........................................................................................................ 53
4.3.4. Biu lung d liu mc di nh gii thch chc nng thm nh.... 54
4.3.5. Biu lung d liu mc di nh gii thch chc nng thm text ... 55
4.3.6. Biu lung d liu mc di nh gii thch chc nng chnh sa nh
...................................................................................................................... 56
4.3.7. Biu lung d liu mc di nh gii thch chc nng chnh sa text
...................................................................................................................... 57
4.3.8. Biu lung d liu mc di nh gii thch chc nng chia s
facebook ........................................................................................................ 58
4.4. Thit k c s d liu ca chng trnh ng dng ....................................... 59
4.5. Thit k giao din chng trnh ng dng ................................................... 60
4.5.1. Mn hnh chnh ca ng dng .............................................................. 60
4.5.2. Bng hp thoi th vin nh ................................................................ 62
4.5.3. Mn hnh nh t thit b ...................................................................... 64
4.5.4. Bng hp thoi thm text..................................................................... 65
4.5.5. Nhm nt iu khin i tng ha ............................................... 66
4.5.6. Bng hp thoi chnh sa nh .............................................................. 67
4.5.7. Bng hp thoi chnh sa text ............................................................. 69
TI LIU THAM KHO ..................................................................................... 71
PH LC.............................................................................................................. 72

LI NI U
in thoi thng minh hay cn gi l smartphone thc s mang n mt
cuc cch mng cho cc thit b di ng, trong thi k m cng ngh s pht trin
vi tc chng mt nh hin nay. Nhu cu s dng thit b di ng tr nn rt
ph bin khng ch Vit Nam m trn ton th gii. S tin b vt bc ca cng
ngh lm thay i hon ton thi quen cng nh hnh vi ca con ngi.Trong
tng lai, thit b di ng s tr thnh phng tin giao tip v lm vic ch yu
ca con ngi. V phn ct li to ra sc hp dn t nhng chic smartphone
chnh l h iu hnh v cc ng dng m chng ang chy.
Hin ti, cc ng dng dnh cho thit b di ng ang b phn mnh rt ln do cc
hng cng ngh ln cnh tranh, ganh ua nhau to ra cc nn tng h iu hnh di
ng ca ring mnh. Do Phonegap ra i vi mc ch vit mt ln, bin dch
qua cloud v chy khp ni tng thch vi hu ht cc nn tng h iu hnh di
ng hin ti, nhn c s ng gp ca rt nhiu t chc v cng ng cng
ngh ln. Phonegap gip gim nh gnh nng - cn phi nm bt v hiu r v cc
cng ngh bn trong mi nn tng i vi nh lp trnh trong vic to ra ng
dng c th chy trn a nn tng di ng. Gi y, vi s h tr c lc ca
Phonegap, nh lp trnh ch cn nm bt v chuyn su v 1 cng ngh duy nht,
l cng ngh nn Web(bao gm HTML5, Javascript, CSS). Vi th mnh bn thn
v lp trinh web v vi nhng l do trn, em chn ti Tm hiu nn tng m
ngun m Phonegap v xy dng ng dng
Em xin chn thnh cm n ThS. on Duy Trung trc tip hng dn ti
ny. Em cng xin cm n cc Thy C trong Vin Ton ng dng v Tin hc to
iu kin thun li cho em hon thnh ti.
Sinh vin thc hin
Ng Quang Trung
CHNG I: TNG QUAN V HTML5
1.1. Khi nim HTML5
HTML5 l mt ngn ng cu trc v trnh by ni dung cho World Wide
Web v s l cng ngh ct li ca Internet trong tng lai khng xa, c xut
u tin bi Opera Software. y l phin bn th 5 ca ngn ng HTML v hin
ti vn ang c pht trin bi World Wide Web Consortium v WHATWG. Mc
tiu ct li khi thit k ngn ng l ci thin kh nng h tr cho a phng tin
mi nht trong khi vn gi c vic con ngi v cc thit b, cc chng trnh
my tnh nh trnh duyt web, trnh c mn hnh, v.v.. c th c, hiu, hay x l
mt cch d dng. HTMl5 vn s gi li nhng c im c bn ca HTML4 v b
sung thm cc c t ni tri ca XHTML, DOM, c bit l JavaScript.
L phin bn tip sau ca HTML 4.01 v XHTML 1.1, HTML5 l mt phn ng
p li li ph bnh rng HTML v XHTML c s dng ph bin trn World
Wide Web l mt hn hp cc tnh nng vi cc thng s k thut khc nhau, c
gii thiu bi nhiu nh sn xut phn mm v d Adobe, Sun Microsystems,
Mozilla, Apple, Google,... v c nhiu li c php trong cc vn bn web. y l
mt n lc to nn mt ngn ng nh du c th c vit bng c php HTML
hoc XHTML. N bao gm cc m hnh x l chi tit tng tnh tng thch, m
rng, ci thin v hp l ha cc nh du c sn cho ti liu, a ra cc nh u
mi v gii thiu giao din lp trnh ng dng (application programming interfaces
API) to ra cc ng dng Web phc tp. Cng mt l do nh vy, HTML5 l
mt ng c vin tim nng cho nn tng ng dng di ng. Nhiu tnh nng ca
HTML5 c xy dng vi vic xem xt chng c th s dng c trn cc thit
b di ng nh in thoi thng minh v my tnh bng hay khng.
1.1.1. Lch s hnh thnh
Nm 1991 HTML ra i bi W3C, cho n HTML phin bn 4 ra mt nm
1997 v ngay sau n dng pht trin t nm 1998. Sau khi pht trin n
phin bn 4.01, W3C ngng pht trin HTML chuyn sang pht trin XHTML. n
nm 2006 W3C li quay li pht trin HTML. n nm 2009, chun XHTML2 sau
5 nm nghin cu khng th ra i th W3C ngng pht trin XHTML (2.0),
trong khi , do nhu cu bc thit m Opera, Mozilla, v Apple thnh lp
WHATWG (Web Hypertext Application Technology Working Group) nghin
cu mt gii php mi. Gii php ny c W3C chp nhn. S hp tc
ca W3C v WHATWG thai nghn ra HTML5 t nm 2009. c pht trin
theo m hnh cun chiu nn HTML5 vn ang hon thin nt cc phn cn li,
nhng nhng phn ra mt th nhanh chng c h tr.
HTML5 sm c h tr trong cc trnh duyt trn PC nh Mozilla Firefox
(phin bn 3.5+), Apple Safari (phin bn 4.0+), Opera (phin bn 10.0+), Google
Chrome (phin bn 3.0+), chm tr nht l Internet Explorer ca Microsoft cng
bt u h tr HTML5 t phin bn 9. Cc trnh duyt s dng trn mobile v my
tnh bng cng h tr HTML5 tng ng PC.
1.1.2. Qu trnh chun ha
Thng 9 nm 2012, W3C a ra 1 bn k hoch d kin, theo s pht hnh
phin bn HTML 5 chnh thc vo cui nm 2014, v pht hnh phin bn HTML
5.1 hon thin vo cui nm 2016.

Di y l biu thi gian qu trnh chun ha HTML cc phin bn 5.0, 5.1, 5.2
Phin bn 2012 2013 2014 2015 2016
HTML 5.0 Phin bn
gn hon
thin
Phin bn
ku gi
nhn xt
Phin bn
pht hnh
chnh thc

HTML 5.1 Phin bn
d tho u
tin
Phin bn
ku gi gp
cui cng
Phin bn
gn hon
thin
Phin bn
pht hnh
chnh thc
HTML 5.2 Phin bn
d tho u
tin

Bng 1 : Bng biu thi gian qu trnh chun ha HTML5
1.2. Mt s c im ni bt ca HTML5
HTML5 mang li cho ngi dng tri nghim lt Web hon ton mi, nhanh
hn, n nh hn v bo mt hn. HTML5 s gip cc ni dung trn Web hot ng
tt hn m khng cn ph thuc vo bt k mt ng dng ph tr no khc.Khng
nhng mang li nhng li ch to ln nh hot ng nhanh, n dnh v bo mt hn.
Bn cnh , HTML5 c kh nng h tr API (Application Programming Interface)
v DOM (Document Object Model) s cho php d dng m rng, gip cc nh
pht trin t do sng to trong vic to ra cc ng dng thn thin v hu ch hn.
Hn th, vi HTML5, mi thit b t my tnh c nhn n cc thit b di ng s c
th d dng tip cn ni dung, tc l s khng cn khc bit na, ch cn duy nht
mt iu kin : trnh duyt ang dng phi h tr HTML5, nhng iu ny c l
khng cn l iu kin kh gii quyt khi hu ht cc trnh duyt ph bin u h
tr mnh m HTML5, t : Firefox, Chrome, Opera, Internet Explorer n cc trnh
duyt trn iOS, Android u h tr tt HTML5.
Vi HTML5, cc nh pht trin ch cn xy dng ng dng 1 ln, n c th hot
ng tt trn tt c cc thit b, khng nh Flash hoc Silverlight i hi phi ci
t plugin c th hin th ni dung.
1.2.1. Ni dung a dng
Thi gian trc, bo ch v cc nh pht trin tn nhiu giy mc ni
v nhng g m HTML5 c th mang li, so snh gia HTML5 v Flash vn chim
phn ln ni dung trn Web. Flash lu nay vn chim phn ln ni dung trn Web
nhng hin nay n v ang dn b thay th bi HTML5.
Huyn thoi Steve Jobs tng a ra quan im rt r rng, Flash s khng bao
gi xut hin trn cc thit b di ng ca Apple, v cng a ra s ng h tuyt i
vo HTML5. Quan im ny th hin r rng n ni Steve Jobs vit 1 bc th
v ng trn trang ch ca Apple th hin quan im ny v xa tan nhng mong
mun a Flash ln iOS ca ngi dng.
Bn cnh nhng li ch m HTML5 mang li, gii pht trin cng ch ra nhng hn
ch rt ln ca Flash, l s bt n nh, lm thit b hot ng nng hn v hao
pin hn, phi yu cu ci Plugin hot ng. V Flash khng phi l ti u cho
cc thit b di ng khi vn v PIN trn cc thit b ny lun l mi quan tm ln
ca ngi dng.
Hin nay, nhiu trang web v dch v ln chuyn sang dng HTML5, c th k
n trong s l Youtube, Nokia Maps Ngoi ra, rt nhiu games c xy
dng bng HTML5 xut hin, trong s c cc games ni ting nh Angry
Bird, Fieldrunners Cho thy HTML5 ngy cng c quan tm v pht trin
nhiu hn.
1.2.2. H tr thay th Flash
Vi s quan tm ngy cng ln m cc nh pht trin dnh cho HTML5 cho
thy thi gian ti, HTML5 s ngy mt pht trin mnh m hn. y khng phi l
mt iu qu bt ng, v vi nhng g m HTML5 mang li, l s la chn thc
s ng n v ngi s dng Web s c hng li rt nhiu.
Thi gian trc, Google pht trin cng c Google Swiffy cho php ngi dng
chuyn i ni dung Flash sang HTML5, Adobe mua li Nitobi cng ty sng lp
b khung lp trnh ng dng PhoneGap v PhoneGap Build cho php lp trnh vin
pht trin ng dng nn tng cross-flatform trn di ng vi HTML5 v Javascript.
Bn cnh , bn thn Adobe cng cho ra i cng c mang tn Wallaby cho php
chuyn ni dung t Flash sang HTML5.
V ngy 09/11 nh du bc tin quan trng ca HTML5 khi chinh Adobe tuyn
b s ngng pht trin Flash trn cc thit b di ng m thay vo l tp trung
pht trin HTML5. Vi gii cng ngh, y c th l mt bc ngot quan trng.
Adobe cho bit h vn s tung cc bn sa li, nhng s khng pht trin Flash trn
cc thit b di ng na, v Flash Player 11.1 s l phin bn nng cp cui cng.
Hin ti HTML5 c trin khai rng ri trn nhiu nn tng khc nhau, n s
tr thnh gii php tt nht cho vic pht trin ni dung trn trnh duyt ca thit b
di ng Adobe cho bit. Vi thng bo trn, c th thy hin ti ngay c Adobe
cng ang dn t b Flash tp trung pht trin HTML5 v mt chun Web chung
cho tng lai.
Vi HTML5, ngi dng Web s c c mt tri nghim hon ton mi, ngi
dng c th thoi mi xem Video, chi games trn trnh duyt vi mi thit b m
khng cn quan tm n cc thnh phn b sung cn phi ci thm. Vi cc thit b
di ng nh Smartphone, Tablet, ngi dng s khng cn lo lng v hiu nng
cng nh thi lng s dng PIN na. V HTML5 ti u ha cho nhng lo ngi
.
1.2.3. Tng tnh bo mt
Mi trnh duyt c 1 plug-in ring do cc nhm lp trnh khc nhau lp ra vi
nhng tiu chun khc nhau, c a ra vo thi im khc nhau v kiu mu bo
mt cng khc nhau. Thng thng, mt s phin bn plug-in c tnh bo mt hn
so vi loi khc. V khi s lng plug-in gia tng, chng lm tng phc tp
trong kim tra cc li an ninh. Liu plug-in hay trnh duyt c l hng ln vo
nm ngoi? Liu c phc tp khng khi ch cp nht trnh duyt m khng nng cp
plug-in hoc ngc li? Ai c th nh c?
Thay th nhiu loi plug-in vi cc c im c tch hp vi HTML5 s b i
c nhng khuyt im c trong cc plug-in trc . Nhng khuyt im c th
b li dng thit lp m c. Nu nh nhm an ninh kim tra Firefox, Chorme
hoc IE cho php ci t cc plug-in ny, s nguy him s gim bt i.
1.2.4. n gin ha vic pht trin web
Bill Mill chuyn vin thit k cho Lookingglass Cyber Solutions gii thch
ngn gn v s thay i ny: Ti thc s thch HTML5 v n cho php ti lm vic
trong mt mi trng thch hp, trnh duyt kt hp vi Javascript, DOM m khng
phi bt i bt li Flash v HTML5. N va l 1 ngn ng li va l 1 cng c ,
khng khc bit lm so vi cc plug-in khc.
HTML 5 cung cp 1 ngn ng lp trnh JavaScript, 1 kiu d liu (XML hoc
DOM) v 1 phn nguyn tc thit lp (CSS) kt ni vn bn, audio, video v
ha. Thch thc trong vic to ra ci g tt p vn l mnh mng nhng iu
s n gin hn khi lm vic trong 1 tiu chun thng nht.
Hin nay ch Adobe s dng HTML 5 tch hp cc cng c dnh cho Flash.
1.3. Cc tnh nng mi c trong HTML5
1.3.1. HTML5 h tr cc phn t nh ngha mi
c t HTML5 bao gm mt lot cc phn t ng ngha mi c s dng
a ra mt s ngha cho cc phn hoc cc b phn khc nhau ca mt trang Web,
chng hn nh tiu , chn trang, chuyn hng, v v.v.. Trong cc phin bn
trc ca HTML, thng s dng cc phn t <div> to nhng b phn ny, s
dng ID hoc cc thuc tnh lp phn bit chng vi nhau. Vn l iu ny
khng c ngha ng ngha, v khng c cc quy tc nghim ngt quy nh phi ch
r cc tn lp hoc cc ID no c s dng, lm cho vic xc nh vng c th no
ang lm vic tr nn v cng kh khn i vi phn mm. HTML5 gip lm gim
bt nhng vn ny, lm cho vic phn tch c php cu trc ng ngha ca mt
ti liu tr nn d dng hn i vi cc trnh duyt Web.
Tht ng gi ni rng vic tip tc s dng cc phn t <div> trong HTML5 l
hon ton hp l, nhng cng vic c nng cp d dng, iu quan trng l
nn s dng cc phn t ng ngha ni c lin quan. Mt khc, iu cn thit l
trnh s dng cc phn t mi cho cc mc ch khc hn so vi d nh ca
chng. V d, khng nn s dng phn t <nav> cho nhm cc lin kt bt k; n
c d kin bao quanh khi chuyn hng chnh trn trang .
Cc phn t ng ngha chnh m HTML5 gii thiu l:
<header (tiu )>
Phn t ny c s dng nh ngha mt tiu cho mt s phn ca mt trang
Web, c th l ton b trang, mt phn t <article>, hoc mt phn t <section>.
<footer (chn trang)>
Ging nh phn t <header>, phn t mi ny nh ngha mt chn trang cho mt
s phn ca mt trang. Mt chn trang khng cn cui ca mt trang, mt phn t
article (bi vit), hoc mt phn t section (phn), nh n thng lm.
<nav (chuyn hng)>
y l mt thng cha cho cc lin kt chuyn hng ban u trn mt trang Web.
Phn t ny khng c d kin s dng vi tt c cc nhm cc lin kt v ch nn
c dng cho cc khi chuyn hng ln. Nu c mt phn t <footer> c cha
cc lin kt chuyn hng, th khng cn bc cc lin kt ny trong mt phn t
<nav>, do phn t <footer> cng s p ng cho ring n.
<article (bi vit)>
Phn t <article> c s dng nh ngha mt mc c lp trn trang c th
dng cho ring n, chng hn nh mt mc tin tc, bi vit trn blog, hoc nhn
xt. Thng s dng cc ngun cung cp RSS cung cp cc mc ny.
<section (phn)>
Phn t ny i din cho mt phn ca mt ti liu hoc ng dng, chng hn nh
mt chng hoc mt phn ca mt bi vit hoc hng dn. V d, phn ang c
by gi c th c bao quanh bi mt phn t <section> trong HTML5. Cc phn
t <section> thng c mt tiu , mc d cng khng cn thit lm. V d, tiu
cho phn ang c by gi s cha vn bn Cc phn t ng ngha.
<aside (nhn xt)>
Phn t mi ny c th c s dng nh du mt thanh ph hoc mt s ni
dung khc c cho l c phn tch ri vi ni dung xung quanh n. Mt v d v
iu ny c th l cc khi qung co.
<hgroup>
Trong mt s trng hp, mt trang, bi vit, hoc mt phn c th cn nhiu hn
mt tiu , chng hn nh y c mt tiu v ph . V d, hng dn ny
c tiu To cc trang Web hin i s dng HTML5 v CSS3 v ph Trin
khai cc phn t canvas v video trong HTML5, c th bc tiu v ph ny
trong phn t <hgroup> , bng cch s dng mt phn t <h1> cho tiu chnh v
mt phn t <h2> cho ph .
1.3.2. HTML5 h tr ha tng tc vi phn t <canvas>
Chun Web c ti hnh nh bng cch ti file GIF hay JPG. Chun Web mi
c th xy dng hnh nh trn Canvas. Mt lot th vin ha p c a ra,
gip cho ha ca Website tr nn tng tc hn.
Chnh phn t <canvas> l kh c bn, nh ngha chiu rng, chiu cao, v m
nh danh (ID) duy nht cho i tng. Sau nh pht trin phi s dng mt lot
cc JavaScript API thc s v cc i tng trn khung nn nh (canvas),
thng khi trang Web hon tt dng hnh. Nhng API ny cho php nh pht
trin v hnh dng v cc ng k, pht mu, m c v cc gradient ( dc);
to vn bn; chuyn i cc i tng khung nn nh; v th hin hnh nh ng.
Cc API cng cho php phn t <canvas> tng tc v p ng vi u vo ngi
dng chng hn nh cc s kin chut v cc s kin bn phm, to iu kin thun
li cho vic sn xut cc tr chi v cc ng dng Web trn khung nn nh
1.3.3. HTML5 cho php cc ng dng Lu tr cc b vi local storage
Cc nh pht trin Web c truyn thng s dng cc cookie lu tr thng
tin trn my tnh cc b ca khch truy cp, cho php mt trang Web c li thng
tin ny ti mt im sau . Trong khi cc cookie rt c ch lu tr d liu c
bn, th chng li b hn ch bi thc t l cc trnh duyt Web thng khng cn
thit gi li hn 20 cookie cho mi mt my ch Web hoc nhiu hn 4KB d liu
cho mi cookie (bao gm c tn v gi tr). Ngoi ra, chng c gi n my ch
Web vi mi yu cu HTTP, gy ra lng ph ti nguyn.
HTML5 cung cp mt gii php cho cc vn ny bng cc Local Storage API
(API lu tr cc b ), c trnh by trong mt c t ring vi ti liu HTML5
chnh. Tp cc API ny cho php cc nh pht trin lu tr thng tin trn my tnh
ca khch truy cp trong khi vn c c s tin chc rng chng vn c sau
ny. Ngoi ra, thng tin c th truy cp bt k im no (ngay c sau khi trang
c a ra) v khng c ti t ng vi mi yu cu HTTP. c t ny gm c
cc hn ch cng ngun gc (same-origin), ngn cn cc trang Web khi b cc
trang Web khc c hoc thay i d liu lu.
Hu ht cc trnh duyt u lu tr cc trang Web trong b nh nhanh cc b, cho
php xem chng ngay c khi ngi dng khng ni mng. Vic ny hot ng tt
vi cc trang tnh, nhng n khng c sn cho ni dung ng thng da vo c s
d liu, chng hn nh Gmail, Facebook, Twitter. HTML5 cung cp s h tr cho
cc ng dng khng ni mng, y trnh duyt ti tt c cc tp cn thit s
dng khng cn ni mng ng dng, v khi ngi dng s dng khng ni mng
ng dng, trnh duyt c th cho php cc thay i bt k c thc hin trong qu
trnh ny c ti ln my ch khi chng kt ni li vo mng Internet.
1.3.4. HTML5 h tr pht <audio> v <video>
Trong nhng nm gn y, tnh ph bin ca cc trang Web chia s video
nh YouTube v cc nn tng phn phi ni dung nh Hulu chng kin mt s
bng n to ln trong vic s dng Web to lung a phng tin. Tht khng
may, ngi ta khng th xy dng c Web vi ni dung theo ny, v kt qu
l, nh dng tp Flash Video (.flv) v cc nn tng Adobe Flash nhn chung lm
n gi ha vic cung cp cc video v m thanh.
Tuy nhin, HTML5 bao gm c s h tr cho hai phn t mi, <audio> v <video>,
cho php cc nh pht trin Web bao gm cc ni dung a phng tin m khng
cn ngi dng ci t cc trnh cm thm ca trnh duyt. Mt s trnh duyt, gm
c Mozilla Firefox, Apple Safari, Google Chrome, bt u h tr cc phn t
mi ny v cung cp cc nt iu khin pht li ca trnh duyt chun, nn chc l
ngi dng s chn s dng chng. Ngoi ra, mt tp hp cc JavaScript API chun
c cung cp cho php cc nh pht trin to cc nt iu khin pht li
ring ca h, chc l h mun lm nh vy. Mt li th quan trng pht li a
phng tin nguyn gc l v mt l thuyt n i hi t ti nguyn CPU hn, iu
ny cho php tit kim nng lng.
Tuy nhin, mt vn quan trng vi cc phn t a phng tin mi ny l cc
nh dng tp c tng trnh duyt h tr v cc vn cp php bng sng ch
thng i cng vi cc b m ha/gii m (codec) khc nhau dng m ha cc
tp ny. Mozilla v Opera mun s dng cc thng cha video Theora v codec m
ngun m, khng i hi cp giy php bng sng ch bao gm cc codec
trong trnh duyt Web. Mt khc, Apple v Google khng hi lng vi cht lng
ca Theora, c th i vi vic phn phi cc ni dung nt cao (HD) trn nhng
trang Web ging nh YouTube. H thch codec H.264, thng c trong cc tp
MP4, MOV, hoc MKV.
Tuy nhin, vn khng ch vi video, do c cc vn tng t vi cc codec m
thanh. Cc nh dng MP3 v AAC b hn ch bi cc bng sng ch, trong khi
nh dng Vorbis th khng. Vn vi m thanh Vorbis l n khng c s dng
rng ri, do cc my phng tin di ng v nhiu ng dng phn mm phng tin
khng h tr n.
C rt nhiu quyt nh c a ra v cc phn t <video> v <audio> ca
HTML5 trong tng lai gn, v s rt th v xem cc codec v cc nh dng no
c n gin ha theo khuyn co cui cng.
1.3.5. HTML5 Ci tin biu mu Web
Nu to cc ng dng Web t trc, nh lp trnh c kh nng quen hn
vi tp cc nt iu khin biu mu ca HTML, mt s trong c trin khai
thc hin bng cch s dng phn t <input>. Trong HTML 4, cc kiu u vo sau
y c h tr:
button (nt n)
checkbox (hp kim tra)
file (tp)
hidden (n)
image (hnh nh)
password (mt khu)
reset (thit lp li)
radio (nt trn)
submit (trnh ln)
text (vn bn)
Ngoi ra, c mt s phn t khc c s dng theo cc biu mu nh <select> v
<textarea>. Cc nt iu khin ca biu mu ny cung cp nhiu chc nng cho cc
trng biu mu c bn nh tn, s in thoi, v a ch ging nh nhng g c
th thy trn mt biu mu lin h. Tuy nhin, Web l mt nn tng pht trin
vt xa giai on m cc biu mu HTML c s dng trnh ln cc biu
mu lin h by gi chng c s dng trnh ln d liu ng dng x l
bn pha my ch. Kt qu l, chnh cc nh pht trin ng dng Web lin tc thy
mnh cn mt s nt iu khin biu mu tinh vi hn, chng hn nh cc nt quay
trn, cc thanh trt, cc nt chn ngy/gi, cc nt chn mu sc, v v.v..
cung cp cc kiu nt iu khin ny, cc nh pht trin cn s dng mt th
vin JavaScript bn ngoi cung cp cc thnh phn giao din ngi dng (UI),
hoc s dng mt khung cng tc pht trin thay th khc nh Adobe Flex,
Microsoft Silverlight, JavaFX. HTML5 nhm mc ch lp y mt s cc khong
trng do phin bn trc ca n li trong lnh vc ny bng cch cung cp ton
b cc kiu u vo khc nhau ca biu mu mi:
color (mu)
date (ngy)
datetime (ngy gi)
datetime-local (ngy gi a phng)
email (th in t)
month (thng)
number (s)
range (phm vi)
search (tm kim)
tel (in thoi)
time (thi gian)
url (a ch)
week (tun)
Lc ny, vic h tr cho cc trng biu mu mi cn kh hn ch. Trnh duyt
Mobile Safari trn iPhone s dng ca mt s cc kiu mi ny thay i kiu
trnh by bn phm cho ngi s dng (v d, vi cc kiu e-mail, k hiu @ v cc
phm tt .com s c hin th). Ngoi ra, Opera cung cp mt s widget mi cho
nhiu nt iu khin ny, bao gm mt nt quay trn cho kiu s v mt nt chn
ngy ca lch cho cc kiu c lin quan n ngy. Kiu c sn ph bin nht trong
cc xut mi ny l kiu phm vi, c Opera, Safari v Google Chrome biu th
l mt thanh trt.
Ngoi cc kiu u vo mi, HTML5 cng h tr hai tnh nng chnh mi cho cc
trng biu mu. Tnh nng u tin trong s ny l trng tm t ng, ra lnh
cho mt trnh duyt t ng tp trung vo mt trng biu mu c th khi trang
c biu th, m khng i hi m JavaScript lm nh vy. Tnh nng nng cao
th hai l thuc tnh gi ch, cho php nh pht trin nh ngha vn bn s xut
hin trong mt nt iu khin c dng hp vn bn khi ni dung ca n rng.
1.3.6. HTML5 h tr kh nng truy cp ti h thng file system
HTML5 cung cp cc hm APIs ht sc mnh m tng tc vi d liu
kiu nh phn v h thng file system ca ngi s dng. cc hm File APIs ny
cho php cc ng dng web c kh nng lm nhng vic nh c cc files d liu 1
cch ng b hoc khng ng b, to ra cc d liu nh phn 1 cch ty , vit cc
files, c 1 cy th mc file 1 cch quy, cho php thc hin x l trn file khi
ko th n t desktop vo trong trnh duyt v ti ln d liu kiu nh phn bng
cch s dng XMLHttpRequest2.
V d minh ha nh cc hm File APIs c th c s dng to ra 1 hnh nh thu
nh dnh cho vic xem trc ca cc bc nh khi chng ang c gi ti server,
hay cho php 1 ng dng lu li trong 1 file m file ny c s dng tham
chiu ti khi ngi dng s dng ng dng trong trng thi offline. Hay hn th,
bng cch s dng Web Audio API th ng dng c th c c cc file .mp3 v
hin th 1 cch trc quan bn nhc khi n ang c chy, thm vo , ngi dng
c th s dng cc iu kin logic t pha client kim tra li dng mimetype ca
d liu c ti ln xem c tng ng vi ui m rng ca file hay gii hn kch
thc ca d liu c ti ln.
1.3.7. HTML5 tng tc hiu nng x l vi Web Worker v Application Cache
Web v offline l 2 t m rt nhiu ngi dng nhn thy rng chng
khng bao gi song hnh cng nhau. Tuy nhin trong HTML5 th mi chuyn li
khc, Trang web vn c th hot ng c ngay c khi chng khng c kt ni
trc tuyn. Ngi dng c th ti v cc files d liu rt ln (ln hn 1 GB) sau
c th duyt xem 1 cch offline
Application Cache mang li cho ng dng 3 li ch :
1. Duyt xem ngay c khi offline
2. Tng tc hiu nng x l bi v cc ngun ti nguyn c Cache li do
s c np nhanh hn
3. Gim ti cho my ch - trnh duyt s ch ti v cc ngun ti nguyn c
cp nht hay c thay i t pha my ch
Ngoi kh nng lu tr d liu trong cache, th HTML5 cn nng cao tri nghim
ngi dng so vi trc y. Theo cch x l truyn thng, th m Javascript trong
trnh duyt thc thi x l trong 1 lung duy nht, do vy vi cc tnh ton yu cu
thi gian thc thi di th trong khi thi gian thc thi cha kt thc, n s gy ra 1
hiu ng ph l kha (hay ngn chn) tng tc ca ngi dng. Tuy nhin trong
HTML5, bng vic ra mt tnh nng mi l Web worker th vn ny c gii
quyt.
1 Web Worker (Cc trnh lm vic trn nn Web) l 1 m javascript m n c th
chy thc thi trong nn, thc thi 1 cch c lp vi cc m khc m khng h gy
nh hng ti hiu nng x l ca trang page. Ngi dng vn c th tng tc vi
trang page nh nhn chut, la chn nhiu th, cun trang, g vn bn, ni cch
khc Web Worker thc y s pht trin ca cc ng dng a lung, ti u ha cho
cc x l tnh ton phc tp.
1.3.8. HTML5 h tr nh v ngi dng
HTML5 c mt API nh v a l cho php mt ng dng Web xc nh v
tr a l hin ti ca ngi dng, gi s thit b m ng dng ang nhm ti cung
cp cc tnh nng tm kim cc thng tin nh vy (v d, GPS trn in thoi di
ng). Nu ngi dng khng c mt thit b h tr tnh nng ny (chng hn nh
mt in thoi thng minh iPhone hoc Android 2.0), th ngi dng c th s dng
Firefox v ti v mt trnh cm thm cho php thit lp v tr ca h bng tay.
1.3.9. HTML5 h tr kh nng cng tc v giao tip thi gian thc
Cc tnh nng c trong HTML5 c chia lm 2 nhm : mt l nhm cc
tnh nng dng thc y cc ng dng web t th cn bng vi cc ng dng
nn desktop, hai l nhm cc tnh nng em ti cho cc ng dng web nhng li th
vt ln trn c cc ng dng desktop truyn thng. Kh nng cng tc theo thi
gian thc l dng tnh nng in hnh thuc nhm 2, n em ti li th cc k to ln
cho cc ng dng web
WebSockets v WebRTC c th thc s lm thay i cc tr chi games trong s
giao tip theo thi gian thc bi n khin vic lp trnh pht trin d dng hn v
nng cao tri nghim ca ngi dng
WebSoket l cng ngh h tr giao tip hai chiu gia client v server bng cch s
dng mt TCP socket to mt kt ni hiu qu v t tn km. Mc d c thit
k chuyn s dng cho cc ng dng web, lp trnh vin vn c th a chng
vo bt k loi ng dng no.
D liu truyn ti thng qua giao thc HTTP (thng dng vi k thut Ajax) cha
nhiu d liu khng cn thit trong phn header. Mt header request/response ca
HTTP c kch thc khong 871 byte, trong khi vi WebSocket, kch thc ny ch
l 2 byte (sau khi kt ni).
Vy gi s trong mt ng dng game c th ti 10,000 ngi chi ng nhp cng
lc, v mi giy h s gi/nhn d liu t server. Hy so snh lng d liu header
m giao thc HTTP v WebSocket trong mi giy:
- HTTP: 871 x 10,000 = 8,710,000 bytes = 69,680,000 bits per second (66 Mbps)
- WebSocket: 2 x 10,000 = 20,000 bytes = 160,000 bits per second (0.153 Kbps)
Ch ring phn header thi cng chim mt phn lu lng ng k vi giao
thc HTTP truyn thng.
WebRTC em n kh nng h tr cho video v audio trong hi tho trc tuyn hay
trong truyn pht video trc tuyn.
1.3.10. HTML5 h tr tip nhn cc s kin events c gi t my ch
HTML5 Server-Sent Events cho php 1 trang page tip nhn cc cp nht
lin tc, tc thi t pha my ch, bt c khi no c 1 s kin event mi xy ra trn
my ch th 1 thng bo s c gi ti client. thc s hiu v Server-Sent
Events, th trc ht cn phi hiu r v gii hn m cng ngh AJAX i trc b
hn ch :
- Kim sot vng Polling l 1 k thut c in c s dng bi hu ht a s cc
ng dng AJAX. tng ct yu y l ng dng s gi lp i lp li ti my
ch thu nhn v d liu. iu ny tng t vi giao thc HTTP, xt cho cng th
vic nhn v d liu cng quay quanh 1 nh dng request/response (yu cu/hi
p). Client to ra 1 yu cu request v ch i my ch hi p li v tr v d
liu.vn rc ri ln gp phi y l vi nhng kim sot vng polling rt ln,
th n s to ra chi ph ph cho giao thc HTTP rt ln.
- Kim sot vng Long polling trong thi gian ko di trong khi my ch cha sn
sng tr v d liu th n s gi yu cu ny m cho ti khi d liu c sn sng
tr v. Do vy, k thut ny thng c trch dn nh 1 vic lm treo phng
thc GET. Khi d liu c sn sng th my ch s hi p tr v v ng kt
ni, qu trnh x l ny s c lp i lp li.

Theo cch khc th Server-Sent Events (SSEs) c thit k mang li hiu qu
tt hn. Khi giao tip bng SSEs, th my ch c th y d liu v ng dng bt
c khi no n mun m khng cn phi to ra 1 yu cu request. Hay hiu theo cch
khc, th cc cp nht my ch c th c truyn pht 1 cch lin tc, t ng,
tc thi ti client. SSEs ch m ra 1 knh giao tip 1 chiu gia my ch v client
im khc bit chnh gia Server-Sent Events v long-polling l SSEs c kim
sot trc tip t trnh duyt v ngi dng ch n gin l lng nghe cc thng ip
m thi.
1.3.11. Nhng tnh nng khc
Cc tnh nng khc mi c HTML5 gii thiu bao gm cc kiu MIME v
ng k trnh x l giao thc, v vy cc ng dng Web c th c ng k nh
cc ng dng mc nh vi mt kiu tp hoc giao thc c th; qun l lch s trnh
duyt, m cho n by gi vn cn phi c thc hin th cng hoc bng cch s
dng mt khung cng tc JavaScript bn ngoi; v mt lot cc phn t v cc
thuc tnh mi khc lm cho cc nh pht trin Web thc hin d dng hn.

CHNG II: GII THIU V FRAMEWORK M NGUN
M PHONEGAP
2.1. Phonegap l g ?
Phonegap l 1 framework m ngun m dng cho vic xy dng cc ng dng
native Applications a nn tng bng cch s dng cc cng ngh web tiu chun
nh HTML, CSS, Javascripts. Kiu ng dng mobile dng ny c gi l hybrid
application (ng dng lai).

Hnh 1: S tng quan v cch thc hot ng ca Phonegap
Phonegap hin ti h tr cc nn tng mobile sau :
Apple iOS (gm c iPhone v iPad): http://developer.apple.com
Google Android : http ://developer.android.com
HP/Palm webOS: http://developer.palm.com
Microsoft Windows Phone 7: http://create.msdn.com/en-
us/home/getting_started
Nokia Symbian: www.developer.nokia.com/Devices/Symbian
RIM BlackBerry (phin bn BlackBerry 4.6 v mi hn):
www.blackberry.com/developers
Samsung bada: http://developer.bada.com
Bt u t phin bn 2.2.0 tr ln, th phonegap bt u h tr nn tng h iu
hnh mi nht ca Microsoft l Windows 8 (bao gm c Window 8 chy trn trn
vi x l cu trc X86 v Windows RT chy trn vi x l cu trc ARM)
2.2. i nt v lch s ca Phonegap
Phonegap l mt d n m ngun m hon ton min ph ca Nitobi gip vic
pht trin ng dng d dng hn i vi mi h iu hnh. Pht trin u tin ti
mt s kin iPhoneDevCamp San Francisco, PhoneGap tip tc ginh chin
thng gii thng Choice Award ti OReilly Media 2009 hi ngh Web 2.0 thng
4 nm 2009 ( 4 sn phm khc cng dnh chin thng bao gm: 80 legs, zealLog,
Bantam Network, Dubmenow) m ra hng i mi cho cc nh pht trin ng dng
web. K t c 600.000 lt ti v v hng ngn ng dng c pht trin da
trn Phonegap. Apple xc nhn rng Framework ny c ph duyt.
Tuy c to ra bi Nitobi nhng ng sau Phonegap l s ng gp ca rt nhiu
ngi trong nhng t chc ln nh IBM, RIM v Microsoft. Phonegap cng khng
nh rng: H c mt cng ng pht trin hp n, hot ng m, minh bch v
hp tc.
Framework PhoneGap c s dng bi mt s nn tng ng dng di ng nh
Worklight , Convertigo v appMobi nh l xng sng ca ng c pht trin in
thoi di ng dnh cho khch hng ca h. Adobe chnh thc cng b vic mua li
ca Nitobi Software (nh pht trin ban u) vo thng 10 nm 2011, trng khp
vi iu cc m PhoneGap c s dng cho Apache Software Foundation
bt u mt d n mi c gi l Apache Cordova.
cc phin bn phonegap v trc, lun bt buc nh lp trnh khi to ra cc ng
dng iOS th cn phi c 1 my tnh chy Mac ca Apple, hay nh lp trnh mun
to ra cc ng dng cho windowphone th phi c my tnh chy windows. Tuy
nhin t sau thng 9 nm 2012, th dch v PhoneGap Build c ra mt v
cho php nh lp trnh ti ln m ngun ca h ti 1 h thng bin dch m my ,
v nh bin dch ra cc ng dng tng ng cho tng nn tng h iu hnh
c h tr.
2.3. Ti sao li s dng Phonegap ?
Nu l mt lp trnh vin hay nhng ngi lm vic trong lnh vc tin hc hn
cn nh n thut ng: Write one, run any where xut hin v tr thnh mt cn
st vo ngy 23/5/1995. Ngy m cng ty my tnh Sun Microsystems gii thiu
mt cng c lp trnh mi ngn ng Java. Java ra i vi mt x mnh khc phc
kh khn trong vic chuyn i cc ng dng vit trn h iu hnh OS v cc h
x l CPU khc nhau. Do vy, ngi lp trnh ch cn vit ng dng bng Java
ng mt ln, sau c th s dng ng dng ny trn cc h iu hnh khc nhau
nh Windows95, WindowsNT, Mac OS, Unix,... theo phng chm: vit mt ln,
s dng bt k u.

Hnh 2: So snh u im ca vic s dng Phonegap vi Java
Cu hi c lm sng t. l Phonegap chnh l truyn nhn sut sc ca
Java khi hon thin v y tiu ch Write one, run any where ln mt tm cao
mi.
2.4. Cch thc Phonegap hot ng
Nh ni n t trc, Phonegap cho php 1 nh pht trin phn mm xy
dng cc ng dng native applications cho cc thit b mobile (bao gm c
smartphones v tablets) bng cch s dng cc cng ngh web nh HTML, CSS,
JavaScript. 1 nh pht trin phn mm ng gi 1 ng dng nn web (web
application) thnh 1 ng dng native application c h tr cho tng nn tng
mobile da vo PhoneGap package.

Hnh 3: Kin trc bn trong 1 ng dng Phonegap
Trong phm vi ca ng dng native application, th giao din lm vic ca ng
dng v bn cht bao gm duy nht 1 mn hnh v n cng ging nh 1 khung nhn
web view chim dng ton b khng gian mn hnh ca thit b. Khi ng dng c
khi chy th n s ti trang page khi to ca ng dng (thng thng l trang
index.html nhng nh lp trnh c th d dng thay i thnh trang khc) vo trong
khung nhn web view v sau chuyn iu khin ti web view cho php ngi
dng tng tc vi ng dng web application. Khi ngi dng tng tc vi ni
dung content ca ng dng (web application), th cc lin kt links hay cc m
JavaScript trong phm vi ng dng c th ti cc ni dung content khc t trong
phm vi cc files ti nguyn c ng gi vi ng dng ny, hay c th truy cp
thng qua mng network v ti cc ni dung content t 1 website hay t 1 server v.
i vi 1 vi nn tng mobile ging nh bada, Symbian v webOS th ng dng
native application v bn cht chnh l 1 ng dng web application.


nh ngha v webview
1 web view l 1 thnh phn ca ng dng native application m c s dng
biu din ni dung web content (thng thng l cc trang HTML) trong phm vi 1
ca s hay 1 mn hnh ca ng dng native application. V bn cht th n ging
nh 1 thnh phn c kh nng tip cn theo hng lp trnh, c ng gi vo
bn trong trnh duyt web browser c sn trong cc thit b mobile.
V d nh : trn nn tng BlackBerry, th n c thc thi x l nh 1 i tng
Browser Field object (bng cch s dng net.rim.device.api.browser.field2).hay
nh trn Android, n c thc thi bng cch s dng 1 khung nhn webview
(android.webkit.WebView) v trn IOS, th n l 1
UIWebView(System/Library/Frameworks/UIKit.framework).
ng dng web application chy trong phm vi 1 webview th cng ging nh bt
k nhng ng dng web application khc m chng c chy bn trong 1 trnh
duyt web ca mobile. N c th m cc trang HTML khc (theo c 2 cch : 1 cch
a phng trc tip trn thit b hay theo cch m t 1 web server t 1 ni no
). JavaScript nhng vo bn trong cc files m ngun ca ng dng chu trch
nhim thc thi x l cc iu kin logic, n hin ni dung content nu cn, chi cc
media files, m cc trang pages mi, thc thi cc tnh ton, v nhn v ni dung
content t server hay gi ni dung content ti server. Giao din ca ng dng c
to thnh t HTML v CSS.
1 trnh duyt web mobile thng thng khng c kh nng truy cp vo cc thnh
phn su bn trong thit b ging nh nhng ng dng chy trc tip trn thit b
(nh Contacts, Accelerometer, Camera, Compass, Microphone, ). c th xy
dng 1 ng dng mobile th v th ng dng cn phi c kh nng truy cp vo
cc thnh phn bn trong ca thit b, vt ra ngoi 1 trnh duyt web thng thng.
PhoneGap tr gip cho iu cn thit ny bng cch cung cp ra 1 b cc hm
JavaScript APIs, cho php cc nh pht trin phn mm c th s dng to nn
ng dng web application chy trong mi trng ng dng ca Phonegap c kh
nng truy cp vo cc thnh phn ca thit b vt qu gii hn ng cnh trnh
duyt web.

Hnh 4: Cch thc ng dng Phonegap tng tc vi thit b
Khi 1 lp trnh vin thc thi x l 1 tnh nng trong 1 ng dng m n c s dng 1
trong cc hm PhoneGap APIs, th ng dng gi ti API bng cch s dng
JavaScript v sau 1 lp layer c bit trong ng dng s dch hm PhoneGap
API ny, gi ti hm native API thch hp vi tnh nng tng ng.
2.5. Cc hm APIs m Phonegap h tr hin ti trn cc nn tng mobile
Bng di ch ra cc hm APIs c h tr cho tng nn tng

Hnh 5: Bng cc hm APIs c h tr cho tng nn tng trong Phonegap
Vi l c h tr
V l khng h tr

CHNG III : CCH THIT LP CI T MI TRNG
LP TRNH CHO PHONEGAP
Vic to lp mi trng h tr lp trnh ng dng trong Phonegap ht sc n
gin v d dng, Nh pht trin c th to lp d n lin quan n Phonegap trn bt
c nn tng h iu hnh no m h s dng nh Windows, Mac OS, Linux, hay
hn th, vic pht trin Phonegap to ra ng dng dnh ring 1 nn tng h iu
hnh di ng no , u c hng dn 1 cch r rng t chnh nhm tc gi to
ra Phonegap, tm hiu thm c th truy cp vo trang sau :
http ://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html .
Tuy nhin trong gii hn ca n l to ra phn mm ng dng dnh ring cho h
iu hnh Android, nn do ch i tm hiu cc to lp mi trng lp trnh pht
trin vi Phonegap cho Android, v trong mi trng h iu hnh my tnh s
dng ph bin nht l Windows.
3.1. Cch thit lp ci t Phonegap cho Android Project bng Eclipse
3.1.1. Yu cu ci t
Eclipse: Ti v v ci t phn mm Eclipse IDE ti ng
dn sau : http://www.eclipse.org/downloads/
Android SDK v Android ADT Plugin cho eclipse: Ti bn
Android SDK v Android ADT Plugin mi nht, v ci t, thit lp cho ph
hp vi mi trng lm vic ti ng dn sau :
http://developer.android.com/sdk/index.html
Phonegap Framework : Ti bn phonegap mi nht ti ng
dn sau : http://phonegap.com/download

3.1.2. To project mi s dng Phonegap trong Eclipse IDE
M Eclipse, chn New > Android Project

Hnh 6.1: Cch to 1 Android Project trong Eclipse IDE
Nhp vo tn Project, SDK version cho project vo cc thng tin lin quan,
c th dng mu bn di:
Lu : phn version cho SDK, c th chn ty nhng phi xc nh
Android SDK version no m mun vit app, trnh chnh sa v sau.
Chun nht lun l 2.2 v 2.3. Cho nhng dng my mn hnh ln (tablet) c
th dng 4.0+

Hnh 6.2: Cch thit lp cc thng s to 1 Android Project
Trong file Phonegap download v, tin hnh gii nn v tm n th mc
lib, chn th mc Android.
Trong bi hng dn ny s dng Phonegap Cordova 1.5.0, nn ch s dng
2 files: cordova-1.5.0.js v cordava-1-.5.0.jar v folder xml.
Tm vo th mc Project va to, s thy cc th mc gm: assets, bin, gen,
res, src ... sau to thm 2 folder l libs v assets/www
Sao chp nhng file download vo cc th mc nh sau: (thay th
cordova-1.x.x thnh version tng ng, nh cordova-1.5.0)
Sao chp cordova-1.x.x.js vo /assets/www
Sao chp cordova-1.x.x.jar vo /libs
Sao chp c th mc xml vo /res
Quay tr li ca s lm vic ca Eclipse, chn Package Explorer (ca s lm
vic bn tri) v bm F5(refresh) cp nht file mi.
Lu : nu thao tc g bn ngoi ca s lm vic ca Eclipse th khi quay li
nh bm F5, nu khng n s khng cp nht.
Trong ca s Package Explorer,
chn src/com.phonegap.demo/DemoActivity.java (hoc tn project to,
lin kt n file java chnh ):

Hnh 6.3 : Cch truy cp ti file java chnh
Chnh sa li theo nh sau:
Sa extend ca class t Activity thnh DroidGap v Thay
th setContentView() thnh super.loadUrl(file:///android_asset/www/index.
html);
Thm vo import org.apache.cordova.*;
Xa b import android.app.Activity;

Hnh 6.4 : cch chnh sa bn trong file java chnh
Bm chut phi vo AndroidManifest.xml v chn Open With > Text
Editor v thm vo:

<supports-screens
android:largeScreens=true
android:normalScreens=true
android:smallScreens=true
android:resizeable=true
android:anyDensity=true
/>
<uses-permission android:name=android.permission.CAMERA />
<uses-permission android:name=android.permission.VIBRATE />
<uses-permission android:name=android.permission.ACCESS_COARSE_LOCATION />
<uses-permission android:name=android.permission.ACCESS_FINE_LOCATION />
<uses-permission android:name=android.permission.ACCESS_LOCATION_EXTRA_COMMANDS
/>
<uses-permission android:name=android.permission.READ_PHONE_STATE />
<uses-permission android:name=android.permission.INTERNET />
<uses-permission android:name=android.permission.RECEIVE_SMS />
<uses-permission android:name=android.permission.RECORD_AUDIO />
<uses-permission android:name=android.permission.MODIFY_AUDIO_SETTINGS />
<uses-permission android:name=android.permission.READ_CONTACTS />
<uses-permission android:name=android.permission.WRITE_CONTACTS />
<uses-permission android:name=android.permission.WRITE_EXTERNAL_STORAGE />
<uses-permission android:name=android.permission.ACCESS_NETWORK_STATE /> <uses-
permission android:name=android.permission.GET_ACCOUNTS />
<uses-permission android:name=android.permission.BROADCAST_STICKY />

Sau thm tip dng sau vo tag activity:
android:configChanges=orientation|keyboardHidden

file AndroidManifest.xml phi trng nh th ny

Hnh 6.5: Cu trc bn trong file AndroidManifest.xml
3.1.3. To project mu HelloWorld.
- Trong th mc /assets/www, to file index.html. Sau sao chp ni dung sau
y vo source, chc chn rng nhng cordova-1.x.x vo project v file html.
Nu ko chng trnh s khng chy. Thay th 1.x.x thnh version ang s dng (v
d : 1.5.0)

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type=text/javascript charset=utf-8 src=cordova-1.x.x.js></script>
<script type=text/javascript charset=utf-8>
function onLoad(){
document.addEventListener(deviceready, onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert(PhoneGap is working);
}
</script>
</head>

<body onload=onLoad();>
<h1>Welcome to PhoneGap.VN</h1>
<h2>Edit assets/www/index.html</h2>
</body>

</html>

Hnh 6.6: Cch nhng file js vo file index.html
3.1.4. Chy chng trnh trn nn Android Emulator
- Nn refresh (F5) trc khi run Eclipse update nhng thng tin mi.
- Bm chut phi vo tn project vo chn Run As > Android Application
- Nu thidt lp ng, chng trnh s chy hon chnh nh sau:

Hnh 6.7: Hnh chy chng trnh trn nn Android Emulator
3.2. Tng tc qu trnh Debug m ngun bng cch s dng
AndroVM
Vic thc hin Debug m ngun ca 1 d n vit cho Android, bng cch s
dng my gi lp Android emulator i km b Android SDK tn ti kh nhiu vn
. B gi lp ny thng khi ng rt lu v c phn hi rt chm v hay gp
tnh trng git treo ngay c khi cu hnh my tnh s dng khng phi l thp.
khc phc nhng hn ch trn, Gii php a ra l s dng my o c to bi
AndroVM.
3.2.1. Yu cu ci t
AndroVM : Ti phin bn mi nht ca AndroVM
ti ng dn sau : http://androvm.org/blog/download/
Lu : AndroVM c rt nhiu phin bn dnh ring ph hp vi cc loi
thit b nh in thoi, my tnh bng.Do vy cch phn bit cc phin bn
ny da vo s xut hin ca cc t sau ( khi chng c mt trong tn ca
phin bn AndroVM) : t ngha l phin bn ny dng gi lp my tnh
bng, p c ngha l dng gi lp in thoi, tp c ngha l dng gi
lp c c 2 loi thit b trn
Virtualbox : Ti v phn mm to my o Virtualbox ti ng dn
sau : https://www.virtualbox.org/wiki/Downloads
3.2.2. Cch thit lp ci t AndroVM
- Trc tin, cn ci t phn mm Virtualbox, sau s chn ti v phin bn
AndroVM ph hp theo yu cu. Sau khi ti v xong, s nhn c1 file c ui l
.tar (c kiu tn file nh sau : androVM_vbox86tp_4.1.1_r4-20121119-gapps-
houdini-flash.tar), tin hnh gii nn file ny ra, s thy cc files nh sau :

Hnh 7.1: Cc file ci t ca AndroVM
- Ti y ch ti file c biu tng mu da cam trn u, c ui l .ovf , nhn
p vo file ny. Ngay sau 1 hp thoi nh sau s hin ra :

Hnh 7.2: Cch nhp my o AndroVM vo trong Virtualbox
- Tip sau n chn vo Import, 1 hp thoi nh sau s xut hin

Hnh 7.3: Trng thi tin trnh nhp my o AndroVM vo trong Virtualbox
- Sau khi Tin trnh pha trn chy xong, s thy 1 biu tng mi xut hin nh
hnh sau :

Hnh 7.4: Trng thi khi nhp xong my o AndroVM vo trong Virtualbox
- Nhn chut tri ln trn tn my o AndroVM vo nhp vo trn v chn vo
Setting

Hnh 7.5: Cch thit lp cho my o AndroVM

- 1 hp thoi mi xut hin, ti y chn vo th Network. Ti hp thoi ny,
mc Attached to, chn vo NAT nh hnh

Hnh 7.6: Cch la chn ci t Network cho AndroVM
- Tip tc, n chn vo Advanced >> sau chn vo Port Forwarding. 1 bng
hp thoi mi s hin ra, Ti , nhn chn vo du cng mu xanh, pha gc
trn bn tay phi, v ngay lp tc xut hin 1 dng mi c tn l Rule 1 nh trong
hnh sau

Hnh 7.7 : Cch thit lp thng s cng Port trong Network ca my o AndroVM
Ti y, ch vo cc ct Host Post v Guest Port, n chut vo 2 tng ng
pha di 2 ct , v in vo gi tr l 5555. Nhn vo OK lin tc hon thnh
vic thit lp, nhn p vo my o m va mi thit lp xong, khi ng n.
Lu : Ln u tin khi khi ng 1 my o Android th cng ging nh bao my
Android tht khc, cn phi in vo 1 s thng tin c nhn vo trong my nh tn,
ti khon gmail, (c th b qua iu ny).
3.2.3. Cch thc hin lnh kt ni my o vi Android Debug Bridge (adb)
Sau khi khi ng my o xong, cn i ti th mc android-sdk-windows
th mc m c to ra ban u khi ci t b Android SDK trong Eclipse IDE
i ti th mc theo ng dn sau : \android-sdk-windows\platform-tools,
Nhn Shift + nhn chut phi vo khng gian ca th mc (Lu l khng tch
chut chn ln bt c 1 file no c), sau Nhn chn vo Open command
window here


Hnh 7.8 : Cch khi ng mn hnh dng lnh ca adb
1 hp thoi dng lnh s hin ln, ti hp thoi ny g vo lnh :
adb connect localhost
Ri n Enter, nu kt ni thnh cng th s nhn thy thng bo nh hnh sau :

Hnh 7.9 : Kt ni adb vi my o AndroVM thnh cng
3.2.4. Cch kt ni mi trng lp trnh Eclipse IDE vi my o AndroVM
Bt Eclipse IDE cha cc m ngun project m ang thc hin cn Debug
ln. Gi thit lp li cu hnh ca project trong Eclipse IDE nh cc hnh sau :
Chn vo Run thanh iu hng trn cng ca Eclipse IDE >> tip chn
vo Run Configurations
1 bng hp thoi mi s hin ra, nhn p vo Android Application, Ngay
sau s xut hin 1 dng c tn l New_configuration mi nh hnh di,
n chn vo dng :

Hnh 7.10 : Cch thit lp Debug cho 1 ng dng Android
Ch ti hp thoi pha bn tay phi, n vo Browse chn ti project
m mun thc hin Debug, dng Name : c th g v thay 1 tn mi vo,
chng hn nh Demo AndroVM, sau chn vo Target, tch chn vo
Always prompt to pick device.
n vo Apply v sau chn vo Run. 1 bng hp thoi mi s hin ra nh
sau :

Hnh 7.11 : Cch la chn my o AndroVM thc hin Debug
n chut chn vo dng mu nh hnh trn, ngay sau trong my o
c khi chy v phn mm ng dng m ang Debug cng c m ra
lun trong my o ny
kim sot c qu trnh Debug, nhn vo LogCat pha di
Eclipse IDE

Hnh 7.12: Cch kim sot li ny sinh trong qu trnh Debug
CHNG IV : PHN TCH V THIT K CHNG
TRNH NG DNG
4.1. Gii thiu v chng trnh ng dng
ng dng c t tn l Sedi, c chc nng hiu chnh hnh nh to ra
nhng bc nh c o, vui nhn, mang nt ring c nhn ca mi ngi s dng,
c bit h tr ti a cc thao tc chm, cm ng gip cho vic chnh sa tr nn
d dng hn bao gi ht trn c smartphone v tablet.
ng dng c pht trin da trn Phonegap framework phin bn 2.2.0, ngoi ra
cn s dng 1 s plugin cho Phonegap nh SQLitePlugin, WebIntent,
Base64ToPNG, Facebook Connect Plugin. Giao din ngi dng ca ng dng
c xy dng da trn jQuery Mobile phin bn 1.2.0, Cc thao tc x l ha
c pht trin da vo phn t ha tng tc <canvas> trong HTML5.

4.2. Phn tch chng trnh ng dng v chc nng
4.2.1. Biu phn r chc nng

Hnh 8: Biu phn r chc nng ca ng dng

Hiu chnh hnh nh
trong ng dng
Thc hin Thao
tc chm
Xoay i tng
Xa i tng
Chnh sa kch
thc i tng
nh
Thm nh
Thm nh t th
vin nh ca
ng dng
Thm nh t th
nh ca thit b
Thm text
G vo k t v
chn mu
Chn mu nn
Chn kiu ch
v c ch
Chn phng ch
Chn kch thc
v mu khung
vin
Hy b
p dng
Chnh sa nh
Xoay nh
iu khin layer
p dng b lc
hiu ng
p dng
Hy b
Xem trc
Chnh sa text
G vo k t v
chn mu
Chn mu nn
Chn kiu ch
v c ch
Chn phng ch
Chn kch thc
v mu khung
vin
Thit lp li
Hy b
Xem trc
Chia s facebook Lu nh
4.2.2. c t chc nng ca chng trnh
TT Tn chc nng M t
1 Thc hin Thao tc chm Ti mn hnh chnh ca ng dng,
ngi dng c th thc hin chm vo
i tng ha thc hin cc thao
tc nh xoay i tng, xa i tng
hay chm ko chnh sa kch thc
ca i tng nh.
2 Thm nh Khi ngi dng chm vo nt th
vin hay ti nh th ng dng s
thc hin chc nng thm i tng
nh vo mn hnh chnh t th vin
nh c sn trong ng dng hay b s
tp nh ca ngi dng trong th nh
ca thit b.
3 Thm text Khi ngi dng chm vo nt thm
text th ng dng thc hin chc
nng thm text, ngoi vic g vo cc
k t text th ngi dng cn c th la
chn thit lp thm cc thng s khc
nh : kiu ch, c ch, loi phng
ch, mu v kch thc ca khung
vin bao quanh k t.

4 Chnh sa nh Khi ngi dng n chm 2 ln lin
tip vo i tng nh trn mn hnh
chnh, th s kch hot hin ln 1 bng
hp thoi dng cho vic chnh sa
nh. Ti y ngi dng c th xoay
nh theo 360 , iu khin s n hin
layer ca bc nh so vi nhng i
tng ha khc, v p dng 1 vi
b lc hiu ng c sn vo bc nh.
Nhng thit lp ny tc dng ngay lp
tc ln i tng nh, gip ngi
dng c th xem trc nhng g h
hiu chnh, cui cng ngi dng c
th ty chn p dng hoc hy b
nhng hiu chnh .
5 Chnh sa text Khi ngi dng n chm 2 ln lin
tip vo i tng text trn mn hnh
chnh th 1 bng hp thoi dng
chnh sa text hin ra, bng ny cho
php chnh sa li cc thng s m i
tng text c thit lp trc
(cc thng s ny ging vi cc
thng s khi thm text). Nhng thao
tc chnh sa ny ca ngi dng tc
ng trc tip ln i tng text, gip
ngi dng c th xem trc nhng g
m h thao tc, cui cng ngi dng
c th ty chn p dng hoc hy b
nhng hiu chnh .
6 Chia s facebook Cho php ngi dng chia s nh va
to ln facebook
7 Lu nh Cho php lu hnh nh va to vo th
nh ca thit b
Bng 2: Bng c t chc nng ca ng dng
4.3. Phn tch chng trnh ng dng v lung d liu
4.3.1. Biu lung d liu mc khung cnh

Hiu chnh hnh nh
trong ng dng
Thit b
Facebook
nh cn lu
i tng nh
Yu cu ly nh
Thng tin xc thc
D liu nh
Thng tin
phn hi
Ngi dng
Cc thao tc
Server lu tr nh
URL ca nh
Trn server
D liu nh

Hnh 9.1: Biu lung d liu mc khung cnh

4.3.2. Biu lung d liu mc nh

Ngi dng
Thm nh
Thit b
Facebook
La chn
Yu cu
Th vin nh
trong ng dng
Yu cu
a ch nh
Mn hnh chnh
a ch nh
i tng nh
Thm text
Cc thng s thit lp
i tng text
Thc hin thao
tc chm
i tng
Thao tc xong
Chnh sa nh
i tng nh
Chnh sa text
i tng text
Chia s
facebook
Thng tin xc thc
Yu cu xc thc
Thng tin phn hi
nh hiu
chnh xong
D liu nh
Lu nh
nh hiu
chnh xong
nh lu
Thao tc
Cc la chn
Cc thng s
Server lu tr
nh
URL ca nh
Trn server
D liu nh

Hnh 9.2: Biu lung d liu mc nh

4.3.3. Biu lung d liu mc di nh gii thch chc nng thc hin thao
tc chm

Xoay i tng
Xa i tng
Chnh sa kch
thc i tng
nh
Ngi dng Mn hnh chnh
Thao tc xoay
i tng c
Chm xoay
i tng
Sau khi xoay
Thao tc xa
i tng c
Chm xa
Thao tc chm ko
i tng nh
c chm
i tng nh
thay i kch thc

Hnh 9.3: Biu lung d liu mc di nh gii thch chc nng thc hin thao
tc chm

4.3.4. Biu lung d liu mc di nh gii thch chc nng thm nh

Thm nh t th
nh ca thit b
Thm nh t
th vin nh c
sn trong ng
dng
Ngi dng Mn hnh chnh
Thit b
Th vin nh
La chn
Yu cu
a ch nh
i tng nh
La chn
Yu cu chuyn tip
a ch nh
i tng nh

Hnh 9.4: Biu lung d liu mc di nh gii thch chc nng thm nh

4.3.5. Biu lung d liu mc di nh gii thch chc nng thm text

G vo k t v
chn mu
Chn mu nn
Chn kiu ch
v c ch
Chn phng ch
Chn kch thc
v mu khung
vin
Ngi dng
Mn hnh chnh
Cc k t v m mu
M mu v trong sut
Kiu ch v
Kch c
Loi phng ch
Kch thc v m mu khung vin
Mn hnh thm
text
p dng
Hy b
Cc thng s
i tng text
S kin thao tc p dng
S kin thao tc hy b

Hnh 9.5: Biu lung d liu mc di nh gii thch chc nng thm text

4.3.6. Biu lung d liu mc di nh gii thch chc nng chnh sa nh

Xoay nh
iu khin layer
p dng b lc
hiu ng
Ngi dng
Mn hnh chnh
Gc xoay
Xem trc
Ch s th t
Ca layer
Cc thng s thuc tnh
Trng thi ban
u
S kin thao tc
Trng thi
Trc khi thc hin thao tc
ca i tng nh
i tng nh
ang thao tc
Mn hnh xem trc -
trng thi hin ti ca
i tng nh
Trng thi
Cp nht
Trng thi
Cp nht
Trng thi
Cp nht
Tn b lc
p dng
S kin
n nt p dng
Tt c thng s
Trng thi
i tng nh
c cp nht trng thi
Va thao tc
Hy b
S kin n nt hy b
Trng thi
Lc cha thc hin
Thao tc
i tng nh
c cp nht
i tng nh
ang thao tc

Hnh 9.6: Biu lung d liu mc di nh gii thch chc nng chnh sa nh
4.3.7. Biu lung d liu mc di nh gii thch chc nng chnh sa text

G vo k t v
chn mu
Chn mu nn
Chn kiu ch
v c ch
Chn phng ch
Chn kch thc
v mu khung
vin
p dng
Thit lp lai
Xem trc
Ngi dng Mn hnh chnh
Trng thi ban
u
Trng thi hin ti - mn
hnh xem trc
S kin thao tc
i tng text
ang thao tc
Cc thuc tnh
thit lp
T trc
Cc thng s thuc tnh
Ban u
S kinn nt
thit lp lai
i tng text
c thit lp li
Cc k t v m mu
M mu nn v
trong sut
Kiu ch v
Kch c
Loi phng ch
Kch thc v
M mu
Khung vin
Thng s
Cp nht
Thng s
Cp nht
Thng s
Cp nht
Thng s
Cp nht
Thng s
Cp nht
Tt c thng s
Trng thi
i tng text
i tng text
ang thao tc
Hy b
S kin
Hy b
Hnh 9.7: Biu lung d liu mc di nh gii thch chc nng chnh sa text
4.3.8. Biu lung d liu mc di nh gii thch chc nng chia s
facebook

Ngi dng
Chia s
facebook
facebook
Thng tin xc thc
Yu cu
Thng tin
Phn hi
Lu nh
Yu cu
Thit b D liu nh
D liu nh
Server lu tr
nh
D liu nh
URL ca nh
Trn server

Hnh 9.8: Biu lung d liu mc di nh gii thch chc nng chia s
facebook

4.4. Thit k c s d liu ca chng trnh ng dng
Bng d liu dnh cho chc nng thm nh t th vin nh c sn :
Tn bng : shape
Tn trng Kiu d liu Thuc tnh b
sung
Thuc tnh
kha
Ghi ch
id INTEGER AUTO
INCREMENT NOT
NULL
PRIMARY
KEY
M id
name TEXT NOT NULL Tn gi
ca bc
nh
color TEXT Mu sc
path TEXT NOT NULL ng
dn th
mc
filename TEXT NOT NULL CONSTRAINT
UNIQUE
Tn file
nh
shapetype TEXT NOT NULL Nhm
nh
subject TEXT Ch

Bng 3: Bng shape trong c s d liu ca ng dng

4.5. Thit k giao din chng trnh ng dng
4.5.1. Mn hnh chnh ca ng dng
- Giao din thit k

Hnh 10.1: Giao din mn hnh chnh ca ng dng
- Cch thnh phn giao din :
M th t Tn Chc nng
1 Th vin Khi ngi dng n vo
nt ny, th s kch hot 1
bng th vin hnh nh c
sn trong ng dng
2 Ti nh Khi ngi dng n vo
nt ny th ng dng s
m trnh qun l album
nh mc nh ca thit b.
1

2

3

4

5

3 Thm text Khi ngi dng n vo
nt ny th s kch hot 1
bng hp thoi dnh ring
cho vic thit lp v g
vo k t text
4 Chia s Khi nt ny c n th 1
bng hp thoi mi xut
hin, cho php ngi dng
ng nhp vo facebook
v sau khi ng nhp
thnh cng th c th chia
s nh ln facebook
5 Lu nh Khi nt ny c n th
mi nt iu khin trn
cc i tng ha u
b n i v sau thc
hin lu nh hiu chnh
vo trong th nh ca thit
b

Bng 4: Bng lit k cc thnh phn v chc nng ca cc thnh phn bn trong
ng dng

4.5.2. Bng hp thoi th vin nh
- Giao din thit k :

Hnh 10.2: Giao din hp thoi th vin nh ca ng dng
- Cc thao tc x l :
Khi n nt th vin th 1 bng hp thoi xut hin t pha di trt ln
pha trn, v bng hp thoi ny c cao bng 1/3 cao ca thit b, cha
danh sch cc nh c trong th vin (cha ti a 5 nh).
Ngi dng chn vo nh v n gi 1 lc vo v tr (1), th ngay sau 1
bc nh ln s xut hin trong mn hnh chnh.
n vo hnh mi tn v tr (2) ca bng hin th nhiu nh tip na cho
ngi dng chn
n vo hnh gch cho v tr (3) tt bng hp thoi, v bng ny s trt
t trn xung v bin mt
n chn v tr (4) la chn ch , n chn v tr (5) la chn nhm
hnh nh, n chn v tr (6) la chn mu sc c trng cho bc nh. Mi
1

2

3

4

5

6

7

8
ln n chn ny, th danh sch cc nh hin th trong hp thoi cng c lc
theo 1 cch tng ng.
n vo v tr (7) nm ngoi bng hp thoi - th bng ny s trt t trn
xung v bin mt
C th dng tay chm vo cc hnh nh ko sang tri hay sang phi, v
danh sch nh s trt theo kiu ko theo chiu mi tn (8)

4.5.3. Mn hnh nh t thit b
- Giao din thit k

Hnh 10.3: Giao din thao tc ti nh t thit b
1
2
- Cc thao tc x l :
Ngi dng n vo nt ti nh, th 1 bng hp thoi popup hin ln. Trong
bng ny, ngi dng c th chn 1 trnh duyt nh ca bn th 3 hoc chn
vo trnh duyt nh mc nh ca thit b.
Chn ti th mc c cha danh sch cc nh nm trong th nh, n chn vo
bc nh nh ti v tr (1)
Ngay sau , nh c chn s c ti vo mn hnh chnh ca ng dng
nh ti v tr (2)
4.5.4. Bng hp thoi thm text
- Giao din thit k

Hnh 10.4: Giao din Bng hp thoi thm text
- Cc thao tc x l :
Ngi dng n vo nt Thm text kch hot hp thoi thm text trt t
di ln
1
2 3
4
5
6
7
8
9 10
11
12
Ngi dng n vo v tr (1), g vo k t
Chn v tr (2) v (3) la chn thit lp mu sc cho k t v phng nn
La chn v tr (4) thit lp kiu ch (in m, in nghing, bnh thng)
Ko thanh trt (5) thit lp c ch
La chn phng ch v tr (6)
Ko thanh trt (7) thit lp rng khung vin bao quanh k t
Chn la v thit lp mu sc cho khung vin v tr (8)
n vo nt p dng (9) thm text vo mn hnh chnh, v ngay sau
bng hp thoi s trt t trn xung v bin mt
n vo nt Thit lp li (10) khi to li cc thng s ban u
n vo hnh gch cho (11) th bng hp thoi s trt t trn xung v bin
mt
n vo v tr (12) nm ngoi bng hp thoi bng hp thoi s trt t
trn xung v bin mt
4.5.5. Nhm nt iu khin i tng ha
- Giao din thit k

Hnh 10.5: Nhm nt iu khin i tng ha
1
2
3
4
- Cc thao tc x l :
Ngi dng chm vo i tng ha trn mn hnh chnh, th s xut hin
1 nhm nt iu khin dnh ring cho i tng nh (1), (2), (3), (4) (nt
iu khin (4) ch xut hin khi i tng c chm l i tng nh). Sau
, ngi dng c th chm li 1 ln na n i cc nt iu khin ny
n nt (1) lm i tng xoay theo chiu ngc kim ng h
n nt (2) lm i tng xoay theo chiu kim ng h
n nt (3) xa i tng khi mn hnh chnh
n v ko nt (4) thay i kch thc ca i tng (i tng phi l i
tng nh)
4.5.6. Bng hp thoi chnh sa nh
- Giao din thit k

Hnh 10.6: Giao din bng hp thoi chnh sa nh

6
2
3 4 5
1
7 8
9
10
- Cc thao tc x l :
Ngi dng chm 2 ln lin tc vo i tng nh, th s kch hot 1 bng
hp thoi chnh sa hnh nh t di trt ln trn
Ko thanh trt (1) xoay nh ty theo 360 . Thng s trn thanh trt
(1) chnh l gc xoay ca i tng nh c thit lp t trc
n (2), (3), (4), (5) thit lp v tr layer ca i tng nh cc v tr
tng ng : v tr sau cng (lun n i khi b bi mi layer khc), tht li
1 n v so vi v tr hin ti, tin ln 1 n v so vi v tr hin ti, v tr trn
cng (lun hin v ln mi layer khc)
n chn (6) thit lp hiu ng p dng ln i tng nh
n nt p dng (7) lu li ton b cc thit lp m ngi dng to
ra trong hp thoi
n nt Hy b (8) khi phc li trng thi lc ban u khi i tng
nh cha b chnh sa
n hnh gch cho (9) hoc n vo v tr (10) nm bn ngoi hp thoi -
hp thoi trt t trn xung v bin mt.Lu : khi ngi dng cha n nt
p dng (7) lu li ton b thit lp th i tng nh cng s c
khi phc li trng thi lc ban u ca n

4.5.7. Bng hp thoi chnh sa text
- Giao din thit k

Hnh 10.7: Giao din bng hp thoi chnh sa text
- Cc thao tc x l :
Ngi dng n vo nt Thm text kch hot hp thoi thm text trt t
di ln. Lu : mi gi tr thng s c thit lp sn t lc bng hp thoi
va m ln u l cc gi tr thng s ca i tng text c thit lp t
trc .
Ngi dng n vo v tr (1), g li k t.
Chn v tr (2) v (3) la chn thit lp li mu sc cho k t v phng
nn.
La chn v tr (4) thit lp li kiu ch (in m, in nghing, bnh
thng)
Ko thanh trt (5) thit lp li c ch
La chn li phng ch v tr (6)
1

1
2 3

1
4
5
6
7
8
9 10
11
12
Ko thanh trt (7) thit lp li rng khung vin bao quanh k t
Chn la v thit lp li mu sc cho khung vin v tr (8)
n vo nt p dng (9) lu ton b cc thng s ngi dng va to ra
vo i tng text mn hnh chnh, v ngay sau bng hp thoi s trt
t trn xung v bin mt
n vo nt Thit lp li (10) khi to li cc thng s ban u
n vo hnh gch cho (11) hoc n vo v tr (12) nm ngoi bng hp
thoi th bng hp thoi s trt t trn xung v bin mt. Lu : khi
ngi dng cha n nt p dng (9) lu li ton b thit lp th i
tng text cng s c khi phc li trng thi lc ban u ca n

TI LIU THAM KHO

1. Daniel Fages, AndroVM Documentation, available at:
http://androvm.org/blog/androvm-documentation
2. HTML5 ROCKS, WHY HTML5?, available at:
http://www.html5rocks.com/en/why
3. John M. Wargo, PhoneGap Essentials Building Cross-Platform Mobile Apps,
Pearson Education, Inc, 2012
4. Joe Lennon, Create modern Web sites using HTML5 and CSS3, available at:
http://www.ibm.com/developerworks/web/tutorials/wa-html5
5. PhoneGap Team, Getting Started with Android, available at:
http://docs.phonegap.com/en/2.1.0/guide_getting-
started_android_index.md.html#Getting%20Started%20with%20Android
6. Cc thng tin tng hp t http://www.w3.org v http://www.whatwg.org

PH LC
Danh mc cc bng
M s Tn bng S trang
1 Bng biu thi gian qu trnh chun ha HTML5 7
2 Bng c t chc nng ca ng dng 51
3 Bng shape trong c s d liu ca ng dng 59
4 Bng lit k cc thnh phn v chc nng ca cc thnh phn
bn trong ng dng
61

Danh mc cc hnh v v biu
M s Tn hnh v v biu S trang
1 S tng quan v cch thc hot ng ca Phonegap 22
2 So snh u im ca vic s dng Phonegap vi Java 25
3 Kin trc bn trong 1 ng dng Phonegap 26
4 Cch thc ng dng Phonegap tng tc vi thit b 28
5 Bng cc hm APIs c h tr cho tng nn tng trong
Phonegap
29
6.1 Cch to 1 Android Project trong Eclipse IDE 31
6.2 Cch thit lp cc thng s to 1 Android Project 32
6.3 Cch truy cp ti file java chnh 33
6.4 cch chnh sa bn trong file java chnh 34
6.5 Cu trc bn trong file AndroidManifest.xml 36
6.6 Cch nhng file js vo file index.html 37
6.7 Hnh chy chng trnh trn nn Android Emulator 38
7.1 Cc file ci t ca AndroVM 39
7.2 Cch nhp my o AndroVM vo trong Virtualbox

40
7.3 Trng thi tin trnh nhp my o AndroVM vo trong
Virtualbox
40
7.4 Trng thi khi nhp xong my o AndroVM vo trong
Virtualbox
41
7.5 Cch thit lp cho my o AndroVM 41
7.6 Cch la chn ci t Network cho AndroVM 42
7.7 Cch thit lp thng s cng Port trong Network ca my o
AndroVM
43
7.8 Cch khi ng mn hnh dng lnh ca adb 44
7.9 Kt ni adb vi my o AndroVM thnh cng 44
7.10 Cch thit lp Debug cho 1 ng dng Android 45
7.11 Cch la chn my o AndroVM thc hin Debug 46
7.12 Cch kim sot li ny sinh trong qu trnh Debug 46
8 Biu phn r chc nng ca ng dng 48
9.1 Biu lung d liu mc khung cnh 51
9.2 Biu lung d liu mc nh 52
9.3 Biu lung d liu mc di nh gii thch chc nng thc
hin thao tc chm
53
9.4 Biu lung d liu mc di nh gii thch chc nng
thm nh
54
thm text
55
chnh sa nh
56
chnh sa text
57
9.8 Biu lung d liu mc di nh gii thch chc nng chia
s facebook
58
10.1 Giao din mn hnh chnh ca ng dng 60
10.2 Giao din hp thoi th vin nh ca ng dng 62
10.3 Giao din thao tc ti nh t thit b 64
10.4 Giao din Bng hp thoi thm text 65
10.5 Nhm nt iu khin i tng ha 66
10.6 Giao din bng hp thoi chnh sa nh 67
10.7 Giao din bng hp thoi chnh sa text 69

Timhieumanguonmophonegapvaxaydungungdung Ngoquangtrung 130421105036 Phpapp02

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Timhieumanguonmophonegapvaxaydungungdung Ngoquangtrung 130421105036 Phpapp02

Uploaded by

Copyright:

Available Formats

Ti: Tm hiu nn tng m ngun m Phonegap v xy dng ng dng

Ng Quang Trung email: ngotrung.poli.t@gmail.com - 1

You might also like