đồ án 2 xây dựng ứng dụng kết nối người có nhu cầu nâng cao khả năng giao tiếp ngoại ngữ

Với hình thức một mạng xã hội, ứng dụng cung cấp các tính năng nổi bậtbao gồm:● Tìm bạn luyện tập ngoại ngữ theo điều kiện, yêu cầu phù hợp với nhu cầu cá nhân● Gọi trực tuyến thời gian

KHOA CÔNG NGHỆ PHẦN MỀM

XÂY DỰNG ỨNG DỤNG KẾT NỐI NGƯỜI CÓ NHU CẦU NÂNG CAO KHẢ NĂNGGIAO TIẾP NGOẠI NGỮ

Đồ án 2

Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc

Sinh viên thực hiện:

20520353 – Trương Xuân Vương 20520377 – Trần Bảo Ân

Thành phố Hồ Chí Minh, tháng 01 năm 2024

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

XÂY DỰNG ỨNG DỤNG KẾT NỐI NGƯỜI CÓ NHU CẦU NÂNG CAO KHẢ NĂNGGIAO TIẾP NGOẠI NGỮ

Đồ án 2

Giảng viên hướng dẫn: ThS Nguyễn Thị Thanh Trúc

Sinh viên thực hiện:

20520353 – Trường Xuân Vương 20520377 – Trần Bảo Ân

Thành phố Hồ Chí Minh, tháng 01 năm 20231.ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG KẾT NỐI NGƯỜI CÓ NHU CẦU NÂNG CAO KHẢNĂNG GIAO TIẾP NGOẠI NGỮ

Cán bộ hướng dẫn: ThS Nguyễn Thị Thanh Trúc

Thời gian thực hiện: Từ ngày 05/09/2023 đến ngày 31/12/2023Sinh viên thực hiện:

20520353 – Trương Xuân Vương20520377 – Trần Bảo Ân

Nội dung đề tài:

Mục tiêu:

Xây dựng được ứng dụng website với giao diện thân thiện, màu sắc hài hòa, bố cụchợp lý; đáp ứng được các tính năng cần thiết với ngôn ngữ Javascript, công nghệ mớiReactJS, Java Spring Boot và chuẩn bảo mật JWT, áp dụng công nghệ gọi thời gianthực, phục vụ cho mục đích thiết thực là học và luyện tập ngoại ngữ với hình thức mớiđầy thú vị Với hình thức một mạng xã hội, ứng dụng cung cấp các tính năng nổi bậtbao gồm:

● Tìm bạn luyện tập ngoại ngữ theo điều kiện, yêu cầu phù hợp với nhu cầu cá nhân

● Gọi trực tuyến thời gian thực

● Nhắn tin với bạn bè

● Luyện tập thông qua các bài tập được cung cấp

● Cung cấp thông tin và tài liệu chuyên môn cho người dùng

● Quản lý hồ sơ cá nhân

Phạm vi:

Đề tài xây dựng một website cho những người có nhu cầu luyện tập giao tiếp ngoạingữ có thể tìm và kết nối với nhau, ứng dụng hỗ trợ trong việc nhắn tin, gọi điện traođổi thông tin học tập với nhau, luyện tập thông qua các bài tập được cung cấp tronghệ thống Ngoài ra người dùng có thể quản lý thời gian luyện tập Từ đó, họ biết đượcthời gian họ sử dụng cho việc luyện tập và tiến độ học tập, đưa ra kế hoạch luyện tậpphù hợp để nhanh chóng đạt được mục tiêu Bên cạnh đó, người dùng có thể quản lýhồ sơ cá nhân, đăng tải video bài viết liên quan.

Đối tượng sử dụng:

Người dùng có nhu cầu luyện tập ngoại ngữ với người thật, chia sẻ tài liệu học ngoạingữ, hoặc người dùng muốn tham gia vào cộng đồng học ngoại ngữ giúp đỡ nhữngbạn đang trong quá trình học.

Kết quả mong đợi:

Biết được quy trình xây dựng một website theo AgileBiết được công nghệ mới và phổ biến hiện nay

Xây dựng được một ứng dụng website đáp ứng mục tiêu đề raWebsite có khả năng mở rộng trong tương lai

2.LỜI CẢM ƠN

Đồ án với đề tài “XÂY DỰNG ỨNG DỤNG KẾT NỐI NGƯỜI CÓ NHU CẦU NÂNGCAO KHẢ NĂNG GIAO TIẾP NGOẠI NGỮ” là minh chứng cho quá trình cố gắng

không ngừng trong việc tìm tòi, học hỏi khi học tập tại trường Đại học Công nghệThông tin, thể hiện khả năng của bản thân trong việc áp dụng kiến thức chuyênmôn vào giải quyết bài toán thực tế.

Trong quá trình thực hiện đồ án, em đã nhận được sự hướng dẫn tận tình từ cô.Một cách đặc biệt, em xin được gửi lời cảm ơn chân thành đến:

