不用 CMD 做專案的完整流程

前言：為什麼可以不用 CMD？

💡 比喻：自動駕駛 傳統寫程式就像手排車——你要自己踩離合器、換檔、打方向燈。 用 Claude Code 就像自動駕駛——你只要說「我要去台北」，車子自己開。

CMD（命令列）就是那些「手動換檔」的操作。 有了 Claude Code，你用中文告訴 AI 你要什麼，它會幫你處理所有 CMD 指令。

傳統流程 vs Claude Code 流程

傳統流程（需要 CMD）：
1. 打開命令提示字元                                    # 要知道怎麼開
2. 輸入 dotnet new mvc -n MyProject                    # 要記指令
3. 輸入 cd MyProject                                   # 要懂路徑切換
4. 輸入 dotnet add package Microsoft.EntityFrameworkCore # 要知道套件名稱
5. 手動編輯 Program.cs                                 # 要知道寫什麼
6. 輸入 dotnet build                                   # 要記 build 指令
7. 輸入 dotnet run                                     # 要記 run 指令

Claude Code 流程（不需要記 CMD）：
1. 啟動 Claude Code                                    # 雙擊或一行指令
2. 說："幫我建一個 ASP.NET Core MVC 專案"              # 用中文描述
3. AI 自動執行所有 CMD 指令                             # 你不用記任何指令
4. 說："幫我跑起來看看"                                # AI 自動 dotnet run

用 Claude Code 建立 ASP.NET Core 專案

步驟 1：啟動 Claude Code

claude                                                 # 啟動 Claude Code

步驟 2：用自然語言描述需求

你說：
"幫我在 C:/Users/user/ 建立一個 ASP.NET Core 8.0 MVC 專案，
  專案名稱：GuitarSchool
  功能需求：
  1. 首頁有 Hero Banner 和課程精選
  2. 課程列表頁可以篩選難度（初級/中級/高級）
  3. 聯絡表單（姓名、Email、留言）
  技術需求：
  - Entity Framework Core + SQLite
  - Bootstrap 5，暖米色系（背景 #F5F1EB）
  - 響應式設計
  規則：
  - 所有註解用繁體中文
  - Controller 和 Model 名稱用英文"

AI 會自動執行的操作

AI 的工作流程：                                        # 你不需要手動操作任何一步
1. dotnet new mvc -n GuitarSchool                      # 建立 MVC 專案
2. cd GuitarSchool                                     # 進入專案目錄
3. dotnet add package Microsoft.EntityFrameworkCore.Sqlite  # 安裝 EF Core
4. dotnet add package Microsoft.EntityFrameworkCore.Design  # 安裝設計工具
5. 建立 Models/Course.cs                               # 建立資料模型
6. 建立 Data/AppDbContext.cs                            # 建立資料庫上下文
7. 修改 Program.cs                                     # 註冊 DI 服務
8. 建立 Controllers/CourseController.cs                 # 建立控制器
9. 建立 Views/Course/Index.cshtml                       # 建立頁面
10. 修改 Views/Shared/_Layout.cshtml                    # 套用暖米色系
11. dotnet ef migrations add InitialCreate              # 建立資料庫遷移
12. dotnet ef database update                           # 更新資料庫
13. dotnet build                                        # 確認編譯通過

你只說了一段中文，AI 就執行了 13 個步驟。 這就是「不用 CMD」的意思——你不需要記這些指令。

用自然語言描述需求，AI 生成程式碼

範例 1：建立 Model

你說："幫我建一個 Course Model，欄位有：               # 用中文描述你要什麼
  - Id (int, 主鍵)
  - Title (string, 課程標題)
  - Description (string, 課程介紹)
  - Level (string, 難度：Beginner/Intermediate/Advanced)
  - Price (decimal, 價格)
  - ImageUrl (string, 封面圖片網址)
  - CreatedAt (DateTime, 建立時間)"

AI 會自動生成：

namespace GuitarSchool.Models;  // 命名空間，對應專案結構

