Khóa Luận Tìm Hiểu Về Ngôn Ngữ Lập Trình Độc Lập Trên Mobile - PhoneGap

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
Nguyễn Văn Điềm
TÌM HIỂU VỀ FRAMEWORK NGÔN NGỮ LẬP TRÌNH
ĐỘC LẬP TRÊN MOBILE
KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC CHÍNH QUY
Ngành: Công nghệ thông tin
HÀ NỘI – 2014

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
TÌM HIỂU VỀ FRAMEWORK NGÔN NGỮ LẬP TRÌNH
ĐỘC LẬP TRÊN MOBILE
ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Công nghệ thông tin
Cán bộ hướng dẫn: TS. Nguyễn Trí Thành
(ký tên)
HÀ NỘI - 2014

i
TÓM TẮT
Tóm tắt: 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, đ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. 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. Thiết bị di động đã đang và sẽ trở thành phương tiện giao tiếp và làm việc chủ
yếu của cong người. Và phần cốt lõi để tạo ra sức hấp dẫn từ 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: IOS, Android, Window Phone, BlackBerry, webOS,… Vì vậy, các framework ngôn ngữ
lập trình lần lượt ra đời với mục đích “viết một lần, có thể 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”, và Phonegap chính là một framework phổ biến nhất đáp
ứng được mục đích đó tính đến thời điểm hiện tại.
Trong khóa luận này, tôi sẽ tập trung chủ yếu vào việc tìm hiểu Phonegap, và xây dựng
một chương trình phần mềm ứng dụng sử dụng Phonegap có thể chạy trên nhiều nền tảng
Smartphone khác nhau.
Từ khóa: Smartphone, Phonegap, framework, tương thích.

ii
Lời cảm ơn
Lời đầu tiên, tôi xin bày tỏ lời cảm ơn và lòng biết ơn sâu sắc nhất tới TS.Nguyễn
Trí Thành đã tận tình hướng dẫn và chỉ bảo tôi trong suốt quá trình thực hiện khóa luận
này.
Tôi xin chân thành cảm ơn các thầy, cô trong trường đại học Công Nghệ - Đại học
Quốc gia Hà Nội đã tạo mọi điều kiện thuận lợi cho tôi học tập, rèn luyện và ghiên cứu.
Tôi cũng xin gửi lời cảm ơn đến các anh chị, các bạn cùng thực hiện khóa luận đã
hỗ trợ tôi rất nhiều về kiến thức chuyên môn trong quá trình thực hiện khóa luận.
Tôi xin cảm ơn các bạn trong lớp K55CB đã ủng hộ, khích lệ, giúp đỡ và luôn sát
cánh bên tôi trong suốt quá trình học tập, rèn luyện tại trường.
Và cuối cùng, tôi xin được gửi lời cảm ơn tới gia đình, người thân và bạn bè -
những người đã luôn ở bên tôi những lúc khó khăn nhất, luôn động viên và khuyến khích
tôi trong cuộc sống cũng như trong học tập và công việc.
Tôi xin chân thành cảm ơn!
Hà Nội, ngày tháng năm 2014
Sinh viên

iii
Lời cam đoan
Tôi xin cam đoan các kết quả đạt trong khóa luận này là do tôi thực hiện dưới sự
hướng dẫn của TS. Nguyễn Trí Thành.
Tất cả các tài liệu tham khảo từ những nghiên cứu liên quan đều được nêu nguồn
gốc một cách rõ ràng từ danh mục tài liệu tham khảo trong khóa luận. Trong khóa luận,
không có việc sao chép tài liệu, công trình nghiên cứu của người khác mà không chỉ rõ
về mặt tài liệu tham khảo.
Hà Nội, ngày tháng năm 2014
Sinh viên

iv
Mục lục
TÓM TẮT..............................................................................................................................i
Lời cảm ơn............................................................................................................................ii
Lời cam đoan...................................................................................................................... iii
Danh sách hình vẽ...............................................................................................................vii
Chương 1 ..............................................................................................................................1
MỞ ĐẦU ..............................................................................................................................1
Chương 2 ..............................................................................................................................3
CƠ SỞ LÝ THUYẾT........................................................................................................3
2.1. HTML5 và CSS3........................................................................................................3
2.1.1. HTML và CSS .....................................................................................................3
2.1.2. Một số đặc điểm nổi bật của HTML5..................................................................4
2.1.2.1. Hỗ trợ thay thế Flash.................................................................................4
2.1.2.2. Tính năng bảo mật.....................................................................................6
2.1.2.3. Đơn giản hóa việc phát triển web..............................................................6
2.1.3. Các tính năng mới có trong HTML5................................................................6
2.1.3.2. HTML5 hỗ trợ các phần tử định nghĩa mới ..............................................6
2.1.3.3. HTML5 hỗ trợ đồ họa tương tác với phần tử <canvas> ...........................7
2.1.3.4. HTML5 cho phép các ứng dụng lưu trữ cục bộ với local storage ............8
2.1.3.5. HTML5 hỗ trợ phát <audio> và <video>..................................................8
2.1.3.6. HTML5 cải tiến biểu mẫu Web.................................................................9
2.1.3.7. HTML5 hỗ trợ khả năng truy cập tới hệ thống file system.......................9
2.1.3.8. HTML5 tăng tốc hiệu năng xử lý với Web Worker và Application Cache
10
2.1.3.9. HTML5 hỗ trợ định vị người dùng .........................................................10
2.1.3.10. HTML5 hỗ trợ khả năng cộng tác và giao tiếp thời gian thực................10

v
2.1.3.11. HTML5 hỗ trợ tiếp nhận các sự kiện events được gửi từ máy chủ ........11
2.2. Giới thiệu về Framework mã nguồn mở Phonegap..............................................12
2.2.1. Phonegap là gì?..................................................................................................12
2.2.2. Đôi nét về lịch sử của Phonegap....................................................................15
2.2.3. Tại sao lại sử dụng Phonegap?.......................................................................16
2.2.3.2. Những ưu điểm khi sử dụng Phonegap? .................................................16
2.2.3.3. Những hạn chế của Phonegap? ...............................................................16
2.2.4. Cách thức Phonegap hoạt động......................................................................17
2.2.5. Các hàm APIs mà Phonegap hiện đang hỗ trợ trên các nền tảng mobile ......19
2.2.5.1 Tổng quan về các APIs Phonegap................................................................20
2.2.6. Cách thiết lập cài đặt môi trường lập trình cho PhoneGap............................21
2.2.6.2. Cách thiết lập cài đặt Phonegap cho Android Project bằng Eclipse .......22
2.2.6.2.1. Yêu cầu cài đặt ...................................................................................22
2.2.6.2.2. Tạo project mới sử dụng Phonegap trong Eclipse IDE......................22
2.2.6.2.3. Tạo project mẫu HelloWorld..............................................................27
2.2.6.2.4. Chạy chương trình trên nền Android Emulator..................................28
Chương 3 ............................................................................................................................30
Xây dựng chương trình ứng dụng ......................................................................................30
3.1. Phân tích thiết kế và xây dựng chương trình ứng dụng. ..........................................30
3.1.1. Giới thiệu chung về chương trình ứng dụng......................................................30
3.1.2. Phân tích chức năng của chương trình...........................................................30
3.1.2.1. Biểu đồ phân rã chức năng......................................................................31
3.1.2.1. Đặc tả chức năng của chương trình.........................................................31
3.1.3. Phân tích chương trình ứng dụng về biểu đồ Use Case .................................33
3.1.3.1. Biểu đồ phân rã use case thể hiện chức năng thực hiện thao tác chạm và
tìm kiếm 35
3.1.3.2. Biểu đồ phân rã use case thể hiện chức năng xem thông tin cơ bản của
nhân viên 35
3.1.3.3. Biểu đồ phân rã use case thể hiện chức năng liên lạc nhanh ..................36

