Tải bản đầy đủ (.pdf) (61 trang)

Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.38 MB, 61 trang )

Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

MỤC LỤC
LỜI CẢM ƠN ........................................................................................................ 3
LỜI CAM ĐOAN ................................................................................................... 4
LỜI MỞ ĐẦU ........................................................................................................ 5
DANH MỤC TỪ VIẾT TẮT .................................................................................. 8
DANH MỤC BẢNG BIỂU .................................................................................... 9
DANH MỤC HÌNH VẼ ........................................................................................ 10
CHƯƠNG I .......................................................................................................... 11
CƠ SỞ LÝ THUYẾT .......................................................................................... 11
1.1.

TỔNG QUAN VỀ LẬP TRÌNH THIẾT BỊ DI ĐỘNG..........................................11

1.2.

LẬP TRÌNH ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG PHONEGAP ...............14

1.2.1.

Giới thiệu về framework PHONEGAP .............................................................14

1.2.1.1.

PhoneGap là gì? ...................................................................................................14

1.2.1.2.

Đơi nét lịch sử PhoneGap ..................................................................................15


1.2.1.3.

Tại sao lại sử dụng PhoneGap .........................................................................16

1.2.2.

Cách thức hoạt động PhoneGap......................................................................17

1.2.3.

Thiết lập cài đặt PHONEGAP cho Android project bằng Eclipse ............20

1.2.3.1.

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

1.2.3.2.

Tạo mới chương trình.........................................................................................21

1.2.3.3.

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

1.3.

GIỚI THIỆU KIỂU DỮ LIỆU JSON .....................................................................27

1.4.


LẬP TRÌNH WCF SERVICE.................................................................................29

1.4.1.

Windows Communication Foundation là gì?................................................29

1.4.2.

Tại sao lại sử dụng WCF ....................................................................................29

1.4.3.

Kiến trúc WCF .......................................................................................................30

CHƯƠNG II ......................................................................................................... 34
PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................................. 34
2.1.

PHÂN TÍCH YÊU CẦU ..........................................................................................34

2.1.1.

Quy trình nghiệp vụ .............................................................................................34

2.1.2.

Đặt tả yêu cầu........................................................................................................34

2.1.3.


Yêu cầu hệ thống .................................................................................................35

2.1.3.1.

Yêu cầu chức năng ..............................................................................................35

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

1


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng
2.1.3.2.

Yêu cầu nền tảng hệ thống ................................................................................36

2.2.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG....................................................................36

2.2.1.

Biểu đồ use case ..................................................................................................36

2.2.1.1.

Xác định các tác nhân .........................................................................................36

2.2.1.2.


Xác định use case ................................................................................................36

2.2.1.3.

Biểu đồ use case ..................................................................................................37

2.2.1.3.1.

Biểu đồ use case tổng quan của tác nhân khách hàng .............................37

2.2.1.3.2.

Biểu đồ use case tổng quan của tác nhân người quản lý ........................38

2.2.1.3.3.

Biểu đồ use case đặt tiệc ...................................................................................39

2.2.1.3.4.

Biểu đồ use case xử lý món đã chọn..............................................................40

2.2.1.3.5.

Biểu đồ use case quản lý món..........................................................................40

2.2.2.

Biểu đồ tuần tự .....................................................................................................41


2.2.2.1.

Biểu đồ tuần tự đặt tiệc ......................................................................................41

2.2.2.2.

Biểu đồ tuần tự đăng ký .....................................................................................42

2.2.3.

Biểu đồ hoạt động đặt tiệc.................................................................................43

2.2.4.

Biểu đồ lớp.............................................................................................................44

2.2.5.

Biểu đồ triển khai .................................................................................................45

2.2.6.

Thiết kế cơ sở dữ liệu .........................................................................................47

2.2.6.1.

Cấu trúc bảng dữ liệu .........................................................................................47

2.2.6.2.


Mơ hình quan hệ thực thể ..................................................................................50

CHƯƠNG III ........................................................................................................ 51
CÀI ĐẶT ỨNG DỤNG ........................................................................................ 51
3.1.

GIAO DIỆN ỨNG DỤNG .......................................................................................51

3.1.1.

Danh sách loại món .............................................................................................51

3.1.2.

Danh sách món .....................................................................................................52

3.1.3.

Món chi tiết.............................................................................................................53

