đồ án xây dựng website học tiếng anh cho người đi làm

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH</b>

<b>TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN KHOA CƠNG NGHỆ PHẦN MỀM </b>

<b>ĐỒ ÁN 2</b>

<b>PHÁT TRIỂN WEBSITE HỖ TRỢ HỌC TIẾNG ANH CHO NGƯỜI ĐI LÀM </b>

<b>GV HƯỚNG DẪN: ThS. Trần Thị Hồng Yến SV THỰC HIỆN: Nguyễn Khánh Huyền – 20520558 </b>

<b>TP. HỒ CHÍ MINH, 2024 </b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

2

<b>LỜI CẢM ƠN </b>

Em xin chân thành gửi lời cảm ơn đến cô Trần Thị Hồng Yến vì đã giúp đỡ và hướng dẫn em trong suốt q trình hồn thành đồ án phát triển Website Hỗ trợ học tiếng Anh cho người đi làm. Cảm ơn cô đã dành thời gian giúp em hiểu rõ hơn về chủ đề, giải đáp thắc mắc, gợi ý hướng giải quyết các vấn đề cũng như các hướng phát triển để đồ án trở nên hoàn thiện hơn.

Nhờ vào sự giúp đỡ tận tình đó, em đã hồn thành đồ án này một cách tốt nhất có thể. Bên cạnh đó, em cũng trao dồi được nhiều hơn các kĩ năng cứng và cả các kỹ năng mềm khác như kỹ năng tư duy, giải quyết vấn đề, lên kế hoạch và ghi chép. Em chân thành cảm ơn những lời động viên, tư vấn và sự quan tâm của cô dành cho em. Những lời động viên đó đã giúp em có thêm động lực để hoàn thành đồ án, cũng như dần ổn định trên hướng đi của mình. Em rất mong mình sẽ có cơ hội nhận được sự cố vấn, hướng dẫn của cô trong tương lai.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT... 15

2.1. Các công nghệ, thư viện, ngôn ngữ, công cụ được sử dụng... 15

2.1.1. Các ngôn ngữ: Typescript, TSX, CSS/SCSS ... 15

2.1.2. Công nghệ/thư viện: React, Redux, Firebase ... 16

2.1.3. Các công cụ: Github, Figma, Visual Studio Code ... 17

2.1.4. Các thư viện khác ... 17

2.2. Phương pháp phát triển ... 18

2.3. Kết quả mong đợi ... 18

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ... 19

3.1. Use-case... 20

3.1.1. Use-case “Kiểm tra đầu vào” ... 23

3.1.2. Use-case “Thêm vào mục lưu trữ” ... 24

3.1.3. Use-case “Chơi trò chơi vui”... 25

3.1.4. Use-case “Làm bài kiểm tra vượt cấp” ... 26

3.1.5. Use-case “Xem xếp hạng thành tích” ... 28

3.1.6. Use-case “Cập nhật thơng tin người dùng” ... 29

3.1.7. Use-case “Khoá tài khoản”... 30

3.1.8. Use-case “Duyệt bài viết” ... 32

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

4

3.1.9. Use-case “Ghim bình luận” ... 33

3.1.10. Use-case “Xem báo cáo và thống kê” ... 34

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

5

4.18. Màn hình “Saved” ... 58

4.19. Màn hình “Personal Information” ... 59

4.20. Hộp thoại “Update Avatar” ... 60

4.21. Hộp thoại “Update Personal Information” ... 61

4.22. Màn hình “Dashboard” ... 62

4.23. Màn hình “Test Level Up Description” ... 63

4.24. Màn hình “Test Level Up Detail” ... 64

4.25. Màn hình “Test Level Up Finish” ... 65

4.31. Màn hình “Manage Study” – Admin ... 73

4.32. Hộp thoại “Add new Path” – Admin ... 74

4.33. Màn hình “Manage Study Detail” – Admin ... 75

4.34. Hộp thoại “Add new Route” – Admin ... 76

4.35. Màn hình “Manage Document” – Admin ... 77

4.36. Hộp thoại “Add new Topic” – Admin... 78

4.37. Màn hình “Manage Document Detail” – Admin... 79

4.38. Hộp thoại “Add new Document” – Admin ... 80

4.39. Màn hình “Manage Exercise” – Admin ... 81

4.40. Hộp thoại “Add new Exercise” – Admin ... 82

4.41. Màn hình “Manage Exercise Detail” – Admin ... 83

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

6

4.42. Hộp thoại “Add new Answer” – Admin ... 84

4.43. Màn hình “Manage Forum” – Admin ... 85

4.44. Màn hình “Manage Test” – Admin ... 86

4.45. Màn hình “Manage Onboarding” – Admin ... 87

4.46. Hộp thoại “Add new Onboarding Test” – Admin ... 88

4.47. Màn hình “Manage Users” – Admin ... 89

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

7

