若有任何疑問請至 Discord「作業討論」頻道討論

串接 API

本章節我們要學什麼?

統整前幾周所學,串接三款 API 收驗成果。

經過前幾周的磨練到這裡真的很不容易!助教相信同學目前已經具備自由串接各式各樣 API 的能力,練習串接完以下三題後相信同學會更有自信開發各式各樣的應用。

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

第一款:EmojiHub 😎

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

第二款:GiphyHub 🎉

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

第三款:代辦事項 📜

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

回報流程

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

作業提交等級

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

回報區

Discord LV1 答案 LV2 自行設計題目 LV3 做其他學員設計的題目
Chia Pin codepen
kuanju27 CodePen
bf_tsai codepen
pinyi_9 Codepen
Celine 510 Codepen
銀光菇 Codepen
runweiting codepen
精靈 codepen