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 cơng trình nghiên cứu thân dƣới hƣớng dẫn TS Vũ Văn Thiệu – Viện Công Nghệ Thông Tin Truyền Thông – Đại học Bách Khoa Hà Nội Các số liệu, kết nêu luận văn trung thực chƣa đƣợc công bố cơng trình khác Tác giả luận văn xin chịu trách nhiệm nghiên cứu Tác giả Lê Quang Huy LỜI CẢM ƠN Trƣớc tiên, xin chân thành cảm ơn tất quý thầy trƣờng Đại học Bách Khoa Hà Nội nói chung Viện Công Nghệ Thông Tin Truyền Thông nói riêng truyền đạt cho tơi kiến thức hữu ích làm sở để giúp tơi thực tốt luận văn Với lịng kính trọng 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 Truyền Thơng, Đại học Bách Khoa Hà Nội khuyến khích tận tình hƣớng dẫn, bảo tơi suốt q trình thực 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 mơn Cơng Nghệ Phần Mềm – Viện Công Nghệ Thông Tin Truyền Thông, Đại học Bách Khoa Hà Nội Nhờ có quan tâm bảo ý kiến đóng góp quý báu Thầy giúp tơi hồn thành luận văn Tôi xin cảm ơn bạn đồng nghiệp công ty Samsung Electronics Việt Nam tạo điều kiện để tơi học tập nghiên cứu Cuối tơi xin chân thành c ảm ơn gia đình, bạn bè quan tâm, động viên, chia sẻ, giúp đỡ tơi suốt q trình học tập, nghiên cứu, hoàn thành luận văn MỤC LỤC DANH MỤC KÝ HIỆU, CHỮ VIẾT TẮT .6 DANH MỤC BẢNG DANH MỤC HÌNH MỞ ĐẦU 11 Lý chọn đề tài 11 Mục đích đề tài 12 Đối tƣợng nghiên cứu 12 CHƢƠNG 1: CÁC CÔNG NGHỆ HỖ TRỢ 13 1.1 Tổng quan hệ điều hành Android bút Spen 13 1.1.1 Hệ điều hành Android 13 1.1.2 Tìm hiểu bút Spen 16 1.2 Tìm hiểu Google Web Toolkit 19 1.2.1 Tổng quan .19 1.2.2 Các thành phần 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 Cordova/PhoneGap 32 1.3.1 Giới thiệu chung Cordova/PhoneGap 33 1.3.2 Kiến trúc PhoneGap 34 1.3.3 Các thành phần PhoneGap 35 1.3.4 Các hƣớng phát triển Cordova .35 1.3.5 Các 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 Cordova .41 1.4 Tìm hiểu Google App Engine 41 1.4.1 Tổng quan 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 chức GAE .43 1.4.4 Ƣu điểm, nhƣợc điểm GAE 45 CHƢƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 46 2.1 Mô tả toán .46 2.1.1 Mơ hình đề xuất .46 2.1.2 Mục tiêu 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 đồ 55 2.3.3 Thiết kế cấu trúc sở 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 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 tệp tin lúc hiển thị 67 3.3 Thử nghiệm đá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 đề tồn 77 C Hƣớng phát triển luận văn 77 TÀI LIỆU THAM KHẢO 79 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 cấu trúc liệu đƣợc dùng để truy suất liệu dạng HTML 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: tiền xử lý văn lệnh Java JSON JavaScript Object Notation GPS Global Positioning System GPU Graphic Proccessing Unit OS Operating System JVM Java Virtual Machine DANH MỤC B ẢNG Bảng 1.1 Các thành phần nằm thƣ mục src .27 Bảng 1.2 Các thành phần nằm thƣ mục war .28 Bảng 1.3 Các mô đun dự án GWT .29 Bảng 3.1 Kết kiểm thử giao diện 68 Bảng 3.2 Kết kiểm thử tính .69 Bảng 3.3 Kết kiểm thử giao diện ứng dụng web 69 Bảng 3.4 Kết kiểm thử tính ứng dụng web 70 Bảng 3.5 Kết thử nghiệm dung lƣợng 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 bật Pen SDK .17 Hình 1.4 Nhận diện hình vẽ 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ơng thức tốn học 19 Hình 1.7 Các thành phần 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 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 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 use case quản lý tài khoản 51 Hình 2.4 Phân rã mức use case quản lý 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ý giảng 54 Hình 2.7 Biểu đồ đăng nhập 55 Hình 2.8 Biểu đồ đổi mật 55 Hình 2.9 Biểu đồ đăng ký 56 Hình 2.10 Biểu đồ thêm giảng 56 Hình 2.11 Biểu đồ xem giảng 57 Hình 2.12 Biểu đồ xóa giảng .57 Hình 2.13 Bảng sở liệu ngƣời dùng 58 Hình 2.14 Bảng sở liệu giảng 58 Hình 2.15 Bảng sở liệu điểm 58 Hình 2.16 Bảng sở liệu nét vẽ .59 Hình 2.17 Bảng sở liệu trang .59 Hình 2.18 Các luồng giao diện 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 giảng .61 Hình 2.22 Giao diện tạo giảng 61 Hình 2.23 Giao diện xem lạ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 gi ảng 72 Hình 3.5 Màn hình đặt tựa đề giảng 73 Hình 3.6 Màn hình chọn xem 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 giảng xem lại giảng 74 Hình 3.9 Giao diện đăng nhập web 75 Hình 3.10 Giao diện đăng ký web 75 Hình 3.12 Giao diện danh sách giảng web 76 10 ] }, … ] } Một giảng bao gồm tập hợp nét Mỗi nét bao gồm tên để phân biệt nét bút, hay nét tẩy; tập hợp điểm Mỗi điểm chứa thông tin thời gian, tọa độ x tọa độ y Dựa vào liệu lƣu, ta hiển thị lại giống với ngƣời dùng viết hình Các trƣờng liệu đƣợc lƣu dƣới dạng tối giản để đảm bảo dung lƣợng lƣu trữ nhỏ 3.2.2 Quá trình ghi lại thao tác viết Quá trình ghi lại thao tác tay gồm bƣớc sau: - Ngƣời dùng ấn nút start để bắt đầu trình tạo giảng - Quá trình ghi âm đƣợc thực đồng thời - Tại thời điểm chạm đầu tiên, ghi nhận nét vẽ đầu tiên, lần nhấc bút lên chuyển sang nét vẽ thứ hai - Với nét vẽ, ngƣời dùng di chuyển bút hình, hệ thống lƣu lại tọa độ, khoảng thời gian hai điểm Khoảng thời gian phụ thuộc vào tốc độ vẽ ngƣời dùng - Các nét vẽ đƣợc lƣu vào stack, ngƣời dùng chọn undo, hệ thống xóa khỏi hình nét vẽ gần Khi ngƣời dùng chọn redo, hệ thống lấy nét vẽ gần vừa bị xóa lệnh undo - Với liệu thu thập đƣợc trên, hệ thống dễ dàng tái lại đƣợc xác nét vẽ ngƣời dùng - Khi ngƣời ngƣời dùng ấn nút upload, hệ thống kết thúc trình theo dõi thao tác viết tay ngƣời dùng, đồng thời kết thúc ghi âm, lƣu thành hai tệp tin riêng biệt đƣa liệu thơng tin ngƣời dùng lên server 3.2.3 Q trình hiển thị lại thao tác viết Sau liệu đƣợc tải gồm hai tệp tin âm json Quá trình tái lại thao tác ngƣời dùng với tệp tin json đƣợc thực theo lƣu đồ Hình 3.1 65 Begin Read and set deviceWidth, deviceHeight p←0; p ←p+1 - End p< numP + Read page[p] i←0 i ←i+1 - i