中級

Production

Database

Production

Database

Backend

Vibe Coding

Entering Production：從玩具變成產品

讓 App 從個人玩具變成能上架的產品 — 從資料庫的核心觀念開始，建立 vibe coder 必備的後端 / 部署直覺。

保

保羅

全端開發者，熱愛分享程式教學，幫助超過萬名學員

預計 6 小時

2 堂課

0 學員

0 評分

Entering Production：從玩具變成產品

✓ 終身訪問

✓ 互動式編碼練習

✓ 完成證書

課程內容

版本控制3 堂

為什麼需要版本控制？從「最終版_真的最終版.zip」到 Git 思考模式

程式碼的時空膠囊：為什麼「最終版_真的最終版.zip」是一場災難，而版本控制（Git）讓你的每一次改動都變成可以隨時跳回的存檔點。透過互動看懂版本控制、Git、快照各自在做什麼，以及為什麼 AI 一次改一大片時，「一鍵還原」是你的保命符。

Git 核心三部曲：工作區、暫存區與儲存庫（Commit & Push 的圖解生活化比喻）

一張快照到底怎麼拍出來、存去哪？把 Git 的「存檔」拆成三個空間（工作區、暫存區、儲存庫）與兩個動作（commit、push）：改檔 → 挑進暫存區 → 封箱入庫蓋一個存檔點 → 同步到雲端。用整理行李的生活比喻一步步走完，看懂你要 AI「把這次改動 commit」到底是在做什麼。

GitHub 實戰：建立你的第一個雲端倉庫（重點提示：為什麼一定要設為 Private Repository？）

push 推去的雲端就是 GitHub。建立你的第一個雲端倉庫（repo）、把本機接上去，並搞懂新手最常踩的雷：為什麼一定要設成 Private、哪些檔案（.env、node_modules）絕對不能上傳，免得把 API key 和密碼攤在全世界面前。

資料庫基礎與選型2 堂

什麼是資料庫？為什麼 AI 時代更需要懂它？

建立資料庫的本能直覺：哪些資料該丟資料庫、為什麼丟、丟錯會發生什麼事。透過 12 個互動 section 看懂結構化儲存、高效查詢、持久化，以及暫態資料與資料庫的差別。

兩大陣營對決：SQL vs NoSQL

用轉帳、Instagram 動態、AI Chatbot 等小場景，帶你看懂關聯式 vs 文件式資料庫的差別 — 包括 ACID、JOIN、Document Model、結構彈性，以及主流產品（PostgreSQL、Firestore、MongoDB…）的選型直覺。

資料模型設計2 堂

把世界變成表格與欄位：Schema & Data Types

學會把現實世界翻譯成資料表：Schema 是 App 的藍圖，每個欄位的資料型態是第一道守門員。透過互動 demo 親手踩過 Float 精度、字串排序、Boolean 與時區四大經典陷阱，看懂 AI 給的 schema 哪裡會出包、怎麼糾正它。

資料的身分證與認親線索：PK & FK

讓多張表認得彼此：Primary Key 是每筆資料的唯一身分證，Foreign Key 是表跟表之間的認親線索。透過互動 demo 看懂一對多關係、親手製造孤兒資料，並用 ON DELETE 策略（RESTRICT / CASCADE / SET NULL）守住資料一致性。

部署與環境隔離3 堂

雲端託管 (Hosting) 平台與 Git 聯動：為什麼 Vibe Coder 只要 Push 程式碼，網站就自動更新上線？

程式碼在 GitHub 了，但別人還打不開你的網站，因為它還沒「上線」。這一課：什麼是部署、什麼是雲端託管平台（Hosting），以及把 Hosting 綁定 GitHub 後，為什麼你只要 push，網站就自動重新打包、自動上線。含一個改字 → push → 看部署流程 → 網站即時更新的完整 demo。（具體平台待定：Vercel／其他）

邁向生產線的致命盲區：什麼是環境隔離 (Development vs. Production)？

