Tìm hiểu nền tảng mã nguồn mở phonegap và xây dựng ứng dụng

Tìm hiểu nền tảng mã nguồn mở phonegap và xây dựng ứng dụng

M C L C

L I NÓI U 4

CH NG I: T NG QUAN V HTML5 5

1.1 Khái ni m HTML5 5

1.1.1 L ch s hình thƠnh 5

1.1.2 Quá trình chu n hóa 6

1.2 M t s đ c đi m n i b t c a HTML5 7

1.2.1 N i dung đa d ng 8

1.2.2 H tr thay th Flash 8

1.2.3 T ng tính b o m t 9

1.2.4 n gi n hóa vi c phát tri n web 10

1.3 Các tính n ng m i có trong HTML5 10

1.3.1 HTML5 h tr các ph n t đ nh ngh a m i 10

1.3.2 HTML5 h tr đ h a t ng tác v i ph n t <canvas> 12

1.3.3 HTML5 cho phép các ng d ng L u tr c c b v i local storage 13

1.3.4 HTML5 h tr phát <audio> vƠ <video> 14

1.3.5 HTML5 C i ti n bi u m u Web 15

1.3.6 HTML5 h tr kh n ng truy c p t i h th ng file system 17

1.3.7 HTML5 t ng t c hi u n ng x lý v i Web Worker vƠ Application Cache 18

1.3.8 HTML5 h tr đ nh v ng i dùng 19

1.3.9 HTML5 h tr kh n ng c ng tác vƠ giao ti p th i gian th c 19

1.3.10 HTML5 h tr ti p nh n các s ki n events đ c g i t máy ch 20

1.3.11 Nh ng tính n ng khác 21

CH NG II: GI I THI U V FRAMEWORK MÃ NGU N M PHONEGAP 22 2.1 Phonegap lƠ gì ? 22

2.2 ôi nét v l ch s c a Phonegap 23

2.3 T i sao l i s d ng Phonegap ? 24

2.4 Cách th c Phonegap ho t đ ng 25

2.5 Các hƠm APIs mƠ Phonegap h tr hi n t i trên các n n t ng mobile 29

CH NG III : CÁCH THI T L P CÀI T MÔI TR NG L P TRÌNH CHO PHONEGAP 30

3.1 Cách thi t l p cƠi đ t Phonegap cho Android Project b ng Eclipse 30

3.1.1 Yêu c u cƠi đ t 30

3.1.2 T o project m i s d ng Phonegap trong Eclipse IDE 31

3.1.3 T o project m u HelloWorld 36

3.1.4 Ch y ch ng trình trên n n Android Emulator 38

3.2 T ng t c đ quá trình Debug mư ngu n b ng cách s d ng AndroVM 38

3.2.1 Yêu c u cƠi đ t 39

3.2.2 Cách thi t l p cƠi đ t AndroVM 39

3.2.3 Cách th c hi n l nh k t n i máy o v i Android Debug Bridge (adb) 43

3.2.4 Cách k t n i môi tr ng l p trình Eclipse IDE v i máy o AndroVM 45

CH NG IV : PHÂN TệCH VÀ THI T K CH NG TRÌNH NG D NG 47

4.1 Gi i thi u v ch ng trình ng d ng 47

4.2 Phơn tích ch ng trình ng d ng v ch c n ng 48

4.2.1 Bi u đ phơn rư ch c n ng 48

4.2.2 c t ch c n ng c a ch ng trình 49

4.3 Phơn tích ch ng trình ng d ng v lu ng d li u 51

4.3.1 Bi u đ lu ng d li u m c khung c nh 51

4.3.2 Bi u đ lu ng d li u m c đ nh 52

4.3.3 Bi u đ lu ng d li u m c d i đ nh gi i thích ch c n ng th c hi n thao tác ch m 53

4.3.4 Bi u đ lu ng d li u m c d i đ nh gi i thích ch c n ng thêm nh 54

4.3.5 Bi u đ lu ng d li u m c d i đ nh gi i thích ch c n ng thêm text 55

4.3.6 Bi u đ lu ng d li u m c d i đ nh gi i thích ch c n ng ch nh s a nh 56

4.3.7 Bi u đ lu ng d li u m c d i đ nh gi i thích ch c n ng ch nh s a text 57

4.3.8 Bi u đ lu ng d li u m c d i đ nh gi i thích ch c n ng chia s

facebook 58

4.4 Thi t k c s d li u c a ch ng trình ng d ng 59

4.5 Thi t k giao di n ch ng trình ng d ng 60

4.5.1 MƠn hình chính c a ng d ng 60

4.5.2 B ng h p tho i th vi n nh 62

4.5.3 MƠn hình nh t thi t b 64

4.5.4 B ng h p tho i thêm text 65

4.5.5 Nhóm nút đi u khi n đ i t ng đ h a 66

4.5.6 B ng h p tho i ch nh s a nh 67

4.5.7 B ng h p tho i ch nh s a text 69

TÀI LI U THAM KH O 71

PH L C 72

L I NÓI U

i n tho i thông minh hay còn g i lƠ smartphone th c s đư mang đ n m t

cu c cách m ng cho các thi t b di đ ng, trong th i kì mƠ công ngh s phát tri n

v i t c đ chóng m t nh hi n nay Nhu c u s d ng thi t b di đ ng đư tr nên r t

ph bi n không ch Vi t Nam mƠ trên toƠn th gi i S ti n b v t b c c a công ngh đư lƠm thay đ i hoƠn toƠn thói quen c ng nh hƠnh vi c a con ng i.Trong

t ng lai, thi t b di đ ng s tr thƠnh ph ng ti n giao ti p vƠ lƠm vi c ch y u

c a con ng i VƠ ph n c t lõi đ t o ra s c h p d n t nh ng chi c smartphone chính lƠ h đi u hƠnh vƠ các ng d ng mƠ chúng đang ch y

Hi n t i, các ng d ng dƠnh cho thi t b di đ ng đang b phơn m nh r t l n do các hưng công ngh l n c nh tranh, ganh đua nhau t o ra các n n t ng h đi u hƠnh di

đ ng c a riêng mình Do đó Phonegap ra đ i v i m c đích “vi t m t l n, biên d ch qua cloud vƠ ch y kh p n i ậ t ng thích v i h u h t các n n t ng h đi u hƠnh di

đ ng hi n t i”, đư nh n đ c s đóng góp c a r t nhi u t ch c vƠ c ng đ ng công ngh l n Phonegap giúp gi m nh gánh n ng - c n ph i n m b t vƠ hi u rõ v các công ngh bên trong m i n n t ng ậ đ i v i nhƠ l p trình trong vi c t o ra ng

d ng có th ch y trên đa n n t ng di đ ng Gi đơy, v i s h tr đ c l c c a

Phonegap, nhƠ l p trình ch c n n m b t vƠ chuyên sơu v 1 công ngh duy nh t, đó

lƠ công ngh n n Web(bao g m HTML5, Javascript, CSS) V i th m nh b n thơn

v l p trinh web vƠ v i nh ng lí do trên, em ch n đ tƠi “Tìm hi u n n t ng mư ngu n m Phonegap vƠ xơy d ng ng d ng”

