1. Trang chủ
  2. » Luận Văn - Báo Cáo

Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website học tiếng Anh trực tuyến sử dụng React.js, Java spring boot

124 8 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây dựng website học tiếng Anh trực tuyến sử dụng React.js, Java Spring Boot
Tác giả Hoàng Công Thành Nhân, Đoàn Võ Nhựt Hào
Người hướng dẫn TS. Lê Vĩnh Thịnh, TS. Huỳnh Xuân Phụng
Trường học Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành Công nghệ thông tin
Thể loại Đồ án tốt nghiệp
Năm xuất bản 2024
Thành phố Thành phố Hồ Chí Minh
Định dạng
Số trang 124
Dung lượng 11,8 MB

Cấu trúc

  • CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI (16)
    • 1.1. Lý do chọn đề tài (16)
    • 1.2. Mục tiêu (17)
    • 1.3. Công nghệ sử dụng (17)
    • 1.4. Phương pháp nghiên cứu (17)
  • CHƯƠNG 2: CƠ SỞ LÝ THUYẾT (18)
    • 2.1. ReactJS (18)
      • 2.1.1. Giới thiệu (18)
      • 2.1.2. Ưu điểm (18)
      • 2.1.3. Nhược điểm (18)
      • 2.2.4. Lý do sử dụng (18)
    • 2.2. Firebase (19)
      • 2.2.1. Giới thiệu (19)
    • 2.3. Netlify (19)
      • 2.3.1. Giới thiệu (19)
      • 2.3.2. Ưu điểm (19)
      • 2.3.3. Nhược điểm (20)
      • 2.3.4. Lý do sử dụng (20)
    • 2.4. Shadcn (20)
      • 2.4.1. Giới thiệu (20)
      • 2.4.2. Ưu điểm (20)
      • 2.4.3. Nhược điểm (20)
      • 2.4.4. Lý do sử dụng (21)
    • 2.5. Tailwind CSS (21)
      • 2.5.1. Giới thiệu (21)
      • 2.5.2. Ưu điểm (21)
      • 2.5.3. Nhược điểm (21)
      • 2.5.4. Lý do sử dụng (21)
    • 2.6. useSWR (21)
      • 2.6.1. Giới thiệu (21)
      • 2.6.2. Ưu điểm (22)
    • 2.7. Spring Boot (22)
      • 2.7.1. Giới thiệu (22)
      • 2.7.2. Ưu điểm (22)
      • 2.7.3. Nhược điểm (23)
      • 2.7.4. Lý do sử dụng (23)
    • 2.8. PostgreSQL (23)
      • 2.8.1. Giới thiệu (23)
      • 2.8.2. Ưu điểm (23)
      • 2.8.3. Nhược điểm (23)
      • 2.8.4. Lý do sử dụng (23)
    • 2.9. Spring Data JPA (24)
      • 2.9.1. Giới thiệu (24)
      • 2.9.2. Ưu điểm (24)
      • 2.9.3. Nhược điểm (24)
      • 2.9.4. Lý do sử dụng (24)
    • 2.10. Hibernate (24)
      • 2.10.1. Giới thiệu (24)
      • 2.10.2. Ưu điểm (24)
      • 2.10.3. Nhược điểm (25)
      • 2.10.4. Lý do sử dụng (25)
    • 2.11. Liquibase (25)
      • 2.11.1. Giới thiệu (25)
      • 2.11.2. Ưu điểm (25)
      • 2.11.3. Nhược điểm (25)
      • 2.11.4. Lý do sử dụng (25)
    • 2.12. WordsAPI (26)
      • 2.12.1. Giới thiệu (26)
      • 2.12.2. Ưu điểm (26)
      • 2.12.3. Nhược điểm (26)
      • 2.12.4. Lý do sử dụng (26)
    • 2.13. OpenAI API (27)
      • 2.13.1. Giới thiệu (27)
      • 2.13.2. Ưu điểm (27)
      • 2.13.3. Nhược điểm (27)
      • 2.13.4. Lý do sử dụng (27)
    • 2.14. Technical stack (28)
  • CHƯƠNG 3: PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU (29)
    • 3.1.1. WordUp (29)
    • 3.1.2. Anki (29)
    • 3.3. Mô hình hóa yêu cầu chức năng (30)
      • 3.3.1. Lược đồ Usecase (30)
      • 3.3.2. Đặc tả Usecase (31)
    • 3.4. Lược đồ tuần tự (57)
      • 3.4.1. Đăng ký (57)
      • 3.4.2. Đăng nhập (57)
      • 3.4.3. Xác nhận Email (58)
      • 3.4.4. Đặt lại mật khẩu (58)
      • 3.4.5. Xóa tài khoản (59)
      • 3.4.6. Thay đổi giao diện (59)
      • 3.4.7. Thực hiện bài kiểm tra đầu vào (60)
      • 3.4.8. Đặt chủ đề cần học (60)
      • 3.4.9. Đặt thời gian học hằng ngày (61)
      • 3.4.10. Tìm kiếm từ vựng (61)
      • 3.4.11. Đăng xuất (61)
      • 3.4.12. Đặt lại tiến trình học (62)
      • 3.4.13. Học từ vựng (62)
      • 3.4.14. Danh sách từ vựng cần học trong ngày (62)
      • 3.4.15. Danh sách từ vựng cần học trong ngày theo chủ đề (63)
      • 3.4.16. Xem hồ sơ cá nhân (63)
    • 3.5. Lược đồ lớp (66)
    • 3.6. Lược đồ hoạt động (67)
      • 3.6.1. Đăng ký (67)
      • 3.6.2. Đăng nhập (68)
      • 3.6.3. Xác nhận Email (69)
      • 3.6.4. Đặt lại mật khẩu (70)
      • 3.6.5. Xóa tài khoản (71)
      • 3.6.6. Thay đổi giao diện (72)
      • 3.6.7. Thực hiện bài kiểm tra đầu vào (73)
      • 3.6.8. Đặt chủ đề cần học (74)
      • 3.6.9. Đặt thời gian học hằng ngày (74)
      • 3.6.10. Tìm kiếm từ vựng (75)
      • 3.6.11. Đăng xuất (76)
      • 3.6.12. Đặt lại tiến trình học (77)
      • 3.6.13. Học từ vựng (78)
      • 3.6.14. Danh sách từ vựng cần học trong ngày (79)
      • 3.6.17. Tạo quiz kiểm tra từ vựng (82)
      • 3.6.18. Gửi email thông báo cho người dùng từ vựng cần học (83)
  • CHƯƠNG 4: THIẾT KẾ WEBSITE (84)
    • 4.1. Thiết kế cơ sở dữ liệu (84)
      • 4.1.1. Sơ đồ thiết kế cơ sở dữ liệu (84)
      • 4.1.2. Mô tả thiết kế cơ sở dữ liệu (93)
    • 4.2. Thiết kế giao diện (98)
      • 4.2.1. Màn hình của Guest (98)
      • 4.2.2. Màn hình của User (100)
      • 4.2.3. Màn hình của Admin (109)
  • CHƯƠNG 5: KIỂM THỬ HỆ THỐNG (111)
    • 5.1. Thông tin chung về kiểm thử (111)
      • 5.1.1. Phương pháp tiếp cận (111)
      • 5.1.2. Test plan (111)
      • 5.1.3. Môi trường kiểm thử (111)
      • 5.1.4. Phạm vi kiểm thử (111)
    • 5.2. Tổng quan test case (113)
    • 5.3. Test case (113)
  • CHƯƠNG 6. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN (119)
    • 6.1. Kết quả đạt được (119)
    • 6.2. Ưu điểm (120)
    • 6.3. Hạn chế (120)
    • 6.4. Đánh giá mức độ hoàn thành của đề tài so với các Website đã khảo sát (120)
    • 6.5. Hướng phát triển (121)
      • 6.5.1. Phát triển ứng dụng di động (121)
      • 6.5.2. Thêm chế độ học theo nhóm (121)
  • TÀI LIỆU THAM KHẢO (123)

Nội dung

Lời đầu tiên, nhóm thực hiện xin phép được gửi lời cảm ơn chân thành đến vớiKhoa Công nghệ thông tin – Trường Đại học Sư Phạm Kỹ Thuật Thành Phố Hồ ChíMinh đã tạo điều kiện cho nhóm được

TỔNG QUAN VỀ ĐỀ TÀI

Lý do chọn đề tài

Nhu cầu hòa nhập vào cộng đồng quốc tế đã là một yếu tố quan trọng thúc đẩy sự quan trọng của việc học tiếng Anh đối với người Việt Nam Trong môi trường kinh tế toàn cầu ngày nay, tiếng Anh không chỉ là một công cụ giao tiếp mà còn là chìa khóa mở cánh cửa cho cơ hội học vấn và sự nghiệp Do đó, việc đầu tư vào việc học tiếng Anh không chỉ là nâng cao khả năng cá nhân mà còn là một bước quan trọng để hòa mình vào thế giới đa dạng và toàn cầu ngày nay, mang lại nhiều cơ hội và lợi ích cho sự phát triển cá nhân và cộng đồng.

Tuy nhiên xét cho cùng, tiếng Anh cũng chỉ là một công cụ, trong khi thời gian là có hạn, nhưng số lượng công cụ ta cần để chạy theo sự phát triển của thời đại là không ít Ta không thể dành quá nhiều thời gian vào việc phát triển duy nhất một công cụ, và tiếng Anh cũng không nên là công cụ chiếm quá nhiều thời gian. Thay vào đó, xây dựng được một thói quen học tiếng Anh, cụ thể là từ vựng và duy trì thói quen đó một cách bền vững sẽ giúp đạt được những bước tiến rõ rệt mà không gây ra áp lực lớn cho người học.

Trong thời đại hiện đại, các ứng dụng học tiếng Anh đang trở nên ngày càng phức tạp, đôi khi vượt quá mức cần thiết để đáp ứng nhu cầu thực tế của người học.

Sự phức tạp này thường xuất hiện ở mức độ nội dung, giao diện người dùng, và quy trình học tập, tạo ra những thách thức không đáng có và làm mất đi sự tiện lợi của việc học tiếng Anh.

Một số ứng dụng hiện đại đôi khi quá tập trung vào việc tích hợp quá nhiều chức năng, đồng thời cung cấp một lượng lớn thông tin mà không tối ưu hóa cho quá trình học tập cá nhân Điều này có thể làm mất thời gian và gây nhầm lẫn cho người học và không hiệu quả.

VocaHype, trong trường hợp này, là một giải pháp đơn giản và tập trung vào yếu tố quan trọng nhất trong quá trình học tiếng Anh, đó chính là từ vựng Bằng cách tối giản hóa giao diện người dùng và tập trung vào việc học từ vựng theo mức độ phổ biến của nó trong đời sống hằng ngày, mang lại trải nghiệm học tập vừa đơn giản, vừa hiệu quả.

