Nghiên cứu công nghệ phát triển ứng dụng đa nền tảng và áp dụng vào dịch vụ hỗ trợ giáo dục

- Kết hợp GWT và P honeGap để xây dựng một dự án có thể triển khai trên nhiều nền tảng khác nhau như Android, iOS, … - Nghiên cứu GAE, công nghệ điện toán đám mây của Google... CHƯƠNG 1

LỜI CAM ĐOAN

Tôi – Lê Quang Huy, học viên lớp Cao học 2013B-CNTT2 Trường Đại học Bách Khoa Hà Nội – cam kết Luận văn này là công trình nghiên cứu của bản thân tôi dưới sự hướng dẫn của TS Vũ Văn Thiệu – Viện Công Nghệ Thông Tin và Truyền Thông – Đại học Bách Khoa Hà Nội Các số liệu, kết quả nêu trong luận văn là trung thực và chưa từng được ai công bố trong bất kỳ công trình nào khác

Tác giả luận văn xin chịu trách nhiệm về nghiên cứu của mình

Tôi xin gửi lời biết ơn sâu sắc đến TS Nguyễn Thanh Hùng – Phó Trưởng bộ môn Công Nghệ P hần Mềm – Viện Công Nghệ Thông Tin và Truyền Thông, Đại học Bách Khoa Hà Nội Nhờ có sự quan tâm chỉ bảo và những ý kiến đóng góp quý báu của Thầy đã giúp tôi có thể hoàn thành luận văn này

Tôi cũng xin cảm ơn các bạn đồng nghiệp ở công ty Samsung Electronics Việt Nam đã tạo điều kiện để tôi có thể học tập và nghiên cứu

Cuối cùng tôi xin chân thành c ảm ơn gia đình, bạn bè đã quan tâm, động viên, chia sẻ, và giúp đỡ tôi trong suốt quá trình học tập, nghiên c ứu, và hoàn thành luận văn này

MỤC LỤC

DANH MỤC KÝ HIỆU, CHỮ VIẾT TẮT 6

DANH MỤC BẢNG 8

DANH MỤC HÌNH 9

MỞ ĐẦU 11

1 Lý do chọn đề tài 11

2 Mục đích c ủa đề tài 12

3 Đối tượng nghiên cứu 12

CHƯƠNG 1: CÁC CÔNG NGHỆ HỖ TRỢ 13

1.1 Tổ ng quan về hệ điều hành Android và bút Spen 13

1.1.1 Hệ điều hành Android 13

1.1.2 Tìm hiểu về bút Spen 16

1.2 Tìm hiểu về Google Web Toolkit 19

1.2.1 Tổng quan 19

1.2.2 Các thành phần trong GWT 20

1.2.3 Phát triển ứng dụng với GWT 20

1.2.4 Hướng dẫn chi tiết cho GWT 21

1.3 Tìm hiểu về Cordova/PhoneGap 32

1.3.1 Giới thiệu chung về Cordova/PhoneGap 33

1.3.2 Kiến trúc PhoneGap 34

1.3.3 Các thành phần cơ bản của PhoneGap 35

1.3.4 Các hướng phát triển Cordova 35

1.3.5 Các nền tảng hỗ trợ Cordova 36

1.3.6 Phát triển ứng dụng với Cordova 36

1.3.7 Ưu nhược điểm của Cordova 41

1.4 Tìm hiểu về Google App Engine .41

1.4.1 Tổng quan về Google App Engine 41

1.4.2 Mô hình kiến trúc hoạt động GAE 42

1.4.3 Các thành phần và chức năng GAE 43

1.4.4 Ưu điểm, nhược điểm của GAE 45

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 46

2.1 Mô tả bài toán 46

2.1.1 Mô hình đề xuất 46

2.1.2 Mục tiêu c ủa hệ thống 47

2.1.3 Yêu cầu hệ thống 48

2.1.4 Sơ đồ hoạt động hệ thống 49

2.2 Phân tích hệ thống 50

2.2.1 Biểu đồ Use case .50

2.2.2 Đặc tả Use case 52

2.3 Thiết kế hệ thống 54

2.3.1 Thiết kế biểu đồ lớp 54

2.3.2 Thiết kế biểu đồ tuần tự 55

2.3.3 Thiết kế cấu trúc cơ sở dữ liệu 58

2.3.4 Thiết kế giao diện 59

CHƯƠNG 3: CÀI ĐẶT VÀ THỬ NGHIỆM 63

3.1 Yêu c ầu hệ thống 63

3.1.1 Môi trường cài đặt 63

3.1.2 Môi trường sử dụng 63

3.2 Cài đ ặt chương trình 64

3.2.1 Cấu trúc tập tin ghi lại thao tác trên màn hình 64

3.2.2 Quá trình ghi lại thao tác viết 65

3.2.3 Quá trình hiển thị lại thao tác viết 65

3.2.4 Cài đ ặt máy chủ 67

3.2.5 Tính đồng bộ giữa các tệp tin trong lúc hiển thị 67

3.3 Thử nghiệm và đánh giá hệ thống 68

3.3.1 Thử nghiệm hệ thống 68

3.3.2 Đánh giá hệ thống 70

3.3.3 Một số hình ảnh ứng dụng 71

A Kết luận 77

B Các vấn đề còn tồn tại 77

C Hướng phát triển của luận văn 77

TÀI LIỆU THAM KHẢO .79

DANH MỤC KÝ HIỆU, CHỮ VIẾT TẮT

HTML Hyper Text Markup Language

XML Extensible Markup Language

API Application Programming Interface

SDK Software Development Kit

AJAX Asynchronous JavaScript and XML

DOM Document Object Mode: Mô hình đối tƣợng tài liệu có dạng

một cây cấu trúc dữ liệu đƣợc dùng để truy suất dữ liệu dạng HTML và XML

mGWT Mobile Google Web Toolkit

IDE Integrated Development Environment

Java bytecode Mã Java trung gian

JSP Java Server Pages: bộ tiền xử lý văn lệnh Java

JSON JavaScript Object Notation

GPS Global Positioning System

GPU Graphic Proccessing Unit

DANH MỤC B ẢNG

Bảng 1.1 Các thành phần nằm trong thƣ mục src 27

Bảng 1.2 Các thành phần nằm trong thƣ mục war 28

Bảng 1.3 Các mô đun trong dự án GWT 29

Bảng 3.1 Kết quả kiểm thử giao diện 68