Em xin chơn thƠnh c m n ThS oƠn Duy Trung đư tr c ti p h ng d n đ tƠi nƠy Em c ng xin cám n các Th y Cô trong Vi n Toán ng d ng vƠ Tin h c đư t o

đi u ki n thu n l i cho em hoƠn thƠnh đ tƠi

Sinh viên th c hi n

Ngô Quang Trung

CH NG I: T NG QUAN V HTML5

HTML5 lƠ m t ngôn ng c u trúc vƠ trình bƠy n i dung cho World Wide Web vƠ s lƠ công ngh c t lõi c a Internet trong t ng lai không xa, đ c đ xu t

đ u tiên b i Opera Software ơy lƠ phiên b n th 5 c a ngôn ng HTML vƠ hi n

t i v n đang đ c phát tri n b i World Wide Web Consortium vƠ WHATWG M c tiêu c t lõi khi thi t k ngôn ng lƠ c i thi n kh n ng h tr cho đa ph ng ti n

m i nh t trong khi v n gi đ c vi c con ng i vƠ các thi t b , các ch ng trình máy tính nh trình duy t web, trình đ c mƠn hình, v.v có th đ c, hi u, hay x lý

m t cách d dƠng HTMl5 v n s gi l i nh ng đ c đi m c b n c a HTML4 vƠ b sung thêm các đ c t n i tr i c a XHTML, DOM, đ c bi t lƠ JavaScript

LƠ phiên b n ti p sau c a HTML 4.01 vƠ XHTML 1.1, HTML5 lƠ m t ph n ng đ đáp l i l i phê bình r ng HTML vƠ XHTML đ c s d ng ph bi n trên World Wide Web lƠ m t h n h p các tính n ng v i các thông s k thu t khác nhau, đ c

gi i thi u b i nhi u nhƠ s n xu t ph n m m ví d Adobe, Sun Microsystems,

Mozilla, Apple, Google, vƠ có nhi u l i cú pháp trong các v n b n web ơy lƠ

m t n l c đ t o nên m t ngôn ng đánh d u có th đ c vi t b ng cú pháp HTML

ho c XHTML Nó bao g m các mô hình x lý chi ti t đ t ng tính t ng thích, m

r ng, c i thi n vƠ h p lý hóa các đánh d u có s n cho tƠi li u, đ a ra các đánh đ u

m i vƠ gi i thi u giao di n l p trình ng d ng (application programming interfaces API) đ t o ra các ng d ng Web ph c t p Cùng m t lý do nh vơy, HTML5 lƠ

m t ng c viên ti m n ng cho n n t ng ng d ng di đ ng Nhi u tính n ng c a HTML5 đ c xơy d ng v i vi c xem xét chúng có th s d ng đ c trên các thi t

b di đ ng nh đi n tho i thông minh vƠ máy tính b ng hay không

N m 1991 HTML ra đ i b i W3C, cho đ n HTML phiên b n 4 ra m t n m

1997 vƠ ngay sau đó nó đư d ng phát tri n t n m 1998 Sau khi phát tri n đ n

n m 2006 W3C l i quay l i phát tri n HTML n n m 2009, chu n XHTML2 sau

5 n m nghiên c u đư không th ra đ i thì W3C ng ng phát tri n XHTML (2.0), trong khi đó, do nhu c u b c thi t mƠ Opera, Mozilla, vƠ Apple đư thƠnh l p

WHATWG (Web Hypertext Application Technology Working Group) đ nghiên

b t đ u h tr HTML5 t phiên b n 9 Các trình duy t s d ng trên mobile vƠ máy tính b ng c ng h tr HTML5 t ng đ ng PC

Tháng 9 n m 2012, W3C đ a ra 1 b n k ho ch d ki n, theo đó s phát hƠnh phiên b n HTML 5 chính th c vƠo cu i n m 2014, vƠ phát hƠnh phiên b n HTML 5.1 hoƠn thi n vƠo cu i n m 2016

D i đơy lƠ bi u đ th i gian quá trình chu n hóa HTML các phiên b n 5.0, 5.1, 5.2

g n hoƠn thi n

Phiên b n kêu g i

nh n xét

Phiên b n phát hƠnh chính th c

d th o đ u tiên

Phiên b n kêu g i góp

ý cu i cùng

Phiên b n

g n hoƠn thi n

Phiên b n phát hƠnh chính th c

d th o đ u tiên

B ng 1 : B ng bi u đ th i gian quá trình chu n hóa HTML5

HTML5 mang l i cho ng i dùng tr i nghi m l t Web hoƠn toƠn m i, nhanh

h n, n đ nh h n vƠ b o m t h n HTML5 s giúp các n i dung trên Web ho t đ ng

t t h n mƠ không c n ph thu c vƠo b t kì m t ng d ng ph tr nƠo khác.Không

nh ng mang l i nh ng l i ích to l n nh ho t đ ng nhanh, n d nh vƠ b o m t h n Bên c nh đó, HTML5 có kh n ng h tr API (Application Programming Interface)

vƠ DOM (Document Object Model) s cho phép d dƠng m r ng, giúp các nhƠ phát tri n t do sáng t o trong vi c t o ra các ng d ng thơn thi n vƠ h u ích h n

H n th , v i HTML5, m i thi t b t máy tính cá nhơn đ n các thi t b di đ ng s có

th d dƠng ti p c n n i dung, t c lƠ s không còn khác bi t n a, ch c n duy nh t

m t đi u ki n : trình duy t đang dùng ph i h tr HTML5, nh ng đi u nƠy có l không còn lƠ đi u ki n khó gi i quy t khi h u h t các trình duy t ph bi n đ u h

tr m nh m HTML5, t : Firefox, Chrome, Opera, Internet Explorer đ n các trình duy t trên iOS, Android đ u h tr t t HTML5

V i HTML5, các nhƠ phát tri n ch c n xơy d ng ng d ng 1 l n, nó có th ho t

đ ng t t trên t t c các thi t b , không nh Flash ho c Silverlight đòi h i ph i cƠi

đ t plugin đ có th hi n th n i dung

Th i gian tr c, báo chí vƠ các nhƠ phát tri n đư t n nhi u gi y m c đ nói

v nh ng gì mƠ HTML5 có th mang l i, so sánh gi a HTML5 vƠ Flash v n chi m

ph n l n n i dung trên Web Flash lơu nay v n chi m ph n l n n i dung trên Web

nh ng hi n nay nó đư vƠ đang d n b thay th b i HTML5

Huy n tho i Steve Jobs đư t ng đ a ra quan đi m r t rõ rƠng, Flash s không bao

gi xu t hi n trên các thi t b di đ ng c a Apple, vƠ c ng đ a ra s ng h tuy t đ i vƠo HTML5 Quan đi m nƠy th hi n rõ rƠng đ n n i Steve Jobs đư vi t 1 b c th

vƠ đ ng trên trang ch c a Apple đ th hi n quan đi m nƠy vƠ xóa tan nh ng mong

mu n đ a Flash lên iOS c a ng i dùng

