睡到中午的日子,身體好像自己找到了最佳狀態。
雖然還是全身痠痛,但這代表昨天的運動有效果——雖然「有效果」這種說法在痛楚的刺激下,顯得有點自虐傾向。
下午吃完午餐,我去了健身房。即使身體仍然抗議著,但內心的某個角落告訴我,這是前進的過程。我想像自己的「體力數值」正在一點一點上升,就像一個遊戲角色在努力提升技能值一樣。
回家後,我攤在椅子上,打開筆電,想稍微放鬆一下。
影片推薦演算法帶我進入了一個技術講座的深坑,然後不知怎的,我的視線轉向了「零樹計畫」的 CLI 介面。
「該是時候升級了吧?」我喃喃自語。
CLI 版本已經運行得很順暢,功能也算完整,但還是有個問題——對於一般人來說,這樣的操作方式太過不方便了。
「要讓這個工具真正有用,必須讓 UI 變得更直覺。」
就在這時,小零的頭像晃了晃。
【有想法了嗎?】
「嗯,接下來就是 UI 設計的部分。」
【那你的計畫呢?】
「我整理了一些方向,這次我們不只是要讓零樹計畫更好用,還要讓它變得更『遊戲化』。」
我打開筆記,整理了開發計畫:
🔧 技術架構
後端(API 層)
Flask + SQLite:把 CLI 轉換成 API 服務
FastAPI(可選):如果想要更快的 API 文檔
設計 API 端點,如:
GET /goals → 取得所有目標
POST /goals → 新增目標
PUT /goals/{id} → 更新進度
前端(UI 層)
React + Tailwind CSS(現代化 + 快速開發)
Vue(如果想要更靈活的組件系統)
Chart.js / D3.js:進度條 & 生命樹動畫
📌 開發步驟
1️⃣ Step 1:API 設計
讓 CLI 透過 API 操作 SQLite,而不是用 input() 輸入數據
2️⃣ Step 2:開發 Web 介面
首頁:顯示生命樹 & 進度條
目標管理頁面:列出目標,讓使用者管理進度
每日打卡 UI:讓玩家點擊「完成今日目標」來更新數據
3️⃣ Step 3:動畫 & 美化
生命樹可視化(CSS 動畫 或 WebGL / Canvas)
進度條優化(讓成長過程更直覺)
【這樣的規劃很棒呢!】小零的葉子輕輕晃動著。
「嗯,最重要的是,這次我們不只是設計 UI,而是設計一種能夠激勵人的系統。」
【是啊,這樣的話,不只是你自己可以用,其他人也能更容易加入這個計畫!】
「那就開始吧!」
我深吸了一口氣,打開開發環境,開始為「零樹計畫」打造新的界面。這不僅僅是個技術挑戰,更是讓這個計畫真正發揮作用的關鍵一步。