3.1.4.

Danh sách món đã chọn.....................................................................................54

3.2.

MỘT SỐ ĐOẠN MÃ CHÍNH .................................................................................55

3.2.1.


Interface RestauranceBook ...............................................................................55

3.2.2.

Hiển thị danh sách loại món ..............................................................................56

3.2.3.

Thêm món...............................................................................................................57

3.2.4.

Đặt tiệc ....................................................................................................................57

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ........................................................... 60
DANH MỤC TÀI LIỆU THAM KHẢO ............................................................... 61

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

2


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

LỜI CẢM ƠN
Đầu tiên, tôi xin bày tỏ lịng biết ơn chân thành đến các thầy cơ Trường ĐẠI
HỌC DUY TÂN đã hết lòng giảng dạy và truyền đạt kiến thức trong q trình học
tập.
Tơi xin chân thành cảm ơn Th.S Nguyễn Thị Minh Thi đã tận tình hướng dẫn
tơi hồn thành đồ án tốt nghiệp này.

Xin chân thành cảm ơn gia đình, người thân và bạn bè đã động viên giúp đỡ
tôi trong cuộc sống và học tập cũng như đóng góp ý kiến cho tơi trong suốt quá
trình thực hiện đề tài.
Cuối cùng xin gửi đến tất cả mọi nguời lời chúc sức khỏe, hạnh phúc và
thành đạt.
Trân trọng cảm ơn!

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

3


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

LỜI CAM ĐOAN
Tôi xin cam đoan:
1. Những nội dung trong báo cáo này là do tôi thực hiện dưới sự hướng dẫn
trực tiếp của ThS. NGUYỄN THỊ MINH THI.
2. Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng tên
tác giả, tên cơng trình, thời gian, địa điểm cơng bố.
3. Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá,
tơi xin chịu hồn tồn trách nhiệm.

Tác giả
Phạm Văn Hùng

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

4



Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

LỜI MỞ ĐẦU
1. ĐẶT VẤN ĐỀ
Hiện nay, tại khắp các tỉnh thành trên cả nước, đặc biệt là các thành phố lớn,
nhà hàng, quán ăn mọc lên ngày càng nhiều, mở rộng quy mô về số lượng lẫn chất
lượng, đáp ứng nhu cầu của người dân.
Ngày càng có nhiều cá nhân, cơ quan, doanh nghiệp có nhu cầu đặt tiệc trong
các dịp lễ, họp mặt, tiệc tùng. Tuy nhiên họ khơng có thời gian để đến trực tiếp tìm
hiểu thơng tin của nhà hàng về cảnh quan, thực đơn, giá cả…
Vì vậy, các nhà hàng muốn cung cấp dịch vụ tốt hơn cho khách hàng, đồng
thời quảng bá hình ảnh của nhà hàng đến khách hàng trong thành phố, cũng như
khách du lịch khắp đất nước.
ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG QUẢN LÝ ĐẶT TIỆC NHÀ
HÀNG sẽ giúp cho khách hàng có thể đặt tiệc nhanh chóng, mọi lúc, mọi nơi với
thiết bị di động, đồng thời giúp nhà hàng quảng bá rộng rãi hình ảnh của mình.
Đặc biệt ứng dụng xây dựng trên nền tảng PhoneGap, một trong những
framework di động đa nền tảng. PhoneGap sẽ giúp cho người phát triển xây dựng
ứng dụng 1 lần và chạy trên mọi nền tảng như: IOS, Android, Windows Phone,
Symbian, RIM..., và khách hàng có thể sử dụng ứng dụng với nhiều chủng loại thiết
bị di động khác nhau.

2. MỤC TIÊU ĐỀ TÀI
-

Nghiên cứu cơng nghệ lập trình ứng dụng di động đa nền PhoneGap.

-


Nghiên cứu công nghệ thành phần phân tán mới nhất của .NET là WCF
(Windows Communication Foundation) service, xây dựng các ứng dụng
hướng dịch vụ trong môi trường phân tán.

-

Xây dựng ứng dụng di động đa nền tảng đặt tiệc nhà hàng.
o Quảng bá hình ảnh doanh nghiệp.
o Giúp khách hàng tìm hiểu thơng tin nhà hàng về món ăn, giá cả...
o Khách hàng có thể đặt tiệc mọi nơi thông qua thiết bị di động.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

