Please enter an access code to continue
常有人問我：
都已經是 AI Coding 的時代了，為什麼還要花時間學程式設計？只要下幾個 Prompt，AI 不就能做出又漂亮、又好用的 App？
我的答案很簡單：因為我在醫療產業。
在醫療領域，每一套系統的架構、每一個流程、每一段程式碼，都必須真正理解、能夠掌握。因為系統出錯，影響的不只是功能，而可能是病人是否拿到正確的藥、接受正確的治療。這樣的責任，不能交給一句 Prompt。
所以，重點從來不是「不用學程式設計」，而是「學」與「寫」的方式改變了。
以前，我們要背語法、查 API，一行一行把程式敲出來；現在有了 AI，從系統設計、程式撰寫、測試、部署到文件整理，都能成為得力的協作夥伴。
但越是如此，越需要判斷能力。你必須知道 AI 為什麼這樣設計、程式碼是否正確、有哪些風險、出了問題該如何修正，而不是照單全收。
AI 能幫你寫程式，卻不能取代你的判斷；AI 能提升效率，卻不能替你承擔責任。
因此，在開始 AI Coding 之前，先把基本功練好，把該懂的先弄懂。真正理解程式設計後，再與 AI 協作，它帶來的不只是更快，而是更強！！
git --version 驗證。本階段（學前知識）的重點是把概念學懂，不必一開始就裝一堆好幾週後才用得到的工具。工作坊全程使用 VS Code 開發，所以 VS Code 是本階段唯一一定要裝好的工具（拿來閱讀、記筆記、試寫）。至於 Node.js、.NET SDK、Docker，都留到第二階段前後端實作時再裝——那時會用 Claude Code 開發，它會在需要的步驟自然提醒你安裝，不需要你現在先準備。各模組結尾的「動手小練習」屬選做，你想先試某個模組，再裝那一項即可。Windows 的 WSL2 是例外——它是模組 01（Linux 基礎指令）的練習環境，也是日後 Docker 的後端，在本模組先裝好可避免卡關。
其餘工具不必現在裝，到第二階段實作時（Claude Code 會提醒）或你想做某模組的動手練習時再裝即可。以下先建立工具鏈全貌：
| 工具 | 用途 | 何時裝 |
|---|---|---|
| VS Code | 全程開發與除錯的編輯器 | 本模組（00） |
| WSL2（僅 Windows） | 模組 01 Linux 練習環境、Docker 後端 | 本模組（00） |
| Node.js LTS | Vue3／前端工具鏈（npm） |
第二階段（或想做模組 05 練習時） |
| .NET 10 SDK | 後端 Web API | 第二階段（或想做模組 06 練習時） |
| Docker Desktop | 跑 PostgreSQL 容器、容器化部署 | 第二階段（或想做模組 08 練習時） |
關於 Git：本模組不引導安裝 Git。工作坊採 git 協作，請直接使用工作／公司環境既有的 Git——多數環境已預裝，或有內部 Git 服務（如 GitLab、內部 repo）可直接連。若不確定，先在終端機執行
git --version確認；有輸出版本號即可用。Git 的觀念與常用指令（clone、commit、branch、PR）在模組 02 說明。
wsl --install，重新啟動電腦。預設會安裝 Ubuntu。
[官方文件] 安裝 WSL (繁中) — https://learn.microsoft.com/zh-tw/windows/wsl/install熟悉之後每天都會用到的 VS Code 基本操作：
hello.md 檔案並存檔。echo hello 確認終端機可用。（想一想：VS Code 的「檔案總管」「編輯區」「整合終端機」各自負責什麼？）
git --version 有正確輸出版本號？wsl -l -v 顯示已安裝 Ubuntu，且 VERSION 欄位為 2？ls、cd、cp、mv、rm、mkdir。cat、less、tail -f 檢視檔案內容，包含持續追蹤 log 的即時輸出。chmod、chown 調整權限，並知道何時需要 sudo。ps、kill、top 觀察與管理正在執行的程序。| 與重導向 > 串接指令，搭配 grep 過濾輸出。ssh 連線到遠端 Linux 主機並執行指令。工作坊最終的部署目標是 Linux 上的 Docker 環境：容器本身跑的是 Linux，docker exec 進容器除錯、docker logs 或 tail -f 追蹤 log、ssh 連上遠端主機檢查服務狀態，全部都仰賴命令列操作。就算開發機是 Windows 或 macOS，只要牽涉到容器內部或雲端主機，最終面對的一定是 Linux shell。提早熟悉這些指令，之後除錯與部署才不會卡在「看不懂畫面在說什麼」。
ls 的顏色參數：macOS/BSD 用 ls -G，Linux/GNU 用 ls --color=auto。sed 就地修改：macOS/BSD 需要 sed -i '' 's/a/b/' file（空字串是必填的備份副檔名），Linux/GNU 可直接 sed -i 's/a/b/' file。date、find 的部分參數（如 date -d、find -printf）在 macOS 上不存在或用法不同，遇到時以 man 查該指令的實際參數。brew install coreutils gnu-sed，但本模組練習不需要，直接用系統內建指令即可。kill、grep、man、find 等） (繁中) — https://blog.techbridge.cc/2017/12/23/linux-commnd-line-tutorial/ls／cd／cp／mv／rm／mkdir 等檔案操作與基本指令用法） (繁中) — https://ithelp.ithome.com.tw/articles/10349467pwd/ls/cd/mkdir/cp/rm/mv，並示範 ssh、docker、CI/CD 實際應用場景） (繁中) — https://www.youtube.com/watch?v=-fzO7iWCSWYps/top/kill 詳細原理） — https://linux.vbird.org/linux_basic/centos7/0440processcontrol.php在終端機（Windows 用 WSL2 Ubuntu、macOS 用 Terminal）做幾個基本操作，感受「用指令操作檔案」：
mkdir practice && cd practice，再用 echo "hello" > note.txt 建立一個檔案，用 ls -l 確認檔案與它的權限。chmod 755 note.txt，再 ls -l 觀察權限欄位怎麼變。（想一想：ls -l 開頭那串 -rwxr-xr-x 各段分別代表誰、能做什麼？）
chmod 755 三組數字（擁有者/群組/其他人）各自代表的權限意義？ps 找出一個正在執行的程序（例如剛開的 tail -f）並用 kill 結束它？~、.、..、絕對路徑、相對路徑之間的差別？clone、add、commit、push、pull 完成日常版本控制操作。.gitignore，知道哪些檔案不該進版本控制。工作坊採 git 協作，教材與程式碼都放在 git repo 中管理；Pull Request 是團隊開發的日常流程，不論是提交程式碼、review 別人的改動，或是追蹤功能開發進度，都建立在 git 的基礎操作之上。不熟悉 git，就難以參與任何團隊協作的開發流程。
.gitignore、GitHub 註冊、分支與合併請求） (繁中) — https://www.youtube.com/watch?v=FKXRiAiQFiY做一次最小的 Git 流程，感受「改動 → 暫存 → 提交」三個區域：
git init，新增一個檔案 hello.txt。git add hello.txt、git commit -m "first commit"，用 git log 看到剛才的提交。hello.txt 存檔後，用 git status 觀察「已修改未暫存」的狀態，git add 後再看一次狀態變化。（想一想：working directory、staging area、repository 三者的關係，你剛剛的操作把檔案從哪裡搬到哪裡？分支、合併、Pull Request 的協作流程留到第二階段實作。）
git pull 等於 git fetch 加上 git merge？<<<<<<< 時，知道該怎麼判斷、編輯並完成合併？.gitignore（例如 node_modules、bin/obj、.env）？HTTP 是前後端溝通的共同語言 —— Vue 前端呼叫 .NET API 的每一次互動，底層都是一次 HTTP 請求與回應。工作坊實作階段，除錯有一半以上的時間會花在瀏覽器 DevTools 的 Network 面板上：看請求送對了沒、狀態碼是什麼、header 帶了什麼、回應的 JSON 長什麼樣。不熟悉 HTTP 與 REST 的基本概念，就無法有效定位前後端串接的問題出在哪一端。
用瀏覽器與 curl 觀察一次真實的 HTTP 往返：
curl -i https://api.github.com/users/octocat，對照輸出開頭的狀態碼、header，以及下方的 JSON body。（想一想：一個 HTTP 請求由哪幾部分組成？200 和 404 分別代表什麼？）
http://localhost:5173 和 http://localhost:8080 是不同的 origin（協定、host、port 任一不同即為不同來源）？<form>、<input>、<button> 等常見元素）。var/let/const）、函式、陣列與物件操作（map/filter/forEach）、箭頭函式、解構賦值、Promise 與 async/await、fetch。interface、泛型（generics）概念。有前端經驗者可略過 HTML/CSS，把重點放在 JavaScript（ES6）與 TypeScript 即可。
本工作坊的目標讀者具備軟體開發基礎（例如寫過後端、寫過其他語言），但多半沒有寫過前端。模組 05 的 Vue3 教材預設你已經會 JavaScript／TypeScript 的基本語法 —— 若跳過本模組直接學 Vue3，會同時卡在「語言本身怎麼寫」與「框架怎麼用」兩個問題上，難以分辨錯誤究竟出在語法還是框架概念。本模組把語言基礎補齊，讓模組 05 能專注在 Vue3 框架本身。
先備觀念：什麼是前端？什麼是後端？ 用餐廳比喻最好懂——前端是外場（菜單、點餐櫃檯、送到你面前的餐點），也就是使用者在瀏覽器裡看到、點得到的畫面與互動；後端是廚房（接單、處理食材、算帳、把餐做出來），也就是伺服器上負責資料與邏輯運算的部分；兩者之間靠 HTTP 請求／回應溝通（見模組 03）。對應到本工作坊：前端＝Vue3（模組 05）、後端＝.NET Web API（模組 06），中間用 JSON 串接。沒接觸過的人，先看下面這支影片建立整體概念再往下讀。
用最小範例感受「JS 操作畫面」與「TS 型別」兩個概念：
index.html，放一個按鈕與一段文字，用 <script> 寫一小段 JS：點按鈕時把文字改掉（或切換顯示／隱藏）。用瀏覽器打開，確認點擊有反應——這就是 JS 操作 DOM。demo.ts，宣告 let n: number = 1，然後試著寫 n = "hello"，在編輯器裡觀察它如何馬上標紅提示型別錯誤。（想一想：為什麼「型別」能在你還沒執行程式前就先抓到錯誤？完整的待辦清單實作留到第二階段。）
const 和 let 的差異（是否可重新賦值、是否有 block scope）？map 和 forEach 的差異（是否回傳新陣列、是否適合用來轉換資料）？async/await 呼叫 fetch 並用 try/catch 處理錯誤？interface 的用途，以及泛型 <T> 想解決的問題是什麼？npm create vue@latest），理解專案目錄結構。ref、reactive、computed、watch（含差異與使用時機）。v-if/v-show、v-for、v-model、事件綁定（@click 等）。props 向下傳資料、emit 向上通知事件。本工作坊要開發的系統前端採用 Vue3 + Vite，是整個技術棧的前端主力框架。模組 04 已經打好 JavaScript／TypeScript 的語言基礎，本模組要在此之上學會用 Vue3 把畫面元件化、資料響應化——這是後續實際專案開發中每天都會用到的核心技能。
重要註記：Vue3 目前主流寫法是 Composition API +
<script setup>。如果看到教材以data()、methods: {}這種 Options API 寫法為主，代表內容偏舊（Vue2 時代慣用），可以直接跳過，優先選擇本節列出的資源。
<script setup> 新寫法，涵蓋 ref／reactive、computed／watch、元件與 props／emit、Vue Router、Pinia；範例扎實、講解清楚，適合當作本模組的影片學習主線） (簡中) — https://www.youtube.com/watch?v=d5mrJfl6UWM&list=PLmOn9nNkQxJEnGM4Jf0liBcyedAtuQq-O&index=1setup()、ref()/reactive()、生命週期與 computed，並附架構圖說明） (繁中) — https://www.tpisoftware.com/tpu/articleDetails/2530App.vue、體驗熱更新，正好銜接本模組的動手練習） (繁中) — https://ithelp.ithome.com.tw/articles/10382727需要 Node.js（本階段以理解為主，想動手再裝 LTS：https://nodejs.org/ ）。
用最小步驟感受 Vue3 的「響應式」概念：
npm create vue@latest 建一個專案，npm install 後 npm run dev 跑起來，用瀏覽器打開開發網址。src/App.vue，把畫面上的一段文字改掉並存檔，觀察瀏覽器不用重整就自動更新（熱更新）。（想一想：Vue 的「資料改變、畫面自動跟著變」，和模組 04 你手動用 JS 改 DOM，差別在哪？完整的元件化 Todo App 留到第二階段。）
ref 和 reactive 的差異，以及什麼時候需要用 .value 存取值？v-model 其實是哪些語法的糖衣（prop 綁定 + 事件監聽）？computed 和 watch 各自適合的使用場景（衍生值 vs 執行副作用）？class、物件導向基礎（建構子、屬性、繼承），以及 LINQ、async/await 非同步寫法（對已有其他語言程式基礎者，約 2 天可完成速覽）。dotnet new webapi 建立 ASP.NET Core Web API 專案，看懂產生的專案結構。[FromBody]/[FromRoute]/[FromQuery]）。appsettings.json 組態設定的基本用法。.NET Web API 是本工作坊的後端主力技術：工作坊要開發的系統，API 服務即用 .NET Web API 開發。學完本模組後，會再銜接模組 08（PostgreSQL 資料庫）讓 API 讀寫真實資料，以及模組 09（Docker 容器化）把 API 服務封裝成容器部署——本模組是後端這條學習主線的起點。
版本註記：目前多數教材與影片仍以 .NET 8 LTS 為準來示範，但 ASP.NET Core Web API 的核心概念（Controller、路由、DI、Minimal API 語法）在 .NET 8 到 .NET 10 之間差異極小，不影響入門學習。動手操作需要 .NET 10 SDK（本階段以理解概念為主，想實際動手再裝；第二階段用 Claude Code 開發時也會在需要時提醒安裝）。以 .NET 10 SDK 執行
dotnet new webapi --use-controllers -n TodoApi即可，教材內容可直接對照套用。（.NET 8 起dotnet new webapi預設產生 Minimal API 範本，不含 Controller，需加--use-controllers才會產生本模組教學所依循的 Controller 版範本。）
dotnet new webapi 建立專案、Controller、路由、EF Core 記憶體資料庫、Swagger 測試，預設對應 .NET 10） (繁中) — https://learn.microsoft.com/zh-tw/aspnet/core/tutorials/first-web-apiasync/await 非同步程式設計等核心語法，適合已有其他語言經驗者快速掌握 C#） (繁中) — https://learn.microsoft.com/zh-tw/dotnet/csharp/tour-of-csharp/overviewnew、服務容器 IServiceCollection 註冊方式、服務生命週期 Singleton/Scoped/Transient、建構子注入解析規則） (繁中) — https://learn.microsoft.com/zh-tw/dotnet/core/extensions/dependency-injection需要 .NET 10 SDK（本階段以理解為主，想動手再裝）。
用最小步驟感受「Web API 就是透過 HTTP 回傳資料的服務」：
dotnet new webapi --use-controllers -n TodoApi，進資料夾後 dotnet run 跑起來。curl 打開範本內建的天氣範例端點（終端機會顯示網址，例如 http://localhost:xxxx/weatherforecast），看到回傳的 JSON。（想一想：你剛剛「請求一個網址、拿回一段 JSON」，這和模組 03 的 HTTP 概念怎麼對應？完整的 Todo CRUD 與依賴注入留到第二階段。）
[HttpGet]、[HttpPost] 等特性（Attribute）的作用，以及 [FromBody] 為什麼用在接收前端傳來的 JSON？new 具體物件，好在哪裡（例如可測試性、可替換實作）？Program.cs 裡 builder.Services.Add...() 與 app.MapControllers()／app.Map* 各自在做什麼、執行順序上的差異？201 Created 與 204 No Content 各自對應什麼情境（新增成功 vs. 更新／刪除成功但無內容可回）？curl 完整驗證自己寫的 Todo CRUD 四個端點都運作正常？本模組定位為輔助：工作坊後端主力是模組 06 的 .NET Web API，本模組目標是「看得懂、跑得起來」，不要求達到 .NET 同等深度。
package.json 的角色。req／res／next 各自代表什麼。工作坊的後端主力雖是 .NET Web API，但部分周邊服務與整個前端工具鏈是 Node 生態——例如模組 05 用到的 Vite 本身就是跑在 Node.js 上的建置工具。日後若要接觸既有的 Node/Express 專案、閱讀第三方套件原始碼，或協作團隊裡有人用 Node 寫小型服務，看得懂 Express 專案的基本結構就是最基本的功夫。
版本註記：目前 Node.js 現行 LTS 為 Node.js 24.x（動手練習需要 Node.js LTS；本階段以理解為主，想試再裝，第二階段也會由 Claude Code 提醒）。Express 現行主版本為 5.x，本模組資源與練習皆對應 Express 5。
需要 Node.js（想動手再裝 LTS）。
用最小步驟感受「Node.js 也能寫出一個 HTTP 服務」：
npm init -y 與 npm i express，觀察多出來的 package.json 與 node_modules。app.js，用 Express 做一個 GET /hello 回傳一段文字或 JSON，node app.js 跑起來後用 curl http://localhost:3000/hello 驗證。（想一想：同樣是「提供 API」，Node/Express 和模組 06 的 .NET 在寫法上你觀察到什麼不同？完整的 Todo API 留到第二階段。）
package.json 裡 dependencies 和 scripts 兩個欄位分別在做什麼？next() 是什麼、為什麼不呼叫它請求會卡住？app.get('/x/:id', handler) 這種路由參數寫法，知道 :id 在 handler 裡要透過 req.params.id 取得？node_modules 資料夾不進 git（要靠 .gitignore 排除，並理解為何靠 package.json 就能還原相依套件）？SELECT（搭配 WHERE 篩選、ORDER BY 排序、LIMIT 限筆數）。INSERT、UPDATE、DELETE。JOIN（尤其 INNER JOIN 與 LEFT JOIN 的差異）與 GROUP BY 聚合查詢。工作坊要開發的小系統，資料就存在 PostgreSQL 裡；模組 06 的 .NET Web API 透過連線字串與 SQL（或 EF Core）讀寫這些資料。不懂 SQL，就看不懂 API 背後在跟資料庫要什麼、存什麼，除錯時也無法直接下指令確認資料現況——SQL 是資料層最基本、最直接的溝通語言。
練習環境：本模組不在本機直接安裝 PostgreSQL，改用 Docker 跑一個練習用容器（這也是模組 09 Docker 容器化的預告）。這是整套教材第一次會用到 Docker——本階段以理解 SQL 概念為主，若要實際動手跑下面的容器，需先安裝 Docker Desktop（[官方文件] https://docs.docker.com/get-started/get-docker/ ；Windows 安裝時選 WSL2 後端）；第二階段實作時 Claude Code 也會提醒安裝。
docker run -d --name pg-practice -e POSTGRES_PASSWORD=devpass123 -p 5432:5432 postgres:17
docker exec -it pg-practice psql -U postgres
第一行用 postgres:17 這個官方映像檔啟動一個容器，-e POSTGRES_PASSWORD 設定 postgres 使用者的密碼，-p 5432:5432 把容器內的 PostgreSQL 預設埠對應到本機；第二行進入容器內部，用 psql 連進剛剛啟動的 PostgreSQL 開始下指令。
SELECT／WHERE／排序／JOIN（含 inner／outer）／聚合函式／新增修改刪除／建表等主題，是掌握 SQL 語法最快的入門方式） (英文) — https://sqlbolt.com/SELECT、WHERE、ORDER BY、JOIN、GROUP BY 等指令的語法與實例，可搭配 SQLBolt 的英文互動練習對照理解） (繁中) — https://www.1keydata.com/tw/sql/sql.html需要能連上 PostgreSQL（想動手再裝 Docker 跑練習容器，見上方練習環境）。
用最小範例感受「表格、資料列、查詢」三個概念：
CREATE TABLE todos (id serial PRIMARY KEY, title text, done boolean DEFAULT false);
INSERT INTO 塞兩筆資料，再用一條 SELECT * FROM todos WHERE done = false; 把未完成的查出來。（想一想：一張「表」和一筆「資料列」分別對應到什麼？WHERE 在做什麼？JOIN、GROUP BY 等進階查詢留到第二階段。）
INNER JOIN 和 LEFT JOIN 的差異，並舉例什麼情境該用哪一種？WHERE 條件、搭配 ORDER BY 排序的 SELECT 查詢？Host=localhost;Port=5432;Database=practice;Username=postgres;Password=xxx），能指出 host、port、database、user 各自對應連線的哪個部分？pg-practice 容器如果被刪掉，裡面建的資料庫、資料表、資料就會一併消失？（這正是模組 09 要談的 volume 資料持久化問題）docker run／ps／logs／exec／stop／rm，以及 docker images／pull／build。Dockerfile 並用 docker build 建置成映像檔。docker-compose.yml，一次啟動多個服務，並理解服務之間如何互相溝通。-p 主機埠:容器埠）與 volume 掛載的運作方式。工作坊的最終目標，是把小系統（前端 + .NET Web API + PostgreSQL）用 docker compose 一次啟動多個容器——這與實際營運環境常見的部署架構一致。模組 07 已經寫出一支 Express app，模組 08 用 docker run postgres:17 練習過 PostgreSQL，也埋下「容器刪掉資料就沒了」的伏筆；本模組要把這兩者串起來，補上「容器化之後資料如何持久保存」這塊拼圖，讓從開發到部署的路徑完整銜接。
docker build／docker images／docker run／docker ps／docker stop 的實際操作） (繁中) — https://chengweihu.com/docker-tutorial/Dockerfile 撰寫、docker-compose 用法，一路帶到 Django + PostgreSQL 的完整實戰案例，可作為銜接模組 07／08 練習的參考範例） (繁中) — https://github.com/twtrubiks/docker-tutorialDockerfile 指令詳解、資料與網路管理、docker compose 等進階配置，可當工具書查閱特定主題） (簡中) — https://yeasy.gitbook.io/docker_practice/需要 Docker Desktop（想動手再裝）。
用最小步驟感受「映像檔 → 容器」與「port 對應」：
docker run -d --name web -p 8080:80 nginx，用瀏覽器打開 http://localhost:8080 看到 nginx 歡迎頁。docker ps 看容器在跑、docker logs web 看存取紀錄，最後 docker stop web && docker rm web 收掉。（想一想：nginx 這個「映像檔」和你跑起來的「容器」差在哪？-p 8080:80 左右兩個數字分別是誰？寫 Dockerfile、用 compose 多容器留到第二階段。）
-p 8080:80 哪邊是主機哪邊是容器？（冒號左邊是主機埠、右邊是容器埠，瀏覽器打的是主機埠，容器內程式監聽的是容器埠）pg-practice 容器刪掉資料就沒了的伏筆——volume 把資料實際寫到 host 或 named volume 裡，容器被刪除、重建，資料依然存在，除非連 volume 一起用 -v 刪掉）api 服務要連 db 服務，直接把連線字串的 host 填服務名稱 db 即可，不必知道容器的實際 IP）docker logs -f 和 docker exec -it 各用在什麼時候？（docker logs -f 用來即時追蹤容器的標準輸出、除錯應用程式的執行紀錄；docker exec -it 用來直接進入正在跑的容器內部下指令，例如進 psql 查資料庫、或檢查容器裡的檔案系統）