Bảng 3.2 Kết quả kiểm thử các tính năng 69

Bảng 3.3 Kết quả kiểm thử giao diện ứng dụng web 69

Bảng 3.4 Kết quả kiểm thử các tính năng ứng dụng web 70

Bảng 3.5 Kết quả thử nghiệm dung lƣợng bài giảng 70

DANH MỤC HÌNH

Hình 1.1 Kiến trúc hệ điều hành Android 14

Hình 1.2 Kiến trúc Pen SDK 16

Hình 1.3 Các tính năng nổi bật của Pen SDK 17

Hình 1.4 Nhận diện các hình vẽ cơ bản 18

Hình 1.5 Tìm kiếm với chữ viết tay 18

Hình 1.6 Nhận diện các công thức toán học 19

Hình 1.7 Các thành phần của dự án GWT 26

Hình 1.8 Kiến trúc PhoneGap 34

Hình 1.9 Sơ đồ hoạt động PhoneGap 34

Hình 1.10 Các nền tảng hỗ trợ 36

Hình 1.11 Kiến trúc Google App Engine .42

Hình 2.1 Kiến trúc hệ thống 46

Hình 2.2 Sơ đồ hoạt động của hệ thống 49

Hình 2.3 Biểu đồ Use case tổng quan 50

Hình 2.3 Phân rã mức 2 use case quản lý tài khoản 51

Hình 2.4 Phân rã mức 2 use case quản lý bài giảng 51

Hình 2.5 Biểu đồ lớp quản lý người dùng 54

Hình 2.6 Biểu đồ lớp quản lý bài giảng 54

Hình 2.7 Biểu đồ tuần tự đăng nhập 55

Hình 2.8 Biểu đồ tuần tự đổi mật khẩu 55

Hình 2.9 Biểu đồ tuần tự đăng ký 56

Hình 2.10 Biểu đồ tuần tự thêm bài giảng 56

Hình 2.11 Biểu đồ tuần tự xem bài giảng 57

Hình 2.12 Biểu đồ tuần tự xóa bài giảng 57

Hình 2.13 Bảng cơ sở dữ liệu người dùng 58

Hình 2.14 Bảng cơ sở dữ liệu bài giảng 58

Hình 2.15 Bảng cơ sở dữ liệu điểm 58

Hình 2.16 Bảng cơ sở dữ liệu các nét vẽ 59

Hình 2.17 Bảng cơ sở dữ liệu các trang 59

Hình 2.18 Các luồng giao diện chính 59

Hình 2.19 Giao diện đăng nhập 60

Hình 2.20 Giao diện đăng ký 60

Hình 2.21 Giao diện danh sách các bài gi ảng 61

Hình 2.22 Giao diện tạo bài giảng mới 61

Hình 2.23 Giao diện xem lại bài giảng 62

Hình 2.24 Giao diện cài đặt 62

Hình 3.1 Lưu đồ hiển thị thao tác viết tay 66

Hình 3.2 Màn hình đăng nhập 71

Hình 3.3 Màn hình đăng ký thành viên 72

Hình 3.4 Màn hình danh sách bài gi ảng 72

Hình 3.5 Màn hình đặt tựa đề bài giảng 73

Hình 3.6 Màn hình chọn xem bài giảng 73

Hình 3.7 Màn hình đăng xuất 74

Hình 3.8 Màn hình tạo bài giảng và xem lại bài giảng 74

Hình 3.9 Giao diện đăng nhập trên web 75

Hình 3.10 Giao diện đăng ký trên web 75

Hình 3.12 Giao diện danh sách bài giảng trên web 76

MỞ ĐẦU

1 Lý do chọn đề tài

Ngày nay việc sử dụng CNTT để hỗ trợ trong giáo dục được đặt lên hàng đầu Nhiều mô hình được áp dụng giúp việc học tập trở nên thuận tiện hơn Trong đó mô hình các lớp học trực tuyến đang được áp dụng rất rộng rãi Các khóa học trực tuyến cũng được triển khai rộng rãi hơn, trao đổi thông tin giữa người dạy và người học cần được thực hiện dễ dàng và tiện lợi Có nhiều dạng tài liệu hỗ trợ việc học trực tuyến như quay phim ghi l ại hình ảnh thầy giáo dạy, sử dụng tệp tin có các hình ảnh động,…Tuy nhiên, phương pháp truyền thống này có nhược điểm là giáo viên sẽ mất nhiều thời gian để chuẩn bị các bài giảng, mất nhiều chi phí để đầu tư các thiết

bị, các bài giảng tạo ra sẽ có dung lượng lớn, dẫn đến gặp khó khăn trong quá trình lưu trữ cũng như truyền tải Để khắc phục những nhược điểm trên, chúng tôi đề xuất một phương án: ghi lại thao tác viết trên màn hình và giọng nói của người dạy và hiển thị lại đúng các nét vẽ đó, điều này sẽ giúp cho người học dễ dàng tiếp thu được kiến thức hơn, người dạy tạo ra bài giảng một cách nhanh chóng hơn Hơn nữa, khi học sinh, sinh viên đưa ra câu hỏi, giáo viên chỉ cần thao tác viết, vẽ trên màn hình, sau đó gửi lên máy chủ, học sinh có thể xem được lời giải đáp một cách trực quan, nhanh chóng

Vì vậy, việc đề xuất một mô hình giúp tái hiện lại thao tác viết tay c ủa người dạy cùng với ghi âm lời nói giúp người học có thể dễ dàng hiểu hơn có ý nghĩa thực tiễn cao Tro ng luận văn này tôi chọn đề tài “Nghiên cứu công nghệ phát triển ứng dụng đa nền tảng và áp dụng vào dịch vụ hỗ trợ giáo dục”

Mô hình chúng tôi đề xuất bao gồm hai phần:

- Phần ghi lại thao tác viết tay: yêu cầu tốc độ cao, ghi lại chi tiết nét vẽ của người dạy, bao gồm chữ, số, các hình vẽ đơn giản Để đáp ứng được các yêu cầu đó, phần này sẽ được triển khai trên thiết bị Android sử dụng bút Spen Phương pháp này đáp ứng được yêu cầu về hiệu năng, giúp ghi lại chi tiết các nét trên màn hình

Lời nói của người dạy cũng được ghi âm đồng thời Dạng dữ liệu này có dung lượng nhỏ, đáp ứng được yêu cầu lưu trữ cũng như truyền tải trên Internet

