แชมพูยี่ห้อ A: ขวดใหญ่เบิ้ม ปริมาณ 650 ml ราคา 199 บาท ลดราคา กับข้างๆ กัน แชมพูยี่ห้อ B: ขายคู่แบบแพ็ค 3 ขวด ขวดละ 200 ml รวมเป็น 600 ml ในราคา 185 บาท

วินาทีนั้นสมองคิดสะระตะทันที… “อันไหนคุ้มกว่ากันฟะ?” ต้องคอยหยิบมือถือขึ้นมาเปิดแอปเครื่องคิดเลข หาราคาต่อหน่วยชิ้นแรก และหาต่อหน่วยชิ้นที่สอง ถึงจะรู้ว่า ควรหยิบชิ้นไหนเข้าตะกร้า! ถ้างานหยาบหน่อย ก็ประมาณๆ เอา หยิบมาสักตัว

วันนี้ว่างๆ เลยทำแอป “Goods Cheaper” ขึ้นมาซะเลย

👉 กดเซฟ กดเล่นได้ที่นี่เลย https://cheaper.myifew.com/
👉 ฟรี 100%
👉 ไม่เก็บข้อมูลใดๆ จ้า
👉 ใช้ผ่านมือถือหรือคอมพิวเตอร์ได้สบาย

ใช้งานอย่างไร?

มันเป็น “เครื่องคิดเลขเทียบราคาต่อหน่วย” ใช้งานง่ายๆ

เมื่อคุณเจอสินค้ามี่ต้องเทียบ แต่ขนาด/จำนวน และราคาไม่เท่ากัน แค่หยิบแอปนี้ขึ้นมา

1. กรอกข้อมูลสินค้าชิ้นที่ 1: ใส่ราคา และปริมาณ (เช่น 199 บาท / 650 ml)
2. กรอกข้อมูลสินค้าชิ้นที่ 2: ใส่ราคา และปริมาณ (เช่น 185 บาท / 600 ml)

โป๊ะเป๊ะ! แอปจะแสดงผลทันทีว่าชิ้นไหนมีราคาต่อหน่วย ถูกสุด (เช่น บาทต่อ ml, บาทต่อกิโล, หรือบาทต่อชิ้น) พร้อมไฮไลต์สีชัดเจนว่าคุณควรเลือกอันไหน

เพิ่มให้มันมากกว่านั้นอีกนิด! แอปยังรองรับ:

• การกรอกส่วนลด: ถ้าชิ้นไหนมีโปร “ลด 10%” หรือ “ลด 20 บาท” ก็กรอกลงไปได้เลย แอปจะคิดราคาสุทธิให้ก่อนเทียบ
• หลายภาษา (เพื่อ..): รองรับถึง 13 ภาษา รวมถึงภาษาไทย จีน อังกฤษ และอื่นๆ อีกมากมาย! (เพื่ออออ… (อีกที))
• ระบบ History: แอปจะเก็บประวัติการเปรียบเทียบไว้ให้ดูย้อนหลังได้ด้วยว่าเคยเทียบอะไรไป (เก็บข้อมูลลงในเครื่องคุณ เปลี่ยนเครื่องก็หายนะ)

แอปนี้เหมาะกับใคร?

• 👨‍👩‍👧‍👦 แม่บ้าน/พ่อบ้านจอมประหยัด: ที่ต้องคอยดูแลค่าใช้จ่ายในครอบครัวทุกบาททุกสตางค์
• 🎓 นักเรียน/นักศึกษา: ที่ต้องการบริหารเงินค่าขนมให้คุ้มค่าที่สุด
• 🛍️ ขาช้อปตัวจริง: ที่ไม่อยากตกเป็นเหยื่อของการตลาด “ยิ่งซื้อเยอะยิ่งแพง”
• 🔄 เจ้าของร้านค้า: ที่ต้องซื้อของเข้าร้านและต้องการเทียบราคาส่ง

สรุป: เลิกเดา แล้วใช้ซะ!