<b>MỤC LỤC HÌNH ẢNH </b>

Hình 3.1 Hình ảnh use-case Hệ thống Hỗ trợ học tiếng Anh cho người đi làm... 20

Hình 3.2 Hình ảnh Wireframe giao diện ... 36

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Hình 4.23 Hộp thoại “Update Avatar” ... 60

Hình 4.24 Hộp thoại “Update Personal Information” ... 61

Hình 4.25 Màn hình “Dashboard” ... 62

Hình 4.26 Màn hình “Test Level Up Description” ... 63

Hình 4.27 Màn hình “Test Level Up Detail” ... 64

Hình 4.28 Màn hình “Test Level Up Finish” ... 65

Hình 4.36 Màn hình “Manage Study” – Admin ... 73

Hình 4.37 Màn hình “Add new Path” – Admin ... 74

Hình 4.38 Màn hình “Manage Study Detail” – Admin ... 75

Hình 4.39 Màn hình “Add new Route” – Admin ... 76

Hình 4.40 Màn hình “Manage Document” – Admin ... 77

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

9

Hình 4.41 Màn hình “Add new Topic” – Admin ... 78

Hình 4.42 Màn hình “Manage Document Detail” – Admin ... 79

Hình 4.43 Màn hình “Add new Document” – Admin ... 80

Hình 4.44 Màn hình “Manage Exercise” – Admin ... 81

Hình 4.45 Màn hình “Add new Exercise” – Admin ... 82

Hình 4.46 Màn hình “Manage Exercise Detail” – Admin... 83

Hình 4.47 Hộp thoại “Add new Answer” - Admin ... 84

Hình 4.48 Màn hình “Manage Forum” – Admin ... 85

Hình 4.49 Màn hình “Manage Test” – Admin ... 86

Hình 4.50 Màn hình “Manage Onboarding” – Admin ... 87

Hình 4.51 Màn hình “Add new Onboarding Test” – Admin ... 88

Hình 4.52 Màn hình “Manage Users” – Admin ... 89

Hình 4.53 Màn hình “Personal Information” ở chế độ “dark” ... 90

Hình 4.54 Hộp thoại “Cập nhật thông tin cá nhân” ở chế độ “dark” ... 91

Hình 4.55 Màn hình “Docmunet” ở chế độ “dark” ... 91

Hình 4.56 Màn hình “Saved” ở chế độ “dark” ... 92

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

10

<b>MỤC LỤC BẢNG </b>

Bảng 3.1 Danh sách use-case người dùng ... 21

Bảng 3.2 Danh sách use-case quản trị viên ... 22

Bảng 3.3 Use-case “Kiểm tra đầu vào” ... 23

Bảng 3.6 Use-case “Thêm vào mục lưu trữ” ... 24

Bảng 3.7 Use-case “Chơi trò chơi vui” ... 25

Bảng 3.8 Use-case “Làm bài kiểm tra vượt cấp” ... 26

Bảng 3.9 Use-case “Xem xếp hạng thành tích” ... 28

Bảng 3.10 Use-case “Cập nhật thông tin người dùng”... 29

Bảng 3.11 Use-case “Khoá tài khoản” ... 30

Bảng 3.12 Use-case “Duyệt bài viết” ... 32

Bảng 3.13 Use-case “Ghim bình luận” ... 33

Bảng 3.14 Use-case “Xem báo cáo thống kê” ... 34

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

11

<b>TÓM TẮT ĐỒ ÁN </b>

Đề tài đồ án “Xây dựng Website học tiếng Anh cho người đi làm” được lên kế hoạch thực hiện trong vòng 6 tháng. Với mục tiêu là tìm hiểu đề tài, các công nghệ liên quan và xây dựng được Website với các chức năng cơ bản.

Đồ án mang đến một Webiste giúp những người đi làm nói riêng và những người bận rộn nói chung có nhu cầu cải thiện tiếng Anh, có thể tiếp cận việc học ngơn ngữ này một cách đơn giả, hiệu quả và thú vị.

Đồ án được xây dựng dựa trên nền tảng Web và công nghệ khá phổ biến hiện nay là ReactJs và Firebase.

Đồ án hoàn thành các chức năng cơ bản, có thể đáp ứng được nhu cầu đơn giản của người dùng.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>Hiểu được tâm lý đó, Website Hỗ trợ học tiếng Anh cho người đi làm được tạo </b>

ra để mang lại điều kiện tốt cho những người bận rộn có khả năng phát triển bản thân. Website đã được xây dựng các tính năng cơ bản ở Đồ án 1. Ở đồ án này, em sẽ tiếp tục hồn thiện nó bằng cách tích hợp các tính năng hấp dẫn, thu hút, tăng hiệu quả học tập cho người học; làm mượt mà phần quản trị cho quản trị viên. Bên cạnh đó, cũng chú trọng vào độ tương thích giao diện trên nhiều thiết bị nhằm đáp ứng nhu cầu đa dạng của người dùng.

