รู้แค่ Excel แล้วเริ่มเขียนเว็บ ศัพท์เทคนิคเยอะมาก

คนที่คุ้นกับตารางคำนวณ พอเริ่มทำเว็บมักถามว่า: HTML ยังพอเข้าใจได้

หาสิ่งผิดปกติ
วิธีใช้เครื่องมืออ่าน

ฟังจะอ่านบทความออกเสียง อ่านเร็วแสดงวลีทีละช่วงตามความเร็วที่เลือก ฝึกภาษาใช้เปรียบเทียบบทความฉบับแปลที่มีอยู่ บันทึกจะเก็บบุ๊กมาร์กในเบราว์เซอร์นี้ และเปิดอีกครั้งได้จากรายการที่บันทึกในเครื่องเล่น อ่านแบบเกมทุบอิฐจะเปลี่ยนตัวอักษรในบทความเป็นก้อนอิฐให้ทุบเล่น

แชร์บทความนี้

แชร์บทความนี้

รู้แค่ Excel แล้วเริ่มเขียนเว็บ ศัพท์เทคนิคเยอะมาก
ภาพที่สร้างโดย AI
โฆษณา
โฆษณา

1. คิดว่าหลัง Excel ก็แค่ทำเว็บ ทำไมมีศูนย์โลจิสติกส์โผล่มา

คนที่คุ้นกับตารางคำนวณ พอเริ่มทำเว็บมักถามว่า:

ไม่ได้แค่อยากเปิดเว็บขึ้นมาหรือ?

HTML ยังพอเข้าใจได้

แล้ว Git, GitHub, repository, branch, commit, build, deploy, Worker, D1, KV, DNS, CDN และ CI/CD ก็มาในครั้งเดียว

ออกจากหมู่บ้านเริ่มต้นแล้วไม่ได้เจอสไลม์ แต่เจอ “บทนำระบบกระจาย”

เหตุผลคือ Excel มักจบงานในโปรแกรมเดียว ส่วนบริการเว็บแยกการเขียน การเก็บ การแปลง การรัน การส่ง และการบันทึกออกเป็นหลายชั้น

2. ปัญหาจริงไม่ใช่ยากเกินไป แต่คือข้ามชั้น

ไม่มีหลักสูตรเดียวสำหรับทุกคน แต่โดยแนวคิดชั้นมักเพิ่มประมาณนี้:

  1. เขียนไฟล์
  2. เก็บประวัติด้วย Git
  3. เก็บและทำงานร่วมกันบน GitHub
  4. Build
  5. Deploy
  6. รัน API
  7. ต่อฐานข้อมูล
  8. ให้เครื่องทำงานเอง
  9. ลองใหม่เมื่อพลาด และทำต่อหลังเกิดปัญหา

ด้วย AI และแบบสำเร็จรูป คนเริ่มต้นอาจกระโดดจากข้อ 1 ไปข้อ 9 ได้เร็วมาก

สะดวก

แต่สมองตามไม่ทัน

เมื่อวานเพิ่งรู้ว่า GitHub เก็บโค้ด วันนี้ได้ยิน “Workers Builds root”, “D1 binding”, “KV eventual consistency”

เหมือนเพิ่งเรียนใช้ตู้เย็น วันต่อมาต้องดูแลการรับของและส่งของทั้งโรงงานอาหาร

3. GitHub คืออะไร — คลังแบบพิมพ์เขียวพร้อมประวัติการเปลี่ยนแปลง

หน้าที่หลักของ GitHub คือจัดการไฟล์และการเปลี่ยนแปลงใน Git repository

งานทำเว็บอาจมีบทความ HTML CSS JavaScript การตั้งค่า และชุดคำสั่งสำหรับทดสอบหรือทำงานอัตโนมัติ

commit บันทึกว่าอะไรเปลี่ยนและเมื่อไร

โมเดลง่าย ๆ:

GitHub = คลังแบบพิมพ์เขียว + ประวัติการเปลี่ยน

GitHub Pages ยังโฮสต์เว็บ static ได้ และ GitHub Actions ทำ Build Test Deploy อัตโนมัติได้

จึงดูเหมือนมากกว่าคลัง

เพราะในคลังมีโรงงานเล็ก ๆ อยู่จริง

แต่ศูนย์กลางยังคงเป็นโค้ด การร่วมมือ และประวัติการเปลี่ยน

4. Cloudflare คืออะไร — โรงงานที่ดันมีร้าน คลัง รถส่งของ และห้องรักษาความปลอดภัยด้วย

Cloudflare สามารถ:

  • ให้บริการเว็บไซต์
  • รัน logic ฝั่ง server ด้วย Workers
  • Build และ Deploy
  • เก็บ SQL ด้วย D1
  • เก็บ Key-Value ด้วย KV
  • กระจายทั่วโลก
  • จัดการ DNS
  • ให้ความปลอดภัย
  • รันกระบวนการหลายขั้นที่ทนทานด้วย Workflows

เรียกว่า hosting อย่างเดียวไม่พอ