Các thầy cô trường Đại học Công nghệ Thông Tin nói chung và thầy cô ở KhoaCông nghệ phần mềm nói riêng đã tận tình truyền đạt kiến thức tới em trongnhững năm học tập tại trường Đó là tài sản quý báu đã giúp em hoàn thành khóaluận và cũng là hành trang cho con đường sự nghiệp của bản thân sau này.

Em xin được gửi lời cảm ơn sâu sắc tới ThS Nguyễn Thị Thanh Trúc, người đãtrực tiếp hướng dẫn, chỉ bảo, giúp đỡ em những lúc khó khăn, đưa ra những lờikhuyên bổ ích để khoá luận được hoàn thành đúng tiến độ và đáp ứng các yêucầu đề ra ban đầu.

Các thành viên trong nhóm đã luôn nỗ lực phấn đấu, lắng nghe và luôn sẵn sànghỗ trợ nhau trong suốt cả quá trình học tập và thực hiện đồ án Để đạt được kếtquả như ngày hôm nay.

Lời cuối cùng, em xin dành lời cảm ơn gửi tới gia đình, anh chị, bạn bè đã luônbên cạnh để động viên và đóng góp ý kiến trong quá trình hoàn thành đồ án này.Thành phố Hồ Chí Minh, tháng 12 năm 2023

Trương Xuân VươngTrần Bảo Ân

3 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Chương 1 GIỚI THIỆU TỔNG QUAN ĐỀ TÀI

1.1 Lý do chọn đề tài1.2 Mục tiêu

1.3 Phạm vi1.4 Đối tượng

1.5 Phương pháp thực hiện1.6 Công nghệ sử dụng1.7 Kết quả mong đợi

1.8 Khảo sát các ứng dụng liên quan1.8.1 Tinder

1.8.1.1 Nghiệp vụ1.8.2.2 Công nghệ1.8.2 Duolingo

1.9 Quy trình thực hiện

Tìm hiểu về service call realtime videosdk

Chương 2 CÔNG NGHỆ SỬ DỤNGChương 3 PHÂN TÍCH BÀI TOÁN

3.1 Phát biểu bài toán

3.2 Phân tích yêu cầu chức năng3.3 Phân tích yêu cầu phi chức năng3.4 Phân tích yêu cầu người dùng

Chương 4 THIẾT KẾ HỆ THỐNG

4.1 Use case Diagram4.1.1 Sơ đồ Use case

4.2 Thiết kế kiến trúc hệ thống4.2.1 Kiến trúc tổng thể4.2.2 Kiến trúc thư mục4.3 Thiết kế giao diện

4.3.1 Danh sách các màn hình4.3.2 Sơ đồ liên kết màn hình

Chương 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

5.1 Kết quả đạt được5.2 Thuận lợi và khó khăn

5.2.1 Thuận lợi5.2.2 Khó khăn5.3 Hướng phát triển

4 TÀI LIỆU THAM KHẢO

Nhiều năm trở lại đây, người học không chỉ dừng ở kĩ năng đọc – viết mà họ cònmuốn phát triển mạnh kỹ năng nghe – nói bởi đây mới là kĩ năng được sử dụngnhiều trong thực tế Thế nhưng khác với đọc – viết, người học kỹ năng nghe – nóiđòi hỏi cần có môi trường luyện tập Hiện nay, nhiều người có nhu cầu luyện tậpnhưng không biết tìm môi trường luyện tập ở đâu hoặc họ phải chi trả mức giákhá cao để đến các trung tâm luyện tập Nắm bắt được nhu cầu người dùng, cácwebsite luyện tập nghe nói tiếng Anh ra đời Các website đi theo hai xu hướng:Một là, sử dụng AI để đánh giá khả năng và người dùng tập đọc theo hướng dẫn.Khuyết điểm của ứng dụng loại này là người dùng khó tạo ra tình huống giao tiếpchủ động như trong thực tế Hai là, website kết nối người có nhu cầu luyện tập.Website loại này khắc phục được hạn chế của website loại một tuy nhiên sốlượng website dành cho mục đích học ngoại ngữ tương tự như thế vẫn còn hạn

chế rất nhiều về hình thức và chức năng

Chủ quan:

Trong suốt quá trình học tập, nhóm chúng em đã trải nghiệm qua các ứng dụngkhác nhau và hoạt động trên nhiều nền tảng Cảm thấy hứng thú với công nghệweb và nắm bắt được nhu cầu từ thực tế, nhóm đã đề xuất ý tưởng xây dựngmột website để tạo môi trường luyện tập ngoại ngữ, không chỉ giới hạn ở tiếngAnh mà còn có thể sử dụng cho các loại ngôn ngữ khác Đây là trải nghiệm lầnđầu của nhóm về việc xây dựng một website hoàn chỉnh Ngoài ra, nhóm ấp ủmột sản phẩm hoàn thiện hơn, với việc nghiên cứu và xây dựng các giải pháp chomột hệ thống tự động, sử dụng công nghệ trí tuệ nhân tạo để nâng cao khả nănghỗ trợ người dùng.

1.2 Mục tiêu

● Hoàn thiện thêm ứng dụng website với giao diện thân thiện, màu sắc hàihòa, bố cục hợp lý

● Đáp ứng được các tính năng cần thiết

