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

階段 3:完成排班核心功能

以瀏覽器 localStorage 保存合成資料,逐一驗收點格排班、換班、休假與週檢視;本階段只確認同一瀏覽器重新整理後資料仍在,不要求跨裝置同步。

16

學完這一課,你會做到

  • 完成排班、換班、休假與週檢視操作
  • 用可觀察的驗收條件檢查核心流程
  • 辨認畫面問題、資料問題與同步問題的差異

開始前先定位

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

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

完成證據Checkpoint 3

四項核心任務全部通過,重新整理後資料仍在,Claude App 與 Preview 沒有未處理錯誤;請 Claude 說明範圍後,單獨核准建立「完成核心排班流程」commit。若需要同步,再另行核准 push 並回…

本課先不做只測合成情境

測試資料要刻意包含空白、衝突與修改,但不得照抄真實醫師班表。即使只用姓氏或代號,若能和診所現況對照,就不屬於本課允許的合成資料。

本課名詞階段 3排班換班休假localStorage週檢視

四個核心任務

  1. 點選空白格,替王醫師(虛構)排入週一早診。
  2. 把同一格從早診改為午診,確認舊狀態沒有重複保留。
  3. 替林醫師(虛構)標記週三休假,確認休假與班別不會同時存在。
  4. 切換前後週,回到本週並重新整理,確認剛才的資料仍可讀取。

核心驗收表

功能操作通過標準
新增排班空白格選班別顯示正確人員、日期與班別
換班變更既有班別只保留最新狀態
休假標記休假清楚顯示且不可誤排
週檢視前後週切換日期範圍與內容一致
持久化重新整理合成資料仍存在
牙科排班工作坊的核心排班成果,王醫師週一為早診,林醫師週三標記休假。

階段 3 完成畫面對照:同一張週班表中能清楚看到班別與休假兩種狀態。截圖示範王醫師週一早診、林醫師週三休假;你仍要親自測試換班、前後週與重新整理。

  1. 王醫師週一格顯示早診;換成午診後,同一格只能保留最新狀態。
  2. 林醫師週三格顯示休假,不能同時殘留班別。
  3. 截圖只能核對外觀;切週與重新整理後資料仍存在,才算完整通過。
畫面確認:2026-07-20牙科排班工作坊模板(合成資料)開啟原尺寸圖片

Checkpoint 3

四項核心任務全部通過,重新整理後資料仍在,Claude App 與 Preview 沒有未處理錯誤;請 Claude 說明範圍後,單獨核准建立「完成核心排班流程」commit。若需要同步,再另行核准 push 並回 GitHub 網頁核對。

參考資料

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

低壓力自我檢查

換班後畫面正確,但重新整理又回到舊狀態,這次驗收算通過嗎?

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