iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
AI Engineering

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

本系列將挑戰「零本機安裝」的現代雲端開發模式,全程靠瀏覽器,在 30 天內實作一款具備 AI 功能的用藥監測 Web 系統。

開發流程涵蓋:使用 GitHub Codespaces 建立 React 前端介面、透過 Firebase 管理資料庫與會員驗證、結合 Vercel 實現自動化部署。專案後期將導入 Dify 平台串接 LLM,建構專屬的 AI 用藥提醒助手。

文章將完整紀錄環境配置、前端狀態管理、CUD 邏輯實作到 AI 工具整合的實戰過程,展示如何運用雲端生態系輕量且高效地完成網頁應用程式。

參賽天數 27 天 | 共 27 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 21

DAY21 讓系統開口說話:實作 AI 洞察面板與 Vercel 環境設定

昨天我們成功在背景準備好了 Gemini API,並寫好了呼叫 AI 的 aiService.js。今天,我們要把這位「幕後英雄」請到舞台上,在畫面中加入一個「...

2026-09-21 ‧ 由 sushi0329 分享
DAY 22

DAY22 釋放 AI 的真正潛力:Prompt Engineering 實戰

昨天我們成功讓系統與 Gemini 連線,並在畫面上顯示了 AI 的回覆。不過,你可能會發現 Gemini 給的建議有點像「複讀機」,只是把我們輸入的時間和藥名...

2026-09-22 ‧ 由 sushi0329 分享
DAY 23

DAY23 提升 AI 內容可讀性:引入 Markdown 渲染與 Tailwind 排版外掛

經過昨天的 Prompt 調校,我們的 Gemini 已經能給出非常專業的醫療建議。但你可能會發現一個小缺點:文字全部擠在一起。 大型語言模型 (LLM) 天生...

2026-09-23 ‧ 由 sushi0329 分享
DAY 24

DAY24 系統優化與防呆機制:處理空狀態與載入中的使用者體驗 (UX)

我們的 AI 用藥監控系統已經具備了強大的核心功能,不僅能儲存用藥資料,還能提供專業且排版精美的 AI 建議。但在真實世界的應用程式中,我們不能只考慮「順利運作...

2026-09-24 ‧ 由 sushi0329 分享
DAY 25

DAY25 守護重要資料:引入 SweetAlert2 實作刪除確認機制

經過前面的實作,我們的系統已經透過 LocalStorage 擁有了持久化的記憶能力,重新整理也不怕資料遺失。但這同時也帶來了新的 UX(使用者體驗)挑戰:如果...

2026-09-25 ‧ 由 sushi0329 分享
DAY 26

DAY26 醫療系統的第一道防線:表單防呆與資料驗證 (Form Validation)

在開發臨床應用或健康資訊系統時,「資料完整性 (Data Integrity)」是至關重要的核心。目前的系統雖然功能齊全,但如果使用者不小心送出了空白的藥物名稱...

2026-09-26 ‧ 由 sushi0329 分享
DAY 27

DAY27 注入靈魂的互動體驗:使用 Confetti 實作達成目標的慶祝動畫

一個優秀的健康追蹤應用程式,除了功能要穩定,更重要的是要能提供「正向回饋」,鼓勵使用者持續保持好習慣。我們的系統已經具備了完整的進度條計算,但當使用者辛苦吃完今...

2026-09-27 ‧ 由 sushi0329 分享