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

GIỚI THIỆU ĐỀ TÀI

Lí do chọn đề tài

Trong bối cảnh toàn cầu hóa hiện nay, tiếng Anh trở thành một yếu tố thiết yếu cho mọi người, giúp họ theo kịp sự phát triển của thế giới Tại Việt Nam, xu hướng học tiếng Anh đang gia tăng mạnh mẽ, không phân biệt độ tuổi Tuy nhiên, nhiều người đi làm gặp khó khăn trong việc tham gia các lớp học do thiếu thời gian và phương pháp học không hiệu quả, dẫn đến tâm trạng chán nản và có thể từ bỏ việc học.

Website hỗ trợ học tiếng Anh cho người đi làm được thiết kế dành cho những người bận rộn, giúp họ phát triển bản thân một cách hiệu quả Nền tảng tập trung vào hai kỹ năng nghe và đọc, cung cấp kiến thức phong phú và chính xác qua các chủ đề dễ tiếp thu Người học sẽ nhớ lâu hơn nhờ vào các bài luyện tập sinh động sau mỗi bài học lý thuyết Tiến trình học tập và kết quả được lưu trữ trong tài khoản cá nhân, cùng với diễn đàn để người dùng có thể hỏi đáp và chia sẻ kiến thức Với khả năng học mọi lúc, mọi nơi, website này đáp ứng nhu cầu cải thiện tiếng Anh cho những người bận rộn.

Mục đích nghiên cứu

Người dùng sẽ được cung cấp danh sách bài học được tổ chức theo chủ đề, giúp tiếp thu kiến thức một cách nhanh chóng, đầy đủ và chính xác Hệ thống sở hữu kho dữ liệu phong phú liên quan đến nhiều chủ đề trong đời sống và công việc.

Việc kết nối người dùng với cộng đồng thông qua các bài luyện tập tiếng Anh và diễn đàn sẽ tạo ra hứng thú học tập hơn, từ đó mang lại động lực lớn cho người học.

• Phát triển quy mô nhỏ cộng đồng những người có đam mê tiếng Anh

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

Phạm vi ứng dụng

• Nền tảng hỗ trợ: Triển khai trên Website

Hệ thống học tập cung cấp nhiều chức năng hữu ích cho người dùng, bao gồm gợi ý lộ trình học dựa trên mong muốn và tình trạng cá nhân, hiển thị kiến thức qua flash card theo chủ đề và cấp độ, cùng với khả năng theo dõi tiến trình học tập Người dùng có thể lưu trữ bài học và từ vựng vào mục riêng, ôn tập qua các trò chơi tích lũy điểm thưởng và chia sẻ trên mạng xã hội Hệ thống cũng cho phép người dùng tạo bài viết trên diễn đàn để tương tác và hỏi đáp Đối với quản trị viên, họ có thể quản lý lộ trình học, kho tài liệu, bài luyện tập, diễn đàn và tài khoản người dùng, đảm bảo nội dung chất lượng và theo dõi thành tích của người học.

14 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 có thể tự chọn cấp độ học tập hoặc sử dụng chức năng gợi ý lộ trình học, theo dõi tiến trình học của mình, lưu trữ kiến thức quan trọng, luyện tập qua các trò chơi và tham gia chia sẻ cũng như giải đáp thắc mắc trên 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, diễn đàn và người dùng, xem báo cáo phân tích

CÔNG NGHỆ VÀ PHƯƠNG PHÁP THỰC HIỆN

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à ngôn ngữ lập trình mở rộng của Javascript, được thiết kế để cải thiện kiểm tra lỗi và quản lý mã nguồn trong phát triển phần mềm Việc áp dụng Typescript không chỉ tăng cường tính ổn định và độ tin cậy của ứng dụng mà còn giúp quá trình phát triển và bảo trì trở nên dễ dàng và linh hoạt hơn.

TSX (Typescript Extension) là phần mở rộng của Typescript, giúp phát triển giao diện người dùng trong React bằng cách cho phép viết mã HTML tương tự như trong React, đồng thời tích hợp 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 HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu dùng để tạo nội dung và cấu trúc cho các trang web, cho phép xây dựng các thành phần như định dạng văn bản, hình ảnh, video, bảng, biểu đồ và liên kết tới các trang web khác.

CSS (Cascading Style Sheets) là ngôn ngữ định dạng kiểu dùng để tạo kiểu cho tài liệu HTML hoặc XML, cho phép kiểm soát cách hiển thị của các phần tử trên trang web như kích thước, màu sắc, khoảng cách, vị trí và hình dạng SCSS (Sassy CSS), phát triển từ cú pháp của CSS, cung cấp nhiều tính năng và khả năng tùy biến hơn, cho phép sử dụng biến, hàm, lồng quy tắc CSS và thực thi điều kiện, giúp tạo mã CSS dễ đọc, tái sử dụng và bảo trì hơn.

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 là thư viện JavaScript mã nguồn mở do Facebook phát triển, chuyên dùng để tạo ra giao diện người dùng động cho ứng dụng web Thư viện này cho phép xây dựng các UI phức tạp thông qua việc sử dụng các thành phần độc lập và tái sử dụng, mang lại hiệu quả cao trong quá trình phát triển.

React hỗ trợ tích hợp với nhiều thư viện và framework khác như Redux, React Router và Axios, giúp phát triển các ứng dụng web đa năng và đầy đủ tính năng.

Redux là một thư viện JavaScript mã nguồn mở giúp quản lý trạng thái của ứng dụng web một cách hiệu quả, giảm thiểu lỗi và tăng tính ổn định Nó có khả năng tích hợp với các thư viện và framework như React, Angular và Vue, tạo ra các ứng dụng web đầy đủ tính năng Khi kết hợp React và Redux, người dùng có thể xây dựng giao diện động với React trong khi sử dụng Redux để quản lý trạng thái, từ đó dễ dàng phát triển ứng dụng web và nâng cao tính ổn định.

Firebase là công nghệ của Google hỗ trợ phát triển ứng dụng web và di động, cung cấp công cụ lưu trữ dữ liệu, xác thực người dùng, phân tích và thông báo đẩy Nó cũng có các thư viện cho nhiều ngôn ngữ lập trình như JavaScript, Android, iOS, Unity và C++, giúp dễ dàng tích hợp các tính năng của Firebase vào ứng dụng.

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

Github là nền tảng mã nguồn mở miễn phí, giúp các nhà phát triển lưu trữ, quản lý và chia sẻ mã nguồn với một cộng đồng lớn Nền tảng này nổi bật với các tính năng như tự động tích hợp và tự động triển khai, trở thành công cụ phổ biến nhất trong lĩnh vực phát triển phần mềm hiện nay.

Figma là một công cụ thiết kế đồ họa dựa trên đám mây, 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), và trải nghiệm người dùng (UX) trực tuyến Ứng dụng này sở hữu một cộng đồng người dùng lớn mạnh, hỗ trợ và chia sẻ ý tưởng sáng tạo.

