เริ่ม Day 3 — เปิดโปรเจกต์กลางของคอร์ส และข้อมูลตัวอย่าง 30 บทความ

1 · วันนี้ไม่ได้ "เรียน Rails" — วันนี้สร้างระบบหนึ่งระบบ

สไลด์หน้าแรกของ Day 3 เปิดด้วยประโยคว่า วันนี้เราไม่ได้มานั่งเรียนเรื่อง Rails ทีละหัวข้อ แต่สร้างระบบหนึ่งระบบให้เสร็จ แล้วได้ Rails ติดมือไปเอง · ทุกหัวข้อจบด้วยการทำของจริงต่อท้าย

Day 1–2 เราอยู่หลังร้านเป็นส่วนใหญ่: พนักงานต้อนรับ (routes) · หัวหน้าเชฟ (controller) · คนดูแลสต็อกกับตู้เก็บแฟ้ม (model · database) · Day 3 ย้ายมาหน้าร้านกับการจัดจาน — หน้าเว็บที่คนอ่านรู้เรื่อง · หน้าตาสวย · และกดแล้วขยับได้โดยไม่ต้องโหลดใหม่ทั้งหน้า

สไลด์ Day 3 จะพูดคำว่า "Vibe" บ่อย (Lab Vibe 1 · 2 · 3) = เขียน prompt (ข้อความสั่งงาน — บท 89) ให้ AI ทำ แล้วเราตรวจ · บทเรียนของเว็บนี้จะพาทำเองทีละขั้นก่อน แล้วค่อยให้ prompt กับรายการตรวจไว้ใช้กับ AI ทีหลัง — เพราะคนที่ไม่เคยทำเองจะตรวจงานของ AI ไม่ออก

2 · แผนที่ของวัน และ 3 ประโยคที่ต้องจำ

สไลด์แบ่ง Day 3 เป็น 6 บล็อก A–F · ชุดที่มาถึงตอนนี้คือ ครึ่งเช้า (Part 1) = บล็อก A B C · บล็อก D E F (Part 2) อยู่ใน Rails Day 4 · Part 1 ของเว็บนี้ (D E = บท 136–145 · F ยังไม่ได้ทำ):

สไลด์หน้า 8 บอกว่า "ถ้าวันนี้จำได้แค่ 3 อย่าง" · ตอนนี้ยังไม่ต้องเข้าใจทั้งหมด จำไว้ก่อน เดี๋ยวเจอ:

3 · ทำไม Day 3 ไม่ใช้แอปของ Day 2 ต่อ

สไลด์หน้า 3 ให้เหตุผลว่า งานจริงไม่เคยเริ่มจากศูนย์ — เข้าบริษัทวันแรก คุณจะได้โค้ดที่คนอื่นเขียนไว้แล้ว ไม่ได้ rails new เอง · และบอกด้วยว่า "ถ้า Lab 2 ยังไม่เสร็จ ไม่เป็นไร" = ทุกคนในห้องเริ่มที่จุดเดียวกัน ใครทำ Lab 2 ไม่เสร็จก็ไม่ตกขบวน

โปรเจกต์ของอาจารย์ชื่อ wongnok-blog-all-in-one · หน้าตาคล้ายของเรา แต่ไม่เหมือน:

4 · ขั้น 1 — ก็อปโปรเจกต์ด้วย git clone แล้วสลับไป day3-start

โค้ดของอาจารย์เก็บอยู่บน GitHub เป็น repository (เรียกสั้น ๆ ว่า repo = โฟลเดอร์โปรเจกต์ที่มี git คอยจดประวัติ) · git clone คือก็อป repo ทั้งก้อนลงเครื่องเรา พร้อมประวัติการแก้ทุกครั้ง ไม่ใช่แค่ไฟล์ล่าสุด

ในประวัตินั้นมีหลายสาย แต่ละสายเรียกว่า branch — อาจารย์ทำสาย day3-start (จุดเริ่มเช้าวันนี้) · day3-a-done (ทำบล็อก A เสร็จ) ฯลฯ · git checkout ชื่อสาย คือสลับไฟล์ทั้งโฟลเดอร์ให้เป็นหน้าตาของสายนั้น

ไปที่โฟลเดอร์ที่เก็บโปรเจกต์ (โฟลเดอร์เดียวกับที่มี wongnok_blog ของ Day 1–2 · อย่า clone ซ้อนเข้าไปข้างในโปรเจกต์เดิม) แล้วพิมพ์ทีละบรรทัด:

$ git clone https://github.com/chonlawit-odds/wongnok-blog-all-in-one.git
Cloning into 'wongnok-blog-all-in-one'...
remote: Enumerating objects: 660, done.
remote: Counting objects: 100% (660/660), done.
remote: Compressing objects: 100% (453/453), done.
remote: Total 660 (delta 291), reused 537 (delta 178), pack-reused 0 (from 0)
Receiving objects: 100% (660/660), 291.02 KiB | 2.29 MiB/s, done.
Resolving deltas: 100% (291/291), done.
$ cd wongnok-blog-all-in-one
$ git checkout day3-start
branch 'day3-start' set up to track 'origin/day3-start'.
Switched to a new branch 'day3-start'

