顯示具有 C# 標籤的文章。 顯示所有文章
顯示具有 C# 標籤的文章。 顯示所有文章

2026年3月9日 星期一

使用 Codex 指定專案範本來創建一個全新的專案

使用 Codex 指定專案範本來創建一個全新的專案

最近正在使用 Codex 將之前做出的一個 .NET 8 Blazor 專案,改寫成為 .NET 10 的版本,其中將會從原先使用的 Syncfusion 元件,改寫成為使用 Ant Design 元件,並且該專案預設具有各種未來專案需要開發的設計模型、Web API、使用者與角色的 CRUD、授權與認證等需求的功能,在未來面對到新的專案需求時,一些基礎架構與設計模式都已經在這個專案中實作完成,就可以直接複製這個專案的結構與程式碼,來快速建立一個新的專案。

在三、四年前,我也確實開發了這樣的專案範本,可是當要套用到一個新的專案時候,還是需要花費一些時間來修改專案名稱、命名空間、檔案名稱等等,這些都是一些重複性的工作,在以往這些工作都是要透過人工來一步一步的實踐,現在我想要使用 Codex 來幫助我完成這些重複性的工作,讓我可以更快速的建立一個新的專案,如此,我便可以擁有一個多樣性與多變化的專案範本,來應對未來不同的專案需求。

當然,顯而易見的就是,這些 AI 工具將會帶來前所未有的工作效率提升、消除了之前需要大量人工作的事情、將重複性的工作一次性解決等等好處,這些都是非常棒的優點,但同時也會帶來一些新的挑戰,例如:如何確保 AI 工具生成的程式碼是正確的、如何確保 AI 工具生成的程式碼是安全的、如何確保 AI 工具生成的程式碼是可維護的等等,這些都是需要我們在使用 AI 工具時候要注意的事項。

在這篇文章中,我並不是從無到有的建立一個 MVP 專案,而是從一個已經存在的專案範本,來複製出一個新的專案,這樣的好處是,我們可以確保新專案的結構與功能是正確的,而且許多的處理邏輯與方法都已經具備了,因此,我們便可以更關心在這個新專案的需求、處理流程、測試與確認結果上,而不是一直持續在專注於基礎系統架構、設計模式、程式碼的撰寫等等,當然,更快速與有效的開發出系統,也是重要的目標之一。

這裡將會使用 Codex 來復刻出 NET10-Blazor-Starter 這個專案,將方案、專案、命名空間等名詞,一次性的自動作出修改,因此,在使用 Codex 來幫助我們建立一個新的專案時候,我們也需要注意這些事項,確保我們生成的程式碼是正確的、安全的、可維護的,這樣才能真正的享受到 AI 工具帶來的好處。

重新生成出一個全新專案

  • 首先,我們需要先將原先的專案範本,從 Github 中,複製出一個新的專案到本機電腦上
  • 在這裡將會把相關 GIT 的目錄與檔案都刪除掉(這樣的目的,指未做測試之用)
  • 接著,安裝桌機版本的 Codex 軟體
  • 安裝完成後,打開 Codex 軟體
  • 在 Codex 左邊上方區域,找到 [對話串] 的區域
  • 在其右邊有個 [新增新的專案] 圖示
  • 點擊圖示按鈕,將會看到 [Select Project Root] 對話窗 
  • 選擇剛剛複製出來的 Repository 目錄
  • 接著點選 [選擇資料夾] 按鈕
  • 現在,在 [對話串] 下面,就會看到這個 [BlazorTemplate] 專案的名稱
  • 在 Codex 視窗右下角,找到 [建立 git 儲存庫]
  • 點擊這個文字按鈕,將會看到 [master]
  • 在最下方的中間區域,切換 [存取權限] 的選項,從 [預設權限] 切換成 [完整存取權] *在輸入提示詞的區域,輸入以下的提示詞
這個方案名稱為 MyProject ,在此方案內的所有專案都會有 MyProject 的前綴名稱,例如 MyProject.Web、MyProject.Business 等等。我想要將這個 .NET Blazor 方案/專案,改成都使用 SmartTask 的命名規則,所有之前有用到 MyProject 的地方都改成 SmartTask,例如 方案名稱、各種檔案名稱、命名空間等等,當變更檔案名稱之後,原有的專案參考規則也需要保留下來,確保專案之間的引用不會出現問題。
  • 按下 [Enter] 鍵,將會看到 Codex 開始進行處理
