3. Đối tƣợng nghiên cứu
2.3.4.Thiết kế giao diện
Hình 2.18. Các luồng giao diện chính Màn hình đăng nhập Màn hình đăng ký Màn hình danh sách các bài giảng Màn hình tạo bài giảng mới
Màn hình xem lại bài giảng Màn hình cài
đặt, thay đổi password
60 Hình 2.19. Giao diện đăng nhập
Hình 2.20. Giao diện đăng ký Đăng ký thành viên Email Password Đăng nhập Đăng ký thành viên Email Password Đăng nhập Email Password Đăng ký Họ và tên Xác nhận Password
61
Hình 2.21. Giao diện danh sách các bài gi ảng
Hình 2.22. Giao diện tạo bài giảng mới (Khu vực để vẽ) Các nút điều khiển Danh sách Tựa đề: Tác giả: Tựa đề: Tác giả: Tựa đề: Tác giả: Tựa đề: Tác giả: Tạo bài giảng mới Cập nhật danh sách
62 Hình 2.23. Giao diện xem lại bài giảng
Hình 2.24. Giao diện cài đặt (Khu vực hiển thị) Các nút điều khiển Cài đặt Cài đặt hiển thị Cài đặt ngôn ngữ Đổi mật khẩu Lƣu Hủy bỏ
63
CHƢƠNG 3: CÀI ĐẶT VÀ THỬ NGHIỆM
Trong chƣơng này, tác giả sẽ trình bày kết quả cài đặt và thử nghiệm ứng dụng trong thực tế, cũng nhƣ đánh giá ƣu nhƣợc điểm của hệ thống cùng với việc kiểm thử các tính năng c ủa hệ thố ng. Ngoài ra tác giả cũng xem xét lại các vấn đề còn tồn tại và đề xuất một số hƣớng phát triển của luận văn trong tƣơng lai.
3.1 Yêu cầu hệ thống 3.1.1.Môi trƣờng cài đặt 3.1.1.Môi trƣờng cài đặt
Hệ thống đã đƣợc cài đặt thành công nhờ các công cụ sau: - Hệ điều hành: Windows 7 Ultimate Service Pack 1. - Công cụ lập trình: Eclipse Mars.
- PenSDK 4.0.0.
- Google Web Toolkit SDK 2.7.0. - PhoneGap 2.9.1.
- Google App Engine SDK 1.9.26. - Goolge Plugin for Eclise.
- Apache Cordova 5.1.1.
Kết hợp với việc sử dụng ngôn ngữ lập trình chính là Java, đã giúp xây dựng hệ thố ng hoàn chỉnh, ho ạt động ổn định.
3.1.2.Môi trƣờng sử dụng
Ứng dụng Android:
- Hệ thố ng ho ạt động tối ƣu trên các thiết bị Android của hãng Samsung hỗ trợ bút Spen nhƣ: Galaxy Note 4, Galaxy Note 5, Galaxy Note 10.1, Galaxy Note Pro 12.2 … Ngoài ra hệ thống hoạt động ổn định trên các thiết bị điện thoại, máy tính bảng khác của hãng Samsung.
- Với các hãng còn lại, hệ thống chƣa hỗ trợ tính năng tạo bài giảng. Ứng dụng trên các nền tảng khác:
- Hệ thống hoạt động mƣợt mà.
64
3.2 Cài đặt chƣơng trình
3.2.1.Cấu trúc tập tin ghi lại thao tác trên màn hình
Để ghi lại thao tác viết của ngƣời dùng trên màn hình, tôi đã sử dụng cấu trúc JSON có dạng nhƣ sau: { "deviceWidth": 480, "deviceHeight": 703, "pageCount": 11, "page": [ { "s": [ { "n": 1, "c": "#0000ff", "w": 3.3, "p": [ { "t": 576, "x": 83, "y": 153" }, … ] }, { "n": 1, "c": "#0000ff", "w": 3.3, "p": [ … ] }, … ] }, { "s": [ { "n": 1, "c": "#0000ff", "w": 3.3, "p": [ ] },
65 ] }, … ] }
Một bài giảng bao gồm tập hợp các nét. Mỗi nét bao gồm tên để phân biệt nét bút, hay nét tẩy; và tập hợp các điểm. Mỗi điểm chứa thông tin về thời gian, tọa độ x và tọa độ y. Dựa vào những dữ liệu đã lƣu, ta có thể hiển thị lại giống với những gì ngƣời dùng đã viết trên màn hình. Các trƣờng dữ liệu đƣợc lƣu dƣới dạng tối giản nhất để đảm bảo dung lƣợng lƣu trữ nhỏ nhất. (adsbygoogle = window.adsbygoogle || []).push({});
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 các bƣớc sau:
- Ngƣời dùng ấn nút start để bắt đầu quá trình tạo bài giảng. - Quá trình ghi âm đƣợc thực hiện đồng thời.
- Tại thời điểm chạm đầu tiên, ghi nhận nét vẽ đầu tiên, mỗi lần nhấc bút lên chuyển sang nét vẽ thứ hai.
- Với mỗi một nét vẽ, khi ngƣời dùng di chuyển bút trên màn hình, hệ thống sẽ lƣu lại tọa độ, khoảng thời gian giữa hai điểm. Khoảng thời gian sẽ phụ thuộc vào tốc độ vẽ của ngƣời dùng.
- Các nét vẽ đƣợc lƣu vào trong một stack, khi ngƣời dùng chọn undo, hệ thống sẽ xóa khỏi màn hình nét vẽ gần nhất. Khi ngƣời dùng chọn redo, hệ thống sẽ lấy ra nét vẽ gần nhất vừa bị xóa bởi lệnh undo.
- Với những dữ liệu thu thập đƣợc ở trên, hệ thống dễ dàng tái hiện lại đƣợc chính xác nét vẽ ngƣời dùng.
- Khi ngƣời ngƣời dùng ấn nút upload, hệ thống sẽ kết thúc quá 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 và đƣa dữ liệu cùng thông tin ngƣời dùng lên server.
3.2.3.Quá trình hiển thị lại thao tác viết
Sau khi dữ liệu đƣợc tải về gồm hai tệp tin âm thanh và json. Quá trình tái hiện lại thao tác ngƣời dùng với tệp tin json đƣợc thực hiện theo lƣu đồ ở Hình 3.1.
66 Hình 3.1. Lƣu đồ hiển thị thao tác viết tay
Begin
Read and set deviceWidth, deviceHeight
p←0;
i ←i+1
j= 0
Wait time ms
Draw Line(lastx, lasty, x, y);lastx=x; lasty =y j= j+1 End + - - Read page[p] p< numP + + + Draw point(x,y) lastx=x; lasty =y Read point[j]: time, x, y
i<numS
Read stroke [i], set parameter
- - j=0 j< stroke[i].leng i←0 p ←p+1
67
3.2.4. Cài đặt máy chủ
Hệ thống triển khai theo mô hình Client – Server. Để đ ảm bảo việc giao tiếp với Client, tôi đã xây dựng một server sử dụng GAE. Dữ liệu đƣợc trao đổi giữa client và server thông qua giao thức HTTP. Để đảm bảo các tính năng c ủa client, một server đã đƣợc xây dựng có các API sau:
- http://smartlect.appspot.com/mobile?action=login: API giúp client có thể
đăng nhập để sử dụng hệ thống.
- http://smartlect.appspot.com/mobile?action=register: API giúp client đăng
ký thành viên mới, sau đó đăng nhập và sử dụng hệ thống.
- http://smartlect.appspot.com/uploadfile: API giúp client đăng tải dữ liệu lên
hệ thố ng. Trong hệ thống này, client sẽ tải lên server hai tệp tin json và audio. (adsbygoogle = window.adsbygoogle || []).push({});
- http://smartlect.appspot.com/mobile?action=lectures: API giúp client có thể
hiển thị đƣợc danh sách các tệp tin đã đƣợc tải lên hệ thống. Ngoài ra client có thể thêm tham số “&user_id=” để có thể chỉ hiển thị danh sách các tệp tin do ngƣời đăng nhập tải lên.
- http://smartlect.appspot.com/mobile?action=delete: API giúp client có thể
xóa đƣợc các tệp tin đã tải lên hệ thống.
- http://smartlect.appspot.com/mobile?action=change_password: API giúp
client có thể thay đổi mật khẩu sử dụng.
Việc sử dụng GAE với tài kho ản miễn phí, tốc độ và dung lƣợng giới hạn, tuy nhiên các tệp tin có dung lƣợng thấp, hệ thống vẫn hoạt động một cách ổn định. Tƣơng lai, hệ thống đƣợc triển khai rộng rãi, có nhiều ngƣời sử dụng, chỉ cần trả thêm phí để tăng lƣu lƣợng cũng nhƣ dung lƣợng. Hệ thống vẫn đáp ứng đƣợc yêu cầu đã đề ra.
3.2.5.Tính đồng bộ giữa các tệp tin trong lúc hiển thị
Một vấn đề lớn đƣợc đề ra, đó chính là khi hiển thị bài giảng, các nét vẽ và âm thanh phải đƣợc phát đồng bộ với nhau. Để đảm bảo đƣợc vấn đề đó, phải ghi lại thời điểm ngƣời dùng ấn nút Start, thời điểm lần đầu tiên ngƣời dùng chạm bút vào màn hình. Khoảng thời gian đó đƣợc lƣu lại và truyền vào biến t đầu tiên.
68 Hơn nữa, khoảng thời gian giữa hai nét vẽ cũng cần phải đƣợc lƣu lại. Đó chính là khoảng thời gian giữa điểm cuối cùng của nét vẽ trƣớc, và điểm đ ầu tiên của nét vẽ sau. Tƣơng tự, khoảng thời gian giữa hai trang cũng phải đƣợc lƣu lại, để cộng thêm vào thời gian chờ.
Sau quá trình tính toán, cài đặt, thử nghiệm, hệ thống đã hiển thị đƣợc các nét vẽ và âm thanh đồng bộ nhau.
3.3 Thử nghiệm và đánh giá hệ thống 3.3.1.Thử nghiệm hệ thống 3.3.1.Thử nghiệm hệ thống
3.3.1.1. Thử nghiệm hệ thống trên thiết bị Android Môi trƣờng thử nghiệm:
- Hệ điều hành Android 5.0.1 - Thiết bị Samsung Galaxy Note 3 Kiểm thử về giao diện:
Bảng 3.1. Kết quả kiểm thử giao diện
STT Yêu c ầu Kết quả
1 Hiển thị màn hình đăng nhập YES
2 Hiển thị màn hình đăng ký YES
3 Hiển thị danh sách bài giảng YES
4 Hiển thị danh sách tất cả các bài giảng YES 5 Hiển thị màn hình đổi mật khẩu YES 6 Hiển thị màn hình tạo bài giảng YES 7 Hiển thị màn hình xem bài gi ảng YES
8 Hiển thị màn hình cài đặt YES
69 Kết quả kiểm thử các tính năng
Bảng 3.2. Kết quả kiểm thử các tính năng
STT Yêu c ầu Kết quả
1 Kiểm tra các điều kiện đăng nhập YES
2 Đăng nhập thành công YES
3 Kiểm tra các điều kiện đăng ký YES
4 Đăng ký thành công YES
5 Tạo bài giảng mới YES
6 Tạo tiêu đề bài giảng YES (adsbygoogle = window.adsbygoogle || []).push({});
7 Tính năng ghi âm YES
8 Tính năng tẩy nét vẽ YES
9 Tính năng undo, redo YES
10 Tính năng đăng xuất YES
11 Tính năng lƣu trạng thái đăng nhập YES
12 Tính năng đổi mật khẩu YES
13 Tính năng xem lại bài giảng YES
14 Tính chọn màu sắc, kích thƣớc nét vẽ YES
3.3.1.2. Thử nghiệm hệ thống trên các nền tảng khác
Kết quả thử nghiệm trên nền tảng web app cũng đạt kết quả tốt:
Bảng 3.3. Kết quả kiểm thử giao diện ứng dụng web
STT Yêu c ầu Kết quả
1 Hiển thị màn hình đăng nhập YES
2 Hiển thị màn hình đăng ký YES
3 Hiển thị danh sách bài giảng YES
4 Hiển thị danh sách tất cả bài giảng YES 6 Hiển thị màn hình xem bài gi ảng YES
70 Bảng 3.4. Kết quả kiểm thử các tính năng ứng dụng web
STT Yêu c ầu Kết quả
1 Kiểm tra các điều kiện đăng nhập YES
2 Đăng nhập thành công YES
3 Kiểm tra các điều kiện đăng ký YES
4 Đăng ký thành công YES
5 Tính năng xem lại bài giảng YES
3.3.1.3. Thử nghiệm về dung lƣợng
Bảng 3.5. Kết quả thử nghiệm dung lƣợng bài giảng Lần Thời gian (phút) Dung lƣợng json (KB) Dung lƣợng audio(KB) Trung bình (MB/phút) 1 0.5 362 239 1.17 2 0.5 345 176 1.02 3 0.5 381 141 1.02 4 0.5 317 217 1.04 5 0.5 331 212 1.06 6 0.5 327 183 0.99 7 0.5 375 144 1.01 8 0.5 351 197 1.07 9 0.5 337 191 1.03 10 0.5 347 228 1.12 3.3.2.Đánh giá hệ thống 3.3.2.1. Ƣu điểm
Hệ thống triển khai thành công với những ƣu điểm vƣợt trội:
71 - Giao diện giản đơn theo phong cách Material.
- Dung lƣợng bài giảng nhỏ. Trung bình một bài giảng kéo dài 45 phút có dung lƣợng không quá 60MB. Chi tiết độc giả xem ở bảng 3.5.
3.3.2.2. Nhƣợc điểm
Bên cạnh những ƣu điểm vƣợt trội bên trên, hệ thống vẫn còn một vài nhƣợc điểm cần phải khắc phục: (adsbygoogle = window.adsbygoogle || []).push({});
- Các tính năng mới ở mức độ đầy đủ, chƣa phong phú.
- Chƣa có tính năng chia sẽ dữ liệu, gửi tin nhắn giữa các ngƣời dùng.
- Nên đƣa thêm tính năng cài đặt chất lƣợng âm thanh, giúp tối ƣu hóa dung lƣợng lƣu trữ.
3.3.3.Một số hình ảnh ứng dụng
72 Hình 3.3. Màn hình đăng ký thành viên
73 Hình 3.5. Màn hình đặt tựa đề bài giảng
74 Hình 3.7. Màn hình đăng xuất
75 Hình 3.9. Giao diện đăng nhập trên web
76 Hình 3.11. Giao diện xem bài giảng trên web
77
KẾT LUẬN A. Kết luận
Luận văn tốt nghiệp của tác giả với đề 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” đã hoàn thành và đã giải quyết đƣợc các vấn đề sau:
- Tìm hiểu công nghệ phát triển ứng dụng đa nền tảng.
- Tìm hiểu công nghệ ghi lại thao tác ngƣời dùng với màn hình điện thoại. - Đề xuất mô hình ghi lại thao tác viết tay của ngƣời dùng trên màn hình điện thoại, đóng gói thành dữ liệu, lƣu trữ gửi cho những ngƣời dùng khác. Từ đó những ngƣời dùng khác có thể xem lại các thao tác viết tay một cách chính xác. Mô hình này rất thích hợp cho các giáo viên t ạo ra các bài gi ảng, lƣu trữ và gửi cho các học sinh, sinh viên. Ƣu điểm vƣợt trội của mô hình này là t ạo ra các bài gi ảng 45 phút với dung lƣợng không quá 60 MB.
- Xây dựng và triển khai thành công ứng dụng dựa trên mô hình đã đề xuất. Ứng dụng đầy đủ các tính năng cơ bản, có thể áp dụng trong thực tiễn.
- Phát triển một ứng dụng mô hình Client-Server chỉ với ngôn ngữ JAVA, dễ dàng triển khai đến nhiều nền tảng.
B. Các vấn đề còn tồn tại
Mặc dù tác giả đã rất cố gắng với tất cả sự nỗ lực của bản thân cũng nhƣ sự giúp đỡ tận tình của các cán bộ hƣớng dẫn nhƣng do kiến thức và thời gian có hạn nên trong quá trình xây dựng ứng dụng còn gặp những khó khăn sau:
- Cần nghiên cứu kĩ hơn các tính năng bút Spen giúp cho việc tạo các bài giảng thuận tiện hơn, dễ dàng hơn và nhanh chóng hơn.
- Để các thao tác với màn hình một cách chính xác, các bài giảng đƣợc tạo ra chỉ hỗ trợ trên các thiết bị Android hỗ trợ bút Spen.
C. Hƣớng phát triển của luận văn
Vấn đề “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” đã xây dựng đƣợc hệ thống mang ý nghĩa thực tiễn cao. Tuy nhiên, do điều kiện cá nhân còn hạn chế, trong khuôn khổ luận văn này chỉ
78 cung c ấp những tính năng cơ bản nhất, đ ảm bảo xây dựng hoàn chỉnh một bài giảng đáp ứng nhu cầu thực tế. Vì vậy, hƣớng nghiên cứu tiếp theo có thể tập trung vào khai thác các vấn đề sau:
- Tìm hiểu thêm các tính năng của bút Spen và nghiên cứu xem các ứng dụng đa nền tảng có đáp ứng đƣợc các tính năng đó không.
- Nghiên cứu cải thiện hiệu năng cho các ứng dụng đa nền tảng.
- Tích hợp thêm tính năng gửi tài liệu giữa những ngƣời dùng với nhau, có thể nhắn tin với nhau để trao đổi thêm.
- Gần đây, vào ngày 9/9/2015 đã diễn ra sự kiện hãng Apple ra mắt sản phẩm mới. Trong đó nổi bật là chiếc máy tính bảng iPad Pro cùng với chiếc bút Apple Pencil. Tác giả sẽ tập trung nghiên thêm về chiếc Apple Pencil để có thể xây dựng hệ thố ng có thể tạo ra bài giảng trên các thiết bị iOS hỗ trợ chiếc bút này.
79
TÀI LIỆU THAM KHẢO
[1] Alan Dennis, Systems Analysis and Design with UML, Wiley, 2012 (adsbygoogle = window.adsbygoogle || []).push({});
[2] Aleksandar Seovic, Google Web Toolkit GWT Java AJAX Programming. Packt Publishing, 2007.
[3] Charles Severance, Using Google App Engine, O'Reilly Media, 2009.
[4] Dan Sanderson, Programming Google App Engine with Java. O'Reilly Media,
2015.
[5] Daniel Guermeur, Google App Engine Java and GWT Application Development, Packt Publishing, 2010.
[6] Herv Guihot, Pro Android Apps Performance Optimization, Apress, 2012.
[7] John M. Wargo, PhoneGap Essential, Building Cross-Platform Mobile Apps,
Addison-Wesley Professional, 2012.
[8] John M. Wargo, Apache Cordova API Cookbook (Mobile Programming),
Addison-Wesley Professional, 2014.
[9] Joshua Marinacci, Building Mobile Applications with Java: Using the Google Web Toolkit and PhoneGap, O'Reilly Media, 2012.
[10] Reto Meier, Professional Android Application Development, CreateSpace Independent Publishing Platform, 2014.
[11] Ryan Dewsbury, Google Web Toolkit Applications, Addison-Wesley Professional, 2011.
[12] Thomas Myer, Beginning PhoneGap. Wrox, 2011.
[13] Vipul Gupta, Accelerated GWT: Building Enterprise Google Web Toolkit Applications, Apress, 2008.
[14] Wei-Meng Lee, Beginning Android™ Application Development, Wiley
Publishing, 2011.