• Cloning into 'wongnok-blog-all-in-one'... = ได้โฟลเดอร์ใหม่ชื่อเดียวกับ repo · บรรทัด remote: · Receiving = นับของที่ดาวน์โหลด (ตัวเลขของคุณจะต่าง ถ้าอาจารย์เพิ่มงานขึ้น GitHub ทีหลัง)
• cd = เดินเข้าโฟลเดอร์นั้น · คำสั่งหลังจากนี้ทั้งบทต้องพิมพ์ในโฟลเดอร์นี้
• origin = ชื่อเล่นที่ git ตั้งให้ "ต้นทางที่เรา clone มา" (GitHub ของอาจารย์)
• set up to track 'origin/day3-start' = ในเครื่องยังไม่มีสายนี้ git จึงสร้างสายในเครื่องให้ แล้วผูกไว้กับสายเดียวกันบน GitHub
• Switched to a new branch 'day3-start' = ตอนนี้ไฟล์ทั้งโฟลเดอร์เป็นหน้าตาของ day3-start แล้ว

อยากดูว่ามีสายอะไรบ้าง พิมพ์ git branch -a (-a = all รวมสายบน GitHub) · ผลจริง (ตัดสาย dependabot/… ของบอทอัปเดต gem ออก):

$ git branch -a
* day3-start
  main
  remotes/origin/HEAD -> origin/main
  remotes/origin/day3-a-done
  remotes/origin/day3-b-done
  remotes/origin/day3-c-done
  remotes/origin/day3-d-done
  remotes/origin/day3-e-done
  remotes/origin/day3-f-done
  remotes/origin/day3-start
  remotes/origin/day4-final
  remotes/origin/day4-g-done
  remotes/origin/day4-j-done
  …
  remotes/origin/main

* = สายที่เราอยู่ตอนนี้ · สองบรรทัดแรกคือสายที่มีในเครื่องเรา · remotes/origin/… คือสายที่มีบน GitHub (git จำรายชื่อไว้ตอน clone) · HEAD -> origin/main = "สายหลักบน GitHub คือ main" ไม่ต้องสนใจ

สาย day3-a-done ฯลฯ เอาไว้ "ตามทัน" — หัวข้อ 9 จะเตือนเรื่องนี้ · สาย day3-d/e/f กับ day4-… เป็นของ Part 2 และ Day 4 ที่ยังไม่ได้เรียน

เทียบกับที่เคยทำ: ตอนเริ่ม Next.js (บท 70) เราใช้คำสั่งสร้างโปรเจกต์ใหม่ · ตอน Rails Day 1 เราใช้ rails new · ทั้งสองคือ "สร้างร้านใหม่เปล่า ๆ" · git clone คือ "รับร้านที่มีคนเปิดไว้แล้ว" — งานจริงส่วนใหญ่เริ่มแบบหลัง

5 · ขั้น 2 — ติดตั้ง gem แล้วเปิดฐานข้อมูลด้วย docker compose

repo มาแค่โค้ด · gem (library ของ Ruby) ที่โค้ดต้องใช้ยังไม่ได้ลงเครื่อง · bundle install อ่านรายการใน Gemfile + เลขรุ่นที่ล็อกไว้ใน Gemfile.lock แล้วติดตั้งให้ครบ — แบบเดียวกับ npm install ที่อ่าน package.json (บท 70)

$ bundle install
…
Bundle complete! 27 Gemfile dependencies, 128 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
1 installed gem you directly depend on is looking for funding.
  Run `bundle fund` for details

เครื่องผมมี gem ครบอยู่แล้วจึงได้แค่บรรทัดสรุป (สองบรรทัดท้ายเรื่อง funding = gem ตัวหนึ่งรับเงินสนับสนุน ไม่ต้องสนใจ) · ของคุณครั้งแรกจะมีบรรทัด Installing … เป็นสิบ ๆ บรรทัดก่อน (repo นี้มี gem ที่แอป Day 2 ไม่มี เช่น bullet · rack-mini-profiler · strong_migrations) · ลงท้ายด้วย Bundle complete! = ผ่าน

ต่อไปคือตู้เก็บแฟ้ม · repo นี้มีไฟล์ compose.yaml ที่เขียนไว้ว่าต้องเปิดโปรแกรมอะไรบ้าง · docker compose up -d อ่านไฟล์นั้นแล้วเปิดให้ทั้งชุด ในกล่องแยก (container) ที่ไม่ปนกับโปรแกรมในเครื่อง · คุณเคยใช้ไฟล์แบบนี้เปิด PostgreSQL มาแล้วในฝั่ง Go (บท 27)

# compose.yaml (ตัดมาเฉพาะส่วนที่ต้องรู้)
services:
  postgres:
    image: postgres:18
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql
  minio:
    …
    ports: ["9000:9000", "9001:9001"]

• postgres: = ตู้เก็บแฟ้ม PostgreSQL รุ่น 18 · ผู้ใช้ postgres รหัส postgres
• ports: "5432:5432" = เปิดประตูหมายเลข 5432 ของเครื่องเรา ให้ทะลุเข้าไปที่ตู้ในกล่อง (5432 คือหมายเลขประตูมาตรฐานของ PostgreSQL)
• volumes: pgdata:… = เก็บข้อมูลไว้นอกกล่อง · ปิดกล่องแล้วเปิดใหม่ บทความไม่หาย
• minio: = โกดังเก็บไฟล์ (ใช้เก็บรูป/ไฟล์แนบ) · วันนี้ยังไม่ใช้ — ได้ใช้ใน บท 138