• Hỗ trợ quản trị viên quản lý các tài liệu, thông tin người dùng.

• Hỗ trợ tốt việc học ban đêm nhờ vào tính năng chuyển đổi chủ đề nền tối, sáng. • Tăng hứng thú cho học viên bằng trò chơi vui và bảng xếp hạng.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

o Xem tiến trình học tập theo lộ trình: Người dùng xem được tiến trình học tập của bản thân. Ý phát triển là người dùng có thể xem các thơng số về lộ trình học, làm bài luyện tập, sự tương tác trên diễn đàn. Chi tiết lộ trình học được lấy từ trang tài liệu, học viên có thể xem chi tiết nội dung học ở đó.

o Luyện tập qua các trò chơi: Người dùng ôn lại kiến thức đã học qua các trò chơi có lưu lại kết quả. Ý phát triển là bắt buộc học viên làm lại các câu sai trước khi sang bài luyện tập khác.

o Quản lý diễn đàn: Ý phát triển là cho phép quản trị viên đăng những thông báo quan trọng, duyệt các bài viết của người học muốn đăng, và có quyền ghim lên đầu hoặc xóa những bình luận có nội dung khơng liên quan, khơng lành mạnh.

<b>• Chức năng xây dựng mới: </b>

o Kiểm tra đầu vào học viên: Người dùng trả lời các câu hỏi đầu vào nhằm đánh giá trình độ hiện tại với 3 cấp độ: sơ cấp, trung bình và nâng cao. o Lưu trữ vào mục cần nhớ: Người dùng có thể lưu trữ những bài học, từ

vựng,… vào mục riêng của mỗi tài khoản.

o Chế độ nền tối: Người dùng có thể tùy chỉnh chế độ nền tối hoặc chế độ nền sáng để thích hợp với nhu cầu học ban đêm hay ban ngày.

o Trò chơi vui: Xây dựng thêm trò chơi thú vị hấp dẫn người học đồng thời tích điểm thưởng, nêu tên trên bảng xếp hạng.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>• Người dùng: kiểm tra đầu vào, xác nhận cấp độ hiện tại, xem được tiến trình </b>

học, lưu trữ những kiến thức cần nhớ, luyện tập qua các trò chơi, có thể chia

<b>sẻ và giải đáp thắc mắc qua diễn đàn. </b>

<b>• Quản trị viên: Quản lý các bài học, kho kiến thức, tạo lộ trình học, các bài </b>

luyện tập, bài kiểm tra, diễn đàn và người dùng, xem báo cáo phân tích.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

o React o Redux o Firebase • Công cụ:

o Github o Figma

o Visual Studio Code • Các thư viện khác:

o Flexbox Grid

Sau đây, em sẽ điểm qua một vài điểm đặc biệt, điều khiến em sử dụng chúng:

<b>2.1.1. Các ngôn ngữ: Typescript, TSX, CSS/SCSS </b>

Đây là các ngôn được sử dụng để tạo nên Website.

<b>• Typescript: là một ngơn ngữ lập trình mở rộng của Javascript, được thiết kế </b>

để giải quyết các vấn đề về kiểm tra lỗi và quản lý mã nguồn trong quá trình phát triển phần mềm. Việc sử dụng Typescript giúp tăng tính ổn định và tin cậy của ứng dụng, đồng thời giúp cho quá trình phát triển và bảo trì ứng dụng trở nên dễ dàng và linh hoạt hơn.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

16

<b>• TSX(Typescript Extension): là một phần mở rộng của Typescript, được sử </b>

dụng để phát triển giao diện người dùng trong React. TSX cho phép bạn viết mã HTML giống như trong React, nhưng với các tính năng của Typescript như kiểm tra lỗi tĩnh và kiểu dữ liệu tĩnh.

<b>• CSS(Cascading Style Sheets): là một ngơn ngữ định dạng kiểu được sử dụng </b>

để tạo kiểu cho các tài liệu HTML hoặc XML. CSS cho phép bạn kiểm soát cách mà các phần tử HTML hiển thị trên trang web, bao gồm kích thước, màu sắc, khoảng cách, vị trí và hình dạng.

<b>2.1.2. Cơng nghệ/thư viện: React, Redux, Firebase </b>

React và Redux là hai công nghệ/thư viện được sử dụng xuyên suốt quá trình phát triển ứng dụng. Chúng có mối quan hệ chặt chẽ với nhau.

<b>• React: </b>

o React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, được sử dụng để xây dựng các giao diện người dùng (UI) động cho các ứng dụng web. React cho phép phát triển các UI phức tạp bằng cách sử dụng các thành phần (components) độc lập và có thể tái sử dụng.

o React cũng cho phép tích hợp với các thư viện và framework khác như Redux, React Router, hoặc Axios để tạo ra các ứng dụng web đầy đủ tính năng.