public class Course  // 課程資料模型
{
    public int Id { get; set; }  // 主鍵，自動遞增
    public string Title { get; set; } = "";  // 課程標題，預設空字串
    public string Description { get; set; } = "";  // 課程介紹
    public string Level { get; set; } = "Beginner";  // 難度等級，預設初級
    public decimal Price { get; set; }  // 課程價格
    public string ImageUrl { get; set; } = "";  // 封面圖片網址
    public DateTime CreatedAt { get; set; } = DateTime.Now;  // 建立時間，預設現在
}

範例 2：建立 Controller

你說："幫我建一個 CourseController，要有：              # 描述需要的功能
  - Index：列出所有課程，可以用 query string 篩選難度
  - Details：顯示單一課程詳情
  - 用 EF Core 讀取資料庫"

AI 會自動生成完整的 Controller，包含注入 DbContext、LINQ 查詢、錯誤處理。

範例 3：修改樣式

你說："把網站的 Navbar 改成深色風格：                   # 用中文描述視覺需求
  - 背景色 #2C3E50
  - 文字白色
  - hover 時文字變成 #F39C12
  - 加上陰影效果"

AI 會自動修改 CSS 和 HTML，你不用知道 CSS 的語法。

用 Chrome MCP 預覽網站

💡 比喻：監視器 Chrome MCP 就像你辦公桌上的監視器：

• AI 改完程式碼後，自動在監視器上顯示結果
• 你不用自己開瀏覽器、不用自己輸入網址
• AI 可以幫你截圖、檢查畫面、甚至點擊測試

預覽流程

你說："幫我啟動網站，然後截圖給我看"                   # 一句話搞定
  ↓
AI 執行 dotnet run                                     # 啟動網站
  ↓
AI 透過 Chrome MCP 打開 https://localhost:5001          # 自動開瀏覽器
  ↓
AI 截圖並分析畫面                                       # 自動擷取畫面
  ↓
AI 回報："網站已啟動，首頁有 Hero Banner、                # 告訴你結果
  三張課程卡片、底部有聯絡表單。
  發現一個問題：手機版的卡片沒有正確排列。"               # 還會主動發現問題

互動式測試

你說："幫我測試聯絡表單，填入測試資料然後送出"          # 用中文描述測試步驟
  ↓
AI 透過 Chrome MCP：                                   # AI 自動操作瀏覽器
1. 導航到聯絡表單頁面                                   # 打開頁面
2. 在姓名欄位輸入 "測試用戶"                            # 填寫表單
3. 在 Email 欄位輸入 "test@example.com"                # 填寫 Email
4. 在留言欄位輸入 "這是測試留言"                        # 填寫留言
5. 點擊送出按鈕                                        # 提交表單
6. 截圖顯示結果                                        # 擷取結果畫面
  ↓
AI 回報："表單送出成功，頁面顯示感謝訊息。"              # 告訴你測試結果

用 Railway / Azure 一鍵部署

💡 比喻：寄快遞 部署網站就像寄快遞：

• 傳統方式：自己開車送到倉庫（設定伺服器、FTP 上傳）
• Railway/Azure：叫快遞來收（推程式碼到 GitHub，平台自動部署）
• Claude Code：連叫快遞都幫你打電話（AI 幫你設定一切）

Railway 部署（最簡單）

你說："幫我把這個專案部署到 Railway"                    # 一句話
  ↓
AI 執行的步驟：                                         # 你不需要手動操作
1. 建立 .gitignore                                     # 忽略不需要的檔案
2. 建立 Dockerfile 或 railway.json                      # 部署設定
3. git init && git add . && git commit                  # 初始化 Git
4. 建立 GitHub repository（如果需要）                    # 建立遠端倉庫
5. git push                                            # 推送程式碼
6. 連接 Railway 和 GitHub                               # 設定自動部署

Azure 部署

你說："幫我部署到 Azure App Service"                   # 描述部署目標
  ↓
AI 執行的步驟：                                         # 自動化流程
1. 建立 Azure 的部署設定檔                               # 設定檔案
2. 設定 publish profile                                # 發布設定
3. dotnet publish -c Release                           # 編譯發布版本
4. 透過 Azure CLI 部署                                  # 執行部署

