本系列將挑戰「零本機安裝」的現代雲端開發模式,全程靠瀏覽器,在 30 天內實作一款具備 AI 功能的用藥監測 Web 系統。
開發流程涵蓋:使用 GitHub Codespaces 建立 React 前端介面、透過 Firebase 管理資料庫與會員驗證、結合 Vercel 實現自動化部署。專案後期將導入 Dify 平台串接 LLM,建構專屬的 AI 用藥提醒助手。
文章將完整紀錄環境配置、前端狀態管理、CUD 邏輯實作到 AI 工具整合的實戰過程,展示如何運用雲端生態系輕量且高效地完成網頁應用程式。
身為醫學資訊領域的學生,日常經常需要思考如何將繁雜的健康與服藥數據轉化為實用的數位系統。過去在開發網頁版習慣追蹤器時,深刻體會到 GitHub Codespac...
昨天我們確立了這 30 天要挑戰「零本機安裝」的開發模式。今天直接進入實戰,啟動專案的核心引擎:GitHub Codespaces。 過去在進行專案開發時,光是...
昨天我們成功在瀏覽器中看見了 Vite + React 的預設歡迎畫面,證明了雲端開發環境的順暢度。今天我們要來「打掃房間」,把不需要的預設檔案清空,並導入 T...
前面幾天我們成功在 GitHub Codespaces 建立了雲端 React 環境,並順利掛載了 Tailwind CSS。今天我們要開始動手寫程式,打造整個...
昨天我們完成了系統的頂層導覽列與基礎畫布。今天,我們要把焦點放在系統的核心功能——「今日用藥清單」。為了讓使用者能一眼看清楚吃藥時間,我們將利用 Tailwin...
昨天我們完成了精美的用藥清單介面,但目前的按鈕只是純展示的靜態畫面。今天我們要為系統注入靈魂,透過 React 最核心的功能——useState,讓「確認服用」...
昨天我們成功利用 useState 讓按鈕具備切換狀態的功能。但在真實的醫療與健康管理系統中,「防呆機制」非常重要。如果使用者只是滑動螢幕時不小心誤觸了按鈕,直...
在前幾天的實作中,我們已經成功建立了一個可以互動、帶有防呆對話框的用藥清單。但目前的資料都還是寫死在程式碼裡的「假資料」。為了讓這套系統真正實用,今天我們要來打...
昨天我們完成了「新增用藥」的表單介面。今天我們要為這個表單注入靈魂,讓按鈕真正發揮作用。但在這之前,我們必須先弄懂 React 開發中非常重要的一個核心觀念:「...
在前幾天的實作中,我們已經完成了前端 CRUD (新增 Create、讀取 Read、更新 Update、刪除 Delete) 中的前三項。今天,我們要來完成最...