Đồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern Stack

Đồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern StackĐồ án tốt nghiệp: Xây dựng Website học 2 toán tiếng Anh cho học sinh cấp 01 bằng công nghệ Mern Stack

CƠ SỞ LÝ THUYẾT

MERNSTACK

Mern Stack là bộ combo open source các công nghệ liên quan đến JavaScript: MongoDB, ExpressJS, React/React Native, NodeJS

Mern: là viết tắt của 04 công cụ: M – MongoDB, E – ExpressJS, R – ReactJS, N – NodeJS

Trong lập trình, một Stack đầy đủ không chỉ bao gồm mã nguồn mà còn đòi hỏi nền tảng hệ điều hành và các phần mềm đi kèm như web server và cơ sở dữ liệu Những thành phần này được tích hợp lại để hình thành nên một technical stack hoàn chỉnh, đảm bảo hoạt động ổn định và hiệu quả của hệ thống phần mềm Thiết kế và lựa chọn đúng các thành phần trong stack là yếu tố quyết định thành công của dự án công nghệ thông tin.

▪ MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++

MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động dựa trên các khái niệm Collection và Document, giúp tối ưu hóa hiệu suất và linh hoạt trong quản lý dữ liệu Nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng, phù hợp cho các ứng dụng cần xử lý lượng lớn dữ liệu và mở rộng quy mô linh hoạt.

Trong MongoDB, các thuật ngữ quan trọng gồm có database và collection Database là một ô chứa dữ liệu ở mức vật lý, mỗi database có thể có nhiều collection và được lưu trữ tại một vị trí cụ thể trên máy chủ Một máy chủ MongoDB thường có khả năng tạo nhiều cơ sở dữ liệu để quản lý dữ liệu hiệu quả Collection là nhóm các tài liệu (document), tương tự như bảng trong hệ quản trị cơ sở dữ liệu thông thường, và mỗi collection luôn thuộc về một database nhất định.

MongoDB là hệ quản trị CSDL NoSQL duy nhất, không có các ràng buộc Relationship như các hệ quản trị CSDL truyền thống, giúp truy xuất dữ liệu rất nhanh Mỗi collection có thể chứa nhiều thể loại dữ liệu khác nhau, không giống như bảng trong MySQL với các cột cố định Document trong MongoDB có cấu trúc giống JSON, gồm các cặp key-value, mang lại tính năng động cao Các document được hiểu như các record trong MySQL, nhưng điểm khác biệt là các cặp key-value có thể khác nhau ở từng document, giúp linh hoạt trong quản lý và mở rộng dữ liệu.

Express.js là một trong những framework phổ biến nhất trong Node.js, nổi bật với khả năng đơn giản nhưng vẫn mạnh mẽ, giúp lập trình viên dễ dàng tiếp cận và phát triển các website dựa trên nền tảng này.

▪ Xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile

A router is an object that functions as a mini-application, distinct from routing It is a unique instance of middleware and routes, combining the features of both This integration allows the router to handle middleware functions and route management seamlessly, making it a powerful tool for organizing and modularizing application architecture.

▪ Các Application dùng ExpressJS làm core đều có phần Router được tích hợp sẵn trong đó

▪ Router hoạt động như một middleware nên chúng ta có thể dùng nó như một arguments Hoặc dùng nó như một arguments cho route khác

Hiện nay, các Web Dev đang ngày càng ưu tiên phát triển mô hình web single-page, giúp nâng cao trải nghiệm người dùng nhờ xử lý nhanh chóng và mượt mà các thao tác, animation trên cùng một trang So với các trang web truyền thống phụ thuộc nhiều vào khả năng xử lý của server, web single-page giảm thiểu việc tải lại trang, hạn chế lỗi và cải thiện hiệu suất Sự ra đời của web single-page thúc đẩy các ngôn ngữ và thư viện phát triển liên tục, trong đó ReactJS hiện là thư viện mạnh nhất hỗ trợ phát triển ứng dụng single-page hiệu quả.

▪ React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng do FaceBook tạo ra

Reactjs cho phép các nhà phát triển web tạo ra giao diện người dùng nhanh chóng nhờ vào hệ thống component linh hoạt Phần Views của React thường được xây dựng bằng cách sử dụng các component tổng hợp hoặc các thẻ HTML, giúp tối ưu hóa quá trình phát triển giao diện một cách hiệu quả.