เปิด Docker Desktop ให้ทำงานก่อน แล้วพิมพ์ docker compose up -d ในโฟลเดอร์โปรเจกต์ · -d = เปิดทิ้งไว้เบื้องหลัง คืนเทอร์มินัลให้พิมพ์ต่อได้ · ครั้งแรกจะดาวน์โหลดตัวโปรแกรมนานหน่อย · (เครื่องตรวจของผมไม่ได้รันคำสั่งนี้ เพราะใช้ PostgreSQL ที่เปิดไว้แล้ว — จึงไม่มีผลลัพธ์ให้ดู)

ทำไมไม่ต้องตั้งรหัสฐานข้อมูลเอง? เพราะ config/database.yml ของ repo ตั้งค่าเริ่มต้นไว้ตรงกับ compose.yaml แล้ว · ไฟล์นี้ใช้ ERB (<%= %> ที่เรียนบท 103 — ใช้ได้ในไฟล์ตั้งค่าด้วย):

# config/database.yml (ตัดมาบางส่วน)
  host: <%= ENV.fetch("DATABASE_HOST", "localhost") %>
  port: <%= ENV.fetch("DATABASE_PORT", 5432) %>
  username: <%= ENV.fetch("DATABASE_USER", "postgres") %>
  password: <%= ENV.fetch("DATABASE_PASSWORD", "postgres") %>

ENV.fetch("DATABASE_HOST", "localhost") = "อ่านตัวแปรสภาพแวดล้อม (ค่าที่ตั้งไว้ในเทอร์มินัล) ชื่อ DATABASE_HOST · ถ้าไม่มี ใช้ค่าหลังลูกน้ำ" · ของคุณไม่ได้ตั้งอะไร จึงได้ localhost · 5432 · postgres · postgres = ตรงกับตู้ใน compose.yaml พอดี · ของคุณไม่ต้องตั้งตัวแปรพวกนี้ (เครื่องตรวจของผมตั้งไว้ให้ชี้ไปตู้อื่น เพราะไม่ได้ใช้ docker)

6 · ขั้น 3 — db:prepare แล้วเดินดูว่าได้อะไรมาบ้าง

ตู้เปิดแล้ว · สั่งช่างตั้งลิ้นชักตามแบบ (บท 108):

$ bin/rails db:prepare
Created database 'wongnok_blog_all_in_one_development'
Created database 'wongnok_blog_all_in_one_test'

• ได้สองตู้: …_development = ตู้ที่ใช้ตอนพัฒนา · …_test = ตู้สำรองไว้รันเทส (Day 4)
• ไม่มีบรรทัด == CreatePosts: migrating เพราะบนตู้ใหม่ db:prepare โหลดแบบจาก db/schema.rb ทีเดียว ไม่ได้ไล่ทำใบสั่งช่างทีละใบ (บท 108)
• มันรัน db/seeds.rb ให้ด้วย · แต่ seeds ของ day3-start มีแค่บรรทัด comment ตัวอย่างของ Rails → ลิ้นชักยังว่าง (ผมนับใน console ได้ Post.count = 0 · Category.count = 0)

ก่อนใส่ข้อมูล เดินดูไฟล์สำคัญสั้น ๆ (เปิดโฟลเดอร์ใน editor) — ไม่ต้องจำ แค่รู้ว่าอะไรอยู่ตรงไหน ทุกไฟล์มีบทของมันรออยู่:

ไฟล์เดียวในตารางที่ขอดูโค้ดตอนนี้ คือท้าย config/environments/development.rb — เพราะมันจะมีผลกับหน้าเว็บที่เราเปิดในหัวข้อ 8:

  config.after_initialize do
    Bullet.enable = true
    Bullet.rails_logger = true
    Bullet.add_footer = true
  end

after_initialize = "ตั้งค่าเสร็จแล้วค่อยทำในบล็อกนี้" · สามบรรทัด = เปิด bullet (gem ตัวจับ N+1) · ให้มันเขียนเตือนลง log · และแปะแถบเตือนท้ายหน้าเว็บเวลาเจอ N+1 · ไฟล์นี้ใช้เฉพาะตอน development (ตอนเขียนโค้ดในเครื่อง) → ผู้ใช้จริงไม่เห็น

7 · ขั้น 4 — ข้อมูลตัวอย่าง 30 บทความ ที่รันซ้ำกี่รอบก็ไม่เบิ้ล

ทำไมต้อง 30? สไลด์หน้า 20 ให้เหตุผลว่า ปัญหาที่เราจะเจอทั้งวัน — N+1 · ความช้า · การแบ่งหน้า (pagination = แสดงทีละหน้า หน้าละ 10 ชิ้น) — ไม่โผล่ตอนมีข้อมูล 3 แถว · ข้อมูลน้อยเกินไปคือเหตุผลอันดับหนึ่งที่บั๊กพวกนี้หลุดไปถึงผู้ใช้จริง

ใส่ข้อมูลตัวอย่าง: เปิด db/seeds.rb · ลบของเดิมทิ้งทั้งไฟล์ (มีแค่ comment) แล้ววางอันนี้แทนทั้งไฟล์ · ไฟล์นี้เป็นชุดเดียวกับที่บท 121–135 ใช้ ผลรันของคุณจะได้ตรงกับบทเรียน:

# ข้อมูลตัวอย่างของ Rails Day 3 — หมวด 5 หมวด · บทความ 30 ชิ้น
# รันซ้ำกี่รอบก็ได้ ข้อมูลไม่เบิ้ล เพราะใช้ find_or_create_by! (มีอยู่แล้ว = ใช้ของเดิม)

CATEGORIES = {
  "thai-food"   => "อาหารไทย",
  "noodles"     => "ก๋วยเตี๋ยว",
  "desserts"    => "ของหวาน",
  "street-food" => "อาหารริมทาง",
  "drinks"      => "เครื่องดื่ม"
}

POSTS = {
  "thai-food" => [
    [ "ต้มยำกุ้งน้ำข้น", "ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้ยวเผ็ดกลมกล่อม กุ้งแม่น้ำตัวใหญ่ หอมตะไคร้ ข่า ใบมะกรูด กินกับข้าวสวยร้อน ๆ ได้ทั้งถ้วย ร้านนี้เปิดมาสามสิบปีแล้ว คิวยาวทุกวันเสาร์อาทิตย์" ],
    [ "แกงเขียวหวานไก่", "แกงเขียวหวานกะทิสด ใส่มะเขือเปราะกับใบโหระพา รสหวานนำ เผ็ดตามหลัง" ],
    [ "ผัดกะเพราหมูสับไข่ดาว", "เมนูสิ้นคิดที่ไม่เคยทำให้ผิดหวัง หมูสับผัดพริกกระเทียมไฟแรง ใบกะเพราเยอะ ๆ ไข่ดาวขอบกรอบ ราดข้าวแล้วตักพริกน้ำปลาเพิ่มอีกนิด" ],
    [ "ส้มตำปูปลาร้า", "ตำแบบอีสานแท้ ปลาร้าต้มสุกหอมกลิ่น ปูนาเค็มตัวเล็ก เผ็ดจัดจ้านจนต้องสั่งข้าวเหนียวเพิ่ม" ],
    [ "ข้าวซอยไก่", "ข้าวซอยเชียงใหม่ น้ำแกงเข้มข้นหอมเครื่องเทศ เส้นทอดกรอบด้านบน เสิร์ฟกับหอมแดงและผักกาดดอง" ],
    [ "มัสมั่นเนื้อ", "เนื้อตุ๋นจนนุ่มละลายในปาก มันฝรั่งกับถั่วลิสงคั่ว น้ำแกงหวานมันหอมอบเชย กินกับโรตีก็เข้ากัน" ]
  ],
  "noodles" => [
    [ "ก๋วยเตี๋ยวเรืออยุธยา", "น้ำซุปเข้มข้นใส่เลือดหมู ชามเล็กกินได้หลายชาม เส้นหมี่กับเส้นเล็กอร่อยพอกัน" ],
    [ "บะหมี่เกี๊ยวหมูแดง", "เส้นบะหมี่ไข่เหนียวนุ่ม เกี๊ยวกุ้งห่อแน่น หมูแดงหวานกำลังดี ขอแห้งใส่น้ำตาลพริกป่นตามชอบ" ],
    [ "ผัดไทยกุ้งสด", "เส้นจันท์ผัดกับซอสมะขามเปียกสูตรร้าน ใส่กุ้งสด ไข่ เต้าหู้ ถั่วงอก โรยถั่วป่น บีบมะนาวก่อนกิน" ],
    [ "เย็นตาโฟทรงเครื่อง", "น้ำซอสเย็นตาโฟสีชมพูหวานอมเปรี้ยว ลูกชิ้นปลาเหนียว เต้าหู้ทอด ผักบุ้งลวก และปลาหมึกกรอบ" ],
    [ "ก๋วยจั๊บน้ำข้น", "เส้นก๋วยจั๊บม้วนในน้ำซุปพริกไทยร้อน ๆ หมูกรอบ ไข่ต้มยางมะตูม กินตอนเช้าอุ่นท้องทั้งวัน" ],
    [ "ราดหน้าหมูหมัก", "เส้นใหญ่ผัดซีอิ๊วจนหอมกระทะ ราดน้ำราดหน้าข้นกำลังดี หมูหมักนุ่ม คะน้ากรอบ" ]
  ],
  "desserts" => [
    [ "ข้าวเหนียวมะม่วง", "มะม่วงน้ำดอกไม้สุกหวานหอม ข้าวเหนียวมูนกะทิเค็มนิด ๆ โรยถั่วทองกรอบ ของหวานที่นักท่องเที่ยวต้องลอง" ],
    [ "บัวลอยไข่หวาน", "บัวลอยแป้งนุ่มหลากสีในน้ำกะทิอุ่น ใส่ไข่หวานลูกกลม ๆ ทานตอนหน้าฝนดีที่สุด" ],
    [ "ทับทิมกรอบ", "แห้วหุ้มแป้งมันสีแดงกรอบเด้ง ในน้ำกะทิหอมใบเตย ใส่น้ำแข็งไสเย็นชื่นใจ" ],
    [ "ขนมครก", "ขนมครกหน้ากะทิหวานมัน ตัวขนมกรอบนอกนุ่มใน มีหน้าข้าวโพดกับต้นหอมให้เลือก" ],
    [ "ลอดช่องน้ำกะทิ", "ลอดช่องสีเขียวจากใบเตย น้ำกะทิหวานหอมน้ำตาลโตนด ใส่น้ำแข็งเกล็ด" ],
    [ "กล้วยบวชชี", "กล้วยน้ำว้าสุกต้มในกะทิ หวานมันเค็มนิด ๆ ของหวานบ้าน ๆ ที่ทำง่ายที่สุด" ]
  ],
  "street-food" => [
    [ "หมูปิ้งข้าวเหนียว", "หมูปิ้งหมักนมสด ปิ้งเตาถ่านจนขอบไหม้นิด ๆ กินกับข้าวเหนียวร้อน ๆ เป็นอาหารเช้าที่หาได้ทุกซอย" ],
    [ "ไก่ทอดหาดใหญ่", "ไก่ทอดหนังกรอบหอมเครื่องเทศ โรยหอมเจียว กินคู่ข้าวเหนียวและน้ำจิ้มหวาน" ],
    [ "ลูกชิ้นปิ้งน้ำจิ้มแจ่ว", "ลูกชิ้นหมูเด้งปิ้งบนเตาถ่าน ราดน้ำจิ้มเผ็ดหวาน ไม้ละห้าบาทหน้าโรงเรียน" ],
    [ "ข้าวมันไก่ประตูน้ำ", "ข้าวมันหอมไขมันไก่ ไก่ต้มนุ่ม น้ำจิ้มเต้าเจี้ยวขิงสับรสจัด ซุปฟักร้อน ๆ ฟรีทุกจาน" ],
    [ "โรตีกล้วยไข่", "แป้งโรตีบางกรอบ ห่อกล้วยหอมกับไข่ ราดนมข้นหวาน ร้านรถเข็นตอนหัวค่ำ" ],
    [ "หอยทอดกรอบ", "แป้งทอดกรอบ ใส่หอยแมลงภู่ตัวโต ไข่ ถั่วงอกผัด กินกับซอสพริกศรีราชา" ]
  ],
  "drinks" => [
    [ "ชาไทยเย็น", "ชาไทยสีส้มเข้ม ชงหอม ใส่นมข้นจืดกับนมข้นหวาน เย็นชื่นใจในวันที่อากาศร้อนสี่สิบองศา" ],
    [ "กาแฟโบราณ", "กาแฟชงถุงผ้าแบบร้านกาแฟสมัยก่อน เข้ม หวานมัน ทานคู่ปาท่องโก๋" ],
    [ "น้ำมะพร้าวปั่น", "มะพร้าวน้ำหอมปั่นกับน้ำแข็ง เนื้อมะพร้าวอ่อนเป็นชิ้น ๆ หวานธรรมชาติ" ],
    [ "ชามะนาว", "ชาดำเย็นบีบมะนาวสด เปรี้ยวหวานสดชื่น ดื่มคู่อาหารรสจัดเข้ากันมาก" ],
    [ "โอเลี้ยง", "กาแฟดำเย็นสูตรโบราณ หวานเข้ม ใส่น้ำแข็งเต็มแก้ว ราคาย่อมเยาที่สุดในร้าน" ],
    [ "นมเย็น", "นมสีชมพูจากน้ำแดง หวานหอม เด็ก ๆ ชอบที่สุด เติมไข่มุกได้" ]
  ]
}

