Manus × GitHub × Vercel × Supabase

由一句中文要求，到一個真正上線的報名網站

你會跟着第 0 至第 3 步，用 Manus 做出一個活動報名網站，並把它放到網上。第 4 步由老師示範，你只需要看。名額上限、admin 介面和確認電郵放在頁面最後的「課後延伸」，你下課後可以自己加上。

網站有一個公開網址，任何人用手機都打得開。
訪客填寫的報名資料，會存入 Supabase 資料庫。

每個工具負責甚麼

下面的圖和表格列出網站用到的工具；標明「課後延伸」的部分，課堂上不會用到。你只需要記住一條規則：所有判斷都在 Next.js 伺服器做，Supabase 只負責儲存。例如「表單有沒有填好」由 Next.js 伺服器檢查，檢查通過後，伺服器才把資料寫入 Supabase。

工具	負責的工作	用餐廳比喻
Manus	替你寫 code 的 AI。你用中文描述要求，Manus 就寫出整個網站。	幫你寫食譜的顧問
GitHub	存放網站 code 的地方，並記錄每一次改動。Manus 透過 GitHub 連接器，把改好的 code 存入 GitHub。	放食譜的檔案櫃
Vercel	把 GitHub 上的 code 變成公開網站。GitHub 一有新版本，Vercel 就自動更新網站。	餐廳的舖位
Next.js（前端）	網站的畫面部分：報名頁、表單和按鈕。前端只負責顯示，不做任何判斷。	餐牌和樓面
Next.js（伺服器）	網站的判斷部分：檢查表單；課後延伸部分還會檢查名額、檢查 admin 登入和叫 Resend 寄電郵。所有 key 都只放在這裏。	廚房
Supabase	資料庫。Supabase 只負責儲存報名資料，不負責判斷；課後延伸部分還會儲存名額設定和 admin 帳戶。	倉庫
Resend	寄電郵的服務。Next.js 伺服器叫 Resend 寄確認電郵給報名者。（課後延伸，課堂上不做。）	外賣速遞
網域商（GoDaddy／Namecheap）	你買網域的地方。你在這裏加一條 DNS 記錄，你的網址就會指向 Vercel。	餐廳的招牌和地址

訪客按「提交」之後，網站做了甚麼

前端
瀏覽器把表單內容送到 Next.js 伺服器。
伺服器
伺服器檢查姓名和電郵有沒有填好。
伺服器
（課後延伸）伺服器從 Supabase 讀出名額上限，再數一數已報名人數。如果已經額滿，伺服器就回覆「名額已滿」，並停在這裏。
Supabase
如果未滿，伺服器就把報名資料寫入 Supabase。
Resend
（課後延伸）伺服器叫 Resend 寄確認電郵給報名者。
前端
瀏覽器顯示「報名成功」。

Supabase 裏面有甚麼

Supabase 只需要兩個資料表，兩個都在第 3 步建立。課後延伸的 admin 介面還會用到 admin 帳戶，但是 admin 帳戶不需要另外開資料表，因為 Supabase 本身已經有一個帳戶名單（在 Authentication → Users）。

表一

registrations

報名資料。每一位報名者佔一行。

name	email	phone	company
陳大文	tai@abc.com	9123 4567	大文貿易
李小美	may@xyz.hk		小美工作室

（上面兩行是例子。）

表二

settings

網站設定。這個表只有一行，用來儲存名額上限。第 3 步會先建立這個表；你做課後延伸的名額上限時，才會用到它。

id	max_registrations
1	30

不是資料表

Admin 帳戶

Admin 帳戶放在 Supabase 的 Authentication → Users。課堂上不需要 admin 帳戶；你做課後延伸的 admin 介面時，才在這裏手動新增。

你的改動怎樣去到網站

Manus 改好的 code 只放在 Manus 的電腦裏，網站不會自動更新。所以第 3 步，以及課後延伸的每一項，在 Manus 改完 code 之後，你都要多做一個動作：叫 Manus commit 並 push 到 GitHub。Commit 即是把這次的改動存成一個版本，並寫一句說明；push 即是把這些版本上傳到 GitHub。Vercel 發現 GitHub 有新版本，就會自動更新網站，通常一至兩分鐘就完成。