อย่าปล่อยให้เงินทองไหลไปกับความไม่รู้ เลิกปวดหัวกับโจทย์เลขในซูเปอร์มาร์เก็ต และให้ Goods Cheaper เป็นคู่หูคู่คิดในการช้อปปิ้งของคุณ (นั่งเขียนบล็อก นานกว่าเขียนแอพอ่ะ ยิ่งใหญ่เลยไหมล่ะ)

ถ้าอยากดูซอร์สโค้ดหรือช่วยพัฒนาต่อ เข้าไปดูที่ GitHub ได้ทันที ➡️
https://github.com/ifew/goods_cheaper

#Cheaper #PricePerUnitCalculator #GoodsCheaper #VibeCoding #ClaudeCode

โค้ดก่อนๆ ผมทดสอบเขียน โดยใช้วิธีการสั่งให้ทำทีละลำดับตาม Prompt ที่ให้ไป เมื่อโปรแกรมเขียนเสร็จ ผมจึงใหห้ AI ทำการสรุปฟีเจอร์ วิธีการติดตั้ง โครงสร้างระบบทั้งหมดออกมาเป็น README.md

แต่ตัวนี้กลับกัน ผมลองอีกวิธีหนึ่ง ที่เพิ่งมารู้ตอนหลังว่าเรียกว่า Context Engineering คือผมเขียน README.md ก่อน เพื่อร่ายยาว Requirement และบอกรายละเอียดต่างๆ จากนั้นค่อยให้ AI มาทำการอ่านไฟล์นั้นและเขียนมาให้ผมตาม Spec ในครั้งเดียว

ซึ่งผลลัพธ์ที่ได้คือทำงานได้ถูกต้องและแสดงผลตามที่ผมต้องการเรียกได้ว่า 95% เลยทีเดียว ส่วนอีก 5% ที่เหลือคือ เรื่องของ UX/UI ที่ผมไม่ได้ใส่รูปตัวอย่างเข้าไปให้มัน กับ พบบั๊กบางส่วนเรื่องของการคำนวณเงิน ภาษี แต่แค่นี้ก็เรียกได้ว่า มันสามารถเป็น Junior Programmer ให้ผมคนหนึ่งได้แล้วนะ ไม่ใช่แค่เพียง Co-Pilot หรือ Code Assistant

โพสต์นี้เลยอยากเขียนสรุปแบ่งปันวิธีทำง่ายๆ ให้ได้เรียนรู้ไปพร้อมๆกันครับ

Requirement Spec และ Structure ที่ผมใช้

ก่อนหน้านี้ผมเองไม่รู้จัก Context Engineering เลยใช้วิธีการที่ตัวเองคิดว่า “น่าจะใช่” และสังเกตจาก CLAUDE.md และ README.md ที่ Claude Code AI มันสร้าง Structure ออกมา ทำให้ผมสรุปได้ประมาณนี้

• ชื่อโปรแกรม: เช่น Kaiten Share Calculator
• Summary หรือ Goal: ว่าโปรแกรมนี้จะทำอะไร เช่น 🍣 Conveyor Belt Sushi/Mala Bill Calculator – Web App for Thailand
• Feature List: โดยผมแตก Bullet ใหญ่ๆ เป็นฟีเจอร์/โมดูล และแต่ละฟีเจอร์ลง Business Condition หรือรายละเอียดฟีเจอร์อีกที เพื่ออธิบายการทำงาน
• Technology Stack: เพื่อบอกว่าใช้เทคโนโลยีอะไรทำ Frontend/Backend/Database/Test หรือ Architecture/Library ที่เราเจาะจงจะใช้ เช่น HTML5/CSS3/TailwindCSS/Responsive/DesignLocalStorage/Modular Design
• User Journey: เพื่อบอกว่าผู้ใช้โปรแกรมเราจะมี journey อย่างไรในการใช้งาน ของแต่ละฟีเจอร์/โมดูล
• JSON Config: ผมออกแบบการเ้ก็บข้อมูลให้ AI ก่อน ผมสะังเกตว่ามันเรียนรู้และนำฟิลด์เหล่านยั้นไปออกแบบและเขียนโปรแกรมให้ได้ด้วย ฉลาดมาก
• UI: อันนี้ผมไม่ได้ใช้สำหรับ Kaiten Share Calculator เพราะจะให้สร้างตาม Journey แต่ผมได้ลองใช้ตอนทำ Google Map Point ซึ่งผมเอารูป UI แบบ SVG File ใส่ไว้ในโฟลเดอร์เพื่อให้ AI เข้าไปอ่าน
• Test Case: ตัวนี้ควรทำก่อนถ้าทำได้ แต่ผมมาทำตามหลัง เพื่อให้ AI เขียน Unit Test ทดสอบระบบให้

