Đồ Án Phát Triển Website Hỗ Trợ Học Tiếng Anh Cho Người Đi Làm

Đồ án kỹ thuật nghiên cứu xây dựng website học tiếng anh cho người đi làm, thiết kế chi tiết, tính toán kỹ thuật theo tiêu chuẩn, đánh giá tính khả thi dự án.

• Tác giả: Nguyễn Khánh Huyền
• Người hướng dẫn: ThS. Trần Thị Hồng Yến
• Trường học: Đại học Quốc gia TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Phát Triển Website Hỗ Trợ Học Tiếng Anh Cho Người Đi Làm
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: TP. Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• 1. CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
• 1.1. Lí do chọn đề tài
• 1.2. Mục đích nghiên cứu
• 1.3. Phạm vi ứng dụng
• 1.4. Đối tượng sử dụng
• 2. CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
• 2.1. Các công nghệ, thư viện, ngôn ngữ, công cụ được sử dụng
• 2.2. Phương pháp phát triển
• 2.3. Kết quả mong đợi
• 3. CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG
• 3.1. Use-case “Kiểm tra đầu vào”
• 3.2. Use-case “Thêm vào mục lưu trữ”
• 3.3. Use-case “Chơi trò chơi vui”
• 3.4. Use-case “Làm bài kiểm tra vượt cấp”
• 3.5. Use-case “Xem xếp hạng thành tích”
• 3.6. Use-case “Cập nhật thông tin người dùng”
• 3.7. Use-case “Khoá tài khoản”
• 3.8. Use-case “Duyệt bài viết”
• 3.9. Use-case “Ghim bình luận”
• 3.10. Use-case “Xem báo cáo và thống kê”
• 3.11. Thiết kế giao diện
• 3.12. Thiết kế dữ liệu
• 3.13. Thiết kế kiến trúc
• 4. CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG
• 4.1. Màn hình “Login”
• 4.2. Màn hình “Register”
• 4.3. Màn hình “Onboarding”
• 4.4. Màn hình “Onboarding Result”
• 4.5. Màn hình “Study Description”
• 4.6. Màn hình “Study Detail”
• 4.7. Màn hình “Study Finish”
• 4.8. Màn hình “Document”
• 4.9. Màn hình “Document Detail”
• 4.10. Màn hình “Exercise”
• 4.11. Màn hình “Exercise Description”
• 4.12. Màn hình “Exercise Detail”
• 4.13. Màn hình “Exercise Finish”
• 4.14. Màn hình “Forum”
• 4.15. Màn hình “Add new post”
• 4.16. Màn hình “Your posts”
• 4.17. Màn hình “Post Detail”
• 4.18. Màn hình “Saved”
• 4.19. Màn hình “Personal Information”
• 4.20. Hộp thoại “Update Avatar”
• 4.21. Hộp thoại “Update Personal Information”
• 4.22. Màn hình “Dashboard”
• 4.23. Màn hình “Test Level Up Description”
• 4.24. Màn hình “Test Level Up Detail”
• 4.25. Màn hình “Test Level Up Finish”
• 4.26. Màn hình “Game”
• 4.27. Màn hình “Game Description”
• 4.28. Màn hình “Game Detail”
• 4.29. Màn hình “Game Result”
• 4.30. Màn hình “Dashboard” – Admin
• 4.31. Màn hình “Manage Study” – Admin
• 4.32. Hộp thoại “Add new Path” – Admin
• 4.33. Màn hình “Manage Study Detail” – Admin
• 4.34. Hộp thoại “Add new Route” – Admin
• 4.35. Màn hình “Manage Document” – Admin
• 4.36. Hộp thoại “Add new Topic” – Admin
• 4.37. Màn hình “Manage Document Detail” – Admin
• 4.38. Hộp thoại “Add new Document” – Admin
• 4.39. Màn hình “Manage Exercise” – Admin
• 4.40. Hộp thoại “Add new Exercise” – Admin
• 4.41. Màn hình “Manage Exercise Detail” – Admin
• 4.42. Hộp thoại “Add new Answer” – Admin
• 4.43. Màn hình “Manage Forum” – Admin
• 4.44. Màn hình “Manage Test” – Admin
• 4.45. Màn hình “Manage Onboarding” – Admin
• 4.46. Hộp thoại “Add new Onboarding Test” – Admin
• 4.47. Màn hình “Manage Users” – Admin
• 4.48. Một số màn hình ở chế độ nền tối
• 5. CHƯƠNG 5: KẾT LUẬN
• 5.1. Ưu điểm/Nhược điểm
• 5.2. Nhược điểm
• 5.3. Hướng phát triển
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Giới thiệu về Website Hỗ Trợ Học Tiếng Anh Cho Người Đi Làm

