0%
一日工作坊:本機四階段實作14
課堂實作45 分鐘最後確認 2026-07-25

階段 1:把自己的 repo 複製到本機並預覽

從自己用課程 Template 建立的 GitHub repository 複製 HTTPS 網址,在 Claude App 的 Code 分頁由學員逐步核准 clone;重新開啟真正的本機 repo 資料夾後,才依 README 準備 Preview 並確認畫面進入「本機練習」。

14

學完這一課,你會做到

  • 分辨課程 Template、自己的 GitHub repo、上層課程資料夾與實際本機 repo
  • 由 Claude App 先檢查來源、目的地與 GitHub 驗證,再明確核准一次 clone
  • clone 完成後,在 Code 分頁重新開啟正確的本機 repository
  • 用 Preview 或 App 提供的網址開啟排班畫面
  • 用 Claude App 與 GitHub 網頁確認起點版本,並在卡住時使用 checkpoint

開始前先定位

你在這裡一日工作坊:本機四階段實作

先用 repo 內建的瀏覽器 localStorage 跑起模板、完成排班與客製規則;這一段不安裝資料庫,也不要求雲端同步。

完成證據clone 完成檢查點

Claude App 上方顯示 wca-ai-clinic-schedule-workshop;資料夾內看得到 README、package.json、src 與 .git;origin Owner 是自己的 Gi…

本課先不做第 14 課不是直接按 Preview:先把雲端副本帶到本機

Use this template 只是在 GitHub 建立一份屬於你的雲端 repository。Claude App 的 Local 工作階段只能直接處理本機資料夾,因此中間還需要完成一次 clone。這堂課…

本課名詞階段 1Claude AppUse this templatecloneHTTPSLocal

開始前先分清楚四個位置

位置它是什麼如何核對
課程 Template講師提供的乾淨起點Owner 是 dentallio;不要直接修改
自己的 GitHub repo按 Use this template 建立的雲端副本Owner 是自己的 GitHub username
上層課程資料夾準備接收 clone 的空資料夾例如「白袍AI課程」;裡面尚無專案檔
實際本機 repoclone 後產生的專案資料夾看得到 README、package.json、src 與 .git

從自己的 GitHub repo 到本機:完整操作順序

  1. 在課程 Template 按 Use this template → Create a new repository。Owner 選自己的帳號並建立 repo;回到新頁面再次確認左上角 Owner 已是自己的 GitHub username。
  2. 在自己的 repo 按 Code → Local → HTTPS,按複製圖示取得網址。網址應類似 https://github.com/你的GitHub帳號/wca-ai-clinic-schedule-workshop.git;不要複製 dentallio 的模板網址。
  3. 用 Finder/檔案總管建立一個專用空資料夾,例如「白袍AI課程」。不要選整個桌面、Documents、家目錄或雲端硬碟根目錄。
  4. 開啟 Claude App → Code → New,Environment 選 Local,再用 Select folder 選剛才的空資料夾。先貼第一個「只檢查」Prompt,不要立即 clone。
  5. Claude 回報 Owner、repo、目的地、Git 是否可用與可能的登入方式。全部正確後,再貼第二個 Prompt,明確核准這一次 clone。
  6. 若跳出 GitHub 瀏覽器登入,由本人在 github.com 完成;不要把密碼、一次性驗證碼、PAT、token、cookie 或裝置碼貼給 Claude、講師或助教。若只出現要求輸入密碼、來源不明的登入頁或無法辨識的安裝要求,立即停止並舉紅牌。
  7. 看到 clone 成功後,結束目前空資料夾工作階段。回 Code → New → Local → Select folder,改選裡面的 wca-ai-clinic-schedule-workshop 實際 repo 資料夾。
  8. 請 Claude 只讀核對目前分支、origin Owner 與 README;Review changes 應為空白。通過後才進入本課 Preview 操作。

第一句:只檢查來源、目的地與登入狀態

