Ứng dụng web giáo dục: 13 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:31

Dự án này được tạo ra như một nhiệm vụ cho khóa học video và truyền hình kỹ thuật số, trong đó chúng tôi phải giải quyết vấn đề dạy và học ở ba cấp độ: Phương pháp luận, Chức năng và khái niệm.

Dự án này được tạo ra như một nhiệm vụ cho khóa học video và truyền hình kỹ thuật số, trong đó chúng tôi phải giải quyết vấn đề dạy và học ở ba cấp độ: Phương pháp luận, Chức năng và khái niệm. Chúng tôi quyết định giải quyết vấn đề này bằng cách sử dụng nền tảng web, trong đó sinh viên và giáo viên của khóa học có thể đăng nhập. Sinh viên cũng có thể truy cập các video giảng dạy về các chủ đề như codec và định dạng video, sau khi họ đã học phần khái niệm của chủ đề, họ có thể tiến hành đánh giá. Đánh giá bao gồm ba hoạt động; mỗi hoạt động sẽ có một loại video giảng dạy các chủ đề liên quan đến codec và định dạng video, đồng thời mỗi hoạt động có một mục đích khác nhau, vì vậy với nền tảng này, chúng tôi có thể đạt được việc giảng dạy và đánh giá phần phương pháp, chức năng và khái niệm. Để đạt được tất cả những điều này, chúng tôi đã sử dụng Angular 4 và Firebase, sử dụng các thư viện như AngularFire5 và dragula. Đối với các video, chúng tôi đã sử dụng ứng dụng web "PowToon".

Đối với hướng dẫn này, bạn sẽ cần:

• NodeJs
• Angular4
• Dự án Firebase
• Một máy tính

Bước 1: Cài đặt

• Cài đặt nodejs 8.9.1 với NPM (Node Package Manager)
• Cài đặt Angular-CLI (Giao diện dòng lệnh) nhập vào bảng điều khiển "npm install -g @ angle / cli"

Bước 2: Tạo dự án

• Tạo một dự án bằng cách sử dụng "ứng dụng của tôi mới"
• Cài đặt các gói nút với "npm install"
• Cài đặt dragula với "npm install dragula --save"
• Cài đặt AngularFire2 với "npm install firebase anglefire2 --save"

Bước 3: Firebase

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

• Tạo tài khoản google
• Nhấp vào "Đi tới bảng điều khiển"
• tạo một dự án
• Đi đến phần chung và lấy các phím máy khách

Bước 4: Tạo thành phần

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

Tạo các thành phần cho ứng dụng.

Sử dụng "ng g c" tên thành phần "" cho mỗi thành phần sau:

• Trang khóa học
• Trang chủ đề
• Trang Video
• Trang đánh giá
• Trang phương pháp luận
• Trang khái niệm
• Trang chức năng
• Thành phần nhận xét
• quản trị viên

Bước 5: Trang khóa học

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

Tạo html và ts

Trong ts, bạn sẽ viết logic đằng sau việc tự ký, nếu người dùng là sinh viên hoặc Quản trị viên, và bạn sẽ viết một bảng với thông tin khóa học từ sinh viên. Vì vậy, bạn có thể sử dụng dịch vụ xác thực và dịch vụ cơ sở dữ liệu được cung cấp ở cuối hướng dẫn này.

Bước 6: Trang chủ đề

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

Trong thành phần này, bạn sẽ viết html và ts.

Tương tự như trang khóa học, ngoại trừ việc bạn không phải kiểm tra xem người dùng là quản trị viên hay sinh viên, bạn sẽ chỉ phải viết xác thực và cung cấp danh sách các chủ đề trong khóa học.

Bước 7: Trang Video

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

Trong thành phần này, bạn sẽ viết html và ts.

Đối với thành phần này, bạn sẽ cung cấp liên kết từ powToon để phát video và thành phần nhận xét

Bước 8: Trang đánh giá

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

đối với điều kiện này, bạn sẽ sử dụng cùng một thành phần video với một video khác nhau trong đó bạn sẽ giải thích quy trình đánh giá.

Sau đó, chỉ cần có một nút liên kết đến trang khái niệm

Bước 9: Trang khái niệm

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

Trong trang này, bạn sẽ tạo cả html và ts.

• Tạo hai thành phần video bằng một nút
• Tạo một mảng gồm hai video bằng boolean "isCorrect"
• Viết hàm CheckScore ()
• Tải điểm số lên cơ sở dữ liệu
• Chuyển đến trang tiếp theo

Bước 10: Trang phương pháp

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

Trong trang này, bạn sẽ tạo cả html và ts.

• Bạn sẽ sử dụng dragula, để đọc tài liệu về dragula
• Tạo mảng video
• Tạo thứ tự các video
• viết Điểm kiểm tra
• Điểm tải lên
• Đi đến trang tiếp theo

Bước 11: Trang chức năng

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

Trong trang này, bạn sẽ tạo cả html và ts.

• Tương tự như trang khái niệm, bạn sẽ có các nút và video dưới dạng tùy chọn.
• Trong html, viết một vấn đề để người dùng giải quyết
• Sau đó, đặt các video trong một mảng có boolean "IsCorrect"
• Tải điểm số lên cơ sở dữ liệu

Bước 12: Trang đăng nhập

Đối với điều này, bạn có thể kiểm tra các hình ảnh của bước này

• Tạo html và ts
• Đặt trong html hình ảnh
• Viết biểu mẫu trong html
• Gửi biểu mẫu trong ts đến dịch vụ xác thực
• Lưu người dùng trong cơ sở dữ liệu

Bước 13: Tải xuống mã đầy đủ của các thành phần và dịch vụ

Trong trường hợp bạn gặp sự cố, đây là giải pháp với các thành phần và dịch vụ