CHƯƠNG 1 TỔNG QUAN 1. Tính cấp thiết của đề tài Ngày nay chúng ta đang sống trong thời đại công nghệ chi phối hầu như toàn bộ những lĩnh vực trong cuộc sống và giáo dục cũng không phải là một ngoại lệ. Việc trao đổi, chia sẻ, thảo luận trực tuyến với nhau những kiến thức học tập là một phần không thể thiếu đối với sinh viên nói riêng và tất cả mọi người nói chung, đặc biệt là nền tảng tiếng anh. Vì vậy dự án phát triển website luyện thi tiếng anh ra đời nhằm giúp cho sinh viên có thêm môi trường để học hỏi, tìm kiếm, trao đổi qua phần thảo luận những đề thi tiếng anh.
Riêng với sinh viên hiện nay thì tiếng anh là điều kiện tiên quyết cần có để ra trường.Vì thế website luyện thi tiếng anh là một nơi mà sinh viên có thể học tập và luyện thi để có thể đánh giá khả năng của mình một cách thực tế nhất. Đối tượng nghiên cứu 1. Người dùng cuối (Khách hàng) Người dùng có nhu cầu học: Các cá nhân, gia đình hoặc nhóm bạn quan tâm đến việc học tập tiếng anh. Đây là nhóm chính mà hệ thống website luyện thi tiếng anh trực tuyến hướng đến.
Nhà quản lý hệ thống Nhà phát triển: Các nhóm kỹ thuật và phát triển hệ thống, như các nhà phát triển phần mềm và chuyên gia công nghệ, cũng là một đối tượng quan trọng. Nghiên cứu có thể tập trung vào việc cải thiện tính ổn định, tính bảo mật và hiệu suất của hệ thống. Người quản lý sản phẩm: Những người có trách nhiệm đưa ra quyết định về tính năng, chiến lược phát triển, và trải nghiệm người dùng cuối cũng là đối tượng quan trọng. Phạm vi nghiên cứu 1.
Trải nghiệm người dùng • Giao diện người dùng: Phân tích và cải thiện giao diện để làm cho việc học các khóa học và làm đề thi trở nên dễ dàng và thuận tiện hơn cho người dùng. • Tối ưu hóa trải nghiệm: Tăng cường trải nghiệm người dùng trong việc tìm kiếm thông tin, xem các khóa học hoặc đề thi. Quản lý hệ thống và dữ liệu • Quản lý dữ liệu: Xây dựng hệ thống quản lý dữ liệu hiệu quả để lưu trữ thông tin về các khóa học, đề thi, thông tin khách hàng, và các thông tin quan trọng khác. • Bảo mật thông tin: Đảm bảo an toàn và bảo mật thông tin cá nhân của người dùng và thông tin liên quan đến giao dịch thanh toán.
Quản lý kinh doanh và marketing • Chiến lược quảng cáo và khuyến mãi: Nghiên cứu về cách hệ thống có thể được tích hợp để thực hiện chiến lược quảng cáo và khuyến mãi hiệu quả. • Thu nhập và doanh số bán các khóa học: Phân tích dữ liệu để đánh giá doanh số bán các khóa học và thu nhập từ các khóa học, từ đó cải thiện chiến lược kinh doanh. Quản lý hệ thống và kỹ thuật • Hiệu suất hệ thống: Đảm bảo hiệu suất cao và ổn định của hệ thống trong quá trình đăng kí khóa học, làm đề thi và giao dịch. • Nâng cấp và cải thiện: Tìm kiếm cách để cải thiện hệ thống, tính năng mới, và phản hồi từ người dùng để cải thiện trải nghiệm.
Mục tiêu của đề tài Về phía người dùng xây dựng được một website chia sẻ kiến thức học tập với các tính năng cơ bản về làm đề thi và tham gia thảo luận câu hỏi, tìm kiếm đề thi và các hỗ trợ khác cho người dùng. Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý môn học, quản lý tài liệu đề thi. Áp dụng Kiến Thức Chuyên Ngành: Sử dụng kiến thức từ chuyên ngành để xây dựng hệ thống với cơ sở dữ liệu mạnh mẽ, đảm bảo an toàn và bảo mật thông tin người dùng. Tối ưu hoá hiệu suất hệ thống, đảm bảo ổn định và linh hoạt trong quản lý dữ liệu và giao dịch.
Tích Hợp Các Kỹ Năng Lập Trình và Thiết Kế: Sử dụng các ngôn ngữ lập trình (như Java, JavaScript) và framework phù hợp để xây dựng giao diện và chức năng. Thiết kế giao diện đẹp và thân thiện với người dùng bằng cách áp dụng kiến thức về UX/UI. Ý nghĩa khoa học và thực tiễn Mục đích đề tài nhằm tạo ra một môi trường giúp các cá nhân có nhu cầu học tiếng anh đặc biệt là các bạn sinh viên có thể dễ dàng học và làm đề thi thực tế để đánh giá trình độ của bản thân. Nâng cao kiến thức, khả năng tự học cho sinh viên.
3 CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 2. Các công nghệ sử dụng ở Front-End 2. ReactJS Framework ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xây dựng các thành phần giao diện người dùng (UI) có thể sử dụng lại. ReactJS giúp phân chia các UI phức tạp thành các thành phần nhỏ (được gọi là component).
Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. ReactJS ban đầu được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của mình như WhatsApp & Instagram. ReactJS được dùng để xây dựng các ứng dụng - single page application (SPA). Một trong những điểm thú vị của ReacJS là nó không chỉ được xây dựng bên phía clients mà còn được sử dụng trên server và có thể kết nối với nhau.
ReactJS so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. Công nghệ Virtual DOM giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. ReactJS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.
Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object Hình 2-1 Virtual DOM trong ReactJS và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. 4 Props là từ viết tắt của properties là một object được truyền vào trong một components, mỗi components sẽ nhận vào props và trả về react element. Props là cách để các component có thể nhận được các giá trị của thuộc tính truyền vào từ bên ngoài vào và giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các component. Khi một components cha truyền cho components con một props thì components con chỉ có thể đọc và sử dụng chứ không thể chỉnh sửa nó bên phía components cha.
Cách truyền props cũng giống như cách thêm một attributes cho một element HTML Hình 2-2 Cú pháp props trong Class Component và Function Component Truyền dữ liệu thông qua Props: Ví dụ khi truyền dữ liệu từ Component cha xuống Component con. Trong phương thức renderName của Component cha ta truyền vào props value xuống Component con. Trong phương thức render của Component con ta sử dụng props đã truyền ở trên để hiển thị giá trị được truyền vào bằng {this. State là thành phần của component, nó là một object được sử dụng để chứa dữ liệu hoặc thông tin về components.
Khác với props chúng ta có thể truyền props từ component này sang các components khác nhau thì state chỉ tồn tại trong phạm vi của components chứa nó. State có thể được cập nhật thay đổi bất cứ khi nào bằng setState. Mỗi khi state được cập nhật thì components đó sẽ được re-render lại. 5 Trong một dự án React JS, state được dùng để phản hồi các yêu cầu từ người dùng, cập nhật trạng thái giao diện hay lưu trữ một dữ liệu nào đó trong components.
ReactJS được đánh giá cao đối với các doanh nghiệp: • Ứng dụng được tạo ra bởi ReactJS với cấu trúc UI tốt hơn giúp nâng cao và tối ưu hóa UX. Các doanh nghiệp có thể dễ dàng tăng tương tác của người dùng, tỉ lệ click và tỉ lệ chuyển đổi (conversion) trên trang web của mình. • Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt hơn so với khi dùng các framework khác. Nó sẽ hạn chế cập nhật của DOM, từ đó tăng tốc độ truy cập ứng dụng và cải tiến UX tốt hơn.
• ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng từ phía server. Đồng thời sẽ giúp tối ưu các nút để render phía client-side. Khả năng tùy chỉnh công cụ tốt, thậm chí làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu quả cao hơn. Các thư viện hỗ trợ khác Một số thư viện hỗ trợ cho việc xây dựng website ở phía Front-End: • Axios: là một HTTP client được phát triển dựa trên Javascript Promise, được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.
• SCSS: một ngôn ngữ tiền xử lý được biên dịch thành CSS, với phần mở rộng file có dạng. SCSS cho phép thêm các tính năng bổ sung vào CSS, bao gồm các biến, nesting,… Các tính năng bổ sung có thể giúp việc viết SCSS đơn giản và nhanh chóng hơn nhiều so với CSS tiêu chuẩn. SCSS có thể sử dụng code và hàm của CSS, tuân theo cú pháp của CSS và hỗ trợ mọi tính năng có trong SASS. • Material-ui: Thư viện React UI cung cấp các thành phần giao diện người dùng chuyên nghiệp, thuận tiện và dễ dàng sử dụng.
6 • React Router: Quản lý định tuyến trong ứng dụng React, cho phép chuyển đổi giữa các trang và cung cấp tính năng như tham số URL và quản lý history. • React Hook Form: Thư viện quản lý trạng thái biểu mẫu trong React bằng Hooks, giúp xử lý trạng thái, xác thực và theo dõi sự thay đổi trên các trường biểu mẫu. • React Helmet: Cho phép thêm các thẻ <head> tùy chỉnh vào trang React để quản lý tiêu đề, meta tags, và các thẻ khác của trang HTML. Hỗ trợ việc SEO của website được tốt hơn.
Các công nghệ sử dụng ở Back-End 2. Java Java là một ngôn ngữ lập trình và một nền tảng phần mềm đa năng. Được phát triển bởi Sun Microsystems (hiện nay là một phần của Oracle Corporation), Java đã trở thành một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới. Được thiết kế với mục tiêu đa nền tảng, Java chạy trên một môi trường ảo (Java Virtual Machine - JVM), cho phép mã nguồn Java được viết một lần và chạy trên nhiều hệ điều hành khác nhau mà không cần phải viết lại.