vi
3.1.3.4. Biểu đồ luồng dữ liệu thể hiện các chức năng APIs của Phonegap........37
3.1.4. Thiết kế cơ sở dữ liệu của chương trình ứng dụng ........................................38
3.2. Thiết kế giao diện chương trình ứng dụng............................................................39
3.2.1. Thiết kế tổng quát...........................................................................................39
3.2.2. Thiết kế chi tiết...............................................................................................39
3.2.2.1. Màn hình tìm kiếm nhân viên..................................................................39
3.2.2.2. Màn hình hiển thị danh sách các nhân viên theo từ khóa tìm kiếm........40
3.2.2.3. Màn hình hiển thị thông tin chi tiết của một nhân viên...........................41
3.2.2.4. Màn hình thao tác các chức năng liên lạc nhanh và chức năng được hỗ
trợ của Phonegap. .....................................................................................................43
Chương 4 ............................................................................................................................45
Kết quả, đánh giá chương trình phần mềm ........................................................................45
4.1.Kết quả ......................................................................................................................45
4.2. Đánh giá chương trình phần mềm............................................................................45
4.2.1. Công cụ phần mềm ............................................................................................45
4.2.2. Đánh giá phần mềm...........................................................................................45
Chương 5 ............................................................................................................................46
Kết luận và hướng phát triển ..............................................................................................46
5.1. Kết luận.................................................................................................................46
5.2. Hướng phát triển ...................................................................................................46

vii
Danh sách hình vẽ
Hình 1: Sơ đồ tổng quan hóa về cách thức hoạt động của Phonegap ................................13
Hình 2: Kiến trúc bên trong 1 ứng dụng Phonegap............................................................17
Hình 3: Cách thức 1 ứng dụng Phonegap tương tác với thiết bị ........................................19
Hình 4: Cách tạo 1 Android Project trong Eclipse IDE .....................................................23
Hình 5: Cách thiết lập các thông số để tạo 1 Android Project ...........................................24
Hình 6: Cách truy cập tới file java chính............................................................................25
Hình 8: Cấu trúc bên trong file AndroidManifest.xml.......................................................27
Hình 9: Cách nhúng file .js vào file index.html .................................................................28
Hình 10: Hình chạy chương trình trên nền Android Emulator. .........................................29
Hình 11: Biểu đồ phân rã chức năng của ứng dụng ...........................................................31
Hình 12: Biểu đồ Use Case tổng quát ................................................................................34
Hình 13: Biểu đồ phân rã use case thể hiện chức năng thực hiện thao tác chạm và tìm
kiếm nhân viên....................................................................................................................35
Hình 14: Biểu đồ phân rã use case thể hiện chức năng xem thông tin cơ bản của nhân viên
............................................................................................................................................36
Hình 15: Biểu đồ phân rã use case thể hiện chức năng liên lạc nhanh ..............................37
Hình 16: Biểu đồ phân rã use case thể hiện các chức năng APIs của Phonegap ...............38
Hình 17: Màn hình tìm kiếm nhân viên.............................................................................40
Hình 18: Màn hình hiển thị danh sách nhân viên...............................................................41
Hình 19: Màn hình hiển thị thông tin chi tiết của một nhân viên.......................................42
Hình 20: Màn hình thể hiện chức năng View Manager và View Direct Reports của nhân
viên (Diem Nguyen Van). ..................................................................................................43
Hình 21: Màn hình thể hiện chức năng liên lạc nhanh (call office cell) và chức năng được
hỗ trợ bởi APIs Phonegap (change picture) .......................................................................44

viii
Danh sách bảng
Bảng 1: Các phần tử định nghĩa mới trong HTML5............................................................6
Bảng 2: Bảng so sánh các dạng ứng dụng mobile..............................................................13
Bảng 3: Bảng các hàm APIs được hỗ trợ cho từng nền tảng trong Phonegap ...................20
Bảng 4: Bảng đặc tả các chức năng của chương trình........................................................32
Bảng 5:Bảng thiết kế cơ sở dữ liệu của một nhân viên......................................................38
Bảng 6: Các công cụ, thư viện sử dụng..............................................................................45

1
Chương 1
MỞ ĐẦ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ừ 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 đó có nhiều framework ngôn ngữ lập trình 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”, cũng có nghĩa là những framework này là những
ngôn ngữ lập trình độc lập trên mobile.
Phonegap chính là một trong những framework phổ biến nhất đáp ứng được mục
đích đó. Nó là công cụ phát triển ứng dụng cho cả iOS, Android, Window Phone,
BlackBerry, webOS, Bada, Symbian cùng lúc…Việc ra đời của các framework này nói
chung và của Phonegap nói riêng đã 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.
Đối với các lập trình viên trong việc tạo ra ứng dụng có thể chạy trên đa nền tảng
di động thì 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.

2
Nhưng giờ đây, với sự hỗ trợ đắc lực của Phonegap, các lập trình viên chỉ cần nắm bắt
và chuyên sau về một công nghệ duy nhất, đó là công nghệ nền Web(bao gồm
HTML5, Javascript, CSS3, Jquery Mobile,..).
Nội dung đề tài: “Tìm hiểu framework ngôn ngữ lập trình độc lập trên mobile”
ngoài việc tìm hiểu tổng quan về Phonegap, các công nghệ nền Web liên quan, còn xây
dựng một chương trình phần mềm ứng dụng sử dụng Phonegap – viết một lần, biên
dịch qua cloud và có thể chạy trên các nền tảng di động khác nhau.
Nội dung Khóa luận này gồm 5 chương:
Chương 1 – Mở đầu: Nêu thực trạng, giới thiệu về công việc và nêu những nội
dung sẽ được trình bày.
Chương 2 – Cơ sở lý thuyết: Giới thiệu về Phonegap và những công nghệ, cơ sở lý
thuyết được áp dụng để xây dựng chương trình.
Chương 3 – Xây dựng chương trình: phân tích thiết kế và xây dựng, kiểm thử
chương trình phần mềm.
Chương 4 – Kết quả, đánh giá chương trình phần mềm.
Chương 5 – Kết luận: Tóm lược những kết quả của Khóa luận, những đạt được và
hạn chế, triển vọng và hướng phát triển trong tương lai.

