จากไอเดียสู่เว็บจริง: เบื้องหลังการสร้าง BonDevLab

จุดเริ่มต้น BonDevLab: จากไอเดียบนหน้าจอ สู่เว็บไซต์ของตัวเอง

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

ความคิดนี้กลายมาเป็น BonDevLab ห้องทดลองส่วนตัวที่เริ่มต้นจากการทำเว็บไซต์ของตัวเอง โดยมี ChatGPT และ Claude Code เป็นผู้ช่วย ตั้งแต่คุยเรื่องแนวคิด วางโครงสร้าง ไปจนถึงเขียนโค้ดและเตรียมนำเว็บขึ้นเซิร์ฟเวอร์

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

เริ่มจากเว็บเล็ก ๆ ที่มีหน้าที่ชัดเจน

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

ผมจึงเริ่มจากขอบเขตที่พอจัดการได้:

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

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

ChatGPT กับ Claude Code ช่วยคนละช่วงของงาน

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

ส่วน Claude Code เป็นผู้ช่วยลงมือกับโปรเจกต์บนเครื่อง ทั้งสร้างและแก้ไขไฟล์ เขียนโค้ด และช่วยตรวจสอบปัญหาที่เกิดขึ้น

วิธีแบ่งงานที่เหมาะกับผมคือ คุยให้ชัดก่อนว่าต้องการผลลัพธ์แบบไหน แล้วส่งงานที่มีขอบเขตให้ Claude Code ทำ เมื่อได้ผลลัพธ์จึงเปิดดูและลองใช้งานจริง หากมีจุดที่ไม่ตรงความต้องการ ก็กลับมาอธิบายและแก้เป็นรอบ ๆ

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

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

เครื่องมือแต่ละตัวอยู่ตรงไหนของเว็บนี้

ช่วงแรก ชื่อเครื่องมือหลายตัวอาจดูเหมือนทำหน้าที่ซ้ำกัน แต่พอแยกออกเป็นส่วน ๆ ภาพจะชัดขึ้น

เครื่องมือ	หน้าที่ใน BonDevLab
Django	โครงสร้างหลักของเว็บฝั่งเซิร์ฟเวอร์ รองรับหน้าเว็บ ข้อมูล และระบบบัญชีผู้ใช้
Git และ GitHub	บันทึกประวัติการแก้ไข และเก็บโค้ดของโปรเจกต์ไว้ในที่เดียว
DigitalOcean Droplet	เครื่องเซิร์ฟเวอร์ที่ใช้รันเว็บให้เข้าถึงจากอินเทอร์เน็ต
Namecheap	ผู้ให้บริการที่ผมใช้จดชื่อโดเมน bondevlab.com
DNS	เชื่อมชื่อโดเมนเข้ากับปลายทางที่ให้บริการเว็บ
HTTPS	เข้ารหัสการรับส่งข้อมูลระหว่างเบราว์เซอร์กับเว็บ

ผมเลือกทำเว็บด้วย Django เพราะทิศทางของ BonDevLab มีทั้งเนื้อหา บัญชีผู้ใช้ และพื้นที่ส่วนตัว จึงต้องการฐานที่รองรับการพัฒนาเป็นระบบมากกว่าหน้าแนะนำตัวเพียงหน้าเดียว

GitHub ช่วยให้มีประวัติว่าแก้อะไรไปบ้าง และเป็นจุดกลางสำหรับนำโค้ดจากเครื่องพัฒนาไปใช้งานบนเซิร์ฟเวอร์ อย่างไรก็ตาม โค้ดเป็นเพียงส่วนหนึ่งของเว็บ ข้อมูลในฐานข้อมูลและไฟล์ที่อัปโหลดต้องมีแผนสำรองของตัวเองด้วย

ส่วน Droplet ตอบโจทย์การมีเครื่องสำหรับรัน Django และเปิดโอกาสให้ผมเรียนรู้การดูแลเซิร์ฟเวอร์ไปด้วย สิ่งที่ตามมาคือผมต้องรับผิดชอบการตั้งค่า อัปเดต และสำรองข้อมูล ไม่ใช่เพียงนำไฟล์ขึ้นไปแล้วจบ

ถ้ามองจากฝั่งคนอ่าน เมื่อพิมพ์ bondevlab.com เบราว์เซอร์จะอาศัย DNS เพื่อหาปลายทาง แล้วเชื่อมต่อไปยังเซิร์ฟเวอร์ที่ให้บริการเว็บ ส่วน GitHub จะ อยู่ในกระบวนการพัฒนาและส่งโค้ด ไม่ได้เป็นจุดที่ผู้อ่านต้องผ่านทุกครั้งที่เปิดเว็บ

จากเครื่องตัวเองไปสู่เว็บบนอินเทอร์เน็ต

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