Bên c nh nh ng l i ích mƠ HTML5 mang l i, gi i phát tri n c ng ch ra nh ng h n

ch r t l n c a Flash, đó lƠ s b t n đ nh, lƠm thi t b ho t đ ng nóng h n vƠ hao pin h n, ph i yêu c u cƠi Plugin đ ho t đ ng VƠ Flash không ph i lƠ t i u cho các thi t b di đ ng khi v n đ v PIN trên các thi t b nƠy luôn lƠ m i quan tơm l n

c a ng i dùng

Hi n nay, nhi u trang web vƠ d ch v l n đư chuy n sang dùng HTML5, có th k

đ n trong s đó lƠ Youtube, Nokia Mapsầ NgoƠi ra, r t nhi u games đ c xơy

d ng b ng HTML5 đư xu t hi n, trong s đó có các games n i ti ng nh Angry Bird, Fieldrunnersầ Cho th y HTML5 ngƠy cƠng đ c quan tơm vƠ phát tri n nhi u h n

1.2.2 H tr thay th Flash

V i s quan tơm ngƠy cƠng l n mƠ các nhƠ phát tri n dƠnh cho HTML5 cho

th y th i gian t i, HTML5 s ngƠy m t phát tri n m nh m h n ơy không ph i lƠ

m t đi u quá b t ng , vì v i nh ng gì mƠ HTML5 mang l i, đó lƠ s l a ch n th c

s đúng đ n vƠ ng i s d ng Web s đ c h ng l i r t nhi u

Th i gian tr c, Google đư phát tri n công c Google Swiffy cho phép ng i dùng chuy n đ i n i dung Flash sang HTML5, Adobe mua l i Nitobi ậ công ty sáng l p

b khung l p trình ng d ng PhoneGap vƠ PhoneGap Build cho phép l p trình viên phát tri n ng d ng n n t ng cross-flatform trên di đ ng v i HTML5 vƠ Javascript Bên c nh đó, b n thơn Adobe c ng cho ra đ i công c mang tên Wallaby cho phép chuy n n i dung t Flash sang HTML5

VƠ ngƠy 09/11 đánh d u b c ti n quan tr ng c a HTML5 khi chinh Adobe tuyên

b s ng ng phát tri n Flash trên các thi t b di đ ng mƠ thay vƠo đó lƠ t p trung phát tri n HTML5 V i gi i công ngh , đơy có th lƠ m t b c ngo t quan tr ng Adobe cho bi t h v n s tung các b n s a l i, nh ng s không phát tri n Flash trên các thi t b di đ ng n a, vƠ Flash Player 11.1 s lƠ phiên b n nơng c p cu i cùng

“Hi n t i HTML5 đư đ c tri n khai r ng rưi trên nhi u n n t ng khác nhau, nó s

tr thƠnh gi i pháp t t nh t cho vi c phát tri n n i dung trên trình duy t c a thi t b

di đ ng” ậ Adobe cho bi t V i thông báo trên, có th th y hi n t i ngay c Adobe

c ng đang d n t b Flash đ t p trung phát tri n HTML5 vì m t chu n Web chung cho t ng lai

V i HTML5, ng i dùng Web s có đ c m t tr i nghi m hoƠn toƠn m i, ng i dùng có th tho i mái xem Video, ch i games trên trình duy t v i m i thi t b mƠ không c n quan tơm đ n các thƠnh ph n b sung c n ph i cƠi thêm V i các thi t b

di đ ng nh Smartphone, Tablet, ng i dùng s không còn lo l ng v hi u n ng

c ng nh th i l ng s d ng PIN n a Vì HTML5 đư t i u hóa cho nh ng lo ng i

đó

M i trình duy t có 1 plug-in riêng do các nhóm l p trình khác nhau l p ra v i

nh ng tiêu chu n khác nhau, đ c đ a ra vƠo th i đi m khác nhau vƠ ki u m u b o

m t c ng khác nhau Thông th ng, m t s phiên b n plug-in có tính b o m t h n

so v i lo i khác VƠ khi s l ng plug-in gia t ng, chúng lƠm t ng đ ph c t p trong ki m tra các l i an ninh Li u plug-in hay trình duy t đư có l h ng l n vƠo

n m ngoái? Li u có ph c t p không khi ch c p nhơt trình duy t mƠ không nơng c p plug-in ho c ng c l i? Ai có th nh đ c?

Thay th nhi u lo i plug-in v i các đ c đi m đ c tích h p v i HTML5 s b đi

đ c nh ng khuy t đi m có trong các plug-in tr c đó Nh ng khuy t đi m có th

b l i d ng đ thi t l p mư đ c N u nh nhóm an ninh ki m tra Firefox, Chorme

ho c IE cho phép cƠi đ t các plug-in nƠy, s nguy hi m s gi m b t đi

Bill Mill ậ chuyên viên thi t k cho Lookingglass Cyber Solutions gi i thích

ng n g n v s thay đ i nƠy: “Tôi th c s thích HTML5 vì nó cho phép tôi làm vi c

trong m t môi tr ng thích h p, trình duy t k t h p v i Javascript, DOM mà không

ph i b t đi b t l i Flash và HTML5 Nó v a là 1 ngôn ng l i v a là 1 công c , không khác bi t l m so v i các plug-in khác”

HTML 5 cung c p 1 ngôn ng l p trình JavaScript, 1 ki u d liêu (XML ho c

DOM) vƠ 1 ph n nguyên t c thi t l p (CSS) đ k t n i v n b n, audio, video vƠ

h a Thách th c trong vi c t o ra cái gì đó t t đ p v n lƠ mênh mông nh ng đi u đó

s đ n gi n h n khi lƠm vi c trong 1 tiêu chu n th ng nh t

Hi n nay ch Adobe s d ng HTML 5 đ tích h p các công c dƠnh cho Flash

c t HTML5 bao g m m t lo t các ph n t ng ngh a m i đ c s d ng đ

đ a ra m t s ngh a cho các ph n ho c các b ph n khác nhau c a m t trang Web,

ch ng h n nh tiêu đ , chơn trang, chuy n h ng, vƠ v.v Trong các phiên b n

tr c c a HTML, th ng s d ng các ph n t <div> đ t o nh ng b ph n nƠy, s

d ng ID ho c các thu c tính l p đ phơn bi t chúng v i nhau V n đ lƠ đi u nƠy không có ngh a ng ngh a, vì không có các quy t c nghiêm ng t quy đ nh ph i ch

rõ các tên l p ho c các ID nƠo đ c s d ng, lƠm cho vi c xác đ nh vùng c th nƠo đang lƠm vi c tr nên vô cùng khó kh n đ i v i ph n m m HTML5 giúp lƠm gi m

b t nh ng v n đ nƠy, lƠm cho vi c phơn tích cú pháp c u trúc ng ngh a c a m t tƠi li u tr nên d dƠng h n đ i v i các trình duy t Web

Th t đáng giá đ nói r ng vi c ti p t c s d ng các ph n t <div> trong HTML5 lƠ hoƠn toƠn h p l , nh ng đ công vi c đ c nơng c p d dƠng, đi u quan tr ng lƠ nên s d ng các ph n t ng ngh a n i có liên quan M t khác, đi u c n thi t lƠ tránh s d ng các ph n t m i cho các m c đích khác h n so v i d đ nh c a