Trong bối cảnh toàn cầu hóa, việc học tiếng Anh trở nên cần thiết hơn bao giờ hết, đặc biệt là đối với những người đi làm. Website Hỗ trợ học tiếng Anh cho người đi làm được phát triển nhằm đáp ứng nhu cầu học tập linh hoạt và hiệu quả. Với các tính năng đa dạng, website này không chỉ giúp người dùng cải thiện kỹ năng ngôn ngữ mà còn tạo ra môi trường học tập thú vị và tương tác.

1.1. Tại sao cần học tiếng Anh cho người đi làm

Học tiếng Anh giúp người đi làm nâng cao khả năng giao tiếp, mở rộng cơ hội nghề nghiệp và cải thiện kỹ năng chuyên môn. Nhu cầu học tiếng Anh ngày càng tăng, đặc biệt trong môi trường làm việc quốc tế.

1.2. Mục tiêu của Website Hỗ trợ học tiếng Anh

Website nhằm cung cấp một nền tảng học tập trực tuyến, giúp người dùng dễ dàng tiếp cận tài liệu học tập, thực hành và tương tác với cộng đồng học viên khác.

II. Những Thách Thức Khi Học Tiếng Anh Cho Người Đi Làm

Người đi làm thường gặp nhiều khó khăn trong việc học tiếng Anh do thời gian hạn chế và áp lực công việc. Việc tìm kiếm phương pháp học hiệu quả cũng là một thách thức lớn. Những vấn đề này cần được giải quyết để người học có thể tiếp cận tiếng Anh một cách dễ dàng hơn.

2.1. Thiếu thời gian cho việc học

Nhiều người đi làm không có đủ thời gian để tham gia các lớp học truyền thống, dẫn đến việc học tiếng Anh bị gián đoạn hoặc không hiệu quả.

2.2. Khó khăn trong việc tìm kiếm tài liệu phù hợp

Người học thường gặp khó khăn trong việc tìm kiếm tài liệu học tập phù hợp với trình độ và nhu cầu của bản thân, điều này làm giảm động lực học tập.

III. Phương Pháp Học Tiếng Anh Hiệu Quả Qua Website

Website Hỗ trợ học tiếng Anh cho người đi làm cung cấp nhiều phương pháp học tập hiệu quả, từ việc học qua video đến các bài kiểm tra tương tác. Những phương pháp này giúp người dùng dễ dàng tiếp cận và cải thiện kỹ năng ngôn ngữ của mình.

3.1. Học tiếng Anh qua video

Học qua video giúp người dùng tiếp cận với ngữ điệu và cách phát âm tự nhiên, đồng thời tạo ra sự hứng thú trong quá trình học.

3.2. Bài kiểm tra và đánh giá trình độ

Website cung cấp các bài kiểm tra đầu vào và vượt cấp, giúp người dùng xác định trình độ hiện tại và lộ trình học tập phù hợp.

IV. Ứng Dụng Thực Tiễn Của Website Hỗ Trợ Học Tiếng Anh

Website không chỉ là một công cụ học tập mà còn là một cộng đồng kết nối những người học tiếng Anh. Các tính năng như diễn đàn và bảng xếp hạng giúp người dùng tương tác và học hỏi lẫn nhau.

4.1. Diễn đàn kết nối người học

Diễn đàn cho phép người dùng chia sẻ kinh nghiệm, hỏi đáp và hỗ trợ lẫn nhau trong quá trình học tập, tạo ra một môi trường học tập tích cực.

4.2. Bảng xếp hạng và trò chơi

Các trò chơi và bảng xếp hạng không chỉ tạo ra sự cạnh tranh mà còn khuyến khích người dùng tham gia học tập thường xuyên hơn.

V. Kết Luận Về Tương Lai Của Website Hỗ Trợ Học Tiếng Anh

Website Hỗ trợ học tiếng Anh cho người đi làm hứa hẹn sẽ tiếp tục phát triển với nhiều tính năng mới, đáp ứng nhu cầu học tập ngày càng cao của người dùng. Tương lai của việc học tiếng Anh sẽ trở nên dễ dàng và thú vị hơn nhờ vào công nghệ.

5.1. Hướng phát triển trong tương lai

Website sẽ tiếp tục cập nhật các tính năng mới, cải thiện giao diện và mở rộng kho tài liệu học tập để phục vụ người dùng tốt hơn.

5.2. Tác động của công nghệ đến việc học tiếng Anh

Công nghệ sẽ tiếp tục đóng vai trò quan trọng trong việc cải thiện trải nghiệm học tập, giúp người dùng dễ dàng tiếp cận kiến thức và thực hành tiếng Anh.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. 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. 13 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.

14 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. 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. 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. 15 • 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. 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: 16 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. 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. 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. 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ế.