Framework phát triển ứng dụng di động đa nền tảng

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 Trong luận văn này, tôi sẽ tập trung chủ yếu vào việc tìm hiểu Phonegap, và

1

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VI ỆN ĐÀO TẠO SAU ĐẠI HỌC

============

Hà N ội – 2015

LỜI CAM ĐOAN

Tôi xin cam đoan luận văn được thực hiện là quá trình nghiên cứu khoa học của

bản thân được đúc kết từ quá trình nghiên cứu từ việc tập hợp các nguồn tài liệu, các kiến

thức đã học đến việc tự thu thập các thông tin liên quan và liên hệ thực tế tại đơn vị công tác Mọi sự giúp đỡ cho việc thực hiện luận văn này đã được tác giả cảm ơn và các thông tin đã được trích dẫn trong luận văn đều đã được chỉ rõ nguồn gốc

Tác giả

Nguyễn Tuấn Anh

LỜI CẢM ƠN

Luận văn được hoàn thành tại trường Đại học bách khoa Hà Nội, là kết quả của khoá cao

học CH2013B

Đầu tiên cho phép tôi chân thành cám ơn tới Thầy giáo TS Nguyễn Thanh Hùng đã trực

tiếp hướng dẫn và sửa chữa trong suốt thời gian nghiên cứu hoàn thành luận văn này

Tôi cũng xin bày tỏ lòng biết ơn sâu sắc tới các thầy cô giáo Viện đào tạo sau đại học đã

tham gia giảng dạy lớp Cao học ngành công nghệ thông tin khóa 2013B Tôi xin cảm ơn

gia đình, các đồng nghiệp, các phòng ban chức năng và bạn bè đã giúp đỡ động viên tôi

trong suốt thời gian học tập và hoàn thiện luận văn

Xin chân thành cảm ơn!

Người thực hiện

Nguyễn Tuấn Anh

MỤC LỤC

LỜI CAM ĐOAN 2

LỜI CẢM ƠN 3

MỤC LỤC 4

DANH SÁCH HÌNH VẼ 7

DANH SÁCH BẢNG 9

TÓM TẮT 10

CHƯƠNG 1 MỞ ĐẦU 11

1.1 Giới thiệu 11

1.2 Những thách thức trước khi phát triển ứng dụng đa nền tảng ra đời 14

1.3 Kết luận 17

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 18

2.1 Phân loại các ứng dụng di động 18

2.2 So sánh các Framework phát triển di động đa nền tảng 19

2.2.1 Xamarin Tools 20

2.2.2 Appcelerator Titanium 21

2.2.3 Phonegap 22

2.2 Giới thiệu về Framework mã nguồn mở Phonegap 23

2.2.1 Phonegap là gì? 23

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

2.1.4 Tại sao lại sử dụng Phonegap? 24

2.1.5 Cách thức Phonegap hoạt động 25

2.1.6 Các hàm APIs mà Phonegap hiện đang hỗ trợ trên các nền tảng mobile 28

CHƯƠNG 3 XÂY DỰNG CHƯƠNG TRÌNH ỨNG DỤNG 30

3.1 Mô hình phát triển ứng dụng đa nền tảng 30

3.2 Môi trường và quy trình phát triển 31

3.2.1 Môi trường phát triển 31

3.2.2 Quy trình phát triển 31

3.3 Phân tích thiết kế và xây dựng chương trình ứng dụng 34

3.3.1 Giới thiệu chung về chương trình ứng dụng 34

3.3.2 Phân tích chức năng của chương trình 36

3.3.2.1 Biểu đồ phân rã chức năng 36

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

3.3.3 Phân tích chương trình ứng dụng về biểu đồ Use Case 41

3.3.3.1 Biểu đồ phân rã use case thể hiện chức năng Đăng nhập 42

3.3.3.2 Biểu đồ phân rã use case thể hiện chức năng Đăng xuất 42

3.3.3.3 Biểu đồ phân rã use case thể hiện chức năng Quản lý bảng tin 43

3.3.3.4 Biểu đồ phân rã use case thể hiện chức năng Quản lý bảng lương 43

3.3.3.5 Biểu đồ phân rã use case thể hiện chức năng Tìm kiếm cán bộ 44