ใกล้เคียงกับ:

โรงงาน + ร้าน + คลัง + ศูนย์กระจายสินค้า + ห้องรักษาความปลอดภัย

และฐานข้อมูลก็อยู่ในพื้นที่เดียวกัน

GitHub กับ Cloudflare มีส่วนทับซ้อน แต่แกนหลักต่างกัน

5. Build คืออะไร — เปลี่ยนแบบพิมพ์เขียวให้เป็นสินค้าสำเร็จ

ไฟล์ใน repository มักยังไม่ใช่เว็บไซต์สำเร็จรูป

เครื่องมือช่วยทำเว็บอย่าง Astro แปลงเนื้อหา ส่วนต่าง ๆ ของหน้าเว็บ การตั้งค่า และโค้ดเป็น HTML CSS JavaScript ที่พร้อมส่งให้ผู้เข้าชม

การแปลงนี้คือ Build

Cloudflare Workers Builds สามารถตอบสนองต่อ push ใน Git repository ที่เชื่อมต่อ รัน build command แล้วตามด้วย deploy command

ดังนั้น:

GitHub = กล่องโมเดล

Build = ประกอบ

Deploy = เอาของสำเร็จไปวางบนชั้น

Build log ยาวเพราะเป็นบันทึกโรงงาน

อยากดูเว็บอย่างเดียว

แต่ได้รายงานสายการผลิตมาแทน

6. D1 กับ KV — เก็บข้อมูลเหมือนกัน ทำไมต้องสองอย่าง

D1 คือฐานข้อมูล SQL ของ Cloudflare เก็บข้อมูลเป็นตาราง และใช้คำสั่ง SQL แบบ SQLite เพื่อหาข้อมูลในแถวที่ตรงกับเงื่อนไข

คิดเป็นสมุดบัญชีทางการที่มีแถว คอลัมน์ query และความสัมพันธ์

KV เก็บชื่อคู่กับค่าของชื่อนั้น เช่น ชื่อ “โหมดเว็บไซต์” คู่กับค่า “ปกติ”

ตัวอย่าง:

  • site_mode → normal
  • feature_x → true
  • user_123_theme → dark

เหมือนพจนานุกรมขนาดใหญ่

KV เหมาะกับการอ่านเร็วและ cache ทั่วโลก แต่เป็น eventual consistency Cloudflare ระบุว่าพื้นที่อื่นอาจเห็นค่ารุ่นเก่าอยู่ชั่วคราว บางครั้ง 60 วินาทีหรือมากกว่า

ดังนั้น:

D1 = สมุดบัญชีทางการ

KV = พจนานุกรมเร็วหรือกระดานโน้ต

“ข้อมูลทั้งหมดรวมที่เดียวไม่ได้หรือ” เป็นคำถามที่สมเหตุสมผลมาก

แต่ระบบกระจายไม่ได้เกิดมาเพื่อทำให้มนุษย์สบายใจ

7. GitHub กับ Cloudflare ใครวิ่งเองเก่งกว่า

ขึ้นกับงาน

GitHub Actions ทำ build, test, deploy อัตโนมัติเมื่อมี repository event

Cloudflare Workers ทำงานต่อเนื่องเป็น API ได้ ส่วน Workflows จำว่าทำขั้นไหนเสร็จแล้ว ลองขั้นที่พลาดใหม่ รอเมื่อจำเป็น และกลับมาทำต่อจากจุดเดิมได้

เปรียบเทียบ:

GitHub = วิศวกรเก่งด้านออกแบบ เปลี่ยน และซ่อม

Cloudflare = โรงงานอัตโนมัติเก่งด้านเดินกระบวนการที่กำหนดไว้

ถ้าต้องหาว่าโค้ดผิดตรงไหนและแก้ GitHub เป็นศูนย์กลางที่เป็นธรรมชาติ

ถ้าต้อง “พางานไปจนจบ พลาดแล้วลองใหม่” Cloudflare เป็นธรรมชาติกว่า

งานต่างกัน

8. ทุกคนเรียนเรื่องนี้เมื่อไร — ไม่ได้เรียนกันทุกคน

GitHub พบบ่อยในวิชาคอมพิวเตอร์ ห้องวิจัย และงานซอฟต์แวร์

Cloudflare, AWS, GCP, database, CI/CD หลายคนเพิ่งเรียนเมื่อจำเป็นต้อง deploy และดูแลบริการจริง

คนที่ไม่ใช่วิศวกรอาจทำงานทั้งชีวิตโดยไม่แตะ Cloudflare Workers ก็ปกติ

คนทำงานเศรษฐศาสตร์ บัญชี ฝ่ายขาย บุคคล หรือดูแลงานประจำ อาจใช้ Excel เป็นเครื่องมือหลักหลายปีโดยไม่ต้องดูแลระบบเว็บ

ดังนั้นไม่ใช่ “คนอื่นรู้หมด มีเราไม่รู้”

แต่คือ:

คุณเปิดกล่องเครื่องมือของอีกอาชีพหนึ่ง