可直接使用的 Prompt
我已經從課程 Template 建立自己的 GitHub repository,這是我從自己 repo 的 Code → Local → HTTPS 複製的網址:[貼上 https://github.com/你的GitHub帳號/wca-ai-clinic-schedule-workshop.git]。目前 Claude App 開啟的是我準備接收專案的空白課程資料夾。請先只檢查並用繁體中文回報:1. URL 的 Owner 與 repo;2. Owner 是否為我的帳號、不是 dentallio;3. Git 是否可用;4. 目前資料夾是否適合做 clone 目的地;5. 是否已有同名子資料夾;6. 若這是 Private repo,目前是否已有可用的 GitHub 驗證,或下一步是否會需要我在 github.com 瀏覽器親自登入。現在不要 clone、不要安裝工具、不要修改檔案、不要 commit、不要 push,也不要要求或讀取我的密碼、一次性驗證碼、PAT、token、cookie 或裝置碼。

第二句:核對正確後,才允許 clone 一次

可直接使用的 Prompt
我已確認你回報的 GitHub Owner、repository 與本機目的地都正確。現在只核准在目前這個空白課程資料夾完成一次 clone:[貼上自己的 HTTPS clone URL]。如果需要 GitHub 驗證,請停下並只引導我在確認網域為 github.com 的瀏覽器頁面親自完成;不要要求我把密碼、一次性驗證碼、PAT、token、cookie 或裝置碼貼進對話。若無法提供安全的瀏覽器登入流程,請不要改用明文憑證或自行安裝不明工具,直接保留完整錯誤並請我找助教。clone 完成後不要安裝套件、不要修改檔案、不要 commit、不要 push;只回報建立的資料夾名稱、目前分支與 origin 的 Owner/repo,並提醒我重新用 Claude App 開啟實際 repo 資料夾。

clone 後要重新選擇實際 repository 資料夾

Claude Code 繁體中文桌面版第一個工作階段畫面,示範選擇 Local、專案資料夾、模型並輸入任務。

clone 前選的是上層空資料夾;clone 完成後必須建立新的 Local 工作階段,改選內含 README、package.json 與 src 的實際 repository 資料夾。

  1. Environment 選 Local,讓 Claude 處理目前電腦上的課程檔案。
  2. Project folder 應顯示 wca-ai-clinic-schedule-workshop,而不是上層「白袍AI課程」。
  3. 第一次重新開啟後先只讀核對,Review changes 應為空白。

clone 完成檢查點

Claude App 上方顯示 wca-ai-clinic-schedule-workshop;資料夾內看得到 README、package.json、src 與 .git;origin Owner 是自己的 GitHub username;目前分支符合課程起點;Review changes 沒有任何修改。缺一項就先停下,不要進入 Preview。

clone 通過後,才跟著投影啟動 Preview

  1. 再次到 GitHub 網頁核對自己的 Owner/repo、課程指定分支與最新成功 commit。
  2. 確認 Claude App 的 Code 分頁已選 Local,Project folder 是剛才重新開啟的實際 repository 資料夾。
  3. 請 Claude 讀 README,說明如何預覽;等你確認後,再讓它完成必要準備並開啟 Preview。
  4. 每次出現權限要求都要看目的與範圍;只允許與目前專案和預覽直接相關的動作。
  5. 在 Preview 開啟排班表,確認右上角顯示「本機練習」。現在先停在同一台電腦與同一個瀏覽器。

App-first 啟動 prompt

可直接使用的 Prompt
請先閱讀 README 與 CLAUDE.md,告訴我這個專案如何預覽、會需要哪些動作與權限。現在不要修改任何程式檔。等我確認後,請依專案既有方式準備並開啟 Preview;保留目前的本機練習模式,不要填 Firebase Web config、不要新增 SQLite 或其他資料庫、不要更新套件,也不要存取專案資料夾以外的位置。

成功畫面應包含

  • Claude App 顯示 Preview 可用,且沒有未處理的第一個錯誤。
  • Preview 顯示課程排班介面,而非空白頁或其他專案。
  • Claude App 的 Review changes 沒有意外檔案,表示單純啟動沒有改動程式。
  • 右上角顯示「本機練習」;/course-check 顯示本機模式,這在階段 1 是正確結果。
牙科排班工作坊模板成功開啟的桌機畫面,包含課程 Demo 提醒、虛構診所名稱、同步狀態與空白週班表。

階段 1 完成畫面對照:Preview 應能正常顯示排班工作坊,而不是空白頁、錯誤頁或其他專案。截圖使用本機練習模式;此階段先確認專案能開啟,不把它當成雲端同步證明。

  1. 頁首可看到「課程 Demo」與合成資料提醒。
  2. 主畫面顯示虛構診所名稱、當週日期與完整人員列。
  3. 沒有未處理錯誤;單純啟動後 Review changes 不應出現意外修改。
畫面確認:2026-07-20牙科排班工作坊模板(合成資料)開啟原尺寸圖片

Checkpoint 1

App Preview 能開啟,右上角顯示「本機練習」,Review changes 沒有意外檔案。若十分鐘內無法解決,舉紅牌並由助教切到本階段 checkpoint;不要改用陌生 Terminal 指令或臨時安裝資料庫硬闖。

參考資料

介面與方案會改版;實際操作仍以各工具官方頁面為準。延伸資料用來幫助理解,不取代本課安全原則。

低壓力自我檢查

Firebase 尚未設定時,這份實作 repo 會把合成排班存在哪裡?

準備好再標記完成完成狀態會留在這台裝置,下次回來可接著學。