3.3.3.6 Biểu đồ phân rã use case thể hiện chức năng Xem thông tin cán bộ 44

3.3.3.7 Biểu đồ phân rã use case thể hiện chức năng Liên lạc nhanh 45

3.4 Thiết kế cơ sở dữ liệu 45

3.4.1 Thiết kế cơ sở dữ liệu bảng Account 46

3.4.2 Thiết kế cơ sở dữ liệu bảng Employee 46

3.4.3 Thiết kế cơ sở dữ liệu bảng Employee_News 47

3.4.4 Thiết kế cơ sở dữ liệu bảng News 47

3.4.5 Thiết kế cơ sở dữ liệu bảng Salary 47

3.4.6 Thiết kế cơ sở dữ liệu bảng Cat_Salary 48

3.5 Thiết kế giao diện 48

3.5.1 Màn hình Đăng nhập 49

3.5.2 Màn hình Trang chủ 49

3.5.3 Màn hình Danh sách tin tức 50

3.5.4 Màn hình Danh sách lương 50

3.5.5 Màn hình danh sách cán bộ 51

3.5.6 Màn hình Xem thông tin cán bộ 52

3.6 Đánh giá mức độ phù hợp khi sử dụng Phonegap để phát triển ứng dụng 53

CHƯƠNG 4 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 55

4.1 Kết quả, đánh giá chương trình phần mềm 55

4.2 Kết luận và hướng phát triển 55

TÀI LIỆU THAM KHẢO 57

DANH SÁCH HÌNH VẼ

Hình I - 1 T ổng quan về Mobile Application

Hình I - 2 S ự khách nhau về phương thức giao tiếp

Hình I - 3 S ự phân mảnh phát triển song song với số lượng hệ điều hành Hình I - 4 S ự gia tăng nguồn nhân lực cho các nền tảng phát triển

Hình I - 5 Phát tri ển ứng dụng riêng biệt trên các nền tảng

Hình II - 1 Kiến trúc bên trong 1 ứng dụng Phonegap

Hình II - 2 Cách th ức 1 ứng dụng Phonegap tương tác với thiết bị

Hình III - 1 T ổng quan ứng dụng

Hình III - 2 Quy trình phát tri ển phần mềm đa nền tảng sử dụng Phonegap Hình III - 3 Bi ểu đồ phân rã chức năng

Hình III - 4 Bi ểu đồ Use Case tổng quát

Hình III - 5 Bi ểu đồ Use case chức năng Đăng nhập

Hình III - 6 Bi ểu dồ Use case chức năng Đăng xuất

Hình III - 7 Bi ểu đồ Use case chức năng Quản lý bảng tin

Hình III - 8 Bi ểu đồ Use case chức năng Quản lý bảng lương

Hình III - 9 Bi ểu đồ Use case chức năng Tìm kiếm cán bộ

Hình III - 10 Bi ểu đồ Use case chức năng Xem thông tin cán bộ

Hình III - 11 Bi ểu đồ Use case chức năng Liên lạc nhanh

Hình III - 12 Cơ sở dữ liệu

Hình III - 13 Màn hình ch ức năng Đăng nhập

Hình III - 14 Màn hình Trang ch ủ

Hình III - 15 Màn hình Danh sách tin t ức

Hình III - 16 Màn hình Chi ti ết tin tức

Hình III - 17 Màn hình Danh sách lương

Hình III - 18 Màn hìn chi ti ết lương

Hình III - 19 Màn hình Danh sách cán b ộ

Hình III - 20 Màn hình thông tin cán b ộ

Hình III - 21 Màn hình danh sách cán bộ dưới quyền

DANH SÁCH BẢNG

B ảng 1 Phân mảnh theo tính năng

B ảng 2 Bảng so sánh các dạng ứng dụng Mobile

B ảng 3 Bảng so sánh các dạng ứng dụng Mobile

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

B ảng 5 Bảng đặc tả chức năng của chương trình

B ảng 6 Thiết kế cơ sở dữ liệu bảng Account

B ảng 7 Thiết kế cơ sở dữ liệu bảng Employee

B ảng 8 Thiết kế cơ sở dữ liệu bảng Employee_News

B ảng 9 Thiết kế cơ sở dữ liệu bảng News

B ảng 10 Thiết kế cơ sở dữ liệu bảng Salary

