---
tags: JS 直播班 - 2023 秋季班
---
>若有任何疑問請至 Discord「作業討論」頻道討論

# 串接 API
## 本章節我們要學什麼？
統整前幾周所學，串接三款 API 收驗成果。
:::info
經過前幾周的磨練到這裡真的很不容易！助教相信同學目前已經具備自由串接各式各樣 API 的能力，練習串接完以下三題後相信同學會更有自信開發各式各樣的應用。
:::

:::danger
請同學注意串接 API 使用到的隱密資料不要直接寫死在程式之中，個人 API Key、JWT Token 請務必保管保存好，避免被有心人士挪用。
:::

## 第一款：EmojiHub 😎
複習一下簡單的獲取資料與錯誤處理。請製作一個隨機的 Emoji 生產器，當點擊表情符號時訪問第三方伺服器獲取下一個隨機表情符號的資料顯示於網頁中，並將其複製於剪貼簿中；當獲取錯誤時顯示「❌」表情符號，並打印出錯誤狀態(舉例：404)。

:::info
* [API 文件](https://github.com/cheatsnake/emojihub)
* [模板](https://codepen.io/riecball/pen/yLEKxXK?editors=1011)
* [範例 - 1](https://codepen.io/jmimiding4104/pen/dyagNEd)
* [範例 - 2](https://codepen.io/jmimiding4104/pen/JjxBweV?editors=1010)

範例 1 與範例 2 差異在於取得資料、解析 emoji ，但結果呈現大同小異

:::

## 第二款：GiphyHub 🎉

[GIPHY](https://giphy.com/) 是 Meta 旗下的 GIF 搜尋引擎。註冊會員後進入 [GIPHY Developer](https://developers.giphy.com/) 獲取 API Key 並詳讀 [相關文件](https://developers.giphy.com/docs/api)與嘗試看看 [API Explor](https://developers.giphy.com/explorer?)，創造一個抓取三方資料展示 Gif 的平台。 (有多種 API 端點，同學可以依循興趣選擇)

:::info
* [API 文件](https://developers.giphy.com/docs/api#quick-start-guide)
* [模板](https://codepen.io/riecball/pen/jOKzvLa)
* [範例](https://codepen.io/riecball/pen/BaVYQzq)
:::

## 第三款：代辦事項 📜

最終大魔王還是代辦事項，請製作一個具備完整訪問第三方伺服器並具備增刪查改功能的代辦事項。(把文件內的 API 都串接過一遍)

:::info
* [API 文件](https://todoo.5xcamp.us/api-docs/index.html)
* [模板](https://codepen.io/jmimiding4104/pen/RwveKWg)
* [範例](https://codepen.io/jmimiding4104/pen/oNmaNGw?editors=1011)
:::

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


## 作業提交等級

* LV1：解出 3 題，並提交 CodePen
* LV2：設計一個 hackmd，嘗試自己設計 3 題
* LV3：嘗試去做其他學生寫的題目，並 tag 學員回報給他，感謝他的命題，讓自己觀念更好

回報區
---

| Discord | LV1 答案 |LV2 自行設計題目 | LV3 做其他學員設計的題目 |
|:-:|:-:|:-:|:-:|
| Chia Pin |[codepen](https://codepen.io/joker-cat/pen/wvNQRVB)|||
| kuanju27 |[CodePen](https://codepen.io/Eero-Chiao/pen/BaMGPGV)|||
| bf_tsai |[codepen](https://codepen.io/BF-Tsai/pen/XWOoEyv?editors=1011)|||
| pinyi_9 |[Codepen](https://codepen.io/Wpypy/pen/qBgQMbj?editors=1010)|||
| Celine 510 |[Codepen](https://codepen.io/Celine-510/pen/QWYoOzO)|||
| 銀光菇 |[Codepen](https://codepen.io/genesynthesis/pen/mdvoXvg)|||
| runweiting |[codepen](https://codepen.io/weiting14/pen/poGBqyL)|||
| 精靈 |[codepen](https://codepen.io/justafairy/pen/ZEwddpb)|||

<!--
| discord |[codepen]()|||
-->