Đồ án tốt nghiệp xây dựng web học tiếng anh online - ĐH SPKT TPHCM

Tham khảo đồ án tốt nghiệp xây dựng web học tiếng Anh online bằng .NET Core và Angular. Luận văn chi tiết các chức năng quản lý và học tập cho sinh viên.

• Tác giả: Nguyễn Trọng Đạt
• Người hướng dẫn: ThS. Nguyễn Trần Thi Văn
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Trang Web Học Tiếng Anh Online (.NET Core & Angular)
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Web Học Tiếng Anh Online

Đồ án web học tiếng Anh online là một dự án tốt nghiệp được thực hiện bởi các sinh viên ngành Công nghệ Thông tin tại Trường Đại học Sư Phạm Kỹ Thuật TP.HCM. Dự án này được xây dựng nhằm cung cấp một nền tảng học tập hiện đại cho những người muốn nâng cao kỹ năng tiếng Anh từ nhà. Với sự phát triển mạnh mẽ của kỷ nguyên công nghệ, việc học tiếng Anh online đã trở thành một giải pháp tối ưu cho những người bận rộn. Website học tiếng Anh này kết hợp các công nghệ tiên tiến như .NET Core ở backend và Angular 8 ở frontend, mang đến trải nghiệm người dùng tuyệt vời. Dự án tập trung vào việc tiết kiệm thời gian và chi phí học tập, đồng thời tối ưu hóa quá trình tiếp thu kiến thức ngôn ngữ.

1.1. Lý do xây dựng đề tài

Ngày nay, nhu cầu học tiếng Anh ngày càng tăng nhưng nhiều người không có thời gian để đi học tại các trung tâm đào tạo. Hình thức học online giải quyết vấn đề này bằng cách cho phép người dùng học tập mọi lúc mọi nơi, chẳng hạn trên xe bus hay tại nhà. Phương pháp này tiết kiệm chi phí đáng kể so với học tại trung tâm truyền thống. Ngoài ra, nó tận dụng được toàn bộ thời gian rảnh trong ngày để phát triển kỹ năng tiếng Anh.

1.2. Mục tiêu chính của dự án

Mục tiêu chính của đồ án tốt nghiệp này là xây dựng một website học tiếng Anh toàn diện với giao diện thân thiện và các tính năng hiện đại. Dự án hướng tới việc tìm hiểu sâu về ASP.NET Core và Angular 8 CLI, sau đó vận dụng những kiến thức đó để phát triển một ứng dụng web chất lượng cao phục vụ cho việc học tiếng Anh.

II. Công nghệ sử dụng trong Đồ án

Đồ án web học tiếng Anh online được phát triển với sự kết hợp của hai công nghệ frontend và backend tiên tiến. Phía backend sử dụng .NET Core, một framework mạnh mẽ cho phép xây dựng các API RESTful hiệu suất cao. Phía frontend được xây dựng bằng Angular 8 CLI, kết hợp với thư viện Ant-Design (Ng-Zorro) để tạo giao diện người dùng đẹp mắt và dễ sử dụng. TypeScript được sử dụng như ngôn ngữ lập trình chính cho frontend, cung cấp tính an toàn kiểu dữ liệu. Sự lựa chọn các công nghệ này đảm bảo rằng ứng dụng có hiệu suất cao, khả năng mở rộng tốt, và cung cấp trải nghiệm người dùng tối ưu cho các sinh viên học tiếng Anh.

2.1. Backend .NET Core

.NET Core là một framework open-source hiện đại được phát triển bởi Microsoft, cho phép xây dựng các ứng dụng web mạnh mẽ. Framework này hỗ trợ việc tạo API RESTful hiệu quả, quản lý cơ sở dữ liệu, và xử lý các yêu cầu từ phía client một cách nhanh chóng. Các điểm mạnh của .NET Core bao gồm hiệu suất cao, bảo mật tốt, và dễ dàng triển khai.

2.2. Frontend Angular 8 CLI

