iT邦幫忙

2026 iThome 鐵人賽

DAY 10
0
Vibe Coding

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

[Day 10] 串接 Firebase 後端:如何讓 AI 寫出安全且高效的非同步資料讀寫邏輯?

  • 分享至 

  • xImage
  •  
**讓資料在雲端落地生根**

經過先前的努力,「智慧健身 PWA」已經有了好看又會動的深色數字鍵盤與即時狀態。但這時候如果你重新整理瀏覽器,所有的輸入就會像灰姑娘的馬車一樣消失,因為我們還少了一塊拼圖:雲端資料庫同步

在傳統開發中,處理 Firebase 非同步 (Async/Await) 請求、錯誤處理 (Try-Catch)、以及 Firestore 的離線快取設定,往往需要查閱大量的官方文件。但在 Vibe Coding 的世界裡,我們有 SCHEMA.md 作為導航,這讓資料庫串接變得前所未有的輕鬆。

(由於cursor的免費額度已經沒有了,所以今天開始改用vs code加裝continue來繼續推進進度)

** 把 SCHEMA.md 當作導航,精準讓 AI 寫出資料服務**
AI Prompt:
@SCHEMA.md @js/services/workout-service.js @js/firebase/db.js
你現在是一位精通 Firebase Firestore 的後端工程師。請幫我實作 workout-service.js 中的資料讀寫邏輯。
實作要求:
新增健身紀錄 (saveWorkoutSet): 必須嚴格按照 @SCHEMA.md 定義的 Firestore 結構,將當下的訓練日期、器材名稱、重量、次數與左右側 (laterality) 寫入對應的 Subcollection 中。
非同步處理: 使用現代的 async/await 語法,並妥善加入 try/catch 錯誤攔截。
離線支援: 確保 Firestore 的本地快取功能有被啟用,讓使用者在健身房網路不穩時也能正常寫入資料。

成果:
https://ithelp.ithome.com.tw/upload/images/20260924/20184339cDE9DeBIpL.png


上一篇
[Day 9] 狀態管理邏輯:引導 AI 實作任務狀態切換與 UI 的即時連動
下一篇
[Day 11] 動態資料視覺化:指令 AI 整合 Chart.js,將習慣進度繪成動態長條圖
系列文
以開發「智慧健身與習慣追蹤 PWA 」為主軸的 30 天 Vibe Coding 挑戰清單。 共 17 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言