XÂY DỰNG WEBSITE LUYỆN KỸ NĂNG NGHE, ĐỌC THEO CHUẨN B1 - Full 10 điểm

LỜI CẢM ƠN Để có thể hoàn thành bài khóa luận này, ngoài sự cố gắng của bản thân, tôi đã nhận được rất nhiều sự giúp đỡ, động viên đến từ gia đình, thầy cô và bạn bè trong suốt quá trình thực hiện Tôi xin gửi lời cảm ơn sâu sắc đến ThS Trần Thị Diệu Hiền, giảng viên hướng dẫn tôi nghiên cứu đề tài khóa luận này Cô đã hướng dẫn, chỉ bảo, góp ý và cung cấp cho tôi những kiến thức nền tảng vô cùng quan trọng và cần thiết cho việc nghiên cứu Nhờ có sự giúp đỡ nhiệt tình của cô, tôi đã hoàn thành tốt bài khóa luận của mình Tôi xin gửi lời cảm ơn chân thành nhất đến lãnh đạo nhà trường, tất cả thầy cô trong khoa Toán- Tin đã tạo những điều kiện tốt nhất để tôi có thể hoàn thành khóa luận Đề tài này nghiên cứu trong phạm vi và thời gian có hạn nên khó tránh khỏi những thiếu sót hay kiến thức chưa đủ sâu rộng để giải quyết tất cả các vấn đề Vì vậy, tôi rất mong nhận được sự đóng góp ý kiến của quý thầy cô, bạn bè để bài khóa luận ngày càng hoàn thiện hơn LỜI CAM ĐOAN Tôi xin cam đoan: Khóa luận tốt nghiệp với đề tài: “ Xây d ự ng Website luy ệ n k ỹ năng nghe, đ ọ c theo chu ẩ n B1 ” là công trình nghiên cứu của cá nhân tôi, không sao chép của bất cứ ai Tôi xin chịu mọi trách nhiệm về công trình nghiên cứu của riêng mình Quảng Nam, ngày … tháng … năm 2023 Người cam đoan Ngô Thanh Hà M Ụ C L Ụ C PHẦN 1 MỞ ĐẦU 1 1 Lý do chọn đề tài 1 2 Tính mới của đề tài 2 3 Mục tiêu của đề tài 2 4 Đối tượng và phạm vi nghiên cứu 2 5 Phương pháp nghiên cứu 2 6 Cấu trúc đề tài 2 PHẦN 2 NỘI DUNG NGHIÊN CỨU 3 CHƯƠNG 1 CƠ SỞ LÝ THUYẾT VÀ YÊU CẦU HỆ THỐNG 3 1 1 Cơ sở lý thuyết 3 1 1 1 Yêu c ầ u k ỹ năng nghe, đọc trình độ B1 3 1 1 2 C ấ u trúc d ạng đề 3 1 2 Khảo sát hệ thống 4 1 2 1 Ph ạ m vi d ự án 4 1 2 2 Kh ở i t ạ o d ự án 4 1 3 Phân tích công nghệ và tính khả thi 5 1 3 1 Yêu c ầ u công ngh ệ c ầ n thi ế t 5 1 3 2 Kh ả thi v ề kinh t ế 9 1 3 3 Kh ả thi v ề th ự c t ế ti ế p c ậ n 9 CHƯƠNG 2 THIẾT KẾ HỆ THỐNG 10 2 1 Phân tích chức năng 10 2 1 1 Yêu c ầ u ch ức năng 10 2 1 2 Yêu c ầ u phi ch ức năng 10 2 1 3 Đặ c t ả ch ức năng 11 2 2 Biều đồ Usecase toàn hệ thống 18 2 2 1 Đặ c t ả UseCase 18 2 2 2 Phân rã Usecase 18 2 3 Biểu đồ tuần tự 25 2 4 Biểu đồ lớp 34 2 5 Xây dựng cơ sở dữ liệu 35 CHƯƠNG 3 TRIỂN KHAI HỆ THỐNG 39 3 1 Cài đặt hệ thống 39 3 1 1 Các h ệ điề u hành ph ổ bi ế n 39 3 1 2 Cài đặ t Website 41 3 2 Một số giao diện trong hệ thống 42 PHẦN 3 KẾT LUẬN VÀ KIẾN NGHỊ 57 1 Kết quả đạt được 57 2 Ưu, nhược điểm 57 2 1 Ưu điể m 57 2 2 Nhược điể m 57 3 Hướng phát triển 57 PHẦN 4 TÀI LIỆU THAM KHẢO 58 PHẦN 5: PHỤ LỤC HÌNH ẢNH 59 1 PH Ầ N 1 M Ở ĐẦ U 1 Lý do chọn đề tài Trong cu ộ c s ố ng c ủ a chúng ta, vi ệ c h ọ c các ngo ạ i ng ữ là m ộ t bài h ọ c b ổ ích và quan tr ọ ng Vi ệ c h ọ c ti ế ng Anh là m ộ t trong nh ữ ng th ứ mà r ấ t nhi ều ngườ i quan tâm và ưu tiên hàng đầu Để t ố t nghi ệ p và s ố ng m ộ t cu ộ c s ố ng hi ện đạ i c ầ n ph ả i có các k ỹ năng tiế ng Anh Tuy nhiên, vi ệ c h ọ c ti ế ng Anh có th ể r ấ t khó và c ầ n m ộ t kho ả ng th ờ i gian dài Vì v ậ y, thi ế t k ế m ộ t website luy ệ n thi ti ế ng Anh B1 có th ể là m ộ t tr ợ giúp quý báu cho nh ững ai đang họ c ti ế ng Anh Website s ẽ cung c ấ p các bài t ậ p khác nhau, đượ c xây d ựng trên các cơ sở ki ế n th ứ c c ủ a ti ế ng Anh, s ử d ụ ng công ngh ệ hi ện đạ i, nh ằm tăng cườ ng kh ả năng tư duy của ngườ i dùng Website cũng có thể đượ c phát tri ển để cung c ấ p kho bài gi ả ng, video và ôn luy ện, để ngườ i dùng có th ể ôn l ạ i nh ữ ng c ấ u trúc c ủ a ti ế ng Anh; cung c ấ p các bài ki ểm tra thường xuyên để ki ể m tra tình tr ạ ng h ọ c t ậ p c ủa ngườ i dùng Do đó, website luy ệ n thi ti ế ng Anh B1 c ầ n cung c ấ p các bài h ọ c, các bài ki ể m tra, và m ộ t n ề n t ả ng h ỗ tr ợ c ả i thi ệ n kh ả năng tiế ng Anh c ủa người dùng Đây là mộ t cách hoàn toàn h ợ p lí và hi ệ u qu ả để h ọ c ti ế ng Anh v ớ i t ốc độ cao Cũng cầ n có thêm các tính năng hỗ tr ợ để giúp ngườ i dùng c ả i thi ệ n kh ả năng nói và cả m nh ậ n ti ế ng Anh như: các cuộ c trò chuy ệ n tr ự c tuy ế n, các bài t ậ p phát âm, bài h ọ c ng ữ pháp, và các tính năng khác như làm ví dụ , d ị ch thu ậ t, và h ỗ tr ợ t ừ điể n Vi ệ c tích h ợp các tính năng này trên Website s ẽ giúp ngườ i dùng c ả i thi ệ n hi ể u bi ế t và s ử d ụ ng ti ế ng Anh m ộ t cách c ẩ n th ận hơn Để giúp người dùng theo đuổ i m ụ c tiêu h ọ c t ậ p, Website cũng có thể có ch ứ c năng theo dõi và ghi l ạ i thành tích h ọ c t ậ p c ủa người dùng để định hướ ng h ọ c t ậ p t ố t hơn cho họ Để làm cho website đượ c s ử d ụ ng d ễ dàng hơn, trang website cũng có thể có các ph ầ n tr ợ giúp tr ự c tuy ế n và h ỗ tr ợ để gi ả i quy ế t nh ữ ng v ấn đề khó khăn liên quan đế n h ọ c ti ế ng Anh V ớ i m ục tiêu đó, tôi chọn: “ Xây d ự ng Website luy ệ n k ỹ năng nghe, đ ọ c theo chu ẩ n B1 ” làm đ ề tài khóa lu ậ n t ố t nghi ệ p c ủ a mình 2 2 Tính mới của đề tài G iúp ngườ i h ọ c c ả i thi ện trình độ Anh văn trong thờ i gian ng ắ n nh ấ t; s ử d ụ ng công ngh ệ hi ện đại để xây d ự ng m ộ t ứ ng d ụ ng website dành cho ngườ i h ọ c và cung c ấp các tính năng như khả năng tạ o ra câu h ỏi, các video hướ ng d ẫ n, c ấ u hình câu tr ả l ời đúng cho các câu hỏ i và cung c ấ p m ộ t h ệ th ố ng x ử lý th ố ng kê và ôn luy ệ n cho ngườ i h ọ c 3 Mục tiêu của đề tài Xây d ự ng đượ c ứ ng d ụ ng website có các tính năng nâng cao kỹ năng đọ c và nghe c ủ a h ọ c sinh, sinh viên, c ả i thi ệ n vi ệ c h ọ c ph ầ n quan tr ọ ng nh ấ t trong kì thi Anh văn 4 Đối tượng và phạm vi nghiên cứu Đối tượ ng : Đượ c thi ế t k ế cho h ọ c sinh, sinh viên ôn luy ệ n thi tr ình độ B1 trên các trình duy ệ t website Ph ạ m vi c ủ a nghiên c ứ u: Kh ả năng tạ o các câu h ỏi, các video hướ ng d ẫ n và c ấ u hình câu tr ả l ời đúng cho các câu hỏ i, cùng v ớ i m ộ t h ệ th ố ng x ử lý th ống kê để ph ụ c v ụ cho m ục đích ôn tậ p 5 Phương pháp nghiên cứu Bài khóa lu ậ n có s ử d ụng các phương pháp nghiên cứu như: - Phương pháp phân loạ i và h ệ th ố ng hóa lý thuy ế t - Phương pháp nghiên cứ u th ự c nghi ệ m - Phương pháp thu thậ p s ố li ệ u - Phương pháp phân tích tổ ng k ế t kinh nghi ệ m 6 Cấu trúc đề tài Bài khóa lu ậ n ngoài ph ầ n m ở đầ u và k ế t lu ậ n thì n ội dung đượ c chia làm 3 chương: Chương 1: Cơ sở lý thuy ế t và yêu c ầ u h ệ th ố ng Chương 2: Thiế t k ế h ệ th ố ng Chương 3: Triể n khai h ệ th ố ng 3 PH Ầ N 2 N Ộ I DUNG NGHIÊN C Ứ U CHƯƠNG 1 CƠ SỞ LÝ THUY Ế T VÀ YÊU C Ầ U H Ệ TH Ố NG 1 1 Cơ sở lý thuyết 1 1 1 Yêu cầu kỹ năng nghe, đọc trình độ B1 Khung tham chi ếu trình độ ngôn ng ữ chung Châu Âu CEFR đượ c thành l ậ p b ở i H ội đồ ng Châu Âu (Council of Europe) nh ằm đánh giá khả năng ngôn ngữ c ủ a b ạ n Chính th ứ c ra m ắt năm 2001 và không ngừng đượ c b ổ sung và hoàn thi ện để “xế p h ạng” chính xác năng lự c ngôn ng ữ c ủa ngườ i h ọc, CEFR được coi là bướ c ngo ặ t trong đánh giá trình độ ngôn ng ữ Trình độ B1 là b ậ c th ứ ba trên khung CEFR (b ậ c trung c ấ p – Intermediate), tương đương vớ i c ấp độ ti ế ng Anh Cambridge KET Cambridge Pass with Distinction (đỗ xu ấ t s ắc vượ t c ấ p 140- 150 điể m), PET Cambridge Pass và Pass with Merit, FCE Cambridge 140- 159 điể m, IELTS 4 0-5 0, TOEFL iBT 42-71, TOEIC Listening & Reading 550-780 Người đạt trình độ B1 bi ế t kho ả ng 2,000 t ừ ti ế ng Anh Theo Cambridge, để đạ t c ấp độ B1 c ầ n kho ả ng 350-400 gi ờ h ọ c ti ếng Anh có hướ ng d ẫ n C ụ th ể, ngườ i h ọ c ti ếng Anh trình độ B1 có các kh ả năng ngôn ngữ v ề k ỹ năng Nghe: - Có thể theo dõi và hiểu được dàn ý của các bài nói ngắn, đơn giản về các chủ đề quen thuộc nếu được diễn đạt theo giọng chuẩn, rõ ràng - Có thể theo dõi và hiểu được các bài giảng hay cuộc nói chuyện về đề tài quen thuộc hoặc trong phạm vi chuyên môn của mình nếu được diễn đạt một cách đơn giản với cấu trúc rõ ràng Về kỹ năng Đọc : - Có thể đọc hiểu các văn bản chứa đựng thông tin rõ ràng về các chủ đề liên quan đến chuyên ngành và lĩnh vực yêu thích, quan tâm của mình - Có thể xác định các kết luận chính trong các văn bản nghị luận có sử dụng các tín hiệu ngôn ngữ rõ ràng - Có thể nhận diện mạch lập luận của văn bản đang đọc, dù không nhất thiết phải thật chi tiết 1 1 2 Cấu trúc dạng đề Đề thi kiểm tra Chuẩn đầu ra ngoại ngữ được thực hiện theo các yêu cầu về trình độ như quy định được ban hành kèm theo Thông tư số 01/2014/TT - BGDĐT ngày 24/01/2014 của Bộ Giáo dục và Đào tạo như sau: 4 Đề tiếng anh B1 đối với k ỹ năng nghe: Kỹ năng nghe đề thi này gồm có 3 phần thi với thời gian hoàn thàn h là 40 phút cho 35 câu hỏi trắc nghiệm 4 lựa chọn - Phần 1: Gồm 8 câu hỏi trắc nghiệm + Nghe 8 đoạn hội thoại ngắn và chọn đáp án đúng + Mỗi đoạn hội thoại tương ứng với 1 câu hỏi - Phần 2: Gồm 12 câu hỏi trắc nghiệm Nghe 3 đoạn hội thoại dài và chọn đáp án đúng Mỗi đoạn hội thoại tương ứng với 4 câu hỏi đã được chỉ định trên đề - Phần 3: Gồm 15 câu hỏi trắc nghiệm + Nghe 3 đoạn hội thoại dài và chọn đáp án đúng + Mỗi đoạn hội thoại tương ứng với 5 câu hỏi được chỉ định sẵn trên đề tiếng anh B1 Đ ề tiếng anh B1 đối với kỹ năng đọc: Kỹ năng đọc đề thi này gồm có 4 phần thi với thời gian hoàn thành là 60 phút cho 40 câu hỏi trắc nghiệm 4 lựa chọn - Đọc hiểu 4 đoạn văn và chọn đáp án đúng - Mỗi đoạn văn tương ứng với 10 câu hỏi 1 2 Khảo sát hệ thốn g 1 2 1 Phạm vi dự án Dự án tập trung phân tích các chức năng hỗ trợ học tập trực tuyến về Tiếng Anh trình độ B1 Chủ yếu tập trung vào hai kỹ năng: Đọc và Nghe Có tổ chức các bài thi thử để người dùng cọ xát, quen cấu trúc đề 1 2 2 Khởi tạo dự án Dự án sử dụng ngôn ngữ JavaScript trên nền tảng React Gồm hai thành phần chính: Backend tạo mã API, kết nối cơ sở dữ liệu với MongoDB và Frontend chứa các file hiển thị giao diện người dùng và gọi API đến Backend 5 1 3 Phân tích công nghệ và tính khả thi 1 3 1 Yêu cầu công nghệ cần thiết Ngôn ng ữ front- end như HTML, CSS, Javascript và công cụ phát tri ể n website như React , n ề n t ả ng backend như NodeJS Công c ụ qu ản lý cơ sở d ữ li ệu MongoDB để lưu trữ d ữ li ệ u c ủ a website 1 3 1 1 HTML HTML là vi ế t t ắ t c ủ a c ụ m t ừ Hypertext Markup Language (t ạ m d ị ch là Ngôn ng ữ đánh dấu siêu văn bản) HTML đượ c s ử d ụng để t ạ o và c ấ u trúc các thành ph ầ n trong trang web ho ặ c ứ ng d ụng, phân chia các đoạn văn, heading, titles, blockquotes… và HTML không phả i là ngôn ng ữ l ậ p trình M ộ t tài li ệu HTML đượ c hình thành b ở i các ph ầ n t ử HTML (HTML Elements) được quy đị nh b ằ ng các c ặ p th ẻ (tag và attributes) Các c ặ p th ẻ này đượ c bao b ọ c b ở i m ộ t d ấ u ngo ặ c ng ọ n (ví d ụ ) và thườ ng là s ẽ đượ c khai báo thành m ộ t c ặ p, bao g ồ m th ẻ m ở và th ẻ đóng Nhưng mộ t s ố th ẻ đặ c bi ệ t l ạ i không có th ẻ đóng và dữ li ệu đượ c khai báo s ẽ n ằ m trong các thu ộ c tính (ví d ụ như thẻ ) Cha đẻ c ủ a HTML là Tim Berners- Lee, cũng là ngườ i khai sinh ra World Wide Web và ch ủ t ị ch c ủ a World Wide Web Consortium (W3C – t ổ ch ứ c thi ế t l ậ p ra các chu ẩn trên môi trườ ng Internet) Các thi ế t l ậ p và c ấu trúc HTML đượ c v ậ n hành và phát tri ể n b ở i World Wide Web Consortium (W3C) B ạ n có th ể ki ể m tra tình tr ạ ng m ớ i nh ấ t c ủ a ngôn ng ữ này b ấ t k ỳ lúc nào trên trang W3C’s website 1 3 1 2 CSS CSS là ch ữ vi ế t t ắ t c ủ a Cascading Style Sheets, nó là m ộ t ngôn ng ữ đượ c s ử d ụng để tìm và đị nh d ạ ng l ạ i các ph ầ n t ử đượ c t ạ o ra b ở i các ngôn ng ữ đánh dấ u (HTML) Nói ng ắ n g ọ n hơn là ngôn ngữ t ạ o phong cách cho trang web B ạ n có th ể hi ể u đơn giả n r ằ ng, n ếu HTML đóng vai trò đị nh d ạ ng các ph ầ n t ử trên website như việ c t ạo ra các đoạn văn bản, các tiêu đề , b ảng,… thì CSS s ẽ giú p chúng ta có th ể thêm style vào các ph ầ n t ử HTML đó như đ ổ i b ố c ụ c, màu s ắ c trang, đ ổ i màu ch ữ , font ch ữ , thay đ ổ i c ấ u trúc… CSS đượ c phát tri ể n b ởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không đượ c thi ế t k ế để g ắn tag để giúp đị nh d ạ ng trang web 6 Phương thứ c ho ạt độ ng c ủ a CSS là nó s ẽ tìm d ự a vào các vùng ch ọ n, vùng ch ọ n có th ể là tên m ộ t th ẻ HTML, tên m ộ t ID, class hay nhi ề u ki ểu khác Sau đó là nó sẽ áp d ụ ng các thu ộ c tính c ần thay đổ i lên vùng ch ọn đó M ối tương quan giữ a HTML và CSS r ấ t m ậ t thi ế t HTML là ngôn ng ữ markup (n ề n t ả ng c ủa site) và CSS đị nh hình phong cách (t ấ t c ả nh ữ ng gì t ạ o nên giao di ệ n website), chúng là không th ể tách r ờ i 1 3 1 3 JavaScript JavaScript là ngôn ng ữ l ậ p trình website ph ổ bi ế n hi ệ n nay, nó đượ c tích h ợ p và nhúng vào HTML giúp website tr ở nên s ống động hơn JavaScript đóng vai trò như là mộ t ph ầ n c ủ a trang web, th ự c thi cho phép Client-side script t ừ phía ngườ i dùng cũng như phía máy chủ (Nodejs) t ạ o ra các trang web độ ng JavaScript là m ộ t ngôn ng ữ l ậ p trình thông d ị ch v ớ i kh ả năng hướng đến đố i tượ ng Là m ộ t trong 3 ngôn ng ữ chính trong l ậ p trình web và có m ố i liên h ệ l ẫ n nhau để xây d ự ng m ộ t website s ống độ ng, chuyên nghi ệ p: - HTML: H ỗ tr ợ trong vi ệ c xây d ự ng layout, thêm n ộ i dung d ễ dàng trên website - CSS: H ỗ tr ợ vi ệc đị nh d ạ ng thi ế t k ế , b ố c ụ c, style, màu s ắc,… - JavaScript: T ạ o nên nh ữ ng n ội dung “động” trên w ebsite Nhi ệ m v ụ c ủ a Javascript là x ử lý nh ững đối tượ ng HTML trên trình duy ệ t Nó có th ể can thi ệ p v ới các hành động như thêm/ xóa / s ử a các thu ộ c tính CSS và các th ẻ HTML m ộ t cách d ễ dàng Hay nói cách khác, Javascript là m ộ t ngôn ng ữ l ậ p trình trên trình duy ệ t ở phía client Hi ệ n nay cùng v ớ i s ự xu ấ t hi ệ n c ủa NodeJS đã giúp cho Javascript có th ể làm vi ệ c ở backend 1 3 1 4 NodeJS NodeJS là m ột môi trườ ng runtime ch ạy JavaScript đa nề n t ả ng và có mã ngu ồ n m ở, đượ c s ử d ụng để ch ạ y các ứ ng d ụ ng web bên ngoài trình duy ệ t c ủ a client N ề n t ảng này đượ c phát tri ể n b ởi Ryan Dahl vào năm 2009, đượ c xem là m ộ t gi ả i pháp hoàn h ả o cho các ứ ng d ụ ng s ử d ụ ng nhi ề u d ữ li ệ u nh ờ vào mô hình hướ ng s ự ki ệ n (event- driven) không đồ ng b ộ 7 NodeJS đượ c s ử d ụng để xây d ự ng r ấ t nhi ề u lo ạ i ứ ng d ụng khác nhau, trong đó ph ổ bi ế n nh ấ t g ồ m có: Ứ ng d ụ ng trò chuy ệ n trong th ờ i gian th ự c: Nh ờ vào c ấu trúc không đồ ng b ộ đơn lu ồ ng, Node JS r ấ t thích h ợ p cho m ục đích xử lý giao ti ế p trong th ờ i gian th ự c N ề n t ả ng này có th ể d ễ dàng m ở r ộ ng q uy mô và thường dùng để t ạ o ra các chatbot Bên c ạnh đó, các tính năng liên quan đế n ứ ng d ụ ng trò chuy ện như: chat nhiều ngườ i, thông báo đẩy,… cũng có thể d ễ dàng đượ c b ổ sung nh ờ NodeJS Internet of Things (IoT): Các ứ ng d ụng IoT thườ ng bao g ồ m nhi ề u b ộ c ả m bi ế n ph ứ c t ạp để g ử i nh ữ ng ph ầ n d ữ li ệ u nh ỏ Node JS là m ộ t l ự a ch ọn lý tưởng để x ử lý các yêu c ầu đồ ng th ờ i này v ớ i t ốc độ c ự c nhanh Truy ề n d ữ li ệ u: Netflix là m ộ t trong s ố nh ữ ng công ty l ớ n trên th ế gi ớ i chuyên s ử d ụ ng Node JS cho m ục đích truyề n d ữ li ệ u S ở dĩ vì đây là mộ t n ề n t ả ng nh ẹ và c ự c nhanh, đồ ng th ờ i còn cung c ấ p m ột API chuyên dùng để stream Các SPA (Single-page application) ph ứ c t ạ p: Trong SPA, toàn b ộ ứ ng d ụng đượ c load vào trong m ộ t trang duy nh ất, do đó sẽ có m ộ t s ố request đượ c th ự c hi ệ n trong n ề n Vòng l ặ p s ự ki ệ n (event loop) c ủ a Node JS cho phép x ử lý các request theo hướ ng non-blocking Các ứ ng d ụ ng REST d ựa trên API: JavaScript đượ c s ử d ụ ng trong c ả frontend l ẫ n backend c ủa trang Do đó mộ t server có th ể d ễ dàng giao ti ế p v ớ i frontend qua REST API b ằ ng Node js Bên c ạnh đó, Node JS còn cung cấ p nhi ều package như Express js hay Koa để vi ệ c xây d ự ng ứ ng d ụ ng web tr ở nên d ễ dàng hơn bao giờ h ế t 1 3 1 5 ReactJS ReactJS là m ột thư việ n JavaScript mã ngu ồ n m ở đượ c phát tri ể n b ở i Facebook nh ằ m t ạ o ra các ứ ng d ụ ng web nhanh và hi ệ u qu ả v ớ i mã ngu ồ n M ục đích chính củ a ReactJS là khi ế n cho website ho ạt động mượ t mà, kh ả năng mở r ộng cao và đơn giả n Thay vì làm vi ệ c trên toàn ứ ng d ụ ng web, ReactJS cho phép các nhà phát tri ể n có th ể phá v ỡ giao di ện ngườ i dùng ph ứ c t ạ p m ộ t cách thu ậ n l ợ i thành các thành ph ần đơn giả n ReactJS là m ộ t trong nh ữ ng công ngh ệ đáng để doanh nghi ệ p l ự a ch ọ n nh ằ m hi ệ n th ự c m ục tiêu vượ t m ặt đố i th ủ c ạ nh tranh ReactJS cho phép doanh nghi ệ p t ạ o ra các ứ ng d ụ ng web có UI t ốt hơn, qua đó nâng cao trả i nghi ệ m c ủa người dùng như lượ t tương tác, tỷ l ệ click, lượ t chuy ển đổ i Các doanh nghi ệ p s ử d ụ ng ReactJS có giao di ệ n ứ ng d ụ ng t ốt hơn các đơn vị s ử d ụng các framework khác vì ReactJS ngăn chặ n vi ệ c c ậ p nh ậ t c ủ a DOM giúp ứ ng d ụ ng nhanh và truy ề n t ả i t ốt hơn UX 8 1 3 1 6 MongoDB MongoDB hay Mongo Database là phần mềm cơ sở dữ liệu opensource (mã nguồn mở) dạng NoSQL hỗ trợ nhiều nền tảng lập trình và được thiết kế theo kiểu hướng đối tượng Những bảng dữ liệu trong MongoDB (các Collection) được thiết kế với cấu trúc linh hoạt cho phép dữ liệu được lưu trữ không cần phải tuân theo định dạng cấy trúc nào Thay vì các bản ghi, trường dữ liệu như trong SQL, MongoDB sử dụng lưu trữ dữ liệu dưới dạng JS N nên từ đó mỗi Collection sẽ sở hữu những kích thước và các document riêng Vì vậy, nó có thể sử dụng lưu trữ các dữ liệu lớn có kích thước và độ phức tạp đa dạng (Big Data) Mongo DB có khá nhiều những tính năng hỗ trợ người dùng trong quản lý, lưu trữ và xử lý dữ liệu phức tạp Do sử dụng lưu trữ dữ liệu dưới dạng Document JS N nên mỗi Collection đều có thiết kế kích thước và thuộc những document khác nhau Tuy nhiên chúng lại khá linh hoạt khi tiến hành lưu trữ bởi vậy nếu người dùng muốn lưu thêm dữ liệu chỉ cần insert là xong Những dữ liệu lưu trong hệ thống của MongoDB không bị ràng buộc nhau, không bị phụ thuộc bởi khóa chính hay khóa phụ như h ệ qu ả n tr ị cơ sỡ d ữ li ệ u quan h ệ nên khi thực hiện các thao tác thêm, sửa, xóa thì sẽ đơn giản hơn việc kiểm tra ràng buộc như trong hệ qu ả n tr ị cơ sỡ d ữ li ệ u quan h ệ Khả năng mở rộng tốt của Mongo DB được đánh giá cao bởi nó sử dụng cụm các node chứa những dữ liệu giao tiếp được với nhau được gọi là Cluster Từ đó để mở rộng bạn chỉ cần thêm một node vào hệ thống Những index cho từng dữ liệu sẽ là tự động để hỗ trợ truy vấn thông tin nhanh và đạt hiệu suất cao Tốc độ truy vấn đáng kể của MongoDB là một lượi thế so với những hệ quản trị cơ sở dữ liệu khác Thử nghiệm cho thấy ở một lượng dữ liệu chung, MongoDB có khả năng insert nhanh gấp 100 lần so với SQL Để tri ể n khai trang website có tính năng tối ưu nhấ t, c ầ n s ử d ụ ng các k ỹ thu ậ t, công c ụ và công ngh ệ hi ện đại như HTML5, CSS3, Bootstrap Bên cạnh đó, cầ n ph ả i s ử d ụ ng các công c ụ h ỗ tr ợ hi ệ u su ấ t t ố t nh ất để phân tích và x ử lý d ữ li ệ u và cung c ấ p các tài nguyên và d ị ch v ụ tr ự c tuy ế n c ầ n thi ết như nhà cung cấ p d ị ch v ụ lưu trữ và ngu ồ n l ực đáng tin cậ y 9 1 3 2 Khả thi về kinh tế Mức độ khả thi kinh tế phụ thuộc vào số lượng người dùng website , chi phí để xây dựng và bả o trì website Website khi hoàn thành được chạy frontend trên nền tảng git và backend trên nền tảng render nên hoàn toàn khả thi về kinh tế 1 3 3 Khả thi về thực tế tiếp cận Hệ thống cung cấp kiến thức và kỹ năng cần thiết hỗ trợ người dùng học tập, nâng cao trình độ tiếng Anh của mình, tiến đến đạt kết quả tốt trong kỳ thi lấy bằng tiếng Anh B1 10 CHƯƠNG 2 THI Ế T K Ế H Ệ TH Ố NG 2 1 Phân tích chức năng 2 1 1 Yêu cầu chức năng Website luy ệ n k ỹ năng nghe, đọ c ti ế ng Anh c ầ n các ch ức năng chính như: - Ch ức năng đăng kí, đăng nhậ p thành viên và đăng xuấ t Có h ỗ tr ợ đăng nhậ p b ằ ng tài kho ả n Google và xác th ực email khi đăng kí tài khoả n - Cung c ấ p các bài gi ả ng, video và bài t ậ p ôn luy ện để ngườ i dùng có th ể ôn l ạ i nh ữ ng k ỹ năng đọ c, nghe ti ế ng Anh - Cung c ấ p các bài ki ểm tra thườ ng xuyên, thi th ử để ki ể m tra tình tr ạ ng h ọ c t ậ p c ủa ngườ i dùng - Các tính năng hỗ tr ợ để giúp ngườ i dùng c ả i thi ệ n kh ả năng nghe và phát âm ti ếng Anh như: dị ch thu ậ t, và h ỗ tr ợ t ừ điể n - Ch ức năng theo dõi và ghi lạ i thành tích h ọ c t ậ p c ủa người dùng để định hướ ng h ọ c t ậ p t ốt hơn cho họ - H ọ c viên có th ể làm bài t ậ p tr ự c tuy ến trên máy tính, điệ n tho ạ i, ho ặ c s ử d ụ ng các công c ụ xu ấ t b ản để làm bài thi ho ặ c in bài t ậ p - Xây d ự ng h ệ th ố ng tra c ứu và ngườ i h ọc cũng có thể tìm ki ế m bài vi ế t, tác gi ả tr ự c ti ế p t ừ trang website - Cung c ấ p các công c ụ phân lo ạ i yêu thích c ủa ngườ i h ọc, báo cáo đánh giá, và c ả m nh ậ n c ủa ngườ i h ọc đố i v ớ i các bài h ọ c - H ệ th ống thông báo thường xuyên để ngườ i h ọ c có th ể luôn luôn đượ c thông báo v ề các khóa h ọ c m ớ i, các k ỳ thi, và các thông tin liên quan khác - Ch ức năng đăng bài họ c, bài thi th ử c ủ a giáo viên và qu ả n tr ị viên - Các ch ức năng quả n lí c ủa admin như: Quả n lí bài vi ế t, bài thi th ử , qu ản lí ngườ i dùng,… 2 1 2 Yêu cầu phi chức năng - Hi ể n th ị d ữ li ệ u theo cách hi ệ u qu ả nh ấ t v ớ i nh ữ ng c ả m h ứng đồ h ọ a và thân thi ệ n v ới ngườ i dùng Website h ỗ tr ợ giao di ệ n trên nhi ề u lo ạ i thi ế t b ị - Đả m b ả o tiêu chu ẩn cơ bản như độ b ền, tính năng, hiể n th ị , hi ệ u su ấ t và thu ậ n ti ện để truy c ập cho ngườ i s ử d ụ ng 11 - Các ki ế n trúc ph ầ n m ề m và kh ả năng lưu trữ d ữ li ệ u c ủ a thi ế t k ế website này ph ải được xác định, để cung c ấp môi trườ ng luy ệ n thi tr ự c tuy ến năng động, đáp ứ ng các nhu c ầ u c ủa ngườ i h ọ c c ầ n 2 1 3 Đặc tả chức năng Bảng 1 1 Chức năng đăng nhập bằng email Qui tắc Chức năng Loại R1 1 Người dùng yêu cầu đăng nhập Hiện R1 2 Hệ thống lấy đường dẫn trang hiện tại và chuyển sang trang đăng nhập Hiện R1 3 Người dùng điền user và password vào form đăng nhập và gửi thông tin đăng nhập Hiện R1 4 Cơ sở dữ liệu kiểm tra thông tin đăng nhập hợp lệ hay không n R1 5 1 Nếu thông tin đúng, hệ thống lưu thông tin đăng nhập và quay về trang trước đó Hiện R1 5 2 Nếu sai, hệ thông báo đăng nhập lỗi và yêu cầu nhập lại Hiện R1 6 Ng ười dùng làm việc với hệ thống Hiện Bảng 1 2 Chức năng ạo tài khoản Qui tắc Chức năng Loại R2 1 Người dùng yêu cầu Tạo tài khoản Hiện R2 2 Người dùng điền tên đăng nhập (mail), tên hiển thị và password vào form Tạo tài khoản và gửi y êu cầu Hiện R2 3 Cơ sở dữ liệu kiểm tra thông tin tài khoản hợp lệ hay không (địa chỉ mail đã tồn tại hay chưa, mật khẩu người dùng có đủ dài) n R2 4 1 Nếu thông tin đúng, hệ thống thông báo Tạo tài khoản thành công và thông báo đã gửi em ail xác thực đến địa chỉ email của người dùng Gửi một thông báo về việc tạo tài khoản thành công đến tài khoản người dùng Hiện R2 4 2 Nếu sai, hệ thông báo lỗi và yêu cầu nhập lại thông tin Hiện R2 5 Người dùng làm việc với hệ thống Hi ện 12 Bảng 1 3 Chức năng đăng nhập bằng tài khoản Google Qui tắc Chức năng Loại R3 1 Người dùng yêu cầu đăng nhập Hiện R3 2 Hệ thống lấy đường dẫn trang hiện tại và chuyển sang trang đăng nhập Hiện R3 3 Người dùng chọn đăng nhập với Google Hiện R3 4 Người dùng chọn tài khoản Google để đăng nhập Hiện R3 5 Hệ thống tạo tài khoản cho người dùng nếu gmail tương ứng chưa có trong cơ sở dữ liệu n R3 6 Hệ thống lưu thông tin người dùng và quay về trang trước đó Hiện Bảng 1 4 Chức năng xác thực tài khoản email Qui tắc Chức năng Loại R4 1 Hệ thống gửi email thông báo tạo tài khoản của người dùng và một đường link xác thực tài khoản n R4 2 Người dùng Nhấn vào đường dẫn Hiện R4 3 1 Hệ thống thông báo xác thực thành công cho ngư ời dùng Hiện R4 3 2 Nếu người dùng đã xác thực rồi, hệ thống thông báo đã xác thực trước đó Hiện R4 3 3 Nếu đường dẫn xác thực sai (do người dùng tự nhập) thì hệ thống thông báo lỗi Hiện R4 4 Người dùng nhấn vào quay về trang chủ Hiện Bảng 1 5 Chức năng quên mật khẩu Qui tắc Chức năng Loại R5 1 Người dùng chọn quên mật khẩu Hiện R5 2 Hệ thống thông báo và tự động gửi email chứa mật khẩu đăng nhập về email mà người dùng đã đăng ký Đồng thời gửi một thông báo về bảo mật tài khoản đến t ài khoản người dùng Hiện 13 Bảng 1 6 Chức năng em thông tin cá nh n Qui tắc Chức năng Loại R6 1 Người dùng chọn icon Ảnh đại diện Chọn trang cá nhân Hiện R6 2 Hệ thống hiển thị trang thông tin cá nhân người dùng Hiện R6 3 Người dùng xem các thông tin liên quan như ngày tạo tài khoản, tên hiển thị, ảnh đại diện, địa chỉ email, các bài viết mà người dùng đã tạo Hiện Bảng 1 7 Chức năng Cài đặt thông tin cá nhân Qui tắc Chức năng Loại R7 1 Người dùng chọn icon Ảnh đại diện Chọn Cà i đặt Hiện R7 2 Hệ thống hiển thị trang Cài đặt thông tin tài khoản người dùng Hiện R7 3 Người dùng chọn nút Chỉnh sửa và thay đổi các thông tin của mình như tên hiển thị, ảnh đại diện, mật khẩu đăng nhập Hiện R7 4 Người dùng chọn Lưu để xác nhận thay đổi thông tin hoặc Hủy để bỏ qua thao tác thay đổi thông tin Hiện R7 5 1 Nếu người dùng chọn Lưu, hệ thống thay đổi thông tin người dùng và hiển thị thông tin mới trên trang n R7 5 2 Nếu người dùng chọn Hủy, hệ thống đóng form thay đổi thông tin người dùng và hiển thị thông tin cũ của người dùng n R7 6 Người dùng chọn Button Đổi mật khẩu để thay đổi mật khẩu và điền mật khẩu cũ và mật khẩu mới cần thay đổi , xác nhận lại mật khẩu mới Hiện R7 7 Người dùng chọn Đổi mật khẩu để xác nhận thay đổi mật khẩu hoặc Hủy để bỏ qua Hiện R7 8 1 Nếu người dùng chọn Đổi mật khẩu, hệ thống kiểm tra mật khẩu cũ có đúng, mật khẩu mới và nhập lại có giống nhau và đủ dài hay không n R7 8 1 1 Nếu thông tin hợp lệ, hệ thống thông báo thành công Hiện R7 8 1 2 Nếu thông tin không hợp lệ, hệ thống thông báo lỗi Hiện R7 8 2 Nếu người dùng chọn Hủy, hệ thống đóng form Đổi mật khẩu người dùng n R7 9 Khi người dùng thay đổi thông tin thành công, hệ thống gửi một thông báo đến tài khoản người dùng thông báo về sự kiện này Hiện 14 Bảng 1 8 Chức năng ìm kiếm thông tin Qui tắc Chức năng Loại R8 1 Người dùng nhấn vào Input Search và nhập nội dung cần tìm kiếm Hiện R8 2 Cơ sở dữ liệu tìm kiếm người dùng, bài viết, thi thử liên quan đến từ khóa n R8 3 Hệ thố ng hiển thị người dùng, bài viết, thi thử liên quan đến từ khóa tìm kiếm Hiện R8 4 Người dùng chọn vào mục tương ứng để xem thông tin bài viết hoặc trang cá nhân người dùng Hiện R8 5 Nếu không tìm thấy thông tin, hệ thống thông báo cho người dùng Hi ện Bảng 1 9 Chức năng ra cứu từ điển Qui tắc Chức năng Loại R9 1 Người dùng nhấn vào menu từ điển Hiện R9 2 Hệ thống hiển thị trang Từ điển Hiện R9 3 Người dùng nhập từ khóa cần tìm kiếm Hiện R9 4 Hệ thống lấy thông tin và hiển thị thông tin về từ khóa cần tìm nếu có như: Cách phát âm, ngữ nghĩa, cách dùng, từ cùng nghĩa với nó,… Hiện Bảng 1 10 Chức năng Làm bài trong các bài học về Đọc, Nghe Qui tắc Chức năng Loại R10 1 Người dùng chọn menu Đọc, hoặc Nghe Hiện R10 2 Hệ thống hiển thị danh sách các bài tập Hiện R10 3 Người dùng chọn vào bài mà mình muốn Hiện R10 4 Hệ thống lấy thông tin và hiển thị đề bài, các câu hỏi và đáp án dưới dạng trắc nghiệm từ hai đáp án (True or False) hoặc nhiều đáp án Hiện R10 5 Người dùng làm bài Hiện R10 6 Người dùng chọn nộp bài Hiện R10 7 Hệ thống tiếp nhận Chi tiết bài kiểm tra và tự động chấm điểm n R10 8 Hệ thống hiển thị thông chi tiết về bài làm như điểm số, đáp án, gợi ý đáp án,… Hiện 15 Bảng 1 11 Chức năng Game về từ vự ng Qui tắc Chức năng Loại R11 1 Người dùng chọn menu Game Hiện R11 2 Hệ thống hiển thị danh sách các trò chơi Hiện R11 3 Người dùng chọn vào trò chơi mà mình muốn Hiện R11 4 Hệ thống lấy thông tin và hiển thị danh sách hình ảnh và danh sách từ vựng Hiện R11 5 Người dùng ghép hình ảnh với từ vựng tương ứng theo từng cặp Hiện R11 6 1 Nếu ghép đúng, hình ảnh và từ vựng ảnh đi, kèm âm thanh phát âm về từ vựng đó được phát lên Hiện R11 6 2 Nếu ghép sai, hiển thị màu đỏ, rồi giữ nguyên trạn g thái cũ Hiện R11 7 Trò chơi kết thúc khi tất cả các từ khóa và hình ảnh tương ứng đều ghép cặp đúng hết Hiện Bảng 1 12 Chức năng àm bài thi thử Qui tắc Chức năng Loại R12 1 Hệ thống hiển thị danh sách các bài thi thử, thời hạn đăng kí, làm bà i và hết hạn Hiện R12 2 Trong thời gian đăng kí, người dùng chọn đăng kí Hệ t hống gửi thông báo về thông tin kỳ thi thử cho người dùng Hiện R12 3 Khi đến thời gian làm bài, chỉ những người đã đăng kí mới được làm bài Hiện R12 4 Nếu người dùng c họn làm bài mà chưa đăng nhập, hệ thống chuyển sang trang đăng nhập Người dùng đăng nhập Hệ thống quay lại trang làm bài Hiện R12 5 Khi vào trang làm bài Đọc hoặc Nghe Cơ sở dữ liệu lấy đề kiểm tra và tự động xáo trộn đáp án Sau đó tạo bài kiểm tr a trong cơ sở dữ liệu n R12 6 Hệ thống hiển thị đề bài, các câu hỏi và đáp án dưới dạng trắc nghiệm với bốn đáp án Hiện R12 7 Người dùng làm bài kiểm tra, với các chức năng như chọn đáp án, chuyển câu hỏi bất kì trên danh sách câu hỏi, hoặc chuyển san g câu tiếp theo, câu trước trong thời gian giới hạn được đếm ngược Hiện 16 R12 8 Bài kiểm tra được nộp khi người dùng chọn nộp bài và xác nhận nộp bài hoặc hết thời gian Hiện R12 9 Hệ thống tiếp nhận Chi tiết bài kiểm tra và tự động chấm điểm và lưu Chi tiết kiểm tra và cơ sở dữ liệu n R12 10 Hệ thống hiển thị kết quả bài kiểm tra khi hết giờ làm bài cho phép của kì thi thử Hiện R12 11 Hệ thống hiển thị Bảng xếp hạng, hướng dẫn đáp án Cho phép tải file pdf bài thi thử Hiện Bảng 1 13 Chức năng uản l Bài học, hi thử Qui tắc Chức năng Loại R13 1 Quản trị viên hoặc giáo viên đăng nhập tài khoản mình C họn menu Admin Hiện R13 2 Hệ thống hiển thị giao diện quản lí của admin Hiện R13 3 Quản trị viên chọn menu QL Bài học Read hoặc Listen Hiện R13 4 Hệ thống lấy thông tin và hiển thị danh sách các Bài học do Giáo viên đó đăng hoặc tất cả các Bài học có trong cơ sở dữ liệu nếu đó là admin Hiện R13 5 C họn Button với Icon Edit để sửa thông tin bài học Hiện R13 6 Hệ thống hiển thị form Sửa N hập thông tin cần sửa và chọn Sửa để Sửa thông tin Bài học , hoặc Hủy để bỏ qua thao tác Hiện R13 7 Nếu chọn Sửa, Cở sở dữ liệu thay đổi thông tin của Bài học đó n R13 8 C họn Button với Icon Delete để xóa Bài học Hiện R13 9 Hệ thống gửi xác nhận có muốn xóa Bài học đó hay không Hiện R13 10 1 Nếu chọn Có, Cở sở dữ liệu xóa Bài học đó n R13 10 2 Nếu chọn Không, hệ thống bỏ qua thao tác n 17 Bảng 1 14 Chức năng uản l Người dùng Qui tắc Chức năng Loại R14 1 Quản trị viên đăng nhập tài khoản Quản trị viên và chọn menu Admin Hiện R14 2 Hệ thống hiển thị giao diện quản lí của admin Hiện R14 3 Quản trị viên chọn menu QL Người dùng Hiện R14 4 Hệ thống hiển th ị danh sách các Người dùng có trong cơ sở dữ liệu Hiện R14 5 Quản trị viên chọn Button với Icon Delete để xóa Người dùng Hiện R14 6 Hệ thống gửi xác nhận có muốn xóa Người dùng đó hay không Hiện R14 7 1 Nếu Quản trị viên chọn Có, Cở sở dữ liệu xóa Ng ười dùng đó n R14 7 2 Nếu Quản trị viên chọn Không, hệ thống bỏ qua thao tác Hiện R14 8 Khi có yêu cầu cấp quyền Giáo viên, hệ thống thông báo cho Quản trị viên Hiện R14 9 Quản trị viên xem thông tin người dùng và chọn Đồng ý hoặc Không cấp quyền H iện R14 10 Hệ thống lưu thông tin và thay đổi quyền nếu quản trị viên đồng ý n Bảng 1 15 Chức năng đăng xuất Qui tắc Chức năng Loại R 15 1 Người dùng yêu cầu đăng xuất Hiện R 15 2 Hệ thống đăng xuất người dùng và đưa về trang đăng nhập Hiện 18 2 2 Biều đồ Usecase toàn hệ thống 2 2 1 Đặc tả UseCase Hình 2 1 Sơ đồ Usecase tổng quát 2 2 2 Phân rã Usecase Usecase đăng nhập bằng email - Actor: Thành viên, giáo viên, admin - Mô tả: Tiến trình cơ bản: Use Case này bắt đầu khi Actor nhấn đăng nhập 1 Actor yêu cầu đăng nhập 2 Hệ thống lấy đường dẫn trang hiện tại và chuyển sang trang đăng nhập 3 Actor điền email và password vào form đăng nhập và gửi thông tin đăng nhập Tim kiem Tu dien Bai hoc Dang ky Xac thuc email Xem thong tin ca nhan Cai dat Dang nhap Google Thi thu Dang nhap Email Dang xuat Thành viên Quen mat khau Dang bai Giáo viên QL Bai viet Admin QL nguoi dung Khách Game 19 4 Cơ sở dữ liệu kiểm tra thông tin đăng nhập hợp lệ hay không 5 Nếu thông tin đúng, hệ thống lưu thông tin đăng nhập và quay về trang trước đó 6 Nếu sai, hệ thống báo đăng nhập lỗi và yêu cầu nhập lại 7 Người dùng làm việc với hệ thống Usecase ạo tài khoản - Actor: Khách - Mô t ả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor từ trang đăng nhập, chọn Đăng ký 1 Actor yêu cầu Tạo tài khoản 2 Actor điền Email, tên hiển thị và password vào form Tạo tài khoản và gửi yêu cầu 3 Cơ sở dữ liệu kiểm tra thông tin tài khoản hợp lệ hay không (địa chỉ mail đã tồn tại hay chưa, mật khẩu người dùng có đủ dài) 4 Nếu thông tin đúng, hệ thống thông báo Tạo tài khoản thành công và thông báo đã gửi email xác thực đến địa chỉ email của Actor Gửi một thông báo về việc tạo tài khoản thành công đến tài khoản Actor 5 Nếu sai, hệ thông báo lỗi và yêu cầu nhập lại thông tin 6 Actor tiến hành xác thực tài khoản Usecase xác thực tài khoản email - Actor: Khách - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor Đăng ký tài khoản hợp lệ 1 Hệ thống gửi email thông báo tạo tài khoản của người dùng và một đường link xác thực tài khoản về Email của Actor đã đăng ký tài khoản 2 Actor n hấn vào Button xác thực tài khoản có trong email 3 Hệ thống thông báo xác thực thành công cho Actor 4 Nếu Actor đã xác thực rồi, hệ thống thông báo đã xác thực trước đó 5 Nếu đường dẫn xác thực sai (do Actor tự nhập) thì hệ thống thông báo lỗi 6 Actor nhấn vào quay về trang chủ 20 Usecase đăng nhập bằng tài khoản Google - Actor: Tất cả người dùng - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor nhấn vào Đăng nhập với Google tại trang Đăng nhập 1 Actor yêu cầu đăng nhập 2 Hệ thống lấy đường dẫn trang hiện tại và chuyển sang trang đăng nhập 3 Actor chọn đăng nhập với Google 4 Actor chọn tài khoản Google để đăng nhập 5 Hệ thống tạo tài khoản cho Actor nếu Actor lần đầu đăng nhập bằng tài khoản Google đó Hệ thống lưu thông tin người dùng và quay về trang trước đó Usecase quên mật khẩu - Actor: Thành viên, Giáo viên, Admin - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor nhấn vào Quên mật khẩu tại trang Đăng nhập 1 Actor chọn quên mật khẩu 2 Hệ thống thông báo và tự động gửi email chứa mật khẩu đăng nhập về email mà Actor đã đăng ký Đồng thời gửi một cảnh báo về bảo mật tài khoản đến tài khoản có Email đó Usecase Xem thông tin cá nhân - Actor: Thành viên, Giáo viên, Admin - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor đã đăng nhập tài khoản của mình, chọn vào điều hướng từ Avatar hoặc tab Xem thêm, chọn Trang cá nhân 1 Actor chọn icon Ảnh đại diện Chọn trang cá nhân 2 Hệ thống hiển thị trang thông tin cá nhân Actor 3 Actor xem các thông tin liên quan như ngày tạo tài khoản, tên hiển thị, ảnh đại diện, địa chỉ email, các bài viết mà Actor đã tạo 21 Usecase Cài đặt thông tin cá nh n - Actor: Thành viên, Giáo viên, Admin - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor đã đăng nhập tài khoản của mình, chọn vào điều hướng từ Avatar hoặc tab Xem thêm, chọn Cài đặt 1 Actor chọn icon Ảnh đại diện Chọn Cài đặt 2 Hệ thống hiển thị trang Cài đặt thông tin tài khoản Actor 3 Actor chọn nút Chỉnh sửa và thay đổi các thông tin của mình như tên hiển thị, ảnh đại diện, mật khẩu đăng nhập 4 Actor chọn Lưu để xác nhận thay đổi thông tin hoặc Hủy để bỏ qua thao tác thay đổi thông tin 5 Nếu Actor chọn Lưu, hệ thống thay đổi thông tin Actor và hiển thị thông tin mới trên trang Một thông báo được gửi đến tài khoản để báo thay đổi thông tin thành công 6 Nếu người dùng chọn Hủy, hệ thống đóng form thay đổi thông tin người dùng và hiển thị thông t i n cũ của Actor 7 Actor chọn Button Đổi mật khẩu để thay đổi mật khẩu và điền mật khẩu cũ và mật khẩu mới cần thay đổi, xác nhận lại mật khẩu mới 8 Actor chọn Đổi mật khẩu để xác nhận thay đổi mật khẩu hoặc Hủy để bỏ qua 9 Nếu Actor chọn Đổi mật khẩu, hệ thống kiểm tra mật khẩu cũ có đúng, mật khẩu mới và nhập lại có giống nhau và đủ dài hay không 10 Nếu thông tin hợp lệ, hệ thống thông báo thành công và gửi thông báo cho Actor 11 Nếu thông tin không hợp lệ, hệ thống thông báo lỗi 12 Nếu Actor chọn Hủy, hệ thống đóng form Đổi mật khẩu người dùng Usecase ìm kiếm thông tin - Actor: Tất cả người dùng - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor click vào Input search 1 Actor nhấn vào Input Search và nhập nội dung cần tìm kiếm 2 Hệ thống hiển thị người dùng, bài viết, thi thử liên quan đến từ khóa tìm kiếm 22 3 Actor chọn vào mục tương ứng để xem thông tin bài viết hoặc trang cá nhân người dùng 4 Nếu không tìm thấy thông tin, hệ thống thông báo cho Actor Usecase ra cứu từ điển - Actor: Tất cả người dùng - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor chọn menu từ điển 1 Actor nhấn vào menu từ điển 2 Hệ thống hiển thị trang Từ điển 3 Actor nhập từ khóa cần tìm kiếm 4 Hệ thống hiển thị thông tin về từ khóa cần tìm nếu có như: Cách phát âm, ngữ nghĩa, cách dùng, từ cùng nghĩa với nó,… Usecase àm bài trong các bài học về Đọc, Nghe - Actor: Tất cả người dùng - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor chọn menu đọc hoặc nghe 1 Actor chọn menu Đọc, hoặc Nghe 2 Hệ thống hiển thị danh sách các bài tập 3 Actor chọn vào bài mà mình muốn 4 Hệ thống hiển thị đề bài, các câu hỏi và đáp án dưới dạng trắc nghiệm từ hai đáp án (True or False) hoặc nhiều đáp án 5 Actor làm bài 6 Actor chọn nộp bài 7 Hệ thống tiếp nhận Chi tiết bài kiểm tra và tự động chấm điểm 8 Hệ thống hiển thị thông chi tiết về bài làm như điểm số, đáp án, gợi ý đáp án,… Usecase Game về từ vựng - Actor: Tất cả người dùng - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor chọn menu Game 1 Actor chọn menu Game 2 Hệ thống hiển thị danh sách các trò chơi 23 3 Actor chọn vào trò chơi mà mình muốn 4 Hệ thống hiển thị danh sách hình ảnh và danh sách từ vựng 5 Actor ghép hình ảnh với từ vựng tương ứng theo từng cặp 6 Nếu ghép đúng, hình ảnh và từ vựng ảnh đi, kèm âm thanh phát âm về từ vựng đó được phát lên 7 Nếu ghép sai, hiển thị màu đỏ, rồi giữ nguyên trạng thái cũ 8 Trò chơi kết thúc khi tất cả các từ khóa và hình ảnh tương ứng đều ghép cặp đúng hết Usecase àm bài thi thử - Actor: Thành viên, Giáo viên, Admin - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor Chọn menu Thi thử 1 Hệ thống hiển thị danh sách các bài thi thử, thời hạn đăng kí, làm bài và hết hạn 2 Trong thời gian đăng kí, Actor chọn đăng kí Hệ t hống gửi thông báo về thông tin kỳ thi thử cho Actor 3 Khi đến thời gian làm bài, chỉ những Actor đã đăng kí mới được làm bài 4 Nếu Actor chọn làm bài mà chưa đăng nhập, hệ thống chuyển sang trang đăng nhập Actor đăng nhập Hệ thống quay lại trang làm bài 5 Khi vào trang làm bài với phần Đọc hoặc Nghe Cơ sở dữ liệu lấy đề kiểm tra và tự động xáo trộn đáp án Sau đó tạo bài kiểm tra trong cơ sở dữ liệu và hiển thị ra màn hình 6 Hệ thống hiển thị đề bài, các câu hỏi và đáp án dưới dạng trắc nghiệm với bốn đáp án 7 Actor làm bài kiểm tra, với các chức năng như chọn đáp án, chuyển câu hỏi bất kì trên danh sách câu hỏi, hoặc chuyển sang câu tiếp theo, câu trước trong thời gian giới hạn được đếm ngược 8 Bài kiểm tra được nộp khi Actor chọn nộp bài và xác nhận nộp bài hoặc hết thời gian 9 Hệ thống tiếp nhận Chi tiết bài kiểm tra và tự động chấm điểm và lưu Chi tiết kiểm tra và cơ sở dữ liệu 10 Hệ thống hiển thị kết quả bài kiểm tra 11 K hi hết giờ làm bài cho phép của kì thi thử, hệ thống hiển thị gợi ý đáp án Cho phép tải file pdf bài thi thử 12 Hệ thống hiển thị Bảng xếp hạng 24 Usecase uản l Bài học, hi thử - Actor: Giáo viên, Admin - M ô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor ở trang Quản lý, chọn Quản lý bài Đọc, Nghe hoặc Thi thử 1 Actor đăng nhập tài khoản mình Chọn menu Admin 2 Hệ thống hiển thị giao diện quản lí của admin 3 Quản trị viên chọn menu QL bài Nghe, Đọc hoặc Thi thử 4 Hệ thống hiển thị danh sách các Bài viết do Giáo viên đó đăng hoặc tất cả các Bài viết có trong cơ sở dữ liệu nếu đó là admin 5 Actor có thể Thêm, Sửa, Xóa bài tương ứng mà mình muốn trong danh sách 6 Nếu chọn Xóa, hệ thống gửi xác nhận có muốn xóa Bài học đó hay không và các dữ liệu khác liên quan đến Bài học đó 7 Nếu chọn Có, cơ sở dữ liệu xóa Bài viết đó 8 Nếu chọn Không, hệ thống bỏ qua thao tác Usecase uản l Người dùng - Actor: Admin - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor chọn menu quản lí người dùng ở trang admin 1 Actor đăng nhập tài khoản Quản trị viên và chọn menu Admin 2 Hệ thống hiển thị giao diện quản lí của admin 3 Actor chọn menu QL Người dùng 4 Hệ thống hiển thị danh sách các Người dùng có trong cơ sở dữ liệu 5 Actor chọn Button với Icon Delete để xóa Người dùng 6 Hệ thống gửi xác nhận có muốn xóa Người dùng đó hay không 7 Nếu Actor chọn Có, Cở sở dữ liệu xóa Người dùng đó và các dữ liệu liên quan đến người dùng đó 8 Nếu Actor chọn Không, hệ thống bỏ qua thao tác 9 Khi có yêu c ầu cấp quyền Giáo viên, hệ thống thông báo cho Actor 10 Actor xem thông tin người dùng và chọn Đồng ý hoặc Không cấp quyền 11 Hệ thống lưu thông tin và thay đổi quyền nếu Actor đồng ý 25 Usecase đăng xuất - Actor: Thành viên, Giáo viên và Admin - Mô tả: Tiến trình cơ bản: Usecase này bắt đầu khi Actor nhấn vào button Avatar và chọn Đăng xuất 1 Actor yêu cầu đăng xuất 2 Hệ thống đăng xuất khỏi tài khoản của Actor và đến trang Đăng nhập 2 3 Biểu đồ tuần tự Hình 2 2 Biểu đồ tuần tự Đăng nhập Hình 2 3 Biểu đồ tuần tự Đăng xuất Actor Actor : Login : Login Server Server : Database : Database Nhap dia chi email và password Chon D Gui thong tin dang nhap ve Server login(String, String) Kiem tra CSDL Tra ve ket qua Hien thi ket qua Actor Actor Page Page Server Server Yeu cau Dang xuat Gui yeu cau Xoa Cookie Quay ve trang Dang nhap 26 Hình 2 4 Biểu đồ tuần tự uên mật khẩu Hình 2 5 Biểu đồ tuần tự Xem thông tin cá nhân Actor Actor : Login : Login Server Server : Database : Database Nhap dia chi email Chon Quen mat khau Gui thong tin email ve Server getPass(String) Tra ve pass neu co Gui pass den email nguoi dung Hien thong bao Actor Actor Profile Profile Server Server : Database : Database Chon xem Profile Lay thong tin Profile tu Email get(String) Tra ve thong tin nguoi dung Hien ket qua 27 Hình 2 6 Biểu đồ tuần tự Cài đặt Actor Actor Setting Setting Server Server : Database : Database Chon Setting Edit Name Nhap ten moi Lay thong tin ten moi updateName(String, String) Tra ve ket qua Hien ket qua Edit Avatar Chon anh dai dien Kiem tra anh hop le Gui thong tin ve server Luu tru anh updatePicture (String, String) Tra ve ket qua Hien ket qua Edit Password Nhap mat khau cu, mat khau moi va Xac nhan mat khau Kiem tra mat khau cu, mat khau moi hop le va xac nhan dung updatePass(String, String) Tra ve ket qua Hien ket qua 28 Hình 2 7 Biểu đồ tuần tự ìm kiếm Hình 2 8 Biểu đồ tuần tự Tra t ừ điển Actor Actor Page Page Server Server Database Database Chon Input Search Nhap tu khoa tim kiem Gui tu khoa tim kiem Tim kiem nguoi dung, bai viet co chua tu khoa Tra ve ket qua Hien ket qua Click vao mot trong cac ket qua mong muon Hien thi trang ca nhan nguoi dung hoac Bai viet Actor Actor Dictionar y Dictionar y Server Server Database Database Chon menu Dictionary, Input Search Nhap tu can tra cuu Gui tu can tra cuu get(String) Tra ve ket qua Hien ket qua 29 Hình 2 9 Biểu đồ tuần tự Làm bài reading, listening Actor Actor Reading/Listenin g Reading/Listenin g Serve r Serve r : Database : Database Chon bai hoc Lay thong in bai hoc getSlug(String, String) Tra ve thong tin Hien thi thong tin Chon dap an cho moi cau hoi Danh dau dap an da chon Thay doi dap an da chon Danh dau dap an moi Nop bai Gui thong tin submit(String, Array) Tra ve ket qua Hien ket qua bai lam, goi y Danh gia bai viet Gui thong tin danh gia create(String, String) Tra ve ket qua Hien thi danh gia 30 Hình 2 10 Biểu đồ tuần tự hi thử Actor Actor Testing Testing Serve r Serve r Database Database Dang ki tham gia thi thu Kiem tra Dang nhap Neu chua, Yeu cau Dang nhap Da dang nhap, gui thong tin dang ki create(String, String) Tra ve ket qua Hien thi trang thong tin Gui thong bao den tai khoan Bat dau thi Gui yeu cau Lay de thi Tao bai thi Tra ve thong tin Hien de thi Chon hoac Doi dap an Gui thong tin update() Tra ve thong tin Danh dau dap an da chon Nop bai co xac nhan Hoac het gio Gui yeu cau submit() Tinh diem Tra ve ket qua Hien diem so Quay ve trang thong tin Lay bang xep hang hien tai Neu het thoi gian Thi thu cho phep, hien thi File Dap an Lay thong tin Tra ve thong tin Hien thong tin 31 Hình 2 11 Biểu đồ tuần tự Game Actor Actor game game Serve r Serve r : Database : Database Chon Game can choi Lay thong in game getSlug(String, String) Tra ve thong tin Hien thi tro choi Chon tu vung hoac hinh anh Danh dau o da chon Thay doi sang o khac Danh dau o moi Chon du mot o Hinh va mot o Tu vung Danh gia bai viet Gui thong tin danh gia create(String, String) Tra ve ket qua Hien thi danh gia Kiem tra Hinh anh co dung voi nghia cua Tu vung Dung: An hai o do, phat am thanh cach doc Tu vung Sai: Chop do Chon Dung tat ca cac cap Hinh anh va Tu vung Tro choi hoan thanh 32 Hình 2 12 Biểu đồ tuần tự uản lý người dùng actor actor user manager user manager server server database database Chon xoa nguoi dung, co xac nhan Gui yeu cau remove() Gui ve ket qua Hien ket qua Thay doi quyen nguoi dung Gui yeu cau update() Tra ve ket qua Hien ket qua, gui thong bao cho nguoi dung 33 Hình 2 13 Biểu đồ tuần tự uản l Reading, Listening, Testing actor actor post manager post manager Server Server Database Database Tao bai viet Hien form Tao bai moi Nhap noi dung Hien noi dung vua nhap Click button Them Bai Kiem tra thong tin nhap co day du Gui thong tin create() Tra ve ket qua Hien thi ket qua Chon Sua bai Hien thi form Chinh sua Thay doi noi dung bai viet Hien noi dung chinh sua Chon button Sua Bai Gui thong tin bai viet Kiem tra ni dung chinh sua co hop le update() Gui ve ket qua Hien ket qua Chon button Huy Dong form Them Bai/ Chinh sua Chon button Xoa tai bai can Xoa Gui yeu cau xac nhan Xoa Chon Dong y Gui yeu cau remove() Tra ve ket qua Hien ket qua Chon Huy Bo qua thao tac xoa bai viet 34 2 4 Biểu đồ lớp Hình 2 14 Biểu đồ lớp 35 2 5 Xây dựng cơ sở dữ liệu Cơ sở d ữ li ệ u được lưu trữ v ới MongoDB, cơ sở d ữ li ệ u NoSQL D ự a vào Bi ểu đồ l ớ p và yêu c ầ u d ữ li ệ u, ta có các Collection sau: var slider = mongoose Schema( { title: {type: String, require}, caption: {type: String, require}, action: {type: String, require}, color: {type: String, require}, backgroundImage: String, url: String, }, { timestamps: true } ); var user = mongoose Schema( { email: String, pass: String, picture: String, verification: Boolean, verificationCode: String, name: String, courses: String, permission: { type: String, default: ''''user'''' }, notifications: [ { type: mongoose Schema Types ObjectId, ref: "notification", }, ], }, { timestamps: true }, ); var notification = mongoose Schema( { content: { type: String, required: true }, type: { type: String, required: true }, link: { type: String}, }, { timestamps: true } ); var permission = mongoose Schema( { email: { type: String, required: true }, comment: { type: String, required: true }, accept: { type: Boolean, default: false, required: true }, }, { timestamps: true }, 36 ); var listening = mongoose Schema( { title: { type: String, required: true }, action: { type: String, required: true }, content: { type: Object, required: true }, question: { type: Array, required: true }, topic: { type: String}, picture: { type: String, required: true }, slug: { type: String, slug: ''''title'''', unique: true }, author: { type: mongoose Schema Types ObjectId, ref: "user", }, ratings: [ { type: mongoose Schema Types ObjectId, ref: "rating", }, ], }, { timestamps: true } ); var reading = mongoose Schema( { title: { type: String, required: true }, action: { type: String, required: true }, content: { type: Object, required: true }, question: { type: Array, required: true }, topic: { type: String}, picture: { type: String, required: true }, slug: { type: String, slug: ''''title'''', unique: true }, author: { type: mongoose Schema Types ObjectId, ref: "user", }, ratings: [ { type: mongoose Schema Types ObjectId, ref: "rating", }, ], }, { timestamps: true } ); 37 var game = mongoose Schema( { title: { type: String, required: true }, action: { type: String, required: true }, data: { type: Array }, topic: { type: String }, type: { type: String }, url: { type: String, required: true }, slug: { type: String, slug: ''''title'''', unique: true }, author: { type: mongoose Schema Types ObjectId, ref: "user", }, ratings: [ { type: mongoose Schema Types ObjectId, ref: "rating", }, ], }, { timestamps: true }, ); var testing = mongoose Schema( { title: { type: String, required: true }, action: { type: String, required: true }, reading: { type: read }, listening: { type: listen }, topic: { type: String }, url: { type: String, required: true }, slug: { type: String, slug: ''''title'''', unique: true }, author: { type: mongoose Schema Types ObjectId, ref: "user", }, timeStart: { type: Date, required: true }, timeEnd: { type: Date, required: true }, ratings: [ { type: mongoose Schema Types ObjectId, ref: "rating", }, ], }, { timestamps: true }, ); 38 var exam = mongoose Schema( { email: { type: mongoose Schema Types ObjectId, ref: "user", }, readings: { type: Object }, listenings: { type: Object }, score: { type: Number, required: true }, timeComplete: { type: Data}, }, { timestamps: true } ); var rating = mongoose Schema( { score: { type: Number, required: true }, email: { type: mongoose Schema Types ObjectId, ref: "user", }, comment: { type: String} }, { timestamps: true } ); 39 CHƯƠNG 3 TRI Ể N KHAI H Ệ TH Ố NG 3 1 Cài đặt hệ thống 3 1 1 Các hệ điều hành phổ biến Hệ điều hành là hệ thống để quản lý phần cứng, phần mềm và cung cấp các dịch vụ chung cho các chương trình trên thiết bị điện tử: máy tính, tablet, điện thoại Trong tiếng anh, hệ điều hành được gọi là perating System – OS Hệ điều hành giữ một vai trò quan trọng giữa phần cứng của máy tính và các chương trình Chúng cung cấp một môi trường để người sử dụng phát triển và thực hiện các chương trình một cách đơn giản, dễ dàng Hệ điều hành còn giúp thiết lập thời gian khởi động các tác vụ để sử dụng hệ thống một cách hiệu quả Hệ điều hành còn hỗ trợ phân bổ và lưu trữ dung lượng, các tài nguyên khác của phần cứng Hiện nay, có 3 hệ điều hành dành cho laptop và PC phổ biến thông dụng nhất là Microsoft Windows, mac S và Linux Trong đó, Microsoft Windows đứng thứ nhất về thị phần với 76,45% Xếp thứ 2 là mac S với 17,72% và thứ 3 là Linux với 1,73% H ệ điề u hành Windows Windows là hệ điều hành được phát triển bởi tập đoàn Microsoft vào những nă m 1980 Trải qua nhiều thập kỷ, Microsoft đã ra mắt và nâng cấp phiên bản hệ điều hành Windows, gần đây nhất là Windows 1 1 được ra mắt năm 20 21 Với sự phát triển bền vững, Windows được cài trên đa phần tất cả máy tính PC, laptop trở thành hệ điều hành phổ biến nhất thế giới hiện nay Không chỉ phổ biến, hệ điều hành Windows còn nhiều ưu điểm nổi bật như: dễ sử dụng, tính ổn định cao, đầy đủ tính năng từ công việc đến giải trí Tuy nhiên để cài đặt và sử dụng Microsoft Windows, người dùng cần trả phí bản quyền H ệ điề u hành MacOS Giống như tên gọi, Mac S là hệ điều hành của dòng máy Mac Đây là dòng máy tính, laptop được sáng tạo bởi Apple Chính vì thế, các dòng PC hay laptop của Apple chỉ có thể chạy hệ điều hành Mac S hay Mac S chỉ được cài đặt trên máy t ính thương hiệu Apple Giao diện đẹp là một trong ưu điểm nổi bật của Mas S, Thêm vào đó, máy tính Apple đều đã được mặc định cài sẵn Mac S Người dùng sẽ không cần trả phí bản quyền để sử dụng Một hạn chế của hệ điều hành Mac S là nhiều các ứng dụng, phầ n mềm không phát hành phiên bản cho hệ điều hành này 40 H ệ điề u hành Linux Linux là một hệ điều hành mở Điều này đồng nghĩa người sử dụng có thể sửa đổi hay thực hiện bất kỳ thay đổi nào trên nó Ưu điểm của Linux chính là miễn phí, không mất phí bản quyền để sử dụng Tuy nhiên, giao diện lại khá cổ điển, độ bảo mật không cao Các bản sửa đổi hay bản phối hệ điều hành Linux được sử dụng trong máy chủ và siêu máy tính Với sự ra đời của điện thoại thông minh, hệ điều hành dành cho điện thoại cũng chính thức được xuất hiện Được thiết kế dành cho điện thoại, máy tính bảng, hệ điều hành này sử dụng với mục đích chính là liên lạc và giải trí Chính vì vậy, hệ điều hành điện thoại sẽ ít tính năng hơn hệ điều hành máy tính Hiện nay, hệ điều hành cho điện thoại thông minh có 2 loại chính là Android và i S Tính đến hết năm 2020, thị phần của Android là 72% chiến phần lớn của thị trường hệ điều hành điện thoại thông minh i S của Apple tuy xếp ở vị trí thứ 2 nhưng thị phần chỉ bằng 1/3 của Android H ệ điề u hành Android Hệ điều hành Android là sản phẩm trí tuệ của công ty Android Inc Sau thương vụ mua lại vào năm 2005, công ty này đã thuộc về Google Đây hệ điều hành dành cho thiết bị di động thông minh có số lượng người sử dụng lớn nhất thế giới, hiện nay Ưu điểm