Angular 8 CLI là một framework frontend mạnh mẽ được phát triển bởi Google, phù hợp cho việc xây dựng các single page application phức tạp. Kết hợp với Ant-Design (Ng-Zorro) và TypeScript, Angular giúp tạo ra một giao diện thân thiện người dùng với các component tái sử dụng được. TypeScript cung cấp an toàn kiểu dữ liệu, giúp giảm thiểu lỗi trong quá trình phát triển.

III. Các tính năng chính của Website

Website học tiếng Anh online cung cấp nhiều tính năng hữu ích cho cả người quản trị và người dùng. Phía admin có khả năng quản lý toàn bộ nội dung của trang web, bao gồm việc tạo, cập nhật, xóa các câu hỏi và đề thi. Đồng thời, admin có thể quản lý các vật phẩm trong cửa hàng và thông tin người dùng. Phía client, những người dùng có thể làm bài thi trực tuyến, mua vật phẩm từ cửa hàng trong game, và theo dõi thành tích học tập của mình. Hệ thống tích lũy điểm thành tích giúp khuyến khích người dùng tiếp tục học tập và cải thiện kỹ năng tiếng Anh. Tất cả các tính năng này được thiết kế với mục đích tăng cường sự tương tác và nâng cao động lực học tập.

3.1. Chức năng dành cho Admin

Admin panel của website cung cấp các công cụ quản lý CRUD (Create, Read, Update, Delete) cho các câu hỏi, đề thi, vật phẩm và tài khoản người dùng. Admin có thể duyệt thành tích của từng học viên, giúp theo dõi tiến độ học tập. Giao diện quản lý trực quan giúp admin tiết kiệm thời gian khi cần cập nhật hoặc thêm nội dung mới.

3.2. Chức năng dành cho Học viên

Học viên có thể làm bài thi với các đề thi được thiết kế bài bản, mua vật phẩm trong cửa hàng bằng điểm tích lũy, và xem thành tích cá nhân của mình. Hệ thống ghi nhận tiến độ giúp người học theo dõi sự phát triển và duy trì động lực học tập trong suốt quá trình sử dụng website.

IV. Kết quả và Ý nghĩa của Đồ án

Sau thời gian thực hiện, nhóm sinh viên đã hoàn thành thành công đồ án tốt nghiệp với đầy đủ các tính năng được quy định. Dự án không chỉ giúp sinh viên nắm vững kiến thức về .NET Core, Angular 8, Ant-Design và TypeScript, mà còn cung cấp một nền tảng học tập thực tiễn cho người dùng. Website học tiếng Anh online này có thể được sử dụng ngay lập tức bởi những người muốn nâng cao kỹ năng tiếng Anh của mình mà không cần tốn kém chi phí. Ý nghĩa của dự án nằm ở việc chứng minh rằng công nghệ hiện đại có thể được vận dụng để giải quyết vấn đề thực tiễn trong lĩnh vực giáo dục trực tuyến. Ngoài ra, dự án này mở ra hướng phát triển tiếp theo cho các nhà phát triển muốn mở rộng tính năng hoặc tích hợp các công nghệ mới.

4.1. Kết quả học tập và kỹ năng đạt được

Thông qua dự án này, nhóm sinh viên đã hiểu rõ về .NET Core với các tính năng quản lý dependency injection, Entity Framework, và ASP.NET Core MVC. Đồng thời, họ cũng nắm vững về Angular 8 CLI, Ant-Design (Ng-Zorro), và TypeScript để xây dựng giao diện người dùng chuyên nghiệp và responsive.

4.2. Ý nghĩa thực tiễn và triển vọng phát triển

