3. Đối tƣợng nghiên cứu
2.2.Phân tích hệ thống
2.2.1. Biểu đồ Use case
2.2.1.1.Biều đồ Use case tổng quan
Hình 2.3. Biểu đồ Use case tổng quan
Hình 2.3 trình bày biểu đồ Use case tổng quan c ủa hệ thống. Tác nhân của hệ thống ở đây là ngƣời dùng. Hệ thố ng có các chức năng chính nhƣ đăng ký, đăng nhập, quản lý tài kho ản, quản lý các bài giảng.
2.2.1.2.Phân rã biểu đồ use case
51
Hình 2.3. Phân rã mức 2 use case quản lý tài khoản
52
2.2.2. Đặc tả Use case
2.2.2.1.Use case quản lý đăng nhập Tên Use case: quản lý đăng nhập.
Mô tả: quản lý đăng nhập bao gồm các công việc nhƣ đăng nhập, thay đổi mật khẩu, đăng xuất.
Tác nhân: ngƣời dùng.
Điều kiện tiên quyết: đã tồn tại tài khoản đăng nhập đối với công việc đăng nhập, thay đổi mặt khẩu; đã đăng nhập đối với công việc đăng xuất.
Kịch bản chính:
- Ngƣời dùng điền đầy đủ thông tin email và password để đăng nhập từ màn hình chính (C1).
- Sau khi đăng nhập thành công ngƣời dùng có thể thay đổi mật khẩu đã đăng nhập (C2).
- Ngƣời dùng có thể đăng xuất khi thoát ứng dụng, hoặc chỉ thoát ứng dụng để không phải đăng nhập lại trong lần tới (C3).
Kịch bản con:
- C1: Sau khi ngƣời dùng điền đầy đủ thông tin đăng nhập, hệ thống sẽ gửi thông tin đến máy chủ và kiểm tra thông tin đăng nhập có đúng không. Nếu thông tin đăng nhập là đúng, ứng dụng sẽ đƣa ngƣời dùng đến màn hình chính, ngƣợc lại, nếu sai ứng dụng sẽ thông báo để ngƣời dùng kiểm tra lại hoặc ngƣời dùng cần phải tạo tài khoản mới.
- C2: Ngƣời dùng có thể thay đổi mật khẩu sau khi đăng nhập. Ngƣời dùng cần điền đầy đủ thông tin mật khẩu cũ, mật khẩu mới, xác nhận mật khẩu mới để có thể thay đổi mật khẩu. Hệ thống sẽ kiểm tra nhƣng thông tin đó, nếu chính xác sẽ thực hiện thay đổi mật khẩu.
- C3: Ngƣời dùng đăng xuất khỏi hệ thố ng ho ặc giữ nguyên trạng thái đăng nhập cho lần mở ứng dụng tiếp theo.
53 2.2.2.2.Use case quản lý bài giảng
Tên Use case: quản lý bài giảng.
Mô tả: quản lý bài giảng bao gồm các công việc nhƣ xem danh sách các bài giảng, tạo một bài giảng mới, xóa bài giảng đã tạo, xem lại các bài giảng đã tạo, xem tất cả bài giảng trên hệ thống.
Tác nhân: ngƣời dùng.
Điều kiện tiên quyết: đã đăng nhập thành công. Kịch bản chính:
- Ngƣời dùng xem danh sách các bài giảng (C1).
- Ngƣời dùng đặt tựa đề cho bài giảng mới và bắt đầu tạo bài giảng mới (C2). - Ngƣời dùng xem lại bài giảng mình đã tạo (C3).
- Ngƣời dùng xóa bài giảng mình đã tạo (C4). (adsbygoogle = window.adsbygoogle || []).push({});
- Ngƣời dùng xem bài giảng của ngƣời khác tạo (C5). Kịch bản con:
- C1: Ngƣời dùng có thể xem danh sách các bài giảng có trên hệ thống, từ đó có thể xem nội dung một bài giảng nào đó.
- C2: Ngƣời dùng bắt đầu thao tác viết tay trên màn hình, kết hợp với giọng nói sẽ đƣợc ghi lại. Ngƣời dùng có các thao tác nhƣ xóa các nét vẽ trên màn hình, undo, redo, cài đặt kích thƣớc nét chữ, màu sắc nét chữ. Ngƣời dùng có thể tùy chọn có sử dụng tính năng ghi âm hay không. Các thao tác này chỉ dành cho ngƣời dùng sử dụng Client-A trên thiết bị Android hỗ trợ Spen.
- C3: Ngƣời dùng có thể chọn một bài giảng trong danh sách các bài giảng của mình để xem lại bài giảng tƣơng ứng.
- C4: Ngƣời dùng có thể xóa bài giảng mình đã tạo trƣớc đó, hệ thống sẽ kiểm tra, nếu ngƣời dùng là tác gi ả của bài giảng đó sẽ tiến hành xóa khỏi cơ sở dữ liệu trên hệ thống.
- C5: Ngƣời dùng có thể xem tất cả các bài giảng của ngƣời khác tạo. Các bài giảng hiển thị thành danh sách, s ắp xếp theo thời gian tạo.
54
2.3. Thiết kế hệ thống 2.3.1. Thiết kế biểu đồ lớp 2.3.1. Thiết kế biểu đồ lớp
2.3.1.1.Biểu đồ lớp quản lý ngƣời dùng
Hình 2.5. Biểu đồ lớp quản lý ngƣời dùng 2.3.1.2.Biểu đồ lớp quản lý bài giảng
55
2.3.2. Thiết kế biểu đồ tuần tự
2.3.2.1.Biểu đồ tuần tự đăng nhập
Hình 2.7. Biểu đồ tuần tự đăng nhập 2.3.2.2.Biểu đồ tuần tự đổi mật khẩu
56 2.3.2.3.Biểu đồ tuần tự đăng ký
Hình 2.9. Biểu đồ tuần tự đăng ký 2.3.2.4.Biểu đồ tuần tự thêm bài giảng
57 2.3.2.5.Biểu đồ tuần tự xem bài giảng
Hình 2.11. Biểu đồ tuần tự xem bài giảng 2.3.2.6.Biểu đồ tuần tự xóa bài giảng
58
2.3.3. Thiết kế cấu trúc cơ sở dữ liệu User User
ID Name Type Not Null Default ValuePrimary Key
1 fullNameVARCHAR 1 0
2 email VARCHAR 1 1
3 pass VARCHAR 1 0
Hình 2.13. Bảng cơ sở dữ liệu ngƣời dùng
Lecture
ID Name Type Not Null Default Vaule Primary Key 1 Id LONG 1 1 2 user_id VARCHAR 1 0 3 title VARCHAR 0 0 4 json_url VARCHAR 1 0 5 audio_url VARCHAR 1 0 6 createdDate LONG 1 0
Hình 2.14. Bảng cơ sở dữ liệu bài giảng
MyPoint
ID Name Type Not Null Default Value Primary Key (adsbygoogle = window.adsbygoogle || []).push({});
1 time INTEGER 1 0 0
2 x DOUBLE 1 0
3 y DOUBLE 1 0
59
Stroke
ID Name Type Not Null Default Value Primary Key
1 name INTEGER 1 1 0 2 leng INTEGER 1 0 3 color INTEGER 1 -16776961 0 4 size FLOAT 1 3 0 5 point MyPoint 1 0 Hình 2.16. Bảng cơ sở dữ liệu các nét vẽ Page
ID Name Type Not Null Default Value Primary Key
1 _numberOfPointINTEGER 1 1 0
2 _stroke Stroke 1 0 0
Hình 2.17. Bảng cơ sở dữ liệu các trang
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. (adsbygoogle = window.adsbygoogle || []).push({});
- 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.
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 (adsbygoogle = window.adsbygoogle || []).push({});
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.
- 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 (adsbygoogle = window.adsbygoogle || []).push({});
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
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 (adsbygoogle = window.adsbygoogle || []).push({});
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