3
Chương 2
CƠ SỞ LÝ THUYẾT
2.1. HTML5 và CSS3
2.1.1. HTML và CSS
Trong những ngày sơ khai của Internet, các công cụ cho việc thiết kế một Web site
chỉ là HTML và một số ít các công cụ khác. Nhưng việc thiết kế một trang Web chỉ với
HTML thật tẻ nhạt và nhiều hạn chế. Đó là lí do chúng ta cần đến CSS.
HTML5 là phiên bản thứ 5, mới nhất của chuẩn HTML, 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. HTML5 có nhiều tính năng mới hỗ trợ việc đưa vào và quản lý các nội
dung đa phương tiện và đồ họa, không còn phụ thuộc vào các plugin và API.
Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệt
Web trong việc hiển thị một trang HTML. Về cơ bản, các trang HTML như bộ xương –
khuôn khổ cơ bản của một trang web, trong khi các file CSS sẽ cụ thể hóa các thành
phần của một trang nên được hiển thị như thế nào. CSS cho phép ta kiểm soát phông
chữ, màu chữ, kiểu nền…, của một trang HTML.
CSS đã giúp cho việc thay đổi phong cách của một trang Web đơn giản hơn và đỡ
tốn thời gian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đó
apply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trên từng mục
riêng lẻ như trước đây.
CSS3 là phiên bản mới nhất của CSS, được chia thành các module để có thể phát
triển và đặc tả độc lập. CSS3 đưa vào nhiều thuộc tính và bộ chọn (selector) mới hỗ trợ
xây dựng các trang web với nội dung phong phú, hiêu ứng, giao diện người dùng tốt
hơn và vẫn đảm bảo yêu cầu mã tương đối nhẹ.

4
2.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. 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
sang 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 nữa, 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, chỉ cần duy nhất một điều kiện là trình duyệt đang
dùng phải hỗ trợ HTML5. Và hiện nay, hầu hết các trình duyệt phổ biến đều hỗ trợ
mạnh mẽ HTML5, từ trình duyệt web: Firefox, Chrome, Opera, Internet Explorer đến
các trình duyệt trên iOS, Android,…
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.
Sau đây là một số tính năng nổi trội của HTML5 mà trong quá trình tìm hiểu tôi đã
đúc kết được.
2.1.2.1. Hỗ trợ thay thế Flash
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.
Tồn tại quãng thời gian khá dài, Flash có những hạn chế rất lớn mà các giới phát
triển đã chỉ ra được, đó 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 đặt 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 luôn là mối quan tâm lớn của người dùng.

5
Huyền thoại Steve Jobs đã từng đưa ra quan điểm rất rõ rang, 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 một bức thư
và đăng trên trang chủ của Apple và xóa tan những mong muốn đưa Flash lên iOS của
người dùng.
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 từ Flash sang HTML5, Adobe mua lại Nitobi – công ty sang 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à mới đây, chính 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ẽ tải lên 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 cùng. Adobe cũng có thông báo: “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”.
Hiện nay, nhiều trang web và dịch vụ lớn đã chuyển sang dùng HTML5, có thể kể
ra tiêu biểu trong số đó là Youtube, Nokia Máp,…Ngoài ra, rất nhiều game được xây
dựng bằng HTMl5 đã xuất hiện, trong đó có các games nối tiếng như Angry Bird,
Fieldrunners…
Như vậy với HTML5, người dùng Web sẽ có được một trải nghiệm hoàn toàn mới,
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ư

6
Smartphone, Tablet, người dùng sẽ không cần phải 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 những lo ngại đó.
2.1.2.2. Tính năng bảo mật
Mỗi trình duyệt có một plug-in riêng được 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 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. 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.
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.
2.1.2.3. Đơ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 kiết hợp với Javascipt, DOM mà không phải bật
đi bật lại Flash. Nó vừa là một ngôn ngữ lại vừa là một công cụ, không khác biết lắm
so với các plug-in khác”.
HTML5 cung cấp một ngôn ngữ lập trình JavaScript, một kiểu dữ liệu (XML hoặc
DOM) và một phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video và đồ
họa.
2.1.3. Các tính năng mới có trong HTML5
2.1.3.2. HTML5 hỗ trợ các phần tử định nghĩa mới
Ta có thể liệt kê các phần tử định nghĩa mới trong HTML5 và các chức năng của
chúng trong bảng sau đây.
Bảng 1: Các phần tử định nghĩa mới trong HTML5.

7
<header (tiêu đề)>
Định nghĩa 1 tiêu đề cho 1 số phần tử của trang web, có thể là
toàn bộ trang, 1 phần tử <article>, hay <section>
<footer (chân trang)>
Giống như phần tử <header>, nó định nghĩa một chân trang cho
1 số phần của 1 trang.
<nav (chuyển hướng)>
Chứa các lien kết chuyển hướng ban đầu trên 1 trang web, chỉ
nên dùng cho các khối chuyển hướng, nhóm các liên kết lớn.
<article (bài viết)>
Định nghĩa một mục độc lập trên trang có thể dùng riêng cho
nó, như mục tin tức, bài viết trên blog, hoặc nhận xét.
<section (phần)>
Đại diện cho 1 phần của một tài liệu hoặc ứng dụng, chẳng hạn
như 1 chương hoặc 1 phần của 1 bài viết hoặc hướng dẫn.
<aside (nhận xét)>
Đánh dấu 1 thanh phụ hoặc 1 số nội dung khác có phần tách rời
với nội dung xung quanh nó. Ví dụ các khối quảng cáo.
<hgroup>
Bọc 1 tiêu đề và 1 phụ đề. Ví dụ trong trường hợp, 1 trang, 1
phần có nhiều hơn 1 tiêu đề ( có 1 tiêu đề, 1 phụ đề ).
2.1.3.3. 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.
Phần tử <canvas> định nghĩa chiều rộng, chiều cao, và mã định danh (ID) duy nhất
cho đối tượng. Sau đó khi trang Web đã hoàn tất dựng hình, lập trình viên 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).
Những API này cho phép 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

8
vào của người dùng như các sự kiện click 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.
2.1.3.4. 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 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 đó mà không mất nhiều thời gian tải lại. 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ế 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áy chủ hoặc nhiều hơn 4KB dữ
liệu cho mỗi cookie. 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 cũng 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ộ). Nó cho phép các nhà phát triển lưu trữ thông tin trên máy của
khách truy cập. 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, điều nay giúp
ngăn cản các trang Web khỏi bị các trang Web khác đọc hay thay đổi dữ liệu đã lưu.
Hầu hết các trình duyệt 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
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 ứng dụng không cần
nối mạng, khi đó 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 được tải lên máy chủ khi chúng kết nối lại vào mạng Internet.
2.1.3.5. HTML5 hỗ trợ phát <audio> và <video>
HTML5 bao gồm cả sựu hỗ trợ cho 2 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 dù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 như Firefox, 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

9
chuẩn. Điều này đã và sẽ dần được thay thế cho các nền tảng Adobe Flash, hay định dạng
tệp Flash Video (.flv).
2.1.3.6. HTML5 cải tiến biểu mẫu Web
Bên cạnh những nút điều khiển biều mẫu đã có: button, checkbox, file, hidden, image,
password, reset, radio,submit, text,…HTML5 đã cải tiến và thêm vào các nút biểu mẫu
hữu ích thiết thực như:
 Color (màu)
 Date (ngày)
 Datetime (ngày giờ)
 Datetiem-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)
