Docs สัปดาห์ที่ 2: คิดแบบโปรแกรมเมอร์: Logic และ Flow

ทำไมต้องคิดก่อนเขียน

AI เขียนโค้ดได้เร็วมาก แต่ยังต้องมีคนบอกว่าจะสร้างอะไร ทำงานยังไง และตรวจได้ว่าผลลัพธ์ถูกไหม ทักษะนี้คือ logic และการวาง flow ซึ่งเป็นเรื่องหลักของ Phase 1

สั่ง AI ได้แม่น เพราะเราแตกโจทย์เป็นขั้นไว้แล้ว
ตรวจงาน AI ได้ เพราะรู้ว่าแอปต้องรองรับกรณีไหนบ้าง
แก้และต่อยอดเองได้ เพราะเข้าใจทุกทางแยกของแอป

แตกปัญหา: Input → Process → Output

ทุกฟีเจอร์แตกได้เป็น 3 ส่วน ตัวอย่างที่ใช้ทั้งสัปดาห์คือ แอปหารบิลค่าอาหารพร้อมทิป

ส่วน	คำถาม	แอปหารบิล
Input	รับค่าอะไรบ้าง	ยอดบิล (บาท), จำนวนคน, ทิป % (ไม่ใส่ก็ได้)
Process	ต้องคิดอะไร	ตรวจค่าที่กรอก, ทิป = ยอด × ทิป% ÷ 100, ต่อคน = (ยอด + ทิป) ÷ คน
Output	แสดงอะไร	ยอดที่แต่ละคนต้องจ่าย หรือข้อความเตือนเมื่อกรอกผิด

คำถามที่ต้องถามเสมอ"ถ้าผู้ใช้กรอกผิด จะเกิดอะไรขึ้น" คำตอบของคำถามนี้คือทางแยกใน flowchart

3 ท่าพื้นฐานของทุกโปรแกรม

ท่า	ความหมาย	ตัวอย่างในแอปหารบิล
Sequence (ทำตามลำดับ)	ทำขั้น 1 → 2 → 3	คำนวณทิป แล้วคำนวณยอดต่อคน
Condition (ตัดสินใจ)	ถ้า…ทำอย่างหนึ่ง ไม่อย่างนั้นทำอีกอย่าง	ถ้ายอดบิล ≤ 0 ให้แจ้งเตือน
Loop (ทำซ้ำ)	ทำซ้ำจนกว่าเงื่อนไขจะเปลี่ยน	ถามใหม่จนกว่าผู้ใช้จะกรอกถูก

Flowchart ด้วย Mermaid

คอร์สนี้เขียน flowchart เป็นข้อความด้วย Mermaid เพราะอ่านง่าย แก้ทีละบรรทัดได้ และ AI ทุกตัวอ่านและสร้างได้ ทำให้เอา flow ไปใช้ต่อใน prompt ตอนสั่ง AI เขียนโค้ดในสัปดาห์ที่ 6–7 ได้ทันที

สัญลักษณ์	ความหมาย	เขียนใน Mermaid
วงรี	เริ่ม / จบ	`A([เริ่ม])`
สี่เหลี่ยม	ทำงาน / คำนวณ	`B["ทิป = ยอด × 10%"]`
สี่เหลี่ยมด้านขนาน	รับค่า / แสดงผล	`C[/"กรอกยอดบิล"/]`
ข้าวหลามตัด	เงื่อนไข (ใช่/ไม่)	`D{"ยอด > 0 ?"}`
→ลูกศร	ลำดับ / ทางที่ไปต่อ	`A --> B C -- ใช่ --> D`

ข้อควรระวังเวลาเขียน Mermaidใส่ข้อความในกล่องไว้ในเครื่องหมาย " " เสมอ โดยเฉพาะเมื่อมีวงเล็บ เครื่องหมายเปรียบเทียบ หรือภาษาไทย เช่น F["ต่อคน = (ยอด + ทิป) ÷ คน"]

ลองวาดเอง

แก้โค้ดทางซ้าย แล้วภาพทางขวาจะเปลี่ยนทันที เลือกตัวอย่างอื่นได้จากปุ่มด้านบน ลองเพิ่มเงื่อนไข "ทิปต้องไม่เกิน 30%" ในตัวอย่างหารบิล

ตัวอย่าง:

flow.mmd · แก้ได้เลย

ออกแบบเสร็จแล้ว? copy prompt นี้ไปวางใน Claude หรือ ChatGPT เพื่อให้ AI หากรณีที่ flow ยังขาด (โค้ดของคุณใส่ไว้ให้แล้ว)

เครื่องมือ AI สำหรับออกแบบ flowchart

เครื่องมือ	ใช้ทำอะไร	ใช้เมื่อ
Claude / ChatGPT	สร้างและตรวจ flowchart เป็นโค้ด Mermaid	ทุกครั้ง เป็นเครื่องมือหลักของคอร์ส
Mermaid Live Editor	วางโค้ด Mermaid แล้วเห็นภาพทันที export เป็นรูปได้	อยากได้ไฟล์ภาพไปใส่สไลด์หรือรายงาน
Excalidraw	วาดแบบลายมือ แปลงข้อความหรือ Mermaid เป็นแผนภาพ	ร่างไอเดียเร็ว ๆ หรือวาดเองก่อนถาม AI
FigJam / Miro / Whimsical	กระดานออนไลน์ที่มี AI ช่วยสร้างแผนภาพ	ทำงานกลุ่ม ช่วยกันแก้ flow พร้อมกัน

ลิงก์: claude.ai · mermaid.live · excalidraw.com · www.figma.com/figjam/

Claude Skillถ้าใช้ Claude Code หรือ Cowork มี Skill สำหรับสร้างแผนภาพ Mermaid ที่ชุมชนทำไว้ ติดตั้งแล้ว Claude จะเขียน flowchart ตามรูปแบบเดิมทุกครั้ง

ขั้นตอน: คิดเองก่อน แล้วให้ AI ตรวจ

วาดเอง บนกระดาษ, Excalidraw หรือ Mermaid ห้ามใช้ AI ในขั้นนี้
ให้ AI วาดเทียบ จากโจทย์เดียวกัน (prompt ข้อ 1)
เทียบและหาจุดขาด ให้ AI ตรวจ flow ของเรา (prompt ข้อ 2) แล้วตัดสินใจเองว่าจะรับข้อไหน
แปลงเป็นโค้ด flow → pseudocode → TypeScript

ให้ AI ทำ	อย่าปล่อยให้ AI ทำแทน
ร่าง flow เทียบกับของเรา	ตัดสินใจว่าแอปควรทำอะไร
หากรณีที่คิดไม่ถึง (ค่าว่าง เน็ตหลุด กดยกเลิก)	เชื่อทุกกรณีที่ AI เสนอ (บางข้อเกินจำเป็น)
แปลง flow เป็น Mermaid หรือ pseudocode	ข้ามขั้นวาดเองไปให้ AI วาดตั้งแต่แรก
อธิบายส่วนที่ยังไม่เข้าใจ	copy โค้ดโดยไม่เทียบกับ flow

Prompt สำเร็จรูป

แก้ข้อความใน [ ] เป็นโจทย์ของคุณ แล้ว copy ไปวางใน Claude หรือ ChatGPT

1. ให้ AI สร้าง flowchart

ใช้หลังวาดเองเสร็จ เพื่อเอามาเทียบ

ช่วยออกแบบ flowchart สำหรับฟีเจอร์นี้ในแอปมือถือ:
[อธิบายฟีเจอร์ เช่น "หารบิลค่าอาหารพร้อมทิป"]

ข้อกำหนด:
- เขียนเป็นโค้ด Mermaid แบบ flowchart TD
- ใช้ ([ ]) สำหรับเริ่ม/จบ, [/ /] สำหรับรับค่าหรือแสดงผล, { } สำหรับเงื่อนไข
- ใส่ป้าย ใช่/ไม่ บนเส้นที่ออกจากทุกเงื่อนไข
- ข้อความในกล่องเป็นภาษาไทย สั้น ๆ และใส่ในเครื่องหมาย " "
- ครอบคลุมกรณีผู้ใช้กรอกผิด
- ยังไม่ต้องเขียนโค้ดโปรแกรม ขอแค่ flowchart

2. ให้ AI ตรวจ flow ของเรา

AI ชี้จุดขาด เราแก้เอง

นี่คือ flowchart ที่ฉันออกแบบเอง (Mermaid):

[วางโค้ด Mermaid ของคุณ]

ช่วยตรวจว่า:
1. ขาดกรณีไหนบ้าง (ค่าว่าง ค่าผิดรูปแบบ เน็ตหลุด ผู้ใช้กดยกเลิก)
2. มีทางที่วนไม่จบ หรือไปต่อไม่ได้ไหม
3. ตรงไหนซับซ้อนเกินจำเป็น
ตอบเป็นข้อ ๆ สั้น ๆ และยังไม่ต้องแก้ flowchart ให้ ฉันจะแก้เอง

3. ให้ AI แปลงเป็น pseudocode

แปลง flowchart นี้เป็น pseudocode ภาษาไทยทีละบรรทัด
ใช้คำว่า รับค่า / ถ้า / ไม่อย่างนั้น / ทำซ้ำ / แสดง / จบ
ยังไม่ต้องเขียน TypeScript

[วางโค้ด Mermaid ของคุณ]

จาก flow สู่โค้ด

เมื่อ flow ครบแล้ว เขียน pseudocode ทีละบรรทัดตามกล่องใน flowchart แล้วจึงแปลงเป็น TypeScript ทุก ถ้า คือข้าวหลามตัดหนึ่งอันใน flow

split-bill.pseudo

1รับค่า ยอดบิล, จำนวนคน, ทิป%
2ถ้า ยอดบิล ≤ 0
3    แสดง "ยอดบิลต้องมากกว่า 0" แล้วจบ
4ถ้า จำนวนคน < 1 หรือไม่ใช่จำนวนเต็ม
5    แสดง "จำนวนคนต้องตั้งแต่ 1" แล้วจบ
6ทิป = ยอดบิล × ทิป% ÷ 100
7ต่อคน = (ยอดบิล + ทิป) ÷ จำนวนคน
8แสดง ต่อคน (ปัดขึ้นเป็นบาท)

splitBill.ts

1type Result =
2  | { ok: true; perPerson: number }
3  | { ok: false; error: string };
4 
5export function splitBill(total: number, people: number, tipPercent = 0): Result {
6  if (total <= 0) {
7    return { ok: false, error: 'ยอดบิลต้องมากกว่า 0' };
8  }
9  if (!Number.isInteger(people) || people < 1) {
10    return { ok: false, error: 'จำนวนคนต้องตั้งแต่ 1' };
11  }
12  const tip = total * (tipPercent / 100);
13  const perPerson = (total + tip) / people;
14  return { ok: true, perPerson: Math.ceil(perPerson) };
15}
16 
17// ลองเรียก
18splitBill(1250, 4, 10); // { ok: true, perPerson: 344 }
19splitBill(0, 4);        // { ok: false, error: 'ยอดบิลต้องมากกว่า 0' }

function นี้ยังไม่มีหน้าจอ สัปดาห์ที่ 3 เราจะออกแบบ user flow และหน้าจอ แล้วเอา splitBill ไปใช้ในแอปจริง

การบ้าน

เลือกฟีเจอร์ 1 อย่างจากแอปที่อยากทำ เช่น จองคิว บันทึกรายจ่าย เช็กอินร้านกาแฟ
แตกเป็น Input / Process / Output
วาด flowchart เองด้วย Mermaid
ให้ AI ตรวจด้วย prompt ข้อ 2 แล้วจดว่ารับหรือไม่รับข้อไหน เพราะอะไร
เขียน pseudocode จาก flow ที่แก้แล้ว และส่ง flow ก่อนแก้ หลังแก้ และ pseudocode ในกลุ่ม

สัปดาห์ถัดไปออกแบบ User Flow และหน้าจอ