Nghiên cứu reactjs, nodejs và ứng dụng phát triển website học lập trình online (learn it)

Từ những ưu điểm, đặc điểm của React JS và trải qua thời gian nghiên cứu về React JS nhận thấy React JS là một thư viện lập trình rất hữu ích và tân tiến được nhiều các website lớn lựa chọn nên nhóm chúng em đã quyết định áp dụng ReactJS phát triển đề tài: “Nghiên cứu ReactJS, NodeJS ứng dụng phát triển website học lập trình online”.

CƠ SỞ LÝ THUYẾT

Tổng quan về Elearning

1.1.1 Sự phát triển của Elearning

Ngày nay, với sự bùng nổ thông tin, con người càng phải học tập nhiều môn khoa học mới, với khối lượng thông tin khổng lồ Vai trò của người thầy cần phải thay đổi; Thầy làm nhiệm vụ hướng dẫn, người học tự đi tìm và lĩnh hội tri thức Như vậy người dạy và người học phải biết sử dụng một số phương tiện khác để hỗ trợ Trong đó sử dụng công nghệ thông tin để thực hiện tất cả các nội dung, các thao tác của quá trình dạy và học, sẽ giúp người thầy nâng cao khả năng sử dụng phương pháp mới, học trò chủ động tìm tòi, phát huy sáng kiến trong học tập.

Trong những năm gần đây, cụm từ “e-learning” đã và đang trở nên gần gũi với tất cả mọi người E-learning là một phương thức học tập bằng truyền thông thông qua mạng internet theo cách tương tác với nội dung học tập và được thiết kế trên nền tảng phương pháp dạy học và được quản lý bởi các hệ thống quản lý học tập nhằm đảm bảo sự tương tác, hợp tác đáp ứng nhu cầu học mọi lúc, mọi nơi của người học Phương pháp học tập này đáp ứng cho nhu cầu học tập, tích lũy kiến thức cho tất cả mọi người, đồng thời sẽ đem lại nhưng lợi ích to lớn, tiết kiệm thời gian, công sức và tiền bạc, đồng thời cũng nâng cao chất lượng truyền đạt và tiếp thu kiến thức cho các học viên.

Trong thời đại bùng nổ thông tin hiện nay, phương thức đào tạo theo phương pháp đào tạo e-learning tạo ra rất nhiều ưu thế để phát triển: giảm chi phí, thời gian và công sức học tập, giúp nâng cao hiệu quả tiếp thu kiến thức cho sinh viên trên cơ sở sử dụng nền Web và các công cụ đa phương tiện truyền thông như hình ảnh, âm thanh, video,

Có hai hình thức đào tạo e-learning là đào tạo trực tuyến (online learning) và đào tạo hỗn hợp (blended learning) Trong đó đào tạo trực tuyến là hình thức đào tạo được thực hiện toàn bộ trên môi trường mạng thông qua hệ thống quản lý đào tạo Còn đào tạo hỗn hợp là hình thức triển khai một khóa học với sự kết hợp của hai hình thức học tập trực tuyến và học tập truyền thống Theo cách này e-learning được thiết kế nhằm mục đích hỗ trợ quá trình dạy học Với hệ thống bài giảng được thiết kế rõ ràng, có tính định hướng để sinh viên dễ dàng xác định được các nội dung cần học, cộng với việc tăng cường tính tương tác giữa giáo viên và sinh viên và giữa sinh viên với nhau. Với đặc điểm này tạo cho phương pháp đào tạo hỗn hợp được sử dụng phổ biến trên thế giới, kể cả tại các nước có nền giáo dục phát triển.

Phần lớn các hệ thống e-learning hiện nay đều xây dựng dưới dạng một ứng dụng web hệ thống quản trị học tập (LMS – Learning Management System) bao gồm tập hợp của rất nhiều các môđun chức năng khác nhau cho phép quản lý toàn bộ từ nội dung giảng dạy đến quá trình đăng ký học, quá trình học tập hay quá trình đánh giá kết quả học tập của từng sinh viên trong mỗi khóa học Ngoài ra hệ thống còn tích hợp các dịch vụ cộng tác hỗ trợ quá trình trao đổi thông tin giữa giáo viên với sinh viên và các sinh viên với nhau bao gồm các dịch vụ: giao nhiệm vụ tới người học, thảo luận, trao đổi, gửi thư điện tử, lịch học,….

Một số LMS phổ biến hiện nay trên thế giới phải kể đến là: IBM, BlackBoard, WebCT, Atutor, Itias, LRN, Moodle,… Trong đó hệ thống quản lý học tập mã nguồn mở Moodle đang được đánh giá rất cao và chiếm số lượng lớn người dùng trên thế giới.

1.1.2 Đánh giá ưu nhược điểm của E-learning

Các ưu nhược điểm của hệ thống E-learning

E-learning có một số ưu điểm vượt trội so với loại hình thức đào tạo truyền thống Kết hợp cả ưu điểm tương tác giữa giáo viên với sinh viên của hình thức học trên lớp lẫn sự linh hoạt trong việc tự xác định thời gian, khả năng tiếp thu kiến thức của sinh viên.

Hỗ trợ các “đối tượng học” theo yêu cầu, cá nhân hóa việc học Nội dung học tập được phân chia thành các đối tượng tri thức riêng biệt theo từng lĩnh vực, ngành nghề rõ ràng Điều này tạo ra tính mềm dẻo cao hơn, giúp cho sinh viên có thể chọn lựa những khóa học phù hợp với nhu cầu học tập của mình Sinh viên có thể truy cập những đối tượng này qua các đường dẫn xác định trước, sau đó sẽ tự tạo cho mình những kế hoạch học tập, thực hành, hay sử dụng các phương tiện tìm kiếm để tìm ra các chủ đề theo yêu cầu.

Nội dung môn học được cập nhật, phân phối dễ dàng, nhanh chóng Với nhịp độ phát triển nhanh chóng của trình độ khoa học công nghệ, các chương trình đào tạo cần được thay đổi, cập nhật thường xuyên để phù hợp với thông tin, kiến thức của từng giai đoạn phát triển của thời đại Với phương thức đào tạo truyền thống, muốn thay đổi nội dung bài học thì các tài liệu phải được sao chép lại và phân bố lại cho tất cả sinh viên, công việc này phải tốn rất nhiều thời gian, tiền bạc và công sức Tuy nhiên đối với E-learning, việc đó hoàn toàn đơn giản vì để cập nhật nôi dung môn học chỉ cần sao chép các tập tin được cập nhật từ một máy tính cá nhân tới máy chủ Tất cả sinh viên sẽ có được phiên bản mới nhất trên máy tính trong lần truy cập sau Hiệu quả tiếp thu bài học của sinh viên sẽ được nâng lên vượt bậc vì sinh viên có thể học với những giáo viên tốt nhất, tài liệu mới nhất cùng với giao diện web học tập đẹp mắt. Đối với sinh viên:

Hệ thống E-learning hộ trợ học theo cá nhân, theo thời gian biểu tự lập nên sinh viên có thể chọn phương pháp học thích hợp cho chính mình Sinh viên có thể chủ động thay đổi tốc độ học cho phù hợp với bản thân, giảm căng thẳng và tăng hiệu quả học tập Đối với giáo viên:

Giáo viên có thể theo dõi sinh viên dễ dàng E-learning cho phép dữ liệu được tự động lưu lại trên máy chủ, thông tin này có thể được thay đổi về phía người truy cập vào khóa học Giáo viên có thể đánh giá sinh viên thông qua cách trả lời các câu hỏi kiểm tra và thời gian trả lời các câu hỏi đó Điều này giúp cho giáo viên đánh giá công bằng lực học của mỗi sinh viên. Đối với việc đào tạo chung:

E-learning giúp giảm chi phí học tập: Bằng việc sử dụng các giải pháp học tập qua mạng, nhà trường có thể giảm được các chi phí học tập như tiền lương phải trả cho giáo viên, tiền thuê phòng học, chi phí đi lại, ăn ở của sinh viên Đối với những người học theo hình thức này, giúp họ không mất nhiều thời gian, tiền bạc và công sức khi di chuyển, đi lại và tổ chức lớp học,… góp phần tăng hiệu quả học tập.

Giáo viên và sinh viên có thể truy cập vào khóa học ở bất cứ chỗ nào, trong bất kỳ thời điểm nào mà không nhất thiết phải trùng nhau Điều này rất hữu ích cho nhà trường trong việc đào tạo tại 3 cơ sở cách xa nhau như hiện nay.

E-learning đang là một xu hướng phát triển ở rất nhiều nơi trên thế giới Việc triển khai hệ thống E-learning cần có những nỗ lực và chi phí lớn, mặt khác nó cũng có những rủi ro nhất định Bên cạnh những ưu điểm nổi bật như trên, E-learning còn có một số khuyết điểm mà ta không thể bỏ qua cần phải khắc phục sau đây:

Nghiên cứu về React JS

