Lab Vibe 3 — ตรวจรับงาน Hotwire และสรุป Day 3 ช่วงเช้า

Lab นี้คือวันตรวจรับ ไม่ใช่วันสร้าง

สไลด์หน้า 52 ให้ Lab นี้เป็น "เขียน prompt ให้ AI ทำทั้งบล็อก แล้วตรวจ" · แต่ในเว็บนี้เราเลือกให้คุณทำเองเป็นก่อน — คุณจึงทำครบทั้ง 3 เป้าหมายไปแล้วในบท 131–134 · สิ่งที่เหลือคือส่วนที่สำคัญที่สุดของการทำงานกับ AI: ตรวจรับให้เป็น

Lab นี้มี 5 ขั้น:

ขั้น 1 — ใบสั่งงาน prompts/03-hotwire.md: ทุกบรรทัดมาจากบทไหน

ไฟล์นี้คือใบสั่งงานที่จะส่งให้ AI ทำบล็อก C ทั้งหมดในครั้งเดียว · หน้าตาเหมือน 01-views.md (บท 126) กับ 02-styling.md (บท 129): เป้าหมาย · ข้อกำหนด · ห้าม · เกณฑ์ตรวจรับ — สี่ส่วนของบท 121

ตอนนี้ ls prompts ควรเห็น 3 ไฟล์ (00-context.md · 01-views.md · 02-styling.md) · บท 134 ฝากไฟล์นี้ไว้ให้บทนี้ — สร้างไฟล์ prompts/03-hotwire.md แล้วพิมพ์ตามนี้ (ทั้งไฟล์ — ก็อปมาจากสไลด์หน้า 52 · แก้บรรทัด broadcasts_to หนึ่งจุด และใส่ backtick รอบ <script>):

## เป้าหมาย

1) แก้หัวข้อโพสต์ได้ในหน้าเดิม ไม่ต้องเปลี่ยนหน้า
2) เพิ่ม Comment ได้ และเด้งขึ้นทุกแท็บที่เปิดอยู่
3) ช่องพิมพ์ comment มีตัวนับอักษร

## ข้อกำหนด

- สร้าง model Comment: body:text author_name:string
  post:references (ยังไม่มีระบบล็อกอิน)
- validation + NOT NULL + index ครบคู่
- inline edit ใช้ turbo-frame
  ใช้ dom_id(post) ตั้ง id ทั้งสองฝั่ง
- เพิ่ม comment ตอบด้วย create.turbo_stream.erb
  append รายการ + update ตัวนับ + ล้างฟอร์ม
- real-time ใช้ broadcasts_to :post
  (มันส่งต่อให้ job เองอยู่แล้ว ไม่มี option later:)
- ตัวนับอักษรเป็น Stimulus controller
  ต้องมี disconnect ที่เก็บกวาด listener

## ห้าม

- เขียน addEventListener นอก Stimulus
- ใส่ `<script>` ใน view
- hardcode id ของ turbo-frame เป็น string
- ใช้ after_save (ต้องเป็น after_commit)
- ลืม status: :unprocessable_content ตอน render ใหม่

## เกณฑ์ตรวจรับ

- [ ] กดแก้ไขแล้ว URL ไม่เปลี่ยน และส่วนอื่นไม่ขยับ
- [ ] เปิด 2 แท็บ พิมพ์แท็บหนึ่ง อีกแท็บขึ้นเอง
- [ ] ตัวนับจำนวน comment อัปเดตพร้อมกัน
- [ ] ฟอร์มว่างเองหลัง submit
- [ ] Stimulus controller มี disconnect
- [ ] เปิด /posts/1/edit ตรง ๆ ยังได้หน้าเต็ม
- [ ] console ไม่มี error เรื่อง matching turbo-frame

## = หัวข้อของ Markdown · - [ ] = ช่องติ๊กที่ยังไม่ติ๊ก (ติ๊กแล้วเขียน - [x]) · `<script>` ครอบด้วย backtick ให้ AI อ่านว่าเป็น "ชื่อแท็ก" ไม่ใช่แท็กจริง · ทุกบรรทัดของข้อกำหนดกับข้อห้ามมาจากเรื่องที่คุณเจอมาแล้ว:

ขั้น 2 — ตรวจรับ 7 ข้อของสไลด์หน้า 52 ด้วยของจริง