Visual Studio Code là một công cụ biên tập mã nguồn mạnh mẽ, cung cấp nhiều tính năng như debug, IntelliSense và linter, giúp người dùng tăng tốc độ phát triển và giảm thiểu lỗi Công cụ này hỗ trợ nhiều ngôn ngữ lập trình và tích hợp sẵn quản lý mã nguồn Git, Docker, cùng với khả năng mở rộng thông qua các extension Cộng đồng người dùng của Visual Studio Code rất lớn và năng động.

• 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 đượ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:

Khảo sát bằng form là một phương pháp hiệu quả để thu thập ý kiến về giao diện người dùng Các ứng dụng như Doulingo và Viblo có thể được sử dụng để khảo sát các chức năng hiện có và những chức năng cần thiết cho ứng dụng Qua đó, chúng ta có thể đưa ra các yêu cầu chức năng và phi chức năng nhằm cải thiện trải nghiệm người dù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.

Kết quả mong đợi

• Hoàn thiện các chức năng cơ bản của Website

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Khảo sát

3.1.1 Khảo sát giao diện người dùng qua form:

Link form khảo sát giao diện người dùng: https://docs.google.com/forms/d/1l8XNSk7Pxucv8m7OhZbYHNnM-

Theo khảo sát người dùng về màu sắc chủ đề, hầu hết mọi người ưa chuộng cách phối màu đơn giản nhằm kích thích sự học tập Do đó, ứng dụng của em sẽ sử dụng tông màu vàng và cam.

Theo khảo sát người dùng, phong cách website dễ thương được nhiều người lựa chọn hơn Vì vậy, giao diện mà tôi thiết kế sẽ mang nét dễ thương nhưng vẫn giữ sự đơn giản, giúp người dùng dễ dàng sử dụng.

Hình 3.3 Khảo sát người dùng về phông chữ

Trong một cuộc khảo sát với 16 người tham gia, có đến 62.5% người chọn kiểu chữ đơn giản, cho thấy sự ưa chuộng này phù hợp với đa số người dùng có độ tuổi và giới tính khác nhau Do đó, tôi quyết định lựa chọn phông chữ đơn giản và dễ nhìn là Quicksand (Google Font).

Theo khảo sát người dùng, 62.5% người tham gia chọn vị trí thanh điều hướng nằm ở phía trên Do đó, website sẽ được thiết kế theo lựa chọn này Tuy nhiên, để phù hợp với bản chất của một website trên màn hình điện thoại, thanh điều hướng sẽ được đặt bên trái.

3.1.2 Khảo sát các chức năng qua các Website liên quan:

Duolingo - Website học tiếng Anh [1]:

• Chọn mục tiêu: thời gian học một ngày là bao nhiêu phút

• Chọn hướng đi: đánh giá trình độ hiện tại

• Học theo lộ trình: một lộ trình sẽ bao gồm nhiều bài học

• Luyện tập: chơi trò chơi

Trò chơi bao gồm các hoạt động như chọn từ tiếng Anh kèm hình ảnh minh họa, chọn nghĩa từ tiếng Anh với hình ảnh, và nghe tiếng Anh để lựa chọn nghĩa với hai tốc độ: bình thường và chậm Ngoài ra, người chơi có thể nối câu từ danh sách từ tiếng Anh và nghĩa, cũng như nối câu từ danh sách từ tiếng Việt và câu tiếng Anh Trò chơi cũng cho phép xem lại kết quả với bảng điểm và đánh dấu tick cho mục tiêu trong ngày.

• Hồ sơ cá nhân: lưu trữ thành tích cá nhân: được tổng hợp sau các bài luyện tập, bài học

• Tạo bài viết, xem bài viết trước khi tạo

• Xếp hạng nhà sáng tạo nội dung (bạc, vàng, kim cương)

• Đặt câu hỏi, cho phép người khác trả lời câu hỏi, thả cảm xúc, hiển thị số like trên câu trả lời đó

• Những bài viết nổi bật, những hỏi đáp nổi bật

• Theo dõi tác giả cụ thể

• Hiển thị mục lục cho mỗi bài viết

3 Quản lý thông tin cá nhân

4 Luyện tập qua trò chơi

5 Quản lý kết quả luyện tập

6 Tương tác trên diễn đà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.

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.5 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 Lấy gợi ý lộ trình học Học viên điền trình độ hiện tại để hệ thống gợi ý lộ trình phù hợp

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

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

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

Bảng 3.3 Use-case “Đăng nhập”

Use case Name Đăng nhập

Description Cho phép người dùng có thể truy cập vào hệ thống bằng tài khoản đã đăng ký trước đó

Actor Học viên, Quản trị viên

Trigger Người dùng chọn nút đăng nhập

Pre-conditions 1 Người dùng đã đăng ký tài khoản trước đó

2 Hệ thống đang ở trạng thái chưa đăng nhập

Post-conditions Người dùng đăng nhập thành công

Basic Flow 1 Người dùng nhập email và mật khẩu

2 Người dùng chọn nút “Đăng nhập”

3 Hệ thống kiểm tra người dùng đã có tài khoản hay chưa, kết quả trả về tài khoản hợp lệ

4 Hệ thống cho phép người dùng truy cập vào hệ thống Alternative Flow Không có

Exception Flow 3 a Tài khoản chưa tồn tại, hệ thống hiển thị thông báo: i Người dùng nhấn nút “Đăng kí”

=> Bắt đầu UC-2 ii Người dùng nhấn nút “Nhập lại”

=> Hiển thị màn hình đăng nhập, bắt đầu bước 1 trong luồng chính b Nhập sai mật khẩu, hệ thống hiển thị thông báo: i Người dùng nhấn nút “Nhập lại”

=> Hiển thị màn hình đăng nhập, bắt đầu bước 1 trong luồng chính

Bảng 3.4 Use-case “Đăng kí”

Use case Name Đăng kí

Description Cho phép người dùng đăng ký tài khoản bằng Email

Actor Học viên, Quản trị viên

Trigger Người dùng chọn nút “Đăng ký”

Pre-conditions 1 Hệ thống đang ở trạng thái chưa đăng nhập

Post-conditions Người dùng đăng ký tài khoản thành công, tài khoản được lưu vào hệ thống

Basic Flow 1 Người dùng nhập email và mật khẩu và xác nhận mật khẩu

2 Người dùng chọn nút “Đăng kí”

3 Hệ thống kiểm tra người dùng đã có tài khoản hay chưa, kết quả trả về tài khoản chưa tồn tại

4 Hệ thống cho phép người dùng đăng kí tài khoản mới và lưu trữ

Exception Flow 3 a Tài khoản đã tồn tại, hệ thống hiển thị thông báo: i Người dùng nhấn nút “Đăng nhập”

3.2.3 Use-case “Quên mật khẩu”

Bảng 3.5 Use-case “Quên mật khẩu”

Use case Name Quên mật khẩu

Description Cho phép người dùng lấy lại mật khẩu tài khoản của mình, tài khoản đã được đăng ký thành công

Trigger Người dùng chọn nút “Quên mật khẩu”

Pre-conditions 1 Hệ thống đang ở trạng thái chưa đăng nhập

2 Tài khoản đã được đăng ký thành công

Post-conditions Người dùng thiết lập mật khẩu mới thành công

Basic Flow 1 Người dùng nhập email dùng để đăng ký tài khoản

2 Người dùng chọn nút “Gửi xác nhận qua email”