● Kết nối cộng đồng học tiếng Anh: Dự án này sẽ giúp kết nối những ngườihọc tiếng Anh trên toàn cầu, tạo ra một cộng đồng đa dạng về ngôn ngữ vàvăn hóa, giúp họ học từ nhau và thúc đẩy sự giao lưu văn hóa

● Hỗ trợ học tập và thực hành: Mạng xã hội kết nối người học tiếng Anh cóthể cung cấp các công cụ và tài liệu học tập, cũng như cơ hội thực hànhngôn ngữ qua việc trò chuyện và viết.

● Động viên và thúc đẩy: Dự án này có thể cung cấp hệ thống động viên vàthưởng cho người học tiếng Anh, giúp họ duy trì động lực và sự cam kếtđối với việc học tiếng Anh.

● Phân tích dữ liệu: Mạng xã hội này có thể thu thập dữ liệu về hoạt độnghọc tập của người dùng, giúp tổ chức và cá nhân hiểu rõ hơn về tiến trìnhhọc tập và cách cải thiện.

● Khả năng thương mại hóa, tạo ra cơ hội kinh doanh: Một mạng xã hội kếtnối người học tiếng Anh cũng có thể tạo ra cơ hội kinh doanh thông quaquảng cáo, các khóa học trực tuyến, và các dịch vụ hỗ trợ học tập khác

1.3 Phạm vi

Phát triển website cho phép người dùng

● Tương tác trực tiếp thời gian thực với nhau thông qua chức năng gọi

● Lọc, tìm kiếm người phù hợp

● Kết nối người dùng có nhu cầu luyện tập ngoại ngữ với nhau

● Quản lý thời gian luyện tập ngoại ngữ từ đó người dùng có chiến lượcluyện tập cho phù hợp

● Luyện tập ngoại ngữ thông qua các bài tập được cung cấp sẵn trong hệthống

● Khảo sát ý kiến người dùng tiềm năng

1.7 Kết quả mong đợi

● Xây dựng một website theo quy trình phát triển phần mềm chuyên nghiệp

● Cung cấp các chức năng quan trọng và đạt được mục tiêu ứng dụng đã đềra

● Website có khả năng mở rộng trong tương lai

● Có khả năng nghiên cứu, phân tích khi gặp một vấn đề, bài toán

1.8 Khảo sát các ứng dụng liên quan 1.8.1 Tinder

Lấy cảm hứng từ ứng dụng tìm bạn hẹn hò phổ biến nhất hiện nay - Tinder, nhómnghiên cứu quyết định khảo sát chính ứng dụng mục tiêu để so sánh, phân tích,tìm ra các điểm mạnh và hạn chế để áp dụng vào ứng dụng mục tiêu Là ứng dụng

trung tâm mà ứng dụng của nhóm nghiên cứu sử dụng để thực hiện đề tài, nhómnghiên cứu quyết định phân tích và khảo sát kĩ Tinder về cả mặt nghiệp vụ vàcông nghệ để có góc nhìn toàn diện, phát huy ưu điểm và khắc phục hạn chế củaứng dụng hiện tại.

1.8.1.1 Nghiệp vụ

Tinder sử dụng các thuật toán đề xuất để cung cấp cho người dùng những kếtquả phù hợp, tiềm năng dựa trên nhiều yếu tố khác nhau như địa điểm, tuổi tác,sở thích… Về mặt nghiệp vụ, các yếu tố mà Tinder sử dụng:

● Thông tin hồ sơ: Tinder xem xét thông tin người dùng cung cấp trong hồ sơcủa họ, chẳng hạn như tuổi, vị trí, tiểu sử và sở thích Người dùng thườngđặt các tùy chọn tiêu chuẩn về tuổi, khoảng cách địa lý, giới tính, củanhững người phù hợp tiềm năng và thuật toán sẽ tính đến các tùy chọnnày khi tạo đề xuất.

● Hành vi tương tác với ứng dụng: Ứng dụng theo dõi hành vi tương tác củangười dùng, ghi chú các hồ sơ họ chọn hoặc không chọn Thuật toán sửdụng dữ liệu này để tìm hiểu sở thích thật sự của người dùng và cải thiệnđộ chính xác của các đề xuất trong tương lai.

● Lịch sử đối sánh: Thuật toán xem xét lịch sử đối sánh và cuộc trò chuyệncủa người dùng Nếu trước đây người dùng đã khớp và tương tác tích cựcvới các hồ sơ thể hiện một số đặc điểm nhất định thì thuật toán có thể ưutiên hiển thị các hồ sơ tương tự.

● Cấp độ hoạt động: Người dùng đang tích cực sử dụng ứng dụng và tươngtác với hồ sơ có thể nhận được đề xuất chính xác hơn Thuật toán có thểchú trọng hơn đến hoạt động gần đây, đảm bảo rằng các đề xuất phản ánhsở thích hiện tại.

● Học máy và AI: Tinder có thể sử dụng các kỹ thuật học máy và trí tuệ nhân

