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
NỘI DUNG NGHIÊN CỨU
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
- 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:
CƠ SỞ LÝ THUYẾT VÀ YÊU CẦU HỆ THỐNG
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
- 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: Đề 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ành 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.
Khảo sát hệ thống
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 đề
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.
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
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
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
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
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 website
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
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ộ
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 quy 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
THIẾT KẾ HỆ THỐNG
Phân tích 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
- 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
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
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
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 đó
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
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
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 email 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
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
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
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 đó
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
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 đó
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
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
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
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
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
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
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
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
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
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
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
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ó,…
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
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
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
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
R11.6.2 Nếu ghép sai, hiển thị màu đỏ, rồi giữ nguyên trạng 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
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
R12.2 Trong thời gian đăng kí, người dùng chọn đăng kí Hệ thống gửi thông báo về thông tin kỳ thi thử cho người dùng
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
R12.4 Nếu người dùng chọ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
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 tra 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
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 sang câu tiếp theo, câu trước trong thời gian giới hạn được đếm ngược
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
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ử
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ử
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
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
R13.5 Chọ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 Nhậ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
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 Chọ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
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
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
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
R14.5 Quản trị viên chọn Button với Icon Delete để xóa Người dùng
R14.6 Hệ thống gửi xác nhận có muốn xóa Người dùng đó hay không
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
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
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
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
R15.1 Người dùng yêu cầu đăng xuất Hiện
R15.2 Hệ thống đăng xuất người dùng và đưa về trang đăng nhập
Biều đồ Usecase toàn hệ thống
Hình 2 1 Sơ đồ Usecase tổng quát
Usecase đăng nhập bằng email
- Actor: Thành viên, giáo viên, admin
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
Xem thong tin ca nhan
Cai dat Dang nhap Google
Thi thu Dang nhap Email
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
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
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 nhấ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ủ
Usecase đăng nhập bằng tài khoản Google
- Actor: Tất cả người dùng
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 đó
- Actor: Thành viên, Giáo viên, Admin
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
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
Usecase Cài đặt thông tin cá nh n
- Actor: Thành viên, Giáo viên, Admin
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 tin 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
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
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
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
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
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
Tiến trình cơ bản: Usecase này bắt đầu khi Actor chọn menu Game
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
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ệ thố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 Khi 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
Usecase uản l Bài học, hi thử
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
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
- Actor: Thành viên, Giáo viên và Admin
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.
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 : Login : Login Server Server : Database : Database
Nhap dia chi email và password Chon D
Gui thong tin dang nhap ve Server login(String, String)
Tra ve ket qua Hien thi ket qua
Actor Page Page Server Server
Gui yeu cauXoa Cookie Quay ve trang Dang nhap
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 : Login : Login Server Server : Database : Database
Nhap dia chi email Chon
Gui thong tin email ve Server getPass(String)
Tra ve pass neu co
Gui pass den email nguoi dung Hien thong bao
Actor Profile Profile Server Server : Database : Database
Lay thong tin Profile tu Email get(String)Tra ve thong tin nguoi dungHien ket qua
Hình 2 6 Biểu đồ tuần tự Cài đặt
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 quaHien ket qua
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 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
Input Search Nhap tu can tra cuu
Gui tu can tra cuu get(String)Tra ve ket quaHien ket qua
Hình 2 9 Biểu đồ tuần tự Làm bài reading, listening
: 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
Gui thong tin submit(String, Array) Tra ve ket qua Hien ket qua bai lam, goi y
Gui thong tin danh gia create(String, String)Tra ve ket quaHien thi danh gia
Hình 2 10 Biểu đồ tuần tự hi thử
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)
Hien thi trang thong tin Gui thong bao den tai khoan Bat dau thi
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 tinTra ve thong tinHien thong tin
Hình 2 11 Biểu đồ tuần tự Game
: 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
Chon du mot o Hinh va mot o Tu vung
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
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
Tra ve ket qua Hien ket qua, gui thong bao cho nguoi dung
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
Hien form Tao bai moi
Hien noi dung vua nhap
Kiem tra thong tin nhap co day du
Gui thong tin create() Tra ve ket qua Hien thi ket qua
Hien thi form Chinh sua
Thay doi noi dung bai viet
Hien noi dung chinh sua
Gui thong tin bai viet Kiem tra ni dung chinh sua co hop le update() Gui ve ket qua Hien ket qua
Dong form Them Bai/ Chinh sua
Chon button Xoa tai bai can Xoa
Gui yeu cau xac nhan Xoa
Gui yeu cau remove() Tra ve ket qua Hien ket qua
Bo qua thao tac xoa bai viet
Biểu đồ lớp
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, },
{ 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",
{ content: { type: String, required: true }, type: { type: String, required: true }, link: { type: String},
{ email: { type: String, required: true }, comment: { type: String, required: true }, accept: { type: Boolean, default: false, required: true },
{ 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",
{ type: mongoose.Schema.Types.ObjectId, ref: "rating",
{ 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",
{ type: mongoose.Schema.Types.ObjectId, ref: "rating",
{ timestamps: true } 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",
{ type: mongoose.Schema.Types.ObjectId, ref: "rating",
{ 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",
{ email: { type: mongoose.Schema.Types.ObjectId, ref: "user",
}, readings: { type: Object }, listenings: { type: Object }, score: { type: Number, required: true }, timeComplete: { type: Data},
{ score: { type: Number, required: true }, email: { type: mongoose.Schema.Types.ObjectId, ref: "user",
TRIỂN KHAI HỆ THỐNG
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%
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 11 được ra mắt năm 2021 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
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
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 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 của Android là một hệ điều hành mở Chính vì vậy đa phần thiết bị di động thông minh đều có thể cài đặt và sử dụng Với độ phổ biến rộng, hầu hết ứng dụng, phần mềm đều có phiên bản cho hệ điều hành Android Ngoài ra, Android có khả năng tùy biến cao cho phép người dùng có thể đặt lại thiết bị trong trường hợp quên mật khẩu
So sánh về độ bảo mật, Android đang bị đánh giá thấp hơn đối thủ của mình là iOS
Hệ điều hành iOS i S là hệ điều hành chỉ cài đặt và sử dụng duy nhất trên thiết bị di động của Apple Hệ điều hành này ra mắt từ năm 2007 đã tạo ra một cuộc cách mạng, kỷ nguyên công nghệ phần mềm
Hệ điều hành i S trên dòng điện thoại Apple có tính năng bảo mật cao
Hệ điều hành i S được đánh giá rất cao về tính năng bảo mật Bên cạnh đó, hiệu năng ổn định và không có nhiều yêu cầu về cấu hình cũng là ưu điểm nổi bật của i S so với Android Tuy nhiên, tính độc quyền đã mang đến vài hạn chế cho cả hệ điều
Trang Website được xây dựng trên nền tảng ReactJs, một thư viện front-end được phát triển bởi Facebook React được sử dụng để xử lý ở tầng view cho các website và mobile app, cho phép ta tạo nên các Reusable UI components Là 1 trong những thư viện JS phổ biến nhất hiện nay, có nền tảng vững chắc cùng với 1 cộng đồng developer vô cùng lớn đằng sau nó Đầu tiên các bạn cần cài đặt Node.js để tạo môi trường chạy React, việc cài đặt rất đơn giản và nhanh chóng
Cài đặt xong Node.js, tạo 1 folder “doantotnghiep”, tiếp theo tạo trong folder này hai folder “backend” để chứa project Node, và “frontend” để chứa project React Mở Terminal
Tiếp theo gõ các dòng lệnh sau để tạo project cd frontend npm install -g create-react-app create-react-app tienganhb1
NPM sẽ tự động tạo cho ta 1 project tên là tienganhb1 và install các module và lib cần thiết cho chúng ta Để chạy chương trình ta nhập: npm start
Mở một Terminal khác và nhập: cd backend npm install nodejs npm init npm install express
Chúng ta đã hoàn thành cài đặt Express framework, giờ chỉ việc viết code cho các thành phần của trang Website thôi.
Một số giao diện trong hệ thống
Hình 3 1 Trang chủ giao diện trên laptop
Hình 3 3 rang chủ giao diện trên điện thoại
Hình 3 5 hông báo lỗi khi đăng nhập không hợp lệ
Hình 3 6 Mật khẩu được gửi về Email khi chọn uên mật khẩu
Hình 3 8 Email yêu cầu xác minh tài khoản
Hình 3 9 rang chủ khi đã đăng nhập giao diện laptop
Hình 3 10 rang chủ khi đã đăng nhập giao diện Ipad
Hình 3 11 rang chủ khi đã đăng nhập giao diện điện thoại
Hình 3 14 Chọn một bài học istening
Hình 3 15 rang Dictionary với từ tìm kiếm “home”
Hình 3 17 Chi tiết bài esting
Hình 3 18 Kết quả bài esting đã làm
Hình 3 21 Các hình ảnh động vật và tự vựng được sắp xếp ngẫu nhiên
Hình 3 24 Xem trang cá nhân
Hình 3 26 hay đổi ên hiển thị
Hình 3 27 Khi xác nhận “Save”, hệ thống thay đổi ên hiển thị và gửi thông báo thành công cho người dùng
Hình 3 29 rang uản lý bài thi thử
Hình 3 30 rang uản lý người dùng.