前言

前面我們都是：

Postman
↓
GET /ai/rank-db

或：

GET /ai/next

這樣比較像在測試後端，不像是在使用 Todo 😂。。。

真正的使用者根本不用想：「我要去呼叫哪個 API 才能知道下一個任務？」

做到 Day 25，後端其實已經有不少功能了。

我們可以從 MySQL 取得任務、讓 AI 幫忙排序，也可以根據任務進度計算剩餘時間。

但目前這些功能幾乎都只能透過 Postman 看到。

所以今天先不繼續增加新的 AI 功能，而是換一個方向：

替目前的 AI Todo 做一個真正看得到的操作畫面。

先讓使用者可以直接在網頁上看到任務，之後再慢慢把前面做過的 AI 排序、完成任務等功能搬進來。

今天要做什麼？

今天先做最基本的 Todo 頁面。

畫面會先包含：

AI Todo
今天要做什麼？

準備期中考
截止日期：2026-10-10
重要程度：5
進度：50%

完成程式作業
截止日期：2026-10-12
重要程度：4
進度：20%

今天先把畫面的基本架構做好，先確認 Flask 可以正常顯示 HTML。

建立 templates 資料夾

Flask 預設會到 templates 資料夾尋找 HTML。

所以目前的專案可以整理成：

project/
│
├── app.py
│
├── templates/
│   └── index.html
│
└── ...

建立首頁 Route

在 app.py 引入 from flask import jsonify, render_template

接著在 app.py 新增：

@app.route("/")
def index():
    return render_template("index.html")

當我們開 http://127.0.0.1:5000/

Flask 就會去 templates 裡面尋找 index.html 把它顯示出來。

建立 index.html

在 templates/index.html加入：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Todo</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            margin: 0;
            padding: 40px;
        }

        .container {
            max-width: 700px;
            margin: auto;
        }

        h1 {
            margin-bottom: 5px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
        }

        .task {
            background: white;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 10px;
        }

        .task h2 {
            margin-top: 0;
        }

        .task p {
            margin: 8px 0;
            color: #555;
        }
    </style>
</head>

<body>

<div class="container">

    <h1>AI Todo</h1>
    <p class="subtitle">今天要做什麼？</p>

    <div class="task">
        <h2>準備期中考</h2>
        <p>截止日期：2026-10-10</p>
        <p>重要程度：5</p>
        <p>進度：50%</p>
    </div>

    <div class="task">
        <h2>完成程式作業</h2>
        <p>截止日期：2026-10-12</p>
        <p>重要程度：4</p>
        <p>進度：20%</p>
    </div>

</div>

</body>
</html>

今天先放兩筆測試資料。

這些資料還不是從 MySQL 抓出來的，目的只是先確認 Flask 可以成功顯示我們自己做的頁面。

打開網頁測試：

http://127.0.0.1:5000/

這次終於不是看到：

{
    "task_id": 1,
    "title": "準備期中考"
}

而是真的有一個 Todo 畫面了。

雖然目前畫面上的任務還是寫死的，但至少從今天開始，我們不再只有 Postman。

做到 Day 25，終於開始從「測試 API」慢慢走向「真的使用系統」。

今天沒有新增新的 AI 功能，而是先利用 Flask 的 render_template() 把原本只有 API 的專案做出一個真正看得到的網頁。。

目前頁面上的任務還是測試資料，但至少我們已經有一個可以直接打開的操作畫面。

下一篇就來把 MySQL 裡真正的任務放進這個頁面。