Folder Splitdee

SplitDee - Project Folder Structure Design 📂

นี่คือการออกแบบโครงสร้างโฟลเดอร์สำหรับโปรเจกต์ SplitDee (ระบบจัดการค่าใช้จ่ายและหารบิลอัจฉริยะ) โดยอ้างอิงจากโครงสร้างหลักที่คุณกำหนดไว้ในไฟล์นี้:

SplitDee/
├── docs/                 # เอกสารโครงการและการออกแบบระบบ (System Design Documentation)
│   ├── system_design.md  # รายละเอียดสถาปัตยกรรมระบบ (System Architecture)
│   ├── database_schema.md# การออกแบบฐานข้อมูล (Database Schema & ERD)
│   ├── api_spec.md       # รายละเอียดของ API Endpoints ทั้งหมด
│   └── user_manual.md    # คู่มือแนะนำการใช้งานแอปพลิเคชันสำหรับผู้ใช้
│
├── backend/              # ระบบหลังบ้านพัฒนาด้วย Python (FastAPI + SQLite/PostgreSQL)
│   ├── app/              # ซอร์สโค้ดหลักของ Backend
│   │   ├── __init__.py
│   │   ├── main.py       # จุดเริ่มต้นของแอปพลิเคชัน (FastAPI Server)
│   │   ├── database.py   # การเชื่อมต่อฐานข้อมูล (Database Connection)
│   │   ├── models.py     # โครงสร้างตารางฐานข้อมูล (SQLAlchemy Models)
│   │   ├── schemas.py    # รูปแบบการแลกเปลี่ยนข้อมูล (Pydantic Schemas)
│   │   ├── crud.py       # ฟังก์ชันการเขียน/อ่านฐานข้อมูล (Create, Read, Update, Delete)
│   │   └── services/     # ระบบเสริมต่างๆ ของแอปพลิเคชัน
│   │       ├── __init__.py
│   │       ├── promptpay.py # ระบบสร้าง QR Code พร้อมเพย์ (EMVCo Payload)
│   │       ├── meme.py      # ระบบสร้าง Meme ทวงเงิน (ใช้ Pillow วาดคำทวงเงินบนรูป)
│   │       └── slip.py      # ระบบจำลองตรวจสอบสลิปโอนเงิน (Slip Verification API)
│   ├── static/           # โฟลเดอร์เก็บทรัพยากรฝรั่งเซิร์ฟเวอร์
│   │   ├── templates/    # รูปภาพเทมเพลตสำหรับทำ Meme ทวงเงิน
│   │   ├── memes/        # รูปภาพ Meme ที่ถูกสร้างขึ้นมาใหม่
│   │   └── slips/        # โฟลเดอร์สำหรับเก็บภาพสลิปที่ผู้ใช้อัปโหลดมาตรวจสอบ
│   ├── tests/            # สคริปต์สำหรับรันเทสระบบหลังบ้าน (PyTest)
│   ├── requirements.txt  # ไฟล์บันทึกรายชื่อ Library/Package ที่ระบบต้องใช้งาน
│   └── .env.example      # ไฟล์ตัวอย่างตั้งค่าตัวแปรสภาพแวดล้อม (Environment Variables)
│
├── frontend/             # ระบบหน้าต่างการใช้งาน (HTML5 + CSS3 + JavaScript)
│   ├── index.html        # หน้าเพจหลักของ Web Application
│   ├── src/              # โฟลเดอร์เก็บ Logic และ Style หลัก
│   │   ├── main.js       # ไฟล์ JavaScript หลักในการควบคุม UI และจัดการ State
│   │   ├── api.js        # ฟังก์ชันติดต่อกับ Backend API
│   │   └── style.css     # สไตล์การตกแต่งหน้าตาแอปพลิเคชัน (Vanilla CSS)
│   └── assets/           # รูปภาพ, โลโก้ และไอคอนต่างๆ ที่ใช้ในหน้าเว็บ
│
├── docker/               # สภาพแวดล้อมสำหรับรันแอปพลิเคชันด้วย Container (Docker)
│   ├── backend.Dockerfile # Dockerfile สำหรับรันระบบหลังบ้าน (Python)
│   ├── frontend.Dockerfile# Dockerfile สำหรับรันเว็บแอป (Nginx / static server)
│   └── docker-compose.yml # ไฟล์ตั้งค่าการรัน Container ร่วมกันระหว่าง Frontend/Backend
│
├── scripts/              # สคริปต์เสริมสำหรับการพัฒนา
│   ├── init_db.py        # สคริปต์สร้าง Database และสร้างตารางข้อมูลเริ่มต้น
│   └── seed_data.py      # สคริปต์เติมข้อมูลจำลองเริ่มต้นในฐานข้อมูล (Seed Data)
│
└── assets/               # ทรัพยากรส่วนกลางของโครงงาน
    └── logos/            # โลโก้แบรนด์ SplitDee เวอร์ชั่นต่างๆ

---

📝 คำอธิบายการออกแบบแต่ละส่วน:

1. docs/: ใช้สำหรับรวบรวมเอกสารวิเคราะห์และออกแบบ เพื่อให้การส่งมอบโครงงานปริญญาตรีมีความเป็นระเบียบและตรวจเช็คข้อมูลอ้างอิงได้ง่าย
2. backend/: พัฒนาด้วย FastAPI ซึ่งมีความเร็วในการตอบสนองสูง และรองรับการทำ Auto API Documentation (Swagger UI) ที่จะช่วยให้การเชื่อมต่อกับ Frontend สะดวกขึ้นมาก
3. frontend/: โครงสร้างแบบ Single-Page Application (SPA) แบบดั้งเดิม (HTML/CSS/JS) เพื่อความง่ายในการพัฒนาและรันโดยไม่ต้องตั้งค่าเฟรมเวิร์กที่ซับซ้อน หรือสามารถขยายไปใช้ React.js / Vite ในภายหลังได้
4. docker/: ช่วยแก้ปัญหาการรันโปรเจกต์ต่างเครื่อง (เช่น การนำเสนอโปรเจกต์บนเครื่องของอาจารย์หรือกรรมการตรวจ) เพื่อให้รันได้เสถียรและเร็วขึ้น
5. scripts/: อำนวยความสะดวกในกระบวนการ Reset หรือทดสอบฐานข้อมูลใหม่โดยไม่ต้องเริ่มพิมพ์ข้อมูลใหม่ทุกครั้ง