<b>• Redux: </b>

o Redux là một thư viện JavaScript mã nguồn mở được sử dụng để quản lý trạng thái (state) của ứng dụng web. Redux cho phép quản lý trạng thái của ứng dụng một cách dễ dàng và hiệu quả, giúp giảm thiểu các lỗi và tăng tính ổn định của ứng dụng.

o Redux cũng cho phép tích hợp với các thư viện và framework khác như React, Angular hoặc Vue để tạo ra các ứng dụng web đầy đủ tính năng.

<b>• Firebase: </b>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

17

o Firebase là một công nghệ của Google được sử dụng để phát triển các ứng dụng web và di động. Nó cung cấp các công cụ để lưu trữ dữ liệu, xác thực người dùng, phân tích dữ liệu, cung cấp thông báo đẩy và nhiều tính năng khác.

o Firebase cũng cung cấp các thư viện (libraries) cho các ngơn ngữ lập trình khác nhau như JavaScript, Android, iOS, Unity, và C++. Những thư viện này giúp cho việc tích hợp các tính năng của Firebase vào ứng dụng trở nên dễ dàng hơn.

<b>2.1.3. Các công cụ: Github, Figma, Visual Studio Code </b>

<b>• Github: là một nền tảng mã nguồn miễn phí, cho phép nhà phát triển lưu trữ, </b>

quản lý, chia sẻ mã nguồn của mình với cộng đồng mạnh mẽ. Các tính năng khác nổi bật như tự động tích hợp, tự động triển khai. Đây là công cụ được sử dụng rộng rãi nhất hiện nay.

<b>• Figma: là một ứng dụng thiết kế đồ họa dựa trên đám mây (cloud-based </b>

graphic design tool), cho phép người dùng tạo ra các thiết kế đồ họa, giao diện người dùng (UI), giao diện trải nghiệm người dùng (UX) và các bản vẽ khác trên nền tảng web. Cộng đồng của cơng cụ này vơ cùng lớn mạnh.

<b>• Visual Studio Code: là công cụ giúp biên tập, soạn thảo code, đi kèm nhiều </b>

tính năng như debug, IntelliSense, linter, và thay đổi mã nguồn phục hồi, giúp người dùng tăng tốc độ phát triển và giảm thiểu các lỗi. Nó hỗ trợ nhiều ngơn ngữ và tích hợp sẵn trình quản lý code Git, Docker,… Bên cạnh đó, nó hỗ trợ nhiều extension để người dùng có thể mở rộng các tính năng mong muốn. Cộng đồng của công cụ này vô cùng lớn mạnh.

<b>2.1.4. Các thư viện khác </b>

• Flexbox Grid: thư viện hỗ trợ giao diện người dùng sẽ tương thích nhiều kích thước thiết bị khác nhau.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

18

<b>2.2. Phương pháp phát triển </b>

<b>Quản lý mã nguồn: sử dụng Github để quản lý. </b>

Các bước phát triển cùng phương pháp thực hiện bắt đầu từ đồ án 1, được liệt kê như bên dưới:

• Tìm hiểu các cơng nghệ React, Redux, Firebase. • Thu thập yêu cầu thông qua:

o Khảo sát bằng form: giao diện người dùng. o Khảo sát các ứng dụng liên quan: chức năng. • Phân tích và xác định yêu cầu:

o Khảo sát bằng form để thu thập ý kiến về giao diện người dùng.

o Các ứng dụng liên quan “Doulingo”, “Viblo”... để khảo sát những chức năng đã có và cần có cho ứng dụng. Đưa ra các yêu cầu chức năng và phi chức năng.

<b>2.3. Kết quả mong đợi </b>

• Hồn thiện các chứng năng cần phát triển và các chức năng mới của Website. • Triển khai lên môi trường thực tế.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

19

<b>CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG </b>

Dưới đây là các chức năng đã có ở đồ án 1 và sẽ được thêm mới ở đồ án 2:

<b>Người dùng: </b>

1. Gợi ý lộ trình học. 2. Học theo lộ trình.

3. Quản lý thông tin cá nhân. 4. Luyện tập qua bài luyện tập. 5. Tương tác trên diễn đàn. 6. Quản lý mục lưu trữ. 7. Chơi trò chơi.

8. Xem bảng xếp hạng. 9. Chế độ nền tối.

10. Làm bài kiểm tra vượt cấp. 11. Thống kê.

<b>Quản trị viên: </b>

1. Quản lý lộ trình học. 2. Quản lý kho tài liệu. 3. Quản lý các bài luyện tập. 4. Quản lý người dùng. 5. Quản lý các bài kiểm tra. 6. Quản lý diễn đàn.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

21

<b>Danh sách Use-case: Người dùng: </b>

<i>Bảng 3.1 Danh sách use-case người dùng </i>

