:::info
本文件連結：https://hackmd.io/ArNVr1GmSWeukcpphSxb8g
此為 2025 VibeCoding 公益體驗營課程資料，相關資源僅授權給該課程學員。
:::

# 第四週：申請 API 好簡單，資訊安全要把關！做自己的個人天氣服務全端系統吧！

* 記得錄影 / screen flow

## 成就
* [本日 QA](https://discord.com/channels/801807326054055996/1428276857266110534/1443570595647324283)
* 小節作業 1250 份
* 主線任務 1680 份
* 每日任務 2215 人次打卡

## [API](https://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3) 介紹
Application Programming Interface 應用程式介面
透過介面來發網路請求，與伺服器交換資料

**API 文件**：串接API的使用說明書
* [2021 年前端/UI 從業人員現況問卷調查 API](https://github.com/hexschool/2021-ui-frontend-job)
* [TDX API](https://tdx.transportdata.tw/data-service/basic)
* [NEWS API](https://newsapi.org/)、[訂價](https://newsapi.org/pricing)
* [Google Map API](https://developers.google.com/maps/documentation/javascript/get-api-key?authuser=2)、[訂價](https://mapsplatform.google.com/pricing/?authuser=2&hl=zh-tw&_gl=1*y4p2s7*_ga*MTM5ODc1NjQzOS4xNzYzMDM4Mzcx*_ga_NRWSTWS78N*czE3NjQxNjQzODUkbzIkZzEkdDE3NjQxNjU0MTQkajU5JGwwJGgw#pay-as-you-go)

**API KEY 金鑰 / Token 令牌**
某些 API 會需要經過審核才可以串接，因此 API KEY / Token 的設計就是用來通過的鑰匙，實務上通常用於識別和授權使用者權限

送出種類
1. 放在網址上：例如：[Google Map](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key)、[NEWS API](https://newsapi.org/)
2. 放在 request headers 裡面

**API 四種種類**
1. 可以在瀏覽器端(JS)讀取使用，不需申請帳號：[2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)、有公開的 Google Excel API([Day 18](https://hackmd.io/txY2sZhCSdOW8MccnCN0VA))
2. 可以在瀏覽器端(JS)讀取使用，需要申請帳號獲得金鑰： [Google Map](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key)
3. 只能在**後端伺服器**讀取，不需申請帳號： [體育局列管臺北市各類運動場館一覽表](https://data.taipei/dataset/detail?id=d2db2371-4bca-44cb-ac61-9a50e80c1873)
4. 只能在**後端伺服器**讀取，需要申請帳號獲得金鑰： [NEWS API](https://newsapi.org/)

> response headers 裡面的屬性 Access-Control-Allow-Origin: *
> [測試是否前端能直接讀取 API](https://testingbot.com/free-online-tools/cors-tester)

**API 複習**
* [2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)
* [臺南市國中小校園開放時間](https://data.tainan.gov.tw/DataSet/Detail/550e76f3-2ad2-4186-9a79-0554f7acb7aa)
* [CWA 氣象局 API 資料](https://opendata.cwa.gov.tw/about/application/general)

**為什麼有些 API 資料有 ID 資訊？**
* 避免資料撞名，以身份證為例子
* 最終關卡有三種 ID
* 產品 ID
* 購物車 ID
* 訂單 ID

## 下半場


## 點擊下圖觀看詳細流程
[
](https://gonsakon.github.io/apiresponse/)

## 主線任務攻略
* [最終任務](https://rpg.hexschool.com/#/training/12062817613394040615/board/content/12062817613394040616_12062817613394040632?tid=12062817613394040689)
### 步驟一：取得 CWA API Key
1. 前往 [氣象資料開放平臺](https://opendata.cwa.gov.tw/)
* [API 文件](https://opendata.cwa.gov.tw/dist/opendata-swagger.html)
3. 註冊/登入帳號
4. 前往「會員專區」→「取得授權碼」
5. 複製 API 授權碼
6. 將授權碼填入 `.env` 檔案的 `CWA_API_KEY`

### 步驟二：fork 後端 Code ([網址](https://github.com/gonsakon/CwaWeather-backend))

1. 執行 `npm install`
2. 新增一個 `.env` 檔案，裡面寫 `CWA_API_KEY=你的金鑰`
3. 執行 `node server.js`，觀察是否有運作
4. 到 Zeabur 新增一個專案，到環境變數新增 `key` 為 `CWA_API_KEY`，後面的值為自己的金鑰
5. 打開 Zeabur 公網，自訂公有網址
6. 調整你的縣市，並修改

### 步驟三：fork 前端 Code ([網址](https://github.com/gonsakon/CwaWeather-frontend))

1. 部署到 GitHub Pages
2. 修改：Zeabur 的 API 網址
3. 修改：HTML 上將高雄的文字，改成您的縣市，觀看是否有成功

### 校長的願望是...

1. 希望大家都做作業， 12/7(日)
2. 不用買課程

## 加碼！！！

1. 書籍
2. 畢業典禮
3. Excel
4. [Day 21 每日任務](https://discord.com/channels/801807326054055996/1443405969227907228)

<!-- https://developers.google.com/workspace/sheets/api/limits?hl=zh-tw -->

<!-- https://www.threads.com/@isray_notarray/post/DRdk2UyEagA?hl=zh-tw -->

<!-- Google Excel API 打造產品資料庫！！！ -->