Điều này đã giúp ích rất nhiều cho các nhà phát triển web khi không còn phải sử dụng 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, để tạo ra các kiểu nút
điều khiển tinh vi này.
2.1.3.7. 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 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 một cách đồng bộ hoặc không đồng
bộ, tạo ra các dữ liệu nhị phân một cách tùy ý, viết các files, 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 này có thể 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 sever, hay cho

10
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 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.
2.1.3.8. 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 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 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 (hơn 1GB) để 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 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ủ
Một Web Worker (các trình làm việc trên nền Web) là một mã javascript mà có thể chạy
thực thi trong nền web, hay thực thi một 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, cuộn trang hay gõ văn bản,…
2.1.3.9. 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 chiếc đ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.
2.1.3.10. 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 trong HTML5 được chia làm 2 nhóm: một là nhóm các tính năng dù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

11
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ự 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.
WebSockets 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 dù đượ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 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.
2.1.3.11. 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 một 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 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 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).

12
Client tạo ra 1 yêu cầu request và chờ đợi máy chủ hồi đáp 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 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 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ề client 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 SSEs 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.
Sở dĩ tôi đi tìm hiểu sâu về HTML5 là vì nó là công nghệ chủ chốt trên nền web trong
tương lai và hơn nữa, HTML5 chính là công nghệ chủ chốt trong việc xây dựng ứng dụng
dựa trên nền tảng framework Phonegap để có thể biên dịch qua cloud và chạy trên nhiều
nền tảng di động khác nhau. Ngoài ra các công nghệ khác như CSS3, Javascript và Jquery
Mobile cũng rất cần thiết. Nhưng do khuôn khổ không cho phép của khóa luận, tôi sẽ chỉ
giới thiệu Jquery Mobile trong việc tìm hiểu mã nguồn mở Phonegap ở phần tiếp theo.
2.2. Giới thiệu về Framework mã nguồn mở Phonegap
2.2.1. Phonegap là gì?
Phonegap là một nền tảng (framework) mã nguồn mở dùng để phát triển ứng dụng mobile
(native Applications) cho cả iOS, Android, Windows Phone, BlackBerry, webOS, Bada
và Symbian cùng lúc, viết một lần, biên dịch qua cloud và chạy trên nhiều nền tảng
smartphone khác nhau. Đây là một dự án mã nguồn mở miễn phí của Nitobi giúp việc
phát triển ứng dụng di động dễ dàng hơn đối với mọi hệ điều hành. Cho phép nhà phát
triển sử dụng HTML, CSS và Javascript để viết và triển khai ứng dụng. Kiểu ứng dụng
mobile dạng này được gọi là hybrid application (ứng dụng lai).

13
Hình 1: Sơ đồ tổng quan hóa về cách thức hoạt động của Phonegap
So sánh giữa 3 dạng ứng dụng mobile: web apps, hybrid apps và native apps
Bảng 2: Bảng so sánh các dạng ứng dụng mobile

14
Có thể tóm lược tổng quan về 3 dạng ứng dụng này như sau:
1. Navtive Application: Là những ứng dụng được xây dựng theo cách chính thống với
các ngôn ngữ lập trình/nền tảng do các nhà sản xuất di động quy định (ví dụ:
Objective-C cho iOS và Java cho Android, .Net cho Windows Phone,…). Ưu điểm
của dạng ứng dụng này là nhà phát triển có thể thoải mái truy cập vào hệ thống,
phần cứng của thiết bị (như hệ thống file, camera, microphone, accelerometer,…).
Nhược điểm là bị bó buộc với công nghệ và nền tảng mà nhà sản xuất đưa ra.
2. Web Application: Là các ứng dụng được xây dựng trên nền tảng web (mà điển hình
là HTML5), chỉ hoạt động trên trình duyệt của điện thoại. Tiền thân của ý tưởng
này là những trang web có giao diện tùy biến cao, chạy được trên nhiều độ phân
giải màn hình, về sau phát triển mạnh và hình thành nên một hướng đi mới cho
việc phát triển ứng dụng di động. Ưu điểm là có thể thoải mái phát triển ứng dụng

15
mà không cần quan tâm tới nền tảng vì nó cross-platform. Nhược điểm là không có
được sức mạnh truy cập sâu vào hệ thống và thiết bị như native app.
3. Hybrid Application: Là con lai của 2 dạng ứng dụng trên. Có thể hiểu nôm na ứng
dụng này là: một native application chỉ có một đối tượng webview trên màn hình,
dùng để hiển thị nội dung trang web app, và web app giao tiếp với native app
thông qua một cầu nối (bridge) để mang lại sức mạnh của native app cho web app.
Như vậy với việc phát triển ứng dụng theo kiểu Hybrid Application là tối ưu hơn rất
nhiều.
2.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. Điều đó đã
mở ra hướng đi mới cho các nhà phát triển ứng dụng web. Kể từ đó có hơn 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 dẫ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
Sofware – nhà phát triển ban đầu, vào tháng 10 năm 2011. Từ đó các mã Phonegap đã
được sử dụng cho Apache Software Foundation để bắt đầu một dự án mới gọi là Apache
Cordova.
Ở các phiên bản Phonegap về trước, luôn bắt buộc cá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 trên hệ điều hành Mac của Apple, hay nhà lập
trình muốn tạo ra các ứng dụng cho Window Phone 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 các 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, chạy được trên nhiều loại
smartphone khác nhau.

16
2.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 chắ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/05/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 các 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ư Windows XP,
WindowsNT, Mac OS, Unix,… theo phương châm: “viết một lân, chạy ở bất kỳ đâu”.
Như vậy trước tiên, 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.2.3.2. Những ưu điểm khi sử dụng Phonegap?
 Phonegap cho phép chúng ta “write once, run everywhere” (viết một lần nhưng
chạy trên mọi thiết bị).
 Chỉ cần có kiến thức về HTML5, CSS3, Javascript là có thể làm được.
 Ta có được các file cài đặt trên mỗi nền tảng khác nhau thông qua các application
stores (App Store, Android Market,…).
 Cung cấp nhiều API cho phép thao tác tốt với các tính năng của thiết bị (camera,
GPS, Files, Contacts,…)
2.2.3.3. Những hạn chế của Phonegap?
 Khó hoạt động trên các mobile browser cũ không hỗ trợ javascript và tốc độ chậm.
 Việc quản lý các tài nguyên của thiết bị không thực hiện được như: quản lý các
tiến trình (đồng bộ, bất đồng bộ), khả năng đồ họa hạn chế (3D).
 Layout ứng dụng sẽ không phù hợp khi chạy trên các màn hình thiết bị có độ phân
giải khác nhau, và tùy thuộc vào độ hỗ trợ HTML của trình duyệt của thiết bị. Ví
dụ: các apps cho android trên các thiết bị khác nhau thì sẽ không rõ nét vì trên
android hỗ trợ các bộ icon cho các độ phân giải khác nhau trên từng loai thiết bị.
 Khả năng đáp ứng các tính năng còn hạn chế ở một số nền tảng. Khi chúng ta phát
