北護大／FHIR 開發簡介與應用
•Télécharger en tant que PPTX, PDF•
1 j'aime•2,888 vues
【適用於 FHIR R4 版本】 簡介 FHIR 資料結構，使用 Postman 測試 API 並且實作臨床檢驗資料與病人資料登錄表單／管理系統。 本著作係採用創用 CC 姓名標示-相同方式分享 4.0 國際 授權條款授權， （授權網址：https://creativecommons.org/licenses/by-sa/4.0/deed.zh_TW） 歡迎多加參考與利用。
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à 北護大／FHIR 開發簡介與應用
Similaire à 北護大／FHIR 開發簡介與應用 (20)
北護大／FHIR 開發簡介與應用
- 1. FHIR 開發簡介與應用 簡介如何使用 FHIR，並配合網頁表單進行臨床應用程式開發 Lorex L. Yang（楊宇凡）<ceo@sita.tech> Dec 5, 2019／北護大／FHIR 數據應用工作坊
- 2. About myself • Backend developer / node.js developer • Linux server administration • Proxmox VE / Docker • Web hosting service • Open source lover • 矽塔資訊服務有限公司 | 執行長 • 雪歐有限公司 | 技術長 • 高嘉國際餐飲股份有限公司 | 系統工程師 • 宇宙新幹線科技有限公司 | 系統工程師 • Lionfree 獅子的免費虛擬主機 | 共同創辦人
- 3. 這節議程要來跟大家聊聊 FHIR 所規範的 資料格式／型態 如何使用工具 與 FHIR SERVER 互動 如何透過 REST API 存取 FHIR SERVER 寫出一個簡單的病人／ 檢驗報告管理小工具
- 4. 這節議程將不會解釋 FHIR 用途 但是會以資訊人員的角度切入 探討如何實作出符合 FHIR 標準的應用程式
- 5. 免責聲明
- 6. 因為等等會有一些 Live Demo 不小心 NG 的話請別笑我QQ …真的想笑的話，請小聲點 (噓
- 7. 歡迎發問、回答 ヽ( ° ▽°)ノ
- 9. FHIR 結構概觀
- 10. FHIR 結構 • 對醫療人員／醫學系學生來說， FHIR 是一種描述醫療資源／行為／數據／流程…etc 的方法 • 對開發人員／醫資or醫工系學生來說， 我們熟悉的 FHIR 事實上是一堆 Data Structure • 每一個醫療資源／行為／數據／流程…etc 都是一個 Resource • 依照不同的分類，FHIR 將幾個 Resource 組成一支 Module 方便檢視
- 11. Data Structure? Data Format? Data Type? • 所謂的 Data Structure（資料結構），是對一組資料組成的定義 • 而 Data Format（資料格式），則是表達這組資料的方法（例如 XML、JSON 等） • 一個 Data Structure 可以用許多不同的 Data Format 所表示 • 一個 Resource 只有一種 Structure，但是支援多種 Data Format • 在開發實務上，並不需要認識所有的 Data Format，僅需挑一種來用即可 • 至於 Data Type（資料型態），則是定義一項資料值的類型（例如 Number、 String、Time…etc）
- 12. Data Type
- 13. Data Type 四大類 • Simple / Primitive Types 大多是常見且格式定義明確的資料型態 例如 integer 是 “整數”、date 是 “日期”，兩者都有既定的格式 • Complex / General-Purpose Data types 顧名思義比較複雜，大多由數個型態為 Primitive Type 的元素組成 一個 Complex Type 內，甚至可以由其他 Complex Type 構成 • Metadata Types 拿來存放 metadata 的資料型態，大多在 R4 版本仍為 Trial Use 階段 • Special Purpose Data types 規範用於其他地方的資料型態 例如 Reference 為指向到另一筆資料的參照，Extension 為本地化／客製化資料
- 14. 如果有寫過 PostgreSQL 的話 Primitive Types 像 Default Data Types Complex Types 像 User Defined Types
- 16. 另外還有一個 Reference 就是剛剛看到的 Special Purpose Data Type
- 17. Reference 是對應到其他 Resource 的參照 可以透過 ID 與其他 Resource 對應在一起 （基本上就是 Foreign Key 的概念）
- 20. 網站有提供範例，可以直接開來看
- 21. 每個 Resource 都有一個 Structure 有學過 DB 的話，直接看 UML 比較快
- 23. 使用工具與 FHIR Server 互動
- 24. FHIR Server • 考量到現場環境，當場下載並開一個 HAPI FHIR Server 並不是建議的選項 以下是幾個推薦的公開測試伺服器： • 臺灣公開測試伺服器（推薦使用） 站點在國內，速度快，並支援 SSL 安全加密連線 https://hapi.fhir.tw/ • UHN 公開測試伺服器 為 HAPI FHIR 開發組織 UHN 提供的測試伺服器 http://hapi.fhir.org/ • 其他伺服器列表，請參考： https://wiki.hl7.org/index.php?title=Publicly_Available_FHIR_Servers_for_testing
- 25. REST API 使用方法 <Method> <baseURL>/<resource>/[id]{?options} HTTP 方法 網址 目標 resource id 選 項
- 26. 看不懂嗎？套個範例 GET https://hapi.fhir.tw/baseDstu3/Observation/41123?_summary=true HTTP Method BaseURL Resource OptionsId
- 27. 透過 Postman 與 FHIR Server 互動
- 30. 開始來玩玩看
- 31. 取得所有 Patient 資料 GET https://hapi.fhir.tw/fhir/Patient
- 32. 取得單一 Patient 資料 GET https://hapi.fhir.tw/fhir/Patient/1
- 33. 新增一筆 Patient 資料 • POST https://hapi.fhir.tw/fhir/Patient • Payload 如右
- 34. 編輯剛剛的 Patient 資料 • PUT https://hapi.fhir.tw/fhir/Patient • Payload 如右
- 35. 刪除剛剛新增的 Patient 資料 DELETE https://hapi.fhir.tw/fhir/Patient/265
- 36. 組織臨床資料，並寫入 FHIR Server 內 以 Patient 為例
- 37. 範例病人資料 • 姓名：王大明 • 性別：男 • 連絡電話：0912-345-678 • 聯絡地址：高雄市小港區大馬路999號 • 資料有效狀態：YES • 生日：84/01/01
- 38. 組織資料步驟 • 判定、或取得各欄位所屬的 Resource 與 Field Name，並建一張表對應 原始欄位 原始資料 對應欄位 資料格式 姓名 王大明 Patient.name HumanName 性別 男 Patient.gender code (male | female | other | unknown) 連絡電話 0912-345-678 Patient.telecom ContactPoint 聯絡地址 高雄市小港區大馬路999號 Patient.address Address 資料有效狀態 Yes Patient.active boolean 生日 84/01/01 Patient.birthDate date
- 39. 組織資料步驟 • 以 JSON 為例，去組織資料，暫時先不要理 Complex Type 的欄位 （紅色字體為 Complex Type 欄位，因為還沒完成所以顯示 JSON 格式不正確）
- 40. 組織資料步驟 • 確認 Complex Type 內的格式內容，然後依次展開後填入
- 41. 寫入資料 • POST https://hapi.fhir.tw/fhir/Patient • Body 資料如右 • 執行結果如下
- 44. 注意事項 • 考量到時間問題，因此以最簡單的 HTML + JavaScript + jQuery 進行實作 • 因為 Code 有點多，在這邊將會就實作架構進行簡介，有興趣的話可以把整個 Repository 抓回去慢慢讀 • 本 Demo 程式僅供參考，實務上的開發會比這個複雜的多 • 所有 Code 都可以在這裡找到，議程一開始提供的資源列表裡面也有： https://gitlab.sita.tech/medic/fhir-training-example
- 45. 開發環境 • 選一個喜歡的文字編輯器 用來寫程式碼，可以是文字編輯器、也可以是 IDE 推薦使用 Visual Studio Code 帶有正體中文界面，並且易於使用（記得安裝 Live Server 擴充元件） • 選一個喜歡的瀏覽器 推薦使用 Mozilla Firefox，或是 Google Chrome 以上兩者都具有非常優良的偵錯工具，可以在開發階段協助 Debug 不建議使用 Internet Explorer，你會踩雷踩到懷疑人生。真的堅持要用的話，請出去(誤) • 準備一台 FHIR Server 可以自己建，也可以使用 HAPI FHIR CLI 搭建臨時環境 網路上也有很多公開的測試伺服器 • 安裝 Git 用來把教學用的範例 Code 抓下來讀或修改 大家都在用的版本控制工具，可以針對你的 Code 進行版本控制
- 46. Features • Patient 管理 可以查看所有 Patient 的摘要資料清單 可以新增單筆 Patient 資料 在 Patient 清單上，可以點進去查看該筆 Patient 的詳細資料 • Observation 管理 可以查看所有 Observation 的摘要資料清單 可以新增單筆 Observation 資料 可以在 Patient 的詳細資料頁面中，看到與該 Patient 關聯的 Observation
- 47. 檔案結構 • index.html：網站進入點 • css 資料夾：存放 Bootstrap CSS 檔案 • js 資料夾：存放各式 js 檔案 Bootstrap JS Popper.js jQuery • js-fhir 資料夾：本次實作寫的 script init.js：初始化設定、動作 config.js：設定檔 getXXX.js：取得單筆資料 listXXX.js：列出該 Resource 的資料清單 uploadXXX.js：顯示並上傳表單
- 49. 用 Fetch 來抓／丟資料 然後交給 jQuery 做 DOM 操作 並且把資料 Render 出來
- 50. 撈資料與上傳資料 • 以前在前端使用 XMLHttpRequest（XHR）進行實作 傳統的 XHR 寫起來很麻煩，Code 也醜不拉機的 基於 Event 的異步模型寫起來並沒有現代的 Promise、async/await 來的友好 • 現在通常改用 Fetch 來實作 基於標準的 Promise 進行設計 支援 async/await，搭配 ES6 的 Arrow Function 寫起來可以更簡潔美觀 語法簡潔、並且更加語意化，Code 可讀性高 符合關注分離，不將輸入、輸出等混雜在同一個 Object 裡 • 還是不懂？ Fetch 寫起來比較簡潔、比較好學！學他就對了！
- 51. XHR vs Fetch XHR Fetch
- 53. DOM 操作 • 點擊按鈕後，需要動態呈現表單 • 抓到資料後，需要動態產生表格、資料內容 （動態產生 DOM 元素） • 通常以原生 JS 操作 DOM、或透過 jQuery 進行操作 原生 JS 執行速度較快，缺點是 Code 比較長、實作相對麻煩 jQuery 語法較簡潔，學習門檻較低，功能強大
- 54. 範例程式碼中常用的 jQuery 操作 • 透過 element id 選取 DOM 元素 let content = $('#content'); • 清空該 DOM 元素下所有節點 content.empty(); • 將新的 DOM 元素附加在目前的 DOM 元素底下（從尾端插入） content.append(html); • 將新的 DOM 元素附加在目前的 DOM 元素底下（從前端插入） content.prepend(html); • 刪除選取的 DOM 元素 content.remove();
- 56. 列出資料清單 listPatient.js / listObservation.js 清空畫面並顯示 Loading 資訊 使用 Fetch 撈資料 建立表格標題 遍歷陣列 並動態新增資料至表格中 判斷是否有下一頁 然後顯示下一頁按紐
- 58. 上傳資料－送出表單資料 uploadPatient.js / uploadObservation.js 清除警告訊息 檢查資料 有漏填或填錯的就顯示警告訊息 組織 FHIR 規範的資料結構 使用 Fetch 送資料給 FHIR Server 並顯示回傳結果
- 59. 顯示資料細項 getPatient.js / getObservation.js 清空畫面並顯示 Loading 資訊 使用 Fetch 撈資料 顯示資料內容
- 60. 畫面展示
- 62. 既然都支援 REST 了，直接串就好 • 創建空資料夾，然後 npm init $ npm init • 安裝 dependencies $ npm i -S axios • 新增 payload.json，先把 payload 寫進去 • 新增 main.js，寫入主程式
- 65. Q&A
- 66. 感謝聆聽