Mục tiêu

Mục tiêu chính của dự án là sử dụng các công nghệ ReactJS, Java Spring Boot, PostgreSQL, Firebase để xây dựng một trang web học từ vựng tiếng Anh hiệu quả dựa trên phương pháp Spaced Repetition Dự án sẽ áp dụng quy trình phát triển phần mềm SCRUM để đảm bảo sự linh hoạt và hiệu quả trong việc quản lý dự án. Việc phát triển source code nói chung tuân theo các nguyên tắc SOLID cơ bản để đảm bảo khả năng mở rộng và bảo trì, cũng như áp dụng các nguyên lý về functional programming trong phát triển Frontend, cũng như JSONAPI trong thiết kế và phát triển REST API.

Công nghệ sử dụng

Front-end: sử dụng ReactJS

Back-end: sử dụng Java Spring Boot

Các dịch vụ khác: Heroku, Netlify, OpenAI, WordsAPI

Phương pháp nghiên cứu

Lý thuyết thực tiễn: Tìm hiểu tính năng, giao diện các trang web và ứng dụng di động học từ vựng tiếng anh có sẵn Tìm hiểu tài liệu về công nghệ sử dụng trong dự án.

Tham khảo chuyên gia: Tham khảo ý kiến của giảng viên hướng dẫn và người có kinh nghiệm liên quan đến các vấn đề của đề tài.

Phát triển mô hình: Phát triển dự án theo mô hình phát triển phần mềm từ đặc tả, thiết kế đến hoàn thành sản phẩm.

CƠ SỞ LÝ THUYẾT

ReactJS

ReactJS là một thư viện JavaScript mã nguồn mở, được phát triển bởi

Facebook, cho việc xây dựng giao diện người dùng (UI) động và linh hoạt ReactJS giúp phát triển ứng dụng web hiệu quả và dễ bảo trì thông qua việc quản lý các thành phần (components) tái sử dụng Được xây dựng dựa trên ý tưởng "One-way data binding," ReactJS tối ưu hóa sự tương tác giữa các thành phần, mang lại trải nghiệm người dùng mượt mà và nhanh chóng.

ReactJS cho phép phân chia UI thành các thành phần độc lập, dễ dàng quản lý và tái sử dụng Tạo điều kiện thuận lợi cho việc phát triển ứng dụng lớn mà không gặp vấn đề về quản lý mã nguồn.

ReactJS sử dụng virtual DOM để tối ưu hóa quá trình render, giảm số lượng thay đổi trên DOM thực tế và cải thiện hiệu suất ứng dụng.

Hỗ trợ Cộng đồng mạnh mẽ.

Khá khó học đối với người mới bắt đầu.

Cần tích hợp với nhiều thư viện và công nghệ khác nhau để xây dựng thành một ứng dụng hoàn chỉnh.

ReactJS giúp xây dựng giao diện người dùng linh hoạt và hiệu quả, đồng thời cung cấp giải pháp hiệu suất cao thông qua virtual DOM.

Với cộng đồng đông đảo và sự hỗ trợ từ Facebook, ReactJS đảm bảo rằng bạn có nguồn lực và kiến thức để giải quyết mọi vấn đề trong quá trình phát triển.

ReactJS có khả năng tích hợp với nhiều thư viện và framework khác, giúp bạn linh hoạt trong việc lựa chọn công nghệ cho dự án của mình.

Firebase

Firebase là một nền tảng phát triển ứng dụng di động và web được cung cấp bởi Google Nó cung cấp một loạt các dịch vụ và công cụ mạnh mẽ cho việc xây dựng và triển khai ứng dụng mà không cần phải quan tâm đến các vấn đề hạ tầng phức tạp Firebase hỗ trợ nhiều tính năng như cơ sở dữ liệu thời gian thực, xác thực người dùng, lưu trữ tệp, hosting và nhiều dịch vụ khác.

Dễ sử dụng và nhanh chóng.

Cơ sở dữ liệu thời gian thực giúp đồng bộ dữ liệu trực tiếp.

Xác thực người dùng đơn giản thông qua nhiều phương tiện.

Lưu trữ tệp linh hoạt và dễ quản lý.

Giới hạn về tính tùy chỉnh.

Chi phí có thể tăng lên khi sử dụng nhiều nguồn lực.

Phát triển nhanh chóng và tập trung vào logic kinh doanh.

Dịch vụ đa chức năng với tích hợp sẵn của Database, Authentication, Hosting, và Analytics.

Hỗ trợ mạnh mẽ từ Google, đảm bảo ổn định và cập nhật liên tục.

Netlify

Netlify là một dịch vụ đám mây cung cấp nền tảng phát triển và triển khai cho các ứng dụng web và trang web Nó giúp đơn giản hóa quá trình xây dựng, triển khai và quản lý ứng dụng mà không đòi hỏi kiến thức chuyên sâu về hạ tầng. Netlify cung cấp các tính năng như triển khai liên tục, quản lý địa chỉ DNS, HTTPS tự động, và nhiều dịch vụ khác để tối ưu hóa quy trình phát triển.

Giao diện người dùng thân thiện và trực quan.

Quy trình triển khai đơn giản và nhanh chóng.

Hỗ trợ triển khai liên tục từ các kho lưu trữ phổ biến như GitHub và GitLab. Cung cấp tính năng quản lý DNS tích hợp, giúp dễ dàng quản lý tên miền.

Tự động cung cấp HTTPS cho tất cả các trang web mà không cần cấu hình phức tạp.

Có thể có giới hạn đối với những ứng dụng đòi hỏi tùy chỉnh cao.

Sử dụng các tính năng mạnh mẽ có thể đi kèm với chi phí tăng lên.

Quy trình xây dựng và triển khai đơn giản giúp tập trung vào phát triển ứng dụng.

Tích hợp liền mạch nhiều dịch vụ như triển khai liên tục, quản lý DNS và HTTPS tự động. Được hỗ trợ mạnh mẽ từ cộng đồng và đội ngũ phát triển Netlify, đảm bảo ổn định và cập nhật liên tục.

Shadcn

Shadcn là một thư viện UI của React Shadcn cung cấp một bộ các thành phần UI được thiết kế sẵn, giúp cho việc phát triển giao diện người dùng React trở nên dễ dàng và nhanh chóng hơn.

Shadcn sử dụng các nguyên tắc thiết kế hiện đại, giúp cho giao diện người dùng của bạn trông đẹp mắt và dễ sử dụng.

Shadcn cung cấp một bộ các thành phần UI được thiết kế sẵn, bao gồm các thành phần cơ bản như nút, hộp văn bản và các thành phần phức tạp hơn như thanh trượt, lịch

Shadcn được xây dựng dựa trên React, vì vậy nó rất dễ sử dụng đối với các lập trình viên React.

Shadcn bao gồm nhiều thành phần UI, vì vậy nó có thể khiến ứng dụng của bạn nặng hơn.

Shadcn cung cấp các thành phần UI được thiết kế sẵn, vì vậy bạn có thể không thể tùy chỉnh chúng theo ý muốn.

Phát triển giao diện người dùng React một cách nhanh chóng và dễ dàng.

Sử dụng các thành phần UI được thiết kế sẵn với chất lượng cao.

Tương thích với nhiều phiên bản ReactJS, trong đó có React 18.

Tailwind CSS

Tailwind CSS là một framework CSS mà không có bất kỳ CSS nào được viết sẵn trước Thay vào đó, Tailwind cung cấp một bộ các class utility giúp thiết kế giao diện web một cách linh hoạt và hiệu quả Với cú pháp dễ đọc và mô-đun, Tailwind CSS giúp người phát triển tạo ra giao diện đẹp và dễ bảo trì mà không làm tăng kích thước của file CSS.

Cú pháp class rõ ràng và dễ đọc, giảm sự phức tạp trong việc quản lý CSS. Cho phép tùy chỉnh mỗi class hoặc thêm các plugin để mở rộng tính năng. Tạo ra CSS hiệu quả mà không tăng kích thước của file CSS quá mức.

Có thể gặp khó khăn trong việc tích hợp với các dự án yêu cầu CSS phức tạp hơn.

Mặc dù đơn giản, nhưng có thể đòi hỏi một thời gian để làm quen với cú pháp và các class utility.

Giúp tăng tốc quá trình phát triển với các class sẵn có.

Dễ dàng tích hợp với nhiều dự án khác nhau và các framework JavaScript.Giảm sự phức tạp của CSS và giúp dễ bảo trì mã nguồn.

useSWR

2.6.1 Giới thiệu useSWR là một hook React giúp quản lý trạng thái dữ liệu và tái sử dụng các request HTTP trong ứng dụng React một cách hiệu quả Được xây dựng trên cơ sở của fetch, useSWR tự động quản lý việc lấy dữ liệu từ server, caching kết quả, và tự động làm mới dữ liệu khi có sự kiện tái sử dụng.

Cung cấp giao diện sử dụng đơn giản và dễ hiểu.

Tích hợp dễ dàng vào các dự án React hiện tại.

Cho phép quản lý trạng thái dữ liệu theo cách tự định nghĩa.

Tự động làm mới dữ liệu khi có sự kiện tái sử dụng, giảm độ phức tạp trong việc quản lý cache.

Mặc dù đơn giản, nhưng có thể gặp khó khăn trong việc tùy chỉnh hành vi một số trường hợp đặc biệt.

Có thể không có sự ổn định như một số thư viện quản lý trạng thái dữ liệu khác.

Giúp quản lý trạng thái dữ liệu một cách hiệu quả và tự động.

Dễ tích hợp vào các dự án React hiện tại mà không cần thay đổi quá nhiều mã nguồn.

Giúp giảm độ phức tạp trong quá trình quản lý cache và làm mới dữ liệu.

Spring Boot

Spring Boot là một framework phát triển ứng dụng Java được xây dựng trên nền tảng Spring Framework Nó cung cấp một cách tiếp cận linh hoạt và hiệu quả để xây dựng ứng dụng Java dựa trên các nguyên tắc "Convention over Configuration" và "Opinionated Defaults" Spring Boot giúp giảm độ phức tạp của việc cấu hình và triển khai ứng dụng Java.

Cung cấp cấu hình mặc định thông minh và tự động cho nhiều tính năng. Giảm độ phức tạp của việc cấu hình, giúp phát triển nhanh chóng.

Tích hợp tốt với nhiều công nghệ và thư viện khác của Java.

Dành cho các dự án lớn, có thể quá mạnh mẽ cho các ứng dụng nhỏ.