1.2.1 Giới thiệu về React JS

React JS là là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng- model, ng-repeat thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.

 Đặc tính của React JS

Tư tưởng React JS là xây dựng lên các components có tính tái sử dụng, dễ dàng cho việc chia nhỏ vấn đề, testing Nó giúp chúng ta dễ dàng quản lý, mở rộng hệ thống, điều này nếu là Angular thì đòi hỏi là cấu trúc, cách viết code phải thật tối ưu.

React JS luôn giữ các components ở trạng thái stateless (nhiều nhất có thể) khiến ta dễ dàng quản lý bởi nó chẳng khác gì một trang static HTML Bản than các components này không có trạng thái (state) nó nhận đầu vào từ bên ngoài và chỉ hiển thị ra dựa vào các đầu vào đó, điều này lý giải tại sao nó lại mang tính tái sử dụng (reuse) và dễ dàng cho việc test.

 Thế mạnh của React JS

React JS là một framework hiển thị view chú ý đến hiệu năng (performance- minded) Rất nhiều đối thủ nặng ký về framework MVVM mất một thời gian lớn để hiển thị những lượng data lớn, như trong trường hợp những danh sách và tương tự. Nhưng React thì không còn vấn đề này, vì nó hiển thị những gì thay đổi.

Một trong những điểm mạnh nữa cảu React Js là vitual DOM – thứ nằm ẩn ben trong mỗi view và là lý do khiến cho React đạt được hiệu năng tốt Khi một view yêu cầu gọi, tất cả mọi thứ sẽ được đưa vào trong một bản sao ảo của DOM ảo và DOM thật, và thực hiện những thay đổi đơợc chỉ ra trong phép so sánh trên.

Ví dụ: nếu chúng ta đang xem một danh sách có 20 products được hiển thị bởi React và chúng ta thay đổi product thứ 2, thì chỉ product đó được hiển thị lại , và 19 products còn lại vẫn giữ nguyên ( không cần hiển thị lại hay reload trang) React đã dùng cái gọi là “DOM ảo” – virtual DOM để tăng hiệu năng bằng cách xuất ra một hiển thị ảo, sau đó kiểm tra sự khác biệt giữa hiển thị ảo, sau đó kiểm tra sự khác biệt giữa hiển thị ảo và những gì có trên DOM và tạo a patch.

1.2.2 Một số khái niệm, kiến thức khi nghiên cứu React

React xây dựng xung quanh các component, chứ không dùng template như các framework khác Ta có thể tạo ra một component bằng cách extend Component như sau:

Hình 1 2 Ví dụ về một Component

Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page.

Trong hàm đó, bạn sẽ trả về một mô tả cho việc bạn muốn React render cái gì lên trên page Như ví dụ ở trên, đơn giản chúng ta muốn render 1 thẻ h1 chứa lời chào và tên.

Hàm render chính là mô tả cụ thể của UI tại bất cứ thời điểm nòa Vì thế nếu dữ liệu thay đổi , React sẽ take care việc update UI với dữ liệu tương ứng Chúng ta có thể hiểu đơn giản là khi dữ liệu thay đổi React sẽ tự động gọi hàm render để update lại UI.

Nếu muốn lồng nhiều component vào nhau, ta sẽ làm điều này trong lệnh return của phương thức render.

Hình 1 3 Ví dụ Component lồng nhau

Props ở đây chính là properties của một components, chúng ta có thể thay đổi props của component bằng cách truyền dữ liệu từ bên ngoài vào Props có thể là 1 object, function, string, number,…

Chú ý: Khi một props được truyền vào components thì nó là bất biến tức là dữ liệu cảu nó không được thay đổi kiểu như một “pure” function.

Sau đây là một ví dụ về “pure” function và “not pure” function

Ta xét function như dưới:

Function được gọi là “pure” vì nó không làm thay đổi giá trì đầu vào cảu nó và luôn trả về một kết quả tương tự cho cacs đầu vào như nhau.

Ta xét function thứ 2 như dưới:

Hình 1 6 Not-Pure Function Ở đây function trên đã thay đổi chính giá trị sum đầu vào cảu nó và điều này khiến nó không là “pure” function

 Tất cả các component của react phải hoạt động như “pure” function

Một component trong React có 2 cách để lấy thông tin props và state Không như props, state của 1 component không được truyền từ bên ngoài vào Một component sẽ tự quyết định state của chính nó Để tạo ra state cho component, ta sẽ phải khai báo nó trong hàm constructor.

Sự giống và khác nhau giữa Props và State

Bảng 1 1 So sánh Props và State

Có thể nhận giá trị ban đầu từ component cha Yes Yes

Có thể thay đổi component cha Yes No

Có thể set giá trị mặc định bên trong component Yes Yes

Có thể thay đổi bên trong component No Yes

Có thể set giá trị ban đầu cho các component con Yes Yes

Có thể thay đổi trong các component con Yes No

React JS là một framework đơn nhất nhưng để xây dựng được ứng dụng hoàn chỉnh, chúng ta cần nhiều thứ hơn nữa Đây là một số kiến thức cơ bản khi nghiên cứu

Ngôn ngữ xây dựng nên React, yêu cầu mức độ hiểu biết ở mức trung bình – khá về các khái niệm như :object, prototype, callback.

Công cụ quản lý package của Node Js và là phương pháp phổ biến nhất để các lập trình viên front-end cà các nhà thiết kế chia sẻ mã nguồn Javascript Nó bao gồm một hệ thống quản lý module gọi là CommonJS và cho phép chúng ta cài đặt bất cứ công cụ command-line nào được viết bằng Javascript.

Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái React đều được triển khai như là thành module CommonJs và có thể cài đặt thông qua npm.

Hay còn được gọi là các công cụ đóng gói JavaScript Vì một vài lí do kĩ thuật mà module CommonJs không thể sử dụng native trên trình duyệt thì chúng ta cần một “ công cụ đóng gói” JavaScript để “đóng gói” các modules này thành các file.js mà có thể include trê trang web thông qua thẻ.

Nghiên cứu về Node Js

1.3.1 Giới thiệu về Node Js

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 Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009 Nodejs được thiết kế để xây dựng các ứng dụng lớn hay nhỏ và có thể mở rộng nhanh và ít tốn kém nhất, tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.

Hình 1 10 Node JS Ở chế độ đồng bộ thực thi từng dòng và tiến hành thực thi dòng tiếp theo khi dòng hiện tại đã thực thi xong.

Khi bất đồng bộ thực thi tất cả dòng code cùng một lúc.

NodeJS là một nền tảng được xây dựng trên JavaScript runtime của Chrome với mục đích xây dựng các ứng dụng mạng nhanh chóng và có thể mở rộng được một cách dễ dàng hơn NodeJS sử dụng mô hình I/O lập trình theo sự kiện, non-blocking, do đó nodeJS khá gọn nhẹ và hiệu quả - công cụ hoàn hảo cho các ứng dụng chuyên sâu về dữ liệu theo thời gian thực chạy trên các thiết bị phân tán.

NodeJS là môi trường runtime mã nguồn mở đa nền tảng, được sử dụng để phát triển các ứng dụng mạng và ứng dụng server-side Các ứng dụng NodeJS được viết bằng JavaScript và có thể chạy trong NodeJS runtime trên OS X, Microsoft Windows và Linux.

NodeJS cũng cung cấp một thư viện bao gồm rất nhiều các module JavaScript khác nhau nhằm đơn giản hóa việc phát triển các ứng dụng web, qua đó giảm thiểu tình trạng sử dụng quá nhiều Node.js.

1.3.2 Các tính năng của Node Js

Lập trình hướng sự kiện và không đồng bộ: Toàn bộ API trong thư viện NodeJS đều không đồng bộ, hay không bị chặn Về cơ bản điều này có nghĩa là một server sử dụng NodeJS sẽ không bao giờ chờ một API trả về dữ liệu Server sẽ chuyển sang API kế tiếp sau khi gọi API đó và cơ chế thông báo của Events trong NodeJS giúp server nhận được phản hồi từ lần gọi API trước.

Cực kỳ nhanh chóng: Được xây dựng trên Công cụ JavaScript V8 của Google Chrome, thư viện NodeJS có khả năng xử lý mã vô cùng nhanh. Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng một mô hình luồng đơn với vòng lặp sự kiện/event Cơ chế event cho phép máy chủ phản hồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các server truyền thống hỗ trợ giới hạn các thread để xử lý yêu cầu NodeJS sử dụng một chương trình đơn luồng, cùng một chương trình có thể cung cấp dịch vụ cho một số lượng yêu cầu lớn hơn so với các máy chủ truyền thống như Apache HTTP Server.

Không có buffer - Các ứng dụng NodeJS không có vùng nhớ tạm thời (buffer) cho bất kỳ dữ liệu nào Các ứng dụng này chỉ đơn giản xuất dữ liệu theo khối.

License - NodeJS được phát hành theo giấy phép MIT.

1.3.3 Ứng dụng của Node JS

