前幾天,我陸續完成了首頁即時時間、睡眠紀錄、「我的」頁面,以及 AI 小助手等功能。
今天,我想開始準備把這個專案部署成公開網站,讓其他人也可以透過網址使用。
在正式部署之前,我先請 Codex 檢查目前的專案,確認檔案是否完整,以及有哪些地方需要修改。
這次檢查了 outputs 資料夾中的 7 個必要檔案,包括:
index.html:首頁medicines.html:用藥管理my.html:「我的」頁面style.css:共用樣式script.js:首頁功能medicines.js:用藥管理功能reminders.js:用藥提醒功能Codex 檢查後,確認頁面使用的 CSS、JavaScript 路徑,以及頁面之間的導覽連結都沒有發現明顯問題。
另外,目前的專案是使用 HTML、CSS 和 JavaScript 製作的靜態網站,因此可以考慮使用 Netlify 部署,不需要另外設定複雜的建置流程。
檢查時,我發現首頁還有固定的個人稱呼,以及兩張示範用藥卡片。
如果直接把網站公開,其他使用者第一次進入時,可能會以為那些藥物是自己的紀錄。
因此,我請 Codex 進行最小幅度的修改:
這樣一來,首頁就會依照實際保存的用藥資料顯示內容,而不是一開始就出現示範資料。
這次修改完成後,Codex 再次檢查了相關程式碼。
檢查結果顯示,原本的用藥新增、刪除、服用狀態切換及首頁同步邏輯都還在。
喝水紀錄、睡眠紀錄、每日狀態、提醒、AI 小助手與底部導覽等功能也都保留。
不過,這次主要是程式碼檢查,還沒有完整執行瀏覽器測試,因此之後仍需要實際操作確認。
目前的健康資料主要使用 localStorage 儲存在瀏覽器中。
這代表使用者的紀錄不會自動同步到其他裝置,也沒有伺服器備份。
另外,網站公開後,HTML、CSS 和 JavaScript 都可以被訪客查看,因此不能把 API 金鑰或密碼直接寫在前端程式碼裡。
目前的 AI 小助手也還沒有連接外部 AI API,而是透過 JavaScript 判斷關鍵字,再讀取現有紀錄並組成回覆。
這些都是正式公開網站前需要了解的限制。
今天完成了部署前的檢查與必要修改:
目前網站還沒有正式上線,也還沒有公開網址。
今天讓我發現,完成程式功能並不代表專案就能直接公開。
在部署之前,還需要考慮使用者第一次進入網站時看到什麼、資料如何保存,以及公開後可能遇到的問題。
接下來,我會繼續學習如何將本機的網站部署到網路上,讓這個作品不只是自己電腦裡的程式,也能成為其他人可以使用的工具。
明天預計使用 Netlify 部署網站,取得公開網址。
部署完成後,我會再實際測試首頁、用藥管理、喝水紀錄、睡眠紀錄及 AI 小助手,確認公開網站上的功能是否正常。