เขียนโค้ดด้วยไวบ์ จะพัฒนาได้ไกลแค่ไหน?

นี่คือการย้อนทบทวนสิ่งที่รู้สึกจากฝั่งเทคนิคและการลงมือทำ มากกว่าตัวโปรดักต์เอง

เป็นความเห็นส่วนตัวล้วน ๆ

โปรดพิจารณาว่าเป็นโปรเจกต์ที่พัฒนาไปพร้อมกับการเรียนระหว่างภาคการศึกษาของนักศึกษาปี 4!

ทำไมถึงเริ่มโปรเจกต์นี้

• พัฒนาโปรดักต์ด้วยแนวคิดแบบสร้างสตาร์ตอัป ในมุมมอง PM/PO
• ตรวจสอบว่า Claude Code สามารถใช้พัฒนา MVP แบบฟูลสแตกจริงได้หรือไม่
• แก้ปัญหาการค้นหาหุ้นที่น่าลงทุนในการลงทุนหุ้น
• นำโปรดักต์เชิงพาณิชย์มาใช้เชิงรุกเพื่อสกัดอินไซต์ระหว่างกระบวนการ

ไทม์ไลน์โปรเจกต์และข้อมูลเพิ่มเติม

• วางแผน+พัฒนา: 1 เดือน
• ดีพลอย: 1 สัปดาห์
• เปิดให้บริการ: 2 เดือน
• เงินที่ลงทุน
  • Claude Code: 100USD
  • บัญชีนักพัฒนา Apple: 100USD
  • AWS: ประมาณ 220USD
  • Managed DB: ประมาณ 300USD
  • ฟรีเทียร์: Datadog, Langfuse, Posthog
  • โฆษณา: 40,000 วอน
  • รวม: ประมาณ 1,000,000 วอน (เงินตัวเอง..)

กระบวนการพัฒนา

Frontend

• กำหนด design token
• ทำ 3 หน้าหลักด้วย Figma
• ใช้ design token กับ Expo และนำ Figma MCP มาใช้ในการพัฒนา
• ลองใช้ Expo MCP แต่ไม่เสถียร จึงดีบักด้วยการดูผลลัพธ์ด้วยตนเอง
• สร้างหน้าใหม่โดยไม่มี Figma wireframe ด้วยพรอมป์ต์ลักษณะว่า “ใช้ design token และยืมแนวคิดการออกแบบจากหน้าอื่น ๆ ...”

Backend

• ขอให้พัฒนา API จาก requirement
• ขอให้ช่วยสร้าง endpoint ที่จำเป็นจาก requirement ของฝั่ง frontend ไปด้วย
• ใช้ Django ซึ่งเป็นสแตกทั่วไป ทำให้สามารถพัฒนาด้วย Claude Code ได้โดยแทบไม่มีคอขวดในตัวการพัฒนาเอง

AI

• กำหนดสถาปัตยกรรมแบบ multi-agent แล้วขอให้พัฒนาตามนั้น
• แนบลิงก์เว็บเพื่อให้อ้างอิงสำหรับรองรับสเปกล่าสุดของ LangChain และ LLMOps
• ให้ LLM สร้างพรอมป์ต์สำหรับบริการ LLM แล้วนำไปใช้ต่อ

Observability

• สร้างบนพื้นฐาน ClickStack ก่อน แล้วค่อยย้ายไป Datadog
• หลังจากพัฒนาระบบทั้งหมดแล้วจึงใส่ logging และ analytics

Infra

• ตอนแรกตั้งใจจะใช้ Pulumi แต่ Claude Code ทำได้ไม่ดี จึงเปลี่ยนไปเขียนไฟล์ดีพลอยด้วยสคริปต์บนพื้นฐาน AWS CLI
• ไม่ได้สร้าง CI/CD และ Dev Server เพราะข้อจำกัดด้านต้นทุน

รายการเทคโนโลยีที่นำมาใช้

