Paper Yard Book Bar — booktail (build log)

ผมกับ AI ทำระบบจ่ายเงินเสร็จ แล้วโยนทิ้งในอีกราว 2 ชั่วโมงต่อมา 🍸📚
บันทึก 3 วัน (23 commits) ทำ "booktail" ให้ร้านหนังสือที่เสิร์ฟหนังสือเป็นค็อกเทล
👉 ลองเขย่าได้ที่ paperyard.co/bookbar

เบื้องหลังตั้งแต่ prompt แรกจนถึงวันที่ลูกค้าใช้จริง คนทำมีสามคน ผม เพื่อนที่เป็นเจ้าของร้าน กับ Claude Code

━━━━━━━━━━

🍸 booktail คืออะไร

Book Bar ของ Paper Yard ไม่ได้ให้ลูกค้าเลือกหนังสือเป็นเล่มบนหน้าเว็บ แต่ให้ "สั่งเครื่องดื่ม" เป็นสูตรแทน ตอนนี้เมนูมี 7 ขั้น:
• TYPE: Fiction หรือ Non-fiction
• BASE: แนว
• FLAVOR: อารมณ์
• INGREDIENTS: ธีม
• STRENGTH: อ่านหนักแค่ไหน
• PACE: จังหวะการอ่าน
• FINISH: อ่านจบแล้วรู้สึกยังไง

แล้วเลือกขนาดแก้ว S ฿299 / M ฿399 / L ฿599 จากนั้น Booktender ของร้านจะเลือกหนังสือจริงมาเสิร์ฟให้

booktail คือตัวช่วยผสมสูตร กด SHAKE! แล้วหนังสือ 3D จะร่วงลงมาซ้อนกันบนเคาน์เตอร์ สันแต่ละเล่มคือส่วนผสมหนึ่งอย่าง ขั้นไหนรู้อยู่แล้วว่าอยากได้อะไรก็ล็อกไว้ ที่เหลือปล่อยให้สุ่ม

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

━━━━━━━━━━

🌙 Day 0: โฟลเดอร์เปล่ากับทวีตเดียว

ห้าทุ่มครึ่งคืนวันที่ 2 ต.ค. ผมเปิดโฟลเดอร์เปล่า พิมพ์ prompt แรกเป็นภาษาอังกฤษงู ๆ ปลา ๆ ประมาณว่า "ช่วยทำ book randomizer ให้เพื่อนหน่อย ใช้ CI ของร้าน อยากได้ฟีลแบบทวีตของ Meng To"

(อันที่เป็นชั้นหนังสือ Three.js ได้แรงบันดาลใจจากเว็บ Stripe Press เลื่อนแนวนอน เปิดเล่มพลิกหน้าได้)

แล้วสั่งให้มัน grill ผมด้วยคำถามก่อนเริ่ม

แต่สิ่งแรกที่ AI ไปเจอ ทำให้ทั้งโปรเจกต์เปลี่ยนไปเลยครับ:
หน้า Book Bar ไม่มีชื่อหนังสือสักเล่ม มีแค่ฟอร์มสั่ง 6 ขั้น หน้าตาเหมือนใบ order slip ของบาร์

randomizer เลยสุ่มหนังสือไม่ได้ ต้องสุ่ม "สูตร" แทน คอนเซปต์บาร์ค็อกเทลมาจากตรงนี้