每一步都用同一段 prompt：

Prompt：Commit 並 push 到 GitHub

請把剛才的改動存入 GitHub：
1. 先執行 npm run build，確認沒有錯誤；如果有錯誤，先修正。
2. Commit 這次的改動，commit 訊息用一句話寫明這次改了甚麼。
3. Push 到 GitHub 的 main branch。
4. 完成後，告訴我這次的 commit 訊息。

固定技術設定

下面每一段 prompt 的開頭，都已經放了這一段「技術設定」。你直接複製整段 prompt 就可以，不需要另外加。這段文字很重要，因為你可能在新的 Manus 對話貼上後面的 prompt；如果沒有這段文字，Manus 就不知道之前用了甚麼技術，可能會改用它自己的預設做法。

技術設定（已包含在每段 prompt 裏）

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

第 0 步

課前準備

學員在上課前完成

完成後你會看到你已經可以登入全部工具。

開一個 GitHub 帳戶（github.com）。
在 Manus 連接 GitHub 連接器：在 Manus 對話框下方按連接器圖示，選 新增連接器 → GitHub，然後按指示授權你的 GitHub 帳戶。
開一個 Vercel 帳戶（vercel.com）。登記時選「Continue with GitHub」，之後 Vercel 就可以直接讀取你的 GitHub。
開一個 Supabase 帳戶（supabase.com）。登記時同樣可以選用 GitHub 登入。
準備好以下資料：活動名稱、日期和時間、地點、兩至三句活動介紹，以及你公司網站的網址。

第 1 步

用 Manus 做報名頁

學員跟着做

完成後你會看到Manus 的預覽畫面出現一個好看的報名頁，按「提交」會顯示「報名成功」。

這一步只做外觀，暫時不儲存任何資料。複製下面的 prompt，把黃色的「填寫」部分換成你自己的資料，然後貼到 Manus。

Prompt 1：建立報名頁

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

【這一步的任務】
請幫我建立一個單頁的活動報名網站。

活動資料：
- 活動名稱：（填寫：活動名稱）
- 日期和時間：（填寫：日期和時間）
- 地點：（填寫：地點，或者寫「網上」）
- 活動簡介：（填寫：兩至三句活動介紹）

報名表欄位：
- 姓名（必填）
- 電郵（必填）
- 電話
- 公司名稱
- 備註

設計要求：
- 顏色和字體參考我公司網站（填寫：公司網址）。只用一至兩種主色，其餘用黑、白、灰。
- 頁面由上而下的次序：活動名稱和一句重點 → 日期、時間和地點 → 活動簡介 → 報名表。
- 頁面頂部放一個「立即報名」按鈕，按下後跳到報名表。
- 不要用紫色或藍紫色的漸變背景。
- 不要用 emoji 做圖示，也不要加沒有意思的裝飾圖案。
- 不要把每一段內容都放進圓角卡片；只有報名表需要用框圍住。
- 文字和背景要有足夠對比，不要把淺灰色文字放在白色背景上。
- 正文字體最少 16px，行距要寬鬆，每行不要太長。
- 報名表每個欄位都要有清楚的標題，必填欄位要標示出來。
- 按「提交」後，要顯示一個清楚的成功訊息。
- 手機版：欄位和按鈕要夠大，方便用手指按；整頁不可以左右捲動。

暫時不要連接任何資料庫。訪客按「提交」後，頁面只需要顯示「報名成功」。
請建立 .gitignore，排除 node_modules 和所有 .env 開頭的檔案。

第 2 步

把網站放到網上

學員跟着做

完成後你會看到Vercel 給你一個 xxx.vercel.app 網址，你用手機也打得開報名頁。

2A　先叫 Manus 檢查

Prompt 2：部署前檢查

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

【這一步的任務】
我準備把這個網站部署到 Vercel。請檢查這個 project 能否成功 build（即是執行 npm run build 沒有錯誤）。如果有錯誤，請先修正，再告訴我結果。

2B　叫 Manus 用 GitHub 連接器把 code 存入 GitHub