chúng Ví d , không nên s d ng ph n t <nav> cho nhóm các liên k t b t k ; nó

đ c d ki n đ bao quanh kh i chuy n h ng chính trên trang đó

Các ph n t ng ngh a chính mƠ HTML5 gi i thi u lƠ:

<header (tiêu đ )>

Ph n t nƠy đ c s d ng đ đ nh ngh a m t tiêu đ cho m t s ph n c a m t trang Web, có th lƠ toƠn b trang, m t ph n t <article>, ho c m t ph n t <section>

<footer (chơn trang)>

Gi ng nh ph n t <header>, ph n t m i nƠy đ nh ngh a m t chơn trang cho m t

s ph n c a m t trang M t chơn trang không c n cu i c a m t trang, m t ph n t article (bƠi vi t), ho c m t ph n t section (ph n), nh nó th ng lƠm

<nav (chuy n h ng)>

ơy lƠ m t thùng ch a cho các liên k t chuy n h ng ban đ u trên m t trang Web

Ph n t nƠy không đ c d ki n s d ng v i t t c các nhóm các liên k t vƠ ch nên

đ c dùng cho các kh i chuy n h ng l n N u có m t ph n t <footer> có ch a các liên k t chuy n h ng, thì không c n b c các liên k t nƠy trong m t ph n t

<article (bƠi vi t)>

Ph n t <article> đ c s d ng đ đ nh ngh a m t m c đ c l p trên trang có th dùng cho riêng nó, ch ng h n nh m t m c tin t c, bƠi vi t trên blog, ho c nh n xét Th ng s d ng các ngu n cung c p RSS đ cung c p các m c nƠy

<section (ph n)>

Ph n t nƠy đ i di n cho m t ph n c a m t tƠi li u ho c ng d ng, ch ng h n nh

m t ch ng ho c m t ph n c a m t bƠi vi t ho c h ng d n Ví d , ph n đang đ c bơy gi có th đ c bao quanh b i m t ph n t <section> trong HTML5 Các ph n

t <section> th ng có m t tiêu đ , m c dù c ng không c n thi t l m Ví d , tiêu đ cho ph n đang đ c bơy gi s ch a v n b n “Các ph n t ng ngh a”

<aside (nh n xét)>

Ph n t m i nƠy có th đ c s d ng đ đánh d u m t thanh ph ho c m t s n i dung khác đ c cho lƠ có ph n tách r i v i n i dung xung quanh nó M t ví d v

đi u nƠy có th lƠ các kh i qu ng cáo

<hgroup>

Trong m t s tr ng h p, m t trang, bƠi vi t, ho c m t ph n có th c n nhi u h n

m t tiêu đ , ch ng h n nh đơy có m t tiêu đ vƠ ph đ Ví d , h ng d n nƠy

có tiêu đ “T o các trang Web hi n đ i s d ng HTML5 vƠ CSS3” vƠ ph đ “Tri n khai các ph n t canvas vƠ video trong HTML5”, có th b c tiêu đ vƠ ph đ nƠy trong ph n t <hgroup> , b ng cách s d ng m t ph n t <h1> cho tiêu đ chính vƠ

m t ph n t <h2> cho ph đ

Chu n Web c t i hình nh b ng cách t i file GIF hay JPG Chu n Web m i

có th xơy d ng hình nh trên Canvas M t lo t th vi n đ h a đ p đ c đ a ra, giúp cho đ h a c a Website tr nên t ng tác h n

Chính ph n t <canvas> lƠ khá c b n, đ nh ngh a chi u r ng, chi u cao, vƠ mư

đ nh danh (ID) duy nh t cho đ i t ng Sau đó nhƠ phát tri n ph i s d ng m t lo t các JavaScript API đ th c s v các đ i t ng trên khung n n nh (canvas),

th ng khi trang Web đư hoƠn t t d ng hình Nh ng API nƠy cho phép nhƠ phát tri n v hình d ng vƠ các đ ng k , ph t mƠu, đ m đ c vƠ các gradient (đ d c);

t o v n b n; chuy n đ i các đ i t ng khung n n nh; vƠ th hi n hình nh đ ng

Các API c ng cho phép ph n t <canvas> t ng tác vƠ đáp ng v i đ u vƠo ng i dùng ch ng h n nh các s ki n chu t vƠ các s ki n bƠn phím, t o đi u ki n thu n

l i cho vi c s n xu t các trò ch i vƠ các ng d ng Web trên khung n n nh

Các nhƠ phát tri n Web có truy n th ng s d ng các cookie đ l u tr thông tin trên máy tính c c b c a khách truy c p, cho phép m t trang Web đ c l i thông tin nƠy t i m t đi m sau đó Trong khi các cookie r t có ích đ l u tr d li u c

b n, thì chúng l i b h n ch b i th c t lƠ các trình duy t Web th ng không c n thi t gi l i h n 20 cookie cho m i m t máy ch Web ho c nhi u h n 4KB d li u cho m i cookie (bao g m c tên vƠ giá tr ) NgoƠi ra, chúng đ c g i đ n máy ch Web v i m i yêu c u HTTP, gơy ra lưng phí tƠi nguyên

HTML5 cung c p m t gi i pháp cho các v n đ nƠy b ng các Local Storage API (API l u tr c c b ), đ c trình bƠy trong m t đ c t riêng v i tƠi li u HTML5 chính T p các API nƠy cho phép các nhƠ phát tri n l u tr thông tin trên máy tính

c a khách truy c p trong khi v n có c s đ tin ch c r ng chúng v n có đó sau nƠy NgoƠi ra, thông tin có th truy c p b t k đi m nƠo (ngay c sau khi trang đư

đ c đ a ra) vƠ không đ c t i t đ ng v i m i yêu c u HTTP c t nƠy g m có các h n ch cùng ngu n g c (same-origin), đ ng n c n các trang Web kh i b các trang Web khác đ c ho c thay đ i d li u đư l u

H u h t các trình duy t đ u l u tr các trang Web trong b nh nhanh c c b , cho phép xem chúng ngay c khi ng i dùng không n i m ng Vi c nƠy ho t đ ng t t

i các trang t nh, nh ng nó không có s n cho n i dung đ ng th ng d a vƠo c s

d li u, ch ng h n nh Gmail, Facebook, Twitter HTML5 cung c p s h tr cho các ng d ng không n i m ng, đơy trình duy t t i t t c các t p c n thi t đ s

d ng không c n n i m ng ng d ng, vƠ khi ng i dùng s d ng không n i m ng

ng d ng, trình duy t có th cho phép các thay đ i b t k đ c th c hi n trong quá trình nƠy đ c t i lên máy ch khi chúng k t n i l i vƠo m ng Internet

1.3.4 HTML5 h tr phát <audio> vƠ <video>

Trong nh ng n m g n đơy, tính ph bi n c a các trang Web chia s video

