# HTML and JS for FHIR applications
- Web 結合 FHIR 醫資標準可有非常多應用(不限於在健康醫療領域)
- 但知識爆炸(註 A)，要求學員熟悉許多知識，再來發展應用，其進入障礙很高
- 本課程以"用以致學"的方式，先教實作發展 FHIR 前端應用，並簡化所需知能，如下:

### 註 A
-1. 書籍、網路、及 AI 往往提供過多的知識，不一定會用到，也不一定完全正確
-2. 實作及應用過程會碰到許多問題及要求，可在尋求解決方案過程，進一步學相關知能(邊做邊學)。例如 HTML 標籤都是"英文" 可順便了解相關英文詞彙, 又如:從 [HTML canvas](https://hackmd.io/dMF-dDynQeqfv1i5-YW5rw?view) (畫布)學直角坐標繪圖，這比抽象數學具體及有趣許多
3. 教學相長: 已學會的同學，可帶新手學習，讓自己概念更清楚

## FHIR 人員組織
https://chatgpt.com/share/6859f9ad-c20c-8006-a32b-2d34a384baa1
https://chatgpt.com/share/6859fc83-cc58-8006-b0b9-64da5ec5ef04

## 課程大綱
1. 應用需求介紹
2. 從網頁前端到 AI 前端
3. 醫資標準化應用範例介紹

[ 從網頁前端到 AI 前端、到 Web 3.0 、 到 AI 互動合適所有人(含幼兒及長者)之 UXUI 介面是發展趨勢
現行手機及電腦不宜族群:
幼兒: 不識字、不宜過早使用手機及電腦、兒童及長者不友善及
目前還有許多長者不熟電腦(甚至手機)，另外長者視覺、聽覺、協調、認知
請規劃 AI 互動合適所有人(含幼兒及長者)之 UXUI 介面

](https://chatgpt.com/share/685b99fe-97b4-8006-84dc-87407bdcef60)

專案及工讀需求
FHIR 專家 VS IT 專家
FHIR 專家又分兩種: 傳統嚴謹
大家認證之 FHIR 專家

## JS 程式及 HTML

## SD for super junior
- 針對完全不會的學員之系統開發建議
- 發展(修改)及擴充應用建議
- 初學者(或不熟網頁前端人) 若要發展系統，不建議從零開始，發展程式:
-- 學習程式是一個辛苦的過程，網頁程式包含的知識及技術眾多，需耗費許多時間學習，學的內容不一定會用到。
-- 初學者自行發展的應用，往往還經不少修改才能應用
- 建議從範例程式修改擴充。不改變範例程式架構，基於應用需求及情境，了解要改那些內容:
-- **data provider(資料提供)提供輸入介面，輸入後產生及上傳 FHIR JSON 資料**
-- **data consumer(資料調閱) 透過 HTTP 調閱及呈現 FHIR JSON (或其他多媒體) 資料**

## 與 AI 協作快速發展 FHIR 網頁應用

## 體驗範例
1. 請提供"胸腔積液（Pleural Effusion）影像發現之 FHIR observation" JSON 範例
2. 請設計 HTLM + JS 寫在一起的程式，可有輸入介面，紀錄上述 FHIR resources 發現，當按下 HTML button 後，可在網頁中呈現輸入後的 JSON 資料
3. 上傳資料。a.手動上傳 b. AI 產生上傳程式

## 網頁上傳系統步驟開發步驟
1. 確認要上傳的 FHIR resource 及其欄位規格，[參考]()
2. 確認其參考關係，reference to 的resources 須先建立
## 常用的 HTML 標籤
- HTML 標籤非常多，可因應前端排版呈現及輸入需求，學習其常用標籤
- [常用之排版呈現的標籤](https://selflearningsuccess.com/html-tags/)，初學者可學會以下幾個標籤，[其使用說明](https://chatgpt.com/share/78d3f802-b77b-47a3-80cc-d511673b4215)

段落文字<p>
標題<h1>到<h6>
有序清單<ol>
無序清單<ul>
空格<br>

- 初學者可學會以下幾個 HTML input 輸入標籤，[其使用說明](https://chatgpt.com/share/b69722ed-4996-43bb-8907-372aba5df2fa)

輸入單行文字: <input type="text">
多擇: <input type="checkbox">
單選: <input type="radio">
下拉選單: <select>
普通按鈕(通常用來觸發 JavaScript 函式): <input type="button">

- 學員可在開發環境(例如 [VS code](https://hackmd.io/jFpJ3uPySMihW4vqKeQg3w?view#20241-2-FHIR-for-super-junior-agenda))或 [W3School](https://www.w3schools.com/html/) 中試看看
## JSON 資料格式
- [說明連結](https://hackmd.io/D2mj64z6SBSN7LikIzoscA?view)
## 常用之 FHIR resources
- [說明連結](https://hackmd.io/EzLeXI_kQoK474myGTJdcQ)，同學只要了解這些 resources 的用途，如下:
-- Observation: 可記錄各式健康醫療客觀觀察資訊，如生理監測、檢驗、影像發現等資訊
-- Condition: 病人或醫護人員主觀陳述之問題及狀況，含各式身心疾病，以及民眾居家問題狀況
-- Questionnaire and QuestionnaireResponse: 問卷、及問卷回應(針對此問卷某人某次的答題結果)

## 向 AI 提問
- 初步瞭解上述知識後(不粉了解也沒關係，只要照著做)，向 AI 提問(如下問題)，就可產生紀錄各類臨醫資料之 FHIR JSON 範例及其輸入與呈現程式
-- 請提供血糖量測之 FHIR JSON 範例及其說明
-- 請提供輸入上述資料之 HTML 及 JS 程式，以 text input 輸入
-- 請提供向 FHIR server 調閱及呈現某一病人血糖紀錄之 HTML 及 JS 程式，以 無序清單 ul，呈現紀錄時間及量測數值
-- [chatGPT 回應結果](https://chatgpt.com/share/2ce13015-9db8-4e76-a7b6-a48f45a18908)，學員可試看看上述程式可否執行
- 其他產生前端 FHIR 應用之問題範例
-1. 請提供 HTML 及 JS 程式範例，使用 HTML radio, text, button 等 inputs，紀錄姓名、性別、生日、email 等資訊於 FHIR patient JSON 資料當中
-2. 請提供 HTML 及 JS 程式範例，使用 HTML text, button 等 inputs，紀錄血壓於 FHIR observation JSON 資料當中
-- [chatGPT result:](https://chatgpt.com/share/9cd6f1dc-8160-4aa5-8a76-bdf316969f9b)
- 也可提問了解相關 HTML知識
-- 常用的 HTML 輸入標籤有哪些
-- 常用的 HTML 呈現標籤有哪些
-- 請提供範例概述 HTML
-- 請提供範例概述網頁前端 JS 程式
- 或提問了解 FHIR 相關知識
-- 健康醫療過程 FHIR 常用的 resources 有哪些
-- 針對某一 FHIR resource ，進一步提供 FHIR *** 之 JSON 資料範例及說明
-- 基於上述 FHIR JSON 資料，請提供 HTML 及 JS 程式範例，使用 HTML inputs 產生資料
-- [chatGPT result](https://chatgpt.com/share/70475394-5065-4fd3-95bb-b961ff896147)

## Task(學習事項)
1. 學員可參考上述問題，向 AI 提問
2. 複製提問產生的程式，在開發環境(如 VS code) 執行看看，及修改看看
3. 後續可將成果發佈到伺服器，將形成可連結的成果網頁

## 與人合作
- 與網頁程式專家合作: 參考上述方式，可快速產生 FHIR HTML 程式。但初學者設計及執行程式過程常產生許多問題，可自己挑戰看看，如何解決。也可提問，向專家請教。只要學員願意嘗試，有許多熟網頁前端之熱心大學生及業界高手可請教，後續提供連路方式，及線上討論機制
- 與醫護專家合作:
-1. FHIR 醫資標準是一個新興領域，在全球各地都有很多需求，有許多在地之醫療單位及醫護人員期待與學員合作。後續將提供需求專案(小專題)及媒合機制，我們將有獎勵及媒合媒合措施(再補充)輔導學員與醫護領域專家合作
-2. 程式不是人生的必修課，但每個人都要學會照顧自己，以及照護他人。數位化時代，在健康醫療領域有許多新興應用，需要年輕同學來幫忙。我們可常與醫護專家交流，了解有哪些方案、有哪些需求、同學如何參與及協助(這不須寫程式)

## 未來大學
- 希望年輕同學可"用以致學"
-1. 突破考試導向的傳統教育。改以 Project Based Learning，以此實做取代單純念書
-2. 希望以後大學、碩博畢業，不是什麼都不會做，而是已參與、甚至主導許多創新應用
- 如上述範例課程，這包含許多知能，但不須一直K 書，熟悉這些知識，再來想應用。同學們可先學會照著做(可能會碰到不少問題，要學會請教會的人)、學會如何簡單修改、再學相關知能、並勇於將所學實際應用