5 Prompt Template ที่นักพัฒนาควรเซฟไว้ใช้ประจำ

AI กลายมาเป็นคู่หูสำคัญของ Developer การรู้จักใช้ AI อย่างมีประสิทธิภาพไม่ใช่แค่ skill เสริม แต่เป็นความจำเป็นแล้ว แต่ปัญหาที่หลายคนเจอคือ

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

ผลกระทบที่เกิดขึ้น: การที่ไม่มี prompt template ที่ดีทำให้ developer หลายคนใช้ AI ได้แค่ 30% ของศักยภาพจริง สูญเสียเวลาไปกับการ trial and error และได้ผลลัพธ์ที่ไม่สมบูรณ์

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

5 Prompt Template

Template 1: ตรวจสอบโค้ดและแก้ Bug

ใช้เมื่อไหร่:

ต้องการให้ AI ช่วยดูโค้ด
มี bug แก้ไม่ได้
ต้องการคำแนะนำปรับปรุงโค้ด

Template:

ช่วยตรวจสอบโค้ดนี้หน่อย:

ภาษา: [JavaScript/Python/etc.]
ทำหน้าที่: [อธิบายว่าโค้ดนี้ทำอะไร]
ปัญหา: [ระบุปัญหา หรือเว้นว่างถ้าต้องการดูทั่วไป]

[โค้ดที่ต้องการตรวจ]

ช่วยบอก:
1. มี bug อะไรบ้าง
2. โค้ดคุณภาพดีไหม (อ่านง่าย รันเร็ว)
3. มีช่องโหว่ security ไหม
4. แนะนำการปรับปรุง
5. ให้โค้ดเวอร์ชันที่ดีกว่า

ตัวอย่าง:

ช่วยตรวจสอบโค้ดนี้หน่อย:

ภาษา: JavaScript
ทำหน้าที่: ฟังก์ชัน login สำหรับเว็บ
ปัญหา: บางครั้ง login ไม่ได้ไม่รู้ทำไม

function login(username, password) {
    if (username && password) {
        fetch('/api/login', {
            method: 'POST',
            body: JSON.stringify({username, password})
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  localStorage.setItem('token', data.token);
                  window.location.href = '/dashboard';
              }
          });
    }
}

ช่วยบอก:
1. มี bug อะไรบ้าง
2. โค้ดคุณภาพดีไหม (อ่านง่าย รันเร็ว)
3. มีช่องโหว่ security ไหม
4. แนะนำการปรับปรุง
5. ให้โค้ดเวอร์ชันที่ดีกว่า

Tips:

ใส่รายละเอียดให้เยอะ จะได้คำตอบแม่นยำ
มี error message ก็แปะมาด้วย
บอก environment (Node.js version, browser รองรับ)

Template 2: เรียนรู้เทคโนโลยีใหม่

ใช้เมื่อไหร่:

ต้องเรียนเทคโนโลยีใหม่
ไม่เข้าใจ concept ยาก
ต้องการตัวอย่างใช้งานจริง

Template:

สอนเรื่อง [หัวข้อ] ให้หน่อย

ระดับผม: [เริ่มต้น/ปานกลาง/เก่ง]
จะใช้ทำ: [บอกว่าจะเอาไปใช้ทำอะไร]

ช่วยอธิบาย:
1. มันคืออะไร (ใช้คำง่ายๆ)
2. เปรียบเทียบกับสิ่งในชีวิตจริง
3. ให้ตัวอย่างโค้ดที่ใช้งานได้ (มี comment อธิบาย)
4. ข้อผิดพลาดที่มือใหม่มักทำ
5. ควรเรียนอะไรต่อ
6. ให้แบบฝึกหัดทำ

อธิบายทีละขั้น เริ่มจากง่ายๆ ค่อยยาก

ตัวอย่าง:

สอนเรื่อง React Hooks (useState กับ useEffect) ให้หน่อย

