# 🏅 Day 21 - Express

Express 是一個 Node.js 的 web 框架，接下來我們會使用它來實作 API，回傳 JSON 給前端使用：

### 安裝 Express

- 開啟新的專案，並在此專案路徑下先執行 `npm init -y` 建立 package.json
- 執行 `npm install express --save`
- 在專案中新增 app.js，並引入 express 模組，express 是一個 function，執行後會建立一個 app

  const express = require('express');
  const app = express();

- 指定 port，並使用 app 監聽

  const port = 3000;
  app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
  })

- 設定當接收到 GET request 時，回傳 `'Hello World!'` 文字

  app.get('/', (req, res) => {
    res.send('Hello World!')
  })

- 執行`node app.js`，並造訪` http://localhost:3000/`，若設定成功則會看到頁面出現 `Hello World!`

### 參考資源

- [安裝 Express](https://expressjs.com/zh-tw/starter/installing.html)
- [Express "Hello World" 範例](https://expressjs.com/zh-tw/starter/hello-world.html)
- 課程影音「Express - Node.js Web 應用程式架構」

題目
---
依循上方步驟在專案中安裝 express，並參考此[範例](https://expressjs.com/zh-tw/starter/hello-world.html)，造訪頁面時會回傳 `Hello World!` 文字

完成圖如下：造訪 ` http://localhost:3000/`（或自訂的 port) 並有回傳 `Hello World!`

請將完成後的畫面截圖，並將截圖貼到 HackMD，將 **HackMD 連結** 提交至回報區表格中

## 回報流程

將答案連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://i.imgur.com/WTYZJFC.png
-->

回報區
---
| # | Discord | 圖片連結 |
| --------| -------- | -------- |
| 01 | hannahpun | [HackMD](https://imgur.com/a/SlzfgEe) |
| 02 | Tau | [HackMD](https://hackmd.io/XWtNJgChSCOEgjef2RxztQ?view) |
| 03 | poyi | [HackMD](https://imgur.com/a/XKhZ2Lc) |
| 04 | adengg | [HackMD](https://hackmd.io/e62R_3jvSp-ytlmPBmq70Q?view) |
| 05 | pja._. | [HackMD](https://hackmd.io/_uploads/Hkr4hEvFke.png)|
|06|janetlai|[HackMD](https://hackmd.io/_uploads/r1YLCEwYJl.png)|
|07|sui_hsilan|[HackMD](https://hackmd.io/rtdCgJ9WS9GAdlnW5nY5RA)|
|08|helena|[HackMD](https://hackmd.io/_uploads/Hk-Kpw_F1g.png)|
|09| ya_meow | [HackMD](https://hackmd.io/_uploads/BylWoq_Ykx.png)|
|10| sian | [HackMD](https://imgur.com/a/EwPs504)|
| 11 | bian_yang_mofa | [HackMD](https://hackmd.io/@ovobannyovo/r1-BY-jKJl) |
| 12 | JC | [HackMD](https://hackmd.io/@ItOiJstZRZKkPPy-BaZKng/r1lq-rwgq1g) |
| 13 | yutzu | [HackMD](https://hackmd.io/pEP3etpJSL-H_QbSG1x60A) |
|14 |ZoeKang|[HackMD](https://hackmd.io/_uploads/S1hxPdQ9Jg.jpg)
| 15 | JerryOOO | [HackMD](https://hackmd.io/@fatiangel/By7ZNT491x) |
| 16 | shaing | [HackMD](https://hackmd.io/_uploads/rkyNptrqJe.png)|
| 17 | HarryKuo |[HackMD](https://hackmd.io/_uploads/r1IGQBTqkl.png) |
| 18 | hsin yu |[HackMD](https://hackmd.io/_uploads/SkKAT9Mo1x.png) |
| 18 | Li wei-min |[HackMD](https://imgur.com/a/AYzyEhN) |
| 19|wuyuli_21403 | [HackMD](https://hackmd.io/@aYs9Tn6GTIOlfVlxWi1mgw/r1SuCtDj1g)

<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [HackMD](連結) |
-->