Node JS là một nền tảng phổ biến ngày nay với nhiều ứng dụng như:

 Hệ thống Notification - Giống như facebook hayTwitter

 Websocket server - Các máy chủ web socket như là Online Chat, Game Server…

 Fast File Upload Client - Các chương trình upload file tốc độ cao.

 Ad Server - Các máy chủ quảng cáo.

 Cloud Services - Các dịch vụ đám mây.

 RESTful API - Những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API.

 Any Real-time Data Application - Bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực.

 Ứng dụng Single Page Application (SPA) - Những ứng dụng này thường request rất nhiều đến server thông qua AJAX

 Ứng dụng truy vấn tới NoSQL database - Như MongoDB, CouchDB,…

 Ứng dụng CLI - Các công cụ sử dụng command-line.

1.3.4 Một số ưu, nhược điểm của NodeJS Ưu điểm:

 Nhận và xử lý nhiều kết nối chỉ với một single-thread giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy vấn.

 NodeJS tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ vì áp dụng ưu điểm non-blocking I/O của Javascript.

 Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON.

 Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh Rất phù hợp để áp dụng NodeJS để xây dựng các ứng dụng Single page Application, các ứng dụng không muốn tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt động nhanh, các **ứng dụng thời gian thực

**như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter,…

 NodeJS sẽ tận dụng tối đa Unix để hoạt động Tức là NodeJS có thể xử lý hàng nghìn process và trả ra một luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất.

 Streamming Data: Các web thông thường gửi HTTP request và nhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác.

 Viết được cho cả 2 phía server và client Chạy đa nền tảng trên Windows, MAC hoặc Linux Hơn nữa cộng đồng NodeJS rất lớn và hoàn toàn miễn phí.

 Rất hạn chế khi áp dụng NodeJS khi xây dựng ứng dụng nặng, tốn tài nguyên Bởi vì NodeJS được viết bằng C++ & Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút.

 Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên host không phải là điều dễ dàng.

 Thiếu sự kiểm duyệt chất lượng các module NodeJS.

Từ những ưu điểm, đặc điểm của Node JS và trải qua thời gian nghiên cứu về Node JS chúng em nhận thấy Node JS là một môi trường rất hữu ích và tân tiến được nhiều các website lớn lựa chọn nên nhóm chúng em đã quyết định áp dụng NodeJS phát triển đề tài: “Nghiên cứu ReactJS, NodeJS ứng dụng phát triển website học lập trình online”.

Giới thiệu MongoDb

MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở đa nền tảng viết bằng C++ MongoDB là một database hướng tài liệu (document), một dạngNoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi làBSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.

MongoDB lần đầu ra đời bởi MongoDB Inc., tại thời điểm đó là thế hệ 10, vào tháng Mười năm 2007, nó là một phần của sản phẩm PaaS (Platform as a Service) tương tự như Windows Azure và Google App Engine Sau đó nó đã được chuyển thành nguồn mở từ năm 2009.

MongoDB đã trở thành một trong những NoSQL database nổi trội nhất bấy giờ, được dùng làm backend cho rất nhiều website như eBay, SourceForge và The New York Times.

Các feature của MongoDB gồm có:

 Các ad hoc query: hỗ trợ search bằng field, các phép search thông thường, regular expression searches, và range queries.

 Indexing: bất kì field nào trong BSON document cũng có thể được index.

 Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt phiên bản đang tồn tại, đang sử dụng Với cơ sở dữ liệu, nhu cầu lưu trữ lớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dự đoán là rất cao.

Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một phiên bản cơ sở dữ liệu giống hệt cơ sở dữ liệu đang tồn tại, và lưu trữ ở một nơi khác, đề phòng có sự cố.

 Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả về kết quả đã được tính toán Các phép toán tập hợp nhóm các giá trị từ nhiều Document lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữ liệu đã được nhóm đó để trả về một kết quả duy nhất Trong SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB.

 Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding.

1.4.2 Ưu nhược điểm của MongoDb Ưu điểm của MongoDB

 Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ.

 Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độ đọc và ghi cao.

 Không ứng dụng được cho các mô hình giao dịch nào có yêu cầu độ chính xác cao do không có ràng buộc.

 Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng.

 Dữ liệu lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn.

 Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao.

1.4.3 Lí do sử dụng MongoDb

Nên sử dụng MongoDb vì :

 Kho lưu định hướng Document: Dữ liệu được lưu trong các tài liệu kiểu JSON

 Lập chỉ mục trên bất kỳ thuộc tính nào

 Replication và tính khả dụng cao

 Các truy vấn đa dạng

 Sự hỗ trợ chuyên nghiệp bởi MongoDB

Nên sử dụng MongoDB với

 Quản lý dữ liệu người dùng

 Phân phối và quản lý nội dung (CM)

Sau khi tìm hiểu về ưu nhược điểm của MongoDB, chúng ta cũng nên nhớ khi nào nên dùng nền tảng này Đó chính là khi là hệ thống realtime yêu cầu phản hồi nhanh. Ngoài ra, khi các hệ thống Big Data với yêu cầu truy vấn nhanh thì cũng nên sử dụng MongoDB Các hệ thống có lượng request lớn cũng là một trong những trường hợp cần dùng MongoDB.

Tùy theo dự án, trường hợp cụ thể khác nhau, mà chúng ta đánh giá có cần dùng đến nền tảng này hay không? Sự lựa chọn MongoDB thay cho CSDL sẽ hữu dụng hơn trong nhiều trường hợp Không phải tự nhiên, số lượng câu hỏi đặt cho MongoDB lại nhiều đến như vậy Sự hữu ích chính là điều khiến cho MongoDb được quan tâm.

KHẢO SÁT, PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Khảo sát, phân tích bài toán

2.1.1 Giới thiệu chung về hệ thống Đứng trước nỗi lo lớn nhất của người học hiện nay là sắp xếp được thời gian học tập linh hoạt cùng với nội dung học tập làm sao thật đầy đủ và phong phú khi vừa học tập vừa có thể làm việc …

Và giờ đây, với sự phát triển của công nghệ , của những cuộc chiến cách mạng 4.0 thì những website học tập là một điều vô cùng hữu ích, chính vì lẽ đó hệ thống học tập online từ đồ án “Nghiên cứu ReactJS, NodeJS ứng dụng phát triển website học lập trình online” sẽ giúp chúng ta giải quyết ngay nỗi lo lắng trên.

Hệ thống website học lập trình online là một hệ thống giúp ta học mọi lúc mọi nơi, tiếp thu các tri thức từ nhiều ngôn ngữ, nhiều nội dung mà ta hằng mong đợi.

Ngày nay, học code không còn là công việc của chỉ những chuyên gia IT hay những kỹ sư phần mềm Khi mọi công việc đều diễn ra trên internet, việc có thể tối ưu lượng truy cập cũng như tương tác trở nên rất cần thiết Việc biết cách lập trình là một trong những kỹ năng quan trọng nhất bạn có thể học nó có thể là một điểm cộng cho công việc dù bạn làm bất cứ nghề gì.

Nếu là một người mới bước chân vào thế giới lập trình, điều này thực sự có ý nghĩa khi bắt đầu tự học và tự khám phá ra, ta có thể làm gì cũng như không thích điều gì, ta cần học ngôn ngữ gì trước khi chúng ta đến với những trang web học code Ngoài ra việc học ngôn ngữ ở hệ thống này hoàn toàn là miễn phí Công việc về lập trình, phát triển web càng ngày càng không ngừng lớn mạnh, các công ty lớn nhất toàn cầu không nhừng tìm kiếm nhân tài lập trình cho những vị trí quan trọng Khi tiếp cận đúng,chúng ta sẽ nhận ra ta sẽ không phải trả một khoản phí nào cho việc học code đồng thời đây là kỹ năng không bao giờ bị bỏ qua bởi các nhà tuyển dụng.

Hệ thống này sẽ giúp ta tận dụng tối đa đến 80% thời gian rảnh dỗi hay 100% chi phí của việc học tập.

2.1.2 Khảo sát về một số website học lập trình

Hiện nay không khó để ta tìm thấy những website học lập trình hoàn toàn miễn phí như:

2.1.2.1 Một số điểm về các website học lập trình

CODECADEMY: Codecademy cam kết mang đến cho chúng những trải nghiệm học tập tốt nhất và nhất quán, đây là một trong những trang web tuyệt vời nhất để chúng ta học cách lập trình Code Academy nhận ra rằng học lập trình không nên học theo cách truyền thống qua khảo sát ở các trường công lập, và công ty quyết định tạo ra một lớp học trực tuyển trên mạng.

Hình 2 1 Khảo sát website Codecademy