tạo để liên tục cải thiện hệ thống đề xuất của mình Các thuật toán này cóthể xác định các mô hình và xu hướng trong hành vi của người dùng mà cóthể không rõ ràng ngay lập tức, từ đó đưa ra các đề xuất được tinh chỉnhvà cá nhân hóa hơn theo thời gian.

● Phản hồi của người dùng: Phản hồi của người dùng, chẳng hạn như sự cốđược báo cáo hoặc câu chuyện thành công, có thể được sử dụng để tinhchỉnh thuật toán đề xuất Tinder có thể phân tích phản hồi để xác định cáclĩnh vực cần cải thiện và điều chỉnh thuật toán cho phù hợp.

● So khớp dựa trên vị trí: Do tính chất địa lý xã hội của các ứng dụng hẹn hò,thuật toán của Tinder sẽ tính đến khoảng cách địa lý của người dùng Nógợi ý các trận đấu trong một khoảng cách nhất định để tăng khả năng xảyra các cuộc gặp trong thế giới thực.

Các yếu tố trên đây cũng sẽ là các yếu tố về mặt nghiệp vụ mà nhóm nghiên cứusử dụng để lọc và gợi ý người dùng phù hợp trong ứng dụng mục tiêu.

● Phân tích dữ liệu: Dữ liệu được phân tích bằng các kỹ thuật AI và MachineLearning khác nhau Thuật toán AI xác định các mẫu và xu hướng trong dữliệu để hiểu sở thích và mối quan tâm của người dùng Cụ thể, Tinder sử

dụng thuật toán NLP và máy học (ML) để xác định các mẫu và xu hướngkhác nhau trong dữ liệu, đồng thời hiểu sở thích và mối quan tâm củangười dùng.

● Kết nối: Dựa trên phân tích, Tinder sẽ sử dụng thuật toán AI để tìm kiếmnhững kết quả phù hợp tiềm năng cho người dùng Thuật toán xem xét cácyếu tố như vị trí, độ tuổi, giới tính, sở thích và các lần vuốt qua lại để đềxuất các kết quả phù hợp tiềm năng.

● Vòng phản hồi: Tinder sử dụng vòng phản hồi để liên tục cải tiến thuậttoán AI dựa trên phản hồi của người dùng Nếu người dùng vuốt sang phảitrên một kết quả phù hợp, thuật toán sẽ biết rằng kết quả phù hợp đó làđề xuất phù hợp Nếu người dùng vuốt sang trái trên một kết quả phùhợp, thuật toán sẽ biết rằng kết quả phù hợp đó không phải là đề xuất phùhợp.

Bằng cách sử dụng AI, Tinder đã đạt được mức độ cá nhân hóa và độ chính xáccao trong việc kết nối người dùng Người dùng nhận được các đề xuất phù hợpvới sở thích của họ, tăng khả năng tìm thấy kết quả phù hợp.

Tinder phát triển ứng dụng di động trên thiết bị di động:

● Ngôn ngữ: Các ứng dụng di động của Tinder có thể được phát triển bằngcác ngôn ngữ native, cụ thể Swift cho iOS và Kotlin/Java cho Android.● Framework: Framework ứng dụng dành cho thiết bị di động, bao gồm

UIKit cho iOS và SDK Android cho Android, được sử dụng để xây dựng giaodiện người dùng và quản lý hành vi ứng dụng.

Về phía Backend, Tinder sử dụng Microservices với các công nghệ, ngôn ngữ nhưsau:

● Java Spring Boot: Java là ngôn ngữ thường được sử dụng để xây dựng các

hệ thống phụ trợ mạnh mẽ và có thể mở rộng Tinder có thể sử dụng Javacho cơ sở hạ tầng phụ trợ của mình Spring Boot, một framework dựa trênJava, được biết đến với vai trò đơn giản hóa việc phát triển các ứng dụngsẵn sàng sản xuất Có thể Tinder sử dụng Spring Boot cho các dịch vụ phụtrợ của mình.

● Node.js: Một số báo cáo cho thấy Tinder sử dụng Node.js cho các phầnbackend của nó, tận dụng kiến trúc không đồng bộ và hướng sự kiện củaJavascript, Tinder kết hợp giữa Node và Spring Boot để tối ưu hóa phíaBackend.

Cơ sở dữ liệu:

● MongoDB: MongoDB, cơ sở dữ liệu NoSQL, thường được liên kết vớiTinder Lược đồ linh hoạt và khả năng mở rộng của nó làm cho nó phù hợpđể xử lý dữ liệu liên quan đến hồ sơ và tương tác của người dùng.

● Redis: Redis, kho lưu trữ dữ liệu trong bộ nhớ, có thể được sử dụng để lưuvào bộ nhớ đệm dữ liệu được truy cập thường xuyên và cải thiện hiệu suấttổng thể của hệ thống.

Định vị địa lý:

● API Google Maps: Tinder dựa vào vị trí địa lý để kết nối người dùng vớinhững người phù hợp tiềm năng ở vùng lân cận của họ API Google Mapsthường được sử dụng để tích hợp các dịch vụ bản đồ và vị trí.

Dịch vụ điện toán đám mây:

● Amazon Web Services (AWS): Nhiều công ty công nghệ, bao gồm Tinder,tận dụng AWS cho các dịch vụ điện toán đám mây, lưu trữ và khả năng mởrộng.

Giao tiếp thời gian thực:

● WebSockets: Các tính năng thời gian thực, chẳng hạn như chức năng tròchuyện, có thể được triển khai bằng WebSockets để cho phép liên lạc tứcthì giữa những người dùng.

Giám sát và phân tích:

● Relic mới, Google Analytics hoặc các công cụ tương tự: Những công cụ nàygiúp theo dõi hiệu suất ứng dụng, theo dõi mức độ tương tác của ngườidùng và thu thập dữ liệu phân tích.

Nhìn chung, các công nghệ do Tinder sử dụng hiện tại đang ở mức hiện đại và tốiưu hóa trong việc vận hành, bảo trì và phát triển ứng dụng Các công cụ phân tíchvà thu thập dữ liệu người dùng cho nhóm nghiên cứu thêm nhiều thông tin hữuích trong việc tìm ra hướng nghiên cứu, phát triển và kết hợp các thuật toán Vớicác ưu điểm trong công nghệ mà Tinder đang dùng, cụ thể là Spring boot và môhình microservices, nhóm nghiên cứu quyết định áp dụng công nghệ tương tựcho đồ án của mình.

Tuy nhiên, giải thuật và các vận hành cũng như công nghệ bên trong Tinder vẫn

còn là bí mật Tinder không phải là một ứng dụng mã nguồn mở Thêm vào đó, đểphù hợp với mục tiêu sử dụng là học tập và luyện tập ngoại ngữ, nhóm nghiêncứu triển khai ứng dụng trên web thay vì trên điện thoại như Tinder Bởi lẽ, ứngdụng trên website tạo ra không gian học tập, phù hợp với nhu cầu người dùnghơn là ứng dụng trên điện thoại.

1.8.2 Duolingo

Về mặt phân tích nghiệp vụ, nhóm nghiên cứu chọn Duolingo làm ứng dụng khảosát Duolingo là một nền tảng học ngôn ngữ phổ biến cung cấp phương pháp tiếpcận trò chơi cho giáo dục ngôn ngữ Với nhiều thành tích ấn tượng theo thông tinđăng tải trên trang Medium, như số lượt tải xuống hơn 1 tỷ, số lượt người dùnghoạt động mỗi tháng hơn 54 triệu, Duolingo hiện đang được nhiều người họcngoại ngữ, đặc biệt là tiếng Anh tin tưởng sử dụng Chính vì lý do đó, nhómnghiên cứu quyết định chọn Duolingo làm ứng dụng để phân tích Sau quá trìnhnghiên cứu, nhóm rút ra các kết luận về mặt nghiệp vụ như sau:

Các tính năng và chiến lược chính:

● Gamification: Duolingo kết hợp các yếu tố gamification để làm cho quátrình học ngôn ngữ trở nên hấp dẫn và thú vị Người dùng kiếm đượcđiểm, cạnh tranh với bạn bè và duy trì thành tích để khuyến khích việc sửdụng nhất quán.

● Dịch thuật nhờ cộng đồng: Duolingo đã tận dụng cơ sở người dùng củamình cho các dịch vụ dịch thuật ngôn ngữ Người dùng có thể đóng gópvào việc dịch nội dung trong thế giới thực, cung cấp dịch vụ có giá trị đồngthời cải thiện kỹ năng ngôn ngữ của họ.

● Phương pháp tiếp cận ưu tiên thiết bị di động: Duolingo được thiết kế tậptrung vào thiết bị di động, giúp người dùng có thể truy cập được trên điệnthoại thông minh và máy tính bảng Giao diện thân thiện với người dùng

của ứng dụng và các bài học ngắn, mang tính tương tác phục vụ cho việchọc tập khi đang di chuyển.

● Cung cấp ngôn ngữ rộng rãi: Duolingo cung cấp các khóa học bằng nhiềungôn ngữ, khiến nó trở nên hấp dẫn đối với người dùng có nhu cầu họcngôn ngữ đa dạng Sự bao gồm này đã góp phần vào sự phổ biến của nótrên toàn cầu.

● Học theo hướng dữ liệu: Duolingo sử dụng phân tích dữ liệu để theo dõitiến trình của người dùng và điều chỉnh trải nghiệm học tập Điều này chophép các lộ trình học tập được cá nhân hóa, thích ứng với điểm mạnh vàđiểm yếu của từng cá nhân.

● Khảo sát kiến thức cho người lần đầu tiên sử dụng ứng dụng.

● Thường xuyên nhắc nhở người học bằng nhiều cách thú vị và hóm hỉnhnên gây được chú ý từ người dùng.

Những thách thức và hạn chế:

● Mối quan tâm về tính hiệu quả: Duolingo cho thấy độ ảnh hưởng chongười dùng ở trình độ căn bản và trung bình Tuy nhiên, ở những mức caohơn, các chuyên gia cho rằng ứng dụng khó có thể đạt được hiệu quả đặcbiệt là trong giao tiếp Nói cách khác, phương pháp này chưa thật sự manglại hiệu quả cho người có nhu cầu luyện giao tiếp

