認識 Vibe Coding 和工具
Vibe Coding
Vibe Coding 是用平常說話的方式告訴 AI 你想做什麼，由 AI 寫程式；你像請師傅施工的屋主，不必自己拿工具，但要說清楚要什麼、看結果對不對、決定哪裡要改。
Codex
Codex 是 OpenAI 做的 AI 寫程式工具，放在 ChatGPT 桌面 App 裡；用第 02 課的比喻，它是一整台車（harness），能讀檔案、改程式、跑指令，還能直接做圖、操作電腦。這門課全程用它。
第一次出現：第 01 課・Vibe Coding 是什麼？先看你會做出什麼；完整說明：第 03 課・Claude Code 和 Codex 差在哪？這門課為什麼用 Codex
模型（AI Model）
模型像 AI 的引擎，是 AI 公司訓練出來的大腦，決定 AI 夠不夠聰明；光有模型，它打不開你電腦裡的檔案，也沒辦法自己把程式跑起來。
harness（Harness）
harness 像整台車，是包在模型外面的那一整套，讓引擎能安全地替你讀專案檔案、改程式、在電腦上執行指令；Codex、Claude Code 都是 harness。
Claude Code
Claude Code 是 Anthropic 做的 AI 寫程式工具，和 Codex 一樣是一整台車（harness），有桌面 App，能讀檔案、改程式、跑指令；它是目前專業工程師的主流工具。
第一次出現：第 02 課・AI 寫程式工具怎麼選？模型和 harness 差在哪；完整說明：第 03 課・Claude Code 和 Codex 差在哪？這門課為什麼用 Codex
操作電腦（Computer Use）
操作電腦是 AI 看著你的螢幕，替你點按鈕、處理跳出來的視窗，像旁邊坐了一位幫手接過滑鼠；卡在系統設定或安裝視窗時很好用。
第一次出現：第 02 課・AI 寫程式工具怎麼選？模型和 harness 差在哪；完整說明：第 03 課・Claude Code 和 Codex 差在哪？這門課為什麼用 Codex
第一次做出東西
網頁檔案（HTML）
網頁檔案像一張註明了排版的菜單原稿，上面寫著「這行是大標題、這行是小字」，瀏覽器照著註明把它排好給你看；它的正式名稱是 HTML 檔，檔名結尾是 .html。
VS Code（Visual Studio Code）
VS Code 像一個專門放程式的檔案櫃：左邊一格一格是資料夾裡的檔案，點一個就攤開在右邊，可以直接改；它的正式名稱是程式編輯器。
專案（Project）
專案就是一個資料夾：一個產品的所有檔案都放在裡面，像這個產品專用的檔案櫃；第 07 課以後，裡面會分出好幾個資料夾，各管一件事。
標籤（HTML Tag）
標籤是網頁檔案裡用 < > 包起來的英文，像貼在文字前後的便利貼，告訴瀏覽器「這行是大標題」「這行是一段文字」。
存版本（Version Control（Git））
存版本像打電動的存檔點：每過一關存一次，打輸了就從上一個存檔點重來；Codex 通常用一個叫 Git 的工具替你的專案存版本。
規劃你的產品
產品說明（Product Specification）
產品說明像裝潢前交給師傅的需求單：誰用、要存什麼、做到哪裡算完成，寫得越具體，Codex 越不用猜。
Markdown
Markdown 像加了簡單記號的筆記：# 開頭的是標題，- 開頭的是清單，檔名結尾是 .md，VS Code 打得開，Codex 也讀得懂。
前後分離（Frontend–Backend Separation）
前後分離像餐廳的外場和廚房：客人看到的網頁、App 和店家後台是外場，處理預約規則的後端是廚房，兩邊各做各的。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 09 課・做出客人的預約網頁
前端（Frontend）
前端像店的外場，是客人看得到、點得到的畫面，例如預約網頁、店家後台和 App。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 09 課・做出客人的預約網頁
後端（Backend）
後端像店的後場，是處理預約規則和資料的地方；API 窗口和資料庫都屬於後端。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 09 課・做出客人的預約網頁
API（Application Programming Interface）
API 像餐廳的點餐窗口：網頁和 App 不直接翻預約本，而是到窗口說要什麼，窗口替它們查好、寫好，再把結果交回來。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 08 課・讓預約真的存下來：第一次接上資料庫與 API
資料庫（Database）
資料庫像店裡的預約本：服務項目、營業時間、每一筆預約都寫在上面，關店再開門也還在。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 08 課・讓預約真的存下來：第一次接上資料庫與 API
Redis（Redis（In-memory Database））
Redis 像櫃台先把時段夾住的夾子：有人正在訂某個時段，就先夾住，另一個人訂不走；夾子過一會兒會自動鬆開。它的正式名稱是記憶體資料庫。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 13 課・兩個人搶同一個時段怎麼辦？
Docker（Docker Container）
Docker 像一個打包好的工作箱：資料庫、Redis 這些零件連同需要的設定一起裝箱，在誰的電腦上打開都一樣能跑。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 07 課・請 Codex 準備開發環境：Docker 在做什麼？
Docker Compose
Docker Compose 像一張開店清單：一份叫 docker-compose.yml 的檔案寫好要開哪些工作箱，照清單一次全部啟動。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 07 課・請 Codex 準備開發環境：Docker 在做什麼？
測試收信匣（Mailpit）
測試收信匣像店裡的假郵筒：系統寄出的信都被它收下，在瀏覽器打開就看得到，不會寄到真的信箱；這門課用的是 Mailpit。
第一次出現：第 06 課・把創業點子說清楚：寫一份 AI 看得懂的產品說明；完整說明：第 14 課・預約後收到確認信，也能取消預約
做出小店預約
Docker Desktop
Docker Desktop 是管理工作箱的 App，像倉庫的管理面板：哪些箱子正在運作、哪些停了，一眼就看得到。
專案守則檔（AGENTS.md）
專案守則檔是你給 Codex 的工作規矩，像交給新員工的工作手冊：資料夾怎麼分、API 網址怎麼命名、用哪些技術，Codex 每次動工前都先讀它；檔名是 AGENTS.md。
localhost
localhost 就是你自己這台電腦，像開在自家客廳的店：你自己走得進來，街上的客人找不到門。
第一次出現：第 07 課・請 Codex 準備開發環境：Docker 在做什麼？；完整說明：第 18 課・要讓別人也能用，還差哪幾步？
連接埠（Port）
連接埠是 localhost 後面的數字，像櫃台的窗口號碼：不同的服務在不同的窗口，例如 8025 號窗口是測試收信匣。
第一次出現：第 07 課・請 Codex 準備開發環境：Docker 在做什麼？；完整說明：第 09 課・做出客人的預約網頁
資料表（Database Table）
資料表是資料庫這本預約本裡的一頁表格：一頁寫服務項目和價格，一頁寫營業時間，一頁寫客人的預約。
FastAPI
FastAPI 像一套現成的櫃台，裝好就有窗口，還會自動貼出一張說明，寫著每個窗口辦什麼事、要填哪些欄位。
API 文件頁（API Documentation）
API 文件頁是 FastAPI 自動貼在窗口旁的那張說明：每個窗口辦什麼事、要填哪些欄位都寫在上面，而且能直接在說明上試辦。
路由（Route）
路由是每個 API 窗口上方掛的牌子，寫著它辦什麼事，由一個動作（例如 GET 查、POST 送出）加一個網址組成。
React
React 像一盒積木，把按鈕、清單、表單一塊一塊組成整個網頁畫面。
第一次出現：第 09 課・做出客人的預約網頁
做圖功能（imagegen）
Codex 的做圖功能 imagegen 像店裡請來的美術：你用一段話說想要什麼圖，它畫出幾張讓你挑，不滿意就說要改哪裡。
第一次出現：第 10 課・讓網頁像樣又好用
logo（Logo）
logo 像店的招牌圖案，小小一個放在網頁左上角，客人看到就認得是哪家店。
第一次出現：第 10 課・讓網頁像樣又好用
主視覺（Key Visual）
主視覺是網頁最上面那張大圖，像店門口的櫥窗，客人一打開就知道這是一間什麼樣的店。
第一次出現：第 10 課・讓網頁像樣又好用
配色與字體（Color Palette & Typography）
配色和字體像店員的制服：全店統一兩三個顏色、一種字，看起來才像同一家店。
第一次出現：第 10 課・讓網頁像樣又好用
響應式設計（Responsive Web Design（RWD））
響應式設計讓網頁像摺疊桌一樣，空間大就攤開排、空間小就收成一排，手機和電腦上都看得清楚。
第一次出現：第 10 課・讓網頁像樣又好用
管理後台（Admin Panel）
管理後台像櫃台後面的預約本，只有店員能翻，看得到每一位客人的姓名和電話；客人的預約網頁則像店門口誰都能填的預約單。
第一次出現：第 11 課・做出店家的管理後台
登入（Login）
登入像員工進門要刷門禁卡：帳號和密碼對了才讓你進後台，沒登入的人只看得到登入畫面。
第一次出現：第 11 課・做出店家的管理後台
雜湊（Hash）
雜湊是不存店門鑰匙本身、只存一個對得上但反推不回去的印記：密碼做成雜湊存進資料庫，就算資料庫被人看到，也拿不到密碼原文。
第一次出現：第 11 課・做出店家的管理後台
模組（Module）
模組像店裡的分區：櫃台、洗頭區、染髮區、倉庫各放各的東西，程式也一樣，一個檔案只管一件事。
第一次出現：第 11 課・做出店家的管理後台
把設定存成資料（Configuration as Data）
把設定存成資料，像把刻在招牌上的價目表換成店門口的白板，店員自己擦掉重寫就好；相反的做法是寫死在程式裡，每次改都要請 Codex 改程式。
第一次出現：第 12 課・不改程式，也能調整服務與營業時間
重複預約（Double Booking）
重複預約像兩位店員同時接到兩通電話，各自翻預約本都看到兩點空著，就各自寫了上去；兩筆預約同時送到後端時，電腦也會這樣。
第一次出現：第 13 課・兩個人搶同一個時段怎麼辦？
取消連結（Cancellation Link）
取消連結像取件單上的號碼：每一筆預約都有一組別人猜不到的取消碼，只寫在這位客人的信裡，沒有這組碼的人取消不了別人的預約。
第一次出現：第 14 課・預約後收到確認信，也能取消預約
App（Mobile App）
App 像客人帶回家的會員卡，裝在手機裡點一下就打開；網頁則像貼在店門口的看板，兩者背後接的是同一本預約本。
Flutter
Flutter 像一套可以同時做出 iPhone 版和 Android 版的模具：畫面設計一次，兩種手機都用得到。
Xcode
Xcode 像蘋果發給開發者的工具箱，要做 iPhone App 就一定要有它，只能裝在 Mac 上。
iPhone 模擬器（iOS Simulator）
iPhone 模擬器像在 Mac 螢幕上放一台假的 iPhone，App 可以先在上面試用，不必有真的手機。
App 圖示（App Icon）
App 圖示像店門口的招牌，放在手機主畫面上，客人一眼認出是哪家店。
啟動畫面（Launch Screen）
啟動畫面像拉開鐵門的那一下，是點開 App、內容還沒出來前先看到的那一頁。
上線前要懂的事
自動測試（Automated Testing）
自動測試像出門前的檢查清單，是一份寫成程式的清單：每改一次程式，就照清單把流程從頭檢查一遍。
部署（Deployment）
部署像把店從自家客廳搬到大街上：把產品搬上雲端主機、讓它在那裡跑起來，客人什麼時候想預約都打得開。
第一次出現：第 18 課・要讓別人也能用，還差哪幾步？
雲端主機（Cloud Server）
雲端主機像大街上的店面，是租來、放在機房裡、一直開著的電腦。
第一次出現：第 18 課・要讓別人也能用，還差哪幾步？
網域（Domain Name）
網域像店的招牌地址，客人記「xiaosen-salon.tw」這種名字，比記主機的一串數字容易。
第一次出現：第 18 課・要讓別人也能用，還差哪幾步？
HTTPS
HTTPS 像把信裝進上鎖的信封：客人填的姓名、電話在送到主機的路上被加密，途中的人看不到內容。
第一次出現：第 18 課・要讓別人也能用，還差哪幾步？
備份（Backup）
備份像定期把整本預約本影印一份，放在另一個地方：店裡淹水了，影本還在。
第一次出現：第 18 課・要讓別人也能用，還差哪幾步？
監控（Monitoring）
監控像店裡的煙霧偵測器：平常安安靜靜，定時檢查網站還打不打得開、有沒有一直出錯，異常時自動通知你。
第一次出現：第 18 課・要讓別人也能用，還差哪幾步？
更新（Software Update）
更新像車子定期保養、換掉被召回的零件：程式用到的套件和主機系統發現漏洞並推出修補時，把修補裝上去。
第一次出現：第 18 課・要讓別人也能用，還差哪幾步？
個人資料（Personal Data）
客人把姓名和電話交給你，像把包包寄放在櫃台：東西是他的，你只是代為保管，弄丟了要負責；能直接或間接認出是誰的資料都算個人資料。
第一次出現：第 19 課・資安與個資：上線前一定要懂的事
換成你的點子
核心流程（Core Flow）
核心流程像餐廳的招牌菜：客人上門最主要就是為了它，是一條從誰開始、做了哪幾步、最後存下什麼的路。
第一次出現：第 20 課・換成自己的點子：先做一條核心流程
及格線（Acceptance Criteria）
及格線像考試的及格分數，是產品說明裡寫下的完成條件：先求每一項都做到，不求每一項都做到最好。
第一次出現：第 21 課・做出自己的網頁與管理後台
往商用產品前進
UI／UX 設計（UI/UX Design）
UI／UX 設計裡，視覺像店面裝潢，互動像店員帶位：UI 管畫面長相，UX 管用起來順不順。
會員登入（Member Login）
會員登入像店裡的會員卡：客人報上身分，店家就找得到他的預約紀錄和點數。
金流服務（Payment Gateway）
金流服務像店裡的刷卡機：客人刷卡或轉帳，錢先進服務商，再照約定撥到你的銀行帳戶，你不必自己保管客人的信用卡號碼。
推播（Push Notification）
推播是 App 在手機上跳出來的通知，像在客人口袋裡放了一個小鈴鐺，App 沒打開也叫得到人。
Firebase Cloud Messaging（Firebase Cloud Messaging（FCM））
Firebase Cloud Messaging 是 Google 的推播服務，像幫你把通知送到每支手機的郵局。
上架（App Store Listing）
上架像把商品放進百貨公司的櫃位：先申請櫃位、通過審核，客人才搜得到、下載得到。
D-U-N-S 編號（D-U-N-S Number）
D-U-N-S 編號像公司的國際身分證字號，由鄧白氏公司核發；Apple 以公司名義申請時要用到。
數據分析（Analytics）
數據分析像店門口的來客計數器，加上一台會記路線的攝影機：知道多少人走進來、走到哪一步就離開。
第一次出現：第 24 課・開始有人使用後，產品要怎麼營運？
隱私權政策（Privacy Policy）
隱私權政策像店門口貼的告示：說明你收了客人哪些資料、拿去做什麼、放多久、客人怎麼要求刪除。
第一次出現：第 24 課・開始有人使用後，產品要怎麼營運？
稅籍登記（Tax Registration）
稅籍登記像到國稅局報到，讓國稅局知道你在做生意。
第一次出現：第 24 課・開始有人使用後，產品要怎麼營運？
關於這份名詞表
名詞與比喻都取自課文；標示的課，是課文第一次用生活比喻說明這個名詞的地方。課文更新時，這一頁跟著更新。本課程由奧微軟體撰寫，為獨立教學，非 OpenAI 的官方課程。