Draw it

Draw it เป็นแอปพลิเคชันการทำงานร่วมกันแบบเรียลไทม์ที่พัฒนาโดยใช้ Flutter สำหรับส่วนหน้าและ Node.js + Express พร้อม WebSocket สำหรับการซิงโครไนซ์ส่วนหลัง แอปนี้ช่วยให้ผู้ใช้หลายคนวาดภาพพร้อมกันบนกระดานวาดภาพที่ใช้ร่วมกัน ซึ่งแสดงให้เห็นถึงความเชี่ยวชาญทั้งในการพัฒนา UI ข้ามแพลตฟอร์มและการสื่อสารเครือข่ายแบบเรียลไทม์

🚀 วัตถุประสงค์หลัก:

เปิดใช้งานการทำงานร่วมกันแบบเรียลไทม์บนกระดานวาดภาพที่ใช้ร่วมกันโดยใช้สถาปัตยกรรมที่ทรงประสิทธิภาพและขับเคลื่อนด้วยเหตุการณ์

🧱 Tech Stack:

Flutter (Dart): ฟรอนต์เอนด์มือถือข้ามแพลตฟอร์มพร้อมการจัดการท่าทางและการเรนเดอร์แบบกำหนดเอง

Node.js + Express.js: เซิร์ฟเวอร์แบ็กเอนด์พร้อมการรองรับ WebSocket สำหรับการสื่อสารแบบสองทิศทางอย่างต่อเนื่อง

WebSocket (ws): สำหรับการซิงโครไนซ์จังหวะแบบเรียลไทม์ระหว่างผู้ใช้

CustomPainter: การวาดภาพแบบเฟรมต่อเฟรมที่มีประสิทธิภาพบนแคนวาส

ตัวจัดการการอนุญาตและขอบเขตการทาสีใหม่: บันทึกภาพวาดเป็นรูปภาพบนอุปกรณ์

🖌️ คุณสมบัติหลัก:

✍️ การวาดภาพแบบเรียลไทม์ที่แชร์ได้: ผู้เข้าร่วมทุกคนจะเห็นจังหวะของกันและกันทันทีโดยใช้การออกอากาศ WebSocket

📡 เซิร์ฟเวอร์ WebSocket แบบไม่มีสถานะ: เซิร์ฟเวอร์ Node.js น้ำหนักเบารักษาการเชื่อมต่อซ็อกเก็ตที่ใช้งานอยู่และถ่ายทอดเหตุการณ์จังหวะด้วยเวลาแฝงต่ำ

🎨 Canvas Engine: ท่าทางสัมผัสจะถูกแปลงเป็นเส้นทางเวกเตอร์ที่วาดได้และเรนเดอร์โดยใช้ CustomPainter ของ Flutter

📁 ส่งออก Canvas: ผู้ใช้สามารถบันทึกผลงานศิลปะของตนเป็นรูปภาพได้

🔧 สถาปัตยกรรมแบบโมดูลาร์: เลเยอร์แยกต่างหากสำหรับตรรกะการวาดภาพ เหตุการณ์เซิร์ฟเวอร์ และการรวมแพลตฟอร์ม