triển ứng dụng trên Android hoặc iPhone thì hầu hết các tính năng đều có thể áp
dụng được. Nhưng trên các nền tảng khác thì có thể một vài tính năng bị lỗi.
Nhưng trên hết, với các ưu điểm của Phonegap thì có thể thấy đây là một framework đang
có đà phát triển rất tốt và chúng ta không nên lo lắng vì Phonegap luôn cập nhật nhưng
phiên bản mới để khắc phục nhưng hạn chế của nó.

17
Sau đây ta sẽ tìm hiểu cách thức Phonegap hoạt động và các APIs mà nó hỗ trợ.
2.2.4. Cách thức Phonegap hoạt động
Hình 2: 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 một màn hình và nó cũng giống như một 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
lập trình viên 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 dùng tương tác với ứng
dụng web application. Khi người dùng tương tác với nội dung (content) của ứng dụng, thì
các liên kết links hay các mã JavaScript trong phạm vi ứng dụng đó co thể tải các nội
dung khác từ các files tài nguyên được đóng gói trong ứ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ừ một website hay từ một server về.
Đối với một vài nền tảng mobile như bada, Symbian hay webOS thì ứng dụng native
application về bản chất chính là 1 ứng dụng web application.

18
Định nghĩa về web view
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.
Ứng dụng web application chạy trong phạm vi 1 webview 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). 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ừ sever 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.
Một 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.
Khi 1 lập trình viên 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.
Tất cả các lý thuyết nói trong phần trên được minh họa trong Hình 3 bên dưới. Sau đó ta
sẽ xem xét đến các hàm APIs mà hiện tại Phonegap hỗ trợ trên các nền tảng mobile.

19
Hình 3: Cách thức 1 ứng dụng Phonegap tương tác với thiết bị
2.2.5. Các hàm APIs mà Phonegap hiện đang hỗ trợ trên các nền
tảng mobile

20
Bảng 3: Bảng các hàm APIs được hỗ trợ cho từng nền tảng trong Phonegap
2.2.5.1 Tổng quan về các APIs Phonegap
Sau đây tôi sẽ giới thiệu đôi chút về một số APIs cơ bản nhất của Phonegap:
1. Làm việc với Contacts (danh bạ điện thoại): Danh bạ là một tính năng đáp ứng
trên tất cả các dòng điện thoại, không chỉ riêng smartphone. Với Phonegap, chúng
ta có thể dễ dàng sử dụng những tính năng có sẵn trong danh bạ điện thoại như
dưới đây:
- Tạo một liên hệ (contact) mới, sử dụng phương thức create().
- Lưu một liên hệ, sử dụng phương thức save().
- Tìm một liên hệ, sử dụng phương thức find().
- Sao chép một liên hệ, sử dụng phương thức clone().

21
- Xóa một liên hệ với phương thức remove().
Chẳng hạn, để tạo một tài khoản mới, chúng ta phải thông qua một đối tượng
JavaScript Object Notation (JSON) là contacts.create(), đối tượng này chỉ được lưu
trữ trong bộ nhớ của ứng dụng. Sau đó, muốn lưu trữ xuống cơ sở dữ liệu, chúng ta
phải dùng phương thức save(). Phonegap APIs hỗ trợ các thuộc tính khác nhau
giúp việc tìm kiếm dễ dàng hơn (chẳng hạn như tên, bí danh, số điện thoại, e-mail,
địa chỉ, sinh nhật, hình ảnh,…). Ta có thể tìm kiếm thông qua contacts.find().
Tương tự, đối với những hàm khác như clone(), remove(), chúng ta dễ dàng sử
dụng và kết hợp những chức năng đó tùy vào ý tưởng khác nhau để có được ứng
dụng như mong muốn.
2. Làm việc với Camera: Phonegap APIs hỗ trợ 2 cách để chụp ảnh, trong đó đầu
tiên là sử dụng thông qua đối tượng Camera có sẵn. Thứ hai, bằng cách sử dụng
Media Capture API. Cụ thể hơn là sử dụng qua phương thức camera.getPicture().
Ta cũng có thể lấy một bức ảnh từ thư viện hình ảnh, một đường dẫn lưu trữ tập
tin.
3. Làm việc với Geolocation: Hầu hết các điện thoại thông minh đều hỗ trợ GPS,
qua đó bạn có thể sử dụng nó, hoặc cũng có thể sử dụng một số công nghệ khác để
xác định vị trí thông qua kinh độ, vĩ độ. Phonegap Geolocation API sẽ cho phép
chúng ta lấy vị trí hiện tại qua kinh độ, vĩ độ (có thể là các yếu tố khác như độ cao)
cũng như sự thay đổi tọa độ. Điều này rất hữu ích cho việc chúng ta muốn theo dõi
sự di chuyển của thiết bị.
4. Làm việc với Media File: Trong Phonegap, Media Capture API không chỉ đơn
thuần là chụp một bức ảnh (trong Media), chúng ta cũng có thể sử dụng nó để ghi
lại âm thanh, hình ảnh (audio, video). Thật vậy, Media Capture API cho phép ghi
âm, ghi hình, chơi một tập tin media (bao gồm các chức năng: play, pause, stop) từ
một đường dẫn nào đó.
5. Làm việc với tùy chọn lưu trữ: Với HTML5, Phonegap cũng hỗ trợ cơ sở dữ liệu
Web SQL. Và tất nhiên, khi làm việc cục bộ, SQlite cũng đủ làm cho ứng dụng của
bạn trở nên phong phú và hữu ích hơn.
2.2.6. Cách thiết lập cà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 trinh ứ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 cho 1 nền tảng di động nào đó, đều được

22
hướng dẫn một cách rõ ràng từ chính nhóm tác giả tạo ra Phonegap, đề tìm hiểu chi tiết
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 cũng vì khuôn khổ của khóa luận nên tôi chỉ trình bày cách 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
phổ biến nhất là Windows.
2.2.6.2. Cách thiết lập cài đặt Phonegap cho Android Project bằng Eclipse
2.2.6.2.1. Yêu cầu cài đặt
 Eclipse: Tải về và cài đặt Eclipse IDE tại đường dẫn:
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
 Phonegap Framework: Tải bản phonegap mới nhất tại đường dẫn
sau: http://phonegap.com/install/
2.2.6.2.2. Tạo project mới sử dụng Phonegap trong Eclipse IDE
 Mở Eclipse, chọn New > Android Project

23
Hình 4: 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 là 2.2 và 2.3.
Với những dòng máy màn hình lớn (tablet) có thể dùng 4.0+

24
Hình 5: 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 sử dụn Phonegap Cordova 1.5.0, nên sẽ sử dụng 2 files: cordova-
1.5.0.js và cordova-1.5.0.jar. (hiện tại version mới nhất của Phonegap là bản 2.9.1 thì
chỉ cần sử dụng 2 files tương ứng).
 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