- Phần người học: xây dựng ứng dụng đa nền tảng, người học có thể dùng một trong nhiều nền tảng Ứng dụng sẽ tái tạo thao tác viết tay của người dạy thông qua các đối tượng JSON nhận về từ máy chủ, đồng thời phát lại âm thanh

Các giáo viên có thể truyền đạt kiến thức cho học sinh một cách trực quan hơn Học sinh có thể sử dụng các nền tảng khác nhau như Android, iOS, Wi ndows Phone…., để thấy được các thao tác viết tay, giọng nói của giáo viên Ứng dụng rất phù hợp cho các lớp học trực tuyến Mô hình giải quyết được ba vấn đề chính:

- Học sinh có thể xem được bài giảng, lời giải đáp của giáo viên trên nhiều phương tiện như máy tính, các loại điện thoại khác nhau

- Giáo viên có thể truyền đạt kiến thực một cách trực quan, tiện lợi

- Dung lượng bài giảng nhỏ, thuận tiện cho việc lưu trữ và truyền tải

3 Đối tượng nghiên cứu

- Nghiên cứu công nghệ Spen, thao tác với chiếc bút của dòng điện thoại

Galaxy Note của công ty Samsung

- Nghiên cứu công nghệ GWT xây dựng ứng dụng web

- Nghiên cứu công nghệ PhoneGap cho phép các ứng dụng web can thiệp sâu

vào tầng thấp hơn như các c ảm biến, trạng thái mạng kết nối

- Kết hợp GWT và P honeGap để xây dựng một dự án có thể triển khai trên

nhiều nền tảng khác nhau như Android, iOS, …

- Nghiên cứu GAE, công nghệ điện toán đám mây của Google

CHƯƠNG 1: CÁC CÔNG NGHỆ HỖ TRỢ

Trong chương này, tác giả trình bày các công nghệ để xây dựng ứng dụng đa nền tảng và công nghệ thao tác viết trên màn hình ở các thiết bị hỗ trợ bút Các công nghệ cần nghiên cứu bao gồm:

- Bút Spen và hệ điều hành Android

- Công nghệ GWT xây dựng ứng dụng web

- Công nghệ PhoneGap xây dựng ứng dụng đa nền tảng

- Google App Engine giúp phát triển và lưu trữ các ứng dụng

1.1 Tổng quan về hệ điều hành Android và bút Spen

1.1.1 Hệ điều hành Android

1.1.1.1 Khái niệm hệ điều hành Android

Android là một nền tảng mở miễn phí do Google phát triển dựa trên nền tảng của Linux cho các thiết bị di động Android bao gồm một hệ điều hành, tập thư viện API hỗ trợ từ Library đến framework, và cả tầng ứng dụng Bất

kỳ một hãng sản xuất phần cứng nào cũng đều có thể tự do sử dụng nền tảng Android cho thiết bị của mình và có thể tùy chỉnh để tạo ra phiên bản phù hợp hơn cho phần cứng, miễn là các thiết bị ấy đáp ứng được các tiêu chuẩn cơ bản do Google đặt ra (có cảm ứng chạm, GPS, 3G, ) Để hiểu rõ hơn về hệ điều hành Android, mời đọc giả đọc tài liệu [6] và [10]

1.1.1.2 Kiến trúc Android

Hình 1.1 Kiến trúc hệ điều hành Android

Hệ điều hành Android bao gồm các tầng sau:

Tầng Application: chứa một số ứng dụng cơ bản nhƣ nhắn tin, gọi điện, danh

bạ, … Ngoài ra còn chứa các ứng dụng khác đƣợc cài đặt thêm vào máy

Tầng Application Framework: cung cấp một nền tảng ứng dụng mở, cho phép các nhà phát triển sử dụng các ứng dụng này nhƣ định vị vị trí, quản lý các cuộc gọi, các thông báo, thanh trạng thái, …

Android Runtime: Hệ điều hành Android tích hợp sẵn một tập hợp các thƣ viện cốt lõi cung cấp hầu hết các chức năng có sẵn trong các thƣ viện lõi của ngôn ngữ lập trình Java Mọi ứng dụng c ủa Android chạy trên một tiến trình của riêng nó cùng với một thể hiện của máy ảo Dalvik Máy ảo Dalvik thực tế là một biến thể của máy ảo Java đƣợc sửa đổi, bổ sung các công nghệ đặc trƣng của thiết bị di động

Nó đƣợc xây dựng với mục đích làm cho các thiết bị di động có thể chạy nhiều máy

ảo một cách hiệu quả Trước khi thực thi, bất kì ứng dụng Android nào cũng được chuyển thành tệp tin thực thi với định dạng nén Dalvik Executable (.dex) Định dạng này được thiết kế để phù hợp với các thiết bị hạn chế về bộ nhớ cũng như tốc

độ xử lý Ngoài ra máy ảo Dalvik sử dụng bộ nhân Linux để cung cấp các tính năng như phân luồng, quản lý bộ nhớ

Libraries: chứa các thư viện về cơ sở dữ liệu, đồ họa, đa phương tiện, …

Linux Kernel: Hệ điều hành Android được xây dựng trên bộ nhân Linux 2.6 cho những dịch vụ hệ thống cốt lõi như: bảo mật, quản lý bộ nhớ, quản lý các tiến trình Bộ nhân này làm nhiệm vụ như một lớp trung gian kết nối phần cứng thiết bị

và phần ứng dụng

1.1.1.3 Các thành phần cơ bản của một ứng dụng Android

Activity: là thành phần tối quan trọng của bất kỳ một ứng dụng Android nào Thuật ngữ Activity chỉ một việc mà người dùng có thể thực hiện trong một ứng dụng Android Một activity có thể mang nhiều dạng khác nhau: một cửa sổ toàn màn hình (full screen window), một cửa sổ floating (với windowsIsFloating) hay nằm lồng bên trong 1 activity khác (với ActivityGroup)

BroadcastReceiver: là một cơ chế khá đơn giản nhưng mang hiệu quả rất cao trong Android BroadcastReceiver cho phép người dùng có thể bắt được các sự kiện của hệ thống, ho ặc các sự kiện của người dùng tự định nghĩa Việc gửi đi các sự kiện sẽ chỉ đơn giản là do hệ thống tự động phát đi, hoặc được gửi đi bởi người dùng

