MỞ ĐẦU 1. Tính cấp thiết của đề tài Trong cuộc sống tất bật hiện nay, mọi việc đều được đơn giản và tối ưu hóa thời gian thông qua việc ứng dụng công nghệ thông tin vào xử lý các công việc hàng ngày. Theo thời gian, ngày càng có nhiều công nghệ mới thuộc lĩnh vực công nghệ thông tin ra đời, và việc cập nhật, tiếp thu công nghệ mới để tối ưu công việc là đều cấp thiết nếu không muốn bị tuột hậu so với lượng kiến thức khổng lồ của ngành. Bên cạnh công nghệ phát triển thì nhu cầu học tập online của học sinh, sinh viên cũng ngày càng gia tăng.
Các Website học tập lần lượt mọc lên như nấm, nhưng thực tế rằng, các Website học tập được tạo nên đa số đều hướng về các đối tượng là người lớn, học sinh cấp 02, cấp 03, sinh viên,… Nhưng đối với thực tế hiện nay, các em cấp 01 cũng đang có nhu cầu học tập thêm rất nhiều, và các em cũng đã được tiếp cận công nghệ từ rất sớm. Chính vì thế mà nhóm đã chọn đề tài “Xây dựng Website học toán & tiếng anh cho học sinh cấp 01 bằng công nghệ Mern Stack”, nhằm để học hỏi công nghệ mới đang rất được ưa chuộng là MernStack để có thể nâng cao kiến thức chuyên ngành và ứng dụng chúng vào thực tiễn khi ra trường, đồng thời cung cấp cho các em học sinh cấp 01 một nơi để học tập, rèn luyện thêm kiến thức. Mục đích của đề tài Đề tài ra đời với mục đích giúp sinh viên tổng hợp lại các kiến thức đã tiếp thu được trong quá trình học, đồng thời có cái nhìn tổng quan về lập trình. Là cơ hội để sinh viên tìm hiểu các công nghệ mới nhất và ứng dụng chúng vào thưc tiễn.
Xây dựng website giáo dục dành cho trẻ em, tạo sân chơi mới cho trẻ em phát triển, học hỏi. Cách tiếp cận và phương pháp nghiên cứu • Đối tượng nghiên cứu: - Tìm hiểu MernStack: định nghĩa MernStack và các thành phần. 15 do an • Phạm vi nghiên cứu: Với bài luận văn này, nhóm em sẽ tập trung tìm hiểu và thực hiện các nội dung sau: - Tìm hiểu các nội dung, kiến thức về MernStack - Sau khi tìm hiểu, nhóm sẽ tập trung vận dụng những kiến thức đã tìm hiểu để xây dựng website học tập toán và tiếng anh cho học sinh cấp 01. Kết quả dự kiến đạt được • Hiểu rõ kiến thức về MernStack: định nghĩa và các thành phần.
• Xây dựng thành công website học tập toán và tiếng anh cho học sinh cấp 01 16 do an Phần 2: NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. MernStack là gì? 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. Stack: một chương trình hoàn thiện không chỉ có code, mà còn phải có nền tảng hệ điều hành và những phần mềm đi kèm (web server, cơ sở dữ liệu).
Người ta gom những thứ này lại với nhau tạo thành technical stack. ❖ MongoDB: ▪ 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++. ▪ Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, 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.
▪ Một số thuật ngữ thường gặp trong MongoDB: o Database: là một Ô chứa dữ liệu ở mức vật lý (physical), mỗi database sẽ có nhiều collection và được thiết lập lưu trữ ở một nơi trong máy chủ máy tính. Một máy chủ MongoDB thường có thể tạo nhiều cơ sở dữ liệu. o Collection: là nhóm các tài liệu (document), nó tương đương với một bảng (table) trong CSDL thông thường nên mỗi collection sẽ thuộc về một database 17 do an duy nhất. Tuy nhiên nó có một sực khác biệt đó là nó không có ràng buộc Relationship như các hệ quản trị CSDL khác nên việc truy xuất rất nhanh, chính vì thế mỗi collection có thể chứa nhiều thể loại khác nhau không giống như table trong hệ quản trị mysql là các field cố định.
o Document: có cấu trúc tương tự như kiểu dữ liệu JSON, nghĩa là sẽ có các cặp (key => giá trị) nên nó có tính năng động rất lớn. Document ta có thể hiểu nó giống như các record dữ liệu trong MYSQL, tuy nhiên nó có sự khác biệt là các cặp (key => value) có thể không giống nhau ở mỗi document.js là một trong những framework phổ biến nhất trong Node.js, nó là một framework đơn giản nhưng đủ mạnh để giúp chúng ta tiếp cận cũng như phát triển website dựa trên framwork 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.
▪ Router là một Object (khác với Routing), nó là một instance riêng của middleware và routes. Chính vì nó là một instance của middleware và route nên nó có các chức năng của cả hai. Chúng ta có thể gọi nó là một mini- application. ▪ 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. 18 do an ❖ ReactJS: ▪ Hiện nay các Web Dev đang nổi lên mô hình web single- page. Web single-page là tất cả các thao tác xử lý của trang web đều được diễn ra trên cùng một trang.
Việc này giúp nâng cao trải nghiệm người dùng, các thao tác xử lý của người dùng và animation,. đều được thực hiện một cách nhanh chóng và mượt mà. So với web single-page thì các web cũ xử lý dữ liệu khá lâu do phải phụ thuộc khá nhiều vào khả năng xử lý của server nên thường xuyên load trang mới hay nhưng trang nhiều logic sẽ khiến một số chức năng không được như ý muốn và dễ sinh ra Bug làm giảm trải nghiệm người dùng. Từ đó web single-page ra đời và các ngôn ngữ phát triển single-page ngày càng phát triển.
Trong số đó ReactJS đang là một thư viện mạnh nhất về phát triển single-page hiện nay.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. ▪ Cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng. Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML. ❖ NodeJS: ▪ NodeJS là một hệ thống phần mềm được thiết kế để viết các ứng dụng internet có khả năng mở rộng, đặc biệt là máy chủ web.
Chương trình được viết bằng JavaScript, sử dụng kỹ thuật điều khiển theo sự kiện, nhập/ xuất không đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở rộng. NodeJS bao gồm có V8 JavaScript Engine của Google, libUV và vài thư viện khác NodeJS. 19 do an ▪ NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OSX nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng JavaScript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất.
NodeJS được xây dựng và chạy trên V8 Engine. V8 Engine dựa trên C++. Vì vậy, cuối cùng trái tim của NodeJS chính là C++. ▪ Ý tưởng chính của NodeJS là sử dụng non – blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng.
Bởi vì NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao. Nếu như các ứng dụng web truyền thống, các request tajora một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả. Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng luồng đơn (Single – Threaded), kết hợp với non – blocking I/O để thực thi các request, cho phép hỗ trợ hang chục ngàn kết nối đồng thời. 20 do an CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.
KHẢO SÁT HIỆN TRẠNG 2. Tienganh123 ( https://www.com/ ) ❖ Các giao diện chính Hình 1 Giao diện website tienganh123 ❖ Những tính năng chính • Đăng nhập, đăng ký • Đăng nhập qua facebook, gmail, yahoo • Học tập theo nội dung từng lớp • Học tập qua video • Học tập qua trò chơi • Rèn luyện kỹ năng 21 do an • Làm kiểm tra • Thi đấu ❖ Ưu điểm • Giao diện dễ thương • Đả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 • Dễ sử dụng ❖ Khuyết điểm • 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 22 do an 2. Luyenthi123 ( https://www.com/ ) ❖ Các giao diện chính Hình 2 Giao diện website Luyenthi123 ❖ Những tính năng chính • Đăng nhập, đăng ký • Học tập theo lớp • Làm kiểm tra • Thi đấu • Diễn đàn trao đổi 23 do an ❖ Ưu điểm • Đả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 ❖ Khuyết điểm • 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 2. Kết luận Thông qua những trang web đã khảo sát, có thể rút ra các chức năng cần thiết phải có của một website học tập.
Bên cạnh đó, những ưu điểm và hạn chế của các trang web đã khảo sát cũng giúp nhóm rút ra những lưu ý cần thiết để có thể áp dụng vào website của mình một cách hoàn thiện hơn. XÁC ĐỊNH YÊU CẦU 2. 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 Tác nhân Chức năng 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 Thêm, xóa, sửa câu hỏi Thêm, xóa, sửa đề thi Thêm, xóa, sửa tin tức Thêm, xóa, sửa nội dung bài học Thêm, xóa, sửa kết quả thi Đăng nhập, đăng xuất 24 do an 2.
Lược đồ usecase Hình 3 Lược đồ Usecase 2. Mô tả usecase 2. Usecase đăng nhập Bảng 2 Usecase đăng nhập Tên usecase Đăng nhập Mô tả Đăng nhập vào website Tác nhân kích hoạt Users, Admin Điều kiện kích hoạt Tài khoản đã đăng ký với hệ thống, đang trong trạng thái chưa đăng nhập Luồng sự kiện chính 1.