categories = CATEGORIES.to_h do |slug, name|
  [ slug, Category.find_or_create_by!(slug: slug) { |c| c.name = name } ]
end

# สลับหมวดกันทีละชิ้น หน้าแรกจะได้มีหลายหมวดปนกัน · ชิ้นที่สร้างทีหลังใหม่กว่า
position = 0
6.times do |round|
  CATEGORIES.each_key do |slug|
    title, description = POSTS[slug][round]
    Post.find_or_create_by!(title: title) do |post|
      post.description = description
      post.category    = categories[slug]
      post.created_at  = (30 - position).days.ago
    end
    position += 1
  end
end

puts "categories: #{Category.count} · posts: #{Post.count}"

ไม่ต้องอ่านข้อความไทยทุกบรรทัด · ดูแค่โครงหลัก:

รันสองรอบติดกัน:

$ bin/rails db:seed
categories: 5 · posts: 30

$ bin/rails db:seed
# ↑ รอบที่สอง · ไฟล์เดิม ไม่ได้แก้อะไร

$ bin/rails db:seed
categories: 5 · posts: 30

Category Load (0.4ms)  SELECT "categories".* FROM "categories" WHERE "categories"."slug" = 'thai-food' LIMIT 1 /*application='WongnokBlogAllInOne'*/
Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."slug" = 'noodles' LIMIT 1 /*application='WongnokBlogAllInOne'*/

ตัวที่ทำให้ไม่เบิ้ลคือ find_or_create_by! = "มีแล้วใช้ของเดิม ไม่มีค่อยสร้าง" · Post.find_or_create_by!(title: title) do |post| … end แปลว่า "หาบทความที่ title ตรงนี้ · เจอก็เอาอันนั้น · ไม่เจอค่อยสร้างใหม่ โดยกรอกช่องอื่นตามบล็อก" · ! ท้ายชื่อ = ถ้าสร้างไม่ผ่าน validation ให้ระเบิด ไม่เงียบ (บท 110)

เทียบกับ Go: GORM มี FirstOrCreate ทำงานแบบเดียวกัน ("หาก่อน ไม่เจอค่อยสร้าง") ที่เจอในบท 53 · นี่คือร่างเล็ก ๆ ของประโยคที่ ② ของวัน — ไม่มีใครรับประกันได้ว่าคำสั่งจะถูกรันครั้งเดียว (เพื่อนกดซ้ำ · สคริปต์ติดตั้งรันใหม่) · ทางที่ปลอดภัยคือเขียนให้รันซ้ำแล้วผลเท่าเดิม