● Chất lượng của bản dịch nhờ nguồn lực cộng đồng: Độ chính xác và độ tincậy của các bản dịch được tạo ra thông qua nguồn lực cộng đồng đã bị chỉtrích vì chúng không phải lúc nào cũng đáp ứng các tiêu chuẩn chuyênnghiệp.

● Cạnh tranh: Thị trường ứng dụng học ngôn ngữ có tính cạnh tranh cao, vớimột số lựa chọn thay thế cung cấp các cách tiếp cận và tính năng khácnhau Duolingo phải liên tục đổi mới để luôn dẫn đầu.

1.9 Quy trình thực hiện

Bảng 1 Phân công công việc

TuầnThành viên 1(Vương)

Thành viên 2(Ân)

Thiết kế Cơ sở dữ liệuTạo codebase cho Backend

Thiết kế giao diệnTạo codebase cho Frontend

Soạn báo cáo

- Tìm hiểu Spring boot- Tìm hiểu Spring security

- Tìm hiểu ReactJS cơ bản

- Tìm hiểu React Hook: useState, useEffect, useMemo…

- Tìm hiểu React Router

- Tìm hiểu thư viện UI: Bootstrap, Ant Design- Hiện thực giao diện: trang Login, trang Sign Up

Soạn báo cáo

Code api cho tính năng đăng nhập, đăng xuất, gửi yêu cầu, từ chối, chấp nhận yêu cầu, hủy kết bạn

Code giao diện chomàn hình thống kê,màn hình xem danhsách người có thể gửiyêu cầu, danh sách bạnbè, gắn api cho tínhnăng đăng nhập, đăngký

Tìm hiểu về service call realtime

Code api cho tính năngquản lý tài khoản, quảnlý bài tập, làm bài tập,tìm hiểu socket áp dụngcho tính năng nhắn tin

Code giao diện chotính năng nhắn tin, gọiđiện, làm bài tập, gắnapi cho tính năng gửiyêu cầu, từ chối, chấpnhận yêu cầu, hủy kếtbạn

Triển khai socket, áp dụng vào tính năng nhắn tin, thông báo cho người dùng, thống kê các hoạt động của người dùng

Code giao diện và gắn api cho tính năng quản lý tài khoản, quản lý bài tập, gắn api cho tính năng làm bài tập

Nghiên cứu tích hợp api của service videosdk vào hệ thống

Triển khai tính năng nhắn tin, thông báo dựa trên socket

Fix bug còn lại và hỗ trợcho frontend

Tích hợp videosdk vàohệ thống để thực hiệncall

Fix bug giao diện

Chương 2CÔNG NGHỆ SỬ DỤNG2.1 Frontend

ReactJS, thường được gọi tắt là React, là một thư viện Javascript mã nguồn mở được sử dụng để xây dựng giao diện người dùng, đặc biệt cho các single-page application Nó được biết đến với khả năng linh hoạt và hiệu năng cao trong việc tạo ra các giao diện người dùng phức tạp Được phát triển và duy trì bởi

Facebook, React đã nhận được sự yêu thích rộng rãi của các cộng đồng lập trình viên.

Các khái niệm chính của React:

● Component-based architecture: chia các thành phần lớn thành các thành phần nhỏ hơn nhằm dễ đọc, dễ bảo trì và có tính tải sử dụng.

● Virtual DOM: React sử dụng virtual Document Object Model (DOM), cho phép cập nhật và hiển thị giao diện người dùng một cách hiệu quả Khi trạng thái của một thành phần (component) thay đổi, React chỉ cập nhật phần DOM thực bị thay đổi thay vì tải lại toàn bộ trang.

● JSX: là một phần mở rộng cú pháp cho Javascript tương tự như HTML Nó được dùng trong React để mô tả các cấu trúc UI JSX giúp cho code dễ đọc hơn và dễ dàng hơn trong việc viết code React.

● State and Props: là các khái niệm chính trong React State (trạng thái) đề cập đến dữ liệu thay đổi theo thời gian của một thành phần Props (viết tắtcủa properties) được dùng để truyền dữ liệu từ thành phần cha đến thành phần con.

Hình 3: ReactJS

ViteJS là một front-end build tool giúp cải thiện đáng kể trải nghiệm cho phát triển web Được phát triển bởi Evan You, người tạo ra Vue.js, ban đầu Vite được tạo ra để phục vụ hệ sinh thái Vue nhưng sau đó đã phát triển để hỗ trợ nhiều framework khác như React, Svelte, Vanilla.

Các tính năng chính:

● Khởi động máy chủ nhanh: Vite vận dụng hệ thống mô đun gốc của Javascript để phục vụ code Phương pháp này cho phép thời gian khởi động máy chủ cực kỳ nhanh chóng, do các tập tin chỉ được xử lý khi chúng được yêu cầu.

● Tối ưu hóa quá trình build: build cho môi trường thực tế, Vite sử dụng Rollup Rollup là một trình đóng gói hiệu quả cao, tạo ra mã được tối ưu để có thời gian tải trang nhanh hơn.