在 Manus 對話框下方按連接器圖示，確認 GitHub 的開關已經打開。
複製下面的 prompt 貼到 Manus。
Manus 完成後會給你 repository 的網址。打開這個網址，確認裏面已經有檔案，而且沒有 .env 檔案。

Prompt 2B：建立 GitHub repository

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

【這一步的任務】
請用 GitHub 連接器，把這個 project 存到 GitHub。

1. 在我的 GitHub 帳戶建立一個新的 private repository，名稱是：（填寫：repository 名稱，例如 event-signup）
2. 把整個 project 的 code commit 並 push 到這個 repository 的 main branch。
3. Push 之前，先確認 .gitignore 已經排除 node_modules 和所有 .env 開頭的檔案；任何 key 的數值都不可以出現在 repository 裏。
4. 完成後，給我這個 repository 的網址。

2C　在 Vercel 部署

在 Vercel 按 Add New → Project。
如果 Vercel 要求你安裝 GitHub App，就按指示安裝。安裝時選 All repositories，這樣 Manus 之後建立的 repository 也會自動出現在清單裏。
在 repository 清單找到剛才的 repository，按 Import。
其他設定保持不變，按 Deploy。
等一至兩分鐘，Vercel 會顯示你的網址。用手機打開它。

第 3 步

接上 Supabase，開始儲存報名資料

學員跟着做

完成後你會看到你在網站提交報名後，Supabase 的 registrations 表多了一行資料。

3A　在 Supabase 開 project

在 Supabase 按 New project，輸入名稱和資料庫密碼。
Region 選最接近你的地區，例如 Singapore 或 Tokyo。
剔選 Enable automatic RLS，然後按 Create new project。剔選後，Supabase 會為之後建立的每一個資料表自動開啟 RLS，即使 Manus 日後加新的資料表，瀏覽器也不能直接讀寫。
等一至兩分鐘，直到 project 準備好。

3B　叫 Manus 帶你建立資料表，並接上網站

複製下面的 prompt 貼到 Manus。Manus 會分兩部分帶你做：先建立資料表，再連接網站。每一部分完成後，Manus 都會停下來等你回覆。

Prompt 3：建立資料表並連接 Supabase

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

【這一步的任務】
請把報名表接上 Supabase。我已經在 Supabase 開好一個新的 project，裏面還沒有任何資料表。我不熟悉 Supabase，所以請按以下兩部分一步一步帶我做。每完成一部分，就停下來等我回覆。

第一部分：建立資料表
1. 請寫出一段 SQL，建立兩個資料表：
   - registrations：儲存報名資料，每一位報名者佔一行。欄位有 id、created_at、name（必填）、email（必填）、phone、company、note。
   - settings：只有一行（id = 1），用來儲存名額上限。欄位有 max_registrations（預設 30）和 updated_at。SQL 要同時插入這一行。
2. SQL 要為兩個資料表開啟 RLS，而且不要加任何規則。這樣瀏覽器就無法直接讀寫資料，只有伺服器可以。
3. 告訴我在 Supabase 哪裏貼上和執行這段 SQL，以及執行後怎樣檢查兩個資料表已經建立好。然後等我回覆「完成」。

第二部分：連接網站
4. 使用以下兩個環境變數：SUPABASE_URL 和 SUPABASE_SECRET_KEY。告訴我每個數值在 Supabase 哪裏找，然後等我提供數值。
5. 訪客提交報名表後，由 Next.js 伺服器用 SUPABASE_SECRET_KEY 把資料寫入 registrations。
6. 伺服器要檢查姓名和電郵已經填寫，而且電郵格式正確；如果有錯，就在表單上顯示清楚的錯誤訊息。
7. 建立 .env.example，只列出變數名稱，不要填數值。
8. 完成後告訴我，並列出我要填入 Vercel 的環境變數名稱。暫時不要 push 到 GitHub，我會另外叫你 push。

第一部分：Manus 給你 SQL 之後

在 Manus 的回覆中，複製整段 SQL。
在 Supabase 左邊選單打開 SQL Editor，按 New query。
貼上 SQL，按 Run。畫面下方應該顯示 Success。
打開 Table Editor，確認你看到 registrations 和 settings 兩個表。
回到 Manus，回覆「完成」。

