3.1.1. Yêu cầu người sử dụng
- Không cần đăng ký tài khoản khi đăng nhập. Sử dụng tài khoản Gmail có sẵn hoặc đăng ký mới tài khoản Gmail thông qua địa chỉ
http://mail.google.com/mail/signup.
- Hệ thống phải cung cấp cho phép người dùng tìm kiếm một từ nhanh chóng, có phát âm chuẩn, có hình ảnh kèm theo để dễ ghi nhớ.
- Học từ theo từ điển: Hiện các từ liên tiếp nhau. Phải cho phép người dùng lưu lại một từ vào từ điển của họ.
- Đọc báo: Nội dung của tin tức phải được hiển thị ở vị trí thuận tiện cho người đọc.
- Nội dung tin tức phải phong phú, thuận tiện cho người dùng tìm được tin mong muốn. Đọc báo phải giúp tăng khả năng từ vựng của người dùng.
3.1.2. Yêu cầu hệ thống
Từ yêu cầu phía người sử dụng, hệ thống có các chức năng sau: - Đăng nhập hệ thống: Sử dụng chính Gmail để đăng nhập.
- Tra từ: Hệ thống sẽ tìm trong cơ sở dữ liệu từ phù hợp nhất và hiện nghĩa, đồng thời có phát âm đi kèm, có ảnh minh họa từ đó. Các ảnh minh họa được lấy từ Google, đảm bảo kết quả phù hợp nhất với từ được tra. Đồng thời còn tìm kiếm theo các từ tương tự nếu từ gõ vào không tìm thấy. Chẳng hạn gõ babies thì sẽ tìm ra được baby.
- Học từ: Hiện lên các từ liên tiếp nhau sau mỗi mười lăm giây. Cho phép dừng học từ bằng cách nhấn nút Pause. Có nút cho hiện từ ngay trước từ hiện tại, từ ngay sau từ hiện tại.
- Đọc báo: Các tin tức được lấy từ báo nước ngoài. Được phân loại theo chuyên mục, dễ dàng tìm được tin tức mong muốn. Khi đọc chi tiết một tin thì chỉ hiển thị tin đó trong tầm nhìn cửa sổ. Nếu tin đó dài quá thì sẽ được cắt thành nhiều trang. Khi đó có nút cho sang trang sau, trở về trang trước. Có một tập các từ thông dụng, coi như người dùng nào cũng biết, chẳng hạn như will, has, have,
khi đọc tin sẽ chỉ bôi đậm các từ không có trong tập dữ liệu trên. Khi người dùng rê chuột lên từ đó, một cửa sổ con hiện lên nghĩa đầy đủ, có phát âm đi kèm. Cửa sổ hiện lên tự động định vị trong phạm vi khung nhìn, không tràn ra phía ngoài phạm vi cửa sổ.
3.2. Biểu đồ Ca sử dụng
Hình 5. Biểu đồ Ca sử dụng
Biểu đồ Ca sử dụng hệ thống có hai tác nhân, đó là Người dùng và Web Service. Có năm chức năng chính, đó là Tra từ, Đăng nhập, Từ vựng của tôi, Học từ và Đọc báo.
3.3. Luồng sự kiện 3.3.1. Đăng nhập
Bảng 2. Luồng sự kiện Đăng nhập
Tên Ca sử dụng Đăng nhập
Tác nhân Người dùng, Web Service
Mức 2
Sự kiện kích hoạt Người dùng nhấn vào đăng nhập Luồng sự kiện chính:
1. Hiện lên cửa sổ yêu cầu nhập Gmail và mật khẩu 2. Nhấn nút Sign in
4. Đăng nhập thành công, quay lại trang chủ Luồng sự kiện phụ:
3.1 Đăng nhập thất bại, yêu cầu đăng nhập lại.
3.3.2. Tra từ
Bảng 3. Luồng sự kiện Tra từ
3.3.3. Học từ
Bảng 4. Luồng sự kiện Học từ
Tên Ca sử dụng Học từ vựng
Tác nhân Người dùng, Web Service
Mức 1
Sự kiện kích hoạt Người dùng nhấn nút Play Tên Ca sử dụng Tra từ
Tác nhân Người dùng, Web Service
Mức 3
Sự kiện kích hoạt Người dùng nhập từ cần tìm kiếm Luồng sự kiện chính:
1. Nhấn nút Tra từ
2. Truy vấn đến web service với từ đã nhập 3. Tìm thấy kết quả
4. Hiển thị kết quả tìm được bao gồm nghĩa, phát âm, hình ảnh minh họa. 5. Người dùng chọn thêm từ vựng vào cơ sở dữ liệu
Luồng sự kiện phụ:
2.1. Không tìm thấy từ cần tra. Lược bỏ đuôi theo quy tắc rồi tìm lại. 2.1.1. Không tìm thấy, thông báo không có trong cơ sở dữ liệu. 5.1. Kiểm tra trạng thái đăng nhập.
5.1.1. Đã đăng nhập, thêm từ vào cơ sở dữ liệu. 5.1.2. Chưa đăng nhập, yêu cầu đăng nhập.
Luồng sự kiện chính:
1. Hệ thống tìm từ tiếp theo của từ hiện tại.
2. Truy vấn tới chức năng Tra từ với từ tiếp theo tìm thấy.
3.3.4. Đọc báo
Bảng 5. Luồng sự kiện Đọc báo
Tên Ca sử dụng Đọc báo
Tác nhân Người dùng, Web Service
Mức 1
Sự kiện kích hoạt Người dùng chọn chức năng đọc báo Luồng sự kiện chính:
1. Người dùng chọn trang web muốn đọc 2. Tìm những bài viết mới nhất từ trang đó 3. Người dùng chọn đọc chi tiết một tin 4. Truy vấn từ vựng đã học của người này 5. Hiển thị thông tin bài viết
6. Hiển thị kết quả tìm được, hightlight từ vựng chưa học 7. Hiển thị thông tin bài viết
8. Người dùng di chuột lên từ vựng đã hightlight 9. Truy vấn nghĩa của từ đã chọn
10. Hiển thị cửa sổ nghĩa của từ.
3.3.5. Quản lý từ vựng
Bảng 6. Luồng sự kiện Quản lý từ vựng
Tác nhân Người dùng, Web Service
Mức 2
Sự kiện kích hoạt Người dùng chọn chức năng quản lý từ vựng
Luồng sự kiện chính:
1. Tìm kiếm ID của người dùng 2. Hiển thị từ vựng của người dùng 3. Người dùng chọn chức năng 4. Thực hiện chức năng
CHƯƠNG 4: THIẾT KẾ
4.1. Thiết kế hệ thống
Hình 6. Thiết kế tổng quan hệ thống
Hệ thống có bốn thành phần chính, bao gồm Máy chủ web, máy khách web, máy chủ SOAP và máy khách SOAP. Máy chủ và máy khách web giao tiếp với nhau thông qua giao thức HTTP. Nói cách khác là người dùng sẽ dùng trình duyệt để học tập trên hệ thống. Máy chủ là nơi lưu trữ mã nguồn, dữ liệu về từ điển. Máy khách web giao tiếp với máy khách SOAP thông qua giao thức SOAP. Nhìn vào hệ thống ta thấy máy chủ web và máy chủ SOAP là riêng biệt, tức là có thể phát triển nhiều hệ thống khách nhau và dùng cùng một máy chủ SOAP được.
Nội dung thiết kế được tham khảo ở phần [3] [4].
4.1.1. Biểu đồ tuần tự
4.1.1.1. Đăng nhập
- Chức năng đăng nhập được thực hiện khi người dùng nhấn vào liên kết “Đăng nhập với Gmail”.
- Một cửa sổ popup được hiện lên yêu cầu nhập Email và Password. Tại đây, mọi xử lý đều do Google.
- Kết quả trả về khi đăng nhập xong là thông tin về Email của người dùng.
4.1.1.2. Tra từ
- Chức năng được thực hiện khi người dùng gõ từ vào ô tìm kiếm.
- Khi đang gõ, chức năng gợi ý từ được thực hiện: Khi từ được gõ lớn hơn hoặc bằng hai ký tự, chuỗi đó sẽ được gửi lên máy chủ, máy chủ tìm kiếm các từ bắt đầu bằng chuỗi đó, trả lại và hiển thị ra cho người dùng dưới dạng một danh sách.
- Hàm search() ở DictsController được gọi . Hàm này sẽ khởi tạo dịch vụ web và gọi hàm searchdict() với tham số search_term. Search_term là một mảng bao gồm: search_term[‘search_term’] và search_term[‘dict_id’].
- Hàm searchdict() mà dịch vụ web thực hiện được mô tả như hình dưới. Đầu tiên Model kết nối tới máy chủ Sphinx. Sau đó truy vấn dữ liệu thông qua index của Sphinx, trả về kết quả là một mảng id từ vựng tìm thấy thỏa mãn từ cần tìm. Có một điểm lưu ý, Sphinx tìm kiếm không như kiểu thông thường khi dùng lệnh SQL. Chẳng hạn nếu tìm từ baby, dùng SQL thông thường thì câu lệnh là “Select * from words where name=’baby’”, tuy nhiên Sphinx không tìm kiếm như thế. Kết quả trả về thường nhiều hơn. Do đó có bước findId(search_term). Bước này sẽ tìm ra từ chính xác mà người dùng đã gõ vào.
- Nếu như không tìm thấy, tức id==’’, ta loại bỏ đuôi theo quy tắc số nhiều, quá khứ trong tiếng anh. Lúc này có được search_term_new. Tìm kiếm cho tới khi tìm thấy.
- Nếu đã tìm thấy, tức id!=’’, truy vấn dữ liệu của từ này trong cơ sở dữ liệu. - Trả về cho dịch vụ web.
Hình 8. Biểu đồ tuần tự chức năng Tra từ - Searchdict
- Có được dữ liệu từ dịch vụ web, hiển thị cho người dùng.
- Người dùng chọn Thêm vào từ vựng của tôi. Tiến hành kiểm tra xem đã đăng nhập hay chưa. Nếu chưa thì yêu cầu đăng nhập. Ngược lại thêm từ này vào cơ sở dữ liệu và thông báo thành công.
Hình 10. Biểu đồ tuần tự chức năng Tra từ
Biểu đồ tuần tự chức năng tra từ, có tham chiếu đến hai biểu đồ tuần tự Searchdict và autoComplete.
4.1.1.3. Học từ
Hình 11. Biểu đồ tuần tự chức năng Học từ
- Người dùng chọn danh sách từ vựng muốn học.
- Nhấn nút Play, Next hoặc Previous. Hệ thống khởi tạo ngẫu nhiên một từ mới hoặc xuất phát từ từ đã tìm kiếm. Nếu là Nhấn nút Play thì vòng lặp sau mười lăm giây sẽ hiển thị từ tiếp theo.
4.1.1.4. Đọc báo
Hình 12. Biểu đồ tuần tự chức năng Đọc báo
- Người dùng chọn chức năng đọc báo. Hàm read(1, -1, 1) được gọi trong DictsController. Trong hàm này thực hiện truy vấn dữ liệu các tin tức trong chuyên mục có id là 1. Trả về kết quả và hiển thị cho người dùng.
- Khi chọn một chuyên mục thì thực hiện hàm read(category_id, -1, 1) với category_id là id của chuyên mục được chọn. Làm tương tự với phần trên - Khi đọc một tin, thực hiện hàm read(category_id, news_id, 1) với news_id là id
của tin tức trong chuyên mục được chọn. Truy vấn được nội dung tin, trả về cho DictsController. Controller gọi tới hàm collectWord(content) trong Dict Model để tìm kiếm các từ đã học (nếu đã đăng nhập), và các từ mặc định người
dùng đã biết, rồi làm nổi bật các từ còn lại. Model trả về nội dung tin đã được làm nổi bật. Hiển thị kết quả cho người dùng.
- Người dùng di chuột lên một từ đã làm nổi bật. Hàm searchhightlight() được gọi tới. Hàm này gọi tới searchdict() của dịch vụ web. Cuối cùng có được nghĩa của từ và hiển thị dưới dạng một cửa sổ con.
4.1.1.5. Quản lý từ vựng
Hình 13. Biểu đồ tuần tự chức năng Quản lý từ vựng
- Người dùng chọn xem từ vựng của tôi
- Hàm readWord() ở Controller DictsController được gọi.
- Controller truy vấn tới Model lấy dữ liệu về từ vựng của người dùng này và hiển thị.
4.1.2. Biểu đồ hoạt động
4.1.2.1. Đăng nhập
Hình 14. Biểu đồ hoạt động chức năng Đăng nhập
- Người dùng chọn đăng nhập
- Truy vấn tới dịch vụ web, sau đó chuyển về trang chủ
4.1.2.2. Tra từ
- Đầu tiên kiểm tra dữ liệu nhập. Nếu rỗng thì thông báo lỗi. Ngược lại, truy vấn tới dịch vụ web.
- Nếu chọn thêm vào từ vựng, thì kiểm tra đăng nhập. Nếu chưa thì yêu cầu đăng nhập. Ngược lại thêm vào cơ sở dữ liệu.
4.1.2.3. Học từ
Hình 16. Biểu đồ hoạt động chức năng Học từ
- Khởi tạo từ vựng ngẫu nhiên hoặc xuất phát từ từ hiện tại - Truy vấn dữ liệu và hiển thị
- Người dùng chọn chức năng thêm vào từ vựng. Kiểm tra đăng nhập. Nếu đã đăng nhập thì thêm vào cơ sở dữ liệu, ngược lại yêu cầu đăng nhập.
- Chờ mười lăm giây sau, hoặc nhấn Next, hoặc nhấn Previous thì truy vấn từ tiếp theo.
4.1.2.4. Đọc báo
Hình 17. Biểu đồ hoạt động chức năng Đọc báo
- Hiển thị các chuyên mục
- Chọn một tin thì truy vấn từ vựng đã học, đồng thời truy vấn tới dịch vụ web để tìm ra từ gốc của các từ trong nội dung. Tiếp đó làm nổi bật các từ chưa học, đồng thời hiển thị nội dung.
- Di chuột lên một từ vựng được bôi đậm thì truy vấn tới dịch vụ web, tìm ra nghĩa của từ đó và hiển thị.
4.1.2.5. Quản lý từ vựng
Hình 18. Biểu đồ hoạt động chức năng Quản lý từ vựng
- Hiển thị từ vựng của người dùng
- Chọn một từ vựng thì truy vấn tới dịch vụ web và hiển thị nghĩa của từ vựng đó.
4.1.3. Biểu đồ lớp
Hình 19. Biểu đồ lớp hệ thống 4.2. Thiết kế cơ sở dữ liệu
Bảng 7. Users
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11
username VARCHAR 255
Hình 20. Bảng Users Bảng 8. Dictionaries
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11
Hình 21. Bảng Dictionaries Bảng 9. News Categories
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11
name VARCHAR 255
Hình 22. Bảng New Categories Bảng 10. News Domain
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11
name VARCHAR 255
Hình 23. Bảng New Domain Bảng 11. News Content
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11 original_link VARCHAR 255 title VARCHAR 255 description TEXT content TEXT created DATETIME news_domain_id INT 11 category_id INT 11
Hình 24. Bảng New Content Bảng 12. Words
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11 name VARCHAR 255 name_search VARCHAR 255 dictionary_id INT 11 meaning TEXT img_link TEXT pronounce_link TEXT Hình 25. Bảng Words Bảng 13. User Words
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11
userId INT 11
Hình 26. Bảng User Words Bảng 14. Known Words
Kiểu khóa Kiểu dữ liệu Độ dài
id PRIMARY INT 11
name VARCHAR 255
Hình 27. Bảng Known Words
Hình 28. Biểu đồ quan hệ của các bảng
Dữ liệu âm thanh, hình ảnh của từ điển được xử lý bởi Python. Thông qua trang web google.com và tratu.vn để lấy dữ liệu.
Cách thức được tiến hành như sau: Với hình ảnh, mỗi từ trong bảng words ta sẽ vào liên kết http://tratu.vn/dict/en_vn/. Chẳng hạn với từ hello, ta sẽ có liên kết
http://tratu.vn/dict/en_vn/hello. Vào liên kết này, dựa vào các thẻ ta sẽ tìm được liên kết phát âm của từ hello. Liên kết tìm được là
http://tratu.vn/TratuAudio/5/5d/5d41402abc4b2a76b9719d911017c592.mp3. Lấy liên kết đó, cập nhật lại vào bảng words. Với hình ảnh cũng tương tự thế.
4.3. Thiết kế giao diện4.3.1. Đăng nhập 4.3.1. Đăng nhập
Cửa sổ đăng nhập yêu cầu nhập email và mật khẩu.
Hình 29. Cửa sổ Đăng nhập
4.3.2. Tra/Học từ
Hình 30. Cửa sổ Tra từ
Chức năng Tra/Học từ được mô tả chi tiết hoạt động trong phần 4.1.1.2 và 4.1.1.3. Trong cửa sổ này có các thành phần sau:
- Một danh sách các loại từ điển: Anh - Việt, Việt – Anh, Pháp – Việt, Việt-Pháp, Đức-Việt, Việt-Đức, Nga-Việt, Việt-Việt, Foldoc, WorldNet.
- Một ô để gõ từ tìm kiếm - Một nút Tra từ
- Một nút Previous - Một nút Play - Một nút Next
- Một liên kết Thêm vào từ vựng của tôi.
4.3.3. Đọc báo
Trang liệt kê các tin tức từ một chuyên mục.
Chức năng này được mô tả chi tiết hoạt động trong phần 4.1.1.4. Trong cửa sổ này có các thành phần sau:
- Bên trái: Hiển thị các chuyên mục.
- Bên phải: Khi vào một chuyên mục, hiển thị tin tức từ chuyên mục đó. Khi vào chi tiết một tin, hiển thị nội dung của tin đó.
Hình 31. Cửa sổ Đọc báo 1
Trang chi tiết khi đọc một tin
CHƯƠNG 5: CÀI ĐẶT VÀ THỬ NGHIỆM
5.1. Đăng nhập
Sử dụng OpenID mà Google cung cấp để đăng nhập vào hệ thống. Để làm được điều này, trước hết trang web phải được đăng ký và xác nhận bởi Google. Khi đó, trong chương trình, muốn sử dụng đăng nhập này thì cần thiết lập một vài thông số cần thiết.