AI 商用網站開發跟著步驟，做出自己的作品
返回任務地圖

草稿壞了，表單也要能用

第 16 堂 · 第 3／3 關 · 觀念 18 分鐘＋實作 42 分鐘

查看本堂完整六步
先接任務，準備開始

草稿壞了，表單也要能用，每一步都有依據。

壞JSON、舊版本或未知服務不能照單套用。故障副本另有解析後錯誤覆寫服務值，應修來源，不放寬選項驗證。

這關帶走：有效草稿能還原，壞JSON與未知服務仍安全拒絕。

步驟 5／6 · 觀念 18 分鐘

先學一招：資料不可信時先保留目前輸入

有效草稿能還原，壞JSON與未知服務仍安全拒絕。

帶上你的裝備

  • 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
  • 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
  • fault-L16的readDraft流程與有效草稿測試值、目前服務選項

壞JSON、舊版本或未知服務不能照單套用。故障副本另有解析後錯誤覆寫服務值，應修來源，不放寬選項驗證。

一起拆解：故障草稿與正常草稿分開

本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。

這次的輸入

故障頁8792與測試頁共用專屬faultL16 key；正常頁8791保留原key。

正常：qinghe.inquiryDraft.v1
故障：qinghe.inquiryDraft.faultL16.v1
故障原因：saved.fields.serviceId="retired-service"

這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。

一步一步推演

  1. 先在故障資料頁放有效brand草稿，回故障表單按還原。
  2. JSON原本有效，卻被程式覆寫成舊服務；只移除這個錯誤賦值，保留故障專屬key。
  3. 測有效、壞JSON、未知服務；回正常表單還原A，確認沒有被測試資料覆蓋。

正常應看到

有效故障草稿可還原，壞資料仍被拒絕，正常草稿保留。

常見錯誤對照

放寬服務驗證接受retired-service，會讓真正未知資料也過關。

先預測，再說明原因

為何只把fault檔案放另一個資料夾，仍不足以保證儲存隔離？

跟著觀察

  1. 先讀「故障草稿與正常草稿分開」的輸入，指出本關實際檔案或資料。
  2. 為何只把fault檔案放另一個資料夾，仍不足以保證儲存隔離？
  3. 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
未知服務草稿應怎麼處理？

選一個試試看，答錯也可以再試。

這是你的實際操作確認，小測不會替你勾選。

步驟 6／6 · 實作 42 分鐘

動手挑戰：草稿壞了，表單也要能用

有效草稿能還原，壞JSON與未知服務仍安全拒絕。

先準備

  • 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
  • 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
  • fault-L16的readDraft流程與有效草稿測試值、目前服務選項
取得獨立故障練習包依步驟啟動自己的故障副本

故障表單與測試頁使用專屬 qinghe.inquiryDraft.faultL16.v1，正常草稿鍵 qinghe.inquiryDraft.v1 保留。請先下載並在8792開自己的draft-test.html，放有效虛構草稿後按頁面連結回故障表單。下列線上入口僅供看畫面，測試鍵已隔離，不會覆寫正常草稿。

查看隔離的虛構資料測試頁

照這個順序開始

  1. 在獨立fault-L16使用虛構測試資料，保留正常草稿。
  2. 請AI只移除解析後retired-service覆寫，保留錯誤提示與驗證。
  3. 測有效、壞JSON、未知服務、清除單key及儲存拒絕備援，記實測或受控測試範圍。

修復草稿的錯誤服務覆寫

主要使用 Cursor 內建 AI；先附資料，再送出指令。

1．附上這些檔案與資料
  • 自己service-site/frontend的inquiry.html、inquiry.js與完整styles.css
  • 使用虛構聯絡資料；portfolio作品一保留，兩個專案不互相引用
  • fault-L16的readDraft流程與有效草稿測試值、目前服務選項
  • 故障專屬key=qinghe.inquiryDraft.faultL16.v1；保留此隔離設定，不改正常草稿鍵
2．貼到哪裡
  1. 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
  2. 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
  3. 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
3．預期回覆與操作
  • 請AI只移除解析後retired-service覆寫，保留錯誤提示與驗證。
  • 不清其他鍵、不丟目前輸入，錯誤後仍可填表。
4．自己檢查結果
  • 有效草稿能還原，壞JSON與未知服務仍安全拒絕。
  • 不清其他鍵、不丟目前輸入，錯誤後仍可填表。
修復草稿的錯誤服務覆寫 Prompt（可收合）

你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。

情境與本次輸入：承接第15堂五欄表單，不接後端。只儲存虛構聯絡資料，草稿key固定qinghe.inquiryDraft.v1，資料只有version:1、savedAt與五欄fields，不含密碼、驗證或管理內容。只在本機HTTP預覽，手動按儲存才寫入；不是跨裝置、不是案件送出。

本次任務：獨立故障程式讀取有效草稿後，解析下一行卻把saved.fields.serviceId硬改retired-service，導致正常還原也被拒絕。依附流程與選項只移除這一個錯誤賦值，保留JSON／版本／型別／服務驗證與storage try/catch；不能放行不存在服務。提供最小差異與有效還原、壞JSON不套值、未知服務、拒絕儲存、單key清除保留其他鍵的測試表，未實測或僅受控模擬需分開標。故障練習專屬key為qinghe.inquiryDraft.faultL16.v1，保留它；正常表單key仍為qinghe.inquiryDraft.v1，不因修復而改鍵或清其他資料。

請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。
Cursor AI 無法使用？改用 ChatGPT 備援

把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。

收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。

兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。

複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。

卡住時，APPA 給你一點線索

線索 1｜先找現象與證據

先看readDraft中有沒有硬改合法serviceId。

線索 2｜再縮小修改範圍

保留JSON與選項檢查，修來源而不是放寬所有資料。

回到自己的作品，逐項檢查

  • 有效草稿能還原，壞JSON與未知服務仍安全拒絕。
  • 不清其他鍵、不丟目前輸入，錯誤後仍可填表。
  • 未實際完成的AI、發布或裝置驗收記待完成。
需要對照？看這一關的參考成果

先檢查自己的作品，再對照差異。開啟參考不會算完成。

對照本機草稿表單（另開分頁）

尚未完成可以先往下看，之後再回來補做。

保留依據與結果，再帶著作品往下走。

保留自己的修改差異與檢查結果。完成兩項操作確認再往下一關；也可以先閱讀，稍後補做。

進入第 17 堂：先讓前後端說同一種話返回上一關：還原前，先保留選擇權

關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。

留下自己的檢查紀錄

這是第 16 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。

重設會清除第 16 堂六步勾選，筆記、另一堂進度與網站檔案保留。