WingSpan | Web Learning Course

---

Yêu Cầu Môi Trường để Chạy Dự Án | Setup Instructions

1. Node.js and npm:

   • Cài đặt Node.js phiên bản 18 trở lên. npm sẽ được cài đặt kèm theo. | Install Node.js version 18 or above. npm will be installed along with it.

2. Angular CLI:

   • Cài đặt Angular CLI bằng lệnh sau: | Install Angular CLI using the following command:

     npm install -g @angular/cli@latest

3. Cài Đặt Dependencies Dự Án: | Install Project Dependencies:

   • Trong thư mục gốc của dự án, chạy lệnh sau để cài đặt các dependencies | In the root directory of the project, run the following command to install project dependencies:

     npm install

4. Chạy Dự Án | Run the Project:

   • Chạy lệnh sau để khởi động dự án: | Execute the following command to start the project:

     ng serve

   • Access the application at http://localhost:4200/ in your web browser.

---

1. Giới Thiệu | Introduction

Dự án này là sự kết hợp của đam mê và kỹ thuật, hướng đến việc tạo ra một nền tảng giáo dục trực tuyến cho sinh viên trường FPT. Sử dụng công nghệ tiên tiến như Angular, NodeJS, và MongoDB, dự án này cung cấp một trải nghiệm học tập linh hoạt và tương tác cho người dùng.

This project is a fusion of passion and technical expertise, aiming to create an online education platform for FPT University students. Leveraging advanced technologies such as Angular, NodeJS, and MongoDB, this project provides a flexible and interactive learning experience for users.

2. Hình Ảnh | Introduction Screenshots

Màn Hình Landing | Landing Page

Mô tả chi tiết về Màn Hình Landing.

---

Màn Hình New Feeds | New Feeds Page

Mô tả chi tiết về Màn Hình New Feeds

---

Màn Hình Đăng Nhập | Login Page

Mô tả chi tiết về Màn Hình Đăng Nhập.

---

Màn Hình Chi Tiết Khóa Học Page | Detail Course Page

Mô tả chi tiết về Màn Hình Chi tiết khóa học.

---

Màn Hình Video Bài Học | Lesson Video Page

Mô tả chi tiết về Màn Hình Video Bài Học.

---

Màn Hình Giỏ hàng | Cart Page

Mô tả chi tiết về Màn Hình Cart Page.

---

3. Cấu trúc của dự án | Project Structure

├── src
│  ├── app
│  │  ├── client
│  │  │  ├── pages
│  │  │  │  ├── blog
│  │  │  │  │  ├── blog.component.ts
│  │  │  │  │  ├── blog.component.html
│  │  │  │  ├── cart
│  │  │  │  │  ├── cart.component.ts
│  │  │  │  │  ├── cart.component.html
│  │  │  │  ├── course
│  │  │  │  |  │── course.component.ts
│  │  │  │  |  │── course.component.html
│  │  │  │  │  │  ├── course-detail
│  │  │  │  │  │  |  │  ├── course-detail.component.ts
│  │  │  │  │  │  |  │  ├── course-detail.component.html
│  │  │  │  │  │  │  ├── course-leanring
│  │  │  │  │  │  │  │  ├── course-leanring-content
│  │  │  │  │  │  │  │  │  ├── course-leanring-content.component.ts
│  │  │  │  │  │  │  │  │  ├── course-leanring-content.component.html
│  │  │  │  │  │  │  │  ├── course-leanring-lessons
│  │  │  │  │  │  │  │  │  ├── course-leanring-lessons.component.ts
│  │  │  │  │  │  │  │  │  ├── course-leanring-lessons.component.html
│  │  │  │  │  │  │  │  ├── course-leanring-sidebar
│  │  │  │  │  │  │  │  │  ├── course-leanring-sidebar.component.ts
│  │  │  │  │  │  │  │  │  ├── course-leanring-sidebar.component.html
│  │  │  │  ├── detail-blog
│  │  │  │  │  ├── detail-blog.component.ts
│  │  │  │  │  ├── detail-blog.component.html
│  │  │  │  ├── landing
│  │  │  │  │  ├── landing.component.ts
│  │  │  │  │  ├── landing.component.html
│  │  │  │  ├── new-blog
│  │  │  │  │  ├── new-blog.component.ts
│  │  │  │  │  ├── new-blog.component.html
│  │  │  │  ├── profile
│  │  │  │  │  ├── profile.component.ts
│  │  │  │  │  ├── profile.component.html
│  │  │  │  ├── setting
│  │  │  │  │  ├── setting.component.ts
│  │  │  │  │  ├── setting.component.html
│  │  │  │  ├── sign-in
│  │  │  │  │  ├── sign-in.component.ts
│  │  │  │  │  ├── sign-in.component.html
│  │  │  │  ├── transaction
│  │  │  │  │  ├── transaction.component.ts
│  │  │  │  │  ├── transaction.component.html
│  │  │  │  ├── index.ts
│  │  │  ├── index.ts
│  │  │  ├── client-routing.module.ts
│  │  │  ├── client.module.ts
│  │  ├── core
│  │  │  ├── models
│  │  │  │  ├── billboard.ts
│  │  │  │  ├── blog.ts
│  │  │  │  ├── cart.ts
│  │  │  │  ├── course.ts
│  │  │  │  ├── index.ts
│  │  │  │  ├── shared.ts
│  │  │  │  ├── localState.ts
│  │  │  │  ├── newFeed.ts
│  │  │  │  ├── transaction.ts
│  │  │  │  ├── user.ts
│  │  │  ├── services
│  │  │  │  ├── auth.service.ts
│  │  │  │  ├── blog.service.ts
│  │  │  │  ├── cart.service.ts
│  │  │  │  ├── code.service.ts
│  │  │  │  ├── course.service.ts
│  │  │  │  ├── index.service.ts
│  │  │  │  ├── share.service.ts
│  │  │  │  ├── temp.service.ts
│  │  │  │  ├── toast.service.ts
│  │  │  │  ├── transaction.service.ts
│  │  │  │  ├── user.service.ts
│  │  |── guards
│  │  │  |── auth.guard.ts
│  │  │  |── author.guard.ts
│  │  │  |── can-learn-course.guard.ts
│  │  │  |── profile.guard.ts
│  │  │  |── signIn.guard.ts
│  │  ├── page-not-found
│  │  │  ├── page-not-found.component.ts
│  │  │  ├── page-not-found.component.html
│  │  ├── shared
│  │  │  ├── layout
│  │  │  │  ├── footer
│  │  │  │  │  ├── footer.component.ts
│  │  │  │  │  ├── footer.component.html
│  │  │  │  ├── header
│  │  │  │  │  ├── header.component.ts
│  │  │  │  │  ├── header.component.html
│  │  │  │  ├── sidebar
│  │  │  │  │  ├── sidebar.component.ts
│  │  │  │  │  ├── sidebar.component.html
│  │  │  ├── index.ts
│  │  │  ├── shared.module.ts
│  ├── app-routing.module.ts
│  ├── app.component.css
│  ├── app.component.html
│  ├── app.component.spec.ts
│  ├── app.component.ts
│  ├── app.module.ts