B ảng 11 Thiết kế cơ sở dữ liệu bảng Cat_Salary

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

Trong luận vă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

C HƯƠNG 1 MỞ ĐẦU

1.1 Giới thiệ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 cù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 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 sâu 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: “Framework phát triển ứng dụng di động trên đa nền tảng” sẽ nêu lên thực trạng phân mảnh của ứng dụng di động hiện tại sau đó đưa ra giải pháp sử dụng Phonegap, các công nghệ nền Web liên quan để giải quyết vấn đề, ngoài ra còn xây dựng

một chương trình phần mềm ứng dụng sử dụng Phonegap, JqueryMoible có thể chạy trên các nền tảng di động khác nhau

Nội dung Luận văn này gồm 4 chương:

Chương 1 – Mở đầu: Nêu thực trạng, các khó khăn hiện tại, đặt ra bài toán công nghệ

cần giải quyết

Chương 2 – Cơ sở lý thuyết: So sánh đánh giá một số framework phát triển đa nền tảng

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: Trình bày mô hình và quy trình phát triển ứng

dụng đa nền tảng, phân tích thiết kế và xây dựng, kiểm thử chương trình phần mềm sử

dụng framework Phonegap và JqueryMobile

Chương 4 – Kết luận và hướng phát triển: Tóm lược những kết quả của Luận văn,

những đạt được và hạn chế, triển vọng và hướng phát triển trong tương lai

Cho đến hiện nay, trên thị trường có rất nhiều nền tảng điện thoại thông minh như: Android, iPhone, BlackBerry, Nokia, Windows Phone, và WebOS Gần đây với sự ra mắt

của các nền tảng mới hơn như Samsung Bada và Meego, cũng đang có xu hướng phát triển mạnh và ngày càng có thế trên thị trường Với một số lượng lớn các nền tảng điện thoại thông minh như vậy, đã tác động đáng kể và đòi hỏi quan điểm vững chắc của các nhà phát triển ứng dụng trên di động

Trong năm 2000, chúng ta đã từng biết một hiện tượng tương tự trong thế giới máy tính để bàn (Desktop), với sự có mặt của các nền tảng như Windows (Microsoft), Mac (Apple) cùng nhiều phiên bản khác nhau của Linux và UNIX Vào thời điểm đó, rất khó để xây dựng một sản phẩm mà có thể chạy trên mọi nền tảng Kết quả hướng giải

quyết được thực hiện trong nội bộ bằng cách xây dựng các Framework C++ và tích hợp

sẳn các mô-đun Đi cùng với đó, Sun đã xây dựng một nền tảng chung (Java Platform) và

vấn đề đã dần được làm nhẹ đi

Từ những năm 2004 đến năm 2008, cộng đồng các nhà phát triển đã nhìn thấy một

loại phân mảnh khác đang diễn ra trong thế giới tình duyệt Và dễ dàng nhìn thấy hơn ở đây đó là giữa Internet Explorer 6 với Firefox và Safari Sau đó, cùng với sự ra đời của Chrome và các trình duyệt khác thì sự phân mảnh này ngày càng diễn ra mạnh, cụ thể hơn nữa Bản chất của sự phân mảnh này chủ yếu là do một số trình duyệt không tuân thủ theo một số thông số kỹ thuật được đặt sẳn của W3C (World Wide Web Consortium) Và

vì vậy, điều này không quá khó để giải quyết Rất nhiều thư viện JavaScript đã giúp và

giải thoát tình trạng Cross-Browser trên

Sự phân mảnh trong thế giới điện thoại thông minh Mobile OS lại phức tạp hơn,

bởi vì không có một đặc điểm kỹ thuật hay một chuẩn nhất định nào trong lĩnh vực phát triển này Năm 2007, Apple và Google đều tung ra những nền tảng di động của thế hệ điện thoại thông minh Và cho đến năm 2008 thì cả hai công ty này đều có thị trường phát triển riêng với số lượng người dùng tăng dần theo cấp số mũ

Các nhà phát triển ứng dụng di động nhanh chóng tiếp cận với các nền tảng mới và xây dựng lại những ứng dụng tương tự trên iPhone, Android, BlackBerry, WebOS, Symbia và giờ đây lại phải thêm Samsung Bada, Window Phone vào danh sách này Sự thách thức cũng được làm rõ như khi chúng ta phát triển ứng dụng cho iPhone thì cần Mac, cho BlackBerry thì lại cần Windows