วันหนึ่งเรียนว่าซื้อของเพิ่มอีกชิ้นแล้วได้ประโยชน์เพิ่มแค่ไหน อีกวันโดนเรื่องข้อมูลแต่ละที่อัปเดตไม่พร้อมกันตีหัว

ปกติไม่อยู่ในวิชาเดียวกัน

9. สรุป — ไม่ต้องจำทุกอย่าง แค่รู้ว่าใครทำหน้าที่อะไร

แผนที่แรกนี้พอแล้ว:

ชื่อ ความหมายสั้น ๆ
GitHub แบบพิมพ์เขียวและประวัติ
Build แปลงไฟล์ต้นฉบับเป็นเว็บที่พร้อมใช้
Deploy นำเว็บที่เสร็จแล้วไปให้คนเข้าใช้
Cloudflare Workers งานฝั่ง server
D1 สมุด SQL
KV พจนานุกรม Key-Value เร็ว
GitHub Actions automation ฝั่ง GitHub
Cloudflare Workflows งานอัตโนมัติยาว ๆ ที่จำว่าทำถึงไหนแล้ว

เมื่อมี error คุณสามารถแยกได้ว่าเป็น GitHub, Build, Worker หรือ DB

แค่แยกประเภทได้ โลกก็เงียบลงเยอะ

ความจุสมองเต็มไม่ใช่เพราะเข้าใจช้า

แต่เพราะย้ายจาก Excel ซึ่งเหมือนห้องเดียว ไปยังห้องควบคุมอาคารของห้างทั้งหลัง

ตั้งใจแค่เปลี่ยนหลอดไฟ

ตอนนี้มีคนอธิบายประตูกันไฟ

เอกสารอ้างอิง (7 รายการ)


ลึกลงไปอีกนิด: ทำอย่างไรให้ผู้อ่านจากจีนพบเว็บไซต์? ลงทะเบียนกับ Baidu และแจ้งบทความใหม่

โฆษณาหนังสือในหัวข้อนี้

  • The Pragmatic Programmer (ฉบับภาษาอังกฤษ)

    Andy Hunt, Dave Thomas / Pragmatic Programmer / 1999

    หนังสือในด้าน การเขียนโปรแกรม ซึ่งเป็นสาขาของบทความนี้

บทความนี้มีลิงก์พันธมิตร (โฆษณา). เกี่ยวกับโฆษณา As an Amazon Associate I earn from qualifying purchases.

แชร์บทความนี้

หากบทความนี้มีประโยชน์ คุณสามารถสนับสนุนเว็บไซต์ได้ สนับสนุน

โฆษณา
โฆษณา
โฆษณา

อีกสักเรื่องไหม มีอะไรสนุก ๆ บ้าง

อ่านจบแล้วก็ลองต่อเลย: เรื่องใกล้เคียงไม่กี่เรื่อง และเรื่องที่ต่างไปเลยแต่สนุก

  1. ทำไม “Yohohoho” ของ Ado กลับมาฮิต? เพลง Binks' Sake ถูกรีมิกซ์จนมีคนเล่นด้วยเมโลเดียน
  2. ทำไมพิธีกรหญิงใน TODAY ถึงรีบห้ามเมื่ออัล โรเกอร์พูดว่า “Big Red”?
  3. ว่าที่แม่สามีจะ "ตัดสิน" ว่ายอมรับเราไหม แฟนพูดแค่ "แม่ก็แค่เป็นห่วง" สรุปใครมีสิทธิ์ตัดสินใจ และทำไมคำว่า "ต้องมีความคิดริเริ่ม" ทำให้คนเก่งลาออก
  4. Smash Ultimateทำไม Mythra ตีก่อนแล้วแพ้ Kazuya กับ K. Rool?

วันนี้อ่านเรื่องนี้

แต่ละบทความตอบคำถามที่ผู้อ่านบทความนี้มักสงสัยต่อ

ดูบทความทั้งหมดบทความเรื่อง เทคโนโลยี เพิ่มเติม

หาบทความอื่น

บทความทั้งหมด

Mendoi-chan

ผู้ดูแลเว็บไซต์

Mendoi-chan

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

โฆษณา

บทความล่าสุด

  1. 1ทำไม ChatGPT Plus เห็น Dots แต่ใช้งานไม่ได้? เรื่องตลกของป้ายชื่อกับประตูล็อก
  2. 2ท่าเต้นรัมเพิลสติลต์สกินมาจากหนังเก่าเรื่องไหน? ไม่มีหนังเรื่องนั้น
  3. 3เกมต่างโลกโยนภารกิจมาไม่หยุด แต่ฉันแค่อยากกลับบ้านให้เร็วที่สุด
  4. 42XKO เตรียมเพิ่ม Sett กับ Samira วันที่ 27 ต.ค. แต่จะเป็นตัวละครใหม่ชุดสุดท้ายจริงหรือ?
  5. 5ชนะชีวิตในเกม 1 in 8 Billion คืออะไร? อายุยืน เงินเยอะ หรือคนที่รัก
โฆษณา