5 Đổi mật khẩu Cập nhật mật khẩu mới.

6 Kiểm tra đầu vào Học viên làm bài kiểm tra đầu vào để xác định cấp độ hiện tại.

7 Học theo lộ trình Học viên chọn chặng hiện tại trong lộ trình đã gợi ý.

8 Luyện tập Học viên luyện tập kiến thức đã học thơng qua trị chơi tương ứng với cấp độ hiện tại.

9 Đăng bài viết Học viên đăng bài viết lên diễn đàn.

10 Yêu thích bài viết Học viên yêu thích các bài viết của Học viên khác trên diễn đàn.

11 Bình luận Học viên đăng bình luận dưới bình luận của một bài viết của chính mình hoặc học viên khác.

12 Thêm vào mục lưu trữ

Học viên lưu từ vựng hoặc câu cần lưu vào mục lưu trữ.

13 Chơi trò chơi vui Học viên chơi trò chơi vui “Vượt chướng ngại vật”. 14 Làm bài test vượt cấp Học viên làm bài test vượt cấp dựa trên kết quả.

15 Xem xếp hạng thành tích

Người dùng xem xếp hạng thành tích cá nhân khi chơi game vui của tất cả mọi người sử dụng ứng dụng.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

7 Thêm bài luyện tập Quản trị viên thêm các bài luyện tập dưới dạng trò chơi, với các hình thức trị chơi khác nhau.

8 Cập nhật bài luyện

tập ^{Quản trị viên cập nhật các bài luyện tập.}9 Xóa bài luyện tập Quản trị viên xóa các bài luyện tập. 10 Cập nhật thông tin

người dùng ^{Quản trị viên cập nhật những thông tin cá nhân như}tên, tuổi, giới tính, tiểu sử, ngày sinh,… 11 Khóa tài khoản Quản trị viên khóa tài khoản Học viên.

12 Duyệt bài viết Quản trị viên duyệt hoặc huỷ bài viết đang chờ của Học viên.

13 Ghim bình luận Quản trị viên ghim bình luận cần ghim lên đầu dưới bài viết.

14 Xem báo cáo và

thống kê ^{Quản trị viên xem báo cáo, thống kê theo tuần,}tháng, năm. 15 Quản lý bài kiểm tra

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

23

Dưới đây là chi tiết các use-case được thêm mới ở đồ án 2:

<b>3.1.1. Use-case “Kiểm tra đầu vào” </b>

<i>Bảng 3.3 Use-case “Kiểm tra đầu vào” </i>

Use case ID UC-6

Use case Name Kiểm tra đầu vào.

Description Học viên làm bài kiểm tra đầu vào để xác định cấp độ hiện tại.

Priority Phải có.

Actor Học viên.

Trigger Sau khi Học viên đăng nhập lần đầu tiên.

Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống lần đầu tiên.

Post-conditions Hệ thống ghi nhận cấp độ hiện tại của học viên vào cơ sở dữ liệu, cung cấp lộ trình học dựa trên cấp độ được ghi nhận.

Basic Flow 1. Hệ thống đưa ra một loạt các câu hỏi để đánh giá trình độ hiện tại của Học viên.

2. Học viên trả lời tất cả câu hỏi và nhấn nút “Submit”.

3. Hệ thống hiển thị kết quả và dựa vào kết quả để đưa ra “cấp độ” hiện tại của Học viên và lộ trình dựa vào cấp độ đó. 4. Học viên chọn “Accept”.

5. Hệ thống chuyển sang màn hình “Study” với lộ trình đã được chọn.

Alternative Flow 4.

a. Học viên chọn “Choose another level” i. Hệ thống hiển thị danh sách các cấp độ ii. Học viên lựa chọn cấp độ mong muốn.

=> Tiếp tục bước 5 trong sơ đồ.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

Khơng có.

<b>3.1.2. Use-case “Thêm vào mục lưu trữ” </b>

<i>Bảng 3.4 Use-case “Thêm vào mục lưu trữ” </i>

Use case ID UC-12

Use case Name Thêm vào mục lưu trữ.

Description Học viên lưu từ vựng hoặc câu cần lưu vào mục lưu trữ

Priority Có thể có.

Actor Học viên.

Trigger Người dùng muốn lưu trữ nội dung bài học, tài liệu. Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống.

2. Nội dung từ vựng, câu, bài học, tài liệu chưa được lưu trữ.

Post-conditions Nội dung từ vựng, câu đã được lưu vào mục lưu trữ cá nhân thành công, cập nhật vào cơ sở dữ liệu.

Basic Flow 1. Người dùng truy cập vào bài học hoặc tài liệu.

2. Người dùng chọn nút biểu tượng “Trái tim” ở nội dung từ vựng, câu, tài liệu muốn lưu trữ.

