一、緒論

軟體開發是一件非常有趣的事情,透過需求設計和邏輯分析並實作開發就可以方便地解決跟加速自己的做事效率或是玩出各種可能性。而且軟體開發可以快速的驗證跟實現自己所撰寫的程式碼,不論是回饋感還是成就感都非常高;對於電腦的規格非常低,網路上也非常多資訊跟論壇有前輩分享,以及 AI 的崛起又降低起步門檻與提升開發效率。

以網頁開發來說,分前端與後端,前端主要是做網頁所看到的任何介面樣式與前端邏輯;後端是前端跟資料端中間的橋樑,前端會發送需要的請求給後端,後端跟資料庫做溝通拿取資料再傳回前端介面顯示,那此篇是介紹後端開發。

本文使用 Javascript 和 Typescript 程式語言開發,環境使用 Node.js,Node.js 是讓電腦可以運行 Javascript 的執行環境,就像 Java 需要安裝 JDK 才能夠執行 Java 的程式碼,Javascript 算是比較熱門跟環境也比較簡單建置的程式語言,對於自學或是想要嘗試軟體開發的人來說挺友善的;Python 也是很好入門的程式語言,也非常多的應用場景。

本文主要是講工具跟架構不討論程式碼怎麼寫,每個人寫的風格都不一樣歡迎自行探索跟吸收他人的經驗,重點是能夠讓更多人看到和讓想學習的人降低門檻;此外不使用 DB(資料庫),DB 有很多種,可根據個人喜好使用不同的 DB。

安裝 Node.js 有 (LTS) 的版本即可。

🌐 Node.js – Run Javascript EveryWhere

編輯器(撰寫程式碼的地方)使用 VS Code,根據自己的 OS 安裝。

🔗 code.visualstudio.com

二、什麼是 Express.js

Express.js 是使用 Javascript 後端的框架,單純使用 Node.js 也能做開發,但環境建置的成本會相對比較高,所以在開發時幾乎都會選擇使用該程式語言的框架對於效率上面會方便很多!例如:Python 會使用 Django、Java 使用 Spring Boot,另外 Javascript 主流的框架除了 Express.js ,還有 Next.js 這也是非常熱門的框架,有興趣的人可以 google 做比較。

三、走起~

在開始開發之前環境建置是最重要的,這邊介紹一個非常重要的工具 npm 跟相關的套件!

3-1. 先聊聊 npm 是什麼?

npm 的全名為 node package manager,從名字來看可以知道是管理 node 的套件工具,我們在開發時常用 npm 來安裝需要的套件,即便是框架也是,全部的套件都可以從 npm.js.com 查到並看到套件的使用說明跟文檔。

3-2. yarn 又是什麼?

yarn 也是一個安裝套件的工具,但是他比 npm 安裝的時間更快,很多時候在安裝大套件都會跑比較久,更何況現在容器化普遍若是沒有快取會等到懷疑人生。

 

Yarn 的運作模式

Yarn 透過載入 yarn.lock 檔案來解決了 npm 中套件版本不同所造成的問題,確保安裝的可靠性與確定性。yarn.lock 鎖定安裝的相依模組為特定版本,確保每台機器上的 node_modules 結果一致。lockfile 使用精準的格式撰寫與排序鍵值來最小化修改,簡化審核。

安裝流程分為三個步驟:

  1. 辨識:Yarn 發送請求到套件庫,檢查並解析每個相依模組。
  2. 擷取:Yarn 查找全域快取目錄,若無則下載模組壓縮包並存到快取中,支持離線使用。
  3. 鏈接:Yarn 從全域快取中複製所需套件到本地 node_modules

這些步驟保持結果一致性,使 Yarn 能平行處理操作,提高安裝速度且不互相干擾。yarn.lock 確保每次安裝的都是相同的套件模組。

(來源:前端工具百寶箱 – 六角學院系列 第 18 篇, 六角學院, IThome)

 

npm 跟 yarn 指令的對比

npm(v5)yarn
npm installyarn install
npm install [package] –saveyarn add [package]
npm install [package] —globalyarn global add [package]
npm uninstall [package]yarn remove [package]
完整對照圖:
https://yarnpkg.com/lang/en/docs/migrating-from-npm/

來源:前端工具百寶箱 – 六角學院系列 第 18 篇, 六角學院, IThome

 