3 Hệ thống gửi email xác nhận về hòm thư của người dùng

4 Người dùng truy cập vào hòm thư và xác thực người dùng

5 Hệ thống xác thực thành công, cho phép người dùng thiết lập lại mật khẩu

6 Người dùng nhập mật khẩu mới và nhấn nút “Xác nhận”

7 Hệ thống cập nhật thay đổi vào cơ sở dữ liệu

Exception Flow 3 a Hệ thống gửi email xác nhận không thành công: i Người dùng nhấn nút “Quay lại”

=> Chuyển đến màn hình đăng nhập ii Người dùng nhấn nút “Gửi lại email xác nhận”

=> Hiển thị màn hình đăng ký, bắt đầu bước 3 trong luồng chính

Thời gian hiệu lực 2 phút đối với email xác thực

3.2.4 Use-case “Cập nhật thông tin cá nhân”

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

Use case Name Cập nhật thông tin cá nhân

Description Cho phép người dùng cập nhật những thông tin cá nhân như tên, tuổi, ảnh đại diện,

Trigger Người dùng chọn nút “Cập nhật” trong trang Thông tin cá nhân Pre-conditions 1 Người dùng đã đăng nhập vào hệ thống

Post-conditions Thông tin người dùng được cập nhật trong hệ thống

Basic Flow 1 Người dùng thay đổi những thông tin muốn cập nhật

2 Người dùng chọn nút “Xác nhận”

3 Hệ thống kiểm tra thông tin người dùng nhập có hợp lệ hay không, nếu có thì tiếp tục bước 4

4 Hệ thống lưu thông tin mới cập nhật vào hệ thống

Exception Flow 3 a Thông tin không hợp lệ, hệ thống hiển thị thông báo: i Người dùng điền lại thông tin bị không hợp lệ, nhấn nút

=> Bắt đầu tiếp bước 3 ii Người dùng nhấn nút “Hủy”

Trang Thông tin cá nhân hiển thị thông báo lỗi cập nhật khi người dùng nhấn nút “Cập nhật” Hệ thống sẽ quay lại trang Thông tin cá nhân và lưu giữ những thay đổi của người dùng, mặc dù chúng chưa được cập nhật vào cơ sở dữ liệu.

=> Hiển thị trang Thông tin cá nhân, hủy những thay đổi

3.2.5 Use-case “Đổi mật khẩu”

Bảng 3.7 Use-case “Đổi mật khẩu”

Use case Name Đổi mật khẩu

Description Cho phép người dùng cập nhật mật khẩu

Trigger Người dùng chọn nút “Đổi mật khẩu” trong trang Thông tin cá nhân Pre-conditions 1 Người dùng đã đăng nhập vào hệ thống

Post-conditions Mật khẩu mới được cập nhật trong hệ thống

Basic Flow 1 Người dùng điền các thông tin: mật khẩu cũ, mật khẩu mới, xác nhận mật khẩu mới

2 Người dùng chọn nút “Xác nhận”

3 Hệ thống kiểm tra mật khẩu cũ dùng nhập có khớp với dữ liệu gốc hay không, nếu có thì tiếp tục bước 4

4 Hệ thống lưu mật khẩu mới cập nhật vào hệ thống

Exception Flow 3 a Thông tin không hợp lệ, hệ thống hiển thị thông báo: i Người dùng điền lại thông tin bị không hợp lệ, nhấn nút

4 Hệ thống bị lỗi cập nhật, hệ thống hiển thị thông báo và quay lại trang Thông tin cá nhân, vẫn đang lưu những thay đổi của người dùng, nhưng chưa được cập nhật vào cơ sở dữ liệu i Người dùng nhấn nút “Cập nhật”

3.2.6 Use-case “Lấy gợi ý lộ trình học”

Bảng 3.8 Use-case “Lấy gợi ý lộ trình học”

Use case Name Lấy gợi ý lộ trình học

Description Lấy gợi ý lộ trình học cho người dùng dựa trên trình độ 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 đưa ra lộ trình học phù hợp với Học viê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 “Đi tiếp”

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 “Chấp nhận”

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

Alternative Flow 4 a Học viên chọn “Chọn một cấp độ khác” 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 chủ”

3.2.7 Use-case “Học theo lộ trình”

Bảng 3.9 Use-case “Học theo lộ trình”

Use case Name Học theo lộ trình

Description Người dùng chọn chặng hiện tại trên lộ trình đã được lên trước đó

Trigger Học viên nhấn vào chặng hiện tại trong trang “Trang chủ”

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

2 Người dùng đã hoàn thành những chặng trước (nếu có)

Post-conditions Hệ thống chuyển sang trang bài học

Basic Flow 5 Học viên vào trang Trang chủ

6 Học viên nhấn vào chặng hiện tại (đang sáng màu)

7 Hệ thống chuyển sang trang bài học với nội dung được tải lên dựa trên cơ sở dữ liệu tương ứng với chặng được chọn

Exception Flow 4 a Hệ thống lỗi tải dữ liệu, hiển thị thông báo, quay lại “Trang chủ”

Bảng 3.10 Use-case “Luyện tập”

Use case Name Luyện tập

Description Học viên luyện tập kiến thức đã học thông qua trò chơi theo chủ đề

Trigger Học viên nhấn chọn một bài luyện tập

Post-conditions Hiển thị kết quả làm bài luyện tập và lưu vào cơ sở dữ liệu

Basic Flow 1 Học viên vào trang “Luyện tập”

2 Hệ thống hiển thị danh sách các bài luyện tập đang có sẵn

3 Học viên nhấn chọn một bài luyện tập muốn làm

4 Hệ thống chuyển sang trang làm bài

5 Học viên nhấn vào nút “Bắt đầu” để làm bài

6 Hệ thống hiển thị từng câu hỏi trên từng trang, học viên trả lời các câu hỏi và nhấn “Tiếp tục”

7 Hệ thống hiển thị kết quả làm bài

Exception Flow 6 a Học viên thoát ra trước khi hoàn thành bài luyện tập

=> Quay lại trang “Luyện tập”, không lưu kết quả làm bài

3.2.9 Use-case “Đăng bài viết”

Bảng 3.11 Use-case “Đăng bài viết”

Use case Name Đăng bài viết

Description Học viên đăng bài viết trên diễn đàn

Trigger Học viên chọn nút “Tạo mới” trong trang “Diễn đàn”

Post-conditions Bài viết được đăng thành công

Basic Flow 1 Học viên vào trang “Diễn đàn”

2 Học viên nhấn vào nút “Tạo mới”

3 Hệ thống chuyển sang trang “Tạo bài viết mới”

4 Học viên điền các thông tin: tiêu đề, tóm tắt, nội dung, hình ảnh minh họa và nhấn nút “Đăng”

5 Hệ thống kiểm tra các thông tin có hợp lệ hay không, nếu đã hợp lệ, chuyển sang bước 6

6 Hệ thống đăng tải bài viết thành công, lưu bài viết vào cơ sở dữ liệu

Trong trường hợp người dùng thoát ra trước khi nhấn nút “Đăng”, hệ thống sẽ hiển thị thông báo yêu cầu xác nhận việc thoát Nếu người dùng xác nhận muốn thoát, họ sẽ được chuyển trở lại trang “Diễn đàn”.

