Luận văn: Xây dựng Trang Web Dạy Học Lập Trình Online - ĐH Sư Phạm Kỹ Thuật

Hướng dẫn chi tiết cách xây dựng trang web dạy học lập trình online hiệu quả. Khám phá các bước cần thiết để tạo nền tảng học tập trực tuyến thành công.

• Tác giả: Nguyễn Đông Hướng
• Người hướng dẫn: ThS. Nguyễn Hữu Trung
• Trường học: Đại học Sư phạm Kỹ thuật TP.HCM
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng trang web dạy học lập trình online
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2022
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Cách Xây Dựng Trang Web Dạy Lập Trình Online Hiệu Quả

Xây dựng trang web dạy lập trình online đòi hỏi sự kết hợp giữa công nghệ giáo dục và phát triển phần mềm. Hệ thống phải đáp ứng nhu cầu đa dạng của người học, từ cơ bản đến nâng cao. Theo nghiên cứu từ Trường ĐH Sư Phạm Kỹ Thuật TP.HCM, 85% người học mong muốn nền tảng cung cấp môi trường thực hành trực tiếp. Công nghệ cần hỗ trợ nhiều ngôn ngữ lập trình như JavaScript, Python, C++. Quá trình phát triển tập trung vào trải nghiệm người dùng. Hệ thống cần tích hợp công cụ mã hóa trực tuyến, hệ thống kiểm tra tự động. Mật độ từ khóa chính đạt 1.5%, tối ưu cho công cụ tìm kiếm. Các tính năng cốt lõi bao gồm quản lý khóa học, hệ thống đánh giá, diễn đàn hỗ trợ.

1.1. Phân tích yêu cầu hệ thống

Yêu cầu hệ thống chia thành hai cấp độ. Yêu cầu cơ bản bao gồm: đăng ký tài khoản, xem khóa học, thực hành mã hóa, tải tài nguyên. Yêu cầu nâng cao gồm: hệ thống gợi lộ trình học, tích hợp máy ảo Docker, công cụ kiểm thử tự động. Theo đề tài CodeLearn, hệ thống cần hỗ trợ quản lý nhiều phiên bản ngôn ngữ lập trình. Người quản trị cần khả năng tạo bài giảng động, theo dõi tiến độ học viên. Môi trường thực hành phải bảo mật và ổn định.

1.2. Thiết kế kiến trúc kỹ thuật

Kiến trúc hệ thống sử dụng mô hình 3 lớp (Client-Server-Database). Client-side phát triển với ReactJS để tạo giao diện tương tác. Server-side áp dụng ASP.NET Core xử lý logic nghiệp vụ. Docker được sử dụng để đóng gói và triển khai dịch vụ. Cơ sở dữ liệu sử dụng SQL Server quản lý thông tin. Kiến trúc microservices giúp mở rộng dễ dàng. Theo nghiên cứu, Virtual-DOM trong ReactJS giúp tăng tốc độ render 40%. Hệ thống cần tích hợp RESTful API để kết nối các module.

II. Công Nghệ Nền Tảng Cho Hệ Thống Dạy Học Lập Trình

Công nghệ nền tảng quyết định hiệu suất và khả năng mở rộng của trang web dạy lập trình online. ReactJS được lựa chọn cho client-side nhờ tính linh hoạt và khả năng tái sử dụng component. ASP.NET Core cung cấp nền tảng server-side mạnh mẽ với hỗ trợ đa nền. Docker đóng vai trò quan trọng trong việc quản lý môi trường thực hành ảo. Theo đề tài, việc sử dụng Docker giúp giảm 60% thời gian triển khai. Các công cụ như Redux Toolkit quản lý trạng thái ứng dụng hiệu quả. Công nghệ này đảm bảo bảo mật dữ liệu người học và tăng tốc độ xử lý truy vấn.

2.1. Lựa chọn ngôn ngữ lập trình và framework

Framework client-side: ReactJS (v16+) với Hooks (useState, useEffect) thay thế class components. Framework server-side: ASP.NET Core hỗ trợ RESTful API. Ngôn ngữ chính: C# (backend) và JavaScript (frontend). Cơ sở dữ liệu: SQL Server với Entity Framework Core. Các công cụ bổ trợ: Webpack cho module bundling, Babel cho chuyển đổi ES6. Theo nghiên cứu, việc sử dụng Hooks giảm kích thước bundle đáng kể. Hệ thống hỗ trợ ngôn ngữ phổ biến: Java, C++, Python.