Code Academy đã và đang xây dựng nền giao dục theo nhu cầu của thế giới cho hiện tại cũng như tương lại bằng những trải nghiệm giáo dục hấp dẫn Hơn 24 triệu người đã sử dụng Code Academy để học lập trình, trang web cung cấp các khóa học về các ngôn ngữ JavaScript, HTML and CSS, PHP, jQuery, Ruby, and Python Với hơn 300 giờ nội dung miễn phí cho hàng triệu cá nhân trên khắp thế giới Những khóa học sẽ giúp bất kì ai, bất kể kỹ năng lập trình như thế nào hiểu hơn về máy tính.

EDX: Là một nền tảng trực tuyến hàng đầu với mục tiêu phi lợi nhuận, nó là một mã nguồn mở Được thành lập vào năm 2012 bởi MIT và Harvard.Chính vì thế, bạn sẽ học được những lý thuyết cũng như công nghệ mới nhất, tiên tiến nhất hiện nay.EdX có 90 đối tác trên toàn thế giới trong đó gồm các tổ chức phi lợi nhuân, các trường đại học hàng đầu.

Người học sẽ được chọn khóa học từ khoảng 60 trường Đăng ký vào khóa học có thể học chúng trong phạm vi toàn cầu với đủ các lĩnh vực như kỹ sư, khoa học máy tính, ngôn ngữ, marketing, sinh học, và nhiều hơn thế nữa EdX được thành lập bởi các trường đại học và cao đẳng hàng đầu, là một nền tảng thực tế, có sẵn và miễn phí Các nhà công nghệ cũng như giáo dục có xây dựng cũng như đóng góp các nền tảng giúp mang lại lợi ích cho toàn bộ học sinh toàn thế giới.

Hình 2 2 Khảo sát website Udemy

FREECODECAMP: Mục đích chính của Free Code Camp là một tổ chức phi lợi nhuận dạy lập trình cho những người muốn học hỏi Tổ chức đã giải quyết hơn 30 triệu thách thức về lập trình và đã đóng góp hơn 1,4 triệu đô la cho công việc phát triển Thêm vào đó, hơn 4.000 cá nhân đã có được các công việc về lập trình nhờ vào các khóa học được cung cấp bởi Free coding Camp Có các khóa học về HTML5, CSS3, JavaScript và hơn thế nữa.

Học sinh sẽ nhận được sự trợ giúp thời gian thực từ các phòng chat cộng đồng, trong khi đó họ thể gặp gỡ với các lập trình viên khác ở cùng thành phố với họ Học sinh sẽ có thể làm việc theo tốc độ của riêng mình, không chỉ trên máy tính của họ mà còn trên điện thoại của họ nếu cần Khi học tập, các cá nhân sẽ tập hợp và xây dựng các ứng dụng sẽ được sử dụng thực sự bởi người dùng Các khóa học được phân phối thông qua các bài tập và hướng dẫn tương tác và tập trung Bạn không phải trả phí để bắt đầu học.

Hình 2 3 Khảo sát website FreeCodeCamp

GITHUB: Sử dụng GitHub làm nơi tham khảo Có hơn 500 cuốn sách miễn phí về lập trình sẽ bao gồm hơn 80 ngôn ngữ lập trình khác nhau trên dịch vụ lưu trữGit Cộng tác viên làm việc khá chăm chỉ để đảm bảo rằng các tài nguyên này được cập nhật thường xuyên và chính xác.

Hình 2 4 Khảo sát website Github

- Quan sát tổng thể website học lập trình

- Phân tích yêu cầu người dùng

 Người dùng muốn và cần:

- Một website học lập trình online …

- Website tiện dụng, đơn giản, dễ dàng sử dụng.

 Đề xuất các chức năng dự kiến trong hệ thống:

- Quản lý tài khoản: Tài khoản được quản lý dựa trên các loại tài khoản, có 4 loại tài khoản gồm: Admin , Mod , User và Khách

- Thu thập thêm các khảo sát trên các diễn đàn về vấn đề này.

2.1.3 Tổng quan về hệ thống

2.1.4 Nguyên lý hoạt động của hệ thống

Yêu cầu xây dựng một hệ thống phần mềm phục vụ cho việc quản lý và học tập Learn IT như sau:

- Admin là tài khoản trực tiếp điều khiển hệ thống phần mềm, nắm được các hoạt động Admin có đặc quyền can thiệp vào hệ thống, thêm sửa xóa theo ý muốn.

Cụ thể, admin tự quản lý được tài khoản cá nhân và các tài khoản người học, có thể xem chi tiết các tất cả các thông tin trên hệ thống.

- Mod là tài khoản gián tiếp điều khiển hệ thống phần mềm , tài khoản này dùng để quản lý những bài viết , bài tập…

- User là tài khoản dành cho người học, hỗ trợ cho việc học tập các khóa học, viết blog, …

- Khách là trạng thái người dùng chưa đăng kí tài khoản có thể xem tổng quan về lộ trình , các khóa học kèm theo đọc các bài viết.

Thiết kế các chức năng

Tương ứng với xây dựng Use Case tổng quát và chi tiết cho từng đối tượng người dùng, đảm bảo được các chức năng cơ bản, cho phép người dùng thực hiện các thao tác một các dễ dàng:

2.2.1 Chức năng website học lập trình online – LEARN IT

- Chức năng quản lý bài viết.

- Chức năng quản lý khóa học( gồm khóa học, bài học, bài tập).

- Chức năng đăng nhập/ đăng ký.

2.2.2 Chức năng trang quản trị viên

- Chức năng Thêm, Sửa, Xóa khóa học.

- Chức năng Thêm, Sửa, Xóa bài học.

- Chức năng Thêm, Sửa, Xóa bài tập.

- Chức năng duyệt bài viết, xóa bài viết.

- Chức năng cấp quyền User/Mod.

Với mô hình Client – Server và theo thiết kế hệ thống như trên, ứng dụng có 4 loại User:

- Khách chưa đăng ký tài khoản: Khách (Guest)

- Khách đã đăng ký tài khoản: Người dùng (User)

- Người quản trị cấp cao nhất: Quản trị viên (Admin).

Sơ đồ khối chức năng

Sơ đồ khối chức năng gồm các khối :

- Web Client: Giao diện người dùng, giao tiếp và gửi request đến server.

- Web server: Xử lý request và trả về response cho Client.

- Routes: Định tuyến cho các request.

- Controller: Bộ điều khiển, thực hiện validate các tham số và giao tiếp với Service, trả kết quả về cho Web server.

- Service: Nhận yêu cầu và thao tác với cơ sở dữ liệu.

- MongoDb: Lưu trữ dữ liệu dưới các dạng document.

Hình 2 5 Sơ đồ khối chức năng

Biểu đồ phân rã chức năng ( WBS)

Hệ thống học lập trình online – Learn IT được phân rã thành các chức năng như sau:

- Chức năng của user o Xem nội dung khóa học, bài học, bài tập o Xem danh sách khóa học, bài học, bài tập o Đăng kí khóa học o Giải bài tập

- Chức năng của khách o Xem giới thiệu khóa học

- Bài viết o Chức năng của ADMIN, MOD

 Các chức năng của user o Chức năng của user:

 Xem danh sách bài viết

 Xem danh sách bài viết theo chủ đề

 Xem nội dung bài viết

 Thêm, sửa, xóa bài viết cá nhân

 Xem bình luận / Binh luận / xóa bình luận bài viét

 Báo cáo bài viết o Chức năng của khách:

 Xem danh sách bài viết

 Xem danh sách bài viết theo chủ đề

 Xem nội dung bài viết

 Quản lý người dùng ( set status, xóa, set roles, ủy quyền quản lý khóa hoc )

 Các chức năng của User o MOD: Các chức năng của user o User: Xem thông tin , thay đổi thông tin.

- Biểu đồ phân rã chức năng (WBS)

Hình 2 6 Biểu đồ phân rã chức năng (WBS)

Biểu đồ UseCase và đặc tả

2.5.1 Xác định Actor và UseCase

Bảng 2 1 Xác định Actor và UseCase

Chức năng Khách User Mod Admin

- Xem danh sách bài viết

- Xem bài viết theo chủ đề

- Sửa , xóa bài viết của mình

Bài viết bị báo cáo

- Xử lý bài viết bị báo cáo ( xóa bài viết, khóa bài viết)

- Đọc bình luận bài viết

- Xóa bình luận của mình

- Xem thông tin khóa học

- Xem nội dung bài học

- Thêm, sửa, xóa bài học

- Lấy danh sách bài tập

- Tạo, sửa , xóa bài tập

Tài khoản - Đăng nhập/ đăng xuất

- Xem thông tin cá nhân

- Chỉnh sửa thông tin cá nhân

- Xem thông tin cá nhân

- Chỉnh sửa thông tin cá nhân thông tin cá nhân -

- - Khóa, kích hoạt tài khoản người dùng

- Ủy quyền người dùng (user/mod)

- Xem thông tin tất cả người dùng

2.5.2 Biểu đồ Usecase tổng quát

Hình 2 7 Biểu đồ Usecase tổng quát

2.5.3 Biểu đồ UseCase chi tiết

- Biểu đồ UseCase quản lý khóa học của Admin và Mod

