鐵人檔案
本系列將挑戰「零本機安裝」的現代雲端開發模式，全程靠瀏覽器，在 30 天內實作一款具備 AI 功能的用藥監測 Web 系統。
開發流程涵蓋：使用 GitHub Codespaces 建立 React 前端介面、透過 Firebase 管理資料庫與會員驗證、結合 Vercel 實現自動化部署。專案後期將導入 Dify 平台串接 LLM，建構專屬的 AI 用藥提醒助手。
文章將完整紀錄環境配置、前端狀態管理、CUD 邏輯實作到 AI 工具整合的實戰過程，展示如何運用雲端生態系輕量且高效地完成網頁應用程式。
在我們開發這套智慧用藥系統時，確保使用者的健康資料不會輕易遺失是最基本的要求。目前我們的系統雖然可以完美執行 CRUD 操作，但因為資料只存在瀏覽器的「暫存記憶...
在前 11 天的實作中，我們已經為「AI 智慧用藥監測系統」打造了穩固的 CRUD 基礎與 LocalStorage 資料持久化功能。系統的核心邏輯已經大致完成...
這幾天我們完成了 CRUD 與 LocalStorage 的資料儲存，系統功能已經非常完整。但如果使用者剛開始使用，或是把所有的用藥紀錄都刪除了，畫面下方會留下...
在前面幾天的實作中，我們專注於功能面的完善。然而，將醫學資訊的專業思維轉化為實際的照護工具時，我們不能只在乎冷冰冰的數據，更要考量到使用者（可能是長輩或病患）的...
這幾天我們陸續完成了用藥系統的 UI 與 UX 優化。但是，作為一個與「健康照護」相關的系統，安全性絕對是第一考量。 目前我們的系統有一個隱患：使用者可能會因為...
在前幾天我們完成了資料的 CRUD、防呆與視覺設計。然而，如果現在隨意新增幾筆不同時間的藥物，會發現清單是依照「新增的時間先後」排列，而不是依照「應該服藥的時間...
經過連續 16 天的奮戰，我們的「AI 智慧用藥監測系統」已經在本地端（Localhost）具備了完整的功能與流暢的 UI/UX。但身為一個現代網頁開發者，作品...
現在我們的系統已經順利部署到 Vercel 上，可能會迫不及待地用手機打開網址測試。但這時會發現一個尷尬的問題：原本在電腦螢幕上排列整齊的表單和清單，在手機狹窄...
經過前幾天的努力，我們的系統在功能與畫面上都已經相當完整。但是，隨著專案越來越大，可能會發現一個有點惱人的現象：我們的 medications 狀態和 setM...
經過前 19 天的努力，我們的「個人用藥追蹤系統」已經擁有漂亮的外觀、流暢的響應式設計，以及乾淨的 Context API 全域狀態管理。但既然專案名稱叫做「A...
