Case Study - สร้าง Web App indrawer.com ฉบับมือใหม่

บทความนี้จะพาคุณไปดู Case Study จากโครงการ InDrawer แอปพลิเคชันบริหารจัดการทรัพย์สินและบัญชีรายรับ-รายจ่ายส่วนบุคคล ที่พัฒนาขึ้นด้วย AI 100% โดยมีค่าใช้จ่ายเพียงแค่ "ค่าจดทะเบียนโดเมน" เท่านั้น!

📍 Section 1: Concept & Tech Stack (จุดเริ่มต้นและโครงสร้างระบบ)

💡 เกี่ยวกับโครงการ (InDrawer Project)

InDrawer เป็น Web Application ฟรีที่เน้นความเป็นส่วนตัวและความปลอดภัยสูง โดยมีฟังก์ชันหลักในระดับ MVP (Minimum Viable Product) ได้แก่:

1. แจ้งรายการทรัพย์สิน: ส่งข้อมูลไปยังอีเมลผู้รับตามที่ตั้งค่าไว้ โดยไม่บันทึกรหัสผ่านหรือข้อมูลอ่อนไหว

2. บัญชีรายรับ-รายจ่ายส่วนบุคคล: สรุปภาพรวมทางการเงินและเป้าหมายส่วนบุคคล

🛠️ เครื่องมือและ Tech Stack ที่เลือกใช้

จากการสอบถาม AI เพื่อหาแนวทางที่ "ง่ายที่สุดและประหยัดที่สุด" จึงได้ชุดเครื่องมือ (Tech Stack) สำหรับการพัฒนาแบบ Serverless ดังนี้:

📍 Section 2: AI Workflow Strategy (วางแผนการสั่ง AI ให้ทำงานร่วมกัน)

หัวใจสำคัญของการทำ Vibe Coding ให้สำเร็จ คือการเลือกใช้ AI แต่ละตัวตามจุดเด่นของมัน:

[Gemini / ChatGPT]  --->  ช่วยวางแผน และเขียนข้อกำหนดระบบ (BRD)
        ↓
    [Claude]        --->  รีวิวความปลอดภัย + แบ่ง Milestones + เขียน Initial Prompt
        ↓
[Google AI Studio]  --->  ลงมือเขียน โค้ดจริง (Generate Code)
        ↓
 [Gemini (Helper)]  --->  ช่วยตรวจงาน ตรวจ Error และเขียน Prompt แก้ไขส่งกลับไป AI Studio

ขั้นตอนการทำงาน (Step-by-Step):

1. วางข้อกำหนดระบบ (BRD): ส่งความต้องการคร่าวๆ ให้ Gemini วิเคราะห์และร่างเอกสาร BRD (Business Requirements Document)

2. ปรับปรุงและเพิ่มความปลอดภัย: นำ BRD ไปให้ Claude ช่วยวิเคราะห์จุดบกพร่อง เรื่องความปลอดภัยของข้อมูล และให้ Claude ช่วยแบ่งระยะการทำงานเป็น Milestones พร้อมสร้าง Initial Prompt สำหรับเริ่มต้นเขียนโค้ด

3. ส่งงานเข้ากระบวนการพัฒนา: นำ BRD และ Prompt ที่ได้ ไปป้อนใน Google AI Studio เพื่อเริ่มสร้างโค้ด

4. ตรวจสอบและแก้ไข (Iterative Loop): เมื่อ AI Studio ทำงานเสร็จในแต่ละ Milestone หากพบปัญหาหรือ Error ให้นำคำตอบของ AI Studio ไปปรึกษา Gemini ให้ช่วยวิเคราะห์และเขียน Prompt สำหรับนำกลับไปสั่ง AI Studio แก้ไขอีกครั้ง

📍 Section 3: Environment Setup (การเตรียมระบบ Cloud ก่อนเริ่มเขียนโค้ด)

ก่อนที่จะเริ่มสั่งให้ AI เขียนโค้ด คุณต้องเตรียม Keys และการเชื่อมต่อต่าง ๆ ให้พร้อม:

1. MongoDB Atlas: สมัครใช้งาน > สร้าง Cluster > ตั้งค่า Network Access (0.0.0.0/0) > คัดลอก MONGODB_URI

2. Resend: สมัครใช้งาน > เพิ่ม Domain ของโครงการ > สร้าง API Key (RESEND_API_KEY)

3. Google Analytics: สร้าง Data Stream สำหรับเว็บ > คัดลอก Measurement ID (NEXT_PUBLIC_GA_ID)

