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

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ác giả

Lê Quang Huy

1


LỜI CẢM ƠN

Trƣớc tiên, tôi xin chân thành cảm ơn tất cả quý thầy cô trƣờng Đại học Bách
Khoa Hà Nội nói chung và Viện Công Nghệ Thông Tin và Truyền Thông nói riêng
đã truyền đạt cho tôi những kiến thức hữu ích làm cơ sở để giúp tôi thực hiện tốt
luận văn này.
Với lòng kính trọng và biết ơn, tôi xin đƣợc bảy tỏ lòng cảm ơn tới TS. Vũ
Văn Thiệu – Bộ môn Khoa học máy tính - Viện Công Nghệ Thông Tin và Truyền
Thông, Đại học Bách Khoa Hà Nội đã khuyến khích và rất tận tình hƣớng dẫn, chỉ
bảo tôi trong suốt quá trình thực hiện luận văn.
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ệ Phầ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.

2


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
3


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

4


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

5


DANH MỤC KÝ HIỆU, CHỮ VIẾT TẮT
Chữ viết đầy đầy đủ

Chữ viết tắt
HTML

Hyper Text Markup Language

XML

Extensible Markup Language

CSS

Cascading Style Sheet

API

Application Programming Interface

GWT

Google Web Toolkit

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

XHR

XMLHttpRequest

mGWT

Mobile Google Web Toolkit

GAE

Google App Engine

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

6


GPU

Graphic Proccessing Unit

OS

Operating System

JVM

Java Virtual Machine

7


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

8

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

9

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

10


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. Trong 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.

11


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.
2. Mục đích của đề tài
- Nắm vững kiến thúc liên quan đến công nghệ phát triển ứng dụng đa nền
tảng nhƣ GWT, GAE, PhoneGap.
- Triển khai ứng dụng hỗ trợ trong giáo dục: ngƣời dạy sẽ sử dụng điện thoại
Andorid có but Spen, thao tác trên màn hình nhƣ viết chữ, vẽ hình, tẩy, nói; ngƣời
học thể thể sử dụng điện thoại với các nền tảng phong phú nhƣ Android, iOS, …,
hoặc trên máy tính.
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à PhoneGap để 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.

12

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

13


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

14


ả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.

15


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.

16


- 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

17

- 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.

18


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.
Tổng quan

1.2.1.

- Google Web Toolkit (GWT) là một bộ công cụ phép ngƣời dùng có thể xây
dựng và tối ƣu hóa các ứng dụng trên các trình duyệt phức tạp. Mục tiêu của GWT
là cho phép phát triển các ứng dụng web hiệu năng cao mà không cần sự hiểu biết
sâu sắc về XMLHttpRequest, JavsScript, và CSS.
- GWT đƣợc sử dụng cho nhiều sản phẩm của Google bao gồm AdWords,
AdSense, Flights, Hotel Finder, Offers, Wallet, và Blogger. Đây là công cụ mã
nguồn mở, hoàn toàn miễn phí, và đƣợc hàng nghìn lập trình viên trên thế giới sử
dụng.
- 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

19


ƣ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.

20


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ƣ
Android, iPhone.
1.2.4.

Hƣớng dẫn chi tiết cho GWT

1.2.4.1. Tổng quan

Hƣớng dẫn này sẽ giới thiệu các khái niệm chính, các công c ụ, và các thƣ viện
chúng ta sẽ gặp trong quá trình xây dựng các ứng dụng web bằng GWT. Các chủ đề
đƣợc đề cập theo thứ tự: tổ chức dự án, lập trình, sửa lỗi, kiểm thử, tối ƣu, phát
hành ứng dụng web.
Hƣớng dẫn bao gồm hai phần chính sau:
 Các bƣớc xây dựng:

21


- 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.

22


- 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,
hỗ trợ những ngƣời khiếm thị.
- Internationalization: Mô tả tập hợp linh hoạt các công c ụ giúp toàn cầu hóa
ứng dụng và thƣ viện.
- Communicate with a Server: Mô tả một vài phƣơng thức giao tiếp với máy
chủ thông qua HTTP.
- Test with JUnit: Mô tả cách kiểm thử ứng dụng với Junit và công cụ kiểm tra
mã Emma.
- 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ể

23


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:
<html>
<head>

<meta name='gwt:property' content='locale=en_UK'>
<!-- Stylesheets are optional, but useful -->
<link rel="stylesheet" href="Calendar.css">
<!-- Titles are optional, but useful -->
<title>Calendar App</title>
</head>
<body>