ระดับผม: เริ่มต้น
จะใช้ทำ: สร้าง React app แรก มาจาก vanilla JavaScript

ช่วยอธิบาย:
1. มันคืออะไร (ใช้คำง่ายๆ)
2. เปรียบเทียบกับสิ่งในชีวิตจริง
3. ให้ตัวอย่างโค้ดที่ใช้งานได้ (มี comment อธิบาย)
4. ข้อผิดพลาดที่มือใหม่มักทำ
5. ควรเรียนอะไรต่อ
6. ให้แบบฝึกหัดทำ

อธิบายทีละขั้น เริ่มจากง่ายๆ ค่อยยาก

Tips:

อย่าอายบอกว่าเป็นมือใหม่
ขอให้เปรียบเทียบ จะเข้าใจง่ายขึ้น
ขอตัวอย่างที่เกี่ยวข้องกับงานจริง

Template 3: สร้างฟีเจอร์เร็ว ๆ

ใช้เมื่อไหร่:

ต้องสร้างฟีเจอร์ใหม่เร็วๆ
ต้องการโค้ดพร้อมใช้
เวลาจำกัด

Template:

ช่วยทำ [ฟีเจอร์/ฟังก์ชัน] ให้หน่อย

เป้าหมาย: [บอกว่าต้องการอะไร]
เทคโนโลยี: [React, Node.js, etc.]
ข้อจำกัด: [เวลา, ประสิทธิภาพ, เบราว์เซอร์รองรับ]

ต้องการ:
- [ความต้องการ 1]
- [ความต้องการ 2]
- [ความต้องการ 3]

ช่วยให้:
1. โค้ดที่ใช้งานได้เลย
2. วิธีติดตั้ง/ตั้งค่า
3. ตัวอย่างการใช้งาน
4. วิธีจัดการกรณีพิเศษ
5. โค้ดทดสอบพื้นฐาน

เน้นง่ายและเสถียร มากกว่าซับซ้อน

ตัวอย่าง:

ช่วยทำฟีเจอร์อัปโหลดรูปให้หน่อย

เป้าหมาย: ให้ user อัปโหลดรูปไป cloud พร้อมแสดง progress
เทคโนโลยี: React, Node.js, AWS S3
ข้อจำกัด: ไฟล์ไม่เกิน 5MB, เฉพาะ JPG/PNG, ใช้งานบน mobile ได้

ต้องการ:
- ลากวางได้ (drag & drop)
- แสดง progress bar
- ดูรูปก่อนอัปโหลด
- ย่อขนาดใน browser ให้กว้างไม่เกิน 1920px
- ได้ URL กลับมาหลังอัปโหลดสำเร็จ

ช่วยให้:
1. โค้ดที่ใช้งานได้เลย
2. วิธีติดตั้ง/ตั้งค่า
3. ตัวอย่างการใช้งาน
4. วิธีจัดการกรณีพิเศษ
5. โค้ดทดสอบพื้นฐาน

เน้นง่ายและเสถียร มากกว่าซับซ้อน

Tips:

บอกข้อจำกัดชัดๆ จะได้โค้ดที่ใช้งานได้จริง
ขอ error handling ด้วย
ขอตัวอย่างการใช้งาน จะได้รู้วิธี integrate

Template 4: เขียน Test

ใช้เมื่อไหร่:

ไม่รู้ว่าควรเทสอะไร
ต้องการ test ครอบคลุม
ต้องการ mock dependencies

Template:

ช่วยเขียน test ให้โค้ดนี้หน่อย:

Framework: [Jest/Mocha/Cypress]
ประเภท: [Component/Function/API]
เป้าหมาย: [Unit/Integration/E2E tests]

[โค้ดที่ต้องการเทส]

ช่วยให้:
1. แผนการทดสอบ (ควรเทสอะไรบ้าง)
2. รายการ test cases ทั้งหมด
3. โค้ด test ที่ใช้งานได้
4. วิธี mock dependencies
5. การทดสอบกรณีพิเศษและ error
6. performance tests (ถ้าจำเป็น)

