INTEGRATED LAB · Starter

dist/project/e-commerce Production Artifact 與本機 Smoke|整合 Lab

在同一份章節作品中整合 4 個 module,排除單項通過但組合失敗的問題。

最後整合任務

交付:完成 dist/project/e-commerce production artifact、SEO 與本機端到端 smoke;不部署 GAS、網站或公開網址。

將同一組責任轉用到另一個商家情境,仍達成:完成 dist/project/e-commerce production artifact、SEO 與本機端到端 smoke;不部署 GAS、網站或公開網址。

限制:不新增框架。;保留 module id 與驗收證據。

依序回看每個 topic

整合不是重新背一遍名詞;是把每個 topic 的責任放回同一份作品。

  1. 1. 唯一 Production Artifact 根
    files/starter/index.html|operation=release-manifest 與 result manifest
    回到 topic 說明
  2. 2. 六頁與本地資源清單
    files/starter/index.html|count=6、uniqueCount=6、valid=true
    回到 topic 說明
  3. 3. SEO 與索引產物
    files/starter/index.html|pageCount=6、placeholderOriginMatch=true、replacementGate=required
    回到 topic 說明
  4. 4. 本機 E2E Smoke 與不部署
    files/starter/smoke-test.md|count=8、uniqueCount=8、valid=true
    回到 topic 說明

四個整合停點

每個停點都要留下檔案、畫面或瀏覽器證據。

  1. Step 1|觀察整合 Starter 並找出第一個未通過 module。

    檔案:files/starter/index.html 定位:#observe

    操作:逐項讀取 outcomes,執行一次現況操作。

    // OBSERVE:不修改程式,先記錄第一個失敗 moduleId。

    預期:能指出第一個未通過 module。

    證據:第一個 moduleId 與缺少的 evidence。

    卡住先查:確認開啟的是 files/starter/index.html。

  2. Step 2|依 module 順序修改,一次只加入一個責任。

    檔案:files/starter/index.html 定位:#modify

    操作:建立本地 release manifest 並核對 root 直接含 index.html。 → 從根目錄逐頁開啟並檢查所有 href/src 不離開 e-commerce。 → 以本地 payload 稽核四類 URL,確認目前一致使用 placeholder,並把同批替換列為部署前阻擋條件。 → 在 localhost 逐項執行八個 gate,記錄 URL/操作/預期/實際/結果。

    // 28-01-production-artifact: 建立本地 release manifest 並核對 root 直接含 index.html。
    // 28-02-topic: 從根目錄逐頁開啟並檢查所有 href/src 不離開 e-commerce。
    // 28-03-seo: 以本地 payload 稽核四類 URL,確認目前一致使用 placeholder,並把同批替換列為部署前阻擋條件。
    // 28-04-e2e-smoke: 在 localhost 逐項執行八個 gate,記錄 URL/操作/預期/實際/結果。

    預期:完成 dist/project/e-commerce production artifact、SEO 與本機端到端 smoke;不部署 GAS、網站或公開網址。

    證據:operation=release-manifest 與 result manifest;count=6、uniqueCount=6、valid=true;pageCount=6、placeholderOriginMatch=true、replacementGate=required;count=8、uniqueCount=8、valid=true

    卡住先查:回到第一個未通過的 module,只修該處。

  3. Step 3|驗證所有 module 在整合後仍成立。

    檔案:files/solution/index.html 定位:#verify

    操作:重新整理並依 outcomes 順序重跑所有證據。

    // VERIFY:逐項記錄 pass/fail,不以看到畫面代替 evidence。

    預期:4/4 module 通過。

    證據:每個 moduleId 都有實際結果與重設後重現紀錄。

    卡住先查:若失敗,回到第一個失敗 module,不同時修多項。

  4. Step 4|把本章責任轉用到不同內容情境。

    檔案:files/starter/index.html 定位:#challenge

    操作:替另一個商家情境重做,仍達成:完成 dist/project/e-commerce production artifact、SEO 與本機端到端 smoke;不部署 GAS、網站或公開網址。

    // CHALLENGE:只替換內容與資料,不新增框架或跳過 self-check。

    預期:完成 dist/project/e-commerce production artifact、SEO 與本機端到端 smoke;不部署 GAS、網站或公開網址。

    證據:轉用後的作品與全數 module self-check。

    卡住先查:先確認共同基底與 module id 未被改壞。

完成本階段後,重新載入並保存整合證據。

回到自主學習入口