# ลองแก้ใน db/seeds.rb บรรทัดเดียว (ตอนนี้ตู้มี 30 บทความแล้ว)
    Post.find_or_create_by!(title: title) do |post|   # ก่อน
    Post.create!(title: title) do |post|               # หลัง — แบบ seeds ของ Day 2

$ bin/rails db:seed

$ bin/rails db:seed
categories: 5 · posts: 60

$ bin/rails db:seed
bin/rails aborted!
ActiveRecord::RecordInvalid: Validation failed: Slug has already been taken (ActiveRecord::RecordInvalid)
…/db/seeds.rb:56:in 'block in <main>'
…

เก็บ seeds ไว้ด้วย commit — บท 122–125 เราจะทดลองแก้ไฟล์ แล้วสั่ง git restore (คืนไฟล์ที่แก้แต่ยังไม่ commit กลับเป็นสภาพตอน commit ล่าสุด) · ถ้า seeds ยังไม่ได้ commit มันจะถูกคืนเป็นไฟล์ว่างไปด้วย · และเราจะไม่ commit ทับสาย day3-start ของอาจารย์ แต่แตกสายของเราเองชื่อ my-day3:

$ git status
On branch day3-start
Your branch is up to date with 'origin/day3-start'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   db/seeds.rb

no changes added to commit (use "git add" and/or "git commit -a")
$ git switch -c my-day3
Switched to a new branch 'my-day3'
$ git add db/seeds.rb
$ git commit -m "seeds: 5 หมวด 30 บทความ"
[my-day3 0e10665] seeds: 5 หมวด 30 บทความ
 1 file changed, 73 insertions(+), 9 deletions(-)

• modified: db/seeds.rb = ไฟล์เดียวที่เราแก้ · ถูกต้อง
• git switch -c my-day3 = สร้างสายใหม่ชื่อ my-day3 จากจุดที่ยืนอยู่ แล้วย้ายไปอยู่สายนั้น (-c = create) · ของที่แก้ค้างไว้ติดตามมาด้วย
• [my-day3 0e10665] = commit ลงสาย my-day3 · 0e10665 คือเลขประจำ commit (ของคุณจะต่าง)
• 73 insertions(+), 9 deletions(-) = เพิ่ม 73 บรรทัด (seeds ของเรา) · ลบ 9 บรรทัด (comment เดิมของ Rails)

ผมเทียบไฟล์ทั้งโปรเจกต์ของสาย my-day3 กับโค้ดที่บทถัด ๆ ไปใช้ตรวจแล้ว ตรงกันทุกไฟล์ · และวันหลังถ้าคุณตั้งตู้ใหม่ (เช่น db:drop แล้ว db:prepare) ข้อมูล 30 ชิ้นจะเข้าตู้ให้เองเลย เพราะ seeds อยู่ในสายแล้ว (ผมลองบนตู้ใหม่ได้ categories: 5 · posts: 30) · แต่ถ้าตู้มีอยู่แล้ว db:prepare จะไม่รัน seeds ซ้ำ — ต้องสั่ง db:seed เอง

8 · ขั้น 5 — bin/dev แล้วเปิด /posts

Day 1–2 เราเปิดร้านด้วย bin/rails server · Day 3 มีงานที่สองที่ต้องวิ่งคู่กัน: คอยสร้างไฟล์ CSS ของ Tailwind ใหม่ทุกครั้งที่เราแก้ view · bin/dev เปิดทั้งสองงานพร้อมกันตามรายการใน Procfile.dev — ทำนองเดียวกับ npm run dev ของ Next.js (บท 72)

# Procfile.dev
web: bin/rails server
css: bin/rails tailwindcss:watch

web: = ร้าน Rails ตัวเดิม · css: = คนคอยเฝ้าไฟล์ แก้เมื่อไหร่สร้าง CSS ใหม่ (ละเอียดบท 128) · ครั้งแรกถ้าเครื่องยังไม่มี gem ชื่อ foreman (ตัวที่อ่าน Procfile แล้วเปิดหลายงานพร้อมกัน) bin/dev จะติดตั้งให้เองก่อน — ดูได้จากบรรทัดต้น ๆ ของไฟล์ bin/dev

$ bin/dev
11:27:37 web.1  | started with pid 40007
11:27:37 css.1  | started with pid 40008
11:27:37 web.1  | => Booting Puma
11:27:37 web.1  | => Rails 8.1.4 application starting in development
…
11:27:37 web.1  | * Listening on http://127.0.0.1:3000
11:27:37 web.1  | * Listening on http://[::1]:3000
11:27:37 web.1  | Use Ctrl-C to stop
11:27:38 css.1  | ≈ tailwindcss v4.3.3
11:27:38 css.1  |
11:27:38 css.1  | /*! 🌼 daisyUI 5.7.50 */
11:27:38 css.1  | Done in 89ms
…