สไลด์หน้า 52 มีประโยคที่สำคัญที่สุดของ Lab นี้: เกณฑ์ข้อ 2 (สองแท็บ) พิสูจน์ด้วยการรัน ไม่ใช่ด้วยการอ่านโค้ด — ซึ่งเป็นแบบที่ดีที่สุด เพราะ AI โกงไม่ได้ · AI เขียนในคำตอบได้ว่า "ทำครบแล้ว ผ่านทุกข้อ" แต่มันทำให้คอมเมนต์เด้งในหน้าต่างที่สองของคุณด้วยคำพูดไม่ได้

เตรียมโต๊ะตรวจ

1. แท็บ terminal ที่ 1: bin/dev (เปิดร้าน + ตัว build CSS · บท 128)
2. เปิด Chrome สองหน้าต่าง (ไม่ใช่สองแท็บในหน้าต่างเดียว — จะได้เห็นพร้อมกัน) วางซ้าย-ขวา · ทั้งสองเปิด http://localhost:3000/posts/1
3. ในหน้าต่างซ้ายเปิด Console: Mac กด Cmd+Option+J · Windows กด Ctrl+Shift+J · Console คือกระดานแจ้งปัญหาของหน้าเว็บ — JavaScript ที่พังหรือคำเตือนของ Turbo จะขึ้นเป็นตัวแดงที่นี่ (หน้าเว็บเองไม่โชว์อะไรให้เห็นเลย)

ตารางตรวจรับ (ผลจริงที่ผมได้ จาก Chrome ที่สั่งด้วยสคริปต์บนโค้ดสถานะเดียวกับของคุณ)

ระวังเข้าใจผิดในข้อ 1: หลังบันทึกหัวข้อใหม่ แถบทางกลับด้านบน (breadcrumb จากบท 126) และชื่อบนแท็บเบราว์เซอร์ยังเป็นหัวข้อเดิม — ผลจริง: กรอบโชว์ ต้มยำกุ้ง (แก้ในหน้าเดิม) แต่ breadcrumb ยังเป็น ต้มยำกุ้งน้ำข้น

นี่ไม่ใช่บั๊ก · Turbo Frame เปลี่ยนแค่ "ถ้วยใบเดียว" ตามที่ตั้งใจ (บท 131) ส่วนอื่นของโต๊ะไม่มีใครแตะ · รีเฟรชหน้าแล้วทุกจุดตรงกัน · เกณฑ์ "ส่วนอื่นไม่ขยับ" หมายถึงสิ่งนี้เลย

ข้อ 7 กับข้อความ 422: ถ้าคุณลองกดส่งฟอร์มคอมเมนต์ทั้งที่ว่าง Console จะขึ้นบรรทัดนี้ (ผลจริง):

Failed to load resource: the server responded with a status of 422 (Unprocessable Content)

บรรทัดนี้ปกติ — มันแค่รายงานว่า server ตอบ 422 ("ข้อมูลไม่ผ่าน" ที่เราตั้งใจส่งกลับเพื่อโชว์ error ในฟอร์ม · บท 132) · ที่เกณฑ์ข้อ 7 ห้ามคือข้อความที่มีคำว่า turbo-frame (หน้าตาของมันอยู่ในขั้น 3)

ข้อ 5 แบบเห็นกับตา: ใส่ console.log ชั่วคราว

grep บอกได้แค่ว่า "มีคำว่า disconnect ในไฟล์" · อยากเห็นว่ามันถูกเรียกจริง ให้เปิด app/javascript/controllers/character_counter_controller.js แล้วเติม 2 บรรทัดที่มีป้าย // ← เติมชั่วคราว (ที่เหลือคือไฟล์เดิมจากบท 134 ไม่ต้องแตะ):

import { Controller } from "@hotwired/stimulus"

// ตัวนับอักษรของช่องพิมพ์คอมเมนต์ (อยู่ใน comments/_form.html.erb) แสดงเป็น "12 / 1000"
export default class extends Controller {
  static targets = ["input", "output"]

  // ฟอร์มโผล่ (โหลดหน้า หรือ Turbo Stream ใส่ฟอร์มใหม่): เริ่มฟังการพิมพ์
  connect() {
    console.log("ตัวนับ: connect")        // ← เติมชั่วคราว
    this.onInput = this.update.bind(this)
    this.inputTarget.addEventListener("input", this.onInput)
    this.update()
  }

  // ฟอร์มหายไป: ถอด listener ที่ connect ผูกไว้
  disconnect() {
    console.log("ตัวนับ: disconnect")     // ← เติมชั่วคราว
    this.inputTarget.removeEventListener("input", this.onInput)
  }

  update() {
    this.outputTarget.textContent = `${this.inputTarget.value.length} / ${this.inputTarget.maxLength}`
  }
}

