iT邦幫忙

2026 iThome 鐵人賽

DAY 27
0
Vibe Coding

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

[Day 27] Vibe Coding 實戰:點燃競技魂——打造社群排行榜與專屬健身代號

  • 分享至 

  • xImage
  •  

從單機紀錄到社群競技
一個人練雖然專注,但如果能看到其他人今天推了多少重量,那種「不能輸」的求勝心絕對是突破 PR(個人紀錄)的最佳催化劑!
在 Day 27,我們要讓 Vibe Fitness 迎來一次重大進化,從單機版的個人紀錄工具,正式跨入「社群互動」的領域。透過加入總重量排行榜,我們要把健身房裡那種無形的良性競爭,完美搬APP中。同時,也會建立一套暱稱與隱私機制,讓使用者都能安心參戰。

今日開發重點
登入攔截與專屬代號 (Nickname Modal)、
多維度榮耀榜 (日 / 週 / 月 排名)、
Firestore 效能最佳化 (Stats 聚合設計)

AI Prompt:
你現在是一位資深的前端與 Firebase (V9) 開發專家。請幫我擴充目前的 Vibe Fitness PWA 專案。請幫我實作「使用者暱稱設定流程」與「社群總重量排行榜 (Leaderboard)」。

  1. 登入攔截與暱稱設定 (Nickname & Opt-in Modal):

    • 邏輯:在使用者透過 Google 登入後,檢查 Firestore users/{uid} 文件中是否已有 nickname 欄位。
    • UI:如果沒有,請彈出一個不可關閉的 Modal(彈出視窗),要求使用者輸入「暱稱 (Nickname)」,並包含一個 Checkbox 讓使用者勾選「是否同意將成績加入公開排行榜進行競賽 (optInLeaderboard)」。
    • 寫入:使用者送出後,將 nickname 與 optInLeaderboard (boolean) 更新至該使用者的 Firestore 屬性中。
  2. 排行榜介面與資料邏輯 (Leaderboard View):

    • UI 需求:建立一個獨立的排行榜視圖。頂部要有切換按鈕或下拉選單,可選擇「日排名 (Daily)」、「週排名 (Weekly)」與「月排名 (Monthly)」。
    • 排行榜卡片:每筆排名需顯示使用者的「名次」、「暱稱」與該區間累積的「總訓練重量 (kg)」。針對前三名,請在 CSS 加上特殊的賽博龐克風格發光特效(金、銀、銅)。
    • 資料邏輯:請寫出撈取並計算排名的 JavaScript 函式。只需撈取 optInLeaderboard == true 的使用者。
  3. Firebase 架構更新建議:

    • 由於跨使用者動態加總「日/週/月」的總重量在前端直接撈取所有紀錄會耗費大量讀取次數,請提供一個最佳化的 Firestore 資料結構建議(例如:在每次新增訓練紀錄時,同步更新一個專門用來排名的 leaderboard_stats 集合),並附上對應的寫入與讀取程式碼。

輸出結果:
https://ithelp.ithome.com.tw/upload/images/20261011/20184339z1s31YD0S6.png

有新的可以輸入暱稱的視窗了!
https://ithelp.ithome.com.tw/upload/images/20261011/20184339esq0Fsb6WH.png
成功寫入firebase!


上一篇
vibe coding 實戰: PPL 週訓練計畫與今日訓練流程表製作
下一篇
[Day 28] 開發血淚史回顧:這 27 天來,AI 究竟是如何讓我崩潰的?
系列文
以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。 共 29 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言