• บริการ: สมัครสมาชิก/ชำระเงิน, social login, dark mode
• ข้อมูล: เก็บข้อมูลแบบ API based, CDC, ETL
• AI: multi-agent, Text-to-SQL, Agentic RAG, SSE streaming, session management, Retry, Rate Limit
• LLMOps: AB Test, Cloud Based Prompt Management(OTA Update), Synthetic Dataset, Evaluation

อินไซต์

การพัฒนา

• ตลอดประมาณ 1 เดือน แค่มีแพลน Claude Code 100USD ก็สามารถสร้างโปรดักต์ขนาดนี้คนเดียวได้
• ผมพัฒนา UI โดยกำหนดแค่มาตรฐาน design token และถ้าทำไปถึงระดับ design system แล้วใส่ไว้ใน Claude.md ก็น่าจะพัฒนา frontend ได้เร็วและเสถียรกว่านี้
• ความสำคัญของ design system มันช่วยเพิ่มผลิตภาพการพัฒนา frontend อย่างมาก แทนที่จะเสียเวลาทำ Figma ให้เสร็จก่อน ลงมือพัฒนาแล้วค่อยแก้ทีหลังกลับเร็วกว่า จริง ๆ มีหน้าที่พัฒนาเสร็จแล้วแต่ไม่มีใน Figma ด้วย
• การนิยามเคสยกเว้น สำคัญยิ่งขึ้นในแอปมือถือและระบบ AI ต้องวางแผนและพัฒนาเคสที่ไม่ใช่ happy path เช่น การจัดการ timeout ทั้งระบบ, policy ของ background, การกู้คืน streaming, simple error ฯลฯ บางครั้ง Claude Code จัดการ error ให้เอง แต่ไม่ได้แก้อย่างสวยงามแบบบูรณาการทั้ง frontend และ backend ดังนั้นต้องสั่งเพิ่มให้ช่วยจัดการประเด็นพวกนี้
• ห้ามรีแฟกเตอร์ครั้งใหญ่ ตอนต้นผมใส่ทั้ง React และ CSS ไว้ในไฟล์ frontend ไฟล์เดียว แล้วพยายามรีแฟกเตอร์เพื่อแยกออก สุดท้ายล้มเหลว แม้จะแยกได้ แต่ UI เปลี่ยนไปจากเดิม จึงต้องค่อย ๆ แยกทีละน้อย ดูเหมือนว่าควรคิดเรื่อง code architecture ตั้งแต่ต้น และถ้าจะใช้ component ก็ควรเพิ่มรายละเอียดนั้นไว้ในพรอมป์ต์เพื่อให้ใช้งานได้ดี
• ใช้ Claude.md หลังจากพัฒนาฟีเจอร์เสร็จ ผมจะขอให้ Claude Code ช่วยเพิ่มเนื้อหาที่ควรเก็บไว้ใน Claude.md จากสิ่งที่เพิ่งทำไป พอไฟล์เริ่มใหญ่ขึ้นก็ให้เหลือไว้เฉพาะสิ่งจำเป็นและลบที่เหลือ ใช้ readme และ claude.md อย่างเหมาะสมเพื่อควบคุมคอนเท็กซ์ของ LLM (ยุคก่อนมี skills)
• ไม่ได้ใช้ sub-agent เพราะถึงไม่มีก็ทำออกมาได้ดีอยู่แล้ว ปกติจะขอในโหมด Plan จนแผนพัฒนาชัดเจนพอ แล้วค่อยปล่อยให้ Agent พัฒนาเองแบบอิสระ
• ควรกำหนดแพ็กเกจและเทคโนโลยีไว้ล่วงหน้าแล้วบอกให้ชัด ต้องระบุ Claude.md, Readme หรือสเปกบางอย่างให้แม่นยำตอนทำงาน เพื่อเลี่ยงการสร้างโค้ดซ้ำหรือเผลอใช้สแตกคนละชุด (Skills?)

ระบบ AI

• ReAct ช้า UX แย่มาก แม้จะจัดให้ multi-agent ทำงานแบบขนานแล้วก็ยังช้าเกินไป
• UX เพื่อแก้ปัญหาคำตอบช้า จึงเพิ่ม UX ที่แสดง step ของ multi-agent, streaming, animation, การเรนเดอร์ Markdown แบบไดนามิก ฯลฯ แต่ถ้าคำตอบใช้เวลาทีละ 1 นาที แล้วทั้งหมดนี้จะมีความหมายอะไร?… (แอป B2C)
• การจัดการพรอมป์ต์และ tool schema บนคลาวด์ ข้อดีคือเอาไปใช้ในสภาพแวดล้อมออนไลน์ได้ ตอนนี้ผมคิดว่าเป็นสิ่งจำเป็นแล้ว และรัก Langfuse มาก
• ใน Text-to-SQL ต้องใส่ schema ลงในพรอมป์ต์ ซึ่งกินคอนเท็กซ์มากเกินไป น่าจะแก้ได้ด้วย fine-tuning หรือ RAG
• การประเมินและ iteration ผมสร้าง Synthetic Dataset ตาม user persona และประเมินด้วย LLM-as-a-Judge อยากทำให้เป็นอัตโนมัติ แต่สำหรับทำคนเดียวก็ยังขาดทรัพยากรด้านการพัฒนา
• evaluation metric และ rubric ปวดหัวกว่าที่คิด metric แบบทั่วไปคงเป็นอะไรอย่าง DAU กับ MAU แต่ metric แบบนี้ดึงอินไซต์ออกมาไม่ได้ ต้องกำหนด metric แบบ case-by-case เพื่อแยกกรณีคุณภาพต่ำ แก้ไข แล้วทำ iteration ต่อ สุดท้ายจึงต้องมีระบบที่ช่วยให้สร้าง custom metric ได้เก่งขึ้น (แล้ว multi-turn ล่ะ?..)
• OpenAI Tier เข้มกว่าที่คิด ใน tier ต่ำ ๆ แบบนี้ไม่สามารถใช้โมเดลดี ๆ ในระบบ production ได้

อินฟรา

• AWS แพง Managed DB ก็แพง ดีอยู่หรอก แต่ก็เสียดายทีหลัง
• Clickhouse แพงมากแต่ก็ดี ใช้แบบ managed แล้วสะดวก โดยเฉพาะ CDC ที่ได้มาพร้อมกันเลย (เร็วไปก็เท่านั้น ถ้า LLM ยังช้า)
• Qdrant, Redis Cloud ก็ไม่เลว ใช้เวลาตั้งค่าน้อยและค่าใช้จ่ายก็ถูก
• Datadog ดีมาก เพียงแต่มีแววว่าจะแพง เลยใช้แค่ฟรีเทียร์ ฟีเจอร์ที่รวม error ที่เกิดขึ้นมาแจ้งแยกต่างหากดีมาก โดยใช้ agent แบบ sidecar บน ECS

บริการ

• การชำระเงินและสมัครสมาชิก เคยคิดจะใช้ Toss Pay แต่สุดท้ายไม่ได้ใช้ เพราะมีค่าธรรมเนียมรายปี และไม่มีเอกสาร React Native ทำให้ SDK ไม่ค่อยดี ผิดหวังพอสมควร สุดท้ายเลยเลือก NICE Payments เพราะไม่มีค่าธรรมเนียมรายปี และมี dev server จึงพัฒนาได้ค่อนข้างราบรื่น
• การชำระเงินของ Apple ถึงจะใช้ NICE Payments แต่ก็มีปัญหา นโยบายการชำระเงินของ Apple จุกจิกมาก ระหว่างพัฒนา iOS มีปัญหาเรื่องนโยบายของ Apple และต้องแก้ทั้งด้านเอกสารและ UI ดูแล้วใช้ระบบชำระเงินภายในของ Apple ไปเลยน่าจะสบายใจกว่า
• การชำระเงินกับการสมัครสมาชิก (หักเงินอัตโนมัติ) เป็นคนละเรื่อง การทำระบบหักเงินอัตโนมัติต้องมี scheduling infrastructure และต้องใส่ใจเรื่องความปลอดภัยในการเก็บ card key สุดท้ายก็ทำได้ แต่ยากกว่าที่คิด ทำให้อยากลองใช้ Stripe ดู
• Push notification สามารถตั้งค่าบน Expo ได้สะดวก ท้ายที่สุดต้องมี back office เพื่อส่งข้อความอยู่ดี แต่ผมคิดว่าเป็นฟีเจอร์ที่จำเป็น

ความคิดต่าง ๆ

• ความสำคัญของ software design pattern และ architecture น่าจะเพิ่มขึ้น
• อยากให้ผู้คนสนใจการสร้างผลลัพธ์ที่ไปไกลกว่าระดับ toy project ด้วย coding agent มากขึ้น
• หลีกเลี่ยง over-spec แต่ถ้าจะหางาน ก็ไม่ใช่ว่าต้องรู้ over-spec เหมือนกันหรือ? ครั้งหน้าบางทีจบด้วย instance เดียวและ docker-compose อาจจะดีกว่า… (supabase?)
• ยุคของการก่อตั้งธุรกิจคนเดียวใกล้มาถึงแล้ว แต่ผมคิดว่าการทำของให้เสร็จกับการทำเงินได้เป็นคนละเรื่อง
• ทำคนเดียวไม่สนุก
• Linear ก็โอเคสำหรับใช้แทน Jira เพียงแต่เพิ่งเริ่มใช้ เลยยังไม่ค่อยรู้วิธีดูรวมตามลำดับชั้นของ ticket

ผลลัพธ์

• โปรเจกต์ยุติลงเพราะรับภาระค่าเซิร์ฟเวอร์ไม่ไหว
• ยอดคงเหลือ -100

อ้างอิง

มีเนื้อหาเพิ่มเติมในหน้า 4 เป็นต้นไป

https://figma.com/deck/wsGLEmFYOUPUheWBl1t23K/…

[angrybird0]

ยอดคงเหลือ -100
555

[chickendreamtree]

ขอบคุณที่แชร์เนื้อหาดี ๆ ครับ

[princox]

น่าจะเป็นประสบการณ์ที่มีมูลค่ามากกว่าหนึ่งล้านวอนเลยครับ ผมเองก็จำได้ว่าตอนเรียนมหาวิทยาลัยปี 4 ก็แทบไม่มีประสบการณ์ทำโปรเจกต์เลย การที่ใช้ AI แล้วทำได้ถึงขนาดนั้น น่าทึ่งจริง ๆ ครับ

[mark87]

การแบ่งปันประสบการณ์สนุกมากจริง ๆ ครับ อ่านเพลินมากเลย เพิ่งรู้ว่าที่แท้ยังเป็นรุ่นน้องจากมหาวิทยาลัยเดียวกันอีกด้วย ฮ่าๆ ช่วงนี้ถึงขั้นลองความท้าทายแบบนี้กันตั้งแต่ปี 4 แล้วเหรอ สุดยอดจริง ๆ ครับ

[slowandsnow]

คงเป็นการโอเวอร์เอนจิเนียร์เพื่อจุดประสงค์ในการเรียนรู้ แต่ต้นทุนน่าเสียดายเกินไปจริง ๆ

[awbrg789]

ดีทีเดียว

[botplaysdice]

เดี๋ยวนี้คุณภาพพอร์ตโฟลิโอของนักศึกษามหาวิทยาลัยนี่ไม่ธรรมดาจริง ๆ นะครับ ตอนที่ผมเรียนจบเมื่อ 20 ปีก่อน เหมือนจะจบออกมาแบบยังไม่รู้อะไรเลยแท้ ๆ น่าทึ่งมากครับ

[zxcv123]

AI ทำให้มาตรฐานโดยรวมสูงขึ้นมากจริง ๆ
ตอนนี้รู้สึกว่าถ้าจะเลือกนักพัฒนาจริง ๆ แค่เลือกคนที่นิสัยดีก็น่าจะเป็นคำตอบแล้วมั้ง 555