韓滷全端系統開發 / 網頁設計 / 伺服器託管 / AI 導入
Web 應用

小奶瓶日記 Feeding Memo — 寶寶餵養記錄 PWA + Telegram 機器人

全家共記寶寶餵奶、尿布、睡眠的 PWA:WHO 生長曲線、本地 AI 每日評鑑、台灣疫苗提醒、Telegram 免打字記錄與交接班推播,Android TWA 與桌面小工具。

小奶瓶日記 Feeding Memo — 寶寶餵養記錄 PWA + Telegram 機器人
小奶瓶日記 Feeding Memo — 寶寶餵養記錄 PWA + Telegram 機器人
首頁儀表板:下次喝奶預估、AI 評鑑摘要與今日摘要
首頁儀表板:下次喝奶預估、AI 評鑑摘要與今日摘要
今日時間軸:一天的餵奶、尿布、睡眠一目了然
今日時間軸:一天的餵奶、尿布、睡眠一目了然
瓶餵記錄視窗:母乳/配方切換、奶量快速加減
瓶餵記錄視窗:母乳/配方切換、奶量快速加減
統計頁:近 7 天總奶量、WHO 生長曲線與每日奶量
統計頁:近 7 天總奶量、WHO 生長曲線與每日奶量
AI 每日評鑑:現狀判讀、原因分析、行動建議三段式
AI 每日評鑑:現狀判讀、原因分析、行動建議三段式
疫苗接種:依生日自動排程、下一劑提醒
疫苗接種:依生日自動排程、下一劑提醒
家庭與寶寶管理:邀請碼把全家拉進同一本日記
家庭與寶寶管理:邀請碼把全家拉進同一本日記
提醒與預約:Web Push 加 Telegram 雙通道
提醒與預約:Web Push 加 Telegram 雙通道
睡眠音樂:白噪音循環播放與定時關閉
睡眠音樂:白噪音循環播放與定時關閉
帳號設定:8 種主題配色、14 種語言
帳號設定:8 種主題配色、14 種語言

這是什麼

寶寶出生後的頭幾個月,爸媽最常問彼此的一句話是「上一餐幾點喝的?喝多少?」。小奶瓶日記把這件事變成全家共用的一本日記:誰餵的奶、換的尿布、睡了多久,記下去之後另一半打開手機就看得到,不用再靠猜、靠問、靠半夜翻紙本。

這個專案作者自己家每天都在用,本頁所有截圖都是真實使用中的畫面,不是 demo 資料。

首頁:打開就知道下一步

首頁儀表板:下次喝奶預估、AI 評鑑摘要與今日摘要

首頁直接回答照顧者最想知道的三件事:

  • 下次預計喝奶時間:依定時提醒與近 7 天實際間隔推估,白天、夜間分開計算
  • 距上次喝奶多久、預估多久後會餓
  • 今日摘要:餵了幾次、總奶量、換了幾片尿布、睡了幾小時

再往下是快速記錄捷徑,親餵、瓶餵、尿布一鍵開表單。

記錄:8 種維度,補登、離線都行

今日時間軸:一天的餵奶、尿布、睡眠一目了然

時間軸一天一頁,記錄共 8 種:親餵/瓶餵、尿布(含 9 色便便色卡,對照兒童健康手冊)、睡眠、生長(身高/體重/頭圍)、擠奶、體溫、洗澡、隨手記。

瓶餵記錄視窗:母乳/配方切換、奶量 −/+ 快速鈕

幾個實際用起來有差的細節:

  • 親餵碼錶:左右邊切換計時、拍嗝可暫停;狀態以時間戳持久化,鎖屏、切 App、手機重開都不會丟
  • 瓶餵 −/＋ 快速鈕:每次 ±10cc,並記住上次奶量當預設值
  • 時間記「實際發生時間」,允許補登;離線也能記,連上網自動同步

統計與生長曲線

統計頁:近 7 天總奶量、WHO 生長曲線與每日奶量

週/月/年三種尺度看奶量、睡眠、尿布趨勢;生長曲線對照 WHO 參考區間(P3–P97 灰帶),體重、身高、頭圍分開看。另外兩個回診時特別有用的數字:平均喝奶間隔(白天/夜間分開)與平均瓶餵時長,醫生問「多久喝一次」不用再心算。

AI 每日評鑑

AI 每日評鑑:現狀判讀、原因分析、行動建議三段式

每天早上 8 點,AI 讀昨天一整天的記錄加近 7 天趨勢,產出三段式評鑑——現狀判讀、原因分析、行動建議,掛上狀態燈(🟢🟡🔴)與狀態標籤,並推播給全家。判讀會對照內建的 0–24 個月月齡基準值(奶量、睡眠、尿布參考區間,取自衛福部兒童健康手冊等衛教來源)。

幾個刻意的設計決策:

  • 跑在自家機器的本地 LLM(Ollama)上,寶寶記錄不送第三方雲端 AI
  • prompt 強制保守:出現危險徵兆一律建議就醫,頁面固定醫療免責聲明
  • 每則評鑑可 👍👎 回饋,後台追蹤滿意度