Mặc dù giảm độ phức tạp, nhưng có thể giảm khả năng tùy chỉnh cho những trường hợp đặc biệt.

Giúp tăng tốc quá trình phát triển ứng dụng Java với cấu hình mặc định thông minh.

Dễ tích hợp với các thư viện và công nghệ khác của Java.

Cung cấp các tiêu chuẩn và conventions giúp duy trì mã nguồn và triển khai dễ dàng.

PostgreSQL

PostgreSQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở và một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất trên thế giới Với khả năng chịu tải cao, độ tin cậy và tính mở rộng, PostgreSQL là sự lựa chọn ưu việt cho nhiều ứng dụng, từ dự án nhỏ đến các hệ thống quy mô lớn.

2.8.2 Ưu điểm Đảm bảo tính toàn vẹn và nhất quán của dữ liệu thông qua các giao dịch.

Hỗ trợ đồng thời nhiều truy cập người dùng và các kết nối cơ sở dữ liệu. Cung cấp khả năng mở rộng dự án theo nhu cầu và hỗ trợ các kiểu dữ liệu đa dạng.

Hiệu suất có thể giảm khi xử lý các bảng cực kỳ lớn hoặc tăng kích thước cơ sở dữ liệu.

Việc quản lý và cấu hình có thể đòi hỏi kiến thức chuyên sâu về cơ sở dữ liệu.

Cung cấp độ tin cậy cao và đảm bảo toàn vẹn dữ liệu thông qua tính ACID. Linh hoạt trong việc mở rộng để đáp ứng nhu cầu của dự án.

Sự phổ biến và cộng đồng lớn giúp đảm bảo hỗ trợ và cập nhật liên tục.

Spring Data JPA

Spring Data JPA là một phần của dự án Spring Data, cung cấp một cách tiếp cận thuận tiện để tương tác với cơ sở dữ liệu thông qua Java Persistence API (JPA).

Nó giúp giảm độ lặp lại mã nguồn, tăng tốc quá trình phát triển và quản lý truy vấn dữ liệu trong ứng dụng Spring.

Cung cấp các phương thức tiêu biểu để thực hiện thao tác cơ bản với cơ sở dữ liệu, giảm độ phức tạp của mã nguồn.

Sử dụng và tích hợp dễ dàng với Java Persistence API (JPA).

Cho phép viết các truy vấn tùy chỉnh thông qua các annotation hoặc sử dụng query methods.

Có thể gặp khó khăn khi cần các truy vấn phức tạp hoặc tùy chỉnh cao.

Trong một số trường hợp, hiệu suất có thể giảm nếu không tối ưu hóa truy vấn.

Giúp giảm độ lặp lại mã nguồn và tăng tốc quá trình phát triển.

Tích hợp tốt với Spring và JPA, tận dụng sức mạnh của cả hai.

Hỗ trợ truy vấn dữ liệu thông qua các phương thức tiêu biểu và annotation.

Hibernate

Hibernate là một framework ORM (Object-Relational Mapping) cho Java, giúp quản lý truy cập cơ sở dữ liệu thông qua các đối tượng Java Hibernate cung cấp một cách tiếp cận linh hoạt và hiệu quả để ánh xạ dữ liệu giữa cơ sở dữ liệu và đối tượng, giảm độ phức tạp của việc thao tác với cơ sở dữ liệu.

Tích hợp tốt với các ứng dụng Java và Spring Framework.

Giúp ánh xạ dữ liệu giữa đối tượng Java và bảng cơ sở dữ liệu.

Cho phép tùy chỉnh cao và xử lý các trường hợp phức tạp trong quản lý dữ liệu.

Khá khó để làm quen với cách sử dụng và cấu hình.

Trong một số trường hợp, hiệu suất có thể giảm khi xử lý mối quan hệ phức tạp.

Linh hoạt tích hợp với các dự án Java và các framework khác như Spring. Giúp quản lý dữ liệu dưới dạng đối tượng, giảm độ phức tạp của mã nguồn. Cung cấp khả năng tùy chỉnh và xử lý các trường hợp phức tạp trong quản lý dữ liệu.

Liquibase

Liquibase là một công cụ quản lý phiên bản cơ sở dữ liệu và tạo ra các script chuyển đổi dữ liệu (changelog) để duy trì cơ sở dữ liệu ở các phiên bản khác nhau. Với Liquibase, người phát triển có thể quản lý và tự động hóa việc triển khai cơ sở dữ liệu một cách linh hoạt và có thể tái sử dụng.

Duy trì phiên bản cơ sở dữ liệu thông qua các changelog, giúp dễ dàng theo dõi và quản lý.

Tự động hóa quá trình triển khai cơ sở dữ liệu mà không cần phải thực hiện thủ công.

Hỗ trợ nhiều loại cơ sở dữ liệu khác nhau.

Yêu cầu thời gian học cong để làm quen với cú pháp và các khái niệm của Liquibase.

Một số trường hợp đặc biệt có thể yêu cầu tùy chỉnh nâng cao.

Giúp theo dõi và quản lý phiên bản cơ sở dữ liệu một cách hiệu quả.

Tự động hóa quá trình triển khai, giảm rủi ro và đảm bảo tính nhất quán.

Hỗ trợ nhiều loại cơ sở dữ liệu, làm cho nó linh hoạt trong việc triển khai trên nhiều môi trường khác nhau.

WordsAPI

WordsAPI là một dịch vụ API mạnh mẽ giúp cung cấp các thông tin chi tiết về từ vựng trong tiếng Anh, bao gồm định nghĩa, từ đồng nghĩa, phát âm, tần suất sử dụng và nhiều hơn nữa Với WordsAPI, các nhà phát triển có thể dễ dàng tích hợp dữ liệu từ vựng vào ứng dụng của mình để nâng cao trải nghiệm người dùng và hỗ trợ học tập ngôn ngữ.

Thông tin chi tiết và đa dạng: Cung cấp đầy đủ các thông tin về từ vựng như định nghĩa, từ đồng nghĩa, từ trái nghĩa, cách phát âm, và ví dụ sử dụng.

Dễ dàng tích hợp: API được thiết kế thân thiện với nhà phát triển, dễ dàng tích hợp vào các ứng dụng web hoặc di động.

Hỗ trợ phong phú: Hỗ trợ nhiều kiểu dữ liệu khác nhau và khả năng truy vấn linh hoạt, giúp tùy biến theo nhu cầu sử dụng.

Phụ thuộc vào kết nối internet: Cần kết nối internet để truy xuất dữ liệu từ API.

Giới hạn yêu cầu: Một số gói dịch vụ có giới hạn về số lượng yêu cầu mỗi tháng, có thể gây hạn chế cho các ứng dụng có lưu lượng truy cập lớn.

Nâng cao trải nghiệm người dùng: Cung cấp thông tin từ vựng phong phú, giúp người dùng hiểu rõ hơn về từ vựng và ngữ cảnh sử dụng.

Hỗ trợ học tập: Hữu ích cho các ứng dụng giáo dục và từ điển, giúp người học tiếp cận thông tin từ vựng một cách nhanh chóng và hiệu quả.

Tích hợp dễ dàng: Với khả năng tích hợp linh hoạt, WordsAPI là công cụ mạnh mẽ cho các nhà phát triển muốn thêm chức năng từ vựng vào ứng dụng của mình.

OpenAI API

OpenAI API là một nền tảng cung cấp dịch vụ trí tuệ nhân tạo (AI) tiên tiến từ OpenAI Với các mô hình ngôn ngữ mạnh mẽ như GPT-4, OpenAI API cho phép các nhà phát triển tích hợp khả năng hiểu và tạo ngôn ngữ tự nhiên vào các ứng dụng của họ Điều này mở ra nhiều cơ hội sáng tạo và cải thiện trải nghiệm người dùng trên các nền tảng web, di động, và phần mềm.

Khả năng hiểu ngôn ngữ tự nhiên: Mô hình AI có thể hiểu và tạo ra văn bản tự nhiên, hỗ trợ nhiều ngữ cảnh và tình huống khác nhau.

Dễ dàng tích hợp: API cung cấp giao diện đơn giản và tài liệu chi tiết, giúp nhà phát triển dễ dàng tích hợp vào các ứng dụng.

Linh hoạt và mạnh mẽ: Có khả năng thực hiện nhiều tác vụ khác nhau như trả lời câu hỏi, tạo nội dung, tóm tắt văn bản, và nhiều hơn nữa.

Chi phí sử dụng: Đối với các ứng dụng có lượng truy cập lớn, chi phí sử dụng API có thể khá cao.

Phụ thuộc vào kết nối internet: Cần kết nối internet để truy xuất dữ liệu từ API, điều này có thể ảnh hưởng đến hiệu suất trong trường hợp mạng không ổn định.

Hạn chế về dữ liệu riêng tư: Một số ứng dụng yêu cầu xử lý dữ liệu nhạy cảm có thể gặp khó khăn trong việc đảm bảo tính bảo mật khi sử dụng dịch vụ đám mây.

Nâng cao trải nghiệm người dùng: OpenAI API có thể cung cấp các tính năng thông minh như trợ lý ảo, chatbot, và hỗ trợ ngôn ngữ tự nhiên, giúp nâng cao trải nghiệm người dùng.

Hỗ trợ sáng tạo nội dung: Có thể tạo ra nội dung văn bản chất lượng cao, hỗ trợ trong việc viết bài, tạo nội dung marketing, và nhiều hơn nữa.

Tự động hóa và hiệu quả: Giúp tự động hóa các tác vụ liên quan đến ngôn ngữ, tiết kiệm thời gian và nguồn lực cho doanh nghiệp và nhà phát triển.

Technical stack

Hình 2.1 Hình mô tả Technical stack.

PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

WordUp

WordUp là một ứng dụng có tích hợp trí tuệ nhân tạo hỗ trợ quá trình học từ vựng tiếng Anh Người dùng ứng dụng có thể có nền tảng tiếng Anh ở các trình độ khác nhau, từ người mới, trung cấp, thậm chí người bản địa cũng có thể sử dụng để mở rộng vốn từ vựng của mình. Ưu điểm:

- Có trợ lý ảo Lexi: Lexi là một giáo viên AI, nhiệm vụ của Lexi là trò chuyện với người dùng thông qua các nội dung mà người dùng lựa chọn.

- Nội dung học từ vựng đa dạng: WordUp cung cấp từ vựng với nội dung đa dạng, thông qua hình ảnh, video và ví dụ Ta còn có thể lựa chọn các TV Series hoặc bộ phim yêu thích, và WordUp cung cấp một đoạn phim từ đó có chứa từ vựng ta đang học, giúp hiểu rõ từ hơn.

