一、前言

在前十二天的學習中，我已經完成個人健康習慣追蹤系統的需求分析、資料欄位設計，並學習使用 Python、List、Dictionary、Pandas、CSV 與 SQLite 處理健康紀錄。同時，也了解如何透過資料驗證，避免空白欄位、錯誤格式與不合理的數值影響系統運作。

然而，目前的程式大多透過終端機輸入資料，使用者需要在文字介面中輸入指令或查看輸出結果，操作方式並不直覺。

為了讓系統更接近實際應用，今天將開始學習 Streamlit。Streamlit 是一套可以使用 Python 建立互動式網頁應用程式的工具，不需要先學習 HTML、CSS 或 JavaScript，就能建立基本的網頁介面。

今天的目標是建立健康習慣追蹤系統的第一個網頁版本，讓使用者可以直接在網頁上查看標題、閱讀說明、輸入文字及點擊按鈕。

二、認識 Streamlit

Streamlit 是以 Python 為基礎的網頁應用程式框架，適合用來建立資料展示、資料分析與互動式工具。

在本專案中，Streamlit 可以負責呈現健康紀錄表單、顯示歷史資料，以及呈現睡眠時間、喝水量與運動時間等統計結果。

使用 Streamlit 的優點包括：

容易入門： 可以直接使用 Python 語法建立網頁。

互動性高： 提供按鈕、文字輸入框、數字輸入框與日期選擇器等元件。

適合資料展示： 可以搭配 Pandas 顯示資料表，並使用圖表呈現健康習慣的變化。

方便整合： 能將先前學習的 Python 邏輯與資料處理方法整合到同一個應用程式中。

因此，Streamlit 很適合作為本次健康習慣追蹤系統的前端介面工具。

三、安裝與啟動 Streamlit

在開始撰寫程式之前，需要先確認電腦已經安裝 Python，並準備好可以編輯 Python 程式的工具，例如 VS Code。

接著，開啟終端機並輸入以下指令，安裝 Streamlit：

pip install streamlit

如果電腦使用 python3 執行 Python，也可以使用：

python3 -m pip install streamlit

安裝完成後，可以輸入以下指令，確認 Streamlit 是否能正常使用：

python -m streamlit hello

如果系統使用 python3，也可以改用：

python3 -m streamlit hello

成功啟動後，通常會自動開啟瀏覽器並顯示 Streamlit 的示範網頁。如果沒有自動開啟，也可以查看終端機顯示的本機網址，通常會是 http://localhost:8501。

如果出現找不到指令或模組的錯誤，可以先確認安裝套件與執行程式使用的是不是同一個 Python 環境。

四、建立第一個 Streamlit 網頁

確認環境可以正常執行後，建立一個新的 Python 檔案，命名為 app.py。

接著輸入以下程式碼：

import streamlit as st

st.title("個人健康習慣追蹤系統")

st.subheader("記錄每天的健康生活")

st.write(
"透過每日紀錄，觀察自己的睡眠、喝水量與運動習慣。"
)

st.markdown("### 今日目標")

st.write("- 記錄每日喝水量")
st.write("- 記錄每日睡眠時間")
st.write("- 記錄每日運動時間")

st.success("健康習慣追蹤系統已成功啟動！")

儲存檔案後，在終端機切換到 app.py 所在的資料夾，再執行：

python -m streamlit run app.py

如果使用 python3，則可以執行：

python3 -m streamlit run app.py

成功啟動後，瀏覽器就會顯示剛剛建立的網頁。

認識程式中的主要指令

這些指令能夠將原本終端機中的文字輸出，轉換成更清楚的網頁內容。

五、加入互動元件

除了顯示文字，Streamlit 也可以讓使用者直接與網頁互動。

例如，在健康習慣追蹤系統中，可以加入文字輸入框，讓使用者輸入自己的姓名，再透過按鈕顯示歡迎訊息。

請將 app.py 的內容改成以下程式碼：

import streamlit as st

st.title("個人健康習慣追蹤系統")

st.write("歡迎使用健康習慣追蹤系統！")

name = st.text_input("請輸入你的稱呼")

if st.button("開始使用"):
if name.strip() == "":
st.warning("請先輸入稱呼。")
else:
st.success(f"你好，{name}！今天也一起記錄健康習慣吧。")

這段程式加入了三個新的概念：

st.text_input()：建立文字輸入框，讓使用者輸入內容。

st.button()：建立按鈕，讓使用者觸發指定的操作。

st.warning()：顯示提醒訊息，例如使用者尚未輸入稱呼。

其中，name.strip() == "" 用來檢查輸入內容是否為空白，即使使用者只輸入空格，也會顯示提醒訊息。

當使用者輸入稱呼並點擊「開始使用」時，網頁就會顯示對應的歡迎訊息。

六、了解 Streamlit 的執行方式

在使用 Streamlit 時，有一個重要觀念：當使用者與元件互動時，Streamlit 通常會重新執行整份 Python 程式。

例如，使用者輸入稱呼或點擊按鈕後，程式會重新執行，並根據最新的互動狀態更新畫面。

這種執行方式讓開發者可以使用相對簡單的 Python 程式建立互動介面。不過，如果未來要在不同操作之間保留資料，就需要進一步了解狀態管理，例如 st.session_state。

另外，今天建立的網頁目前只有顯示內容與處理簡單互動，尚未真正將健康資料儲存至 CSV 或 SQLite。後續會再逐步整合資料輸入、保存與查詢功能。

七、今日實作步驟

今天的實作目標是成功建立並啟動第一個網頁，建議依照以下順序進行：

確認電腦已安裝 Python。

使用 pip install streamlit 安裝 Streamlit。

建立 app.py，加入標題、說明文字與健康目標清單。

使用 python -m streamlit run app.py 啟動網頁。

確認瀏覽器能正常顯示內容。

加入文字輸入框與按鈕，測試不同的輸入情況。

分別測試空白輸入與正常輸入，確認系統會顯示不同訊息。

如果程式出現錯誤，可以先檢查檔案名稱、縮排、套件是否安裝完成，以及終端機目前所在的資料夾是否正確。

八、今日成果與學習心得

透過今天的學習，我初步認識了 Streamlit 的用途，並成功將原本以終端機操作的 Python 程式，轉換成可以在瀏覽器中使用的互動式網頁。

今天學習了基本的網頁文字呈現方式，也練習使用文字輸入框、按鈕與提醒訊息，讓使用者能夠直接透過介面與程式互動。

這代表專案正式從前期的需求分析與資料處理，進入實際的介面開發階段。雖然目前的網頁還沒有完整的健康紀錄功能，但已經建立了後續開發的基礎。

九、下一步學習方向

Day 14 將進一步學習「健康紀錄表單設計：輸入每日生活習慣」。

屆時會運用 Streamlit 提供的數字輸入框、日期選擇器與其他互動元件，設計每日健康紀錄表單，讓使用者可以輸入日期、喝水量、睡眠時間與運動時間等資料，逐步建立健康習慣追蹤系統的主要操作介面。