3. Hệ thống lưu trữ nội dung vào mục lưu trữ thành công, trái tim thay đổi màu biểu hiện đã được thêm vào mục lưu trữ. Alternative Flow Khơng có.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

25

Exception Flow 3.

a. Hệ thống bị lỗi:

=> Hiển thị thông báo, kết thúc luồng.

<b>3.1.3. Use-case “Chơi trò chơi vui” </b>

<i>Bảng 3.5 Use-case “Chơi trò chơi vui” </i>

Use case ID UC-13

Use case Name Chơi trò chơi vui.

Description Học viên chơi trò chơi vui “Vượt chướng ngại vật”.

Priority Có thể có.

Actor Học viên.

Trigger Người dùng muốn chơi trò chơi vui.

Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống.

Post-conditions Hệ thống ghi nhận kết quả và lưu vào bảng xếp hạng trong trang “Leaderboard”.

Basic Flow 1. Người dùng vào trang “Game”.

2. Hệ thống hiển thị danh sách các vòng của trò chơi. 3. Người dùng chọn vòng chơi hiện tại.

4. Hệ thống hiển thị chỉ dẫn.

5. Người dùng nhấn vào nút “Start”.

6. Hệ thống tải dữ liệu và hiển thị màn hình chơi trị chơi. 7. Người dùng hồn thành trị chơi.

8. Hệ thống ghi nhận kết quả và lưu vào bảng xếp hạng trong trang “Leaderboard”.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

a. Hệ thống tải dữ liệu không thành công:

=> Hiển thị thông báo, quay lại trang “Game”.

Non-functional Requirement

Khơng có.

<b>3.1.4. Use-case “Làm bài kiểm tra vượt cấp” </b>

<i>Bảng 3.6 Use-case “Làm bài kiểm tra vượt cấp” </i>

Use case ID UC-14

Use case Name Làm bài kiểm tra vượt cấp.

Description Học viên làm bài kiểm tra vượt cấp để vượt lên cấp độ cao hơn.

Priority Có thể có.

Actor Học viên.

Trigger Người dùng vượt qua cấp độ hiện tại.

Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống. 2. Người dùng chưa đạt được cấp độ cao nhất.

Post-conditions Người dùng được tăng cấp độ.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

5. Hệ thống hiển thị lần lượt từng câu hỏi.

6. Người dùng hoàn thành tất cả các câu và nhấn nút “Submit”. 7. Hệ thống tính tốn và chuyển sang trang kết quả, hiển thị cấp độ đạt được tương ứng với kết quả, cấp độ cao hơn cấp độ hiện tại.

8. Người dùng xác nhận cấp độ tương ứng với kết quả.

9. Hệ thống lưu cấp độ vào cơ sở dữ liệu của người dùng, cập nhật lộ trình học, bài luyện tập tương ứng với cấp độ.

a. Nếu kết quả cấp độ bằng với cấp độ hiện tại

=> Hệ thống không cho thay đổi cấp độ khác.

b. Nếu kết quả cấp độ thấp hơn cấp độ hiện tại

=> Hệ thống cho phép cập nhật xuống cấp thấp hơn.

8.

a. Người dùng nhấn nút “Keep current Level”

=> Hệ thống giữ nguyên cấp độ hiện tại, quay về trang “Study”.

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

Khơng có

<b>3.1.5. Use-case “Xem xếp hạng thành tích” </b>

<i>Bảng 3.7 Use-case “Xem xếp hạng thành tích” </i>

Use case ID UC-15

Use case Name Xem xếp hạng thành tích

Description Cho phép người dùng xem bảng thành tích học tập và luyện tập của tất cả mọi người tham gia trò chơi vui.

Priority Có thể có.

Actor Học viên.

Trigger Người dùng muốn xem bảng xếp hạng thành tích. Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống.

Post-conditions Hiển thị danh sách bảng xếp hạng thành tích.

Basic Flow 1. Người dùng vào trang “Leaderboard”.

2. Hệ thống tải dữ liệu danh sách bảng xếp hạng lên và hiển thị lên màn hình.

Alternative Flow Khơng có

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

Khơng có

<b>3.1.6. Use-case “Cập nhật thơng tin người dùng” </b>

<i>Bảng 3.8 Use-case “Cập nhật thông tin người dùng” </i>

Use case ID UC-25

Use case Name Cập nhật thông tin người dùng

Description Quản trị viên cập nhật các thơng tin của người dùng: tên, giới tính, ngày sinh, tiểu sử,…

Priority Phải có.

Actor Quản trị viên.

Trigger Quản trị viên muốn cập nhật thông tin cá nhan của người dùng.

Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống với vai trị Quản trị viên.

Post-conditions Thơng tin người dùng được cập nhật thành công, cập nhật vào cơ sở dữ liệu

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

30

Basic Flow 1. Quản trị viên chọn học viên trong danh sách trang “Manage Users”, sau đó nhấn nút “Edit”.