5


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

o Giúp việc quản lý đặt tiệc trong nhà hàng thuận tiện, nhanh chóng,
chính xác hơn.

3. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
-

Nghiên cứu công nghệ lập trình ứng dụng di động đa nền tảng PhoneGap,
xây dựng ứng dụng di động chạy trên nhiều hệ điều hành và nhiều chủng loại
thiết bị di động.

-


Nghiên cứu công nghệ thành phần phân tán WCF Service, cung cấp các chức
năng truy cập cơ sở dữ liệu từ xa ở server

-

Từ đó xây dựng ứng dụng đặt tiệc nhà hàng thơng qua thiết bị di động.

4. PHẠM VI NGHIÊN CỨU
-

Nghiên cứu cơng nghệ lập trình ứng dụng di động đa nền tảng PhoneGap.

-

Nghiên cứu công nghệ thành phần phân tán WCF Service

-

Xây dựng ứng dụng di động đa nền tảng đặt tiệc nhà hàng

-

Và dịch vụ phân tán WCF Service tại server gồm các chức năng chính sau:
o Tìm xem danh sách loại món.
o Tìm xem danh sách món.
o Đặt tiệc.
o Xem danh sách món đã đặt.
o Cập nhật danh sách món đã đặt.
o Đăng nhập thơng tin khách hàng.
o Đăng ký mới thơng tin khách hàng.


5. PHƯƠNG PHÁP NGHIÊN CỨU
-

Tìm hiểu tài liệu trên Internet, phân tích, tổng hợp tài liệu.

-

Kết hợp xây dựng ứng dụng thực tiễn.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

6


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

6. CÔNG NGHỆ VÀ MÔI TRƯỜNG PHÁT TRIỂN
-

Ứng dụng server: .NET Framework, C#, WCF Service, MS SQL Server
2005, IDE Visual studio 2010.

-

Ứng dụng client: PhoneGap Framework, JQuery, JSON, IDE Eclipse.

7. BỐ CỤC BÁO CÁO
Báo cáo gồm 3 chương:
Chương 1: CƠ SỞ LÝ THUYẾT

Trình bày tổng quan về lập trình thiết bị di động, lập trình ứng dụng di động
đa nền tảng PhoneGap, giới thiệu kiểu đối tượng JSON và lập trình dịch vụ phân tán
WCF Service.
Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Trình bày phân tích u cầu, phân tích, thiết kế hệ thống theo UML gồm các
biểu đồ: use case, tuần tự, hoạt động, biểu đồ lớp, biểu đồ triển khai và phân tích mơ
hình quan hệ thực thể và thiết kế cơ sở dữ liệu quan hệ
Chương 3: CÀI ĐẶT ỨNG DỤNG
Trình bày một số giao diện và một số đoạn mã chính của ứng dụng.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

7


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

DANH MỤC TỪ VIẾT TẮT
STT Từ viết tắt
1
ADT
2
API
CLR
3
4
CPU
5
CSS
6

DOM
7
HTML
8
IDE
9
JDE
10 JS
11 JSON
12 OS
13 RIM
14 SDK
15 SOAP
16 UML
17 WCF
18 XML

Tiếng anh
Android Development Tools
Application Programming Interface
Common Language Runtime
Central Processing Unit
Cascading Style Sheets
Document Object Model
HyperText Markup Language
Integrated Development Environment
Java Development Kit
JavaScript
JavaScript Object Notation
Operating System

Research In Motion
Software Development Kit
Simple Object Access Protocol
Unified Modeling Language
Windows Communication Foundation
Extensible Markup Language

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

8


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

DANH MỤC BẢNG BIỂU
STT

Tên hình vẽ

1

Bảng 1: Bảng Hang

2

Bảng 2: Bảng LoaiHang

3

Bảng 3: Bảng DonViTinh


4

Bảng 4: Bảng PhieuDatTiec

5

Bảng 5: Bảng PhieuDatTiecCT

6

Bảng 6: Bảng KhachHang

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

9


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

DANH MỤC HÌNH VẼ
STT
1

Tên hình vẽ
Hình 1.1: Sơ đồ tổng quan về cách thức hoạt động của
PhoneGap

2


Hình 1.2: So sánh ưu điểm của việc sử dụng PhoneGap với Java

3