console.log(...) = เขียนข้อความลง Console (เหมือน fmt.Println ของ Go แต่ไปขึ้นในเบราว์เซอร์) · ไม่ต้อง restart server — importmap ส่งไฟล์ใหม่ให้เอง (บท 127)

บันทึกไฟล์ รีเฟรชหน้า · ส่งคอมเมนต์หนึ่งครั้ง แล้วกดส่งแบบว่างอีกครั้ง · Console ที่ได้จริง:

// เปิดหน้า
ตัวนับ: connect
// ส่งคอมเมนต์สำเร็จ (Turbo Stream เปลี่ยนฟอร์มเป็นฟอร์มว่าง)
ตัวนับ: disconnect
ตัวนับ: connect
// ส่งแบบว่าง (422 · Turbo Stream เปลี่ยนฟอร์มเป็นฟอร์มที่มี error)
Failed to load resource: the server responded with a status of 422 (Unprocessable Content)
ตัวนับ: disconnect
ตัวนับ: connect

ทุกครั้งที่ Turbo Stream เอาฟอร์มเก่าออก ตัวนับตัวเก่าเก็บกวาด (disconnect) แล้วตัวนับของฟอร์มใหม่ติดตั้ง (connect) เอง — โดยที่เราไม่ได้เขียนโค้ดสั่งเลยสักบรรทัด · ดูเสร็จแล้วคืนไฟล์ด้วย git restore app/javascript (คืนเฉพาะโฟลเดอร์ app/javascript ให้เหมือน commit ล่าสุด)

ข้อ 6 ดูให้ลึกกว่าตา: server ส่งอะไรมาจริง

ข้อนี้ตรวจว่าเราไม่ได้ทำ "หน้า edit ที่ใช้ได้แค่ในกรอบ" · curl (โปรแกรมที่ขอหน้าเว็บแบบไม่มีเบราว์เซอร์) จำลองการเปิดตรง ๆ ได้ (ผลจริง):

$ curl -s localhost:3000/posts/1/edit | grep -E '<title>|<h1|class="navbar'
    <title>แก้ไขบทความ</title>
--><header class="navbar bg-base-100 shadow-sm">
  <h1 class="font-bold text-4xl">แก้ไขบทความ</h1>

ครบทั้ง title · navbar · หัวเรื่อง = หน้าเต็ม (--> หน้าบรรทัด navbar คือปลายคอมเมนต์ที่ Rails แปะบอกว่ามาจาก partial ไหน · มีแค่ใน development) · ทีนี้ดูใน log/development.log เทียบกับตอนกด "แก้ไขหัวข้อ" ในหน้า show (ผลจริง ตัดมาบรรทัดเดียวต่อครั้ง):

# เปิด /posts/1/edit ตรง ๆ
  Rendering posts/edit.html.erb within layouts/application
# กด "แก้ไขหัวข้อ" ในกรอบ (เบราว์เซอร์แนบ header Turbo-Frame: title_post_1 มาด้วย)
  Rendering posts/edit.html+turbo_frame.erb within layouts/turbo_rails/frame

header = ป้ายข้อมูลที่แปะบนหัวใบสั่ง (ผู้ใช้มองไม่เห็น) · URL เดียวกัน แต่ server เลือกไฟล์ต่างกันตามว่าคำขอ "มาจากกรอบ" หรือไม่ — นี่คือ variant ที่ตั้งไว้ในบท 131 (set_turbo_frame_variant) · คนที่ปิด JavaScript หรือเปิดลิงก์ในแท็บใหม่ ยังแก้บทความได้ครบ — แนวคิดนี้ชื่อ progressive enhancement (ของพื้นฐานใช้ได้เสมอ JS แค่ทำให้ดีขึ้น)

ขั้น 3 — ตรวจ 4 อย่างด้วยคำสั่ง (สไลด์หน้า 53) และกับดักในคำสั่งของสไลด์

สไลด์หน้า 53 มีกล่อง "ตรวจ 4 อย่างนี้ก่อน":

1. Console ของเบราว์เซอร์มี error ไหม — ทำแล้วในขั้น 2
2. grep หาแท็ก <script ในโฟลเดอร์ view
3. grep หาคำว่า disconnect ในโฟลเดอร์ JavaScript
4. เปิด 2 แท็บทดสอบของจริง — ทำแล้วในขั้น 2

เหลือข้อ 2 กับ 3 ที่เป็นคำสั่ง · ข้อ 2 (ผลจริง):

$ grep -rn "<script" app/views
$

