# 影片筆記：找不到適合自己的 App？不如乾脆自己做一個！沒有程式基礎也沒有關係，只要會「許願」就可以了喔！


<!-- VIDEONOTE_PUBLICATION_WARNINGS_BEGIN -->
## ⚠️ 全文快速校讀發現待確認修正

本筆記已完成可閱讀的逐字稿與時間跳轉；下列為待處理問題，建議播放原片確認。

- 待修正：⚠️ 全文快速校讀：已套用暫定修正，請確認（segment=40 已先套用暫定修正：其中 Fable 5.1 需要另外购买点数才能够使用 → 其中 Fable 5.1 需要另外購買點數才能夠使用；segment=110 已先套用暫定修正：譬如我想要采用 Google 的 Gemini 3.8 Live 模型 → 譬如我想要採用 Google 的 Gemini 2.0 Flash Live 模型）
- 待修正：逐字稿可先使用，但有待校正清單（segment=110 rapid_semantic_review: 全文速讀上下文判斷；尚未回聽或交叉比對；segment=380 rapid_semantic_review: 全文速讀上下文判斷；尚未回聽或交叉比對）

<!-- VIDEONOTE_PUBLICATION_WARNINGS_END -->

## 一句話總結

本影片示範如何透過 AI 助理（以 Claude 為例）開發具備語音輸入、自動提醒並透過 LINE 發送通知的 Web App，涵蓋從環境設定、需求分析、程式碼生成到雲端部署與版本控制的完整實作流程，強調即使無程式基礎，也能透過「許願」完成開發。

## 核心重點

1.  **AI 輔助開發流程**：利用 AI 助理（Claude/ChatGPT）進行需求分析、程式碼生成、除錯與部署，降低開發門檻。
2.  **完整技術棧整合**：整合前端（Web App）、後端服務（Cloudflare）、資料庫、通訊 API（LINE Messaging API）以及 AI 模型（Gemini/Claude）。
3.  **版本控制與安全性**：強調使用 Git/GitHub 進行版本管理，包括分支開發、合併與還原，確保專案可維護性與安全性。
4.  **無程式碼基礎的可行性**：透過自然語言描述需求（提示詞），由 AI 生成程式碼與配置，使用者只需關注功能邏輯與測試。

## 詳細大綱

### 一、 前期準備與環境設定
1.  **AI 工具選擇與訂閱**
    *   示範使用 Claude，若習慣 ChatGPT 亦可套用相同開發思路。
    *   需註冊私人帳號並訂閱 Pro 以上方案（月繳或年繳）。
    *   下載並安裝 Claude 官方桌面版軟體。
2.  **專案初始化**
    *   建立空白資料夾存放 App 相關檔案。
    *   在 Claude 中指定該資料夾為「專案路徑」並信任工作區。
    *   選擇 AI 模型：示範使用預設的 Opus（Fable 5.1 需額外購買點數）。
    *   設定思考強度：維持預設的 Medium（中等）。
    *   監控額度使用狀況（最近 5 小時及整週）。
3.  **輔助資源準備**
    *   **圖示生成**：使用 ChatGPT 的「製作影像」功能生成向量插畫風格圖示，並儲存至專案資料夾。
    *   **安全性插件**：安裝官方插件「Security Guidance (安全性指引)」以檢查常見安全問題。

### 二、 需求定義與開發計畫
1.  **釐清核心問題**
    *   解決問題、目標使用者、執行環境（電腦/手機）、介面風格、操作流程。
2.  **具體需求描述（提示詞範例）**
    *   **功能**：透過口說建立提醒，指定時間透過 LINE 發送訊息給自己或親友。
    *   **使用者**：個人自用，無上架打算。
    *   **介面**：現代極簡風格，包含圓形麥克風按鈕。
    *   **流程**：輸入密碼登入 -> 點擊麥克風 AI 打招呼 -> 口說提醒內容與時間 -> AI 確認 -> 建立排程 -> 準時發送通知。
    *   **技術要求**：採用 Google 的 Gemini 2.0 Flash Live 模型；實作前需討論；解釋需淺顯易懂。
3.  **生成開發計畫書**
    *   Claude 根據需求提出確認問題，回答後生成開發計畫書。
    *   計畫書說明功能架構及需使用者親自操作的步驟。