第二部分：Manus 問你要兩個數值

下表列出每個數值在 Supabase 哪裏找。Manus 問你要數值時，按 Manus 的指示提供。

環境變數名稱	在 Supabase 哪裏找	可不可以公開
SUPABASE_URL	Project Settings → Data API → Project URL	可以，但我們仍然只放在伺服器。
SUPABASE_SECRET_KEY	Project Settings → API Keys → Secret key（以 `sb_secret_` 開頭）	絕對不可以。這條 key 可以讀寫全部資料。

3C　把兩個數值填入 Vercel

在 Vercel 打開你的 project，按 Settings → Environment Variables。
逐個加入兩個環境變數：名稱照上表填寫，數值貼上你在 Supabase 複製的內容。

3D　叫 Manus 把改動 push 到 GitHub

在同一個 Manus 對話貼上下面的 prompt。Manus push 完成後，Vercel 會在一至兩分鐘內自動更新網站。你可以在 Vercel 的 Deployments 看到新的一次部署。

Prompt：Commit 並 push 到 GitHub

請把剛才的改動存入 GitHub：
1. 先執行 npm run build，確認沒有錯誤；如果有錯誤，先修正。
2. Commit 這次的改動，commit 訊息用一句話寫明這次改了甚麼。
3. Push 到 GitHub 的 main branch。
4. 完成後，告訴我這次的 commit 訊息。

3E　測試

Vercel 部署完成後，在你的 vercel.app 網址提交一次報名。
到 Supabase 的 Table Editor，確認 registrations 表多了一行資料。

第 4 步

接上自己的網域（老師示範）

老師示範，學員觀看

完成後你會看到網站可以用 event.你的網域.com 打開。

網域（domain）就是你公司的網址，例如 abc.com。Subdomain 是網域前面多加一個名稱，例如 event.abc.com。用 subdomain 的好處是不會影響你公司原有的網站。

網址怎樣找到你的網站

DNS 像一本電話簿。訪客輸入 event.abc.com 時，瀏覽器先問 DNS：「這個網址在哪裏？」你在網域商加的一條 CNAME 記錄，就是告訴 DNS：「event 這個名稱，請指向 Vercel。」

4A　準備：啟用 My Browser，並登入網域商（只需做一次）

在 Manus 對話框下方按連接器圖示，啟用 My Browser（Manus 文件稱為 Manus Browser Operator），然後按指示在 Chrome 或 Edge 安裝擴充功能。
在同一個瀏覽器登入 Vercel 和你的網域商（GoDaddy 或 Namecheap）。如果網域商要求兩步驗證，請你自己完成登入，不要把密碼交給 Manus。

4B　叫 Manus 用 My Browser 加 DNS 記錄

Manus 會要求你授權它控制瀏覽器，然後在你的瀏覽器開分頁操作，所以你可以看着它做。你想停止時，關閉那個分頁就可以。

Prompt 4：用 My Browser 接上 subdomain

請用 My Browser（我的瀏覽器）幫我把網站接上我自己的 subdomain。我已經在這個瀏覽器登入了 Vercel 和我的網域商。

- 網域商：（填寫：GoDaddy 或 Namecheap）
- 想用的網址：（填寫：例如 event.mycompany.com）
- Vercel project 名稱：（填寫：Vercel project 名稱）

請按以下步驟做：
1. 在 Vercel 這個 project 的 Settings → Domains 加入上面的網址，然後記下 Vercel 要求的 DNS 記錄（Type、Name 和 Value）。
2. 到網域商的 DNS 管理頁面，新增這一條記錄。Host（或 Name）一欄只填 subdomain 的名稱，例如 event，不要填完整網址。
3. 你只可以新增記錄，不可以修改或刪除任何現有的記錄。如果網域商已經有同名的記錄，就停下來問我。
4. 按「儲存」之前，先把你準備新增的記錄列出來給我看，等我回覆「確認」才儲存。
5. 儲存後回到 Vercel，等它顯示 Valid Configuration，然後告訴我結果。如果 DNS 未生效，就告訴我大約要等多久再檢查。

