本系列將挑戰「零本機安裝」的現代雲端開發模式,全程靠瀏覽器,在 30 天內實作一款具備 AI 功能的用藥監測 Web 系統。
開發流程涵蓋:使用 GitHub Codespaces 建立 React 前端介面、透過 Firebase 管理資料庫與會員驗證、結合 Vercel 實現自動化部署。專案後期將導入 Dify 平台串接 LLM,建構專屬的 AI 用藥提醒助手。
文章將完整紀錄環境配置、前端狀態管理、CUD 邏輯實作到 AI 工具整合的實戰過程,展示如何運用雲端生態系輕量且高效地完成網頁應用程式。
昨天我們成功在背景準備好了 Gemini API,並寫好了呼叫 AI 的 aiService.js。今天,我們要把這位「幕後英雄」請到舞台上,在畫面中加入一個「...
昨天我們成功讓系統與 Gemini 連線,並在畫面上顯示了 AI 的回覆。不過,你可能會發現 Gemini 給的建議有點像「複讀機」,只是把我們輸入的時間和藥名...
經過昨天的 Prompt 調校,我們的 Gemini 已經能給出非常專業的醫療建議。但你可能會發現一個小缺點:文字全部擠在一起。 大型語言模型 (LLM) 天生...
我們的 AI 用藥監控系統已經具備了強大的核心功能,不僅能儲存用藥資料,還能提供專業且排版精美的 AI 建議。但在真實世界的應用程式中,我們不能只考慮「順利運作...
經過前面的實作,我們的系統已經透過 LocalStorage 擁有了持久化的記憶能力,重新整理也不怕資料遺失。但這同時也帶來了新的 UX(使用者體驗)挑戰:如果...
在開發臨床應用或健康資訊系統時,「資料完整性 (Data Integrity)」是至關重要的核心。目前的系統雖然功能齊全,但如果使用者不小心送出了空白的藥物名稱...
一個優秀的健康追蹤應用程式,除了功能要穩定,更重要的是要能提供「正向回饋」,鼓勵使用者持續保持好習慣。我們的系統已經具備了完整的進度條計算,但當使用者辛苦吃完今...