สร้าง Personal Website ที่ Sync กับ Facebook Page ด้วย Claude AI
สวัสดี! 👋
หลังจากท่องเที่ยวมาช่วงสงกรานต์ ฮงกลับมาแล้วพร้อมที่จะเขียน content เต็มตัว เย้ 😊
Background Story & Problem
อะไรทำให้เกิด project นี้?
1. Website First - เป็นเจ้าของข้อมูลของตัวเอง
แนวคิดที่สำคัญคือการมี platform ของตัวเอง เป็นเจ้าของข้อมูลอย่างแท้จริง ไม่มีใครมาลดการมองเห็น หรือลบ post ของเราได้
2. AI Search - ความสำคัญในยุคค้นหาข้อมูลด้วย AI
การค้นหาข้อมูลผ่าน AI chat เป็นเรื่องที่นิยมมากขึ้น ถ้า AI ไม่รู้จักเรา user เองก็ไม่ได้มีโอกาสรู้จักเรา การสร้าง website เพื่อให้ AI ดึงข้อมูลไปได้ เป็นเรื่องที่สำคัญมาก
3. ความยากในการค้นหาข้อมูลเก่า
การดู post เก่าๆ ใน Facebook ทำได้ยาก ต้นเลื่อน ต้องค้นหาด้วย keyword ไล่ย้อนกันไป อาจจะใช้เวลานาน
Feature ของ Website
- White/Dark Mode - ปรับธีมสีได้ตามใจ
- Animation - ใช้ animation ในหน้าแรก
- Lazy Load - ถ้า scroll ไม่ถึงก็ยังไม่ load
- Copy/Share Link - ใช้งานได้อย่างสะดวก
- View Original Post - ลิ้งกลับไปยัง Facebook post ต้นฉบับ
- Responsive Design - รองรับ Desktop/Mobile ดูแบบไหนก็สวย
- Auto Sync - ข้อมูล Facebook -> Website ทุกๆวัน (ทั้งข้อความและรูปภาพ) ไม่ต้องเหนื่อย backup เอง และสามารถกำหนดช่วงเวลา ย้อนหลังได้
ทั้งหมดนี้ Claude Code ช่วยสร้างให้ได้หมด แต่จะทำยังไง เป็นเรื่องที่น่าสนใจมากครับ 🥳
Claude Skills ที่ใช้
1️⃣ /grill-me - Skill โปรดจาก Matt Pocock
Skill นี้ออกแบบมาให้ AI ถามคำถามเราจนกว่าจะเข้าใจ requirement ทั้งหมด ทั้งยังให้เราเข้าใจตัวเองด้วยว่าต้องการอะไร
ในการทำ project นี้ AI ถามไปเกือบ 20 คำถาม และการถามโดยไม่เริ่มทำ ไม่เปลือง token ด้วย
2️⃣ /write-to-prd - แปลง Requirement เป็น Document
อีก skill ของ Matt Pocock ที่แปลง requirement ที่เราคุยกับ AI มาเป็น document พร้อม task breakdown เพื่อให้ AI พร้อมทำ
เมื่อได้ doc ที่ละเอียดแล้ว เราก็ปล่อยให้ AI ทำ
3️⃣ /tdd - Test Driven Development
AI ช่วยเพิ่มความเร็วในการเขียนโค้ดได้จริง ทำให้ bottleneck ของการพัฒนาย้ายมาที่ quality control
การทำ TDD ช่วยในเรื่องนี้ได้ผ่านการเขียน test เพื่อทดสอบ (ตาม requirement) ก่อนที่จะเขียนโค้ดจริง เพื่อให้มั่นใจว่า โค้ดที่เขียนไปทำงานได้
เมื่อ Skill ทั้งหมดร่วมมือกัน งานเราก็เสร็จได้อย่างมีประสิทธิภาพ เย้
สรุปโดยหัวหน้าฮง
ตอนนี้สร้างระบบอะไรก็ทำได้ง่ายไปหมด ถ้าไม่รู้อะไรก็ถาม AI ได้ ถ้าทำไม่เป็นก็ให้ AI ทำให้ได้ ถ้าอยากให้เร็วก็ให้ AI ช่วยทำได้
แต่สิ่งหนึ่งที่สำคัญที่สุดเสมอ คือเราต้องเข้าใจสิ่งที่เราจะทำ และตรวจสอบความถูกต้องและเป็นคนตัดสินใจ
บางที AI มันก็มั่วได้ เพราะงั้นเราเลยต้องคุมคุณภาพ
ถ้า “สนใจ” เดี่ยวฮงจัด free mini session แชร์การทำ website นี้แบบลง detail ส่วนวันที่เดี่ยวขอดูก่อน แต่น่าจะเป็นต้นเดือนหน้าครับ
ขอบคุณครับ 🥳