Service: là một thành phần của ứng dụng, thể hiện mong muốn ứng dụng thực hiện các hành động trong khi không tương tác với người dùng hoặc cung c ấp chức năng cho các ứng dụng khác sử dụng Nói một cách đơn giản, service là các tác vụ (task) chạy ngầm dưới hệ thố ng nhằm thực hiện một nhiệm vụ nào đó

Content Provider: cung cấp một cơ chế quan trọng cho việc chia sẽ dữ liệu trong toàn hệ thống Android Ý nghĩa c ủa provider là cung cấp giao diện mở cho tất

cả các ứng dụng, là nơi lưu trữ và cung cấp cách truy cập dữ liệu do các ứng dụng tạo nên Đây là cách duy nhất mà các ứng dụng có thể chia sẻ dữ liệu của nhau

1.1.2 Tìm hiểu về bút Spen

1.1.2.1 Tổng quan về bút Spen

- Pen SDK cho phép các l ập trình viên xây dựng các ứng dụng tương tác với người dùng thông qua các thao tác viết tay như bút Spen, ngón tay một cách nhanh hơn, chính xác hơn Pen SDK cung c ấp nhiều tính năng hơn so với các thao thác thông thường, nó có thể tính toán được lực ấn trong quá trình viết hay vẽ của người dùng, làm cho người dùng c ảm nhận như đang viết trên chiếc bút thật

- Pen SDK 4.x được cải thiện về hiệu suất và thêm nhiều tính năng mới Hiệu suất tổng thể được cải thiện với việc sử dụng phần cứng như NEON ho ặc GPU, đồng thời giảm điện năng tiêu thụ Định dạng hộp văn bản được cải tiến, giúp cung cấp cho người dùng các dạng văn bản để chỉnh sửa Bổ sung các tính năng nhận diện giúp thao tác với các hình vẽ mà không cần truy c ập vào các menu

1.1.2.2 Kiến trúc Pen API

Hình 1.2 Kiến trúc Pen SDK

- Applications: các ứng dụng sử dụng Pen SDK

- View: quản lý thao tác đ ầu vào của người dùng

- UI Control: điều khiển các đối tượng trên màn hình (tỉ lệ, xoay, di chuyển, chọn)

- Setting: quản lý tùy chọn của người dùng sử dụng bút, tẩy, chữ

- Model: thành phần của Pen SDK để quản lý lịch sử việc thêm, xóa, lưu trữ

dữ liệu

- Plug-in: các plug-in cho Pen SDK

1.1.2.3 Các tính năng nổi bật của Pen SDK

- Chỉnh sửa nâng cao: Pen SDK cung cấp các tính năng cao cấp giúp chỉnh sửa các tài liệu một cách hiệu quả với chiếc bút trên màn hình tương đối nhỏ Các đối tượng cơ bản như nét chữ, hình vẽ có thể được chọn bằng một hình chữ nhật hoặc một nét vẽ khép kín Thuộc tính của các đối tượng lựa chọn có thể thay đổi với các chức năng như: ghép nhóm/tách nhóm, thay đổi thứ tự, màu sắc, kích thước

Hình 1.3 Các tính năng nổi bật của Pen SDK

- Nhận diện các hình vẽ cơ bản: Các hạn chế trên thiết bị di động như màn hình nhỏ, không có thiết bị vẽ chuyên dụng sẽ được khắc phục phần nào với tính năng nhận diện hình vẽ của Pen SDK Nó có thể tự động chuyển đổi đầu vào thô của người dùng thành những hình ảnh chính xác hơn Các hình ảnh đó có thể được thêm vào tài liệu, ho ặc được chỉnh sửa với nhiều tùy chọn khác

Hình 1.4 Nhận diện các hình vẽ cơ bản

- Nhận diện tổng quan: Pen SDK có thể chuyển đổi các nét vẽ thành các dữ liệu hữu dụng Bằng việc sử dụng nhận dạng chữ viết, Pen SDK giúp người dùng có thể tìm kiếm trên chữ viết tay

Hình 1.5 Tìm kiếm với chữ viết tay Pen SDK cũng có thể nhận diện các công thức toán học, giúp công thức toán học trông có vẻ đẹp hơn

Hình 1.6 Nhận diện các công thức toán học 1.1.2.4 Hạn chế

- Chỉ hỗ trợ các thiết bị Android 4.0 trở lên

- Một số tính năng không hỗ trợ đối với thiết bị không hỗ trợ bút Spen

1.2 Tìm hiểu về Google Web Toolkit

Độc giả có thể tìm hiểu chi tiết hơn về Google Web Toolkit ở tài liệu [2] và [11] Sau đây tác gi ả sẽ giới thiệu một số khái niệm cơ bản giúp độc giả có cái nhìn tổng quan hơn về Google Web Toolkit

- GWT SDK cung cấp một tập hợp các Java API và Widget Chúng cho phép viết các ứng dụng AJAX bằng Java, biên dịch chúng thành JavaScript một cách tối

ưu hóa, có thể chạy trên được tất cả các trình duyệt, bao gồm trình duyệt di động trên Android và iPhone

- Xây dựng các ứng dụng AJAX theo cách này đạt được hiệu năng cao là nhờ

sự trìu tượng ở mức độ cao c ủa các khái niệm phổ biến như thao tác với DOM, và truyền thông với XHR

- Bất cứ điều gì có thể làm với DOM và JavaScript, bao gồm cả việc tương tác với JavaScript viết tay, thì đều có thể thực hiện được với GWT

- Phiên bản mới nhất của GWT là 2.7.0

1.2.2 Các thành phần trong G WT

- GWT SDK chứa các thư viện Java API, trình biên dịch, và máy chủ phát triển Nó cho phép viết các ứng dụng phía client bằng Java và triển khai chúng như JavaScript

- Plugin cho Eclipse: cung cấp IDE hỗ trợ cho GWT và các dự án App Engine Các plugin giúp các lập trình viên tạo ra một trải nghiệm phong phú Nó tạo ra mã Ajax chất lượng cao bằng cách sử dụng GWT và triển khai các ứng dụng trên App Engine Các plugin này tập trung tạo ra các ứng dụng có tính logic cao, và là bộ công cụ đầu tiên tích hợp cho Google Cloud

1.2.3 Phát triển ứng dụng với GWT

