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.
Hình 33. Cửa sổ Đăng nhập thất bại
Địa chỉ OpenId của Google, đó là https://www.google.com/accounts/o8/ud, địa chỉ mà đã đăng ký với Google. Địa chỉ này phải chính xác, nếu không sẽ không được xác nhận và quá trình đăng nhập sẽ thất bại. Cuối cùng là địa chỉ mà sau khi đăng nhập thành công sẽ được trình đăng nhập tự động trỏ sang, ở đây là địa chỉ http://vsearch.vn/ webdict/users/login/google.
Khi nhấn Sign in, toàn bộ do Google xử lý và trả về kết quả cho hệ thống. Như bên dưới, khi đăng nhập không thành công, có thông báo hiện lên.
Trong trường hợp đăng nhập thành công, cửa sổ đăng nhập sẽ được tự động đóng lại và chuyển người dùng về trang chủ, với tên người dùng là email đã đăng nhập.
Hình 34. Cửa sổ sau khi Đăng nhập 5.2. Tra từ/Học từ vựng
Hệ thống sử dụng dịch vụ web, cho nên điều quan trọng nhất là máy chủ SOAP. Có file wsdl mô tả dịch vụ web. Trong CakePHP, để tạo một máy chủ SOAP, sử dụng câu lệnh như sau:
$server = new SoapServer("dicts.wsdl"); $server->setClass("Dict");
SOAP được khởi tạo và sẵn sàng chờ yêu cầu từ phía khách.
Để gởi một yêu cầu lên máy chủ dịch vụ web, sử dụng trong CakePHP như sau:
$client = new SoapClient("dicts.wsdl"); $result = $client->searchdict($search);
Trên máy chủ có phương thức searchdict. Tham số đầu vào là một mảng, gồm có dictionary_id và từ cần tìm kiếm. Khi tìm một từ sẽ trả về kết quả là một mảng bao gồm tên, id, nghĩa, đường dẫn file âm thanh, đường dẫn file ảnh của từ đó.
Phương thức searchdict được dùng nhiều lần. Vì là dịch vụ web, cho nên sau này muốn phát triển các ứng dụng trên các ngôn ngữ thì hoàn toàn có thể gọi phương thức này và chỉ cần hiển thị dữ liệu đã tìm được ra giao diện chương trình là được, không mất thời gian xử lý lại dữ liệu.
Khi người dùng tra từ có chức năng gợi ý các từ. Chức năng này sử dụng phương thức request. Khác với searchdict, phương thức này trả về kết quả là một mảng các từ bắt đầu với các ký tự người dùng gõ vào. Ví dụ bên dưới là khi người dùng gõ vào từ “big”, các từ gợi ý hiện ra:
Hình 35. Cửa sổ Tra từ gợi ý
Khi tra một từ, chương trình sẽ gọi tới hàm searchdict. Chẳng hạn từ điển chọn là Anh-Việt, tìm kiếm từ big, khi đó mảng $search như sau: $search[‘dictionary_id’]=1, $search[‘search_term’]=”big”. Truyền tham số này vào hàm searchdict. Kết quả do hàm này trả về là một mảng bao gồm id=id của big, name=’big’, meaning=nghĩa của big, img_link và pronounce_link. Khi hiển thị, âm thanh và hình ảnh đồng thời được hiển thị. Trong cơ sở dữ liệu một số từ khi tìm với Google không ra kết quả cho nên không có ảnh, tuy nhiên số lượng không nhiều.
Có một vấn đề khi tìm kiếm. Đó là người dùng không biết được từ gốc của từ muốn tìm kiếm là gì. Ví dụ từ babies, hoặc từ loved. Điều gì sẽ xảy ra khi người dùng gõ từ này. Với những từ này nó đều theo quy tắc, đó là số nhiều hoặc quá khứ. Với số nhiều, chẳng hạn: baby -> babies love -> loves teach -> teaches … Với quá khứ:
love -> loved teach -> teached search -> searched …
Tất cả đều có quy tắc. Do đó để xử lý trường hợp với những từ này, ta làm như sau: Tìm kiếm bình thường với từ người dùng gõ vào, nếu không tìm thấy thì thực hiện cắt bỏ đuôi của từ đó theo quy tắc. Những từ có quy tắc là những từ kết thúc với đuôi sau đây: s, es, ies, d, ed, ied, ing, er, ly, est.
Tìm kiếm lại với từ đã được cắt bỏ đuôi, thực hiện lại vòng lặp nếu không tìm thấy. Cứ làm như thế cho tới khi tìm thấy từ hoặc không thể cắt bỏ được nữa, trả về kết quả đã tìm kiếm.
Module tra từ là module quan trọng nhất trong hệ thống. Nó được sử dụng lại nhiều lần, nhất là trong chức năng đọc báo.
5.3. Đọc báo
Hiện tại hệ thống mới chỉ có báo ngôn ngữ tiếng Anh, được lấy từ hai báo nổi tiếng là voanews và bbc. Dữ liệu được cập nhật thường xuyên sử dụng python.
Người dùng khi đọc báo nên đăng nhập vào hệ thống, như thế sẽ vừa học được từ, vừa thêm được từ vào từ vựng, từ đó tăng dần khả năng từ vựng của mình.
Để hiển thị các từ người dùng chưa biết, nguyên tắc xử lý như sau. Có một bảng chứa các từ thông dụng, như will, have, you, me, they … Kết hợp với bảng từ vựng của người dùng. Khi đọc chi tiết một tin, chương trình sẽ phân tách tin đó ra thành từng từ. Nếu từ đó không nằm trong những từ thông dụng hay từ mà người dùng đã học thì từ đó sẽ được bôi đậm, cho biết đó là từ mới. Khi người dùng rê chuột lên từ đó và chờ một lát, nghĩa và phát âm của từ đó được hiện lên. Xem minh họa bên dưới. Nghĩa được hiện lên qua một cửa sổ nhỏ, trong tầm nhìn của người dùng. Để làm được điều này, chương trình tự động xác định vị trí của từ được bôi đậm, hiện của sổ theo vị trí đó. Chẳng hạn với hình bên dưới, từ “slick” nằm ở vị trí gần cuối trang, cho nên cửa sổ nghĩa của từ đó