đồ án 2 phát triển website hỗ trợ học tiếng anh
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.99 MB, 97 trang )
<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">
<b> ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN</b>
Thành phố Hồ Chí Minh, 10 tháng 1 năm 2024
</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2"><b>ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN</b>
</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3"><b>NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN</b>
</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4"><b>LỜI CẢM ƠN</b>
Nhóm xin gửi lời cảm ơn tới cô Trần Thị Hồng Yến, người đã trực tiếp tận tìnhhướng dẫn nhóm trong suốt q trình thực hiện đồ án. Nhóm vơ cùng biết ơn sự tậntình chỉ dẫn của cơ trong q trình nhóm thực hiện đề tài này. Bước đầu tiếp cận cáccơng nghệ mới, nhóm cịn nhiều thiếu sót về mặt kiến thức cũng như kinh nghiệm thựctiễn nên không tránh khỏi nhiều sai sót. Những nhận xét, góp ý chân tình của cơ chínhlà cơ sở để nhóm có thể cải tiến và hoàn thiện đề tài này một cách tốt nhất. Nếu khơngcó những lời chỉ bảo tận tình của cơ thì đồ án này của nhóm rất khó để thực hiện.
Trong q trình thực hiện đồ án, nhóm có thể khơng tránh khỏi được sai sót, chúngem kính mong nhận được sự góp ý, hướng dẫn của cơ để có thể hồn thiện đồ án hơnnữa.
Chúng em xin gửi lời cảm ơn chân thành nhất đến cô.
TP.HCM, ngày 30 tháng 12 năm 2023Nhóm sinh viên thực hiện
<b>Nguyễn Minh Hiếu - Đặng Bảo Trâm</b>
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">1.3. Đối tượng nghiên cứu...4
1.4. Phân tích và đánh giá các hướng nghiên cứu đã có...4
1.4.1. Phân tích các hướng nghiên cứu và phương pháp đã được áp dụng...4
1.4.2. Đánh giá các ưu điểm và hạn chế của những nghiên cứu này...4
1.5. Vấn đề còn tồn tại...5
1.5.1. Liệt kê những vấn đề chưa được giải quyết...5
1.5.2. Đánh giá tầm quan trọng của những vấn đề này và tác động...5
1.6. Vấn đề cần tập trung và nghiên cứu giải quyết...6
1.6.1. Xác định và trình bày những vấn đề mà đề tài cần tập trung vào...6
<b>CHƯƠNG 2: CƠ SỞ LÝ THUYẾT...7</b>
2.1. ReactJS...7
2.2. NodeJS...9
2.3. Mongoose...10
<b>CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG...11</b>
3.1. Phân tích yêu cầu...11
3.1.1. Yêu cầu chức năng...11
3.1.2. Yêu cầu phi chức năng...13
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">3.2. Xây dựng hệ thống...14
3.2.1. Kiến trúc hệ thống...14
3.2.2. Mô tả các thành phần trong hệ thống...14
3.3. Thiết kế sơ đồ Use case...16
3.3.1. Sơ đồ Use case...16
3.4.2. Mô tả chi tiết từng bảng dữ liệu...56
<b>CHƯƠNG 4: XÂY DỰNG TRANG WEB...61</b>
4.1. Sơ đồ màn hình...61
4.2. Danh sách giao diện...62
4.3. Chi tiết giao diện...64
4.3.1. Login...64
4.3.2. Sign Up...65
4.3.3. Forgot Password...66
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">4.3.8. Kiểm tra thông tin...71
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">Hình 3.2. Sơ đồ Use case đối với người dùng chưa đăng nhập...16
Hình 3.3. Sơ đồ Use case đối với người dùng đã đăng nhập User...17
Hình 3.4. Sơ đồ Use case đối với người dùng đã đăng nhập Author...18
Hình 3.5. Sơ đồ Use case đối với người dùng đã đăng nhập Censor...18
Hình 3.6. Sơ đồ Logic...54
Hình 4.1. Sơ đồ màn hình...61
Hình 4.2. Giao diện trang Login...64
Hình 4.3. Giao diện trang Sign Up...65
Hình 4.4. Giao diện trang Forgot Password...66
Hình 4.5. Giao diện trang Verify...67
Hình 4.6. Giao diện trang Home...68
Hình 4.7. Giao diện trang Create Course...69
Hình 4.8. Giao diện trang History...70
Hình 4.9. Giao diện trang ChangeInfor...71
Hình 4.10. Giao diện trang News...72
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">Hình 4.22. Giao diện trang Video...79
Hình 4.23. Giao diện trang MiniGame...80
Hình 4.24. Giao diện trang Score...81
Hình 4.25. Giao diện trang League...82
Hình 4.26. Giao diện trang quản lý...83
Hình 4.27. Giao diện trang tạo quản lý...84
Hình 4.28. Giao diện màn hình duyệt khóa học...85
Hình 4.29. Giao diện xem khóa học cần duyệt...86
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10"><b>DANH MỤC BẢNG</b>
Bảng 3.1. Yêu cầu chức năng...11
Bảng 3.2. Bảng mô tả các thành phần trong hệ thống...14
Bảng 3.3. Danh sách các Actors...19
Bảng 3.4. Danh sách các Use case...19
Bảng 3.5. Đặc tả Use case Tạo tài khoản...22
Bảng 3.6. Đặc tả Use case Quên mật khẩu...25
Bảng 3.7. Đặc tả Use case Đăng nhập...26
Bảng 3.8. Đặc tả Use case thay đổi thông tin...27
Bảng 3.9. Đặc tả Use case đăng xuất...28
Bảng 3.10. Đặc tả Use case Xem trang chủ...29
Bảng 3.11. Đặc tả Use case Liên hệ...30
Bảng 3.12. Đặc tả Use case Chat trực tiếp...31
Bảng 3.13. Đặc tả Use case xem gợi ý lộ trình...32
Bảng 3.14. Đặc tả Use case Làm bài test trình độ...33
Bảng 3.15. Đặc tả Use case Xem lịch sử học tập...34
Bảng 3.16. Đặc tả Use case Xem Blog...35
Bảng 3.17. Đặc tả Use case Tạo Blog...36
Bảng 3.18. Đặc tả Use case Bình luận trên Blog...37
Bảng 3.19. Đặc tả Use case Xóa Blog...38
Bảng 3.20. Đặc tả Use case Làm bài BigTest...39
</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">Bảng 3.27. Đặc tả Use case Chơi game Từ vựng rơi...46
Bảng 3.28. Đặc tả Use case Xem phim ngắn...47
Bảng 3.29. Đặc tả Use case Tạo khóa học...48
Bảng 3.30. Đặc tả Use case Xem danh sách khóa học đã tạo...49
Bảng 3.31. Đặc tả Use case Xóa khóa học...50
Bảng 3.32. Đặc tả Use case Xem danh sách bình luận...51
Bảng 3.33. Đặc tả Use case Xóa bình luận...52
Bảng 3.34. Đặc tả Use case Ẩn bình luận...53
Bảng 3.35. Danh sách bảng trong cơ sở dữ liệu...55
Bảng 3.36. Mô tả chi tiết bảng NGUOIDUNG...56
Bảng 3.37. Mô tả chi tiết bảng KETQUABAITEST...57
Bảng 3.38. Mô tả chi tiết bảng LICHSUNGUOIDUNG...57
Bảng 3.39. Mô tả chi tiết bảng BLOG...57
Bảng 3.41. Mô tả chi tiết bảng BANGXEPHANG...58
Bảng 3.42. Mô tả chi tiết bảng KHOAHOC...58
Bảng 3.43. Mô tả chi tiết bảng DEXUATLOTRINH...59
Bảng 3.45. Mô tả chi tiết bảng BINHLUAN...59
Bảng 3.46. Mô tả chi tiết bảng TUVUNG...60
Bảng 4.1. Danh sách các màn hình...62
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12"><b>TÓM TẮT ĐỒ ÁN</b>
<b>Vấn đề nghiên cứu: </b> Khó khăn trong việc học tiếng Anh cho trẻ em: Học tiếng Anh có thể là một tháchthức đối với trẻ em, đặc biệt là trong môi trường học tập truyền thống.
Sự quan trọng của trò chơi và hoạt động tương tác: Trẻ em thường hứng thú vàhọc hỏi tốt thơng qua trị chơi và hoạt động tương tác.
Sự phát triển toàn diện cho trẻ em: Đồ án tập trung vào việc xây dựng một trangweb khơng chỉ giúp trẻ học tiếng Anh mà cịn phát triển các kỹ năng khác.
<b>Các hướng tiếp cận và giải quyết vấn đề:</b>
Phương pháp thực hiện:
o Tìm hiểu cơng nghệ: Reactjs, Nodejs, Figma. Thu thập yêu cầu thông qua:khảo sát các website tương tự trên thị trường, tạo các form khảo sát để lấythêm các yêu cầu của mọi người.
o Phân tích và xác định yêu cầu. Thiết kế: đối tượng, dữ liệu, giao diện.o Cài đặt, kiểm thử, hoàn thiện sản phẩm.
Công nghệ sử dụng: figma, Javascript, HTML5, CSS3, ReactJS, ExpressJS,Swagger, Github, MongoDB, Mongoose, Firebase.
</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13"><b>Một số kết quả đạt được:</b>
Thiết kế trang web hỗ trợ học tiếng Anh: Đồ án đã tạo ra một trang web dễ sửdụng, thân thiện với trẻ em. Giao diện đơn giản, màu sắc sáng tạo và hình ảnh hấp dẫnđã được sử dụng để thu hút sự quan tâm và tham gia của trẻ. Cung cấp các bài học, bàikiểm tra, lưu kết quả, xếp hạng và đề xuất khóa học cho học viên.
<b>Nội dung báo cáo:</b>
Nội dung đồ án được trình bày trong 5 chương như sau:
<b>CHƯƠNG 1. MỞ ĐẦU: Xác định lí do, mục tiêu đề tài, đối tượng, phạm vi và</b>
phương pháp nghiên cứu, phân tích và đánh giá hướng nghiên cứu đã có, phântích các vấn đề cịn tồn tại và đề ra các hướng giải quyết.
<b>CHƯƠNG 2. CƠ SỞ LÍ THUYẾT: Giới thiệu các cơng nghệ và ngơn ngữ đã sử</b>
dụng gồm: ngôn ngữ Javascript, công nghệ ReactJS, cơng nghệ NodeJS.
<b>CHƯƠNG 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG: Phân tích yêu cầu, sơ đồ</b>
use case, sơ đồ hoạt động và thiết kế dữ liệu cho website hỗ trợ học tiếng Anh.
<b>CHƯƠNG 4. XÂY DỰNG ỨNG DỤNG: Xây dựng website hỗ trợ học tiếng</b>
Anh được mô tả thông qua danh sách và chi tiết các màn hình.
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14"><b>CHƯƠNG 1: MỞ ĐẦU</b>
<b>1.1. Lý do chọn đề tài</b>Trong xu thế tồn cầu hóa hiện nay, việc các nước trên thế giới có một ngơnngữ chung để giao tiếp là một nhu cầu tất yếu. Trong số các ngơn ngữ phổ biến thìtiếng Anh có độ phổ biến đứng hàng thứ ba (sau tiếng Trung và tiếng Tây BanNha), tuy nhiên dường như tiếng Anh đang là “văn hóa thế hệ” quốc tế. Đa số cácnước trên thế giới đều xem việc học tiếng Anh là ưu tiên hàng đầu khi nói đến họcngoại ngữ. Ngoài ra, hiện nay hầu hết các bài nghiên cứu khoa học, cập nhật côngnghệ hiện đại hay tài liệu hướng dẫn đều có bản viết bằng tiếng Anh. Vì vậy để cóthể bắt kịp xu hướng phát triển của xã hội thì việc học tiếng Anh là vơ cùng cầnthiết.
Bên cạnh đó, ngày nay cơng nghệ thơng tin nói chung và Internet nói riêngđang ngày một phát triển mạnh mẽ và trở thành một phần không thể thiếu trongcuộc sống.
Kết hợp hai vấn đề trên ta có thể thấy, việc học anh văn trực tuyến đang là nhucầu tất yếu. Nắm bắt được thực trạng hầu hết mọi người đều mong muốn nâng caotrình độ tiếng Anh nhưng lại khơng có thời gian tới lớp học hoặc khơng đủ điềukiện tài chính cho việc theo học một lớp ngoại ngữ chính khóa, chúng em quyếtđịnh chọn đề tài Xây dựng website hỗ trợ học tiếng Anh để giải quyết vấn đề này.
Chỉ cần một đường truyền Internet và một số thao tác đơn giản, chúng ta vẫn
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15"><b>1.3. Đối tượng nghiên cứu</b>
Đối tượng nghiên cứu của đồ án là trẻ em trong độ tuổi học tiếng Anh, thườnglà từ 5 đến 12 tuổi. Đây là giai đoạn phát triển ngôn ngữ quan trọng trong cuộc sốngcủa trẻ, và việc hỗ trợ họ học tiếng Anh thơng qua các trị chơi và bài học đơn giảncó thể giúp tăng cường khả năng ngơn ngữ, từ vựng, ngữ pháp và giao tiếp của trẻ.
Nội dung học tiếng Anh sẽ được tổ chức thành các bài học đơn giản và có cấutrúc, tương tác và phù hợp với trình độ của trẻ. Các bài học có thể bao gồm từ vựng,ngữ pháp, cấu trúc câu, phát âm và các hoạt động luyện nghe và nói. Trị chơi sẽđược tích hợp vào các bài học để tăng cường sự hứng thú và tiếp thu kiến thức củatrẻ.
<b>1.4. Phân tích và đánh giá các hướng nghiên cứu đã có</b>
<b>1.4.1. Phân tích các hướng nghiên cứu và phương pháp đã được áp dụng</b>
Các tác giả ngoài nước đã áp dụng các hướng nghiên cứu và phương pháp đadạng để nghiên cứu lập trình web tiếng Anh cho trẻ em. Các hướng nghiên cứu vàphương pháp chủ yếu bao gồm:
Phát triển các ứng dụng và công cụ học tập: Các tác giả đã phát triển các ứngdụng và công cụ học tập đa phương tiện nhằm giúp trẻ em học tiếng Anh và lậptrình web một cách hiệu quả. Các ứng dụng này thường có giao diện đồ họa thânthiện và các hoạt động thú vị để tăng cường sự tham gia và quan tâm của trẻ em.
<b>1.4.2. Đánh giá các ưu điểm và hạn chế của những nghiên cứu này</b>
Các nghiên cứu của tác giả ngoài nước đã mang lại một số ưu điểm và hạnchế nhất định. Các ưu điểm bao gồm:
Sự sáng tạo và đổi mới: Các tác giả đã đưa ra các ý tưởng mới và sáng tạotrong việc kết hợp lập trình web và học tiếng Anh cho trẻ em. Các phương pháp và
</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">công nghệ mới đã được áp dụng để cung cấp một trải nghiệm học tập tốt hơn vàhấp dẫn hơn.
Mở rộng phạm vi nghiên cứu: Các tác giả ngoài nước đã đưa ra các phươngpháp và quan điểm mới trong lĩnh vực này, mở rộng phạm vi nghiên cứu và tạođiều kiện cho những nghiên cứu tương lai.
<b>1.5. Vấn đề còn tồn tại</b>
<b>1.5.1. Liệt kê những vấn đề chưa được giải quyết</b>
Trong lĩnh vực xây dựng web học tiếng Anh cho trẻ em, có một số vấn đềchưa được giải quyết hoặc đang tồn tại. Dưới đây là một số ví dụ về những vấn đềnày:
Thiết kế giao diện người dùng hấp dẫn và thân thiện với trẻ em: Đối tượngngười dùng là trẻ em đòi hỏi một giao diện người dùng được thiết kế đơn giản,màu sắc tươi sáng và có tính tương tác cao. Tuy nhiên, việc tạo ra giao diện hấpdẫn và đồng thời đảm bảo tính tương thích với nhiều thiết bị và kích thước mànhình khác nhau vẫn là một thách thức.
<b>1.5.2. Đánh giá tầm quan trọng của những vấn đề này và tác động</b>
Tầm quan trọng: Việc giải quyết những vấn đề này là quan trọng vì trẻ em làmột đối tượng người dùng đặc biệt và yêu cầu một giao diện người dùng và nộidung phù hợp với họ. Nếu không thể đáp ứng được các yêu cầu và mong đợi củatrẻ em, Website sẽ không đạt được hiệu quả học tập và sự tham gia của trẻ.
</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">Đáng quan tâm về mặt đạo đức và pháp lý: Việc không đáp ứng các yêu cầuvề quyền riêng tư và an tồn trực tuyến có thể dẫn đến vấn đề đạo đức và pháp lý.Bảo vệ thông tin cá nhân của trẻ em và đảm bảo an toàn trong quá trình sử dụngWebsite là một trách nhiệm quan trọng và cần được coi trọng.
<b>1.6. Vấn đề cần tập trung và nghiên cứu giải quyết</b>
<b>1.6.1. Xác định và trình bày những vấn đề mà đề tài cần tập trung vào</b>
Xây dựng giao diện người dùng đáp ứng (Responsive User Interface): Với sựphát triển của thiết bị di động và đa nền tảng, việc xây dựng giao diện web linhhoạt, tương thích với nhiều loại màn hình và thiết bị là một vấn đề quan trọng. Đềtài của nhóm tập trung vào phân tích, thiết kế và triển khai các phương pháp và kỹthuật để xây dựng giao diện người dùng đáp ứng một cách hiệu quả.
Tối ưu hóa tốc độ tải trang (Page Load Speed Optimization): Hiệu suất và tốcđộ tải trang là yếu tố quan trọng ảnh hưởng đến trải nghiệm người dùng và SEO(Search Engine Optimization). Nghiên cứu cách tối ưu hóa tốc độ tải trang bằngcách sử dụng kỹ thuật caching, tối ưu hóa mã nguồn và tải dữ liệu hiệu quả có thểlà một phần quan trọng trong đề tài của nhóm em.
</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18"><b>CHƯƠNG 2: CƠ SỞ LÝ THUYẾT</b>
<b>2.1. ReactJS</b><i>Hình 2.1. Logo ReactJS</i>
<i>[CITATION rea23 \l 1033 ] Về cơ bản, các tính năng của reactJS thường xuất</i>
<i>phát từ việc tập trung các phần mềm riêng lẻ, cho phép các developer có chứcnăng phá vỡ giao diện của người dùng từ một cách phức tạp và biến nó trở thànhcác phần mềm đơn giản. Hiểu đơn giản thì các render dữ liệu khơng chỉ đượcthực hiện ở vị trí server mà cịn ở vị trí client khi sử dụng reactJS. <small>[1]</small></i>
Hiện nay, reactJS thường được dùng để thiết kế bố cục cho trang web, nhưng hạnchế đó chính là cấu trúc khó. Thay vào đó sử dụng JSX và nhúng vào các đoạnHTML và javascript, bạn sẽ thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu
</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">chỉ thực hiện chúng. Điều này giúp Reactjs tránh những thao tác cần trênDOM mà nhiều chi phí.
o Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dùng cú pháp đặcbiệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML vàJavascript. Ta có thể thêm vào các đoạn HTML vào trong hàm render màkhơng cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyểnđổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biếnđổi JSX.
o Nó có nhiều cơng cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặtứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug codedễ dàng hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếpvào virtual DOM như thể bạn đang xem cây DOM thông thường.
o Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giaodiện vì virtual DOM được cài đặt hoàn toàn bằng JS.
o Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàngcho bảo trì và sửa lỗi.
</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20"><b>2.2. NodeJS</b>
<i>Hình 2.2. Logo NodeJS</i>
<i>NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viếtbằng C++ và Javascript. Nền tảng này được phát triển bởi Ryan Lienhart Dahlvào năm 2009.<small> [2]</small></i>
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ủamì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ớicác website. Cả trình duyệt JavaScript và Node.js đều chạy trên JavaScriptruntime V8 engine. Công cụ này lấy code JavaScript của bạn và convert nó sangmã máy (bytecode) cho việc thực thi nhanh hơn. Mã máy là loại code thấp cấphơn để máy tính có thể chạy mà khơng cần biên dịch nó.
</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21"><b>2.3. Mongoose</b>
<i>Hình 2.3. Logo Mongoose</i>
<i>Mongoose là một thư viện mơ hình hóa đối tượng (Object Data Model - ODM)cho MongoDB và Node.js. Nó quản lý mối quan hệ giữa dữ liệu, cung cấp sự xácnhận giản đồ và được sử dụng để dịch giữa các đối tượng trong mã và biểu diễncác đối tượng trong MongoDB.<small> [3]</small></i>
Mongoose cho phép bạn định nghĩa các object (đối tượng) với một schema đượcđịnh nghĩa rõ ràng, được ánh xạ tới một MongoDB document. Mongoose cũngcung cấp một số lượng đáng kinh ngạc các chức năng cho việc tạo ra và làm việcvới các schema.
</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22"><b>CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG</b>
<b>3.1. </b>
<b>Phân tích yêu cầu</b><b>3.1.1. Yêu cầu chức năng</b>
<i>Bảng 3.1. Yêu cầu chức năng</i>
Liên hệ qua email <sup>Nếu có thắc mắc hoặc nhu cầu liên hệ để góp ý cải thiện, người</sup>dùng có thể gửi mail để liên hệ thông qua mục Contact.
Xem tin tức “News”
Người dùng có thể xem tin tức mà các người dùng khác, hoặcban quản lý đăng, và có thể bình luận vào bài viết đó. Đồng thờicó thể đăng tin mà mình muốn đăng
Xem các khóa học
Người dùng chọn “Courses” trên header và sau đó lựa chọn kỹnăng mình muốn,từng kĩ năng sẽ có từng khóa học để xem chitiết của khóa học đó bao gồm: chủ đề, số lượng bài học.
Học các bài học <sup>Người dùng nhấn vào từng bài học trong khóa học để có thể học</sup>từ vựng mới thơng qua các trị chơi đơn giản.
Ở mỗi khóa học sẽ cung cấp một bài kiểm tra lại cho toàn bộ
</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">nhân/ “Change info”Đăng ký tạo khóa học “Create Course”
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étduyệt, nếu chất lượng hợp lệ thì khóa học này sẽ được đăng lên.Xem bảng xếp hạng
khóa học/ tồn khóa học
Người dùng có thể xem bảng xếp hạng theo tuần/tháng của tấtcả 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.
Xem lịch sử học tập “History”
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
Đăng xuất Người dùng thốt tài khoản của mình trên webQuản lý manager
“Manager List”
Dành cho Admin, tài khoản quản lí tồn bộ trang web, Admincó thể tạo và xóa tài khoản của một manager.
Xét duyệt các đăng ký tạo khóa học “Courses review”
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.
Quản lí tin tức
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.
</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24"><b>3.1.2. Yêu cầu phi chức năng</b>
Đảm bảo tính an tồn và bảo mật:
o Người sử dụng chương trình: được cấp username và password. Passwordcủa người sử dụng được mã hóa trước khi ghi vào dữ liệu.
o Hệ thống tự động sao lưu và có thể khơi phục trong trường hợp đột ngột mấtkết nối mạng.
Đảm bảo tính hiệu quả: thời gian truy xuất phải tối ưu: người dùng khi muốntham gia bài học mới không cần thực hiện quá nhiều thao tác; Mã nguồn phải tốiưu, không lưu dữ liệu dư thừa đảm bảo hệ thống luôn hoạt động cơng suất hợp lý; Đảm bảo tính tương thích: đảm bảo phần mềm hoạt động được trên nhiều thiết bị,
hỗ trợ import/export dữ liệu;
Đảm bảo tính tiện dụng: phần mềm phải dễ học và dễ sử dụng; giao diện ngườidùng phải trực quan, dễ hiểu; Khả năng truy cập, khai thác dữ liệu cũng phảiđược đảm bảo tối ưu;
Đảm bảo tính tin cậy: phần mềm phải ln sẵn sàng phục vụ; có khả năng chịu lỗivà khả năng phục hồi;
Đảm bảo an tồn thơng tin: thơng tin nhập vào hay truy xuất từ cơ sở dữ liệu phảiđược bảo mật; toàn vẹn và xác thực.
</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25"><b>3.2. Xây dựng hệ thống3.2.1. Kiến trúc hệ thống</b>
4 Virtual DOM Là một bản sao của DOM, được lưu trữ tạmthời trong bộ nhớ, giúp tối ưu việc cập nhật
</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">giao diện.
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.
6 RestfulAPI <sup>Nơi thực hiện kết nối giữa Frontend và </sup>Backend.
7 Node Server
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 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.
11 Controller Là nơi tiếp nhận các yêu cầu từ Frontend.12 Service Là nơi xử lý logic của Server
13 Models <sup>Là lớp đại diện cho các đối tượng và dữ liệu</sup>trong ứng dụng.
14 <sup>Database </sup>
(mongoDB) <sup>Là cơ sở dữ liệu của ứng dụng.</sup>
</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27"><b>3.3. Thiết kế sơ đồ Use case3.3.1. Sơ đồ Use case</b>
<i>Hình 3.5. Sơ đồ Use case đối với người dùng chưa đăng nhập</i>
</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28"><i>Hình 3.6. Sơ đồ Use case đối với người dùng đã đăng nhập User</i>
</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29"><i>Hình 3.7. Sơ đồ Use case đối với người dùng đã đăng nhập Author</i>
<i>Hình 3.8. Sơ đồ Use case đối với người dùng đã đăng nhập Censor</i>
</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30"><b>3.3.2. Danh sách Actor</b>
<i>Bảng 3.3. Danh sách các Actors</i>
1 <sup>Người dùng chưa đăng </sup>nhập
Người dùng sử dụng ứng dụng nhưng chưa đăng nhập.
2 <sup>Người dùng đăng nhập </sup>User
Người dùng sử dụng ứng dụng đã đăng nhập với vai trị là người dùng thơng thường.3 <sup>Người dùng đăng nhập </sup>
Người dùng sử dụng ứng dụng đã đăng nhập với vai trị là tác giả có quyền đăng khóa học.4 <sup>Người dùng đăng nhập </sup>
Người dùng sử dụng ứng dụng đã đăng nhập với vai trò là người kiểm duyệt có quyền kiểmduyệt các bình luận và các bài blog.
<b>3.3.3. Danh sách Use case</b>
<i>Bảng 3.4. Danh sách các Use case</i>
1 Tạo tài khoản Tạo tài khoản mới để sử dụng trang web.
2 Quên mật khẩu <sup>Người sử dụng quên mật khẩu tài khoản và cần </sup>cấp lại mật khẩu mới.
3 Đăng nhập Đăng nhập bằng tài khoản đã đăng ký.
</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31"><b>STTTên của Use caseMô tả/ Ghi chú</b>
5 Đăng xuất Đăng xuất khỏi tài khoản hiện tại.
6 Xem trang chủ
Người dùng xem thông tin giới thiệu của trangweb.
7 Liên hệ <sup>Gửi mail với tiêu đề và nội dung đến nhà phát </sup>triển.
8 Chat trực tiếp Người dùng chat với AI tư vấn trực tiếp.9 Xem gợi ý lộ trình Người dùng xem gợi ý lộ trình để học.
10 Kiểm tra trình độ
Người dùng làm bài kiểm tra để hệ thống biết được và gợi ý lộ trình học cho người dùng.
11 Xem lịch sử học tập <sup>Xem lại lịch sử học để tiếp tục học những bài học </sup>chưa hoàn thành.
12 Xem Blog <sup>Xem những bài đăng về tips học tiếng anh, hoặc </sup>các kiến thức mới lạ.
13 Tạo Blog Người dùng tạo những bài đăng hữu ích.14 Bình luận trên Blog Người dùng nhận xét bài blog.
15 Xóa Blog Người dùng xóa bài blog mình đã tạo.16 <sup>Làm Bigtest từng kĩ </sup>
Làm bài kiểm tra kiến thức đã học của khóa học đó.
17 Bắt đầu khóa học Bắt đầu vào khóa học.
18 Xem chi tiết khóa học Xem danh sách bài học trong một khóa học cụ
</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32"><b>STTTên của Use caseMô tả/ Ghi chú</b>
21 Giải trí <sup>Bao gồm nhiều game để người dùng ơn tập kiến </sup>thức.
22 Chơi game Lật cặp <sup>Chơi game chọn cặp đơi từ vựng và ảnh cùng </sup>nghĩa rèn luyện trí nhớ.
23 Chơi game từ vựng rơi <sup>Chơi game chọn từ vựng đang rơi rèn luyện trí </sup>nhớ.
24 Xem phim ngắn <sup>Xem các video tiếng anh có phụ đề rèn luyện kĩ </sup>năng nghe.
25 Tạo khóa học
Người dùng vai trị tác giả có thể thêm danh sách từ vựng theo một form có sẵn để tạo thành khóa học.
26 <sup>Xem danh sách khóa </sup>học
Người dùng vai trị tác giả có thể xem lại khóa học bản thân đã tạo.
27 Xóa khóa học đã tạo <sup>Người dùng xem khóa học xong có thể tùy chọn </sup>xóa các khóa học trong danh sách.
</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33"><b>3.3.4. Đặc tả Use case</b>
<b>3.3.4.1. Use case Tạo tài khoản</b>
<i>Bảng 3.5. Đặc tả Use case Tạo tài khoản</i>
Tên Use case Tạo tài khoản
Mục đích Tạo tài khoản mới để sử dụng các tính năng chính của trang web.Người dùng Người dùng chưa đăng nhập
Điều kiện kích
hoạt <sup>Người dùng vào trang “Đăng ký tài khoản” và nhấn nút đăng ký.</sup>Trạng thái hệ
thống trước khi bắt đầu Use case
Người dùng chưa có tài khoản.
Trạng thái hệ thống sau khi thực hiện Use case
- Người dùng đăng ký tài khoản mới thành công.- Hệ thống lưu thông tin tài khoản mới vào dữ liệu.
Luồng sự kiện chính
1. Người dùng truy cập vào ứng dụng.2. Người dùng chọn lệnh đăng ký tài khoản.
3. Người dùng nhập Email, mật khẩu, xác nhận mật khẩu và chọn lệnh đăng ký.
4. Sau khi nhấn lệnh đăng ký, trang web tự động chuyển người dùng đến trang “Chờ xác nhận Email”.
Luồng sự kiện 2.a Người dùng chọn đăng nhập vào Google nhưng tài khoản
</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">phụ <sup>Google này chưa đăng ký trước với hệ thống.</sup>Tiếp tục Use case 1.6
Mở rộng
- Người dùng đăng ký tạo tài khoản và thoát trang web nhưng chưa hoàn thành bước xác thực Email hoặc điền thông tin. Người dùng truy cập lại vào trang web ở lần sau:
+ Trường hợp 1: Người dùng chưa xác thực Email.Tiếp tục Use case 2.4.
+ Trường hợp 2: Người dùng chưa điền thông tin cá nhân.Tiếp tục Use case 2.6.
Các yêu cầu đặcbiệt
Email phải là Email hợp lệ, mật khẩu phải có tối thiểu ít nhất 8 ký tự.
</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35"><b>3.3.4.2. Use case Quên mật khẩu</b>
<i>Bảng 3.6. Đặc tả Use case Quên mật khẩu</i>
Tên Use case Quên mật khẩu
Mục đích Cấp lại mật khẩu mới cho người dùng.Người dùng Người dùng chưa đăng nhập
Điều kiện kích hoạt <sup>Người dùng nhấn vào nút quên mật khẩu ở trang “Quên mật </sup>khẩu”.
Trạng thái hệ thống trước khi bắt đầu Use case
Người dùng chưa đăng nhập.
Trạng thái hệ thống sau khi thực hiện Use case
- Người dùng đổi mật khẩu cho tài khoản thành công.- Hệ thống lưu thông tin mật khẩu mới vào dữ liệu.
Luồng sự kiện phụ Không
</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">Các yêu cầu đặc biệt Không.
<b>3.3.4.3. Use case Đăng nhập</b>
<i>Bảng 3.7. Đặc tả Use case Đăng nhập</i>
Mục đích Đăng nhập bằng tài khoản đã đăng ký.Người dùng Người dùng chưa đăng nhập.
Điều kiện kích hoạt Người dùng ấn nút đăng nhập hoặc đăng nhập với Google.Trạng thái hệ thống
trước khi bắt đầu Use case
Người dùng chưa đăng nhập trước đó hoặc đã đăng xuất.Trạng thái hệ thống sau
khi thực hiện Use case <sup>Người dùng đăng nhập trang web thành công.</sup>1. Người dùng truy cập vào trang web.
</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">đầu thực hiện xác thực. Tiếp tục Use case 1.3
Các yêu cầu đặc biệt Không
<b>3.3.4.4. Use case Thay đổi thông tin</b>
<i>Bảng 3.8. Đặc tả Use case thay đổi thông tin</i>
Tên Use case Thay đổi thông tin
Mục đích Thay đổi thơng tin cá nhân của người sử dụng trang webNgười dùng Người dùng đã đăng nhập
Điều kiện kích hoạt <sup>Người dùng nhấn vào biểu tượng tùy chọn trên trang chủ có hình</sup>3 dấu chấm và chọn vào thay đổi thông tin
Trạng thái hệ thống trước khi bắt đầu Use case
<small></small> Người dùng đã đăng nhập.
<small></small> Thông tin người dùng được tải lên.Trạng thái hệ thống sau
khi thực hiện Use case
<small></small> Người dùng cập nhật thông tin thành công.
<small></small> Thông tin mới của người dùng được lưu trữ lại trong hệ thống.
Luồng sự kiện chính
1. Người dùng truy cập vào trang web.
2. Người dùng chọn tùy chọn thay đổi thông tin.3. Người dùng cập nhật các thông tin mong muốn.4. Người dùng ấn nút “Cập nhật”.
5. Hệ thống thông báo cập nhật thành công.
6. Hệ thống cập nhật thông tin người dùng mới cập nhật vào cơsở dữ liệu.
Luồng sự kiện phụ Khơng có.
Các u cầu đặc biệt Tên phải đúng quy chuẩn, ngày sinh phải nhập ngày trong quá
</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">khứ, mật khẩu phải tối thiểu 8 ký tự.
<b>3.3.4.5. Use case Đăng xuất</b>
<i>Bảng 3.9. Đặc tả Use case đăng xuất</i>
Tên Use case Đăng xuất.
Mục đích Người dùng thốt khỏi tài khoản đang sử dụng.Người dùng Người dùng đã đăng nhập.
Điều kiện kích hoạt Người dùng nhấn nút đăng xuất trong mục tùy chọn hình ba dấu chấm của trang web.
Trạng thái hệ thống trước khi bắt đầu Use case
Không.Trạng thái hệ thống sau
khi thực hiện Use case
Người dùng đã đăng xuất và khơng cịn các quyền truy cập vàocác tính năng nhất định.
Luồng sự kiện chính 1. Người dùng chọn mục tùy chọn.2. Người dùng chọn lệnh đăng xuất.
3. Phần mềm hiển thị thông báo yêu cầu người dùng xác nhận muốn đăng xuất khỏi phần mềm.
3. Hệ thống quay trở lại màn hình trang chủ.Luồng sự kiện phụ Khơng.
Các yêu cầu đặc biệt Không.
</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">Điều kiện kích hoạt Người dùng bấm nút HomeTrạng thái hệ thống trước
khi bắt đầu Use case
Không.Trạng thái hệ thống sau
khi thực hiện Use case
Hệ thống hiển thị trang chủLuồng sự kiện chính 1. Người dùng chọn nút Home
2. Hệ thống hiển thị trang chủLuồng sự kiện phụ Không.
Các yêu cầu đặc biệt Không.
<b>3.3.4.7. Use case Liên hệ</b>
<i>Bảng 3.11. Đặc tả Use case Liên hệ</i>
Tên Use case Liên hệ.
Mục đích Người dùng muốn liên hệ với nhà phát triển thông qua email.Người dùng Người dùng đã đăng nhập.
Điều kiện kích hoạt Người dùng nhấn vào mục liên hệ trong trong trang chủ.Trạng thái hệ thống trước
khi bắt đầu Use case
Không.Trạng thái hệ thống sau
khi thực hiện Use case
Hệ thống gửi mail cho nhà phát triển.
Luồng sự kiện chính 1. Người dùng nhấn vào mục liên hệ ở trang chủ.2. Trang web chuyển đến trang liên hệ.
3. Người dùng điền nội dung và bấm gửi.
4. Hệ thống hiển thị thông báo gửi mail thành công.
Hệ thống gửi mail đến nhà phát triển bằng email đăng nhập của
</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">người dùng.Luồng sự kiện phụ Không.
Các yêu cầu đặc biệt Không.
<b>3.3.4.8. Use case Chat trực tiếp</b>
<i>Bảng 3.12. Đặc tả Use case Chat trực tiếp</i>
Tên Use case Chat trực tiếp
Mục đích Người dùng nhắn tin trực tiếp cho AI để nhận tư vấn trực tiếp.Người dùng Người dùng đã đăng nhập
Điều kiện kích hoạt Người dùng nhấn vào mục “Chat trực tiếp” trong trong trang chủ.
Trạng thái hệ thống trước khi bắt đầu Use case
Không.Trạng thái hệ thống sau
khi thực hiện Use case
Hệ thống lưu trữ lại đoạn hội thoại với người dùng.
Luồng sự kiện chính Người dùng nhấn vào Chat trực tiếp
Luồng sự kiện phụ Không.
</div>