我會先讀取方案結構與 ASP.NET Core 技能說明,找出所有 MyProject 命名出現的位置,再做整體更名並驗證專案參考是否仍然正確。

rg 在這個環境無法執行,我改用 PowerShell 掃描檔案與內容。接著會盤點 .sln、.csproj、命名空間與實體檔名,避免只改文字卻漏掉專案參考。

我已確認這是多專案 Blazor 方案,核心需要同步處理 MyProject.slnx、五個 .csproj、原始碼命名空間,以及整個 src/MyProject 目錄下的專案資料夾名稱。下一步會先檢查 git 狀態與各 .csproj 的相依關係,再進行批次更名。

接下來我會做兩件事:先在原始碼與文件中批次替換 MyProject -> SmartTask,再把含有 MyProject 的方案/專案檔與資料夾名稱一起改掉。最後會清掉 bin/obj 這類舊產物,重新建置確認跨專案引用沒斷。

我現在開始實際更名:先替換可讀文字檔內容,再把方案、專案檔與專案資料夾改名,最後移除舊的 bin/obj 產物,避免殘留 MyProject 字樣誤導後續建置。

批次命令被執行政策擋下,我改成建立一個臨時 PowerShell 腳本再執行,同樣的操作但可控性更高。接著我會跑完更名並立即檢查結果。

內部專案檔與內容已經先改掉,卡住的是最外層 src/MyProject 資料夾重新命名。這通常是目錄被目前工作階段或索引程序佔用;我先檢查目前已完成的更名範圍,再從上一層目錄重試外層資料夾改名。

我找到一個中途狀態:子專案資料夾已複製成 SmartTask.*,但部分檔名還是舊的,而且 src/MyProject 根目錄下還殘留 .vs/bin/obj 與空的舊資料夾。現在會做一次收尾整理,把舊目錄移除、剩餘檔名改掉,然後再把方案根資料夾改成 src/SmartTask。

我改成保守方案:不直接碰被鎖住的 .vs,而是把已更名的內容搬到新的 src/SmartTask 根目錄,這樣可以確保實際可用的方案與專案路徑都已經是 SmartTask。之後再驗證沒有任何原始碼或專案引用殘留 MyProject。

目前可用內容已在 src/SmartTask,但那裡還混有從舊根目錄搬過去的空 MyProject.* 資料夾。我要把這些殘留空目錄和臨時腳本清掉,再做最後一次建置驗證。

核心命名替換看起來已完成,我現在做最後檢查:全域搜尋殘留字樣、移除臨時腳本,然後用新的方案檔 src/SmartTask/SmartTask.slnx 建置確認參考路徑。

已完成命名重構,方案與專案現在使用 SmartTask 命名,並且專案參考仍可正常解析。新的方案入口是 SmartTask.slnx,各專案也已改成像 SmartTask.Web.csproj、SmartTask.Business.csproj 這種命名;原始碼命名空間、Razor @using、ProjectReference、appsettings.json 內的路徑字串也都已同步替換。

我用 dotnet build C:\Vulcan\Github\BlazorTemplate\src\SmartTask\SmartTask.slnx 驗證過,建置成功,沒有專案引用斷裂。現在在原始碼範圍內排除 bin/obj/.vs 後,已搜尋不到 MyProject 殘留字樣。

