PART 4

專案架構與模組規劃

Flask 後端與 AIProvider 實作細節

Flask RESTful API AIProvider 類別 CSV 資料儲存

📁 專案目錄結構

AI智慧助理/
├── app.py # Flask 後端主程式
├── requirements.txt # Python 依賴套件
├── templates/
│ └── index.html # 單頁應用 HTML
├── static/
│ ├── css/style.css # 科技紫藍主題樣式
│ ├── js/app.js # 前端 JavaScript
│ └── images/ # 圖片資源
├── data/
│ ├── expenses.csv # 記帳資料
│ ├── calendar.csv # 行事曆資料
│ └── settings.json # 系統設定
└── uploads/ # 檔案上傳目錄
設計原則:關注點分離 - HTML 負責結構、CSS 負責樣式、JS 負責行為、Python 負責邏輯

🔧 Flask 後端架構

應用程式初始化

from flask import Flask, render_template, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# 全域設定
app_config = {
    'openai_api_key': '',
    'gemini_api_key': '',
    'ai_provider': 'openai',
    'ai_model': 'gpt-4o',
    'default_location': '台北市'
}
CORS 設定:允許前端 JavaScript 從不同網域呼叫 API,開發階段特別有用!

🤖 AIProvider 類別實作

class AIProvider:
    def __init__(self, provider, api_key, model):
        self.provider = provider
        self.api_key = api_key
        self.model = model

    def generate_content(self, prompt, system_instruction=""):
        if self.provider == 'openai':
            return self._call_openai(prompt, system_instruction)
        elif self.provider == 'google':
            return self._call_gemini(prompt, system_instruction)

    def _call_openai(self, prompt, system_instruction):
        # 呼叫 OpenAI API
        ...

    def _call_gemini(self, prompt, system_instruction):
        # 呼叫 Google Gemini API
        ...

📡 RESTful API 路由設計

記帳資料 CRUD 範例

@app.route('/api/expenses', methods=['GET', 'POST', 'PUT', 'DELETE'])
def handle_expenses():
    if request.method == 'GET':
        # 讀取所有記帳記錄
        df = pd.read_csv('data/expenses.csv')
        return jsonify(df.to_dict('records'))

    elif request.method == 'POST':
        # 新增記帳記錄
        data = request.get_json()
        # 處理新增邏輯...
        return jsonify({"success": True})

    elif request.method == 'DELETE':
        # 刪除記帳記錄
        ...

💾 資料儲存設計

CSV 格式選擇優勢

  • ✅ 簡單直覺,易於理解
  • ✅ 可用 Excel 直接開啟檢視
  • ✅ pandas 提供強大的讀寫功能
  • ✅ 方便備份與遷移

記帳資料格式

日期,項目,金額,類別,備註
2026-01-15,午餐便當,85,食,公司樓下
2026-01-15,捷運,30,行,上班通勤
擴充建議:如果未來資料量增長,可輕鬆遷移到 SQLite 或 PostgreSQL!

📌 Part 4 小結

架構設計重點

  • 清晰的目錄結構:關注點分離,易於維護
  • Flask RESTful API:標準化的介面設計
  • AIProvider 統一介面:封裝雙平台 AI 服務
  • CSV 資料儲存:簡單可靠,保護隱私
  • 錯誤處理完善:try-except 捕捉例外
前往 Part 5:AI 聊天與智慧記帳 →