PHẦN MỞ ĐẦU 1. Tính cấp thiết của đề tài Hiện nay, tiếng Anh là ngôn ngữ quốc tế, được sử dụng rộng rãi tại nhiều quốc gia trên thế giới. Tại Việt Nam, rất nhiều người trong nhiều độ tuổi từ bé đến lớn đang nỗ lực hàng ngày để học tiếng Anh. Với trình độ tiếng Anh từ khá trở lên, người Việt Nam có thể đáp ứng được yêu cầu tuyển dụng trong nhiều ngành nghề như kinh tế, chính trị, khoa học, du lịch, vv… Ngoài ra, với tiếng Anh, chúng ta có thể tìm và đọc được các nguồn tài liệu quý giá mà rất ít khi được viết hoặc dịch sang tiếng Việt, hoặc có thể giao lưu kết bạn với tất cả mọi người trên thế giới.
Một trong những nền tảng ban đầu của việc sử dụng tiếng Anh tốt đó là phải có vốn từ vựng phong phú. Nhà ngôn ngữ học nổi tiếng D. Wilkins đã nói rằng “Without grammar, very little can be conveyed; without vocabulary, nothing can be conveyed. Chính vì vậy, có thể coi từ vựng là tiền đề quan trọng cho việc học và phát triển khả năng ngoại ngữ của mỗi người.
Cùng với đó là sự phát triển của công nghệ, bất kì ai cũng có thể sở hữu cho mình một chiếc máy tính xách tay. Chính vì vậy, việc học tiếng Anh trên các thiết bị di động đem lại cho người dùng một sự thuận tiện, linh hoạt hơn so với cách học từ vựng truyền thống bằng giấy bút. Từ những nhu cầu và lợi thế đó, nhóm em quyết định nghiên cứu và xây dựng ứng dụng: XÂY DỰNG WEBSITE HỌC TIẾNG ANH BẰNG FLASHCARD. Mục đích của đề tài Đề tài nhằm nghiên cứu về thói quen học từ vựng của mọi người, từ đó có thể xây dựng một website để học từ vựng thông qua dạng flashcard, ngoài ra mọi người có thể chia sẻ những bài học với nhau thông qua hệ thống, dễ dàng tương tác như trong thực tế, tránh gây nhàm chán cho người dùng.
Đối tượng và phạm vi nghiên cứu Đề tài này phù hợp với tất cả mọi người với mọi độ tuổi, mọi trình độ học vấn, mọi ngành nghề,. đang có nhu cầu cải thiện vốn từ vựng của mình. Kết quả dự kiến đạt được - Xây dựng được website học tiếng Anh bằng flashcard sử dụng công nghệ ReactJS và. 1 do an - Website phải có 2 mục cho người dùng sử dụng và admin để quản lý tất cả các dữ liệu của người dùng.
Phương pháp nghiên cứu - Phương pháp thực nghiệm khoa học. - Phương pháp phân tích và tổng hợp. Bố cục báo cáo Báo cáo dự kiến gồm 3 phần và 5 chương: - Phần mở đầu - Phần nội dung o Chương 1: Cơ sở lý thuyết o Chương 2: Khảo sát hiện trạng và xác định yêu cầu o Chương 3: Mô hình hoá yêu cầu o Chương 4: Thiết kế hệ thống o Chương 5: Cài đặt và kiểm thử - Phần kết luận 2 do an PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.NET CORE VÀ ASP.NET CORE ASP.NET Core là một open-source mới và framework đa nền tảng (cross- platform) cho việc xây dựng những ứng dụng hiện tại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile. Do là một framework đa nền tảng nên .NET Core hỗ trợ hầu hết các hệ điều hành như Windows, Linux, macOS.NET Core, có thể: - Xây dựng các ứng dụng web, các dịch vụ, ứng dụng IoT và các phần backend mobile.
- Sử dụng các công cụ phát triển ưa thích trên Windows, macOS và Linux. - Triển khai trên đám mây hoặc tại chỗ.NET Core hoặc .NET Core mang lại các lợi ích như sau: - Dùng để xây dựng giao diện Web (Web UI) cũng như các API Web. - Tích hợp các framework phía client hiện đại và các quy trình làm việc phát triển. - Hệ thống cấu hình sẵn có trên đám mây.
- Đường ống (pipeline) yêu cầu HTTP mang tính module, hiện suất cao và nhẹ. - Có khả năng lưu trữ (host) ở IIS, Nginx, Apache, Docker, hoặc tự host ở các tiến trình riêng. - Tạo mới phiên bản app side-by-side với. - Tạo công cụ đơn giản hóa phát triển web hiện đại.
- Mã nguồn mở và tập trung vào cộng đồng phát triển mã nguồn.NET Core được cung cấp dưới dạng các gói NuGet. Có thể sử dụng các gói này để tối ưu hóa ứng dụng khi chỉ nhúng những thành phần cần thiết.NET Core MVC cung cấp các tính năng để xây dựng API Web và ứng dụng web như sau: - Mô hình MVC (Model-View-Controller) giúp tạo ra các API web và ứng dụng web có khả năng thực nghiệm. - Razor Pages (phần mới ở ASP.0) là một mô hình lập trình dựa theo cơ chế trang web giúp xây dựng giao diện web dễ và hiệu quả hơn. - Razor cung cấp một cú pháp hiệu quả cho các trang Razor và view MVC.
3 do an - Tag Helper cho phép mã nguồn phía server tham gia vào việc tạo và phát sinh phần tử HTML ở các tập tin Razor. - Tích hợp hỗ trợ cho các định dạng đa dữ liệu và việc dàn xếp nội dung cho phép các API web tiếp cận nhiều khách hàng hơn, bao gồm trên các trình duyệt và thiết bị mobile khác nhau. - Ràng buộc mô hình tự động ánh xạ dữ liệu từ các yêu cầu HTTP đến các tham số phương thức hành động. - Xác thực mô hình tự động thực thi xác thực dữ liệu phía client và server.
Phát triển phía client: ASP.NET Core tích hợp liền mạch với các thư viện và framework phía client, bao gồm Angular, React, và Bootstrap. REACTJS React JS Component là các block xây dựng nên mọi ứng dụng React. Một component có thể được sử dụng riêng hoặc được kết hợp với các component khác để tạo ra các component lớn hơn. Điều quan trọng, các component này là động: chúng cung cấp một template, sẽ được điền vào bằng dữ liệu biến.
Mục đích chính của một component React là tạo ra một số JSX từ template này, và sẽ biên dịch sang HTML và được hiển thị trên DOM.[2] JSX là một syntax extension cho JavaScript. Nó có vẻ rất giống với HTML, nhưng với một số khác biệt chính. Ví dụ: bạn có thể bao gồm một vanilla JavaScript expression bên trong JSX bằng cách bao nó trong dấu ngoặc nhọn.[2] Props là một object được cung cấp cho một component bởi cha của nó và nó chứa tất cả các thông tin liên quan đến component cụ thể đó. State giống như nguồn của thác nước, thì props là dòng nước chảy xuống.[2] State là một đối tượng JavaScript ghi lại và phản ứng với các user event.
Mỗi class-based component có state object riêng và bất cứ khi nào state bị thay đổi, component đó cùng với tất cả các phần tử con của nó sẽ được hiển thị lại.[2] 4 do an CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2. KHẢO SÁT HIỆN TRẠNG 2. Tinycards (https://tinycards. Giao diện trang chủ Tinycards Ưu điểm: - Thiết kế đơn giản, đẹp, hiện đại.
- Cho phép học với flashcard mà không cần phải đăng nhập. - Nguồn flashcard phong phú, không giới hạn ngôn ngữ. - Có danh mục hiển thị những bài học tiêu biểu giúp người dùng dễ dàng truy cập. - Có chức năng theo dõi người dùng, giúp cập nhật những bài học của những người mình quan tâm một cách nhanh chóng.
Nhược điểm: - Mỗi card chỉ có thể thêm một nghĩa duy nhất. - Nghĩa của mỗi card chưa có các thông tin như từ loại hay ví dụ mẫu sử dụng từ. Cram (https://www. Giao diện trang chủ Cram Ưu điểm: - Có phân loại flashcard.
- Cho phép học với flashcard mà không cần phải đăng nhập. - Cho phép giới hạn số lượng thẻ trên tổng số thẻ trong 1 lần kiểm tra. - Hỗ trợ một số hình thức kiểm tra đơn giản như so khớp, ghi nhớ. - Tích hợp vào các game nhằm dễ dàng ghi nhớ.
- Nguồn flashcard phong phú. - Hỗ trợ trên nền tảng di động. Nhược điểm: - Giao diện không thân thiện. BrainScape (https://www.
Giao diện trang chủ BrainScape Ưu điểm: - Giao diện được thiết kế hiện đại. - Hỗ trợ trên cả nền tảng di động. - Nguồn flashcard phong phú. - Có 5 lựa chọn tương ứng với 5 mức độ người dùng hiểu về từ, giúp cho hệ thống ghi nhận được khả năng tiếp thu từ của người dùng.
- Có chức năng mở lớp, có thể thêm nhiều người dùng khác để sử dụng chung bài học. Nhược điểm: - Trả phí để sở hữu flashcard có sẵn. ProProfs Flashcard (https://www.com/flashcards/) Hình 2. Giao diện trang chủ ProProfs Flashcard Ưu điểm: - Giao diện thiết kết hiện đại.
- Hỗ trợ một số hình thức kiểm tra đơn giản như so khớp, ghi nhớ. - Cho phép chia sẻ flashcard qua Email, Facebook, Twitter, … - Cho phép kiếm tiền từ việc bán bộ flashcard tự tạo. - Có thể sao chép và chỉnh sửa flashcard có sẵn. - Hỗ trợ trên cả nền tảng di động.
Nhược điểm: - Cần phải trả phí để có thêm nhiều chức năng khác. StudyBlue (https://www. Giao diện trang chủ StudyBlue Ưu điểm: - Cho phép tuỳ chỉnh số lượng flashcard và hình thức làm bài kiểm tra. - Đánh giá, tổng kết bài kiểm tra khi chưa hoàn thành.
- Hỗ trợ trên cả nền tảng di động. - Cho phép thao tác với card bằng bàn phím, giúp trải nghiệm học nhanh và dễ dàng hơn. - Bài học có link riêng để chia sẻ lên các nền tảng mạng xã hội như Facebook, Twitter. Nhược điểm: - Hiển thị toàn bộ flashcard trên màn hình thay vì có phân trang.
- Không có hình thức hiển thị từng flashcard. - Giao diện kiểm tra không thân thiện. XÁC ĐỊNH YÊU CẦU Xây dựng được website học tiếng Anh bằng flashcard với các yêu cầu sau: - Yêu cầu chức năng: o Đăng nhập, đăng ký bằng tài khoản thường. o Đăng nhập, đăng ký bằng tài khoản Facebook, Google.
o Tạo, xoá, sửa deck. o Tạo, xoá, sửa card. o Thêm card vào deck, xoá card khỏi deck. o Xem thống kê.
o Luyện tập với deck. o Xem kho card và kho deck. o Tải card từ kho card. o Tải deck từ kho deck.
o Gửi yêu cầu công khai deck cá nhân. - Yêu cầu hệ thống: o Quản lý user ▪ Xem và xóa user. ▪ Xem và xóa deck của user. ▪ Xem và xóa card của user.
o Quản lý đề xuất card và yêu cầu công khai deck của user. - Yêu cầu phi chức năng: o Tốc độ truy xuất dữ liệu nhanh. o Dễ bảo trì 10 do an CHƯƠNG 3: MÔ HÌNH HOÁ YÊU CẦU 3. LƯỢC ĐỒ USECASE Hình 3.
Lược đồ usecase 11 do an 3. Nghiệp vụ Bảng 3. Bảng nghiệp vụ của Guest STT Tên nghiệp vụ Loại nghiệp vụ Quy định Biểu mẫu Ghi chú 1 Đăng nhập Xử lý QD_DangNhap BM_DangNhap 2 Đăng ký Xử lý, lưu trữ QD_DangKy BM_DangKy 3.