駕馭雲端環境、綁定神經元，直擊開發畫面
大腦設定檔裝好且套件採購齊全，現在進入最關鍵的裝甲注入階段。我們要把由 AI 與你共同鍛造的主程式碼放入系統。
StackBlitz 是高度即時的雲端開發環境。它的反應速度極快，任何微小錯誤都會立刻反映在預覽畫面上。跟著 夜星 的腳步，我們逐一破解報錯畫面。
第一關：隱藏任務：獲取通行證 LIFF ID
貼上程式碼前請先完成此任務，這攸關系統能否辨識你的身分。
- 建立 Login 頻道：進入 LINE Developers，在 Provider 下方點擊「Create a new channel」，選擇 LINE Login。
- 設定類型：App types 僅勾選 Web app。名稱隨意填寫，拉到底點擊 Create。
- 新增 LIFF 應用程式：點擊上方 LIFF 分頁並按下 Add。
- Size：選 Full。
- Endpoint URL：先填
https://localhost。 - Scopes：務必勾選 profile 與 openid。
- Bot prompt：自用實測請選擇 Off。
- 正式發布：在頻道狀態點擊 Developing，切換為 Published。
第二關：主程式大搬風與神經綁定
相關程式碼，請到我的 github 尋找，或直接開啟此連結後複製程式碼
- 鎖定目標：點擊展開左側
src資料夾，找到App.tsx（或app.jsx）。執行「全選、刪除」，將主程式碼整串貼上。 - 神經綁定：修改程式碼頂部（約第 7 與第 8 行）：
const GAS_URL = '你的GAS網址/exec';const LIFF_ID = '剛剛拿到的LIFF ID';
第三關：核心流程：GAS 重新部署術
如果你修改了後端程式碼（例如註解掉噴錢的回覆功能），絕對不能點「新部署」。請依照以下流程確保網址不變：
- 管理部署：在 GAS 頁面點擊「部署」>「管理部署」。
- 編輯版本：找到現有的部署紀錄，點擊右上角的 「鉛筆（編輯）」 圖示。
- 建立版本：在版本選單中選擇 「建立新版本」。
- 完成更新：確認執行身分為「我」，存取權限為「所有人」，最後按下「部署」。
夜星叮嚀：只有透過「管理部署」更新版本，你的
GAS_URL才不會變動。若每次都點「新部署」，你就要回 StackBlitz 改一次網址，這太折磨人了。
第四關：直擊錯誤畫面！StackBlitz 修復手術
按下存檔（Ctrl+S）後若預覽視窗報錯，請執行修復：
- 檔名對齊：檢查左側目錄。若主程式檔名與
main.tsx裡的import路徑大小寫不符，系統會罷工。請右鍵點擊檔案選擇「Rename」修正。 - 重灌積木：若紅字顯示
Module not found，點擊下方「Terminal」視窗，輸入npm install並按下 Enter。 - 強制重整：若畫面卡住，點擊預覽視窗頂部的「環形箭頭」或直接按 F5 重新載入網頁。
💡 夜星的防呆檢查清單
- GAS 權限：確認存取權限是否依然維持在「所有人 (Anyone)」。
- 沈默註解：再次確認 GAS 程式碼中所有
replyToLine前方是否有雙斜線//。 - 如果不在乎line 訊息要付費的話，可以將沈默註解雙斜線
//移除，移除後記得重新「部署」。
- 管理部署：在 GAS 頁面點擊「部署」>「管理部署」。
- 編輯版本：找到現有的部署紀錄，點擊右上角的 「鉛筆（編輯）」 圖示。
- 建立版本：在版本選單中選擇 「建立新版本」。
- 完成更新：確認執行身分為「我」，存取權限為「所有人」，最後按下「部署」。
本章總結 你的「知識中樞」已具備靈魂。現在它不只是代碼，而是具備即時互動功能的網頁。下一篇處理最終拼圖：將網頁免費發布，變成手機首頁的專屬 App。我們發布篇見！