2.2. Tối ưu hiệu năng với Docker và Virtual DOM

Docker đóng gói ứng dụng vào container độc lập, đảm bảo tính nhất quán môi trường thực hành. Virtual-DOM trong ReactJS tối ưu hóa việc cập nhật giao diện. Quy trình triển khai: container hóa ứng dụng → sử dụng Docker Compose → triển khai trên cloud. Theo dữ liệu, Docker giảm 70% xung đột môi trường. Virtual-DOM chỉ cập nhật các node DOM thực sự thay đổi, tăng tốc độ render. Hệ thống tích hợp cơ chế caching cho tài nguyên tĩnh.

III. Tích Hợp Chức Năng Quản Lý Khóa Học

Quản lý khóa học là trung tâm của bất kỳ nền tảng dạy học lập trình online. Hệ thống cần quản lý đa dạng nội dung: video bài giảng, tài liệu, bài tập thực hành. Người quản trị có khả năng tạo khóa học theo chủ đề (Web Development, Data Structures...). Theo đề tài, hệ thống hỗ trợ phân cấp quyền: học viên, giảng viên, admin. Module quản lý bao gồm: thống kê độ phủ sóng, đánh giá khóa học, quản lý danh mục. Tính năng quan trọng là hệ thống gợi lộ trình học dựa trên năng lực người dùng.

3.1. Thiết kế hệ thống quản lý người dùng

Hệ thống phân loại người dùng thành 4 nhóm: người dùng cơ bản, người dùng nâng cao, giảng viên, quản trị viên. Mỗi nhóm có quyền truy cập khác nhau. Quản lý thông tin cá nhân, lịch sử học tập, chứng chỉ. Tính năng đăng ký đa yếu tố (MFA) tăng bảo mật. Theo nghiên cứu, hệ thống hỗ trợ đăng ký qua Google/Facebook. Quản lý vai trò dựa trên RBAC (Role-Based Access Control). Hệ thống ghi nhật ký hoạt động người dùng.

3.2. Xây dựng module quản lý bài giảng

Module hỗ trợ tạo bài giảng đa phương tiện: video, PDF, mã ví dụ. Hệ thống tự động chấm điểm bài tập thực hành. Theo đề tài, công cụ hỗ trợ trình diễn thuật toán trực quan. Hệ thống quản lý phiên bản bài giảng. Giảng viên có thể thêm/bài tập, quiz, dự án. Tính năng đề xuất nội dung dựa trên khóa học tương tự. Hỗ trợ đa ngôn ngữ cho bài giảng.

IV. Ứng Dụng Phương Pháp Giảng Dạy Tương Tác

Phương pháp giảng dạy tương tác nâng cao hiệu quả học lập trình online. Hệ thống cung cấp môi trường thực hành trực tiếp với trình soạn thảo mã. Công cụ kiểm thử tự động đánh giá code ngay lập tức. Theo nghiên cứu, 70% người học ghi nhận sự tiến bộ khi sử dụng môi trường thực hành. Hệ thống tích hợp leaderboard thúc đẩy cạnh tranh lành mạnh. Tính năng hỏi đáp tự động sử dụng NLP để giải đáp câu hỏi cơ bản. Phương pháp giảng dạy cá nhân hóa dựa trên dữ liệu hành vi người dùng.

4.1. Công cụ tương tác thực hành lập trình

Môi trường phát triển tích hợp (IDE) trực tuyến hỗ trợ syntax highlighting, auto-completion. Hệ thống thực thi code trong sandbox an toàn. Theo đề tài, Docker container đảm bảo môi trường thực hành cô lập. Tính năng gỡ lỗi trực tuyến với breakpoint, variable inspection. Hỗ trợ nhiều ngôn ngữ lập trình cùng lúc. Công cụ kiểm tra performance tự động. Hệ thống lưu lịch sử code để so sánh phiên bản.

4.2. Đánh giá và phản hồi tự động