=> Ngược lại, ở lại trang hiện tại, tiếp tục bước 4

5 a Hệ thống kiểm tra có thông tin không hợp lệ, hiển thị thông báo và quay lại trang “Tạo bài viết mới” với dữ liệu được giữ nguyên

3.2.10 Use-case “Yêu thích bài viết”

Bảng 3.12 Use-case “Yêu thích bài viết”

Use case Name Yêu thích bài viết

Description Người dùng muốn yêu thích một bài viết trên diễn đàn

Trigger Người dùng nhấn vào biểu tưởng “yêu thích” trong bài viết

Post-conditions Số lượng yêu thích của bài viết được cập nhật

Basic Flow 1 Người dùng nhấn vào xem một bài viết của người khác trên diễn đàn

2 Người dùng nhấn biểu tượng “yêu thích”

3 Hệ thống kiểm tra xem người dùng có phải là tác giả bài viết hay không, nếu không thì tiếp tục bước 4

4 Hệ thống kiểm tra người dùng đã yêu thích bài viết đó chưa, nếu chưa tiếp tục bước 5

5 Hệ thống cập nhật tăng thêm 1 lượt yêu thích cho bài viết Alternative Flow Không có

Exception Flow 3 a Hệ thống kiểm tra thấy người dùng là tác giả của bài viết:

4 a Hệ thống kiểm tra thấy người dùng đã yêu thích bài viết đó:

=> Hệ thống cập nhật giảm đi 1 lượt yêu thích cho bài viết

Bảng 3.13 Use-case “Bình luận”

Use case Name Bình luận

Description Người dùng muốn bình luận dưới một bài viết trên diễn đàn Priority Có thể có

Trigger Người dùng nhấn vào biểu tưởng “yêu thích” trong bài viết Pre-conditions 1 Người dùng đã đăng nhập vào hệ thống

Post-conditions Số lượng yêu thích của bài viết được cập nhật

Basic Flow 1 Người dùng nhấn vào một bài viết muốn bình luận

2 Hệ thống hiển thị một ô nhập bình luận

3 Người dùng điền nội dung vào ô nhập và nhấn nút “Đăng”

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

5 Hệ thống cập nhật bình luận mới cho bài viết, lưu vào cơ sở dữ liệu

Exception Flow 3 a Người dùng nhấn nút “Hủy”:

4 a Hệ thống kiểm tra thấy nội dung không hợp lệ:

=> Hiển thị thông báo, tiếp tục bước 2

3.2.12 Use-case “Thêm lộ trình học”

Bảng 3.14 Use-case “Thêm lộ trình học”

Use case Name Thêm lộ trình học

Description Quản trị viên muốn thêm một lộ trình học mới dựa trên các chủ đề và “cấp độ” của Học viên

Trigger Quản trị viên muốn thêm một lộ trình học mới vào hệ thống Pre-conditions 1 Người dùng đã đăng nhập vào hệ thống

Post-conditions Lộ trình mới được cập nhật vào cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn một “Thêm mới” trong trang “Quản lý lộ trình học”

2 Hệ thống hiển thị một hộp thoại “Tạo lộ trình học mới”

3 Quản trị viên điền các thông tin: tên, chủ đề, cấp độ và nhấn nút “Xác nhận”

4 Hệ thống thêm một lộ trình mới (trống) vào cơ sở dữ liệu

=> Kết thúc luồng b Hệ thống kiểm tra thấy thông tin không hợp lệ:

=> Hiển thị thông báo và tiếp tục bước 3

3.2.13 Use-case “Cập nhật lộ trình học”

Bảng 3.15 Use-case “Cập nhật lộ trình học”

Use case Name Cập nhât lộ trình học

Description Quản trị viên muốn cập nhật một lộ trình học đã có

Trigger Quản trị viên muốn cập nhật một lộ trình học trong hệ thống

2 Lộ trình học đã tồn tại

Post-conditions Thông tin mới của lộ trình được cập nhật vào cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn một lộ trình đã có trong trang “Quản lý lộ trình học” và nhấn “Xem chi tiết”

2 Hệ thống chuyển sang trang “Chi tiết lộ trình học”, hiển thị các thông tin của lộ trình học và danh sách các chặng trong lộ trình

3 Quản trị viên thay đổi các thông tin: tên, tiêu đề, cấp độ và nhấn nút “Cập nhật”

4 Hệ thống cập nhật các thông tin mới vào hệ thống

Quản trị viên bắt đầu bằng cách nhấn vào nút “Thêm chặng”, sau đó hệ thống sẽ hiển thị hộp thoại “Tạo chặng mới” Tiếp theo, quản trị viên nhập thông tin cần thiết, bao gồm tên chặng, và nhấn nút “Xác nhận” Cuối cùng, hệ thống sẽ tạo ra một chặng mới trong lộ trình hiện tại.

2 Quản trị viên chọn một chặng trong danh sách các chặng, và nhấn nút “Xem chặng”: a Hệ thống hiển thị danh sách các thẻ trong một chặng b Quản trị viên chọn một thẻ và nhấn vào xem, cập nhật hoặc xóa thẻ

3 Quản trị viên chọn một chặng trong danh sách các chặng, và nhấn nút “Xóa chặng”: a Hệ thống hiển thi hộp thoại xác nhận chắc chắn xóa hay không, nếu có thì thực hiện xóa trên cơ sở dữ liệu

3.2.14 Use-case “Xóa lộ trình học”

Bảng 3.16 Use-case “Xoá lộ trình học”

Use case Name Xóa lộ trình học

Description Quản trị viên muốn xóa một lộ trình học đã có

Trigger Quản trị viên muốn xóa một lộ trình học đã có khỏi hệ thống

2 Lộ trình học đã tồn tại

Post-conditions Bài luyện tập được xóa khỏi cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn một lộ trình đã có trong trang “Quản lý lộ trình học” và nhấn “Xóa lộ trình”

2 Hệ thống hiển thị một hộp thoại xác nhận có xóa hay không, nếu người dùng nhấn “Xác nhận”, thì tiếp tục bước 3

3 Hệ thống xóa lộ trình học khỏi cơ sở dữ liệu

=> Kết thúc luồng b Hệ thống không tìm thấy lộ trình học:

3.2.15 Use-case “Thêm tài liệu”

Bảng 3.17 Use-case “Thêm tài liệu”

Use case Name Thêm tài liệu

Description Quản trị viên muốn thêm một tài liệu theo loại tài liệu: từ vựng, câu, đoạn văn,

Trigger Quản trị viên muốn thêm một tài liệu mới vào hệ thống

Post-conditions Tài liệu mới được cập nhật vào cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn tab chứa loại tài liệu muốn thêm mới

2 Quản trị viên chọn một chủ đề trong trang “Quản lý tài liệu” và nhấn nút “Xem chi tiết”

3 Hệ thống chuyển sang trang “Chi tiết tài liệu” với danh sách các thẻ hiện có trong chủ đề này

4 Quản trị viên nhấn nút “Tạo mới”

5 Hệ thống hiển thị một hộp thoại “Tạo mới”

6 Quản trị viên điền các thông tin: tiếng Anh, dịch, hình ảnh, âm thanh và nhấn nút “Xác nhận”