1.2.3.1 Viết ứng dụng: GWT SDK cung cấp một tập hợp các lõi Java API và Widgets Chúng cho phép viết các ứng dụng AJAX bằng ngôn ngữ Java và biên dịch thành JavaScript với mức tối ưu cao, và có thể chạy trên tất cả các trình duyệt, bao gồm các trình duyệt cho di động như trên Android, iPhone

GWT không bị bó buộc với các widget có sẵn Bất cứ điều gì chúng ta có thể làm với DOM hay JavaScript, chúng ta có thể làm được bằng GWT, bao gồm cả thao tác viết tay với JavaScript

1.2.3.2 Debug

Chúng ta có thể tìm lỗi các ứng dụng AJAX trong IDE như trên các ứng dụng desktop Các plugin trong GWT sẽ là cầu nối giữa Java bytecode trong trình gỡ lỗi

và trình duyệt JavaScript

Nhờ các Plugin GWT, không c ần sự biên dịch các đoạn mã ra JavaScript để xem nó trong các trình duyệt Chúng ta có thể sử dụng chu trình sửa - cập nhật - xem với JavaScript, trong cùng một thời điểm có thể xem giá trị các biến, đặt các breakpoint, sử dụng các công cụ debug khác có s ẵn trong Java Trong chế độ phát triển, chúng ta có thể sử dụng các công c ụ như Firebug và Inspector như trong Java 1.2.3.3 Tối ưu hóa

GWT có hai công cụ mạnh mẽ để tạo ra các ứng dụng web một cách tối ưu hóa Trình biên dịch của GWT tối ưu hóa toàn diện các đoạn mã, loại bỏ các mã chết, tối ưu hóa các chuỗi, … Bằng cách thiết lập các điểm chia trong mã, GWT có thể chia thành nhiều phần JavaScript để tải về, chia nhỏ các ứng dụng lớn giúp thời gian khởi động nhanh hơn

Hiệu suất nghẽn cổ chai được hạn chế tối đa trong JavaScript Bố cục trình duyệt và CSS thường có những hiện tượng lạ, khó có thể chuẩn đoán được Speed Tracer là một tiện ích mở rộng của Chrome trong GWT, cho phép chuẩn đoán các vấn đề về hiệu năng trong trình duyệt

1.2.3.4 Chạy chương trình

Khi bạn sẵn sàng triển khai, GWT sẽ biên dịch các đoạn mã Java thành các đoạn mã JavaScript độc lập một cách tối ưu hóa Nó có thể chạy độc lập trên tất các các trình duyệt, cũng như trình duyệt trên các thiết bị dị dộng của các nền tảng như

Hướng dẫn bao gồm hai phần chính sau:

Các bước xây dựng:

- Create, build and run a GWT application: Tạo, xây dựng, sửa lỗi, biên dịch một ứng dụng

- Communicating with the server: Thêm một lệnh gọi không đồng bộ tới máy chủ web bằng cách sử dụng GWT RPC hoặc JSON, các đối tượng Java, và xử lý các ngoại lệ

- Internationalizing a GWT application: Chuyển giao diện người dùng sang ngôn ngữ khác

- Unit testing with JUnit: Thêm các đơn vị kiểm thử bằng cách sử dụng Junit

- Deploying to Google App Engine: Triển khai một ứng dụng lên Google App Engine

 Hướng dẫn cho lập trình viên:

- Organize Projects: Mô tả các quy ước để xác định các đoạn mã nào chạy trên máy khách, máy chủ, hoặc cả hai

- Compile & Debug: Mô tả quá trình phát triển và xây dựng

- Coding Basics: Mô tả các nguyên tác cơ bản của việc lập trình với GWT

- Build User Interfaces: Cách thức làm việc với các widget, bảng, DOM, sự kiện, CSS, giao diện người dùng, hình ảnh…

- HTML5 Feature Support: Mô tả GWT hỗ trợ HTML 5 với các tính năng như lưu trữ, hình ảnh, âm thanh, kéo và thả …

- Security for GWT Applications: Làm thế nào để các ứng dụng có khả năng chống lại các tấn công JavaScript

- Security: Safe HTML: Mô tả hướng dẫn lập trình tránh khỏi các class lớn của lỗ hổng Cross-Site-Scripting (XSS)

- Security: GWT RPC XSRF protection: Mô tả phương thức để chặn lỗ hổng Cross-Site Request Forgery (XSRF ho ặc CSRF) trong GWT RPCs

- MVP Framework: Ứng dụng mẫu và tài liệu về mô hình Activities, Places,

và EventBus

- RequestFactory: Hướng dẫn việc tạo ra các dịch vụ hướng dữ liệu sử dụng RequestFactory và lớp EntityProxy

- Logging: Mô tả làm thể nào để sinh ra các đoạn log c ủa phía client trong ứng dụng GWT

- Accessibility: Mô tả tính năng cho phép đọc những gì hiển thị trên màn hình,

- Deploy: Mô tả cách thức triển khai ứng dụng trên c ả hai phía client và server

- Optimize: Mô tả cách thức để cải thiện hiệu năng các ứng dụng GWT

- IE9 Support - Tips and Tricks: Hỗ trợ trình duyệt Internet Explorer 9

- Reference: Cung cấp tài liệu cho GWT và các thư viện, các kĩ thuật cụ thể để làm việc với GWT widgets

- FAQ: Các câu hỏi thường gặp

- Glossary: Các thuật ngữ trong GWT

1.2.4.2 Các nguyên tắc cơ bản trong lập trình GWT

Các dự án GWT có thể được tổ chức theo nhiều cách khác nhau Tuy nhiên khuyến khích tuân theo các quy ước cụ thể, nhằm mục đích dễ xác định đoạn mã được thiết kế chạy trên trình duyệt máy khách, máy chủ, hay cả hai

Phần này mô tả các nguyên tắc cơ bản để tổ chức dự án GWT giống như các quy ước đã được giới thiệu

- Trang chủ HTML: Các module GWT được lưu trữ trên một máy chủ web như là một tập hợp các tập tin JavaScript và tập tin liên quan Để chạy được các module này, nó phải được tải từ một số trang web Bất kỳ trang HTML có thể chứa một ứng dụng GWT thông qua một thẻ SCRIPT Trang HTML này được xem như

là một trang chủ của ứng dụng GWT Một trang chủ điển hình HTML c ủa một ứng dụng được viết từ đầu bằng GWT có thể không bao gồm bất kỳ nội dung nào có thể