NodeJS là hệ thống phần mềm được phát triển để xây dựng các ứng dụng web có khả năng mở rộng cao, tập trung vào việc phát triển máy chủ web hiệu quả Được viết bằng JavaScript, NodeJS sử dụng kỹ thuật điều khiển theo sự kiện và nhập/xuất không đồng bộ, giúp giảm thiểu chi phí vận hành và tối đa hóa khả năng mở rộng của ứng dụng Nó tích hợp V8 JavaScript Engine của Google cùng với libUV và nhiều thư viện khác để cung cấp nền tảng vững chắc cho các dự án phát triển web hiện đại.

NodeJS có khả năng chạy trên nhiều nền tảng hệ điều hành khác nhau như Windows, Linux và OSX, mang lại lợi thế lớn cho phát triển phần mềm đa nền tảng Nó cung cấp kho thư viện phong phú dưới dạng JavaScript Modules, giúp đơn giản hóa quá trình lập trình và giảm thiểu thời gian phát triển dự án Được xây dựng và hoạt động dựa trên V8 Engine – một động cơ JavaScript mạnh mẽ phát triển bởi Google dựa trên ngôn ngữ C++, nên C++ chính là trái tim của NodeJS, góp phần nâng cao hiệu suất và độ ổn định của nền tảng này.

NodeJS sử dụng kiến trúc non-blocking để xử lý dữ liệu theo hướng thực thời gian thực, giúp tăng tốc độ xử lý các tác vụ nhập/xuất Nhờ khả năng mở rộng linh hoạt và xử lý nhiều kết nối đồng thời với hiệu suất cao, NodeJS thích hợp cho các ứng dụng web yêu cầu xử lý nhanh và khả năng mở rộng lớn Trong khi các ứng dụng web truyền thống thường chiếm nhiều RAM và gặp giới hạn khi xử lý nhiều yêu cầu đồng thời, NodeJS khắc phục bằng cách sử dụng luồng đơn (Single-Threaded) kết hợp với kỹ thuật non-blocking I/O, giúp hỗ trợ hàng chục ngàn kết nối cùng lúc một cách hiệu quả.

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