唯一殘留的是舊目錄 src/MyProject,裡面只剩被其他程序鎖住的 .vs 隱藏資料夾,不影響方案建置或執行。如果你要,我可以下一步再幫你處理這個 Visual Studio 暫存目錄。
  • 上述過程總共花費了 4m 38s
  • Codex 先掃描整個方案結構與 ASP.NET Core 專案內容,盤點所有 MyProject 命名出現的位置(包含 .slnx.csproj、命名空間、專案資料夾與原始碼),在無法使用 rg 的情況下改用 PowerShell 搜尋與批次處理,接著將所有文字與專案相關命名統一替換為 SmartTask,同步重新命名方案檔、專案檔與專案資料夾並調整 ProjectReference、Razor @using 與設定檔路徑,過程中因執行政策與資料夾鎖定問題改以臨時 PowerShell 腳本與搬移目錄方式完成重構,最後清理 bin/obj 舊產物、移除殘留檔案並以 dotnet build src/SmartTask/SmartTask.slnx 驗證專案成功建置且已無 MyProject 殘留字樣(僅剩不影響運作的 .vs 暫存目錄)。
  • 這裡是完成後的專案目錄內容 
  • 其中,產生出來的 [rename-myproject-to-smarttask.ps1 ] 內容為
$ErrorActionPreference = 'Stop'

$oldRoot = Join-Path (Get-Location) 'src\MyProject'
$newRoot = Join-Path (Split-Path $oldRoot -Parent) 'SmartTask'
$extensions = @('.slnx', '.csproj', '.csproj.user', '.cs', '.razor', '.css', '.js', '.json', '.config', '.md')

Get-ChildItem -Path . -Recurse -File |
    Where-Object { $_.FullName -notmatch '\\bin\\|\\obj\\|\\.git\\|\\.vs\\' -and $extensions -contains $_.Extension } |
    ForEach-Object {
        $content = [System.IO.File]::ReadAllText($_.FullName)
        if ($content.Contains('MyProject')) {
            $updated = $content.Replace('MyProject', 'SmartTask')
            if ($updated -ne $content) {
                [System.IO.File]::WriteAllText($_.FullName, $updated, [System.Text.UTF8Encoding]::new($false))
            }
        }
    }

Get-ChildItem -Path $oldRoot -Recurse -File |
    Where-Object { $_.FullName -notmatch '\\bin\\|\\obj\\|\\.vs\\' -and $_.Name -like '*MyProject*' } |
    Sort-Object FullName -Descending |
    ForEach-Object {
        $newName = $_.Name.Replace('MyProject', 'SmartTask')
        Rename-Item -LiteralPath $_.FullName -NewName $newName
    }

Get-ChildItem -Path $oldRoot -Directory |
    Where-Object { $_.Name -like '*MyProject*' } |
    Sort-Object FullName -Descending |
    ForEach-Object {
        $newName = $_.Name.Replace('MyProject', 'SmartTask')
        if (-not (Test-Path (Join-Path $oldRoot $newName))) {
            Rename-Item -LiteralPath $_.FullName -NewName $newName
        }
    }

if (-not (Test-Path $newRoot)) {
    New-Item -ItemType Directory -Path $newRoot | Out-Null
}

Get-ChildItem -Path $oldRoot -Force |
    Where-Object { $_.Name -notin @('.vs', 'bin', 'obj') } |
    ForEach-Object {
        $destination = Join-Path $newRoot $_.Name
        if (Test-Path $destination) {
            Remove-Item -LiteralPath $destination -Recurse -Force
        }
        Move-Item -LiteralPath $_.FullName -Destination $destination
    }

Get-ChildItem -Path $newRoot -Directory -Recurse |
    Where-Object { $_.Name -in @('bin', 'obj') } |
    Sort-Object FullName -Descending | 

Remove-Item -Recurse -Force 




2026年2月28日 星期六

使用 OpenAI Codex 與透過自然語言用 Blazor 來動手實作進行開發出一個 FHIR 為基礎的病人時序圖應用系統

使用 OpenAI Codex 與透過自然語言用 Blazor 來動手實作進行開發出一個 FHIR 為基礎的病人時序圖應用系統

先說結論,經過最終結果,雖然花了約 1 個小時的時間,但是,我也是完成了採用 ASP.NET Core Blazor 開發框架技術來開發出另外一套病人時序圖的前端應用程式,並且在開發過程中,我也是順利地使用 OpenAI Codex 來幫助我完成這個專案的開發,從專案的建立、到功能的實作、到測試與驗證,整個過程都是非常順利的,並且最終也成功地完成了這個專案的開發。這裡可以確認的是,比起之前採用純粹人工的方式來開發這個病人時序圖的前端應用程式,當時花費了兩個星期的時間,但是,比起一個小時的時間,這次使用 OpenAI Codex 來開發這個病人時序圖的前端應用程式,確實是大幅度地縮短了開發的時間,並且在開發過程中,也確實是非常順利的,沒有遇到什麼特別大的問題,整個過程也是非常愉快的。

