# 杰哥記帳 - 部署全攻略

* 主線任務：2250 份！尚差 250 份~ (倒數四天)
* 12/24(預期加碼兌現 GitHub Copilot 部分)

### 資料科普

* 什麼是 [unix](https://zh.wikipedia.org/zh-tw/UNIX%E6%97%B6%E9%97%B4) 時間、為什麼需要 iD
* 什麼是 [uuid](https://zh.wikipedia.org/zh-tw/%E9%80%9A%E7%94%A8%E5%94%AF%E4%B8%80%E8%AF%86%E5%88%AB%E7%A0%81)

JS 版本產生 uuid

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0,
      v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

// 範例：呼叫函式並印出產生的 UUID
console.log(generateUUID());

### 🛠️ 資料庫方案比較表 (Google Sheets vs. RDBMS)

| 比較項目 | Google Sheets API | 關聯式資料庫 (SQL) |
| --- | --- | --- |
| **建置難度** | **中** (需申請 API Key，設定權限) | **高** (需架設 Server、設計 Schema) |
| **讀寫效能** | **慢** (受限於網路請求與 API 限制) | **極快** (專為大量數據檢索優化) |
| **查詢能力** | **中** (可用簡單的 Query 語法，但受限) | **強** (強大的 SQL 語法，支援複雜篩選、排序) |
| **資料關聯** | **無** (僅能靠人工或簡單公式，易出錯) | **強** (Foreign Key 約束，保證資料完整性) |
| **多人/並發寫入** | **差** (API 有頻率限制，多人同時寫入易衝突) | **優** (支援 Transaction 交易機制，確保一致性) |
| **後台管理介面** | **優** (Excel 介面，非工程師也能輕鬆修改) | 需額外安裝 GUI 工具 (如 DBeaver, MySQL Workbench) |
| **維護成本** | **低** (Google 託管，免維護伺服器) | **高** (需維護伺服器、備份、更新) |
| **主要缺點** | 有 API 呼叫次數限制 (Quota)；延遲較高。 | 學習曲線較陡峭；初期設置較繁瑣。 |
| **最佳適用情境** | **CMS 後台、客戶需自行修改資料、內部小型工具** | **正式產品、會員系統、電商、任何需長期維運的系統** |

### **🔗 官方文件網址：** **[Google Sheets API Usage Limits (官方英文文件)](https://developers.google.com/workspace/sheets/api/limits)**
### ⚠️ 重點限制摘要 (預設配額)

這是免費版 Google Cloud Project 的預設限制，如果超過會收到 `HTTP 429: Too many requests` 錯誤。

| 限制類型 | 每個專案 (Per Project) | 每個使用者 (Per User) | 備註 |
| --- | --- | --- | --- |
| **讀取 (Read)** | **300 次 / 每分鐘** | **60 次 / 每分鐘** | 讀取頻率過高容易被擋 |
| **寫入 (Write)** | **300 次 / 每分鐘** | **60 次 / 每分鐘** | 多人同時寫入容易炸掉 |
| **每日總量** | **無限制** | **無限制** | 只要不超過「每分鐘」頻率即可 |

## 其他範例

* [待辦事項](https://docs.google.com/spreadsheets/d/1BhxgcIXnH9ZrxdFOfW0iFvkyCEU5ifi3HwPIfNzDhGs/edit?usp=sharing)、[網頁](https://codepen.io/search/pens?q=todolist)
* [小型電商](https://docs.google.com/spreadsheets/d/16AOUXnz8YCsVAcS_u9XJLGnidRUVyaD554FdtaXBFPM/edit?gid=1625848609#gid=1625848609)

## 流程總覽

我們將分為四個階段進行：
1. **雲端前置作業**：申請 Google Sheets API 權限 (最重要的一步！)。
2. **本地環境測試**：在你的電腦上跑起來，確認一切正常。
3. **部署後端 API**：將後端程式碼放上 Zeabur 雲端平台。
4. **部署前端介面**：將前端網頁放上 Zeabur 雲端平台，完成串接。

---

## 第一階段：雲端前置作業 (Google Cloud Platform)

這一步是為了讓程式能讀寫你的 Google Sheet。

1. **建立專案**：前往 [Google Cloud Console](https://console.cloud.google.com/)，建立一個新專案 (例如 `My-Accounting-App`)。
2. **啟用 API**：
* 點擊左上角選單 →「API 和服務」→「已啟用的 API 和服務」。
* 點擊「+ 啟用 API 和服務」。
* 搜尋 `Google Sheets API` 並點擊「啟用」。
3. **建立服務帳號 (Service Account)**：
* 回到「API 和服務」→「憑證 (Credentials)」。
* 點擊「+ 建立憑證」→ 選擇「服務帳號」。
* 輸入名稱 (例如 `sheet-editor`)，按「建立並繼續」→ 角色選「擁有者 (Owner)」→ 完成。
4. **下載金鑰 (JSON)**：
* 在憑證列表點擊剛剛建立的服務帳號 email。
* 切換到「金鑰 (Keys)」分頁 →「新增金鑰」→「建立新金鑰」→ 選擇 **JSON**。
* **保存下載的 JSON 檔案**，這就是你的鑰匙！
5. **準備記帳表**：
* 建立 [範本試算表](https://docs.google.com/spreadsheets/d/1AjS7gAkX7C-GC1v5gD-NIFdR2NJ2SEKWdMR9oCTUVDI/edit?usp=sharing) 的副本。
* 點擊副本右上角的「共用 (Share)」。
* **將剛剛服務帳號的 email (在 JSON 檔裡有 `client_email`) 貼上去，設為「編輯者」並傳送。**
* 複製網址中的 ID (在 `/d/` 和 `/edit` 之間的那串亂碼)。

---

## 第二階段：本地環境測試

先在你的電腦上跑跑看，確保設定都對了。

1. **下載程式碼**：將本專案 fork 後，再 clone 到你的電腦
* [後端程式碼](https://github.com/gonsakon/jiegeWallet-backend)
* [前端程式碼](https://github.com/gonsakon/jiegeWallet-frontend)
3. **安裝後端工具**：
* 打開終端機 (Terminal)，進入後端資料夾：

        cd backend
        npm install

3. **設定後端密碼與金鑰**：
* 將 `backend` 資料夾中的 `.env.example` 檔案複製一份，改名為 `.env`。
* 用編輯器打開 `.env`，填入以下資料：
* `GOOGLE_SHEET_ID`：剛剛複製的試算表 ID。
* **Google Service Account 設定**：打開你下載的 JSON 檔，把對應的內容**小心地**複製貼上 (特別是 `private_key`，內容很長，要完整複製)。
* `JWT_SECRET`：隨便打一串亂碼當作加密鑰匙。
4. **設定前端連線 (暫時)**：
* 用編輯器打開前端資料夾的 `config.js`。
* 將網址改為本地測試用：

        const CONFIG = {
          API_BASE_URL: "http://localhost:3000",
        };

5. **啟動測試**：
* **啟動後端**：在後端資料夾的終端機執行 `node app.js`。看到 "Server is running..." 表示成功。
* **啟動前端**：用 VS Code 安裝 "Live Server" 套件，右鍵點擊 `frontend/index.html` → "Open with Live Server"。
* **驗收**：瀏覽器應該會跳出來，試著登入 (預設帳密在 `.env` 裡有寫) 並新增一筆記帳，看看 Google Sheet 有沒有多出資料。

---

## 第三階段：部署後端 API (Zeabur)

確認本地沒問題後，我們把後端搬上雲端。

1. **註冊 Zeabur**：前往 [Zeabur](https://zeabur.com/) 註冊並登入。
2. **建立專案**：新增一個 Project (專案)，選擇地區。
3. **部署服務**：
* 點擊 "Create Service" → "Git" → 連結你的 GitHub 帳號並選擇這個 Repo。
* Zeabur 會自動偵測，或者你可以手動設定：
* **Service Name**: 取個名字 (例如 `backend`)。
* **Root Directory**: 輸入 `backend` (這很重要！告訴它後端程式在哪)。
4. **設定環境變數**：
* 在 Zeabur 的該服務頁面，切換到 "Variables" 分頁。
* 將你本地 `.env` 檔案裡的所有內容，新增進去。
* *小撇步：Zeabur 支援 "Batch Edit"，可以直接把 `.env` 整陀內容貼進去。*
5. **取得網址**：
* 切換到 "Networking" 分頁 → "Generate Domain"。
* 你會得到一個網址 (例如 `xxxxx.zeabur.app`)，**複製起來，這是你的後端網址**。

---

## 第四階段：部署前端介面 (Zeabur)

最後一步，把前端也搬上去，並連上雲端的後端。

1. **修改前端設定**：
* 回到你電腦的 `frontend/config.js`。
* 將網址改為**剛剛拿到的 Zeabur 後端網址**：

        const CONFIG = {
          API_BASE_URL: "https://你的後端網址.zeabur.app",
        };

* **記得將這個修改 Push 回 GitHub！** (因為 Zeabur 是抓 GitHub 的程式碼)
2. **新增前端服務**：
* 回到 Zeabur 同一個專案。
* 再次 "Create Service" → "Git" → 選擇同一個 Repo。
* **設定服務**：
* **Service Name**: 取名 `frontend`。
* **Root Directory**: 輸入 `frontend` (告訴它前端網頁在哪)。
3. **取得網址**：
* 等待部署完成 (綠燈)。
* 切換到 "Networking" 分頁 → "Generate Domain"。
* 點擊產生的網址 (例如 `yyyyy.zeabur.app`)。

**🎉 恭喜！你的專屬記帳 App 已經上線了！**
現在你可以用手機打開這個前端網址，隨時隨地開始記帳，資料都會自動同步到你的 Google Sheet。

## 校長未來的行程

有許多學生詢問說，後續我的動向，以及追蹤我的開課通知

如果你想到現場和校長聊聊，你可以免費參與這兩個活動，尋找六角攤位

並和我分享你是參加過 Vibe Coding 的學生，我會很開心的~

* [WebConf 研討會 12/12~12/13](https://webconf.tw/)
* [Yourator 博覽會](https://yourator.co/events/2026-Yourator-AI-careerfair?utm_source=yourator&utm_medium=homepage&utm_campaign=hexschool)

## Vibe Coding 體驗營

## 21 天後端工程師體驗營 (2026/1/7~2026/1/28)


## 一年後端工程師培訓營 (2026/3~2027/3)