# 🏅 Day 11 - 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 暱稱 | [CodePen](連結) |
-->

| Discord | CodePen ／ 答案 |
|:-------------:|:-----------------:|
| xxx | [CodePen]() |
| 苡安 | [hackmd](https://hackmd.io/_uploads/B1J8VgCl0.png) |
| Jean | [HackMD](https://hackmd.io/G8WYdYuiQCOe4T-4WzviqQ) |
| shuantt | [HackMD](https://hackmd.io/@cs0tvPG9SI-y9osIW-E2-Q/S16YDeAxC)|
| Lobinda | [HackMD](https://hackmd.io/_NFGUlWhRAGQgzzVHSa0DQ?both)|
| runweiting | [HackMD](https://hackmd.io/@r1nQcfQMT5G4aJ6riZy1jg/BJzR-Gux0)|
| mei | [Hackmd](https://hackmd.io/@YvG63L6URqy8mnOrxpBdhw/H1Px1fAgA)
| wei | [HackMD](https://hackmd.io/@xu7yoa5cSsqaron7h9XhUw/BkjaIm0gR)|
| Chia Pin | [HackMD](https://hackmd.io/cqJv6Pw8TpufH6U2tFGmyw)|
| Theodore | [HackMD](https://hackmd.io/hebN_pjDSby1aN6qOc2zUg) |
| Aida | [HackMD](https://hackmd.io/doRQwLdWRZChVIFI2Z8-oA?view) |
| 2魚 | [HackMD](https://hackmd.io/-G98QjcrSyKEDYmuY3aOiQ?view) |
| jenny7532 | [HackMD](https://hackmd.io/h3LBrlCyRqKNc4a2WQW6hQ?both) |
| william_hsu | [HackMD](https://hackmd.io/@C_StBqtHQGi4YklOXUSMGA/ryvYBiCgR) |
|cho|[HackMD](https://hackmd.io/ma6jaYmFRIS0Gezp2Wka7A)|
| YC | [HackMD](https://hackmd.io/4M0ISOR6TBGMLhLbL30flg) |
| 羽 | [HackMD](https://hackmd.io/_uploads/Hy61Bwy-R.png) |
| Hank | [HackMD](https://hackmd.io/@tw1720/Hyt7YDClC) |
| ellallu0903 | [HackMD](https://hackmd.io/@RYZUBW5hTCuBuie6DqkqVA/Skmp5sJ-R) |
| Thomas | [HackMD](https://hackmd.io/@tho-mas/SJ5N8Mx-A) |
| tung030374 | [HackMD](https://hackmd.io/YJiTFfJCQJO4Galf0owj2A?view) |
| william威良 | [HackMD](https://hackmd.io/WqToup6mSAidX82e_M4cNw) |
| Tiya | [HackMD](https://hackmd.io/@6DjuLo7_RFWedyUzGnxP1Q/SyizQHfbR) |
| Ciel | [HackMD](https://hackmd.io/d38gGodeR7S25OHGRP87gQ?view) |
| Benson | [HackMD](https://hackmd.io/@nosneb83/B1j7xD7-0) |
| Fabio20 | [HackMD](https://hackmd.io/_uploads/Hy3miiXb0.png) |
| ej_chuang | [HackMD](https://hackmd.io/@GZ5lxcH0T5aLH6XEpaEPQw/rJQVVaXZC) |
| yoshidc | [HackMD](https://hackmd.io/@yoshihmd/HyB2B8qbC) |
| Henry | [HackMD](https://hackmd.io/6Xf1UYQ8QJ2nQTrx6YZv1A) |
| 瑀君 |[HackMD](https://hackmd.io/_uploads/SyNaFER-R.png)|