Tim hieu ma nguon mo phone gap va xay dung ung dung ngo quang trung

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

Ngô Quang Trung – email: [email protected] - 1

Website: http://aboutsedi.blogspot.com/

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

1.1. Khái niệm 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.

1.1.1. Lịch sử hình thành

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

phiên bản 4.01, W3C ngừng phát triển HTML chuyển sang phát triển XHTML. Đến

http://vi.wikipedia.org/wiki/World_Wide_Web

http://vi.wikipedia.org/wiki/World_Wide_Web

http://vi.wikipedia.org/wiki/Internet

http://vi.wikipedia.org/w/index.php?title=Opera_Software&action=edit&redlink=1

http://vi.wikipedia.org/wiki/HTML

http://vi.wikipedia.org/wiki/World_Wide_Web_Consortium

http://vi.wikipedia.org/w/index.php?title=WHATWG&action=edit&redlink=1

http://vi.wikipedia.org/wiki/Tr%C3%ACnh_duy%E1%BB%87t_web

http://vi.wikipedia.org/w/index.php?title=HTML4&action=edit&redlink=1

http://vi.wikipedia.org/wiki/XHTML

http://vi.wikipedia.org/wiki/DOM

http://vi.wikipedia.org/wiki/JavaScript

http://vi.wikipedia.org/wiki/Ng%C3%B4n_ng%E1%BB%AF_%C4%91%C3%A1nh_d%E1%BA%A5u

http://vi.wikipedia.org/wiki/Giao_di%E1%BB%87n_l%E1%BA%ADp_tr%C3%ACnh_%E1%BB%A9ng_d%E1%BB%A5ng

http://vi.wikipedia.org/wiki/%E1%BB%A8ng_d%E1%BB%A5ng_Web




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

cứu một giải pháp mới. Giải pháp này đã được W3C chấp nhận. Sự hợp tác

của W3C và WHATWG đã thai nghén ra HTML5 từ năm 2009. Được phát triển

theo mô hình cuốn chiếu nên HTML5 vẫn đang hoàn thiện nốt các phần còn lại,

nhưng những phần đã ra mắt thì nhanh chóng được hỗ trợ.

HTML5 đã sớm được hỗ trợ trong các trình duyệt trên PC như Mozilla Firefox

(phiên bản 3.5+), Apple Safari (phiên bản 4.0+), Opera (phiên bản 10.0+), Google

Chrome (phiên bản 3.0+), chậm trễ nhất là Internet Explorer của Microsoft cũng đã

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.

1.1.2. Quá trình chuẩn hóa

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

Phiên bản 2012 2013 2014 2015 2016

HTML 5.0 Phiên bản

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

1.2. Một số đặc điểm nổi bật củ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.

1.2.1. Nội dung đa dạng

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

đó.

1.2.3. Tăng tính bảo mật

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.

1.2.4. Đơn giản hóa việc phát triển web

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.

1.3. Các tính năng mới có trong HTML5

1.3.1. HTML5 hỗ trợ các phần tử định nghĩa mới

Đặ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ử

<nav>, do phần tử <footer> cũng sẽ đáp ứng cho riêng nó.




<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ụ đề.

1.3.2. HTML5 hỗ trợ đồ họa tương tác với phần tử <canvas>

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

1.3.3. HTML5 cho phép các ứng dụng Lưu trữ cục bộ với local storage

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

vớ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ợ:

button (nút ấn)

checkbox (hộp kiểm tra)

file (tệp)

hidden (ẩn)

image (hình ảnh)

password (mật khẩu)

reset (thiết lập lại)

radio (nút tròn)




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

bộ các kiểu đầu vào khác nhau của biểu mẫu mới:

color (màu)

date (ngày)

datetime (ngày giờ)

datetime-local (ngày giờ địa phương)

email (thư điện tử)

month (tháng)

number (số)




range (phạm vi)

search (tìm kiếm)

tel (điện thoại)

time (thời gian)

url (địa chỉ)

week (tuần)

Lúc này, việc hỗ trợ cho các trường biểu mẫu mới còn khá hạn chế. Trình duyệt

Mobile Safari trên iPhone sử dụng của một số các kiểu mới này để thay đổi kiểu

trình bày bàn phím cho người sử dụng (ví dụ, với các kiểu e-mail, ký hiệu @ và các

phím tắt .com sẽ được hiển thị). Ngoài ra, Opera cung cấp một số widget mới cho

nhiều nút điều khiển này, bao gồm một nút quay tròn cho kiểu số và một nút chọn

ngày của lịch cho các kiểu có liên quan đến ngày. Kiểu có sẵn phổ biến nhất trong

các đề xuất mới này là kiểu phạm vi, được Opera, Safari và Google Chrome biểu thị

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.

1.3.6. HTML5 hỗ trợ khả năng truy cập tới hệ thống file system

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

files, đọc 1 cây thư mục file 1 cách đệ quy, cho phép thực hiện xử lý trên file khi




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.

1.3.7. HTML5 tăng tốc hiệu năng xử lý với Web Worker và Application Cache

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

1.3.8. HTML5 hỗ trợ định vị người dùng

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.

1.3.9. HTML5 hỗ trợ khả năng cộng tác và giao tiếp thời gian thực

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

http://websocket.org/

http://www.webrtc.org/




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

thức HTTP truyền thống.

