อยากทำเว็บง่าย ๆ ไม่ต้องเขียนเองล่ะ ใช้ GitHub Copilot เขียนให้

Learning Jun 2, 2025

แล้วให้สั่งให้มันเขียน unit test และ commit code ให้อีก เอาดิ๊

พบกับ session ที่ร้อนแรง คนลงทะเบียนเต็มจำนวน กับ “Building applications with GitHub Copilot agent mode”

สอนโดยคุณเปรม กิตติกร ประเสริฐศักดิ์ จาก BorntoDev และเขาเป็น Microsoft MVP - Developer Technologies ด้วยนะ บอกเลยว่าเราเห็นโพสโครงการ Microsoft AI Skills Training Series จากเพจเขาเลย พร้อมจิ้มสมัคร session นี้เป็นอันแรกโดยไม่ลังเล แถมสนุกมาก ๆ เอาไปใช้จริงได้เลย

สำหรับใครที่พลาดไปเรามีสรุปไว้ให้นะ อ่ะลุย

Github คืออะไร?

แน่นอนว่าชาวเดฟจะต้องรู้จักดีอยู่ล่ะ แต่คนทั่วไปอาจจะยังไม่รู้จัก

Github เป็น platform ที่ developer เอาไว้เก็บ code ไปอยู่บน internet เพื่อให้ทีมเราสามารถทำงานร่วมกันได้ ใครแก้โค้ดตรงไหนจะมีบอก และมีเรื่องการจัดการ version มีการ save เป็น version ให้เราไม่ต้องเซฟทับ เขาจัดการให้เราแล้ว

และทั้งหมดนี้ก็คือ git นั่นแหละ แต่เก็บอยู่บน hub เลยเรียกว่า Github ไหมนะ 🤔 😂

แล้วเขามีบริการเยอะมาก นอกจากจะใช้เก็บ code และลากเพื่อนเข้ามาใน repository เดียวกันได้แล้ว ยังมี

Github Codespaces ที่เหมือนเป็น IDE บนเว็บ ที่สามารถเก็บโค้ดและรันต่าง ๆบน online ได้เลย เขาจัดการให้ ถ้าเครื่องสเปกไม่ถึง หรือติดปัญหาการลงบางอย่าง ก็ใช้อันนี้แหละง่ายดี
Discussions เอาไว้คุยกัน
Github Actions เอามาทำ automate และพวก CI/CD เช่น เอามาทำเทส ใช้บิ้วแอพ

แล้วยังมีส่วน application security enterprise อย่าง code scanning โค้ดเรามีช่องโหว่อะไรบ้าง และ secret scanning เจอ key หลุดเขาจะเตือนเรา ยับยั้งไม่ให้เรา put key ขึ้นไปบน Github

Introduction to GitHub Copilot

แล้ว GitHub Copilot เข้ามาช่วยเขียนโค้ดได้อย่างไร

ก่อนอื่นเลยตอนเปิดตัว GitHub Copilot ทุกคนในวงการเดฟฮือฮากันมาก เพราะเป็นเครื่องมือตัวแรก ๆ ที่ช่วยเขียนโค้ดใน IDE ข้อดี คือ ช่วยแรกถูกเทรนโดยโค้ดบน Github ที่มีคนทั่วโลกฝากโค้ดไว้ ในตอนนี้มีการขยายความสามารถค่อนข้างเยอะ ปกติอยู่ใน VS Code ติดตั้งได้ผ่าน extension เอ้ออแล้วลง extension อันไหนบ้างนะ

Github Copilot ตัวนี้ที่ช่วยเราเขียนโค้ด โดยการ auto-complete ให้เรา
Github Copilot Chat ก็คือ LLM นั่นแหละ แชทได้ใน IDE ไม่ต้องไปหน้า browser