Website học tiếng Anh online có thể được mở rộng với các tính năng như AI-powered chatbot, video lessons, hoặc social learning features. Dự án chứng tỏ rằng công nghệ web hiện đại có khả năng thay đổi cách học tập của con người, tạo ra những giải pháp giáo dục sáng tạo và hiệu quả cao.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT các thread đó trong trình duyệt sẽ có thể gửi tin nhắn. Nhìn chung, web worker không liên quan đến Angular nhưng điểm chính là các script này cần được xem xét trong build process của ứng dụng. Mục tiêu chính là cung cấp một bundle cho tất cả web worker. Giờ Angular 8 đã thực hiện công việc này bởi Angular CLI.

 Theo chúng ta có thể cấu hình Angular CLI nếu chúng ta thêm web worker cho lần đầu tiên. Trong quá trình này, CLI sẽ loại bỏ các worker.ts từ tsconfig.json và thêm các cấu hình TypeScript với tên là tsconfig.json để quản lý file worker. CÁc thông tin này cũng được thêm vào angular. - Thu thập phân tích dữ liệu sử dụng:  Với Angular 8, Angluar CLI thu thập các dữ liệu phân tích cho Angular team có thể sắp xếp ưu tiên các tính năng và các cải tiến.

Khi chúng ta update ứng dụng CLI, nó sẽ hỗ trợ tùy chọn ng analytics.  Nếu chúng ta cho phép nó chạy toàn bộ, nó sẽ thu thập dữ liệu như các lệnh được sử dụng, các cờ được sử dụng, hệ điều hành, phiên bản Node, CPU count, Ram Size, thời gian thực thi, lỗi nếu có và Angular team có thể cải tiến và chỉnh sửa trong phiên bản tiếp. - Loại bỏ @angular/http:  Từ Angular 8, angular ngừng hỗ trợ @angular/http. Nó đã bị deprecated (báo ngừng hỗ trợ phiên bản sau) từ Angular 4 và cung cấp một thư viện hiệu quả và bảo mật hơn gọi là @angular/common/http.

 Nhưng ở Angular 7 vẫn cho phép chúng ta sử dụng @angular/http trong ứng dụng. Nhưng Angular 8 thì nó đã dừng hỗ trợ. Chúng ta cần chỉnh code lên @angular/common/http. - Thay đổi ViewChild và ContentChild:  Trong Angular 8 có một số thay đổi lớn với việc sử dụng ViewChild và ContentChild.

Nó là những thứ không mong đợi của team Angular.  Hiện tại Angular 8 nó bắt buộc cung cấp một cờ Boolean static để định nghĩa instance cho ViewChild và ConetntChild.  Chúng ta đã có kinh nghiệm khi 1 issue thỉnh thoảng là các instance này có sẵn trong ngOnInit, nhưng đôi khi chúng ta không tìm thấy các instance này cho đến khi ngAfterContentInit hoặc ngAfterViewInit.  Nó xuất hiện chính khi các phần thử được load vào DOM sau khi dữ liệu được binding.

(giống *ngIf hoặc *ngFor) sau đó các phần thử được insert vào DOM trong ngAfterViewInit hoặc ngAfterContentInit. 6 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT  Điều này gây hiểu lầm và đó là vì sao chúng ta cần chỉ ra compoinent:  Nếu giá trị static là true, angular sẽ cố tìm kiếm phần tử tở thời điểm khởi tạo component, ví dụ ngOnInit. Nó có thể hoàn thành khi phần tử không được sử dụng bất kỳ structure directive nào. Khi static value là false, angular sẽ tìm phần tử sau khi khởi tạo view.

- Hỗ trợ SVG Template:  Hiện tại Angular 8 hỗ trợ template với đuôi mở rộng là SVG. Nghĩa là chúng ta có thể dùng file SVG để làm template như HTML mà không cần cấu hình gì khác cả.  Nhưng câu hỏi là tại sao phải sử dụng .svg như là template thay vì sử dụng image trong HTML file. Lý do là khi sử dụng SVG template, chúng ta có thể sử dụng như là một directive và kết quả chúng ta có thể bind nó như HTML template.

Với các tiếp cận này, chúng ta có thể tạo động các đồ hoạt tương tác trong ứng dụng. - Hỗ trợ PNPM:  Trong Angular 8, Angular CLI cũng hỗ trợ một package manager mới PNPM bao gồm NPM và Yarn. Trong câu lệnh ng add giờ cung cấp thêm 1 cái cờ nữa là –registry để thêm các packages từ bất cứ NPM private nào. Câu lệnh này đã có sẵn trên Angular CLI với ng update command.