nh YouTube vƠ các n n t ng phơn ph i n i dung nh Hulu đư ch ng ki n m t s bùng n to l n trong vi c s d ng Web đ t o lu ng đa ph ng ti n Th t không may, ng i ta không th xơy d ng đ c Web v i n i dung theo ý đ nƠy, vƠ k t qu

lƠ, đ nh d ng t p Flash Video (.flv) vƠ các n n t ng Adobe Flash nhìn chung đư lƠm

đ n gi hóa vi c cung c p các video vƠ ơm thanh

Tuy nhiên, HTML5 bao g m c s h tr cho hai ph n t m i, <audio> vƠ <video>, cho phép các nhƠ phát tri n Web bao g m các n i dung đa ph ng ti n mƠ không

c n ng i dùng cƠi đ t các trình c m thêm c a trình duy t M t s trình duy t, g m

có Mozilla Firefox, Apple Safari, Google Chrome, đư b t đ u h tr các ph n t

m i nƠy vƠ cung c p các nút đi u khi n phát l i c a trình duy t chu n, nên ch c lƠ

ng i dùng s ch n s d ng chúng NgoƠi ra, m t t p h p các JavaScript API chu n

đư đ c cung c p đ cho phép các nhƠ phát tri n t o các nút đi u khi n phát l i riêng c a h , ch c lƠ h mu n lƠm nh v y M t l i th quan tr ng đ phát l i đa

ph ng ti n nguyên g c lƠ v m t lý thuy t nó đòi h i ít tƠi nguyên CPU h n, đi u nƠy cho phép ti t ki m n ng l ng

Tuy nhiên, m t v n đ quan tr ng v i các ph n t đa ph ng ti n m i nƠy lƠ các

đ nh d ng t p đ c t ng trình duy t h tr vƠ các v n đ c p phép b ng sáng ch

th ng đi cùng v i các b mư hóa/gi i mư (codec) khác nhau dùng đ mư hóa các

t p nƠy Mozilla vƠ Opera mu n s d ng các thùng ch a video Theora vƠ codec mư ngu n m , không đòi h i c p gi y phép b ng sáng ch đ bao g m các codec đó trong trình duy t Web M t khác, Apple vƠ Google không hƠi lòng v i ch t l ng

c a Theora, c th đ i v i vi c phơn ph i các n i dung đ nét cao (HD) trên nh ng trang Web gi ng nh YouTube H thích codec H.264, th ng có trong các t p MP4, MOV, ho c MKV

Tuy nhiên, v n đ không ch v i video, do có các v n đ t ng t v i các codec ơm thanh Các đ nh d ng MP3 vƠ AAC b h n ch b i các b ng sáng ch , trong khi

đ nh d ng Vorbis thì không V n đ v i ơm thanh Vorbis lƠ nó không đ c s d ng

r ng rưi, do các máy ph ng ti n di đ ng vƠ nhi u ng d ng ph n m m ph ng ti n không h tr nó

Có r t nhi u quy t đ nh đ c đ a ra v các ph n t <video> v <audio> c a

HTML5 trong t ng lai g n, vƠ s r t thú v đ xem các codec vƠ các đ nh d ng nƠo

đ c đ n gi n hóa theo khuy n cáo cu i cùng

1.3.5 HTML5 C i ti n bi u m u Web

N u đư t o các ng d ng Web t tr c, nhƠ l p trình có kh n ng quen h n

v i t p các nút đi u khi n bi u m u c a HTML, m t s trong đó đ c tri n khai

th c hi n b ng cách s d ng ph n t <input> Trong HTML 4, các ki u đ u vƠo sau đơy đư đ c h tr :

 submit (trình lên)

 text (v n b n)

NgoƠi ra, có m t s ph n t khác đ c s d ng theo các bi u m u nh <select> vƠ

<textarea> Các nút đi u khi n c a bi u m u nƠy cung c p nhi u ch c n ng cho các

tr ng bi u m u c b n nh tên, s đi n tho i, vƠ đ a ch — gi ng nh nh ng gì có

th th y trên m t bi u m u liên h Tuy nhiên, Web lƠ m t n n t ng đư phát tri n

v t xa giai đo n mƠ đó các bi u m u HTML đ c s d ng đ trình lên các bi u

m u liên h — bơy gi chúng đ c s d ng đ trình lên d li u ng d ng đ x lý bên phía máy ch K t qu lƠ, chính các nhƠ phát tri n ng d ng Web liên t c th y mình c n m t s nút đi u khi n bi u m u tinh vi h n, ch ng h n nh các nút quay tròn, các thanh tr t, các nút ch n ngƠy/gi , các nút ch n mƠu s c, vƠ v.v

cung c p các ki u nút đi u khi n nƠy, các nhƠ phát tri n c n s d ng m t th

vi n JavaScript bên ngoƠi đ cung c p các thƠnh ph n giao di n ng i dùng (UI),

ho c s d ng m t khung công tác phát tri n thay th khác nh Adobe Flex,

Microsoft Silverlight, JavaFX HTML5 nh m m c đích l p đ y m t s các kho ng

tr ng do phiên b n tr c c a nó đ l i trong l nh v c nƠy b ng cách cung c p toƠn

lƠ m t thanh tr t

NgoƠi các ki u đ u vƠo m i, HTML5 c ng h tr hai tính n ng chính m i cho các

tr ng bi u m u Tính n ng đ u tiên trong s nƠy lƠ tr ng tơm t đ ng, đ ra l nh cho m t trình duy t t đ ng t p trung vƠo m t tr ng bi u m u c th khi trang

đ c bi u th , mƠ không đòi h i mư JavaScript lƠm nh v y Tính n ng nơng cao

th hai lƠ thu c tính gi ch , cho phép nhƠ phát tri n đ nh ngh a v n b n s xu t

hi n trong m t nút đi u khi n có d ng h p v n b n khi n i dung c a nó r ng

HTML5 cung c p các hƠm APIs h t s c m nh m đ t ng tác v i d li u

ki u nh phơn vƠ h th ng file system c a ng i s d ng các hƠm File APIs nƠy cho phép các ng d ng web có kh n ng lƠm nh ng vi c nh đ c các files d li u 1 cách đ ng b ho c không đ ng b , t o ra các d li u nh phơn 1 cách tùy ý, vi t các

kéo th nó t desktop vƠo trong trình duy t vƠ t i lên d li u ki u nh phơn b ng cách s d ng XMLHttpRequest2

Ví d minh h a nh các hƠm File APIs có th đ c s d ng đ t o ra 1 hình nh thu

nh dƠnh cho vi c xem tr c c a các b c nh khi chúng đang đ c g i t i server, hay cho phép 1 ng d ng l u l i trong 1 file mƠ file nƠy đ c s d ng đ tham chi u t i khi ng i dùng s d ng ng d ng trong tr ng thái offline Hay h n th ,

b ng cách s d ng Web Audio API thì ng d ng có th đ c đ c các file mp3 vƠ

hi n th 1 cách tr c quan b n nh c khi nó đang đ c ch y, thêm vƠo đó, ng i dùng

có th s d ng các đi u ki n logic t phía client đ ki m tra l i d ng mimetype c a

