Phase 2: Build & Iterate

เกริ่นนำ Phase 2: ลงมือสร้างจริงกับ Claude

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

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

สร้างเว็บไซต์ทีละส่วน (Section by Section) คืออะไร?

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

ในกรณีของเว็บไซต์ Portfolio เราก็จะให้ Claude เริ่มสร้างส่วนแรกสุดก่อน เช่น ส่วน 'Hero Section' (ส่วนหัวเว็บไซต์ที่แนะนำตัวเรา) พอส่วนนี้เสร็จ เราก็จะตรวจดูว่าถูกใจไหม ถ้าไม่ถูกใจก็บอกให้ Claude แก้ไข พอส่วน Hero เสร็จเรียบร้อย เราค่อยไปต่อส่วน 'About Me' (เกี่ยวกับฉัน) ส่วน 'Projects' (ผลงาน) และส่วน 'Contact' (ติดต่อ) ไปเรื่อยๆ จนครบทั้งเว็บไซต์ครับ

สั่ง Claude ให้เริ่มสร้าง Hero Section ด้วย Prompt ที่ชัดเจน

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

ลองใช้ Prompt ประมาณนี้ดูนะครับ เพื่อให้ Claude เริ่มต้นสร้าง Hero Section ของเรา: 'เริ่ม build portfolio ตาม design ที่เลือก ใช้ React + TailwindCSS ทำทีละ section เริ่มจาก hero ก่อน เสร็จแล้วเปิดให้ดูใน localhost'

จาก Prompt นี้ Claude จะเข้าใจว่าเราต้องการสร้าง Portfolio โดยใช้เทคโนโลยี React (เป็นเครื่องมือสร้างเว็บไซต์ที่นิยม) และ TailwindCSS (เป็นเครื่องมือช่วยแต่งหน้าตาเว็บให้สวยงาม) และให้เริ่มที่ส่วน Hero ก่อน พอสร้างเสร็จแล้ว ให้มันแสดงผลให้เราดูใน localhost ครับ

1. คัดลอก Prompt ตัวอย่างด้านบน หรือปรับแต่งตามความต้องการของคุณ
2. นำ Prompt นั้นไปวางในช่องแชทของ Claude แล้วกดส่ง

ดูผลงานแบบสดๆ ด้วย Localhost

หลังจากที่ Claude สร้างโค้ดให้เราแล้ว มันมักจะบอกวิธีให้เรา 'รัน' โค้ดนั้นบนเครื่องคอมพิวเตอร์ของเราเอง เพื่อให้เราสามารถเปิดดูเว็บไซต์ที่เรากำลังสร้างได้แบบสดๆ ครับ สิ่งที่เราจะใช้ดูผลงานนี้เรียกว่า localhost (อ่านว่า โลคอลโฮสต์)

localhost ก็เหมือนกับ 'ห้องทดลอง' ส่วนตัวบนคอมพิวเตอร์ของเราครับ เมื่อ Claude สร้างโค้ดให้แล้ว เราก็นำโค้ดนั้นมารันใน localhost แล้วเปิดเว็บเบราว์เซอร์ (เช่น Chrome, Firefox) พิมพ์ที่อยู่ http://localhost:3000 (หรือพอร์ตอื่นๆ ที่ Claude แนะนำ) เราก็จะเห็นเว็บไซต์ที่เราสร้างขึ้นมาทันที

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

1. เมื่อ Claude ให้โค้ดมา ให้ทำตามคำแนะนำของ Claude เพื่อรันโปรเจกต์บน localhost (มักจะเป็นคำสั่งเช่น npm start หรือ yarn dev ใน Terminal/Command Prompt)
2. เปิดเว็บเบราว์เซอร์ (เช่น Google Chrome)
3. พิมพ์ที่อยู่ http://localhost:3000 (หรือตามที่ Claude บอก) ในช่อง URL แล้วกด Enter เพื่อดูผลงาน

ปรับปรุงและเพิ่มลูกเล่นให้เว็บไซต์สวยงามยิ่งขึ้น

เมื่อโครงสร้างหลักของเว็บไซต์แต่ละส่วนเสร็จเรียบร้อยแล้ว (เช่น Hero, About, Projects, Contact) เราก็มาถึงขั้นตอนของการ 'เพิ่มลูกเล่น' และ 'ปรับปรุง' ให้เว็บไซต์ของเราดูน่าสนใจและใช้งานได้ดียิ่งขึ้นครับ

เราสามารถบอก Claude ให้เพิ่มลูกเล่นต่างๆ ได้ทีหลัง เช่น ขอให้เพิ่ม scroll animation (ภาพเคลื่อนไหวเมื่อเลื่อนหน้าจอ), hover effect (เอฟเฟกต์เมื่อเอาเมาส์ไปชี้), ทำให้เว็บไซต์ responsive mobile (ปรับขนาดหน้าจอให้สวยงามเมื่อเปิดบนมือถือ) หรือแม้กระทั่งเพิ่ม dark mode (โหมดกลางคืน) ได้ครับ การทำแบบนี้จะช่วยให้เว็บไซต์ของเราดูเป็นมืออาชีพและทันสมัยมากขึ้น

เหมือนกับการที่เราสร้างบ้านเสร็จแล้ว เราก็ค่อยมาตกแต่งภายใน ทาสี เพิ่มเฟอร์นิเจอร์สวยๆ เพื่อให้บ้านน่าอยู่และตอบโจทย์การใช้งานนั่นเองครับ

1. เมื่อแต่ละ section เสร็จแล้ว ให้ตรวจสอบว่ามีอะไรที่อยากปรับแก้หรือเพิ่มเติม
2. บอก Claude ด้วย Prompt ที่ชัดเจน เช่น 'เพิ่ม scroll animation ให้กับ section นี้' หรือ 'ทำให้เว็บไซต์ responsive สำหรับมือถือ'
3. ตรวจสอบผลลัพธ์บน localhost และปรับแก้จนกว่าจะพอใจ

สรุปหัวใจสำคัญของ Phase 2: สร้างและปรับปรุง

ใน Phase 2 นี้ หัวใจสำคัญคือการ 'ลงมือสร้าง' และ 'ปรับปรุง' อย่างต่อเนื่องครับ เราจะทำงานร่วมกับ Claude โดยให้มันสร้างเว็บไซต์ของเรา 'ทีละส่วน' (section by section) จากนั้นเราก็จะ 'ตรวจทาน' ผลงานของ Claude ในแต่ละขั้นอย่างละเอียด

เราจะใช้ localhost เป็นเครื่องมือสำคัญในการดูผลงานแบบสดๆ และเมื่อโครงสร้างหลักของเว็บไซต์เสร็จสมบูรณ์แล้ว เราก็ค่อยกลับมา 'เพิ่มลูกเล่น' ต่างๆ เช่น animation, responsive design หรือ dark mode เพื่อให้เว็บไซต์ Portfolio ของเราสมบูรณ์แบบที่สุดครับ