ต้องการทั้ง positive และ negative cases

ตัวอย่าง:

ช่วยเขียน test ให้โค้ดนี้หน่อย:

Framework: Jest + React Testing Library
ประเภท: React Component
เป้าหมาย: Unit tests + integration บางส่วน

function UserSearch({ onUserSelect }) {
    const [query, setQuery] = useState('');
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);

    const searchUsers = async (searchQuery) => {
        setLoading(true);
        try {
            const response = await fetch(`/api/users?q=${searchQuery}`);
            const data = await response.json();
            setUsers(data.users || []);
        } catch (error) {
            setUsers([]);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div>
            <input 
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && searchUsers(query)}
            />
            {loading && <div>Loading...</div>}
            {users.map(user => (
                <div key={user.id} onClick={() => onUserSelect(user)}>
                    {user.name}
                </div>
            ))}
        </div>
    );
}

ช่วยให้:
1. แผนการทดสอบ (ควรเทสอะไรบ้าง)
2. รายการ test cases ทั้งหมด
3. โค้ด test ที่ใช้งานได้
4. วิธี mock dependencies
5. การทดสอบกรณีพิเศษและ error
6. performance tests (ถ้าจำเป็น)

ต้องการทั้ง positive และ negative cases

Tips:

ระบุ framework ให้ชัด จะได้ syntax ถูก
ขอแผนการทดสอบ จะได้รู้ว่าต้องเทสอะไร
ขอวิธี mock เพราะต้องใช้แน่

Template 5: ปรับปรุงโค้ด

ใช้เมื่อไหร่:

โค้ดทำงานช้า
โค้ดอ่านยาก ดูแลยาก
มีโค้ดซ้ำเยอะ

Template:

ช่วยปรับปรุงโค้ดนี้ให้ [เร็วขึ้น/อ่านง่าย/ดูแลง่าย]

ปัญหาตอนนี้: [บอกปัญหาที่เจอ]
ต้องการ: [เช่น โหลดเร็วกว่า 2 วินาที]
ข้อจำกัด: [เช่น ต้อง compatible กับโค้ดเดิม]
ลำดับความสำคัญ: [ความเร็ว/อ่านง่าย/ดูแลง่าย]

โค้ดเดิม:
[วางโค้ดตรงนี้]

ช่วยบอก:
1. ปัญหาคืออะไร bottleneck ตรงไหน
2. โค้ดที่ปรับปรุงแล้ว พร้อมอธิบาย
3. จะดีขึ้นมากแค่ไหน
4. อะไรที่อาจทำให้โค้ดเดิมเสีย
5. วิธีเปลี่ยนอย่างปลอดภัย
6. วิธีอื่นที่ทำได้

เน้นการปรับปรุงที่ได้ผลมาก เสี่ยงน้อย

ตัวอย่าง:

ช่วยปรับปรุงโค้ดนี้ให้เร็วขึ้นและอ่านง่าย

ปัญหาตอนนี้: หน้าโหลดช้า โค้ดอ่านยาก มี logic ซ้ำเยอะ
ต้องการ: โหลดไม่เกิน 2 วินาทีบน 3G
ข้อจำกัด: API เดิมต้องใช้ได้
ลำดับความสำคัญ: ความเร็ว > อ่านง่าย > ดูแลง่าย