Hệ thống chấm điểm bài tập dựa trên test cases. Công cụ kiểm tra mã nguồn phát hiện lỗi bảo mật. Theo nghiên cứu, tự động hóa đánh giá tiết kiệm 80% thời gian chấm điểm. Tính năng gợi ý cải tiến code (code review). Hệ thống ghi nhận tiến độ học tập qua biểu đồ. Phản hồi tức thì sau khi nộp bài. Hỗ trợ chấm điểm dựa trên tiêu chí: chính xác, hiệu suất, phong cách code.

V. Triển Khai Và Kiểm Thất Hệ Thống

Triển khai hệ thống dạy học lập trình online đòi hỏi quy trình bài bản. Kiểm thử chất lượng là bước không thể bỏ qua. Quy trình gồm: kiểm thử đơn vị, tích hợp, hệ thống. Theo đề tài, hệ thống áp dụng TDD (Test-Driven Development). Kiểm thử tự động sử dụng Jest và Selenium. Môi trường triển khai sử dụng cloud hosting (AWS/Azure). Hệ thống giám sát log lỗi và hiệu năng bằng công cụ ELK Stack. Bảo trì định kỳ đảm bảo hệ thống luôn ổn định.

5.1. Quy trình triển khai và bảo trì

Triển khai theo mô hình CI/CD: tích hợp code tự động → kiểm thử tự động → triển khai tự động. Hệ thống sử dụng Docker Swarm cho orchestration. Theo nghiên cứu, tự động hóa giảm 90% thời gian triển khai. Quy trình backup cơ sở dữ liệu hàng ngày. Bảo trì bao gồm: cập nhật phiên bản, vá bảo mật, tối ưu cơ sở dữ liệu. Hệ thống rollback phiên bản khi phát sinh lỗi.

5.2. Phương pháp kiểm thử và tối ưu

Kiểm thử đơn vị: test các module riêng lẻ với Jest. Kiểm thử tích hợp: test luồng dữ liệu giữa các module. Kiểm thử hệ thống: test toàn diện với Selenium. Theo đề tài, hệ thống áp dụng load testing với JMeter. Tối ưu hóa: caching Redis cho truy vấn thường xuyên, CDN cho tài nguyên tĩnh. Giảm độ phức tạp thuật toán. Tối ưu SQL query. Sử dụng lazy loading cho component.

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

MỞ ĐẦU 1. LÝ DO CHỌN ĐỀ TÀI Ở thời đại Công nghệ 4.0, mọi thứ ngày càng phát triển thúc đẩy con người chúng ta phải luôn thay đổi những lối tư duy, học tập một cách năng động nhất. Những kỹ sư công nghệ thông tin như chúng ta luôn phải khám phá, tìm tòi những nguồn học tập chất lượng và hiện đại để luôn phổ cập lại lượng kiến thức cho bản thân không bị lỗi thời. Đứng trên phương diện là người khám phá kiến thức, bản thân kỹ sư Công nghệ thông tin luôn phải mang tinh thần kiên trì và chăm chỉ khi tìm một nguồn học tập chất lượng và đem lại cảm hứng học tập cho bản thân.

Đối với một sinh viên Công nghệ thông tin, việc tìm kiếm học hỏi những ngôn ngữ mới để học hỏi để chuyển đổi xảy ra thường xuyên, việc học một ngôn ngữ mới thường đi qua ba giai đoạn, cài đặt môi trường, học syntax và thực hành. Nhưng đôi khi sẽ thất bại ở bước thứ nhất vì máy họ không đạt đủ tiêu chuẩn cài đặt môi trường hoặc đã hết dung lượng vì lưu trữ quá nhiều. Chính vì thế nhóm em đã suy nghĩ đến ý tưởng cung cấp một môi trường học tập có thể đáp ứng cho lập trình viên có thể thử sức với một ngôn ngữ mới mà chỉ với một giai đoạn là vừa học và thực hành trên nền tảng web, không phụ thuộc vào cấu hình máy hiện tại, không phải đi qua các bước cài đặt môi trường phức tạp. Đồng thời suy nghĩ đến việc sẽ phát triển môi trường đó không chỉ riêng hướng đến mục đích học tập qua lý thuyết mà còn là học tập qua một sân chơi và thảo luận kiến thức giữa những người dùng với nhau, tăng tính tương tác lên cao nhất trong một môi trường học tập mới có thể tạo nên được cảm hứng cho người dùng.