Hình 1.3: Kiến trúc bên trong 1 ứng dụng PhoneGap

4

Hình 1.4: Cách thức ứng dụng PhoneGap tương tác với thiết bị

5

Hình 1.5: Bảng các hàm APIs được hỗ trợ cho từng nền tảng
trong PhoneGap

6

Hình 1.6: Cách thiết lập các thơng số để tạo 1 Android Project

7

Hình 1.7: Cách thêm thư viện cordova-1.9.0.jar vào project

8

Hình 1.8: Cách chỉnh sửa bên trong file java chính

9

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


10

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

11

Hình 1.11: Kiến trúc WCF

12

Hình 2.1: Use case của tác nhân khách hàng

13

Hình 2.2: Use case của tác nhân người quản lý

14

Hình 2.3: Biểu đồ use case đặt tiệc

15

Hình 2.4: Biểu đồ use case xử lý món đã chọn

16

Hình 2.5: Biểu đồ use case quản lý món

17


Hình 2.6: Biểu đồ tuần tự chức năng đặt tiệc

18

Hình 2.7: Biểu đồ tuần tự chức năng đăng ký

19

Hình 2.8: Biều đồ hoạt động chức năng đặt tiệc

20

Hình 2.9: Biểu đồ lớp

21

Hình 2.10: Biểu đồ triển khai

22

Hình 2.11: Mơ hình quan hệ dữ liệu

23

Hình 3.1: Giao diện danh sách loại món

24

Hình 3.2: Giao diện danh sách món


25

Hình 3.3: Giao diện món chi tiết

26

Hình 3.4: Giao diện đặt tiệc

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

10


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

CHƯƠNG I
CƠ SỞ LÝ THUYẾT
1.1.

TỔNG QUAN VỀ LẬP TRÌNH THIẾT BỊ DI ĐỘNG
Đ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 hồn tồn thói quen cũng như hành vi của con người. Trong
tương lai, thiết bị di động sẽ trở thành phương tiện giao tiếp và làm việc chủ yếu
của con người. Và phần cốt lõi để tạo ra sức hấp dẫn từ những chiếc Smartphone
chính là hệ điều hành và các ứng dụng mà chúng đang chạy.

Hiện tại, hệ điều hành – dịng thiết bị hiện có:
-

Symbian – Nokia, Motorola, Ericsson:
o Ra đời sớm nhất trên thế giới.
o Tiền thân là Psion (David Potter 1980).
o 6/1998 Symbian Nokia 6160.
o Số lượng thiết bị lớn nhất.
o Hệ điều hành: phím chức năng, màn hình cảm ứng.
o Ngơn ngữ: C/C++, J2ME.

-

RIM – Research In Motion
o Phần cứng hạn chế.
o Là một hệ điều hành Smartphone linh hoạt, uyển chuyển.
o Thành lập năm 1995, đến 8/1998 RIM Inter@active Pager.
o Hệ điều hành: Trackball, phím chức năng, bàn phím rộng nhiều phím
bấm.
o Ngơn ngữ: Java và bộ JDE.

-

Windows Mobile
o Hãng Microsoft
o Windows cho thiết bị di động.
o 8/2000 Windows mobile dành cho PC pocket.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119


11


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

o Nền tảng từ nhân của Windows CE 3.0.
o Hệ điều hành: phím bấm, cảm ứng.
o Ngơn ngữ: bộ ngôn ngữ trong Visual Studio.
-

IOS
o Hãng Apple
o Thay đổi hoàn toàn cách sử dụng điện thoại di động truyền thống.
o Là sản phẩm chiến lược của Apple.
o 1/2007: IPhone 2G chính thức ra mắt.
o Từ nhân của MacOS và Cocoa Touch.
o Ứng dụng rất phong phú và đa dạng.
o Hệ điều hành: cảm ứng đa điểm.
o Ngôn ngữ: Object C và IPhone SDK.

-

Android – Google
o Được phát triển bởi Google từ 2005.
o Mơi trường mở hồn tồn.
o 10/2008: T-Mobile G1 (HTC – dream).
o Hạt nhân Linux 2.6 với các open libraries.
o Hệ điều hành: Trackball, cảm ứng, phím bấm.
o Ngôn ngữ: Java, Android SDK.


-

Bada – Samsung
o Được phát triển bởi tập đoàn Samsung (Hàn Quốc).
o