- Chủ đề và thành ngữ: WordUp giúp ta học từ liên quan đến lĩnh vực khác nhau, nghề nghiệp hoặc sở thích Ta có thể chọn từ các chủ đề và danh sách từ để tập trung vào những từ quan trọng và liên quan đến các kỳ thi Ta cũng có thể học thành ngữ và các cụm từ phổ biến.

- Đa nền tảng: Có phiên bản Android, iOS và Windows.

- Vai trò của trợ lý AI Lexi không quá quan trọng khi nhiệm vụ chính vẫn chỉ là nhập vai vào các nhân vật khác nhau và trò chuyện với người dùng.

- Không có phiên bản Web.

Anki

Anki là một ứng dụng học và nhớ từ vựng sử dụng phương pháp học thông qua việc lặp lại (spaced repetition) Spaced repetition là một phương pháp giáo dục dựa trên việc sắp xếp lại thời gian giữa các bài học để tối ưu hóa quá trình học và ghi nhớ thông tin Anki cung cấp một giao diện linh hoạt để người dùng có thể tạo, quản lý và ôn tập bộ từ vựng của mình thông qua việc xem lại các thẻ (cards) học qua thời gian. Ưu điểm:

- Spaced repetition: Anki sử dụng spaced repetition để xác định lịch trình ôn tập phù hợp với từng cá nhân, giúp tối ưu hóa quá trình ghi nhớ Anki tự động xác định thời điểm cần ôn tập lại từ vựng, giúp người học tiết kiệm thời gian.

- Tích hợp nhiều loại thẻ: Ta có thể tạo các thẻ với nhiều loại nội dung khác nhau như hình ảnh, âm thanh, hoặc nghĩa từ.

- Cộng đồng sử dụng lớn: Có một cộng đồng lớn sử dụng Anki, nơi các người dùng khác chia sẻ bộ từ vựng và thẻ của họ, ta có thể sử dụng lại các bộ thẻ đó mà không cần phải tạo lại.

- Giao diện sử dụng đơn giản, dễ hiểu.

- Đa nền tảng: Anki hỗ trợ nhiều nền tảng, bao gồm Windows, macOS, Linux, iOS, Android, giúp người học có thể truy cập từ nhiều thiết bị.

- Chỉ là ứng dụng học Spaced repetition sử dụng flashcard, không phải ứng dụng chuyên về học tiếng Anh.

- Không có các chức năng cá nhân hóa.

- Các bộ thẻ và nội dung của các thẻ phải được tạo thủ công.

Mô hình hóa yêu cầu chức năng

Hình 3.1 Hình lược đồ Usecase.

Descripti Cho phép người dùng đăng ký tài khoản trên ứng dụng on: để sử dụng các tính năng của ứng dụng học tiếng Anh

Trigger: Người dùng muốn đăng ký tài khoản trên ứng dụng.

Pre-Cond ition(s): Người dùng chưa có tài khoản trên ứng dụng.

Post-Con dition(s): Người dùng đã đăng ký thành công tài khoản trên ứng dụng.

1 Người dùng truy cập website Vocahype.

2 Người dùng chọn phương thức đăng ký tài khoản.

3 Người dùng nhập thông tin tài khoản gồm email, tên người dùng, mật khẩu và xác nhận mật khẩu.

4 Hệ thống kiểm tra thông tin tài khoản hợp lệ và tạo tài khoản cho người dùng.

3a Người dùng nhập thông tin tài khoản không hợp lệ.

3a1 Hệ thống hiển thị thông báo lỗi và yêu cầu người dùng nhập lại thông tin tài khoản.

4a Hệ thống kiểm tra thông tin tài khoản không hợp lệ.

4a1 Hệ thống hiển thị thông báo lỗi và yêu cầu người dùng nhập lại thông tin tài khoản.

Bảng 3.1 Bảng đặc tả Usecase đăng ký.

Descripti on: Cho phép người dùng đăng nhập vào ứng dụng để sử dụng các tính năng của ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng muốn đăng nhập vào ứng dụng.

Người dùng đã tạo tài khoản trên ứng dụng.

Người dùng đã đăng nhập thành công vào ứng dụng.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn phương thức đăng nhập bằng tài khoản hoặc đăng nhập bằng tài khoản Google hoặc Facebook.

3 Nếu người dùng chọn đăng nhập bằng tài khoản, người dùng nhập tài khoản và mật khẩu.

4 Hệ thống xác thực thông tin đăng nhập thành công và cho phép người dùng truy cập ứng dụng.

5.Hệ thống ghi nhận hoạt động đăng nhập thành công vào Activity Log.

2a Người dùng chọn phương thức đăng nhập bằng tài khoản Google hoặc Facebook.

2a1 Hệ thống chuyển sang màn hình đăng nhập của Google hoặc Facebook.

3a Người dùng nhập tài khoản Google hoặc Facebook và chọn lệnh đăng nhập.

4a Google hoặc Facebook xác thực thông tin đăng nhập thành công và cho phép người dùng truy cập ứng dụng. Use Case tiếp tục bước 4.

Bảng 3.2 Bảng đặc tả Usecase đăng nhập.

Name: Đặt lại mật khẩu

Descripti on: Cho phép người dùng đặt lại mật khẩu tài khoản trên ứng dụng khi quên mật khẩu.

Trigger: Người dùng muốn đặt lại mật khẩu tài khoản trên ứng dụng.

Người dùng đã có tài khoản trên ứng dụng.

Post-Con dition(s): Người dùng đã đặt lại mật khẩu thành công tài khoản trên ứng dụng.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn phương thức đặt lại mật khẩu.

3 Hệ thống yêu cầu người dùng nhập địa chỉ email đã đăng ký tài khoản.

4 Hệ thống gửi email xác nhận đến địa chỉ email của người dùng.

5 Người dùng xác nhận yêu cầu đặt lại mật khẩu bằng cách nhấn vào đường link trong email.

6 Hệ thống cho phép người dùng đặt lại mật khẩu và yêu cầu người dùng nhập mật khẩu mới.

7 Người dùng nhập mật khẩu mới và xác nhận.

8 Hệ thống xác nhận mật khẩu mới và cho phép người dùng đăng nhập vào ứng dụng.

Alternati ve Flow: 3a Người dùng nhập địa chỉ email không hợp lệ.

3a1 Hệ thống hiển thị thông báo lỗi và yêu cầu người dùng nhập lại địa chỉ email.

5a Người dùng không xác nhận yêu cầu đặt lại mật khẩu trong vòng 1 giờ.

5a1 Hệ thống hủy yêu cầu đặt lại mật khẩu và hiển thị thông báo lỗi cho người dùng.

7a Người dùng nhập mật khẩu mới không hợp lệ.7a1 Hệ thống hiển thị thông báo lỗi và yêu cầu người dùng nhập lại mật khẩu mới.

Bảng 3.3 Bảng đặc tả Usecase Đặt lại mật khẩu.

Descripti on: Cho phép người dùng xoá tài khoản trên ứng dụng.

Trigger: Người dùng muốn xoá tài khoản trên ứng dụng.

Pre-Cond ition(s): Người dùng đã đăng nhập vào tài khoản trên ứng dụng.

Tài khoản của người dùng đã được xoá khỏi ứng dụng.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn phương thức xoá tài khoản.

3 Hệ thống yêu cầu người dùng xác nhận việc xoá tài khoản.

4 Người dùng xác nhận việc xoá tài khoản.

5 Hệ thống xoá tài khoản của người dùng khỏi ứng dụng.

Alternati ve Flow: 3a Người dùng không xác nhận việc xoá tài khoản.

3a1 Hệ thống không xoá tài khoản và quay trở lại trạng thái ban đầu.

Bảng 3.4 Bảng đặc tả Usecase đăng nhập.

Descripti on: Cho phép người dùng quản lý hồ sơ cá nhân trên ứng dụng.

Trigger: Người dùng muốn quản lý hồ sơ cá nhân trên ứng dụng.

Người dùng đã đăng nhập vào tài khoản trên ứng dụng.

Post-Con dition(s): Thông tin hồ sơ cá nhân của người dùng đã được cập nhật trên ứng dụng.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn phương thức quản lý hồ sơ.

3 Hệ thống hiển thị thông tin hồ sơ cá nhân của người dùng.

4 Người dùng có thể thay đổi thông tin hồ sơ cá nhân bao gồm tên, số điện thoại, ảnh đại diện, vv.

5 Người dùng chọn lưu thông tin hồ sơ cá nhân mới.

6 Hệ thống cập nhật thông tin hồ sơ cá nhân của người dùng trên ứng dụng.

4a Người dùng không muốn thay đổi thông tin hồ sơ cá nhân.

4a1 Người dùng quay lại trang quản lý hồ sơ.

5a Người dùng không lưu thông tin hồ sơ cá nhân mới.

5a1 Hệ thống không cập nhật thông tin hồ sơ cá nhân của người dùng trên ứng dụng.

Bảng 3.5 Bảng đặc tả Usecase quản lý hồ sơ.

Descripti on: Cho phép người dùng thay đổi giao diện của ứng dụng sang chế độ Light, Dark hoặc System.

Trigger: Người dùng muốn thay đổi giao diện của ứng dụng.

Người dùng đã đăng nhập vào tài khoản trên ứng dụng.

Giao diện của ứng dụng đã được thay đổi sang chế độ Light, Dark hoặc System.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn nút thay đổi giao diện.

3 Hệ thống hiển thị các tùy chọn giao diện bao gồm Light, Dark và System.

4 Người dùng chọn tùy chọn giao diện mong muốn.

5 Hệ thống thay đổi giao diện của ứng dụng sang chế độ được chọn.

4a Người dùng không chọn tùy chọn giao diện.

4a1 Hệ thống không thay đổi giao diện của ứng dụng.

Bảng 3.6 Bảng đặc tả Usecase Thay đổi giao diện.

3.3.2.7 Thực hiện bài kiểm tra đầu vào

Name: Thực hiện bài kiểm tra đầu vào

Cho phép người dùng thực hiện bài kiểm tra đầu vào để ước tính số lượng từ người dùng đã biết.

Trigger: Người dùng muốn thực hiện bài kiểm tra đầu vào trên ứng dụng.

Người dùng đã đăng nhập vào tài khoản trên ứng dụng.

Post-Con dition(s): Số lượng từ người dùng đã biết được ước tính trên ứng dụng.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn menu ‘Knowledge Check’.

3 Hệ thống cung cấp 50 từ cho người dùng.

4 Người dùng chọn 'I don't know' nếu không biết từ đó, 'Known already' nếu biết từ đó hoặc 'Restart' để lấy bộ 50 từ mới.

