Trong thời gian hơn 4 tháng thực hiện đề tài, nhóm thực hiện đã cố gắng vận dụng những kiến thức nền tảng đã học, kết hợp học hỏi và tìm hiểu công nghệ mới để ứng dụng xây dựng đề tài kh
Trang 1ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM
Trang 2ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KỸ SƯ/ CỬ NHÂN NGÀNH KỸ THUẬT PHẦN MỀM
GIẢNG VIÊN HƯỚNG DẪN ThS HOÀNG VĂN HÀ
Trang 3THÔ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 ……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin
1 ……… – Chủ tịch
2 ……… – Thư ký
3 ……… – Ủy viên
4 ……… – Ủy viên
Trang 4ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC
CÔNG NGHỆ THÔNG TIN
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc Lập - Tự Do - Hạnh Phúc
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 bộ 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:
1 Về cuốn 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 về hình thức cuốn báo cáo:
Trang 54 Về thái độ làm việc của sinh viên:
Đánh giá chung:
Điểm từng sinh viên:
Trang 6ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC
CÔNG NGHỆ THÔNG TIN
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc Lập - Tự Do - Hạnh Phúc
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: Cán bộ hướng dẫn:
Trần Ngọc Hưng 16520489
Võ Quốc Huy 16520538
Đánh giá Khóa luận:
1 Về cuốn 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 về hình thức cuốn báo cáo:
Trang 74 Về thái độ làm việc của sinh viên:
Đánh giá chung:
Điểm từng sinh viên:
Trần Ngọc Hưng: ……… /10
Võ Quốc Huy: ……… /10
Người nhận xét
(Ký và ghi rõ họ tên)
Trang 8LỜI CẢM ƠN
Lời đầu tiên, nhóm thực hiện xin chân thành cảm ơn quí thầy cô 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 trong suốt thời gian học tại trường Những kiến thức mà thầy cô đã truyền đạt
là nền tảng quan trọng để nhóm có thể hoàn thành đề tài này
Nhóm xin gửi lời cảm ơn chân thành và 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 và tạo điều kiện tốt nhất cho nhóm hoàn thành đềtài này Những lời động viên, góp ý chân tình của cô là động lực quí báu để nhóm vượt qua những khó khăn khi tìm hiểu và thực hiện khóa luận
Bên cạnh đó, nhóm cũng chân thành cảm ơn ThS Nguyễn Công Hoan, xin cảm
ơn thầy đã có những góp ý cho đề tài của nhóm trong thời gian đầu thực hiện đề tài
Trong thời gian hơn 4 tháng thực hiện đề tài, nhóm thực hiện đã cố gắng vận dụng những kiến thức nền tảng đã học, kết hợp học hỏi và tìm hiểu công nghệ mới để ứ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 trong quá trình thực hiện, do kiến thức và kinh nghiệm còn nhiều hạn chế, khó tránh khỏi những thiếu sót Chính vì vậy, nhóm thực hiện rất mong nhận được sự góp ý
từ quí thầy cô để nhóm hoàn thiện thêm những kiến thức mà nhóm đã học tập, làm hành trang quí báu cho nhóm trong công việc sau này
Xin chân thành cảm ơn quí thầy cô !
Hồ Chí Minh, 15 tháng 01 năm 2021
Nhóm thực hiện
Trần Ngọc Hưng Võ Quốc Huy
Trang 9ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC
CÔNG NGHỆ THÔNG TIN
CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc Lập – Tự Do – Hạnh Phúc
ĐỀ 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 bộ 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:
1 Võ Quốc Huy: 16520538
2 Trần Ngọc Hưng: 16520489
Nội dung đề tài:
Mục tiêu:
- Xây dựng một website giúp kết nối những người học ngoại ngữ, tạo môi trường chia
sẻ, học hỏi bằng cách trao đổi hỏi đáp trực tiếp với nhau
- Tạo ra một cộng đồng trao đổi giúp đỡ lẫn nhau giữa những người đang học một ngônngữ mới và những người bản xứ
Phạm vi:
Đề tài tập trung vào xây dựng website với các chức năng chính như:
- Trao đổi: Dễ dàng trao đổi, bàn luận với nhau hỗ trợ các định dạng văn bản, biểu
Trang 10- Cấp độ: Với mỗi câu hỏi/câu trả lời người dùng sẽ tích lũy được số điểm tương
ứng và điểm càng cao thì độ tin cậy càng lớn
- Thông báo: Nhận được thông báo khi câu hỏi của người dùng được 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 và Google
Đối tượng:
Là những người có một trong các nhu cầu:
- Người đang học một hoặc nhiều ngôn ngữ mới
- Người có nhu cầu tham gia một cộng đồng học ngoại ngữ hổ trợ lẫn nhau
- Người muốn chia sẻ kiến thức của mình và văn hóa quốc gia mình cho bạn bè trên toàn thế giới
Phương pháp thực hiện:
- Tìm hiểu và đánh giá các giải pháp đã có
- Đề xuất, cải thiện các tính năng cần thiết
- Phân chia công việc phù hợp với năng lực và kinh nghiệm của từng người
- Áp dụng mô hình thác nước vào xây dựng ứng dụng
Kết quả mong đợi:
- Hoàn thành website với đầy đủ các yêu cầu chức năng đề ra
- Giao diện thân thiện và mang lại trải nghiệm tốt nhất cho người dùng
- Ứng dụng có độ hoàn thiện cao, có khả năng đưa vào thực tiễn
Kế hoạch thực hiện:
(07/09/2020 – 02/01/2021)
Phân công
1 Tìm hiểu
- Khảo sát các ứng dụng tương tự
Trang 112 Thiêt kế hệ thống
- Thiết kế kiến trúc website
- Thiết kế cấu trúc dữ liệu
- Thiết kế giao diện
- Xây dựng tầng giao diện
- Tối ưu trải nghiệm người dùng
- Tích hợp giao diện với hệ thống
- Kiểm thử chức năng
05/10 – 07/12 Hưng
4 Triển khai web và viết báo cáo
- Tìm hiểu AWS
- Triển khai web
- Viết báo cáo
07/12 – 28/12 Cả
nhóm
Trang 12Xác nhận của CBHD
(Ký tên và ghi rõ họ tên)
TP HCM, ngày 1 tháng 10 năm
2020 Sinh viên
(Ký tên và ghi rõ họ tên)
Trần Ngọc Hưng Võ Quốc Huy
Trang 13MỤC LỤC
TÓM TẮT KHÓA LUẬN 1
Chương 1 MỞ ĐẦU 2
1.1 Khảo sát và Đặt vấn đề 2
1.2 Lý do chọn đề tài 4
1.3 Mục tiêu 5
1.4 Phạm vi 5
1.5 Đối tượng 5
1.6 Phương pháp thực hiện 5
Chương 2 TỔNG QUAN ĐỀ TÀI 7
2.1 Tìm hiểu các ứng dụng liên quan 7
2.1.1 HelloTalk 7
2.1.2 Duolingo 8
2.1.3 HiNative 9
2.1.4 Tổng kết 11
2.2 Kết quả dự kiến 12
Chương 3 CƠ SỞ LÝ THUYẾT 13
3.1 RESTful API 13
3.1.1 API là gì? 13
3.1.2 RESTful API là gì? 14
3.1.3 Thiết kế RESTful Service 15
3.2 Node.js 17
3.2.1 Giới thiệu 17
3.2.2 Đặc điểm 18
Trang 143.2.4 Lý do sử dụng Node.js 20
3.3 MySQL 21
3.3.1 Giới thiệu 21
3.3.2 Ưu điểm 22
3.3.3 Nhược điểm 22
3.3.4 Lý do sử dụng MySQL 23
3.4 Vue.js 24
3.4.1 Giới thiệu 24
3.4.2 Đặc điểm 25
3.4.3 Mô hình MVVM 26
3.4.4 Vòng đời của Vue 27
3.4.5 Lý do sử dụng Vuejs 30
3.5 Firebase 31
3.5.1 Giới thiệu 31
3.5.2 Chức năng chính của Firebase 31
3.5.3 Lợi ích của Firebase 33
3.6 Algolia 34
3.6.1 Giới thiệu 34
3.6.2 Ưu điểm 34
3.6.3 Nhược điểm 34
3.6.4 Lý do sử dụng Algolia 35
Chương 4 XÂY DỰNG HỆ THỐNG 36
Trang 154.2 Phân tích thiết kế hệ thống 39
4.2.1 Sơ đồ use case 39
4.2.2 Thiết kế cơ sở dữ liệu 57
4.3 Thiết kế giao diện 65
4.3.1 Giao diện người dùng 65
4.3.2 Giao diện dành cho quản trị (admin) 82
Chương 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 86
5.1 Kết luận 86
5.1.1 Kết quả đạt được 86
5.1.2 Ưu điểm 86
5.1.3 Nhược điểm 86
5.2 Hướng phát triển 87
Trang 16DANH MỤC HÌNH
Hình 1.1: Duolingo đạt 300 triệu người dùng vào 08/2018 2
Hình 1.2 Lượng người dùng mới của Duolingo từ năm 2018 đến nay 3
Hình 2.1 Logo HelloTalk 7
Hình 2.2 Logo Duolingo 9
Hình 2.3 Logo HiNative 10
Hình 3.1 Nguyên lý hoạt động của RESTful API 14
Hình 3.2 Node.js 17
Hình 3.3 Express.js 19
Hình 3.4 MySQL 21
Hình 3.5 Vue.js 24
Hình 3.6 Mô hình MVVM trong Vue.js 26
Hình 3.7 Vòng đời của Vue 28
Hình 3.8 Firebase 31
Hình 3.9 Algolia 34
Hình 4.1 Kiến trúc hệ thống 36
Hình 4.2 Sơ đồ use case hệ thống 40
Hình 4.3 Sơ đồ CSDL của hệ thống 57
Hình 4.4 Giao diện màn hình Landing Page 65
Hình 4.5 Giao diện màn hình Đăng nhập 66
Hình 4.6 Giao diện màn hình Đăng kí 68
Trang 17Hình 4.9 Giao diện màn hình Chọn mẫu câu hỏi 72
Hình 4.10 Giao diện màn hình Đặt câu hỏi 73
Hình 4.11 Giao diện màn hình Chi tiết câu hỏi 74
Hình 4.12 Giao diện màn hình thông tin người dùng 75
Hình 4.13 Giao diện màn hình Thảo luận 76
Hình 4.14 Giao diện tạo bài viết 77
Hình 4.15 Giao diện màn hình Chi tiết bài viết 78
Hình 4.16 Giao diện bình luận trong Chi tiết bài viết 78
Hình 4.17 Giao diện màn hình Bookmark 79
Hình 4.18 Giao diện màn hình Bảng xếp hạng 80
Hình 4.19 Giao diện màn hình Tùy chình 81
Hình 4.20 Giao diện màn hình Đăng nhập ở admin 82
Hình 4.21 Giao diện màn hình Quản lí câu hỏi 83
Hình 4.22 Giao diện màn hình Quản lí người dùng 83
Hình 4.23 Giao diện màn hình Quản lí quản trị viên 84
Hình 4.24 Giao diện màn hình Quản lí log 85
Hình 4.25 Giao diện màn hình Quản lí báo cáo 85
Trang 18DANH MỤC BẢNG
Bảng 4.1 Danh sách các actor 40
Bảng 4.2 Danh sách các use case 42
Bảng 4.3 Đặc tả use case “Đăng nhập” 42
Bảng 4.4 Đặc tả use case “Đăng ký” 43
Bảng 4.5 Đặc tả use case “Đăng xuất” 44
Bảng 4.6 Đặc tả use case “Quên mật khẩu” 45
Bảng 4.7 Đặc tả use case “Tìm kiếm câu hỏi” 46
Bảng 4.8 Đặc tả use case “Đặt câu hỏi” 47
Bảng 4.9 Đặc tả use case “Xem câu hỏi” 47
Bảng 4.10 Đặc tả use case “Trả lời câu hỏi” 48
Bảng 4.11 Đặc tả use case “Tạo bài viết” 49
Bảng 4.12 Đặc tả use case “Xem bài viết” 50
Bảng 4.13 Đặc tả use case “Bình luận bài viết” 51
Bảng 4.14 Đặc tả use case “Xem hồ sơ người dùng” 51
Bảng 4.15 Đặc tả use case “Báo cáo” 52
Bảng 4.16 Đặc tả use case “Quản lý câu hỏi” 53
Bảng 4.17 Đặc tả use case “Quản lý người dùng” 54
Bảng 4.18 Đặc tả use case “Quản lý thành viên ban quản trị” 55
Bảng 4.19 Đặc tả use case “Quản lý log” 56
Bảng 4.20 Đặc tả use case “Quản lý báo cáo” 56
Trang 19Bảng 4.23 Bảng Answer 60
Bảng 4.24 Bảng Post 60
Bảng 4.25 Bảng PostComment 61
Bảng 4.26 Bảng Report 61
Bảng 4.27 Bảng Admin 62
Bảng 4.28 Bảng InterestLanguage 62
Bảng 4.29 Bảng Vote 63
Bảng 4.30 Bảng Notification 63
Bảng 4.31 Bảng Bookmark 64
Bảng 4.32 Bảng Log 64
Trang 20DANH MỤC TỪ VIẾT TẮT
SPA Single Page ApplicationMVVM Model-View-ViewModelCSDL Cơ sở dữ liệu
HTTP HyperText Transfer ProtocolJSON JavaScript Object Noattion
Trang 21TÓM TẮT KHÓA LUẬN
Khóa luận “XÂY DỰNG WEB HỎI ĐÁP CHO NGƯỜI HỌC NGOẠI NGỮ” gồm
05 chương:
Chương 1: Giới thiệu về đề tài Tiếp đến là đề xuất các giải pháp để giải quyết các
vấn đề đã đặt ra Ngoài ra, chương 1 cũng đề cập đến đối tượng nghiên cứu, phạm vi
đề tài, phương pháp nghiên cứu
Chương 2: Tổng quan về đề tài, tìm hiểu về các ứng dụng liên quan từ đó đưa ra nhận
xét và hoàn thiện hơn cho đề tài
Chương 3: Trình bày các kiến thức nền tảng, các công nghệ được sử dụng trong đề
tài
Chương 4: Trình bày chi tiết quy trình xây dựng hệ thống, từ xác định và phân tích
yêu cầu bài toán cho đến xây dựng CSDL, cuối cùng là xây dựng giao diện cho đềtài
Chương 5: Kết luận, rút ra được các ưu nhược điểm của hệ thống và hướng phát triển
trong tương lai
Trang 22Chương 1 MỞ ĐẦU
1.1 Khảo sát và Đặt vấn đề
Vào tháng 8 năm 2018, ứng dụng Duolingo – một nền tảng học ngoại ngữ rấtphổ biến đã đạt hơn 300 triệu người dùng trên khắp thế giới và lượng người dùng vẫn tiếp tục tăng trưởng mạnh
Hình 1.1: Duolingo đạt 300 triệu người dùng vào 08/2018
Và với sự ảnh hưởng của đại dịch COVID-19, có vẻ con người ta đã phải thay đổi thói quen thường ngày của họ Người ta bắt đầu quan tâm đến việc học tập trực tuyến, online hơn là học trực tiếp tại trường, lớp Thể hiện rõ hơn khi mà hơn 30 triệu người dùng mới bắt đầu học trên Duolingo (3/11/2020 – 30/4/2020), tăng trưởng hơn 67% so với cùng kì năm 2019
Trang 23Hình 1.2 Lượng người dùng mới của Duolingo từ năm 2018 đến nay
Để giải quyết cũng như hỗ trợ nhu cầu học tập trực tuyến ngày càng lớn đặc biệt
là học ngoại ngữ Trong khóa luận này nhóm chúng em tập trung xây dựng một website - được đặt tên là Togebetter, nhằm tạo ra một cộng đồng, đóng vai trò là trung gian trong việc kết nối giữa những người học ngoại ngữ và người bản xứ
Nhóm chúng em muốn tạo ra một không gian học tập rộng lớn, với nhiều người tại nhiều quốc gia khác nhau trên thế giới, tạo nên cộng đồng thân thiện dành cho những người yêu thích học ngôn ngữ, phù hợp cho học sinh, sinh viên và nhiều đối tượng khác có nhu cầu học ngoại ngữ Những câu hỏi liên quan tới ngôn ngữ của quốc gia nào sẽ có một cộng đồng người tại quốc gia đó giải đáp cho người dùng chi tiết và có độ tin tưởng cao
Trang 241.2 Lý do chọn đề tài
Hiện nay, với sự bùng nổ của Internet và công nghệ thông tin giúp mọi người
có thể kết nối và tương tác với nhau một cách nhanh chóng, dễ dàng hơn Đem đến nhiều thay đổi về chất lượng của việc dạy và học ngoại ngữ Học ngoại ngữ chưa bao giờ là muộn và ngày càng cần thiết hơn nữa, khi thị trường việc làm ngày càng đòi hỏi cao về tính chuyên môn
Học sinh, sinh viên chúng em khi học ngoại ngữ mà gặp những thắc mắc thì thường phải tham khảo từ internet, từ điển hoặc hỏi ý kiến giáo viên ngoại ngữ để học cách diễn đạt phù hợp Tuy nhiên, từ điển có cách diễn đạt khá cứng nhắc, đôi khikhông phù hợp với ngữ cảnh và tất nhiên không phải lúc nào giáo viên cũng ở bên cạnh để mà có thể giúp đỡ chúng em
Do đó, có một nơi mà ở đó những người học ngoại ngữ có thể trao đổi, tương tác, giúp đỡ lẫn nhau là điều cần thiết Việc vừa học vừa giúp đỡ người khác cũng là một cách giúp em tự ôn luyện lại kiến thức, thậm chí là học hỏi thêm được nhiều kiến thức liên quan thông qua đánh giá, bình luận của những người xem được bài viết đó của mình
Hiểu được hiệu quả mà phương pháp học tập thông qua việc trao đổi mang lại, nhóm chúng em đã quyết định chọn đề tài “Xây 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 này Với mục tiêu tạo ra một cộng đồng kết nối những người học ngoại ngữ để có thể giúp đỡ lẫn nhau Tất cả mọi thứ liên quan đến ngoại ngữ đều được mô phỏng qua mẫu câu hỏi có sẵn và người học sẽ nhận được câu trả lời ngay lập tức từ người bản xứ
Trang 251.3 Mục tiêu
- Hiểu và kết hợp, vận dụng các kiến thức để xây dựng một dự án hoàn chỉnh
- Giải quyết được các vấn đề đã đưa ra và tạo ra được ứng dụng web có khả năng
- Phạm vi địa lý: ứng dụng được sử dụng ở khắp mọi nơi trên thế giới
- Phạm vi ứng dụng: phát triển trên nền tảng web
- Những người chưa tự tin khi giao tiếp với người nước ngoài
- Những người muốn chia sẻ kiến thức của mình và văn hóa quốc gia mình cho bạn bè trên toàn thế giới
1.6 Phương pháp thực hiện
Thực hiện đề tài theo các bước:
- Phân tích đề tài
- Tham khảo các trang web/hệ thống hiện có
- Phân tích các yêu cầu đã thu thập được
Trang 26- Thiết kế cơ bản các yêu cầu.
- Nghiên cứu công nghệ để áp dụng
- Phát triển sản phẩm qua các giai đoạn, đồng thời lấy ý kiến phản hồi
- Kiểm thử và hoàn thiện
Trang 27Chương 2 TỔNG QUAN ĐỀ TÀI
2.1 Tìm hiểu các ứng dụng liên quan
2.1.1 HelloTalk
2.1.1.1 Mô tả chung
HelloTalk được xây dựng như một mạng xã hội, nhưng tập trung vào việc học ngôn ngữ và chia sẻ văn hóa cho mọi người trên khắp thế giới (có đủ cả 3 phiên bản Web, Android và IOS)
Tính đến nay đã có hơn 3 triệu người dùng HelloTalk để kết bạn, trao đổi ngôn ngữ Trong phần mềm này, người dùng có thể thoải mái chat/gọi video cho cá nhân hoặc một nhóm Phần mềm này cho phép người dùng nghe, dịch câu chat của đối phương, cũng như có thể sửa ngữ pháp được cho họ vô cùng tiện lợi
Hình 2.1 Logo HelloTalk
2.1.1.2 Ưu điểm
- Có mục blog cho người dùng tìm hiểu thêm về văn hóa các nước khác
- Hỗ trợ nhiều ngôn ngữ trên thế giới trong đó có Việt Nam
Trang 282.1.1.3 Nhược điểm
- Thường chỉ phù hợp hội thoại với nhau hàng ngày, không cung cấp được nhiều kiến thức chính xác
- Phát triển chủ yếu vào kĩ năng giao tiếp
- Chưa hỗ trợ được nhiều ngôn ngữ
2.1.2 Duolingo
2.1.2.1 Mô tả chung
Duolingo nằm trong số ít những ứng dụng học miễn phí mà vẫn chất lượng Theo khảo sát nhỏ tại Mỹ, số người dùng Duolingo thậm chí còn đông hơn số người
đi học anh văn giao tiếp tại các trung tâm ngoại ngữ
Duolingo cung cấp phương pháp học tập tiên tiến được nghiên cứu và sàng lọc bởi các chuyên gia giáo dục có nhiều kinh nghiệm; hiện ứng dụng được cung cấp trên
cả Android, iOS, Windows Phone, lẫn nền web
Ứng dụng Duolingo giống như một trò chơi, người dùng không gặp cảm giác
“đang phải học”, thay vào đó họ liên tục trải qua các bài tập tương tác từ cơ bản đến nâng cao, với những nội dung luyện ngữ pháp, từ vựng, nói và nghe xen kẽ liên tục trong mỗi phần học
Trang 29Hình 2.2 Logo Duolingo
2.1.2.2 Ưu điểm
- Công cụ học 100% miễn phí
- Sử dụng được hầu hết trên các thiết bị di động
- Được thiết kế đầy đủ từ các level cơ bản đến nâng cao
- Số lượng khóa học lớn
2.1.2.3 Nhược điểm
- Duolingo thiết kế các level từ điểm xuất phát lên cao dần nên thường chỉthích hợp với người chưa biết gì nên sẽ xảy ra tình trạng dễ gây chán nản với người đã có kiến thức từ trước
2.1.3 HiNative
2.1.3.1 Mô tả chung
HiNative là website học ngoại ngữ trực tuyến với người bản xứ với hàng trămngôn ngữ khác nhau, dành cho những người không có nhiều thời gian và tài chính đểtham gia học ở các trung tâm Theo đó, cách tự học ngoại ngữ, đặc biệt là học tiếng
Trang 30Anh tại nhà với HiNative là lựa chọn rất tốt theo đánh giá của nhiều người đã và đang trải nghiệm dịch vụ này
Đặc biệt, khi tham gia vào cộng đồng những người cùng tham gia học với HiNative, người dùng sẽ có cơ hội được gặp gỡ những người bạn nước ngoài tốt bụng,
có thể giúp đỡ họ rất nhiều trong quá trình học, đặc biệt là vấn đề phát âm mà rất nhiều người học ngoại ngữ cảm thấy khó khăn
Hình 2.3 Logo HiNative
2.1.3.2 Ưu điểm
- Kết nối nhiều người học với nhau
- Giao diện dễ sử dụng cho người mới bắt đầu
Trang 312.1.4 Tổng kết
Sau khi sử dụng, phân tích các ứng dụng đã có trên thị trường thì các ứng dụng đã làm rất tốt nhưng chỉ tập trung vào một vài ngôn ngữ phổ biến (đặc biệt là tiếng Anh) hoặc là một kĩ năng nhất định (nghe - nói, đọc - viết) nên những ứng dụng này chưa thể đáp ứng hết nhu cầu của một người học ngoại ngữ
Từ những gì đã phân tích được, nhóm đưa ra những tính năng cần làm cho
đề tài khóa luận như sau:
- Hiển thị câu hỏi theo ngôn ngữ người dùng đã chọn thể hiện đầy đủ thông tin câu hỏi một cách bắt mắt
- Tạo câu hỏi: Có thể hỏi với nhiều định dạng câu hỏi như hỏi về hình ảnh,
âm thanh
- Nhận xét/ Đánh giá: Bất kỳ người dùng nào cũng có thể để lại đánh giá và nhận xét câu trả lời/câu hỏi của người khác
- Hỗ trợ công cụ tự động dịch câu hỏi/câu trả lời
- Tìm kiếm: Tìm kiếm các câu hỏi/câu trả lời theo ngôn ngữ được chọn và
đã được trả lời/hỏi từ trước
- Tích điểm: Với mỗi câu hỏi/câu trả lời người dùng sẽ tích lũy được số điểm tương ứng và điểm càng cao thì độ tin cậy càng lớn
- Thông báo: Nhận được thông báo khi câu hỏi của người dùng được người khác trả lời hoặc được điểm
- Lưu: Lưu những câu hỏi/câu trả lời mình thích
- Trang cá nhân: Là nơi người dung giới thiệu bản thân, ngôn ngữ mình thích, câu hỏi, câu trả lời của mình cho mọi người
- Báo cáo: Báo cáo câu hỏi/câu trả lời spam, văng tục, không lành mạnh
- Hỗ trợ đa ngôn ngữ
- Bảng xếp hạng người dùng
- Thảo luận: Là nơi để người dùng chia sẻ những kiến thức hoặc mẹo của mình
Trang 322.2 Kết quả dự kiến
- Hoàn thành website với đầy đủ các yêu cầu chức năng đề ra
- Giao diện thân thiện và mang lại trải nghiệm tốt nhất cho người dùng
- Ứng dụng có độ hoàn thiện cao, có khả năng đưa vào thực tiễn
Trang 33Chương 3 CƠ SỞ LÝ THUYẾT
3.1 RESTful API
3.1.1 API là gì?
API (Application Programming Interface) là các phương thức, giao thức kết nối với các thư viện và ứng dụng khác API có khả năng truy xuất đến một tập hợp các hàm Và từ đó có thể trao đổi dữ liệu giữa các ứng dụng
API hiện nay đều tuân thủ theo tiêu chuẩn REST (Representational State Transfer) và HTTP (HyperText Transfer Protocol), tạo sự thân thiện dễ sử dụng với nhà phát triển Giúp người dùng dễ truy cập, dễ hiểu hơn
API thường sử dụng mã nguồn mở, sử dụng được với mọi client hỗ trợ XML, JSON API có khả năng đáp ứng đầy đủ các thành phần HTTP: URI (Uniform Resource Identifier), request/response headers, caching, version, content forma…
Đây là một trong những kiến trúc hỗ trợ tốt nhất với các thiết bị có lượng băng thông bị giới hạn như smartphone, tablet…
3.1.1.1 Ưu điểm:
- Hỗ trợ chức năng RESTful một cách đầy đủ
- Giao tiếp hai chiều phải được xác nhận trong các giao dịch sử dụng API Vì vậy các thông tin rất đáng tin cậy
- API là mã nguồn mở, có thể được kết nối mọi lúc khi có internet
- Cấu hình đơn giản
3.1.1.2 Nhược điểm
- Tốn nhiều chi phí vận hành, phát triển và sửa chữa
- Đòi hỏi kiến thức chuyên sâu
Trang 343.1.2 RESTful API là gì?
REST là từ viết tắt của REpresentational State Transfer Nó được đưa ra vào năm 2000 trong luận văn tiến sĩ của Roy Fielding Như được giới thiệu Rest là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo, cho giao tiếp giữa các máy Vì vậy thay vì sử dụng một URL cho việc xử lý một số thông tin, REST sẽ gửi yêu cầu HTTP như GET, POST, DELETE, … đến một URL để xử lý dữ liệu RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hay framework nào cũng có thể sử dụng để thiết kế một RESTful API
RESTful API là một tiêu chuẩn dùng trong việc thết kế các thiết kế API cho các ứng dụng để quản lý các tài nguyên, chú trọng vào các tài nguyên hệ thống( tệp văn bản, hình ảnh, âm thanh, video, hoặc dự liệu động, ), bao gồm các trạng thái tài nguyên được định dạng và truyền tải qua HTTP RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến nhất ngày nay Trong thực tế, REST đã có những ảnh hưởng lớn và gần như thay thế SOAP (Simple Object Access Protocol) và WSDL (Web Service Description Language) trong thời gian gần đây vì nó đơn giản và dễ sửdụng hơn rất nhiều
Trang 35REST hoạt động dựa vào giao thức HTTP Các hoạt động cơ bản sẽ sử dụng những phương thức HTTP riêng
- GET: Trả về một tài nguyên hoặc một danh sách các tài nguyên
- POST: Tạo mới một tài nguyên
- PUT: Cập nhật thông tin cho tài nguyên
- DELETE: Xoá một tài nguyên
Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa
3.1.3 Thiết kế RESTful Service
3.1.3.1 Dữ liệu trả về
RESTful hỗ trợ trả về dữ liệu với nhiều định dạng khác nhau: XML, JSON, HTML… Vì tính đơn giản, nhẹ và dễ đọc cùng với việc dễ sử dụng để đọc viết, phân tích nên chúng em quyết định chọn JSON, mặt khác JSON cũng được sử dụng rộng rãi bởi dễ dàng trả dữ liệu từ phía Server về Client
3.1.3.2 Các HTTP Method mà RESTful hỗ trợ
Mỗi hành động từ client đến server tương ứng với 1 request method của HTTP:
- Method GET: được sử dụng để truy vấn và lấy dữ liệu từ phía server theo URI đã cung cấp
- Method HEAD: tương tự như method GET nhưng chỉ trả về status code và header, không nhận về body
- Method POST: được sử dụng để tạo mới tài nguyên, gửi dữ liệu tới sever,
ví dụ tạo một câu hỏi mới, trả lời câu hỏi, …
- Method PUT: được sử dụng để cập nhật tài nguyên, ví dụ cập nhật câu hỏi, câu trả lời, thông tin cá nhân
- Method PATCH: được sử dụng để cập nhật một phần dữ liệu, ví dụ cập nhật thông tin thuộc tính tên người dùng, …
- Method DELETE: được sử dụng để xóa đối tượng trên server
Trang 36- Method CONNECT: được sử dụng để thiết lập một kết nối tới server theo URI.
- Method OPTIONS: mô tả các tùy chọn giao tiếp cho tài nguyên
- Method TRACE: thực hiện một bài test loop – back theo đường dẫn đến tài nguyên
3.1.3.3 Cấu trúc của URI
Việc đặt URI cho các API thường được đặt theo kiểu cấu trúc thư mục, nhiều hành động chung 1 URI nhưng khác method, ví dụ:
- GET /questions/123: lấy thông tin câu hỏi có id=123
- POST /questions/create: tạo câu hỏi mới
- PUT /questions/123: cập nhật câu hỏi có id=123
- DELETE /questions/123: xóa câu hỏi có id=123
- GET /questions: lấy thông tin toàn bộ tất cả các câu hỏi
3.1.3.4 Phi trạng thái (Stateless)
Đặc điểm của REST là phi trạng thái (stateless), có nghĩa là nó sẽ không lưu lại thông tin của client mà nó đã giao tiếp, các thông tin được giữ trên client hoặc được chuyển thành trạng thái của tài nguyên Điều này đồng nghĩa với việc REST không quản lý các phiên làm việc (Session) Chẳng hạn khi gửi yêu cầu xem trang đầu tiên (trang 1) của tài liệu và trang tiếp theo chúng ta muốn xem là trang 2 REST sẽ khônglưu giữ lại thông tin trước đó nó đã phục vụ ở trang đầu tiên (trang 1)
Với thiết kế phi trạng thái của REST, Client cần phải gửi yêu cầu (request) rõ rang Và mỗi request trên server phải được đóng gói thông tin đầy đủ để server có thểhiểu được
Như vậy điều này đem lại lợi ích giúp client tách biệt khỏi sự thay đổi của
Trang 37- 400 BAD REQUEST – Status code được trả về khi request không hợp lệ
- 401 UNAUTHORIZED / 403 FORBIDDEN – Status code trả về khi request cần có sự authentication
- 404 Not Found – Status code được trả về khi dữ liệu không được tìm thấy
từ URI
3.2 Node.js
3.2.1 Giới thiệu
Hình 3.2 Node.js
Trang 38Node.js là một nền tảng Server side được xây dựng dựa trên Javascript Engine (V8 Engine) Node.js được phát triển bởi Ryan Dahl năm 2009 và phiên bản cuối cùng là v0.10.36 Định nghĩa NodeJs bởi tài liệu chính thức như sau:
Nền tảng Node.js dựa trên Chrome Javascript runtime để xây dựng các ứng dụng nhanh, có độ lớn Node.js sử dụng các phần phát sinh các sự kiện (event-driven),
mô hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả cho các ứng dụng
về dữ liệu thời gian thực chạy trên các thiết bị phân tán
Node.js là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía Server và các ứng dụng liên quan đến mạng Ứng dụng Node.js được viết bằng Javascript và có thể chạy trong môi trường Node.js trên hệ điều hành Window, Linux
Node.js cũng cung cấp cho chúng ta các module Javascript đa dạng, có thể đơn giản hóa sự phát triển của các ứng dụng web sử dụng Node.js với các phần mở rộng
3.2.2 Đặc điểm
Đặc điểm nổi bật của Node.js là nó nhận và xử lý nhiều kết nối chỉ với một single-thread Điều này giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy vấn giống PHP Ngoài ra, tận dụng ưu điểm non-blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ như PHP
JSON APIs Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON
Ứng dụng trên 1 trang (Single page Application) Nếu bạn định viết 1 ứng dụng thể hiện trên 1 trang (Gmail?) NodeJS rất phù hợp để làm Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh Các ứng dụng bạn định viết không
Trang 39Shelling tools unix NodeJS sẽ tận dụng tối đa Unix để hoạt động Tức là NodeJS có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất.
Streamming Data (Luồng dữ liệu) Các web thông thường gửi HTTP request
và nhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác
Ứng dụng Web thời gian thực Với sự ra đời của các ứng dụng di động & HTML 5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter
3.2.3 Express Framework
Hình 3.3 Express.jsExpress.js là một trong những framework phổ biến dùng để xây dựng API và Website phổ biến nhất của NodeJS Nó được sử dụng rộng rãi đến mức hầu như mọi
dự án Web nào đều bắt đầu bằng việc tích hợp Express Có rất nhiều lý do để chọn Express:
- Có nhiều tính năng hỗ trợ tất cả những gì bạn cần trong việc xây dựng Web
và API
- Quản lý các route dễ dàng
Trang 40- Cung cấp một nền tảng phát triển cho các API
- Hỗ trợ nhiều thư viện và plugin
- Bảo mật và an toàn hơn so với việc code thuần
- Hỗ trợ cộng đồng tuyệt vời
3.2.4 Lý do sử dụng Node.js
Node.js thực sự tỏa sáng trong việc xây dựng RESTful API (json) Gần như không có ngôn ngữ nào xử lý JSON dễ dàng hơn Javascript, chưa kể các API server thường không phải thực hiện những xử lý nặng nề nhưng lượng concurrent request thì rất cao Mà Node.js thì xử lý non-blocking Chẳng còn gì thích hợp hơn Node.js trong trường hợp này
Những ứng dụng đòi hỏi các giao thức kết nối khác chứ không phải chỉ có HTTP Với việc hỗ trợ giao thức TCP, từ đó bạn có thể xây dựng bất kỳ một giao thức custom nào đó một cách dễ dàng
Node.js xử lý mọi request trên cùng một process giúp cho việc xây dựng các
bộ nhớ đệm chưa bao giờ đơn giản đến thế: Hãy lưu nó vào một biến global, và thế
là mọi request đều có thể truy cập đến bộ nhớ đệm đó Caching sẽ không còn quá đau đầu như trước đây, và bạn có thể lưu cũng như chia sẻ trạng thái của một client với các client khác ngay trong ngôn ngữ, chứ bạn không cần thông qua các bộ nhớ ngoài