環境變數設定（不碰 CMD）

💡 比喻：保險箱 環境變數就像保險箱裡的密碼：

• 不寫在紙上（不寫在程式碼裡）
• 放在安全的地方（系統環境變數或雲端平台設定）
• 需要的時候才拿出來用

本地開發的環境變數

你說："幫我設定資料庫連線字串，用 dotnet user-secrets"  # 用中文描述

AI 自動執行：
dotnet user-secrets init                               # 初始化密鑰管理
dotnet user-secrets set "ConnectionStrings:Default" "Data Source=guitar.db"
                                                       # 儲存連線字串到安全的地方

雲端平台的環境變數

你說："幫我在 Railway 設定環境變數：                     # 描述要設定的變數
  - ASPNETCORE_ENVIRONMENT = Production
  - ConnectionStrings__Default = （Railway 的資料庫連線）"

AI 會告訴你操作步驟，或直接透過 Railway CLI 設定          # 不用手動登入後台

在程式碼中讀取環境變數

// ❌ 錯誤：把密碼寫死在程式碼裡
var connectionString = "Server=mydb;Password=abc123";  // 密碼會被看到

// ✅ 正確：從環境變數讀取
var connectionString = builder.Configuration  // 從設定中讀取
    .GetConnectionString("Default");         // 讀取名為 Default 的連線字串

錯誤排查：看 AI 的錯誤訊息學習

💡 比喻：看醫生 錯誤訊息就像身體的症狀：

• 你不需要自己當醫生（不用自己看懂錯誤）
• 把症狀告訴醫生（把錯誤訊息給 AI）
• 醫生會診斷並開藥（AI 會分析並修復）
• 但你要知道基本的健康知識（了解常見的錯誤模式）

常見錯誤類型

錯誤類型 1：編譯錯誤（Compile Error）
"error CS0246: The type or namespace 'Product' could not be found"
                                                       # 找不到 Product 這個類型
你說："dotnet build 出現這個錯誤，幫我修"              # 把錯誤訊息給 AI
AI 會：檢查 using 語句、檢查 namespace、自動修復         # AI 分析並修復

錯誤類型 2：執行時錯誤（Runtime Error）
"System.NullReferenceException"                       # 空參考例外
你說："跑起來出現 NullReferenceException"              # 描述問題
AI 會：找到出錯的程式碼、分析為什麼是 null、修復         # AI 自動追蹤

錯誤類型 3：資料庫錯誤（Database Error）
"SQLite Error 1: no such table: Courses"              # 找不到資料表
你說："資料庫出錯了"                                   # 簡單描述
AI 會：檢查 Migration、重新建立資料庫、修復              # AI 處理資料庫問題

學習技巧

每次 AI 修完 bug，問它：                                # 把修 bug 當學習機會
"為什麼會出這個錯？以後怎麼避免？"

AI 會解釋：
1. 錯誤的原因（為什麼壞了）                             # 理解問題本質
2. 修復的邏輯（怎麼修的）                               # 學習解決方法
3. 預防的方法（以後怎麼避免）                            # 避免重複犯錯

完整案例：從零建立吉他教學網站

第一步：描述需求

你說：
"幫我從零開始建一個吉他教學網站 GuitarSchool，          # 完整的需求描述
  用 ASP.NET Core 8.0 MVC。

  功能：
  1. 首頁：Hero Banner + 精選課程（3 張卡片）
  2. 課程列表：所有課程，可篩選難度
  3. 課程詳情：課程介紹 + 報名按鈕
  4. 聯絡我們：姓名、Email、留言的表單

  技術：
  - SQLite + Entity Framework Core
  - Bootstrap 5
  - 暖米色系（背景 #F5F1EB，主色 #8B6914）

  規則：
  - 繁體中文註解
  - 響應式設計（手機要能看）
  - Seed Data 要有 6 門範例課程"

第二步：AI 開始工作

AI 會自動完成所有步驟：                                 # 你只需要看著