5 Hệ thống ước tính số lượng từ người dùng đã biết dựa trên số lượng từ người dùng chọn 'Known already' và 'I don't know'.

6 Hệ thống hiển thị số lượng từ người dùng đã biết.

7 Hệ thống ghi nhận điểm số của người dùng vào Database.

Alternati ve Flow: 4a Người dùng không chọn 'I don't know', 'Known already' hoặc 'Restart'.

4a1 Hệ thống hiển thị thông báo lỗi và yêu cầu người dùng chọn lại.

Bảng 3.7 Bảng đặc tả Usecase Thực hiện bài kiểm tra đầu vào.

Descripti on: Cho phép người dùng xem tiến trình học của mình trên ứng dụng.

Trigger: Người dùng muốn xem tiến trình học của mình trên ứng dụng.

Pre-Cond ition(s): Người dùng đã đăng nhập vào tài khoản trên ứng dụng và đã học từ trên ứng dụng.

Post-Con dition(s): Tiến trình học của người dùng đã được hiển thị trên ứng dụng.

1 Người dùng truy cập website Vocahype.

2 Người dùng chọn phương thức xem tiến trình học.

3 Hệ thống hiển thị thông tin tiến trình học của người dùng bao gồm số giờ đã học, số từ đã học và số lượng từ đã hoàn thành bao nhiêu phần trăm trong 1 tuần.

4 Người dùng có thể xem chi tiết tiến trình học của mình bằng cách chọn từng mục.

Bảng 3.8 Bảng đặc tả Usecase Xem tiến trình học.

3.3.2.9 Đặt thời gian học tập hàng ngày:

Name: Đặt thời gian học tập hàng ngày

Cho phép người dùng đặt thời gian học tập hàng ngày trên ứng dụng.

Trigger: Người dùng muốn đặt lại thời gian học tập hàng ngày trên ứng dụng.

Người dùng đã đăng nhập vào tài khoản trên ứng dụng.

Thời gian học tập hàng ngày của người dùng đã được đặt lại trên ứng dụng.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn menu vào Hồ sơ người dùng.

3 Hệ thống hiển thị các mức thời gian học tập hàng ngày bao gồm Basic, Casual, Regular, Serious, Challenge, Extreme với thời gian học lần lượt hàng ngày 300s, 600s, 900s, 1200s, 1500s, 1800s.

4 Người dùng chọn mức thời gian học tập hàng ngày mong muốn.

5 Hệ thống lưu thời gian học tập hàng ngày của người dùng vào Database.

4a Người dùng không chọn mức thời gian học tập hàng ngày.

4a1 Hệ thống giữ nguyên mức thời gian học tập hàng ngày cũ.

Bảng 3.9 Bảng đặc tả Usecase Đặt thời gian học tập hàng ngày.

Descripti on: Cho phép người dùng học từ vựng trên ứng dụng.

Trigger: Người dùng muốn học từ vựng trên ứng dụng.

Pre-Cond ition(s): Người dùng đã đăng nhập vào tài khoản trên ứng dụng.

Người dùng đã học từ vựng trên ứng dụng.

1 Người dùng truy cập website Vocahype.

2 Hệ thống lấy toàn bộ từ đang có trong database theo thứ tự: người dùng đang học và đã đến hoặc vượt quá thời gian học từ đó, tiếp theo là những từ người dùng chưa học và cuối cùng là những từ người dùng đang học nhưng chưa đến hạn học.

3 Hệ thống hiển thị từ vựng cho người dùng.

4 Người dùng học từ vựng bằng cách xem, nghe và ghi nhớ từ vựng.

5 Người dùng đánh dấu từ vựng đã học hoặc chưa học. Với mỗi từ, người dùng có 5 options để lựa chọn: Mastered - từ nay sẽ bỏ qua từ này, người dùng không cần học nữa;Ignore - từ nay sẽ bỏ qua từ này, người dùng không cần học nữa; Easy - level của người dùng với từ này sẽ tăng thêm 2 level trong phương pháp Spaced Repetition; Normal- level của người dùng với từ này sẽ tăng thêm 1 level trong phương pháp Spaced Repetition; Hard - level của người dùng với từ này sẽ trở về level 2 trong phương pháp Spaced Repetition.

6 Hệ thống lưu kết quả học của người dùng với mỗi từ.

Alternati ve Flow: 4a Người dùng không muốn học từ vựng hiển thị.

4a1 Người dùng chọn menu khác.

Bảng 3.10 Bảng đặc tả Usecase Học từ vựng.

3.3.2.11 Đặt chủ đề cần học

Name: Đặt chủ đề cần học

Cho phép người dùng chọn chủ đề cần học từ vựng trên ứng dụng.

Trigger: Người dùng cần học từ vựng liên quan đến một chủ đề cụ thể trên ứng dụng.

Người dùng đã đăng nhập vào tài khoản trên ứng dụng và có từ vựng trong database.

Post-Con dition(s): Người dùng đã chọn chủ đề cần học và học từ vựng liên quan đến chủ đề đó trên ứng dụng.

Flow: 1 Người dùng truy cập website Vocahype.

2 Người dùng chọn chủ đề cần học từ danh sách các chủ đề được hỗ trợ trên ứng dụng, bao gồm: Comedy, Weddings, Travel, Environment, Groups Voices, Science & Tech, Entertainment, Politics, Sports, Home & Living, Style

& Beauty, Wellness, Business & Finances, Parenting, Food

& Drink, World News, None Hệ thống sẽ ưu tiên lấy những từ đang có trong database liên quan đến chủ đề mà người dùng đã chọn khi người dùng Học từ vựng.

3 Hệ thống lưu Chủ đề người dùng cần học vàoDatabase.

2a Người dùng không muốn chọn chủ đề cần học. 2a1 Người dùng chọn menu khác.

Bảng 3.11 Bảng đặc tả Usecase Đặt chủ đề cần học.

Usecase này cho phép người dùng đăng xuất khỏi ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng muốn đăng xuất khỏi ứng dụng.

Pre-Cond ition(s): Người dùng đã đăng nhập vào ứng dụng.

Post-Con dition(s): Người dùng đã đăng xuất khỏi ứng dụng.

1 Người dùng nhấn vào nút Đăng xuất trên ứng dụng.

2 Ứng dụng gửi yêu cầu đăng xuất đến máy chủ.

3 Máy chủ xác thực yêu cầu đăng xuất.

4 Máy chủ xóa thông tin đăng nhập của người dùng khỏi bộ nhớ.

5 Máy chủ trả về phản hồi đăng xuất thành công cho ứng dụng.

6 Ứng dụng xóa thông tin đăng nhập của người dùng khỏi bộ nhớ cục bộ.

7 Ứng dụng cập nhật trạng thái người dùng thành Đăng xuất.

Bảng 3.12 Bảng đặc tả Usecase Đăng xuất.

Name: Tìm kiếm từ vựng

Usecase này cho phép người dùng tìm kiếm từ vựng trong ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng muốn tìm kiếm một từ vựng cụ thể.

Pre-Cond ition(s): Người dùng đã đăng nhập vào ứng dụng.

Post-Con dition(s): Người dùng đã tìm thấy kết quả tìm kiếm từ vựng.

1 Người dùng nhập từ cần tìm kiếm vào ô tìm kiếm.

2 Ứng dụng gửi yêu cầu tìm kiếm đến máy chủ.

3 Máy chủ tìm kiếm từ vựng theo từ khóa được cung cấp.

4 Máy chủ trả về danh sách kết quả tìm kiếm cho ứng dụng.

5 Ứng dụng hiển thị danh sách kết quả tìm kiếm cho người dùng.

Bảng 3.13 Bảng đặc tả Usecase Tìm kiếm từ vựng.

3.3.2.14 Danh sách từ vựng cần học hàng ngày

Name: Danh sách từ vựng cần học hàng ngày

Usecase này cho phép người dùng xem danh sách từ vựng cần học hàng ngày trong ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng muốn xem danh sách từ vựng cần học hàng ngày.

Pre-Cond ition(s): Người dùng đã đăng nhập vào ứng dụng.

Post-Con Người dùng đã xem danh sách từ vựng cần học hàng dition(s): ngày.

1 Người dùng nhấn vào nút Danh sách từ vựng cần học.

2 Ứng dụng gửi yêu cầu lấy danh sách từ vựng cần học đến máy chủ.

3 Máy chủ trả về danh sách từ vựng cần học cho ứng dụng.

4 Ứng dụng hiển thị danh sách từ vựng cần học cho người dùng.

Bảng 3.14 Bảng đặc tả Usecase Danh sách từ vựng cần học hàng ngày.

3.3.2.15 Danh sách từ vựng cần học hàng ngày theo chủ đề

Name: Danh sách từ vựng cần học hàng ngày theo chủ đề

Usecase này cho phép người dùng xem danh sách từ vựng cần học hàng ngày theo chủ đề trong ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng muốn xem danh sách từ vựng cần học hàng ngày theo chủ đề.

Pre-Cond ition(s): Người dùng đã đăng nhập vào ứng dụng.

Người dùng đã xem danh sách từ vựng cần học hàng ngày theo chủ đề.

1 Người dùng chọn chủ đề từ vựng cần học.

2 Ứng dụng gửi yêu cầu lấy danh sách từ vựng cần học theo chủ đề đến máy chủ.

3 Máy chủ trả về danh sách từ vựng cần học theo chủ đề cho ứng dụng.

4 Ứng dụng hiển thị danh sách từ vựng cần học theo chủ đề cho người dùng.

Bảng 3.15 Bảng đặc tả Usecase Danh sách từ vựng cần học hàng ngày theo chủ đề.

3.3.2.16 Thống kê tiến trình học

Thống kê tiến trình học

Description: Usecase này cho phép người dùng xem thông kê tiến trình học của mình trong ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng muốn xem thống kê tiến trình học của mình.

Người dùng đã đăng nhập vào ứng dụng.

Người dùng đã xem thống kê tiến trình học của mình.

Basic Flow: 1 Người dùng nhấn vào nút Thống kê tiến trình học.

2 Ứng dụng gửi yêu cầu lấy thông kê tiến trình học đến máy chủ.

3 Máy chủ trả về thông kê tiến trình học cho ứng dụng.

4 Ứng dụng hiển thị thông kê tiến trình học cho người dùng.

Bảng 3.16 Bảng đặc tả Usecase Thống kê tiến trình học. 3.3.2.17 Xác nhận email

Description: Usecase này cho phép người dùng xác nhận email của mình trong ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng nhận được email xác nhận từ ứng dụng.

Người dùng đã đăng ký tài khoản trên ứng dụng.Người dùng đã nhận được email xác nhận từ ứng dụng.

Tài khoản của người dùng đã được xác minh.