疫苗接種提醒

疫苗接種:依生日自動排程、下一劑提醒

內建台灣 114/115 年版兒童常規接種時程(公費 9 種+常見自費項目),依寶寶生日自動排出 0–5 歲完整時程。提前 7 天與當天提醒、逾期每週催,超過硬性期限(如輪狀病毒首劑 15 週上限)自動停催並標示。輪狀 2 劑/3 劑、五合一/六合一等方案可切換,選六合一會自動把 B 肝第 3 劑標成「已涵蓋」。

家庭共享

家庭與寶寶管理:邀請碼把全家拉進同一本日記

一組邀請碼把另一半、爺爺奶奶、保母都拉進同一個家庭;每筆記錄都標了誰記的、從哪記的(網頁或 Telegram)。訂閱是「一人付費、全家解鎖」。

Telegram 機器人:免打字的交接班

綁定 @FeedingMemobot 之後,整支機器人全選單操作,長輩不用學打字:點「餵奶」、選奶量,記錄完成。家裡任何人記了一筆,其他人的 Telegram 會收到交接班推播——「寶寶剛喝了 160cc」直接出現在聊天室。

提醒與預約:Web Push 加 Telegram 雙通道

提醒走雙通道:Web Push 加 Telegram,擠奶、喝奶、打針提醒不漏接。定時提醒從最後一次餵奶起算,自動順延。

PWA + Android

睡眠音樂:白噪音循環播放與定時關閉

  • 免安裝,加到主畫面就是全螢幕 App;iOS 也支援 Web Push
  • Android 以 TWA 打包,含原生桌面小工具:桌面直接看「下次餵奶時間、還有多久會餓」,吉祥物表情會隨寶寶餓的程度變化
  • 長按圖示有快速捷徑(快速記餵奶、換尿布);推播同步點亮圖示徽章
  • 睡眠音樂:羊水聲白噪音無限循環,可定時關閉、保持螢幕喚醒

帳號設定:8 種主題配色、14 種語言

介面 8 種主題配色、14 種語言,深淺色跟隨系統。

訂閱

前 30 天免費試用,月繳 NT$90、年繳 NT$900,一人付費全家解鎖。刷卡走統一金流 PAYUNi 加密處理,卡號不經手、不儲存。

技術架構

  • Nuxt 4(Vue 3 SSR)+ Nitro,前後端同一個 runtime;PWA 以 injectManifest 自訂 Service Worker(含 iOS Web Push)
  • PostgreSQL 16 + Drizzle ORM,schema 進版控、migration 自動化
  • 認證:sealed session cookie + argon2 雜湊,Email 驗證碼與 Google OAuth 雙登入
  • Telegram Bot 走 webhook 模式;i18n 14 語系以鍵結構一致性驗證把關
  • 部署:Docker Compose 跑在 AWS EC2(Graviton ARM64),Nginx Proxy Manager 反代 + Cloudflare;一鍵部署腳本 tar-over-SSH 送源碼、主機端 build
  • 權限一律在應用層以 family_id 過濾,不信任前端傳入的 id;後台獨立帳密登入 + Cloudflare Access 硬化

功能亮點

  • 親餵/瓶餵、尿布、睡眠、生長等 8 種記錄維度,支援補登與離線記錄
  • 首頁預估下次喝奶時間:依近 7 天實際間隔,白天/夜間分開計算
  • 親餵碼錶:左右邊切換、拍嗝暫停,鎖屏或重開手機都不會丟
  • WHO 生長曲線(P3–P97)與週/月/年統計、喝奶間隔分析
  • AI 每日評鑑:本地 LLM 三段式判讀+狀態標籤+0–24 月齡基準值
  • 台灣兒童疫苗時程自動排程,逾期催辦、過硬性期限自動停催
  • 家庭邀請碼共享,一人付費全家解鎖
  • Telegram 機器人全選單免打字記錄+交接班推播
  • Web Push + Telegram 雙通道提醒(含 iOS)
  • Android TWA + 原生桌面小工具(吉祥物表情隨飢餓程度變化)
  • 14 種語言、8 種主題配色、睡眠白噪音

常見問題

小奶瓶日記要付費嗎?
前 30 天免費試用,之後月繳 NT$90 或年繳 NT$900;家庭裡只要一個人訂閱,全家成員都解鎖。
不會打字的長輩也能記錄嗎?
可以。綁定 Telegram 機器人後全程點選單:點「餵奶」、選奶量就記好了,家人同步收到通知。
需要下載 App 嗎?
不用,瀏覽器加到主畫面就是全螢幕 App,iOS 也收得到推播;Android 另有 TWA 版與桌面小工具。
AI 評鑑會取代醫生嗎?
不會。它只根據記錄做保守的日常判讀,出現危險徵兆一律建議就醫,頁面固定放醫療免責聲明。
寶寶的資料安全嗎?
資料存在自架資料庫,AI 評鑑用自家本地模型,不把記錄送給第三方 AI 服務;所有 API 都以家庭為界做權限檢查。
← 回作品集