25
Sao chép cordova-1.x.x.jar vào /libs
Tiếp theo add cordova-1.x.x.jar đến class path bằng cách click chuột phải Build
Path > Add to Build Path.
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 Pakage 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 thêm file hay xóa file bên ngoài cửa sổ làm việc của Eclipse thì
khi quay trở lại phải 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: Cách truy cập tới file java chính.
 Chỉnh sửa lại nội dung của file java này 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/indext.html);
Thêm thư viện bằng cách: import org.apache.cordova.*;
Xóa bỏ import android.app.Activity;

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

27
 Và cuối cùng ta có file AndroidManifest.xml:
Hình 8: Cấu trúc bên trong file AndroidManifest.xml
2.2.6.2.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ắn chắn rằng đã nhúng cordova-1.x.x vào project vào file

28
html. Nếu không chương trình sẽ không chạy. Thay thế 1.x.x thành version
đang sử dụng.
Hình 9: Cách nhúng file .js vào file index.html
2.2.6.2.4. Chạy chương trình trên nền Android Emulator
- Nên refresh (F5) trước khi run để Eclipse update được những thông tin mới.
- Bấm chuột phải vào tên project và chọn Run As > Android Application
- Nếu thiết lập đúng, chương trình sẽ chạy hoàn chỉnh như sau:

29
Hình 10: Hình chạy chương trình trên nền Android Emulator.
Để chương trình có thể chạy tăng tốc trên máy ảo, chúng ta có thể cài đặt máy ảo
Genymotion – eclipse plugin. Và chương trình phần mềm ứng dụng của ta có thể chạy
trên nhiều loại máy ảo khác nhau, và tốc độ chạy được cải thiện rõ rệt. Tìm hiểu thêm về
cách cài đặt Genymotion cho eclipse tại page: https://cloud.genymotion.com/page/doc/
Như vậy tôi đã giới thiệu tổng quan về Phonegap, và các công nghệ liên quan đến nó. Sau
đây sẽ là phần xây dựng ứng dụng phần mềm sử dụng Phonegap.

30
Chương 3
Xây dựng chương trình ứng dụng
3.1. Phân tích thiết kế và xây dựng chương trình ứng dụng.
3.1.1.Giới thiệu chung về chương trình ứng dụng.
Hiện nay, nhu cầu quản lý và tìm hiểu cũng như liên lạc giữa các nhân viên trong một
công ty được chú tâm rất nhiều. Mọi người làm việc trong cùng một văn phòng phải nên
biết các thông tin cơ bản về nhau như: Họ và tên, quê quán, số điện thoại cá nhân, số điện
thoại các phòng ban với nhau hay email liên lạc, xem ảnh nhận diện,…Vì vậy trong quá
trình tìm hiểu và nghiên cứu, tôi nghĩ ra một ý tưởng xây dựng chương trình ứng dụng
khá đơn giản đáp ứng được nhu cầu trên.
Ứng dụng được đặt tên là Employee Directory, có chức năng liệt kê và hiển thị các thông
tin cơ bản của các nhân viên trong một công ty, cơ sở dữ liệu được nhập vào sử dụng
Sqlite, ứng dụng cơ bản hỗ trợ các chức năng hiển thị thông tin, xem thông tin các
manager của nhân viên đó, xem thông các nhân viên dưới quyền quản lý trực tiếp của
nhân viên đó, hỗ trợ trực tiếp việc gửi mail, gọi điện thoại phòng ban hay gọi điện các
nhân, thêm vị trí hay thêm một nhân viên vào sổ danh bạ, ngoài ra nó còn hỗ trợ chức
năng thay đổi hình ảnh của một nhân viên, ứng dụng cũng hỗ trợ khá hoàn thiện các thao
tác cuộn, chạm cảm ứng để có thể hoạt động tốt được trên cả smartphone và tablet.
Ứng dụng được phát triển dựa trên Phonegap framework phiên bản 1.1.0, ngoài ra còn sử
dụng một số plugin cho Phonegap như SQLite Plugin, Iscroll plugin (là khả năng cuộn
chương trình), Jquery, HTML5, CSS3 cũng như Javascript được sử dụng song song để hỗ
trợ đắc lực cho ứng dụng được tối ưu nhất.
3.1.2. Phân tích chức năng của chương trình

31
3.1.2.1. Biểu đồ phân rã chức năng
Hình 11: Biểu đồ phân rã chức năng của ứng dụng
3.1.2.1. Đặc tả chức năng của chương trình
Sau đây là bảng đặc tả các chức năng của chương trình ứng dụng:
Employee Directory
Thực Hiện Thao
Tác Chạm
Xem thông tin
cơ bản
Liên lạc nhanh Các chức năng APIs
của Phonegap
Cuộn danh
sách nhân
viên
Click để xem
chi tiết
Chức vụ, vị
trí
Họ tên, quê
quán, hình
ảnh
Manager,
Direct
Reports
Send
Email
Send MSM
Call office
cell
Send
Email
Send
Email
Add
Location
Call
personal
cell
Send
Email
Send
Email
Add to
Contacts
Change
Picture
Tìm kiếm
nhân viên

32
Bảng 4: Bảng đặc tả các chức năng của chương trình
STT Tên chức năng Mô tả
1 Tìm kiếm nhân viên
Tại màn hình chính của ứng dụng, khi người dùng
thao tác nhập một kí tự bất kì vào ô tìm kiếm, chương
trình sẽ tìm kiếm liệt kê danh sách nhân viên có liên
quan đến kí tự đó và hiển thị ra màn hình.
2 Thực hiện thao tác chạm
Tại màn hình chính của ứng dụng, hiển thị danh sách
các nhân viên, có hình ảnh, họ tên và vị trí trong
công ty, số lượng direct reports cũng được hiển thị
bên cạnh nhân viên đó, người dùng có thể thực hiện
thao tác chạm đối tượng để xem thông tin chi tiết của
nhân viên đó, đồng thời có thể cuộn để xem danh
sách các nhân viên bên dưới
3 Xem thông tin cơ bản
Sauk hi thực hiện thao tác chạm bên trên, người dùng
chuyển sang trang thông tin cơ bản của nhân viên: họ
và tên, nơi sống, chức vụ trong công ty, manager và
direct reports (hiển thị số lượng direct report bên
dưới). Các thông tin khác như email, office number,
personal number cũng được hiển thị một cách trực
quan.Người dùng có thể thực hiện thao tác chạm để
thực hiện chức năng tương ứng.
4 Liên lạc nhanh
Người dùng có thể liên lạc nhanh với nhân viên trong
màn hình hiển thị thông tin nhân viên bằng chỉ một
thao tác chạm: gửi email, gọi điện thoại phòng ban,
gọi điện thoại cá nhân hay gửi tin nhắn trực tiếp.