---

4. Tính Năng Chính | Key Features

TÍNH NĂNG MỚI

Tính năng này được xây dựng sử dụng Socket.IO cho truyền tải dữ liệu mượt mà và nhanh chóng, Node.js ở phía server, Angular cho giao diện người dùng tinh tế và MongoDB để lưu trữ dữ liệu an toàn và bền vững.

• Hệ thống bao gồm 9 phòng chat, mỗi phòng ứng với một chuyên ngành khác nhau, cho phép sinh viên dễ dàng tham gia và tương tác với các phòng học phù hợp. Trong mỗi phòng, sinh viên có thể tham gia thảo luận, chia sẻ thông tin và tài liệu học tập.
• Tính năng này không chỉ giúp cải thiện trải nghiệm học tập trực tuyến của sinh viên mà còn tạo điều kiện để họ kết nối và hỗ trợ lẫn nhau trong môi trường học thuật. Với khả năng quản lý thông tin và tương tác trong từng nhóm chuyên ngành, quản trị viên có thể theo dõi và điều chỉnh hệ thống một cách hiệu quả, đảm bảo môi trường học tập chất lượng và an toàn.

Khóa Học Đa Dạng | Diverse Courses

• Cung cấp nhiều khóa học lập trình web app, từ cơ bản đến nâng cao
• Offers a variety of web app programming courses, ranging from basic to advanced levels.

Học Tương Tác | Interactive Learning

• Tích hợp Pusher và Firebase để tạo môi trường học tập tương tác.
• Integrates Pusher and Firebase to create an interactive learning environment.

Triển Khai Linh Hoạt | Flexible Deployment

• Sử dụng Docker để đảm bảo quá trình triển khai dễ dàng và nhất quán.
• Flexible Deployment: Utilizes Docker to ensure an easy and consistent deployment process.

Giao Diện Người Dùng Thân Thiện | User-Friendly Interface

• Giao diện được thiết kế với Angular, tạo trải nghiệm người dùng mượt mà và trực quan.
• The interface is designed with Angular, providing a smooth and intuitive user experience.

---

5. Công Nghệ Sử Dụng | Technologies Used

• Frontend: Angular
• Backend: NodeJS, express
• Database: MongoDB
• Real-Time Interactions: Socket.io, Firebase
• Containerization: Docker
• Send mail with Nodemailer
• Payment: Paypal
• GG Cloud: Login, Gmail API

  Angular	TS	Nodejs	express
  Firebase	Google Cloud	Docker	MongoDB
  Sass	Nodemailer	Paypal
  RxJS	JWT

---

Mục Tiêu Dự Án | Project Goals

• Mục tiêu của dự án này là tạo ra một nền tảng giáo dục trực tuyến chất lượng cao, dễ tiếp cận và hữu ích cho sinh viên FPT, đặc biệt là những người có niềm đam mê với lập trình web app.
• The goal of this project is to establish a high-quality online education platform that is easily accessible and beneficial for FPT University students, especially those passionate about web app development.