4C　檢查

Vercel 顯示 Valid Configuration 之後，用手機打開新網址，確認看到報名頁。DNS 生效通常需要幾分鐘，有時要更久；Vercel 也會自動為新網址加上 https。

如果 Manus 卡住：手動做法

有些網域商的網站會阻擋自動操作，這時你可以自己完成以下兩步。

（一）在 Vercel 加 subdomain

在 Vercel 的 project 打開 Settings → Domains，輸入 event.abc.com，按 Add。
Vercel 會顯示一條 CNAME 記錄，記下它的 Name 和 Value。

（二）在網域商加 DNS 記錄

GoDaddy：我的產品 → 網域 → DNS → 新增記錄。Namecheap：Domain List → Manage → Advanced DNS → Add New Record。

TypeHost／NameValue／Points to

CNAMEevent照抄 Vercel 顯示的 Value

儲存後回到 Vercel，等它顯示 Valid Configuration。

課後延伸：名額上限、admin 介面和確認電郵

課堂上不做以下三項。你完成第 0 至第 3 步後，可以在同一個 Manus 對話自己加上。A 要在 B 之前做，因為 B 的 admin 頁會修改 A 建立的名額上限；C 和其他兩項無關，可以隨時做。

A　設定名額上限

完成後，你在 Supabase 把上限改成目前的報名人數，報名頁就會顯示「名額已滿」。

A1　叫 Manus 加名額上限

Prompt A：名額上限

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

【這一步的任務】
請加報名人數上限。

1. 上限儲存在 Supabase 的 settings 表（id = 1 那一行的 max_registrations）。我會直接在 Supabase 的 Table Editor 修改這個數字，網站暫時不需要設定上限的介面。
2. 訪客提交報名時，伺服器先讀取上限，再數 registrations 的人數；如果人數已經達到上限，就不要寫入，並在頁面顯示「名額已滿」。
3. 報名頁顯示「尚餘 X 個名額」。如果已經額滿，就直接顯示「名額已滿」，並停用提交按鈕。
4. 報名頁每次載入都要讀取最新的人數和上限，不可以用快取或預先產生的靜態頁面，否則我在 Supabase 改了上限，網站也不會更新。
5. 名額檢查只可以在伺服器做，不可以只靠前端隱藏按鈕。
6. 完成後告訴我，暫時不要 push 到 GitHub，我會另外叫你 push。

A2　叫 Manus 把改動 push 到 GitHub

在同一個 Manus 對話貼上下面的 prompt。Manus push 完成後，Vercel 會在一至兩分鐘內自動更新網站。你可以在 Vercel 的 Deployments 看到新的一次部署。

Prompt：Commit 並 push 到 GitHub

請把剛才的改動存入 GitHub：
1. 先執行 npm run build，確認沒有錯誤；如果有錯誤，先修正。
2. Commit 這次的改動，commit 訊息用一句話寫明這次改了甚麼。
3. Push 到 GitHub 的 main branch。
4. 完成後，告訴我這次的 commit 訊息。

A3　測試

在 Supabase 打開 Table Editor → registrations，數一數目前有多少行，例如 2 行。
打開 settings 表，雙擊 max_registrations 那一格，改成同一個數字，例如 2，然後按 Save。
重新載入報名頁，確認頁面顯示「名額已滿」，而且提交按鈕不能按。
測試完成後，把上限改回你想要的數字。

B　加 admin 介面

完成後，你用 admin 帳戶登入，就可以查看和修改報名資料，也可以在 admin 頁改名額上限。

B1　在 Supabase 新增 admin 帳戶，並關掉公開註冊

在 Supabase 打開 Authentication → Users，按 Add user → Create new user。
輸入你的電郵和密碼，剔選 Auto Confirm User，然後按 Create user。
打開 Authentication → Sign In / Providers，關掉 Allow new users to sign up，然後按 Save。

如果 Manus 問你要 SUPABASE_PUBLISHABLE_KEY，它在 Supabase 的 Project Settings → API Keys → Publishable key（以 sb_publishable_ 開頭）。你提供給 Manus 之後，也要把它填入 Vercel 的環境變數，然後才叫 Manus push。