### 三、 版本控制與雲端部署
1.  **Git 版本管理與 GitHub 設定**
    *   註冊免費 GitHub 帳號。
    *   安裝 GitHub CLI 工具，透過 Claude 協助安裝。
    *   完成 GitHub 帳號授權（透過終端機執行指令、輸入 8 碼驗證碼）。
    *   進行第一次「存档」，在 GitHub 建立私人空間備份進度。
2.  **雲端主機設定 (Cloudflare)**
    *   註冊免費 Cloudflare 帳號。
    *   授權 Claude 登入並建立雲端資料庫與相關設定。
3.  **安全性設定**
    *   設定 App 登入密碼，防止他人進入管理介面。

### 四、 AI 模型金鑰與 LINE 串接
1.  **Google AI Studio API Key**
    *   前往 Google AI Studio 建立 API 金鑰。
    *   將金鑰貼入 Claude 執行程式碼以完成設定。
2.  **LINE 官方帳號與機器人設定**
    *   註冊 LINE 官方帳號（可略過認證步驟）。
    *   開啟 Messaging API 通道。
    *   取得兩把鑰匙：
        *   **Channel Secret**
        *   **Channel Access Token**
    *   將兩把鑰匙分別貼入 Claude 執行程式碼。
3.  **Webhook 設定**
    *   複製 Claude 提供的 Webhook 網址。
    *   在 LINE 網站編輯 Webhook 並啟用。
    *   關閉「自動回覆訊息」功能。

### 五、 測試與部署
1.  **App 測試**
    *   透過手機瀏覽器測試 App 網址，輸入密碼登入。
    *   將網站加入手機主畫面，使其看起來像原生 App。
    *   **功能測試**：
        *   語音輸入提醒（如：洗衣服、倒垃圾）。
        *   確認時間與內容。
        *   驗證 LINE 是否收到自動通知。
2.  **專案維護**
    *   執行 `/init` 指令，生成 `CLAUDE.md` 專案備忘錄，記錄架構與技術細節，便於未來維護。
    *   將進度提交 (Commit) 並推送 (Push) 至 GitHub。

### 六、 功能修改與版本管理
1.  **介面修改流程**
    *   撰寫提示詞要求修改（如：麥克風按鈕變藍色、尺寸加大 1.5 倍）。
    *   要求 Claude 先建立「預覽版」進行測試，確認無誤後再部署至正式網址。
    *   修改完成後提交並推送至 GitHub。
2.  **版本還原**
    *   若效果不佳，請 Claude 列出所有存档記錄。
    *   指定特定編號的歷史版本進行還原。
    *   選擇「捨棄」該點之後的修改，或「保留」後續紀錄以新增提交的方式覆蓋。
    *   確認舊存档仍完整保留。

### 七、 新功能開發流程（分支策略）
1.  **新增功能範例**：口說生成賀卡並指定時間傳送給親友。
2.  **分支實作**
    *   請 Claude 從現有正式版建立獨立分支進行實作。
    *   指定使用圖片生成模型（如 Google 自家的 Gemini 2.0 Flash）。
3.  **帳單設定**
    *   若模型無免費額度，需綁定帳單。
    *   在 Google AI Studio 設定帳單並輸入信用卡資料（範例中儲值最低金額台幣 150 元）。
4.  **測試與合併**
    *   測試新功能（生成早安圖、中秋節賀卡並傳送）。
    *   確認運作正常後，請 Claude 將變更部署至正式網址。
    *   將分支合併回主線，推送至 GitHub，並刪除該分支。

## 工具 / 模型 / 名詞整理

*   **AI 助理/模型**：
    *   ChatGPT
    *   Claude
    *   Opus (Claude 模型)
    *   Fable 5.1 (Claude 模型)
    *   Google Gemini 2.0 Flash Live (模型)
    *   Gemini 2.0 Flash (模型)
    *   Nano Banana 2 (疑點：模型名稱，聽寫可能錯誤)
*   **開發與雲端服務**：
    *   Claude 官方桌面版軟體
    *   GitHub
    *   GitHub CLI
    *   Cloudflare (雲端主機)
    *   Google AI Studio
*   **通訊與介面**：
    *   LINE
    *   LINE 官方帳號
    *   Messaging API
    *   Webhook