ซึ่งข้อดีของมันเลย คือ อยู่บน IDE หลายตัว อย่างสาย Jetbrains อย่าง Intellij, Android Studio ก็ติดตั้งผ่าน plug-in ได้เช่นกัน

กับอีกร่างนึงของ Github Copilot Chat สามารถใช้ได้ที่หน้า browser นะ ซื้อ license Github ทีเดียว ใช้ได้หลาย model มีหลายเจ้าให้เลือกเลย ช่วยเราประหยัดเงินได้ประมาณ 1,000 บาทต่อเดือน!!

นอกจากเลือก model ได้แล้ว ยังช่วยเราทำงานได้อีก เช่น

Summarize a pull request สรุป PR ว่าเพื่อนเปิดอะไรมาบ้าง
My open pull requests ดู PR ของฉัน

แล้วการใช้งาน agent ในการทำ project ข้อจำกัดหรือข้อดีมีอะไรบ้าง ไปดูคลิปนี้ได้เลย

https://www.youtube.com/watch?v=c8MVDTou5lw

prompt ยังไงให้ของตามที่เราต้องการ 100%

Contextual Prompting: บอกภาพรวมของโปรเจกต์ให้มากยิ่งขึ้น เช่นเป็นโปรเจกต์ในการเก็บสมาชิกลูกค้า ทำให้รู้ถึงบริบทเชิงลึก
Layered Prompt: แยกส่วนของ logic ออกมาเป็นทีละ step เช่น สร้าง function แรกว่าทำอะไรได้บ้าง และบอกไปเรื่อย ๆ
Negative Prompting: บอกว่าเราไม่เอาอะไร หรือห้ามทำอะไรบ้าง เช่น โดยระบบไม่ต้องติดตั้งอย่างอื่น หรือใช้แค่ HTML CSS แบบ static
Define Output: กำหนด output ให้ชัดเจน เช่น เอาเป็น json
Iterative Refinement: ลองพัฒนาแก้ไข prompt ในแต่ละที

Management and customization considerations with GitHub Copilot

การใช้งานดูเรื่อง policy นิดนึง ในการจัดการ data

ถ้าใช้ในบริษัทซื้อ Business ดีกว่า Pro รายหัว และไม่เอาข้อมูลไป train ต่อด้วยนะ

ส่วน enterprise สามารถอ่านตรงนี้เพิ่มเติมได้

https://learn.microsoft.com/en-us/training/modules/github-copilot-management-and-customizations/3-github-copilot-contractual-protections-disabling-matching-public-code

ลองใช้งาน Github Copilot แบบคร่าว ๆ

ต่อมาเริ่มพาทำล่ะ ก่อนอื่นสร้าง project ใหม่ ก็สร้าง project ใหม่ แล้วเปิด VS Code ขึ้นมา ติดตั้ง extension และ login ให้เรียบร้อย

ลองสร้าง file main.py ดู เพิ่ม function บวกไปสักหน่อย ก็คือ มันฉลาดคิดโค้ดให้ เหมาะกับงานที่มีลักษณะเป็น pattern แทน programmer ได้ เช่น สร้าง function บวก ลบ คูณ หาร แล้วการหารเขาใส่ exception ให้ด้วย กรณีหารด้วย 0 ถ้ามีการจัดการ error ข้างนอกอาจจะลบทิ้งก็ได้ แต่มีความอันตรายบน production ส่งของที่ไม่ได้ review ออกไปคงไม่ได้

และ python ไม่มี type safe ไม่ได้ประกาศ type ของ parameter มันก็จะเขียน throw exception เรื่อง TypeError ให้เรา

การใช้งาน GitHub Copilot บน IDE หลัก ๆ จะมี

code suggestion พิมพ์ code แล้วมันเติมให้
ระบุข้อความใน comment
สร้าง node.txt เช่น พิมพ์ร่าง email ใช้แนะนำข้อมูลต่อได้ หรือช่วยเขียนข้อความต่อให้