1.2 Những thách thức trước khi phát triển ứng dụng đa nền tảng ra đời

Mobile Application

Web Application

≠

Hình I - 1 T ổng quan về Mobile Application

Điều đầu tiên cần lưu ý mobile application không phải là web application Sự khác

biệt được thể hiện trong cả bản chất và các tính năng được cung cấp

Cách người dùng tương tác với web application và mobile application cũng hoàn toàn khác nhau Người dùng tương tác với điện thoại thông minh thông qua màn hình

cảm ứng sinh động hơn và với nhiều phương thức khác

Mobile Application

Web Application

Hình I - 2 S ự khách nhau về phương thức giao tiếp

Sự khác biệt đó còn thể hiện ở trong việc nhận dạng vị trí thiết bị khả năng Push Notification (thông báo)

Trong khi phát triển ứng dụng di động đang là xu hướng hiện nay, với số lượng ngày càng tăng của các hệ điều hành (OS) di động, có rất nhiều thách thức liên quan đến việc phát triển các ứng dụng di động

S ự phân mảnh của các nền tảng hệ điều hành: Xu hướng phân mảnh với số lượng

ngày càng tăng của các nền tảng di động Đầu tiên, đó là BlackBerry và điện thoại thông minh Symbian, sau đó đến sự phát triển mạnh mẽ của iPhone, Android Chắc chắn rằng,

nền tảng di động không dừng lại ở đó khi HP đến với WebOS, Microsoft đã giới thiệu Windows Phone, và giờ đây, lại đến Samsung với Bada

Hình I - 3 S ự phân mảnh phát triển song song với số lượng hệ điều hành

Tiêu hao ngu ồn nhân lực: Nếu chúng ta chọn việc xây dựng một ứng dụng di động trên

từng nền tảng thì chúng ta phải đối mặt với nhiều vấn đề nan giải Cần một số lượng đội (Team) phát triển ứng dụng tương ứng với mỗi nền tảng di động đó, đi kèm với đó sẽ là các mức chi phí, người quản lý (Team Leader) với nhiều rủi ro có thể xãy ra

Hình I - 4 S ự gia tăng nguồn nhân lực cho các nền tảng phát triển

Yêu c ầu về kinh nghiệm với một nền tảng di động nhất định: Sự đòi hỏi kinh nghiệm

chuyên môn của một nhà phát triển ứng dụng di động là điều bắt buộc Điều đó đảm bảo

mức độ chuyên nghiệp trong việc xây dựng ứng dụng di động ở một nền tảng nào đó

Hình I - 5 Phát tri ển ứng dụng riêng biệt trên các nền tảng

S ự phân mảnh theo tính năng: Khả năng phân mảnh theo tính năng của các mobile

application cũng xãy ra cao, khi khả năng đáp ứng các chức năng cơ bản của hệ điều hành lẫn phần cứng tương thích

iOS Android BlackBerry Palm Windows

B ảng 1 Phân mảnh theo tính năng

Phân m ảnh trong môi trường phát triển ứng dụng: Môi trường phát triển ứng dụng là

một trong những phân mảnh quan trọng Chúng ta phải cần ít nhất hai hệ điều hành Windows và Mac để phát triển ứng dụng cho các nều tảng sau đây

o iOS

Loại ứng dụng Hệ điều hành Tool phát triển Ngôn ngữ lập trình

Eclipse/Java/Android Development Tool(ADT)

Java

B ảng 2 Bảng so sánh các dạng ứng dụng Mobile

1.3 Kết luận

Như vậy ta có thể thấy trước sự phân mảnh của các ứng dụng di động, các nhà phát triển đang phải đứng trước rất nhiều khó khăn Bài toán đặt ra ở đây là làm sao lựa

chọn được công nghệ phù hợp để rút ngắn thời gian phát triển, giảm tiêu hao nguồn nhân

lực, ngoài ra việc nâng cấp, chỉnh sửa về sau cũng dễ dàng hơn Vậy làm sao để giải quyết bài toán này, giải pháp công nghệ sẽ được trình bày tại Chương 2 Cơ sở lý thuyết

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