WebRTC đem đến khả năng hỗ trợ cho video và audio trong hội thảo trực tuyến hay

trong truyền phát video trực tuyến.

1.3.10. HTML5 hỗ trợ tiếp nhận các sự kiện events được gửi từ máy chủ

HTML5 Server-Sent Events cho phép 1 trang page tiếp nhận các cập nhật

liên tục, tức thời từ phía máy chủ, bất cứ khi nào có 1 sự kiện event mới xảy ra trên

máy chủ thì 1 thông báo sẽ được gửi tới client. Để thực sử hiểu về Server-Sent

Events, thì trước hết cần phải hiểu rõ về giới hạn mà công nghệ AJAX đi trước bị

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.

1.3.11. Những tính năng khác

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

MỞ PHONEGAP

2.1. Phonegap là gì ?

Phonegap là 1 framework mã nguồn mở dùng cho việc xây dựng các ứng dụng

native Applications đa nền tảng bằng cách sử dụng các công nghệ web tiêu chuẩn

như HTML, CSS, Javascripts. Kiểu ứng dụng mobile dạng này được gọi là hybrid

application (ứng dụng lai).

Hình 1: Sơ đồ tổng quan về cách thức hoạt động của Phonegap

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

http://developer.apple.com/

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)

2.2. Đôi nét về lịch sử của Phonegap

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

http://developer.palm.com/

http://create.msdn.com/en-us/home/getting_started

http://create.msdn.com/en-us/home/getting_started

http://www.developer.nokia.com/Devices/Symbian

http://www.blackberry.com/developers

http://developer.bada.com/




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

http://www.java.com/en/




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.

2.4. Cách thức Phonegap hoạt động

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

Browser Field object (bằng cách sử dụng net.rim.device.api.browser.field2).hay

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.

PhoneGap trợ 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.

2.5. Các hàm APIs mà Phonegap hỗ trợ hiện tại trên các nền tảng mobile

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

LẬP TRÌNH CHO PHONEGAP

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ử

dụng phổ biến nhất là Windows.

3.1. Cách thiết lập cài đặt Phonegap cho Android Project bằng Eclipse

3.1.1. Yêu cầu cài đặt

Eclipse: Tải về và cài đặt phần mềm Eclipse IDE tại đường

dẫn sau : http://www.eclipse.org/downloads/

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

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

http://www.eclipse.org/downloads/

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

http://phonegap.com/download




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

Editor và thêm vào:




<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 đó thêm tiếp dòng sau vào tag activity:

android:configChanges=”orientation|keyboardHidden”

file AndroidManifest.xml phải trông như thế này




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

3.1.3. Tạo project mẫu HelloWorld.

- Trong thư mục /assets/www, tạo file index.html. Sau đó sao chép nội dung sau

đây vào source, chắc chắn rằng đã nhúng cordova-1.x.x vào project và file html.