B2　叫 Manus 做 admin 介面

Prompt B：Admin 介面

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

【這一步的任務】
請加一個 admin 介面。Admin 登入用 Supabase Auth。網站不可以有註冊頁；admin 帳戶只在 Supabase 後台手動新增。
如果 Supabase Auth 需要 publishable key，就使用環境變數 SUPABASE_PUBLISHABLE_KEY，數值由我提供；這個變數同樣只放在伺服器端。

1. /admin/login：admin 用電郵和密碼登入（Supabase Auth）。這一頁不要有註冊連結，也不要有「忘記密碼」。
2. /admin：只有已登入的 admin 才可以打開。未登入的人打開 /admin，伺服器要把他送回 /admin/login。
3. /admin 顯示全部報名資料，最新的排在最上面，並顯示「已報名 X 人／上限 Y 人」。
4. Admin 可以修改每一筆報名的姓名、電郵、電話、公司名稱和備註，按「儲存」後寫回 Supabase。
5. /admin 有一個「名額上限」欄位和「儲存」按鈕，admin 改完後寫回 settings 表（id = 1 那一行的 max_registrations）。
6. 頁面右上角有「登出」按鈕。
7. 所有讀取和修改資料的動作，伺服器都要先確認 admin 已經登入。
8. 完成後告訴我，暫時不要 push 到 GitHub，我會另外叫你 push。

B3　叫 Manus 把改動 push 到 GitHub

在同一個 Manus 對話貼上下面的 prompt。Manus push 完成後，Vercel 會在一至兩分鐘內自動更新網站。你可以在 Vercel 的 Deployments 看到新的一次部署。

Prompt：Commit 並 push 到 GitHub

請把剛才的改動存入 GitHub：
1. 先執行 npm run build，確認沒有錯誤；如果有錯誤，先修正。
2. Commit 這次的改動，commit 訊息用一句話寫明這次改了甚麼。
3. Push 到 GitHub 的 main branch。
4. 完成後，告訴我這次的 commit 訊息。

B4　測試

在未登入的情況下打開 你的網址/admin。網站應該把你送去登入頁。
用 B1 的電郵和密碼登入，確認你看到報名名單。
修改其中一筆報名，按「儲存」，再到 Supabase 的 Table Editor 確認資料已經改了。
在 admin 頁把名額上限改成另一個數字，按「儲存」，再到 Supabase 的 settings 表確認數字已經改了。

C　報名成功後寄確認電郵

完成後，報名者會收到一封確認電郵。

C1　開 Resend 帳戶並建立 API key

開一個 Resend 帳戶（resend.com）。請記住你登記時用的電郵地址，測試時要用到。
在 Resend 打開 API Keys，按 Create API Key。
立即複製這條 key。Resend 只會顯示一次。

C2　叫 Manus 加確認電郵

Prompt C：確認電郵

【技術設定】
這個 project 用 Next.js，code 放在 GitHub，部署到 Vercel，資料庫用 Supabase。
不要使用 Manus 內置的資料庫和 hosting。
所有讀寫資料的動作，都在 Next.js 伺服器端執行；瀏覽器不可以直接連接 Supabase。
所有 key 只放在伺服器端的環境變數，不要用 NEXT_PUBLIC_ 開頭，也不要把 key 的數值寫進 code。

【這一步的任務】
請在訪客報名成功後，寄一封確認電郵給報名者。

1. 用 Resend 寄電郵，由 Next.js 伺服器呼叫 Resend。使用兩個環境變數，數值由我提供：RESEND_API_KEY 和 EMAIL_FROM；兩個變數都只放在伺服器端。
2. 電郵標題：（填寫：電郵標題，例如「你已成功報名 AI 工作坊」）
3. 電郵內容包括：報名者姓名、活動名稱、日期和時間、地點。
4. 如果電郵寄不出，報名資料仍然要儲存，頁面照常顯示「報名成功」；錯誤只記錄在伺服器的 log。
5. 完成後告訴我，暫時不要 push 到 GitHub，我會另外叫你 push。

