Scratch 外部資料串接教學：用天氣 API 打造互動氣象站專案

嗨，小朋友們！你有沒有想過，手機上的天氣 App 是怎麼知道今天會不會下雨的呢？其實它們都是透過一種叫做「API」的東西，跟氣象站的電腦要資料。今天佩珊老師要帶你用 Scratch 也來做一個超酷的互動氣象站，讓你的程式能夠「讀懂」真正的天氣資料！

這個專案會用到變數、條件判斷和清單等觀念，如果你已經有做過一些 Scratch 小遊戲的經驗（像是 接球遊戲 那種程度），那你就完全可以跟上囉！

什麼是 API？用生活例子讓小朋友秒懂

API 的全名是 Application Programming Interface，翻成中文叫「應用程式介面」——但這聽起來好像很難對不對？別擔心，讓我用一個超簡單的比喻來解釋。

想像你去餐廳吃飯。你不能直接跑進廚房跟廚師說你要什麼，對吧？你需要透過服務生來點餐。你告訴服務生「我要一碗牛肉麵」，服務生就會去廚房幫你傳話，然後把做好的牛肉麵端出來給你。

在程式的世界裡，API 就是那個「服務生」：

• 你的程式 = 客人（想要資料的人）
• API = 服務生（幫忙傳遞訊息）
• 資料庫/伺服器 = 廚房（真正有資料的地方）

所以當我們說「用 Scratch 串接天氣 API」，意思就是讓你的 Scratch 程式透過 API 這個服務生，去跟氣象資料庫要今天的天氣資訊。很酷吧！

Scratch 可以串接外部資料嗎？

你可能會問：「Scratch 不是做遊戲的嗎？真的可以連到網路上拿資料？」

答案是——可以的！不過原版的 Scratch 確實有一些限制。我們要用到的是一些特別的擴充功能。最常用的方式有兩種：

• TurboWarp：這是一個加強版的 Scratch 平台，支援「Fetch」擴充積木，可以直接從網路上抓取資料。速度也比原版快很多！
• Scratch 雲端變數搭配外部程式：透過雲端變數當作橋梁，把外部資料傳進 Scratch 裡。如果你對雲端變數有興趣，可以看看 Scratch 雲端變數多人遊戲教學。

今天我們會用 TurboWarp 的 Fetch 擴充功能來做，因為它最簡單直覺，小朋友也很容易上手。

氣象站專案總覽

在開始動手之前，讓我們先看看完成後的氣象站會有什麼功能：

• 點擊按鈕就能取得指定城市的即時天氣
• 螢幕上會顯示溫度、天氣狀況和濕度
• 根據不同天氣自動切換背景動畫（晴天出太陽、雨天飄雨滴）
• 有可愛的氣象播報員角色幫你報天氣

聽起來是不是很有趣？那我們開始吧！

Step 1：建立角色與舞台背景

首先，打開 TurboWarp（到 turbowarp.org 就可以用），然後做以下準備：

舞台背景：

• 畫或上傳三個背景：「晴天」（藍天白雲）、「雨天」（灰色天空加雨滴）、「陰天」（多雲的天空）
• 你可以直接用 Scratch 的繪圖工具來畫，不需要畫得很精緻，重點是能分辨就好

角色準備：

• 氣象播報員：可以從角色庫選一個你喜歡的人物，或自己畫一個拿著麥克風的小人
• 太陽：畫一個黃色的太陽，晴天時顯示
• 雨滴：畫幾滴水滴，雨天時會從上面落下
• 查詢按鈕：畫一個寫著「查天氣」的按鈕
• 溫度顯示板：一個長方形，用來顯示溫度數字

Step 2：建立天氣變數

接下來我們要建立幾個變數來儲存天氣資料。在 Scratch 裡，變數就像一個小盒子，可以幫你記住東西。

請建立以下變數（都選「適用於所有角色」）：

• 城市名稱 — 儲存要查詢的城市
• 目前溫度 — 儲存溫度數值
• 天氣狀況 — 儲存天氣描述（晴、雨、陰等）
• 濕度 — 儲存濕度百分比
• API回傳資料 — 暫時儲存從 API 拿到的原始資料

建立好之後，先把城市名稱設定為「Taipei」（因為天氣 API 通常用英文城市名）。

Step 3：取得天氣資料

這是最關鍵的一步！我們要加入 Fetch 擴充功能來連接天氣 API。

加入擴充功能：

• 點擊左下角的「擴充功能」按鈕
• 找到並選擇「Fetch」擴充功能
• 你會看到新的綠色積木出現在積木區

組合積木：

在「查詢按鈕」這個角色上，加入以下程式邏輯：