步驟

  1. 透過 npm 安裝 yarn (只要安裝 node.js 就會自動安裝相對應得版本的 npm,所以 npm 不用特別安裝)
  1. 初始化專案:要初始化會看到一個 package.json 的檔案,這邊會看到專案的資訊,名稱、版本、使用哪些套件與套件版本等等的都會在這邊做顯示,往後安裝套件需在 package.json 做確認。

專案狀態

3-3. Typescript

TypeScript 是 JavaScript 的嚴格語法超集,簡單來說是可以定義型別的 JavaScript,在開發專案時尤其是大型專案並且多人協作,程式碼越寫越多邏輯越複雜,維護程式碼方面就會非常重要,TypeScript 也慢慢成為趨勢,前端框架很多預設也都是 TypeScript;使用 TypeScript 前期比較辛苦的是要走一些型別上的坑,尤其在套件的型別上對於新手可能沒有那麼友善。

推薦想練習 TypeScript 的朋朋們網站 typehero.dev,裡面有很多 TypeScript 的題型,有點類似 TypeScript 版的 LeetCode。

步驟

  1. 安裝 TypeScript 以及相關的套件

安裝後會看到專案多了兩個檔案,以及 package.json 裡面的 devDependencies 出現我們安裝的兩個套件。

補充:

  • node_modules 是存放我們在 package.json 的所需的套件檔案,package.json 像是菜單告訴 node_modules 需要哪些套件跟套件又依賴哪些套件就都會存放在 node_modules,所以有時候看到雖然只有載了一個套件,node_modules 卻多出了好幾個是因為那個套件又依賴了好幾個套件。切記 !! 要讓專案能夠運行一定要有 node_modules,如果不見了或是套件有少安裝可以使用 `yarn install` 補齊。
  • yarn.lock 是鎖定現在套件的版本的功用;我們在 package.json 看到安裝套件的版本會寫 “^x.xx.xx” (底下圖片支援),這代表套件支援 x.xx.xx 版以上的版本,意思是如果這個套件在網路上有更新了,我們下次再用 `yarn install` 安裝套件會套用最新版的,在一般使用上沒有什麼問題,但是萬一套件下個版本不支援某些語法或大改版了,影響到現有專案裡的寫法,就會報錯導致專案無法運行,所以通常都會儲存 .lock 檔確保使用的版本一致。

專案狀態

2. 初始化 TypeScript 設定

TypeScript 提供設定檔讓開發者根據自己或團隊的開發需求或習慣做風格的調整。以下個人常用的設定做分享~可以根據個人需求做調整。

專案狀態

3. 常用指令

  • tsc –noEmit
    TypeScript 有提供型別檢查的功能,會根據上述 tsconfig.json 的設定做檢驗。
  • tsc
    tsc 指令可以輔助 TypeScript 專案檔編譯成 JavaScript 檔案,就可以單純使用 node.js 運行專案。

4. VS Code 套件

在 VS Code Extensions 中微軟有開發 TypeScript 的輔助工具提供安裝。

3-4. Express.js

前面都安裝完環境,終於到了最重要的 Express.js ,因為篇幅關係大略介紹資料夾組成跟設計架構,細節可以把檔案餵給 ChatGPT 請他回答~

專案的進入點由 server.ts 開始,引用 src 裡面的 app.ts

Express.js 本身有提供產生器可以到官網參考。

  1. 安裝 epxress 跟 express.js 套件

2. 建立 src 資料夾並在裡面建立一個 app.ts,先寫一個簡單的 api ,然後導出 app。

專案狀態

3. 建立 server.js (專案進入點),引用剛建立的 app.ts

專案狀態

4. 開發工具 nodemon with ts-node

nodemon 是一個 node.js 常見的開發套件,一般我們撰寫程式後會運行ˋ伺服器來測試功能是否如預期,但只要有改動就需要重啟伺服器,非常麻煩,這時候就可以安裝 nodemon ,他是用來監聽專案的變化做實時修正不需要重啟伺服器,直接檢測功能;另外因為我們撰寫的是 TypeScript 無法使用 node 指令來運行需要安裝 ts-node 運行 ts 檔案。

2-1. 在專案最外層新增 nodemon.json 檔案並貼上以下內容。

2-2. 在 package.json 新增 script

2-3. 最後再終端機輸入 `yarn dev` 就可以看到伺服器執行了!

在網頁上輸入 http://localhost:3000 會出現 app.ts 裡路徑為 / 的 hello world !

專案狀態

四、還可以做什麼…

