今天只有安裝 Web3 這部分是新的進度，其餘大部分內容在前面３０天的 AI 營養師專案中都有介紹過，就當作是複習囉～

一、專案目錄結構

在根目錄下建立一個全新的專案資料夾，並規劃基本結構：

web3-checkin/
│
├── app.py              # Flask 主程式
├── init_db.py          # 初始化資料表
├── db.sqlite3          # SQLite 資料庫
├── requirements.txt    # 套件需求
├── static/             # 靜態檔案（圖片、CSS）
├── templates/          # 前端模板（Flask）
└── frontend/           # Gradio (或 Streamlit)

二、建立虛擬環境與安裝套件

# 建立虛擬環境
python -m venv venv
source venv/bin/activate   # Mac/Linux
venv\Scripts\activate      # Windows

# 安裝必要套件
# gradio streamlit 擇一即可(兩個都裝也可以)
pip install flask sqlalchemy web3 gradio streamlit

requirements.txt 可以這樣寫：

flask
sqlalchemy
web3
gradio
streamlit

三、Flask + SQLite 最小範例

1. 先在 app.py 寫一個最小可行的 Flask API:

from flask import Flask, jsonify
import sqlite3

app = Flask(__name__)

@app.route("/")
def hello():
    return jsonify({"message": "Web3 Check-in API is running!"})

if __name__ == "__main__":
    app.run(debug=True)

啟動後，瀏覽 http://127.0.0.1:5000/ ，會看到：

2. 初始化 SQLite

建立一個簡單的資料表 users 與 checkins：在 init_db.py 加入以下程式碼

# 匯入 sqlite3 模組，用於操作 SQLite 資料庫
import sqlite3 

# 連接到名為 "db.sqlite3" 的資料庫檔案。
# 如果檔案不存在，則會自動建立它。
conn = sqlite3.connect("db.sqlite3")
# 建立一個 cursor（游標）物件，用於執行 SQL 命令
c = conn.cursor()

# 執行 SQL 命令來建立 'users' 資料表 (如果它不存在的話)
c.execute("""

# 建立 'users' 資料表，如果它不存在
CREATE TABLE IF NOT EXISTS users ( 

    # 'id' 欄位：整數，主鍵，自動遞增
    id INTEGER PRIMARY KEY AUTOINCREMENT, 
    
    # 'address' 欄位：文字，必須是唯一的
    address TEXT UNIQUE 
)
""")

# 執行 SQL 命令來建立 'checkins' 資料表 (如果它不存在的話)
c.execute("""

# 建立 'checkins' 資料表，如果它不存在
CREATE TABLE IF NOT EXISTS checkins ( 

    # 'id' 欄位：整數，主鍵，自動遞增
    id INTEGER PRIMARY KEY AUTOINCREMENT, 
    
    # 'user_id' 欄位：整數，用於連結到 'users' 資料表
    user_id INTEGER, 
    
    # 'cid' 欄位：文字，可能用於儲存某種識別碼
    cid TEXT, 
    
    # 'timestamp' 欄位：日期時間，預設值為目前的系統時間
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP, 
    
    # 定義外鍵：'user_id' 參考 'users' 資料表的 'id'
    FOREIGN KEY(user_id) REFERENCES users(id) 
)
""")

# 提交（儲存）所有在資料庫上執行的變更
conn.commit()
# 關閉資料庫連線，釋放資源
conn.close()

記得要執行 python init_db.py 資料表才會被建立

3. 檢查 SQLite 資料庫是否成功建立

方法一： 下載 DB Browser for SQLite（圖形介面）

安裝後，開啟 db.sqlite3 檔案，就會看到：

方法二：新增一個 Flask API 來驗收資料庫

在 app.py 裡加一個 /db-check 路由，回傳目前資料表的內容

@app.route("/db-check", methods=["GET"])
def db_check():
    
    # 加上 try/except 來捕捉錯誤
    try:
        conn = sqlite3.connect("db.sqlite3")
        c = conn.cursor()
        c.execute("SELECT * FROM users")
        rows = c.fetchall()
        conn.close()
        return jsonify({"users": rows})
    except Exception as e:
        return jsonify({"error": str(e)})

瀏覽 http://127.0.0.1:5000//db-check ，會看到：

四、下一篇進度預告

會加入 MetaMask 登入與 SIWE，讓使用者能用錢包簽名登入，正式進入 Web3 的世界。

五、延伸閱讀

• Dapp 前端串接 MetaMask 範例