2.1.1 Tienganh123 ( https://www.tienganh123.com/ )

• Đăng nhập qua facebook, gmail, yahoo

• Học tập theo nội dung từng lớp

• Học tập qua trò chơi

Hình 1 Giao diện website tienganh123

• Đảm bảo đầy đủ chức năng cơ bản của một website học tập

• Nhiều chức năng sáng tạo hỗ trợ việc học tập không nhàm chán

• Giao diện dàn trãi không làm nổi bật được chức năng chính của website

2.1.2 Luyenthi123 ( https://www.luyenthi123.com/ )

Hình 2 Giao diện website Luyenthi123

• Đảm bảo đầy đủ chức năng cơ bản của một website học tập

• Giao diện đơn giản, dễ nhìn

• Diễn đàn trao đổi những vấn đề không liên quan học tập, câu từ không phù hợp

Dựa trên các trang web đã khảo sát, chúng tôi nhận thấy những chức năng thiết yếu cần có của một website học tập, bao gồm giao diện thân thiện, dễ sử dụng và tích hợp các công cụ học tập hiệu quả Đồng thời, việc phân tích ưu điểm và hạn chế của từng nền tảng giúp nhóm rút ra các lưu ý quý giá để cải thiện và hoàn thiện website của mình, đảm bảo đáp ứng tốt hơn nhu cầu học tập của người dùng Việc áp dụng những bài học này sẽ giúp nâng cao chất lượng và hiệu quả của website học tập, thu hút và giữ chân người học hiệu quả hơn.

XÁC ĐỊNH YÊU CẦU

2.2.1 Nhận diện tác nhân và các chức năng trong sơ đồ usecase

Bảng 1Nhận diện tác nhân và các chức năng trong sơ đồ usecase

Người dùng Đăng ký tài khoản Đăng nhập / Đăng xuất ( với tài khoản đã đăng ký) Học tập

Kiểm tra Xem tin tức giáo dục Người quản lý Thêm, xóa, sửa user

Bạn có thể dễ dàng thêm, xóa, sửa câu hỏi để cập nhật nội dung phù hợp với chương trình học Quản lý đề thi một cách linh hoạt bằng cách chỉnh sửa, bổ sung hoặc xóa đề thi mới nhất Hệ thống cho phép bạn cập nhật và quản lý tin tức nhanh chóng, đảm bảo thông tin luôn mới và chính xác Chức năng chỉnh sửa nội dung bài học giúp nâng cao chất lượng giảng dạy và đáp ứng kịp thời các yêu cầu mới Ngoài ra, bạn cũng có thể quản lý kết quả thi một cách dễ dàng để theo dõi quá trình học tập của học sinh Người dùng cần đăng nhập để truy cập các tính năng này và có thể đăng xuất khi đã hoàn thành công việc để bảo vệ dữ liệu.

Hình 3 Lược đồ Usecase 2.2.3 Mô tả usecase

Mô tả Đăng nhập vào website

Tài khoản của người dùng hoặc quản trị viên cần phải đã đăng ký thành công hệ thống và đang trong trạng thái chưa đăng nhập để được kích hoạt Quá trình kích hoạt bắt đầu khi người dùng truy cập vào website, từ đó hệ thống sẽ xử lý và xác nhận trạng thái hoạt động của tài khoản để đảm bảo quyền truy cập đúng quy định.

2 Chọn chức năng đăng nhập

5 Hệ thống kiểm tra thông tin

- Nếu thông tin đúng: Chuyển đến bước

- Nếu username hoặc mật khẩu sai: Hiển thị thông báo “Tai khoan hoac mat khau khong chinh xac” Quay lại bước 3

6 Hiển thị màn hình chính của website với thông tin của tài khoản đăng nhập

Biến thể Username hoặc mật khẩu để trống: Vô hiệu hóa nút Đăng nhập

Mô tả Đăng ký tài khoản mới

Tác nhân kích hoạt Users Điều kiện kích hoạt Tài khoản chưa đăng ký với hệ thống

Luồng sự kiện chính 1 Truy cập website

2 Chọn chức năng đăng ký

5 Hệ thống kiểm tra thông tin

- Nếu thông tin đúng: Chuyển đến bước 6

- Nếu username đã tồn tại: Hiển thị thông báo “Tai khoan đã được đăng ký” Quay lại bước 3

6 Hiển thị màn hình chính của website với thông tin của tài khoản đăng ký

Mô tả Đăng xuất khỏi phiên làm việc

Tác nhân kích hoạt Users, Admin Điều kiện kích hoạt Đang trong trạng thái đã đăng nhập

Luồng sự kiện chính 1 Nhâp chọn đăng xuất

2 Thoát khỏi phiên làm việc

Bảng 5 Usecase thêm câu hỏi

Tên usecase Thêm câu hỏi

Mô tả Thêm câu hỏi vào quản lý câu hỏi

Tác nhân kích hoạt Admin Điều kiện kích hoạt Đang đăng nhập bằng tài khoản Admin

Luồng sự kiện chính 1 Trên màn hình chính nhấp vào Quản lý câu hỏi

2 Nhấp chọn nút Thêm câu hỏi

3 Nhập thông tin câu hỏi

Bảng 6 Usecase sửa câu hỏi

Tên usecase Sửa câu hỏi

Mô tả Sửa thông tin câu hỏi

2 Nhấp chọn biểu tượng Sửa

3 Nhập thông tin câu hỏi cần sửa

Bảng 7 Usecase xóa câu hỏi

Tên usecase Sửa câu hỏi

Mô tả Thêm câu hỏi vào quản lý câu hỏi

2 Nhấp chọn biểu tượng xóa câu hỏi

3 Hệ thống hiển thị thông báo “ Delete Item” Nhấn nút OK

THIẾT KẾ PHẦN MỀM

THIẾT KẾ HỆ THỐNG

Hình 4 Sơ đồ sequence diagram đăng nhập

Hình 5 Sơ đồ sequence diagram đăng ký

Hình 6 Sơ đồ sequence diagram đăng xuất

Hình 7 Sơ đồ sequence diagram thêm câu hỏi

Hình 8 Sơ đồ sequence diagram sửa câu hỏi

Hình 9 Sơ đồ sequence diagram xóa câu hỏi

THIẾT KẾ DỮ LIỆU

3.2.2 Mô hình cơ sở dữ liệu

STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 questionCategoryID String Loại câu hỏi theo lớp học

2 questionName String Tên câu hỏi

3 questionResultA String Đáp án A câu hỏi

4 questionResultB String Đáp án B câu hỏi

5 questionResultC String Đáp án C câu hỏi

6 questionResultD String Đáp án D câu hỏi

7 questionResultRight String Đáp án đúng câu hỏi

8 ExamID String Lớp làm bài kiểm tra

1 examEasyNumber String Số câu hỏi bài kiểm tra

2 examName String Tên bài kiểm tra

3 examTimeMake String Thời gian làm bài

4 classID String Lớp làm bài

5 examCategoryNumber String Loại câu hỏi

6 created Date Ngày tạo bài kiểm tra

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

1 lessionContentSubjects String Bài học của lớp

2 lessionContentTitle String Tiêu đề bài học

3 lessionContentImg String Ảnh bài học

4 lessionContentDetail String Nội dung chi tiết bài học

5 created Date Ngày tạo bài học

2 memberLogin String Tên đăng nhập

4 memberName String Tên đầy đủ

8 avatarContentImg String Ảnh đại diện

9 created Date Ngày tạo bài học

Bảng 12 NewsSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 categoryNews String Loại tin tức

2 Content String Nội dung tin tức

3 Title String Tiêu đề tin tức

4 Images String Ảnh tin tức

5 created Date Ngày tạo tin tức

Bảng 13 QuestionsSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 questionCategoryId String Loại câu hỏi theo lớp

2 questionName String Tên câu hỏi

7 questionResultRight String Đáp án đúng

8 create Date Ngày tạo câu hỏi

Bảng 14 ResultSchema STT Tên thuộc tính Kiểu dữ liệu Mô tả Ghi chú

1 Socaudung String Số câu đúng của bài kiểm tra của thành viên

2 Socausai String Số câu sai của bài kiểm tra của thành viên

3 Examimationid String Tên bài kiểm tra

4 Memberid String Tên user làm bài kiểm

5 created Date Ngày làm bài kiểm

1 categoryvocabulary String Loại câu hỏi game

2 vocabularygame String Từ vựng game

3 spellingvocabulary String Phiên âm từ

8 questionResultRight String Đáp án đúng

9 created Date Ngày tạo câu hỏi trò chơi

1 classForumQuestion String Câu hỏi thuộc lớp

2 titleFormQuestion String Tên câu hỏi

3 memberForumQuestion Object Tên user làm bài kiểm

4 memberFormRepLy Array Thông tin và câu trả lời của user

THIẾT KẾ GIAO DIỆN

THIẾT KẾ GIAO DIỆN ADMIN

4.1.1 Giao diện màn hình đăng nhập

Hình 11 Giao diện đăng nhập Admin 4.1.1.2 Danh sách xử lý

Bảng 17 Danh sách xử lý đăng nhập

STT Tên xử lý Điều kiện gọi thực hiện

“Password” Điền đúng mật khẩu

Phải điền đầy đủ thông tin và hợp lệ

4.1.2 Giao diện màn hình trang chủ Admin

Hình 12 Giao diện trang chủ Admin 4.1.2.2 Danh sách xử lý

Bảng 18 Danh sách xử lý giao diện trang chủ Admin

1 Đến danh mục quản lý học sinh

Nhấp chọn quản lý học sinh

Chỉ duy nhất Admin mới có quyền xem giao diện này

2 Đến danh mục quản lý lớp học

Nhấp chọn quản lý lớp học

3 Đến danh mục quản lý câu hỏi

Nhấp chọn quản lý câu hỏi

4 Đến danh mục quản lý đề thi

Nhấp chọn quản lý đề thi

5 Đến danh mục quản lý tin tức

Nhấp chọn quản lý tin tức

6 Đến danh mục quản lý nội dung bài học

Nhấp chọn quản lý nội dung bài học

7 Đến danh mục quản lý video bài học

Nhấp chọn quản lý video bài học

8 Đến danh mục quản lý kết quả thi

Nhấp chọn kết quả thi

9 Đăng xuất Nhấp chọn đăng xuất

Hình 13 Giao diện quản lý câu hỏi

4.1.3.2 Danh sách xử lý Bảng 19 Danh sách xử lý chức năng quản lý câu hỏi

1 Đến chức năng thêm câu hỏi

Nhấn vào button thêm câu hỏi

2 Đến chức năng sửa câu hỏi

Nhấn vào button sửa câu hỏi

3 Đến chức năng xóa câu hỏi

Nhấn vào button xóa câu hỏi

Hình 14 Giao diện thêm câu hỏi

Bảng 20 Danh sách xử lý Thêm câu hỏi

1 Loại câu hỏi Nhập dữ liệu vào editText “Anh văn 1”

2 Tên câu hỏi Nhập dữ liệu vào editText “Tên câu hỏi”

3 Đáp án A Nhập dữ liệu vào editText “Đáp án A”

4 Đáp án B Nhập dữ liệu vào editText “Đáp án B”

5 Đáp án C Nhập dữ liệu vào editText “Đáp án C”

6 Đáp án D Nhập dữ liệu vào editText “Đáp án D”

7 Đáp án đúng Nhập dữ liệu vào editText “A”

8 Lưu thêm Nhấn vào button

Thêm Điền đầy đủ thông tin

Bảng 21 Danh sách xử lý Sửa câu hỏi

1 Loại câu hỏi Nhập dữ liệu vào editText

2 Tên câu hỏi Nhập dữ liệu vào editText

3 Đáp án A Nhập dữ liệu vào editText

4 Đáp án B Nhập dữ liệu vào editText

Hình 15 Giao diện sửa câu hỏi

5 Đáp án C Nhập dữ liệu vào editText

6 Đáp án D Nhập dữ liệu vào editText

7 Đáp án đúng Nhập dữ liệu vào editText

8 Lưu sửa Nhấn vào button

Sửa Điền đầy đủ thông tin

Bảng 22 Danh sách xử lý Xóa câu hỏi

1 Không xóa Nhấn vào button

Hình 16 Giao diện xóa câu hỏi

2 Thực hiện xóa Nhấn vào button

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

4.2.1 Giao diện màn hình chính

Hình 17 Giao diện chính của người dùng

Hình 18 Giao diện chính của người dùng (tt)

4.2.1.2 Danh sách xử lý Bảng 23 Danh sách xử lý giao diện chính của người dùng

1 Tìm kiếm Nhập thông tin vào editText “ Bạn muốn tìm gì

Nhấn vào button môn toán

3 Hiển thị bài học môn Tiếng anh

Nhấn vào button tiếng anh

Hình 19 Giao diện chính của người dùng (tt)

6 Xem banner Nhấn vào bên trái hoặc phải của banner

7 Xem các bài giảng mới

Nhấn vào bài giảng muốn xem

8 Xem tài liệu học tập

Nhấn vào Tài liệu học tập

Chọn theo lớp học muốn xem

9 Kiểm tra Nhấn vào kiểm tra

10 Học online Nhấn vào Học

11 Học và chơi Nhấn vào Học và chơi

12 Diễn đàn Nhấn vào diễn đàn

13 Xem Giới thiệu Nhấn vào giới thiệu

14 Đăng xuất Nhấn vào đăng xuất Đã đăng nhập

16 Môn học theo lớp Nhấn vào button muốn xem

17 Top các học sinh có thành tích tốt

18 Các bài học nổi bật

Nhấn vào bài học muốn xem

19 Tin tức giáo dục Nhấn vào link muốn xem

Nhấn vào link muốn xem

4.2.2 Giao diện nội dung bài học

Hình 20 Giao diện nội dung bài học

Hình 21 Giao diện nội dung bài học (tt)

Bảng 24 Danh sách xử lý nội dung bài học

1 Link nội dung bài học

Nhấn vào link muốn xem

2 Nội dung bài học Chỉ xem

Hình 22 Giao di ệ n ki ể m tra

Hình 23 Giao diện kiểm tra (tt)

Bảng 25 Danh sách xử lý chức năng kiểm tra

1 Link kiểm tra Nhấn vào bài kiểm tra

2 Kiểm tra Nhấn vào đáp án đúng

Hoàn thành trong thời gian quy định

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

Tải các ứng dụng cần thiết để lập trình mern stack : visual studio code, nodejs, mongodb, robomongo

Các editor sử dụng : visual studio code + robomongo

Bước 1: Các bạn mở visual studio code -> mở terminal -> gõ npm install express

Bước 2: Gõ vào terminal express nameproject

Bước 3: Các bạn lần lượt gõ vào cd nameproject rồi npm install

Bước 4: Để chạy project các bạn gõ npm start

Bước 5: Các bạn mở trình duyệt bất kỳ và gõ localhost:3000 nếu hiển thì như hình dưới có nghĩa là các bạn tạo thành công

Bước 6: Nếu các bạn cần thư viện gì thì gõ npm install teeeeenpacket

Bước 1: Các bạn mở visual studio code và tạo 1 thư mục sau đó mở terminal lên và gõ npx create-react-app my-app

Bước 2: Các bạn mở mở terminal và gõ cd my-app sau đó gõ npm start

Nếu trình duyệt hiển thị như hình thì các bạn đã thành công

KIỂM THỬ

Bảng 26 Kiểm thử Test case

Login_01 Kiểm tra đăng nhập nhập rỗng

Nút Đăng nhập vô hiệu hóa, không thể thực hiện đăng nhập

Login_02 Kiểm tra đăng nhập sai thông tin

Trả về thông báo “ Tai khoan hoac mat khau khong chinh xac” Nút Đăng nhập vô hiệu hóa, không thể thực hiện đăng nhập

Login_03 Kiểm tra đăng nhập thành công

3 Nhập đúng username và mật khẩu

Nhấp Đăng nhập Đăng nhập thành công, hiển thị mà hình trang chủ

Register_01 Kiểm tra đăng ký thành công

2 Chọn chức năng đăng ký

3 Nhập username và mật khẩu Nhấp Đăng ký Đăng ký thành công, hiển thị mà hình trang chủ

AddQUES_01 Kiểm tra thêm câu hỏi

1 Đăng website người quản lý

2 Nhấp chọn Thêm câu hỏi

3 Nhập thông tin Nhấn chọn Thêm

Hiển thị màn hình câu hỏi vừa thêm

Kiểm tra xóa câu hỏi

2 Nhấp biểu tượng xóa của câu hỏi muốn xóa Nhấp chọn OK

Hiển thị màn hình câu hỏi không còn câu hỏi vừa xóa nữa

Kiểm tra sửa câu hỏi

2 Nhấp biểu tượng sửa của câu hỏi muốn sửa

3 Nhập thông tin cần sửa Nhấn sửa

Hiển thị thông tin vừa sửa

Những kết quả đạt được

• Hiểu rõ kiến thức về khái niệm, công dụng của MernStack

• Xây dựng thành công Website học tập với việc áp dụng những kiến thức đã tìm hiểu

• Website bao gồm 02 loại, cho người dùng (học sinh) và cho người quản lý với các chức năng:

• Giao diện cho người dùng:

▪ Đăng ký, đăng nhập vào trang web bằng Gmail, Facebook

▪ Cho phép học sinh học tập, làm kiểm tra theo nội dung từng lớp học

• Ứng dụng cho người quản lý:

▪ Đăng nhập vào trang web bằng tài khoản đã đăng ký

▪ Cho phép thêm, xóa, sửa thông tin

• Hiểu được cấu trúc, cách thức hoạt động, cách thức phát triển một trang web khi tích hợp các công nghệ mới.

Hạn chế

Trang web đã đạt được nhiều chức năng phù hợp với mục đích sử dụng, tuy nhiên còn tồn tại một số hạn chế cần khắc phục để hoàn thiện hơn trong tương lai Nhóm sẽ tập trung phát triển các tính năng mới và nâng cao chất lượng dịch vụ nhằm nâng cao trải nghiệm người dùng và đảm bảo sự hoạt động tối ưu của website Việc khắc phục những hạn chế hiện tại sẽ giúp website trở nên chuyên nghiệp, thân thiện hơn với người dùng và phù hợp hơn với các xu hướng công nghệ mới.

• Giao diện chưa hấp dẫn

• Các chức năng chưa tối ưu và thiếu logic.

Hướng phát triển

Do hạn chế thời gian nên có một số chức năng chưa thể đưa vào ứng dụng, về sau ứng dụng có thể phát triển thêm theo hướng:

• Tối ưu hóa các chức năng

• Hoàn thiện các chức năng chưa được đưa vào ứng dụng

Tiêu đề	Xây Dựng Website Học 2 Toán & Tiếng Anh Cho Học Sinh Cấp 01 Bằng Công Nghệ Mern Stack
Tác giả	Trần Thị Liên, Nguyễn Hoài Nam
Người hướng dẫn	TS. Nguyễn Thành Sơn
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	2020
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	68
Dung lượng	2,11 MB