2. Hệ thống hiển thị hộp thoại “Edit student”.

3. Quản trị viên cập nhật các thông tin của người dùng. 4. Quản trị viên nhấn “Submit”.

5. Hệ thống kiểm tra nội dung có hợp lệ hay khơng, nếu có tiếp tục bước 6

6. Hệ thống cập nhật thông tin cá nhân của học viên được chọn, cập nhật cơ sở dữ liệu.

Alternative Flow 4.

a. Người dùng nhấn nút “Cancel”: => Kết thúc luồng.

Exception Flow 5.

a. Nội dung không hợp lệ, hệ thống hiển thị thông báo => Kết thúc luồng.

Non-functional Requirement

<b>3.1.7. Use-case “Khoá tài khoản” </b>

<i>Bảng 3.9 Use-case “Khoá tài khoản” </i>

Use case ID UC-26

Use case Name Quản trị viên khóa tài khoản học viên.

Description Quản trị viên khóa tài khoản học viên.

Priority Phải có.

Actor Quản trị viên.

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

31

Trigger Quản trị viên muốn khoá tài khoản của một người dùng đã tồn tại.

Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống với vai trò Quản trị viên.

Post-conditions Tài khoản học viên được khóa thành cơng, cập nhật vào cơ sở dữ liệu.

Basic Flow 1. Người dùng chọn học viên trong danh sách trang “Manage Users”, sau đó nhấn nút “Deactive account”.

2. Hệ thống yêu cầu xác nhận chắc chắn khóa của người dùng. 3. Người dùng nhấn “Submit”.

4. Hệ thống kiểm tra nội dung có hợp lệ hay khơng, nếu có tiếp tục bước 5.

5. Hệ thống khóa tài khoản học viên được chọn, cập nhật cơ sở dữ liệu.

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

32

<b>3.1.8. Use-case “Duyệt bài viết” </b>

<i>Bảng 3.10 Use-case “Duyệt bài viết” </i>

Use case ID UC-27

Use case Name Duyệt bài viết.

Description Quản trị viên duyệt các bài viết được tạo bởi Học viên.

Priority Phải có.

Actor Quản trị viên.

Trigger Quản trị viên duyệt các bài viết đang chờ xử lý.

Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống với vai trò Quản trị viên.

Post-conditions Bài viết được duyệt thành công, đăng công khai.

Basic Flow 1. Người dùng vào trang “Manage Forum” và chọn một bài viết trong danh sách “Pending Post”.

2. Người dùng nhập ghi chú. 3. Người dùng nhấn nút “Accept”.

4. Hệ thống xác nhận đăng bài, quay lại trang “Manage Forum”.

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

33

<b>3.1.9. Use-case “Ghim bình luận” </b>

<i>Bảng 3.11 Use-case “Ghim bình luận” </i>

Use case ID UC-28

Use case Name Ghim bình luận.

Description Quản trị viên ghim bình luận dưới bài viết trên diễn đàn.

Priority Có thể có.

Actor Quản trị viên.

Trigger Quản trị viên muốn ghim bình luận lên đầu dưới bài viết trên diễn đàn.

Pre-conditions ^{1. Người dùng đã đăng nhập vào hệ thống với vai trị Quản trị}viên.

<small>2. </small> Bình luận chưa được ghim.

Post-conditions Bình luận được ghim lên đầu danh sách bình luận dưới bài viết.

Basic Flow 1. Người dùng chọn nút “Pin” dưới một bình luận.

2. Hệ thống ghim bình luận lên đầu các danh sách bình luận dưới bài viết, lưu vào cơ sở dữ liệu.

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

34

<b>3.1.10. Use-case “Xem báo cáo và thống kê” </b>

<i>Bảng 3.12 Use-case “Xem báo cáo thống kê” </i>

Use case ID UC-29

Use case Name Xem báo cáo và thống kê.

Description Cho phép quản trị viên xem báo cáo và thống kê.

Priority Phải có.

Actor Quản trị viên.

Trigger Người dùng muốn xem báo cáo và thống kê của website.

Pre-conditions 1. Người dùng đã đăng nhập vào hệ thống với vai trò quản trị viên.

Post-conditions Hiển thị trang “Dashboard” có số liệu thành cơng.

Basic Flow 1. Người dùng truy cập vào trang “Dashboard”. 2. Hệ thống tải dữ liệu lên và hiển thị lên màn hình.

Alternative Flow Khơng có.

Exception Flow 5.

b. Hệ thống tải lỗi, hiển thị thơng báo lên màn hình: => Kết thúc luồng.

Non-functional Requirement

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

35

<b>3.2. Thiết kế </b>

<b>3.2.1. Thiết kế giao diện </b>