Hình 2 8 Biểu đồ UseCase quản lý khóa học của Admin và Mod

- Biểu đồ UseCase quản lý khóa học của User và Khách

Hình 2 9 Biểu đồ UseCase quản lý khóa học của User và Khách

- Biểu đồ UseCase quản lý bài viết của Admin, Mod

Hình 2 10 Biểu đồ UseCase quản lý bài viết của Admin, Mod

- Biểu đồ UseCase quản lý bài viết của User, Khách

Hình 2 11 Biểu đồ UseCase quản lý bài viết của User, Khách

Biểu đồ UseCase quản lý người dùng của Admin

Hình 2 12 Biểu đồ UseCase quản lý người dùng của Admin

- Biểu đồ UseCase Tài khoản

Hình 2 13 Biểu đồ UseCase Tài khoản

- Đặc tả Usecase Đăng ký

Bảng 2 2 Đặc tả Usecase Đăng Ký

STT Tên UC Đăng Ký

2 Mô tả Người dùng muốn đăng kí tài khoản khi chưa có tài khoản

3 Luồng sự kiện chính 1 Người dùng truy cập vào hệ thống.

2 Hệ thống hiển thị giao diện đăng nhập

3 Người dùng chọn đăng ký tài khoản

4 Hệ thống hiển thị from đăng kí.

5 Điền đầy đủ thông tin vào form và chọn button Đăng ký.

6 Hệ thống hiển thị thông báo Truy cập Mail để kích hoạt tài khoản

1 Người dùng đăng kí trùng Email Thông báo Email đã tồn tại

- Đặc tả Usecase Đăng nhập

Bảng 2 3 Đặc tả Usecase Đăng Nhập

STT Tên UC Đăng Nhập

1 Tác nhân User / Mod / Admin.

2 Mô tả Đăng nhập vào hệ thống để sử dụng.

1 Người dùng truy cập vào hệ thống.

2 Hệ thống hiển thị giao diện đăng nhập.

3 Người dùng nhập tên đăng nhập và mật khẩu.

4 Hệ thống thực hiện chức năng, nếu đăng nhập thành công hệ thống dựa vào loại tài khoản để hiển thị giao diện.

1.Người dùng đăng nhập không thành công.

2 Hệ thống hiển thị thông báo và yêu cầu đăng nhập lại.

- Đặc tả Usecase Đăng xuất

STT Tên UC Đăng Xuất

2 Mô tả Đăng xuất khỏi hệ thống.

1 Người dùng click vào button đăng xuất.

2 Hệ thống thực hiện đăng xuất tài khoản Actor khỏi hệ thống.

- Đặc tả Usecase Đổi mật khẩu

Bảng 2 5 Đặc tả Usecase Đổi Mật Khẩu

STT Tên UC Đổi Mật Khẩu

2 Mô tả User / Mod / Admin đổi mật khẩu.

1 Tại giao diện sau khi đăng nhập, người dùng click vào ảnh đại diện , chọn Tài khoản.

2 Hệ thống hiển thị giao diện thông tin cá nhân gồm các thông tin về cá nhân, đổi mật khẩu.

3 User / Mod / Admin chọn Đổi mật khẩu.

4 Hệ thống hiển thị form đổi mật khẩu, điểm form và nhấn lưu.

4 Luồng sự kiện phụ 1 Không thành công nếu nhập sai mật khẩu hiện tại

2 Hệ thống thông báo nhập lại mã.

- Đặc tả Usecase Lấy lại mật khẩu

Bảng 2 6 Đặc tả Usecase Lấy Lại Mật Khẩu

STT Tên UC Lấy Lại Mật Khẩu

2 Mô tả Lấy lại mật khẩu cho người dùng khi quên mật khẩu.

1 Tại giao diện đăng nhập, người dùng click button Quên mật khẩu.

2 Hệ thống hiển thị giao diện nhập tài khoản.

3 Người dùng nhập tài khoản vào ô input và click button Tiếp tục.

4 Hệ thống tiến hành gửi mã xác nhận về email của người dùng.

5 Người dùng nhập mã xác nhận và click Button Tiếp tục.

6 Hệ thống hiển thị giao diện đổi mật khẩu.

7 Người dùng thực hiện đổi mật khẩu.

8 Hệ thống thực hiện chức năng và hiển thị thông báo.

4 Luồng sự kiện phụ 3 Tài khoản không tồn tại trong hệ thống thì thông báo nhập lại tài khoản. nhập lại mã.

- Đặc tả Usecase Xem thông tin cá nhân

Bảng 2 7 Đặc tả Usecase Xem Thông Tin Cá Nhân

STT Tên UC Xem Thông Tin Cá Nhân

2 Mô tả Người dùng xem thông tin cá nhân như họ tên, số điện thoại, email, địa chỉ,…

1 Tại giao diện sau khi đăng nhập, người dùng click vào ảnh đại diện , chọn Tài khoản.

2 Hệ thống hiển thị giao diện thông tin cá nhân gồm các thông tin về cá nhân,…

- Đặc tả Usecase Sửa thông tin cá nhân

Bảng 2 8 Đặc tả Usecase Sửa Thông Tin Cá Nhân

STT Tên UC Sửa Thông Tin Cá Nhân

2 Mô tả Người dùng chỉnh sửa thông tin cá nhân của mình

3 Luồng sự kiện chính 1 Tại giao diện sau khi đăng nhập, người dùng click vào ảnh đại diện , chọn Tài khoản.

2 Người dùng cập nhật thông tin cá nhân tại những trường khả dụng.

3 Người dùng click button “Lưu”.

4 Hệ thống thực hiện chức năng và hiển thị thông báo.

4 Luồng sự kiện phụ 1 Người dùng có thể click button Hủy để hủy thay đổi.

- Đặc tả Usecase Xem Khóa học

Bảng 2 9 Đặc tả Usecase Xem Khóa học

STT Tên UC Xem Thông Tin Khách Hàng

2 Mô tả Khách/ User / Mod / Admin Xem khóa học

1 Tại giao diện sau khi đăng nhập, người dùng click Khóa học

2 Hệ thống hiển thị giao diện Danh sách khóa học

- Đặc tả Usecase Tìm kiếm

Bảng 2 10 Đặc tả Usecase Tìm Kiếm

STT Tên UC Tìm Kiếm

1 Tác nhân Khách / User/ Mod/ Admin

2 Mô tả Tìm kiếm khóa học , bài học , video , bài viết… kiếm

2 Nhập nội dung cần tím kiếm như : khóa học, bài viết , video…

3 Hê thống sẽ hiển thị chức năng và trả về kết quả tìm kiếm

1 Hệ thống sẽ trả về rỗng nếu không có kết quả phù hợp.

- Đặc tả Usecase Thêm , sửa, xóa khóa học

Bảng 2 11 Đặc tả Usecase Thêm , sửa, xóa khóa học

STT Tên UC Thêm, Sửa, Xóa Khóa Học

2 Mô tả Admin thêm , sửa , xóa khóa học trong hệ thống.

1 Tại giao diện hệ thống admin chọn “Khóa học”

2 Thêm , sửa, xóa khóa học.

- Đặc tả Usecase Thêm, sửa, xóa bài học

Bảng 2 12 Đặc tả Usecase Thêm , sửa, xóa khóa học

STT Tên UC Thêm, Sửa, Xóa Bài Học

2 Mô tả Admin thêm , sửa, xóa bài học ra khỏi hệ thống.

1 Tại giao diện admin chọn “Khóa học”, sau đó chọn Xem khóa học , chọn xem bài giảng.

2 Hệ thống hiển thị các bài học , admin chọn thêm, sửa , xóa bài học.

3 Admin lựa chọn bằng cách xác nhận hoặc không.

- Đặc tả UseCase Xem danh sách, nội dung bài học

Bảng 2 13 Đặc tả UseCase Xem danh sách, nội dung bài học

STT Tên UC Xem Danh Sách, Nội Dung Bài Học

1 Tác nhân Admin / Mod / User

2 Mô tả Admin / Mod xem chi tiết danh sách , nội dung bài học

1 Tại giao diện trang chủ chọn một Khóa học.

3 Xem nội dung bài học.

- Đặc tả UseCase Thêm, Sửa , Xóa bài tập

Bảng 2 14 Đặc tả UseCase Thêm, Sửa , Xóa bài tập

STT Tên UC Thêm , Sửa , Xóa Bài Tập

2 Mô tả Admin thêm, sửa, xóa bài tập trong hệ thống.

1 Tại giao diện admin chọn “Khóa học”, sau đó chọn Xem khóa học , chọn xem bài giảng.

2 Hệ thống hiển thị các bài tập , admin chọn thêm, sửa , xóa bài tập.

3 Admin lựa chọn bằng cách xác nhận hoặc không.

- Đặc tả UseCAse Xem danh sách và giải bài tập

Bảng 2 15 Đặc tả UseCAse Xem danh sách và giải bài tập

