Đồ án phát triển website hỗ trợ học tiếng Anh với ReactJS và NodeJS

NodeJS

 NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viết bằng C++ và Javascript.  Node.js ra đời khi các developer đời đầu của JavaScript mở rộng nó từ một thứ bạn chỉ chạy được trên trình duyệt thành một thứ bạn có thể chạy trên máy của mình dưới dạng ứng dụng độc lập.  Giờ đây bạn có thể làm được nhiều thứ với JavaScript hơn là chỉ tương tác với các website.

Công cụ này lấy code JavaScript của bạn và convert nó sang mã máy (bytecode) cho việc thực thi nhanh hơn. Mã máy là loại code thấp cấp hơn để máy tính có thể chạy mà không cần biên dịch nó.

Yêu cầu chức năng

Người dùng chọn đăng ký và điền đầy đủ thông tin theo yêu cầu để tạo ra được 1 khóa học. Sau khi đăng kí, ban quản lí sẽ xét duyệt, nếu chất lượng hợp lệ thì khóa học này sẽ được đăng lên. Người dùng có thể xem bảng xếp hạng theo tuần/tháng của tất cả người học đã tham gia kiểm tra của khóa học đó để có thể biết được vị trí hiện tại của bản thân.

Người dùng xem lại các bài học, trạng thái bài học mà mình đã học, và lựa chọn học lại nếu chưa hoàn thành học. Dành cho Admin, tài khoản quản lí toàn bộ trang web, Admin có thể tạo và xóa tài khoản của một manager. Dành cho Admin và manager, cả hai đều có quyền kiểm tra và xét duyệt chất lượng của khóa học, và quyết định nó có được đưa vào danh sách khóa học hay không.

Admin và manager xem xét thông tin trên trang “News” nếu có bất kì vấn đề thì cả hai có quyền xóa bình luận, thậm chí và cả tin tức.

Xây dựng hệ thống 1. Kiến trúc hệ thống

Là Document Object Model, là một biểu diễn cây dữ liệu cho toàn bộ nội dung của trang web. Là một máy chủ NodeJS để xử lý các yêu cầu HTTP và cung cấp dữ liệu cho ứng dụng. Là quá trình cho phép tạo và trả về các trang web hoàn chỉnh từ máy chủ.

Là quá trình kết nối các ứng dụng và dịch vụ khác nhau để chia sẻ dữ liệu và chức năng. 13 Models Là lớp đại diện cho các đối tượng và dữ liệu trong ứng dụng.

Thiết kế dữ liệu 1. Sơ đồ Logic

3 LICHSUNGUOIDUNG Bảng lịch sử người dùng: lưu trữ lịch sử học tập của người dùng. 5 CHITIETNHANXET Bảng chi tiết nhận xét: lưu trữ mô trả chi tiết nhận xét ứng với kết quả kiểm tra năng lực. 7 KHOAHOC Bảng khóa học: lưu trữ tên các khóa học theo chủ đề và phân loại từ dễ tới khó.

8 DEXUATLOTRINH Bảng đề xuất lộ trình: lưu trữ các lộ trình đề xuất dựa trên điểm test đầu vào. 9 LOTRINH Bảng lộ trình: lưu trữ chi tiết các mô tả lộ trình dựa trên lộ trình đề xuất. 10 BINHLUAN Bảng bình luận: lưu trữ nội dung các bài bình luận của người dùng trên bài viết cụ thể.

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải 1 MaKetQuaBaiTest ObjectId Primary key Mã kết quả bài test 2 MaNguoiDung ObjectId Foreign key Mã người dùng. Mô tả chi tiết bảng LICHSUNGUOIDUNG STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải. STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải 1 MaBangXepHang ObjectId Primary key Mã bảng xếp hạng.

STT Tên thuộc tính Kiểu dữ liệu Ràng buộc Diễn giải 1 MaLoTrinhDeXuat ObjectId Primary key Mã lộ trình đề xuất.

Danh sách giao diện

6 History Màn hình xem lại lịch sử học tập của mình 7 ChangeInfor Màn hình thay đổi thông tin. 9 Courses Màn hình tất cả khóa học 10 Courses Detail Chi tiết thông tin khóa học. 11 Vocabulary Màn hình trình bày nội dung bài học của khóa học 12 Big Test Màn hình bài kiểm tra lớn sau khóa học.

16 Video Màn hình chiếu video để người dùng xem và học theo cách phát âm, cách đọc tiếng anh. 17 MiniGame Màn hình chơi game để ôn lại nhiều từ vựng đã học 18 Scores Màn hình điểm số khi người dùng kết thúc bài kiểm tra. 20 Manager List Màn hình quản lý danh sách các người quản lý ( dành cho admin chính).

22 Course Review Màn hình danh sách các khóa học đã được đăng ký ( dành cho người quản lý).

Chi tiết giao diện 1. Login

Giao diện trang Forgot Password Màn hình Forgot Pass có thanh menu tương tự trang Login;.  Màn hình Home có component About để hiển thị thông tin cho người dùng biết về nội dung, chức năng của trang web.  Màn hình Create Course có các textbox để yêu cầu người dùng nhập thông tin cần thiết để tạo ra khóa học.

 Màn hình Create Cours có button “Submit” để nộp các thông tin mà người dùng điền vào hệ thống.  Màn hình History có table hiển thị toàn bộ thông tin mà người dùng đã học lên cho người dùng.  Màn hình ChangeInfor có các textbox để nhập và thay đổi thông tin nếu muốn;.

 Màn hình CoursesDetail có bảng biểu trình bày nội dung sẽ phải học của khóa học.  Màn hình Vocab có bảng biểu trình bày chi tiết về từ vựng mà người dùng cần học.  Màn hình Vocab có button “Pre” để trở về trang trước, button “Next” để tiếp tục sang các trang Game để ôn tập.

 Màn hình Check Level chứa button “Submitted” để người dùng nộp kết quả đã chọn.  Màn hình Check Level chứa button “Save my level” để khi người dùng lưu vào thì hệ thống ghi nhớ và gợi ý các khóa học phù hợp.  Màn hình Manager List có table chứa thông tin của các manager cho trang (page/role này chỉ dành riêng cho admin).

 Màn hình Create Manager có button “Create Manager” để admin submit và tạo ra người quản lý mới cho web.  Màn hình Course Review có table chứa danh sách các khóa học đã đăng kí bởi người dùng lên hệ thống.  Màn hình Check Course có button “Request Correction” để từ chối những khóa học không đạt tiêu chuẩn.