Basic Flow: 1 Người dùng truy cập vào liên kết xác nhận trong email.

2 Ứng dụng xác minh liên kết.

3 Tài khoản của người dùng được xác minh.

1a Liên kết xác nhận không hợp lệ:

1a1 Ứng dụng hiển thị thông báo lỗi cho người dùng.

Bảng 3.17 Bảng đặc tả Usecase Xác nhận email.

3.3.2.18 Cập nhật thông tin cá nhân

Cập nhật thông tin cá nhân

Description: Usecase này cho phép người dùng cập nhật thông tin cá nhân của mình, bao gồm email, tên và ảnh đại diện trong ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng muốn cập nhật thông tin cá nhân của mình.

Người dùng đã đăng ký tài khoản trên ứng dụng.

Thông tin cá nhân của người dùng đã được cập nhật.

Basic Flow: 1 Người dùng truy cập vào trang Thông tin cá nhân.

2 Người dùng nhập thông tin cá nhân mới.

3 Người dùng nhấn vào nút Cập nhật.

4 Ứng dụng gửi yêu cầu cập nhật thông tin cá nhân đến máy chủ.

5 Máy chủ cập nhật thông tin cá nhân của người dùng.

6 Ứng dụng hiển thị thông báo cập nhật thành công cho người dùng.

3a Người dùng nhập thông tin cá nhân không hợp lệ: 3a1 Ứng dụng hiển thị thông báo lỗi cho người dùng.

Bảng 3.18 Bảng đặc tả Usecase Cập nhật thông tin cá nhân. 3.3.2.19 Đặt lại tiến độ học

Use Case Name: Đặt lại tiến độ học

Description: Usecase này cho phép người dùng đặt lại tiến độ học của mình trong ứng dụng học tiếng anh VocaHype.

Trigger: Người dùng nhận được email xác nhận từ ứng dụng.

Pre-Condition(s): Người dùng đã đăng nhập vào ứng dụng.

Post-Condition(s): Tiến độ học của người dùng đã được đặt lại.

Basic Flow: 1 Người dùng truy cập vào trang Tiến độ học.

2 Người dùng nhấn vào nút Đặt lại tiến độ học.

3 Ứng dụng gửi yêu cầu đặt lại tiến độ học đến máy chủ.

4 Máy chủ đặt lại tiến độ học của người dùng (xoá dữ liệu các từ đã học, đang học, đã ignore, master và kết quả kiểm tra đầu vào của người dùng).

5 Ứng dụng hiển thị thông báo đặt lại tiến độ học thành công cho người dùng.

Alternative Flow: 2a Người dùng không nhấn vào nút Đặt lại tiến độ học.

2a1 Tiến độ học của người dùng không được đặt lại.

Bảng 3.19 Bảng đặc tả Usecase Đặt lại tiến độ học.

3.3.2.20 Thêm Từ vào Chủ Đề

Use Case Name: Thêm Từ vào Chủ Đề

Description: Usecase này cho phép người dùng thêm từ mới vào một chủ đề cụ thể trong ứng dụng học tiếng Anh VocaHype.

Trigger: Người dùng chọn chủ đề và nhấn vào tùy chọn thêm từ.

Pre-Condition(s): Người dùng đã đăng nhập vào ứng dụng và đã chọn một chủ đề cụ thể.

Post-Condition(s): Từ mới được thêm vào chủ đề đã chọn và hiện thị trong danh sách từ của chủ đề.

Basic Flow: 1 Người dùng truy cập vào trang Chủ Đề.

2 Người dùng chọn một chủ đề cụ thể.

3 Người dùng nhấn vào nút Thêm Từ.

4 Ứng dụng hiển thị form nhập thông tin từ mới.

5 Người dùng nhập từ mới và nhấn nút Lưu.

6 Ứng dụng gửi yêu cầu thêm từ mới đến máy chủ.

7 Máy chủ thêm từ mới vào cơ sở dữ liệu và liên kết từ mới với chủ đề đã chọn.

8 Ứng dụng hiển thị thông báo thêm từ thành công và cập nhật danh sách từ của chủ đề.

Alternative Flow: 5a Người dùng không nhập đầy đủ thông tin từ mới.

5a1 Ứng dụng hiển thị thông báo lỗi yêu cầu nhập đủ thông tin.

Bảng 3.21 Bảng thêm Từ vào Chủ Đề.

3.3.2.21 Sửa Từ trong Chủ Đề

Use Case Name: Sửa Từ trong Chủ Đề

Description: Usecase này cho phép người dùng sửa thông tin của từ đã có trong một chủ đề cụ thể trong ứng dụng học tiếng Anh VocaHype.

Trigger: Người dùng chọn từ trong chủ đề và nhấn vào tùy chọn sửa từ.

Pre-Condition(s): Người dùng đã đăng nhập vào ứng dụng và đã chọn một chủ đề cụ thể.

Post-Condition(s): Thông tin từ được cập nhật và hiển thị trong danh sách từ của chủ đề.

Basic Flow: 1 Người dùng truy cập vào trang Chủ Đề.

2 Người dùng chọn một chủ đề cụ thể.

3 Người dùng chọn từ muốn sửa và nhấn vào nút Sửa Từ.

4 Ứng dụng hiển thị form sửa thông tin từ.

5 Người dùng nhập thông tin cập nhật và nhấn nút Lưu.

6 Ứng dụng gửi yêu cầu sửa từ đến máy chủ.

7 Máy chủ cập nhật thông tin từ trong cơ sở dữ liệu.

8 Ứng dụng hiển thị thông báo sửa từ thành công và cập nhật danh sách từ của chủ đề.

Alternative Flow: 5a Người dùng không nhập đầy đủ thông tin cập nhật.

5a1 Ứng dụng hiển thị thông báo lỗi yêu cầu nhập đủ thông tin.

Bảng 3.22 Bảng sửa Từ trong Chủ Đề.

3.3.2.22 Xóa Từ trong Chủ Đề

Use Case Name: Xóa Từ trong Chủ Đề

Description: Usecase này cho phép người dùng xóa từ đã có trong một chủ đề cụ thể trong ứng dụng học tiếng Anh VocaHype.

Trigger: Người dùng chọn từ trong chủ đề và nhấn vào tùy chọn xóa từ.

Pre-Condition(s): Người dùng đã đăng nhập vào ứng dụng và đã chọn một chủ đề cụ thể.

Post-Condition(s): Từ được xóa khỏi chủ đề và không còn hiển thị trong danh sách từ của chủ đề.

Basic Flow: 1 Người dùng truy cập vào trang Chủ Đề.

2 Người dùng chọn một chủ đề cụ thể.

3 Người dùng chọn từ muốn xóa và nhấn vào nút Xóa Từ.

4 Ứng dụng hiển thị thông báo xác nhận xóa từ.

5 Người dùng nhấn nút Đồng Ý để xác nhận xóa từ.

6 Ứng dụng gửi yêu cầu xóa từ đến máy chủ.

7 Máy chủ xóa từ khỏi cơ sở dữ liệu.

8 Ứng dụng hiển thị thông báo xóa từ thành công và cập nhật danh sách từ của chủ đề.

Alternative Flow: 5a Người dùng không nhấn nút Đồng Ý để xác nhận xóa từ.

5a1 Từ không được xóa khỏi chủ đề.

Bảng 3.23 Bảng xóa Từ trong Chủ Đề.

3.3.2.23 Tạo Câu Hỏi Kiểm Tra Kiến Thức Từ Vựng

Use Case Name: Tạo câu hỏi kiểm tra kiến thức từ vựng

Description: Use case này cho phép hệ thống tạo các loại câu hỏi kiểm tra khác nhau để đánh giá kiến thức của người dùng về một từ cụ thể trong ứng dụng học tiếng Anh VocaHype.

Trigger: Người dùng yêu cầu tạo bài kiểm tra cho một từ cụ thể hoặc hệ thống tự động tạo bài kiểm tra như một phần của mô-đun học tập.

Pre-Condition(s): Từ mà bài kiểm tra được tạo ra phải tồn tại trong cơ sở dữ liệu của ứng dụng.

Post-Condition(s): Hệ thống tạo ra một bài kiểm tra gồm các loại câu hỏi khác nhau liên quan đến từ đó.

Basic Flow: 1 Hệ thống nhận yêu cầu tạo bài kiểm tra cho một từ cụ thể.

2 Hệ thống lấy thông tin về từ đó từ cơ sở dữ liệu.

3 Hệ thống tạo ra các loại câu hỏi kiểm tra khác nhau dựa trên thông tin về từ đó:

3.1 Trộn chữ 3.2 Chọn định nghĩa (nhiều lựa chọn) 3.3 Đúng-Sai

3.4 Chọn từ liên quan 3.5 Ghép từ trái nghĩa và đồng nghĩa 3.6 Đoán từ gốc

4 Hệ thống biên soạn các câu hỏi được tạo thành một bài kiểm tra.

5 Hệ thống trả bài kiểm tra đã được tạo về cho người dùng.

Alternative Flow: 3a Hệ thống không thể tìm đủ thông tin về từ đó.

3a1 Hệ thống thử tạo ra một câu hỏi khác.

Bảng 3.24 Bảng tạo câu hỏi kiểm tra kiến thức từ vựng. 3.3.2.24 Gửi Email Nhắc Người Dùng Học

Use Case Name: Gửi email nhắc người dùng học

Description: Use case này cho phép hệ thống gửi email nhắc người dùng học từ vựng Email bao gồm danh sách những từ người dùng cần học trong ngày và sẽ được gửi mỗi 6 tiếng.

Trigger: Hệ thống tự động gửi email nhắc nhở mỗi 6 tiếng nếu người dùng chưa học hết tất cả từ cần học hôm nay.

Pre-Condition(s): Người dùng đã đăng ký nhận thông báo qua email.

Hệ thống có danh sách từ vựng mà người dùng cần học trong ngày.

Post-Condition(s): Người dùng nhận được email nhắc nhở học từ vựng với danh sách từ cần học trong ngày.

Basic Flow: 1 Hệ thống kiểm tra danh sách người dùng đã đăng ký nhận thông báo qua email.

2 Hệ thống lấy danh sách từ vựng cần học của từng người dùng từ cơ sở dữ liệu.

4 Hệ thống tạo nội dung email bao gồm danh sách từ vựng cần học trong ngày.

5 Hệ thống gửi email nhắc nhở đến từng người dùng.

6 Hệ thống lặp lại quá trình này mỗi 6 tiếng.

Alternative Flow: 3a Hệ thống không thể lấy được danh sách từ vựng của người dùng.

3a1 Hệ thống tạo email nhắc nhở với thông báo lỗi và khuyến nghị người dùng kiểm tra lại ứng dụng.