33
5 Add Location
Người dùng có thể thêm thông tin về vị trí của nhân
viên bằng thao tác chạm vào chức năng Add
Location. Hành động này sẽ trực tiếp đi tới google
map và thêm thông tin vị trí của nhân viên đó, đây
chính là một trong những hỗ trợ APIs hữu ích của
Phonegap
6 Add to Contacts
Người dùng có thể thêm nhân viên vào danh sách
liên lạc của mình đơn giản bằng thao tác chạm vào
chức năng Add to Contacts.
7 Change Picture
Người dùng có thể thay đổi hình ảnh của nhân viên
bằng thao tác chạm vào chức năng Change Picture.
Thao tác này sẽ kích hoạt ứng dụng Camera của thiết
bị và rồi thay đổi hình ảnh của nhân viên bằng hình
ảnh mà nó chụp được.
8 Return Homepage
Khi người dùng thao tác vào nút “Home” trên thanh
bar thì chương trình sẽ quay trở lại trang chính đầu
tiên để người dùng xem thông tin các nhân viên khác.
3.1.3. Phân tích chương trình ứng dụng về biểu đồ Use Case

34
Hình 12: Biểu đồ Use Case tổng quát
Người dùng sau khi chạy chương trình, có thể thao tác chạm để tìm kiếm nhân viên, gõ
một phìm bất kì vào ô search và danh sách nhân viên sẽ được hiển thị tại màn hình chính.
Tại đây người dùng có thể thấy ảnh nhận diên, họ và tên cũng như vị trí làm việc trong
công ty, và số nhân viên mà người đó trực tiếp quản lý.
Sau đó người dùng có thể cuộn lên xuống màn hình để xem tất cả danh sách nhân viên, và
thao tác chạm vào nhân viên tương ứng để biết thông tin cụ thể của nhân viên này.
Khi màn hình chuyển sang Employee Details. Người dùng có thể biết thông tin chi tiết về
nhân viên đó, và thực hiện các chức năng cụ thể:
- View Manager (nếu là nhân viên dưới quyền tổng giám đốc).
- View Direct Reports (nếu không phải nhân viên cấp thấp nhất).
- Send Email.
- Call Office Cell (gọi điện thoại phòng ban).
- Call Cell (gọi điện thoại cá nhân).
Tim kiem nhan vien
Nguoi dung
Xem thong tin Manager Xem thong tin Direct Reports
Send Email
Call Office Cell
Call Cell
Send SMS
Add Location
Add to Contacts
Change Picture
Xem thong tin nhan vien

35
- Send SMS (gửi tin nhắn).
- Add Location (thêm vị trí sinh sống của nhân viên).
- Add to Contacts (thêm nhân viên vào danh bạ).
- Change Picture.
Tại màn hình làm việc này, nếu người dụng muốn trở lại màn hình đầu tiên để tiếp tục tìm
kiếm và xem thông tin của nhân viên khác, người dùng chỉ cần đơn giản thao tác chạm
vào nút “Home” phía bên trái thanh bar trên cùng. Màn hình sẽ ngay lập tức chuyển về
màn hình khởi động ban đầu của ứng dụng.
Ngay sau đây, ta sẽ phân tích chi tiết và mô tả các chức năng trên bằng các biểu đồ phân
rã use case.
3.1.3.1. Biểu đồ phân rã use case thể hiện chức năng thực hiện thao tác chạm và
tìm kiếm
Hình 13: Biểu đồ phân rã use case thể hiện chức năng thực hiện thao tác chạm và tìm
kiếm nhân viên
3.1.3.2. Biểu đồ phân rã use case thể hiện chức năng xem thông tin cơ bản của
nhân viên

36
Hình 14: Biểu đồ phân rã use case thể hiện chức năng xem thông tin cơ bản của nhân
viên
3.1.3.3. Biểu đồ phân rã use case thể hiện chức năng liên lạc nhanh

37
Hình 15: Biểu đồ phân rã use case thể hiện chức năng liên lạc nhanh
3.1.3.4. Biểu đồ luồng dữ liệu thể hiện các chức năng APIs của Phonegap

38
Hình 16: Biểu đồ phân rã use case thể hiện các chức năng APIs của Phonegap
3.1.4. Thiết kế cơ sở dữ liệu của chương trình ứng dụng
Bảng cơ sở dữ liệu của một nhân viên.
Tên bảng: employee
Bảng 5:Bảng thiết kế cơ sở dữ liệu của một nhân viên
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 AUTOINCREMENT PRIMARY Mã nhân viên
firstName VARCHAR
lastName VARCHAR
title VARCHAR Vị trí của nhân
viên
department VARCHAR Tên phòng ban
của nhân viên
managerID INTEGER Mã của người
quản lý

39
city VARCHAR Tên thành phố
officePhone VARCHAR Số điện thoại
phòng ban
cellphone VARCHAR Số điện thoại cá
nhân
Email VARCHAR
picture VARCHAR ảnh nhận diện
3.2. Thiết kế giao diện chương trình ứng dụng
3.2.1. Thiết kế tổng quát
Dựa trên các phân tích thiết kế ở bên trên thì chương trình phần mềm cần có màn hình
hiển thị các chức năng chính như sau:
- Màn hình chính tìm kiếm nhân viên.
- Màn hình chính hiển thị danh sách nhân viên.
- Màn hình hiển thị thông tin của một nhân viên.
- Màn hình hiển thị các direct reports của một nhân viên.
3.2.2. Thiết kế chi tiết
Dựa vào thiết kế tổng quát, ta thiết kế cho phần mềm các màn hình chính sau:
3.2.2.1. Màn hình tìm kiếm nhân viên
Khi chương trình khởi động, màn hình chính sẽ hiện thị cho phép người sử dụng tìm kiếm
nhân viên. Khi người sử dụng thự hiện thao tác nhập ký tự bất kì vào ô search box thì màn
hình sẽ được phóng to ra để chuẩn bị thao tác nhập và tìm kiếm.

40
Hình 17: Màn hình tìm kiếm nhân viên
3.2.2.2. Màn hình hiển thị danh sách các nhân viên theo từ khóa tìm kiếm
Khi người dùng nhập một ký tự bất kỳ vào ô tìm kiếm, màn hình sẽ hiển thị danh sách
nhân viên có liên quan đến từ khóa tìm kiếm đó.

41
Hình 18: Màn hình hiển thị danh sách nhân viên
3.2.2.3. Màn hình hiển thị thông tin chi tiết của một nhân viên
Như đã thấy ở màn hình trên, ta biết đượ thông tin cơ bản: Họ tên, vị trí làm việc trong
công ty và ảnh nhận diện, ngoài ra còn biết được số nhân viên mà người này quản lý trực
tiếp (chính là số trong ô nhỏ bên phải). Nếu muốn biết thông tin của nhân viên nào, người
dùng thao tác chạm vào nhân viên đó, màn hình thông tin chi tiết của nhân viên này sẽ
được hiển thị. Ví dụ so sánh chọn James King (là tổng giám đốc của công ty kiêm CEO),
và Diem Nguyen Van (là Developer of Sofware trong công ty).

42
Hình 19: Màn hình hiển thị thông tin chi tiết của một nhân viên
Như có thể thấy, tùy vào vị trí làm việc trong công ty mà các nhân viên có thông tin khác
nhau đôi chút. Như trên, vì James King là president của công ty nên sẽ không có thông tin
về manager của ông ta. Trong khi Diem Nguyen Van có cả thông tin về manager và direct
reports. Nếu nhân viên nào không có direct reports (ví dụ nhân viên cấp thấp nhất) thì
cũng sẽ không có thông tin về direct reports.
Nếu ta thao tác chạm vào 2 thông tin này thì màn hình sẽ chuyển sang để xem thông tin
về manager hay xem các direct reports tương ứng.

