แผนภาพที่ CI เช็กได้
ร้านขายคอร์สออนไลน์ร้านเดิม มีแผนภาพอยู่แล้วสามรูป รูปแรกบอกว่าส่วนไหนเรียกใช้ส่วนไหนได้ รูปที่สองบอกลำดับตอนลูกค้ากดจ่าย รูปที่สามบอกว่าออเดอร์เปลี่ยนสถานะไปทางไหนได้ ฝั่งซ้ายเก็บแผนภาพเป็นไฟล์ข้อความใน repo แล้วให้ CI อ่าน ฝั่งขวาเก็บเป็นรูปใน Notion หรือใน README หรือไม่มีรูปเลย
วาดรูปไม่ใช่งานยากแล้ว skill อย่าง show-me, visual-explainer หรือ anatomy วาดให้ได้ในนาทีเดียว แต่รูปที่สวยไม่กันอะไร AI ไม่เปิด Notion และไม่ดูรูป มันอ่านโค้ด แล้วเขียนตามโค้ดข้าง ๆ แผนภาพที่ไม่มีอะไรเช็ก จะผิดไปจากโค้ดทีละ PR โดยไม่มีใครรู้ แผนภาพที่ CI อ่าน คือสัญญาที่ AI ต้องผ่านก่อน merge กดถัดไปแล้วนับว่าฝั่งไหนโดนจับก่อน merge และฝั่งไหนพังหลังปล่อยขึ้นระบบ บทจะถูกนับว่าเรียนจบเมื่อคุณไปถึงขั้นสุดท้ายของรูป
แผนภาพแบบนี้วาดได้ในนาทีเดียวด้วย show-me หรือ visual-explainer กระดานนี้ไม่สอนวาด แต่สอนให้รูปกลายเป็นกฎที่ CI รัน ร้านคอร์สออนไลน์มีแผนภาพสถาปัตยกรรมหนึ่งรูป บอกว่ากฎธุรกิจไม่เรียกใครข้างนอก บอทเรียกได้แค่กฎธุรกิจ และมีแค่ชั้นเชื่อมต่อที่แตะฐานข้อมูล สัปดาห์นี้คุณส่งงานให้ AI สามชิ้น เช็กสมาชิกหมดอายุ ให้บอทตอบราคา และย้ายฐานข้อมูลไป Drizzle
ให้ AI เพิ่มเช็กสมาชิกหมดอายุ แล้วโค้ดค่อย ๆ หลุดจากรูปใน Notion
ลูกศร = ไฟล์ไหนพึ่งไฟล์ไหน · เขียว ถูกทิศ · แดง ชี้ผิดทาง · แตะกล่องเพื่อหาไฟล์บนกระดาน
กล่อง = ไฟล์หนึ่งไฟล์ ที่ AI ต้องเปิดเมื่อแก้เรื่องในนั้นขั้นตอนชิ้น = สิ่งที่โค้ดทำ หนึ่งขั้น= ชิ้นที่ลากไปไฟล์ใหม่ได้ ในขั้นสุดท้าย
บนมือถือ: แตะที่กระดานเพื่อไปขั้นถัดไป ขั้นสุดท้ายแตะชิ้นที่ลากได้ แล้วแตะกล่องที่มันควรอยู่
ซ้าย แผนภาพในโค้ดมีสามเส้น และไฟล์กฎที่ CI รันมีกฎสามข้อตรงกัน ขวา มีรูปเดียวกันใน Notion ส่วนโค้ดสองฝั่งเหมือนกันทุกไฟล์
ซ้าย รอบแรก AI ให้กฎราคาต่อฐานข้อมูลเอง กฎ CI ไม่ให้ merge รอบสองมันใช้วันหมดอายุที่ส่งเข้ามาอยู่แล้ว ขวา AI ให้กฎราคาดึงสมาชิกจากฐานข้อมูลตรง ๆ test ผ่าน merge ได้ และใช้งานได้จริง
ซ้าย รอบแรกบอทดึงตัวจัดรูปแบบเงินจากหน้าเว็บ กฎ CI ไม่ให้ merge AI เลยย้ายมันไปชั้นกฎธุรกิจ ให้เว็บกับบอทเรียกที่เดียวกัน ขวา บอทดึงจากหน้าเว็บตรง ๆ test ผ่าน แต่ตัวบอทโหลดไฟล์สไตล์ของหน้าเว็บไม่ได้ บอทเปิดไม่ขึ้น
ซ้าย รูปบอกว่าฐานข้อมูลอยู่ชั้นเชื่อมต่อที่เดียว และ CI ยืนยันทุก PR คุณสั่ง AI แก้แค่ไฟล์นั้น แล้วงานจบในไฟล์เดียว ขวา คุณเปิดรูปใน Notion แล้วสั่งงานแบบเดียวกัน คอมไพล์ไม่ผ่านที่กฎราคา ซึ่งไม่อยู่ในแผน รูปผิดไปแล้วทั้งสามเส้น
แผนภาพที่ไม่มีอะไรเช็ก จะผิดไปจากโค้ดเงียบ ๆ ให้แผนภาพโครงสร้าง (Class Diagram, Package Diagram) อยู่ใน repo แล้วแปลงเป็นกฎที่ CI รัน PR ที่เรียกข้ามเส้นต้องไม่ผ่าน
ถามก่อนรับ diffdiff นี้มีการเรียกใช้ใหม่ที่ข้ามเส้นในแผนภาพไหม และ CI รู้เรื่องเส้นนั้นหรือเปล่า
Package diagrams (Fowler, UML Distilled, 3rd ed. 2003, ch. 7: UML as sketch, blueprint or programming language); enforced as dependency-cruiser forbidden rules (or eslint-plugin-boundaries) in CI
ลำดับการเรียกวาดได้ในนาทีเดียวด้วย show-me หรือ anatomy กระดานนี้สอนให้รูปกลายเป็น test ที่จดลำดับ หน้าจ่ายเงินของร้านใช้เวลา 3 วินาที มีคนขอให้เร็วขึ้น AI เปิดขั้นตอนสั่งซื้อ แล้วเห็นว่าตัดเงินกับให้สิทธิ์เรียนเรียกต่อกัน มันคิดว่าสองขั้นนี้ไม่ได้ใช้ผลของกันและกัน
ให้ AI ทำหน้าจ่ายเงินให้เร็วขึ้น แล้วบัตรที่ถูกปฏิเสธได้คอร์สฟรี
ลูกศร = ไฟล์ไหนพึ่งไฟล์ไหน · เขียว ถูกทิศ · แดง ชี้ผิดทาง · แตะกล่องเพื่อหาไฟล์บนกระดาน
กล่อง = ไฟล์หนึ่งไฟล์ ที่ AI ต้องเปิดเมื่อแก้เรื่องในนั้นขั้นตอนชิ้น = สิ่งที่โค้ดทำ หนึ่งขั้น= ชิ้นที่ลากไปไฟล์ใหม่ได้ ในขั้นสุดท้าย
บนมือถือ: แตะที่กระดานเพื่อไปขั้นถัดไป ขั้นสุดท้ายแตะชิ้นที่ลากได้ แล้วแตะกล่องที่มันควรอยู่
ซ้าย แผนภาพบอกว่าให้สิทธิ์เรียนมาหลังเงินเข้า และอีเมลกับ LINE ล้มได้โดยไม่ทำให้ออเดอร์ล้ม test มีทางที่จ่ายผ่าน ทางที่บัตรถูกปฏิเสธ และทางที่ขั้นหลังจ่ายล้ม ขวา มีรูปใน README กับ test เดิมที่ตัวปลอมสำเร็จทุกตัว
ซ้าย รอบแรก AI ให้ตัดเงินกับให้สิทธิ์ทำพร้อมกัน test ทางที่บัตรถูกปฏิเสธไม่ผ่าน เพราะให้สิทธิ์ทั้งที่บัตรไม่ผ่าน รอบสองมันทำพร้อมกันแค่อีเมลกับ LINE ตามที่แผนภาพบอกว่าทำพร้อมกันได้ ขวา AI ทำแบบรอบแรก test ผ่าน เร็วขึ้น 1.2 วินาที แล้ว merge
ซ้าย เดินตามทางที่ถูกปฏิเสธ ตัดเงินไม่ผ่านแล้วส่งอีเมลแจ้ง ไม่ให้สิทธิ์ ขวา ให้สิทธิ์วิ่งไปพร้อมตัดเงิน ลูกค้าได้คอร์สทั้งที่ไม่ได้จ่าย ไม่มี test ไหนแดง รูปใน README ยังวาดว่าให้สิทธิ์หลังเงินเข้า
ซ้าย AI เพิ่มการแจ้งผู้สอน และต้องเพิ่มเส้นในแผนภาพด้วย test เลยได้ทางที่มันล้มมาเอง รอบแรกมันล้มหลังตัดเงิน ไม่ได้ merge รอบสองห่อแบบเดียวกับอีเมล ขวา บางคอร์สไม่มีอีเมลผู้สอน การแจ้งล้มหลังตัดเงิน หน้าเว็บบอกว่าจ่ายไม่สำเร็จ ลูกค้ากดจ่ายอีกรอบ โดนตัดเงินสองครั้ง
ลำดับการเรียกที่เกี่ยวกับเงิน ต้องเป็น test ไม่ใช่รูป วาดแผนภาพลำดับ (sequence diagram) เป็นไฟล์ข้อความ แล้วให้ test ไล่ทุกทาง รวมทางที่ล้ม
ถามก่อนรับ diffdiff นี้เปลี่ยนลำดับหรือเพิ่มขั้นในการจ่ายเงินไหม ถ้าใช่ แผนภาพกับทางที่ล้มถูกแก้ใน PR เดียวกันหรือเปล่า
Sequence diagrams (Fowler, UML Distilled, 3rd ed. 2003, ch. 4); the diagram's paths checked as a contract test (Fowler, “ContractTest” 2011) with a recording fake
แผนภาพสถานะวาดได้ในนาทีเดียวด้วย visual-explainer กระดานนี้สอนให้รูปกลายเป็นตารางเดียวที่ทุกไฟล์ต้องผ่าน ออเดอร์ของร้านเริ่มที่รอจ่าย แล้วไปเป็นจ่ายแล้วหรือยกเลิก แอดมินขอปุ่มคืนเงินในหลังบ้าน คุณส่งงานให้ AI และมันเปิดโปรเจกต์เพื่อเขียนปุ่มนั้น
เพิ่มปุ่มคืนเงินให้แอดมิน แล้วคนที่ได้เงินคืนกลับมาดูคอร์สได้
ลูกศร = ไฟล์ไหนพึ่งไฟล์ไหน · เขียว ถูกทิศ · แดง ชี้ผิดทาง · แตะกล่องเพื่อหาไฟล์บนกระดาน
กล่อง = ไฟล์หนึ่งไฟล์ ที่ AI ต้องเปิดเมื่อแก้เรื่องในนั้นขั้นตอนชิ้น = สิ่งที่โค้ดทำ หนึ่งขั้น= ชิ้นที่ลากไปไฟล์ใหม่ได้ ในขั้นสุดท้าย
บนมือถือ: แตะที่กระดานเพื่อไปขั้นถัดไป ขั้นสุดท้ายแตะชิ้นที่ลากได้ แล้วแตะกล่องที่มันควรอยู่
ซ้าย แผนภาพสถานะมีสามเส้น ตารางในไฟล์สถานะออเดอร์มีเส้นชุดเดียวกัน ตัวรับสัญญาณและอีกสามไฟล์เปลี่ยนสถานะผ่านทางเดียวกัน ขวา ตารางออเดอร์มีธงสามตัว ตัวรับสัญญาณตั้งธงจ่ายแล้วและล้างธงยกเลิกเอง และหน้าคอร์สของฉันคิดเองจากธงว่าดูได้ไหม
ซ้าย AI เพิ่มปุ่มที่เปลี่ยนสถานะเป็นคืนเงิน เส้น จ่ายแล้ว → คืนเงิน มีในแผนภาพอยู่แล้ว ขวา AI เพิ่มปุ่มที่ตั้งธงคืนเงิน และตั้งธงยกเลิกด้วย เพราะหน้าคอร์สอ่านธงตัวนั้น ลูกค้าได้เงินคืนและดูคอร์สไม่ได้ ใช้ได้
ซ้าย คืนเงินแล้วกับจ่ายสำเร็จ ไม่มีเส้นในแผนภาพ การเปลี่ยนถูกปฏิเสธ ตัวรับสัญญาณจดบันทึกแล้วตอบรับ สถานะยังเป็นคืนเงิน ขวา ตัวรับสัญญาณล้างธงยกเลิกตามที่เคยแก้บั๊กไว้ ลูกค้าได้เงินคืนแล้ว แต่หน้าคอร์สบอกว่าดูได้
ซ้าย AI เพิ่มเส้น จ่ายแล้ว → ถูกดึงเงินคืน ในแผนภาพและในตาราง แล้วให้ตัวรับสัญญาณส่งเหตุการณ์นี้ รอบแรกคอมไพล์ไม่ผ่าน เพราะ ดูคอร์สได้ไหม ยังไม่รู้จักสถานะใหม่ รอบสองเพิ่มกรณีแล้ว merge ขวา AI เพิ่มธงใหม่ในตารางและตัวรับสัญญาณ แต่ไม่มีอะไรพาไปเปิดหน้าคอร์สของฉัน คนที่ดึงเงินคืนแล้วยังดูคอร์สได้
สถานะที่เปลี่ยนได้หลายทาง ให้เก็บเป็นค่าเดียว กับตารางเส้นที่อนุญาตชุดเดียว วาดตารางนั้นเป็นแผนภาพสถานะ (state diagram) แล้วให้ test ลองทุกคู่ คู่ที่ไม่มีเส้นต้องถูกปฏิเสธ
ถามก่อนรับ diffdiff นี้ตั้งสถานะตรง ๆ หรือผ่านทางเดียวที่เปลี่ยนสถานะได้ และเส้นที่มันใช้ มีอยู่ในแผนภาพหรือเปล่า
State machine diagrams (Fowler, UML Distilled, 3rd ed. 2003, ch. 10; Harel, “Statecharts” 1987); make illegal states unrepresentable (Minsky 2011) with an exhaustive check (assertNever)สามแผนภาพ สามสัญญา
แผนภาพไม่ได้มีไว้ประดับเอกสาร แต่ละรูปพูดเรื่องที่เช็กได้ แผนภาพโครงสร้างบอกว่าส่วนไหนเรียกใช้ส่วนไหนได้ เลยกลายเป็นกฎที่ CI รัน (1) แผนภาพลำดับบอกลำดับและทางที่ล้ม เลยกลายเป็น test หนึ่งตัวต่อหนึ่งทาง (2) แผนภาพสถานะบอกว่าสถานะไหนไปไหนได้ เลยกลายเป็นตารางเดียวที่ทุกไฟล์ต้องผ่าน กับ test ที่ลองทุกคู่ (3) รูปยังให้คนอ่านได้เหมือนเดิม แค่ตอนนี้มีอีกตัวที่อ่านมัน คือ CI แก้โค้ดแล้วไม่ตรงกับรูป PR ไม่ผ่าน จะเปลี่ยนรูป คนรีวิวเห็นมันใน diff
อยากรู้ตอนมีกระดานใหม่
ทุกหลักสูตรตอนนี้อ่านฟรี ทิ้งอีเมลไว้ แล้วจะส่งให้เฉพาะตอนมีหลักสูตรหรือกระดานใหม่ ไม่มีอย่างอื่น