EduMatrix Virtual Classroom

โครงการ Fullstack

โครงการนี้เป็นเว็บแอปพลิเคชัน Fullstack ที่สร้างขึ้นด้วย React (Frontend) และ Node.js (แบ็กเอนด์) ส่วนหน้าถูกกำหนดค่าด้วย VITE และอยู่ในโฟลเดอร์ client ในขณะที่เซิร์ฟเวอร์แบ็กเอนด์ทำงานด้วย node.js และสามารถเริ่มต้นด้วย npm run dev

เกี่ยวกับโครงการ

Edumatrix เป็นแพลตฟอร์มห้องเรียนเสมือนจริงที่ออกแบบมาเพื่อมอบประสบการณ์การเรียนรู้ที่ราบรื่นและโต้ตอบ สร้างขึ้นด้วย Mern Stack มันรวมคุณสมบัติการสื่อสารแบบเรียลไทม์โดยใช้ Socket.io และ WebRTC เพื่อเปิดใช้งานชั้นเรียนสดการประชุมทางวิดีโอและเครื่องมือการทำงานร่วมกันเช่นไวท์บอร์ดที่ใช้ร่วมกันและแชท

เป้าหมาย

1. ปรับปรุงการศึกษาออนไลน์ : จัดเตรียมแพลตฟอร์มที่เชื่อมช่องว่างระหว่างห้องเรียนแบบดั้งเดิมและการเรียนรู้เสมือนจริงเพื่อให้มั่นใจว่าประสบการณ์ที่หลากหลายและโต้ตอบสำหรับนักเรียนและนักการศึกษาเหมือนกัน
2. การเข้าถึง : ทำให้การศึกษาสามารถเข้าถึงได้สำหรับผู้ใช้ทั่วโลกโดยนำเสนอแพลตฟอร์มที่เชื่อถือได้และใช้งานง่าย
3. การโต้ตอบแบบเรียลไทม์ : อำนวยความสะดวกในการสื่อสารที่มีประสิทธิภาพและการทำงานร่วมกันระหว่างครูและนักเรียนผ่านการประชุมทางวิดีโอการแชทและเครื่องมือโต้ตอบ
4. ความสามารถในการปรับขนาด : สร้างระบบที่สามารถปรับขนาดเพื่อรองรับผู้ใช้จำนวนมากพร้อมกันโดยไม่กระทบต่อประสิทธิภาพ
5. การปรับแต่ง : อนุญาตให้สถาบันและนักการศึกษาปรับแต่งแพลตฟอร์มให้เข้ากับความต้องการเฉพาะของพวกเขา

สารบัญ

• คุณสมบัติ
• โครงสร้างโครงการ
• คำแนะนำการตั้งค่า
• การบริจาค

คุณสมบัติ

• Frontend : สร้างด้วย React, กำหนดค่าด้วย VITE สำหรับการสร้างที่เร็วขึ้นและประสบการณ์การพัฒนาที่ดีที่สุด
• แบ็กเอนด์ : ขับเคลื่อนโดย node.js ด้วยเซิร์ฟเวอร์ API
• การสื่อสารแบบเรียลไทม์ : รองรับการประชุมทางวิดีโอสดและแชทโดยใช้ WEBRTC และ Socket.io
• เครื่องมือเชิงโต้ตอบ : รวมไวท์บอร์ดที่ใช้ร่วมกันสำหรับการทำงานร่วมกันระหว่างชั้นเรียน
• การรับรองความปลอดภัยที่ปลอดภัย : ดำเนินการเข้าสู่ระบบและการจัดการผู้ใช้ที่ปลอดภัย
• การออกแบบที่ตอบสนอง : สร้างความมั่นใจในการใช้งานผ่านอุปกรณ์รวมถึงเดสก์ท็อปแท็บเล็ตและสมาร์ทโฟน
• การรวม FullStack : ส่วนหน้าและแบ็กเอนด์เชื่อมต่อได้อย่างราบรื่นสำหรับการจัดการข้อมูลที่มีประสิทธิภาพ

โครงสร้างโครงการ

 root
├── client         # Frontend (React with Vite)
└── server         # Backend (Node.js with Express)

คำแนะนำการตั้งค่า

ข้อกำหนดเบื้องต้น

• Node.js และ NPM ติดตั้งบนเครื่องของคุณ

1. โคลนที่เก็บ

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

2. ติดตั้งการพึ่งพา

นำทางไปยังโฟลเดอร์ไคลเอนต์และเซิร์ฟเวอร์เพื่อติดตั้งการพึ่งพาที่จำเป็น

ส่วนหน้า

 cd client
npm install

แบ็กเอนด์

 cd ../server
npm install

3. กำหนดค่าตัวแปรสภาพแวดล้อม

สร้างไฟล์ .env ในไดเรกทอรี server และเพิ่มตัวแปรสภาพแวดล้อมที่จำเป็นเช่นสตริงการเชื่อมต่อฐานข้อมูลคีย์ API และการกำหนดค่าอื่น ๆ

4. เริ่มแอปพลิเคชัน

เซิร์ฟเวอร์แบ็กเอนด์

ในการเริ่มต้นเซิร์ฟเวอร์แบ็กเอนด์ให้เรียกใช้คำสั่งต่อไปนี้จากโฟลเดอร์ server :

npm run dev

สิ่งนี้จะเริ่มต้นเซิร์ฟเวอร์แบ็กเอนด์ในโหมดการพัฒนา

เซิร์ฟเวอร์ส่วนหน้า

ในการเริ่มต้นเซิร์ฟเวอร์ส่วนหน้าเรียกใช้คำสั่งต่อไปนี้จากโฟลเดอร์ client :

npm run dev

5. เข้าถึงแอปพลิเคชัน

เมื่อทั้งเซิร์ฟเวอร์ส่วนหน้าและแบ็กเอนด์กำลังทำงานอยู่คุณสามารถเข้าถึงแอปพลิเคชันได้ที่ http://localhost:5173 โดยค่าเริ่มต้น

การบริจาค

เรายินดีต้อนรับผลงาน! เพื่อมีส่วนร่วมโปรดทำตามขั้นตอนเหล่านี้:

1. แยกที่เก็บ และสร้างสาขาของคุณ:

   git checkout -b feature/YourFeature

2. ทำการเปลี่ยนแปลงของคุณ และส่งข้อความที่มีความหมาย:

   git commit -m " Add YourFeature "

3. กดไปที่ส้อมของคุณ และส่งคำขอดึง:

   git push origin feature/YourFeature

4. ส่งคำขอดึง จากที่เก็บข้อมูลของคุณไปยังสาขา main ของที่เก็บหลัก ทีมงานของเราจะตรวจสอบคำขอดึงของคุณและแนะนำการเปลี่ยนแปลงที่จำเป็น

แนวทางการพัฒนา

• ตรวจสอบให้แน่ใจว่ารหัสมีความสอดคล้องและความสามารถในการอ่าน
• เขียนข้อความที่มีความหมาย
• ทดสอบการเปลี่ยนแปลงของคุณก่อนส่งคำขอดึง

ใบอนุญาต

โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT - ดูไฟล์ใบอนุญาตสำหรับรายละเอียด

---