2 1 Phân loại các ứng dụng di động

Trước tiên ta tìm hiểu các loại ứng dụng di động Ngày nay, lĩnh vực phát triển ứng dụng di động tồn tại ba khái niệm là: Native Application, Web Application và Hybird Application

Native 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, Java cho Android, NET cho Windows Phone,… )

• Ưu điểm của Native Application 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 tập tin, camera, microphone, cảm biến gia tốc,… )

• 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

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

và web application giao tiếp với native application thông qua một cầu nối (bridge) để mang lại sức mạnh của native application cho web application

Sau dây là bảng so sánh đánh giá ba loại ứng dụng di động trên

cảm biến gia tốc… điều này không thể làm được trên ứng dụng web, sử dụng ứng dụng ngay cả khi không có kết nối internet Những ứng dụng di động của một số trang tin tức

hiện nay như Vnexpress, Dantri v.v đều là những ứng dụng lai Nhìn vào bảng so sánh trên, ta có thể thấy ứng dụng Hybrid là lựa chọn để giải quyết vấn đề phân mảnh của các ứng dụng di động hiện nay

2.2 So sánh các Framework phát triển di động đa nền tảng

Hiện nay trên thị trường có khá nhiều framework phát triển di động đa nền tảng, trong đó ba framework phổ biến hơn cả là Xamarin, Appcelerator Titanium và Phonegap

Để lựa chọn được framework phù hợp, sau đây ta sẽ đánh giá ưu nhược điểm của từng framework trên

một ứng dụng native hoàn toàn cũng với giao diện người dùng native trên mỗi nền tảng

Nhưng điều này cũng có nghĩa là ta sẽ bị giới hạn tới một mức độ nào đó việc chia

sẻ code giữa các nền tảng này Điển hình là khi phát triển một ứng dụng sử dụng công cụ

của Xamarin, lập trình viên sẽ xây dựng một phần lõi của ứng dụng mà code của nó có

thể chia sẻ giữa hai nền tảng iOS và Android, và thậm chí là cả phiên bản trên Windows Phone của ứng dụng cũng dựa trên thư viện lõi này Với hướng tiếp cận này thì đội ngũ

lập trình viên có khả năng sử dụng lại khoảng từ 60-70% code của ứng dụng mà không

phải vất vả

Ngoài ra để có thể tiến xa hơn bằng cách tự phát triển các lớp trừu tượng

(abstractions) của riêng mình sử dụng một kiến trúc kiểu như MVC hay MVVM, với hướng tiếp cận này, dĩ nhiên là sẽ khó hơn một chút để bắt đầu nhưng có thể sử dụng được lại nhiều code hơn, có lẽ lên đến khoảng 80-90%

Nếu đánh giá về công cụ thì các công cụ của Xamarin có thể nói là rất tuyệt vời Xamarin cũng có một IDE của riêng nó gọi là Xamarin Studio IDE này thì đa nền tảng,

nó được thiết kế rất tốt và dễ dàng sử dụng Công cụ Xamarin này cũng có một plugin cho Visual Studio, nó sẽ cho phép phát triển ứng dụng đa nền tảng trong Visual Studio Plugin này thậm chí cho phép phát triển một ứng dụng iOS từ Visual Studio, nhưng sẽ

cần một máy Mac để thực hiện công việc build ứng dụng (Công cụ này sử dụng một triệu gọi từ xa tới máy Mac để thực hiện công việc build đó.)

Mặc dù có những ưu điểm như trên, tuy nhiên Xamarin cũng có những nhược điểm Thứ nhất Xamarin là framework thu phí, và để sử dụng đầy đủ tính năng của

framework doanh nghiệp sẽ phải bỏ ra một khoản chi phí không hề nhỏ Một nhược điểm

nữa của Xamarin là hiện tại framework này chưa hỗ trợ nhiều nền tảng mà chỉ dừng lại ở iOS, Android và Windows Phone

lập trình khai báo một button và layout xác định cũng như một số thuộc tính cho button

đó, khi ta biên dịch ứng dụng, thì button này sẽ xuất hiện như là một button gốc của Android khi chạy trên thiết bị Android và như là một button gốc của iOS khi nó chạy trên iOS Điều này có nghĩa là ta có thể xây dựng một ứng dụng đa nền tảng hoàn chỉnh bao

