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 1

DAY1 零本機安裝!30天用 React x Dify 打造 AI 智慧用藥監測系統

身為醫學資訊領域的學生,日常經常需要思考如何將繁雜的健康與服藥數據轉化為實用的數位系統。過去在開發網頁版習慣追蹤器時,深刻體會到 GitHub Codespac...

2026-09-01 ‧ 由 sushi0329 分享
DAY 2

DAY2 雲端開發第一步:用 GitHub Codespaces 零安裝架設 React 環境

昨天我們確立了這 30 天要挑戰「零本機安裝」的開發模式。今天直接進入實戰,啟動專案的核心引擎:GitHub Codespaces。 過去在進行專案開發時,光是...

2026-09-02 ‧ 由 sushi0329 分享
DAY 3

DAY3 淨空專案與基礎配置:導入 Tailwind CSS 加速切版

昨天我們成功在瀏覽器中看見了 Vite + React 的預設歡迎畫面,證明了雲端開發環境的順暢度。今天我們要來「打掃房間」,把不需要的預設檔案清空,並導入 T...

2026-09-03 ‧ 由 sushi0329 分享
DAY 4

DAY4 醫療儀表板的第一步:打造乾淨的 Navbar 與主畫面佈局

前面幾天我們成功在 GitHub Codespaces 建立了雲端 React 環境,並順利掛載了 Tailwind CSS。今天我們要開始動手寫程式,打造整個...

2026-09-04 ‧ 由 sushi0329 分享
DAY 5

DAY5 實作用藥清單介面:使用 Tailwind 打造高質感資訊卡片

昨天我們完成了系統的頂層導覽列與基礎畫布。今天,我們要把焦點放在系統的核心功能——「今日用藥清單」。為了讓使用者能一眼看清楚吃藥時間,我們將利用 Tailwin...

2026-09-05 ‧ 由 sushi0329 分享
DAY 6

DAY6 讓按鈕活起來:使用 React useState 實作狀態互動

昨天我們完成了精美的用藥清單介面,但目前的按鈕只是純展示的靜態畫面。今天我們要為系統注入靈魂,透過 React 最核心的功能——useState,讓「確認服用」...

2026-09-06 ‧ 由 sushi0329 分享
DAY 7

DAY7 防呆機制不可少:實作確認服藥的彈出式對話框 (Modal)

昨天我們成功利用 useState 讓按鈕具備切換狀態的功能。但在真實的醫療與健康管理系統中,「防呆機制」非常重要。如果使用者只是滑動螢幕時不小心誤觸了按鈕,直...

2026-09-07 ‧ 由 sushi0329 分享
DAY 8

DAY8 擴充系統功能:設計「新增用藥」的表單介面

在前幾天的實作中,我們已經成功建立了一個可以互動、帶有防呆對話框的用藥清單。但目前的資料都還是寫死在程式碼裡的「假資料」。為了讓這套系統真正實用,今天我們要來打...

2026-09-08 ‧ 由 sushi0329 分享
DAY 9

DAY9 讓表單動起來:React 狀態提升 (Lifting State Up) 與新增功能實作

昨天我們完成了「新增用藥」的表單介面。今天我們要為這個表單注入靈魂,讓按鈕真正發揮作用。但在這之前,我們必須先弄懂 React 開發中非常重要的一個核心觀念:「...

2026-09-09 ‧ 由 sushi0329 分享
DAY 10

DAY10 完成前端 CRUD 拼圖:實作用藥清單的「刪除」功能

在前幾天的實作中,我們已經完成了前端 CRUD (新增 Create、讀取 Read、更新 Update、刪除 Delete) 中的前三項。今天,我們要來完成最...

2026-09-10 ‧ 由 sushi0329 分享