nhìn thấy được Ví dụ dưới đây cho thấy làm thế nào để nhúng một ứng dụng GWT, ứng dụng này sẽ sử dụng toàn bộ cửa sổ trình duyệt:

<link rel="stylesheet" href="Calendar.css">

<! Titles are optional, but useful >

<! (the id must be exactly as shown) >

<iframe src="javascript:''" id=" gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

</body>

</html>

Lưu ý rằng phần thân của trang chứa chỉ một thẻ SCRIPT và một thẻ IFRAME Hãy để các ứng dụng GWT hiển thị các nội dung bên trong

GWT được thiết kế để dễ dàng thêm vào các chức năng cho các ứng dụng web với sự thay đổi nhỏ GWT cho phép mô đun của GWT có thể chọn lọc sau đó chèn các widget vào các vị trí cụ thể trong một trang HTML Để thực hiện điều này, GWT sử dụng thuộc tính id trong các thẻ HTML để xác định một định danh duy nhất để đính kèm các widgets vào phần tử HTML đó Ví dụ:

final Button button = new Button("Click me");

final Label label = new Label();

HTML Một trang HTML không phải là nội tĩnh Nó cũng có thể đƣợc tạo ra bởi một servlet, hoặc bằng một trang JSP

Các thành phần của dự án GWT:

- Standard Directory and Package Layout: các mục chuẩn và các gói

Hình 1.7 Các thành phần của dự án GWT

- Thƣ mục src: chứa các mã nguồn Java

- Thƣ mục war: ứng dụng web, chứa các tài nguyên tĩnh

- Thƣ mục test: (tùy chọn ) chứa JUnit để kiểm tra các đoạn mã

Trong gói src chứa một gói gốc và gói client của dự án

Nếu trong dự án chứa cả mã nguồn phía server, sẽ có một gói server, khác biệt với mã nguồn phía client

atable.public

Tài nguyên tĩnh của dự án, được tải bằng mã GWT Các tệp tin trong thư mục này được sao chép ra thư mục tương tự trong đầu ra của trình biên dịch GWT

GWT.getModuleBaseForStaticFiles() + "logo.gif"

atable.client

SchoolCalendarService.java

Mã nguồn Java phía server

Bảng 1.2 Các thành phần nằm trong thƣ mục war

DynaTable/war/ DynaTable.html Trang chủ HTML của ứng dụng

DynaTable/war/ DynaTable.css Chứa tệp tin CSS của ứng dụng

Sự lựa chọn script cho ứng dụng Đây

là script đƣợc tải từ trang chủ HTML để nạp vào các mô đun của GWT

gwt Các đơn vị cấu hình: Các đơn vị riêng lẻ của GWT đƣợc gọi là các mô đun Các mô đun đƣợc ghép với nhau và với tất các các thiết lập cầu hình c ần thiết cho

dự án GWT Các mô đun đƣợc định nghĩa trong XML và đƣợc đƣa vào gói phân cấp của dự án

- XML định nghĩa các mô đun: các mô đun được định nghĩa trong tệp tin XML với mở rộng gwt.xml Các tệp tin XML này nằm trong gói gốc của dự án Nếu sử dụng cấu trúc dự án tiêu chuẩn, tệp tin XML sẽ có dạng như sau:

Bảng 1.3 Các mô đun trong dự án GWT

User com.google.gwt.user.User User.gwt.xml Các tính năng cốt lõi

của GWT HTTP com.google.gwt.http.HTTP HTTP.gwt.xml Thư viện truyền thông

HTTP cấp thấp JSON com.google.gwt.json.JSON JSON.gwt.xml Tạo và phân tích

JSON JUnit com.google.gwt.junit.JUnit JUnit.gwt.xml Kiểm thử JUnit

XML com.google.gwt.xml.XML XML.gwt.xml Tạo và phân tích tài

XML Chrome com.google.gwt.user.theme

.dark.Dark

Dark.gwt.xml CSS và ảnh cho chủ

đề tối Standard com.google.gwt.user.theme

1.2.4.3 Xây dựng giao diện người dùng

Lớp giao diện người dùng của GWT cũng tương tự như Swing và SWT ngo ại trừ các widget được thực hiện bằng cách sử dụng HTML động chứ không phải bằng

đồ họa

Trong lập trình JavaScript truyền thống, các giao diện người dùng được tạo ra bằng cách thao tác với các DOM c ủa trình duyệt Trong khi GWT cung cấp quyền truy cập vào DOM của trình duyệt trực tiếp thông qua gói DOM, nó dễ dàng hơn là việc sử dụng các lớp từ hệ thống phân c ấp các widget Các lớp widget làm cho nó

dễ dàng để xây dựng giao diện một cách nhanh chóng trên t ất cả các trình duyệt

- Cross-Browser Support: sử dụng widget và vật liệu tổng hợp cho khả năng tương thích trình duyệt chéo

- Layout Using Panel: sử dụng các panel để xây dựng bố cục

- Widget: cung c ấp tính năng điều khiển các widget

- Create custom widget: tạo widget mới, widget tổng hợp hoặc các widget JavaScript gốc

- Cell widgets: làm việc với các widget, bảng, DOM, các sự kiện, CSS, khai báo giao diện và các hình ảnh

- Editor: cho phép dữ liệu được lưu trữ trên đối tượng đồ họa và ánh xạ đến một đồ thị của các trình biên tập

- Working with the DOM: khi c ần thiết, có thể thao tác trực tiếp với DOM của các trình duyệt

- Event and Handlers: xử lý các sự kiện của widget

- Working with CSS: tạo các phong cách của widget nhờ CSS

- Declarative UI with UiBinder: xây dựng cầu trúc widget DOM từ XML

- Bundling Image Resources: Tối ưu hóa hình ảnh tải bằng cách giảm số lượng yêu cầu của HTTP đối với các hình ảnh

1.2.4.4 Hỗ trợ HTML5

Đối với việc cập nhật danh sách các trình duyệt hỗ trợ các tính năng của HTML5, ta có thể sử dụng một trong những nguồn cung cấp khả năng tương thích trên web như trên trang web html5rocks

Các tính năng HTML được hỗ trợ bởi các thư viện GWT:

- Lưu trữ phía client, sử dụng lưu trữ cục bộ

- Các hiệu ứng sử dụng Canvas

- Sử dụng Audio widget

- Sử dụng Video widget

1.2.4.5 Kiểm thử với JUnit

