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 {
    
    // 1. 使用者私有資料：這部分你寫得很好，保留即可
    match /artifacts/{appId}/users/{userId}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    
    // 2. 公共數據修正：
    // 將路徑改為直接指向 data 文件，或使用 {allPaths=**}
    match /artifacts/{appId}/public/data {
      allow read: if request.auth != null; 
      allow write: if false; 
    }

    // 或者是更彈性的寫法，允許 public 資料夾下的所有內容讀取
    match /artifacts/{appId}/public/{allPaths=**} {
      allow read: if request.auth != null;
    }
  }
}

根据规则，建构数据库结构，其中 public 需要手动建立，待会下方的教学会介绍为什么要额外存放 Gemini API Key。

- (集合) artifacts
  - (文件) my-vocab-app
    - (子集合) public
      - (文件) data
        - (集合) api
          - (文件) gemini
            - (欄位) key <--- 存放 Gemini API Key
    - (子集合) users
      - (文件) 各個 user Id <---- 自動產生 
        - (集合) cards 
          - (文件) card Id <---- 自動產生
            - (欄位) time
            - (欄位) word
            - (欄位) translate

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 金钥，点击“显示金钥”就可以进行复制，待会需要再数据库中加入这组金钥。

特别注意！不能直接把 Gemini 金钥暴露在网页程序码中，如果 Google 有侦测到暴露的金钥，会在 24 小时内停用这组金钥。

Vibe Coding 英文单字卡网页

前面所有的步骤都完成后，最后就要透过 Vibe Coding 的方式，来实现一个“英文单字卡”的网页了！参考下面这段提示词：

我已經設定了 firebase 的 Google 登入、 firebase 網頁應用程式代碼和 firestore 資料庫，firestore 結構如下：
1、(集合) artifacts
  1.1、(文件) my-vocab-app
    1.1.1、(子集合) public
      1.1.1.1、(文件) data
        1.1.1.1.1、(集合) api
          1.1.1.1.1.1、(文件) gemini
            1.1.1.1.1.1.1、(欄位) key <--- 存放 Gemini API Key
    1.1.2、(子集合) users
      1.1.2.1、(文件) 各個 user Id <---- 自動產生 
        1.1.2.1.1、(集合) cards 
          1.1.2.1.1.1、(文件) card Id <---- 自動產生
            1.1.2.1.1.1.1、(欄位) time
            1.1.2.1.1.1.2、(欄位) word
            1.1.2.1.1.1.3、(欄位) translate

請幫我產生一個「英文單字卡」網頁：
- 使用者只能使用 google 註冊登入。
- 只使用基本 HTML 和 JS，不要使用任何框架。
- 網頁中可以放置我自己的 firebase 應用程式配置。
- 登入後可以讀取 public > data> api 裡的 API key，啟用 AI 輔助功能。
- 新增單字時，後方多一個「AI 輔助」按鈕，點擊之後會呼叫剛剛讀取的 gemini api key，讓 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 应用程序设定码。

完成后可以在本机启用服务器查看，或参考“使用 GitHub 部署你的网页作品”将网页部署到 Github 上查看，打开后应该会出现注册画面。

使用 Google 账号注册后，就可以进入单字卡的画面，可以自行输入中英文。

如果只知道英文不知道中文，也可以点击后方 AI 小按钮，呼叫 Gemini AI 自动带入提示。

小结

虽然 Vibe Coding 可以大幅减少写程序的时间，但许多数据库、API 和安全性等功能，都还是要自己手动处理，而且要打造一个好的产品，最重要的步骤仍然是最初期的“需求规划”和“流程图”，希望透过这个范例，可以让大家了解一个产品的基本开发流程。

意见反馈