เอาตรงๆ ทั้งหมดนี้ผมสั่งเป็นภาษาไทยคร่าวๆ ไปที่ ChatGPT ก่อน เพื่อให้มันเรียบรียงเป็นรายละเอียด ตามหัวข้อที่กล่าวไว้ และแปลเป็นภาษาอังกฤษให้ผมอีกทีหนึ่ง เพื่อเอาไปทำเป็นไฟล์ README.md จากนั้นก็สั่งให้ Claude Code มาอ่านไฟล์นี้และเขียนได้เลย

ต้องบอกว่าจากที่ทดสอบมาแล้วใช้ได้ 95% นั้น หากจะให้ดีเพิ่มขึ้นไปอีก ผมแนะนำให้เพิ่ม Reqreuiement เหล่านี้เข้าไปด้วย จะทำให้เป็นระบบและโดนมากขึ้นกว่าเดิม เช่น

• Database Schema: คล้ายกับ JSON Config ที่ผมกล่าวไปก่อนหน้า ก็เพื่อระบุโครงสร้างการเก็บข้อมูล และความหมายของแต่ละ Field/Table
• API Spec: เพื่อระบุเลยว่าต้องการอะไรบ้าง มี Input/Output และทำงานอย่างไรเป็น Summary
• Project File Structure: เพื่อบอกโครงสร้างการเก็บไฟล์ต่างๆ AI มันก็จะทำให้ตามนั้น

แถม

ทริกเล็กๆของผม ถ้าอยากรู้ว่า Claude Code มันเข้าใจที่เราสั่งไหม ลองรันคำสั่ง

# claude /init

ตัว Claude AI จะสรุปข้อมูลที่มันพบเจอในโฟลเดอร์โปรเจ็คเราทั้งหมด เพื่อไปสร้างไฟล์ CLAUDE.md เราก็ไปอ่านที่มันสรุปในนั้นได้เลย ว่าเข้าใจถูกหรือเปล่า

และถ้ามีการอัพเดทใดๆก็ควรใน Requirement เรา ก็ควรสั่งให้มันอัพเดทใน CLAUDE.md ด้วยนะ

ตัวอย่าง Requirement spec ที่เขียนไว้ใน README.md

• https://github.com/ifew/kaiten-share-calculator เขียน spec ก่อน และให้ AI ทำโค้ด
• https://github.com/ifew/google-map-point เขียนโค้ดก่อน และให้ AI ทำ spec

ครั้งหน้าจะลองทำระบบที่ใหญ่ขึ้น และใช้ MCP กับ Task Master มาแตกงานเป็น Task ย่อยๆ เป็นระบบอะไรนั้น ไว้มีเวลาเดี๋ยวเอามาให้เล่นกันครับ

🍣 Kaiten Share Calculator — แอพช่วยคำนวณบิลซูชิสายพาน!

เวลายกแก๊งไปกิน ซูชิสายพาน หรือ หม่าล่า แล้วต้องมานั่งจำว่าใครหยิบจานสีอะไรบ้าง แต่ละสีราคาเท่าไหร่ แถมยังต้องคำนวณ service charge กับ VAT อีก คนนี้กินน้อย คนนี้กินเยอะ ต้องกลับมานั่งแตกบิลเองทุกที 🤣

หมดปัญหาแบบนั้นได้เลย เพราะนี่คือ Kaiten Share Calculator แอพเล็กๆ ที่จะคิดให้ เพียงเลือกชื่อร้าน เช่น Sushiro, Katsu Midori กดจำนวนคน กดบันทึกจำนวนจานตามสีของแต่ละคน ระบบจะช่วยรวมราคา คำนวณค่าบริการและภาษีให้ครบจบ พร้อมแยกบิลตามจำนวนจานที่กินจริงแบบแฟร์ๆ