C3　把兩個數值填入 Vercel

環境變數名稱	數值
RESEND_API_KEY	你在 C1 複製的 key
EMAIL_FROM	`onboarding@resend.dev`

C4　叫 Manus 把改動 push 到 GitHub

在同一個 Manus 對話貼上下面的 prompt。Manus push 完成後，Vercel 會在一至兩分鐘內自動更新網站。你可以在 Vercel 的 Deployments 看到新的一次部署。

Prompt：Commit 並 push 到 GitHub

請把剛才的改動存入 GitHub：
1. 先執行 npm run build，確認沒有錯誤；如果有錯誤，先修正。
2. Commit 這次的改動，commit 訊息用一句話寫明這次改了甚麼。
3. Push 到 GitHub 的 main branch。
4. 完成後，告訴我這次的 commit 訊息。

C5　測試

Vercel 部署完成後，用你登記 Resend 時的電郵地址報名一次，然後檢查郵箱。

C6　用自己的網域寄電郵給任何人

這一步需要你已經有自己的網域，並且已經完成第 4A 步：啟用 My Browser，並在瀏覽器登入 Resend 和網域商。

Prompt C6：用 My Browser 驗證 Resend 網域

請用 My Browser（我的瀏覽器）幫我在 Resend 驗證我的網域，用來寄確認電郵。我已經在這個瀏覽器登入了 Resend 和我的網域商。

- 網域商：（填寫：GoDaddy 或 Namecheap）
- 網域：（填寫：例如 mycompany.com）

請按以下步驟做：
1. 在 Resend 的 Domains 加入這個網域，然後記下 Resend 要求的全部 DNS 記錄（Type、Name 和 Value）。
2. 到網域商的 DNS 管理頁面，逐條新增這些記錄。
3. 你只可以新增記錄，不可以修改或刪除任何現有的記錄，特別是現有的 MX 記錄，因為改動 MX 記錄會影響公司現在收電郵。如果遇到同名的記錄，就停下來問我。
4. 按「儲存」之前，先把你準備新增的全部記錄列出來給我看，等我回覆「確認」才儲存。
5. 儲存後回到 Resend 按 Verify，然後告訴我結果。如果未驗證成功，就告訴我大約要等多久再試。

如果 Manus 卡住，你可以按以下步驟自己做：

在 Resend 打開 Domains，按 Add Domain，輸入你的網域。
Resend 會顯示幾條 DNS 記錄，通常是 TXT 和 MX。
回到網域商，逐條新增這些記錄。Type、Host 和 Value 全部照抄 Resend 顯示的內容。
回到 Resend 按 Verify，等狀態變成 Verified。

TypeHost／NameValue

TXT照抄 Resend照抄 Resend

MX照抄 Resend照抄 Resend

TXT照抄 Resend照抄 Resend

驗證成功後（無論由 Manus 還是你自己完成）：改用自己的寄件地址

在 Vercel 把 EMAIL_FROM 改成你的網域地址，例如 event@abc.com，然後按 Redeploy。因為寄件地址放在環境變數，所以你不需要叫 Manus 改任何 code。之後用任何電郵報名，都會收到確認電郵。

卡住時怎樣問 Manus

你只需要把三件事講清楚：你做了甚麼、你預期看到甚麼、你實際看到甚麼。錯誤訊息最好整段複製，或者直接附上截圖。

Prompt：請 Manus 修正問題

【問題】
我在第（填寫：步驟編號）步做了：（填寫：你做了甚麼）
我預期看到：（填寫：應該出現的結果）
但我看到：（填寫：錯誤訊息，或者附上截圖）

請先找出原因，再修正。修正後請告訴我怎樣測試。

名詞表