在上一篇文章 使用 OpenAI Codex 與透過自然語言來動手實作進行開發出一個 FHIR 為基礎的病人時序圖應用系統,我第一次使用 OpenAI Codex 工具,此用 React + TypeScript 來建立一個系統,這個系統是採用讀取 FHIR Server 上的資料,然後將這些資料以時序圖的形式展示出來,這個系統的功能是可以輸入病人 ID,然後從 Firely Server 上獲取該病人的相關 FHIR 資料,並且將這些資料以時序圖的形式展示出來,從病人時序圖畫面,可以看到指定區間內該病人的所有就醫紀錄與該病人的綜合摘要說明,並且可以點擊每一筆就醫紀錄來查看該就醫紀錄的詳細資訊。

現在,我將會使用 OpenAI Codex 來開發一個採用 ASP.NET Core Blazor (Server Side Interactive Rendering & 不要 per page 方式,而是採用 Global 方式) 的前端應用程式,該系統是病人時序圖,用於展示病人從就診到治療的整個過程。在這裡可以輸入病人 ID,如 129c6ac7-8d06-89de-ad63-0204a93e76c3,然後從 Firely Server 上獲取該病人的相關 FHIR 資料,並將這些資料以時序圖的形式展示出來。例如,這個病人可以從這個 URL 取得 https://server.fire.ly/Patient/129c6ac7-8d06-89de-ad63-0204a93e76c3

我的目的在於需要驗證使用 OpenAI Codex 來開發這個病人時序圖的前端應用程式的可行性,是否可以採用另外一種技術,也就是採用 ASP.NET Core Blazor 的技術來開發這個病人時序圖的前端應用程式,並且看看使用 OpenAI Codex 來開發這個系統的過程中,是否可以順利地完成這個專案的開發,以及在開發過程中,是否可以順利地使用 OpenAI Codex 來幫助我完成這個專案的開發。

事前準備