4. GitHub & Google AI Studio:

   • สร้าง Repository บน GitHub

   • ใน Google AI Studio ให้เชื่อมต่อเข้ากับ GitHub Repository ที่สร้างไว้

5. Vercel Deployment:

   • Import Repository จาก GitHub เข้ามาใน Vercel

   • ใส่ค่า Environment Variables (MONGODB_URI, RESEND_API_KEY, NEXT_PUBLIC_GA_ID)

   • ผูก Custom Domain และตั้งค่า DNS (A/CNAME Record) ตามที่ Vercel แนะนำ ระบบจะจัดการ SSL (HTTPS) ให้ฟรีโดยอัตโนมัติ

📍 Section 4: Tips & Warnings (ข้อสังเกตและข้อควรระวังสำหรับ Vibe Coder)

⚠️ ข้อควรรู้และการตั้งรับปัญหาในการพัฒนา:

1. แบ่งงานเป็น Milestones และต้องกำหนดจุดหยุด (Pause): ในการสั่ง Initial Prompt ควรสั่งให้ AI แบ่งการทำงานเป็นระยะ และสั่งให้หยุดรอการตรวจสอบจากเราเสมอ

2. ระบบ Admin และการทดสอบเชื่อมต่อต้องมาก่อน (Milestone 1):

   • ควรระบุให้มีฟังก์ชัน Admin ในการบริหารจัดการระบบ UI, Users และข้อความต่างๆ

   • ควรสั่งให้ AI สร้าง "ปุ่มทดสอบชั่วคราว" ใน Milestone 1 เพื่อทดสอบว่าระบบเชื่อมต่อกับ Database และ API ต่างๆ ได้จริงหรือไม่ ก่อนเริ่มเขียนฟังก์ชันอื่น

3. การจัดการ GitHub ใน AI Studio:

   • AI Studio มีเมนู GitHub ในตัว (คลิกปุ่มฟันเฟืองมุมขวาบน)

   • เมื่อคลิก Commit/Update โค้ดจะถูกส่งไป GitHub และ Vercel จะทำการ Deploy ขึ้นเว็บจริงทันที

   • ระวัง! อย่ากด Disconnect GitHub ในหน้า UI เล่น เพราะอาจจะไม่สามารถ Re-connect กลับคืนได้ง่ายๆ

4. ตรวจสอบการทำงานอย่างละเอียดในทุกขั้นตอน:

   • บางครั้ง AI Studio บอกว่า "แก้ไขโค้ดเรียบร้อยแล้ว" แต่ความจริงอาจยังไม่ได้ทำ หรือทำไม่ถูกต้อง

   • หากเกิดปัญหาสับสน ให้นำคำตอบของ AI Studio ไปให้ Gemini ช่วยตรวจทานและเขียน Prompt แก้ไขส่งกลับไป

📍 Section 5: Summary (บทสรุป)

การสร้าง Web Application ยุคนี้ไม่จำเป็นต้องเริ่มจากการฝึกเขียนโค้ดบรรทัดแรกอีกต่อไป ด้วยแนวทาง Vibe Coding เราสามารถใช้ทักษะการคิดเชิงตรรกะและการสื่อสาร (Prompting) สั่งการให้ AI หลากหลายตัวทำงานร่วมกันได้

แม้ว่าจะต้องเจอปัญหาหรือ Error ระหว่างทาง แต่การใช้ AI ช่วยวิเคราะห์ปัญหาก็จะทำให้เราสามารถสร้าง Web Application ที่ใช้งานได้จริง ปลอดภัย และมีต้นทุนที่ต่ำมากได้สำเร็จครับ

• การเลือกใช้ AI ในแต่ละขั้นตอน เป็นเพียงเหตุผลส่วนตัว
• ในระหว่างการพัฒนา จะพบปัญหาแทบทุกขั้นตอน, สิ่งที่ Google AI Studio ตอบกลับว่าทำแล้วนั้น อาจไม่ได้ทำจริง หรือ ทำอย่างถูกต้อง (แม้แต่ Gemini เองยังนินทา Gemini ที่อยู่บน Google AI Studio ด้วย ) ดังนั้น ผมจึงต้องตรวจสอบอย่างละเอียด และบางปัญหาสร้างความสับสนมากพอควร
• ทั้งหมดนี้ เป็นเพียงประสบการณ์แรกของมือใหม่เท่านั้น ไม่อาจถือเป็นวิธีการที่ดีและถูกต้องที่สุด
• ค่าใช้จ่ายของ Project InDrawer นี้ มีเพียงค่าจดทะเบียน domain เท่านั้น