AI 驅動的開發新境：羅培宸的實戰碼匠術: 利用 AI 自動生成程式碼骨架：OpenAI GPT-4 驅動 Python、React、Flutter 開發效率實踐

利用 AI 自動生成程式碼骨架：OpenAI GPT-4 驅動 Python、React、Flutter 開發效率實踐

在現代軟體開發中，效率與一致性是成功的關鍵。無論是後端 API、前端元件，還是行動應用畫面，開發人員經常需要撰寫大量重複的樣板程式碼 (boilerplate code)。這不僅耗時，也容易引入人為錯誤。然而，隨著大型語言模型 (LLMs) 的快速發展，我們有了一個強大的新工具來應對這個挑戰：AI 驅動的自動化程式碼生成。

您可以透過以下 GitHub 連結檢閱本專案的原始碼：https://github.com/BpsEason/trading_system.git

本文將深入探討如何利用 OpenAI GPT-4 結合自訂 Prompt 與自動化腳本，實現專案中「後端 API」、「前端元件」及「Flutter 畫面」的樣板程式碼與測試案例的一鍵生成，大幅提升開發效率與專案的一致性。

樣板程式碼的挑戰

樣板程式碼是為了讓應用程式運作所需，但本身不包含獨特業務邏輯的程式碼。例如：

後端 API：資料模型 (models)、序列化器 (serializers)、視圖集 (viewsets) 的基本 CRUD (建立、讀取、更新、刪除) 操作。
前端元件：React 或 Vue 中常見的組件結構、狀態管理、事件處理器的初始設定。
行動應用畫面：Flutter 或 React Native 中常見的畫面骨架、導航結構、基本 UI 元件配置。

這些重複性的任務不僅佔用了開發者寶貴的時間，還可能導致：

開發速度減慢：每次新功能都需要手動搭建基礎結構。
引入錯誤：手動複製貼上或重複輸入容易出錯。
缺乏一致性：不同開發者可能採用不同的寫法，導致程式碼風格不統一。

LLM：程式碼生成的強大引擎

大型語言模型，特別是像 OpenAI GPT-4 這樣的先進模型，已經證明了它們在理解複雜指令和生成程式碼方面的卓越能力。透過提供清晰、結構化的 Prompt (提示詞)，我們可以引導 LLM 產生符合我們專案規範和需求的程式碼骨架。

專案結構與 AI 整合的核心

為了實現自動化生成，我們的專案需要一個清晰的結構來存放 Prompt 範本和執行生成任務的腳本。在我們的智能交易訂單管理系統中，我們規劃了以下關鍵目錄：

backend/prompts/: 存放用於生成後端 (Django/FastAPI) 程式碼的 Prompt 範本。
frontend-react/prompts/: 存放用於生成前端 (React) 元件程式碼的 Prompt 範本。
flutter-app/prompts/: 存放用於生成 Flutter 畫面程式碼的 Prompt 範本。
tools/: 存放專案開發輔助腳本，其中包含了負責 AI 程式碼生成的核心工具。

`scaffold.py`：實現自動生成的魔法棒

核心的自動化邏輯集中在 tools/scaffold.py 這個 Python 腳本中。它的主要職責是：

讀取 Prompt 範本：從各個 prompts 目錄中讀取預先定義好的純文字 Prompt。
呼叫 OpenAI API：將 Prompt 發送給 OpenAI 的 GPT-4 模型。
寫入生成結果：將從 LLM 接收到的程式碼內容寫入到專案中預期的目標路徑。

讓我們看看 scaffold.py 的關鍵部分：

Python
import os
import openai

# 從環境變數讀取 API 金鑰
# 警告: OPENAI_API_KEY 環境變數未設定時，AI 生成功能將無法使用。
openai.api_key = os.getenv("OPENAI_API_KEY")

def run_prompt(prompt_path: str, output_path: str, model: str = "gpt-4-turbo-preview"):
    """
    根據 Prompt 範本呼叫 LLM 生成程式碼，並將結果寫入指定檔案。
    """
    if not openai.api_key:
        print(f"跳過生成 {output_path}: OPENAI_API_KEY 未設定。")
        return

    try:
        # 讀取 Prompt 範本內容
        prompt = open(prompt_path, encoding="utf-8").read()
        print(f"正在從 {prompt_path} 生成程式碼...")

        # 呼叫 OpenAI Chat Completion API
        resp = openai.ChatCompletion.create(
            model=model, # 使用 gpt-4-turbo-preview 模型
            messages=[
                {"role": "system", "content": "You are a helpful code generator."}, # 系統角色設定
                {"role": "user",   "content": prompt} # 用戶提供的 Prompt
            ],
            temperature=0.2 # 較低的 temperature 確保生成結果更穩定和可預測
        )
        # 提取生成的程式碼內容
        code = resp.choices[0].message.content
        
        # 將生成的程式碼寫入目標檔案
        with open(output_path, "w", encoding="utf-8") as f:
            f.write(code)
        print(f"✅ 已成功生成並寫入：{output_path}")
    except Exception as e:
        # 錯誤處理：印出錯誤訊息，但不中斷腳本執行
        print(f"❌ 生成 {output_path} 時發生錯誤: {e}")