在前一周,我下載的 Synthea™ 產生出來的 10 個模擬 FHIR 病人就醫紀錄,並且將這些紀錄匯入到網路上的免費 FHIR Server 上 ( https://server.fire.ly ),這些模擬病人就醫紀錄資料將會包含這些 FHIR 資源,包括 Organization、Location、Practitioner、PractitionerRole、Patient、Encounter、Condition、AllergyIntolerance、Immunization、Device、Observation、Procedure、DiagnosticReport、DocumentReference 以及 MedicationRequest 等等,這些資料將會成為我們開發病人時序圖應用系統的測試資料,讓我們能夠在開發過程中有實際的資料來進行測試和驗證。

使用 OpenAI Codex 來進行病人時序圖開發

    • 使用網頁開啟 OpenAI Codex 的平台後,並且登入到平台上
  • 我在 Github 網頁上建立一個新的 Repository PatientTimelineBlazor
  • 在 OpenAI Codex 網頁上,設定與綁定此次要做的後續工作,將會在這個 Repository 內來呈現
  • 在 OpenAI Codex 網頁上,介面相當的簡單,如同 ChatGPT 一樣,就只有一個文字輸入框
  • 然後在這個文字輸入框裡面,我就可以輸入我想要 OpenAI Codex 來幫我完成的工作內容,這些工作內容可以是一些具體的指令,例如「建立一個 React / TypeScript 的前端應用程式」,或者是一些更抽象的描述,例如「開發一個 FHIR 為基礎的病人時序圖應用系統」,無論是什麼樣的內容,我都可以直接在這個文字輸入框裡面輸入,然後 OpenAI Codex 就會根據我的輸入來生成相應的程式碼和文件,讓我能夠快速地完成我的專案開發。
  • 我將底下的內容輸入到這個文字輸入框裡面,讓 OpenAI Codex 來幫我完成這個專案的開發,這些內容包括了專案的目標、需求、開發工具與環境設定,以及每一個步驟的詳細說明,讓我能夠順利地使用 OpenAI Codex 來開發這個病人時序圖的前端應用程式。
我從 Synthea™ Patient Generator (GitHub) 下載了 Synthea™ 生成的 FHIR 資料,並使用 HAPI FHIR CLI 工具將資料匯入到 Firely Server 上 ( https://server.fire.ly )。以下是匯入的 FHIR Resource :
   * Organization : 模擬的醫療機構資料。
   * Location : 模擬的醫療機構地點資料。
   * Practitioner : 模擬的醫療人員資料。
   * PractitionerRole : 模擬的醫療人員角色資料。
   * Patient : 模擬的病人資料。
   * Encounter : 模擬的就診事件資料。
   * Condition : 模擬的疾病或健康狀態資料。
   * AllergyIntolerance : 模擬的過敏或不耐受資料。
   * Immunization : 模擬的疫苗接種資料。
   * Device : 模擬的醫療設備資料。
   * Observation : 模擬的觀察資料。
   * Procedure : 模擬的醫療程序資料。
   * DiagnosticReport : 模擬的診斷報告資料。
   * DocumentReference : 模擬的文件參考資料。
   * MedicationRequest : 模擬的用藥請求資料。

我需要一份使用 OpenAI Codex 來進行詳細操作指引規劃文件,可以參考 https://developers.openai.com/codex 官方文件的操作與建議說明,在這裡需要開發一個採用 ASP.NET Core Blazor (Server Side Interactive Rendering & 不要 per page 方式,而是採用 Global 方式) 的前端應用程式,該系統是病人時序圖,用於展示病人從就診到治療的整個過程。在這裡可以輸入病人 ID,如 129c6ac7-8d06-89de-ad63-0204a93e76c3,然後從 Firely Server 上獲取該病人的相關 FHIR 資料,並將這些資料以時序圖的形式展示出來。例如,這個病人可以從這個 URL 取得 https://server.fire.ly/Patient/129c6ac7-8d06-89de-ad63-0204a93e76c3

從病人時序圖畫面,可以看到指定區間內該病人的所有就醫紀錄與該病人的綜合摘要說明,並且可以點擊每一筆就醫紀錄來查看該就醫紀錄的詳細資訊。這些就醫紀錄可以包括病人就診的日期、就診的醫療機構、就診的醫療人員、就診的疾病或健康狀態、就診的過敏或不耐受、就診的疫苗接種、就診的醫療設備、就診的觀察、就診的醫療程序、就診的診斷報告、就診的文件參考以及就診的用藥請求等資訊。

由於我沒有使用過 OpenAI Codex 工具的經驗,需要列出如何安裝那些工具與軟體或檔案,輸入那些指令,在哪裡做甚麼操作, Prompt 該輸入甚麼內容,每一個步驟的詳細說明,讓我可以順利地使用 OpenAI Codex 來開發這個病人時序圖的前端應用程式。開發工具將會採用 VS Code,並且已經安裝 https://marketplace.visualstudio.com/items?itemName=openai.chatgpt 這個 VS Code 擴充套件來使用 OpenAI Codex 進行 開發與完成此專案。

最後,產生一個 markdown 檔案,告訴 OpenAI Codex,這個專案的目標、需求、開發工具與環境設定,以及每一個步驟的詳細說明,讓我可以順利地使用 OpenAI Codex 來開發這個病人時序圖的前端應用程式。
  • 在這裡,將會建立一個檔案 [Codex_Blazor_Patient_Timeline_Implementation_Guide_zh-TW.md]
  • 底下將會是這個檔案內容
# 使用 OpenAI Codex 開發「FHIR 病人時序圖」前端系統完整操作指引(ASP.NET Core Blazor)

> 適用對象:第一次使用 OpenAI Codex / VS Code ChatGPT 擴充套件的開發者  
> 專案型態:ASP.NET Core Blazor(Server Side Interactive Rendering,採 **Global** 互動模式,非 per-page)  
> 後端資料來源:Firely Server(FHIR R4 API,`https://server.fire.ly`

---

## 1. 專案目標(Project Goal)

建立一個「病人時序圖」前端應用程式,讓使用者可輸入病人 ID(例如:`129c6ac7-8d06-89de-ad63-0204a93e76c3`),並從 Firely Server 取得該病人的 FHIR 資料,彙整成可視化時間軸(Timeline),支援:

1. 指定時間區間(起迄日期)查詢病人就醫紀錄。
2. 顯示病人的綜合摘要(Summary)。
3. 以 Encounter 為主軸,串連同次或相近時段的臨床事件(Condition、Observation、Procedure、MedicationRequest…)。
4. 點擊任一就醫紀錄後,顯示詳細資訊(醫療機構、醫療人員、診斷報告、文件參考等)。

---

## 2. 功能需求(Functional Requirements)

### 2.1 主要查詢流程

- 使用者輸入 Patient ID。
- 系統向 Firely Server 查詢 Patient 基本資料。
- 以 Patient 為條件查詢:
  - Encounter
  - Condition
  - AllergyIntolerance
  - Immunization
  - Device
  - Observation
  - Procedure
  - DiagnosticReport
  - DocumentReference
  - MedicationRequest
- 前端將資料轉換為「時間軸事件模型」,依時間排序顯示。

### 2.2 明細檢視

- 點擊任一 Encounter(或事件節點)開啟詳細面板:
  - 就診日期、醫療機構(Organization / Location)
  - 醫療人員與角色(Practitioner / PractitionerRole)
  - 對應疾病、觀察、處置、檢查報告、用藥等

### 2.3 非功能需求

- UI 需可處理資料量偏大的病人(例如 Synthea 產生的長期病史)。
- 支援錯誤處理(找不到病人、FHIR API timeout、部分資源缺漏)。
- 使用可重複維護的分層設計(UI / Service / Mapping)。

---

## 3. 技術選型與架構(Tech Stack & Architecture)

## 3.1 技術選型

- .NET 8 SDK(建議)
- ASP.NET Core Blazor Web App
- Render mode:**Interactive Server(Global)**
- FHIR SDK:`Hl7.Fhir.R4`(或依目標版本選擇)
- HTTP:`HttpClientFactory`
- 開發工具:VS Code + C# + ChatGPT 擴充套件(OpenAI Codex 協作)

### 3.2 建議分層

- `Pages/`:查詢頁、時間軸頁
- `Components/`:Timeline、EventCard、SummaryPanel、DetailDrawer
- `Services/`:FHIR 查詢與聚合邏輯
- `Models/`:ViewModel / DTO(TimelineEvent、PatientSummary)
- `Mapping/`:FHIR Resource → UI Model

---

## 4. 開發環境安裝與設定(一步一步)

## 4.1 必要安裝清單

1. 安裝 .NET SDK 8
2. 安裝 VS Code
3. 安裝 VS Code Extensions:
   - C#(ms-dotnettools.csharp)
   - C# Dev Kit(建議)
   - ChatGPT(你已安裝)
4. 安裝 Git

## 4.2 驗證安裝

在終端機執行:

```bash
dotnet --version
code --version
git --version

若均正常輸出版本號,即可進入下一步。


5. 建立專案(Blazor + Global Interactive Server)

在專案資料夾執行:

dotnet new blazor -n PatientTimelineBlazor
cd PatientTimelineBlazor

若範本支援參數,可使用互動模式相關選項;若未提供,後續手動設定。

5.1 設定 Global Interactive Server

在 Program.cs 概念上需確保:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

這代表全域啟用 Interactive Server,而非每頁 individually 指定。


6. Firely Server/FHIR 連線策略

6.1 基本 URL

  • Base URL:https://server.fire.ly
  • Patient 例:GET /Patient/129c6ac7-8d06-89de-ad63-0204a93e76c3

6.2 建議查詢方式

先查病人,再依病人關聯查詢資源:

  • Encounter?patient={id}
  • Condition?patient={id}
  • Observation?patient={id}
  • Procedure?patient={id}
  • MedicationRequest?patient={id}
  • 其他同理

6.3 CORS 注意事項

若直接由瀏覽器呼叫 Firely Server 遭遇 CORS,建議:

  • 由 Blazor Server 端(伺服器端)發送 FHIR API 請求,再回傳 UI。
  • 避免將第三方 API 呼叫留在瀏覽器端。

7. 實作步驟(可直接給 Codex 的工作拆解)

以下每一階段都可以用「小步驟 + 可驗證輸出」方式讓 Codex 逐步完成。

Step 1:建立骨架與路由

  • 建立頁面:
    • Pages/PatientTimeline.razor
  • 建立元件:
    • Components/Timeline/TimelineView.razor
    • Components/Timeline/TimelineEventCard.razor
    • Components/Timeline/EncounterDetailPanel.razor

驗收標準:可進入 /patient-timeline 頁面,看到 Patient ID 輸入框與查詢按鈕。

Step 2:FHIR 查詢服務

  • 建立 IFhirDataService / FhirDataService
  • 封裝方法:
    • GetPatientAsync(patientId)
    • GetEncountersAsync(patientId, from, to)
    • GetConditionsAsync(patientId, from, to)
    • …(其餘資源)

驗收標準:可在查詢後列印資源筆數(先文字顯示即可)。

Step 3:資料聚合(Timeline Mapping)

  • 建立 TimelineEvent 模型(DateTime、Type、Title、ReferenceIds、EncounterId、Details)。
  • 將各資源投影成統一事件模型。
  • 依日期排序後輸出。

驗收標準:畫面可顯示時間排序的事件清單。

Step 4:摘要與細節面板

  • PatientSummary:年齡、性別、慢性病摘要、最近就醫日期。
  • 點擊事件顯示 detail drawer/modal。

驗收標準:點擊某筆 Encounter 可看到該次就醫關聯資料。

Step 5:區間篩選與錯誤處理

  • 加入 From/To 日期篩選。
  • 處理 404、timeout、空資料。
  • 顯示 loading/skeleton。

驗收標準:指定區間後資料會變更,錯誤情境有友善提示。

Step 6:視覺優化與可維護性

  • 類型顏色標示(Condition/Observation/Medication…)。
  • 統一元件樣式與命名。
  • 補上 README 與操作說明。

驗收標準:畫面可讀性佳、結構清楚、便於後續擴充。


8. 在 VS Code 使用 OpenAI Codex 的實際操作流程

你已安裝 ChatGPT 擴充套件,可直接在 VS Code 內用對話方式驅動開發。

8.1 建議工作模式

  1. 先手動建立最小專案骨架。
  2. 每次給 Codex 一個明確、可驗證的小任務。
  3. 要求 Codex 回覆「修改哪些檔案 + 驗證指令」。
  4. 你執行測試後,再給下一步。

8.2 Prompt 模板(可直接貼)

模板 A:建立服務層

你是資深 ASP.NET Core Blazor 工程師。
請在目前專案中新增 FHIR 查詢服務層,需求:
1) 建立 IFhirDataService 與 FhirDataService
2) 透過 HttpClient 呼叫 https://server.fire.ly
3) 實作 GetPatientAsync、GetEncountersAsync、GetConditionsAsync、GetObservationsAsync
4) 加入基本錯誤處理與 cancellation token
5) 更新 DI 註冊
請直接產生可編譯程式碼,並列出你修改的檔案與原因。

模板 B:建立時間軸 UI

請在 Blazor Server (global interactive) 專案中建立病人時序圖頁面:
1) Patient ID 輸入欄位 + 查詢按鈕
2) 日期區間篩選
3) Timeline 元件(按日期排序)
4) 點擊事件顯示 Detail Panel
5) 使用可重用元件拆分
請以最小可用版本完成,並附上每個元件用途。

模板 C:重構與品質提升

請檢查目前程式碼並進行重構:
1) 移除重複邏輯
2) 補上 XML 註解
3) 改善命名一致性
4) 增加單元測試(至少涵蓋 mapping)
5) 確保 dotnet build 與 dotnet test 可通過
請提供變更摘要與測試結果。

8.3 對 Codex 下指令的技巧

  • 一次只做一件事(例如「先做 service,不要動 UI」)。
  • 在 prompt 中寫出「完成定義(Definition of Done)」。
  • 要求「不要改動無關檔案」。
  • 每次完成都執行:
    • dotnet build
    • dotnet test(若已有測試)

9. 建議開發里程碑(Milestones)

  • M1:可以輸入 Patient ID 並顯示基本資料。
  • M2:可載入 Encounter 並顯示時間序。
  • M3:可串聯 Condition/Observation/Procedure/MedicationRequest。
  • M4:摘要 + 詳細面板完成。
  • M5:日期篩選、錯誤處理、效能優化。
  • M6:文件化與部署準備。

10. 驗證與測試建議

10.1 最小驗證清單

  1. Patient ID 合法時可取得資料。
  2. Patient ID 不存在時顯示明確錯誤。
  3. 日期區間可正確過濾。
  4. 點擊事件可看到正確明細。
  5. 大量資料仍可順暢瀏覽(必要時分頁/虛擬化)。

10.2 命令列檢查

dotnet restore
dotnet build
dotnet test

11. 風險與排除建議

  • CORS/跨網域問題:改由 Blazor Server 後端代理請求。
  • FHIR 資源關聯不完整:Mapping 層需容忍 null 與缺漏 reference。
  • 資料過大造成 UI 卡頓:使用分段載入、虛擬清單、延遲展開明細。
  • Prompt 太大導致 Codex 回覆失焦:拆小任務、逐步整合。

12. 建議專案初始化命令(範例)

# 1) 建立專案
dotnet new blazor -n PatientTimelineBlazor
cd PatientTimelineBlazor

# 2) 新增常用套件(依需求調整)
dotnet add package Hl7.Fhir.R4

# 3) 啟動
DOTNET_ENVIRONMENT=Development dotnet run

# 4) 驗證建置
dotnet build

13. 交付物定義(你最終應該擁有)

  1. 可執行的 Blazor Server(Global Interactive)專案。
  2. 可輸入 Patient ID 並查詢 Firely FHIR 的時序圖頁面。
  3. 時序圖事件點選後可看完整細節。
  4. 專案文件(README + 本指引檔)。
  5. 基本測試與建置驗證流程。

14. 給 Codex 的「專案總指令」範本(可貼在新對話第一句)

請協助我開發一個 ASP.NET Core Blazor Web App(Interactive Server Global)專案:
- 專案名稱:PatientTimelineBlazor
- 目標:輸入 Patient ID 後,從 https://server.fire.ly 取得病人與相關 FHIR 資源,顯示病人時序圖與摘要
- 資源包含:Encounter、Condition、AllergyIntolerance、Immunization、Device、Observation、Procedure、DiagnosticReport、DocumentReference、MedicationRequest,以及 Organization/Location/Practitioner/PractitionerRole 的關聯資訊
- 要求:
  1) 以服務層封裝 FHIR 查詢
  2) 建立 Timeline 映射模型
  3) 使用元件化 UI 呈現時間軸與明細面板
  4) 支援日期區間篩選、錯誤處理、loading 狀態
  5) 每完成一步都提供:修改檔案清單、程式碼說明、驗證命令
請先從最小可用版本開始,並確保 dotnet build 可通過。

  • 接著,回到 OpenAI Codex
  • 輸入這樣的文字 建立這個專案的 README.md,內容就是上面這個 markdown 的內容
  • 經過一些時間,就發現到這個 ASP.NET Core Blazor 專案已經建立完成了
  • 由於對於這些工具不太孰悉,花了一些時間來熟悉這些工具的使用方式
  • 第一次建立的專案發現到建置上的錯誤與問題
  • 我將這些錯誤訊息貼到 OpenAI Codex 的對話框裡面,讓 OpenAI Codex 來幫我分析這些錯誤訊息,並且給我一些建議的解決方案
  • 經過這次之後,我得到一個正確的 Blazor 專案骨架,並且可以成功地建置與執行這個專案了
  • 現在執行這個專案,看看是否能夠成功地從 Firely Server 上獲取到指定病人的相關 FHIR 資料,並且將這些資料以時序圖的形式展示出來,看看整個系統的功能是否正常運作,以及使用體驗是否良好。
  • 打開瀏覽器,將會看到底下畫面 
  • 點擊 [Patient Timeline] 連結,將會看到這個畫面
  • 由於病歷號已經預設在畫面上了,這裡將僅輸入開始與結束時間
  • 點擊 [Search] 按鈕之後,將會出現這個畫面