iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Vibe Coding

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

第一週:Vibe Coding 基礎與環境建置 (Day 1 - Day 7)
第二週:核心功能實作與除錯心法 (Day 8 - Day 14)
第三週:系統擴充與資料處理進階 (Day 15 - Day 21)
第四週:AI 賦能與進階智慧化應用 (Day 22 - Day 28)
(Day29 - Day 30):完賽&反思

參賽天數 29 天 | 共 29 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day 11] 動態資料視覺化:指令 AI 整合 Chart.js,將習慣進度繪成動態長條圖

冷冰冰的數字會說話在前幾天,我完成了 PWA 專案骨架、Firestore 資料庫串接,也成功讓使用者把每天的重量、次數與習慣打卡數據存進雲端。但對使用者來說,...

2026-09-25 ‧ 由 wei_hung1206 分享
DAY 12

[Day 12] Vibe Coding 實戰:打造高顏值底部導覽列,無縫切換打卡與圖表頁面

對於一個要在手機上運作的 PWA 來說,最直覺、最符合原生 App 體驗的設計,莫過於底部導覽列 (Bottom Navigation Bar)。今天就要把這扇...

2026-09-26 ‧ 由 wei_hung1206 分享
DAY 13

[Day 13] Vibe Coding 實戰:資料庫的讀取邏輯與資料格式轉換

讓冷冰冰的數據活起來昨天我們成功建好了底部導覽列這扇「門」,現在你可以優雅地在「打卡鍵盤」與「圖表數據」之間來回切換了。但如果你仔細一看,會發現圖表上顯示的數字...

2026-09-27 ‧ 由 wei_hung1206 分享
DAY 14

[Day 14] Vibe Coding 實戰:掌握數據掌控權——實作編輯刪除與圓餅圖肌群分析

在前面的進度中,成功讓數據上傳雲端並畫出了長條圖。但真實的健身房情境是:舉到力竭時手一滑,不小心把 50 公斤輸入成 500 公斤是常有的事。如果不能修改或刪除...

2026-09-28 ‧ 由 wei_hung1206 分享
DAY 15

[Day 15] Vibe Coding 實戰:打造專屬空間——實作 Firebase Google 登入與會員狀態管理

告別測試帳號,迎來真正的多使用者時代在先前的進度中,我們的Fitness PWA已經製作了打卡鍵盤、導覽列、以及能夠及時連動資料庫CRUD的圓餅圖儀表板。但是目...

2026-09-29 ‧ 由 wei_hung1206 分享
DAY 16

[Day 16] Vibe Coding 實戰:讓網頁變成真正的 App——實作 PWA Manifest 與離線快取

打破瀏覽器的邊界我們的 Vibe Fitness 已經擁有了高顏值介面、真實的雲端資料庫、專業的圖表分析,甚至連專屬的 Google 會員登入都做好了。但是,現...

2026-09-30 ‧ 由 wei_hung1206 分享
DAY 17

[Day 17] Vibe Coding 瓶頸: 免費仔沒有AI 可以coding

在這次的30天挑戰中,已經換過一次AI coding的工具了,但到了今天,還是再次遇到免費額度上限,需要付費才能使用,而身為一個免費仔,我和Gemini經歷了多...

2026-10-01 ‧ 由 wei_hung1206 分享
DAY 18

[Day 18] Vibe Coding 實戰:Android Studio 原生解鎖——善用內建 Gemini 實現全自動跨平台轉換

在經歷了昨天的AI荒後,我馬上想起以前在做行動裝置程式設計時,有使用Android Studio 來coding,而且它裡面是有內建Gemini可以幫助我來vi...

2026-10-02 ‧ 由 wei_hung1206 分享
DAY 19

[Day 19] Vibe Coding 實戰:也許即將要斷更!?

在昨天成功把程式碼轉移至Android Studio,但就差臨門一腳,因為載入時間過長,所以造成系統放棄載入,今天使用另一個模擬機,結果可以運行,正當我以為一切...

2026-10-03 ‧ 由 wei_hung1206 分享
DAY 20

[Day 20] Vibe Coding 實戰:PWA 效能優化與離線快取(Service Worker)

回歸 PWA 主場,打造即使斷網也能使用的極致體驗雖然昨天的目標看似成功,實則好像還是有點問題,所以最後決定,重新回到最一開始的目標,繼續開發我的網頁應用程式。...

2026-10-04 ‧ 由 wei_hung1206 分享