● Hot Module Replacement (HMR): cho phép thay thế các mô đun mà không

cần tải lại trang, cải thiện trải nghiệm phát triển.

● Typescript Support: nó hỗ trợ các built-in của Typescript, cho phép các nhàphát triển sử dụng mà không cần cài đặt gì thêm.

Hình 3: ViteJS

Typescript là một dự án mã nguồn mở được phát triển và duy trì bởi Microsoft Nó là có được coi là phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript.

Các tính năng chính:

dịch sẽ giảm được tỷ lệ gán sai kiểu của các giá trị Toàn bộ các khai báo sẽ bị xóa sau khi đã biên dịch từ Typescript thành công sang Javascript.

trợ việc sử dụng class để phát triển theo hướng đối tượng, import và

export phân chia code thành các module nhỏ hơn, dễ tổ chức, dễ bảo trì.

tái sử dụng hơn.

có Các thư viện, framework của Javascript có thể dùng được trong Typescript và code Typescript có thể được biên dịch sang Javascript.

Hình 4: Typescript

2.1.4Redux toolkit

Redux là một công quản lý state phổ biến trong hệ sinh thái React Được sử dụng nhằm quản lý state một cách hiệu quả, chia sẻ state giữa các thành phần mà không phải thông qua props Redux toolkit là một package được sinh ra nhằm giảiquyết phần lớn vấn đề về config của redux khá dài dòng để sử dụng.

Các khái niệm chính của Redux bao gồm:

● Actions: đơn giản là các events Chúng là cách mà chúng ta gửi dữ liệu từ app đến Redux store Những dữ liệu này có thể là từ sự tương tác của

người dùng với app, API calls hoặc cũng có thể là từ form submission.●Reducers: là các hàm dùng để lấy state hiện tại của app, thực hiện một

action và trả về một state mới Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store.

●Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods.

Hình 5: mô hình hoạt động của Redux

Axios là một thư viện HTTP Client được phát triển dựa trên đối tượng Javascript Promise Nó có thể sử dụng trong các ứng dụng front-end Vue.js, React,

Angular Sử dụng Axios dễ dàng gửi đi các request HTTP bất đồng bộ đến các REST endpoint và thực hiện các chức năng CRUD.

Các tính năng chính:

● Auto-configuration: Spring boot tự động cấu hình ứng dụng của bạn dựa trên các jar dependencies mà bạn đã thêm, giúp cho việc cài đặt và cấu hình trở nên đơn giản hơn.

● Spring data integration: Đơn giản hóa việc truy cập và thao tác dữ liệu

thông qua việc tích hợp Spring data repositories.

● Actuator module: cung cấp các built-in endpoints để theo dõi và quản lý tình trạng, số liệu của ứng dụng, …

● Embedded Tomcat, Jetty, or Undertow: được tích hợp các embedded HTTP servers như Tomcat, Jetty, or Undertow, loại bỏ nhu cầu triển khai máy chủ bên ngoài.

Spring Security được thiết kế theo kiến trúc plugin, cho phép tùy biến linh hoạt và

dễ dàng theo nhu cầu của ứng dụng và được tích hợp sẵn với các thành phần khác của Spring Framework, như Spring Boot, Spring MVC, Spring Data, Spring Cloud, và Spring WebFlux

Spring Security hoạt động theo mô hình client-server Khi một client gửi một request đến server, server sẽ xác thực người dùng và phân quyền để đảm bảo rằng người dùng chỉ có thể truy cập vào những tài nguyên mà họ được phép truy cập Cơ chế hoạt động của Spring Security dựa trên cơ chế lọc (filter) và sự kiện (event) để can thiệp vào quá trình xử lý yêu cầu (request) và phản hồi (response) của ứng dụng web, tức là khi một yêu cầu được gửi đến ứng dụng web, nó sẽ được chuyển qua một chuỗi các bộ lọc (filter chain) do Spring Security quản lý Mỗi bộ lọc có một nhiệm vụ cụ thể, như kiểm tra xác thực, kiểm tra phân quyền, điều hướng đến trang đăng nhập hoặc đăng xuất, xử lý các lỗi bảo mật.

Hình 8: Cơ chế Filter Chain trong Spring Security

2.2.3Spring JPA

Spring Data JPA là một công nghệ trong Spring Boot cung cấp cho chúng ta các tính năng để dễ dàng tương tác với cơ sở dữ liệu Nó là một phần mở rộng của JPA (Java Persistence API) và sử dụng Hibernate để thực hiện các thao tác trên cơ

sở dữ liệu.

Với Spring Data JPA, chúng ta không cần phải viết các truy vấn SQL trực tiếp mà có thể sử dụng các phương thức được tạo tự động từ các Repository Interface đểthực hiện các truy vấn đó Ngoài ra, Spring Data JPA cũng cung cấp cho chúng ta các tính năng như Paging and Sorting, Query By Example, Specification, Native Queries, giúp tăng tính linh hoạt và hiệu suất trong ứng dụng của chúng ta.

Hình 9: Luồng hoạt động của JPA

2.3 Database - PostgreSQL

PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ-đối tượng relational database management system) mã nguồn mở Được đánh giá cao về tính ổn định và bảo mật, với nhiều tính năng nâng cao như kiểm soát truy cập, mã hóa dữ liệu và xác thực Nó cũng hỗ trợ nhiều loại dữ liệu và phương pháp truy vấn phức tạp, giúp cho việc lưu trữ và truy xuất dữ liệu trở nên dễ dàng hơn.

(object-Các ưu điểm của PostgreSQL:

● Cộng đồng lớn và chuyên nghiệp: PostgreSQL được phát triển và bảo trì bởi một cộng đồng lớn và đầy nhiệt huyết Những người tham gia trong cộng đồng này đều là những chuyên gia về cơ sở dữ liệu và có kinh nghiệmthực tiễn.

● Hiệu suất cao: Có thể xử lý được tập dữ liệu lớn và đa dạng, đồng thời cung cấp các tính năng như phân vùng bảng, lập danh mục nâng cao và truy vấn đọc song song giúp tăng hiệu suất truy vấn.

● Bảo mật cao: Cung cấp nhiều tính năng bảo mật như hệ thống kiểm soát truy cập mạnh mẽ, bảo mật cấp độ cột và hàng, xác thực đa dạng và khả năng mã hóa dữ liệu.

● Tính linh hoạt: Cho phép định nghĩa các kiểu dữ liệu tùy chỉnh, xây dựng các hàm tùy chỉnh và viết mã từ các ngôn ngữ lập trình khác nhau Điều này giúp cho các nhà phát triển có thể tùy chỉnh cơ sở dữ liệu cho phù hợpvới nhu cầu của ứng dụng.

● Hỗ trợ trên nhiều điều hành: PostgreSQL có thể chạy trên nhiều hệ điều hành khác nhau như Linux, Windows và macOS.

● Cập nhật thường xuyên: Được phát triển và cập nhật thường xuyên, với các phiên bản mới được phát hành để cải thiện tính năng, tăng hiệu suất và sửa các lỗi bảo mật.

2.4 Tiêu chuẩn

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) nhằm xác minh thông tin an toàn giữa các bên Client-Server dưới dạng JSON object Thông tin này có thể được xác minh và tin cậy vì nó được ký điện tử - digitally signed JWT có thể được ký bằng cách sử dụng một secret (với thuật toán HMAC) hoặc cặp

public/private key dùng chuẩn RSA hoặc ECDSA JWT phù hợp với những đối tượng muốn bảo mật thông tin của họ bởi người dùng khi thực hiện việc đăng nhập vào hệ thống thì họ phải đáp ứng được yêu cầu về JWT Ngoài ra, JWT còn mang đến sự thuận tiện cho người dùng trong việc click vào server, url,

resource, bởi họ dễ dàng xác nhận được quyền truy cập của mình chỉ với JWT.Các ưu điểm của JWT:

● Nhỏ gọn hơn: So với XML, JWT nhỏ gọn hơn rất nhiều Do đó, JWT khi thựchiện mã hoá cũng sẽ nhỏ gọn hơn SAML Điều này khiến JWT trở thành một sự lựa chọn phù hợp cho các lập trình viên trong môi trường HTTP và HTML.

● An toàn hơn: JWT sử dụng cặp khóa Public Key/Private Key dưới dạng X.509 hoặc một mã bí mật sử dụng thuật toán HMAC được chia sẻ để ký Do đó, phương pháp thực hiện bảo mật của JWT an toàn hơn so với SAML.● Phổ biến hơn: Do JWT ánh xạ trực tiếp đến các đối tượng nên bộ phân tích

cú pháp JWT phổ biến trong hầu hết các ngôn ngữ lập trình hiện nay Trong khi đó, XML không tự nhiên ánh xạ tài liệu nên bạn sẽ làm việc tốt hơn với JWT.

● Dễ dàng xử lý hơn: Được sử dụng ở quy mô nền tảng internet nên JWT dễ dàng xử lý các kết nối có trên hầu hết các thiết bị của con người đặc biệt làcác thiết bị di động cá nhân.

Cấu trúc của JWT:

● Header: Phần header sẽ chứa kiểu dữ liệu , và thuật toán sử dụng để mã hóa ra chuỗi JWT.

Hình 10: Header của JWT

❖ “typ” (type) chỉ ra rằng đối tượng là một JWT.

❖ “alg” (algorithm) xác định thuật toán mã hóa chuỗi là HS256.● Payload: là phần sẽ chứa các thông tin muốn đặt trong chuỗi token như

username, userId, author, …

Hình 11: Payload của JWT

● Signature: phần này sẽ được tạo ra bằng cách mã hóa phần header, payload kèm theo một chuỗi secret (khóa bí mật)

base64urlEncode: thuật toán mã hóa header và payload.

Sau đó mã hóa hai chuỗi vừa nhận được kèm theo secret bằng thuật toán HS256 ta sẽ có chuỗi signature.

Cuối cùng kết hợp 3 chuỗi trên lại ta sẽ có một chuỗi JWT hoàn chỉnh.2.4.2RESTful API