鐵人檔案
「AI × Web：生活魔法方程式」是一場把人工智慧融入日常網頁應用的探索旅程。透過簡單的程式實作，我們將 AI 技術化為生活中的小魔法——從智慧聊天、學習助手到即時資訊服務，讓網頁不只是資訊展示的平台，而是能主動理解、互動、甚至解決問題的夥伴。
這幾天的專案讓我一步步完成了一個簡單的智慧聊天機器人。從前端畫面設計開始，到加入互動功能，再到建立後端 API 串接 Gemini，每個階段都很清楚地看到功能慢...
前幾天我嘗試做了一個智慧聊天機器人，用 React 打造前端介面，串接 Gemini API，讓機器人能回答問題、跟我互動。結果 Gemini API 一直沒成...
每天出門前，最常遇到的一個問題就是──今天的天氣怎麼樣？要不要帶傘？氣溫會不會太低？這些都會影響我們的行程安排。雖然現在手機都有內建的天氣 App，但如果能自己...
大家有沒有過這種情況：準備出門的時候，突然猶豫要不要帶傘，打開手機的氣象 App 看看天氣，結果心裡冒出一個疑問——「欸，這些即時資料到底是從哪裡跑出來的啊？」...
「 今天先不急著串後端 API，我們的目標是打造一個簡單的前端畫面。先有輸入框、查詢按鈕、還有結果顯示區，這樣就有了『小工具的雛形』。雖然資料還是假的，但你可以...
「 有了基本畫面後，接下來就是讓它看起來更像 App，而不是簡單的 HTML。今天我們要加入 CSS 或套件（Bootstrap / Tailwind），調整輸...
「只有文字的顯示有點單調，今天我們加上天氣圖示。晴天就有太陽、雨天就有雨傘，用圖示讓資訊更直觀，也讓使用者一眼就知道天氣狀況，增加互動樂趣。」 內容重點： 從...
「畫面有了，但沒有資料就像蓋房子沒水電。今天我們用 Node.js + Express 建立一個簡單的後端 API，先回傳假資料，讓前端可以抓到資料並顯示。這也...
「今天後端不再回傳假資料，而是直接去 OpenWeather API 拿即時天氣。從這一步開始，你的天氣小工具就真正能顯示即時資訊了！」 內容重點： 使用 f...
「今天我們要把前端跟後端接起來，使用者輸入城市，按下查詢就可以看到即時天氣與圖示。這才是真正能運作的小工具！」 內容重點： fetch 後端 /weather...