เรื่องสีของร้านก็ไม่ง่าย:
• มัน curl HTML ของหน้า Wix มาทั้งก้อน (1.67 MB) ก่อน
• พอจะเปิดดูในเบราว์เซอร์ browser tool ก็พังทั้งสองตัว ตัวหนึ่งบอกว่า profile ใช้งานอยู่ อีกตัว timeout
• มันเลยดาวน์โหลดรูปของหน้ามาวัดสีเอง ได้สีกรมท่าของโลโก้ (#0F3256) มาเป็นสีหลัก

มันถามมา 4 ข้อ ผมตอบไปหนึ่งรอบ พอมันจะถามรอบสอง ผมตัดบทเลย:
"ไปรีเสิร์ชเอง แล้วทำมาหลาย ๆ direction ให้ผมเลือก" 😅

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

เมนูตอนนั้น: 8 base × 10 flavor × 16 ingredients (เลือก 2) × 4 style × 8 finish ได้ 307,200 สูตร

แล้วก็เจอคำว่า "Horror/Triller" ในฟอร์มจริงของร้านตั้งแต่ตอนนั้น (เรื่องนี้จะกลับมาอีก)

━━━━━━━━━━

🤖 คืนแรก: AI 10 ตัว แข่งกันทำ 4 prototype

ผมสั่ง workflow ชุดหนึ่งให้รันข้ามคืน แล้วไปนอน ข้างในมี:

• researcher 2 ตัว
ตัวแรกค้น Mobbin 15 ครั้ง ไปหยิบแพทเทิร์นมาจากหลายที่ เช่น การสุ่มแบบเติมคำของ YouTube Music จังหวะเปิดกล่องสุ่มของ Grab และหน้าตาใบเสร็จ / boarding pass แล้วตัดวงล้อแบบคาสิโนทิ้ง เพราะ "ดูเหมือนโปรหลอกลวง"
ตัวที่สองไปศึกษาเทคนิคจากเดโมของ Meng To ซึ่งไม่ได้ระบุ license ไว้ เลยตั้งกติกาว่า ดูวิธีคิดได้ แต่ห้ามลอกโค้ด เขียนใหม่ทั้งหมด

• builder 4 ตัว ทำคนละ direction

• reviewer 4 ตัว ที่ถูกสั่งว่า "อย่าเชื่อรายงานของ builder" หน้าที่คือทำให้มันพัง:
กด SHAKE 8 ครั้งติด กดรัวกลางแอนิเมชัน บล็อก CDN เปิด reduced motion ลองจอ 3 ขนาด

รวม 10 agents, 622 tool calls, 1 ชั่วโมง 54 นาที

ตื่นมาเจอ prototype 4 แบบที่ใช้งานได้จริงวางเทียบกันในหน้าเดียว

1. Back Bar: ชั้นหนังสือ 5 ชั้นหมุนเหมือนสล็อต
2. Mystery Book: หนังสือ "?" เล่มเดียวเปิดพลิกหน้าเป็นสูตร (ใกล้ Meng To ที่สุด)
3. Order Slip: ไม่มี 3D ใบสั่งพลิกตัวอักษรแบบป้ายสนามบิน แล้วปั๊มตรา SHAKEN สีแดง
4. Spine Stack: หนังสือร่วงลงบนบาร์ทีละเล่ม อ่านสันเรียงกันแล้วได้สูตร

AI เชียร์ Spine Stack เหตุผลคือ "กองสันหนังสือคือผลลัพธ์ที่ลูกค้าน่าจะแคปไปแชร์มากที่สุด"

ส่วน reviewer ก็จับบั๊กจริงได้ เช่น
• ภาษาไทยตัดบรรทัดกลางวลี เป็น "เร็ว วางไม่ / ลง"
• สล็อตหยุดที่หนังสือเล่มเดียวกันสองชั้นติดกัน

มีเรื่องหนึ่งที่ AI ตัดสินใจเองแล้วผมชอบมาก คือ size ไม่สุ่ม เพราะ size คือราคา ไม่ควรมีใครโดนสุ่มเป็นออเดอร์ ฿599 โดยไม่ตั้งใจ

(running gag: preview server ในเครื่องโดน time limit ฆ่าไป 3 รอบ ตั้งแต่ตีสี่ถึงก่อนเที่ยง)

━━━━━━━━━━

☀️ Day 1: "minimal and liquid glass ish"

เช้ามาผมถามว่าจะรวมหน้าเลือกกับหน้าสุ่มยังไง พร้อมแนบ brief แรกจากเจ้าของร้าน:
"minimal and liquid glass ish"

ตลกตรงที่ brand brief ที่ AI เขียนให้ตัวเองเมื่อคืนเขียนไว้ชัด ๆ ว่า "no glassmorphism" 😂

แต่รสนิยมเจ้าของร้านชนะ research brief ครับ Spine Stack กลายเป็นฉากขาว ๆ มีแผงกระจกลอยอยู่แผ่นเดียว หนังสือ 3D เบลออยู่ข้างหลัง

reviewer รอบสองยังเจอของจริงอีก
• ปุ่มกดสูงแค่ 34px (แก้เป็น 44px จำตัวเลขนี้ไว้นะครับ)
• บนจอ 360×640 ปุ่ม SHAKE! ไปอยู่ที่ y=658 คือหลุดขอบจอ
• แม่กุญแจล็อกกับไม่ล็อกหน้าตาแทบเหมือนกัน

ตอนนั้นแต่ละขั้นมีกุญแจอยู่แล้ว แต่โหมดสุ่มกับโหมดเลือกยังแยกกัน ผมสั่งต่อว่า "lock in that ui" เลยรวมเป็นหน้าเดียว ทุกขั้นมีแม่กุญแจที่หัว:
• สุ่มได้ = สีอ่อน กุญแจเปิด กด SHAKE ใหม่ก็เปลี่ยน
• เลือกเอง/ล็อกไว้ = navy ทึบ สุ่มกี่ทีก็อยู่

นี่แหละหัวใจของ booktail คือ randomizer ที่เราคุมได้บางส่วน

🚀 Deploy แรก

Dockerfile 4 บรรทัด (Caddy เสิร์ฟไฟล์ static) Docker ในเครื่องงอแง 3 รอบ

พอผมพิมพ์ "u can use railway cli for me" มันสร้าง project ผูก GitHub แล้วออก domain ในราว 2 นาที

ขึ้นจริงตอนบ่ายโมงสิบ เกือบ 14 ชั่วโมงหลัง prompt แรก (รวมเวลานอนแล้ว) ส่วนการ push ผมกดเองทุกครั้ง AI ไม่ push ให้

━━━━━━━━━━

🍹 "หนังสือทั้งหมดแปลงร่างเป็นแก้วค็อกเทล"

เกือบหนึ่งทุ่ม เจ้าของร้านส่งไอเดียมาอีก ผมก๊อปข้อความส่งให้ AI ทั้งดุ้น:
"มันทำเป็นแบบ พอกดแล้ว มีระดับน้ำท่วมขึ้นมาได้มะ เหมือนเติมส่วนผสมลงในแก้ว แล้วพอกดเสิร์ฟ หนังสือทั้งหมดแปลงร่างเป็นแก้วค็อกเทล"

ผมแปะลิงก์ motion.dev ไปด้วย ภายในชั่วโมงเดียว:
• แผงฟอร์มกลายเป็นแก้ว เลือกขั้นไหนก็มีน้ำสีไหลเข้ามาเป็นชั้น ๆ ผิวน้ำกระเพื่อมแบบ spring
• กด SERVE หนังสือลอยขึ้นมาต่อกันเป็นรูปแก้วมาร์ตินี่ ตรงตามที่เจ้าของร้านพูดเป๊ะ ๆ

(มีบั๊กเล็ก ๆ ด้วย คือแก้วใสเรนเดอร์ออกมาเป็นสีเทาแบน ต้องเอาฉากหลังไปวางไว้ข้างหลังมันถึงจะใส)

แต่ขึ้น live ได้ราว 2 นาที ผมก็รู้ว่ามันไม่ใช่ภาพที่อยู่ในหัว เลยพิมพ์ไปว่า
"each book turn into each ingredient then get pour into a shaker then shake to booktail"

AI ลบเวอร์ชันมาร์ตินี่ทิ้งทั้งหมด ไม่ได้ซ่อนไว้หลัง flag แล้วทำพิธีผสมยาวราว 5.4 วินาทีขึ้นมาแทน:

1. มีเชคเกอร์เงินฝาน้ำเงินวางบนเคาน์เตอร์
2. หนังสือโค้งลอยข้ามไป ค้างให้เห็นชื่อแวบหนึ่ง
3. ย้อมเป็นสีของตัวเอง
4. หดเป็นสายน้ำไหลลงเชคเกอร์
5. ปิดฝา เขย่า 4 ครั้งครึ่งแบบช้าลงเรื่อย ๆ
6. รินเป็นสีไล่ระดับสีเดียว (shaken, not layered)

จาก feedback ถึงขึ้น live ราวชั่วโมงเดียว บวกปรับตามผมอีก 45 นาที

แต่ทุกอย่างถึงตรงนี้ทดสอบในเบราว์เซอร์จำลองที่ไม่มีหน้าจอทั้งหมด รายงานทุกฉบับลงท้ายคล้าย ๆ กันว่า "ยังไม่ได้ลองบนมือถือจริงเลยนะ"

ซึ่งก็จริง เรื่องนี้กลับมาเล่นงานผมใน Day 3

━━━━━━━━━━

🎨 Day 2: สี, Wix และหนังสือจริงบนชั้น

ก่อนเที่ยงคืน ผมขอให้ใส่สีและทำให้ใช้ใน Wix ของร้านได้

ตัวเลือกทั้ง 46 ตัวได้สีเครื่องดื่มของตัวเอง
• Horror = สีเลือด
• Crime = สีเบอร์เบิน
• Non-fiction = มัทฉะ
• "ทำลายจิตใจได้เลย" = black cherry
• "Bittersweet" = สีคัมปารี

ส่วนที่สาย dev น่าจะชอบ: สีจะจัดแค่ไหน ตัวหนังสือต้องยังอ่านออก

โค้ดเลยคำนวณ contrast ตอนรัน แล้วจำกัดความเข้มของสีโดยตั้งเป้าไว้ที่ 4.65:1 (ส่วนผสมที่แย่ที่สุดวัดได้ 4.61:1 ยังเกิน 4.5 ของ WCAG AA) สีเลือดบนฟอร์มเลยถูกลดลงเป็นชมพู สีจริงเต็ม ๆ ไปโผล่ตอนรินกับในแก้ว

Wix รอบแรกผมเลือกแบบที่กระทบของเดิมน้อยที่สุด คือให้แอปอยู่ในกล่อง Embed HTML แล้วติ๊กตัวเลือกในฟอร์มเดิมของร้านให้อัตโนมัติ

จำ Horror/Triller ได้มั้ยครับ สคริปต์ติ๊กฟอร์มต้องลองสะกดแบบในฟอร์มก่อน เพราะฟอร์มจริงรับแค่ตัวสะกดนั้น ไม่งั้นติ๊กไม่ติด

จากนั้นก็เงียบไป 15 ชั่วโมง

บ่ายสามโมงกว่า ผมได้ screenshot จากเจ้าของร้าน กล่อง embed แสดงข้อความยาวเป็นพรืด เพราะสิ่งที่แปะลงไปคือไฟล์ README (วิธีติดตั้ง) แทนไฟล์โค้ด

ไม่ใช่ความผิดเจ้าของร้านเลยครับ คู่มือที่ผมกับ AI เขียนมันไม่ชัดเอง README รอบต่อมาเลยเขียนให้ชัดว่า "แค่แปะ" แล้วเช็กแค่ ID ของฟอร์ม

แล้วแผนก็เปลี่ยนอีกสองรอบในบ่ายเดียว
• รวมทั้งแอปเป็นไฟล์เดียวไว้แปะใน Wix (2,523 บรรทัด) ทดสอบแล้วเหมือนค้าง สุดท้ายไม่ใช่บั๊ก เครื่องทดสอบเรนเดอร์ 3D ด้วย software เลยใช้เวลาเขย่ากับเสิร์ฟ 68 วินาที
• ผมอยากให้ flow จบในแอปเลย AI หยุดถามก่อน เพราะเรื่องนี้แตะเงิน แล้วเสนอมา 3 ทาง ผมเลือก Wix Payments ราคาคิดฝั่ง server จาก size อย่างเดียว browser แก้ราคาไม่ได้

📦 กวาดทั้งร้าน

ผมให้มันไปหาหนังสือทุกเล่มของ paperyard.co
• หน้าสินค้าหนักหน้าละราว 2 MB scrape ไม่ไหว มันเลยไปใช้ storefront API สาธารณะของ Wix (token แบบ visitor ที่ browser ทุกตัวได้อยู่แล้ว) ดึงทีละ 100
• ได้สินค้าหลายพันชิ้น ตัดของหมด นิตยสาร มังงะ หนังสือเด็ก พรีออเดอร์ออก เหลือราว 3 พันเล่ม
• แต่ละเล่มติด tag ตามหมวดของร้านกับคีย์เวิร์ดไทย
• ตัวจับคู่ให้น้ำหนัก ingredients 4, flavor กับ finish อย่างละ 2, style 1 เลือกจำนวนหน้าตาม size และลดอันดับเล่ม 2 ขึ้นไปของซีรีส์
• สุ่มสูตร 2,000 รอบ (กับเมนูเก่า) ไม่มีรอบไหนว่างเลย

ตรงนี้ AI เตือนขึ้นมาเองโดยไม่มีใครถาม ว่าถ้าโชว์หนังสือพร้อมราคาของมันเอง (ซึ่งหลายเล่มถูกกว่า ฿299) ลูกค้าอาจไปซื้อเล่มนั้นแทน booktail ก็ได้ ให้ไปถามเจ้าของร้านก่อน

🐛 บั๊กที่จับได้จากคำถามบรรทัดเดียว

ผมถามแค่ว่า "it work with railway v right"

มันไม่ตอบว่าใช่ แต่ build Docker image ตัวเดียวกับที่ Railway ใช้มารันเอง เจอว่าบนเดสก์ท็อป เขย่าครั้งแรกได้แก้วเปล่า ไม่มีหนังสือ

สาเหตุคือรายการหนังสือรอโหลดหลัง font กับ three.js จาก CDN ถ้า CDN ช้า แอนิเมชันเสิร์ฟจบก่อนรายการมาถึง แก้ไม่กี่บรรทัด เจอก่อนลูกค้าจะเจอ

💬 แชทของเจ้าของร้าน 4 ไอเดีย จบด้วย "555"
"เขยิบตำแหน่งหนังสือมาด้านซ้ายในเวอร์เดสท็อปหน่อยสิ"
"…ควรขึ้นราคาตามจริงมากกว่าราคาตามไซส์ป่ะ"
"หรือหนังสือแช่ในแก้ว"
"หรือใช้ให้มันเลือกผลลัพธ์แทนเรา แต่นักอ่านไม่ต้องเห็น 555"

ผมพิมพ์ไปว่า "let do 3 idea"

AI ตีความว่า "ไอเดียที่ 3" และบอกออกมาตรง ๆ ว่ามันเข้าใจแบบนี้ ผมเลยแก้ได้ใน 12 นาที (ผมหมายถึงทั้ง 3 ไอเดีย ผมพิมพ์กำกวมเองครับ)

ผลคือหนังสือจริงจากชั้นร้านร่วงลงไปแช่ในแก้ว หันปกเข้ากล้อง ราคาเป็นราคาจริงของเล่ม กดแล้วไปหน้าสินค้า

ผ่านไปครึ่งชั่วโมง ผมอยาก pivot เป็นแบบ Blind Date with a Book

ประโยคแรกที่ AI ตอบคือ "ปัญหาใหญ่สุดคือหน้า Railway ตอนนี้โชว์หนังสือให้เห็นอยู่" แปลว่าฟีเจอร์ที่เพิ่งทำเสร็จไปคือสิ่งที่ต้องซ่อน 🙃

━━━━━━━━━━

🔁 Day 3: สร้างร้านทั้งร้าน แล้วโยนทิ้ง

เกือบเก้าโมงเช้า เจ้าของร้านส่ง spec ใหม่มา: โอนเงินแล้วแนบสลิป ส่งอีเมลยืนยันให้ทั้งลูกค้าและร้าน
"ไม่ต้องใช้ wix pay หรือถ้า ai มันเชื่อม stripe ได้ เดี๋ยวส่งให้"

ผมเติมเองอีกข้อว่า ไม่เอา Wix เลยด้วย

AI ถาม 4 ข้อก่อนลงมือ เพราะงานนี้เปลี่ยนเว็บ static ให้กลายเป็น server ที่รับเงิน ผมตอบตอนบ่าย จากนั้นมันใช้เวลาแค่ราว 12 นาที:
• Node server 293 บรรทัด ไม่พึ่ง dependency สักตัว
• ราคาคิดจาก catalog ฝั่ง server ไม่เชื่อ browser
• สลิปไม่เกิน 5 MB เช็กชนิดไฟล์จาก bytes จริง
• honeypot + จำกัด 6 ออเดอร์ต่อ 10 นาทีต่อ IP
• ไม่มี database ใช้อีเมลของร้านเป็นบันทึกออเดอร์

อีก 6 นาทีต่อมา Stripe Checkout (บัตร + PromptPay) ก็มา ไม่ใช้ SDK ตรวจลายเซ็น webhook เอง ทดสอบกับ Stripe ปลอมในเครื่อง ผ่าน 14/14

(ใช่ครับ ปลอมอีกแล้ว แต่สุดท้ายก็ไม่ได้ใช้จริงอยู่ดี)

บ่ายสี่โมง ผมพิมพ์ไปว่า
"sorry i change it alot but i think the final v should connect to wix because it can connect to existing stock version and stuff"

AI ตอบว่า "No need to apologise" แล้วเห็นด้วย สต็อก ออเดอร์ และการจ่ายเงินอยู่ใน Wix อยู่แล้ว

🕵️ แล้วก็เจอเรื่องที่หน้าชาที่สุดของโปรเจกต์

Claude in Chrome ใช้ใน Arc ไม่ได้ ผมเลยต่อ MCP ทางการของ Wix ให้มันอ่านเว็บร้านแทน มันเข้าไปสำรวจแบบอ่านอย่างเดียว แล้วรายงานกลับมาว่า

"booktail ไม่ได้อยู่บนหน้านี้ embed ที่เตรียมไว้ไม่เคยถูกติดตั้งเลย"

งาน embed, ติ๊กฟอร์ม, Wix Payments ตลอดสองวัน ไม่เคยไปถึงลูกค้าสักคน 🫠 ถ้าไม่สำรวจก่อนลงมือ ผมคงสร้างทับของที่ไม่มีอยู่จริงไปอีกนาน

ผมตัดสินใจสองข้อ:
• ไม่แตะระบบจ่ายเงินของเจ้าของร้านเลย ส่งลูกค้าไปตะกร้าปกติของ Wix
• ทดสอบบนหน้าทดสอบก่อน

แล้วร้านบน Railway ก็โดน revert ทั้งก้อน โค้ดร้าน 807 บรรทัดหายไปในคำสั่งเดียว อายุรวมราว 2 ชั่วโมง 20 นาที ที่ทิ้งได้ฟรีเพราะยังไม่เคย push

(คำสั่งเดียวกันนั้นดึงโค้ด Wix เก่า 3,741 บรรทัดกลับมาด้วย ซึ่งอยู่ได้แค่ราว 10 นาทีก่อนโดนลบอีกรอบ)

👐 ช่วงนี้ผมเป็น "มือ" ให้ AI

เพราะมันกดใน Wix Editor ไม่ได้ มันดูจาก screenshot แล้วบอกผมทีละขั้น:

1. เปิด Dev Mode
2. ตั้งชื่อ module ใหม่ (ไม่ให้เป็น "new-module")
3. ตั้ง ID ให้กล่อง embed
4. กด publish แล้วพัง

แต่ไม่ใช่เพราะโค้ดเรา หน้าเดิมมีโค้ดเก่าค้างอยู่ ผมพิมพ์ไปว่า "i just click pubblish with error" แล้ว Wix ก็ยอม publish ให้

ทดสอบบนเว็บจริงครั้งแรก หนังสือ "ในกระจกหม่นมัว" ราคาลดเหลือ ฿180 ลงตะกร้าร้านได้จริง (หยุดที่ตะกร้า ไม่ได้สั่งจริง)

แต่ตอนเพิ่งตื่น (cold start) backend ของ Wix ตอบช้ากว่า 6 วินาทีที่โค้ดรอไว้ เลยขยายเป็น 15 วินาที แล้วอีกราวชั่วโมงต่อมาก็เพิ่ม ping ปลุก backend ตั้งแต่โหลดหน้า

📱 วิดีโอ 7 วินาทีจากมือถือเจ้าของร้าน

วิดีโอยาว 7.27 วินาที AI ตัดเป็นเฟรมมาไล่ดู แล้วไปลองซ้ำในเครื่องจนเจอว่า
• หนังสือเปลี่ยนเล่มต่อหน้าลูกค้า (เล่ม ฿323 กลายเป็นเล่ม ฿112 พอสต็อกตอบกลับ)
• บนมือถือ ปุ่ม SERVE หายไปหลังดึงแผงขึ้น

ส่วนคำว่า "แถบมันห่าง" AI ตีความว่าหมายถึงรอนาน ผมส่งรูปกลับไปว่า "this one is visual gap"

แล้วมันกำลังจะไปทดสอบบนหน้า Wix จำลองในเครื่อง ผมเลยเบรกไว้:
"why use fake page you can just go in here … fake page is like you testing with your own answer"

ประโยคนี้กลายเป็นกฎถาวรของโปรเจกต์ไปแล้ว

พอไปดูบนหน้าจริงขนาดมือถือ ใช้ 2 นาทีก็เจอ: การ์ดผลลัพธ์กิน 413 จาก 697px ของกรอบ ระหว่างเสิร์ฟเลยมีที่ว่างโล่ง ๆ ราว 400px ข้างล่าง แก้วเล็กไปหลบอยู่หลังปุ่ม ••• ลอยของ Wix

ลูกค้าไม่ต้องซื้อเล่มที่ระบบเลือก แต่ซื้อ "ขนาดแก้ว" ราคาตายตัว แล้วร้านเลือกเล่มให้
• การ์ดโชว์ปก 3 เล่มใต้หัวข้อ "เล่มที่คุณอาจจะได้"
• สุ่มจาก 30 เล่มที่ตรงสูตรที่สุดและมีของจริง ออกแบบให้ไม่ซ้ำในการเข้าหนึ่งครั้ง (ลองแล้ว 4 รอบ 12 ปก ไม่ซ้ำเลย)
• สูตรทั้งหมดแนบไปกับออเดอร์ให้ Booktender

🛑 ตรงนี้มีจังหวะ guardrail ที่ผมชอบ

AI จะสร้างสินค้า size ในร้านจริงผ่าน connector แต่ระบบ permission ของ Claude Code กันไว้ เพราะเป็นการเขียนข้อมูลลงร้านจริงที่ผมยังไม่ได้อนุมัติ สุดท้ายเจ้าของร้านสร้างสินค้าเองกับมือ

(ระบบเดียวกันนี้ขยันจนบล็อกการ grep ไฟล์ index.html ธรรมดา ๆ ว่าเป็น "real-world transaction" ด้วย 555)

📜 หัวค่ำ เจ้าของร้านส่งเมนูใหม่ทั้งชุดมา

เป็น 7 ขั้น มี TYPE (Fiction / Non-fiction) แยก BASE กับ INGREDIENTS คนละชุด มี STRENGTH ตั้งแต่ "Light อ่านง่าย สบาย ๆ" ไปจนถึง "Extra Strong ขอแบบอ่านแล้วโลกไม่เหมือนเดิม"

ไอเดียเดิมก็กลับมาด้วย "shake เสร็จปุ๊บ โชว์ลิสต์หนังสือสามเล่มที่คุณอาจจะได้อ่าน"

ข้อความแรกที่ส่งมาตัดหายไปบางส่วน AI เลยถามกลับ 3 ข้อ

ผมสะกิดไปทีหนึ่ง "why dont you make the change for me eh…" มันเปลี่ยนไปตั้งสมมติฐานเองสองข้อแล้วลงมือ แต่ 10 วินาทีต่อมา ผมยังหัวร้อนพิมพ์ตามไปอีกว่า "just do the change why f***ing yap" 🙈

9 นาทีหลังจากนั้น เมนูใหม่ ฟอร์มแยกสาย และ catalog ที่ติด tag ใหม่ 3,522 เล่มก็ commit เรียบร้อย พร้อมสมมติฐานเขียนไว้ใน commit

ตัวเลขตอนติด tag ใหม่บอกอะไรเยอะ
• "Literary" ตรงกับหนังสือ 923 เล่ม
• "มิตรภาพ" ได้ 3 เล่ม
• "Bittersweet" ได้เล่มเดียว
• และมี 4 ตัวเลือกที่ไม่ตรงกับเล่มไหนเลย (ไม่นับ Surprise Me ที่ตั้งใจให้เป็นไพ่ป่าอยู่แล้ว)

คีย์เวิร์ดไปได้แค่นี้ ที่เหลือต้องเป็นคน ซึ่งก็คือ Booktender

🔥 ทดสอบรอบถัดมาเจอเซอร์ไพรส์: หน้าทดสอบ redirect ไปหน้าจริงแล้ว

booktail อยู่บนหน้าที่ลูกค้าเข้าจริงแล้ว (ใครย้ายผมก็ยังไม่รู้ AI ถามว่า "Did your friend move it there?" ไม่มีใครตอบ 555) แต่ปุ่มสั่งขึ้น "ใส่ตะกร้าไม่สำเร็จ"

รอบนี้ไม่มี "ลองใหม่อีกทีนะ" เลย ทุกครั้ง AI ไปดัก network call ของหน้าจริงมาดูก่อน:

1. หน้ายังเรียกฟังก์ชันเก่าอยู่ แปลว่าโค้ดใหม่ยังไม่ได้ publish
2. ผมพิมพ์คำสั่ง copy ไฟล์ แต่ดันมีจุดติดท้ายชื่อไฟล์ไปด้วย 😂 เลยยังเป็นโค้ดเก่า
3. ครั้งที่สามเรียกฟังก์ชันใหม่แล้วแต่ยัง error พออ่านข้อมูลร้านถึงเจอว่า สินค้าขนาด S/M/L ถูกสร้างโดยไม่มีรหัสสินค้า (SKU) แต่โค้ดหาด้วย SKU เลยเปลี่ยนไปหาจากชื่อใน URL ของสินค้าแทน แก้ไฟล์เดียว

สองทุ่มครึ่ง แก้ว M ฿399 ลงตะกร้าร้านได้จริง พร้อมสูตรใน note ของออเดอร์

ช่วงที่เพิ่งย้ายขึ้นหน้าจริง ปุ่มสั่งยังใช้ไม่ได้อยู่พักหนึ่ง ต้นเหตุสุดท้ายคือช่องที่ว่างอยู่ในข้อมูลสินค้า ไม่ใช่โค้ด

งานสุดท้ายห้าทุ่มกว่า เจ้าของร้านขอให้ปุ่มตัวเลือกเล็กลง ได้แถวละ 2-3 อัน จาก 44px เหลือ 34px ซึ่งก็คือกลับไปที่ 34px ที่ reviewer เคยติไว้วันแรก 😅 รสนิยมเจ้าของร้านชนะอีกแล้ว และลดช่องว่างเหนือหูจับของแผงจาก 44px เหลือ 12px ตรวจบนเว็บจริงขนาด iPhone 13 จบ

━━━━━━━━━━

🧭 6 วิธีสั่งซื้อ ใน 59 ชั่วโมง

ย้อนดู git แล้ว ส่วนที่ยากที่สุดไม่ใช่ 3D แต่คือการหาว่าร้านอยากขายแบบไหน นับจาก commit แรกถึง commit สุดท้ายราว 59 ชั่วโมง วิธีเปลี่ยนสูตรเป็นออเดอร์ถูกทำใหม่ 6 รอบ

1. deep link ไปฟอร์ม Wix + script ติ๊กให้
2. ส่งข้อความจาก embed ไปติ๊กฟอร์มบนหน้าจริง
3. Wix Payments อยู่ในแอป
4. Railway เป็นร้านเอง โอนเงิน + สลิป + Stripe ทำเสร็จแล้ว revert
5. หนังสือที่บาร์เลือกลงตะกร้า Wix ตามสต็อกและราคาจริง
6. ซื้อ size ราคาตายตัว ร้านเลือกเล่ม ← ที่ใช้อยู่ตอนนี้

ซึ่งถ้าย้อนไปอ่านย่อหน้าแรก ข้อ 6 คือวิธีที่ร้านขายอยู่แล้วตั้งแต่ต้น 6 รอบ เพื่อวนกลับมาจุดเริ่ม 🙃

โค้ดฝั่งเชื่อม Wix ช่วงพีคมีถึง 3,562 บรรทัด (ส่วนใหญ่เป็นสำเนาทั้งแอปที่ generate ไว้แปะ) ตอนนี้เหลือโค้ดแค่ 160 บรรทัด (relay 38 + page code 51 + backend 71) กับ README อีก 67

━━━━━━━━━━

📝 สิ่งที่ได้เรียนรู้

1. ทดสอบบนเว็บจริง
   "fake page is like you testing with your own answer" หน้าเทสต์ปลอมจะตอบตามสมมติฐานของเราเสมอ บั๊กใหญ่ใน Day 3 (cold start, ช่องว่างบนมือถือ, SKU ว่าง) โผล่บนหน้าจริงทั้งนั้น

2. ให้ร้านเป็นคนเลือกหนังสือ
   ผมพยายามให้อัลกอริทึมเลือกเล่มเดียวที่ "ถูกต้อง" อยู่สองวัน คำตอบที่ดีที่สุดมาจากเจ้าของร้าน คือให้การสุ่มเป็นส่วนที่สนุก แล้วให้คนเลือกเล่มจริง ความเป็นร้านหนังสืออิสระก็ยังอยู่ตรงนั้น

3. ทำให้ถอยได้ง่าย สำคัญกว่าทำให้เป๊ะตั้งแต่แรก
   ร้านค้าบน Railway เขียนดี เทสต์ผ่าน แต่ไม่ใช่สิ่งที่ธุรกิจต้องการ ที่โยนทิ้งได้ในคำสั่งเดียวเพราะยังไม่ push และไม่มีใครเริ่มใช้

4. หาหลักฐานก่อนสั่งลองใหม่
   ทุกครั้งที่ "ยังพังอยู่" ไปดูก่อนว่าหน้าจริงส่งอะไรออกไป จะเร็วกว่าเดา

5. พูดสิ่งที่ตัวเองเข้าใจออกมาดัง ๆ
   "ผมเข้าใจว่า 3 idea คือไอเดียที่สาม" ประโยคเดียวทำให้แก้ได้ใน 12 นาที ไม่ต้องเสียไปทั้งวัน

6. ลบของเก่าทิ้งทันทีที่มีของใหม่มาแทน
   มาร์ตินี่, prototype อีก 3 แบบ, ร้านบน Railway ไม่มีอะไรถูกซ่อนไว้ "เผื่อใช้" อยากได้คืนก็อยู่ใน git history

━━━━━━━━━━

🤝 ทำงานกับ AI จริง ๆ เป็นยังไง

ผมเป็นคนกำหนดทิศ AI ลงมือเขียนและเทสต์ การตัดสินใจเลี้ยวทุกครั้งเป็นของคน (ผมหรือเจ้าของร้าน) แต่ข้อมูลที่ทำให้ต้องเลี้ยว AI ขุดมาให้เยอะมาก

• โมเดล: 4 commits แรก (prototype, แก้ว, เชคเกอร์) ทำบน Fable 5.1 ตั้งแต่งานสีคืนวันที่ 3 เป็นต้นมา ทั้งหมดเป็น Opus 5.5

• ใช้ AI ตรวจงาน AI: reviewer ที่ถูกสั่งว่า "อย่าเชื่อรายงาน" จับบั๊กจริงได้หลายตัวก่อนขึ้นจริงใน 2 รอบแรก (แต่บั๊กใหญ่ใน Day 3 ก็ยังหลุดไปเจอบนหน้าจริงอยู่ดี)

• มันหยุดถามก่อนเสมอเมื่อเรื่องแตะเงินหรือของจริงในร้าน วันที่สองทั้งวันถามผมเป็นทางการแค่ 2 ครั้ง: เลือกทางจ่ายเงิน กับจะรวมไอเดียเจ้าของร้านยังไง

• มีราวกั้นจริง: มันสร้างสินค้าในร้านค้าจริงเองไม่ได้ เพราะ permission ของ Claude Code กันไว้ ส่วน push มันไม่ push เอง (กติกาที่ผมตั้งไว้)

• มันผิดได้ อย่าง "แถบมันห่าง" ที่อ่านเป็นรอนาน แต่หลายครั้งต้นเหตุคือผมเอง "3 idea" ผมพิมพ์กำกวมเอง มาร์ตินี่ก็ทำตามคำเจ้าของร้านเป๊ะ ๆ คนที่เปลี่ยนเป็นเชคเกอร์คือผม และผมเปลี่ยนใจบ่อยจนต้องขอโทษ มันตอบว่า "No need to apologise"

• บางทีผมก็เป็นแค่มือ ในที่ที่ AI กดเองไม่ได้ อย่าง Wix Editor ผมคือคนที่คลิกตาม screenshot

• สารภาพ: โพสต์นี้ก็ทำด้วย agent workflow ให้ไล่อ่าน git กับ log ทีละวันแล้วเช็กข้อเท็จจริงกับ commit อีกรอบ 🙃

━━━━━━━━━━

🔭 ต่อจากนี้

ยังมีสิ่งที่โค้ดแก้ไม่ได้
• ปุ่ม ••• ลอยของ Wix ที่บังแผงบนมือถือ (เจ้าของร้านต้องปิดเองในตั้งค่า)
• Cart API ที่ใช้อยู่ Wix จะถอดออกวันที่ 1 ก.พ. 2027

ตอนนี้ผมกำลังลองดู Wix Headless คือให้ Wix เป็น backend (สินค้า สต็อก ตะกร้า การจ่ายเงิน) แล้ว frontend เป็นโค้ดของเราเอง

ไอเดียที่น่าจะเริ่มก่อนคือทำ headless เฉพาะหน้า Book Bar เพื่อตัดชั้น iframe + relay ทิ้ง ส่วนทั้งเว็บยังให้เจ้าของร้านลากวางแก้เองได้เหมือนเดิม

เช้าวันถัดมาผมลองทำ proof of concept หน้าร้านแบบ headless ไว้ในอีกโปรเจกต์แล้ว แต่ยังเป็นการทดลอง ยังไม่ได้ตัดสินใจอะไร

━━━━━━━━━━

ถ้าชอบหนังสือ ชอบค็อกเทล หรือแค่อยากรู้ว่าวันนี้ตัวเองควรอ่านอะไร ลองไปเขย่าแก้วของตัวเองที่
👉 paperyard.co/bookbar

แล้วมาเล่าให้ฟังได้ว่าได้สูตรอะไร

(shake แรกบน production คือ AI เขย่าทดสอบตอน deploy แรก เมนูยังเป็นแบบเก่า ออกมาเป็น Fantasy · ชวนคิด · ปรัชญา + วิทยาศาสตร์/เทคโนโลยี · เร็ว วางไม่ลง · ทำลายจิตใจได้เลย 😇)

#booktail #PaperYard #ClaudeCode #buildinpublic #devไทย