d li u đ c t i lên xem có t ng ng v i đuôi m r ng c a file hay gi i h n kích

th c c a d li u đ c t i lên

“Web” vƠ “offline” lƠ 2 t mƠ r t nhi u ng i dùng nh n th y r ng chúng không bao gi song hƠnh cùng nhau Tuy nhiên trong HTML5 thì m i chuy n l i khác, Trang web v n có th ho t đ ng đ c ngay c khi chúng không đ c k t n i

tr c tuy n Ng i dùng có th t i v các files d li u r t l n (l n h n 1 GB) đ sau

đó có th duy t xem 1 cách offline

Application Cache mang l i cho ng d ng 3 l i ích :

1 Duy t xem ngay c khi offline

2 T ng t c hi u n ng x lý b i vì các ngu n tƠi nguyên đ c Cache l i do đó

s đ c n p nhanh h n

3 Gi m t i cho máy ch - trình duy t s ch t i v các ngu n tƠi nguyên đ c

c p nh t hay đ c thay đ i t phía máy ch

NgoƠi kh n ng l u tr d li u trong cache, thì HTML5 còn nơng cao tr i nghi m

ng i dùng so v i tr c đơy Theo cách x lý truy n th ng, thì mư Javascript trong trình duy t th c thi x lý trong 1 lu ng duy nh t, do v y v i các tính toán yêu c u

th i gian th c thi dƠi thì trong khi th i gian th c thi ch a k t thúc, nó s gơy ra 1

hi u ng ph lƠ khóa (hay ng n ch n) t ng tác c a ng i dùng Tuy nhiên trong HTML5, b ng vi c ra m t tính n ng m i lƠ Web worker thì v n đ nƠy đư đ c gi i

quy t

1 Web Worker (Các trình lƠm vi c trên n n Web) lƠ 1 mư javascript mƠ nó có th

ch y th c thi trong n n, th c thi 1 cách đ c l p v i các mư khác mƠ không h gơy

nh h ng t i hi u n ng x lý c a trang page Ng i dùng v n có th t ng tác v i trang page nh nh n chu t, l a ch n nhi u th , cu n trang, gõ v n b n, ầnói cách khác Web Worker thúc đ y s phát tri n c a các ng d ng đa lu ng, t i u hóa cho các x lý tính toán ph c t p

HTML5 có m t API đ nh v đ a lý cho phép m t ng d ng Web xác đ nh v trí đ a lý hi n t i c a ng i dùng, gi s thi t b mƠ ng d ng đang nh m t i cung

c p các tính n ng đ tìm ki m các thông tin nh v y (ví d , GPS trên đi n tho i di

đ ng) N u ng i dùng không có m t thi t b h tr tính n ng nƠy (ch ng h n nh

m t đi n tho i thông minh iPhone ho c Android 2.0), thì ng i dùng có th s d ng Firefox vƠ t i v m t trình c m thêm đ cho phép thi t l p v trí c a h b ng tay

Các tính n ng có trong HTML5 đ c chia lƠm 2 nhóm : m t lƠ nhóm các tính n ng dùng đ thúc đ y các ng d ng web đ t th cơn b ng v i các ng d ng

n n desktop, hai lƠ nhóm các tính n ng đem t i cho các ng d ng web nh ng l i th

v t lên trên c các ng d ng desktop truy n th ng Kh n ng c ng tác theo th i gian th c lƠ d ng tính n ng đi n hình thu c nhóm 2, nó đem t i l i th c c k to l n cho các ng d ng web

WebSockets vƠ WebRTC có th th c s lƠm thay đ i các trò ch i games trong s giao ti p theo th i gian th c b i nó khi n vi c l p trình phát tri n d dƠng h n vƠ nơng cao tr i nghi m c a ng i dùng

WebSoket lƠ công ngh h tr giao ti p hai chi u gi a client vƠ server b ng cách s

d ng m t TCP socket đ t o m t k t n i hi u qu vƠ ít t n kém M c dù đ c thi t

k đ chuyên s d ng cho các ng d ng web, l p trình viên v n có th đ a chúng vƠo b t kì lo i ng d ng nƠo

D li u truy n t i thông qua giao th c HTTP (th ng dùng v i k thu t Ajax) ch a nhi u d li u không c n thi t trong ph n header M t header request/response c a HTTP có kích th c kho ng 871 byte, trong khi v i WebSocket, kích th c nƠy ch

lƠ 2 byte (sau khi đư k t n i)

V y gi s trong m t ng d ng game có th t i 10,000 ng i ch i đ ng nh p cùng lúc, vƠ m i giơy h s g i/nh n d li u t server Hưy so sánh l ng d li u header

mƠ giao th c HTTP vƠ WebSocket trong m i giơy:

- 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 riêng ph n header thôi c ng đư chi m m t ph n l u l ng đáng k v i giao

h n ch :

- Ki m soát vòng Polling lƠ 1 k thu t c đi n đ c s d ng b i h u h t đa s các

ng d ng AJAX ụ t ng c t y u đơy lƠ ng d ng s g i l p đi l p l i t i máy

ch đ thu nh n v d li u i u nƠy t ng t v i giao th c HTTP, xét cho cùng thì

vi c nh n v d li u c ng quay quanh 1 đ nh d ng request/response (yêu c u/h i

đáp) Client t o ra 1 yêu c u request vƠ ch đ i máy ch h i đáp l i vƠ tr v d

li u.v n đ r c r i l n g p ph i đơy lƠ v i nh ng ki m soát vòng polling r t l n, thì nó s t o ra chi phí ph cho giao th c HTTP r t l n

- Ki m soát vòng Long polling trong th i gian kéo dƠi trong khi máy ch ch a s n sƠng tr v d li u thì nó s gi yêu c u nƠy m cho t i khi d li u đ c s n sƠng

đ tr v Do v y, k thu t nƠy th ng đ c trích d n nh 1 vi c lƠm treo ph ng

th c GET Khi d li u đư đ c s n sƠng thì máy ch s h i đáp tr v vƠ đóng k t

n i, quá trình x lý nƠy s đ c l p đi l p l i

Theo cách khác thì Server-Sent Events (SSEs) đ c thi t k đ mang l i hi u qu

t t h n Khi giao ti p b ng SSEs, thì máy ch có th đ y d li u v ng d ng b t

c khi nƠo nó mu n mƠ không c n ph i t o ra 1 yêu c u request Hay hi u theo cách khác, thì các c p nh t máy ch có th đ c truy n phát 1 cách liên t c, t đ ng,

t c th i t i client. SSEs ch m ra 1 kênh giao ti p 1 chi u gi a máy ch vƠ client

i m khác bi t chính gi a Server-Sent Events vƠ long-polling lƠ SSEs đ c ki m soát tr c ti p t trình duy t vƠ ng i dùng ch đ n gi n lƠ l ng nghe các thông đi p

mƠ thôi

Các tính n ng khác m i đ c HTML5 gi i thi u bao g m các ki u MIME vƠ