前端: 在訪客瀏覽器執行的部分，負責顯示畫面。例如報名表的欄位和「提交」按鈕。
伺服器（後端）: 在 Vercel 執行、訪客看不到的部分，負責判斷。例如檢查報名表有沒有填好，再把資料寫入 Supabase。
環境變數: 放 key 和設定值的地方，數值填在 Vercel 的設定裏，不寫在 code 裏。例如 SUPABASE_SECRET_KEY。
API key: 一條長密碼，讓你的網站可以使用另一個服務。例如網站用 Supabase 的 secret key 把報名資料寫入資料庫。
Repository: GitHub 上存放一個 project 全部 code 的地方。例如 event-signup。
.gitignore: 一張「不要存入 GitHub」的檔案清單。例如 .env 檔案在清單上，所以 key 不會被上傳。
部署（Deploy）: 把 code 變成一個可以打開的網站。例如 Vercel 部署完成後，給你一個 vercel.app 網址。
Redeploy: 用同一份 code 重新部署一次。例如你改了環境變數之後，要按 Redeploy 才會生效。
RLS: Supabase 的「誰可以讀寫資料」規則。我們開啟了 RLS 但不加任何規則，所以瀏覽器完全無法直接讀寫資料，只有伺服器可以。
網域和 subdomain: 網域是你的網址，例如 abc.com；subdomain 是在前面加一個名稱，例如 event.abc.com。
DNS 和 CNAME: DNS 是網址的電話簿；CNAME 是其中一種記錄，意思是「這個名稱指向另一個地址」。例如 event 指向 Vercel。

由一句中文要求，到一個真正上線的報名網站

每個工具負責甚麼

訪客按「提交」之後，網站做了甚麼

Supabase 裏面有甚麼

你的改動怎樣去到網站

固定技術設定

2A 先叫 Manus 檢查

2B 叫 Manus 用 GitHub 連接器把 code 存入 GitHub

2C 在 Vercel 部署

3A 在 Supabase 開 project

3B 叫 Manus 帶你建立資料表，並接上網站

第一部分：Manus 給你 SQL 之後

第二部分：Manus 問你要兩個數值

3C 把兩個數值填入 Vercel

3D 叫 Manus 把改動 push 到 GitHub

3E 測試

網址怎樣找到你的網站

4A 準備：啟用 My Browser，並登入網域商（只需做一次）

4B 叫 Manus 用 My Browser 加 DNS 記錄

4C 檢查

如果 Manus 卡住：手動做法

（一）在 Vercel 加 subdomain

（二）在網域商加 DNS 記錄

課後延伸：名額上限、admin 介面和確認電郵

A 設定名額上限

A1 叫 Manus 加名額上限

A2 叫 Manus 把改動 push 到 GitHub

A3 測試

B 加 admin 介面

B1 在 Supabase 新增 admin 帳戶，並關掉公開註冊

B2 叫 Manus 做 admin 介面

B3 叫 Manus 把改動 push 到 GitHub

B4 測試

C 報名成功後寄確認電郵

C1 開 Resend 帳戶並建立 API key

C2 叫 Manus 加確認電郵

C3 把兩個數值填入 Vercel

C4 叫 Manus 把改動 push 到 GitHub

C5 測試

C6 用自己的網域寄電郵給任何人

驗證成功後（無論由 Manus 還是你自己完成）：改用自己的寄件地址

卡住時怎樣問 Manus

名詞表

2A　先叫 Manus 檢查

2B　叫 Manus 用 GitHub 連接器把 code 存入 GitHub

2C　在 Vercel 部署

3A　在 Supabase 開 project

3B　叫 Manus 帶你建立資料表，並接上網站

3C　把兩個數值填入 Vercel

3D　叫 Manus 把改動 push 到 GitHub

3E　測試

4A　準備：啟用 My Browser，並登入網域商（只需做一次）

4B　叫 Manus 用 My Browser 加 DNS 記錄

4C　檢查

A　設定名額上限

A1　叫 Manus 加名額上限

A2　叫 Manus 把改動 push 到 GitHub

A3　測試

B　加 admin 介面

B1　在 Supabase 新增 admin 帳戶，並關掉公開註冊

B2　叫 Manus 做 admin 介面

B3　叫 Manus 把改動 push 到 GitHub

B4　測試

C　報名成功後寄確認電郵

C1　開 Resend 帳戶並建立 API key

C2　叫 Manus 加確認電郵

C3　把兩個數值填入 Vercel

C4　叫 Manus 把改動 push 到 GitHub

C5　測試

C6　用自己的網域寄電郵給任何人