ทำไม GitHub Copilot ในแอปถึงเปลี่ยนชีวิตมือใหม่
เวลาเราให้ AI ช่วยเขียนโค้ด ปกติเรามักจะก๊อปปี้โค้ดไปวางในโปรแกรมเขียนโค้ด แล้วสลับหน้าจอไปมาเพื่อดูผลลัพธ์ การทำแบบนี้ทำให้เราเสียสมาธิและหลงทางได้ง่ายมาก GitHub Copilot app (แอปช่วยเขียนโปรแกรมด้วยปัญญาประดิษฐ์) จึงเข้ามาแก้ปัญหานี้โดยรวมทุกอย่างไว้ที่เดียว
ลองจินตนาการว่าคุณกำลังทำอาหาร ถ้าต้องวิ่งไปดูตำราในห้องนั่งเล่น แล้ววิ่งไปหั่นผักในครัว จากนั้นวิ่งไปดูเตาที่ระเบียง คุณจะเหนื่อยและทำพลาดได้ง่าย Workflow (ขั้นตอนการทำงาน) ในการเขียนโปรแกรมก็เหมือนกัน การมีทุกอย่างอยู่ข้างกันช่วยให้เราตรวจสอบงานของ AI ได้แม่นยำขึ้น
แอปนี้มีหน้าจอหลักสามส่วนคือส่วนดูการเปลี่ยนแปลง ส่วนสั่งงานเครื่อง และส่วนแสดงผลหน้าเว็บ การใช้งานทั้งสามส่วนนี้พร้อมกันจะช่วยให้คุณมั่นใจว่าโค้ดที่ AI เขียนให้ มันทำงานได้จริงและปลอดภัยก่อนเอาไปใช้งานต่อ
ใช้ Diff panel ตรวจสอบโค้ดก่อนกดรับ
Diff panel (หน้าต่างเปรียบเทียบโค้ดก่อนและหลัง) คือหัวใจสำคัญของการตรวจงาน AI มันจะแสดงให้เห็นว่าสิ่งที่ AI เพิ่มเข้ามา (สีเขียว) หรือสิ่งที่ถูกลบทิ้งไป (สีแดง) มีตรงไหนบ้าง
มือใหม่หลายคนมักกดรับโค้ดทันทีเพราะความตื่นเต้น แต่การอ่าน Diff จะช่วยให้คุณเรียนรู้ว่า AI แก้ไขบั๊ก (ข้อผิดพลาดของโปรแกรม) อย่างไร การทำความเข้าใจที่มาที่ไปของโค้ดสำคัญพอๆ กับการเขียนโค้ดให้ผ่าน
หากคุณเห็นโค้ดที่ AI เพิ่มมาแล้วไม่มั่นใจ คุณสามารถใส่คอมเมนต์หรือสั่งให้มันแก้ไขใหม่ได้ทันที คุณคือคนตัดสินใจสูงสุด ไม่ใช่ AI ดังนั้นจงใช้หน้าต่างนี้เพื่อตรวจสอบทุกบรรทัดก่อนตกลงใจ
// ตัวอย่างการเปลี่ยนค่าที่ AI เสนอมา
// เดิม: const price = 100;
// ใหม่: const price = 150; // เพิ่มราคาขึ้น 50
ในตัวอย่างนี้ บรรทัดที่มีเครื่องหมายลบคือค่าเก่า และบรรทัดที่มีบวกคือค่าใหม่ที่ AI เปลี่ยนให้ ผลลัพธ์ที่ควรเห็น คือแถบสีเขียวทับบรรทัดใหม่ และแถบสีแดงทับบรรทัดเก่า เพื่อให้เราเปรียบเทียบได้ทันทีว่าค่าเปลี่ยนไปอย่างไร
รันคำสั่งใน Terminal panel เพื่อทดสอบโค้ด
แค่ดูโค้ดว่าสวยงามอาจไม่พอ เราต้องลองรัน (สั่งให้โปรแกรมทำงาน) ดูด้วย Terminal panel (หน้าต่างพิมพ์คำสั่งคอมพิวเตอร์) ในแอปช่วยให้เราสั่งรันโปรเจกต์ได้โดยไม่ต้องสลับหน้าจอออกไปที่อื่น
มือใหม่อาจจะกลัวหน้าจอสีดำที่มีตัวหนังสือวิ่งผ่าน แต่จริงๆ แล้วเราแค่พิมพ์คำสั่งที่โปรเจกต์เตรียมไว้ให้ เช่น การสั่งเปิดเซิร์ฟเวอร์ (คอมพิวเตอร์ที่รอรับคำสั่งจากเว็บเรา) เพื่อดูว่าโค้ดทำงานได้ไหม
คุณสามารถเปิดหน้าต่างนี้หลายๆ อันเพื่อทำงานคู่ขนานกันได้ เช่น อันหนึ่งเปิดไว้ดูการทำงานของโปรแกรม อีกอันเปิดไว้เช็คความเรียบร้อยของฐานข้อมูล (ที่เก็บข้อมูลของแอป) ทำให้เราเห็นภาพรวมของระบบทั้งหมด
# สั่งติดตั้งโปรเจกต์และรันเว็บ
npm install
npm run dev
คำสั่ง npm install จะทำการติดตั้งไฟล์เสริมที่จำเป็น ส่วน npm run dev คือการเริ่มเปิดเซิร์ฟเวอร์จำลอง ผลลัพธ์ที่ควรเห็น คือข้อความ "Server running at localhost:3000" ปรากฏขึ้นมา ซึ่งแปลว่าเว็บของคุณพร้อมให้เปิดดูแล้ว
ทดสอบหน้าตาเว็บด้วย Browser panel
เมื่อโปรแกรมรันแล้ว เราต้องมาดูผลลัพธ์หน้าตาจริงๆ กัน Browser panel (หน้าต่างแสดงผลเว็บไซต์ในตัวแอป) จะทำหน้าที่เหมือนเบราว์เซอร์ปกติ ให้เราลองกดปุ่มหรือกรอกข้อมูลเพื่อทดสอบฟีเจอร์ (ความสามารถของโปรแกรม) ใหม่ที่เพิ่งเขียน
ถ้าคุณพบว่าปุ่มกดไม่ติดหรือสีเพี้ยน คุณสามารถใช้เครื่องมือ Pick & Polish (เครื่องมือเลือกและปรับแต่งส่วนประกอบ) เพื่อคลิกเลือกจุดที่ต้องการแก้ แล้วพิมพ์บอก AI ให้ช่วยปรับแก้ได้ทันทีในหน้าต่างนี้
การแก้ไขแบบนี้ทำให้เราเห็นผลลัพธ์แบบเรียลไทม์ (ทันทีทันใด) หากแก้แล้วยังไม่พอใจ ก็แค่สั่งรันเซิร์ฟเวอร์ใหม่แล้วดูผลลัพธ์อีกครั้ง วิธีนี้จะช่วยให้คุณพัฒนาฟีเจอร์ได้เร็วขึ้นมาก
จุดที่มือใหม่มักพลาดคือลืมกดบันทึกไฟล์ก่อนรันใหม่ ทำให้เห็นผลลัพธ์เก่าตลอดเวลา วิธีแก้ คือตรวจสอบให้แน่ใจว่าไฟล์ถูกบันทึกแล้วก่อนจะรันคำสั่งซ้ำ เพื่อให้มั่นใจว่าการเปลี่ยนแปลงที่คุณเพิ่งแก้ไปถูกนำไปใช้จริงๆ
ปิดลูปการตรวจงานเพื่อความมั่นใจ
การทำงานที่สมบูรณ์คือการวนลูป: ตรวจ Diff, รันคำสั่ง, และดูผลใน Browser เมื่อทุกอย่างทำงานได้ถูกต้องตามที่ต้องการแล้ว คุณถึงค่อยกดตกลงรับการเปลี่ยนแปลง (Accept) และสร้าง Pull request (คำขอรวมโค้ดเข้ากับโปรเจกต์หลัก)
การทำทุกอย่างในแอปเดียวช่วยลดความสับสนและป้องกันการหลงลืมว่าเราแก้ไขอะไรไปบ้าง คุณจะไม่ต้องเจอปัญหา "ทำไมเมื่อกี้รันผ่าน แต่ตอนนี้พัง" เพราะทุกอย่างอยู่ในหน้าจอเดียวกันให้คุณเห็นชัดๆ
การตรวจสอบผ่านสามช่องทางนี้จะทำให้โค้ดที่ AI เขียนดูไม่น่ากลัวอีกต่อไป คุณจะเปลี่ยนจากการเป็นแค่คนคอยกดรับโค้ด มาเป็น "หัวหน้างาน" ที่ตรวจสอบคุณภาพงานของ AI ได้อย่างมืออาชีพ
สรุป: ฝึกใช้เครื่องมือเพื่อก้าวสู่โปรแกรมเมอร์มืออาชีพ
ก่อนจะตกลงรับโค้ดจาก AI ทุกครั้ง ให้ถามตัวเองสามข้อ: 1. โค้ดเปลี่ยนไปอย่างไรบ้าง 2. โค้ดนี้รันผ่านไหม และ 3. ฟีเจอร์ทำงานได้ถูกต้องจริงหรือเปล่า การใช้เครื่องมือใน GitHub Copilot app จะช่วยตอบคำถามเหล่านี้ได้ครบ
ลองนึกภาพว่าคุณกำลังทำโปรเจกต์เว็บรวมร้านอาหาร ถ้า AI ช่วยเพิ่มฟังก์ชันค้นหาร้าน คุณต้องใช้ Diff ดูว่ามันเพิ่มโค้ดค้นหาตรงไหน, ใช้ Terminal สั่งรันฐานข้อมูล, และใช้ Browser ลองพิมพ์ชื่อร้านเพื่อดูว่ามันค้นหาเจอไหม
ถ้าคุณฝึกใช้เครื่องมือเหล่านี้จนคล่อง คุณจะทำงานได้เร็วและแม่นยำขึ้น การควบคุมคุณภาพโค้ด คือทักษะสำคัญที่บริษัทไอทีต้องการจากโปรแกรมเมอร์รุ่นใหม่ ฝึกใช้มันให้ชิน แล้วคุณจะก้าวข้ามจากคนหัดเขียนโค้ดไปสู่คนที่สร้างซอฟต์แวร์ที่มีคุณภาพได้จริง
ที่มา: GitHub Copilot app for Beginners: Using the diff, terminal, and browser — The GitHub Blog