gồm giao diện gốc với 100% code được sử dụng lại và thực hiện nó trong JavaScript Tuy nhiên, các hệ điều hành có nhiều thành phần UI và mô hình tương tác là đa nền tảng vẫn

tồn tại nhiều phần không giống nhau Ví dụ, trong iOS có một control rất lý tưởng là Navigation Controller, nó sẽ lưu vết các screen nào mà người dùng đã lướt qua và cho phép họ quay trở lại một cách dễ dàng; trong Android thì không có control như vậy Mặc

dù Titanium cũng hỗ trợ các control theo nền tảng xác định, nhưng điều này có nghĩa là

lập trình viên phải viết thêm một vài đoạn code điều kiện dựa trên nền tảng cụ thể

Như vậy, mặc dù đội ngũ lập trình có thể lập trình với mẫu số chung nhỏ nhất giữa các nền tảng và thu được một ứng dụng đa nền tảng đầy đủ và bộ source code có thể sử

dụng lại nhưng việc sử dụng các control trong Titanium hơi phức tạp và việc phát triển,

bảo dưỡng trở nên vất vả hơn

2.2.3 Phonegap

PhoneGap về cơ bản là một tập các hàm JavaScript API, nó cho phép ứng dụng có

thể truy cập những tài nguyên gốc trong thiết bị di động Nó cũng là một wrapper và cho phép xây dựng một ứng dụng web được cài đặt cục bộ trên thiết bị

Khi xây dựng một ứng dụng sử dụng PhoneGap, về cơ bản là đang xây dựng một trang web di động sử dụng HTML5 và JavaScript, cũng giống như việc xây dựng những trang web khác hiện nay, sau đó đặt mã HTML và JavaScript đó trên thiết bị di động Các ứng dụng PhoneGap chạy trên trình duyệt cục bộ trên điện thoại và có một số cơ chế để triệu gọi vào các thư viện gốc thông qua các giao diện lập trình ứng dụng JavaScript API Điều này có nghĩa là nếu ta đang phát triển một ứng dụng PhoneGap, thì ta có thể phát triển nó giống như một trang web di động đa nền tảng và có thể sử dụng bất kỳ mobile framework nào mà ta muốn, như Sencha Touch, hoặc JQuery Mobile, v.v…Vì tất cả code trong ứng dụng là HTML và JavaScript nên phần lớn sẽ có thể chia sẻ được Công cụ để phát triển PhoneGap rất dễ dàng để xây dựng, lập trình viên có thể xây dựng môi trường trên nhiều hệ điều hành khác nhau, đây là một ưu điểm của Phonegap Phonegap cũng cung cấp các Plugin cho nhiều IDE vì vậy lập trình viên sẽ không mất thời gian làm quen

với các IDE mới Một ưu điểm nữa của PhoneGap là cho phép triển khai dự án vào bất cứ môi trường nào khác môi trường đang phát triển, và có thể build một cách tự động cho

những nền tảng khác

Như vậy, mặc dù Phonegap cũng có những hạn chế, nhưng so với các framework khác thì Phonegap là lựa chọn phù hợp nhất Doanh nghiệp sẽ không phải trả phí, đội ngũ phát triển sẽ dễ dàng tiếp cận với việc phát triển ứng dụng di động bởi yêu cầu về công nghệ chỉ là những ngôn ngữ phổ biến như HTML, Javascript

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ở dù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)

2.1.3 Đô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

2.1.4 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

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,…)

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ó

Sau đây ta sẽ tìm hiểu cách thức Phonegap hoạt động và các APIs mà nó hỗ trợ

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 dùng tương tác với ứng dụng web application Khi người dùng tương tác với nội dung (content) của ứng

dụng, 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

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

Ứng dụng Native

Phonegap Interface WebView

API của thiết bị

Hình II - 2 Cách th ức 1 ứng dụng Phonegap tương tác với thiết bị

2.1.6 Các hàm APIs mà Phonegap hiện đang hỗ trợ trên các nền tảng mobile

Phonegap cung cấp hệ thống API rất đầy đủ, gần như toàn bộ tính năng của thiết bị đều

có thể sử dụng thông qua giao diện được viết bằng Javascript

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

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()

• 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ữ