7 Hệ thống thêm một thẻ tài liệu mới vào cơ sở dữ liệu

3.2.16 Use-case “Cập nhật tài liệu”

Bảng 3.18 Use-case “Cập nhật tài liệu”

Use case Name Cập nhật tài liệu

Description Quản trị viên muốn cập nhật một tài liệu theo loại tài liệu: từ vựng, câu, đoạn văn,

Trigger Quản trị viên muốn thêm một tài liệu mới vào hệ thống

2 Thẻ tài liệu đã tồn tại trong hệ thống

Post-conditions Tài liệu được cập nhật thay đổi vào cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn tab chứa loại tài liệu muốn thay đổi

4 Quản trị chọn một thẻ tài liệu và nhấn nút “Cập nhật”

5 Hệ thống hiển thị một hộp thoại “Cập nhật”

6 Quản trị viên thay đổi các thông tin: tiếng Anh, dịch, hình ảnh, âm thanh và nhấn nút “Xác nhận”

7 Hệ thống cập nhật một thẻ tài liệu vào cơ sở dữ liệu

=> Kết thúc luồng, không lưu thay đổi b Hệ thống kiểm tra thấy thông tin không hợp lệ:

3.2.17 Use-case “Xóa tài liệu”

Bảng 3.19 Use-case “Xoá tài liệu”

Use case Name Xóa tài liệu

Description Quản trị viên muốn xóa một tài liệu theo loại tài liệu: từ vựng, câu, đoạn văn,

Trigger Quản trị viên muốn xóa một tài liệu mới khỏi hệ thống

2 Thẻ tài liệu đã tồn tại trong hệ thống

Post-conditions Tài liệu được xóa khỏi cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn tab chứa loại tài liệu muốn xóa

4 Quản trị chọn một thẻ tài liệu và nhấn nút “Xóa”

5 Hệ thống hiển thị một hộp thoại “Xóa”

6 Quản trị viên nhấn nút “Xác nhận”

7 Hệ thống xóa một thẻ tài liệu khỏi cơ sở dữ liệu

=> Kết thúc luồng, không lưu thay đổi b Hệ thống kiểm tra thấy thông tin không hợp lệ:

3.2.18 Use-case “Thêm bài luyện tập”

Bảng 3.20 Use-case “Thêm bài luyện tập”

Use case Name Thêm bài luyện tập

Description Quản trị viên muốn thêm một bài luyện tập mới dựa trên các chủ đề

Trigger Quản trị viên muốn thêm một bài luyện tập mới vào hệ thống Pre-conditions 1 Người dùng đã đăng nhập vào hệ thống

Post-conditions Bài luyện tập mới được cập nhật vào cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn một “Thêm mới” trong trang “Quản lý bài luyện tập”

2 Hệ thống hiển thị một hộp thoại “Tạo bài luyện tập mới”

3 Quản trị viên điền các thông tin: tên, chủ đề và nhấn nút

4 Hệ thống thêm một lộ trình mới (trống) vào cơ sở dữ liệu

3.2.19 Use-case “Cập nhật bài luyện tập”

Bảng 3.21 Use-case “Cập nhật bài luyện tập”

Use case Name Cập nhât bài luyện tập

Description Quản trị viên muốn cập nhật một bài luyện tập đã có

Trigger Quản trị viên muốn cập nhật một bài luyện tập vào hệ thống

2 Bài luyện tập đã tồn tại

Sau khi quản trị viên chọn một bài luyện tập có sẵn trong trang “Quản lý lộ bài luyện tập” và nhấn “Xem chi tiết”, thông tin mới của bài luyện tập sẽ được cập nhật vào cơ sở dữ liệu.

2 Hệ thống chuyển sang trang “Chi tiết bài luyện tập”, hiển thị các thông tin của bài luyện tập và danh sách các câu trong bài

3 Quản trị viên thay đổi các thông tin: tên, tiêu đề và nhấn nút

4 Hệ thống cập nhật các thông tin mới vào hệ thống

Quản trị viên có thể thêm câu hỏi mới bằng cách nhấn vào nút “Thêm câu” Hệ thống sẽ hiển thị hộp thoại “Tạo câu hỏi mới”, trong đó có danh sách từ vựng và câu có sẵn trong “Tài liệu” Sau đó, quản trị viên cần điền thông tin như loại câu hỏi, các sự lựa chọn và đáp án, rồi nhấn nút “Xác nhận” Cuối cùng, hệ thống sẽ tạo ra câu hỏi mới trong bài luyện tập hiện tại.

4 Quản trị viên chọn một câu hỏi trong danh sách các câu hỏi, và nhấn nút “Cập nhật câu”: a Hệ thống hiển thị thông tin của câu hỏi b Quản trị viên thay đổi các thông tin mong muốn và nhấn nút

“Xác nhận” c Hệ thống cập nhật thay đổi vào cơ sở dữ liệu

5 Quản trị viên chọn một câu hỏi trong danh sách các câu hỏi, và nhấn nút “Xóa”: a Hệ thống hiển thi hộp thoại xác nhận chắc chắn xóa hay không, nếu có thì thực hiện xóa trên cơ sở dữ liệu

3.2.20 Use-case “Xóa bài luyện tập”

Bảng 3.22 Use-case “Xoá bài luyện tập”

Use case Name Xóa bài luyện tập

Description Quản trị viên muốn xóa một bài luyện tập đã có

Trigger Quản trị viên muốn xóa một bài luyện tập đã có khỏi hệ thống

2 Bài luyện tập đã tồn tại

Post-conditions Bài luyện tập bị xóa khỏi cơ sở dữ liệu

Basic Flow 1 Quản trị viên chọn một bài luyện tập đã có trong trang “Quản lý bài luyện tập” và nhấn “Xóa”

2 Hệ thống hiển thị một hộp thoại xác nhận có xóa hay không, nếu người dùng nhấn “Xác nhận”, thì tiếp tục bước 3

3 Hệ thống xóa bài luyện tập khỏi cơ sở dữ liệu

=> Kết thúc luồng b Hệ thống không tìm thấy lộ trình học:

Thiết kế

Website sử dụng tông màu vàng để kích thích sự thích thú trong học tập Công cụ được sử dụng để thiết kế giao diện người dùng: Figma

Link figma: https://www.figma.com/file/9HCpTvjKhS7Bqp7OxX9XLC/Untitled?node- id=1%3A2&t=jyCdgXpM8tHf2w6o-1

Dưới đây là bản thiết kế giao diện của Website:

Hình 3.6 Hình ảnh giao diện hoàn chỉnh

Hình 3.7 Hình ảnh Wireframe giao diện

Firebase là một giải pháp lưu trữ và truy xuất dữ liệu hiệu quả, tổ chức dữ liệu theo kiểu phi quan hệ để nâng cao hiệu suất và tốc độ truy xuất.

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

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

Website này sử dụng kiến trúc tương tự như các ứng dụng được phát triển với công nghệ React Dưới đây là sơ đồ kiến trúc của ứng dụng.

Hình 3.9 Hình ảnh kiến trúc Website

CÀI ĐẶT

Màn hình “Đăng nhập”

Hình 4.1 Hình ảnh màn hình “Đăng nhập”

