說了這麼多天，終於要開始實作內容了。那第一個動工的我覺得應該是要會員系統，因為幾乎所有功能都要依賴使用者身份：沒有登入，就不能記錄飲食、運動，也看不到自己的成長紀錄。所以不管怎樣，帳號系統一定是最先要做的。要有記名，才可以讓不同人使用，也方便我讓大家一起測試。
開發一個健康紀錄 APP，最小的 MVP 功能就是：
- 使用者能登入 / 註冊
- 有一個帳號可以綁定自己的資料（體重、身高、飲食紀錄、運動紀錄）
要怎麼做？
其實我的做法很簡單，就是一步一步把概念告訴 AI，然後再看 AI 回傳的結果去修改。不管是畫面還是實作方式，都可以慢慢調整。我不太會特別去琢磨「要怎麼跟 AI 說」，因為我本來就比較隨性。
網路上很多人把這件事講得很玄，說你一定要有一套很完整的邏輯才能下正確的指令，甚至包裝成一門學問來賣課程。但老實說，我覺得 Vibe coding 的精隨就是隨興 —— 用白話文和 AI 溝通就好。就算過程中可能要多繞幾圈、多花一些 token，也沒什麼大不了的。
當然，基本的概念和做法還是要懂，不然就算 AI 生出程式碼你也不知道怎麼用。不過隨著 AI 更新得越來越快，它對意圖的理解能力也會越來越好。既然如此，為什麼要花時間去鑽研「怎麼說話」這種技巧呢？專注在產品、功能本身才是重點。
登入系統
前面說了太多廢話了，有點離題。
登入系統，不就是用帳號密碼登入就好了？是！也不是！
- 帳號驗證
- 使用者輸入帳號（通常是 email）和密碼。
- 系統要去資料庫裡確認「有沒有這個帳號」。
- 如果帳號不存在，直接回傳錯誤訊息。
- 密碼驗證
- 密碼絕對不能明碼存。
- 通常會先用 bcrypt（或其他演算法）把密碼 hash 過，再存進資料庫。
- 登入時就用「輸入的密碼」和「資料庫的 hash」做比對，確認是否正確。
- 身份憑證（Token）
- 驗證成功後，系統要給使用者一張「通行證」。
- 最常見就是 JWT（JSON Web Token）。
- 這個 token 裡會包含使用者 ID 等資訊，之後使用者再帶著它去呼叫 API，就不需要每次都輸入帳密。
- Token 保存方式
- 前端要把這張「通行證」存起來。
- 可以放在 localStorage（簡單但有安全風險）、或是 httpOnly cookie（安全一點，但開發麻煩）。
- 我的做法：先用 localStorage，把流程跑通，再來考慮安全性。
- 授權（Authorization）
- 有了登入還不夠，還需要「權限管理」。
- 例如：一般使用者能記錄飲食，但不能進後台管理；管理員才可以。
- 這就是登入之後的「授權」問題。
API router
我們今天先做必要的API就好，功能很簡單。就是註冊，然後登入，再來是看到你是誰就好了。
- POST ****
/auth/register→ 註冊新帳號（email 唯一、密碼要 hash，打一下使用者名字） - POST ****
/auth/login→ 帳號密碼登入，成功後傳 JWT token - GET ****
/auth/me→ 透過 JWT 取得使用者資料。
結果
其實 JWT 認證系統算是一個很成熟的東西，所以其實ＡＩ很了解。你其實只需要和AI說，幫我做一個
JWT登入系統，先幫我開 註冊和登入再來去取得使用者資料頁面。
這樣就可以完成了！疑？你不相信？真的就這麼簡單啊！留給你去開個AI coding 工具玩玩看。不過後端記得要設置好，如果真的不太知道也可以請ＡＩ幫你。有好奇遇到問題的讀者也可以留言給我。我可以在講詳細一些。
後端api
使用nest.js 最大的優點就是因為他架構比較嚴謹，你可看到AI依照 nest.js的架構幫我們把程式碼生成好。而且還按照資料庫目錄。
我這邊簡單說明一下這個架構就好了。
Auth 是一個模組(Module)，主要負責登入功能
- DTO (Data Transfer Object)
用來定義 API 接收的資料格式（並加上驗證）。例如login.dto.ts、register.dto.ts。也就是這個 api post的話要傳什麼資料進來。 - Schema (Mongoose / Prisma / TypeORM)
定義資料庫結構，在你這個專案裡，MongoDB 的 schema 就放在schemas/user.schema.ts。 - Strategy
專門處理驗證策略，例如：local.strategy.ts負責帳號密碼登入；jwt.strategy.ts負責驗證 JWT。 - Controller
負責接收 HTTP 請求（例如/auth/login、/auth/register）定義http的方法，Controller 不直接做商業邏輯，而是把事情交給 Service。 - Service
負責商業邏輯，例如：驗證密碼、簽發 JWT、查詢資料庫，計算之類的。Controller → 呼叫 Service → 回傳結果。 - Module
把 Controller、Service、Schema、Strategy 等組織起來，形成一個獨立的Auth模組。在app.module.ts引入，讓整個APP都可以使用。
前端
前端我就和 AI 說
我要使用 next.js。然後使用 Tailwind CSS 實作頁面
就產出下面的畫面。
結語
其實我們完全可以用白話文、隨意地和 AI 對談，請他幫忙做出想要的頁面。不過現實是，大部分情況下 AI 不會一次就完美達到需求，所以我們得不斷測試、修改，確認可以正常運作後，再繼續請他加功能或調整，這樣循環迭代下去。
這樣的方式確實能夠很快產出原型，但同時也需要花時間在測試與修正上。換句話說，它幫我們省了「從零開始寫程式」的力氣，但依然需要我們投入耐心，陪著 AI 一起把東西磨到理想的樣子。
如果你也有想做什麼東西，事不宜遲，現在就開吧！！！！
