iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Build on Google AI

《30天打造喵語日誌:Gemini API × Vibe Coding 實戰》 系列

在快節奏生活中,情緒記錄往往難以堅持。《喵語日誌》是結合 Google AI 與 Vibe Coding 開發的輕量陪伴平台。

本專案以「貓咪視角」為核心,運用 Gemini API 的多模態辨識與角色扮演能力,將使用者上傳的照片與隨記轉化為溫暖回饋與情緒標籤,並透過 Firebase 整合為情緒月曆與遊戲化成就卡片。

30 天鐵人賽中,我將記錄如何運用 Vibe Coding 進行人機協作,從 Prompt 調校、前端 UI 快速迭代到 Gemini API 與 Firebase 串接,展現 AI 時代的高效開發實踐!

參賽天數 20 天 | 共 20 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文 團隊五人成行,Bug 不行
DAY 11

Day 11:【圖表模組】情緒歷程視覺化:用 Chart.js 畫出情緒起伏月曆

讓文字變成有溫度的數據歷程 在前幾篇文章中,我們完成了《喵語日誌》的文字對話、情緒標記和照片分享模組。 隨著使用者天天寫日記、紀錄心情,這些散落在對話視窗裡的資...

2026-08-12 ‧ 由 alice__ 分享
DAY 12

Day 12:【成就系統】遊戲化設計:成就解鎖卡片與徽章牆 UI

用遊戲化打破養成習慣的怠惰期 在產品設計中,最困難的往往不是吸引使用者下載,而是讓使用者願意持續使用。 尤其是習慣養成、心情紀錄這類工具,剛開始使用時可能會感到...

2026-08-13 ‧ 由 alice__ 分享
DAY 13

Day 13:【UI/UX 微調】打造極致療癒感:介面細節修飾與視覺一致性優化

從能用到好用,細節決定產品的質感 在前後端與元件邏輯開發現場,我們常把注意力放在功能有沒有跑通。然而在實際產品設計中,能跑只是基本門檻,真正決定使用者是否願意留...

2026-08-14 ‧ 由 alice__ 分享
DAY 14

Day 14:【響應式設計】RWD 手機與電腦雙端適配:從小螢幕到桌面端的佈局眉角

打破裝置邊界,從模擬卡片到雙端沉浸體驗 在前端開發過程中,我們經常在寬螢幕的桌機上檢視介面,並以一個固定寬高的置中卡片來模擬手機 App。然而,當真實的使用者拿...

2026-08-15 ‧ 由 alice__ 分享
DAY 15

Day 15:【第二週小結】前端靜態畫面全面完工:全功能 Demo 展示與 Vibe Coding 開發回顧

不知不覺,鐵人賽已經進行到第 15 天,也正式迎來整個挑戰的半程里程碑。 回顧過去兩週,我們從零開始構思《喵語日誌》,一步一步完成了視覺調性設計、即時陪伴對話介...

2026-08-16 ‧ 由 alice__ 分享
DAY 16

Day 16:【Gemini API】前端正式串接 Google Gen AI SDK:告別假資料,賦予貓咪對話靈魂!

從靜態 Mock 到智慧對話的關鍵跨越 在昨天的半程小結中,我們完整檢視了《喵語日誌》的前端畫面與互動元件。雖然聊天室能收發文字與圖片,但先前為了驗證介面流程,...

2026-08-17 ‧ 由 alice__ 分享
DAY 17

Day 17:【多模態串接】實作圖文同時輸入:為貓咪裝上辨識萬物的視覺之眼!

從「聽懂文字」到「看懂世界」的多模態躍進 在昨天的實作中,我們成功串接了 Gemini API,讓貓咪能依據文字與心情標籤給予專屬的陪伴回應。然而在昨天的成果中...

2026-08-18 ‧ 由 alice__ 分享
DAY 18

Day 18:【Firebase 初始化】建立雲端後端與 Auth 匿名登入:打造專屬使用者的隱形身分證

邁向雲端資料持久化的起點 過去兩天,我們成功接入 Gemini 的文字與多模態視覺能力。現在,《喵語日誌》中的貓咪已經能根據使用者輸入的文字與上傳的照片,提供即...

2026-08-19 ‧ 由 alice__ 分享
DAY 19

Day 19:【Firestore 儲存】將對話紀錄與情緒標籤寫入雲端資料庫:設計高效又省錢的 NoSQL 文件結構!

邁向雲端資料持久化:讓互動永恆留存 昨天完成 Firebase Auth 匿名登入後,每位造訪《喵語日誌》的使用者都擁有了專屬且唯一的 UID。 不過,目前使用...

2026-08-20 ‧ 由 alice__ 分享
DAY 20

Day 20:【數據動態同步】從 Firestore 讀取紀錄並渲染至情緒日曆與折線圖:狀態提升與即時監聽實戰!

告別靜態 Mock Data,讓分析圖表真正活起來 昨天,我們成功將《喵語日誌》的對話與情緒分析結果寫入 Firestore,讓使用者的每一筆日常紀錄都能保存到...

2026-08-21 ‧ 由 alice__ 分享