GPT Prompt : เขียน Spec แล้วให้ GPT แปลงเป็น Code

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

ผลลัพธ์ที่ได้จาก AI บางครั้งอาจจะไม่ตรงตามที่เราต้องการ ผู้ใช้งานควรจะมีความรู้และตรวจสอบให้ถูกต้องก่อนทุกครั้ง

GPT Prompt

I need your coding in Typescript, where I'll set my specs and my initial code. You'll start working when I say start.
Once you get the specification from me, you can start writing. and remembering what was done before to be used again in the next specification until I say I'm done
This is the code I'm working on.
// write current code for provided to GPT
I'll divide the order form for you into
[1] Variable or function name where you have to enter values or solve problems
[2] Specifications you need to read and write code
[3] Results

การใช้งาน

คัดลอก Prompt ข้างบนที่ผมได้สร้างขึ้นมานี้ไปใส่ให้ GPT ได้เลย เพียงแต่ ต้องแก้ไขเพิ่มนิดหน่อย เพื่อให้ได้ผลลัพธ์ตรงตามที่ต้องการ

บรรทัดแรก แก้เป็นภาษาโปรแกรมที่เราต้องการ

Typescript

บรรทัดนี้ ใช้สำหรับใส่ Code เช่น ตัวแปร ฟังก์ชั่น คลาส หรือใดๆ ก็ตามที่เราต้องการ Initial ให้ GPT รู้ว่าสามารถใช้อะไรที่เรามีอยู่แล้วได้บ้าง

This is the code I'm working on.
// write current code for provided to GPT

หากไม่มีให้ลบส่วนนี้

[1] Variable or function name where you have to enter values or solve problems

[1] สำหรับให้ GPT นำผลลัพธ์มาใส่ในชื่อตัวแปร หรือ ชื่อฟังก์ชั่นที่เราต้องการ (ปรับแต่งได้นิดหน่อย เช่น เปลี่ยนจาก Variable or function เป็น Class)

[2] Specifications you need to read and write code

[2] ส่วนของสเปคที่ต้องการให้แปลงออกมาเป็น Code (ห้ามแก้)

เริ่มใช้งาน
หลังจากพิมพ์ Initial Prompt แล้วเรียบร้อย พิมพ์แชตดังนี้

start

[1]
// ชื่อตัวแปร ฟังก์ชั่น คลาส หรือ อื่นๆ ตามที่ต้องการ 

[2]
// Spec ที่ต้องการให้ GPT จัดการ

หลังจากกด Enter แล้ว GPT จะพิมพ์ [3] ออกมา

ถ้าจบการทำงานแล้ว พิมพ์ done ทุกครั้งเพื่อเคลียร์เธรท ป้องกันการนำข้อมูลก่อนหน้ามาใช้งานซ้ำเพื่อความถูกต้องของการทำงาน

ตัวอย่าง

ผมต้องการทำฟีเจอร์ Newsletter subscription โดยเก็บข้อมูลลง Firebase ต้องการให้หน้าเว็บที่มีฟอร์มและส่วนของการเก็บข้อมูล

Init Prompt

I need your help in coding in Typescript, where I'll set my specs and my initial code. You'll start working when I say start.
  After that, once you get the specification from me, you can start writing. and remembering what was done before to be used again in the next specification until I say I'm done

I'll divide the order form for you into
[1] Variable or function name where you have to enter values or solve problems
[2] Specifications you need to read and write code
[3] Results

Use Prompt

start

[1]
class to Save email for make newsletter

[2]
Create page have a Subscription Email for newsletter form and handle logic for save Email into Firebase database

Result

class NewsletterSubscription {
  private db: firebase.firestore.Firestore;

  constructor(firebaseApp: firebase.app.App) {
    this.db = firebaseApp.firestore();
  }

  async saveEmail(email: string): Promise<void> {
    const collectionRef = this.db.collection('newsletter_subscriptions');
    await collectionRef.add({ email, timestamp: firebase.firestore.FieldValue.serverTimestamp() });
  }
}

import React, { useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';
import { NewsletterSubscription } from './NewsletterSubscription';

const firebaseConfig = {
  // Your Firebase configuration
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const newsletterSubscription = new NewsletterSubscription(firebaseApp);

export function NewsletterSubscribeForm(): JSX.Element {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    try {
      await newsletterSubscription.saveEmail(email);
      setMessage('Thank you for subscribing to our newsletter!');
    } catch (error) {
      setMessage('An error occurred. Please try again later.');
      console.error('Error subscribing to newsletter:', error);
    }
  };

  return (
    <div>
      <h2>Subscribe to our newsletter</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Email:
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </label>
        <button type="submit">Subscribe</button>
      </form>
      {message && <p>{message}</p>}
    </div>
  );
}