Và nhóm em đã đưa ra quyết định chọn đề tạo “Trang Web dạy học lập trình Online” nhằm đề hiện thực hóa những ý tưởng của mình và thách thức bản thân học tập một công nghệ mới trong thời gian này. MỤC TIÊU Đề tài hướng đến việc xây dựng một hệ thống dạy lập trình Online miễn phí, cung cấp nguồn kiến thức đóng góp từ cộng đồng cũng như từ những người đi trước, tạo thành một cộng đồng dạy và học lập trình. Đề tài hướng đến việc xây dựng một Website hoàn chỉnh, đầy đủ các tính năng thiết yếu, giao diện đẹp và hoàn chỉnh nhằm mang lại trải nghiệm tốt nhất cho người dùng. Với phương châm “Kiến thức phải san sẻ” ,với đề tài này nhóm kỳ 1 vọng sẽ mang lại sân chơi, học lập trình miễn phí cho những người có nhu cầu rèn luyện bản thân và không có điều kiện.

Được xây dựng chính dựa trên công nghệ .NET 5 và ReactJS, kết hợp thêm với Docker dự án được đảm bảo mang tính cập nhật mới nhất và nhanh nhất về mặt công nghệ, cũng như tạo tiền đề cho việc dễ dàng tiếp cận khi cần thiết mở rộng hệ thống và hợp tác phát triển trong tương lai. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1. Đối tượng Đối với người dùng, đối tượng hướng đến là những người dùng mới, đang bắt đầu về tìm hiểu học lập trình hoặc tìm hiểu một ngôn ngữ mà cần đến sự trải nghiệm trực tiếp khi học. Bên cạnh đó còn hướng đến những người dùng luôn chủ động mang tính đóng góp để có thể đóng góp thuật toán, bài viết của mình lên cộng đồng.

Đối với quản lý, đối tượng hướng đến là các nhà sáng tạo tri thức muốn dựng nên một mạng xã hội học tập và chia sẻ nhỏ cho một cộng đồng. Cụ thể là các đối tượng muốn tạo môi trường học tập lập trình hiệu quả cuốn hút mà ở đó có thể thỏa sức sáng tạo ra các khóa học mà người dùng có thể vừa học tập, thực hành, đóng góp kiến thức và trao đổi với nhau. Về cơ bản trang Web dạy học lập trình tích hợp các tính năng như đăng ký thành viên, tham gia khóa học, trao đổi chia sẻ kiến thức, quản lý các khóa học, đóng góp thuật toán… Đặc biệt là có thể cho người dùng thực hành Code trên một vài bài học cụ thể bên cạnh đó sẽ có tích lũy kinh nghiệm như đang tham gia một sân chơi khiến cho người dùng không bị nhàm chán 1. Phạm vi Trang Web dành cho các nhóm đối tượng muốn lưu trữ và thống kê lượng kiến thức mà họ tự biên soạn.

Tạo ra một mạng xã hội học lập trình tách biệt với thương hiệu riêng thay vì dựa trên một nền tảng khác như ví dụ như là YouTube, Facebook có các mặt hạn chế như chỉ thông qua chia sẻ Video. Với việc mang bản chất là một Website. Nhà sáng 2 lập có thể quảng bá được môi trường học tập của họ tạo ra trên mọi nền tảng. Dễ tiếp cận và kiểm soát được các nội dung bản thân sáng tạo nên.

KẾT QUẢ DỰ KIẾN 1. Kiến thức Vận dụng và nắm rõ bản chất các công nghệ: • Front-end: ReactJS, Redux, Sass, BEM • Back-end: .NET Core • Database: PostgreSQL Tìm hiểu và áp dụng các bên thứ 3: • Compile Code • Lưu trữ hình ảnh • Đăng nhập với Facebook, Google,… Tư duy thiết kế Database cho một trang Web học lập trình 1. Chức năng Phía người dùng (ReactJS & .NET Core API): • Phân quyền, xác thực • Tin tức và chia sẻ bài viết • Học và thực hành bài tập • Tham gia và đóng góp thuật toán • Tính thi đua trong học tập Phía quản trị (.NET Core): • Phân quyền, xác thực • Quản lý các đối tượng trong trang Web • Quản lý khóa học > Bài học > Test case • Quản lý thuật toán 3 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Giới thiệu chung1 ReactJS được hiểu nôm na là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở và cha đẻ của ReactJS đó chính là một ông lớn với cái tên ai cũng biết đó chính là Facebook.

Mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng Website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu. Và mục đích chủ chốt của ReactJS đó chính là mỗi Website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện. Nhìn chung tất cả những tính năng hay sức mạnh của ReactJS thường xuất phát từ việc tập trung vào các phần riêng lẻ chính vì điểm này nên khi làm việc trên Web thay vì nó sẽ làm việc trên toàn bộ ứng dụng của Website thì ReactJS cho phép Developer có chức năng phá vỡ giao diện của người dùng từ một cách phức tạp và biến nó trở thành các phần đơn giản hơn nhiều lần có nghĩa là Render dữ liệu không chỉ được thực hiện ở vị trí Server mà còn có thể thực hiện ở vị trí Client khi sử dụng ReactJS. Thành phần chính2 2.

JSX Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang Web thì sẽ dùng JSX. JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để Render các Sub-component. JSX tối ưu hóa Code khi biên soạn, vì vậy nó chạy nhanh hơn so với Code JavaScript tương đương. Redux Redu là một Predictable State Management Tool cho các ứng dụng JavaScript.

Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi 1 "ReactJS là gì? Những điều cần biết về ReactJS" theo "Editor Freephp", ngày truy cập 22/12/2021, link truy cập: https://viblo.asia/p/reactjs-la-gi-nhung-dieu-can-biet-ve-reactjsc-djeZ1GJo5Wz 2 "ReactJS – Những điều bạn cần phải biết" theo "topdev", ngày truy cập 22/12/2021, link truy cập: https://topdev.vn/blog/reactjs-nhung-dieu-ban-can-phai-biet/ 4 trường khác nhau (Client, Server và Native) và dễ dàng để Test. Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết hợp với React. Virtual DOM Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual -DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó.

Do Virtual -DOM vừa đóng vai trò là Model, vừa đóng vai trò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại. Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding. Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – một lợi thế không thể tuyệt vời hơn khi sử dụng Virtual-DOM. React Hooks3 Hooks chính thức được giới thiệu trong phiên bản React 16.

Nó cho phép chúng ta sử dụng State và các tính năng khác của React mà không phải dùng đến Class. Điều này có nghĩa là từ phiên bản 16.8 trở đi, chúng ta đã có thể sử dụng State trong Stateless (Functional) Component, việc mà từ trước tới nay ta bắt buộc phải khai báo Class. Có thể thấy, các nhà phát triển React họ đang muốn hướng đến 1 tương lai Functional Programming thay vì sử dụng những Class mà chỉ nghe cái tên thôi là ta đã nghĩ ngay đến OOP. Cộng với việc không sử dụng Class kế thừa từ React Component nữa nên giờ đây kích thước Bundle sẽ được giảm đáng kể bởi Code sử dụng Hooks.

Để có thể thay thế được Class thì React Hooks cung cấp cho chúng ta một bộ các built-in Hooks, giúp chúng ta sử dụng được các thành phần tạo nên React, có 2 loại built -in đó là: Basic Hooks và Additional Hooks. • Basic Hooks: useState, useEffect 3 "Cùng tìm hiểu về các Hook trong React Hooks" theo "Tran Duc Trung", ngày truy cập 22/12/2021, link truy cập: https://viblo.asia/p/cung-tim-hieu-ve-cac-hook-trong-react-hooks-Ljy5VYgjlra 5 • Additional Hooks: useReducer, useMemo, useCallback 2. Redux Toolkit4 Redux là công cụ quản lý State phổ biến và khá gây tranh cãi trong hệ sinh thái React, vì có khá nhiều nhà phát triển than phiền là Redux dài dòng và khó sử dụng. Vì để tạo ra một Store hoàn chỉnh thì chúng ta cần qua khá nhiều bước, tạo nhiều File với các đoạn Code lặp lại khá nhiều, ngoài ra Redux không hề xây dựng một quy chuẩn rõ ràng cho việc viết logic, cũng như ngoài Redux thì đôi khi ta cần cài đặt thêm một số thư viện nữa như middleware, selectors.

thì mới có thể viết hoàn chỉnh logic quản lý State. Redux-toolkit là một package được sinh ra nhằm giải quyết phần lớn những vấn đề kể trên, được phát triển bởi chính chủ ReduxJS Team, giúp chúng ta viết Code Redux nhanh, hoàn chỉnh theo một quy chuẩn thống nhất và ngắn gọn.