• ทุกบรรทัดขึ้นต้นด้วยเวลา + ชื่องาน: web.1 = ร้าน Rails · css.1 = Tailwind · ข้อความของสองงานสลับกันในหน้าจอเดียว
• Listening on http://127.0.0.1:3000 = ร้านเปิดที่ประตู 3000 แล้ว
• tailwindcss v4.3.3 · daisyUI 5.7.50 · Done in 89ms = สร้างไฟล์ CSS รอบแรกเสร็จ
• หลังจากนั้นจะมีบรรทัด css.1 | Done in …ms โผล่เป็นระยะ แม้เราไม่ได้แก้อะไร (ของผมขึ้นถี่ตอนเปิดหน้าเว็บ) = Tailwind สร้าง CSS ใหม่อีกรอบ · ปกติ ไม่ต้องสนใจ
• เลิกใช้: กด Ctrl-C ครั้งเดียว ปิดทั้งสองงาน · เวลาและเลข pid ของคุณจะต่าง

เปิดเบราว์เซอร์ไปที่ http://localhost:3000/posts · log ในหน้าต่างเดียวกับ bin/dev ขึ้นแบบนี้ (ผมตัดบรรทัด Rendered posts/_post.html.erb 30 บรรทัดที่ซ้ำกันออก) · ก้อนนี้ผมดึงหน้าด้วย curl บรรทัดที่สองจึงลงท้าย as */* · ถ้าเปิดด้วยเบราว์เซอร์ จะเป็น as HTML (ผมเปิดด้วย Chrome แล้วได้แบบนั้น)

11:27:40 web.1  | Started GET "/posts" for ::1 at 2026-11-07 11:27:40 +0700
11:27:40 web.1  | Processing by PostsController#index as */*
11:27:40 web.1  |   Rendering layout layouts/application.html.erb
11:27:40 web.1  |   Rendering posts/index.html.erb within layouts/application
11:27:40 web.1  |   Post Exists? (1.9ms)  SELECT 1 AS one FROM "posts" LIMIT 1 /*action='index',…*/
11:27:40 web.1  |   ↳ app/views/posts/index.html.erb:15
11:27:40 web.1  |   Post Load (0.7ms)  SELECT "posts".* FROM "posts" /*action='index',…*/
11:27:40 web.1  |   ↳ app/views/posts/index.html.erb:16
…
11:27:40 web.1  | Completed 200 OK in 65ms (Views: 28.5ms | ActiveRecord: 6.8ms (2 queries, 0 cached) | GC: 16.6ms)

• Completed 200 OK … (2 queries, 0 cached) = ตอบสำเร็จ · เดินไปตู้ 2 ครั้ง · ตัวเลข ms ที่เหลือเป็นเวลา ไม่ต้องสนใจ
• Rendering layout … · Rendering posts/index.html.erb within … = เริ่มจัดจาน: วางจานรอง (layout บท 103) แล้วเติมหน้า index ลงตรงกลาง
• Post Exists? = "มีบทความสักชิ้นไหม" · มาจาก <% if @posts.any? %> ใน app/views/posts/index.html.erb
• Post Load = หยิบทั้งลิ้นชัก ไม่มี LIMIT · มาจาก <% @posts.each do |post| %> ในไฟล์เดียวกัน
• ↳ app/views/posts/index.html.erb:15 = "บรรทัดไหนในไฟล์ไหนสั่งให้เดินไปตู้" (เลขอาจเลื่อนจากในไฟล์ไป 1 เพราะป้าย comment ที่ Rails แปะหัวไฟล์ — ไม่ต้องสนใจ)

30 ชิ้นยังไหว · ถ้ามีหมื่นชิ้นก็หยิบหมื่นชิ้น — กฎข้อ 6 ใน prompts/00-context.md ("index action ต้องมี limit หรือ pagination") ยังไม่ผ่าน · เราจะแก้ใน Lab บท 126

HTML ที่เบราว์เซอร์ได้รับจริง (ผมดึงด้วย curl -s localhost:3000/posts ตัดมาบทความแรก) · ใน development Rails แปะ comment บอกว่าท่อนไหนมาจากไฟล์ไหนให้ด้วย (ตั้งไว้ใน development.rb: annotate_rendered_view_with_filenames = true):

<div id="<%= dom_id post %>" class="…">
  <div>
    <strong …>Title:</strong>
    <%= post.title %>
  </div>
  <div>
    <strong …>Description:</strong>
    <%= post.description %>
  </div>
  <div>
    <strong …>Category:</strong>
    <%= post.category_id %>
  </div>
</div>

<!-- BEGIN app/views/posts/_post.html.erb
--><div id="post_1" class="w-full sm:w-auto my-5 space-y-5">
  <div>
    <strong class="block font-medium mb-1">Title:</strong>
    ต้มยำกุ้งน้ำข้น
  </div>
  <div>
    <strong class="block font-medium mb-1">Description:</strong>
    ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้ยวเผ็ดกลมกล่อม …
  </div>
  <div>
    <strong class="block font-medium mb-1">Category:</strong>
    1
  </div>
</div>
<!-- END app/views/posts/_post.html.erb -->

• <!-- BEGIN … --> / <!-- END … --> = ป้ายที่ Rails แปะให้ตอน development · เบราว์เซอร์ไม่แสดงบนจอ
• <%= dom_id post %> → post_1 = helper ที่ตั้ง id ให้ตามชื่อ model + เลขที่แฟ้ม (บท 131 จะพึ่งมันมาก)
• class="w-full sm:w-auto my-5 space-y-5" = คลาสของ Tailwind (บท 72) ที่ scaffold ใส่มาให้ · ในโค้ดผมย่อเป็น … · เรื่อง CSS รอบล็อก B (บท 127–129)
• <%= post.title %> → ต้มยำกุ้งน้ำข้น = ERB เติมค่าลงช่อง (บท 103)
• <%= post.category_id %> → 1 = scaffold พิมพ์เลขที่แฟ้มของหมวดออกมาตรง ๆ ไม่ใช่ชื่อ "อาหารไทย" · ทั้งหน้ามีแต่เลข 1–5

