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

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ãngcô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êngmình: IOS,

ĐẠ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

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC CHÍNH QUY

Ngành: Công nghệ thông tin

ĐẠ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

ĐỒ Á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)

TÓ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ềuhà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ãngcô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êngmì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ầuhế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ựngmộ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ảngSmartphone khác nhau

Từ khóa: Smartphone, Phonegap, framework, tương thích.

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ễnTrí 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ậnnà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ọcQuố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 cù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átcá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 cù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íchtô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

Nguyễn Văn Điềm

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ồngố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

Nguyễn Văn Điềm

Mục lụ

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

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

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

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

Danh sách bảng

Bảng 1: Các phần tử định nghĩa mới trong HTML5 7

Bảng 2: Bảng so sánh các dạng ứng dụng mobile 14

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 37

Bảng 6: Các công cụ, thư viện sử dụng 44

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ộccá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ếnkhô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àmthay đổ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ầncố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 ứngdụ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áchã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 độngcủ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ềntả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ữngngô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 cùng lúc…Việc ra đời của các framework này nóichung 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

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ồmHTML5, 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âydự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êndị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

Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệtWeb 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ànhphầ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ôngchữ, 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ụcriê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áttriể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ốthơn và vẫn đảm bảo yêu cầu mã tương đối nhẹ.

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, nhanhhơ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ốthơ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ự dosang 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 đangdù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 đếncá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 đặtplugin để 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

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ácthiế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.

Huyền thoại Steve Jobs đã từng đưa ra quan điểm rất rõ rang, Flash sẽ không baogiờ 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 đốivà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ủangười dùng

Thời gian trước, Google đã phát triển công cụ Google Swiffy cho phép người dùngchuyể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áttriển ứng dụng nền tảng cross-flatform trên di động với HTML5 và Javascript Bêncạnh đó, bản thân Adobe cũng cho ra đời công cụ mang tên Wallaby cho phép chuyểnnộ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ênbản nâng cấp cuối cùng Adobe cũng có thông báo: “Hiện tại HTML5 đã được triểnkhai 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ệcphá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âydự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ư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ờilươ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-ingia 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ặcDOM) 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ủachúng trong bảng sau đây

Bảng 1: Các phần tử định nghĩa mới trong HTML5.

<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>ịnh nghĩa 1 tiêu đề cho 1 số phần tử của trang web, cóể là toàn bộ trang, 1 phần tử <article>, hay <section> ộ trang, 1 phần tử <article>, hay <section> ề)> ần tử của trang web, có ử của trang web, cóố phần tử của trang web, có ần tử của trang web, có ử của trang web, có ủa trang web, có

<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ể là toàn bộ trang, 1 phần tử <article>, hay <section>

hướng)>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)>ết)> Định nghĩa một mục độc lập trên trang có thể dùng riêng chonó, như mục tin tức, bài viết trên blog, hoặc nhận xét.

<section (ph n)>ần tử của trang web, có Đại diện cho 1 phần của một tài liệu hoặc ứng dụng, chẳng hạnnhư 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)>ận xét)> Đánh dấu 1 thanh phụ hoặc 1 số nội dung khác có phần tách rờivớ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ấtcho đố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ộtloạ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ácgradient (độ dốc), tạo văn bản, chuyển đổi các đối tượng khung nền ảnh, và thể hiệnhì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 của người dù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ệnthuậ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 tintrê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ạimộ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 Webthườ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ầuHTTP, 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ủakhá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 khitrang đã được đưa ra) và không được tải tự động với mỗi yêu cầu HTTP, điều nay giúpngă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ộ, chophé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ớicá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ệunhư Gmail, Facebook, Twitter HTML5 cung cấp sự hỗ trợ cho các ứng dụng khôngnố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ầnnố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 trongquá 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 dùng cài đặtcá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

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ạngtệ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ẫuhữ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ênfile 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ằngcá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 chophé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 WebAudio API thì ứng dụng có thể đọc đượ các file mp3 và hiển thị 1 cách trực quan bảnnhạ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 ứngvớ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ờ songhà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ácfiles 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ẽ đượcnạ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ậpnhậ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ạythự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 trangpage 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ệntạ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ùngkhô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ôngminh iPhone hoặc Android 2.0) , thì người dùng có thể sử dụng Firefox và tải về một trìnhcắ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 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ómcá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ìnhthuộ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ự giaotiế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ảinghiệ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 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 chứa nhiều dữ liệu không cần thiết trongphầ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ứcHTTP 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ứcHTTP 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 trongtruyề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ứcthờ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ì 1thô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ảihiể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ệcnhậ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 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 rachi 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ẵnsà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ứcGET 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 trongtươ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ụngdựa trên nền tảng framework Phonegap để có thể biên dịch qua cloud và chạy trên nhiềunền tảng di động khác nhau Ngoài ra các công nghệ khác như CSS3, Javascript và JqueryMobile 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

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

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ểmcủ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ưởngnày là những trang web có giao diện tùy biến cao, chạy được trên nhiều độ phângiả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 choviệ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

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,dùng để hiển thị nội dung trang web app, và web app giao tiếp với native appthô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ấtnhiề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ệniPhoneDevCamp ở San Francisco, Phonegap tiếp tục giành chiến thắng giải thưởngChoice 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ượttả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ằngFramework 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ườitrong 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 NitobiSofware – 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à ApacheCordova

Ở 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 ứngdụ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ậptrì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à chophé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ạismartphone khác nhau

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ònnhớ đến thuật ngữ: “Write one, run any where” xuất hiện và trở thành một cơn sốt vàongà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 trongviệ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ácnhau 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ưngchạ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 applicationstores (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áctiế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ângiả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ênandroid 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áttriển ứng dụng trên Android hoặc iPhone thì hầu hết các tính năng đều có thể ápdụ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ưngphiên bản mới để khắc phục nhưng hạn chế của nó

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 webview 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ạythì nó sẽ tải trang page khởi tạo của ứng dụng (thông thường là trang index.html nhưnglậ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 dùng tương tác với ứngdụng web application Khi người dù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ộidung 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ậpthô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 nativeapplication về bản chất chính là 1 ứng dụng web application

Đị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ủamobile Nó có thể mở các trang HTML khác (theo cả 2 cách: 1 cách địa phương trực tiếptrê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ộidung content nếu cần, chơi các media files, mở các trang pages mới, thực thi các tínhtoán, và nhận về nội dung content từ sever hay gửi nội dung content tới server Giao diệncủ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ầnsâ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 ứngdụ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êntrong 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ôitrườ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ượtquá 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àmPhonegap APIs, thì ứng dụng gọi tới API bằng cách sử dụng Javascript và sau đó 1 lớplayer đặc biệt trong ứng dụng sẽ dịch hàm Phonegap API này, để gọi tới hàm native APIthí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