✅ 建立專案結構                                        # dotnet new mvc
✅ 安裝 NuGet 套件                                     # EF Core, SQLite
✅ 建立 Course Model                                   # 資料模型
✅ 建立 AppDbContext                                   # 資料庫上下文
✅ 建立 Seed Data                                      # 6 門範例課程
✅ 設定 Program.cs                                     # DI 註冊
✅ 建立 CourseController                               # CRUD 控制器
✅ 建立 Views（首頁、列表、詳情、聯絡）                  # 所有頁面
✅ 套用 Bootstrap 5 + 暖米色系                          # 樣式設計
✅ 建立 Migration + 更新資料庫                          # 資料庫初始化
✅ dotnet build 確認編譯通過                            # 品質檢查

第三步：預覽和微調

你說："跑起來給我看看"                                 # 啟動預覽
AI 執行 dotnet run + Chrome MCP 截圖                    # 自動預覽

你說："首頁的卡片間距太小，加大一點"                     # 微調樣式
AI 修改 CSS → 重新截圖                                 # 即時修改

你說："聯絡表單送出後要顯示成功訊息"                    # 加新功能
AI 加上 TempData + 成功提示 → 測試                     # 快速迭代

你說："幫我部署到 Railway"                             # 一鍵部署
AI 設定 Dockerfile + git push + 部署                   # 自動部署上線

第四步：持續迭代

部署完成後，你隨時可以加功能：                           # 持續改進

你說："加一個學生評價功能"                              # 新功能
→ AI 建 Review Model + Controller + View               # 自動完成

你說："首頁加上最新評價區塊"                            # 整合功能
→ AI 修改首頁，加入評價輪播                              # 自動修改

你說："重新部署"                                       # 更新上線
→ AI 執行 git push → Railway 自動部署                   # 一句話更新

🤔 我這樣寫為什麼會錯？

❌ 錯誤 1：需求描述太模糊，AI 做出不預期的結果

❌ 你說："幫我做一個網站"                              # 太模糊
→ AI 可能做出一個只有 Hello World 的空白頁面              # 不是你要的

✅ 正確做法：
"用 ASP.NET Core 8.0 MVC 做吉他教學網站，              # 指定技術和主題
  功能：首頁、課程列表、聯絡表單，                        # 指定功能
  Bootstrap 5，暖米色系（#F5F1EB），                     # 指定風格
  SQLite + EF Core，繁體中文註解"                       # 指定技術細節

💡 需求描述的四個要素：技術棧、功能、風格、規則。
   缺一個，AI 就可能做錯一部分。

❌ 錯誤 2：一次給 AI 太多需求，結果一塌糊塗

❌ 你說：
"幫我做一個網站，要有會員系統、購物車、金流、
  後台管理、聊天室、通知系統、搜尋引擎..."               # 一次太多功能
→ AI 會崩潰或做出一堆有 bug 的程式碼                     # 品質無法保證

✅ 正確做法：分批進行
第一批："先做首頁和課程列表"                            # 核心功能
→ 確認沒問題，commit

第二批："加上聯絡表單"                                  # 次要功能
→ 確認沒問題，commit

第三批："加上會員註冊"                                  # 進階功能
→ 確認沒問題，commit

💡 一次一個功能，每次都 build + 測試 + commit。
   這叫「迭代開發」，是業界標準做法。

❌ 錯誤 3：部署前沒有檢查環境變數

❌ 常見情況：
本地開發用 SQLite，部署到 Railway 也用 SQLite             # 本地沒問題
但 Railway 每次重新部署會清空檔案系統                      # SQLite 檔案被刪除
→ 資料全部消失                                           # 上線後資料不見了

✅ 正確做法：
1. 本地開發用 SQLite（方便）                              # 開發環境
2. 部署時用 PostgreSQL（Railway 提供免費方案）             # 生產環境
3. 用環境變數切換連線字串                                  # 不用改程式碼
4. 告訴 AI："幫我設定環境變數切換資料庫"                  # 讓 AI 處理

💡 開發環境和生產環境的設定應該不同，
   用環境變數來切換是標準做法。

本章重點整理