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

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

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

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

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

TP HỒ CHÍ MINH, 2024

2

LỜI CẢM ƠN

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 quá trình hoà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 đã hoà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

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

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

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

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

7

MỤC LỤC HÌNH ẢNH

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

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

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

10

MỤC LỤC BẢNG

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

11

TÓM TẮT ĐỒ ÁN

Đề 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

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

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 hoà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

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

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

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

• 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

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

sẻ và giải đáp thắc mắc qua diễn đàn

• 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

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

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:

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

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

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

để 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

16

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

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

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

để 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

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

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

• React:

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

• Redux:

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

• Firebase:

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

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

• 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ữ,

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

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

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

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

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

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

• 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

18

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

Quản lý mã nguồn: sử dụng Github để quản lý

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

2.3 Kết quả mong đợi

• Hoà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ế

19

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

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

Người dùng:

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ê

Quản trị viên:

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

21

Danh sách Use-case: Người dùng:

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

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

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

23

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

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

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

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ơ đồ

Không có

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

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

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ó

25

Exception Flow 3

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

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

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

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

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 hoà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”

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ó

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

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

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 độ

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 toá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”

Không có

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

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

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ó

Không có

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

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

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

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

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

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

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

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

32

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

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

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”

33

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

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

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

2 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

34

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

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

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

35

3.2 Thiết kế

3.2.1 Thiết kế giao diện

Ở đồ á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

37

3.2.2 Thiết kế dữ liệu

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:

Hình 3.3 Hình ảnh thiết kế dữ liệu

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

id: stringuserId: stringrole: stringisLocked: boolean

id: stringname: stringtopic: stringlevel: stringstudy_routes: StudyRoute[]

id: stringname: stringimage: stringcards: string[]isLast: boolean

id: stringtitle: stringdescription: stringlistItemIds: string[]createDate: Date

id: stringtitle: stringdescription: stringlistItemIds: string[]createDate: Datelevel: LevelTypestate: ExState

id: stringuserId: stringexId: stringresultList: ExDetail[]rightQn: numberdidDate: Datestate: ExState

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

id: stringdisplay: stringmeaning: stringimage: stringaudio: stringtype: StudyCardType

id: stringuserId: stringexId: stringtitle: stringdescription: stringlistItems: ExDetail[]didDate: Date

id: stringuserId: stringuserName: stringblogId: stringcreateDate: Date

id: stringuserId: stringuserName: stringblogId: stringcontent: stringlikes: string[]isPinned: booleancreateDate: Date

id: stringtype: stringquestion: stringoptions: string[]answer: stringuserAnswer: stringexRight: booleanvocab: stringkeyword: string

id: stringname: stringrounds: GameRound[]

id: stringname: stringquestions: GameQuestion[]

id: stringquestion: stringoptions: string[]answer: stringlevel: numberpoint: number

id: string

gameQuestion: GameQuesitonisRight: boolean

id: stringuserId: stringgameRoundId: stringlistUserGameCard: UserGameCard[]totalPoint: numberrightCount: number

id: stringquestion: OnboardQuestionoptions: string[]audio: stringanswer: stringtype: TestEnumlevel: number

id: stringquestion: TestQuestionoptions: string[]audio: stringanswer: stringtype: TestEnumlevel: number

label: stringvnLabel: stringques: stringkeyword: stringparaph: string

label: stringques: stringkeyword: stringparaph: string

BasicTranslateToVNTranslateToENFillInSentenceSortWordsAudio

39

CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG

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

4.1 Màn hình “Login”

Hình 4.1 Màn hình “Login”

• 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

40

4.2 Màn hình “Register”

Hình 4.2 Màn hình “Register”

• 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”