後端框架與API 開發(一)

※ Express 專案初始化標準動作：

※ Node.js 環境建置核對

1. 安裝node.js, npm（Node.js的套件管理系統）：

安裝 Node.js 的方式除了可以直接從 Node.js 的官方網站 https://nodejs.org 下載安裝外，在實務開發上更常使用的是 Node Version Manager (nvm)。

使用 nvm 的好處在於，它讓開發者可以在電腦上同時安裝並切換不同版本的 Node.js。這對於處理多個專案時非常有用，因為不同專案可能需要不同的 Node.js 版本。使用 nvm，你可以方便地切換版本，避免因版本不一致導致的錯誤。而如果不使用 nvm，而是直接從官網下載 Node.js，你將無法輕鬆切換版本，處理不同專案時可能會遇到許多麻煩。nvm 可以減少重複安裝和移除的麻煩，使開發更順利。

2. 安裝Visual studio code

※ Windows 安裝 nvm

• nvm 可至 nvm-windows 的 github 下載。點擊「Download Now」後就到了下載頁面。

在這裡，選擇最新版本的nvm-setup.zip 檔案，下載解壓縮後安裝即可。安裝時，請注意路徑中不能有空白或中文，也就是說，如果安裝在 C:\Users\AC Genie 或 C:\Users\AC精靈 底下，執行時就會出問題。（如果你的電腦名稱中包含空白或中文，預設路徑就會發生問題，請另外新增一個資料夾擺放你所下載的資料）。

安裝完成後，打開終端機。如果原本終端機已經打開了，記得關掉重新開啟。打開後輸入下述指令以確定安裝成功：

nvm version//確認是否安裝nvm
1.1.11

※ 以 nvm 安裝 Node.js

nvm install node //安裝最新的穩定版本的 Node.js

在終端機中輸入 node -v 來檢查看看是不是當前的 Node.js 版本：

node -v //確認是否安裝node.js或版本資訊
v14.16.0

在終端機中輸入 npm -v來檢查看看是不是當前的npm 版本：

npm -v //確認是否安裝npm或版本資訊
6.14.11

※ Windows 安裝程式碼編輯器 (text editor) - Visual Studio Code

• Installation：請前往 https://code.visualstudio.com/ 並依照你的作業系統下載適合的版本。

※ Visual Studio Code – 客製化編輯設定

在這裡我們要開啟設定檔再做四個編輯設定：

• tab size：按下 TAB 鍵時空兩格。
• word wrap：程式碼長度超過視窗時，可以自動換行。
• format on save：按下存檔時，自動校訂程式碼格式。
• format on paste：貼上程式碼時，自動校訂貼進來的程式碼的格式。

※ Visual Studio Code – 常用安裝相應的套件設定

• Chinese (Traditional) Language Pack for Visual Studio Code：中文化 VScode。
• Code Spell Checker：可以檢查程式碼有沒有拼錯字。
• TODO Highlight：將特殊的關鍵字如 TODO 、 FIXME 畫上亮色，讓註解以不同顏色來區隔。
• Atom One Dark Theme：將編輯器改為深色背景，程式碼也畫上不同顏色。
• vscode-icons / Material Icon Theme：美化檔案的 icon，讓不同檔案變得更容易辨識。

※ Express 專案步驟筆記清單

• 在C槽新增空白專案資料夾：

1. 打開終端機（Terminal），建立一個新資料夾，然後進入這個資料夾中。

 mkdir {資料夾名稱}//建立一個新資料夾

2. 進入這個資料夾，使用 cd 指令再加上目錄名稱。

cd {資料夾名稱}

• 安裝 Experss 到專案中：

1. 設定 package.json。

npm init -y //建立 package.json 檔，用來登記所有的外部套件。

2. 安裝 Experss：

• 專案資料夾中多了一個 node_modules 的資料夾，npm 會把所有安裝下來的套件放在這個資料夾中。
• 資料夾中還多了一支名字與 package.json 相似，名為 package-lock.json 的檔案。這支檔案會詳細記錄每一次我們使用 npm 安裝了什麼。

npm install express // npm i express 都可以
npm install 套件名稱@版本號//下載指定版本@[4.17.1] 

3. 在 Express 專案資料夾中建立一支名為 app.js 的檔案。

4. 設定程式入口為 app.js。

在設定檔裡有一個 main 屬性，這個是指程式的入口檔案，預設叫做 index.js，但我們習慣上會把這支入口檔案命名為 app.js。所以現在手動更改一下：

5. 設定主程式 app.js：

// 載入 express 並建構應用程式伺服器
const express = require('express')
const app = express()

// 設定首頁路由
app.get('/', (req, res) => {
  res.send('hello world')
})

// 設定 port 3000
app.listen(3000, () => {
  console.log('express app listen on port 3000')
})

6. 啟動應用程式伺服器：

node app.js
express app listen on port 3000//印出

7. 用瀏覽器打開網址 localhost:3000/

8. 安裝 nodemon：會自動重啟伺服器，重新整理瀏覽器後，就可以看到修改後的畫面。

npm install -g nodemon //-g表示把 nodemon 這個套件安裝在電腦的全域（global）。

9. 使用 nodemon來啟動 Express 的專案：

$ nodemon app.js
[nodemon] 3.1.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
express app listen on port 3000

10. 定義開發用腳本：

// 修改 package.json
"scripts": {
  "start": "node app.js",
  "dev": "nodemon app.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

• 只要用 npm run 加上腳本，就可以執行內容，例如：

1. npm run start →取代 node app.js
2. npm run dev → 取代nodemon app.js

$ npm run dev

> express-app@1.0.0 dev C:\Users\user\express-app
> nodemon app.js

[nodemon] 3.1.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
express app listen on port 3000

11. 設定版本控制：
12. 初始化 Git，把專案登錄到版本控制系統裡。

$ git init

2. 設定 .gitignore：

# OS X
.DS_Store*
Icon?
._*

# Windows
Thumbs.db
ehthumbs.db
Desktop.ini

# npm
node_modules
*.log
*.gz

12. 建立第一筆 commit：

git init //專案初始化
git add . 
git commit -m "feat: project init"