ป้ายกำกับ: Design Pattern

MVVM (Model-View-ViewModel )MVVM (Model-View-ViewModel )

ในฐานะ System Architect การเลือกสถาปัตยกรรมที่เหมาะสมเป็นหัวใจสำคัญของการสร้างระบบขนาดใหญ่ MVVM (Model-View-ViewModel) คือหนึ่งในรูปแบบการออกแบบที่ทรงพลังที่สุดที่ช่วยให้เราแยกส่วนความรับผิดชอบ (Separation of Concerns) ระหว่างส่วนติดต่อผู้ใช้ (UI) และ Business Logic ได้อย่างสมบูรณ์

MVVM ถูกออกแบบมาเพื่อแก้ปัญหาความซับซ้อนที่เกิดจากการที่โค้ด UI (View) ต้องไปจัดการคำสั่งทางธุรกิจ (Business Logic) โดยตรง ซึ่งทำให้โค้ดปะปนกันและยากต่อการทดสอบ (Testability) โดยเฉพาะเมื่อระบบของเรามี Backend ที่แข็งแกร่งอย่าง PostgreSQL ซึ่งทำหน้าที่เป็นแหล่งข้อมูลหลัก

💡 MVVM ทำงานอย่างไรในบริบทของ PostgreSQL

MVVM แบ่งการทำงานออกเป็น 3 ส่วนหลัก โดยที่ PostgreSQL จะทำหน้าที่เป็นแหล่งข้อมูลและเป็นส่วนสำคัญของ Model เสมอ:

  1. Model (แหล่งข้อมูล): ในบริบทนี้ Model คือชั้นที่รับผิดชอบในการเข้าถึง จัดการ และคำนวณข้อมูลทั้งหมด โดยมี PostgreSQL เป็นตัวขับเคลื่อนหลัก Model จะใช้คำสั่ง SQL เพื่อดึงข้อมูลที่ถูกต้องและผ่านการประมวลผลทางธุรกิจ (เช่น การคำนวณยอดรวม หรือการตรวจสอบความถูกต้องของข้อมูล) โดย Model จะไม่รู้ว่าข้อมูลนี้จะถูกนำไปแสดงผลที่หน้าจอใด
  2. ViewModel (ตัวเตรียมข้อมูล): หน้าที่ของ ViewModel คือการเป็นตัวกลางที่ดึงข้อมูลดิบจาก Model (PostgreSQL) มาจัดรูปแบบ (Format) และเตรียมสถานะ (State) ให้พร้อมสำหรับการแสดงผล มันจะคำนวณค่าที่ View ต้องการ เช่น การคำนวณเปอร์เซ็นต์ความคืบหน้า หรือการกำหนดสถานะ `isLoading = true` โดยที่ ViewModel จะไม่เคยรู้จักโค้ด UI ของ View เลย
  3. View (ส่วนติดต่อผู้ใช้): View คือส่วนที่ผู้ใช้มองเห็น (UI) ใน MVVM ตัว View จะมีความสามารถที่เรียกว่า Data Binding คือการผูกตัวแปรของตัวเองเข้ากับคุณสมบัติ (Properties) ของ ViewModel โดยอัตโนมัติ เมื่อ ViewModel เปลี่ยนแปลงสถานะ (เช่น มีข้อมูลใหม่เข้ามา) View จะอัปเดตตัวเองโดยที่เราไม่ต้องเขียนโค้ดสั่งงาน UI เพิ่มเติม

⚙️ ตัวอย่างการทำงานของ Model ด้วย PostgreSQL

สมมติว่าเราต้องการให้ ViewModel ดึงข้อมูลยอดขายรวมและจำนวนรายการสินค้าจากฐานข้อมูล PostgreSQL เพื่อเตรียมแสดงผลบนหน้าจอ Dashboard Model จะต้องรันคำสั่ง SQL ที่ซับซ้อนเพื่อรวมข้อมูลเหล่านั้น:

SQL

-- Model Layer: PostgreSQL Function to aggregate data
CREATE OR REPLACE FUNCTION get_sales_summary(report_date DATE) RETURNS TABLE (total_sales NUMERIC, total_items INT) AS $$
BEGIN
    RETURN QUERY
    SELECT
        SUM(t.price * t.quantity)::NUMERIC AS total_sales,
        COUNT(t.id) AS total_items
    FROM sales_transactions t
    WHERE t.transaction_date = report_date;
END;
$$ LANGUAGE plpgsql;

-- การเรียกใช้ Model
SELECT * FROM get_sales_summary('2024-07-25');

ผลลัพธ์ที่ได้จาก PostgreSQL (Model) คือชุดข้อมูลที่สะอาดและพร้อมใช้งาน (เช่น total_sales: 15000.00, total_items: 12) ซึ่ง ViewModel จะนำไปใช้ต่อ

✅ บทสรุป: ประโยชน์ของ MVVM

การใช้ MVVM ทำให้โค้ดของเราถูกแบ่งเป็นส่วนๆ อย่างชัดเจน (Decoupling) ทำให้เราสามารถทดสอบ Business Logic (ใน ViewModel) ได้อย่างง่ายดายโดยไม่ต้องพึ่งพา UI เลย นอกจากนี้ยังช่วยให้ทีมงานสามารถพัฒนา View และ Model ได้พร้อมกันโดยไม่เกิดการชนกันของโค้ด (Conflict) ทำให้ระบบของเรามีความยืดหยุ่น (Maintainability) และพร้อมสำหรับการขยายตัวในอนาคตอย่างแท้จริง