Tạo ra các kịch bản kiểm thử là một phần quan trọng trong việc đảm bảo chất lượng của các ứng dụng Để hỗ trợ các lập trình viên trong quá trình kiểm thử, GWT cung c ấp một framework tích hợp giữa JUnit test và Emma GWT cho phép JUnit test hoạt động trong c ả hai chế độ phát triển và chế độ ứng dụng

1.2.4.6 Triển khai ứng dụng

Triển khai một ứng dụng GWT thật đơn giản và dễ dàng Trình biên dịch tạo

ra các tệp tin JavaScript và HTML, cùng với một số tài nguyên khác (css, hình ảnh

…) Để triển khai ứng dụng, cần phải đưa các tài nguyên này lên máy chủ web

- Triển khai trên máy chủ web: Triển khai một ứng dụng GWT lên máy chủ web rất đơn giản Chỉ cần sao chép các tập tin ứng dụng GWT tạo ra sau khi biên dịch và lưu trữ chúng trên máy chủ web Cần phải xây dựng mã phía server dựa vào một số hình thức khác nhau như: giao tiếp qua JSONP, làm việc với các JSON P hía server sẽ nhận và phân tích các yêu cầu HTTP thông qua GWT RequestBuilder, hoặc GWT RPC

- Triển khai trên một servlet container bằng RPC: Triển khai một ứng dụng GWT trên một container servlet cũng dễ dàng thực hiện Khi trình biên dịch GWT tạo ra một cấu trúc thư mục đã tuân theo các đặc điểm kĩ thuật Servlet 2.5 AP I, ta sao chép đầu ra của trình biên dịch GWT vào đường dẫn của servlet container như sau:

tập tin trong thƣ mục war, sau đó tải lên và triển khai ứng dụng sử dụng tiện ích appcfg:

<appengine_home_dir>/appcfg.sh update war

1.2.5 Ƣu điểm, nhƣợc điểm của GWT

1.2.5.1 Ƣu điểm

GWT có nhiều ƣu điểm, tuy nhiên có thể chia thành hai ƣu điểm chính sau:

- Sử dụng ngôn ngữ Java, do đó có thể sử dụng các IDE phổ biến nhƣ Eclipse, Netbeans Việc sử dụng chung ngôn ngữ, chung IDE để phát triển cho c ả phía server và client giúp lập trình viên không cần phải biết quá nhiều để có thể phát triển đƣợc ứng dụng

- Sử dụng công nghệ AJAX giúp cho việc tải lại một trang web một cách gọn nhẹ, giảm thiểu băng thông và tải trọng cho máy chủ Công nghệ AJAX giúp cho lập trình viên thoát khỏi ma trận các công nghệ khi viết các ứng dụng AJAX phức tạp Với GWT, bạn có thể phát triển và kiểm tra lỗi các ứng dụng AJAX bằng ngôn ngữ Java, sử dụng các công cụ phát triển Java tuỳ theo ý thích

Ngoài ra, GWT còn cung c ấp nhiều gói GUI, phù hợp với nhiều trình duyệt, nền tảng nhƣ Web, Android, iOS Hơn nữa, GWT biên dịch Java thành JavaScript một cách tối ƣu hóa, kết quả cuối cùng trả về cho client hoàn toàn là Javascript và HTML

1.3.1 Giới thiệu chung về Cordova/PhoneGap

Apache Cordova là một nền tảng mã nguồn mở để xây dựng các ứng dụng gốc

di động đa nền tảng bằng cách sử dụng HTML, CSS và JavaScript, nhằm tránh việc mỗi nền tảng sử dụng một ngôn ngữ lập trình khác nhau Các ứng dụng được thực thi trong một gói định sẵn với từng nền tảng dựa trên các API phù hợp để truy cập đến các cảm biến, các dữ liệu, trạng thái mạng kết nối của từng thiết bị

Apache Cordova là một tập hợp các API cho phép các ứng dụng di động có thể truy cập vào các chức năng gốc của thiết bị như máy ảnh, c ảm biến gia tốc, …

từ JavaScript Kết hợp với các UI FW như jQuery Mobile, Doja Mobile, Sencha Touch, chúng cho phép một ứng dụng điện thoại có thể được phát triển chỉ với HTML, CSS và JavaScript

Do các JavaScript API là nhất quán trên nhiều nền tảng của các thiết bị, và được xây dựng trên chuẩn web, các ứng dụng có thể được triển khai trên các nền tảng khác nhau với sự thay đổi nhỏ nhất

Các ứng dụng sử dụng Cordova vẫn được đóng gói như các ứng dụng thông thường tương ứng với từng nền tảng, và có thể được cài đặt từ kho ứng dụng tương ứng với nền tảng đó

Cordova hỗ trợ các nền tảng như iOS, Android, Blackberry,Windows Phone, PlamWebOS, Banda, và Symbian

Apache Cordova đã hoàn thành trong tháng 10 năm 2012 như là một dự án với mức độ cao nhất của Apache Software Foundation (ASF) Thông qua ASF, tương lai phát triển Cordova sẽ đảm bảo tính mở của việc quản lý các dự án Nó luôn miễn phí và là mã nguồn mở với giấy phép Apache phiên bản 2.0

Cordova phù hợp với các trường hợp:

- Lập trình viên di động muốn mở rộng ứng dụng ra các nền tảng khác mà không muốn thực hiện lại chúng với ngôn ngữ lập trình và công c ụ của nền tảng đó

- Lập trình viên ứng dụng chạy trên nền web muốn triển khai một ứng dụng Web đóng gói để phân phối trên các kho ứng dụng khác nhau

- Lập trình viên ứng dụng di động muốn trộn các thành phần ứng dụng gốc với WebView có thể truy c ập vào các tầng API, ho ặc muốn phát triển các giao diện Plugin giữa ứng dụng gốc và các thành phần WebView

1.3.2 Kiến trúc PhoneGap

Hình 1.8 Kiến trúc PhoneGap

Sơ đồ hoạt động PhoneGap:

Hình 1.9 Sơ đồ hoạt động PhoneGap

1.3.3 Các thành phần cơ bản của PhoneGap

- Config.xml: cung c ấp các thông tin về ứng dụng và các tham số ảnh hưởng đến cách thức hoạt động, ví dụ sự thay đổi khi thay đổi hướng thiết bị

- Index.html: các ứng dụng được thể hiện như một trang web, mặc định là tập tin có tên index.html, liên quan đến tất cả tài nguyên CSS, JavaScript, ảnh, dữ liệu

