iT邦幫忙

2026 iThome 鐵人賽

DAY 25
0
ChatGPT & Codex

AI 保健小幫手:用 ChatGPT & Codex 打造個人健康紀錄工具系列 第 25 篇

Day 25|讓保健小幫手更完整:即時時間、睡眠紀錄與我的頁面

  • 分享至 

  • xImage
  •  

一、今天想做什麼?

前幾天已經完成喝水紀錄、用藥管理、每日狀態和 AI 小助手等功能。

不過,我發現首頁的時間顯示、睡眠紀錄,以及個人設定的部分還可以再完善。

所以今天決定一次處理三個項目,讓整個保健小幫手更接近一個完整的網站。


二、讓首頁時間與日期即時更新

首先,我請 Codex 修改首頁的日期和時間顯示。

這次希望時間可以跟著裝置的實際時間自動更新,不需要使用者一直重新整理頁面。

修改後,首頁可以顯示目前的日期、星期和時間,也會在跨日時更新日期。

這樣每次打開首頁,就能直接看到當下的時間資訊。


三、加入睡眠紀錄

接著是今天的第二個功能:睡眠紀錄。

這次加入了睡眠日期、入睡時間和起床時間的輸入功能,並讓系統自動計算睡眠時數。

例如:

入睡時間:23:30
起床時間:07:00
睡眠時數:7.5 小時

因為睡眠通常會跨越午夜,所以計算時也需要考慮日期變化,不能直接用起床時間減掉入睡時間。

另外,每個日期的睡眠紀錄會分開保存,重新整理頁面後也能保留。

我也請 Codex 加入時間驗證,避免不合理的紀錄被保存。


四、新增「我的」頁面

第三個項目是新增底部導覽列的「我的」頁面。

這個頁面提供基本設定說明、提醒方式資訊,以及健康紀錄功能的入口。

我希望未來如果還要增加個人化設定,就可以集中在這個頁面,不必把所有功能都塞在首頁。

這次也一併調整了底部導覽列,讓首頁、用藥管理和「我的」頁面之間可以互相切換。


五、我使用的提示詞

今天主要請 Codex 檢查現有程式架構,再依照原本的設計進行修改。

我希望它不要重新製作整個網站,而是沿用已經完成的功能,逐步補上缺少的部分。

主要要求包括:

請先檢查目前的專案架構,再完成以下功能:

1. 讓首頁日期、星期與時間即時更新。
2. 完善睡眠紀錄,支援跨午夜計算、
   日期分開保存及輸入驗證。
3. 新增底部「我的」頁面,
   並讓底部導覽列可以正常切換。

請沿用目前的程式架構,
不要破壞已經正常的用藥、喝水、
每日狀態與 AI 小助手功能。

修改完成後,請提供測試方法。

六、實際測試結果

完成修改後,我實際測試了今天新增的功能。

  • 首頁日期、星期和時間可以正常顯示。
  • 等待時間經過後,首頁時間會自動更新。
  • 輸入 23:30 入睡、07:00 起床,可以正確計算出 7.5 小時。
  • 睡眠紀錄保存後,重新整理仍然存在。
  • 不同日期的睡眠紀錄不會互相覆蓋。
  • 底部導覽列可以切換至不同頁面。
  • 原本的喝水、用藥、每日狀態和 AI 小助手功能也都正常。

全部測試成功!


七、今天最大的收穫

今天讓我了解到,功能之間的整合也很重要。

例如,睡眠紀錄除了輸入時間,還需要處理跨日計算和資料保存;新增頁面時,也要注意導覽列是否會影響原本的操作。

如果只確認程式碼沒有錯誤,還不代表使用者實際操作時一定沒有問題,因此完成修改後,還是需要自己測試。


八、明天想做什麼?

明天預計開始準備部署網站。

我會先讓 Codex 檢查目前的專案檔案、資料隱私、Git 設定,以及 Netlify 所需的部署條件。

確認沒有問題後,再一步步將 AI 保健小幫手發布成有公開網址的網站,讓其他人也能使用。


上一篇
Day 24|健康資料很重要:隱私與安全怎麼處理?
下一篇
Day 26|讓 AI 保健小幫手準備上線
系列文
AI 保健小幫手:用 ChatGPT & Codex 打造個人健康紀錄工具 共 29 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言