👉 กดเซฟ กดเล่นได้ที่นี่เลย https://kaiten.myifew.com
👉 ฟรี 100%
👉 ไม่เก็บข้อมูลใดๆ จ้า
👉 ใช้ผ่านมือถือหรือคอมพิวเตอร์ได้สบาย

ใครที่เป็นสายกินบุฟเฟต์, สายซูชิสายพาน, หรือไปหารกันกับแก๊งเพื่อน 3-4 คนบ่อยๆ ต้องลอง!

ถ้าอยากดูซอร์สโค้ดหรือช่วยพัฒนาต่อ เข้าไปดูที่ GitHub ได้ทันที ➡️
github.com/ifew/kaiten-share-calculator

#VibeCoding #ClaudeCode #sushi #kaitensushi #Sushiro #katsumidorisushi #Yijia #kaiten

ไม่ได้อวยที่เขียนแอพง่ายได้ แต่อวยเพราะ มันสามารถเข้าใจความต้องการใน context ที่เรากำลังทำงานอยู่ ตั้งแต่ ตอนไปเขียนโค้ด ก็ขึ้น auto complete ในสิ่งที่เกี่ยวข้องให้ เช่น อยากเติมประเภทอสังหาฯ ก็ขึ้นมาเลย ทั้งบ้าน คอนโด ฯลฯ, หรือ generate code/data ก็สร้างในส่วนที่เกี่ยวข้องให้ เช่น บอกขอ sample ข้อมูลอสังหาย่านสุขุมวิท มันก็ไปดึงจากไหนไม่รู้ที่เป็นของจริงมาเลย (lat/long เพี้ยนนิด แต่ก็ area ถูก)

และเวลาผมสั่ง ผมเขียน requirement เป็นข้อๆ ด้วยภาษาคนปกติ ไม่ได้ลง technical ลึกอะไรเลย เช่น
2. Filter search on the top right
2.1. have 4 boxes as “Location”, “Property Type”, “Building Status”, “Keyword box search”
2.1.1. Click “Location” to call api and get data from data/location.json
2.1.1.1. default value as “Ploenchit”
2.1.1.2. can select only one choice
2.1.2. Click “Properties Type” to call api to get data from data/properties_type.json
2.1.2.1. …

แล้วพอแจ้งมันผิด สั่งให้ fix, ถ้าผิดซ้ำ มันมีบางจังหวะที่มันขอทำ ui test ให้เองด้วย ว่าที่แก้ไปแล้ว แสดงผลถูกหรือยัง โว้ว ดีงาม

นั่งก๊อกแก๊กๆ อยู่ 2 ชั่วโมง (นานตรงรอมันเขียนนี่แหละ) ผลที่ได้ ก็ตามภาพเลย
ติดใจ Claude แล้วสิๆ

demo: https://github.com/ifew/google-map-point/

#Claude #ClaudeCode #VibeCoding

พบว่าสิ่งที่มันเมพ คือ พอมันรู้โค้ดและรู้ว่าเออเรามี Git, Unit Test, GCloud, มันทำงานให้ได้ตั้งแต่ Initial Project ไปจน Coding, Commit Code, Write Test, Testing, Generate Coverage Result, Deploy, Test on Production จบเลย เสมือนมี Dev + Tester + DevOps ในตัว

แล้วพอสั่งแก้ไขโค้ด มันก็ทำ step เดียวกันนี่แหละซ้ำอีกรอบให้โดยที่รู้ว่า เมื่อโค้ดเปลี่ยนแล้ว ตัว Test และ Expect Result ก็ต้องเปลี่ยนไปด้วยอัตโนมัติ โอ้ ดีงาม

ปล. ก่อนหน้าเคยลองทำ Swift App ผ่าน ChatGPT ด้วยการถามตอบๆในแชต แอบงี่เง่า และชอบเจนโค้ดให้ใหม่ ยิ่งสั่งยิ่งเละ จากที่เคยทำงานได้ กลายเป็นพัง ฮ่าๆ

#Claude#ClaudeCode#VibeCoding