ทวนจากบท 126: grep = ค้นหาข้อความในไฟล์ · -r ค้นทั้งโฟลเดอร์ · -n บอกเลขบรรทัด · ผลจริงคือไม่มีอะไรขึ้นเลย = ไม่เจอ = ผ่าน (ไม่มีแท็ก <script ซ่อนอยู่ใน view ไหน) · ส่วนข้อ 3 สไลด์เขียนคำสั่งแบบนี้:

$ grep -n "disconnect" app/javascript/**

$ grep -n "disconnect" app/javascript/**
grep: app/javascript/controllers: Is a directory

คำสั่งที่ใช้ได้จริง — เติม -r แล้วให้ชื่อโฟลเดอร์ตรง ๆ (ผลจริง):

$ grep -rn "disconnect" app/javascript
app/javascript/controllers/character_counter_controller.js:15:  disconnect() {

อ่านผล: ชื่อไฟล์:เลขบรรทัด:เนื้อบรรทัด · theme_controller.js กับ hello_controller.js ไม่มี disconnect และไม่ต้องมี เพราะไม่ได้สร้าง listener หรือตัวจับเวลาใน connect (กฎข้อ 10 พูดถึงเฉพาะ controller "ที่สร้างของใน connect")

ใส่บั๊กกลับ ก่อนเชื่อว่า "ไม่เจอ = ผ่าน"

ตัวตรวจที่ไม่เคยจับอะไรได้เลย อาจแปลว่างานดี — หรือแปลว่าตัวตรวจพัง (เหมือนคำสั่ง ** ข้างบน) · ทางเดียวที่จะรู้คือใส่บั๊กให้มันจับดูก่อน:

① เติม 3 บรรทัดนี้ท้าย app/views/posts/show.html.erb ชั่วคราว (แบบที่ AI ชอบเขียน):

<script>
  document.querySelector("#comment_body").addEventListener("input", (e) => console.log("script นับได้", e.target.value.length))
</script>

• <script>…</script> = แท็กที่ใส่ JavaScript ลงในหน้า HTML ตรง ๆ
• document.querySelector("#comment_body") = หา element ตัวแรกในหน้าที่มี id comment_body — ช่องพิมพ์ความคิดเห็น (form_with ตั้ง id นี้ให้เองจากชื่อ model + ชื่อช่อง · บท 124)
• .addEventListener("input", …) = "ทุกครั้งที่มีการพิมพ์ ให้ทำ…" (ผูก listener · บท 134)
• (e) => console.log(…) = ฟังก์ชันสั้นแบบลูกศร (arrow function · บท 65) · e = ข้อมูลของการพิมพ์ครั้งนั้น · e.target.value.length = จำนวนตัวอักษรในช่อง

ไม่ต้องจำโค้ดนี้ — แค่จำหน้าตา "แบบที่ AI ชอบเขียน" ไว้ · บันทึกไฟล์แล้วรัน grep เดิม (ผลจริง):

$ grep -rn "<script" app/views
app/views/posts/show.html.erb:38:<script>

จับได้ ✔ · เลข 38 = บรรทัดที่เพิ่งเติม (ของคุณอาจต่างถ้าไฟล์ยาวไม่เท่า) · ② ลบ 3 บรรทัดนั้นออก แล้วลบเมธอด disconnect() ทั้งก้อนออกจากไฟล์ตัวนับชั่วคราว:

$ grep -rn "disconnect" app/javascript
$

ไม่มีผล = จับได้ว่าหายไป ✔ · คืนของทั้งหมดด้วย git restore app แล้ว git status --short ต้องไม่เห็นไฟล์ใต้ app/ เลย

ที่ AI พลาดประจำในบล็อกนี้ — อาการ · ตรวจยังไง · แก้ยังไง

สไลด์หน้า 53 รวมไว้ 6 ข้อ · ผมใส่บั๊กแต่ละแบบเข้าไปในโค้ดที่ทำงานถูกแล้วทีละข้อ แล้วดูอาการจริงในเบราว์เซอร์ · สังเกตว่าหลายข้อหน้าเว็บไม่โชว์ error อะไรเลย:

อ่านคำสั่งในคอลัมน์ "ตรวจยังไง": \| ใน grep แปลว่า "หรือ" — "render :new\|render :edit" = หาบรรทัดที่มี render :new หรือ render :edit

ข้อความ error ของแถวแรก (ผลจริง · เลข title_post_2 คือบทความที่ผมลอง · ใน Console จะมีคำนำหน้าสั้น ๆ และบรรทัดชื่อไฟล์ turbo.min-….js ตามมาอีกหลายบรรทัด — อ่านแค่ประโยคนี้พอ):

The response (200) did not contain the expected <turbo-frame id="title_post_2"> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.

แปลภาษาคน: "ครัวส่งจานกลับมา แต่ในจานไม่มีถ้วยที่ติดป้าย title_post_2 — พนักงานเลยไม่รู้จะเอาอะไรไปวาง" · นี่คือ "error เรื่อง matching turbo-frame" ที่เกณฑ์ข้อ 7 พูดถึง

และ log ของแถวที่สอง (ผลจริง · ตัดมาสองบรรทัด · ::1 = เครื่องตัวเอง แบบเดียวกับ localhost) — server ตอบ "200 สำเร็จ" ทั้งที่บันทึกไม่ได้:

Started POST "/posts" for ::1 at 2026-11-07 11:00:28 +0700
Completed 200 OK in 12ms (Views: 6.0ms | ActiveRecord: 2.2ms (1 query, 0 cached) | GC: 0.2ms)

ทำไมหน้าไม่เปลี่ยน: Turbo ถือกฎว่า "ส่งฟอร์มสำเร็จ (200) ต้องตามด้วยการพาไปหน้าอื่น (redirect)" · พอได้ 200 พร้อมหน้าฟอร์มเดิมกลับมา มันเลยไม่วาด แล้วบ่นใน Console · พอใส่ 422 ("ข้อมูลไม่ผ่าน") Turbo รู้ว่า "อ๋อ ให้วาดฟอร์มที่มี error" → ผู้ใช้เห็นข้อความ บันทึกไม่ได้ มี 3 จุดที่ต้องแก้ ตามปกติ (ผลจริงตอนมี status)

ขั้น 4 — เติมกฎ 9–12 ลง 00-context.md: คู่มือโตจาก 8 ข้อเป็น 12 ข้อ

ทวนบท 121: prompts/00-context.md คือกฎถาวรของร้าน · และ AGENTS.md (ซึ่ง CLAUDE.md ชี้ไปหา) มีบรรทัด @prompts/00-context.md → Claude Code อ่านกฎทุกข้อเองทุกครั้งที่เปิดในโปรเจกต์นี้ · สไลด์หน้า 53 ให้เติม 4 ข้อจากบล็อก Hotwire

เปิด prompts/00-context.md · หาบรรทัด 8. strong parameters ไม่ใช่ authorization — แยกให้ออก · ใต้บรรทัดว่างที่ต่อจากข้อ 8 พิมพ์ก้อนนี้ แล้วเว้นบรรทัดว่างอีกหนึ่งบรรทัดก่อนหัวข้อ ## รูปแบบการตอบ:

## กฎเพิ่มจากบล็อค Hotwire

9. JS ทั้งหมดอยู่ใน Stimulus controller
   ห้ามมี `<script>` ใน view
10. ทุก controller ที่สร้างของใน connect
    ต้องเก็บกวาดใน disconnect
11. turbo-frame id ใช้ dom_id() ทั้งสองฝั่ง
12. render ใหม่หลัง validation ไม่ผ่าน
    ต้องมี status: :unprocessable_content

บันทึกแล้วตรวจด้วย git diff prompts/00-context.md — ควรได้แบบนี้ (ผลจริง ตัดหัว 4 บรรทัดแรกออก) · บรรทัด @@ … @@ = git บอกว่าแก้ตรงบรรทัดที่เท่าไร · บรรทัดที่ขึ้นต้นด้วย + คือที่คุณเติม · บรรทัดที่ขึ้นต้นด้วยช่องว่างคือของเดิมรอบ ๆ:

@@ -28,6 +28,16 @@
 7. migration ต้องไม่ล็อกตารางที่มีข้อมูลเยอะ — ใช้ expand-contract
 8. strong parameters ไม่ใช่ authorization — แยกให้ออก

+## กฎเพิ่มจากบล็อค Hotwire
+
+9. JS ทั้งหมดอยู่ใน Stimulus controller
+   ห้ามมี `<script>` ใน view
+10. ทุก controller ที่สร้างของใน connect
+    ต้องเก็บกวาดใน disconnect
+11. turbo-frame id ใช้ dom_id() ทั้งสองฝั่ง
+12. render ใหม่หลัง validation ไม่ผ่าน
+    ต้องมี status: :unprocessable_content
+
 ## รูปแบบการตอบ

ถ้าคุณทำภารกิจท้ายบท 126 ไว้ (หัวข้อ "กฎที่ทีมเราเจอเอง" ท้ายไฟล์) ก็ไม่ชนกัน — อันนั้นอยู่ท้ายไฟล์ อันนี้อยู่ต่อจากข้อ 8 · ถ้อยคำตรงกับสไลด์ทุกคำ ต่างแค่ใส่ backtick รอบ <script> ให้เหมือนบรรทัด "ห้ามมี <script> ใน view" ที่มีอยู่แล้วในไฟล์

นับดู: ไฟล์นี้มีกฎ 8 ข้อมาตั้งแต่เช้า (บล็อก A กับ B ของเราไม่ได้เพิ่มกฎลงไฟล์นี้ — บท 126 ให้เติมเป็นภารกิจเสริมแยกหัวข้อ) · ตอนนี้มี 12 ข้อ — ตรงกับที่สไลด์หน้า 54 เขียนว่า "00-context.md ที่โตจาก 8 กฎเป็น 12 กฎ" · ทุกข้อเกิดจากความผิดพลาดที่เคยเกิดจริง ไม่ได้คิดขึ้นลอย ๆ

ขั้น 5 — เก็บเข้าโปรเจกต์

โค้ดแอปของบล็อก C คุณ commit ไปแล้วทีละบท (บท 131–134) · ของใหม่ของบทนี้มีแค่สองไฟล์ใน prompts/ · ดูก่อนว่าจะเก็บอะไร (ผลจริง — ต้องมีแค่สองบรรทัดนี้):

$ git status --short
 M prompts/00-context.md
?? prompts/03-hotwire.md

M = แก้ไฟล์เดิม (เติมกฎ 9–12) · ?? = ไฟล์ใหม่ที่ git ยังไม่รู้จัก · ถ้ามีไฟล์ใต้ app/ โผล่มาด้วย แปลว่ายังมีของทดลองค้างจากขั้น 2–3 (เช่น console.log ที่ลืมลบ) → git diff app ดูก่อน แล้ว git restore app

$ git add .
$ git commit -m "prompts: ใบสั่งงาน Hotwire + กฎ 9–12"
[my-day3 cac01ee] prompts: ใบสั่งงาน Hotwire + กฎ 9–12
 2 files changed, 47 insertions(+)
 create mode 100644 prompts/03-hotwire.md

create mode 100644 = git บอกว่าเป็นไฟล์ใหม่ (เลข 100644 คือ "ไฟล์ธรรมดา" ไม่ต้องสนใจ) · my-day3 = branch ที่สร้างไว้ในบท 120 · เลข cac01ee ของคุณจะต่าง · 47 insertions = 10 บรรทัดใน 00-context + 37 บรรทัดของไฟล์ใหม่ · สไลด์หน้า 53 ให้ commit ทั้งบล็อกเป็นก้อนเดียวด้วยข้อความ "hotwire: inline edit + live comments" — ของเราแบ่งเป็น 5 ก้อนตามบท จึงย้อนดูทีละขั้นได้ (ผลจริง):

$ git log --oneline -6
cac01ee prompts: ใบสั่งงาน Hotwire + กฎ 9–12
ddb4521 Stimulus ตัวนับอักษรช่องคอมเมนต์
184f5c7 hotwire: broadcast คอมเมนต์ทุกแท็บ
16cad7a Comment + ฟอร์มคอมเมนต์ตอบด้วย Turbo Stream
58001e9 แก้หัวข้อบทความในหน้าเดิมด้วย Turbo Frame
faebd6f styling: daisyUI + navbar + ปุ่มสลับธีม

อ่านจากล่างขึ้นบน = ลำดับที่ทำ · บรรทัดล่างสุดคือจบ Lab Vibe 2 (บท 129) · ข้อความ commit ของคุณต้องตรงกับที่แต่ละบทให้พิมพ์ (ถ้าเคย commit ภารกิจเสริมเพิ่ม จะมีบรรทัดแทรกอยู่ — ไม่เป็นไร)

ทางเลือก: ลอง vibe จริง — ให้ AI ทำบล็อก C ใหม่ทั้งหมด แล้วตรวจด้วย checklist ชุดนี้

ทำหลัง commit ข้างบนแล้ว · ไม่บังคับ · นี่คือสิ่งที่สไลด์ตั้งใจให้ทำใน Lab: ยิงใบสั่งงานให้ AI แล้วเราเป็นคนตรวจ · บทนี้ไม่โชว์ว่า AI ตอบอะไร (ของแต่ละคนจะต่างกันทุกครั้ง) — ให้คุณดูเองแล้วตรวจด้วยตาราง "AI พลาดประจำ"

1. git log --oneline -6 → หาเลข commit ของ Lab Vibe 2 (styling: daisyUI + navbar + ปุ่มสลับธีม — บรรทัดใต้ แก้หัวข้อบทความในหน้าเดิมด้วย Turbo Frame) · ในตัวอย่างข้างบนคือ faebd6f (ของคุณจะเป็นเลขอื่น)
2. git switch -c ai-vibe3 <เลข commit นั้น> — สร้าง branch ใหม่จากจุดจบบท 129 แล้วย้ายไปอยู่ (โค้ดใน editor จะไม่มีคอมเมนต์ ไม่มีตัวนับ)
3. git checkout @{-1} -- prompts/ — ก็อปโฟลเดอร์ prompts/ จาก branch ที่เพิ่งจากมา (@{-1} = "branch ก่อนหน้า") · AI จะได้ทั้งใบสั่ง 03-hotwire.md และกฎ 9–12
4. ปิด bin/dev (Ctrl+C) แล้ว bin/rails db:reset แล้วเปิด bin/dev ใหม่ — db:reset ล้างตู้แล้วสร้างใหม่จาก db/schema.rb ของ branch นี้ + seeds (คอมเมนต์ทดลองหายหมด) · ข้ามไม่ได้ เหตุผลในกล่องเตือนข้างล่าง
5. เปิด Claude Code (บท 86) แล้วสั่งประมาณ: "ทำตาม @prompts/03-hotwire.md ทีละเป้าหมาย · เสร็จแต่ละเป้าหมายให้บอกว่าแก้ไฟล์ไหน และบอกวิธีตรวจเกณฑ์ที่เกี่ยวข้อง" (00-context.md ถูกโหลดให้เองผ่าน CLAUDE.md ไม่ต้อง @ ซ้ำ)
6. ตรวจเองครบทั้ง 7 ข้อ + grep ทุกตัว — อย่าเชื่อที่ AI บอกว่าผ่าน · จดว่า AI พลาดข้อไหน
7. กลับบ้าน: git add . && git commit -m "ลอง AI บล็อก C" → git switch my-day3 → ปิด bin/dev แล้ว bin/rails db:reset อีกรอบ (ให้ตู้กลับมีตาราง comments แบบของเรา) แล้วเปิด bin/dev ใหม่

bin/rails aborted!
StandardError: An error has occurred, this and all later migrations canceled: (StandardError)

PG::DuplicateTable: ERROR:  relation "comments" already exists

สรุป Day 3 ช่วงเช้า — เช้านี้ได้อะไรไปบ้าง

สไลด์หน้า 54 สรุปไว้ประโยคเดียว: ตอนเช้าเรามีหน้า scaffold เปล่า ๆ ตอนนี้เรามีเว็บที่ใช้งานได้จริงแล้ว

ตอนนี้ prompts/ มี 4 ไฟล์ (ผลจริง · จำนวนบรรทัดของคุณอาจต่างเล็กน้อยถ้าเติมกฎเองไว้):

$ wc -l prompts/*
      45 prompts/00-context.md
      33 prompts/01-views.md
      30 prompts/02-styling.md
      37 prompts/03-hotwire.md
     145 total

wc -l = นับจำนวนบรรทัดของแต่ละไฟล์ · 00-context.md = กฎถาวร 12 ข้อ · อีกสามไฟล์ = ใบสั่งงานของสามบล็อก · สไลด์บอกว่าช่วงบ่ายจะได้อีก 3 ไฟล์ และวันถัดไปอีก 2 ไฟล์ ก่อนเอามารวมกัน

และประโยคหลัก 3 ข้อของวัน (สไลด์หน้า 8) — เช้านี้เจอไปแล้วในรูปไหน:

• ① เว็บ interactive ไม่จำเป็นต้องมี state สองชุด — ทั้งบล็อก A และ C: server เป็นเจ้าของข้อมูลชุดเดียว ส่ง HTML มาให้ (บท 122 · 130) · ตัวนับคอมเมนต์ที่ตรงกันทุกแท็บในขั้น 2 คือหลักฐาน — ไม่มีสมุดจดเล่มที่สองบนโต๊ะให้คลาดกัน
• ② exactly-once ไม่มีอยู่จริง ออกแบบให้ทำซ้ำได้แทน — เจอแค่รูปเล็ก: seeds ที่ใช้ find_or_create_by! รันกี่รอบก็ได้ 30 บทความ (บท 120) · เรื่องจริงจังอยู่บล็อก E
• ③ อย่า invalidate cache ให้ key เปลี่ยนแทน — เจอในรูป fingerprinting: แก้ CSS แล้วชื่อไฟล์เปลี่ยน เบราว์เซอร์จึงหยิบเล่มใหม่เอง (บท 127) · เรื่องจริงจังอยู่บล็อก F

ควรเข้าใจอะไรแล้วบ้าง — เช็คตัวเองทีละบท

ลองตอบในใจทีละข้อ · ข้อไหนตอบไม่ได้ กลับไปอ่านบทนั้นก่อนเข้าช่วงบ่าย (ไม่ต้องจำโค้ด แค่อธิบายเป็นภาษาคนได้ก็พอ)

ต่อจากนี้ — ทำให้มันเป็นผลิตภัณฑ์

ช่วงบ่ายของ Day 3 (สไลด์ชุดถัดไป · เว็บนี้จัดไว้เป็น Rails Day 4 · Part 1) มีอีกสามบล็อก:

• D · rich text + รูปภาพ จาก MinIO — บทความที่มีตัวหนา รูปแทรก · รูปไปเก็บใน MinIO (กล่องเก็บไฟล์ที่ docker compose up -d เปิดไว้ให้ตั้งแต่บท 120 แต่ยังไม่ได้ใช้) → บท 136–141
• E · ตั้งเวลาโพสต์ด้วย background job — "ให้บทความนี้ขึ้นพรุ่งนี้ 8 โมง" · งานที่ทำทีหลังโดยไม่ให้ผู้ใช้รอ (ประโยค ② ของวันจะจริงจังที่นี่) → บท 142–145
• F · ทำให้มันเร็วด้วย cache — จำหน้าที่วาดแล้วไว้ใช้ซ้ำ (ประโยค ③ ของวัน) · ยังไม่ได้ทำเป็นบทเรียน

เรื่องระบบล็อกอินกับการเขียน test อยู่ Day 4 · เช้านี้ช่องชื่อผู้เขียนคอมเมนต์จึงยังพิมพ์เองได้ (ข้อกำหนดเขียนไว้ว่า "ยังไม่มีระบบล็อกอิน")

ภารกิจ: รัน checklist ทั้งหมดกับโปรเจกต์ของคุณเอง

$ grep -rn "<script" app/views
$ grep -rn "disconnect" app/javascript
app/javascript/controllers/character_counter_controller.js:15:  disconnect() {
$ grep -rn "turbo_frame_tag" app/views
app/views/posts/edit.html+turbo_frame.erb:2:<%= turbo_frame_tag dom_id(@post, :title) do %>
app/views/posts/_post.html.erb:11:      <%= turbo_frame_tag dom_id(post, :title) do %>
$ grep -rn "render :new\|render :edit" app/controllers
app/controllers/categories_controller.rb:31:        format.html { render :new, status: :unprocessable_content }
app/controllers/categories_controller.rb:44:        format.html { render :edit, status: :unprocessable_content }
app/controllers/posts_controller.rb:34:        format.html { render :new, status: :unprocessable_content }
app/controllers/posts_controller.rb:47:        format.html { render :edit, status: :unprocessable_content }
$ grep -rn "after_" app/models
app/models/comment.rb:7:  after_create_commit -> { broadcast_update_later_to post, target: "comment_count", html: post.comments.count }

Quiz

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Turbo Handbook — Redirecting After a Form Submission — อ่านสองย่อหน้าแรก: Turbo คาดว่าส่งฟอร์มแล้วต้อง redirect · ยกเว้นตอบ 4xx/5xx เช่น 422 เพื่อวาดฟอร์มที่มี error (ที่มาของกฎข้อ 12)
• Turbo Handbook — Decompose with Turbo Frames — อ่านสองย่อหน้าแรกของหน้า — Turbo ใช้ id ของกรอบจับคู่ว่าจะเอาส่วนไหนของคำตอบมาแทน (ที่มาของ error "did not contain the expected <turbo-frame>")
• Stimulus Reference — Lifecycle Callbacks: Disconnection — รายการเหตุการณ์ที่ทำให้ disconnect() ถูกเรียก (เช่น element ถูกเอาออกจากหน้า) ตรงกับที่เห็นใน Console ตอนฟอร์มถูกแทน
• Rails Guides — Active Record Callbacks: Transaction Callbacks — อ่านย่อหน้าต้นหัวข้อ ว่าทำไมงานที่ต้องคุยกับระบบภายนอก (เช่น ส่ง broadcast) ควรรอหลัง commit
• Claude Code Docs — Memory: Import additional files — วิธีที่บรรทัด @prompts/00-context.md ใน AGENTS.md ดึงกฎทั้ง 12 ข้อเข้ามาให้ Claude Code อ่านทุกครั้ง
• repo ของอาจารย์ — wongnok-blog-all-in-one — เลือก branch day3-c-done (ปุ่มเลือก branch มุมซ้ายบน) ถ้าอยากเทียบกับเฉลยของอาจารย์ · จำไว้ว่าไฟล์ต่างจากบทเรียนนี้