iT邦幫忙

2026 iThome 鐵人賽

DAY 22
0
Vibe Coding

以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。系列 第 22 篇

[Day 22] Vibe Coding 實戰:核心功能就位——打造組間休息計時器與自訂動作選單

  • 分享至 

  • xImage
  •  

系統的實用性取決於核心功能的完整度。今天專注將 Vibe Fitness 推進到真正能帶去健身房實戰的階段。透過精準的 Vibe Coding 提示詞,我們將把原本寫死的訓練項目,升級為完整涵蓋推、拉、腿 (Push, Pull, Legs) 的動態下拉選單,並加入能讓你精準掌控組間休息的計時器。

今日開發重點
建立下拉選單 你可以把常練的槓鈴臥推 (推)、引體向上 (拉) 或頸後深蹲 (腿) 全都放進去,讓存入 Firebase 的數據真正具備追蹤與分析的價值。
計時器工具 實作一個帶有「開始、暫停、重設」功能的組間計時器。讓 AI 幫你處理 JavaScript setInterval 的非同步倒數邏輯,時間一到自動提醒,確保每一次的訓練強度與休息節奏不掉線。

AI Prompt:
你現在是一位資深的前端與 Firebase 開發專家。請幫我修改目前的 Vibe Fitness PWA 專案。
【任務目標】

  1. 實作「動態動作選單 (Exercise Dropdown)」並整合 Firebase 寫入邏輯。
  2. 實作「休息計時器 (Workout Timer)」。
    【具體需求】
  3. 動作選擇下拉選單 (UI & Firebase):
    • 將表單中寫死的訓練動作替換成 HTML <select> 標籤。
    • 預設選項請按照 Push/Pull/Legs 結構分類,包含:槓鈴臥推、啞鈴側平舉、引體向上、划船、頸後深蹲、傳統硬舉等。
    • 表單送出時,必須正確抓取該動作名稱、重量與次數,並使用 addDoc 寫入 Firestore 的記錄中。
  4. 休息計時器 (UI & 邏輯):
    • UI 需包含:倒數顯示畫面 (MM:SS)、自訂秒數輸入框 (預設 60 秒) 以及「開始」、「暫停」、「重設」三個按鈕。
    • 邏輯:點擊「開始」進行倒數(需防止重複點擊導致時間加速);「暫停」定格時間;「重設」停止計時並恢復為輸入框設定的秒數;時間到 0 時觸發 alert 提醒。
      輸出成果:
      https://ithelp.ithome.com.tw/upload/images/20261006/20184339cfEBMaFi5k.jpg

上一篇
[Day 21 ] Vibe Coding 實戰:主動出擊——導入 FCM 網頁推播通知
系列文
以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。 共 22 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言