Đang được Samsung quảng bá rộng.

o 2/2010: ra mắt tại Barcelona (Hội nghị di động thế giới).
o Rất có khả năng là nền tảng mạnh về đồ họa và game.
o Hệ điều hành: Phím bấm, cảm ứng.
o Ngôn ngữ: C++, Bada SDK.
-

MeeGo – Nokia
o Rất mới từ Nokia, coi như thế hệ tiếp theo của Symbian.
o Nhân từ Linux.

-

Các nền tảng khác.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

12


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

o Ngồi ra, cịn có các nền tảng framework hỗ trợ tạo ứng dụng di động

có thể chạy trên nhiều nền tảng, nhiều dòng thiết bị di động như là
PhoneGap, Unity, Ramp, Grapple, Open Plug, Rhomobile,
Titanium…
o Limo Foundation.
o Palm webOS.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

13


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

1.2.

LẬP TRÌNH ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG PHONEGAP

1.2.1. Giới thiệu về framework PHONEGAP
Như trình bày ở phần trên chúng ta thấ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, tranh
đua nhau tạo ra các nền tảng hệ điều hành di động của riêng mình. Do đó PhoneGap
ra đời với mục đích “viết một lần và chạy khắp nơi – tương thích với hầu hết các
nền tảng hệ điều hành di động hiện tại”, đã nhận được sự đóng góp của rất nhiều tổ
chức và cộng đồng công nghệ lớn. PhoneGap giúp giảm nhẹ gánh nặng - cần phải
nắm bắt và hiểu rõ về các công nghệ bên trong mỗi nền tảng – đối với nhà lập trình
trong việc tạo ra ứng dụng có thể chạy trên đa nền tảng di động. Giờ đây, với sự hỗ
trợ đắc lực của PhoneGap, nhà lập trình chỉ cần nắm bắt và chuyên sâu về 1 cơng
nghệ duy nhất, đó là cơng nghệ nền Web(bao gồm HTML5, Javascript, CSS).

1.2.1.1. PhoneGap là gì?

PhoneGap là 1 framework mã nguồn mở dùng cho việc xây dựng các ứng
dụng đa nền tảng bằng cách sử dụng các công nghệ web tiêu chuẩn như HTML,
CSS, Javascripts. Kiểu ứng dụng mobile dạng này được gọi là hybrid application
(ứng dụng lai).

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

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

14


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

PhoneGap hiện tại hỗ trợ các nền tảng mobile sau:
-

Apple IOS (gồm cả IPhone và IPad):

-

Google Android :

-

HP/Palm webOS:

-

Microsoft Windows Phone 7:

us/home/getting_started

-

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

-

RIM BlackBerry (phiên bản BlackBerry 4.6 và mới hơn):
www.blackberry.com/developers

-

Samsung bada:

Bắt đầu từ phiên bản 2.2.0 trở lên, thì PhoneGap hỗ trợ nền tảng hệ điều hành mới
nhất của Microsoft là Windows 8.

1.2.1.2. Đôi nét lịch sử PhoneGap
PhoneGap là một dự án mã nguồn mở hồn tồn miễn phí của Nitobi giúp
việc phát triển ứng dụng dễ dàng hơn đối với mọi hệ điều hành. Phát triển đầu tiên
tại một sự kiện IPhoneDevCamp ở San Francisco, PhoneGap tiếp tục giành chiến
thắng giải thưởng Choice Award tại O’Reilly Media 2009 ở hội nghị Web 2.0 tháng
4 năm 2009 ( 4 sản phẩm khác cũng dành chiến thắng bao gồm: 80 legs, zealLog
Bantam Network, Dubmenow) mở ra hướng đi mới cho các nhà phát triển ứng dụng
web. Kể từ đó có 600.000 lượt tải về và hàng ngàn ứng dụng được phát triển dựa
trên PhoneGap. Apple đã xác nhận rằng Framework này đã được phê duyệt. Tuy
được tạo ra bởi Nitobi nhưng đằng sau PhoneGap là sự đóng góp của rất nhiều
người trong những tổ chức lớn như IBM, RIM và Microsoft. PhoneGap cũng khẳng
định rằng: Họ có một cộng đồng phát triển hấp đẫn, hoạt động mở, minh bạch và