Bảng 4.1 Thiết kế xử lý màn hình “Đăng nhập”

STT Tên thành phần Loại Hành động

1 Menu Thanh điều hướng Điều hướng sang các trang khác

2 Thanh điều hướng xác thực người dùng

Dropdown Điều hướng sang các trang xác thực thông tin: “Đăng kí”, “Đăng nhập”,

3 Ô nhập Email Input/Email Nhập Email để đăng nhập

4 Ô nhập Mật khẩu Input/Password Nhập mật khẩu để đăng nhập

5 Quên mật khẩu Link Điều hướng đến trang “Quên mật khẩu”

6 Nút “Đăng nhập” Button Điều hướng đến “Trang chủ”

Màn hình “Đăng kí”

Hình 4.2 Hình ảnh màn hình “Đăng kí”

Bảng 4.2 Thiết kế xử lý màn hình “Đăng kí”

Dropdown Điều hướng sang c trang xác thực thông tin: “Đăng kí”, “Đăng nhập”,

3 Ô nhập Email Input/Email Nhập Email để đăng kí

4 Ô nhập Mật khẩu Input/Password Nhập mật khẩu để đăng kí

Input/Password Nhập lại mật khẩu để xác nhận mật khẩu đã nhập

6 Nút “Đăng kí” Button Điều hướng đến trang “Đăng nhập”

Màn hình “Quên mật khẩu”

Hình 4.3 Hình ảnh màn hình “Quên mật khẩu”

Bảng 4.3 Thiết kế xử lý màn hình “Quên mật khẩu”

3 Ô nhập Email Input/Email Nhập Email để lấy lại mật khẩu qua

4 Nút “Lấy lại mật khẩu”

Button Xác nhận muốn lấy lại mật khẩu

Màn hình “Onboarding”

Hình 4.4 Hình ảnh màn hình “Onboarding”

Bảng 4.4 Thiết kế xử lý màn hình “Onboarding”

3 Phần câu hỏi Hiển thị câu hỏi và các lựa chọn

4 Sự lựa chọn Radio Button Chọn đáp án là câu trả lời của mình

5 Nút “Hoàn thành” Link Điều hướng đến trang “Gợi ý lộ trình học”

Màn hình “Gợi ý lộ trình học”

Hình 4.5 Hình ảnh màn hình “Gợi ý lộ trình học”

Bảng 4.5 Thiết kế xử lý màn hình “Gợi ý lộ trình học”

Radio Button Chọn lộ trình dựa vào kết quả kiểm tra đầu vào

4 Muốn chọn cấp độ khác

Radio Button Muốn chọn một cấp độ khác

5 Lựa chọn cấp độ khác

Dropdown Chọn một cấp độ khác, hệ thống cung cấp lộ trình tương ứng

6 Nút “Hoàn thành” Link Điều hướng đến “Trang chủ”

Màn hình “Trang chủ”

Hình 4.6 Hình ảnh màn hình “Trang chủ”

Bảng 4.6 Thiết kế xử lý màn hình “Trang chủ”

2 Ảnh đại diện người dùng

Link Điều hướng sang trang “Thông tin cá nhân”

3 Điểm danh Button Điểm danh truy cập ngày hiện tại

4 Chặng học Link Chuyển sang trang “Mô tả bài học”.

Màn hình “Mô tả bài học”

Hình 4.7 Hình ảnh màn hình “Mô tả bài học”

Bảng 4.7 Thiết kế xử lý màn hình “Mô tả bài học”

3 Nút “Bắt đầu” Button Chuyển sang trang “Học theo lộ trình”

Màn hình “Học theo lộ trình”

Hình 4.8 Hình ảnh màn hình “Học theo lộ trình”

Bảng 4.8 Thiết kế xử lý màn hình “Học theo lộ trình”

3 Nghe Audio Nghe câu/từ bằng tiếng Anh

4 Số câu Text Hiển thị số câu/từ hiện tại trên tổng số câu/từ

5 Quay lại Link Quay lại câu/từ trước đó

6 Tiếp theo Link Chuyển sang câu/từ tiếp theo

Màn hình “Tổng kết bài học”

Hình 4.9 Hình ảnh màn hình “Tổng kết bài học”

Bảng 4.9 Thiết kế xử lý màn hình “Tổng kết bài học”

3 Nút “Xem lại” Button Chuyển đến trang “Mô tả bài học”

4 Nút “Luyện tập” Link Điều hướng sang trang “Luyện tập”

5 Nút “Trang chủ” Link Điều hướng về trang “Trang chủ”

Màn hình “Luyện tập”

Hình 4.10 Hình ảnh màn hình “Luyện tập”

Bảng 4.10 Bảng 4.11 Thiết kế xử lý màn hình “Luyện tập”

3 Bài luyện tập có sẵn

Link Điều hướng sang trang “Làm bài luyện tập”

4 Bài luyện tập đã làm

Link Điều hướng sang trang “Kết quả bài luyện tập”

Màn hình “Mô tả bài luyện tập”

Hình 4.11 Hình ảnh màn hình “Mô tả bài luyện tập”

Bảng 4.12 Thiết kế xử lý màn hình “Mô tả bài luyện tập”

3 Nút “Bắt đầu” Button Chuyển sang trang “Làm bài luyện tập”

Màn hình “Làm bài luyện tập”

Hình 4.12 Hình ảnh màn hình “Làm bài luyện tập”

Bảng 4.13 Thiết kế xử lý màn hình “Làm bài luyện tập”

3 Câu hỏi Text Hiển thị câu hỏi

4 Các sự lựa chọn Radio

Chọn một đáp án đúng nhất

5 Nút “Tiếp theo” Button Hiển thị kết quả đúng hay sai

Nhấn thêm một lần nữa, chuyển sang câu hỏi tiếp theo

Màn hình “Kết quả bài luyện tập”

Hình 4.13 Hình ảnh màn hình “Kết quả bài luyện tập”

Bảng 4.14 Thiết kế xử lý màn hình “Kết quả bài luyện tập”

3 Điểm số Text Hiển thị điểm số đạt được trên tổng điểm của bài luyện tập

4 Bảng kết quả Table Hiển thị các câu đúng sai

5 Nút “Làm lại” Button Chuyển đến trang “Mô tả bài luyện tập”

6 Nút “Trang chủ” Link Điều hướng về trang “Trang chủ”

7 Nút “Xem chi tiết kết quả”

Link Chuyển đến trang “Chi tiết kết quả”

Màn hình “Chi tiết kết quả bài luyện tập”

Hình 4.14 Hình ảnh màn hình “Chi tiết kết quả bài luyện tập”

Bảng 4.15 Thiết kế xử lý màn hình “Chi tiết kết quả bài luyện tập”

3 Danh sách kết quả Text Hiển thị kết quả từng câu và đáp án của câu và đáp án bạn đã lựa chọn

Màn hình “Tài liệu”

Hình 4.15 Hình ảnh màn hình “Tài liệu”

Bảng 4.16 Thiết kế xử lý màn hình “Tài liệu”

3 Danh mục Button Chuyển đổi giữa các dạng tài liệu

4 Tài liệu Link Điều hướng sang trang “Chi tiết tài liệu”

