TÍNH CẤP THIẾT CỦA ĐỀ TÀI Kỳ thi TOEIC Test of English for International Communication là một trong những bài kiểm tra tiếng Anh phổ biến nhất trên toàn cầu, được sử dụng để đánh gi
MỤC ĐÍCH CỦA ĐỀ TÀI
Mục tiêu chính của đề tài này tập trung vào việc xây dựng một trang web để hỗ trợ việc học TOEIC và thi Toeic thật chất lượng, có khả năng tương tác cao và mang lại giá trị thiết thực cho người dùng Trang web sẽ được thiết kế với mục đích cung cấp một nền tảng ôn luyện và thi cử TOEIC linh hoạt, hiệu quả và thân thiện với người dùng Đặt trọng điểm vào việc tạo ra giao diện người dùng dễ sử dụng và thân thiện, trang web sẽ cung cấp các tài liệu ôn luyện đa dạng, bao gồm bài tập, đề thi mẫu và cơ chế phản hồi sau bài thi Mục tiêu là giúp người dùng có thể rèn luyện kỹ năng tiếng Anh một cách toàn diện và tự tin chuẩn bị cho kỳ thi TOEIC chính thức
Trang web sẽ cung cấp các bài thi mô phỏng gần với định dạng, độ khó và cấu trúc của kỳ thi TOEIC thực tế, từ đó giúp người dùng làm quen và nắm vững hơn về loại câu hỏi và phong cách của bài thi
Mục tiêu cuối cùng của dự án là tối ưu hóa kết quả và phản hồi ngay sau khi hoàn thành bài thi, giúp người dùng hiểu rõ hơn về điểm số và nhận phản hồi chi tiết về các khía cạnh cần cải thiện Đồng thời, chúng tôi cũng định hướng mở rộng tính năng và khả năng tương tác của trang web để đáp ứng nhu cầu ngày càng đa dạng của người học Với những mục tiêu này, chúng tôi hy vọng có thể đem lại một nền tảng thi TOEIC trực tuyến chất lượng, hỗ trợ người học chuẩn bị và cải thiện điểm số TOEIC một cách hiệu quả và linh hoạt.
Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN
Sau khi hoàn thiện đề tài, em sẽ tiếp tục rèn luyện, tiếp thu những đóng góp của thầy cô hướng dẫn cũng như phản biện để thực hiện triển khai những chức năng nâng cao, còn dang dở cũng như phát triển hệ thống lên một bước phát triển mới để có thể phát hành thực tế trong cuộc sống
Khi đề tài em được áp dụng vào thực tế, khách hàng sẽ có một lựa chọn trong hệ thống website thi toeic dựa vào những chức năng linh hoạt có trong hệ thống
CƠ SỞ LÝ THUYẾT
ĐỀ TÀI NGHIÊN CỨU
1.1.1 Cấu trúc của đề thi Toeic Đề thi Toeic bao gồm 2 phần: Nghe – Đọc Và bao gồm 7 part
Listening Nội dung thi Số câu Chi tiết
Xem 1 bức tranh trong đề và nghe 4 đáp án
Chọn đáp án phù hợp nhất mô tả về bức tranh
Nghe 1 câu hỏi và lựa chọn trả lời cho từng câu hỏi
Chọn đáp án phù hợp nhất với câu hỏi (Câu hỏi không có trong đề thi)
Nghe 13 đoạn ngắn không in trong đề thi Mỗi đoạn có 3 câu hỏi, mỗi câu sẽ có 4 đáp án lựa chọn
Chọn đáp án đúng nhất
Part 4 Bài nói chuyện ngắn 30
Nghe 10 đoạn thông tin ngắn (chỉ có 1 người nói) mỗi đoạn có 3 câu hỏi (Có dạng kết hợp thông tin nghe với biểu đồ, hình ảnh để trả lời)
Chọn đáp án đúng nhất
Bảng 1: Cấu trúc phần thi nghe
Reading Nội dung thi Số câu Chi tiết
Part 5 Hoàn thành câu 30 Gồm các câu được điền khuyết
Chọn đáp án phù hợp nhất về chỗ khuyết
Part 6 Hoàn thành đoạn văn 16 Gồm 4 bài đọc ngắn, mỗi bài có 3 chỗ trống cần điện từ hoặc cụm từ
Chọn đáp án phù hợp nhất chỗ trống
Gồm 10 đoạn đơn, có nội dung dựa trên các tài liệu đọc như thư từ, thông báo, biểu mẫu, báo Hết mỗi đoạn văn sẽ có 2-5 câu hỏi và 4 lựa chọn
Chọn đáp án đúng nhất Đoạn kép 25
Có 2 đoạn văn kép và 3 đoạn ba, 5 câu hỏi mỗi đoạn, mỗi câu hỏi có 4 phương án trả lời A, B,
Chọn đáp án đúng nhất
Bảng 2: Cấu trúc phần thi đọc
1.1.2 Đặc điểm nổi bật của kỳ thi TOEIC
Thời gian: Kỳ thi có thời gian làm bài cố định – 120 phút Điểm số: Được chia thành điểm nghe và điểm đọc, tổng điểm là 990 điểm Kiểm tra thực tế: Các nội dung trong bài thi phản ánh lại các tình huống và giao tiếp thực tế trong công việc và cuộc sống hàng ngày Đánh giá kỹ năng: TOEIC đánh giá khả năng nghe, nói, đọc và viết, tuy nhiên, tập trung chủ yếu vào kỹ năng nghe và đọc
1.1.3 Khảo sát các website khác trên mạng
Study4 là một trang web mục đích chính là bán khóa học online bên cạnh đó nó còn cung cấp việc thi thử miễn phí với giao đề thi sát với thực tế Study4 cung câp nhiều dạng luyện như IELSTS, TOEIC, và tiếng anh THPT, sách giáo khoa,
Study4 cũng là một trong những website hàng đầu trong việc luyện thi Toeic với với nguồn tài liệu đồi dào, thay đổi theo từng năm Cùng với loạt những tính năng cực kì hữu ích hỗ trợ một cách toàn diện trong quá trình chuẩn bị cho kỳ thi TOEIC Ưu điểm của Study4:
• Miễn phí: Được test TOEIC online miễn phí Bất kỳ ai muốn nâng cao các kỹ năng TOEIC đều có thể tham gia bài thi thử mà không cần trả bất kỳ khoản phí nào
• Thư viện đề thi phong phú: Trang web cung cấp một thư viện đề thi phong phú với nhiều bộ đề luyện thi TOEIC, IELTS,THPT,
• Nhiều chế độ luyện tập đa dạng: Đa dạng về chế độ luyện tập Bạn có thể chọn luyện full bộ đề, luyện một kỹ năng duy nhất, luyện một phần cụ thể của bài thi TOEIC
• Đáp án giải thích bằng tiếng Việt: Cung cấp đáp án cùng giải thích chi tiết bằng tiếng Việt Điều này giúp người học hiểu rõ hơn về bài làm, giúp cải thiện kỹ năng TOEIC một cách hiệu quả
• Diễn đàn thảo luận tích cực: Sau khi hoàn thành bài làm, có diễn đàn thảo luận để trao đổi với các thí sinh khác
• Có thể ôn tập qua flashcard và highlight từ mới chưa biết
• Thiếu giao tiếp với người dùng: Thiếu sự tương tác nhắc nhỡ người dùng
• Không có lưu trạng trạng thái người dùng khi mất kết nối
Zenlish cũng là một trang web mục đích chính là bán khóa học online bên cạnh đó nó còn cung cấp việc thi thử miễn phí với giao đề thi sát với thực tế Ưu điểm của Zenlish:
• Miễn phí: Được test TOEIC online miễn phí Bất kỳ ai muốn nâng cao các kỹ năng TOEIC đều có thể tham gia bài thi thử mà không cần trả bất kỳ khoản phí nào
• Tài liệu: Zenlish có cung cấp nhiều tài liệu học và thi Toeic, đề người dùng có thể tự học
• Giảng viên và khóa học: Web cung cấp đầy đủ thông tin về giảng viên và khóa học đề học viên có thể lựa chọn
• Nhiều chế độ luyện tập đa dạng: Đa dạng về chế độ luyện tập Bạn có thể chọn luyện full bộ đề, luyện một kỹ năng duy nhất, luyện một phần cụ thể của bài thi TOEIC
THIẾT KẾ HỆ THỐNG
• Đáp án giải thích bằng tiếng Việt: Cung cấp đáp án cùng giải thích chi tiết bằng tiếng Việt Điều này giúp người học hiểu rõ hơn về bài làm, giúp cải thiện kỹ năng TOEIC một cách hiệu quả
• Giao diện: không thân thiện gây rắc rối cho người dùng
Thống kê: Không lưu kết quả bài test của người dùng
Kiến trúc trong từng springboot được kết hợp giữa mẫu thiết kế Client-Server cùng với kiến trúc N-Tier Layer Có luồng đi và các lớp xử lý trong từng layer như sau:
Hình 3: Thiết kế ứng dụng
Hình 4: Kiến trúc hệ thống.
CÔNG NGHỆ SỬ DỤNG
Angular là một nền tảng ứng dụng web mã nguồn mở do Google phát triển, được sử dụng rộng rãi để xây dựng các ứng dụng web động, đơn trang (SPA)
❖ Triển khai trong dự án:
• Sử dụng Angular để phát triển giao diện người dùng (UI) của ứng dụng, tạo ra các thành phần (components) và dịch vụ (services) để quản lý dữ liệu và tương tác với backend
• Sử dụng Angular HTTPClient để giao tiếp với API backend, thực hiện các thao tác như lấy, thêm, sửa, và xóa dữ liệu một cách hiệu quả
• Sử dụng Angular Router để điều hướng giữa các trang trong ứng dụng một cách mượt mà mà không cần tải lại toàn bộ trang
1.3.1.2 So sánh Angular và các ngôn ngữ khác
Tiêu chí Angular ReactJS VueJS
Nhà phát triển Google Facebook Alibaba
Lớn, nhiều tài nguyên, hỗ trợ bởi Google
Lớn, nhiều tài liệu và bản vá Đang phát triển, dễ tiếp cận
Yêu cầu kiến thức sâu về TypeScript
Phù hợp cho người có kinh nghiệm với JavaScript
Dễ học, phù hợp cho người mới bắt đầu
Mô hình MVC (Model-View-
Dự án lớn, doanh nghiệp với nhiều tính năng
Phát triển trang web hiện đại và ứng dụng native cho iOS và Android
Dự án nhỏ, startup với SPA
Tái sử dụng mã Có Có Có
Thời gian tải Cao Trung bình Thấp
Bảng 3: So sánh giữa Angular và các ngôn ngữ khác
❖ Kết luận chọn Angular thay vì ReactJS hay VueJS:
Angular được phát triển và duy trì bởi Google, đảm bảo tính ổn định và cập nhật thường xuyên Với một cộng đồng lớn và nhiều tài nguyên, việc tìm kiếm hỗ trợ và giải quyết vấn đề trở nên dễ dàng hơn Angular được thiết kế để phục vụ cho các dự án lớn và doanh nghiệp với nhiều tính năng, phù hợp với nhu cầu của các dự án quy mô lớn và cần sự quản lý chặt chẽ Sử dụng TypeScript, Angular cung cấp tính năng kiểm tra lỗi biên dịch và hỗ trợ lập trình hướng đối tượng, giúp phát triển ứng dụng an toàn và dễ dàng hơn Ngoài ra, Angular
29 cho phép tái sử dụng mã nguồn thông qua các module và component, tối ưu hóa quy trình phát triển và giảm thiểu thời gian phát triển Sự hỗ trợ mạnh mẽ từ cộng đồng cũng giúp giải quyết các vấn đề một cách nhanh chóng và hiệu quả
Bootstrap là một framework CSS mã nguồn mở, giúp phát triển giao diện web nhanh chóng và dễ dàng với các thành phần giao diện (UI components) được thiết kế sẵn
❖ Triển khai trong dự án
• Sử dụng các thành phần UI của Bootstrap như buttons, forms, và modals để thiết kế giao diện người dùng trực quan và dễ sử dụng
• Sử dụng hệ thống lưới (grid system) của Bootstrap để tạo ra các trang web có khả năng tương thích với nhiều kích thước màn hình khác nhau, từ máy tính bàn đến điện thoại di động
• Tùy chỉnh các biến CSS của Bootstrap để phù hợp với phong cách thiết kế riêng của dự án, tạo ra một giao diện nhất quán và thẩm mỹ
• Sử dụng các thư viện tích hợp Bootstrap với Angular như ng-bootstrap hoặc ngx-bootstrap để dễ dàng sử dụng các thành phần Bootstrap trong ứng dụng Angular, giúp việc phát triển trở nên nhanh chóng và hiệu quả hơn
30 jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn
❖ Các module phổ biến của jQuery bao gồm:
• Atributes – Xử lý các thuộc tính của đối tượng HTML
• Effect – xử lý hiệu ứng
• Event – xử lý sự kiện
• Form – xử lý sự kiện liên quan tới form
• DOM – xử lý Data Object Model
• Selector – xử lý luồng lách giữa các đối tượng HTML
Spring Boot là một dự án con của Spring Framework, được thiết kế để giúp lập trình viên xây dựng ứng dụng Java một cách nhanh chóng và dễ dàng Nó giúp giảm độ phức tạp của việc cấu hình và triển khai ứng dụng Java bằng cách cung cấp các giải pháp mặc định và cấu hình tự động
Spring Boot là một framework phát triển ứng dụng Java mạnh mẽ và phổ biến
Sử dụng Spring Boot cho phần backend giúp bạn xây dựng ứng dụng ổn định, dễ quản lý và dễ mở rộng Nó cung cấp một kiến trúc dựa trên các mô hình thiết kế tốt như MVC (Model-View-Controller) và hỗ trợ cho RESTful API, điều này rất phù hợp cho việc phát triển ứng dụng di động
REST (Representational State Transfer) là một kiến trúc mô hình ứng dụng web dựa trên các nguyên tắc cơ bản như truy cập tài nguyên thông qua các URI (Uniform Resource Identifiers) và sử dụng các phương thức HTTP như GET, POST, PUT, DELETE RESTful API (Application Programming Interface) là một cách thiết kế API sử dụng các nguyên tắc của REST
❖ Triển khai trong dự án
• Spring Boot cung cấp các cấu hình mặc định và các starter dependencies, giúp giảm bớt thời gian và công sức cần thiết để cấu hình ứng dụng
• Tích hợp dễ dàng với các thành phần của Spring như Spring Data, Spring Security, giúp xây dựng các ứng dụng web và dịch vụ RESTful một cách hiệu quả
• Sử dụng cơ chế quản lý phụ thuộc của Spring Boot để quản lý và tiêm các phụ thuộc (dependency injection) một cách dễ dàng, giúp mã nguồn trở nên gọn gàng và dễ bảo trì
Spring Boot JPA là một bản ghi chi tiết của Java để quản lý dữ liệu quan hệ trong các ứng dụng Java JPA tuân theo Object-Relation Mapping (ORM) Nó là một tập hợp các interface Nó sử dụng ngôn ngữ truy vấn hướng đối tượng độc lập nền tảng JPQL (Java Persistent Query Language)
Hibernate là một framework ORM (Object-Relational Mapping) mã nguồn mở, được sử dụng để thực hiện ánh xạ đối tượng-relational và quản lý các tương tác với cơ sở dữ liệu
❖ Triển khai trong dự án
• Hibernate tự động ánh xạ các lớp Java với các bảng cơ sở dữ liệu, giúp giảm bớt công sức viết mã SQL thủ công
• Quản lý các phiên làm việc với cơ sở dữ liệu, giúp đảm bảo các phiên giao dịch được thực hiện một cách an toàn và hiệu quả
• Spring Data JPA giúp xác định các repository một cách dễ dàng thông qua việc tạo các interface
• Hỗ trợ quản lý mối quan hệ giữa các đối tượng thông qua các annotation như
• Tận dụng khả năng phân trang và sắp xếp dữ liệu một cách thuận tiện
• Quản lý giao dịch thông qua annotation để đảm bảo tính nhất quán dữ liệu
MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database Management System, viết tắt là RDBMS) hoạt động theo mô hình client-server RDBMS là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database) theo hình thức quản lý các mối liên hệ giữa chúng MySQL là một trong số các phần mềm RDBMS RDBMS và MySQL thường được cho là một vì độ phổ biến quá lớn của MySQL Các ứng dụng web lớn nhất như Facebook, Twitter, YouTube, Google, và Yahoo! đều dùng MySQL cho mục đích lưu trữ dữ liệu Kể cả khi ban đầu nó chỉ được dùng rất hạn chế nhưng giờ nó đã tương thích với nhiều hạ tầng máy tính quan trọng như Linux, macOS, Microsoft Windows, và Ubuntu
❖ Triển khai trong dự án
• Sử dụng MySQL để lưu trữ dữ liệu của ứng dụng, từ thông tin người dùng đến dữ liệu hệ thống
• Quản lý dữ liệu như tìm kiếm, sắp xếp, và truy vấn dữ liệu, giúp ứng dụng hoạt động mượt mà và hiệu quả
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
XÁC ĐỊNH YÊU CẦU
❖ Chức năng của Người dùng:
✓ Đăng ký / Đăng nhập o Bằng email o Bằng tài khoản Google o Bằng tài khoản Facebook
✓ Luyện thi (miễn phí) o Theo Part o Full đề
✓ Thi thật (dành cho thành viên)
✓ Bình luận ở mỗi đề thi
✓ Chatbot hỗ trợ học tập: o Miễn phí:LLAMAS & PALM2: Chỉ có khả năng trả lời các câu hỏi độc lập mà không thể liên kết chúng với các câu hỏi trước đó o Dành cho thành viên: CHAT GPT & GEMINI: Có khả năng trả lời các câu hỏi liên kết với câu hỏi ở phía trước
✓ Chatbox hỗ trợ dịch vụ - chăm sóc khách hàng
✓ Blog cập nhật đề thi, trao đổi tài liệu học tập
✓ Xem kết quả các bài thi cũ
✓ Xem thống kê kết quả sau khi thi/luyện đề xong
✓ Xem trang cá nhân: o Chỉnh sửa thông tin cá nhân o Chỉnh sửa ảnh đại diện o Xem lịch sử chỉnh sửa
✓ Thanh toán mua gói thành viên, thời hạn vĩnh viễn dành cho mỗi account: o Visa o Paypal / VNPay
✓ Quản lý người dùng o Block o UnBlock
✓ Xem hoạt động người dùng
✓ Quản lý bộ đề thi o Thêm bộ đề o Xóa bộ đề o Sửa bộ đề
✓ Quản lý đề thi o Thêm đề thi o Xóa đề thi o Sửa đề thi o Import đề bằng file Excel
✓ Quản lý bảng tính điểm cho đề thi o Thêm bảng tính điểm o Xóa bảng tính điểm o Sửa bảng tính điểm
✓ Import đề thi từ website Study4
✓ Lấy transcript từ đoạn mp3 và sử dụng translate từ: o Google cloud : Google Speech to Text o Java: Rev-ai
✓ Quản lý lịch sử lấy transcript
✓ Quản lý lịch sử lấy data đề thi
✓ Quản lý blog bằng o Thêm blog bằng Tiny editor o Xóa blog o Sửa blog
✓ Config các tài khoản Firebase, Kommunicate, Rev-ai, Email
✓ Quản lý Template email để gửi về cho người dùng o Thêm template
2.1.2 Yêu cầu phi chức năng
✓ Giao diện thân thiện với người dùng
✓ Lưu kết quả thi khi bị ngắt kết nối
✓ Không cho phép một tài khoản đăng nhập cùng lúc 2 máy khi đang thi
✓ Đề thi lấy từ website Study4 đảm bảo đúng với format của bộ đề ETS
✓ Trong lúc thi thật nếu di chuyển con trỏ chuột ra ngoài thì sẽ hiện cảnh báo
✓ Hệ thống dễ bảo trì và phát triển
✓ Có khả năng tái sử dụng lại
✓ Responsive với nhiều thiết bị.
MÔ HÌNH HÓA YÊU CẦU
Hình 24: Lược đồ Usecase của Guest
Hình 25:Lược đồ Usecase của User
Hình 26: Lược đồ Usecase của Admin
2.2.3 Mô tả Use Case và Sequence Diagram
Cho phép người dùng đăng ký tài khoản mới Use case này cung cấp một quy trình đơn giản và tiện lợi để thu thập thông tin cần thiết từ người dùng để tạo một tài khoản mới
Tiền điều kiện Không có
Hậu điều kiện Người dùng đăng ký thành công và có tài khoản trong hệ thống
2 Actors nhấn vào nút “Đăng nhập”
3 Actors chọn qua “Đăng ký”
4 Actors điền form đăng ký
6 Actors nhấn nút “Đăng ký”
7 Hệ thống chuyển thông tin xuống DB
8 Hệ thống kiểm tra tài khoản đã tồn tại chưa, mật khẩu,email có hợp lệ không
9 Hệ thống thông báo đăng ký thành công
AF5.a Format sai yêu cầu nhập lại.(quay lại bước 4) AF9.a Hệ thống thông báo “Tài khoản đã tồn tại”(quay lại bước 3)
E4a.Actors đăng ký bằng tài khoản Google (tiếp tục bước7)
E4b Actors đăng ký bằng tài khoản Facebook (tiếp tục bước 7)
Bảng 6:Mô tả Use Case đăng ký
Tên Use Case Log In
Mô tả Cho phép người dùng đăng nhập vào trang web bằng tài khoản đã đăng ký trước đó
Tiền điều kiện Đã có tài khoản
Hậu điều kiện Người dùng truy cập thành công và có thể sử dụng các chức năng trong trang web
2 Actors nhấn vào nút “Đăng nhập”
3 Actors điền form đăng nhập
5 Actors nhấn nút “Đăng nhập”
7 Hệ thống chuyển thông tin, capcha xuống DB
8 Hệ thống kiểm tra thông tin đăng nhập và truy xuất quyền
9 Đăng nhập thành công, Hệ thống trả về trang chủ
AF4a Thông báo sai format ( quay lại bước 3) AF7a Thông báo không tìm thấy tài khoản / mật khẩu sai (quay lại bước 3)
E3a Nếu lúc đăng ký chưa nhập mã OTP thì sẽ hiện box gửi lại mã OTP và nhập lại ( tiếp tục bước 4)
E3b Người dùng đăng nhập bằng tài khoản Google (tiếp tục bước 7)
E3c Người dùng đăng nhập bằng tài khoản Facebook (tiếp tục bước 7)
Bảng 7: Mô tả Use Case đăng nhập
Mô tả Cho phép người dùng có thể thêm, xem và bình luận trên một đề thi
Tiền điều kiện Đã đăng nhập
Bình luận của người dùng được thêm vào và hiển thị trên trang
Người dùng có thể thấy các bình luận của mình đã được đăng lên
1 Actor vào đề thi kéo xuống dưới xem bình luận
2 Ator nhấn nút “Thêm bình luận”
3 Hệ thống hiện thị textbox để người dùng nhập nội dung
4 Người dùng nhập bình luận và nhấn nút “Gửi”
5 Hệ thống lưu bình luận và hiển thị lên UI
Luồng ngoại lệ AF1a Nếu chưa đăng nhập thì yêu cầu Actor đăng nhập
Luồng thay thế Không có
Bảng 8:Mô tả Use Case bình luận
Mô tả Cho phép người dùng luyện thi bằng những bài thi mô phỏng
Tiền điều kiện Đã đăng nhập thành công và chọn đề muốn thi
Hậu điều kiện Người dùng có thể luyện full đề hoặc theo từng phần
1 Actor chọn “Luyện thi” => “Luyện đề”
2 Hệ thống truy xuất danh sách đề thi phân loại theo năm
3 Actor chọn đề muốn luyện tập
5 Actor đọc đề và chọn đáp án
6 Hệ thống lưu lại kết quả đáp án mà Actor đã chọn
8 Hệ thống thực hiện tính điểm
9 Hệ thống trả về kết quả bài thi bao gồm: số câu đúng, số câu sai từng phần và điểm
AF5a Trong lúc thi mà Actor rời khỏi màn hình thi nhấn chuyển tab thì hệ thống sẽ hiện popup cảnh báo
AF5b Trong lúc thi có vấn đề về đường truyền bị ngắn đột ngột thì hệ thống sẽ lưu lại kết quả và cho Actor quay lại luyện tập mà không bị mất kết quả thi
AF7a Khi chưa thực hiện hết bài thi thì hệ thống sẽ xác nhận lại bạn có muốn nộp bài k
AF7a.1 Actor xác nhận “có” (tiếp tục bước 8)
AF7a.2 Actor xác nhận “không” (quay lại bước 5)
E3a Actor chọn “Luyện theo Part”
E3a.1 Actor chọn Part muốn luyện tập E3a.2 Actor chọn bắt đầu
Bảng 9: Mô tả Use Case luyện tập
Người dùng có thể tương tác với một chatbot hỗ trợ học tập trên trang web, với hai lựa chọn: sử dụng miễn phí và gói thành viên
Tiền điều kiện Vào luyện thi một đề cụ thể, sẽ có chatbot ở phía góc phải
Actor nhận được hỗ trợ chatbot dựa trên gói dịch vụ mà họ sử dụng
Hệ thống ghi lại các tương tác của người dùng với chatbot
1 Actor truy cập vào đề luyện thi và nhấp vào biểu tượng chatbot ở góc phải màn hình
3 Actor chọn Bot AI cụ thể muốn hỏi
4 Actor nhập câu hỏi cụ thể và nhấn “Gửi”
5 Chatbot trả lời câu hỏi dựa trên tài nguyên có sẵn
6 Actor nhận được câu trả lời cần thiết
Luồng thay thế E3a Member User sẽ được chọn thêm 2 Bot AI là Chat
Bảng 10: Mô tả Use Case Chatbot
Tên Use Case History Exam
Mô tả Người dùng có thể xem lại kết quả và chi tiết đề mình đã làm để qua đó đánh giá được quá trình học tập của mình
Tiền điều kiện Đã đăng nhập
Hậu điều kiện Người dùng có thể theo dõi tiến độ học tập thông qua các bài lịch sử
1 Actors truy cập vào mục ‘Kết quả’
2 Hệ thống kiểm tra xem người dùng đã đăng nhập hay chưa
3 Hệ thống tìm dữ liệu bài thi của Actors và trả ra dữ liệu lịch sử bài thi
4 Actors chọn ‘Xem chi tiết’
5 Hệ thống tìm dữ liệu bài thi chi tiết từ id và trả về chi tiết cho người dùng
Luồng ngoại lệ AF2a Yêu cầu đăng nhập (bắt đầu lại bước 1)
Luồng thay thế Không có
Bảng 11: Mô tả Use Case xem lịch sử bài thi
Mô tả Người dùng có thể truy cập và đọc các bài viết blog trên trang web
Tiền điều kiện Truy cập vào trang web
Hậu điều kiện Người dùng có thể xem nội dung của các bài viết blog
1 Actor truy cập vào trang web và nhấn vào mục “Blog”
2 Hệ thống hiển thị danh sách các bài viết mới nhất
3 Actor nhấp vào tiêu đề của bài viết để xem toàn bộ bài viết
4 Hệ thống tải và hiển thị nội dung chi tiết của bài viết, bao gồm tiêu đề, tác giả, ngày đăng và nội dung
Luồng ngoại lệ Không có
Luồng thay thế Không có
Bảng 12: Mô tả Use Case Blog
Mô tả Cho phép người dùng xem và sửa thông tin
Tiền điều kiện Đăng nhập thành công
Hậu điều kiện Xuất hiện thông tin cá nhân đã đăng ký trước đó
1 Actors chọn “Trang cá nhân”
2 Hệ thống trả ra thông tin của người dùng đó
3 Actors thao tác ở trang cá nhân với các chức năng như:
4 Chỉnh sửa thông tin cá nhân
Luồng ngoại lệ Không có
Luồng thay thế Không có
Bảng 13: Mô tả Use Case trang cá nhân
Tên Use Case Manager User
Cho phép admin quản lý tài khoản người dùng bằng việc Block hoặc Active tài khoản theo yêu cầu hoặc tình hình cụ thể
Tiền điều kiện Đăng nhập thành công
Hậu điều kiện Quản lý những người dùng đã đăng ký
1 Actor chọn từ danh mục “Manager User”
2 Hệ thống trả về thông tin tất cả người dùng
3 Actor chọn tài khoản muốn thực hiện hành động (Block hoặc Active)
4 Hệ thống sẽ chuyển trạng thái của người dùng mà Actor đã thực hiện hành động
Luồng ngoại lệ AF3a Người dùng chưa xác thực email, admin không thể thực hiện hành động
Bảng 14: Mô tả Use Case quản lý người dùng
Tên Use Case Crawl Data
Mô tả Admin lấy dữ liệu đề thi từ trang web luyện thi Study4
Tiền điều kiện Đăng nhập vào Study4 và xem kết quả chi tiết
Config tài khoản email đã dùng để đăng ký vào web Study4 trước đó
Hậu điều kiện Lấy dữ liệu đề thi thành công mà không cần import bằng tay tránh mất thời gian
1 Actors chọn từ danh mục ‘Crawl’ => ‘Crawl Data’
2 Hệ thống trả về giao diện và lịch sử đã crawl trong 1 tuần
3 Actors chọn email đã đăng nhập ở web Study4 trước đó Và email đã được config ở ‘Config Crawl’
5 Actors dán link đáp án chi tiết từ web Study4
6 Hệ thống thực hiện kiểm tra link đó đã crawl chưa
7 Hệ thống thực hiện lấy dữ liệu và thông báo ra màn hình cho người dùng theo dõi quá trình
8 Hệ thống lưu lại kết quả
AF5a Hiển thị popup xác nhận có muốn crawl lại đề đã crawl hay không
AF5a.1 Có (tiếp tục bước 6)
Bảng 15: Mô tả Use Case thêm dữ liệu đề
Tên Use Case Get Transcript
Mô tả Sử dụng Rev-ai hoặc Google để lấy đoạn transcript
Tiền điều kiện Đã có tài khoản Rev-AI và Firebase và config chúng
Hậu điều kiện Tách được Transcript từ file audio để phục vụ cho việc luyện nghe
1 Actor chọn từ danh mục ‘Transcript’ => ‘Get Transcript’
2 Actor chọn model Rev-Ai hoặc Google
3 Actor nhập tên cho Transcript
4 Actor kéo hoặc chọn file mp3 muốn lấy Transcript
5 Hệ thống upload file lên Firebase
6 Hệ thống sử dụng model actor đã chọn trước đó để lấy Transcript
7 Hệ thống thông báo quá trình cho người dùng
8 Hệ thống lưu lại kết quả
Luồng ngoại lệ Không có
Bảng 16: Mô tả Use Case lấy transcript
Tên Use Case Manager Exam
Mô tả Cho phép admin thêm đề, xem chi tiết đề, chỉnh sửa, xóa đề thi
Tiền điều kiện Đăng nhập thành công
Có file đề excel đúng format có sẵn
Hậu điều kiện Quản lý đề trong kho đề thi
2 Hệ thống truy xuất dữ liệu đề thi đã được thêm trước đó
3 Admin có thể tùy chọn thao tác như: Thêm đề, Xem chi tiết đề, Sửa đề, Xóa đề
Luồng ngoại lệ AF2.1 Nếu chưa có đề thì hiển thị “ No data”
Luồng thay thế Không có
Bảng 17: Mô tả Use Case quản lý đề thi
Tên Use Case Manager Price
Mô tả Cho phép admin tạo gói thành viên, quản lý giá và các lợi ích nhận được
Hậu điều kiện Tạo các gói thành viên
2 Hệ thống truy xuất dữ liệu trả về giao diện trang quản lý giá
3 Actor chọn để tạo bảng giá mới
4 Actor nhập thông tin về gói
5 Hệ thống kiểm tra và lưu lại thông tin
6 Actor làm tương tự với ‘plan detail’
7 Actor chọn gói muốn thêm lợi ích cho nó và bật lên
8 Hệ thống lưu lại thông tin
Luồng thay thế AF3a Actor tắt khi không cho phép gói đó có sử dụng lợi ích tương ứng
Bảng 18: Mô tả Use Case quản lý gói thành viên
CHƯƠNG 3: THIẾT KẾ GIAO DIỆN 3.1 THIẾT KẾ LOGO
Logo tên của nhóm – TOEICUTE - không chỉ là biểu tượng mà còn chứa đựng một thông điệp sâu sắc về sự kết nối và tính chất hữu ích của việc học tiếng Anh Màu sắc đỏ pha cam trong logo biểu thị sự năng động và trẻ trung, đồng thời tạo cảm giác ấm áp và gần gũi
Tên "TOEICUTE" là sự kết hợp giữa "TOEIC" - kỳ thi tiếng Anh quốc tế và tên viết tắt của trường Đại học Sư Phạm Kỹ Thuật là “UTE” Ngoài ra cái tên “TOEICUTE” còn làm cho người dùng liên tưởng đến “TOEIC” và
“CUTE” Gợi nhắc đến sự dễ thương và thú vị trong việc học tiếng Anh Việc kết hợp tên này giúp thể hiện sự hài hòa giữa việc rèn luyện kỹ năng ngôn ngữ và việc làm điều đó một cách thú vị, gần gũi hơn với người học
Logo thiết kế với hình ảnh mô hình trái đất ở giữa, được bao quanh bởi nút play, biểu thị cho việc khởi đầu, sự bắt đầu của việc học Hình ảnh này thể hiện mong muốn khơi nguồn cảm hứng và sự kích thích để người học chủ động bắt đầu hành trình học tiếng Anh của mình
Hình tai nghe bao quanh trục trái đất là biểu tượng của sự kết nối âm thanh, không giới hạn về khoảng cách hay vùng miền Điều này mô tả ý nghĩa rằng mọi người trên thế giới có thể cùng lắng nghe và học tiếng Anh, tạo nên một cộng đồng học tập toàn cầu, đồng thời thể hiện sự đa dạng và hòa nhập trong việc học ngôn ngữ
Tóm lại, logo TOEICUTE không chỉ đơn thuần là biểu tượng mà còn là sự kết hợp tinh tế giữa tên, màu sắc và hình ảnh để truyền tải thông điệp về việc học tiếng Anh một cách thú vị, gần gũi và kết nối
Hình 36: Giao diện trang chủ
1 Button Button “Trang chủ” thông tin giới thiệu của hệ thống
2 Button Button Dropdown “Luyện Tập” bao gồm luyện đề và luyện nghe
3 Button Button “Thi” để bắt đầu bài thi thật (thành viên
Premium mới thực hiện được)
4 Button Button “Kết quả” để xem lại kết quả các bài test đã thực hiện
4 Button Button “Đăng nhập” và “Đăng ký”
Bảng 19:Phân tích giao diện trang chủ
Hình 37: Giao diện đăng ký
1 Button Button đăng ký bằng tài khoản facebook
2 Button Button đăng ký bằng tài khoản google
4 Input Input nhập họ tên
5 Input Input nhập mật khẩu
6 Input Input nhập xác nhận lại mật khẩu
7 Button Button đăng ký tài khoản với thông tin đã điền ở trên
8 Button Button đăng nhập để chuyển qua trang đăng nhập
Bảng 20: Phân tích giao diện đăng ký
Hình 38: Giao diện đăng nhập
1 Button Button “Đăng nhập bằng tài khoản facebook”
2 Button Button “Đăng nhập bằng tài khoản google”
4 Input Input nhập mật khẩu
6 Button Button cập nhật lại Captcha mới
7 Button Button “Quên mật khẩu”
8 Button Button đăng nhập tài khoản ở trên
9 Button Button đăng ký để chuyển qua trang đăng ký
Bảng 21: Phân tích giao diện đăng nhập
Hình 39: Giao diện quên mật khẩu
Hình 40: Giao diện nhận Mail xác nhận đổi mật khẩu
Hình 41: Giao diện đặt lại mật khẩu
1 Input Email của tài khoản quên mật khẩu
2 Button Button “Cấp lại mật khẩu” để yêu cầu gửi link cấp lại mật khẩu
3 Button Button “Cấp mật khẩu” được gửi qua mail, sau khi mở là đường link form thay đổi mật khẩu
4 Input Input nhập “Mật khẩu mới”
5 Input Input nhập “Xác nhận lại mật khẩu”
Bảng 22: Phân tích giao diện quên mật khẩu
3.2.1.5 Trang danh sách đề thi
Hình 42: Giao diện danh sách đề thi
1 Button Button lọc đề thi theo năm
2 Button Button lọc đề thi theo năm
3 Button Button “Chi tiết” để bắt đầu lằm bài hoặc xem bình luận
Bảng 23: Phân tích giao diện danh sách đề thi
3.2.1.6 Trang chọn chế độ luyện tập và bình luận
Hình 43: Giao diện chọn chế độ luyện tập và bình luận
1 Button Chế độ làm toàn bộ bài thi 200 câu
2 Button Chế độ luyện tập để chọn phần cụ thể muốn làm
3 Button Click để bắt đầu bài thi
4 Textarea Nơi nhập bình luận
Bảng 24: Phân tích giao diện bình luận và chọn chế độ luyện tập
3.2.1.7 Trang thực hiện bài test
Hình 44: Giao diện làm bài test
1 Button Button lọc từng phần
2 p Thời gian làm bài đếm ngược
3 Button Button “Nộp bài” để kết thúc bài làm
4 Button Button được tô đậm là các câu đã chọn
5 Button Button chưa được tô đậm là các câu chưa làm
6 Button Button chọn đáp án “A”, “B”, “C” ,“D”
7 Msg Cảnh báo chuyển tab trong lúc thi
Bảng 25: Phân tích giao diện làm bài test
Hình 45: Giao diện trang blog
1 H2 Tiêu đề Blog, click vào để xem blog
2 div Các bài viết mới nhất
Bảng 26: Phân tích giao diện làm bài test
3.2.1.9 Trang chi tiết kết quả thi
Hình 46: Giao diện chi tiết kết quả
1 Span Kết quả ‘số câu đúng’ / ‘số câu trong đề’
2 Span Tỷ lệ phần trăm chính xác
3 Span Thời gian đã thực hiện bài thi
4 Span Kết quả ‘Số điểm nghe đạt được’/ ‘tổng điểm nghe’
5 Span Kết quả ‘Số điểm đọc đạt được’/ ‘tổng điểm đọc’
6 Span Kết quả ‘Số điểm tổng đạt được’/ ‘tổng điểm’
7 Span Số câu bỏ qua
Bảng 27: Phân tích giao diện trang chi tiết kết quả thi
3.2.1.10 Trang chi tiết đáp án
Hình 47: Giao diện chi tiết đáp án
1 Radio Đáp án bạn đã chọn
3 Span Transcript của bài nghe
4 Span Giải thích đáp án chi tiết
Bảng 28: Phân tích giao diện chi tiết đáp án
3.2.1.11 Giao diện Chatbox, dịch thuật hỗ trợ học tập
Hình 48: Giao diện Chatbox AI
1 Select-item Chọn chatbox AI muốn hỏi
2 Span Câu hỏi của bạn
3 Span Câu trả lời của chatbox
Bảng 29: Phân tích giao diện chatbox hỗ trợ học tập
Hình 49: Giao diện Chat dịch thuật
1 Button Chọn chế độ ‘Dịch ‘
2 Input Nhập câu hỏi của bạn
3 Span Từ bạn muốn dịch
4 Span Dịch nghĩa sang tiếng việt
Bảng 30: Phân tích giao diện hỗ trợ dịch
3.2.1.12 Trang Bảng giá để mua gói thành viên
Hình 50: Giao diện bảng giá mua gói thành viên
1 Button Button mua chuyển qua trang thanh toán
2 Icon Icon thể hiện là gói đó có chức năng
3 Icon Icon thể hiện là gói đó không có chức năng
Bảng 31: Phân tích giao diện bảng giá để mua gói thành viên
3.2.2.1 Trang quản lý người dùng
Hình 51: Giao diện quản lý người dùng
1 Select-item Lọc xem theo trạng thái người dùng: ‘All, Active,
2 Button Thực hiện chặn/ mở chặn người dùng
3 Button Trạng thái của người dùng
Bảng 32:: Phân tích giao diện quản lý người dùng
Hình 52: Giao diện quản lý Topic
2 Button Button chỉnh sửa Topic
Bảng 33: Phân tích giao diện quản lý Topic
3.2.2.3 Trang quản lý tính điểm
Hình 53: Giao diện quản lý tính điểm
1 Button Import file tính điểm bằng Excel
2 Button Button chỉnh sửa sau khi thêm file excel
3 Button Button lưu lại kết quả sửa
Bảng 34: Phân tích giao diện quản lý tính điểm
Hình 54: Giao diện get transcript
1 Select-item Chọn model muốn thực hiện Transcript (Rev-ai &
2 Input Input nhập tên cho Transcript muốn thực hiện
3 Button Button upload file muốn thực hiện transcript
4 Button Button dịch ra tiếng việt đoạn transcript vừa lấy ra
5 Button Button xem chi tiết đoạn transcript và dịch đã lấy ra
Bảng 35: Phân tích giao diện lấy Transcript
3.2.2.5 Trang Thêm dữ liệu đề từ website Study4
Hình 55: Giao diện thêm dữ liệu đề từ Study4
1 Select-item Chọn Email dùng để lấy đề ở trang web Study4 và đã dược config trước đó
2 Input Paste link của chi tiết đáp án ở web study4
Bảng 36: Phân tích giao diện import dữ liệu đề
3.2.2.6 Trang lịch sử tải lên Firebase
Hình 56: Giao diện lịch sử tải lên firebase
1 Select-item Lọc theo loại hình ảnh hay audio
2 Select-item Sắp xếp theo ngày đăng
3 Select-item Chọn xem theo chế độ từ ngày nào đến ngày nào
4 Button Button xóa file đã tải
Bảng 37: Phân tích giao diện lịch sử tải lên FireBase
Hình 57: Giao diện quản lý Slider
1 Button Button thêm Slider mới
2 Button Di chuyển hình hiện tại xuống phía dưới
3 Button Di chuyển hình hiện tại lên trên
4 Button Button chỉnh sửa hình ảnh
Bảng 38: Phân tích giao diện quản lý Slide
3.2.2.8 Thêm đề thủ công bằng file excel
Hình 58: Giao diện thêm đề bằng file Excel
1 Input Nhập tên bộ đề
2 Select-item Chọn bộ đề đã thêm ở 3.2.2.2 phù hợp với đề
3 Button Chọn upload file audio của cả bài và theo từng part
(bạn đã phải chuẩn bị tách file audio ra từng part trước)
4 Select-item Để đề ở chế độ thi miễn phí hay trả phí
Bảng 39: Phân tích giao diện thêm đề thủ công bằng file Excel o Sau khi thêm audio thì vào phần ‘Manager Exam/List Exam /”đề mới thêm” /Detail’
Hình 59: Giao diện chi tiết đề
1 Button Xem chi tiết đề thi để chỉnh sửa từng câu
2 Button Button tải file excel có chứa câu hỏi
3 Button Button chỉnh sửa audio
Bảng 40: Phân tích giao diện chỉnh sửa chi tiết từng câu hỏi sau khi thêm
3.2.2.9 Trang quản lý các gói thành viên
Hình 60: Giao diện quản lý gói thành viên
1 Button Button tạo một gói với bảng giá mới
2 Button Button chỉnh sửa chi tiết của gói
3 Button Button xóa gói thành viên
4 Button Button tạo những lợi ích mà gói nhận được tương ứng
5 Switch Gói nào có chức năng nào thì bật lên
Bảng 41: Phân tích giao diện quản lý gói thành viên
CHƯƠNG 4: CÀI ĐẶT ỨNG DỤNG VÀ KIỂM THỬ 4.1 CÀI ĐẶT CHƯƠNG TRÌNH
4.1.1 Chuẩn bị công cụ Để chạy chương trình trên máy tính thì máy cần cài đặt những cái sau:
✓ Cài đặt Java JDK (phiên bản 21)
✓ Cài đặt Angular CLI (phiên bản 17.3.7)
✓ Cài đặt MySQL (phiên bản 8.2.0)
Sau khi đảm bảo các yêu cầu trên, ta tiến hành cài đặt và chạy ứng dụng theo các bước sau:
Bước 1: Clone hoặc tải thư mục dự án từ link GitHub sau:
Link BE: https://github.com/pvhao2002/Toeicute-BE Link FE: https://github.com/pvhao2002/Toeicute-FE
Bước 2: Mở thư mục trên bằng Iteliji IDEA
- Đối với FE: Gõ ‘ npm install’ command line (cmd) để thực hiện tải các thư viện cho FE
Bước 3: Tạo database có tên ‘toeicute’ Sau đó bấm chạy BE để khởi tạo các table trong CSDL (Lúc này sẽ bị lỗi BE do có 1 số config cần lấy từ dưới database lên) Import file data.sql theo đường dẫn ‘\TLCN-
BE\src\main\resources\static\script\data.sql’
Bước 4: Thay đổi cấu hình kết nối với database theo đường dẫn ‘\TLCN-
BE\src\main\resources\aplication’
Bước 5: Triển khai Redis sử dụng Docker
• Kiểm tra trạng thái của Redis container bằng lệnh: ‘docker ps’
• Ánh xạ cổng 6379 trên máy host tới cổng 6379 trong container để truy cập từ bên ngoài bằng lệnh: ‘docker run -d name redis-stack-server -p
6379:6379 redis/redis-stack-server:latest’
❖ Được redis-stack-server như bên dưới:
Hình 62: Cấu hình Redis ở Docker
Bước 6: Chạy Docker, Backend và Frontend
Mở trên trình duyệt với đường dẫn: ‘http://localhost:4200/home’
Bước 7: Đăng nhập quyền admin để thay đổi cấu hình hệ thống
Email: Admin Mật khẩu: 1234qwer
• Thêm tài khoản Firebase: o Lấy file Json Firebase ở đường dẫn sau: https://support.google.com/firebase/answer/ o Quay lại web Toeicute chọn ‘Add Firebase’ ở danh mục và thêm file json vừa lấy ở trên như hình dưới đây:
Hình 63: Giao diện thêm Firebase o Kích hoạt file Json vừa mới thêm tại ‘List Firebase Config’ như hình sau:
Hình 64: Giao diện quản lý firebase
• Thêm tài khoản Email dùng để gửi mail xác nhận cho người dùng tại
‘Email Config/ Add Email Config’ :
Hình 65: Giao diện thêm Email
• Thêm Template Email gửi về cho người dùng, ở đây có sẵn 3 loại như:
Hình 66: Giao diện thêm template Email
• Thêm tài khoản Rev-ai: o Đăng ký/đăng nhập tài khoản tại: https://www.rev.ai/auth/signup o Lấy Access Token ở: https://www.rev.ai/access-token o Quay lại Toeicute và thêm Access token vừa lấy vào ‘Add Rev-Ai Config’ như dưới đây:
Hình 67: Giao diện thêm Rev-ai
• Thêm tài khoản Kommunicate: o Đăng ký/đăng nhập tài khoản tại: https://www.kommunicate.io/ o Lấy APIKey o Quay lại Toeicute và thêm ApiKey vừa lấy vào như dưới đây:
Hình 68: Giao diện thêm Kommunicate
• Thêm Đề thi bằng cách import file Excel: o Chuẩn bị file Excel có format như hình dưới:
Hình 69: Format file Excel o Quay lại trang Toeicute chọn ‘Exam Manager / Add Exam’
Hình 70: Giao diện thêm đề thi
• Đảm bảo chất lượng: Kiểm thử giúp đảm bảo rằng phần mềm hoạt động đúng như thiết kế và đáp ứng được các yêu cầu của người dùng
• Phát hiện lỗi: Tìm và sửa lỗi trước khi phần mềm được phát hành ra thị trường, đảm bảo người dùng không gặp phải vấn đề khi sử dụng
• Đảm bảo tính chính xác của nội dung: Đảm bảo rằng các câu hỏi, đáp án và các bài kiểm tra mô phỏng đều chính xác và phù hợp với tiêu chuẩn của kỳ thi TOEIC
• Kiểm tra tính khả dụng: Đảm bảo giao diện người dùng thân thiện, dễ sử dụng và tương thích với nhiều thiết bị và trình duyệt khác nhau
• Kiểm tra hiệu suất: Đảm bảo ứng dụng hoạt động mượt mà, có thể xử lý nhiều người dùng cùng lúc mà không gặp sự cố hoặc chậm trễ
• Bảo mật: Đảm bảo rằng dữ liệu của người dùng được bảo vệ và không bị rò rỉ
• Kiểm tra tính tương thích: Đảm bảo rằng ứng dụng hoạt động tốt trên nhiều nền tảng và thiết bị khác nhau, bao gồm cả máy tính và máy tính bảng
• Xác định khả năng ổn định của hệ thống dưới tải cao
• Đảm bảo tuân thủ: Đảm bảo ứng dụng tuân thủ các quy định và tiêu chuẩn liên quan đến giáo dục và bảo mật dữ liệu
❖ Kiểm thử chức năng của User:
• Đăng ký / Đăng nhập: o Đăng ký bằng email o Đăng ký bằng tài khoản Google o Đăng ký bằng tài khoản Facebook o Đăng nhập bằng email, Google, Facebook
• Quên mật khẩu: o Gửi email khôi phục mật khẩu o Đặt lại mật khẩu
• Luyện thi (miễn phí): o Luyện đề theo Part o Luyện đề FullThực hiện thi thật (dành cho thành viên)
• Tính điểm và lưu kết quả
• Bình luận ở mỗi đề thi:
• Chatbox hỗ trợ học tập: o Sử dụng LLAMAS & PALM2 o Sử dụng CHAT GPT & GEMINI
• Chatbox hỗ trợ dịch vụ: o Gửi câu hỏi và nhận hỗ trợ
• Blog cập nhật đề thi, trao đổi tài liệu học tập:
• Xem kết quả các bài thi cũ:
• Xem lại lịch sử thi o Xem thống kê kết quả sau khi thi/luyện đề xong: o Thống kê điểm số, thời gian làm bài o Xem chi tiết từng câu
• Xem trang cá nhân: o Chỉnh sửa thông tin cá nhân o Chỉnh sửa ảnh đại diện o Xem lịch sử chỉnh sửa
• Thanh toán mua gói: o Thanh toán bằng Visa o Thanh toán bằng Paypal o Thanh toán bằng VNPay
❖ Kiểm thử chức năng của Admin:
• Quản lý người dùng: o Block / UnBlock người dùng o Xem hoạt động của người dùng
• Quản lý bộ đề thi: o Thêm, xóa, sửa bộ đề
• Quản lý đề thi: o Thêm, xóa, sửa đề thi
• Import đề thi bằng file Excel
• Quản lý bảng tính điểm: o Thêm, xóa, sửa bảng tính điểm
• Import đề thi từ website Study4: o Kiểm tra tính chính xác và định dạng
• Lấy transcript từ đoạn mp3: o Sử dụng Google cloud và Java (Rev-ai) để lấy transcript và dịch
• Quản lý lịch sử lấy transcript và data đề thi:
• Quản lý blog: o Thêm, xóa, sửa blog bằng Tiny editor
• Config các tài khoản Firebase, Kommunicate, Rev-ai, Email:
• Quản lý Template email: o Thêm, xóa, sửa template email
❖ Yêu cầu phi chức năng:
• Giao diện thân thiện với người dùng:
• Lưu kết quả thi khi bị ngắt kết nối: o Kiểm tra tính năng lưu tạm thời
• Không cho phép một tài khoản đăng nhập cùng lúc 2 máy: o Kiểm tra đăng nhập đồng thời
• Đề thi lấy từ website Study4 đảm bảo đúng với format của bộ đề ETS: o Kiểm tra tính tương thích và chính xác
• Cảnh báo khi di chuyển con trỏ chuột ra ngoài trong lúc thi thật: o Kiểm tra tính năng cảnh báo
• Hệ thống dễ bảo trì và phát triển: o Kiểm tra mã nguồn và cấu trúc hệ thống
• Có khả năng tái sử dụng lại: o Kiểm tra khả năng modular và reusable của mã nguồn
• Responsive với nhiều thiết bị: o Kiểm tra trên các thiết bị và độ phân giải khác nhau
• Số lượng người dùng: 1000 đến 2000 người dùng
• Đo lường khả năng chịu tải, thời gian phản hồi, và tỷ lệ lỗi của hệ thống
• Máy tính cá nhân có kết nối mạng Internet để có thể truy cập vào trang web luyện tập và thi toeic https://toeicute.vercel.app bằng trình duyệt (Nếu test local thì xem hướng dẫn ở 4.1)
• Hệ điều hành được sử dụng là Microsoft Windows 11 Professional
• Tài khoản: Admin: Email: admin@gmail.com
User: Email: test@gmail.com
4.2.4 Phân loại lỗi Độ nghiêm trọng Chức năng Lỗi phát hiện Ghi chú
Cao Đăng ký / Đăng nhập
Không thể đăng nhập bằng email Chức năng chính
Không thể bắt đầu bài thi Không thể bắt đầu bài thi
Không thể tính điểm sau khi thi
Không thể bắt đầu bài thi
Thanh toán bằng Visa không thành công Chức năng chính
Thanh toán bằng Paypal không thành công Chức năng chính
Thanh toán bằng VNPay không thành công Chức năng chính
Quản lý đề Không thêm / xóa đề được Chức năng chính
Hiệu năng Trang web bị treo khi có
Trung bình Đăng ký / Đăng nhập
Không thể đăng nhập bằng Google
Lỗi không gửi email kích hoạt tài khoản
Quên mật khẩu Email khôi phục không được gửi
Không thể luyện đề theo
Không thể luyện nghe Chức năng chính
Bình luận bị mất sau khi đăng Ảnh hưởng trải nghiệm người dùng
Chatbox hỗ trợ học tập
LLAMAS & PALM2 không trả lời câu hỏi
CHAT GPT & GEMINI không liên kết câu hỏi trước
Chức năng quan trọng cho thành viên
Chatbox hỗ trợ dịch vụ Không thể gửi câu hỏi Chức năng quan trọng
Xem kết quả thi cũ Không thể xem lại lịch sử thi
Xem thống kê kết quả
Thống kê không chính xác
Chức năng quan trọng Đăng xuất Không thể đăng xuất Chức năng quan trọng
Hiệu năng Trang web phản hồi chậm khi có 1000 người dùng Hiệu năng
Thiếu các hoạt động người dùng
Không chặn / mở chặn được cho người dùng
Bình luận Không thể đăng bình luận Chức năng phụ Blog cập nhật đề thi Blog không hiển thị đúng Chức năng phụ
Không thể chỉnh sửa thông tin cá nhân Chức năng phụ Không thể chỉnh sửa ảnh đại diện Chức năng phụ
Ghi chú: TH1: Cao: Cần được sửa chữa ngay lập tức
TH2: Trung bình: Cần được sửa chữa sau TH1, nhưng vẫn quan trọng
TH3: Thấp: Sửa chữa sau khi các lỗi TH1và TH2 bình đã được giải quyết
Hình 71: Danh sách Test Case
• Công cụ sử dụng: Apache JMeter
• Kịch bản kiểm thử: o 1000 người dùng:
▪ Thời gian duy trì: 30 phút o 2000 người dùng:
▪ Thời gian duy trì: 30 phút
❖ Thống kê kết quả bằng biểu đồ:
Hình 72: Thống kê số liệu Jmeter
❖ Từ biểu đồ trên phân tích kết quả hiệu năng chi tiết:
THIẾT KẾ GIAO DIỆN
GIAO DIỆN
Hình 36: Giao diện trang chủ
1 Button Button “Trang chủ” thông tin giới thiệu của hệ thống
2 Button Button Dropdown “Luyện Tập” bao gồm luyện đề và luyện nghe
3 Button Button “Thi” để bắt đầu bài thi thật (thành viên
Premium mới thực hiện được)
4 Button Button “Kết quả” để xem lại kết quả các bài test đã thực hiện
4 Button Button “Đăng nhập” và “Đăng ký”
Bảng 19:Phân tích giao diện trang chủ
Hình 37: Giao diện đăng ký
1 Button Button đăng ký bằng tài khoản facebook
2 Button Button đăng ký bằng tài khoản google
4 Input Input nhập họ tên
5 Input Input nhập mật khẩu
6 Input Input nhập xác nhận lại mật khẩu
7 Button Button đăng ký tài khoản với thông tin đã điền ở trên
8 Button Button đăng nhập để chuyển qua trang đăng nhập
Bảng 20: Phân tích giao diện đăng ký
Hình 38: Giao diện đăng nhập
1 Button Button “Đăng nhập bằng tài khoản facebook”
2 Button Button “Đăng nhập bằng tài khoản google”
4 Input Input nhập mật khẩu
6 Button Button cập nhật lại Captcha mới
7 Button Button “Quên mật khẩu”
8 Button Button đăng nhập tài khoản ở trên
9 Button Button đăng ký để chuyển qua trang đăng ký
Bảng 21: Phân tích giao diện đăng nhập
Hình 39: Giao diện quên mật khẩu
Hình 40: Giao diện nhận Mail xác nhận đổi mật khẩu
Hình 41: Giao diện đặt lại mật khẩu
1 Input Email của tài khoản quên mật khẩu
2 Button Button “Cấp lại mật khẩu” để yêu cầu gửi link cấp lại mật khẩu
3 Button Button “Cấp mật khẩu” được gửi qua mail, sau khi mở là đường link form thay đổi mật khẩu
4 Input Input nhập “Mật khẩu mới”
5 Input Input nhập “Xác nhận lại mật khẩu”
Bảng 22: Phân tích giao diện quên mật khẩu
3.2.1.5 Trang danh sách đề thi
Hình 42: Giao diện danh sách đề thi
1 Button Button lọc đề thi theo năm
2 Button Button lọc đề thi theo năm
3 Button Button “Chi tiết” để bắt đầu lằm bài hoặc xem bình luận
Bảng 23: Phân tích giao diện danh sách đề thi
3.2.1.6 Trang chọn chế độ luyện tập và bình luận
Hình 43: Giao diện chọn chế độ luyện tập và bình luận
1 Button Chế độ làm toàn bộ bài thi 200 câu
2 Button Chế độ luyện tập để chọn phần cụ thể muốn làm
3 Button Click để bắt đầu bài thi
4 Textarea Nơi nhập bình luận
Bảng 24: Phân tích giao diện bình luận và chọn chế độ luyện tập
3.2.1.7 Trang thực hiện bài test
Hình 44: Giao diện làm bài test
1 Button Button lọc từng phần
2 p Thời gian làm bài đếm ngược
3 Button Button “Nộp bài” để kết thúc bài làm
4 Button Button được tô đậm là các câu đã chọn
5 Button Button chưa được tô đậm là các câu chưa làm
6 Button Button chọn đáp án “A”, “B”, “C” ,“D”
7 Msg Cảnh báo chuyển tab trong lúc thi
Bảng 25: Phân tích giao diện làm bài test
Hình 45: Giao diện trang blog
1 H2 Tiêu đề Blog, click vào để xem blog
2 div Các bài viết mới nhất
Bảng 26: Phân tích giao diện làm bài test
3.2.1.9 Trang chi tiết kết quả thi
Hình 46: Giao diện chi tiết kết quả
1 Span Kết quả ‘số câu đúng’ / ‘số câu trong đề’
2 Span Tỷ lệ phần trăm chính xác
3 Span Thời gian đã thực hiện bài thi
4 Span Kết quả ‘Số điểm nghe đạt được’/ ‘tổng điểm nghe’
5 Span Kết quả ‘Số điểm đọc đạt được’/ ‘tổng điểm đọc’
6 Span Kết quả ‘Số điểm tổng đạt được’/ ‘tổng điểm’
7 Span Số câu bỏ qua
Bảng 27: Phân tích giao diện trang chi tiết kết quả thi
3.2.1.10 Trang chi tiết đáp án
Hình 47: Giao diện chi tiết đáp án
1 Radio Đáp án bạn đã chọn
3 Span Transcript của bài nghe
4 Span Giải thích đáp án chi tiết
Bảng 28: Phân tích giao diện chi tiết đáp án
3.2.1.11 Giao diện Chatbox, dịch thuật hỗ trợ học tập
Hình 48: Giao diện Chatbox AI
1 Select-item Chọn chatbox AI muốn hỏi
2 Span Câu hỏi của bạn
3 Span Câu trả lời của chatbox
Bảng 29: Phân tích giao diện chatbox hỗ trợ học tập
Hình 49: Giao diện Chat dịch thuật
1 Button Chọn chế độ ‘Dịch ‘
2 Input Nhập câu hỏi của bạn
3 Span Từ bạn muốn dịch
4 Span Dịch nghĩa sang tiếng việt
Bảng 30: Phân tích giao diện hỗ trợ dịch
3.2.1.12 Trang Bảng giá để mua gói thành viên
Hình 50: Giao diện bảng giá mua gói thành viên
1 Button Button mua chuyển qua trang thanh toán
2 Icon Icon thể hiện là gói đó có chức năng
3 Icon Icon thể hiện là gói đó không có chức năng
Bảng 31: Phân tích giao diện bảng giá để mua gói thành viên
3.2.2.1 Trang quản lý người dùng
Hình 51: Giao diện quản lý người dùng
1 Select-item Lọc xem theo trạng thái người dùng: ‘All, Active,
2 Button Thực hiện chặn/ mở chặn người dùng
3 Button Trạng thái của người dùng
Bảng 32:: Phân tích giao diện quản lý người dùng
Hình 52: Giao diện quản lý Topic
2 Button Button chỉnh sửa Topic
Bảng 33: Phân tích giao diện quản lý Topic
3.2.2.3 Trang quản lý tính điểm
Hình 53: Giao diện quản lý tính điểm
1 Button Import file tính điểm bằng Excel
2 Button Button chỉnh sửa sau khi thêm file excel
3 Button Button lưu lại kết quả sửa
Bảng 34: Phân tích giao diện quản lý tính điểm
Hình 54: Giao diện get transcript
1 Select-item Chọn model muốn thực hiện Transcript (Rev-ai &
2 Input Input nhập tên cho Transcript muốn thực hiện
3 Button Button upload file muốn thực hiện transcript
4 Button Button dịch ra tiếng việt đoạn transcript vừa lấy ra
5 Button Button xem chi tiết đoạn transcript và dịch đã lấy ra
Bảng 35: Phân tích giao diện lấy Transcript
3.2.2.5 Trang Thêm dữ liệu đề từ website Study4
Hình 55: Giao diện thêm dữ liệu đề từ Study4
1 Select-item Chọn Email dùng để lấy đề ở trang web Study4 và đã dược config trước đó
2 Input Paste link của chi tiết đáp án ở web study4
Bảng 36: Phân tích giao diện import dữ liệu đề
3.2.2.6 Trang lịch sử tải lên Firebase
Hình 56: Giao diện lịch sử tải lên firebase
1 Select-item Lọc theo loại hình ảnh hay audio
2 Select-item Sắp xếp theo ngày đăng
3 Select-item Chọn xem theo chế độ từ ngày nào đến ngày nào
4 Button Button xóa file đã tải
Bảng 37: Phân tích giao diện lịch sử tải lên FireBase
Hình 57: Giao diện quản lý Slider
1 Button Button thêm Slider mới
2 Button Di chuyển hình hiện tại xuống phía dưới
3 Button Di chuyển hình hiện tại lên trên
4 Button Button chỉnh sửa hình ảnh
Bảng 38: Phân tích giao diện quản lý Slide
3.2.2.8 Thêm đề thủ công bằng file excel
Hình 58: Giao diện thêm đề bằng file Excel
1 Input Nhập tên bộ đề
2 Select-item Chọn bộ đề đã thêm ở 3.2.2.2 phù hợp với đề
3 Button Chọn upload file audio của cả bài và theo từng part
(bạn đã phải chuẩn bị tách file audio ra từng part trước)
4 Select-item Để đề ở chế độ thi miễn phí hay trả phí
Bảng 39: Phân tích giao diện thêm đề thủ công bằng file Excel o Sau khi thêm audio thì vào phần ‘Manager Exam/List Exam /”đề mới thêm” /Detail’
Hình 59: Giao diện chi tiết đề
1 Button Xem chi tiết đề thi để chỉnh sửa từng câu
2 Button Button tải file excel có chứa câu hỏi
3 Button Button chỉnh sửa audio
Bảng 40: Phân tích giao diện chỉnh sửa chi tiết từng câu hỏi sau khi thêm
3.2.2.9 Trang quản lý các gói thành viên
Hình 60: Giao diện quản lý gói thành viên
1 Button Button tạo một gói với bảng giá mới
2 Button Button chỉnh sửa chi tiết của gói
3 Button Button xóa gói thành viên
4 Button Button tạo những lợi ích mà gói nhận được tương ứng
5 Switch Gói nào có chức năng nào thì bật lên
Bảng 41: Phân tích giao diện quản lý gói thành viên
CÀI ĐẶT ỨNG DỤNG VÀ KIỂM THỬ
CÀI ĐẶT CHƯƠNG TRÌNH
4.1.1 Chuẩn bị công cụ Để chạy chương trình trên máy tính thì máy cần cài đặt những cái sau:
✓ Cài đặt Java JDK (phiên bản 21)
✓ Cài đặt Angular CLI (phiên bản 17.3.7)
✓ Cài đặt MySQL (phiên bản 8.2.0)
Sau khi đảm bảo các yêu cầu trên, ta tiến hành cài đặt và chạy ứng dụng theo các bước sau:
Bước 1: Clone hoặc tải thư mục dự án từ link GitHub sau:
Link BE: https://github.com/pvhao2002/Toeicute-BE Link FE: https://github.com/pvhao2002/Toeicute-FE
Bước 2: Mở thư mục trên bằng Iteliji IDEA
- Đối với FE: Gõ ‘ npm install’ command line (cmd) để thực hiện tải các thư viện cho FE
Bước 3: Tạo database có tên ‘toeicute’ Sau đó bấm chạy BE để khởi tạo các table trong CSDL (Lúc này sẽ bị lỗi BE do có 1 số config cần lấy từ dưới database lên) Import file data.sql theo đường dẫn ‘\TLCN-
BE\src\main\resources\static\script\data.sql’
Bước 4: Thay đổi cấu hình kết nối với database theo đường dẫn ‘\TLCN-
BE\src\main\resources\aplication’
Bước 5: Triển khai Redis sử dụng Docker
• Kiểm tra trạng thái của Redis container bằng lệnh: ‘docker ps’
• Ánh xạ cổng 6379 trên máy host tới cổng 6379 trong container để truy cập từ bên ngoài bằng lệnh: ‘docker run -d name redis-stack-server -p
6379:6379 redis/redis-stack-server:latest’
❖ Được redis-stack-server như bên dưới:
Hình 62: Cấu hình Redis ở Docker
Bước 6: Chạy Docker, Backend và Frontend
Mở trên trình duyệt với đường dẫn: ‘http://localhost:4200/home’
Bước 7: Đăng nhập quyền admin để thay đổi cấu hình hệ thống
Email: Admin Mật khẩu: 1234qwer
• Thêm tài khoản Firebase: o Lấy file Json Firebase ở đường dẫn sau: https://support.google.com/firebase/answer/ o Quay lại web Toeicute chọn ‘Add Firebase’ ở danh mục và thêm file json vừa lấy ở trên như hình dưới đây:
Hình 63: Giao diện thêm Firebase o Kích hoạt file Json vừa mới thêm tại ‘List Firebase Config’ như hình sau:
Hình 64: Giao diện quản lý firebase
• Thêm tài khoản Email dùng để gửi mail xác nhận cho người dùng tại
‘Email Config/ Add Email Config’ :
Hình 65: Giao diện thêm Email
• Thêm Template Email gửi về cho người dùng, ở đây có sẵn 3 loại như:
Hình 66: Giao diện thêm template Email
• Thêm tài khoản Rev-ai: o Đăng ký/đăng nhập tài khoản tại: https://www.rev.ai/auth/signup o Lấy Access Token ở: https://www.rev.ai/access-token o Quay lại Toeicute và thêm Access token vừa lấy vào ‘Add Rev-Ai Config’ như dưới đây:
Hình 67: Giao diện thêm Rev-ai
• Thêm tài khoản Kommunicate: o Đăng ký/đăng nhập tài khoản tại: https://www.kommunicate.io/ o Lấy APIKey o Quay lại Toeicute và thêm ApiKey vừa lấy vào như dưới đây:
Hình 68: Giao diện thêm Kommunicate
• Thêm Đề thi bằng cách import file Excel: o Chuẩn bị file Excel có format như hình dưới:
Hình 69: Format file Excel o Quay lại trang Toeicute chọn ‘Exam Manager / Add Exam’
Hình 70: Giao diện thêm đề thi.
KIỂM THỬ
• Đảm bảo chất lượng: Kiểm thử giúp đảm bảo rằng phần mềm hoạt động đúng như thiết kế và đáp ứng được các yêu cầu của người dùng
• Phát hiện lỗi: Tìm và sửa lỗi trước khi phần mềm được phát hành ra thị trường, đảm bảo người dùng không gặp phải vấn đề khi sử dụng
• Đảm bảo tính chính xác của nội dung: Đảm bảo rằng các câu hỏi, đáp án và các bài kiểm tra mô phỏng đều chính xác và phù hợp với tiêu chuẩn của kỳ thi TOEIC
• Kiểm tra tính khả dụng: Đảm bảo giao diện người dùng thân thiện, dễ sử dụng và tương thích với nhiều thiết bị và trình duyệt khác nhau
• Kiểm tra hiệu suất: Đảm bảo ứng dụng hoạt động mượt mà, có thể xử lý nhiều người dùng cùng lúc mà không gặp sự cố hoặc chậm trễ
• Bảo mật: Đảm bảo rằng dữ liệu của người dùng được bảo vệ và không bị rò rỉ
• Kiểm tra tính tương thích: Đảm bảo rằng ứng dụng hoạt động tốt trên nhiều nền tảng và thiết bị khác nhau, bao gồm cả máy tính và máy tính bảng
• Xác định khả năng ổn định của hệ thống dưới tải cao
• Đảm bảo tuân thủ: Đảm bảo ứng dụng tuân thủ các quy định và tiêu chuẩn liên quan đến giáo dục và bảo mật dữ liệu
❖ Kiểm thử chức năng của User:
• Đăng ký / Đăng nhập: o Đăng ký bằng email o Đăng ký bằng tài khoản Google o Đăng ký bằng tài khoản Facebook o Đăng nhập bằng email, Google, Facebook
• Quên mật khẩu: o Gửi email khôi phục mật khẩu o Đặt lại mật khẩu
• Luyện thi (miễn phí): o Luyện đề theo Part o Luyện đề FullThực hiện thi thật (dành cho thành viên)
• Tính điểm và lưu kết quả
• Bình luận ở mỗi đề thi:
• Chatbox hỗ trợ học tập: o Sử dụng LLAMAS & PALM2 o Sử dụng CHAT GPT & GEMINI
• Chatbox hỗ trợ dịch vụ: o Gửi câu hỏi và nhận hỗ trợ
• Blog cập nhật đề thi, trao đổi tài liệu học tập:
• Xem kết quả các bài thi cũ:
• Xem lại lịch sử thi o Xem thống kê kết quả sau khi thi/luyện đề xong: o Thống kê điểm số, thời gian làm bài o Xem chi tiết từng câu
• Xem trang cá nhân: o Chỉnh sửa thông tin cá nhân o Chỉnh sửa ảnh đại diện o Xem lịch sử chỉnh sửa
• Thanh toán mua gói: o Thanh toán bằng Visa o Thanh toán bằng Paypal o Thanh toán bằng VNPay
❖ Kiểm thử chức năng của Admin:
• Quản lý người dùng: o Block / UnBlock người dùng o Xem hoạt động của người dùng
• Quản lý bộ đề thi: o Thêm, xóa, sửa bộ đề
• Quản lý đề thi: o Thêm, xóa, sửa đề thi
• Import đề thi bằng file Excel
• Quản lý bảng tính điểm: o Thêm, xóa, sửa bảng tính điểm
• Import đề thi từ website Study4: o Kiểm tra tính chính xác và định dạng
• Lấy transcript từ đoạn mp3: o Sử dụng Google cloud và Java (Rev-ai) để lấy transcript và dịch
• Quản lý lịch sử lấy transcript và data đề thi:
• Quản lý blog: o Thêm, xóa, sửa blog bằng Tiny editor
• Config các tài khoản Firebase, Kommunicate, Rev-ai, Email:
• Quản lý Template email: o Thêm, xóa, sửa template email
❖ Yêu cầu phi chức năng:
• Giao diện thân thiện với người dùng:
• Lưu kết quả thi khi bị ngắt kết nối: o Kiểm tra tính năng lưu tạm thời
• Không cho phép một tài khoản đăng nhập cùng lúc 2 máy: o Kiểm tra đăng nhập đồng thời
• Đề thi lấy từ website Study4 đảm bảo đúng với format của bộ đề ETS: o Kiểm tra tính tương thích và chính xác
• Cảnh báo khi di chuyển con trỏ chuột ra ngoài trong lúc thi thật: o Kiểm tra tính năng cảnh báo
• Hệ thống dễ bảo trì và phát triển: o Kiểm tra mã nguồn và cấu trúc hệ thống
• Có khả năng tái sử dụng lại: o Kiểm tra khả năng modular và reusable của mã nguồn
• Responsive với nhiều thiết bị: o Kiểm tra trên các thiết bị và độ phân giải khác nhau
• Số lượng người dùng: 1000 đến 2000 người dùng
• Đo lường khả năng chịu tải, thời gian phản hồi, và tỷ lệ lỗi của hệ thống
• Máy tính cá nhân có kết nối mạng Internet để có thể truy cập vào trang web luyện tập và thi toeic https://toeicute.vercel.app bằng trình duyệt (Nếu test local thì xem hướng dẫn ở 4.1)
• Hệ điều hành được sử dụng là Microsoft Windows 11 Professional
• Tài khoản: Admin: Email: admin@gmail.com
User: Email: test@gmail.com
4.2.4 Phân loại lỗi Độ nghiêm trọng Chức năng Lỗi phát hiện Ghi chú
Cao Đăng ký / Đăng nhập
Không thể đăng nhập bằng email Chức năng chính
Không thể bắt đầu bài thi Không thể bắt đầu bài thi
Không thể tính điểm sau khi thi
Không thể bắt đầu bài thi
Thanh toán bằng Visa không thành công Chức năng chính
Thanh toán bằng Paypal không thành công Chức năng chính
Thanh toán bằng VNPay không thành công Chức năng chính
Quản lý đề Không thêm / xóa đề được Chức năng chính
Hiệu năng Trang web bị treo khi có
Trung bình Đăng ký / Đăng nhập
Không thể đăng nhập bằng Google
Lỗi không gửi email kích hoạt tài khoản
Quên mật khẩu Email khôi phục không được gửi
Không thể luyện đề theo
Không thể luyện nghe Chức năng chính
Bình luận bị mất sau khi đăng Ảnh hưởng trải nghiệm người dùng
Chatbox hỗ trợ học tập
LLAMAS & PALM2 không trả lời câu hỏi
CHAT GPT & GEMINI không liên kết câu hỏi trước
Chức năng quan trọng cho thành viên
Chatbox hỗ trợ dịch vụ Không thể gửi câu hỏi Chức năng quan trọng
Xem kết quả thi cũ Không thể xem lại lịch sử thi
Xem thống kê kết quả
Thống kê không chính xác
Chức năng quan trọng Đăng xuất Không thể đăng xuất Chức năng quan trọng
Hiệu năng Trang web phản hồi chậm khi có 1000 người dùng Hiệu năng
Thiếu các hoạt động người dùng
Không chặn / mở chặn được cho người dùng
Bình luận Không thể đăng bình luận Chức năng phụ Blog cập nhật đề thi Blog không hiển thị đúng Chức năng phụ
Không thể chỉnh sửa thông tin cá nhân Chức năng phụ Không thể chỉnh sửa ảnh đại diện Chức năng phụ
Ghi chú: TH1: Cao: Cần được sửa chữa ngay lập tức
TH2: Trung bình: Cần được sửa chữa sau TH1, nhưng vẫn quan trọng
TH3: Thấp: Sửa chữa sau khi các lỗi TH1và TH2 bình đã được giải quyết
Hình 71: Danh sách Test Case
• Công cụ sử dụng: Apache JMeter
• Kịch bản kiểm thử: o 1000 người dùng:
▪ Thời gian duy trì: 30 phút o 2000 người dùng:
▪ Thời gian duy trì: 30 phút
❖ Thống kê kết quả bằng biểu đồ:
Hình 72: Thống kê số liệu Jmeter
❖ Từ biểu đồ trên phân tích kết quả hiệu năng chi tiết:
• Tổng Quan Thời Gian Phản Hồi o Số lượng yêu cầu: 3000 o Thời gian phản hồi trung bình: 2534.33 ms (khoảng 2.5 giây) o Thời gian phản hồi tối thiểu: 4 ms o Thời gian phản hồi tối đa: 8580 ms (khoảng 8.6 giây)
• Phân phối thời gian phản hồi: o 25% yêu cầu có thời gian phản hồi dưới 1097.75 ms o 50% yêu cầu có thời gian phản hồi dưới 1482 ms o 75% yêu cầu có thời gian phản hồi dưới 2558 ms
• Tỷ Lệ Thành Công o Tỷ lệ thành công: 100% o Tất cả các yêu cầu trong thử nghiệm đều thành công
• Login có thời gian phản hồi trung bình cao nhất là 3378.28 ms
• Submit exam có thời gian phản hồi trung bình thấp nhất là 1894.63 ms
• Không có yêu cầu nào thất bại, do đó không có lỗi nào được ghi nhận trong thử nghiệm này
❖ Đánh giá kết quả hiệu năng:
• Tích Cực: o Tỷ lệ thành công 100%: Điều này cho thấy hệ thống ổn định và không có lỗi trong quá trình thử nghiệm o Thời gian phản hồi chấp nhận được: Mặc dù thời gian phản hồi có thể cải thiện, nhưng với mức tải cao, hệ thống vẫn đáp ứng trong khoảng thời gian trung bình chấp nhận được
• Nhược Điểm: o Thời gian phản hồi cao: Đặc biệt là với yêu cầu "Login", thời gian phản hồi trung bình khá cao (3378.28 ms) Cần tối ưu hóa chức năng này để giảm thời gian phản hồi o Phân phối thời gian phản hồi rộng: Có sự chênh lệch lớn giữa thời gian phản hồi tối thiểu và tối đa, điều này cho thấy có thể có những điểm nghẽn cần được tối ưu hóa
✓ Hoàn thiện hệ thống quản lý và thi TOEIC: Hệ thống đã được xây dựng hoàn chỉnh với đầy đủ các chức năng dành cho người dùng và admin, bao gồm đăng ký, đăng nhập, quản lý thi thử, bình luận, hỗ trợ học tập, và quản lý blog
✓ Giao diện người dùng thân thiện và responsive: Giao diện được thiết kế hiện đại, dễ sử dụng và tương thích với nhiều thiết bị khác nhau nhờ sử dụng Angular và Bootstrap
✓ Hệ thống backend mạnh mẽ và bảo mật: Sử dụng Spring Boot và Hibernate để xây dựng backend, đảm bảo tính toàn vẹn và an toàn của dữ liệu, cũng như quản lý hiệu quả quá trình truy xuất và xử lý dữ liệu
✓ Triển khai hệ thống trên đám mây: Sử dụng Heroku và Microsoft Azure để triển khai và quản lý ứng dụng web, giúp hệ thống có khả năng mở rộng và duy trì hiệu năng ổn định
✓ Tích hợp dịch vụ và công nghệ hiện đại: Sử dụng Firebase để cung cấp dịch vụ backend, Redis để cải thiện hiệu suất, và các công nghệ như Rev-AI,
Kommunicate, Tiny để tăng cường tính năng và trải nghiệm người dùng
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM
✓ Giao diện người dùng thân thiện: Sử dụng Angular và Bootstrap giúp tạo ra giao diện dễ sử dụng, hiện đại và tương thích với nhiều thiết bị
✓ Hiệu suất và bảo mật cao: Hệ thống backend được xây dựng bằng Spring Boot và Hibernate giúp đảm bảo tính toàn vẹn dữ liệu và bảo mật
✓ Khả năng mở rộng và quản lý dễ dàng: Triển khai trên Heroku và Microsoft Azure giúp hệ thống dễ dàng mở rộng và duy trì hiệu suất ổn định
✓ Tích hợp nhiều công nghệ tiên tiến: Sử dụng Firebase, Redis, Rev-AI,
Kommunicate, Tiny giúp hệ thống có nhiều tính năng hiện đại, cải thiện trải nghiệm người dùng và tối ưu hóa hiệu suất
✓ Độ phức tạp trong quản lý: Việc sử dụng nhiều công nghệ và dịch vụ khác nhau đòi hỏi kiến thức sâu rộng và kỹ năng quản lý cao để đảm bảo hệ thống hoạt động mượt mà và hiệu quả
ƯU ĐIỂM VÀ NHƯỢC ĐIỂM
4 Đề nghị cho bảo vệ hay không?
Tp Hồ Chí Minh, ngày tháng năm 2024
(Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM
CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Độc lập – Tự do – Hạnh Phúc
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1: PHẠM VĂN HÀO MSSV 1: 20110470
Họ và tên Sinh viên 2: LÊ THỊ THANH TUYẾT MSSV 2: 20110135
Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website hỗ trợ ôn tập và thi Toeic
Họ và tên Giáo viên phản biện: Ths Nguyễn Minh Đạo
1 Về nội dung đề tài & khối lượng thực hiện:
4 Đề nghị cho bảo vệ hay không?
Tp Hồ Chí Minh, ngày tháng năm 2024
(Ký & ghi rõ họ tên)
Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành nhất đến cô Mai Anh Thơ – giảng viên hướng dẫn của em, cùng toàn thể các thầy cô trong khoa Công Nghệ Thông Tin Nhờ những kiến thức và kinh nghiệm quý báu mà các thầy cô đã truyền đạt, em đã có được nền tảng vững chắc trong suốt những năm học qua Đặc biệt, chúng em vô cùng biết ơn sự quan tâm và hướng dẫn tận tình của cô trong suốt quá trình học tập và nghiên cứu Cô đã dành nhiều thời gian để định hướng đề tài, tư vấn, hướng dẫn và góp ý, tạo điều kiện thuận lợi giúp chúng em tích lũy thêm kiến thức và có cái nhìn sâu sắc, toàn diện hơn về lĩnh vực công nghệ thông tin
Với những kiến thức mà cô đã truyền đạt, chúng em xin trình bày những gì mình đã học hỏi được thông qua việc thực hiện đề tài “Xây dựng website hỗ trợ ôn tập và thi
Toeic” Chúng em đã cố gắng hoàn thành đề tài này tốt nhất có thể trong khả năng của mình
Do kiến thức của bản thân còn hạn chế và thiếu kinh nghiệm thực tiễn nên nội dung khóa luânh khó tránh những thiếu sót Chúng em rất mong nhận sự góp ý, chỉ dạy thêm từ quý thầy cô
Một lần nữa, em xin chân thành cảm ơn cô vì đã tận tình hướng dẫn và chỉ dẫn em trong suốt quá trình học tập và thực hiện đồ án Kính chúc cô sức khỏe, hạnh phúc và thành công trong sự nghiệp giảng dạy
Cuối cùng, em xin kính chúc toàn thể các thầy cô trong khoa Công Nghệ Thông Tin sức khỏe và đạt được nhiều thành công trong sự nghiệp trồng người và nghiên cứu khoa học
6 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và Tên SV thực hiện 1: Phạm Văn Hào Mã Số SV: 20110470
Họ và Tên SV thực hiện 2: Lê Thị Thanh Tuyết Mã Số SV: 20110135
Thời gian làm luận văn từ: 04/03/2024 - Đến: 12/07/2024
Chuyên ngành: Công nghệ phần mềm
Tên luận văn: Xây dựng website hỗ trợ ôn tập và thi Toeic
GV hướng dẫn: ThS Mai Anh Thơ
Nhiệm Vụ Của Luận Văn:
✓ Tìm hiểu mô hình Client – Server
✓ Tìm hiểu về các công nghệ như Angular, String Boot, Bootstrap, JPA, Hibernate, MySQL, Firebase Storage, các dịch vụ của Google như: Vertex AI, PaLM 2 AI, Speech-to-Text AI, Open AI, Redis, PayPal, VnPay, Stripe, Heroku, Microsoft Azure
✓ Tìm hiểu tích hợp công cụ API Kommunicate, Rev-AI, TinyMCE editor
✓ Sử dụng Angular để xây dựng giao diện người dùng cho các ứng dụng web
✓ Sử dụng Spring Boot để xây dựng và cấu hình các ứng dụng backend nhanh chóng và dễ dàng
✓ Sử dụng Redis để cache dữ liệu hệ thống nhằm cải thiện hiệu suất truy xuất dữ liệu
✓ Sử dụng MySQL để lưu trữ cơ sở dữ liệu trong môi trường phát triển và sản xuất
✓ Sử dụng Firebase Storage để lưu trữ file ảnh, audio trong môi trường vận hành
✓ Sử dụng Rev-AI và Google Speect-to-Text để chuyển đổi giọng nói thành văn bản
✓ Sử dụng OpenAI và Google Vertex AI để tích hợp chatbot AI
✓ Sử dụng PayPal, Stripe, VnPay để tích hợp thanh toán trực tuyến
✓ Sử dụng Bootstrap, Ng-Zorro để thiết kế và phát triển giao diện người dùng responsive và hiện đại
✓ Sử dụng JPA (Hibernate) để sử dụng công nghệ ORM (Object-Relational Mapping) giúp cho ít mã code hơn, độc lập về database
✓ Sử dụng Heroku để triển khai, quản lý và mở rộng ứng dụng web trong môi trường đám mây
✓ Sử dụng Kommunicate để tích hợp chatbot và hệ thống trò chuyện trực tuyến nhằm cải thiện tương tác với khách hàng
✓ Sử dụng Tiny Editor để tích hợp trình soạn thảo văn bản WYSIWYG (What You See Is What You Get) vào các ứng dụng web
STT Thời gian Công việc
• Thu thập thông tin, dữ liệu cần thiết về hệ thống hiện tại hoặc yêu cầu của hệ thống mới
• Đánh giá các vấn đề tồn đọng và những điểm cần cải thiện
• Tạo mẫu thử (prototype) cho giao diện người dùng sử dụng Angular và Bootstrap
• Mục đích là để kiểm tra giao diện người dùng, tính năng và trải nghiệm người dùng trước khi triển khai thực tế
Thiết kế usecase và mô hình hoá yêu cầu:
• Sử dụng UML để thiết kế các usecase mô tả tương tác giữa người dùng và hệ thống
• Xác định các yêu cầu chính và phụ của hệ thống để đảm bảo đáp ứng đúng nhu cầu người dùng
Thiết kế cơ sở dữ liệu:
STT Thời gian Công việc
• Sử dụng MySQL để tạo ra các bảng, quan hệ và ràng buộc cần thiết
• Đảm bảo cơ sở dữ liệu đáp ứng được yêu cầu về hiệu năng và tính toàn vẹn dữ liệu
Tìm hiểu và phát triển giao diện người dùng với Angular:
• Nghiên cứu cách sử dụng Angular để tạo các component, module và service
• Phát triển các component cho trang chính, trang đăng nhập, đăng ký và các trang con khác
Tìm hiểu và phát triển backend với Spring Boot:
• Sử dụng Spring Boot để tạo các RESTful API phục vụ cho ứng dụng
• Cấu hình Spring Security để bảo mật ứng dụng, bao gồm xác thực và phân quyền
• Tìm hiểu và triển khai Spring Oauth để thực hiện đăng nhập / đăng ký qua mạng xã hội
Thiết kế giao diện người dùng responsive với Bootstrap:
• Sử dụng Bootstrap để tạo giao diện người dùng có khả năng tự điều chỉnh trên nhiều loại thiết bị (desktop, tablet, mobile)
Quản lý và truy xuất dữ liệu với JPA và Hibernate:
• Sử dụng JPA (Java Persistence API) để tương tác với cơ sở dữ liệu một cách dễ dàng
STT Thời gian Công việc
• Sử dụng Hibernate để cung cấp tính năng ORM (Object-Relational Mapping), giúp chuyển đổi giữa các đối tượng Java và bảng cơ sở dữ liệu
Phát triển và triển khai cơ sở dữ liệu với MySQL:
• Cấu hình MySQL cho môi trường phát triển và sản xuất
• Tạo các bảng, quan hệ và ràng buộc cần thiết cho hệ thống
• Tối ưu hóa các truy vấn và chỉ mục để cải thiện hiệu năng truy xuất dữ liệu
Phát triển dịch vụ backend với Firebase và các dịch vụ thanh toán:
• Sử dụng Firebase Storage để lưu trữ hình ảnh, audio
• Tìm hiểu và triển khai Paypal, Stripe, Vnpay để tích hợp thanh toán trực tuyến
Cải thiện hiệu suất với Redis:
• Sử dụng Redis để lưu trữ cache đáp án trả lời khi người dùng làm bài test toeic nhằm cải thiện tốc độ truy xuất dữ liệu và xử lý sự cố giữ lại được đáp án khi thiết bị bên người dùng xảy ra sự cố
Tích hợp chatbot và hệ thống trò chuyện trực tuyến với Kommunicate:
• Tích hợp Kommunicate để cung cấp dịch vụ hỗ trợ khách hàng trực tuyến
STT Thời gian Công việc
• Cấu hình bot và các kịch bản tương tác để đáp ứng nhu cầu người dùng
Chuyển đổi giọng nói thành văn bản với Rev-AI:
• Sử dụng Rev-AI để chuyển đổi giọng nói thành văn bản cho các ứng dụng yêu cầu xử lý ngôn ngữ tự nhiên
• Kết hợp với các dịch vụ khác để phân tích và xử lý dữ liệu âm thanh
Tích hợp trình soạn thảo văn bản với Tiny:
• Sử dụng TinyMCE để tích hợp trình soạn thảo văn bản WYSIWYG vào ứng dụng
• Cấu hình các plugin và tùy chỉnh giao diện để đáp ứng nhu cầu người dùng
Viết và hoàn thiện báo cáo luận văn:
• Tổng hợp các kết quả, phân tích và đánh giá từ các giai đoạn trước
• Viết báo cáo luận văn chi tiết, bao gồm cả phần giới thiệu, phương pháp, kết quả và kết luận
STT Thời gian Công việc
Triển khai đóng gói dịch vụ và đưa lên hosting:
• Sử dụng Heroku và Vercel để hosting BE và
Kiểm thử và chỉnh sửa toàn bộ chương trình:
• Thực hiện kiểm thử toàn diện để đảm bảo hệ thống hoạt động ổn định và đáp ứng các yêu cầu
• Chỉnh sửa các lỗi và tối ưu hóa hiệu năng trước khi triển khai chính thức
Lê Thị Thanh Tuyết Phạm Văn Hào Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 18
2 MỤC ĐÍCH CỦA ĐỀ TÀI 19
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 19
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 21
5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 21
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 22
1.1.1 Cấu trúc của đề thi Toeic 22
1.1.2 Đặc điểm nổi bật của kỳ thi TOEIC 23
1.1.3 Khảo sát các website khác trên mạng 24
1.3.3 Tích hợp công cụ và API 36
1.3.4 Triển khai và dịch vụ đám mây 41
CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 43
2.1.2 Yêu cầu phi chức năng 45
2.2 MÔ HÌNH HÓA YÊU CẦU 45
2.2.3 Mô tả Use Case và Sequence Diagram 48
CHƯƠNG 3: THIẾT KẾ GIAO DIỆN 66
CHƯƠNG 4: CÀI ĐẶT ỨNG DỤNG VÀ KIỂM THỬ 83
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 97
Bảng 1: Cấu trúc phần thi nghe 22
Bảng 2: Cấu trúc phần thi đọc 23
Bảng 3: So sánh giữa Angular và các ngôn ngữ khác 28
Bảng 4: So sánh Redis và MySQL 34
Bảng 5: Gemini, ChatGPT, LLAMAS & PaLM2 37
Bảng 6:Mô tả Use Case đăng ký 48
Bảng 7: Mô tả Use Case đăng nhập 49
Bảng 8:Mô tả Use Case bình luận 50
Bảng 9: Mô tả Use Case luyện tập 51
Bảng 10: Mô tả Use Case Chatbot 52
Bảng 11: Mô tả Use Case xem lịch sử bài thi 53
Bảng 12: Mô tả Use Case Blog 54
Bảng 13: Mô tả Use Case trang cá nhân 54
Bảng 14: Mô tả Use Case quản lý người dùng 55
Bảng 15: Mô tả Use Case thêm dữ liệu đề 56
Bảng 16: Mô tả Use Case lấy transcript 57
Bảng 17: Mô tả Use Case quản lý đề thi 57
Bảng 18: Mô tả Use Case quản lý gói thành viên 58
Bảng 19:Phân tích giao diện trang chủ 67
Bảng 20: Phân tích giao diện đăng ký 68
Bảng 21: Phân tích giao diện đăng nhập 69
Bảng 22: Phân tích giao diện quên mật khẩu 71
Bảng 23: Phân tích giao diện danh sách đề thi 71
Bảng 24: Phân tích giao diện bình luận và chọn chế độ luyện tập 72
Bảng 25: Phân tích giao diện làm bài test 73
Bảng 26: Phân tích giao diện làm bài test 73
Bảng 27: Phân tích giao diện trang chi tiết kết quả thi 74
Bảng 28: Phân tích giao diện chi tiết đáp án 75
Bảng 29: Phân tích giao diện chatbox hỗ trợ học tập 76
Bảng 30: Phân tích giao diện hỗ trợ dịch 77
Bảng 31: Phân tích giao diện bảng giá để mua gói thành viên 77
Bảng 32:: Phân tích giao diện quản lý người dùng 78
Bảng 33: Phân tích giao diện quản lý Topic 78
Bảng 34: Phân tích giao diện quản lý tính điểm 79
Bảng 35: Phân tích giao diện lấy Transcript 79
Bảng 36: Phân tích giao diện import dữ liệu đề 80
Bảng 37: Phân tích giao diện lịch sử tải lên FireBase 80
Bảng 38: Phân tích giao diện quản lý Slide 81
Bảng 39: Phân tích giao diện thêm đề thủ công bằng file Excel 81
Bảng 40: Phân tích giao diện chỉnh sửa chi tiết từng câu hỏi sau khi thêm 82
Bảng 41: Phân tích giao diện quản lý gói thành viên 82
Hình 3: Thiết kế ứng dụng 26
Hình 4: Kiến trúc hệ thống 27
Hình 14: Cách hoạt động của Spring Oauth2 36
Hình 19: Cách thức hoạt động của PayPal 39
Hình 21: Cách thức hoạt động của VNPay 40
Hình 24: Lược đồ Usecase của Guest 45
Hình 25:Lược đồ Usecase của User 46
Hình 26: Lược đồ Usecase của Admin 46
Hình 36: Giao diện trang chủ 67
Hình 37: Giao diện đăng ký 68
Hình 38: Giao diện đăng nhập 69
Hình 39: Giao diện quên mật khẩu 70
Hình 40: Giao diện nhận Mail xác nhận đổi mật khẩu 70
Hình 41: Giao diện đặt lại mật khẩu 70
Hình 42: Giao diện danh sách đề thi 71
Hình 43: Giao diện chọn chế độ luyện tập và bình luận 72
Hình 44: Giao diện làm bài test 72
Hình 45: Giao diện trang blog 73
Hình 46: Giao diện chi tiết kết quả 74
Hình 47: Giao diện chi tiết đáp án 75
Hình 48: Giao diện Chatbox AI 76
Hình 49: Giao diện Chat dịch thuật 76
Hình 50: Giao diện bảng giá mua gói thành viên 77
Hình 51: Giao diện quản lý người dùng 77
Hình 52: Giao diện quản lý Topic 78
Hình 53: Giao diện quản lý tính điểm 78
Hình 54: Giao diện get transcript 79
Hình 55: Giao diện thêm dữ liệu đề từ Study4 79
Hình 56: Giao diện lịch sử tải lên firebase 80
Hình 57: Giao diện quản lý Slider 80
Hình 58: Giao diện thêm đề bằng file Excel 81
Hình 59: Giao diện chi tiết đề 82
Hình 60: Giao diện quản lý gói thành viên 82
Hình 62: Cấu hình Redis ở Docker 84
Hình 63: Giao diện thêm Firebase 84
Hình 64: Giao diện quản lý firebase 85
Hình 65: Giao diện thêm Email 85
Hình 66: Giao diện thêm template Email 85
Hình 67: Giao diện thêm Rev-ai 86
Hình 68: Giao diện thêm Kommunicate 86
Hình 70: Giao diện thêm đề thi 87
Hình 71: Danh sách Test Case 93
Hình 73: Thống kê số liệu Jmeter 94
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Kỳ thi TOEIC (Test of English for International Communication) là một trong những bài kiểm tra tiếng Anh phổ biến nhất trên toàn cầu, được sử dụng để đánh giá và đo lường kỹ năng sử dụng tiếng Anh trong môi trường làm việc quốc tế Được phát triển và tổ chức bởi ETS (Educational Testing Service), TOEIC thường được yêu cầu hoặc sử dụng trong quá trình tuyển dụng, thăng tiến nghề nghiệp và đánh giá năng lực ngôn ngữ cho cá nhân và doanh nghiệp
Việc xây dựng một trang web thi TOEIC đặt ra một mục tiêu quan trọng là cung cấp một nền tảng thi tiếng Anh chất lượng và tiện ích cho cộng đồng học sinh, sinh viên và những người có nhu cầu cải thiện kỹ năng ngôn ngữ quốc tế của mình Trang web không chỉ mang tính chất ôn luyện mà còn hỗ trợ người dùng trong việc đánh giá trình độ tiếng Anh của mình thông qua các bài thi mô phỏng gần với định dạng và độ khó thực tế của kỳ thi TOEIC chính thức
Việc thi TOEIC không chỉ đơn thuần là một bài kiểm tra, mà còn có ý nghĩa sâu sắc trong cả môi trường học tập và nghề nghiệp Trong môi trường học tập, TOEIC không chỉ đánh giá khả năng sử dụng tiếng Anh mà còn đóng vai trò quan trọng trong việc đánh giá năng lực và cung cấp điểm chuẩn cho sinh viên trong việc xin học bổng, tham gia các chương trình trao đổi quốc tế và tìm kiếm cơ hội học tập ở nước ngoài
Trong môi trường nghề nghiệp, TOEIC là tiêu chuẩn quan trọng được nhiều công ty toàn cầu áp dụng để đánh giá năng lực tiếng Anh của ứng viên Điểm số TOEIC được coi là một yếu tố quyết định trong quá trình tuyển dụng và xác định khả năng giao tiếp trong môi trường làm việc quốc tế
Chính vì những ý nghĩa quan trọng và tầm quan trọng của việc thi TOEIC trong cả học tập và sự nghiệp, mục tiêu của tiểu luận này là xây dựng một trang web thi TOEIC có tính tương tác cao, cung cấp tài liệu ôn luyện chất lượng và mang lại giá trị thực tiễn cho người dùng Qua việc phát triển trang web, chúng tôi mong muốn đem lại một nền tảng thi TOEIC trực tuyến hiệu quả, hỗ trợ người học chuẩn bị và cải thiện điểm số TOEIC để áp dụng trong học tập và sự nghiệp của họ
2 MỤC ĐÍCH CỦA ĐỀ TÀI
Mục tiêu chính của đề tài này tập trung vào việc xây dựng một trang web để hỗ trợ việc học TOEIC và thi Toeic thật chất lượng, có khả năng tương tác cao và mang lại giá trị thiết thực cho người dùng Trang web sẽ được thiết kế với mục đích cung cấp một nền tảng ôn luyện và thi cử TOEIC linh hoạt, hiệu quả và thân thiện với người dùng Đặt trọng điểm vào việc tạo ra giao diện người dùng dễ sử dụng và thân thiện, trang web sẽ cung cấp các tài liệu ôn luyện đa dạng, bao gồm bài tập, đề thi mẫu và cơ chế phản hồi sau bài thi Mục tiêu là giúp người dùng có thể rèn luyện kỹ năng tiếng Anh một cách toàn diện và tự tin chuẩn bị cho kỳ thi TOEIC chính thức
Trang web sẽ cung cấp các bài thi mô phỏng gần với định dạng, độ khó và cấu trúc của kỳ thi TOEIC thực tế, từ đó giúp người dùng làm quen và nắm vững hơn về loại câu hỏi và phong cách của bài thi
Mục tiêu cuối cùng của dự án là tối ưu hóa kết quả và phản hồi ngay sau khi hoàn thành bài thi, giúp người dùng hiểu rõ hơn về điểm số và nhận phản hồi chi tiết về các khía cạnh cần cải thiện Đồng thời, chúng tôi cũng định hướng mở rộng tính năng và khả năng tương tác của trang web để đáp ứng nhu cầu ngày càng đa dạng của người học Với những mục tiêu này, chúng tôi hy vọng có thể đem lại một nền tảng thi TOEIC trực tuyến chất lượng, hỗ trợ người học chuẩn bị và cải thiện điểm số TOEIC một cách hiệu quả và linh hoạt
3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU
Trong đồ án này, sẽ tập trung nghiên cứu hai đối tượng chính là người dùng web và các công nghệ để phát triển trang web
HƯỚNG PHÁT TRIỂN
✓ Tối ưu hóa hiệu suất: Nghiên cứu và triển khai các giải pháp tối ưu hóa hiệu suất hệ thống, đặc biệt là trong việc truy xuất và xử lý dữ liệu
✓ Nâng cao tính năng bảo mật: Tăng cường các biện pháp bảo mật để bảo vệ dữ liệu người dùng và hệ thống, đồng thời tuân thủ các tiêu chuẩn bảo mật quốc tế
✓ Phát triển thêm tính năng mới: Tiếp tục nghiên cứu và tích hợp các công nghệ mới như trí tuệ nhân tạo, học máy để cung cấp các tính năng phân tích và dự đoán kết quả thi
✓ Mở rộng hệ thống: Nghiên cứu và triển khai các giải pháp mở rộng hệ thống để phục vụ lượng người dùng lớn hơn, đồng thời duy trì hiệu suất và độ ổn định cao
✓ Cải thiện trải nghiệm người dùng: Liên tục cải tiến giao diện và chức năng dựa trên phản hồi của người dùng để nâng cao trải nghiệm và đáp ứng tốt hơn nhu cầu của họ