if __name__ == "__main__":
    # 定義專案根目錄的絕對路徑，方便檔案路徑的正確引用
    BASE_DIR = os.path.dirname(os.path.abspath(__file__))
    PROJECT_ROOT = os.path.abspath(os.path.join(BASE_DIR, os.pardir))

    # 範例：AI 生成 Django Product API 視圖與測試骨架
    run_prompt(
      os.path.join(PROJECT_ROOT, "backend/prompts/api_scaffold_prompt.txt"),
      os.path.join(PROJECT_ROOT, "backend/django_order_app/views_product.py")
    )
    run_prompt(
      os.path.join(PROJECT_ROOT, "backend/prompts/test_case_prompt.txt"),
      os.path.join(PROJECT_ROOT, "backend/django_order_app/tests/test_product_api.py")
    )

    # 範例：AI 生成 React UserList 元件
    run_prompt(
      os.path.join(PROJECT_ROOT, "frontend-react/prompts/component_scaffold_prompt.txt"),
      os.path.join(PROJECT_ROOT, "frontend-react/src/components/UserList.tsx")
    )

    # 範例：AI 生成 Flutter Dashboard 螢幕
    run_prompt(
      os.path.join(PROJECT_ROOT, "flutter-app/prompts/screen_scaffold_prompt.txt"),
      os.path.join(PROJECT_ROOT, "flutter-app/lib/screens/dashboard_screen.dart")
    )

重要提示：為了確保 scaffold.py 能成功呼叫 OpenAI API，你必須在運行環境中設定 OPENAI_API_KEY 環境變數。在 GitHub Actions 中，這可以透過 GitHub Secrets 安全地管理。

精心設計的 Prompt 範本：AI 的指令集

Prompt 是引導 LLM 生成所需程式碼的關鍵。它們是純文字檔案，清晰地描述了我們期望 AI 建立的內容。

backend/prompts/api_scaffold_prompt.txt:

內容範例：

Plaintext

請根據以下描述為 Django REST Framework 生成一個新的 API 視圖與序列化器：
模型名稱：Product
欄位：
- name (CharField, max_length=100)
- description (TextField)
- price (DecimalField, max_digits=10, decimal_places=2)
- stock (IntegerField)
需求：提供所有 CRUD 操作的 API。

目的：確保後端模型和 API 端點的快速建立，減少重複配置工作。

frontend-react/prompts/component_scaffold_prompt.txt:

內容範例：

Plaintext

請生成一個 React TypeScript 功能型元件，用於顯示一個用戶列表。
需求：
- 元件名稱：UserList
- 接收一個名為 `users` 的 props，類型為 `User[]`，其中 `User` 介面包含 `id: string`, `name: string`, `email: string`。
- 使用 `map` 方法渲染每個用戶的姓名和電子郵件。
- 每個列表項目應有一個唯一的 key。

目的：標準化前端元件的結構，加速 UI 開發。

flutter-app/prompts/screen_scaffold_prompt.txt:

內容範例：

Plaintext

請生成一個 Flutter 螢幕 (`StatelessWidget`)，用於顯示一個簡單的 Dashboard。
需求：
- 螢幕名稱：DashboardScreen
- 包含一個 `AppBar` 標題為 "Dashboard"。
- 身體部分包含一個 `Column`，內部有兩個 `Text` 小部件，分別顯示 "Welcome to Dashboard!" 和 "Summary data will be here."。

目的：快速搭建行動應用畫面，確保跨平台開發的一致性。

這些 Prompt 範本的詳細程度和精確性直接影響生成程式碼的品質。

`Makefile`：本地開發的一鍵觸發

為了讓開發者在本地環境中也能方便地觸發 AI 程式碼生成，我們將 scaffold.py 整合到了 Makefile 中。只需簡單一條命令，就能自動運行生成腳本。

Makefile
.PHONY: scaffold

scaffold: ## 根據 prompts 自動生成程式碼骨架
	@echo "正在根據 prompts 自動生成程式碼骨架..."
	python tools/scaffold.py

現在，開發人員可以在專案根目錄下執行 make scaffold，即可自動生成並更新所有預設的程式碼骨架和測試案例。