Nếu ko chương trình sẽ không chạy. Thay thế 1.x.x thành version đang sử dụng (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>

Hình 6.6: Cách nhúng file js vào file index.html




3.1.4. Chạy chương trình trên nền Android Emulator

- Nên refresh (F5) trước khi run để Eclipse update những thông tin mới.

- Bấm chuột phải vào tên project vào chọn Run As > Android Application

- Nếu thiêdt lập đúng, chương trình sẽ chạy hoàn chỉnh như sau:

Hình 6.7: Hình chạy chương trình trên nền Android Emulator

3.2. Tăng tốc độ quá trình Debug mã nguồn bằng cách sử dụng

AndroVM

Việc thực hiện Debug mã nguồn của 1 dự án viết cho Android, bằng cách sử

dụng máy giả lập Android emulator đi kèm bộ Android SDK tồn tại khá nhiều vấn

đề. Bộ giả lập này thường khởi động rất lâu và có độ phản hồi rất chậm và hay gặp

tình trạng giật treo ngay cả khi cấu hình máy tính sử dụng không phải là thấp.

http://www.google.com.vn/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CCsQFjAA&url=http%3A%2F%2Fdeveloper.android.com%2Ftools%2Fhelp%2Femulator.html&ei=uFqzULbdJfC0iQev7YCQAw&usg=AFQjCNE9k0r8bgjEO4p_1jjajrK4QUo7-A&sig2=CfGbl_yZHxzHn5hVdPK2qw


http://www.google.com.vn/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&sqi=2&ved=0CCwQFjAA&url=http%3A%2F%2Fdeveloper.android.com%2Fsdk%2Findex.html&ei=O7OvUIXcEc6ZiQfTyID4Ag&usg=AFQjCNFbgMqImhTGaT6VIt6_bZnsYGlu7Q&sig2=cFW0dDGU3vT2eRtbhn2Cwg




Để khắc phục những hạn chế trên, Giải pháp đưa ra là sử dụng máy ảo được tạo bởi

AndroVM.

3.2.1. Yêu cầu cài đặt

AndroVM : Tải phiên bản mới nhất của AndroVM

tại đường dẫn sau : http://androvm.org/blog/download/

Lưu ý: AndroVM có rất nhiều phiên bản dành riêng phù hợp với các loại

thiết bị như điện thoại, máy tính bảng.Do vậy cách phân biệt các phiên bản

này dựa vào sự xuất hiện của các từ sau ( khi chúng có mặt trong tên của

phiên bản AndroVM) : “t” nghĩa là phiên bản này dùng để giả lập máy tính

bảng, “p” có nghĩa là dùng để giả lập điện thoại, “tp” có nghĩa là dùng giả

lập được cả 2 loại thiết bị trên

Virtualbox : Tải về phần mềm tạo máy ảo Virtualbox tại đường dẫn

sau : https://www.virtualbox.org/wiki/Downloads

3.2.2. Cách thiết lập cài đặt AndroVM

- Trước tiên, cần cài đặt phần mềm Virtualbox, sau đó sẽ chọn tải về phiên bản

AndroVM phù hợp theo yêu cầu. Sau khi tải về xong, sẽ nhận được1 file có đuôi là

.tar (có kiểu tên file như sau : androVM_vbox86tp_4.1.1_r4-20121119-gapps-

houdini-flash.tar), tiến hành giải nén file này ra, sẽ thấy các files như sau :

Hình 7.1: Các file cài đặt của AndroVM

http://androvm.org/blog/



http://androvm.org/blog/download/

https://www.virtualbox.org/wiki/Downloads





- Tại đây chú ý tới file có biểu tượng màu da cam trên đầu, có đuôi là .ovf , nhấn

đúp vào file này. Ngay sau đó 1 hộp thoại như sau sẽ hiện ra :

Hình 7.2: Cách nhập máy ảo AndroVM vào trong Virtualbox

- Tiếp sau đó ấn chọn vào Import, 1 hộp thoại như sau sẽ xuât hiện

Hình 7.3: Trạng thái tiến trình nhập máy ảo AndroVM vào trong Virtualbox




- Sau khi Tiến trình phía trên chạy xong, sẽ thấy 1 biểu tượng mới xuất hiện như

hình sau :

Hình 7.4: Trạng thái khi nhập xong máy ảo AndroVM vào trong Virtualbox

- Nhấn chuột trái lên trên tên máy ảo AndroVM vào nhập vào ở trên và chọn vào

Setting …

Hình 7.5: Cách thiết lập cho máy ảo AndroVM




- 1 hộp thoại mới xuất hiện, tại đây chọn vào thẻ Network. Tại hộp thoại này, ở

mục Attached to, chọn vào NAT như hình

Hình 7.6: Cách lựa chọn cài đặt Network cho AndroVM

- Tiếp tục, ấn chọn vào Advanced >> sau đó chọn vào Port Forwarding. 1 bảng

hộp thoại mới sẽ hiện ra, Tại đâ, nhấn chọn vào dấu cộng màu xanh, ở phía góc

trên bên tay phải, và ngay lập tức xuất hiện 1 dòng mới có tên là Rule 1 như trong

hình sau




Hình 7.7 : Cách thiết lập thông số cổng Port trong Network của máy ảo AndroVM

Tại đây, chú ý vào các cột Host Post và Guest Port, ấn chuột vào 2 ô tương ứng ở

phía dưới 2 cột đó, và điền vào giá trị là 5555. Nhấn vào OK liên tục để hoàn thành

việc thiết lập, nhấn đúp vào máy ảo mà vừa mới thiết lập xong, để khởi động nó.

Lưu ý : Lần đầu tiên khi khởi động 1 máy ảo Android thì cũng giống như bao máy

Android thật khác, cần phải điền vào 1 số thông tin cá nhân vào trong máy như tên,

tài khoản gmail, … (có thể bỏ qua điều này).

3.2.3. Cách thực hiện lệnh kết nối máy ảo với Android Debug Bridge (adb)

Sau khi khởi động máy ảo xong, cần đi tới thư mục android-sdk-windows

– thư mục mà được tạo ra ban đầu khi cài đặt bộ Android SDK trong Eclipse IDE

Đi tới thư mục theo đường dẫn sau : … \android-sdk-windows\platform-tools,

Nhấn Shift + nhấn chuột phải vào không gian của thư mục (Lưu ý là không tích

chuột chọn lên bất cứ 1 file nào cả), sau đó Nhấn chọn vào Open command

window here




Hình 7.8 : Cách khởi động màn hình dòng lệnh của adb

1 hộp thoại dòng lệnh sẽ hiện lên, tại hộp thoại này gõ vào lệnh :

adb connect localhost

Rồi ấn Enter, nếu kết nối thành công thì sẽ nhìn thấy thông báo như hình sau :

Hình 7.9 : Kết nối adb với máy ảo AndroVM thành công




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

Bật Eclipse IDE chứa các mã nguồn project mà đang thực hiện cần Debug

lên. Giờ thiết lập lại cấu hình của project trong Eclipse IDE như các hình sau :

Chọn vào Run ở thanh điều hướng trên cùng của Eclipse IDE >> tiếp chọn

vào Run Configurations …

1 bảng hộp thoại mới sẽ hiện ra, nhấn đúp vào Android Application, Ngay

sau đó sẽ xuất hiện 1 dòng có tên là New_configuration mới như hình dưới,

ấn chọn vào dòng đó :

Hình 7.10 : Cách thiết lập Debug cho 1 ứng dụng Android

Chú ý tới hộp thoại phía bên tay phải, ấn vào Browse … chọn tới project

mà muốn thực hiện Debug, ở dòng Name : có thể gõ và thay 1 tên mới vào,

chẳng hạn như Demo AndroVM, sau đó chọn vào Target, tích chọn vào

Always prompt to pick device.




Ấn vào Apply và sau đó chọn vào Run. 1 bảng hộp thoại mới sẽ hiện ra như

sau :

Hình 7.11 : Cách lựa chọn máy ảo AndroVM để thực hiện Debug

Ấn chuột chọn vào dòng màu đỏ như hình trên, ngay sau đó trong máy ảo

được khởi chạy và phần mềm ứng dụng mà đang Debug cũng được mở ra

luôn trong máy ảo này

Để kiếm soát được quá trình Debug, nhìn vào LogCat ở phía dưới

Eclipse IDE

Hình 7.12: Cách kiểm soát lỗi nảy sinh trong quá trình Debug




CHƯƠNG IV : PHÂN TÍCH VÀ THIẾT KẾ CHƯƠNG

TRÌNH ỨNG DỤNG

4.1. Giới thiệu về chương trình ứng dụng

Ứng dụng được đặt tên là Sedi, có chức năng hiệu chỉnh hình ảnh để tạo ra

những bức ảnh độc đáo, vui nhộn, mang nét riêng cá nhân của mỗi người sử dụng,

đặc biệt hỗ trợ tối đa các thao tác chạm, cảm ứng để giúp cho việc chỉnh sửa trở nên

dễ dàng hơn bao giờ hết trên cả smartphone và tablet.

Ứng dụng được phát triển dựa trên Phonegap framework phiên bản 2.2.0, ngoài ra

còn sử dụng 1 số plugin cho Phonegap như SQLitePlugin, WebIntent,

Base64ToPNG, Facebook Connect Plugin. Giao diện người dùng của ứng dụng

được xây dựng dựa trên jQuery Mobile phiên bản 1.2.0, Các thao tác xử lý đồ họa

được phát triển dựa vào phần tử đồ họa tương tác <canvas> trong HTML5.




4.2. Phân tích chương trình ứng dụng về chức năng

4.2.1. Biểu đồ phân rã chức năng

Hình 8: Biểu đồ phân rã chức năng của ứng dụng

Hiệu chỉnh hình ảnh trong ứng dụng

Thực hiện Thao tác chạm

Xoay đối tượng

Xóa đối tượng

Chỉnh sửa kích thước đối tượng

ảnh

Thêm ảnh

Thêm ảnh từ thư viện ảnh của

ứng dụng

Thêm ảnh từ thẻ nhớ của thiết bị

Thêm text

Gõ vào kí tự và chọn màu

Chọn màu nền

Chọn kiểu chữ và cỡ chữ

Chọn phông chữ

Chọn kích thước và màu khung

viền

Hủy bỏ

Áp dụng

Chỉnh sửa ảnh

Xoay ảnh

Điều khiển layer

Áp dụng bộ lọc hiệu ứng

Áp dụng

Hủy bỏ

Xem trước

Chỉnh sửa text


Chọn màu nền


Chọn phông chữ


viền

Thiết lập lại

Hủy bỏ

Xem trước

Chia sẻ facebook Lưu ảnh




4.2.2. Đặc tả chức năng của chương trình

TT Tên chức năng Mô tả

1 Thực hiện Thao tác chạm Tại màn hình chính của ứng dụng,

người dùng có thể thực hiện chạm vào

đối tượng đồ họa để thực hiện các thao

tác như xoay đối tượng, xóa đối tượng

hay chạm kéo để chỉnh sửa kích thước

của đối tượng ảnh.

2 Thêm ảnh Khi người dùng chạm vào nút “thư

viện” hay “tải ảnh” thì ứng dụng sẽ

thực hiện chức năng thêm đối tượng

ảnh vào màn hình chính từ thư viện

ảnh có sẵn trong ứng dụng hay bộ sư

tập ảnh của người dùng trong thẻ nhớ

của thiết bị.

3 Thêm text Khi người dùng chạm vào nút “thêm

text” thì ứng dụng thực hiện chức

năng thêm text, ngoài việc gõ vào các

kí tự text thì người dùng còn có thể lựa

chọn thiết lập thêm các thông số khác

như : kiểu chữ, cỡ chữ, loại phông

chữ, màu và kích thước của khung

viền bao quanh kí tự.

4 Chỉnh sửa ảnh Khi người dùng ấn chạm 2 lần liên

tiếp vào đối tượng ảnh trên màn hình




chính, thì sẽ kích hoạt hiện lên 1 bảng

hộp thoại dùng cho việc chỉnh sửa

ảnh. Tại đây người dùng có thể xoay

ảnh theo 360 độ, điều khiển sự ẩn hiện

layer của bức ảnh so với những đối

tượng đồ họa khác, và áp dụng 1 vài

bộ lọc hiệu ứng có sẵn vào bức ảnh.

Những thiết lập này tác dụng ngay lập

tức lên đối tượng ảnh, giúp người

dùng có thể xem trước những gì họ

hiệu chỉnh, cuối cùng người dùng có

thể tùy chọn áp dụng hoặc hủy bỏ

những hiệu chỉnh đó.

5 Chỉnh sửa text Khi người dùng ấn chạm 2 lần liên

tiếp vào đối tượng text trên màn hình

chính thì 1 bảng hộp thoại dùng để

chỉnh sửa text hiện ra, bảng này cho

phép chỉnh sửa lại các thông số mà đối

tượng text đã được thiết lập trước

đó(các thông số này giống với các

thông số khi thêm text). Những thao

tác chỉnh sửa này của người dùng tác

động trực tiếp lên đối tượng text, giúp

người dùng có thể xem trước những gì

mà họ thao tác, cuối cùng người dùng

có thể tùy chọn áp dụng hoặc hủy bỏ

những hiệu chỉnh đó.

6 Chia sẻ facebook Cho phép người dùng chia sẻ ảnh vừa




tạo lên facebook

7 Lưu ảnh Cho phép lưu hình ảnh vừa tạo vào thẻ

nhớ của thiết bị

Bảng 2: Bảng đặc tả chức năng của ứng dụng

4.3. Phân tích chương trình ứng dụng về luồng dữ liệu

4.3.1. Biểu đồ luồng dữ liệu mức khung cảnh

Hiệu chỉnh hình ảnh trong ứng dụng

Thiết bị Facebook

Ảnh cần lưu

Đối tượng ảnh

Yêu cầu lấy ảnh

Thông tin xác thực

Dữ liệu ảnh

Thông tin phản hồi

Người dùng

Các thao tác

Server lưu trữ ảnh

URL của ảnhTrên server

Dữ liệu ảnh

Hình 9.1: Biểu đồ luồng dữ liệu mức khung cảnh




4.3.2. Biểu đồ luồng dữ liệu mức đỉnh

Người dùng

Thêm ảnh

Thiết bị

Facebook

Lựa chọn

Yêu cầu

Thư viện ảnh trong ứng dụng

Yêu cầu

Địa chỉ ảnh

Màn hình chính

Địa chỉ ảnh


Thêm text

Các thông số thiết lập

Đối tượng text

Thực hiện thao tác chạm

Đối tượng đã Thao tác xong

Chỉnh sửa ảnh


Chỉnh sửa text


Chia sẻ facebook


Yêu cầu xác thực

Thông tin phản hồi

Ảnh đã hiệu chỉnh xong

Dữ liệu ảnh

Lưu ảnhẢnh đã hiệu chỉnh xong

Ảnh đã lưu

Thao tác

Các lựa chọn

Các thông số


URL của ảnhTrên server

Dữ liệu ảnh

Hình 9.2: Biểu đồ luồng dữ liệu mức đỉnh




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

Xoay đối tượng

Xóa đối tượng

Chỉnh sửa kích thước đối tượng

ảnh

Người dùng Màn hình chính

Thao tác xoayĐối tượng được

Chạm xoay

Đối tượng Sau khi xoay

Thao tác xóa

Đối tượng đượcChạm xóa

Thao tác chạm kéoĐối tượng ảnh

Được chạm

Đối tượng ảnhĐã thay đổi kích thước

Hình 9.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




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

Thêm ảnh từ thẻ nhớ của thiết bị

Thêm ảnh từ thư viện ảnh có sẵn trong ứng

dụng


Thiết bị

Thư viện ảnh

Lựa chọn

Yêu cầu

Địa chỉ ảnh


Lựa chọn

Yêu cầu chuyển tiếp

Địa chỉ ảnh


Hình 9.4: Biểu đồ luồng dữ liệu mức dưới đỉnh giải thích chức năng thêm ảnh




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


Chọn màu nền


Chọn phông chữ


viền

Người dùngMàn hình chính

Các kí tự và mã màu

Mã màu và độ trong suốt

Kiểu chữ vàKích cỡ

Loại phông chữ

Kích thước và mã màu khung viền

Màn hình thêm text

Áp dụng

Hủy bỏ

Các thông số


Sự kiện thao tác áp dụng

Sự kiện thao tác hủy bỏ

Hình 9.5: Biểu đồ luồng dữ liệu mức dưới đỉnh giải thích chức năng thêm text




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

Xoay ảnh

Điều khiển layer

Áp dụng bộ lọc hiệu ứng

Người dùng

Màn hình chính

Góc xoay

Xem trước

Chỉ số thứ tựCủa layer

Các thông số thuộc tính

Trạng thái ban đầu

Sự kiện thao tác

Trạng tháiTrước khi thực hiện thao tác

của đối tượng ảnh

Đối tượng ảnhĐang thao tác

Màn hình xem trước - trạng thái hiện tại của

đối tượng ảnh

Trạng tháiCập nhật



Tên bộ lộc

Áp dụng

Sự kiện ấn nút “áp dụng”

Tất cả thông sốTrạng thái

Đối tượng ảnhĐược cập nhật trạng thái

Vừa thao tác

Hủy bỏ

Sự kiện ấn nút “hủy bỏ”

Trạng thái Lúc chưa thực hiện

Thao tác

Đối tượng ảnhĐược cập nhật

Đối tượng ảnhĐang thao tác

Hình 9.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




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


Chọn màu nền


Chọn phông chữ


viền

Áp dụng

Thiết lập lai

Xem trước


Trạng thái ban đầu

Trạng thái hiện tại - màn hình xem trước

Sự kiện thao tác

Đối tượng text Đang thao tác

Các thuộc tính Đã thiết lập

Từ trước

Các thông số thuộc tínhBan đầu

Sự kiệnẤn nút “thiết lập lai”

Đối tượng textĐược thiết lập lại

Các kí tự và mã màu

Mã màu nền và Độ trong suốt

Kiểu chữ vàKích cỡ

Loại phông chữ

Kích thước vàMã màu

Khung viền

Thông số Cập nhật

Thông sốCập nhật




Tất cả thông sốTrạng thái


Đối tượng text Đang thao tác

Hủy bỏ

Sự kiện Hủy bỏ

Hình 9.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




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

Người dùng

Chia sẻ facebook

facebook


Yều cầu

Thông tinPhản hồi

Lưu ảnh

Yêu cầu

Thiết bịDữ liệu ảnh

Dữ liệu ảnh


Dữ liệu ảnh

URL của ảnh Trên server

Hình 9.8: Biểu đồ luồng dữ liệu mức dưới đỉnh giải thích chức năng chia sẻ

facebook




4.4. Thiết kế cơ sở dữ liệu của chương trình ứng dụng

Bảng dữ liệu dành cho chức năng thêm ảnh từ thư viện ảnh có sẵn :

Tên bảng : shape

Tên trường Kiểu dữ liệu Thuộc tính bổ

sung

Thuộc tính

khóa

Ghi chú

id INTEGER AUTO

INCREMENT NOT

NULL

PRIMARY

KEY

Mã id

name TEXT NOT NULL Tên gọi

của bức

ảnh

color TEXT Màu sắc

path TEXT NOT NULL Đường

dẫn thư

mục

filename TEXT NOT NULL CONSTRAINT

UNIQUE

Tên file

ảnh

shapetype TEXT NOT NULL Nhóm

ảnh

subject TEXT Chủ đề

Bảng 3: Bảng shape trong cơ sở dữ liệu của ứng dụng




4.5. Thiết kế giao diện chương trình ứng dụng

4.5.1. Màn hình chính của ứng dụng

- Giao diện thiết kế

Hình 10.1: Giao diện màn hình chính của ứng dụng

- Cách thành phần giao diện :

Mã thứ tự Tên Chức năng

1 Thư viện Khi người dùng ấn vào

nút này, thì sẽ kích hoạt 1

bảng thư viện hình ảnh có

sẵn trong ứng dụng

2 Tải ảnh Khi người dùng ấn vào

nút này thì ứng dụng sẽ

mở trình quản lý album

ảnh mặc định của thiết bị.

1

2

3

4

5




3 Thêm text Khi người dùng ấn vào

nút này thì sẽ kích hoạt 1

bảng hộp thoại dành riêng

cho việc thiết lập và gõ

vào kí tự text

4 Chia sẻ Khi nút này được ấn thì 1

bảng hộp thoại mới xuất

hiện, cho phép người dùng

đăng nhập vào facebook

và sau khi đăng nhập

thành công thì có thể chia

sẻ ảnh lên facebook

5 Lưu ảnh Khi nút này được ấn thì

mọi nút điều khiển trên

các đối tượng đồ họa đều

bị ẩn đi và sau đó thực

hiện lưu ảnh đã hiệu chỉnh

vào trong thẻ nhớ của thiết

bị

Bảng 4: Bảng liệt kê các thành phần và chức năng của các thành phần bên trong

ứng dụng




4.5.2. Bảng hộp thoại thư viện ảnh

- Giao diện thiết kế :

Hình 10.2: Giao diện hộp thoại thư viện ảnh của ứng dụng

- Các thao tác xử lý :

Khi ấn nút “thư viện” thì 1 bảng hộp thoại xuất hiện từ phía dưới trượt lên

phía trên, và bảng hộp thoại này có độ cao bằng 1/3 độ cao của thiết bị, chứa

danh sách các ảnh có trong thư viện (chứa tối đa 5 ảnh).

Người dùng chọn vào ảnh và ấn giữ 1 lúc vào vị trí (1), thì ngay sau đó 1

bức ảnh lớn sẽ xuất hiện trong màn hình chính.

Ấn vào hình mũi tên ở vị trí (2) của bảng để hiện thị nhiều ảnh tiếp nữa cho

người dùng chọn

Ấn vào hình gạch chéo ở vị trí (3) để tắt bảng hộp thoại, và bảng này sẽ trượt

từ trên xuống và biến mất

Ấn chọn ở vị trí (4) để lựa chọn chủ đề, ấn chọn ở vị trí (5) để lựa chọn nhóm

hình ảnh, ấn chọn vị trí (6) để lựa chọn màu sắc đặc trưng cho bức ảnh. Mỗi

1

2

3

4

5

6

7

8




lần ấn chọn này, thì danh sách các ảnh hiện thị trong hộp thoại cũng được lọc

theo 1 cách tương ứng.

Ấn vào vị trí (7) – nằm ngoài bảng hộp thoại - thì bảng này sẽ trượt từ trên

xuống và biến mất

Có thể dùng tay chạm vào các hình ảnh để kéo sang trái hay sang phải, và

danh sách ảnh sẽ trượt theo kiểu kéo theo chiều mũi tên (8)




4.5.3. Màn hình ảnh từ thiết bị


Hình 10.3: Giao diện thao tác tải ảnh từ thiết bị

1

2





Người dùng ấn vào nút “tải ảnh”, thì 1 bảng hộp thoại popup hiện lên. Trong

bảng này, người dùng có thể chọn 1 trình duyệt ảnh của bên thứ 3 hoặc chọn

vào trình duyệt ảnh mặc định của thiết bị.

Chọn tới thư mục có chứa danh sách các ảnh nằm trong thẻ nhớ, ấn chọn vào

bức ảnh như tại vị trí (1)

Ngay sau đó, ảnh được chọn sẽ được tải vào màn hình chính của ứng dụng

như tại ví trí (2)

4.5.4. Bảng hộp thoại thêm text


Hình 10.4: Giao diện Bảng hộp thoại thêm text


Người dùng ấn vào nút “Thêm text” để kích hoạt hộp thoại thêm text trượt từ

dưới lên

1 2 3

4 5

6

7 8

9 10

11

12




Người dùng ấn vào vị trí (1), để gõ vào kí tự

Chọn ở vị trí (2) và (3) để lựa chọn thiết lập màu sắc cho kí tự và phông nền

Lựa chọn ở vị trí (4) để thiết lập kiểu chữ (in đậm, in nghiêng, bình thường)

Kéo thanh trượt (5) để thiết lập cỡ chữ

Lựa chọn phông chữ ở vị trí (6)

Kéo thanh trượt (7) để thiết lập độ rộng khung viền bao quanh kí tự

Chọn lựa và thiết lập màu sắc cho khung viền ở vị trí (8)

Ấn vào nút “Áp dụng” (9) để thêm text vào màn hình chính, và ngay sau đó

bảng hộp thoại sẽ trượt từ trên xuống và biến mất

Ấn vào nút “Thiết lập lại” (10) để khởi tạo lại các thông số ban đầu

Ấn vào hình gạch chéo (11) thì bảng hộp thoại sẽ trượt từ trên xuống và biến

mất

Ấn vào vị trí (12) – nằm ngoài bảng hộp thoại – bảng hộp thoại sẽ trượt từ

trên xuống và biến mất

4.5.5. Nhóm nút điều khiển đối tượng đồ họa


Hình 10.5: Nhóm nút điều khiển đối tượng đồ họa

1 2 3

4





Người dùng chạm vào đối tượng đồ họa trên màn hình chính, thì sẽ xuất hiện

1 nhóm nút điều khiển dành riêng cho đối tượng đó như (1), (2), (3), (4) (nút

điều khiển (4) chỉ xuất hiện khi đối tượng được chạm là đối tượng ảnh). Sau

đó, người dùng có thể chạm lại 1 lần nữa để ẩn đi các nút điều khiển này

Ấn nút (1) để làm đối tượng xoay theo chiều ngược kim đồng hồ

Ấn nút (2) để làm đối tượng xoay theo chiều kim đồng hồ

Ấn nút (3) để xóa đối tượng khỏi màn hình chính

Ấn và kéo nút (4) để thay đổi kích thước của đối tượng (đối tượng phải là đối

tượng ảnh)

4.5.6. Bảng hộp thoại chỉnh sửa ảnh


Hình 10.6: Giao diện bảng hộp thoại chỉnh sửa ảnh

6

2 3 4 5

1

7 8

9

10





Người dùng chạm 2 lần liên tục vào đối tượng ảnh, thì sẽ kích hoạt 1 bảng

hộp thoại chỉnh sửa hình ảnh từ dưới trượt lên trên

Kéo thanh trượt (1) để xoay ảnh tùy ý theo 360 độ. Thông số trên thanh trượt

(1) chính là góc xoay của đối tượng ảnh đã được thiết lập từ trước đó

Ấn (2), (3), (4), (5) để thiết lập vị trí layer của đối tượng ảnh ở các vị trí

tương ứng : vị trí sau cùng (luôn ẩn đi khi bị đè bởi mọi layer khác), thụt lùi

1 đơn vị so với vị trí hiện tại, tiến lên 1 đơn vị so với vị trí hiện tại, vị trí trên

cùng (luôn hiện và đè lên mọi layer khác)

Ấn chọn (6) để thiết lập hiệu ứng áp dụng lên đối tượng ảnh

Ấn nút “Áp dụng” (7) để lưu lại toàn bộ các thiết lập mà người dùng đã tạo

ra trong hộp thoại

Ấn nút “Hủy bỏ” (8) để khôi phục lại trạng thái lúc ban đầu khi đối tượng

ảnh chưa bị chỉnh sửa

Ấn hình gạch chéo (9) hoặc ấn vào vị trí (10) – nằm bên ngoài hộp thoại - để

hộp thoại trượt từ trên xuống và biến mất.Lưu ý : khi người dùng chưa ấn nút

“Áp dụng” (7) để lưu lại toàn bộ thiết lập thì đối tượng ảnh cũng sẽ được

khôi phục lại trạng thái lúc ban đầu của nó




4.5.7. Bảng hộp thoại chỉnh sửa text


Hình 10.7: Giao diện bảng hộp thoại chỉnh sửa text


Người dùng ấn vào nút “Thêm text” để kích hoạt hộp thoại thêm text trượt từ

dưới lên. Lưu ý : mọi giá trị thông số được thiết lập sẵn từ lúc bảng hộp thoại

vừa mở lên đều là các giá trị thông số của đối tượng text đã được thiết lập từ

trước đó.

Người dùng ấn vào vị trí (1), để gõ lại kí tự.

Chọn ở vị trí (2) và (3) để lựa chọn thiết lập lại màu sắc cho kí tự và phông

nền.

Lựa chọn ở vị trí (4) để thiết lập lại kiểu chữ (in đậm, in nghiêng, bình

thường)

Kéo thanh trượt (5) để thiết lập lại cỡ chữ

Lựa chọn lại phông chữ ở vị trí (6)

1

1 2 3

1 4 5

6

7 8

9 10

11

12




Kéo thanh trượt (7) để thiết lập lại độ rộng khung viền bao quanh kí tự

Chọn lựa và thiết lập lại màu sắc cho khung viền ở vị trí (8)

Ấn vào nút “Áp dụng” (9) để lưu toàn bộ các thông số người dùng vừa tạo ra

vào đối tượng text ở màn hình chính, và ngay sau đó bảng hộp thoại sẽ trượt

từ trên xuống và biến mất

Ấn vào nút “Thiết lập lại” (10) để khởi tạo lại các thông số ban đầu

Ấn vào hình gạch chéo (11) hoặc Ấn vào vị trí (12) – nằm ngoài bảng hộp

thoại – thì bảng hộp thoại sẽ trượt từ trên xuống và biến mất. Lưu ý : khi

người dùng chưa ấn nút “Áp dụng” (9) để lưu lại toàn bộ thiết lập thì đối

tượng text cũng sẽ được khôi phục lại trạng thái lúc ban đầu của nó




TÀI LIỆU THAM KHẢO

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. Các thông tin tổng hợp từ http://www.w3.org và http://www.whatwg.org

https://www.google.com.vn/url?sa=t&rct=j&q=&esrc=s&source=web&cd=6&cad=rja&ved=0CEAQFjAF&url=https%3A%2F%2Ftwitter.com%2FmadCdan&ei=YD64UKn4KemuiQfZnoGYBw&usg=AFQjCNFPGIfNpkA98Qau1I9BmWvZLpa-wA&sig2=78yIS2abEI0AoWAyglnKbw

http://androvm.org/blog/androvm-documentation

http://www.html5rocks.com/en/why

http://www.ibm.com/developerworks/web/tutorials/wa-html5

http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

http://www.w3.org/

http://www.whatwg.org/




PHỤ LỤC

Danh mục các bảng

Mã số Tên bảng Số trang

1 Bảng biểu đồ thời gian quá trình chuẩn hóa HTML5 7

2 Bảng đặc tả chức năng của ứng dụng 51

3 Bảng shape trong cơ sở dữ liệu của ứng dụng 59

4 Bảng liệt kê các thành phần và chức năng của các thành phần

bên trong ứng dụng

61

Danh mục các hình vẽ và biểu đồ

Mã số Tên hình vẽ và biểu đồ Số trang

1 Sơ đồ tổng quan về cách thức hoạt động của Phonegap 22

2 So sánh ưu điểm của việc sử dụng Phonegap với Java 25

3 Kiến trúc bên trong 1 ứng dụng Phonegap 26

4 Cách thức ứng dụng Phonegap tương tác với thiết bị 28

5 Bảng các hàm APIs được hỗ trợ cho từng nền tảng trong

Phonegap

29

6.1 Cách tạo 1 Android Project trong Eclipse IDE 31

6.2 Cách thiết lập các thông số để tạo 1 Android Project 32

6.3 Cách truy cập tới file java chính 33

6.4 cách chỉnh sửa bên trong file java chính 34

6.5 Cấu trúc bên trong file AndroidManifest.xml 36

6.6 Cách nhúng file js vào file index.html 37

6.7 Hình chạy chương trình trên nền Android Emulator 38

7.1 Các file cài đặt của AndroVM 39

7.2 Cách nhập máy ảo AndroVM vào trong Virtualbox

40





7.3 Trạng thái tiến trình nhập máy ảo AndroVM vào trong

Virtualbox

40

7.4 Trạng thái khi nhập xong máy ảo AndroVM vào trong

Virtualbox

41

7.5 Cách thiết lập cho máy ảo AndroVM 41

7.6 Cách lựa chọn cài đặt Network cho AndroVM 42

7.7 Cách thiết lập thông số cổng Port trong Network của máy ảo

AndroVM

43

7.8 Cách khởi động màn hình dòng lệnh của adb 44

7.9 Kết nối adb với máy ảo AndroVM thành công 44

7.10 Cách thiết lập Debug cho 1 ứng dụng Android 45

7.11 Cách lựa chọn máy ảo AndroVM để thực hiện Debug 46

7.12 Cách kiểm soát lỗi nảy sinh trong quá trình Debug 46

8 Biểu đồ phân rã chức năng của ứng dụng 48

9.1 Biểu đồ luồng dữ liệu mức khung cảnh 51

9.2 Biểu đồ luồng dữ liệu mức đỉnh 52

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

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


thêm text

55


chỉnh sửa ảnh

56


chỉnh sửa text

57

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




10.1 Giao diện màn hình chính của ứng dụng 60

10.2 Giao diện hộp thoại thư viện ảnh của ứng dụng 62

10.3 Giao diện thao tác tải ảnh từ thiết bị 64

10.4 Giao diện Bảng hộp thoại thêm text 65

10.5 Nhóm nút điều khiển đối tượng đồ họa 66

10.6 Giao diện bảng hộp thoại chỉnh sửa ảnh 67

10.7 Giao diện bảng hộp thoại chỉnh sửa text 69