ส่วน GitHub Copilot Chat เป็น LLM ตัวนึงที่อยู่ใน IDE สามารถพิมพ์คุยได้ เปิดโดยกด toggle chat ตรงด้านบน ถ้าเราสงสัยไม่เข้าใจ code ตรงไหน เราก็ select ใน code ตรงนั้น แล้วพิมพ์ถามตัว chat ได้เลย ไม่ต้องก็อปวาง และพอมัน suggest มาให้ เราสามารถกด apply เพื่อกดแก้ไขได้ แล้วเรา review ว่าตรงกับที่เราต้องการไหม

use cases การใช้งาน GitHub Copilot

code suggestion การเริ่มต้นทำ project ใหม่อย่างการสร้าง server ผ่าน go คนไม่ค่อยได้เขียนตัวเริ่มต้นเอง ก็ให้มันเขียนให้ได้
เอาไปเขียน document ได้ เนื่องจาก AI scan อ่าน code ได้ ประหยัดเวลาได้เยอะ
ช่วยทำงานน่าเบื่อ เช่น ทำ user demo เวลาใช้สร้างเป็น pattern ตัวแรกให้เขา ส่วนตัวอื่น ๆ รอเขาสังเกต pattern ช่วยลดเวลาทำ mock-up project

สร้างแอพจาก GitHub Copilot agent mode กัน

เรารู้แล้วว่า copilot ทำอะไรได้บ้าง ตอนนี้เรามาเริ่มสร้างของเรา ด้วย GitHub Copilot agent mode ซึ่งมันก็เหมือน guardian angel เทวดาตัวน้อยที่ช่วยเรา ลดการทำงานแบบ pattern ซํ้า ๆ และรีวิวโค้ดให้เราได้ด้วย มีบัคซ่อนไหม เขาหาให้เราได้

ปกติบน github มีคนเปิด issue ว่าอยากให้ทำอะไร เปรียบเหมือน webboard เว็บม่วง เช่นแก้ไขบัคนี้ให้หน่อย เพิ่ม feature นี้ให้หน่อย และเขียนเหมือนภาษามนุษย์ได้เลย

การใส่ issue ต้องเพิ่มคนเข้ามา เหมือน assign งานให้ และตอนนี้ให้ copilot ดูให้ได้เลย และเขาจะ บอก task แล้วเขียนโค้ดมาให้ และให้เรา review ถ้าไม่ผ่านก็บอกว่าไม่ผ่าน ถ้าผ่านก็ approve และ merge

agent ทำงานยังไง สร้าง project ใหม่ใน folder ใหม่ เราจะได้แอพและ repo กลับบ้านไป ทำหน้าเว็บคำนวณเกี่ยวกับเรื่องสุขภาพ

ก่อนอื่นเพิ่ม index.html โดยที่เราลง extension copilot ทั้งสอง และ login Github เรียบร้อยแล้วนะ

กด toggle chat ถาม copilot เปลี่ยนจากถามเป็น agent mode ได้แล้วว

เอ้อออแล้วแตกต่างยังไงกับ ask? ก่อนอื่นเลยมันมี 3 mode ด้วยกัน

ask ถาม เหมือนคุยแชทและแนบโค้ดเราไปด้วย เสมือน pair programing
edit แก้ไขหลาย ๆ ไฟล์ให้เรา
agent แก้ไขและทำงานหลายอย่างพร้อมกันได้ คล้าย ๆ ChatGPT ตัว listener model คิดหลาย step ว่าเรามีไฟล์อะไรบ้าง ความเจ๋ง คือเป็นผู้ช่วย สั่งให้ทำอะไรก็ช่วยทำให้เรา

ในวันนี้เราจะได้แอพและ repo กลับบ้านไป ทำหน้าเว็บคำนวณเกี่ยวกับเรื่องสุขภาพ ก่อนอื่นเลยทำเว็บ ก็ต้องเพิ่ม index.html กันก่อน และตรง toggle chat ถาม copilot เปลี่ยนจากถามเป็น agent mode

