Vibe Coding 範例 - 英文單字卡

這個 Vibe Coding 範例會從設計「流程圖」開始，逐步藉由 Firebase Authentication 設計帳號註冊登入機制，搭配 Firebase Firestore 建構資料庫，最後結合 Gemini API 做出自動填補中文的功能，最後會產生一個簡單但完整的「英文單字卡」網頁工具。

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• Step 1、了解需求、繪製流程圖
• Step 2、啟用 Google 註冊登入機制
• Step 3、建構 Firebase Firestore 資料庫
• Step 4、建立 Firebase 網頁應用程式
• Step 5、啟用 Gemini API
• Vibe Coding 英文單字卡網頁

Step 1、了解需求、繪製流程圖

要實作任何工具或功能之前，都要先了解自己的「需求」，並嘗試完整描述需求，如此一來 AI 也才能準確產出結果，首先如果要製作「英文單字卡」，可能的需求如下：

• 基本需求：使用者使用 Google 帳號註冊，登入後可以看到自己建立的單字卡，單字卡可以編輯和刪除 ( CRUD 功能 )。
• 進階需求：若不知道單字中文解釋，可透過 AI 補充中文意思，單字卡也可以導向線上英文辭典。

根據需求，參考「Vibe Coding 重要的準備工作：架構流程圖」教學，嘗試用「Mermaid」語法繪製「流程圖」，下方是英文單字卡的流程圖語法和產生的結果。

flowchart TD
A[進入網頁] -->|彈出視窗| B(登入或註冊)
B --> |登入|C{登入判斷}
B --> |註冊|D{註冊判斷}
C --> |登入成功| E[主畫面]
C --> |登入失敗| B
D --> |註冊完成或返回| B
E --> |輸入內容|F{儲存判斷}
F --> |儲存|E
F --> |清除重填|E
E --> |刪除項目|G{刪除判斷}
G --> |刪除|E
E --> |編輯項目|H{編輯判斷}
H --> |儲存|E
H --> |取消|E
G --> |取消|E
E --> |登出|A

Step 2、啟用 Google 註冊登入機制

因為「單字卡」屬於使用者自己的紀錄，因此需要搭配「登入」功能，將單字卡紀錄在自己的帳號下，因此要先建立並進入 Firebase 專案，從左側選擇「Authentication」，登入方式選擇「Google」 ( 如果有 Email 登入需求可以自行設定，範例中只設定 Google 登入 )。

詳細參考：Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗

特別注意，登入機制預設會綁定「網域」，也會加入「localhost」開發時的本機網域，上線之後記得把這串拿掉，並加入自己的網域名稱，才可以正常運作。

詳細參考：設定 Authentication 授權網域

Step 3、建構 Firebase Firestore 資料庫

進入自己的 Firebase 專案，從左側選擇「Firebase Firestore」，建立一個自己的 Firestore 資料庫。

詳細參考：Vibe Coding 串接 Firebase Firestore

切換到「規則」頁籤，將下列的資料庫規則填入規則欄位，這組規則可以限制只有「登入帳號」才可以查看「自己的」資料。

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    
    // 針對應用程式專屬路徑的規則
    // 路徑結構: /artifacts/{appId}/users/{userId}/{document=**}
    match /artifacts/{appId}/users/{userId}/{allPaths=**} {
      
      // 1. 確保使用者已登入
      // 2. 確保登入者的 UID 符合路徑中的 userId，實現資料隔離
      allow read, write: if request.auth != null && request.auth.uid == userId;
      
    }
    
    // 如果您有使用公共數據 (選用)
    match /artifacts/{appId}/public/data/{collectionName}/{docId} {
      allow read: if request.auth != null; // 登入即可讀取
      allow write: if false;               // 禁止隨意寫入公共數據
    }
  }
}

Step 4、建立 Firebase 網頁應用程式

進入自己的 Firebase 專案，建立「網頁」應用程式。

詳細參考：建立 Firebase 應用程式