STT Tên UC Xem Danh Sách Và Giải Bài Tập

1 Tác nhân Admin/Mod/User

2 Mô tả Admin / Mod / User xem danh sách trong hệ thống.

1 Tại giao diện học tập xem danh sách bài tập

2 Chọn vào tên Bài tập để xem đề và tiến hành giải bài tập.

- Đặc tả UseCase Đăng ký khóa học

Bảng 2 16 Đặc tả UseCase Đăng ký khóa học

STT Tên UC Đăng ký khóa học

1 Tác nhân User/Mod/Admin

2 Mô tả Đăng ký khóa học trong hệ thống.

1 Tại giao diện Trang Chủ chọn “Khóa học” sau đó chọn khóa học mình thích.

2 Chọn button “Đăng ký ngay” để đắng ký khóa học

- Đặc tả UseCase Active/inactive

Bảng 2 17 Đặc tả UseCase Active/inactive

STT Tên UC Active / Inactive

2 Mô tả Admin kích hoạt người dùng, khóa tài khoản người dùng

1 Tại giao diện admin , admin click tên user ở bảng quản lý user.

- Đặc tả UseCase Ủy quyền người dùng

Bảng 2 18 Đặc tả UseCase Ủy quyền người dùng

STT Tên UC Ủy Quyền Người Dùng

2 Mô tả Admin ủy quyển User/ Mod cho tài khoản

1 Tại giao diện Admin click cột Trạng Thái ở bảng quản lý user.

2 Chọn ủy quyền User / Mod cho tài khoản

- Đặc tả UseCase Set quyền với khóa học

Bảng 2 19 Đặc tả UseCase Set quyền với khóa học

STT Tên UC Set quyền với khóa học

2 Mô tả Admin set quyền với khóa học cho Mod

1 Admin chọn Mod muốn set khóa học

3 Hiển thị thông báo thành công hoặc thất bại.

- Đặc tả UseCase Xem thông tin tất cả người dùng

Bảng 2 20 Đặc tả UseCase Xem thông tin tất cả người dùng

STT Tên UC Xem thông tin tất cả người dùng

2 Mô tả Admin xem thông tin tất cả người dùng.

3 Luồng sự kiện chính 1 Admin vào giao diện trang quản lý

2 Thông tin người dùng được hiển thị trên bảng quản lý.

- Đặc tả Usecase Xem danh sách bài viết

Bảng 2 21 Đặc tả Usecase Xem danh sách bài viết

STT Tên UC Xem danh sách bài viết

1 Tác nhân Admin/Mod/User/Khách

2 Mô tả Người dùng xem danh sách các bài viết trên trang web

1 Tại giao diện Trang chủ, người dùng Click vào Blog

2 Hệ thống thực hiện chức năng và hiển thị danh sách bài viết

- Đặc tả Usecase Xem bài viết theo chủ đề

Bảng 2 22 Đặc tả Usecase Xem bài viết theo chủ đề

STT Tên UC Xem bài viết theo chủ đề

2 Mô tả Người dùng xem danh sách các bài viết trong cùng 1 chủ đề

1 Tại giao diện Trang Blog, người dùng Click vào chủ đề muốn xem

2 Hệ thống thực hiện chức năng và hiển thị danh sách bài viết cùng chung chủ đề

- Đặc tả Usecase tạo bài viết

Bảng 2 23 Đặc tả Usecase tạo bài viết

STT Tên UC Tạo bài viết

2 Mô tả Người dùng tạo bài viết

1 Tại giao diện Trang chủ, người dùng Click vào Button thêm bài viết

2 Hệ thống hiển thị ra trang viết Blog

3 Người dùng nhập nội dung muốn truyền tải 4.Người dùng thêm chủ đề bài viết và ảnh mô tả

5 Người dùng bấm button Xuất bản ngay

6 Hệ thống hiện thị thông báo Bài viết đang được duyệt

6 Admin xem xét và duyệt bài viết, hiển thị trên giao diện Blog

4 Luồng sự kiện phụ 1 Người dùng không nhập tiêu đề thì hiển thị thông báo Tiêu đề không được để trống

- Đặc tả Usecase xóa bài viết

Bảng 2 24 Đặc tả Usecase xóa bài viết

STT Tên UC Xóa bài viết

1 Tác nhân Admin/Mod/User/

2 Mô tả Người dùng chỉnh sửa bài viết

1 Tại giao diện Bài viết đã xuất bản Người dùng lựa chọn Xóa bài viết

2 Hệ thống thực hiện chức năng và thông báo Xóa thành công

3 Hệ thống hiển thị ra danh sách bài viết sau khi xóa

- Đặc tả Usecase chỉnh sửa bài viết

Bảng 2 25 Đặc tả Usecase chỉnh sửa bài viết

STT Tên UC Chỉnh sửa bài viết

2 Mô tả Người dùng chỉnh sửa bài viết

3 Luồng sự kiện chính 1 Tại giao diện bài viết đã xuất bản Người dùng lựa chọn chỉnh sửa bài viết

2 Hệ thống hiển thị giao diện sửa bài viết

3 Người dùng thực hiện sửa nội dung bài viết

4 Người dùng Click button Xuất bản ngay

5 Hệ thống hiển thị ra bài viết sau khi đã chỉnh sửa

1 Người dùng không nhập tiêu đề thì hiển thị thông báo Tiêu đề không được để trống

- Đặc tả Usecase Lưu bài viết

Bảng 2 26 Đặc tả Usecase Lưu bài viết

STT Tên UC Lưu bài viết

2 Mô tả Người dùng bấm nút lưu bài viết

1 Tại giao diện Blog Người dùng bấm Lưu bài viết

2 Hệ thống hiển thị thông báo Lưu bài viết thành công

1 Người dùng bấm vào bài viết 1 lần nữa thì bỏ lưu bài viết

- Đặc tả Usecase Xử lí bài viết bị báo cáo

Bảng 2 27 Đặc tả Usecase Xử lí bài viết bị báo cáo

STT Tên UC Xử lí bài viết bị báo cáo

2 Mô tả Admin/mod khóa/xóa bài viết bị báo cáo

3 Luồng sự kiện chính 1 Tại trang Admin, giao diện báo cáo

Admin/mod kiểm tra lại bài viết rồi thực hiện xóa hoặc khóa bài viết

2 Hệ thống hiển thị thông báo cập nhật thông tin

1 Admin/Mod không thực hiện xóa/ khóa bài viết sau khi được báo cáo

- Đặc tả Usecase Xử lí bài viết bị báo cáo

Bảng 2 28 Đặc tả Usecase Xử lí bài viết bị báo cáo

STT Tên UC Xử lí bài viết bị báo cáo

2 Mô tả Admin/mod khóa/xóa bài viết bị báo cáo

1.Tại trang Admin, giao diện báo cáo

Admin/mod kiểm tra lại bài viết rồi thực hiện xóa hoặc khóa bài viết

2 Hệ thống hiển thị thông báo cập nhật thông tin

1 Admin/Mod không thực hiện xóa/ khóa bài viết sau khi được báo cáo

- Đặc tả Usecase Duyệt bài viết

Bảng 2 29 Đặc tả Usecase Duyệt bài viết

STT Tên UC Duyệt bài viết

2 Mô tả Admin/mod duyệt bài viết người dùng đăng lí Admin/mod kiểm tra lại bài viết rồi lựa chọn đăng bài viết

2 Hệ thống hiển thị thông báo đã đăng bài

1 Admin/Mod không duyệt bài viết

- Đặc tả Usecase báo cáo bài viết

Bảng 2 30 Đặc tả Usecase báo cáo bài viết

STT Tên UC Báo cáo bài viết

2 Mô tả Người dùn g báo cáo bài viết không phù hợp

2 Tại trang Blog, người dùng Click nút báo cáo

3 Hệ thống hiển thị Modal nhập nội dung muốn báo cáo

4 Người dùng nhập nội dung cần báo cáo

5 Người dùng Click Button Gửi

6 Hệ thống thông báo bạn đã báo cáo bài viết

4 Luồng sự kiện phụ 2 Người dùng Hủy không gửi báo cáo

- Đặc tả Usecase đọc bình luận

Bảng 2 31 Đặc tả Usecase đọc bình luận

STT Tên UC Đọc bình luận

1 Tác nhân Admin/Mod/User/khách

2 Mô tả Người dùng đọc bình luận trong các bài viết

7 Tại trang Blog, người dùng Click button Bình luận

8 Hệ thống hiển thị Draw hiển thị các bình luận

- Đặc tả Usecase bình luận bài viết

Bảng 2 32 Đặc tả Usecase bình luận bài viết

STT Tên UC Bình luận bình luận

2 Mô tả Người dùng đăng bình luận

2 Người dùng Click vào textbox và nhập nội dung

3 Người dùng bấm Buton Bình luận

4 Hệ thống thực hiện chức năng, hiển thị bình luận

- Đặc tả Usecase xóa bình luận