đa phương tiện, hay bất cứ tài nguyên nào thuộc về ứng dụng đó Các ứng dụng như

là các WebView bên trong gói ứng dụng được phân phối đến người dùng

- Cordova cho phép WebView cung c ấp các ứng dụng với toàn bộ giao diện người dùng Trên một số nền tảng, nó cũng có thể là một thành phần bên trong phần khác lớn hơn, ứng dụng lai có thể dung hợp giữa WebView với các thành phần của ứng dụng gốc

- Một giao diện Plugin là có sẵn cho Cordova, cho phép các thành phần gốc có thể giao tiếp với nhau Điều này cho phép bạn có thể gọi các đoạn mã gốc từ JavaScript Lý tưởng nhất là API JavaScript để các mã nguồn gốc nhất quán trên nhiều nền tảng Bạn có thể tìm thấy các Plugin của bên thứ ba và có thể sử dụng chúng trong ứng dụng c ủa bạn Bạn cũng có thể phát triển các Plugin Các Plugin rất cần thiết, chúng giúp kết nối Cordova với các thành phần gốc

1.3.4 Các hướng phát triển Cordova

- Cross-platform (CLI - Command-Line Interface): Triển khai các ứng dụng di động trên nhiều nền tảng nhất có thể Hướng phát triển này tập trung các tiện ích của Cordova, được gọi là Cordova CLI, được giới thiệu trong Cordova 3.0 CLI là một công c ụ bậc cao cho phép bạn xây dựng các dự án trên nhiều nền tảng một lúc CLI sao chép chung một tập hợp các thành phần của Web vào trong một thư mục con cho mỗi nền tảng, thay đổi chúng cho phù hợp với từng nền tảng, xây dựng các thư viện cho ứng dụng đó CLI cung cấp các giao diện chung để áp dụng các Plugin với các ứng dụng

- Platform-centered: Phát triển theo hướng này nếu bạn muốn tập trung vào việc xây dựng một ứng dụng cho một nền tảng duy nhất và có thể sửa đổi nó ở một mức độ thấp hơn

chúng trên các nền tảng khác nhau, và chạy trên các thiết bị giả lập hay thiết bị thực CLI là công c ụ chính để sử dụng cho định hướng Cross-platform Nếu không bạn có thể sử dụng CLI để khởi tạo dự án, sau đó chuyển sang SDK (Software Development Kit) tương ứng của nền tảng đó để tiếp tục phát triển

Cài đặt CLI: được phân phối như một gói NPM có thể sử dụng luôn mà không cần biên dịch Các bước để cài đặt bao gồm:

- Tải và cài đặt Node.js,

- Tải và cài đặt git client,

- Cài đặt Cordova bằng cách sử dụng tiện ích npm của Node.js

Thực hiện trên OS X và Linux:

$ sudo npm install –g cordova

Thực hiện trên Windows:

C:\>npm install –g cordova

Tùy chọn -g cordova để cài đặt trên chính thư mục đó, nếu không nó sẽ được cài đặt trong thư mục con node_modules

1.3.6.2 Tạo một ứng dụng mới

Sử dụng câu lệnh trên CLI

$ cordova create hello com.example.hello HelloWorld

- hello: thư mục chứa dự án cần tạo,

- com.example.hello: định danh c ủa dự án theo kiểu ngược của tên miền,

- HelloWorld: Tựa đề của ứng dụng, có thể sửa lại sau trong tệp tin config.xml

Để thêm các nền tảng, ta thực hiện các câu lệnh trong thư mục con “hello”:

$ cordova platform add ios

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

$ cordova platform add wp8

$ cordova platform add windows

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

Chúng ta có thể kiểm tra xem những nền tảng nào đã được thêm vào:

$ cordova platforms ls

Hoặc có thể xóa các nền tảng ra khỏi dự án:

$ cordova platform remove blackberry10

$ cordova platform rm amazon-fireos

$ cordova platform rm android

$ cordova build ios

1.3.6.4 Kiểm thử ứng dụng trên thiết bị mô phỏ ng ho ặc thiết bị thực

Để kiểm thử ứng dụng trên thiết bị mô phỏng, ta có thể sử dụng câu lệnh sau:

$ cordova emulate android

Trên các thiết bị thực ta sử dụng câu lệnh sau:

$ cordova run android

Chú ý, trước khi ta thực hiện các câu lệnh trên, ta cần phải cài đặt trước cho thiết bị muốn kiểm thử phụ thuộc vào nền tảng của thiết bị đó Với nền tảng Android và Amazon Fire OS, ta c ần phải bật tính năng USB debugging và cài đặt USB driver

Với phiên bản 3.0, khi t ạo một dự án Cordova, nó sẽ không chứa một plugin nào Bất kỳ một plugin nào cần, chúng ta đều phải thêm vào một cách rõ ràng Danh sách các Plugins kể cả của bên thứ ba có thể tìm thấy tại: http://plugins.cordova.io/npm/index.html Hoặc ta có thể tìm kiếm trên CLI với câu lệnh sau:

$ cordova plugin search bar code

com.phonegap.plugins.barcodescanner - Scans Barcodes

Để thêm các Plugin ta sử dụng câu lệnh sau:

- Thông tin cở bản của thiết bị:

$ cordova plugin add cordova-plugin-device

- Thông tin c ủa mạng và trạng thái pin:

$ cordova plugin add cordova-plugin-network-information

$ cordova plugin add cordova-plugin-battery-status

- Các cảm biến: cảm biến gia tốc, cảm biến la bàn, c ảm biến định vị:

$ cordova plugin add cordova-plugin-device-motion

$ cordova plugin add cordova-plugin-device-orientation

$ cordova plugin add cordova-plugin-geolocation

- Máy ảnh, máy quay phim:

$ cordova plugin add cordova-plugin-camera

$ cordova plugin add cordova-plugin-media-capture

$ cordova plugin add cordova-plugin-media

- Truy cập các tệp tin trên thiết bị:

$ cordova plugin add cordova-plugin-file

$ cordova plugin add cordova-plugin-file-transfer

- Thông báo qua hộp tho ại ho ặc chế độ rung:

$ cordova plugin add cordova-plugin-dialogs

$ cordova plugin add cordova-plugin-vibration

- Danh bạ:

$ cordova plugin add cordova-plugin-contacts

- Toàn cầu hóa:

$ cordova plugin add cordova-plugin-globalization