Bảng 3.25 Bảng gửi email nhắc người dùng học.

Lược đồ tuần tự

Hình 3.2 Lược đồ tuần tự Đăng ký.

Hình 3.3 Lược đồ tuần tự Đăng nhập.

Hình 3.4 Lược đồ tuần tự Xác nhận Email.

Hình 3.5 Lược đồ tuần tự Đặt lại mật khẩu.

Hình 3.6 Lược đồ tuần tự Xóa tài khoản.

Hình 3.7 Lược đồ tuần tự Thay đổi giao diện

3.4.7 Thực hiện bài kiểm tra đầu vào

Hình 3.8 Lược đồ tuần tự Thực hiện bài kiểm tra đầu vào

3.4.8 Đặt chủ đề cần học

Hình 3.9 Lược đồ tuần tự Đặt chủ đề cần học

3.4.9 Đặt thời gian học hằng ngày

Hình 3.10 Lược đồ tuần tự Đặt thời gian học hằng ngày

Hình 3.11 Lược đồ tuần tự Tìm kiếm từ vựng

Hình 3.12 Lược đồ tuần tự Đăng xuất

3.4.12 Đặt lại tiến trình học

Hình 3.13 Lược đồ tuần tự Đặt lại tiến trình học

Hình 3.14 Lược đồ tuần tự Học từ vựng

3.4.14 Danh sách từ vựng cần học trong ngày

Hình 3.15 Lược đồ tuần tự Danh sách từ vựng cần học trong ngày 3.4.15 Danh sách từ vựng cần học trong ngày theo chủ đề

Hình 3.16 Lược đồ tuần tự Danh sách từ vựng cần học trong ngày theo chủ đề

3.4.16 Xem hồ sơ cá nhân

Hình 3.17 Lược đồ tuần tự Xem hồ sơ cá nhân

Hình 3.18 Lược đồ tuần tự Làm bài quiz

3.4.18 Gửi email thông báo cho người dùng từ vựng cần học

Hình 3.19 Lược đồ tuần tự Gửi email thông báo cho người dùng từ vựng cần học

Lược đồ lớp

Lược đồ hoạt động

Hình 3.21 Lược đồ hoạt động Đăng ký.

Hình 3.22 Lược đồ hoạt động Đăng nhập.

Hình 3.23 Lược đồ hoạt động Xác nhận Email.

Hình 3.24 Lược đồ hoạt động Đặt lại mật khẩu.

Hình 3.25 Lược đồ hoạt động Xóa tài khoản.

Hình 3.26 Lược đồ hoạt động Thay đổi giao diện

3.6.7 Thực hiện bài kiểm tra đầu vào

Hình 3.27 Lược đồ hoạt động Thực hiện bài kiểm tra đầu vào

3.6.8 Đặt chủ đề cần học

Hình 3.28 Lược đồ hoạt động Đặt chủ đề cần học

3.6.9 Đặt thời gian học hằng ngày

Hình 3.29 Lược đồ hoạt động Đặt thời gian học hằng ngày

Hình 3.30 Lược đồ hoạt động Tìm kiếm từ vựng

Hình 3.31 Lược đồ hoạt động Đăng xuất

3.6.12 Đặt lại tiến trình học

Hình 3.32 Lược đồ hoạt động Đặt lại tiến trình học

Hình 3.33 Lược đồ hoạt động Học từ vựng

3.6.14 Danh sách từ vựng cần học trong ngày

Hình 3.34 Lược đồ hoạt động Danh sách từ vựng cần học trong ngày3.6.15 Danh sách từ vựng cần học trong ngày theo chủ đề

Hình 3.35 Lược đồ hoạt động Danh sách từ vựng cần học trong ngày theo chủ đề

3.6.16 Xem hồ sơ cá nhân

Hình 3.36 Lược đồ hoạt động Xem hồ sơ cá nhân

3.6.17 Tạo quiz kiểm tra từ vựng

Hình 3.37 Lược đồ hoạt động Tạo quiz kiểm tra từ vựng

3.6.18 Gửi email thông báo cho người dùng từ vựng cần học

Hình 3.38 Gửi email thông báo cho người dùng từ vựng cần học

THIẾT KẾ WEBSITE

Thiết kế cơ sở dữ liệu

4.1.1 Sơ đồ thiết kế cơ sở dữ liệu

Hình 4.1 Hình các bảng trong cơ sở dữ liệu.

Hình 4.4 Hình bảng user_word_comprehension.

Hình 4.7 Hình bảng word_topic.

Hình 4.8 Hình bảng user_learning_goal_tracking.

4.1.2 Mô tả thiết kế cơ sở dữ liệu

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 id String Mã định danh duy nhất của người dùng

2 role Role Vai trò của người dùng

(liên kết với bảng Role)

3 loginName String Tên đăng nhập của người dùng

4 secret String Mật khẩu của người dùng

5 encryption String Phương thức mã hóa mật khẩu

6 firstName String Tên của người dùng

7 lastName String Họ của người dùng

8 birthday String Ngày sinh của người dùng

9 gender String Giới tính của người dùng

10 timezone String Múi giờ của người dùng

11 locale String Ngôn ngữ của người dùng

12 status Long Trạng thái của người dùng

(ví dụ: 1 = hoạt động, 0 không hoạt động)

13 loginCount Long Số lần đăng nhập của người dùng

14 createdOn Timestamp Thời điểm người dùng được tạo

15 updatedOn Timestamp Thời điểm thông tin người dùng được cập nhật lần cuối

16 goalSeconds Integer Số giây mục tiêu của người dùng (nếu có)

17 score Integer Điểm của người dùng

18 topic Topic Chủ đề mà người dùng quan tâm (liên kết với bảng Topic)

1 id String Mã định danh duy nhất của người dùng

2 role Role Vai trò của người dùng

(liên kết với bảng Role)

3 loginName String Tên đăng nhập của người dùng

Bảng 4.1 Bảng mô tả thuộc tính của User.

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 id Long Mã định danh duy nhất của chủ đề

2 name String Tên của chủ đề

3 description String Mô tả của chủ đề

4 emoji String Biểu tượng cảm xúc đại diện cho chủ đề

Tập hợp các mối liên kết giữa từ và chủ đề (liên kết với bảng WordTopic)

Bảng 4.2 Bảng mô tả thuộc tính của Topic.

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 userWordCompre hensionID UserWordCom prehensionID Khóa chính tổng hợp, kết hợp từ ID của người dùng và từ để xác định duy nhất mối liên kết này

Integer Mức độ hiểu từ của người dùng

3 nextLearning Timestamp Thời điểm tiếp theo người dùng nên học lại từ này

4 word Word Từ mà người dùng đang học (liên kết với bảng Word)

5 user User Người dùng đang học từ này (liên kết với bảng User)

Bảng 4.3 Bảng mô tả thuộc tính của UserWordComprehension.

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 id Long Mã định danh duy nhất của từ

3 count Long Số lần từ xuất hiện trong dữ liệu (có thể dùng để đánh giá mức độ phổ biến của từ)

4 point Double Điểm số liên quan đến từ

(có thể dùng để đánh giá mức độ khó hoặc dễ của từ)

5 phonetic String Phiên âm của từ

6 syllable Integer Số âm tiết của từ

7 phoneticStart String Âm đầu của từ

8 phoneticEnd String Âm cuối của từ

9 createdOn Timestamp Thời điểm từ được tạo trong hệ thống

10 updatedOn Timestamp Thời điểm thông tin về từ được cập nhật lần cuối

Tập hợp các chủ đề mà từ thuộc về (liên kết với bảng WordTopic)

12 meanings Set Tập hợp các nghĩa của từ

(liên kết với bảng Meaning)

13 synonyms Set Tập hợp các từ đồng nghĩa với từ (liên kết với bảng Synonym)

