Xây dựng web hỏi đáp cho người học ngoại ngữ

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN NGỌC HƯNG VÕ QUỐC HUY KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEB HỎI ĐÁP CHO NGƯỜI HỌC NGOẠI NGỮ Building Q&A website for language learners KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN NGỌC HƯNG – 16520489 VÕ QUỐC HUY – 16520538 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEB HỎI ĐÁP CHO NGƯỜI HỌC NGOẠI NGỮ Building Q&A website for language learners KỸ SƯ/ CỬ NHÂN NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS HỒNG VĂN HÀ TP HỒ CHÍ MINH, 2021 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin ………………………………………… – Chủ tịch ………………………………………… – Thư ký ………………………………………… – Ủy viên ………………………………………… – Ủy viên ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày tháng năm NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: Xây dựng web hỏi đáp cho người học ngoại ngữ Nhóm sinh viên thực hiện: Cán hướng dẫn: Trần Ngọc Hưng 16520489 ThS Hoàng Văn Hà Võ Quốc Huy 16520538 Đánh giá Khóa luận: Về báo cáo: Số trang: Số chương: Số bảng số liệu: Số hình vẽ: Số tài liệu tham khảo: Sản phẩm: Một số nhận xét hình thức báo cáo: Về nội dung nghiên cứu: Về chương trình ứng dụng: Về thái độ làm việc sinh viên: Đánh giá chung: Điểm sinh viên: Trần Ngọc Hưng: ……… /10 Võ Quốc Huy: ……… /10 Người nhận xét (Ký ghi rõ họ tên) Hoàng Văn Hà ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày tháng năm NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN) Tên khóa luận: Xây dựng web hỏi đáp cho người học ngoại ngữ Nhóm sinh viên thực hiện: Trần Ngọc Hưng 16520489 Võ Quốc Huy 16520538 Cán hướng dẫn: Đánh giá Khóa luận: Về báo cáo: Số trang: Số chương: Số bảng số liệu: Số hình vẽ: Số tài liệu tham khảo: Sản phẩm: Một số nhận xét hình thức báo cáo: Về nội dung nghiên cứu: Về chương trình ứng dụng: Về thái độ làm việc sinh viên: Đánh giá chung: Điểm sinh viên: Trần Ngọc Hưng: ……… /10 Võ Quốc Huy: ……… /10 Người nhận xét (Ký ghi rõ họ tên) LỜI CẢM ƠN Lời đầu tiên, nhóm thực xin chân thành cảm ơn q thầy khoa Cơng Nghệ Phần Mềm, trường Đại Học Công Nghệ Thông Tin, ĐHQG TP.HCM, tận tình hướng dẫn nhóm suốt thời gian học trường Những kiến thức mà thầy cô truyền đạt tảng quan trọng để nhóm hồn thành đề tài Nhóm xin gửi lời cảm ơn chân thành lòng biết ơn sâu sắc đến ThS Hoàng Văn Hà, cảm ơn thầy tận tình hướng dẫn tạo điều kiện tốt cho nhóm hồn thành đề tài Những lời động viên, góp ý chân tình động lực q báu để nhóm vượt qua khó khăn tìm hiểu thực khóa luận Bên cạnh đó, nhóm chân thành cảm ơn ThS Nguyễn Công Hoan, xin cảm ơn thầy có góp ý cho đề tài nhóm thời gian đầu thực đề tài Trong thời gian tháng thực đề tài, nhóm thực cố gắng vận dụng kiến thức tảng học, kết hợp học hỏi tìm hiểu cơng nghệ để ứng dụng xây dựng đề tài khóa luận tốt nghiệp “Xây dựng web hỏi đáp cho người học ngoại ngữ ” Tuy nhiên trình thực hiện, kiến thức kinh nghiệm cịn nhiều hạn chế, khó tránh khỏi thiếu sót Chính vậy, nhóm thực mong nhận góp ý từ q thầy để nhóm hồn thiện thêm kiến thức mà nhóm học tập, làm hành trang q báu cho nhóm cơng việc sau Xin chân thành cảm ơn quí thầy ! Hồ Chí Minh, 15 tháng 01 năm 2021 Nhóm thực Trần Ngọc Hưng Võ Quốc Huy ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập – Tự Do – Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT KHÓA LUẬN TỐT NGHIỆP Tên đề tài: Xây dựng web hỏi đáp cho người học ngoại ngữ Cán hướng dẫn: ThS Hoàng Văn Hà Thời gian thực hiện: Từ ngày 07/09/2020 đến ngày 02/01/2021 Sinh viên thực hiện: Võ Quốc Huy: 16520538 Trần Ngọc Hưng: 16520489 Nội dung đề tài: Mục tiêu: - Xây dựng website giúp kết nối người học ngoại ngữ, tạo môi trường chia sẻ, học hỏi cách trao đổi hỏi đáp trực tiếp với - Tạo cộng đồng trao đổi giúp đỡ lẫn người học ngôn ngữ người xứ Phạm vi: Đề tài tập trung vào xây dựng website với chức như: - Trao đổi: Dễ dàng trao đổi, bàn luận với hỗ trợ định dạng văn bản, biểu tượng cảm xúc, nhãn dán, hình ảnh - Tạo câu hỏi: Có thể hỏi với nhiều định dạng câu hỏi hỏi hình ảnh, âm (cách phát âm) - Nhận xét/ Đánh giá: Bất kỳ người dùng để lại đánh giá nhận xét câu trả lời/câu hỏi người khác - Tìm kiếm: Tìm kiếm câu hỏi/câu trả lời theo ngơn ngữ chọn trả lời/hỏi từ trước - Cấp độ: Với câu hỏi/câu trả lời người dùng tích lũy số điểm tương ứng điểm cao độ tin cậy lớn - Thông báo: Nhận thông báo câu hỏi người dùng người khác trả lời - Khởi tạo tài khoản: Tích hợp với mạng xã hội Facebook Google Đối tượng: Là người có nhu cầu: - Người học nhiều ngôn ngữ - Người có nhu cầu tham gia cộng đồng học ngoại ngữ hổ trợ lẫn - Người muốn chia sẻ kiến thức văn hóa quốc gia cho bạn bè tồn giới Phương pháp thực hiện: - Tìm hiểu đánh giá giải pháp có - Đề xuất, cải thiện tính cần thiết - Phân chia cơng việc phù hợp với lực kinh nghiệm người - Áp dụng mơ hình thác nước vào xây dựng ứng dụng Kết mong đợi: - Hoàn thành website với đầy đủ yêu cầu chức đề - Giao diện thân thiện mang lại trải nghiệm tốt cho người dùng - Ứng dụng có độ hồn thiện cao, có khả đưa vào thực tiễn Kế hoạch thực hiện: Công việc STT Thời gian thực Phân (07/09/2020 – 02/01/2021) cơng Tìm hiểu - Khảo sát ứng dụng tương tự - Phát biểu tốn - Phân tích, xác định chức - Tìm hiểu cơng nghệ sử dụng khố luận 07/09 - 21/09 Cả nhóm (6) Nút “Ask” gửi liệu lên hệ thống sau điều hướng người dùng đến trang câu hỏi vừa tạo 4.3.1.7 Giao diện hình Chi tiết câu hỏi Hình 4.11 Giao diện hình Chi tiết câu hỏi Mô tả: Giao diện chi tiết câu hỏi thể đầy đủ thông tin chi tiết câu hỏi gợi ý câu hỏi liên quan cách bắt mắt, mang đến cho người dùng trải nghiệm tốt sử dụng Điều hướng tương tác người dùng: (1): Thông tin chi tiết câu hỏi câu trả lời bên kèm theo thông tin tổng quan người đăng Bao gồm nút chức dịch nội dung, thả tim, lưu, chia sẻ tùy chọn thêm 74 (2): Người dùng trả lời cho câu hỏi Với chức thêm đính kèm ảnh, ghi âm sticker (3): Các câu hỏi liên quan, câu hỏi chưa có câu trả lời cần người dùng giúp đỡ (câu hỏi ngôn ngữ mà người dùng người xứ) 4.3.1.8 Giao diện hình thơng tin người dùng Hình 4.12 Giao diện hình thơng tin người dùng Mơ tả: Trang cá nhân hiển thị lên với hình ảnh thơng tin người dùng với câu hỏi, câu trả lời người dùng đăng lên Tại trang cá nhân, người dùng xem số liệu đóng góp cho cộng đồng cịn chỉnh sửa thơng tin 75 4.3.1.9 Giao diện hình Thảo luận Hình 4.13 Giao diện hình Thảo luận 76 Hình 4.14 Giao diện tạo viết Mô tả: Trang thảo luận hiển thị danh sách viết chia sẻ kinh nghiệm, mẹo người dùng Người dùng nên sử dụng tiếng Anh để tương tác trang Người dùng chuyển đến trang tạo viết nhấn nút “Tạo viết” 77 4.3.1.10 Giao diện hình Chi tiết viết Hình 4.15 Giao diện hình Chi tiết viết Hình 4.16 Giao diện bình luận Chi tiết viết 78 Mô tả: Tương tự trang chi tiết câu hỏi, người dùng xem thông tin tác giả, thông tin nội dung viết comment tương tác viết cách đăng bình luận Tuy nhiên lượt vote viết khơng tích điểm cho người dùng 4.3.1.11 Giao diện hình Bookmark Hình 4.17 Giao diện hình Bookmark Mơ tả: Người dùng xem nội dung câu hỏi/câu trả lời mà lưu trước trang Bookmark Được thể theo danh sách theo thứ tự thời gian Khi nhấn vào nội dung người dùng điều hướng đến trang chi tiết 79 4.3.1.12 Giao diện hình Bảng xếp hạng Hình 4.18 Giao diện hình Bảng xếp hạng Mơ tả: Người dùng xem bảng xếp hạng người dùng hệ thống theo thông tin là: số điểm, số câu hỏi số câu trả lời Điều hướng tương tác người dùng: (1): Xếp hạng người dùng theo thuộc tính khác số điểm, số câu hỏi hỏi số câu trả lời (2): Thông tin người dùng gồm tên người dùng, số điểm quốc gia Khi nhấn vào người dùng liên kết đến trang thông tin chi tiết người dùng nhấn (3): Xem thêm nhiều người dùng khác thứ hạng thấp 80 4.3.1.13 Giao diện hình Tùy chỉnh Hình 4.19 Giao diện hình Tùy chình Mơ tả: Trang tùy chỉnh thể phần cài đặt chức thay đổi ngôn ngữ mà người dùng muốn nội dung dịch sang, thay đổi ngôn ngữ trang web, thay đổi mật Đăng xuất 81 4.3.2 Giao diện dành cho quản trị (admin) 4.3.2.1 Giao diện hình Đăng nhập Hình 4.20 Giao diện hình Đăng nhập admin Mô tả: Đây giao diện mặc định mở Admin app, hỗ trợ tài khoản mật người lập trình đưa trước Người dùng có tài khoản, mật với vào web app, sau đăng nhập thành công vào thằng app vào lần sau mà không cần đăng nhập lại trừ nhấn nút Log out 82 4.3.2.2 Giao diện hình Quản lí câu hỏi Hình 4.21 Giao diện hình Quản lí câu hỏi Mơ tả: Đây giao diện cho trang quản lí câu hỏi Trên đầu thông tin hoạt động website, bảng danh sách câu hỏi, cho xem , xóa, sửa câu hỏi 4.3.2.3 Giao diện hình Quản lí người dùng Hình 4.22 Giao diện hình Quản lí người dùng 83 Mơ tả: Đây giao diện trang quản lí người dùng Admin có quyền thêm , xóa, sửa nội dung người dùng cấm tài khoản người dùng thấy thơng tin khơng phù hợp hợp lệ 4.3.2.4 Giao diện hình Quản lí quản trị viên Hình 4.23 Giao diện hình Quản lí quản trị viên Mơ tả: Đây giao diện trang quản lí quản trị viên admin app Chỉ có tài khoản có quyền cao Administrator, có quyền thêm ,xóa, sửa cấm tài khoản admin thường khác 84 4.3.2.5 Giao diện hình Quản lí log Hình 4.24 Giao diện hình Quản lí log Mơ tả: Đây giao diện trang Log, thể nhật kí hoạt động website, mật độ hoạt động web Có thể export log file txt 4.3.2.6 Giao diện hình Quản lí báo cáo Hình 4.25 Giao diện hình Quản lí báo cáo Mô tả: Đây giao diện trang Quản lí báo cáo , người admin xem, xóa,sửa câu hỏi dựa tin nhắn báo cáo thông tin liên quan khác 85 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết luận 5.1.1 Kết đạt Qua q trình thực đề tài nhóm chúng em có hội tìm hiểu quy trình xây dựng mơt trang web, với kinh nghiệm lên kế hoạch tìm hiểu, nghiên cứu phát triển đề tài, viết báo cáo Từ hồn thành yêu cầu đặt ban đầu, thiết kế hệ thống có đầy đủ tính cần thiết trang web hỏi đáp thực Đồng thời, nhóm em có thêm nhiều kinh nghiệm trình xây dựng tổ chức mã nguồn, quản lí dự án 5.1.2 - Ưu điểm Website thiết kế responsive kĩ càng, hoạt động tốt thiết bị từ mobile, tablet desktop - Có tính trang mạng xã hội, thích bình luận để người dùng chia sẻ thông tin với - Giao diện đơn giản, bắt mất, bố cục hợp lý phù hợp với đối tượng người dùng - Tốc độ phản hồi thao tác nhanh, tối ưu hóa trải nghiệm người dùng 5.1.3 Nhược điểm Cịn hạn chế số tính năng: - Chưa phát triển tính xác thực qua email, số điện thoại - Chức ghi âm bị lỗi với người dùng IOS - Tương tác người dùng gặp nhiều hạn chế - Server đáp ứng với lượng người dùng vừa phải 86 5.2 Hướng phát triển Qua q trình thực khóa luận, tính tới thời điểm tại, nhóm nhận thấy khóa luận cịn thiếu sót cần khắc phục phát triển thời gian tới như: - Xây dựng thêm chức mới, hồn thiện chức có - Phát triển thêm phiên ứng dụng riêng dành cho IOS Android - Tối ưu hóa code để tăng tốc độ tương tác - Tối ưu hóa CSDL hợp lý - Tìm hiểu thêm AI để áp dụng vào hệ thống 87 TÀI LIỆU THAM KHẢO [1] Cindy Blanco, “2020 Duolingo Language Report: Global Overview”, 2020 https://blog.duolingo.com/global-language-report-2020 [2] “RESTful API gì?”, 2020 https://viblo.asia/p/restful-api-la-gi-1Je5EDJ4lnL [3] Vuejs Document, https://vuejs.org/v2/guide/ [4] NodeJS Document, https://nodejs.org/en/docs/ [5] Firbase Document, https://firebase.google.com/docs/web/setup [6] MySQL Document, https://dev.mysql.com/doc/refman/8.0/en/ [7] Algolia Document, https://www.algolia.com/doc/ 88 ... dựng web hỏi đáp cho người học ngoại ngữ? ?? để phát huy tối đa cách thức học Với mục tiêu tạo cộng đồng kết nối người học ngoại ngữ để giúp đỡ lẫn Tất thứ liên quan đến ngoại ngữ mô qua mẫu câu hỏi. .. tiêu: - Xây dựng website giúp kết nối người học ngoại ngữ, tạo môi trường chia sẻ, học hỏi cách trao đổi hỏi đáp trực tiếp với - Tạo cộng đồng trao đổi giúp đỡ lẫn người học ngôn ngữ người xứ... NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập – Tự Do – Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT KHÓA LUẬN TỐT NGHIỆP Tên đề tài: Xây dựng web hỏi đáp cho người học ngoại ngữ Cán hướng dẫn: ThS Hoàng