บนจอเบราว์เซอร์ (ผมเปิดด้วย Chrome จริง) จะเห็นรายการยาว 30 ชิ้นต่อกันในหน้าเดียว · แต่ละชิ้นมีหัวข้อ Title: Description: Category: กับปุ่ม Show · Edit · Destroy · และป้ายเล็กมุมซ้ายบนหน้าตาประมาณ 699.6 ms ×17 = rack-mini-profiler (gem ตัวจับเวลาว่าหน้านี้ใช้เวลาเท่าไหร่ · ตัวเลขของคุณจะต่าง · เลขหลัง × ไม่ต้องสนใจตอนนี้ · หน้าแรกหลังเปิดร้านมักช้ากว่าหน้าถัด ๆ ไป) · ส่วนแถบเตือนของ bullet ยังไม่ขึ้น เพราะหน้านี้ยังไม่มี N+1 (มันพิมพ์แค่เลข category_id ไม่ได้เดินไปเปิดลิ้นชัก categories) — เราจะเห็นมันโผล่ในบท 125

9 · ตามไม่ทัน — branch สำเร็จรูปของอาจารย์

สไลด์บอกว่าทุกบล็อกมี branch "ทำเสร็จแล้ว" ให้ checkout ตามทันได้ (day3-a-done · day3-b-done · day3-c-done) · มีจริงตามที่เห็นใน git branch -a

$ bin/rails console
Loading development environment (Rails 8.1.4)
wongnok-blog-all-in-one(dev):001> Post.count
  Post Count (39.7ms)  SELECT COUNT(*) FROM "posts" /*application='WongnokBlogAllInOne'*/
=> 30
wongnok-blog-all-in-one(dev):002> Category.count
  Category Count (1.0ms)  SELECT COUNT(*) FROM "categories" /*application='WongnokBlogAllInOne'*/
=> 5
wongnok-blog-all-in-one(dev):003> Post.recent.first.title
  Post Load (4.0ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."created_at" DESC LIMIT 1 /*application='WongnokBlogAllInOne'*/
=> "นมเย็น"
wongnok-blog-all-in-one(dev):004> Category.find_by(slug: "desserts").posts.count
  Category Load (0.4ms)  SELECT "categories".* FROM "categories" WHERE "categories"."slug" = 'desserts' LIMIT 1 /*application='WongnokBlogAllInOne'*/
  Post Count (0.7ms)  SELECT COUNT(*) FROM "posts" WHERE "posts"."category_id" = 3 /*application='WongnokBlogAllInOne'*/
=> 6

$ bin/rails db:reset
Dropped database 'wongnok_blog_all_in_one_development'
Dropped database 'wongnok_blog_all_in_one_test'
Created database 'wongnok_blog_all_in_one_development'
Created database 'wongnok_blog_all_in_one_test'
categories: 5 · posts: 30

ทดสอบความเข้าใจ

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

อ้างอิง

• GitHub — chonlawit-odds/wongnok-blog-all-in-one — repo ของอาจารย์ที่ทั้งห้องใช้ · กดปุ่มเลือก branch (มุมซ้ายบน เหนือรายการไฟล์) แล้วเลือก day3-start จะเห็นไฟล์ชุดเดียวกับที่ clone มา
• Rails Guides — Active Record Migrations — อ่านหัวข้อ 4.3 Preparing the Database ย่อหน้าที่ขึ้นต้นว่า "Once the database and tables exist" ซึ่งบอกว่าเมื่อตู้มีอยู่แล้ว db:prepare จะไม่โหลด seeds ซ้ำ · แล้วต่อด้วย หัวข้อ 4.4 Resetting the Database (คำสั่ง db:reset ในภารกิจ)
• Rails Guides — Active Record Query Interface — อ่านหัวข้อ 4.1 find_or_create_by และ 4.2 find_or_create_by! ดู SQL ที่มันสร้าง (SELECT ก่อน แล้ว INSERT เมื่อหาไม่เจอ) · ท้าย 4.1 มีประโยค "The block will only be executed if the customer is being created" = บล็อกทำงานเฉพาะตอนสร้าง ตรงกับที่ผมลองในหัวข้อ 7
• Rails API — ActiveRecord::Relation#find_or_create_by — ประโยค "This method accepts a block, which is passed down to create" = บล็อกถูกส่งต่อให้ตอนสร้างเท่านั้น (เหตุผลที่แก้คำอธิบายใน seeds แล้วของเดิมไม่เปลี่ยน) · สองย่อหน้าท้ายพูดถึง race condition (สองคนสั่งพร้อมกัน) ไว้อ่านเมื่อถึง Part 2
• Git — git-switch — คู่มือทางการของ git · อ่านตัวอย่างในหัวข้อ EXAMPLES ที่ใช้ -c สร้างสายใหม่แล้วย้ายไปทันที
• Docker Docs — docker compose up — อ่านตาราง Options บรรทัด -d, --detach (เปิดทิ้งไว้เบื้องหลัง)