Màn hình “Chi tiết tài liệu”

Hình 4.16 Hình ảnh màn hình “Chi tiết tài liệu”

Bảng 4.17 Thiết kế xử lý màn hình “Chi tiết tài liệu”

3 Danh sách các thẻ tài liệu

Text Hiển thị danh sách các tài liệu câu/từ

Màn hình “Diễn đàn”

Hình 4.17 Hình ảnh màn hình “Diễn đàn”

Bảng 4.18 Thiết kế xử lý màn hình “Diễn đàn”

3 Danh mục Button Chuyển đổi giữa các loại “Bài viết”,

4 Tạo mới Link Điều hướng đến trang “Tạo bài viết mới”

5 Bài viết Link Điều hướng đến trang “Chi tiết bài viết”

6 Nút “Yêu thích” Button Yêu thích hoặc bỏ yêu thích bài viết

Màn hình “Tạo bài viết mới”

Hình 4.18 Hình ảnh màn hình “Tạo bài viết mới”

Bảng 4.19 Thiết kế xử lý màn hình “Tạo bài viết mới”

3 Ô nhập Tiêu đề Input/Text Nhập Tiêu đề bài vết

4 Ô nhập Từ khóa Input/Text Nhập Từ khóa cho bài viết.

5 Ô nhập Tóm tắt Input/Text Nhập Tóm tắt bài viết

6 Ô nhập Nội dung Input/TextArea Nhập Nội dung cho bài viết

7 Nút “Đăng” Button/Link Chuyển sang trang “Diễn đàn”

Màn hình “Chi tiết bài viết”

Hình 4.19 Hình ảnh màn hình “Chi tiết bài viết”

Bảng 4.20 Thiết kế xử lý màn hình “Chi tiết bài viết”

3 Tiêu đề Text Hiển thị tiêu đề bài viết

4 Ngày đăng Text Hiển thị ngày đăng bài viết

5 Nút “Yêu thích” Button Yêu thích hoặc bỏ yêu thích bài viết.

6 Ô nhập Bình luận Input/Text Nhập bình luận cho bài viết

7 Nút “Đăng” Button Đăng tải bình luận

8 Bình luận Hiện thị danh sách các bình luận trong bài viết

Màn hình “Thông tin cá nhân”

Hình 4.20 Hình ảnh màn hình “Thông tin cá nhân”

Bảng 4.21 Thiết kế xử lý màn hình “Thông tin cá nhân”

3 Tên người dùng Text Hiển thị tên người dùng hiện tại đang đăng nhập

4 Ảnh đại diện Button Mở hộp thoại “Đổi ảnh đại diện”

5 Cấp độ hiện tại Text/Image Hiển thị cấp độ hiện tại của người dùng

Number/Image Hiển thị các thành tích đạt được: “Tỉ lệ ngày điểm danh”, “Số chặng đã học”, “Tỉ lệ đúng luyện tập”

7 Thông tin cá nhân Input/Text (chỉ đọc)

Hiển thị các thông tin cá nhân:

“Tên”, “Email”, “Ngày sinh”, “Giới tính”, “Tiêu sử”,…

8 Nút “Cập nhật thông tin cá nhân”

Button Mở hộp thoại “Cập nhật thông tin cá nhân”

9 Bài viết của tôi Link Điều hướng đến trang “Bài viết của tôi”

10 Nút “Đăng xuất” Button/Link Đăng xuất, điều hướng đến trang

Màn hình hộp thoại “Cập nhật thông tin cá nhân”

Hình 4.21 Hình ảnh màn hình “Cập nhật thông tin cá nhân”

Bảng 4.22 Thiết kế xử lý màn hình “Đổi mật khẩu”

1 Ô nhập Email Input/Email Nhập Email muốn thay đổi.

2 Ô nhập Tên Input/Text Nhập Tên muốn thay đổi

3 Ô nhập Giới tính Input/Text Nhập Giới tính muốn thay đổi

4 Ô nhập Ngày sinh Input/Date Nhập Ngày sinh muốn thay đổi

5 Ô nhập Tiểu sử Input/Text Nhập Tiểu sử muốn thay đổi

6 Nút “Đóng” Button Đóng hộp thoại

7 Nút “Xác nhận” Button Xác nhận thay đổi, Đóng hộp thoại

Bảng 4.23 Thiết kế xử lý màn hình “Cập nhật thông tin cá nhân”

Màn hình hộp thoại “Đổi mật khẩu”

Input/Password Nhập mật khẩu cũ để xác thực

Input/Password Nhập mật khẩu mới

3 Ô nhập xác nhận mật khẩu mới

Input/Password Nhập lại mật khẩu mới.

4 Nút “Đóng” Button Đóng hộp thoại.

5 Nút “Xác nhận” Button Xác nhận thay đổi, Đóng hộp thoại.

Màn hình “Quản lý lộ trình học”

Hình 4.22 Hình ảnh màn hình “Quản lý lộ trình học”

Bảng 4.24 Thiết kế xử lý màn hình “Quản lý lộ trình học”

2 Thanh điều hướng quản trị viên

Dropdown Có thể thao tác “Đăng xuất”

Button/Link Chuyển sang trang “Xem chi tiết”

4 Nút “Tạo mới” Button Mở hộp thoại “Thêm lộ trình học mới”

5 Nút “Xóa” Button Mở hộp thoại “Xóa lộ trình học”

Table Hiển thị danh sách các “Lộ trình học”

7 Chọn một lộ trình Checkbox Chọn một lộ trình học để thực hiện thao tác “Xem chi tiết” hoặc “Xóa”.

Màn hình hộp thoại “Thêm lộ trình học mới”

Hình 4.23 Hình ảnh màn hình “Thêm lộ trình học mới”

Bảng 4.25 Thiết kế xử lý màn hình “Thêm lộ trình học mới”

1 Ô nhập Tên Input/Text Nhập Tên của lộ trình học.

2 Ô nhập Chủ đề Input/Text Nhập Chủ đề của lộ trình học

3 Ô nhập Cấp độ Input/Text Nhập Cấp độ của lộ trình học

Màn hình “Chi tiết lộ trình học”

Hình 4.24 Hình ảnh màn hình “Chi tiết lộ trình học”

Bảng 4.26 Thiết kế xử lý màn hình “Chi tiết lộ trình học”

3 Ô nhập Tên Input/Text Nhập Tênmới nếu muốn.

4 Ô nhập Chủ đề Input/Text Nhập Chủ đề mới nếu muốn

5 Ô nhập Cấp độ Input/Text Nhập Cấp độ mới nếu muốn

6 Nút “Cập nhật” Button Cập nhật các thông tin “Tiêu đề”,

“Cấp độ” của lộ trình học

7 Nút “Xem chi tiết” chặng

Button Tải danh sách bài thẻ từ/câu trong chặng

Button Mở hộp thoại “Thêm chặng mới”

9 Nút “Cập nhật” Button Mở hộp thoại “Cập nhật chặng”

10 Nút “Xóa” chặng Button Mở hộp thoại “Xóa chặng”

Table Hiển thị danh sách các “Chặng” trong lộ trình hiện tại

12 Chọn một chặng Checkbox Chọn một lộ chặng để thực hiện thao tác “Xem chi tiết” hoặc “Xóa”