當這個角色被點擊
將 [API回傳資料] 設為 (fetch [https://wttr.in/Taipei?format=j1])

// 解析溫度
將 [目前溫度] 設為 (API回傳資料 的第 [temp_C] 項資料)

// 解析天氣狀況  
將 [天氣狀況] 設為 (API回傳資料 的第 [weatherDesc] 項資料)

// 解析濕度
將 [濕度] 設為 (API回傳資料 的第 [humidity] 項資料)

廣播訊息 [天氣更新了]

這裡我們使用的是 wttr.in 這個免費的天氣 API，它不需要申請金鑰（API Key），對初學者來說最方便。回傳的資料是 JSON 格式，TurboWarp 的 Fetch 積木可以幫我們處理。

小提醒：實際在 TurboWarp 裡面，解析 JSON 需要搭配「字串處理」的積木。如果你覺得解析比較難，也可以用 wttr.in/Taipei?format=3 這種簡化格式，它會直接回傳像「Taipei: ☀️ +28°C」這樣的文字，比較好處理。

Step 4：用條件判斷切換天氣動畫

拿到天氣資料之後，最有趣的部分來了——根據不同天氣顯示不同動畫！

在舞台的程式裡加入：

當收到訊息 [天氣更新了]
如果 <(天氣狀況) 包含 [Sunny]> 那麼
  背景換成 [晴天]
否則 如果 <(天氣狀況) 包含 [Rain]> 那麼
  背景換成 [雨天]
否則
  背景換成 [陰天]
結束

在太陽角色裡加入：

當收到訊息 [天氣更新了]
如果 <(天氣狀況) 包含 [Sunny]> 那麼
  顯示
  重複 10 次
    右轉 5 度
    等待 0.1 秒
    左轉 5 度
    等待 0.1 秒
  結束
否則
  隱藏
結束

在雨滴角色裡加入：

當收到訊息 [天氣更新了]
如果 <(天氣狀況) 包含 [Rain]> 那麼
  顯示
  重複 20 次
    建立 [自己] 的分身
    等待 0.2 秒
  結束
否則
  隱藏
結束

當分身產生
定位到 x: (隨機取數 -200 到 200) y: 180
重複直到 <(y 座標) < -170>
  y 改變 -8
結束
分身刪除

這樣一來，如果天氣是晴天，太陽就會開心地左右搖擺；如果是雨天，雨滴就會從天上嘩啦嘩啦掉下來。是不是超生動的？

Step 5：美化你的氣象站

基本功能完成之後，讓我們來把氣象站變得更漂亮、更專業！

溫度顯示效果：

• 讓氣象播報員用「說出」積木來播報天氣：「今天台北的溫度是 28 度，天氣晴朗唷！」
• 把溫度數字用大字顯示在溫度顯示板上
• 如果溫度超過 35 度，讓數字變成紅色；低於 15 度變成藍色

加入音效：

• 晴天播放歡快的音效
• 雨天播放雨聲
• 按下查詢按鈕時有「叮」一聲的回饋音

城市切換功能：

• 加入一個「詢問」積木，讓使用者可以輸入不同的城市名稱
• 把輸入的答案存到城市名稱變數裡
• 這樣你就能查全世界任何城市的天氣了！

挑戰延伸：加入更多功能

如果你已經完成了基本的氣象站，這裡有幾個進階挑戰給你試試看：

• 五天天氣預報：wttr.in 的 API 其實會回傳未來幾天的天氣，試試看能不能做一個五天預報的畫面。
• 穿衣服建議：根據溫度給出穿衣建議——溫度高於 30 度就說「穿短袖就好」，低於 20 度就說「記得帶外套」。
• 加入地圖：在背景上畫一個簡單的地圖，點擊不同城市就能查該地的天氣。
• 結合 AI 辨識：如果你想挑戰更進階的，可以參考 Scratch AI Teachable Machine 教學，讓氣象站結合 AI 功能！

結語：從氣象站出發，探索更大的程式世界

恭喜你完成了這個氣象站專案！回想一下，今天你學到了好多東西：

• API 是什麼，以及它怎麼幫程式取得外部資料
• 怎麼用 TurboWarp 的 Fetch 擴充功能連接網路 API
• 用變數來儲存和管理資料
• 用條件判斷來做出不同的反應
• 用分身製作雨滴動畫
• 用廣播訊息讓不同角色協同工作

這些觀念不只是做氣象站會用到，未來不管你學什麼程式語言——Python、JavaScript、或任何其他語言——API 串接和條件判斷都是最基礎、最重要的技能。

最厲害的是，你現在已經知道程式不只是在電腦裡面自己玩而已，它可以連到外面的世界，拿到真正的即時資料。這就是程式真正有趣的地方！

如果你做出了很棒的氣象站，記得分享到 Scratch 社群上讓大家看看唷。也歡迎在下面留言告訴佩珊老師你遇到的問題或是你加了什麼有趣的功能，我們下次見！