上線後新手最容易翻車的雷：在正式網站手癢測試，把真實用戶資料搞爛。這一課：什麼是環境（同一個 App 的不同分身）、Development（你的練習場）vs Production（真實用戶在用的正式場），以及為什麼測試跟正式一定要徹底分開。含一個在 Dev 按沒事、在 Prod 按就刪掉真實資料的危險按鈕 demo。

環境變數實戰：如何配置兩套獨立的資料庫與 API Key，不讓測試資料污染真實用戶數據

同一份程式碼，怎麼在 Dev 連測試的家、在 Prod 連正式的家？這一課：環境變數（不寫死、可抽換的設定插槽，像插座）、API Key（呼叫外部服務的通行證），為什麼 key 不能寫死在程式裡（會被 push 上 GitHub 外洩），把祕密搬進 .env 並加進 .gitignore，以及配兩套環境變數讓 Dev 連測試資料庫、Prod 連正式資料庫，兩套互不干擾。

登入體驗與選型3 堂

登入體驗的商業邏輯：為什麼不該一開始就強迫用戶註冊？

產品上線後第一個跟「人」有關的決定：要不要一進門就叫人註冊？登入是一道門檻，擺在哪裡是商業／UX 決策，不是技術問題。這一課：為什麼一開門就要註冊會擋掉一大半還沒嚐到好處的人、正確策略「先給價值再要資料」、什麼時候才該擋（要付費、要存個人資料時），以及 YouTube／蝦皮怎麼把登入牆擺到很後面。含一個「同樣 100 位訪客、兩種開場」的留存對照互動。

降低門檻的神器：匿名登入 (Anonymous Login) 的應用場景與後續帳號綁定

有沒有辦法連註冊都不用，先讓用戶開始用、資料還存得住？這一課：匿名登入（系統在背後偷偷發一張臨時身分證，用戶無感就能用，像遊樂園入口先給你手環）、匿名身分也能存購物車與進度，以及帳號綁定（等他願意了把臨時身分接到正式 Email／Google，先前的購物車毫髮無傷繼承過去）。含一個匿名加購、再一鍵綁定 Google 而資料不流失的互動。適合電商與遊戲、不適合銀行醫療。

經典與高轉化率的選型：Email 登入 (含 Magic Link) 與第三方一鍵登入 (Google / Apple / GitHub)

用戶願意正式登入了，你該端出哪些選項？這一課比較三大主流登入方式：Email + 密碼（最通用但要記密碼、要做忘記密碼流程）、Magic Link（免密碼，系統寄一條連結點一下就登入，像一次性魔法門票）、第三方一鍵登入（直接借 Google／Apple／GitHub 的身分，你不用保管密碼）。含 Magic Link 與 Google 一鍵登入的流程互動，以及一個「登入牆拼裝器」讓你勾選方式即時看轉化感受。心法：看客群挑 2~3 種別塞滿，善用第三方登入的信任紅利。

登入與驗證3 堂

誰能進來？登入與驗證 (Authentication)

資料表裡的「人」是怎麼進來、怎麼證明「我就是我」？Google Login：為什麼別自己存密碼、OAuth 與 Google 登入的 redirect 旅程、在 Firebase Console 開 Google 登入、用 signInWithPopup 做登入按鈕，到 Session（JWT）與常見 Auth Debug。接著 6-15 保護路由（Middleware）、6-16 關聯用戶資料隨後補上。技術棧用 Firebase Authentication。

誰擋得住直接打網址的人？保護路由 (Middleware)

登入只解決『你是誰』，網址列可繞過登入按鈕直接打 /dashboard。這一課請一位『網站保全』(middleware) 站在每個請求門口：檢查 Session、放行或 Redirect to Login、分清 Public 與 Protected Routes，把 Auth Boundary 這條線畫出來。框架中立的通用心智模型。

登入了，但他看得到所有人的資料：關聯用戶資料

讓每筆資料記得主人：Insert 帶上來自 session 的 user_id（資料歸屬）、查詢用 .where('user_id', '==', user.uid) 做 user-scoped query（資料隔離），再戳破『光靠查詢過濾不安全』的錯覺，用 Firestore Security Rules 在資料庫層築起真正的牆。第六章登入與驗證三部曲收尾。