13 Nút “Tạo mới” câu/từ

Button Mở hộp thoại “Thêm câu mới”.

14 Nút “Xóa” câu/từ Button Mở hộp thoại “Xóa câu/từ”.

Table Hiển thị danh sách các “Câu/từ” trong chặng hiện tại.

Checkbox Chọn một câu/từ để thực hiện thao tác “Xem chi tiết” hoặc “Xóa”.

Màn hình hộp thoại “Thêm chặng mới”

Hình 4.25 Hình ảnh màn hình “Thêm chặng mới”

Bảng 4.27 Thiết kế xử lý màn hình “Thêm chặng mới”

1 Ô nhập Tên Input/Text Nhập Tên của chặng học

2 Ô nhập Hình ảnh Input/File Chọn hình ảnh của chặng học.

Màn hình hộp thoại “Thêm câu mới”

Hình 4.26 Hình ảnh màn hình “Thêm câu mới”

Bảng 4.28 Thiết kế xử lý màn hình “Thêm câu mới”

1 Danh sách các thẻ câu/từ

Table Hiển thị danh sách các câu/từ với chủ đề tương ứng trong “Tài liệu”

2 Chọn thẻ Checkbox Chọn một thẻ câu/từ để thêm vào chặng học

Màn hình “Quản lý tài liệu”

Hình 4.27 Hình ảnh màn hình “Quản lý tài liệu”

Bảng 4.29 Thiết kế xử lý màn hình “Quản lý tài liệu”

Button Chọn loại tài liệu muốn thực hiện các thao tác: xem, cập nhật, xóa

5 Nút “Tạo mới” Button Mở hộp thoại “Thêm tài liệu mới”

Table Hiển thị danh sách các “Tài liệu” theo chủ đề và loại tài liệu

7 Chọn một tài liệu Checkbox Chọn một tài liệu để thực hiện thao tác “Xem chi tiết” hoặc “Xóa”

Màn hình hộp thoại “Thêm tài liệu mới”

Hình 4.28 Hình ảnh màn hình “Thêm tài liệu mới”

Bảng 4.30 Thiết kế xử lý màn hình “Thêm tài liệu mới”

1 Ô nhập Chủ đề Input/Text Nhập Chủ đề của tài liệu

2 Ô nhập Mô tả Input/Text Nhập mô tả cho chủ đề

Màn hình “Chi tiết tài liệu”

Hình 4.29 Hình ảnh màn hình “Chi tiết tài liệu”

Bảng 4.31 Thiết kế xử lý màn hình “Chi tiết tài liệu”

4 Ô nhập Mô tả Input/Text Nhập Mô tả mới nếu muốn

5 Nút “Cập nhật” Button Cập nhật các thông tin “Chủ đề”,

“Mô tả” của lộ trình học

6 Nút “Xem chi tiết” câu/từ

Button Mở hội thoại “Cập nhật câu/từ”

Button Mở hộp thoại “Thêm thẻ mới”

8 Nút “Xóa” thẻ câu/từ

Button Mở hộp thoại “Xóa câu/từ”

Table Hiển thị danh sách các “Câu/từ” trong chủ đề và loại tài liệu đã chọn xem chi tiết

10 Chọn một thẻ câu/từ

Checkbox Chọn một thẻ câu/từ để thực hiện thao tác “Xem chi tiết” hoặc “Xóa”.

Màn hình hộp thoại “Thêm thẻ mới”

Hình 4.30 Hình ảnh màn hình “Thêm thẻ mới”

Bảng 4.32 Thiết kế xử lý màn hình “Thêm thẻ mới”

1 Ô nhập câu/từ tiếng Anh

Input/Text Nhập Câu/từ tiếng Anh

2 Ô nhập Nghĩa Input/Text Nhập Nghĩa của câu/từ tiếng Anh ở trên

3 Ô nhập Hình ảnh Input/File Chọn File hình ảnh cho câu/từ (nếu có)

4 Ô nhập Âm thanh Input/File Chọn File âm thanh cho câu/từ tiếng

Màn hình “Quản lý bài luyện tập”

Hình 4.31 Hình ảnh màn hình “Quản lý bài luyện tập”

Bảng 4.33 Thiết kế xử lý màn hình “Quản lý bài luyện tập”

4 Nút “Tạo mới” Button Mở hộp thoại “Thêm bài luyện tập mới”

Table Hiển thị danh sách các “Bài luyện tập” theo chủ đề

6 Chọn một bài luyện tập

Checkbox Chọn một bài luyện tập để thực hiện thao tác “Xem chi tiết” hoặc “Xóa”.

Màn hình hộp thoại “Thêm bài luyện tập mới”

Hình 4.32 Hình ảnh màn hình “Thêm bài luyện tập mới”

Bảng 4.34 Thiết kế xử lý màn hình “Thêm bài luyện tập mới”

1 Ô nhập Chủ đề Input/Text Nhập Chủ đề của bài luyện tập.

2 Ô nhập Mô tả Input/Text Nhập mô tả cho chủ đề

Màn hình “Chi tiết bài luyện tập”

Hình 4.33 Hình ảnh màn hình “Chi tiết bài luyện tập”

Bảng 4.35 Thiết kế xử lý màn hình “Chi tiết bài luyện tập”

4 Ô nhập Mô tả Input/Text Nhập Mô tả mới nếu muốn

5 Nút “Cập nhật” Button Cập nhật các thông tin “Chủ đề”,

“Mô tả” của bài luyện tập

6 Nút “Xoá” Button Xoá Bài luyện tập hiện tại, Chuyển về trang “Quản lý bài luyện tập”

7 Nút “Xem chi tiết” câu hỏi

Button Mở hội thoại “Cập nhật câu hỏi”

8 Nút “Tạo mới” câu hỏi

Button Mở hộp thoại “Thêm câu hỏi mới”

Button Mở hộp thoại “Xóa câu hỏi”

Table Hiển thị danh sách các “Câu hỏi” trong chủ đề đã chọn xem chi tiết

11 Chọn một câu hỏi Checkbox Chọn một câu hỏi để thực hiện thao tác “Xem chi tiết” hoặc “Xóa”

Màn hình hộp thoại “Thêm câu hỏi mới”

Hình 4.34 Hình ảnh màn hình “Thêm câu hỏi mới”

Bảng 4.36 Thiết kế xử lý màn hình “Thêm câu hỏi mới”

1 Danh sách các câu/từ

Table Danh sách các câu/từ có chủ đề tương ứng với bài luyện tập trong

Input/Text Nhập Câu trả lời 1

Input/Text Nhập Câu trả lời 2.

6 Ô nhập Đáp án Input/Text Nhập đán án đúng

Input/Dropdown Chọn loại câu hỏi

Tiêu đề	Đồ án xây dựng website hỗ trợ học tiếng anh cho người đi làm
Tác giả	Nguyễn Khánh Huyền
Người hướng dẫn	TS. Đỗ Thị Thanh Tuyền
Trường học	Trường Đại Học Công Nghệ Thông Tin - Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Khoa học máy tính và Công nghệ Thông tin
Thể loại	đồ án
Năm xuất bản	2023
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	121
Dung lượng	2,83 MB