hợp tác.
Framework PhoneGap được sử dụng bởi một số nền tảng ứng dụng di động
như Worklight, Convertigo và appMobi như là xương sống của động cơ phát triển
điện thoại di động dành cho khách hàng của họ. Adobe chính thức cơng bố việc
mua lại của Nitobi Software (nhà phát triển ban đầu) vào tháng 10 năm 2011, trùng

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

15


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

khớp với điều đó các mã PhoneGap đã được sử dụng cho Apache Software
Foundation để bắt đầu một dự án mới được gọi là Apache Cordova.
Ở các phiên bản PhoneGap về trước, luôn bắt buộc nhà lập trình khi tạo ra
các ứng dụng IOS thì cần phải có 1 máy tính chạy Mac của Apple, hay nhà lập trình
muốn tạo ra các ứng dụng cho Windows 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 nhà lập trình tải lên mã nguồn của họ tới 1 hệ thống biên dịch đám mây
và nhờ đó biên dịch ra các ứng dụng tương ứng cho từng nền tảng hệ điều hành
được hỗ trợ.
1.2.1.3. Tại sao lại sử dụng PhoneGap
Nếu là một lập trình viên hay những người làm việc trong lĩnh vực tin học
hẳn còn nhớ đến thuật ngữ: “Write one, run any where” xuất hiện và trở thành một
cơn sốt vào ngày 23/5/1995. Ngày mà cơng ty máy tính Sun Microsystems đã giới
thiệu một cơng cụ lập trình mới – ngơn ngữ Java. Java ra đời với một sứ mệnh khắc
phục khó khăn trong việc chuyển đổi các ứng dụng viết trên hệ điều hành OS và các
hệ xử lý CPU khác nhau. Do vậy, người lập trình chỉ cần viết ứng dụng bằng Java
đúng một lần, sau đó có thể sử dụng ứng dụng này trên các hệ điều hành khác nhau

như Windows95, WindowsNT, Mac OS, Unix,... theo phương châm: “viết một lần,
sử dụng ở bất kỳ đâu”.

Hình 1.2: So sánh ưu điểm của việc sử dụng PhoneGap với Java.
Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

16


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

1.2.2. Cách thức hoạt động PhoneGap
Như đã nói đến từ trước, PhoneGap cho phép 1 nhà phát triển phần mềm xây
dựng các ứng dụng native applications cho các thiết bị mobile (bao gồm cả
Smartphone s và tablets) bằng cách sử dụng các công nghệ web như HTML, CSS,
JavaScript. 1 nhà phát triển phần mềm đóng gói 1 ứng dụng nền web (web
application) thành 1 ứng dụng native application được hỗ trợ cho từng nền tảng
mobile dựa vào PhoneGap package.

Hình 1.3: Kiến trúc bên trong 1 ứng dụng PhoneGap.

Trong phạm vi của ứng dụng native application, thì giao diện làm việc của
ứng dụng về bản chất bao gồm duy nhất 1 màn hình và nó cũng giống như 1 khung
nhìn web view chiếm dụng tồ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 khởi tạo của ứng dụng (thơng thường là trang
index.html nhưng nhà lập trình có thể dễ dàng thay đổi thành trang khác) vào trong
khung nhìn web view và sau đó chuyển điều khiển tới web view để cho phép người
dùng tương tác với ứng dụng web application. Khi người dùng tương tác với nội
dung content của ứng dụng (web application), thì các liên kết links hay các mã
JavaScript trong phạm vi ứng dụng đó có thể tải các nội dung content khác từ trong

phạm vi các files tài nguyên được đóng gói với ứng dụng này, hay có thể truy cập
thơng qua mạng network và tải các nội dung content từ 1 website hay từ 1 server về.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

17


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

Đối với 1 vài nền tảng mobile giống như bada, Symbian và webOS thì ứng dụng
native application về bản chất chính là 1 ứng dụng web application.