43
Hình 20: Màn hình thể hiện chức năng View Manager và View Direct Reports của nhân
viên (Diem Nguyen Van).
Trong quá trình thao tác các chức năng, người dùng có thể luôn luôn quay trở lại trang
Home nếu muốn. Chỉ cần thao tác trực tiếp vào nút Home bên tay trái cùng thanh bar là
màn hình sẽ chuyển về màn hình chính ban đầu ngay lập tức. Ngoài ra nếu muốn quay lại
trang trước thì chỉ cần thao tác với nút back mà thiết bị di động đã hỗ trợ.
3.2.2.4. Màn hình thao tác các chức năng liên lạc nhanh và chức năng được hỗ trợ
của Phonegap.
Người dùng có thể liên lạc nhanh với nhân viên bằng cách thao tác chạm với các chức
năng tương ứng: gửi email, gọi điện cơ quan, gọi điện thoại cá nhân hay gửi sms. Đồng
thời nếu muốn thực hiện các chức năng được hỗ trợ bởi APIs của Phonegap như: Add
Location, Add to Contacts, hay Change Picture thì người dùng cũng chỉ cần thao tác chạm
với chức năng tương ứng.

44
Hình 21: Màn hình thể hiện chức năng liên lạc nhanh (call office cell) và chức năng được
hỗ trợ bởi APIs Phonegap (change picture)

45
Chương 4
Kết quả, đánh giá chương trình phần mềm
4.1.Kết quả
Như vậy, sau quá trình tìm hiểu và nghiên cứu về framework ngôn ngữ lập trình độc lập
trên mobile và cụ thể là framework Phonegap, tôi đã xây dựng được chương trình phần
mềm sử dụng Phonegap và các ngôn ngữ lập trình nền web: HTML5, CSS3, JavaScript,
Jquery,…Qua đó thể hiện được sự ưu việt khi sử dụng Phonegap để viết một chương trình
một lần, sau đó build qua cloud và chạy được trên nhiều nền tảng smartphone khác nhau.
Phonegap quả thật là framework đơn giản mà hữu hiệu để làm được việc đó.
4.2. Đánh giá chương trình phần mềm
4.2.1. Công cụ phần mềm
Dưới đây là các công cụ, thư viện sử dụng trong quá trình xây dựng phần mềm.
Bảng 6: Các công cụ, thư viện sử dụng
STT Tên công cụ Mục đích
1 Eclipse SDK Môi trường phát triển ứng dụng
2 Genymotion
Phần mềm cài đặt máy ảo hỗ trợ tăng tốc
độ chạy chương trình
2 Iscroll.js Thư viện hỗ trợ chức năng cuộn màn hình
3 Jquery.js Thư viện hỗ trợ sử dụng JavaScript
4 Phonegap-1.1.0.js
Thư viện hỗ trợ sử dụng các APIs của
Phonegap
5 Rational Rose Vẽ biểu đồ Use Case
4.2.2. Đánh giá phần mềm
Chương trình phần mềm EmployeeDirectory được xây dựng đúng theo quy trình một
chương trình phần mềm sử dụng framework PhoneGap. Cấu trúc các file trong chương
trình: file .java, file .html, file.jss hay là file.css đều xây dựng theo chuẩn đúc kết từ quá

46
trình tìm hiểu khóa luận của tôi. Chương trình chạy được trên máy ảo android khi sử dụng
eclipse, hay là tôi import nó trong intellji đều chạy được, và để tăng tốc độ chạy tôi đã cài
đặt thêm máy ảo genymotion trên cả eclipse và intellji.
Chương trình hoạt động trơn tru trên máy ảo, vì thế tôi chắc rằng nó cũng sẽ hoạt động
được tương tự khi chạy trên máy thật. Mặc dù chương trình khá là đơn giản, nhưng nó đã
thể hiện được việc sử dụng framework ngôn ngữ lập trình độc lập trên mobile, cụ thể ở
đây là Phonegap là việc rất hữu ích. Vì chúng ta chỉ cần : “Viết một lần, Build trên Cloud
và có thể chạy trên đa nền tảng smartphone khác nhau”.
Chương 5
Kết luận và hướng phát triển
5.1. Kết luận
Với mục đích: “Viết một lần, biên dịch qua Cloud và chạy được trên nhiều nền tảng
Smartphone khác nhau”. Phonegap đã, đang và vẫn sẽ là framework hữu ích và tân
tiến cho các nhà lập trình di động. Mặc dù vẫn còn một số hạn chế như việc tương
thích một số tính năng trên các nền tảng di động như: ios và android nhưng Phonegap
vẫn đang cải tiến mỗi ngày, update các phiên bản để khắc phục điều đó.
Chương trình ứng dụng EmployeeDirectory đã trình bày trong khóa luận này là một
ứng dụng khá đơn giản xây dựng sử dụng Phonegap và các ngôn ngữ lập trình nền
web, sau khi được biên dịch trên cloud, nó chạy hoạt động trơn tru trên một số nền
tảng mobile. Như vậy đã minh chứng cho sức mạnh và các tính năng được hỗ trợ trong
framework Phonegap. Hơn nữa gánh nặng về việc thấu hiểu một ngôn ngữ không còn
là nỗi lo ngại với các nhà lập trình nữa, khi chỉ cần hiểu về các ngôn ngữ lập trình
web: HTML5, CSS3, JavaScript, … và sự hỗ trợ tuyệt vời của framework Phonegap.
5.2. Hướng phát triển
Chương trình ứng dụng còn một số hạn chế như chưa có chức năng login, tạo account
cho các nhân viên trong công ty, chưa có các chức năng như thêm nhân viên, xóa hay
chỉnh sửa. Vì việc kết nối cơ sở dữ liệu hoàn toàn là dùng Sqlite trực tiếp trong file
JavaSrcipt nên có phần bị động. Như vậy có thể đề xuất một số hướng phát triển để
chương trình được tối ưu hơn:

47
- Tăng tính bảo mật cho chương trình: Tạo chức năng login, logout và chỉ có các
thành viên trong công ty mới được sinh account riêng của mình.
- Tạo thêm một số chức năng linh động: Thêm, chỉnh sửa, xóa thông tin nhân
viên và đồng bộ với cơ sở dữ liệu.
- Nghiên cứu cải tiến chương trình chạy tối ưu hơn.
Tài liệu tham khảo

Khóa Luận Tìm Hiểu Về Ngôn Ngữ Lập Trình Độc Lập Trên Mobile - PhoneGap

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Khóa Luận Tìm Hiểu Về Ngôn Ngữ Lập Trình Độc Lập Trên Mobile - PhoneGap

Similar to Khóa Luận Tìm Hiểu Về Ngôn Ngữ Lập Trình Độc Lập Trên Mobile - PhoneGap (20)

Khóa Luận Tìm Hiểu Về Ngôn Ngữ Lập Trình Độc Lập Trên Mobile - PhoneGap