Ở đồ án 2, em sẽ thay đổi màu sắc chủ đạo của ứng dụng từ “vàng” sang “cam”. Lí do em thay đổi màu sắc chủ đạo là màu sắc “cam” sẽ tạo nên sự tương phản mạnh hơn trên nên sáng. Điều này sẽ làm ứng dụng trở nên hấp dẫn và thú vị hơn. Bên cạnh đó, em có sử dụng kết hợp màu sắc cam cùng với màu nền tối trong chế độ nền tối, ứng dụng vẫn khá nổi bật, thu hút nhưng khơng bị chói mắt. Em sẽ trình bày trong phần tiếp theo.

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

37

<b>3.2.2. Thiết kế dữ liệu </b>

Website sử dụng Firebase để lưu trữ, truy xuất dữ liệu. Firebase tổ chức dữ liệu theo loại dữ liệu phi quan hệ, mục đích nhằm mang lại hiệu suất tốt hơn nhờ truy xuất nhanh.

Dưới đây là bản thiết kế dữ liệu:

<i>Hình 3.3 Hình ảnh thiết kế dữ liệu </i>

<small>id: stringname: stringemail: stringgender: Genderbirthday: Datebio: stringpoint: numberavatar: stringlikedBlog: string[]routes: string[]currentPathId: stringcheckinDays: Date[]level: LevelType</small>

<small>id: stringuserId: stringrole: stringisLocked: boolean</small>

<small>id: stringname: stringtopic: stringlevel: stringstudy_routes: StudyRoute[]</small>

<small>id: stringname: stringimage: stringcards: string[]isLast: boolean</small>

<small>id: stringtitle: stringdescription: stringlistItemIds: string[]createDate: Date</small>

<small>id: stringtitle: stringdescription: stringlistItemIds: string[]createDate: Datelevel: LevelTypestate: ExState</small>

<small>id: stringuserId: stringexId: stringresultList: ExDetail[]rightQn: numberdidDate: Datestate: ExState</small>

<small>id: stringuserId: stringuserName: stringlikes: BlogLike[]comments: BlogComment[]title: stringsummary: stringcontent: stringkeyword: stringcreateDate: DatecancelNote: string</small>

<small>id: stringdisplay: stringmeaning: stringimage: stringaudio: stringtype: StudyCardType</small>

<small>id: stringuserId: stringexId: stringtitle: stringdescription: stringlistItems: ExDetail[]didDate: Date</small>

<small>id: stringuserId: stringuserName: stringblogId: stringcreateDate: Date</small>

<small>id: stringuserId: stringuserName: stringblogId: stringcontent: stringlikes: string[]isPinned: booleancreateDate: Date</small>

<small>id: stringtype: stringquestion: stringoptions: string[]answer: stringuserAnswer: stringexRight: booleanvocab: stringkeyword: string</small>

<small>id: stringname: stringrounds: GameRound[]</small>

<small>id: stringname: stringquestions: GameQuestion[]</small>

<small>id: stringquestion: stringoptions: string[]answer: stringlevel: numberpoint: number</small>

<small>id: string</small>

<small>gameQuestion: GameQuesitonisRight: boolean</small>

<small>id: stringuserId: stringgameRoundId: stringlistUserGameCard: UserGameCard[]totalPoint: numberrightCount: number</small>

<small>id: stringquestion: OnboardQuestionoptions: string[]audio: stringanswer: stringtype: TestEnumlevel: number</small>

<small>id: stringquestion: TestQuestionoptions: string[]audio: stringanswer: stringtype: TestEnumlevel: number</small>

<small>label: stringvnLabel: stringques: stringkeyword: stringparaph: string</small>

<small>label: stringques: stringkeyword: stringparaph: string</small>

<small>BasicTranslateToVNTranslateToENFillInSentenceSortWordsAudio</small>

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

39

<b>CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG </b>

Dưới đây là chi tiết các màn hình chính trong Website.

<b>4.1. Màn hình “Login” </b>

<i>Hình 4.1 Màn hình “Login” </i>

• Màn hình “Login” tương ứng với use-case “Login”. • Các xử lý:

o Input “Email”: nhập tài khoản email dùng để đăng nhập.

o Input “Password”: nhập mật khẩu tương ứng với tài khoản email dùng để đăng nhập.

o Nút “Forget password”: chuyển sang trang “Forget password” khi người dùng quên mật khẩu.

o Nút “GO TO APP”: xác thực tài khoản đăng nhập và chuyển sang trang chủ của Website.

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

40

<b>4.2. Màn hình “Register” </b>

<i>Hình 4.2 Màn hình “Register” </i>

• Màn hình “Register” tương ứng với use-case “Register”. • Các xử lý:

o Input “Email”: nhập tài khoản email dùng để đăng nhập. o Input “Password”: nhập mật khẩu mới.

o Input “Confirm password”: nhập lại mật khẩu để xác nhận.

o Nút “CREATE AN ACCOUNT”: thực hiện đăng kí tài khoản mới và chuyển sang trang “Login”.

</div>