本日重點

• 了解如何將用戶每筆美食資料與圖片，結合 Web3 數位健康護照做打卡紀錄
• 學習打卡流程設計，將行為資料與區塊鏈記錄串接
• 實作最小可行 MVP（極簡 UI 先驗證功能）
• 掌握 Web2 與 Web3 整合方式，為個人健康資料建立可驗證、可收藏的鏈上足跡

一、專案進度回顧

從首頁輸入完餐點資訊，AI營養顧問就會即時運算出個人化分析結果，顯示於 result.html。

Day26 有提到這時資訊尚未儲存至資料庫，只有當使用者主動點擊「儲存這筆資料」時，資料才會進入 SQLite，按鈕也會即時變為「已儲存」。

當按鈕文字出現「已儲存」後，就可以在「查詢飲食紀錄」的頁面看到使用者的飲食紀錄。這是從「輸入→AI運算→手動儲存」到「查詢紀錄」的完整Web2流程。

二、接下來的任務：Web3 打卡

當使用者按下「儲存這筆資料」後，將進一步於「數位健康護照」頁面產生打卡紀錄，這不再只是單純的本地資料，而是帶有「可驗證」屬性的個人健康足跡。

這個功能的核心，就是要讓使用者能夠 留下可驗證的紀錄，並且能在之後查詢、展示，甚至透過鏈上技術獲得額外的價值。

1. 輕量 MVP 快速驗證：先完成一個可運作的 Web3 打卡小專案

類似以往 Hugging Face Spaces + Gradio 部署經驗，初期會先以單一 app.py 打造，先用最小可行專案（MVP）快速驗證想法，確保能跑起來並展示核心功能。

Hugging Face Spaces + Gradio 的部署，請參閱：

• Day9. Hugging Face Spaces 部署實作 Ep. 1：Gradio Chatbot
• Day10. Hugging Face Spaces 部署實作 Ep. 2：用 Google Colab 串接 Hugging Face API (+ Gradio)

示意流程圖

（圖片由 Copilot 協助生成）

2. 與原有專案功能整合 + TDD 擴充

當獨立 MVP 順利運作，下一步會將 Web3 打卡融入原本 Flask 專案，並用 TDD（測試驅動開發）確保穩定可維護。這裡，每段程式都會經過自動測試，確保新功能不會影響原有設計，並且能與既有系統無縫結合，實現 Web2 與 Web3 的串接。

三、延伸閱讀

• MetaMask 打卡與互動流程範例
• 3分鐘了解Web3是什麼？