系列文章
DAY 11
Day11.智慧聊天機器人-總結
這幾天的專案讓我一步步完成了一個簡單的智慧聊天機器人。從前端畫面設計開始，到加入互動功能，再到建立後端 API 串接 Gemini，每個階段都很清楚地看到功能慢...
DAY 13
Day13.打造屬於自己的天氣查詢小工具
每天出門前，最常遇到的一個問題就是──今天的天氣怎麼樣？要不要帶傘？氣溫會不會太低？這些都會影響我們的行程安排。雖然現在手機都有內建的天氣 App，但如果能自己...
DAY 14
Day14.認識 Weather API
大家有沒有過這種情況：準備出門的時候，突然猶豫要不要帶傘，打開手機的氣象 App 看看天氣，結果心裡冒出一個疑問——「欸，這些即時資料到底是從哪裡跑出來的啊？」...
DAY 15
Dat15.打造一個簡單的天氣查詢前端
「 今天先不急著串後端 API，我們的目標是打造一個簡單的前端畫面。先有輸入框、查詢按鈕、還有結果顯示區，這樣就有了『小工具的雛形』。雖然資料還是假的，但你可以...
DAY 16
Day16.前端小改造
「 有了基本畫面後，接下來就是讓它看起來更像 App，而不是簡單的 HTML。今天我們要加入 CSS 或套件（Bootstrap / Tailwind），調整輸...
DAY 17
Day17.天氣圖示登場
「只有文字的顯示有點單調，今天我們加上天氣圖示。晴天就有太陽、雨天就有雨傘，用圖示讓資訊更直觀，也讓使用者一眼就知道天氣狀況，增加互動樂趣。」 內容重點： 從...
DAY 18
Day18.後端 API 雛形
「畫面有了，但沒有資料就像蓋房子沒水電。今天我們用 Node.js + Express 建立一個簡單的後端 API，先回傳假資料，讓前端可以抓到資料並顯示。這也...
DAY 19
Day19.串接 OpenWeather API
「今天後端不再回傳假資料，而是直接去 OpenWeather API 拿即時天氣。從這一步開始，你的天氣小工具就真正能顯示即時資訊了！」 內容重點： 使用 f...
DAY 20
Day20.前後端整合
「今天我們要把前端跟後端接起來，使用者輸入城市，按下查詢就可以看到即時天氣與圖示。這才是真正能運作的小工具！」 內容重點： fetch 後端 /weather...