004.2.截至目前為止做了哪些事？

目前為止的程式架構，根據目前的需求和功能，這個架構涵蓋了 後端 API、資料庫設計、以及 前端靜態頁面。

程式架構

bash
複製程式碼project/
│
├── backend/                           # 後端服務，負責提供 API
│   ├── app.py                         # Flask 主程式，處理數據庫連接與 API
│   ├── requirements.txt               # 後端依賴列表
│
├── frontend/                          # 前端靜態頁面
│   ├── index.html                     # 主頁面，顯示數據表格
│   ├── app.js                         # JavaScript，負責與後端 API 通信
│   ├── styles.css                     # 頁面樣式文件
│
├── sql/                               # 資料庫相關 SQL 文件
│   ├── create_twse_table.sql          # 建立 twse_listed_companies 表
│   ├── create_financial_reports.sql   # 建立 financial_reports 表
│
├── README.md                          # 說明文件，指導用戶如何使用本專案
├── .gitignore                         # 忽略文件，例如虛擬環境和中間文件

檔案詳情

1. backend/

• app.py
• • 提供以下 API：
  • • /api/companies：返回 twse_listed_companies 表中的靜態公司數據。
    • /api/company_financials：返回兩個表的聯合數據，包括公司名稱、財務指標等。
  • 通過 SQLAlchemy 與資料庫進行交互。
  • 包含錯誤處理和數據返回邏輯。
• requirements.txt
• • 後端依賴列表，包括：

    php複製程式碼flask
    sqlalchemy
    pandas
    psycopg2-binary
    flask-cors
    

2. frontend/

• index.html
• • 簡單的 HTML 頁面，顯示表格數據。
  • 使用 <table> 元素，動態填充數據。
• app.js
• • 通過 fetch 方法請求後端 API。
  • 將 API 返回的 JSON 數據插入到 HTML 表格中。
  • 包含錯誤處理（例如 API 請求失敗時的提示）。
• styles.css
• • 美化表格的樣式，包括邊框、字體、背景色等。
  • 簡單的頁面佈局。

3. sql/

• create_twse_table.sql
• • 定義靜態公司數據表：

    sql複製程式碼CREATE TABLE twse_listed_companies (
        stock_id VARCHAR(10) PRIMARY KEY,
        company_name VARCHAR(255),
        company_short_name VARCHAR(100),
        paid_in_capital BIGINT,
        industry VARCHAR(100),
        address TEXT,
        website VARCHAR(255),
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );
    

• create_financial_reports.sql
• • 定義公司財務報表數據表：

    sql複製程式碼CREATE TABLE financial_reports (
        report_date DATE,
        year VARCHAR(4),
        quarter VARCHAR(10),
        stock_id VARCHAR(10) PRIMARY KEY,
        company_name VARCHAR(255),
        revenue_million NUMERIC(20, 2),
        gross_margin_percent NUMERIC(10, 2),
        operating_profit_margin_percent NUMERIC(10, 2),
        pretax_profit_margin_percent NUMERIC(10, 2),
        net_profit_margin_percent NUMERIC(10, 2),
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );
    

4. README.md

• 說明如何配置環境並運行應用，包括：
• • 安裝 Python 依賴。
  • 建立資料庫表格。
  • 啟動 Flask 後端。
  • 打開靜態頁面查看數據。

程式功能簡述

模組功能

後端

- 從資料庫中提取靜態公司數據和動態財務數據。

- 提供 API（/api/companies, /api/company_financials）給前端使用。

資料庫

- 儲存公司靜態數據（如公司名稱、產業別）。

- 儲存公司財務數據（如營業收入、毛利率等）。

前端

- 靜態頁面顯示公司數據，通過表格方式呈現。

- 使用 JavaScript 請求 API 並填充表格數據。

下一步建議

1. 擴展功能：
2. • 在網頁中加入搜尋和篩選功能。
   • 添加更多的 API，如按年度或產業類別查詢數據。
2. 測試與優化：
3. • 為後端 API 添加單元測試，驗證數據正確性。
   • 優化資料庫索引設計，加速聯合查詢。
3. 部署：
4. • 使用 Docker 容器化應用，包括前端、後端和資料庫。
   • 部署至雲服務，例如 AWS 或 Heroku。

這樣的架構清晰且具擴展性，能滿足當前需求，也為後續升級提供了良好的基礎。