เอ้อแล้วก็ติดตั้ง extension live server เพื่อเปิดดูหน้าเว็บได้ (ของเราใช้ Live Preview ของ Microsoft)

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

รบกวนช่วยสร้าง website BMI calculator โดยมีแค่ HTML และ js และใช้ Tailwind.css (หรือ Bootstrap ก็ได้ หรือตัวอื่น ๆ ที่ชอบ) บอกผลลัพธ์ชัดเจนว่าค่าเป็นเท่าไหร่ และต้องทำยังไงบ้าง
รบกวนเพิ่มหน้า login อย่างง่ายโดยใช้แค่ HTML, CSS และ js โดยทำตามเงื่อนไข คือ Username ที่ถูกต้องคือ demo รหัสที่ถูกต้องคือ dome ถ้ากรอก username หรือ password ผิด ให้แสดงของผิดพลาดออกมา และต้อง required field ทั้ง username และ password ถ้า login สำเร็จ ให้ไปหน้า BMI Calculator
แสดงผลให้สวยกว่านี้โดยใช้ SweetAlert2 ในการแสดงค่า bmi โดยผลตามสถานะต่าง ๆ
เพิ่ม feature อื่นนอกจากคำนวณ bmi ที่คำนวณ เช่น ปริมาณแคลอรี่ที่ควรได้รับต่อวัน ปริมาณนํ้าที่ควรดื่มต่อวัน ปริมาณโปรตีน bmr %fat และอื่น ๆ
ไม่แสดงผลผ่าน SweetAlert2 แสดงผ่านเป็น dashboard ด้วย tailwind.css
refactor code และทำ unit test ให้หน่อย

เมื่อ prompt และ send แล้ว มันจะเขียนโค้ดให้เราเลย หน้าตาสีจะคล้าย ๆ ใน PR นิดนึง ที่เพิ่มเข้ามาเป็นสีเขียว ที่ลบออกเป็นสีแดง จากนั้นเราก็ review code ก่อน ถ้าเราโอเคกด keep และไม่โอเคกด undo ได้ ในส่วนของ login เขามีการจัดการเบื้องต้นไว้ให้เราด้วย

แล้วก็เพิ่มคุณภาพของโค้ดโดยการ clean code เข้าไป ให้เขียนใหม่ จัดระเบียบไฟล์ได้ refactor เพื่อให้ง่ายต่อการทำ unit test

ที่เราทำเป็น static website ยังไม่ได้เชื่อมต่อกับ sever ดังนั้นต้องมาลง Node.js กัน เป็นเครื่องมือในการเขียน js ให้รันบน server ได้ บอกให้มันติดตั้ง Node.js ให้หน่อย เมื่อกด continue เขาติดตั้งบน terminal ได้เลย ไปต่อไม่ ok กด undo แล้วใช้ตัวอื่นแทน และถ้าเราอยากให้มันอ่าน log ที่ terminal ได้ อย่าลืมใช้ตัว Copilot ที่ terminal ด้วยนะ

แล้วก็เอา code ขึ้นบน Github ช่วยสร้าง repo ให้ ไม่ขึ้นเองแล้ว555 แต่มันสร้าง repo ให้ไม่ได้ งั้นไปสร้าง repo ข้างนอกก่อน แล้วบอกให้ agent commit code ให้หน่อย

หลังจาก push code ขึ้น Github แล้ว ถ้าอยากเพิ่ม feature ใหม่บางอย่าง ใส่ลงไปใน issue ได้เช่นกัน เช่นเพิ่มลูกนํ้าให้หน่อย และ assign copilot จากนั้นทำงานแก้ไขให้เรา หรือเรามี login แล้ว อยากเพิ่ม logout พร้อมติด label assign copilot แล้วกด create เราจะเห็นมันทำงานอยู่ ถ้าโอเคแล้วสามารถ approve & merge ได้เลย

