iT邦幫忙

2026 iThome 鐵人賽

DAY 14
0
AI Engineering

用 React x Dify 打造 AI 智慧用藥監測系統系列 第 14

DAY14 注入溫度與關懷:實作根據時間變化的「動態問候語」

  • 分享至 

  • xImage
  •  

在前面幾天的實作中,我們專注於功能面的完善。然而,將醫學資訊的專業思維轉化為實際的照護工具時,我們不能只在乎冷冰冰的數據,更要考量到使用者(可能是長輩或病患)的心理感受與操作體驗。

今天,我們要在系統的最上方加入一段「動態問候語」。系統會自動抓取使用者當下的時間,根據早、中、晚顯示不同的問候與提醒,讓這套 AI 智慧用藥系統多一份人情味。

Step 1:建立問候語元件
src/components 資料夾下,新增一個名為 Greeting.jsx 的檔案。
我們將利用 JavaScript 內建的 Date 物件來取得現在的小時 (0~23),並用簡單的 if/else 判斷式來決定要顯示的文字與圖示。
https://ithelp.ithome.com.tw/upload/images/20260905/201787978LmzjNUHCs.jpg
https://ithelp.ithome.com.tw/upload/images/20260905/20178797Jkl5jdZNVY.jpg

Step 2:將元件整合進主畫面
接著,打開 src/App.jsx,將我們剛寫好的 Greeting 元件匯入,並把它放置在最主要的(main)區塊的最上方(表單的上面)。
https://ithelp.ithome.com.tw/upload/images/20260905/20178797N8bfzhp4Yn.jpg
https://ithelp.ithome.com.tw/upload/images/20260905/20178797u07w9HwB9L.jpg

成功如下圖,上方會依照你現在的時間給你相對應的話語,我的時間是晚上所以會是晚安!今天辛苦了
https://ithelp.ithome.com.tw/upload/images/20260905/20178797unU92JoGPZ.jpg


上一篇
DAY13 提升 UX 體驗:為用藥清單設計專屬的「空狀態 (Empty State)」
下一篇
DAY15 系統防呆再升級:實作「重複用藥」檢測機制
系列文
用 React x Dify 打造 AI 智慧用藥監測系統23
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言