đ ng ký trình x lý giao th c, vì v y các ng d ng Web có th đ c đ ng ký nh các ng d ng m c đ nh v i m t ki u t p ho c giao th c c th ; qu n lý l ch s trình duy t, mƠ cho đ n bơy gi v n c n ph i đ c th c hi n th công ho c b ng cách s

d ng m t khung công tác JavaScript bên ngoƠi; vƠ m t lo t các ph n t vƠ các thu c tính m i khác lƠm cho các nhƠ phát tri n Web th c hi n d dƠng h n

CH NG II: GI I THI U V FRAMEWORK MÃ NGU N

Phonegap hi n t i h tr các n n t ng mobile sau :

 Apple iOS (g m 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 (phiên b n BlackBerry 4.6 vƠ m i h n):

www.blackberry.com/developers

 Samsung bada: http://developer.bada.com

B t đ u t phiên b n 2.2.0 tr lên, thì phonegap b t đ u h tr n n t ng h đi u hƠnh m i nh t c a Microsoft lƠ Windows 8 (bao g m c Window 8 ch y trên trên

vi x lý c u trúc X86 vƠ Windows RT ch y trên vi x lý c u trúc ARM)

Phonegap lƠ m t d án mư ngu n m hoƠn toƠn mi n phí c a Nitobi giúp vi c phát tri n ng d ng d dƠng h n đ i v i m i h đi u hƠnh Phát tri n đ u tiên t i

m t s ki n iPhoneDevCamp San Francisco, PhoneGap ti p t c giƠnh chi n

th ng gi i th ng Choice Award t i O’Reilly Media 2009 h i ngh Web 2.0 tháng

4 n m 2009 ( 4 s n ph m khác c ng dƠnh chi n th ng bao g m: 80 legs, zealLog, Bantam Network, Dubmenow) m ra h ng đi m i cho các nhƠ phát tri n ng d ng web K t đó có 600.000 l t t i v vƠ hƠng ngƠn ng d ng đ c phát tri n d a trên Phonegap Apple đư xác nh n r ng Framework nƠy đư đ c phê duy t

Tuy đ c t o ra b i Nitobi nh ng đ ng sau Phonegap lƠ s đóng góp c a r t nhi u

ng i trong nh ng t ch c l n nh IBM, RIM vƠ Microsoft Phonegap c ng kh ng

đ nh r ng: H có m t c ng đ ng phát tri n h p đ n, ho t đ ng m , minh b ch vƠ

h p tác

Framework PhoneGap đ c s d ng b i m t s n n t ng ng d ng di đ ng nh Worklight , Convertigo vƠ appMobi nh lƠ x ng s ng c a đ ng c phát tri n đi n tho i di đ ng dƠnh cho khách hƠng c a h Adobe chính th c công b vi c mua l i

c a Nitobi Software (nhƠ phát tri n ban đ u) vƠo tháng 10 n m 2011, trùng kh p

v i đi u đó các mư PhoneGap đư đ c s d ng cho Apache Software Foundation đ

b t đ u m t d án m i đ c g i lƠ Apache Cordova

các phiên b n phonegap v tr c, luôn b t bu c nhƠ l p trình khi t o ra các ng

d ng iOS thì c n ph i có 1 máy tính ch y Mac c a Apple, hay nhƠ l p trình mu n

t o ra các ng d ng cho windowphone thì ph i có máy tính ch y windows Tuy nhiên t sau tháng 9 n m 2012, thì d ch v “PhoneGap Build” đư đ c ra m t vƠ cho phép nhƠ l p trình t i lên mư ngu n c a h t i 1 h th ng biên d ch đám mơy ,

vƠ nh đó biên d ch ra các ng d ng t ng ng cho t ng n n t ng h đi u hƠnh

đ c h tr

2.3 T i sao l i s d ng Phonegap ?

N u lƠ m t l p trình viên hay nh ng ng i lƠm vi c trong l nh v c tin h c h n còn nh đ n thu t ng : “Write one, run any where” xu t hi n vƠ tr thƠnh m t c n

s t vƠo ngƠy 23/5/1995 NgƠy mƠ công ty máy tính Sun Microsystems đư gi i thi u

m t công c l p trình m i ậ ngôn ng Java Java ra đ i v i m t x m nh kh c ph c khó kh n trong vi c chuy n đ i các ng d ng vi t trên h đi u hƠnh OS vƠ các h

x lý CPU khác nhau Do v y, ng i l p trình ch c n vi t ng d ng b ng Java đúng m t l n, sau đó có th s d ng ng d ng nƠy trên các h đi u hƠnh khác nhau

nh Windows95, WindowsNT, Mac OS, Unix, theo ph ng chơm: “vi t m t l n,

s d ng b t k đơu”

Hình 2: So sánh u đi m c a vi c s d ng Phonegap v i Java

Cơu h i đư đ c lƠm sáng t ó lƠ Phonegap chính lƠ truy n nhơn su t s c c a

Java khi hoƠn thi n vƠ đ y tiêu chí “Write one, run any where” lên m t t m cao

m i

Nh đư nói đ n t tr c, Phonegap cho phép 1 nhƠ phát tri n ph n m m xơy

d ng các ng d ng native applications cho các thi t b mobile (bao g m c

smartphones vƠ tablets) b ng cách s d ng các công ngh web nh HTML, CSS, JavaScript 1 nhƠ phát tri n ph n m m đóng gói 1 ng d ng n n web (web

application) thƠnh 1 ng d ng native application đ c h tr cho t ng n n t ng

mobile d a vƠo PhoneGap package

Hình 3: Ki n trúc bên trong 1 ng d ng Phonegap

Trong ph m vi c a ng d ng native application, thì giao di n lƠm vi c c a ng

d ng v b n ch t bao g m duy nh t 1 mƠn hình vƠ nó c ng gi ng nh 1 khung nhìn web view chi m d ng toƠn b không gian mƠn hình c a thi t b Khi ng d ng đ c

kh i ch y thì nó s t i trang page kh i t o c a ng d ng (thông th ng lƠ trang

index.html nh ng nhƠ l p trình có th d dƠng thay đ i thƠnh trang khác) vƠo trong khung nhìn web view vƠ sau đó chuy n đi u khi n t i web view đ cho phép ng i dùng t ng tác v i ng d ng web application Khi ng i dùng t ng tác v i n i

dung content c a ng d ng (web application), thì các liên k t links hay các mư

JavaScript trong ph m vi ng d ng đó có th t i các n i dung content khác t trong

ph m vi các files tƠi nguyên đ c đóng gói v i ng d ng nƠy, hay có th truy c p thông qua m ng network vƠ t i các n i dung content t 1 website hay t 1 server v

i v i 1 vƠi n n t ng mobile gi ng nh bada, Symbian vƠ webOS thì ng d ng native application v b n ch t chính lƠ 1 ng d ng web application

nh ngh a v webview

1 web view là 1 thành ph n c a ng d ng native application mà đ c s d ng đ

bi u di n n i dung web content (thông th ng là các trang HTML) trong ph m vi 1

c a s hay 1 màn hình c a ng d ng native application V b n ch t thì nó gi ng

nh 1 thành ph n có kh n ng ti p c n theo h ng l p trình, đ c đóng gói vào bên trong trình duy t web browser có s n trong các thi t b mobile

Ví d nh : trên n n t ng BlackBerry, thì nó đ c th c thi x lý nh 1 đ i t ng

nh trên Android, nó đ c th c thi b ng cách s d ng 1 khung nhìn webview

(android.webkit.WebView) và trên IOS, thì nó là 1

UIWebView(System/Library/Frameworks/UIKit.framework)

ng d ng web application ch y trong ph m vi 1 webview thì c ng gi ng nh b t

kì nh ng ng d ng web application khác mƠ chúng đ c ch y bên trong 1 trình duy t web c a mobile Nó có th m các trang HTML khác (theo c 2 cách : 1 cách

đ a ph ng tr c ti p trên thi t b hay theo cách m t 1 web server đ t 1 n i nƠo đó) JavaScript nhúng vƠo bên trong các files mư ngu n c a ng d ng ch u trách nhi m th c thi x lý các đi u ki n logic, n hi n n i dung content n u c n, ch i các media files, m các trang pages m i, th c thi các tính toán, vƠ nh n v n i dung content t server hay g i n i dung content t i server Giao di n c a ng d ng đ c

t o thƠnh t HTML vƠ CSS

1 trình duy t web mobile thông th ng không có kh n ng truy c p vƠo các thƠnh

ph n sơu bên trong thi t b gi ng nh nh ng ng d ng ch y tr c ti p trên thi t b (nh Contacts, Accelerometer, Camera, Compass, Microphone, ầ) có th xơy

d ng 1 ng d ng mobile thú v thì ng d ng đó c n ph i có kh n ng truy c p vƠo các thƠnh ph n bên trong c a thi t b , v t ra ngoƠi 1 trình duy t web thông th ng

giúp cho đi u c n thi t nƠy b ng cách cung c p ra 1 b các hƠm

JavaScript APIs, cho phép các nhƠ phát tri n ph n m m có th s d ng đ t o nên

ng d ng web application ch y trong môi tr ng ng d ng c a Phonegap có kh

n ng truy c p vƠo các thƠnh ph n c a thi t b v t quá gi i h n ng c nh trình

duy t web

Hình 4: Cách th c ng d ng Phonegap t ng tác v i thi t b

Khi 1 l p trình viên th c thi x lý 1 tính n ng trong 1 ng d ng mƠ nó có s d ng 1 trong các hƠm PhoneGap APIs, thì ng d ng g i t i API b ng cách s d ng

JavaScript vƠ sau đó 1 l p layer đ c bi t trong ng d ng s d ch hƠm PhoneGap API nƠy, đ g i t i hƠm native API thích h p v i tính n ng t ng ng

B ng d i ch ra các hƠm APIs đ c h tr cho t ng n n t ng

Hình 5: B ng các hàm APIs đ c h tr cho t ng n n t ng trong Phonegap

V i  lƠ có h tr

VƠ  lƠ không h tr

CH NG III : CÁCH THI T L P CÀI T M ÔI TR NG

Vi c t o l p môi tr ng h tr l p trình ng d ng trong Phonegap h t s c đ n

gi n vƠ d dƠng, NhƠ phát tri n có th t o l p d án liên quan đ n Phonegap trên b t

c n n t ng h đi u hƠnh nƠo mƠ h s d ng nh Windows, Mac OS, Linux, ầ hay

h n th , vi c phát tri n Phonegap đ t o ra ng d ng dƠnh riêng 1 n n t ng h đi u hƠnh di đ ng nƠo đó, đ u đ c h ng d n 1 cách rõ rƠng t chính nhóm tác gi t o

ra Phonegap, đ tìm hi u thêm có th truy c p vƠo trang sau :

http ://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html

Tuy nhiên trong gi i h n c a đ án lƠ t o ra ph n m m ng d ng dƠnh riêng cho h

đi u hƠnh Android, nên do đó ch đi tìm hi u các t o l p môi tr ng l p trình phát tri n v i Phonegap cho Android, vƠ trong môi tr ng h đi u hƠnh máy tính s

 Android SDK vƠ Android ADT Plugin cho eclipse: T i b n

Android SDK vƠ Android ADT Plugin m i nh t, vƠ cƠi đ t, thi t l p cho phù

h p v i môi tr ng lƠm vi c t i đ ng d n sau :

http://developer.android.com/sdk/index.html

 Phonegap Framework : T i b n phonegap m i nh t t i đ ng

d n sau : http://phonegap.com/download

3.1.2 T o project m i s d ng Phonegap trong Eclipse IDE

 M Eclipse, ch n New > Android Project

Hình 6.1: Cách t o 1 Android Project trong Eclipse IDE

 Nh p vƠo tên Project, SDK version cho project vƠo các thông tin liên quan,

có th dùng m u bên d i:

L u ý: ph n version cho SDK, có th ch n tùy ý nh ng ph i xác đ nh

Android SDK version nào mà mu n vi t app, đ tránh ch nh s a v sau

Chu n nh t luôn là 2.2 và 2.3 Cho nh ng dòng máy màn hình l n (tablet) có

th dùng 4.0+

Hình 6.2: Cách thi t l p các thông s đ t o 1 Android Project

 Trong file Phonegap đư download v , ti n hƠnh gi i nén vƠ tìm đ n th m c lib, ch n th m c Android

Trong bƠi h ng d n nƠy s d ng Phonegap Cordova 1.5.0, nên ch s d ng

2 files: cordova-1.5.0.js vƠ cordava-1-.5.0.jar vƠ folder xml

 Tìm vƠo th m c Project v a t o, s th y các th m c g m: assets, bin, gen, res, src sau đó t o thêm 2 folder lƠ libs vƠ assets/www

 Sao chép nh ng file đư download vƠo các th m c nh sau: (thay th

cordova-1.x.x thƠnh version t ng ng, nh cordova-1.5.0)

Sao chép cordova-1.x.x.js vƠo /assets/www

Sao chép cordova-1.x.x.jar vƠo /libs

Sao chép c th m c xml vƠo /res

 Quay tr l i c a s lƠm vi c c a Eclipse, ch n Package Explorer (c a s lƠm

vi c bên trái) vƠ b m F5(refresh) đ c p nh t file m i

L u ý: n u thao tác gì bên ngoài c a s làm vi c c a Eclipse thì khi quay l i

nh b m F5, n u không nó s không c p nh t

 Trong c a s Package Explorer,

ch n src/com.phonegap.demo/DemoActivity.java (ho c tên project đư t o,

đ liên k t đ n file java chính ):

Hình 6.3 : Cách truy c p t i file java chính

 Ch nh s a l i theo nh sau:

S a extend c a class t Activity thƠnh DroidGap vƠ Thay

th setContentView() thƠnh super.loadUrl(“file:///android_asset/www/index.html”);

Thêm vƠo import org.apache.cordova.*;

Xóa b import android.app.Activity;

Hình 6.4 : cách ch nh s a bên trong file java chính

 B m chu t ph i vƠo AndroidManifest.xml vƠ ch n Open With > Text

<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” />

Hình 6.5: C u trúc bên trong file AndroidManifest.xml