แต่ถ้าใครที่ไม่สามารถ assign เจ้า copilot ได้ ให้ไป enable ที่

https://github.com/settings/copilot/features

https://github.com/settings/copilot/coding_agent

เราสามารถใส่ context เข้าไปได้ เช่นอยากได้ design แบบนี้ เอารูปแนบลงไป เวลาไปคุยกับลูกค้าก็เอาภาพในกระดาษให้ agent สร้างของให้ได้ ไม่ต้องพก designer ไปด้วย

เพิ่มความสามารถแชทบน github สามารถพิมพ์คุยกับ database ได้เลย

ปุ่ม icon history พิมพ์ show chat เพื่อดู history ได้ ถ้าคุยบริบทอื่น กด + เพื่อเพิ่มแชทใหม่ได้ แต่ถ้าถ้าเพิ่มบทบาทใหม่แต่ยังอยู่ในบริบทเดิม ให้อยู่ในแชทเดิมได้

Note

ถ้าไม่มี tool อย่างเจ้า copilot เนี่ย ต้องเรียนรู้การเขียน program มาก่อน แต่ agent mode สร้างให้เราได้ด้วยว่าอะไรควรใส่ตรงไหน ถ้าไม่รู้ก็ให้มันช่วยอธิบายได้ ถาม AI เรื่อย ๆ ทำให้เราเรียนรู้ได้ไวขึ้น
การใช้ LLM ฝึกเป็น PM ที่ดี เพราะเราต้องบรีฟให้ดี
เหมาะกับเอาไปทำ POC ก่อนไปทำจริง แต่ใช้โค้ดในงานจริงอาจจะโดนตำหนิได้
หลังจากแก้ไขควร test ว่า flow เดิมทำงานได้ถูกต้องไหม
เมื่อใช้ agent หรือ gen ai เพื่อทำการ refactor code เรียบร้อยแล้ว และโค้ดทำงานได้ปกติ อย่าเพิ่งดีใจ อย่าลืมกด save ด้วย อาจจะบึ้มได้ (แต่เราตั้ง auto save ใน VS Code ล่ะ)
เขียนโปรแกรมไม่เป็น แต่ต้องทำ unit test เป็นนะ ว่าเราอยากให้ input เป็นอะไร และ output เป็นอะไร ถ้าไม่ตรงให้ copilot แก้ให้
ถ้าอยากให้มันอ่านได้ด้วย ใช้ตัว Copilot ที่ terminal ด้วยนะ
ทำเป็นแอพได้ด้วย เช่นทำเป็น Flutter ข้อจำกัด backend ทำงานได้ สร้าง API ที่ตอบโจทย์ได้ แต่ frontend ถ้าเรามีแบบที่เราต้องการไว้อยู่แล้ว อาจจะต้องใช้เวลาบรีฟนิดนึง เช่น จัดหน้า layout ต้องบรีฟให้ละเอียด ว่าเราจะเอาอะไรไว้ตรงไหน

สุดท้าย

⭐ สรุป: การเขียนโปรแกรมยังจำเป็นอยู่ เอา agent mode มาช่วยลดงานซํ้า ๆ ทำ POC หรือการทำ test เอาไปทำเทสเบื้องต้นไม่ต้องรอ QA สำหรับ project ขนาด SME ขนาดเล็กและขนาดกลาง ยังไม่เหมาะกับขนาดใหญ่น้า

⭐ สิ่งที่ฝากไว้: fundamental ให้มั่นคง, เชี่ยวชาญใน domain ของเรา, สั่ง AI ให้เป็น และนอกเหนือ technical เราต้องรู้เรื่อง business domain เพิ่มด้วย

⭐ skill สำคัญ logic, problem solving โดยเขียนโปรแกรมให้ได้ 1 ภาษา

อื่น ๆ