以上是做一點點的分享,這些只是後端開發的入門,還有好多好多可以探討跟鑽研的部分,舉例來說:

  • 資料驗證
    在後端開發中會收到前端的請求,經過後端的處理後訪問資料庫拿到需要的資料,為了防止收到的請求有一些錯誤的資訊或是其他沒有用的資訊就會需要用到資料驗證,可以在請求的第一時刻先過濾掉不符合預期的請求也降低後端伺服器的負荷量,因篇幅不夠省略敘述,但在樣板中有套用到可作參考,本文使用常見的資料驗證套件 Zod 做開發。
  • Eslint + Prettier
    前端工程師的朋朋們可能比較熟悉 Eslint 跟 Prettier,現在的前端框架內見都會安裝好給開發者,這樣在開發風格上可以統一並且自動校正相當方便跟貼心,後端亦然如此,光是每個人的 VS Code 設定都不一樣情況但又要一起編輯專案在程式碼風格上會打架,所以也是非常推薦使用;另外需要在自己 VS Code Extensions 中安裝 Eslint 跟 Prettier。
  • 撰寫測試
    寫程式中開發新功能、研究新寫法固然是非常有趣的,但是程式碼的品質跟維護性會給自己以及協作的人帶來後患;就好比一顆樹快速地長高,但是他的莖卻相對的沒有跟著變粗,到未來支撐不住外來因素的考驗很容易就倒了,程式碼亦是如此,在前期就撰寫測試提早發現潛在問題提高程式碼質量,後續的維續跟 Debug 時間也會少非常多,最大的收益是省去後續收拾爛攤子的時間以及對於設計功能邏輯又會有更大一步的提升!
  • 容器化技術
    最常見的軟體工具就是 Docker,現在非常多公司基本技能這都是必備的,可以確保環境一致並快速部署,提高開發效率,更進階的應用與學習可以朝 Kubernetes 前進。
  • 提升 API 效能
    提升 API 的效能對於現代應用至關重要,尤其是部署在雲端的服務,時間跟空間的計算效能都直接反應在費用上面。通過實施緩存策略、減少不必要的計算和數據傳輸、優化查詢語句和索引,以及使用負載均衡技術,可以顯著提升 API 的性能和響應時間,從而提高用戶體驗並減少服務器負載以及大大減少費用的支出。
  • 使用 AI 工具增加開發效率
    現在有很多 AI 的開發輔助工具如 GitHub Copilot 可以顯著提高開發效率。這些工具能夠自動補全程式碼、提供代碼建議和優化的方案,幫助開發人員快速解決問題並減少錯誤;雖然 GitHub Copilot 很好用但是需要付費或是有些公司網路會擋掉沒辦法使用,這邊推薦免費的工具有AWS 的 CodeWhisper 或是 Codeium 可以試試~
  • 減少對第三方套件依賴
    API 常常依賴於第三方服務或資料來源來提供資訊或執行特定功能。這些外部依賴的響應時間可以直接影響整體 API 的響應時間,特別是當它們運行緩慢或遇到錯誤時。(《基本的 API 效能優化策略》, kyleme.webdev, Instagram)並且加上套件本身的未修復的 BUG,會提高後續對套件使用與維護的風險;當然有時不是當下就能馬上分析跟發現這樣的潛在因素,或者是根本不會碰到那麼底層的應用時較低機率不用承擔套件使用上的擔憂。
    最後使用套件的時機還是得根據專案的需求、進度的緊迫、學習曲線、更新維護的頻率、團隊的風格等等的多種因素做取捨。

來源:(《基本的 API 效能優化策略》, kyleme.webdev, Instagram)

  • 日誌管理 & 監控
    適當的做日誌管理對於排除問題和優化系統性能的效益非常大。設置適當的日誌級別(如 error、warn、info、debug),配置日誌輸出格式和存儲位置,並使用工具監控和分析日誌,能夠幫助開發人員快速定位問題並做出相應的優化措施,從而提高系統的穩定性和性能。
  • 資訊安全
    這幾年資訊安全重視度漸漸地升溫,不管是法規上的調整或是實際發生的個案都在訴說著資安的重要性,加上 AI 的出現讓入門駭客的門檻降低許多,所以作為開發人員雖然沒有像專業的資安人員那麼專業跟機會學習,但基本的資安意識還是要有,可以從手邊的工具開始做起如定期檢查套件的安全性、設定 CORS 跟 CSP、Container Security 等等的保護軟體系統以及使用者的安全。
  • 持續更新自己的技術
    在快速變化的軟體領域,持續學習和保持技術的前沿是一種態度,不斷地關注技術的趨勢和新工具,參加研討會或培訓等等的,更深入與熟悉自己所使用的工具跟語言。