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
GIỚI THIỆU ĐỀ TÀI
Lí do chọn đề tài
Ngày nay, thế giới ngày càng hội nhập Vì thế, tiếng Anh là vô cùng cần thiết đối với hầu hết mọi người, nhằm có thể bắt kịp nhịp phát triển của thế giới Và Việt Nam cũng có xu hướng này Nhà nhà học tiếng Anh, người người học tiếng Anh, không phân biệt tuổi tác Tuy nhiên, những người đi làm thường không có thời gian để đến các lớp học cũng như việc tiếp thu không hiệu quả do cách học không hiệu quả Từ đó, dễ xảy ra tâm trạng chán nản, từ bỏ
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.
Mục đích nghiên cứu
Phát triển Website có thể:
• Đánh giá cấp độ hiện tại của học viên mới và cho phép vượt cấp độ hiện tại
• Cung cấp cho người dùng danh sách bài học được hệ thống hóa theo chủ đề, dễ dàng tiếp thu một cách mau chóng, đầy đủ, chính xác với kho dữ liệu phong phú liên quan đến các chủ đề trong đời sống và công việc
• Giúp người dùng có hứng thú với việc học tiếng Anh hơn qua những bài luyện tập và diễn đàn kết nối với cộng đồng sẽ mang lại nhiều động lực hơn
• 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
Phạm vi ứng dụng
• Nền tảng hỗ trợ: Triển khai trên Website
• Chức năng tiếp tục phát triển: o Gợi ý lộ trình học: Ý phát triển là hệ thống đưa ra bài kiểm tra đầu vào, dựa vào sự lựa chọn của người dùng để đưa ra cấp độ hiện tại và lộ trình học tương ứng với cấp độ Tạo ma trận điểm và cấp độ để truy xuất lộ trình học dựa vào kết quả trả lời câu hỏi của người dù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
14 o Kiểm tra vượt cấp bậc: Người dùng có thể làm bài kiểm tra để xem xét có thể vượt cấp bậc hiện tại hay không o Quản lý các bài kiểm tra: Quản trị viên có quyền thêm, sửa, xoá các bài kiểm tra đầu vào, kiểm tra vượt cấp o Quản lý người dùng: Quản trị viên có quyền cập nhật thông tin cá nhân, khoá tài khoản người dùng o Báo cáo và phân tích: Cung cấp thông tin cho quản trị viên nhằm cải thiện chất lượng website.
Đối tượng sử dụ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
CƠ SỞ LÝ THUYẾT
Các công nghệ, thư viện, ngôn ngữ, công cụ được sử dụng
Trong quá trình phát triển ứng dụng, một số các công nghệ, ngôn ngữ, thư viện, công cụ được sử dụng:
• Ngôn ngữ: o Typescript o TSX o CSS/SCSS
• Công nghệ/thư viện: 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
• 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
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
• 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
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
• Thiết kế: o Thiết kế giao diện o Thiết kế dữ liệu
• Cài đặt: dựa trên nền tảng công nghệ và sử dụng các thư viện, ngôn ngữ được nêu ở phần trước Đồ án 2 sẽ tập trung và bước thiết kế giao diện người dùng, thiết kế dữ liệu và cài đặt mã nguồn.
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ế
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Use-case
Dưới đây là sơ đồ use-case được thiết kế sau khi xác định được các chức năng cụ thể của Website:
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
Bảng 3.1 Danh sách use-case người dùng
1 Đăng nhập Đăng nhập bằng tài khoản đã được đăng ký
2 Đăng kí Đăng kí tài khoản mới bằng Email
3 Quên mật khẩu Lấy lại mật khẩu qua Email
4 Cập nhật thông tin cá nhân
Cập nhật những thông tin cá nhân như tên, ngày sinh, số điện thoại, email,…
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
Bảng 3.2 Danh sách use-case quản trị viên
1 Thêm lộ trình học Quản trị viên thêm lộ trình học
2 Cập nhật lộ trình học Quản trị viên cập nhật lộ trình học
3 Xóa lộ trình học Quản trị viên xóa lộ trình học
4 Thêm tài liệu Quản trị viên thêm tài liệu
5 Cập nhật tài liệu Quản trị viên cập nhật tài liệu
6 Xóa tài liệu Quản trị viên xóa tài liệu
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
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 đầu vào
Quản trị viên thêm, sửa, xóa bài kiểm tra đầu vào
16 Quản lý bài test vượt cấp
Quản trị viên thêm, sửa, xóa bài kiểm tra vượt cấp
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 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
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 độ đó
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ơ đồ
Exception Flow 3 a Hệ thống lỗi tải dữ liệu, hiển thị thông báo, quay lại trang
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 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ữ
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ó
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 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”
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
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”
Alternative Flow 7 a Người dùng nhấn nút “Escape”
=> Hiển thị hộp thoại xác nhận thoát, nếu người dùng chọn
“Yes”, quay lại trang “Game”
Exception Flow 6 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”
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 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ó
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 độ
Basic Flow 1 Người dùng vào trang “Study”
2 Người dùng chọn nút “Level up”
3 Hệ thống hiển thị bài chỉ dẫn cho bài kiểm tra
4 Người dùng nhấn nút “Start”
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 độ
Alternative Flow 6 b Người dùng nhấn nút “Escape”
=> Hệ thống yêu cầu xác nhận chắc chắn thoát hay không, nếu có kết thúc luồng, ngược lại tiếp tục bước 5 trong luồng
7 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
Exception Flow 5 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 chỉ dẫn
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 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
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
Exception Flow 2 a Hệ thống tải dữ liệu không thành công:
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 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ử,…
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
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”:
Exception Flow 5 a Nội dung không hợp lệ, hệ thống hiển thị thông báo
3.1.7 Use-case “Khoá tài khoản”
Bảng 3.9 Use-case “Khoá tài khoản”
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
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
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
Alternative Flow 3 a Người dùng nhấn nút “Cancel”:
Exception Flow 4 a Nội dung không hợp lệ, hệ thống hiển thị thông báo
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 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
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”
Alternative Flow 3 a Người dùng nhấn nút “Cancel”:
=> Bài viết bị huỷ, hiển thị trong danh sách huỷ của người tạo kèm ghi chú, kết thúc luồng
3.1.9 Use-case “Ghim bình luận”
Bảng 3.11 Use-case “Ghim bình luận”
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
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
Alternative Flow 2 a Người dùng nhấn nút “Pin” khi bình luận đã được ghim
=> Hệ thống bỏ ghim bình luận, lưu vào cơ sở dữ liệu
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 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ê
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
Exception Flow 5 b Hệ thống tải lỗi, hiển thị thông báo lên màn hình:
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
Wireframe vẫn đang sử dụng giống ở đồ án 1 cho phiên bản kích thước màn hình điện thoại di động
Hình 3.2 Hình ảnh Wireframe giao diện
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
Student id: string name: string email: string gender: Gender birthday: Date bio: string point: number avatar: string likedBlog: string[] routes: string[] currentPathId: string checkinDays: Date[] level: LevelType
Account id: string userId: string role: string isLocked: boolean
StudyPath id: string name: string topic: string level: string study_routes: StudyRoute[]
StudyRoute id: string name: string image: string cards: string[] isLast: boolean
Document id: string title: string description: string listItemIds: string[] createDate: Date
Exercise id: string title: string description: string listItemIds: string[] createDate: Date level: LevelType state: ExState
UserExecise id: string userId: string exId: string resultList: ExDetail[] rightQn: number didDate: Date state: ExState
Blog id: string userId: string userName: string likes: BlogLike[] comments: BlogComment[] title: string summary: string content: string keyword: string createDate: Date cancelNote: string
StudyCard id: string display: string meaning: string image: string audio: string type: StudyCardType
TranslateToVN TranslateToEN TranslateSentenceToVN TranslateSentenceToEN FillInSentence SortWords Audio
ExAgain id: string userId: string exId: string title: string description: string listItems: ExDetail[] didDate: Date
BlogLike id: string userId: string userName: string blogId: string createDate: Date
BlogComment id: string userId: string userName: string blogId: string content: string likes: string[] isPinned: boolean createDate: Date
ExDetail id: string type: string question: string options: string[] answer: string userAnswer: string exRight: boolean vocab: string keyword: string
Game id: string name: string rounds: GameRound[]
GameRound id: string name: string questions: GameQuestion[]
GameQuestion id: string question: string options: string[] answer: string level: number point: number
UserGameCard id: string gameQuestion: GameQuesiton isRight: boolean
UserGameRound id: string userId: string gameRoundId: string listUserGameCard: UserGameCard[] totalPoint: number rightCount: number
OnboardingType id: string question: OnboardQuestion options: string[] audio: string answer: string type: TestEnum level: number
TestType id: string question: TestQuestion options: string[] audio: string answer: string type: TestEnum level: number
OnboardQuestion label: string vnLabel: string ques: string keyword: string paraph: string
TestQuestion label: string ques: string keyword: string paraph: string
BasicTranslateToVNTranslateToENFillInSentenceSortWordsAudio
Website đang áp dụng kiến trúc tương tự kiến trúc của các chương trình sử dụng công nghệ React Dưới đây là hình ảnh sơ đồ kiến trúc ứng dụng
Hình 3.4 Hình ảnh kiến trúc Website
XÂY DỰNG ỨNG DỤNG
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
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”
Màn hình “Onboarding”
Hình 4.3 Màn hình “Onboarding”
• Màn hình “Onboarding” tương ứng với use-case “Kiểm tra đầu vào”
• Các xử lý: o Lựa chọn câu trả lời cho câu hỏi khảo sát o Làm bài kiểm tra đầu vào bằng cách chọn đáp án cho từng câu hỏi kiểm tra o Nút “->”: chuyển sang câu hỏi tiếp theo trong bộ đề gồm 10 câu hỏi o Nút “”: đi tới câu tiếp theo trong danh sách các câu trong bài học o Nút “”: đi tới câu tiếp theo trong danh sách các câu trong bài học o Có thể quay lại trang chủ bằng nút quay lại trên trình duyệt web
Màn hình “Exercise Finish”
Hình 4.14 Màn hình “Execise Finish”
• Màn hình “Exercise Finish” hiển thị tổng quát kết quả bài luyện tập
• Hiển thị: o Dấu tích xanh: đáp án chính xác o Dấu ‘x’ cam: đáp án sai
• Các xử lý: o Nút “DO AGAIN”: quay lại màn hình “Exercise Description” của bài luyện tập hiện tại o Nút “VIEW RESULT DETAIL”: chuyển sang màn hình “Exercise Result” o Nút “ngôi nhà”: chuyển về trang chủ
Hình 4.15 Màn hình “Exercise Result”
• Màn hình “Exercise Result” hiển thị kết quả chi tiết của bài luyện tập
• Hiển thị: o Câu hỏi o Đáp án của người dùng o Đáp án của hệ thống o Dấu tích xanh: đáp án chính xác o Dấu ‘x’ cam: đáp án sai
• Ở màn hình này không có thao tác xử lý nào, chỉ có thể xem
Màn hình “Forum”
Hình 4.16 Màn hình “Forum”
• Màn hình “Forum” hiển thị danh sách các bài viết của mọi người và của người học
• Các xử lý: o Nút “Blogs”: hiển thị danh sách tất cả các bài viết đã được đăng thành công o Nút “Yours”: hiển thị danh sách các bài viết của bạn với ba trạng thái: chờ duyệt, đã đăng, đã huỷ o Thẻ bài viết: nhấn vào chuyển sang màn hình “Post Detail”
Màn hình “Add new post”
Hình 4.17 Màn hình “Add new post”
• Màn hình “Add new post” tương ứng với use-case “Đăng bài viết”
• Các xử lý: o Input “Title”: nhập tiêu đề bài viết o Input “Keyword”: nhập từ khoá tương ứng với bài viết o Input “Brief”: nhập tóm tắt bài viết o Text area “Content”: nhập nội dung bài viết o Nút “SUBMIT”: xác nhận tạo bài viết, bài viết chuyển sang trạng thái chờ duyệt
Màn hình “Your posts”
Hình 4.18 Màn hình “Your posts”
• Màn hình “Your posts” hiển thị danh sách các bài viết của người học đang đăng nhập với các trạng thái: chờ duyệt, đã đăng, đã huỷ
• Các xử lý: o Nút “Pending”: tải danh sách các bài viết đang ở trạng thái chờ duyệt o Nút “Posted”: tải danh sách các bài viết đang ở trạng thái đã đăng o Nút “Canceled”: tải danh sách các bài viết đang ở trạng thái đã huỷ
Màn hình “Post Detail”
Hình 4.19 Màn hình “Post Detail”
• Màn hình “Post Detail” hiển thị chi tiết bài viết và cho phép bình luận
• Các xử lý: o Nút “like”: yêu thích bài viết o Text area “Bình luận”: nhập nội dung muốn bình luận o Nút “máy bay”: đăng bình luận trong ô text area “Bình luận”
Màn hình “Saved”
Hình 4.20 Màn hình “Saved”
• Màn hình “Saved” hiển thị danh sách các câu và từ vựng đã thêm vào mục yêu thích
• Các xử lý: o Nút “trái tim” màu cam: loại bỏ từ hoặc câu ra khỏi mục yêu thích o Input “Search”: nhập từ hoặc câu cần tìm kiếm o Nút “SEARCH”: hiển thị danh sách theo từ đã nhập vào inpur “Search”
Màn hình “Personal Information”
Hình 4.21 Màn hình “Personal Information”
• Màn hình “Personal Information” hiển thị các thông tin của người dùng
• Hiển thị: o Cấp độ hiện tại o Ảnh đại diện và các thông tin cá nhân như email, tên,…
Hộp thoại “Update Avatar”
Hình 4.22 Hộp thoại “Update Avatar”
• Hộp thoại “Update Avatar” cho phép người dùng thay đổi ảnh đại diện
• Các xử lý: o Input “File”: chọn hình ảnh từ máy tính o Nút “SUBMIT”: xác nhận cập nhật ảnh đại diện, đóng hộp thoại o Nút “CANCEL”: huỷ cập nhật ảnh đại diện, đóng hộp thoại
Hộp thoại “Update Personal Information”
Hình 4.23 Hộp thoại “Update Personal Information”
• Hộp thoại “Update Personal Information” cho phép người dùng thay đổi thông tin cá nhân
• Các xử lý: o Input “Email”: chỉ xem, không thể thay đổi o Input “Name”: nhập tên mới o Input “Gender”: chọn giới tính mới o Input “Birth”: chọn ngày sinh mới o Input “Bio”: nhập tiểu sử mới
Màn hình “Dashboard”
Hình 4.24 Màn hình “Dashboard”
• Màn hình “Dashboard” hiển thị thông tin về người dùng
• Hiển thị: o Phần trăm chặng đường đã học o Phần trăm đúng bài luyện tập o Số bài viết đã đăng thành công o Số bài viết đang chờ duyệt o Số ngày điểm danh trên tổng số ngày tham gia o Cấp độ hiện tại o Số câu từ đã lưu trong mục lưu trữ
Màn hình “Test Level Up Description”
Hình 4.25 Màn hình “Test Level Up Description”
• Màn hình “Test Level Up Description” hiển thị mô tả bài kiểm tra vượt cấp
• Các xử lý: o Nút “Start”: chuyển sang màn hình “Test Level Up Detail” o Có thể quay lại trang chủ bằng nút quay lại trên trình duyệt web
Màn hình “Test Level Up Detail”
Hình 4.26 Màn hình “Test Level Up Detail”
• Màn hình “Test Level Up Detail” hiển thị danh sách các câu trong bài kiểm tra vượt cấp
• Các xử lý: o Nút “->”: đi tới câu tiếp theo o Nút “”: tiếp tục di chuyển nhân vật
▪ Nếu trả lời sai: mất đi 1 mạng (1 trái tim màu xanh)
▪ Nếu trả lời đúng: được cộng điểm vào “point”
Hình 4.32 Màn hình “Game Finish”
• Màn hình “Game Finish” hiển thị giao diện kết thúc trò chơi
• Hiển thị: o Ngôi sao: tối đa 5 ngôi sao, tính toán dựa trên số điểm đạt được
• Các xử lý: o Nút “ngôi nhà”: chuyển sang trang “Game Result” o Có thể quay lại mô tả bằng nút quay lại trên trình duyệt web
Màn hình “Game Result”
Hình 4.33 Màn hình “Game Result”
• Màn hình “Game Result” hiển thị kết quả tổng quát của lượt chơi
• Các xử lý: o Nút “LEADERBOARD”: chuyển sang trang “Leaderboard” o Nút “ngôi nhà”: chuyển về trang chủ
Màn hình “Dashboard” – Admin
Hình 4.34 Màn hình “Dashboard” – Admin
• Màn hình “Dashboard” hiển thị thông tin về Website
• Hiển thị: o Số chặng đã hoàn thành theo ngày, tháng, năm o Số lần điểm danh theo ngày, tháng, năm o Tỉ lệ cấp độ hiện tại của người học o Số bài viết đã đăng thành công o Số bài viết đang chờ duyệt o Số bài viết hôm nay o Số người học mới hôm nay
Màn hình “Manage Study” – Admin
Hình 4.35 Màn hình “Manage Study” – Admin
• Màn hình “Manage Study” hiển thị danh sách các lộ trình học và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá
• Các xử lý: o Nút “VIEW”: chuyển sang trang “Manage Study Detail” o Nút “ADD”: mở hộp thoại “Add new Path” o Nút “DELETE”: mở hộp thoại “Delete Path”
Hộp thoại “Add new Path” – Admin
Hình 4.36 Màn hình “Add new Path” – Admin
• Hộp thoại “Add new Path” cho phép thêm lộ trình học mới
• Các xử lý: o Input “Name”: nhập tên lộ trình học o Input “Topic”: nhập chủ đề tương ứng với chủ đề trong mục tài liệu o Input “Level”: nhập cấp độ tương ứng với cấp độ của người học o Nút “SUBMIT”: xác nhận tạo mới, đóng hộp thoại o Nút “CANCEL”: xác nhận huỷ tạo mới, đóng hộp thoại
Màn hình “Manage Study Detail” – Admin
Hình 4.37 Màn hình “Manage Study Detail” – Admin
• Màn hình “Manage Study Detail” hiển thị danh sách các chặng trong lộ trình học và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá từng chặng
• Các xử lý: o Input “Name”: nhập tên mới nếu muốn cập nhật o Input “Topic”: nhập chủ đề mới nếu muốn cập nhật o Input “Level”: nhập cấp độ mới nếu muốn cập nhật o Nút “UPDATE”: cập nhật thông tin mới cho lộ trình học o Nút “VIEW”: hiển thị danh sách các câu/ từ trong chặng tương ứng o Nút “ADD ROUTE”: mở hộp thoại “Add new Route” o Nút “DELETE”: mở hộp thoại “Delete Route”
Hộp thoại “Add new Route” – Admin
Hình 4.38 Màn hình “Add new Route” – Admin
• Hộp thoại “Add new Route” cho phép thêm chặng mới trong lộ trình học
• Các xử lý: o Input “Name”: nhập tên lộ trình học o Input “Image”: thêm hình ảnh minh hoạ o Nút “SUBMIT”: xác nhận tạo mới, đóng hộp thoại o Nút “CANCEL”: xác nhận huỷ tạo mới, đóng hộp thoại
Màn hình “Manage Document” – Admin
Hình 4.39 Màn hình “Manage Document” – Admin
• Màn hình “Manage Document” hiển thị danh sách các tài liệu và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá
• Các xử lý: o Nút “VIEW”: chuyển sang trang “Manage Document Detail” o Nút “CREATE NEW”: mở hộp thoại “Add new Topic”
Hộp thoại “Add new Topic” – Admin
Hình 4.40 Màn hình “Add new Topic” – Admin
• Hộp thoại “Add new Topic” cho phép thêm chủ đề mới trong mục tài liệu
• Các xử lý: o Input “Topic”: nhập chủ đề o Input “Description”: nhập mô tả ngắn gọn cho chủ đề o Nút “SUBMIT”: xác nhận tạo mới, đóng hộp thoại o Nút “CANCEL”: xác nhận huỷ tạo mới, đóng hộp thoại
Màn hình “Manage Document Detail” – Admin
Hình 4.41 Màn hình “Manage Document Detail” – Admin
• Màn hình “Manage Document Detail” hiển thị danh sách các câu/ từ vựng trong chủ đề và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá
• Các xử lý: o Input “Topic”: nhập chủ đề mới nếu muốn cập nhật o Input “Description”: nhập mô tả mới nếu muốn cập nhật o Nút “SAVE”: cập nhật thông tin mới cho chủ đề o Nút “VIEW”: mở hộp thoại “Edit Document” o Nút “CREATE NEW”: mở hộp thoại “Add new Document” o Nút “DELETE”: mở hộp thoại “Delete Document”
Hộp thoại “Add new Document” – Admin
Hình 4.42 Màn hình “Add new Document” – Admin
• Hộp thoại “Add new Document” cho phép thêm thẻ tài liệu mới
• Các xử lý: o Input “Display”: nhập từ/ câu bằng tiếng Anh o Input “Meaning”: nhập nghĩa của từ/ câu bằng tiếng Việt o Input “Image”: chọn hình ảnh minh hoạ o Input “Audio”: chọn âm thanh phát âm từ/ câu o Nút “SUBMIT”: xác nhận tạo mới, đóng hộp thoại o Nút “CANCEL”: xác nhận huỷ tạo mới, đóng hộp thoại
Màn hình “Manage Exercise” – Admin
Hình 4.43 Màn hình “Manage Exercise” – Admin
• Màn hình “Manage Exercise” hiển thị danh sách các bài luyện tập và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá
• Các xử lý: o Nút “VIEW”: chuyển sang trang “Manage Exercise Detail” o Nút “CREATE NEW”: mở hộp thoại “Add new Exercise”
Hộp thoại “Add new Exercise” – Admin
Hình 4.44 Màn hình “Add new Exercise” – Admin
• Hộp thoại “Add new Exercise” cho phép thêm bài luyện tập mới
• Các xử lý: o Input “Topic”: nhập chủ đề tương ứng với chủ đề trong mục tài liệu o Input “Description”: nhập mô tả tương ứng với bài luyện tập o Input “Level”: chọn cấp độ trong ba cấp độ: beginner, intermediate, advanced o Nút “SUBMIT”: xác nhận tạo mới, đóng hộp thoại o Nút “CANCEL”: xác nhận huỷ tạo mới, đóng hộp thoại
Màn hình “Manage Exercise Detail” – Admin
Hình 4.45 Màn hình “Manage Exercise Detail” – Admin
• Màn hình “Manage Exercise Detail” hiển thị danh sách các câu hỏi và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá
• Các xử lý: o Input “Topic”: nhập chủ đề mới nếu muốn cập nhật o Input “Description”: nhập mô tả mới nếu muốn cập nhật o Nút “SAVE”: cập nhật thông tin mới cho bài luyện tập o Nút “VIEW”: mở hộp thoại “Edit Question” o Nút “ADD QUESTION”: mở hộp thoại “Add new Question” o Nút “DELETE”: mở hộp thoại “Delete Question”
Hộp thoại “Add new Answer” – Admin
Hình 4.46 Hộp thoại “Add new Answer” - Admin
• Hộp thoại “Add new Answer” cho phép thêm câu hỏi mới
• Các xử lý: o Checkbox trong bảng: chọn 1 câu/từ để tạo câu hỏi o Input “Option 1”, “Option 2”, “Option 3”, “Option 4”: nhập các lựa chọn cho câu hỏi o Input “Answer”: nhập đáp án đúng cho câu hỏi o Input “Type”: chọn loại câu hỏi o Nút “SUBMIT”: xác nhận tạo mới, đóng hộp thoại o Nút “CANCEL”: xác nhận huỷ tạo mới, đóng hộp thoại
Màn hình “Manage Forum” – Admin
Hình 4.47 Màn hình “Manage Forum” – Admin
• Màn hình “Manage Forum” hiển thị danh sách các bài viết đã đăng và chờ duyệt
• Các xử lý: o Thẻ bài viết: nhấn vào chuyển sang trang “Post Detail”
Màn hình “Manage Test” – Admin
Hình 4.48 Màn hình “Manage Test” – Admin
• Màn hình “Manage Test” hiển thị danh sách các câu kiểm tra vượt cấp và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá
• Các xử lý: o Nút “VIEW”: mở hộp thoại “View Question” o Nút “CREATE NEW”: mở hộp thoại “Add new Test” o Nút “DELETE”: mở hộp thoại “Delete Question”
Màn hình “Manage Onboarding” – Admin
Hình 4.49 Màn hình “Manage Onboarding” – Admin
• Màn hình “Manage Onboarding” hiển thị danh sách các câu kiểm tra đầu vào và cho phép quản trị viên thực hiện các thao tác thêm, sửa, xoá
• Các xử lý: o Nút “VIEW”: mở hộp thoại “View Question” o Nút “CREATE NEW”: mở hộp thoại “Add new Onboarding Test” o Nút “DELETE”: mở hộp thoại “Delete Question”
Hộp thoại “Add new Onboarding Test” – Admin
Hình 4.50 Màn hình “Add new Onboarding Test” – Admin
• Hộp thoại “Add new Question” cho phép thêm câu hỏi mới
• Các xử lý: o Input “Label”: nhập tiêu đề bằng tiếng Anh o Input “VN Label”: nhập tiêu đề bằng tiếng Việt o Input “Question”: nhập câu hỏi o Input “Paraph”: nhập đoạn văn nếu có o Input “Audio”: chọn file âm thanh nếu có
89 o Input “Option 1”, “Option 2”, “Option 3”, “Option 4”: nhập các lựa chọn cho câu hỏi o Input “Answer”: nhập đáp án đúng cho câu hỏi o Input “Type”: chọn loại câu hỏi o Input “Level”: chọn cấp độ trong 3 cấp độ: beginner, intermediate, advanced o Nút “SUBMIT”: xác nhận tạo mới, đóng hộp thoại o Nút “CANCEL”: xác nhận huỷ tạo mới, đóng hộp thoại.
Màn hình “Manage Users” – Admin
Hình 4.51 Màn hình “Manage Users” – Admin
• Màn hình “Manage User” hiển thị danh sách các người học và cho phép quản trị viên thực hiện các thao tác cập nhật thông tin cá nhân, khoá tài khoản
• Các xử lý: o Nút “EDIT”: mở hộp thoại “Edit User Information” o Nút “DEACTIVE ACCOUNT”: cho phép khoá tài khoản người dùng
Một số màn hình ở chế độ nền tối
Màu sắc được thay đổi để phù hợp với chế độ nền tối hơn, sử dụng các tông màu tối như đen, xám đậm cho nền và tông màu sáng như xám trắng, trắng, xanh sáng cho chữ
Hình 4.52 Màn hình “Personal Information” ở chế độ “dark”
Hình 4.53 Hộp thoại “Cập nhật thông tin cá nhân” ở chế độ “dark”
Hình 4.54 Màn hình “Docmunet” ở chế độ “dark”
Hình 4.55 Màn hình “Saved” ở chế độ “dark”