Tập hợp các thông tin về mức độ hiểu từ của người dùng đối với từ này (liên kết với bảng

Bảng 4.4 Bảng mô tả thuộc tính của Word.

Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 id Long Mã định danh duy nhất của nghĩa

2 word Word Từ vựng mà nghĩa này thuộc về (liên kết với bảng Word)

3 pos Pos Trạng từ của từ trong nghĩa này (liên kết với bảng Pos)

Tập hợp các định nghĩa của nghĩa (liên kết với bảng Definition)

5 synonyms Set Tập hợp các từ đồng nghĩa trong nghĩa này (liên kết với bảng Synonym)

Bảng 4.5 Bảng mô tả thuộc tính của Meaning.

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 topic_id Long Mã định danh xác định topic

2 frequency Integer Độ phổ biến của từ

3 word String Từ thuộc topic

Bảng 4.6 Bảng mô tả thuộc tính của Word Topic.

4.1.2.7 Bảng User Learning Goal Tracking

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 user_id Long Mã định danh xác định user đã được theo dõi

2 date_learn Date Ngày theo dõi học

3 user_learnt_time Integer Số phút user đã học

Bảng 4.7 Bảng mô tả thuộc tính của User Learning Goal Tracking.

Thiết kế giao diện

Hình 4.9 Hình SCU001: Trang đăng nhập.

STT Tên Loại Mô tả

3 Next Button Đăng ký tài khoản mới

4 Google Button Đăng ký bằng một tài khoản Google

5 Facebook Button Đăng ký bằng một tài khoản

Bảng 4.9 Bảng mô tả Trang đăng nhập.

Hình 4.10 Hình SCU002 Trang đăng nhập

STT Tên Loại Mô tả

4 Google Button Đăng nhập bằng một tài khoản

5 Facebook Button Đăng nhập bằng một tài khoản

Bảng 4.10 Bảng mô tả Trang danh đăng nhập.

4.2.2.1 SCU001 Trang Thực hiện bài kiểm tra đầu vào

Hình 4.11 Hình SCU001 Trang Thực hiện bài kiểm tra đầu vào.

STT Tên Loại Mô tả

1 Restart Button Thực một bài kiểm tra mới

2 I don’t know Button Đánh dấu từ chưa biết

3 Know already Button Đánh dấu từ đã biết

Bảng 4.11 Bảng mô tả Trang Thực hiện bài kiểm tra đầu vào.4.2.2.2 SCU002 Trang Học từ vựng

Hình 4.12 Hình SCU002 Trang Học từ vựng.

STT Tên Loại Mô tả

1 Learn Button Đi đến trang chi tiết của từ đó để học từ

2 Ignore Button Đánh dấu không học từ đó mãi mãi

Bảng 4.12 Bảng mô tả Trang Học từ vựng.

4.2.2.3 SCU003 Trang Khám phá các chủ đề

Hình 4.13 Hình SCU003 Trang Khám phá các chủ đề.

STT Tên Loại Mô tả

1 Thanh tiến độ học chủ đề Progression

Bar Thể hiện tiến độ học từ vựng thuộc chủ đề đó

2 Chọn vào một chủ đề Button Đi đến Trang Học từ vựng thuộc chủ đề đó

Bảng 4.13 Bảng mô tả Trang Khám phá các chủ đề.

4.2.2.4 SCU004 Trang tìm kiếm từ

Hình 4.14 Hình SCU004 Trang tìm kiếm từ.

STT Tên Loại Mô tả

1 Từ cần tìm Input Nhập từ cần tìm

Check Đánh dấu tìm chính xác hoàn toàn từ cung cấp

3 Recent Search Grid Các từ mà bạn vửa tìm kiếm, chọn một từ để dẫn đến trang chi tiết từ đó

Bảng 4.14 Bảng mô tả Trang tìm kiếm từ.

4.2.2.5 SCU005 Trang kết quả tìm kiếm từ

Hình 4.15 Hình SCU005 Trang kết quả tìm kiếm từ.

STT Tên Loại Mô tả

1 Chọn một từ Button Đi đến trang chi tiết của từ đó

2 Phát âm từ Button Phát một đoạn âm thanh phát âm từ đó

Bảng 4.15 Bảng mô tả Trang kết quả tìm kiếm từ.

4.2.2.6 SCU006 Trang Hồ sơ người dùng

Hình 4.16 Hình SCU006 Trang Hồ sơ người dùng.

STT Tên Loại Mô tả

1 Email Input Nhập email mới

2 Verified Lable Thể hiện email người dùng đã được xác thực hay chưa

3 Name Input Nhập tên mới

4 Avatar Image Hình đại diện của người dùng, nhấn vào để đổi hình đại diện

5 Update profile Button Thay đổi Hồ sơ người dùng

6 Delete account Button Nhấn vào để xoá tài khoản người dùng ra khỏi hệ thống

7 Daily goal Option Chọn mục tiêu về thời gian học hàng ngày của người dùng

8 Main topic Option Chọn chủ đề từ vựng chính mà người dùng muốn học

Bảng 4.16 Bảng mô tả Trang kết quả tìm kiếm từ.

4.2.2.7 SCU007 Trang Chi tiết từ

Hình 4.17 Hình SCU007 Trang Chi tiết từ.

STT Tên Loại Mô tả

1 Phát âm từ Button Phát một đoạn âm thanh phát âm từ đó

2 Ignore Button Đánh dấu không học từ đó mãi mãi

3 Hard Button Đánh dấu bạn thấy từ đó ở múc độ khó với bạn

4 Normal Button Đánh dấu bạn thấy từ đó ở múc độ bình thường với bạn

5 Easy Button Đánh dấu bạn thấy từ đó ở múc độ dễ với bạn

6 Masterd Button Đánh dấu bạn đã thành thạo từ đó, sẽ không cần học từ đó trong tương lai

7 Part of speech Option Chọn loại từ của từ

8 Previous Button Chuyển về ý nghĩa trước đó của từ

9 Next Button Chuyển đến ý nghĩa tiếp theo của từ

Bảng 4.17 Bảng mô tả Trang Chi tiết từ.

4.2.2.8 SCU008 Trang Thống kê tiến trình học

Hình 4.18 Hình SCU007 Trang Chi tiết từ.

STT Tên Loại Mô tả

“Learning” Link Chuyển đến trang hiện danh sách tất cả các từ vựng có status “Learning - Đang học”

Link Chuyển đến trang hiện danh sách tất cả các từ vựng có status “Mastered - Đã học xong”

“Ignored” Link Chuyển đến trang hiện danh sách tất cả các từ vựng có status “Ignored - Đã bỏ qua”

4 Date range picker DatePicker Chọn ngày bắt đầu và ngày kết thúc để xem thời gian học các ngày giữa đó

Bảng 4.18 Bảng mô tả Trang Chi tiết từ.

4.2.2.9 SCU009 Trang tạo story theo các từ đã học

Hình 4.18 Hình SCU008 Tạo story theo các từ đã học.

STT Tên Loại Mô tả

1 Date Range Slider Chọn khoảng thời gian muốn học để hiện danh sách từ đã học để tạo story tương ứng.

2 Generate/Regener ate Button Tạo story.

Bảng 4.19 Bảng mô tả Trang tạo story.

4.2.2.10 SCU010 Trang tạo bài kiểm tra trắc nghiệm

Hình 4.18 Hình SCU008 Trang tạo bài trắc nghiệm theo các từ đã học

STT Tên Loại Mô tả

1 Date Range Slider Chọn khoảng thời gian muốn học để hiện danh sách từ đã học để tạo bài kiểm tra trắc nghiệm tương ứng.

2 Generate/Regener ate Button Tạo story.

Bảng 4.19 Bảng mô tả Trang tạo bài kiểm tra trắc nghiệm. 4.2.3 Màn hình của Admin

4.2.3.1 SCA001 Trang Update Topic/Tạo Topic

Hình 4.19 Hình SCA001 Trang Trang Update Topic/Tạo Topic.

STT Tên Loại Mô tả

1 Restart Button Thực một bài kiểm tra mới

2 I don’t know Button Đánh dấu từ chưa biết

3 Know already Button Đánh dấu từ đã biết

Bảng 4.20 Bảng mô tả tạo/update topic.

4.2.3.2 SCA001 Trang quản lý topic

Hình 4.20 Hình SCU001 Trang quản lý topic.

STT Tên Loại Mô tả

1 Restart Button Thực một bài kiểm tra mới

2 I don’t know Button Đánh dấu từ chưa biết

3 Know already Button Đánh dấu từ đã biết

Bảng 4.21 Bảng mô tả Trang quản lý topic.

KIỂM THỬ HỆ THỐNG

Thông tin chung về kiểm thử

Website VocaHype sẽ bao gồm phần Front-end chứa giao diện và phần Back-end chứa các code để gắn vào front-end Ở đây nhóm thực hiện khóa luận tiếp cận kiểm thử ứng dụng thông qua một số kỹ thuật black-box testing (kiểm thử hộp đen): functional testing và UI testing.

Mục đích tổng thể của việc thử nghiệm là đảm bảo ứng dụng đáp ứng được toàn bộ nhu cầu về kĩ thuật, chức năng trong quá trình người dùng sử dụng.

Máy tính cá nhân hoặc thiết bị iOS 16 có kết nối mạng Internet để có thể truy cập vào trang web âm nhạc vocahype.netlify.app bằng trình duyệt.

Các chức năng của trang web VocaHype được kiểm tra trên các trình duyệt Microsoft Edge, Google Chrome và Safari Mobile.

Hệ điều hành được sử dụng là Microsoft Windows 10 và iOS 16.

5.1.4.1 Những chức năng được kiểm thử Đăng ký

- Kiểm thử chức năng đăng nhập bằng địa chỉ email và mật khẩu.

- Kiểm thử chức năng đăng ký tài khoản bằng Google. Đăng nhập

- Kiểm thử chức năng đăng nhập bằng địa chỉ email và mật khẩu.

- Kiểm thử chức năng đăng nhập bằng Google. Đăng xuất

- Kiểm thử chức năng đăng xuất sau khi đã đăng nhập

- Kiểm thử chức năng tự động đăng xuất sau khi session hết hiệu lực

Quản lý hồ sơ cá nhân

- Kiểm thử chức năng hiển thị và cập nhật thông tin cá nhân.

- Kiểm thử chức năng thay đổi ảnh đại diện.

- Kiểm thử chức năng xem chi tiết của một từ vựng (nghĩa của từ, ví dụ, phát âm, ).

- Kiểm thử chức năng Spaced-Repetition để học một từ vựng (như học lại trong 1, 3, 7, 14, 30, 60, 180 ngày tiếp theo) hoặc bỏ qua một từ vựng.

- Kiểm thử chức năng trì hoãn một từ sang ngày hôm sau hoặc tuần sau.

- Kiểm thử danh sách từ vựng cần học trong ngày.

- Kiểm thử chức năng tìm kiếm một từ vựng có chứa cụm từ đã nhập.

- Kiểm thử chức năng tìm kiếm từ đối sánh chính xác với cụm từ đã nhập.

Thực hiện bài kiểm tra đầu vào

- Kiểm thử chức năng làm bài kiểm tra đầu vào cho người dùng chưa thực hiện bài kiểm tra.

- Kiểm thử chức năng sử dụng bàn phím để điều hướng trong trang web.

- Kiểm thử chức năng thay đổi giao diện nền tối/sáng.

- Kiểm thử khả năng hiển thị của website trên các kích cỡ màn hình khác nhau.

5.1.4.2 Những chức năng không được kiểm thử

Những chức năng còn lại có đặc tả trong khóa luận nhưng không được liệt kê ở trên:

● Các cài đặt học tập như: đặt thời gian học mục tiêu mỗi ngày và chủ đề cần học.

● Thống kê tiến độ học tập.

Tổng quan test case

Use case Loại kiểm thử Số lượng

Thực hiện bài kiểm tra đầu vào Functional testing 6

Tìm kiếm từ vựng Functional testing 7

Thay đổi giao diện Functional testing 3

UI Testing 1 Đăng nhập Functional testing 9 Đăng ký Functional testing 9

Cập nhật thông tin cá nhân

Học từ vựng Functional testing 11

Bảng 5.1 Tổng quan tất cả test case

Test case

Test ID Test type Description Status

Use case: Thực hiện bài kiểm tra đầu vào

Hiển thị loading khi đang gọi data, gọi xong danh sách từ được hiển thị trên màn hình, vị trí từ hiện tại là 1

Khi bấm nút "Known already" hoặc "I don't know" thì vị trí từ hiện tại tăng lên 1, từ cũ mất đi, từ tiếp theo hiện ra

Khi bấm nút "Reset", dialog xác nhận hiện ra

- Bấm xác nhận: màn hình gọi lại danh sách từ, hiển thị màn hình loading, load xong từ mới hiện ra và vị trí từ hiện tại là 1

Khi bấm nút "Reset", dialog xác nhận hiện ra

- Bấm hủy: dialog xác nhận tắt

Khi ở vị trí từ cuối cùng (50), khi bấm nút

"Known already" hoặc "I don't know" thì màn hình gọi hệ thống tính điểm, load xong màn hình điểm hiện ra cho người dùng

Khi ở màn hình hiện điểm, bấm nút "Go to learn page" dẫn người dùng đến trang /learn

- Khi ở màn hình lớn (>1024px width) thì dãy số hiển thị vị trí từ hiện tại hiện theo hàng dọc, bên tay phải màn hình

- Khi ở màn hình lớn (

Ngày đăng: 18/11/2024, 16:25

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN