วิธีสร้างแอปแรกของคุณด้วย Claude โดยไม่ต้องมีประสบการณ์ (คอร์สเรียนฉบับเต็ม)

ผมอยากจะพูดให้ชัดเจนเกี่ยวกับบางอย่างก่อนที่เราจะเริ่ม

เซฟไว้เลยนะ :)

ผมไม่ใช่นักพัฒนา ไม่เคยเป็นนักพัฒนา ผมไม่มีปริญญาด้านวิทยาการคอมพิวเตอร์ ไม่เคยเรียนคอร์สอบรมเขียนโค้ดแม้แต่คอร์สเดียว ผมอ่านโค้ดส่วนใหญ่ไม่รู้เรื่องเลยว่ามันทำอะไร

แต่สุดสัปดาห์ที่แล้ว ผมส่งเว็บแอปพลิเคชันที่ใช้งานได้จริงขึ้นอินเทอร์เน็ต มีผู้ใช้จริงสมัครใช้งาน มีข้อมูลจริงถูกจัดเก็บ มีฟีเจอร์จริงที่ทำงานได้

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

เพราะทุกเรื่อง "ฉันสร้างแอปด้วย AI" ที่เห็นตามออนไลน์ ทำให้มันดูง่ายดาย มันไม่ง่ายเลย แต่มันก็เป็นไปได้มาก ๆ

เช้าวันเสาร์: ไอเดีย

ผมอยากสร้างเครื่องมือง่าย ๆ ปฏิทินเนื้อหาที่ให้คุณวางแผนโพสต์ของคุณในหลายแพลตฟอร์ม ลากโพสต์ระหว่างวัน และทำเครื่องหมายว่าเผยแพร่แล้ว ไม่ได้ปฎิวัติวงการอะไร แต่เป็นสิ่งที่ผมต้องการจริง ๆ สำหรับเวิร์กโฟลว์ของตัวเอง

ผมเปิด Claude Code ในเทอร์มินัลครั้งแรกตอน 9 โมงเช้าวันเสาร์

พอ 9:15 ผมก็ทำผิดพลาดครั้งแรกแล้ว

ความผิดพลาดข้อที่ 1: เริ่มโดยไม่มีแผน

พรอมต์แรกที่ผมให้ Claude Code คือ:

สร้างแอปปฏิทินเนื้อหาให้หน่อย

Claude สร้างไฟล์ขึ้นมาเป็นชุด มีอะไรบางอย่างปรากฏบนหน้าจอ มันดูเหมือนปฏิทินเนื้อหาที่ออกแบบโดยคนที่ไม่เคยเห็นปฏิทินมาก่อน

นี่คือจุดที่ 90% ของคนยอมแพ้ พวกเขาพิมพ์พรอมต์คลุมเครือ ได้ผลลัพธ์คลุมเครือ แล้วสรุปว่า vibe coding ไม่ได้ผล

ปัญหาคือ Claude ไม่ใช่ ปัญหาคือผม ผมไม่ได้ให้อะไรเขาทำงานเลย

สิ่งที่ผมควรทำ:

ผมควรเริ่มต้นในโหมดวางแผน กด Shift + Tab ใน Claude Code เพื่อสลับจากโหมดปฏิบัติการเป็นโหมดวางแผน ในโหมดวางแผน Claude จะคิดก่อนสร้าง มันจะถามคำถาม วางโครงสร้างสถาปัตยกรรม และแสดงให้คุณเห็นว่ามันวางแผนจะสร้างอะไร

ผมกลับไปทำใหม่อย่างถูกต้อง:

ผมอยากสร้างเว็บแอปปฏิทินเนื้อหา ก่อนเขียนโค้ดใด ๆ มาวางแผนกันก่อน

แอปต้องมี:

• มุมมองรายสัปดาห์ 7 คอลัมน์ (จันทร์ถึงอาทิตย์)
• ความสามารถในการเพิ่มโพสต์พร้อมหัวข้อ แพลตฟอร์ม (Twitter, LinkedIn, Instagram) และสถานะ (ร่าง, กำหนดเวลา, เผยแพร่แล้ว)
• ลากและวางเพื่อย้ายโพสต์ระหว่างวัน
• การออกแบบที่เรียบง่าย สะอาดตา โดยใช้ Tailwind CSS
• ข้อมูลถูกจัดเก็บในฐานข้อมูลท้องถิ่นเพื่อให้คงอยู่ระหว่างเซสชัน

เราควรใช้ tech stack อะไร? โครงสร้างโฟลเดอร์ควรเป็นยังไง? อธิบายสถาปัตยกรรมก่อนสร้างอะไรเลยทีเดียว

Claude กลับมาพร้อมแผนละเอียด ใช้ Next.js สำหรับเฟรมเวิร์ก SQLite สำหรับฐานข้อมูล Tailwind สำหรับสไตล์ โครงสร้างโฟลเดอร์ที่เรียบร้อยวางทีละไฟล์

บทเรียนที่ได้: เริ่มในโหมดวางแผนเสมอ อธิบายสิ่งที่คุณต้องการอย่างละเอียดเสมอ 5 นาทีที่ใช้วางแผนจะช่วยคุณประหยัดเวลา 2 ชั่วโมงในการสร้างใหม่

ความผิดพลาดข้อที่ 2: พยายามสร้างทุกอย่างในคราวเดียว

หลังจากวางแผน ผมรู้สึกตื่นเต้น บอกให้ Claude สร้างทุกอย่างในครั้งเดียว

ผลลัพธ์คือเละเทะ บางฟีเจอร์ทำงานได้ บางฟีเจอร์ถูกทำแค่ครึ่งเดียว การลากวางพัง ฐานข้อมูลบันทึกไม่ถูกต้อง ผมไม่รู้จะเริ่มแก้ตรงไหนดี

สิ่งที่ผมควรทำ:

สร้างทีละฟีเจอร์ นี่คือกฎทองของ vibe coding

ผมเริ่มใหม่และทำตามลำดับนี้:

เซสชัน 1: แค่เค้าโครงหน้าพื้นฐาน เจ็ดคอลัมน์ ไม่มีฟีเจอร์ เซสชัน 2: เพิ่มความสามารถในการสร้างโพสต์ (แค่ฟอร์มง่าย ๆ) เซสชัน 3: แสดงโพสต์ที่บันทึกไว้ในคอลัมน์วันที่ถูกต้อง เซสชัน 4: เพิ่มฟังก์ชันลากวาง เซสชัน 5: เพิ่มฟีเจอร์สถานะ (ร่าง/กำหนดเวลา/เผยแพร่แล้ว) เซสชัน 6: ทำให้มันดูดี

แต่ละฟีเจอร์ได้บทสนทนาของตัวเอง บริบทใหม่ งานชัดเจน ผลลัพธ์สะอาด

เมื่อผมสร้างทีละฟีเจอร์ ทุกอย่างทำงานได้สมบูรณ์แบบ เมื่อผมพยายามสร้างทุกอย่างในคราวเดียว ไม่มีอะไรทำงานได้

บทเรียนที่ได้: หนึ่งบทสนทนาต่อหนึ่งฟีเจอร์ อย่าผสมหลายฟีเจอร์ในเซสชัน Claude Code เดียวกันเด็ดขาด

ความผิดพลาดข้อที่ 3: ไม่ได้สร้างไฟล์ CLAUDE.md

ถึงบ่ายวันเสาร์ ผมมีเค้าโครงพื้นฐานที่ใช้งานได้และรู้สึกตื่นเต้น แต่ผมเจอปัญหาเดิมซ้ำ ๆ:

Claude เพิ่มความซับซ้อนที่ไม่จำเป็น มันสร้างระบบจัดการข้อผิดพลาดที่ซับซ้อนทั้งที่ผมแค่อยากได้ try-catch ธรรมดา มันเพิ่มไลบรารีแอนิเมชันทั้งที่ผมแค่อยากได้ทรานสิชันที่สะอาด มันปรับโครงสร้างโฟลเดอร์ใหม่ทั้งหมดเมื่อผมขอเปลี่ยนแปลงเล็ก ๆ น้อย ๆ

ผมต้องแก้ไขสิ่งเดิมซ้ำแล้วซ้ำเล่า

แล้วผมก็นึกขึ้นได้ว่าเคยอ่านเกี่ยวกับ CLAUDE.md

ผมสร้างไฟล์ในโฟลเดอร์รากโปรเจกต์:

CLAUDE.md

กฎของโปรเจกต์

• นี่คือปฏิทินเนื้อหาธรรมดา ให้ทุกอย่าง minimal
• ใช้ Next.js 14 พร้อม App Router
• ใช้ Tailwind CSS สำหรับสไตล์ทั้งหมด ไม่มี CSS framework อื่น
• ใช้ SQLite กับ Prisma ORM สำหรับฐานข้อมูล
• ทำให้มันง่าย ไม่มีการแยกส่วนหรือดีไซน์แพทเทิร์นที่ไม่จำเป็น
• เมื่อผมพูดว่า "ทำให้ดูดี" หมายถึง: ระยะห่างที่สะอาด ฟอนต์อ่านง่าย เอฟเฟกต์ hover เล็กน้อย มุมโค้งมน
• ห้ามเพิ่ม dependency ใหม่โดยไม่ถามผมก่อน
• ถามก่อน refactor โค้ดใด ๆ ที่มีอยู่

รูปแบบโค้ด

• โค้ดที่อ่านง่ายและเข้าใจง่าย มือใหม่ควรเข้าใจได้
• ชื่อตัวแปรชัดเจน ไม่มีตัวย่อ
• คอมเมนต์เฉพาะสำหรับตรรกะที่เห็นได้ชัดว่าไม่ธรรมดา

หลังจากสร้างไฟล์นี้ ประสบการณ์เปลี่ยนไปอย่างมาก Claude หยุด over-engineer หยุดเพิ่มไลบรารีสุ่ม หยุดปรับโครงสร้างสิ่งที่ผมไม่ได้ขอให้แตะ

ทุกครั้งที่ Claude ทำสิ่งที่ผมไม่ต้องการ ผมเพิ่มกฎใหม่ใน CLAUDE.md พอถึงคืนวันอาทิตย์ ไฟล์นี้มีกฎ 30+ ข้อ และ Claude ทำตามทุกข้อได้สมบูรณ์แบบ

บทเรียนที่ได้: สร้าง CLAUDE.md ตั้งแต่วันแรก อัปเดตมันตลอดเวลา มันคือเครื่องมือที่ทรงพลังที่สุดใน Claude Code

ความผิดพลาดข้อที่ 4: ไม่ใช้ภาพหน้าจอ

เย็นวันเสาร์ แอปทำงานได้ในเชิงฟังก์ชัน แต่ดูไม่สวย ผมพิมพ์ว่า:

ทำให้ดีไซน์ดูทันสมัยและมืออาชีพยิ่งขึ้น

Claude เปลี่ยนบางอย่าง มันดูแตกต่าง ไม่ได้ดีขึ้น แค่ต่างออกไป

ผมพยายามอธิบายปัญหาทางภาพด้วยคำพูด ซึ่งมันไม่มีประสิทธิภาพอย่างยิ่ง

ผมจึงเริ่มถ่ายภาพหน้าจอเว็บไซต์ที่ผมชอบดีไซน์ แล้ววางลงใน Claude Code โดยตรง:

[ภาพหน้าจอ UI ปฏิทินที่สะอาด]

ผมอยากให้ปฏิทินของผมดูเหมือนนี้ โดยเฉพาะ:

• สีเทาเฉดนี้สำหรับพื้นหลัง
• การ์ดโค้งมนแบบนี้สำหรับแต่ละโพสต์
• ระยะห่างระหว่างองค์ประกอบเท่านี้
• วิธีการที่วันที่แอคทีฟถูกไฮไลต์ด้วยสีฟ้า

Claude จับคู่ดีไซน์ได้ใกล้เคียงสมบูรณ์แบบ ในครั้งแรก

แล้วเมื่อมีอะไรที่ดูไม่เข้าที่ แทนที่จะอธิบาย ผมถ่ายภาพหน้าจอ วงกลมบริเวณที่มีปัญหา วางลงไป แล้วบอกว่า "ระยะห่างนี้ผิด" หรือ "ฟอนต์นี้เล็กเกินไป"

บทเรียนที่ได้: ภาพหน้าจอดีกว่าคำพูด 10 เท่าสำหรับข้อเสนอแนะทางภาพ วางรูปแทนการอธิบายสิ่งที่คุณเห็นเสมอ

วันอาทิตย์: ทุกอย่างลงตัว

เช้าวันอาทิตย์ ผมมีแอปที่ใช้งานได้จริง ดีไซน์สะอาด ลากวางได้ ข้อมูลถาวร และฐานข้อมูลที่ทำงานได้ ผมสร้างทุกอย่างโดยไม่เข้าใจโค้ดส่วนใหญ่

แต่มันมีอยู่แค่บนแล็ปท็อปของผม ถึงเวลาปล่อยใช้งานจริง

ความผิดพลาดข้อที่ 5: กลัวการปรับใช้งาน

การปรับใช้งานฟังดูน่ากลัว เซิร์ฟเวอร์ โดเมน DNS ไฟล์คอนฟิก

ผมเกือบจะหยุด เกือบตัดสินใจว่า "รันในเครื่องก็พอแล้ว"

แต่ผมฝืนและถาม Claude:

ผมต้องการปรับใช้งานแอปนี้ให้ใช้งานบนอินเทอร์เน็ตจริง ๆ ผมอยากใช้ Vercel เพราะได้ยินว่ามันง่ายที่สุด อธิบายขั้นตอนที่แน่นอนให้หน่อย

Claude ให้เจ็ดขั้นตอน:

1. Push โค้ดไปยัง GitHub (Claude ช่วยผมตั้งค่า Git)
2. สมัคร Vercel (ฟรี)
3. เชื่อมต่อ Vercel กับ GitHub repo ของผม
4. ตั้งค่าตัวแปรสภาพแวดล้อมสำหรับฐานข้อมูล
5. คลิก Deploy
6. รอ 90 วินาที
7. รับ URL ที่ใช้งานจริง

ผมทำตามขั้นตอน สามนาทีต่อมาแอปของผมก็ใช้งานจริง ผมส่ง URL ให้ห้าคน พวกเขาเปิด มันใช้งานได้

บทเรียนที่ได้: การปรับใช้งานไม่น่ากลัว มันแค่รายการตรวจสอบ Claude จะพาคุณผ่านทุกขั้นตอน

12 กฎที่ผมอยากรู้ก่อนเริ่ม

ทุกสิ่งที่ผมเรียนรู้ในสองวัน บีบอัดเป็นกฎ:

กฎข้อที่ 1: เริ่มในโหมดวางแผนทุกครั้ง Shift + Tab คิดก่อนสร้าง

กฎข้อที่ 2: หนึ่งบทสนทนาต่อหนึ่งฟีเจอร์ บริบทใหม่คือบริบทที่ดีกว่า

กฎข้อที่ 3: สร้าง CLAUDE.md ตั้งแต่วันแรก ทุกครั้งที่แก้ไขกลายเป็นกฎถาวร

กฎข้อที่ 4: ใช้ภาพหน้าจอสำหรับปัญหาทางภาพทุกครั้ง วงกลมปัญหา วางโดยตรง

กฎข้อที่ 5: สร้างเวอร์ชันที่ง่ายที่สุดก่อน เพิ่มความซับซ้อนเมื่อเวอร์ชันง่ายทำงานได้แล้วเท่านั้น

กฎข้อที่ 6: อธิบายสิ่งที่คุณต้องการอย่างละเอียด ยิ่งพรอมต์เฉพาะเจาะจงมากเท่าไหร่ ผลลัพธ์ก็ยิ่งดีเท่านั้น "สร้างหน้า login" ได้ของห่วย "สร้างหน้า login พร้อมช่องอีเมลและรหัสผ่าน ลิงก์ 'ลืมรหัสผ่าน' ด้านล่าง ปุ่ม submit สีฟ้า และรีไดเรกต์ไปที่ /dashboard เมื่อสำเร็จ" ได้สิ่งที่คุณขอเป๊ะ ๆ

กฎข้อที่ 7: ใช้ /compact เมื่อบทสนทยาวเกินไป คุณภาพของ Claude ลดลงเมื่อบริบทเต็ม

กฎข้อที่ 8: Commit ไปยัง Git หลังจากทุกฟีเจอร์ที่ทำงานได้ Claude ช่วยคุณทำได้ ถ้ามีอะไรเสียหาย คุณสามารถย้อนกลับได้

กฎข้อที่ 9: เมื่อมีอะไรพัง คัดลอกข้อความแสดงข้อผิดพลาดแล้ววางลงใน Claude พูดว่า "วินิจฉัยสาเหตุที่แท้จริงก่อนแก้ไขอะไร" Claude มักจะเจอปัญหาได้ทันที

กฎข้อที่ 10: อย่าพยายามเข้าใจทุกบรรทัดของโค้ด เข้าใจว่าแต่ละไฟล์ทำอะไรและเชื่อมต่อกันอย่างไร แค่นั้นก็เพียงพอที่จะสั่ง Claude ได้อย่างมีประสิทธิภาพ

กฎข้อที่ 11: เมื่อ Claude ติดอยู่ในลูปแก้ไขสิ่งเดิมซ้ำแล้วซ้ำเล่า ให้หยุด เริ่มบทสนทนาใหม่ วางเฉพาะไฟล์ที่เกี่ยวข้องและคำอธิบายปัญหาที่ชัดเจน

กฎข้อที่ 12: ปล่อยมันก่อนที่มันจะสมบูรณ์แบบ เวอร์ชันหนึ่งไม่จำเป็นต้องสวยงาม แค่ต้องทำงานได้ คุณสามารถทำให้ดีขึ้นในเวอร์ชันสองได้เสมอ

สิ่งที่ผมสร้างตั้งแต่วันหยุดนั้น

นั่นคือสามสัปดาห์ที่แล้ว ตั้งแต่นั้นมาผมสร้าง:

• พอร์ทัลต้อนรับลูกค้าพร้อมระบบเข้าสู่ระบบและอัปโหลดไฟล์
• แดชบอร์ดภายในที่ติดตามเมตริกเนื้อหาของผม
• โปรแกรมสร้างใบแจ้งหนี้แบบง่ายที่สร้าง PDF ใบแจ้งหนี้จากฟอร์ม
• ตัวจัดการบุ๊กมาร์กที่บันทึกและจัดระเบียบลิงก์ตามหัวข้อ

ผมยังอ่านโค้ดส่วนใหญ่ไม่รู้เรื่อง ผมยังไม่เข้าใจ 80% ของสิ่งที่เกิดขึ้นในไฟล์ แต่ผมสามารถอธิบายสิ่งที่ต้องการได้ชัดเจนพอที่ Claude จะสร้างมันให้ ผมสามารถแก้ไขปัญหาโดยแสดงข้อผิดพลาดให้ Claude ดู ผมสามารถปรับใช้งานผลิตภัณฑ์ที่ใช้งานได้จริงขึ้นอินเทอร์เน็ตได้

นั่นคือ vibe coding คุณไม่ใช่โปรแกรมเมอร์ คุณคือผู้จัดการผลิตภัณฑ์ Claude คือโปรแกรมเมอร์ งานของคุณคือรู้ว่าจะสร้างอะไรและสื่อสารมันอย่างชัดเจน

คนส่วนใหญ่จะยังคงบอกตัวเองว่าพวกเขาต้องเรียนเขียนโค้ดก่อนถึงจะสร้างอะไรได้

คนที่เปิดเทอร์มินัลของพวกเขาในสุดสัปดาห์นี้ จะมีแอปที่ใช้งานได้จริงในเช้าวันจันทร์ ผมรู้เพราะนั่นคือสิ่งที่เกิดขึ้นกับผมเป๊ะ ๆ

ติดตามผมได้ที่ @eng_khairallah1 สำหรับคอร์ส AI เครื่องมือ และเวิร์กโฟลว์เพิ่มเติม เนื้อหาใหม่ทุกสัปดาห์

หวังว่าสิ่งนี้จะมีประโยชน์สำหรับคุณนะครับ Khairallah ❤️