โครงสร้าง โปรเจค NewGen X Payeasy88 RTB

คู่มือภาพแสดงโครงสร้าง Frontend, Backend, และการควบคุมสิทธิ์ตามบทบาท (Role-Based Access Control)

ภาพรวมโครงสร้างโปรเจกต์

การแยกส่วน Backend และ Frontend ออกจากกันอย่างชัดเจน คือหัวใจของการพัฒนาที่ยั่งยืน ช่วยให้แต่ละทีมทำงานได้อิสระและง่ายต่อการขยายระบบในอนาคต

🔗

API MAIN

API ควบคุมการทำงานหลัก

ที่จะส่งต่อไปยัง ส่วนต่างๆ ของระบบ ได้แก่ Backend Frontend Marketing payment

↔️ ↔️ ↔️
🖥️

Frontend

เป็นส่วนหน้าเข้าเล่นของลูกค้า

ส่วนที่ผู้ใช้โต้ตอบด้วย (Client-Side) สร้างด้วยเฟรมเวิร์กสมัยใหม่เช่น React หรือ Vue เพื่อประสบการณ์การใช้งานที่ดีที่สุด

📈

Marketing

เป็นส่วนที่ดูแลการตลาดและการสื่อสาร

ส่วนที่ดูแลการตลาดและการสื่อสาร (Marketing-Side) ใช้เครื่องมือวิเคราะห์และโฆษณาเพื่อดึงดูดลูกค้า

🗄️

Backend

เป็นส่วนจัดการตรรกะและข้อมูล

ส่วนที่จัดการตรรกะและข้อมูล (Server-Side) รับผิดชอบการประมวลผลข้อมูล การจัดการฐานข้อมูล และการรักษาความปลอดภัยของระบบ

Backend: ศูนย์กลางข้อมูลและตรรกะ

Backend คือสมองของระบบ รับผิดชอบการประมวลผล จัดการฐานข้อมูล และรักษาความปลอดภัยผ่านการยืนยันตัวตนและสิทธิ์การเข้าถึง

สัดส่วนความสำคัญของแต่ละส่วนประกอบใน Backend

วงจรการทำงานของ Request

เมื่อมีการร้องขอจาก Frontend ข้อมูลจะเดินทางผ่านชั้นต่างๆ ใน Backend เพื่อตรวจสอบและประมวลผลก่อนส่งคำตอบกลับไป

1. Routes: รับคำร้องขอจาก API Endpoint
2. Middleware: ตรวจสอบสิทธิ์ (Auth)
3. Controllers: ประมวลผล Logic
4. Models: จัดการข้อมูลกับ Database
5. Response: ส่งข้อมูลกลับไปให้ Frontend

Frontend: ส่วนติดต่อผู้ใช้งาน

Frontend คือทุกสิ่งที่ผู้ใช้มองเห็นและโต้ตอบด้วย ถูกสร้างเป็นส่วนประกอบย่อยๆ (Components) ที่นำกลับมาใช้ใหม่ได้ ทำให้การพัฒนาและบำรุงรักษาง่ายขึ้น

สัดส่วนการพัฒนาในส่วนประกอบต่างๆ ของ Frontend

วงจรการโต้ตอบของผู้ใช้

ทุกการกระทำของผู้ใช้จะกระตุ้นให้เกิดการทำงานใน Frontend เพื่ออัปเดตข้อมูลและแสดงผลหน้าจอใหม่

1. User Interaction: ผู้ใช้โต้ตอบ
2. Component: เรียกใช้ฟังก์ชัน
3. Service: เรียก API ไปยัง Backend
4. State Management: อัปเดตข้อมูล
5. UI Re-render: แสดงผลหน้าจอใหม่

Marketing: ส่วนการตลาดและการโปรโมทชัน

Marketing คือกระบวนการในการสร้างความสนใจและดึงดูดลูกค้า โดยใช้กลยุทธ์ต่างๆ เช่น โฆษณา, สื่อสังคมออนไลน์, และกิจกรรมส่งเสริมการขาย

สัดส่วนการพัฒนาในส่วนประกอบต่างๆ ของ Marketing

วงจรการโต้ตอบของผู้ใช้ใน Marketing

ทุกการกระทำของผู้ใช้จะกระตุ้นให้เกิดการทำงานใน Marketing เพื่ออัปเดตข้อมูลและแสดงผลหน้าจอใหม่

1. User Engagement การมีส่วนร่วมของผู้ใช้ในงาน
2. Marketing Action การดำเนินการทางการตลาด
3. Data Processing & Backend Integration การประมวลผลข้อมูลและการรวมระบบหลังบ้าน
4. State Management & Personalization การจัดการสถานะและการปรับแต่ง
5. Enhanced User Experience ประสบการณ์ผู้ใช้ที่ได้รับการปรับปรุง

การควบคุมสิทธิ์ตามบทบาท (RBAC)

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

เทคโนโลยีที่ใช้

📦
Node.js
🚀
Express.js
⚛️
React/Vue
🔑
JWT
🍃
MongoDB