---
tags: JS 直播班 - 2022 秋季班
---
###### tags: `簡單`

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

如果有疑問都歡迎於六角 Discord 相關貼文中詢問，助教都會在上面協助～
:::
:::warning
要串接其他自備的 API 也歡迎，不過偏項於特定 API 的文件問題助教可能就沒辦法解答(要詳讀該 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)
* [範例](https://codepen.io/riecball/pen/RwJQRZX)
:::

## 第二款：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/riecball/pen/BaVrOZp?editors=1011)
* [範例](https://codepen.io/riecball/pen/OJEvoxb?editors=0011)
:::

## 回報流程

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


## 作業提交等級

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

## 提醒區
:::warning
本次作業邏輯更為複雜，如有疑問歡迎到 [第八週刷提任務 - 串接 API](https://discord.com/channels/801807326054055996/1046591255913693226) 中發問，助教會上去解惑～
單一作業可以完成就上繳，分為五個 CodePen 來提交，不用塞在同個專案內。
:::

回報區
---

| Discord | LV | CodePen / 答案 |
|:-----------------------:|:---:|:--------------------------------------------------------------------------------:|
| Rice#8043 | LV1 |[EmojiHub](https://codepen.io/riecball/pen/RwJQRZX)/[GiphyHub](https://codepen.io/riecball/pen/BaVYQzq)/[TodoList](https://codepen.io/riecball/pen/OJEvoxb?editors=0011)|
|圈圈#4060|LV1|[EmojiHub](https://codepen.io/wjejfczn-the-bold/pen/PoaBWad)/[GiphyHub](https://codepen.io/wjejfczn-the-bold/pen/VwdBBNy?editors=1011)/[TodoList](https://codepen.io/wjejfczn-the-bold/pen/eYKjbae?editors=1011)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|LV1|[EmojiHub](https://codepen.io/Connie-Chien/pen/BaVgror)/[GiphyHub](https://codepen.io/Connie-Chien/pen/dyKBKOx)/[TodoList](https://codepen.io/Connie-Chien/pen/vYroKMd)|