เมื่อส่วนหลักเริ่มพร้อม จึงตรวจการเปิดหน้าเว็บ ลิงก์ การเข้าสู่ระบบ และการแยกพื้นที่สาธารณะกับพื้นที่ส่วนตัว โดยเฉพาะเรื่องสิทธิ์เข้าถึง เพราะการซ่อนปุ่มหรือลิงก์อย่างเดียวไม่ได้แปลว่าหน้านั้นได้รับการป้องกันแล้ว

ลำดับงานโดยรวมที่ผมใช้เป็นกรอบคือ:

1. กำหนดขอบเขต — ตกลงก่อนว่าเว็บรุ่นแรกต้องทำอะไรได้
2. พัฒนาบนเครื่อง — สร้างหน้าเว็บและระบบหลักให้ลองใช้งานได้
3. ทดสอบและแก้ไข — ตรวจทั้งการแสดงผลและพฤติกรรมของระบบ
4. เก็บโค้ดบน GitHub — บันทึกการเปลี่ยนแปลงก่อนนำไปใช้งานต่อ
5. เตรียมเซิร์ฟเวอร์ — ตั้งค่าสิ่งที่จำเป็นสำหรับรันเว็บและข้อมูลของเว็บ
6. เชื่อมโดเมนและ HTTPS — ให้เข้าถึงผ่านชื่อเว็บ พร้อมตรวจการเชื่อมต่อจริง

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

สิ่งที่ได้เรียนรู้ตั้งแต่ช่วงแรก

เว็บรันบนเครื่องได้ เป็นเพียงจุดหนึ่งของงาน

การเปิดเว็บจากเครื่องตัวเองได้ช่วยยืนยันว่าระบบเริ่มทำงาน แต่เมื่อนำไปใช้บนเซิร์ฟเวอร์ ยังมีค่าการเชื่อมต่อ ฐานข้อมูล ไฟล์ประกอบหน้าเว็บ โดเมน และสิทธิ์ต่าง ๆ ที่ต้องตรวจอีกครั้ง

สิ่งที่ผมได้เรียนรู้คือควรแยกการตรวจออกเป็นช่วง ตรวจว่าเว็บทำงานบนเครื่องได้ก่อน แล้วตรวจสภาพแวดล้อมบนเซิร์ฟเวอร์ จากนั้นจึงตรวจการเข้าถึงผ่านโดเมน วิธีนี้ช่วยให้รู้ว่าควรเริ่มหาปัญหาจากตรงไหน

การเลือกที่รันเว็บ ต้องดูว่าเว็บของเราต้องใช้อะไร

ระหว่างวางแผน ผมเคยพิจารณา Firebase Hosting ด้วย แต่เมื่อโปรเจกต์เดินมาทาง Django แล้ว ประเด็นสำคัญคือจะรันส่วนฝั่งเซิร์ฟเวอร์ที่ไหน การมีพื้นที่เผยแพร่ไฟล์หน้าเว็บอย่างเดียวไม่ได้ครอบคลุมความต้องการทั้งหมดของโปรเจกต์นี้

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

คำว่า “กุญแจ” มีหน้าที่และวิธีเก็บรักษาที่ต้องเข้าใจ

การเตรียมเซิร์ฟเวอร์ทำให้ผมเจอ SSH key และต้องทำความเข้าใจว่ามันเกี่ยวข้องกับการเข้าสู่เครื่องอย่างไร กุญแจสาธารณะเป็นส่วนที่นำไปตั้งค่ากับเซิร์ฟเวอร์ ส่วนกุญแจส่วนตัวต้องเก็บรักษาไว้กับเรา

เรื่องนี้ทำให้เห็นว่า งานดูแลเว็บมีทั้งโค้ดและการจัดการสิทธิ์เข้าถึง ข้อมูลลับ เช่น รหัสผ่านหรือกุญแจส่วนตัว จึงไม่ควรถูกใส่ปะปนกับโค้ดที่ส่งขึ้น repository

บันทึกต่อไปของ BonDevLab

ผมอยากให้บทความนี้เป็นจุดเริ่มต้นสำหรับมองเห็นภาพรวม ส่วนรายละเอียดจะค่อย ๆ แยกเขียนเป็นเรื่องที่เปิดอ่านและทำความเข้าใจได้ทีละขั้น ได้แก่ การแบ่งงานระหว่าง ChatGPT กับ Claude Code การจดโดเมนและตั้ง DNS การเก็บโค้ดบน GitHub และการนำ Django ขึ้นเซิร์ฟเวอร์

อีกส่วนที่อยากเก็บไว้คือปัญหาที่พบจริง พร้อมอาการ วิธีตรวจ และวิธีแก้ เพราะสิ่งเหล่านี้น่าจะมีประโยชน์ทั้งกับคนที่กำลังเริ่มและกับตัวผมเองเมื่อกลับมาทำอีกครั้ง

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