Định nghĩa webview
1 web view là 1 thành phần của ứng dụng native application đượ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 nó giống như 1
thành phần có khả năng tiếp cận theo hướng lập trình, được đóng gói vào bên trong
trình duyệt web browser có sẵn trong các thiết bị mobile.
Ví dụ như: trên nền tảng BlackBerry, được thực thi xử lý như 1 đối tượng
object (bằng cách sử dụng net.rim.device.api.browser.field2). Hay như trên
Android, được thực thi bằng cách sử dụng 1 khung nhìn webview
(android.webkit.WebView) và trên IOS, thì nó là 1 UI WebView (System/ Library/
Frameworks/ UIKit.framework).
Ứ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 được chạy bên trong 1 trình duyệt web
của mobile. Nó có thể mở các trang HTML khác (theo cả 2 cách: 1 cách địa phương
trực tiếp trên thiết bị hay theo cách mở từ 1 web server đặt ở 1 nơi nào đó).
JavaScript nhúng vào bên trong các files mã nguồn của ứng dụng chịu trách nhiệm
thực thi xử lý các điều kiện logic, ẩn hiện nội dung content nếu cần, chơi các media

files, mở các trang pages mới, thực thi các tính tốn, và nhận về nội dung content từ
server hay gửi nội dung content tới server. Giao diện của ứng dụng được tạo thành
từ HTML và CSS.
1 trình duyệt web mobile thơng thường khơng có khả năng truy cập vào các
thành phần sâu bên trong thiết bị giống như những ứng dụng chạy trực tiếp trên
thiết bị (như Contacts, Accelerometer, Camera, Compass, Microphone, …). Để có
thể xây dựng 1 ứng dụng mobile thú vị thì ứng dụng đó cần phải có khả năng truy
cập vào các thành phần bên trong của thiết bị, vượt ra ngồ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

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

18


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

Hình 1.4: Cách thức ứng dụng PhoneGap tương tác với thiết bị.

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 thực thi xử lý 1 tính năng trong 1 ứng dụng 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.

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119


19


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

Hình 1.5: Bảng các hàm APIs được hỗ trợ cho từng nền tảng trong PhoneGap.

1.2.3. Thiết lập cài đặt PHONEGAP cho Android project bằng Eclipse
1.2.3.1. Yêu cầu cài đặt
-

Eclipse: Tải về và cài đặt phần mềm Eclipse IDE tại đường dẫn sau:
/>
-

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

PhoneGap Framework: Tại bản PhoneGap mới nhất tại đường dẫn sau:
/>
Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

20


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng


1.2.3.2. Tạo mới chương trình
-

Mở Eclipse, chọn New > Android Project

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 ln là 2.2 và 2.3. Cho những dịng máy màn hình lớn (tablet) có thể
dùng 4.0+

Hình 1.6: Cách thiết lập các thông số để tạo 1 Android Project.
-

Trong thư mục gốc của project, tạo 2 thư mục:
o /libs
o Assets/www

-

Copy file cordova-1.9.0.js từ thư mục Cordova đã download đến thư mục
assets/www

-

Sao chép file cordova-1.9.0.jar từ thư mục Cordova đã download đến thư
mục /libs

-


Sao chép thư mục xml từ thư mục Cordova đã download đến thư mục /res

-

Thêm thư viện cordova-1.9.0.jar vào project:

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

21


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

Right click trên thư mục /libs > Build Paths/ > Configure Build Path.... Sau đó
thêm thư viện cordova-1.9.0.jar vào project.

Hình 1.7: Cách thêm thư viện cordova-1.9.0.jar vào project.
-

Chỉnh sửa file main java trong thư mục src:
o Thêm import org.apache.cordova.*;
o Thay đổi extend từ Activity thành DroidGap
o Thay thế dòng setContentView() bởi
super.loadUrl("file:///android_asset/www/index.html");

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

22



Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

Hình 1.8: Cách chỉnh sửa bên trong file java chính.

-

Right click file AndroidManifest.xml -> Open With > XML:

-

Dán đoạn bên dưới giữa 2 thẻ <uses-sdk.../> và <application.../>:

android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
android:name="android.permission.ACCESS_COARSE_LOCATION" />
android:name="android.permission.ACCESS_FINE_LOCATION" />
android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMAN
DS" />

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119


23


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
/>
-

Thêm đoạn sau vào thẻ <activity>:
android:configChanges="orientation|keyboardHidden|screenSize"

-

Tập tin AndroidManifest.xml như sau:


Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

24


Ứng dụng di động đa nền tảng PhoneGap quản lý đặt tiệc nhà hàng

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

-

Tạo file index.html trong thư mục assets/www. Dán đoạn code bên dưới
vào:
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova1.9.0.js"></script>

Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119

25


×