登入系統

說了這麼多天，終於要開始實作內容了。那第一個動工的我覺得應該是要會員系統，因為幾乎所有功能都要依賴使用者身份：沒有登入，就不能記錄飲食、運動，也看不到自己的成長紀錄。所以不管怎樣，帳號系統一定是最先要做的。要有記名，才可以讓不同人使用，也方便我讓大家一起測試。

開發一個健康紀錄 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 一起把東西磨到理想的樣子。

如果你也有想做什麼東西，事不宜遲，現在就開吧！！！！