GitHub Actions：CI/CD 中的自動化生成與檢查

將 AI 程式碼生成整合到 CI/CD 流程中，可以確保每次程式碼提交或拉取請求時，新生成的骨架都能被自動建立並進行初步的 Lint 和測試檢查。這不僅保證了程式碼的即時性，也將潛在的整合問題提前發現。

以下是 .github/workflows/ci.yml 中新增的 scaffold Job：

YAML
# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  # ... 其他測試 Job (backend-test, frontend-test, flutter-test) ...

  scaffold:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3 # 檢查程式碼
      - name: Setup Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.10'
      - name: Install deps # 安裝 OpenAI SDK
        run: pip install openai
      - name: Generate Code from Prompts # 執行 AI 生成腳本
        env:
          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }} # 從 GitHub Secrets 安全讀取 API 金鑰
        run: make scaffold
      - name: Lint Generated Code # 對生成的程式碼進行 Lint 檢查
        run: |
          # 這裡可以根據實際生成的檔案路徑調整 Lint 和測試命令
          # 範例: pylint backend/django_order_app/views_product.py
          # 範例: pytest backend/django_order_app/tests/test_product_api.py
          echo "請手動在此處添加對自動生成程式碼的 Lint 和測試命令"
          # 例如：
          # pylint backend/django_order_app/views_product.py || true # 允許失敗，僅為提醒
          # pytest backend/django_order_app/tests/test_product_api.py || true # 允許失敗，僅為提醒

請注意：為了 CI/CD 流程的順暢，建議在首次實作時，對 AI 生成程式碼的 Lint 和測試步驟可以先設定為不強制失敗 (|| true)，直到你對 AI 生成的程式碼品質有足夠信心，再將其設定為嚴格的檢查。

影響與未來展望

透過這些整合，我們的專案現在擁有了一個強大的自動化程式碼生成能力。這帶來了多方面的好處：

加速原型開發：快速搭建新功能的基本骨架，將更多精力投入到核心業務邏輯。
提高程式碼品質與一致性：確保生成的程式碼遵循預定義的風格和模式。
減少重複性勞動：開發者從繁瑣的樣板撰寫中解放出來。
鼓勵最佳實踐：Prompt 範本本身就是一種最佳實踐的體現。

未來，這個系統還可以進一步擴展：

更智慧的 Prompt：加入動態輸入，讓 AI 能根據更具體的需求生成程式碼。
程式碼審查集成：將 AI 生成的程式碼直接提交到審查流程中，加快審查速度。
自適應生成：根據專案的即時狀態或配置，自動調整生成策略。
結合更多 AI 功能：例如利用 AI 進行重構建議、錯誤修復，甚至完整的應用程式生成。

總之，透過精心設計的 Prompt、強大的 LLM 以及自動化腳本的協同工作，我們已經為智能交易訂單管理系統打造了一個高效的程式碼生成流水線。這不僅解決了樣板程式碼的痛點，更為未來 AI 輔助開發的無限可能性奠定了堅實的基礎。

AI 驅動的開發新境：羅培宸的實戰碼匠術

2025年8月10日星期日

利用 AI 自動生成程式碼骨架：OpenAI GPT-4 驅動 Python、React、Flutter 開發效率實踐

利用 AI 自動生成程式碼骨架：OpenAI GPT-4 驅動 Python、React、Flutter 開發效率實踐

樣板程式碼的挑戰

LLM：程式碼生成的強大引擎

專案結構與 AI 整合的核心

`scaffold.py`：實現自動生成的魔法棒

精心設計的 Prompt 範本：AI 的指令集

`Makefile`：本地開發的一鍵觸發

GitHub Actions：CI/CD 中的自動化生成與檢查

影響與未來展望

沒有留言:

張貼留言

熱門文章

搜尋此網誌

2025年8月10日 星期日

利用 AI 自動生成程式碼骨架：OpenAI GPT-4 驅動 Python、React、Flutter 開發效率實踐

利用 AI 自動生成程式碼骨架：OpenAI GPT-4 驅動 Python、React、Flutter 開發效率實踐

樣板程式碼的挑戰

LLM：程式碼生成的強大引擎

專案結構與 AI 整合的核心

scaffold.py：實現自動生成的魔法棒

精心設計的 Prompt 範本：AI 的指令集

Makefile：本地開發的一鍵觸發

GitHub Actions：CI/CD 中的自動化生成與檢查

影響與未來展望

沒有留言:

張貼留言

熱門文章

2025年8月10日星期日

`scaffold.py`：實現自動生成的魔法棒

`Makefile`：本地開發的一鍵觸發