- Hỗ trợ Codelyzer 5.0:  Angular 8 hỗ trợ cấu hình TSLint bởi Codelyzer 5. Phiên bản này của Codelyzer, một vài quy tắc được đổi tên. Nhưng khi chúng ta upgrade Angular CLI, nó sẽ update file cấu hình TSLint. CLI update sẽ loại bỏ các lệnh import es6 từ file polyfills.

Bởi vì nó tự động được thêm vào nếu được yêu cầu bởi CLI. - Hỗ trợ thư viện mới New Builders/ Architect API: 7 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT  Phiên bản mới của Angular CLI cho phép chúng ta sử dụng phiên bản mới của Builders được biết đến là Architect API. Angular sử dụng Builders API để thực hiện các hoạt động như server, build, test, lint và e2e. Chúng ta có thể sử dụng builders trong file angular.3 Ưu điểm và nhược điểm của Angular 8 CLI - Ưu điểm:  Angular được phát triển trên nền tảng hiện đại hơn, nhiều tính năng, và dễ dàng cho người mới học hơn.

 Với Angular 1, các nhà phát triển đã biết về sự khác nhau giữa Controllers, Services, Factories, Providers và các khái niệm khác có thể gây ra sự khó hiểu đặc biệt là các coder mới. Angular 8 là một framework với sự sắp xếp hợp lý hơn cho phép lập trình viên tập trung vào việc tạo lên các class JavaScript đơn giản. Views và các controllers sẽ được thay thế bởi Components, thứ mà có thể mô tả là một sự tinh chế mới của directives. Ngay cả các lập trình viên có kinh nghiệm với Angular cũng không chắc là có thể biết tất cả những khả năng của directives.

Angular 8 component đã tăng khả năng đọc đáng kể, các API của chúng giảm đáng kể các biệt ngữ hơn là Angular 1.  Angular 8 được viết với TypeScript, một superset của JavaScript, nó triển khai nhiều tính năng của ES2016 và các tính năng của TypeScript.  Bằng cách tập trung tạo nên một framework dễ dàng hơn trong việc xử lý, Angular2 cho phép hệ sinh thái phát triển phong phú hơn.  Các lập trình viên có thể sử dụng các trình soạn thảo tinh vi hơn với các tính năng gợi ý code hay tự động hoàn thành code.

 Những tính năng này giúp giảm thời gian học Angular2. May mắn hơn nữa cho các nhà phát triển ES5 truyền thống rằng không nhất thiết phải viết ES6 hay TypeScript, các coder có thể vẫn viết JavaScript thuần mà không cần biên dịch.  Mặc dù được viết lại hoàn toàn, Angular 8 vẫn giữ lại các khái niệm cốt lõi và các quy tắc của Angular1. Điều đó có nghĩa là các lập trình viên giỏi vói Angular1 sẽ dễ dàng chuyển đổi sang Angular 8 hơn là các thư viện khác như ReactJS.

 Angular 8 được thiết kế cho mobile từ ban đầu. Bỏ qua một bên các vấn đề về sức mạnh xử lý, các thiết bị di động có các tính năng khác và sự giới hạn đó phân biệt chúng với máy tính truyền thống. Giao diện chạm, màn hình nhỏ, phần cứng đã được tính toán trong Angular 8. Máy tính để bàn cũng sẽ được cải tiến về hiệu suất và khả năng đáp ứng.

 Angular 8 giống React và các framework hiện đại khác, có thể tăng hiệu năng bằng cách render ra HTML trên server hoặc ngay cả trên browser. 8 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Phụ thuộc vào thiết kế cấu trúc giúp cho trải nghiệm người dùng tốt hơn.  Yêu cầu về hiệu năng không bao giờ là dừng lại với việc tiền xử lý. Angular 8 có khả năng tích hợp với mobile bằng cách tích hợp với NativeScript, một thư viện mã nguồn mở là cậu nỗi giữa JavaScript và mobile.