應用程式建立完成後，從專案的「一般」頁籤裡，就可以看見在網頁裡面使用應用程式的「設定碼」，這也是待會網頁裡要手動置換的內容。

Step 5、啟用 Gemini API

為了讓輸入單字時更方便 ( 不用輸入中文解釋 )，可以讓單字卡串接 Gemini API，讓 AI 自動產生中文解釋，要實現這步驟必須先前往 Google Cloud 啟用「Generative Language API」，進入 Google Cloud 專案裡，選擇「API 和服務 > 憑證」，所建立的憑證畫面，限制的範圍只能使用「Generative Language API」。

也可以透過 Google AI Studio 建立 API，並綁定對應的 Google Cloud 專案，詳細參考：用 Gemini API 開啟你的 Vibe Coding 新時代。

完成後就可以看到自己的 API 金鑰，點擊「顯示金鑰」就可以進行複製，待會網頁中也需要填入這組金鑰。

強烈建議正式上線時，要加上「網域」的保護，限制這組 API 金鑰可以使用的範圍，參考「設定 Gemini API 金鑰安全性」。

Vibe Coding 英文單字卡網頁

前面所有的步驟都完成後，最後就要透過 Vibe Coding 的方式，來實現一個「英文單字卡」的網頁了！參考下面這段提示詞：

我已經設定了 firebase 的 Google 登入、 firebase 網頁應用程式代碼和 firestore 資料庫，firestore 結構如下：
(集合)users -> (文件)userId -> (集合)cards -> (文件)cardId -> (欄位)word, translate, time
請幫我產生一個「英文單字卡」網頁：
- 使用者只能使用 google 註冊登入。
- 只使用基本 HTML 和 JS，不要使用任何框架。
- 新增單字時，後方多一個「AI 輔助」按鈕，點擊之後會呼叫我自己建立的 gemini api，讓 AI 把「常用又簡短」的中文意思帶入中文欄位。
- 單字卡裡面多一個字典連結，連結到 https://dictionary.cambridge.org/zht/%E8%A9%9E%E5%85%B8/%E8%8B%B1%E8%AA%9E-%E6%BC%A2%E8%AA%9E-%E7%B9%81%E9%AB%94/{單字}
- 流程圖如下：
flowchart TD
A[進入網頁] -->|彈出視窗| B(登入或註冊)
B --> |登入|C{登入判斷}
B --> |註冊|D{註冊判斷}
C --> |登入成功| E[主畫面]
C --> |登入失敗| B
D --> |註冊完成或返回| B
E --> |輸入內容|F{儲存判斷}
F --> |儲存|E
F --> |清除重填|E
E --> |刪除項目|G{刪除判斷}
G --> |刪除|E
E --> |編輯項目|H{編輯判斷}
H --> |儲存|E
H --> |取消|E
G --> |取消|E
E --> |登出|A

送出提示詞之後，AI 應該就會開始產生網頁，參考「下載 Vibe Coding 網頁程式碼」教學，下載程式碼之後用程式碼編輯器開啟編輯，替換剛剛 Firebase 應用程式設定碼以及加入 Gemini API KEY ( 通常程式碼裡面會有註解說要替換哪個部分 )。

完成後可以在本機啟用伺服器查看，或參考「使用 GitHub 部署你的網頁作品」將網頁部署到 Github 上查看，開啟後應該會出現註冊畫面。

使用 Google 帳號註冊後，就可以進入單字卡的畫面，可以自行輸入中英文。

如果只知道英文不知道中文，也可以點擊後方 AI 小按鈕，呼叫 Gemini AI 自動帶入提示。

小結

雖然 Vibe Coding 可以大幅減少寫程式的時間，但許多資料庫、API 和安全性等功能，都還是要自己手動處理，而且要打造一個好的產品，最重要的步驟仍然是最初期的「需求規劃」和「流程圖」，希望透過這個範例，可以讓大家了解一個產品的基本開發流程。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～