*   **其他工具/功能**：
    *   ChatGPT 「製作影像」功能
    *   Security Guidance (安全性指引) - Claude 插件
    *   Git (版本管理)
    *   CLAUDE.md (專案備忘錄文件)

## 操作流程整理

1.  **環境準備**：訂閱 Claude Pro，安裝桌面版，建立專案資料夾，設定專案路徑與信任工作區，選擇模型（Opus/Fable），設定思考強度，安裝 Security Guidance 插件，使用 ChatGPT 生成圖示。
2.  **需求定義**：描述功能（語音提醒、LINE 通知）、使用者、介面風格與流程，生成開發計畫書。
3.  **基礎設施設定**：註冊 GitHub 與 Cloudflare，安裝 GitHub CLI，授權 Claude 存取，建立雲端資料庫，設定 App 登入密碼。
4.  **API 串接**：在 Google AI Studio 建立 API Key，註冊 LINE 官方帳號並取得 Channel Secret 與 Access Token，設定 Webhook 網址並啟用。
5.  **測試與部署**：透過手機瀏覽器測試 App，加入主畫面，測試語音輸入與 LINE 通知，執行 `/init` 生成備忘錄，提交並推送程式碼至 GitHub。
6.  **修改與維護**：透過提示詞修改介面，建立預覽版測試，確認後部署正式版，提交程式碼。
7.  **新功能開發**：建立獨立分支，設定模型帳單，測試新功能（如賀卡生成），確認無誤後部署並合併回主線，刪除分支。

## 值得注意的限制或風險

1.  **模型成本與訂閱**：使用特定模型（如 Fable 5.1）可能需要額外購買點數或訂閱更高方案；部分模型（如 Gemini 2.0 Flash）若無免費額度需綁定信用卡並儲值。
2.  **API 金鑰與憑證安全**：需妥善保管 Google AI Studio API Key、LINE Channel Secret 與 Access Token，避免洩露。
3.  **版本控制依賴**：依賴 GitHub 與 Cloudflare 的免費方案可能有限制，且需確保網路連線穩定以進行部署與測試。
4.  **AI 生成程式碼的準確性**：雖有版本控制可還原，但 AI 生成的程式碼仍需使用者具備基本除錯能力或依賴 AI 進行修正，可能存在潛在的安全漏洞或效能問題。
5.  **LINE 官方帳號認證**：雖可略過認證步驟，但可能影響部分功能或長期穩定性，需留意 LINE 官方政策變動。

## 逐字稿辨識疑點

*   **Fable 5.1**：逐字稿提及此為 Claude 可選模型之一，需查證是否為正確模型名稱。
*   **Nano Banana 2**：逐字稿提及此模型未提供免費額度，需綁定帳單，疑為聽寫錯誤或特定內部/測試模型名稱，無法確認實際指涉何種 AI 模型。
*   **Google 的 Gemini 2.0 Flash Live 模型**：逐字稿提及此名稱，需查證 Google 官方是否確實發布此精確版本名稱（通常為 Gemini 1.5 Flash 或 Live 功能，但 "2.0 Flash Live" 組合需確認）。
*   **Opus**：逐字稿提及選擇預設的 Opus，需確認在該時間點 Claude 桌面版預設或可用模型是否確實包含 Opus 或其變體名稱。
*   **segment 110: rapid_semantic_review** — 全文速讀上下文判斷；尚未回聽或交叉比對。
*   **segment 380: rapid_semantic_review** — 全文速讀上下文判斷；尚未回聽或交叉比對。
*   **segment 40: rapid_semantic_review** — 上下文提到 'Opus' 為 Claude 模型，且需要 'Pro' 訂閱。'Fable' 可能是 'Claude' 的誤聽，'5.1' 可能是 '3.5' 或 'Sonnet' 的誤聽。

## 可延伸追問

1.  如何確保 AI 生成的程式碼在安全性上符合最佳實踐？
2.  若使用免費方案，Cloudflare 與 GitHub 的限制會如何影響 App 的可用性？
3.  如何監控與優化 AI 模型的使用成本，避免意外高額帳單？
4.  在沒有程式基礎的情況下，使用者應如何有效與 AI 溝通以獲得準確的程式碼？
5.  LINE 官方帳號的認證狀態對 Webhook 功能的穩定性有何影響？