Bổ sung thêm, Ionic cũng đang được phát triển trên Angular8 cung cấp một cách khác giúp tăng hiệu quả của ứng dụng trên mobile.  Phiên bản đầu tiên của Angular cung cấp cho các lập trình viên một thư viện mềm dẻo để phát triển ứng dụng. Đây là sự thay đổi đáng kể cho các lập trình viên web, và trong khi framework rất hữu ích thì nó là một bằng chứng cho sự linh hoạt đó. Qua thời gian, các best practice từ cộng đồng được tán thành rộng rãi.x đã cố gắng làm việc xung quanh các hạn chế trên trình duyệt liên quan đến JavaScript.

Điều này được giải quyết bằng cách cung cấp một hệ thống các module sử dụng cơ chế Dependency Injection. Điều này thật tuyệt tuy nhiên có một vài vấn đề.x sử dụng hệ thống module ECMA Script 6 (ES6), và các công cụ đóng gói hiện đại như Webpack hoặc SystemJS. Module được tùy biến theo cách riêng của Angular để dễ dàng viết các Generic cho JS để cắm vào Angular. Hệ thống module mới giúp dễ dàng phát triển các dự án lớn hiệu quả hơn.2 ANT-DESIGN(NG-ZORRO) - Ng-Zoro là thư viện Angular UI ng-zorro-antd chứa một bộ các thành phần và bản trình diễn chất lượng cao để xây dựng giao diện người dùng tương tác phong phú.

- Các tính năng (Đoạn này bọn em xin được viết tiếng anh vì quá nhiều từ ngữ chuyên ngành):  An enterprise-class UI design language for web applications.  A set of high-quality Angular components out of the box.  Written in TypeScript with complete defined types.  Support OnPush mode, high performance.

 Support Customize theme.  Support import Component individually. - Môi trường hỗ trợ:  Các trình duyệt hiện đại và Internet Explorer 11+.  Server-side render.

 Electron - Đặc tả 9 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT  ng-zorro-antd đồng bộ hóa đặc tả với Ant-Design thường xuyên, bạn có thể kiểm tra trực tuyến - Hướng dẫn cài đặt  Chúng ta nên sử dụng @angular/cli để cài đặt nó không chỉ giúp phát triển dễ dàng hơn mà còn cho phép bạn tận dụng hệ sinh thái phong phú của các gói. + Bước 1: ng new PROJECT_NAME. + Bước 2: cd PROJECT_NAME. + Bước 3: ng add ng-zorro-antd.

 Hoặc bạn có thể cài đặt bằng npm hoặc yarn + npm install ng-zorro-antd 1.3 TYPESCRIPT - Typescript là một dự án mã nguồn mở được Microsoft phát triển, được xem là một phiên bản nâng cao của Javascript. - TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript. - Vì sao lại được xem là phiên bản nâng cao của Javascript? Vì nó được bổ sung những tùy chọn kiểu tĩnh và các lớp hướng đối tượng, nó bao hàm luôn ES6(ECMAScript 6 2015) - phiên bản mới nhất của Javascript. - TypeScript thêm các namespace, class và module tùy chọn vào JavaScript.

TypeScript hỗ trợ các công cụ cho các ứng dụng JavaScript quy mô lớn cho bất kỳ trình duyệt nào, cho bất kỳ máy chủ nào, trên bất kỳ hệ điều hành nào. - Với những lập trình viên đã quen với Javascript thì chắc hẳn các bạn cũng hiểu được những khó khăn khi lập trình với nó. - Tính mở trong việc sử dụng biến gây khó khăn trong việc kiểm soát sự thay đổi, cập nhật:  Các ứng dụng phức tạp đòi hỏi sử dụng rất nhiều file source, tách thành nhiều thư mục riêng thì việc đảm bảo tính thống nhất sẽ mất rất nhiều công sức vì phải thao tác bằng tay khá nhiều.