โค้ดเดิม:
function ProductList() {
    const [products, setProducts] = useState([]);
    const [categories, setCategories] = useState([]);
    const [selectedCategory, setSelectedCategory] = useState('all');

    useEffect(() => {
        fetch('/api/products')
            .then(res => res.json())
            .then(data => setProducts(data));
        
        fetch('/api/categories')
            .then(res => res.json())
            .then(data => setCategories(data));
    }, []);

    const filteredProducts = products.filter(product => {
        if (selectedCategory === 'all') return true;
        return product.category === selectedCategory;
    });

    return (
        <div>
            <select onChange={(e) => setSelectedCategory(e.target.value)}>
                <option value="all">All Categories</option>
                {categories.map(cat => (
                    <option key={cat.id} value={cat.name}>{cat.name}</option>
                ))}
            </select>
            
            {filteredProducts.map(product => (
                <div key={product.id}>
                    <img src={product.image} alt={product.name} />
                    <h3>{product.name}</h3>
                    <p>${product.price}</p>
                </div>
            ))}
        </div>
    );
}

ช่วยบอก:
1. ปัญหาคืออะไร bottleneck ตรงไหน
2. โค้ดที่ปรับปรุงแล้ว พร้อมอธิบาย
3. จะดีขึ้นมากแค่ไหน
4. อะไรที่อาจทำให้โค้ดเดิมเสีย
5. วิธีเปลี่ยนอย่างปลอดภัย
6. วิธีอื่นที่ทำได้

เน้นการปรับปรุงที่ได้ผลมาก เสี่ยงน้อย

Tips:

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

เทคนิคใช้ Templates ให้เก่ง

1. ปรับแต่งตามโปรเจกต์

เก็บข้อมูลโปรเจกต์ไว้ แล้วใส่ใน template:

โปรเจกต์ใช้: React 18 + TypeScript + Material-UI v5
Target: เบราว์เซอร์สมัยใหม่
ทีม: 5 คน
Coding Style: Airbnb ESLint

2. ถามต่อเมื่อได้คำตอบ

"อธิบายบรรทัดที่ X ให้ละเอียดหน่อย"
"ข้อเสียของวิธีนี้มีอะไรบ้าง?"
"ถ้าข้อมูลเยอะขึ้นจะทำงานไหว?"
"มีวิธีอื่นไหม?"

3. เก็บเวอร์ชันที่ดี

เมื่อแก้ template แล้วได้ผลดี ให้เซฟไว้พร้อมบันทึกว่า:

ใช้กับโปรเจกต์ไหน
วันที่ใช้
ผลลัพธ์เป็นยังไง

4. แบ่งงานใหญ่เป็นหลาย Prompts

งานใหญ่ควรแบ่งเป็น:

วิเคราะห์ปัญหา
ออกแบบแนวทางแก้
เขียนโค้ด
เขียน tests
ปรับปรุงประสิทธิภาพ

วิธีเก็บ Templates

ทางเลือกที่ 1: Text Snippets

VS Code: ใช้ User Snippets
Notion: สร้างหน้า Template
Note apps: เก็บไว้ในแอพจดบันทึก

ทางเลือกที่ 2: Browser Shortcuts

สร้าง bookmark ที่เปิด template ใน textarea:

javascript:(function(){
    var template = "ช่วยตรวจสอบโค้ดนี้หน่อย...";
    var newWindow = window.open('', '', 'width=800,height=600');
    newWindow.document.write('<textarea style="width:100%;height:100%">' + template + '</textarea>');
})();

ทางเลือกที่ 3: CLI Tool

สร้างเครื่องมือ command line สำหรับเปิด templates

สรุป

5 Templates เหล่านี้ครอบคลุมงานของ Developer

ตรวจสอบโค้ดและแก้ Bug - แก้ปัญหาโค้ด
เรียนรู้เทคโนโลยีใหม่ - เรียนเทคโนโลยีใหม่
สร้างฟีเจอร์เร็วๆ - implement ฟีเจอร์ด่วน
เขียน Test - ทำ testing
ปรับปรุงโค้ด - refactor และ optimize

จำสำคัญ:

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

Template คือจุดเริ่มต้น การปรับแต่งให้เข้ากับงานจริงจะทำให้ได้ผลลัพธ์ที่ดีที่สุด!

🔵 Facebook: Superdev School (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school