Bảng 2 33 Đặc tả Usecase xóa bình luận

STT Tên UC Xóa bình luận

2 Mô tả Người dùng xóa bình luận của mình

2 Hệ thống hiển thị Draw hiển thị các bình luận

3 Người dùng Click vào nút Xóa

4 Hệ thống thực hiện chức năng xóa bình luận và hiển thị lại các bình luận

Thiết kế database

2.6.1 Thiết kế cơ sở dữ liệu tổng quát

Bước đầu thiết kế cơ sở dữ liệu chúng ta đi thiết kế các bảng dữ liêu

Bảng 2 34 Các bảng dữ liệu ST

1 Bảng User Bảng người dùng

3 Bảng báo cáo ( Report) Bảng báo cáo các bài viết

4 Bảng lộ trình học (Process Learning) Bảng lộ trình học của người dùng

5 Bảng bài học (Lesson) Bảng bài học

6 Bảng bài tập (Excercises) Bảng bài tập

7 Bảng khóa học Bảng khóa học

8 Bảng bình luận (Comment) Bảng bình luận các bài viết

9 Bảng bài viết (Blog) Bảng bài viết

2.6.2 Thiết kế cơ sở dữ liệu chi tiết

T Tên trường Kiểu dữ liệu Mô tả

2 Name String Tên người dùng

3 Email String Email người dùng, tên đăng nhập tài khoản

6) Mật khẩu của tài khoản

5 Bio String Tên đầy đủ

6 Avatar String Ảnh đại diện người dùng

7 Roles String Vai trò người dùng Admin / Mod/

8 Social Object Thông tin về mạng xã hội

9 Courses Arr Khóa học user đang theo học

10 Manager Arr Khóa học mode đang quản lý

11 Storage Arr Danh sách bài viết đang lưu trữ

2 User String ID người dùng

5 ExpiredAt Date Thời gian hết hạn

Bảng 2 37 Bảng Báo Cáo (Report)

2 Post String ID của blog muốn báo cáo

3 Author String ID tác giả blog

4 Content String Nội dung báo cáo

5 Reported_by String Người báo cáo

6 Reported_at Date Thời gian báo cáo

7 Updated_at Date Thời gian update

Bảng 2 38 Bảng Lộ Trình Học (Process Learning)

1 _Id ObjectId ID của lộ trình học

2 User String ID người dùng

3 Process Array Lộ trình học của người dùng

4 Created_at Date Kiểu bài viết (Thêm mới, Sửa đổi, )

Bảng 2 39 Bảng bài học (Lesson)

2 author ObjectId Id người comment

3 content String Nội dung bình luận

4 post String Id bài viết

5 cases Array Mảng các testcase

6 created_at Date Thời gian comment

7 updated_at Date Thời gian chỉnh sửa comment

8 delete_at Date Thời gian xóa comment

1 _id ObjectId Id khóa học

2 name String Tên khóa học

STT Tên trường Kiểu dữ liệu Mô tả

2 Course String Khóa học của bài học

5 Excercices Array Danh sách bài tập của bài học

6 Created_by String Người tạo bài tập

7 Updated_by String Người update

8 Created_at Date Thời gian tạo

10 Deleted_at Date Thời gian xóa , nếu chưa xóa = null

4 goal String Mục tiêu khóa học

5 img String Ảnh mô tả khóa học

6 path String Lộ trình học

7 requirement String Yêu cầu để có thể học khóa học

8 lesson Array Danh sách các bài học

9 created_at Date Thời gian tạo khóa học

10 updated_at Date Thời gian sửa khóa học

11 delete_at Date Thời gian xóa khóa học

STT Tên trường Kiểu dữ liệu Mô tả

1 _Id ObjectId ID bài tập

2 Lesson String Id bài học của bài tập

4 Decription String Mô tả bài tập

5 Cases Array Mảng các testcase

2 Tile String Tiêu đề bài viết

3 Author String Id tác giả

4 Img String Ảnh minh họa bài viết

5 Content String Nội dung bài viết

6 Created_at Date Thời gian bình luận

7 Update_at Date Thời gian chỉnh sửa bình luận

8 Topic String Chủ đề bài viết

9 Status String Trạng thái bài viết

Thiết kế giao diện

Phần giao diện người dùng là phần thiết yếu để người dùng có thể tiếp cận và sử dụng kết quả mà mô hình tạo ra Ở đây, chúng em sử dụng môi trường web, được phát triển dựa trên nền tảng React Js, từ đó cho ra giao diện người dùng một cách tối ưu nhất giúp việc giao tiếp giữa Front-end và Back-end dễ dàng Việc quản lý và kiểm duyệt lại các nội dung cho đội ngũ Amin cũng dễ dàng hơn.

THỰC NGHIỆM

Lập trình xử lý chức năng

