iT邦幫忙

2025 iThome 鐵人賽

DAY 12
0
生成式 AI

30 天 Vibe Coding:全端 × 機器學習的實作挑戰系列 第 12

Day 12|30 天 Vibe Coding:我的日記只有我能看

  • 分享至 

  • xImage
  •  

昨天我們完成了「情緒日記 Web MVP」,用 localStorage 做到 刷新不會消失。
但 localStorage 有個明顯問題:換電腦或清瀏覽器快取就全沒了,而且完全沒有安全性,任何人都能看到你的日記。

所以今天的目標是:

  1. 把資料搬上 Firestore,支援跨裝置雲端同步
  2. 加入 Google 帳號登入,確保只有自己能存取日記
  3. 實作保護路由 (Protected Route),未登入訪客無法進到主畫面

這樣才能說是一個真正的「日記」App,而不是貼心的記事本 XD

關於 Firebase 的 Authentication 跟 Firestore 建立,這篇就不詳細描述了,詳情請看 Day4


今日目標

  1. Firebase 串接
  • 啟用 Authentication(Google Sign-In)
  • 啟用 Firestore Database
  • 前端專案引入 Firebase SDK
  1. 帳號登入 / 登出
  • 登入後才能看到主畫面
  • 登出會回到登入畫面
  1. 保護路由
  • 未登入:導向 LoginPage
  • 已登入:顯示 DiaryPage

Prompt(僅供參考)

幫我在 React 情緒日記 App 加上 Firestore 與 Auth。

=== 功能需求 ===
1. Firebase 初始化
   - import { initializeApp } from "firebase/app"
   - import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from "firebase/auth"
   - import { getFirestore, collection, addDoc, getDocs, deleteDoc, doc } from "firebase/firestore"

2. Auth
   - LoginPage:提供 Google 登入按鈕
   - 登入成功後,切換到 DiaryPage
   - DiaryPage 提供「登出」按鈕

3. Firestore
   - 結構:users/{uid}/diaries/{entryId}

4. Protected Route
   - React Router 設定
   - 如果沒有 currentUser → redirect /login
   - 有登入 → 顯示日記頁面

今日驗收 ✅

  1. 成功登入 Google 帳號 → 主畫面出現
  2. 輸入日記 → 存檔 → Firestore 出現新文件
    https://ithelp.ithome.com.tw/upload/images/20250907/20140998Ix9QwN7Qd6.png
    https://ithelp.ithome.com.tw/upload/images/20250907/20140998chl1mD54ty.png
  3. 登出 → 回到登入畫面,日記清單消失
    https://ithelp.ithome.com.tw/upload/images/20250907/20140998DbLjvVYDXU.png
  4. 換電腦或不同瀏覽器登入同帳號 → 日記完整回來
  5. 未登入訪客若手動輸入 /diary → 自動跳回 /login

明日預告

Day 13 要補上 日記 CRUD 功能:
除了新增之外,還要能修改或刪除以前的日記,並且讓清單依日期排序。這樣就算覺得某篇日記太羞恥,或想補充內容,都能即時編輯或刪掉。


上一篇
Day 11|30 天 Vibe Coding:情緒日記 Web MVP
下一篇
Day 13|30 天 Vibe Coding:覺得舊日記太恥,可以刪除或編輯
系列文
30 天 Vibe Coding:全端 × 機器學習的實作挑戰14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言