iT邦幫忙

2025 iThome 鐵人賽

DAY 17
0
生成式 AI

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

Day 17|30 天 Vibe Coding:做了寫日記網頁結果每天都忘記

  • 分享至 

  • xImage
  •  

昨天把搜尋做完,今天上線「Email 提醒」:每天晚間固定時間檢查誰今天還沒寫日記,才寄一封提醒信;如果今天已經寫過,就不會打擾你。為了保持「免費」,我用了 SendGrid 免費方案 + GitHub Actions 定時呼叫,避開了 Firebase Cloud Scheduler / Blaze Plan 的付費排程


今日目標

  1. 使用者可在設定中「開啟/關閉 Email 提醒」,並填寫收信 Email、提醒時區
  2. 每天固定時間檢查 Firestore:今天沒有日記 → 寄一封提醒信
  3. 今天寫過就不提醒
  4. 寄件人顯示為「Mood Journal」,信裡加一個連結,點進去就能直接寫日記。

開發過程

  1. SendGrid 設定
    SendGrid 建立 API Key
    https://ithelp.ithome.com.tw/upload/images/20250907/20140998tekCWxk6O6.png
    設定環境變數:
SENDGRID_API_KEY=xxxx
FROM_EMAIL=你的寄件地址

在程式裡用:
from: { email: process.env.FROM_EMAIL, name: 'Mood Journal' }
這樣 Gmail 就會顯示寄件人是 Mood Journal

  1. Firestore 驗證
    提醒需要檢查今天是否已有日記 → 所以要讀取 Firestore。
    這裡踩了大坑:一開始 workflow 一直報錯
    Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
    後來才發現是 Service Account 沒設對:
    必須去 Firebase Console → 專案設定 → Service accounts → 產生金鑰 JSON

在 GitHub Actions 裡設環境變數:

FIREBASE_PROJECT_ID=xxxx
CLIENT_EMAIL=firebase-adminsdk-xxx@xxx.iam.gserviceaccount.com
PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nxxxx\n-----END PRIVATE KEY-----\n"

注意 \n 要保留換行。另外,要確認 Firestore Security Rules 有允許 service account 存取,不然還是會被擋

  1. Workflow 設定
    我用 GitHub Actions 來每天跑一次

今日驗收 ✅

  1. 如果今天沒寫日記 → 收到一封 Email 提醒
  2. 信件內容包含「Mood Journal」寄件人 + 直接連到網站的連結
  3. 如果今天已經寫過 → 不寄信
    https://ithelp.ithome.com.tw/upload/images/20250907/20140998fJvZs0sVzw.png
  4. 用戶可以選擇是否要開啟通知
    https://ithelp.ithome.com.tw/upload/images/20250907/201409981wUMs2vQN2.png

明日預告

明天要處理 隱私與安全:強化 Firestore 規則,並嘗試在本地端加密日記內容,確保就算資料外流,別人也看不懂/images/emoticon/emoticon08.gif


如果你不想這麼麻煩,這些更省事(但可能不完全免費)

A. Firebase 原生流派(最直覺、最穩)
什麼:Cloud Scheduler ➜ 觸發 HTTPS Cloud Function ➜ 檢查 Firestore ➜ 寄信(SendGrid/Gmail)
優點:整套都在 GCP/Firebase,部署一次就穩
缺點:Cloud Scheduler/Functions 屬於計費服務(有免費額度,但不是純 0 元);要綁計費帳。
適合:不介意綁卡、要少踩坑的人

B. Cloudflare Workers(幾乎零成本、腳本派)
什麼:用 Workers 的 Scheduled Triggers 跑每日 Cron,程式裡用 Service Account 連 Firestore,寄 SendGrid
優點:免費額度夠用、部署簡單、速度快
缺點:要自己寫連 Firestore 的邏輯;Scheduled Triggers 在免費方案可用,但配額有限
適合:不想綁 GCP 計費、又不排斥寫一點雲端腳本的人

C. 無程式/低程式方案(最省腦力)
IFTTT / Make / Zapier:用「每天」+「Gmail/SendGrid」直接寄信
優點:幾分鐘就能用;不用維護程式
缺點:要「跳過已有日記」這個條件就比較難,除非你把日記同步到 Google Sheets 然後用條件判斷(免費額度有限)

OneSignal Web Push(或 PWA 本機通知):
優點:可做推播(不用 Email),有免費層;
缺點:使用者要同意推播;瀏覽器沒開時 Web Push 要靠伺服器發(又回到要伺服器)

D. 最偷懶但超實用的「無後端提醒」
Google Calendar:建立每天提醒事件,描述放「寫日記」+ 網站連結
優點:真的 0 成本、幾乎不會壞
缺點:無法「今天已寫就不提醒」

我這次的選擇與替代方案建議

我選 GitHub Actions + SendGrid Free:完全免費,還能在倉庫版控、可追蹤 Log
如果你要最穩最省心:選 Firebase Cloud Scheduler + Functions(但要綁卡,有免費額度)
如果你想省錢又少維運:選 Cloudflare Workers + SendGrid
如果你真的只想被提醒:直接 Google Calendar 事件 + 連結,兩分鐘搞定

今日的限制與思考

不過這套完全免費的方案也有一個限制:提醒時間是全域統一的
換句話說,所有開啟提醒的使用者,都會在同一個時間收到信,暫時沒辦法做到「我想早上 8 點收」、「他想晚上 10 點收」這種個人化提醒

如果要進一步支援「每個用戶自訂提醒時間」,就得用進階方案:

  • 多個 Workflow:分別在不同時段跑(例如早上/晚上),依照 Firestore 設定決定要不要寄信
  • Cloud Scheduler / Workers:每天排一次任務,讀 Firestore 裡每個人的「提醒時間」,有需要的才寄
  • Web Push 通知:完全跳過 Email,改用瀏覽器推播,甚至可以做即時提醒

目前我的需求是「全域每天提醒一次」就夠了,但如果要真正商業化,個人化提醒時間會是必須補強的功能


理論上 Day21 才會提部署,但我先嘗試把作品掛上去了/images/emoticon/emoticon25.gif
霓的情緒日記 歡迎點進去玩玩!
有什麼想法或建議都歡迎跟我說~(拜託不要攻擊我小小的網站 QQ)


上一篇
Day 16|30 天 Vibe Coding:用搜尋來找考試週的崩潰日記
下一篇
Day 18|30 天 Vibe Coding:日記是要跟我進墳墓的,誰都不能看
系列文
30 天 Vibe Coding:全端 × 機器學習的實作挑戰21
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言