3.1.1 Xử lý chức năng Đăng nhập Ở đây khi user trước khi đăng nhập hệ thống sẽ lưu thông tin user gồm các thông tin về id, name, email, roles, course. const signIn = async ({ email, password }) => { const user = await User.findOne({ email: email }).populate("courses").exec(); const courses = user.courses.map((e) => { return { id: e._id, name: e.name, img: e.img,

}); const match = await bcrypt.compare(password, user.password); if (match) { return { user: { id: user._id, name: user.name, email: user.email, roles: user.roles, courses: courses,

} else { return { status: 400, message: "Password is incorrect",

Hình 3 1 Code xử lý chức năng đăng nhập

3.1.2 Xử lý chức năng Thêm const createCourse = async (

{ name, description, path, goal, img, requirement }, userId

) => { const check = await Course.findOne({ name: name,

}).exec(); if (check) { return { status: 400, message: "Course already exists",

} try { const course = await Course.create({ name, description, path, goal, img, requirement, created_by: userId, updated_by: userId,

} return { status: 201, message: "create course success",

Hình 3 2 Code Xử lý chức năng Thêm

3.1.3 Xử lý chức năng Sửa const updateCourse = async ( userId, courseId

) => { const check = await Course.findById(courseId).exec(); if (!check) { return { status: 400, message: "Course not found",

} const course = await Course.findOneAndUpdate(

{ name, description, path, goal, img, requirement, updated_by: userId, updated_at: Date.now(),

); return { status: 200, message: "update course success",

Hình 3 3 Code Xử lý chức năng Sửa

3.1.4 Xử lý chức năng Xóa const deleteCourse = async (courseId) => { const check = await Course.findById(courseId).exec(); if (!check) { return { status: 400, message: "Course not found",

} const course = await Course.findOneAndUpdate(

{ deleted_at: Date.now(), name: ${check.name}-deleted } ); //TODO delete array return { status: 200, message: "Delete course success",

Hình 3 4 Code Xử lý chức năng Xóa

3.1.5 Xử lý chức năng Thay đổi trạng thái người dùng const setUser = async ({ userId, status, role }) => { const check = await User.findOne({ _id: userId }).exec(); if (!check) { return { status: 404, message: "User not found",

} if (check.roles === "ADMIN") { return { status: 400, message: "Cant not change admin",

} const user = await User.findOneAndUpdate(

); const data = await User.find({}); return { data: data, status: 200, message: "Set user success",

Hình 3 5 Xử lý chức năng Thay đổi trạng thái người dùng

3.1.6 Xử lý chức năng Bình luận const createComment = async ({ author, content, post }) => { const comment = await Comment.create({ author, content, post, created_at: Date.now(), updated_at: Date.now(), created_by: author, updated_by: author,

}); return { status: 201, message: "create comment success",

}; const getPostComment = async (postId) => { const post = await Blog.findById(postId).exec(); if (!post) { return { status: 400, message: "Post not found",

} const comment = await Comment.find({ post: post._id, deleted_at: null,

}).populate("author"); const result = comment.map((e) => { e.author = e.author.name; e.avatar = e.author.avatar; e.authorId = e.author._id; return { authorName: e.author.name, authorAvatar: e.author.avatar, authorId: e.author._id, content: e.content, post: e.post, created_at: e.created_at, updated_at: e.updated_at, deleted_at: e.deleted_at, id: e._id,

// return: [{_id, content, author}] => [{_id, content, author.name, author.avatar}] return { data: result, status: 200, message: "get list success",

}; const deleteComment = async (id) => { const comment = await Comment.findOneAndUpdate(

); return { status: 200, message: "Deleted comment",

}; const updateComment = async ({ id, content }) => { const check = await Comment.findById(id).exec(); if (!check) { return { status: 400, message: "Comment not found",

} const result = await Comment.findOneAndUpdate(

{ content, updated_at: Date.now(),

); return { status: 200, message: "update comment success",

Hình 3 6 Code Xử lý chức năng Bình luận

Lập trình xử lý Validate dữ liệu

- Name : kiểu dữ liệu string, bắt buộc có.

- Email: kiểu dữ liệu string , bắt buộc có.

- Password: kiểu dữ liệu string , bắt buộc có với độ dài min=6. const validateSignUp = (params) => { const schema = Joi.object({ name: Joi.string().required(), email: Joi.string().email().required(), password: Joi.string().min(6).required(), passwordConfirmation: Joi.equal(Joi.ref("password")), confirmCode: Joi.string(),

Tương tự với validateCourse. const validateCourse = (params) => { const schema = Joi.object({ name: Joi.string().required(), description: Joi.string().required(), path: Joi.string().required(), goal: Joi.string().required(), img: Joi.string().required(), requirement: Joi.string().allow(null, ""),

Hình 3 7 Code xử lý Validate dữ liệu

Triển khai

3.3.1 Hệ thống giao diện cho người sử dụng

Trang chủ website học lập trình – Learn IT khá bắt mắt và thân thiện cho người sử dụng với các chức năng dễ dàng nhìn thấy như : Trang chủ, Lộ trình, Học, Blog Cùng với những khóa học và bài viết nổi bật hiện ra ở đây.

Hình 3 8 Giao diện trang chủ

3.3.1.2 Giao diện trang lộ trình

Trang lộ trình cho người dùng cái nhìn tổng quan về một lộ trình học tập cho người mới bắt đầu , có thể nắm bắt được nên bắt đầu học từ đâu và xem được nội dung các bài học nền tảng.

Hình 3 9 Giao diện trang lộ trình

3.3.1.3 Giao diện trang khóa học

Giao diện trang khóa học tổng hợp các khóa học hiện có tại website học lập trình Learn IT cho người dùng có thể lựa chọn khóa học phù hợp với mục đích cá nhân

Hình 3 10 Giao diện trang khóa học

3.3.1.4 Giao diện trang học tập Ở giao diện trang học tập người dùng có thể nhìn thấy được danh sách các bài học và bài tập của khóa học mình đang theo học với những video được nhúng trực tiếp từ youtube.

Hình 3 11 Giao diện trang học tập

Giao diện trang Blog gồm nội dung bài viết và tác giá bài viết Người dùng cũng có thể thả tim cho bài viết yêu thích và bình luận về bài viết ở icon bên tay trái.

Hình 3 12 Giao diện trang Blog

Giao diện Admin đơn giản dùng để quản lý các khóa học , các user hay quản lý bài viết Admin có thể thêm , sửa, xóa các mục được quản lý một cách đơn giản với giao diện này.

Hình 3 13 Giao diện trang Admin

- Giao diện phần thông tin và bài giảng của quản lý khóa học.

Hình 3 14 Giao diện phần thông tin và bài giảng của quản lý khóa học.

- Ta có thể thực hiện các thao tác thêm khóa học với giao diện dưới đây.

Hình 3 15 Giao diện thêm khóa học

Hình 3 16 Giao diện đăng nhập

• Nhóm đã xây dựng giao diện theo yêu cầu sau khi đã chỉnh sửa của công ty.

• Giao diện đẹp, dễ sử dụng, đáp ứng tính thẩm mĩ của thị trường.

• Tối ưu giao diện trên các nền tảng đảm bảo không xảy ra lỗi giao diện trên các kích thước màn hình khác nhau.

Kiểm thử

3.4.1 Công cụ dùng kiểm thử Jmeter

Sử dụng công cụ kiểm thử tự động Jmetter kiểm thử hiệu năng của Website học lập trình – Learn IT.

Jmeter là công cụ để đo độ tải và performance của đối tượng, có thể sử dụng để test performance trên cả nguồn tĩnh và nguồn động, có thể kiểm tra độ tải và hiệu năng trên nhiều loại server khác nhau như: Web – HTTP, HTTPS, SOAP,Database via JDBC, LDAP, JMS, Mail – SMTP(S), POP3(S) and IMAP(S)…

Jmeter là một mã nguồn mở được viết bằng java Cha đẻ của JMeter là Stefano Mazzocchi sau đó Apache đã thiết kế lại để cải tiến hơn giao diện đồ họa cho người dùng và khả năng kiểm thử hướng chức năng

Hình 3 17 Công cụ kiểm thử Jmeter

Các thông số như sau:

 Label: Hiển thị tên của từng requests có trong test plan

 #Samples: Tổng số lần run của request

Samples = Number of Thread (users)*Loop Count

 Average (millisecond): Thời gian phản hồi trung bình (Response Time) của request, tính cho đến lần run cuối cùng.

 Median (millisecond): 50% số request có response time nhỏ hơn giá trị (hiển thị trên table), và 50% số request còn lại có response time lớn hơn giá trị này.

 90% Line (90th Percentile) (millisecond): 90% số requests sẽ có response time nhỏ hơn giá trị hiển thị trong table, 10% số requests còn lại sẽ có response time lớn hơn giá trị hiển thị trong table.

 Min (millisecond): Respone Time thấp nhất của request tính cho toàn bộ tất cả các lần run.

 Max (millisecond): Respone Time cao nhất của request tính cho toàn bộ tất cả các lần run.

 Error %: % số lượng request bị fail, lỗi.

 Throughput/ Thông lượng: Lượng requests được hệ thống (server) xử lý trong 1 đơn vị thời gian, có thể là giây, phút, hoặc giờ Avg Bytes: dung lượng trung bình của 1 lần response tính bằng bytes.

 Std.Dev.(Standard Deviation): độ lệch chuẩn đo lường sự thay đổi của 1 tập hợp data, dựa trên thống kê.

 Total: Trong report có 1 dòng cuối cùng đó là Total, nó sẽ tổng kết lại toàn bộ kết quả từ những request bên trên Ngoại trừ: Phân tích thông số:

Dưới đây là biểu đồ về Throughput và Thời gian phản hồi trung bình:

10 user 50 user 150 user 300 user 600 user

Hình 3 18 Kết quả kiểm thử hiệu năng trang Web

 Response Time THẤP và Thoughput THẤP > Trường hợp này sẽ không bao giờ xảy ra Vì Response Time THẤP nghĩa là thời gian đáp ứng rất nhanh, nhưng Throughput THẤP lại chỉ ra rằng số request được xử lý rất ít Điều này là vô lý

 Response Time THẤP và Throughput CAO > Đây là một kết quả lý tưởng Thời gian xử lý thấp và số lượng request xử lý cùng đồng thời lại cao Điều này chứng tỏ rằng Server đang rất tốt.

 Response Time CAO và Throughput THẤP > Test chỉ ra rằng thời gian xử lý quá cao, và lượng request được xử lý lại rất thấp Phải xem xét để improve về phía sever.

 Response Time CAO and Throughput CAO > Throughput cao, tức là server đang làm việc rất tốt, vậy tại sao thời gian xử lý lại cũng cao (không tốt) Có thể vấn đề lúc này đế từ phía Client, hoặc cụ thể là đến từ JMeter, có thể đoạn script của bạn viết chưa được tối ưu, khiến quá trình nó xử lý mất nhiều thời gian chẳng hạn.

 Phân tích các thông số thu được của trang web LEAN -IT

Bảng 3 1 Phân tích các thông số thu được của trang web LEAN -IT

ID TestCase Kết quả đo được Nhận xét

Kiểm thử khả năng chịu tải của trang web với số user

Average 413 Response Time THẤP và

Throughput CAO > Đây là một kết quả lý tưởng

Throughput 18,0/sec Receives KB/set 3504.94 Sent KB/sec 4.03

Kiểm thử khả năng chịu tải của trang web với số userP

Average 1262 Response Time THẤP và

Throughput CAO > Trang hoạt động tốt nhưng có hiện tượng thời gian phản hồi chậm dần.

Throughput 14,0/sec Receives KB/sec 2740.02 Sent KB/sec 3.15

Kiểm thử khả năng chịu tải của trang web với số user0

Average 2835 Response Time TĂNG và

Throughput GIẢM > Test chỉ ra rằng thời gian xử lý quá cao, và lượng request được xử lý lại rất thấp.

Throughput 7.9/sec Receives KB/sec 1533.18 Sent KB/sec 1.76

Kiểm thử khả năng chịu tải của trang web với số user00

Average 5555 Response Time CAO và

Throughput CAO >Trang vẫn làm việc tốt nhưng thời gian Response Time cao cần khắc phục.

Throughput 19.7/sec Receives KB/set 3847.13 Sent KB/sec 4.43

Kiểm thử khả năng chịu tải của trang web với số user`0

Average 20173 Response Time CAO và

Throughput THẤP > Test chỉ ra rằng thời gian xử lý quá cao, và lượng request được xử lý lại rất thấp Bắt đầu xuất

Throughput 5.0/secReceives KB/set 703.03

Sau quá trình kiểm thử hiệu năng website học lập trình online – Learn IT chúng em nhận thấy website hoạt động tốt khi số lượng người dùng nhỏ hơn 300 user , khi số lượng người dùng cao hơn cụ thể là khoảng trên dưới 600 website bắt đầu xảy ra lỗi Cần khắc phục website với mục tiêu hướng đến số lượng người dùng là 1000 user.

Định dạng
Số trang	95
Dung lượng	12,63 MB