專案筆記|2024 六角學院NodeJS 入門班結業

終於把三個月左右的直播班上完，並繳交期末作業了，趁記憶還猶新時把這次直撥班的作業記錄下來。

前言動機

從今年開始比較積極為了累積作品開始做side project，但目前線上有的開源API 能做寫入的實在太少，且雖然工作上有與後端工程師配合所以大概有DB與Modal的概念，但還是希望自己能親自寫過一次CRUD，所以報名了今年六角學院Node.js入門班，也趁機拿一個前後端較為完整的side Project （而且終於不用自己規劃設計稿了QQ）

在工作上常常聽到後端說的資料表關聯，這次終於弄懂了！XD

這次直播班主要是Node Express與Mongo DB的Mongoose為主，並使用Firebase當作圖床，這次我每週約投入15~20小時學習，並以直播出席率100%為目標，還有獨立完成期末作業的前後端。

---

期末作業介紹

期末作業是完成社群動態牆，可以進行註冊登入、追蹤使用者、按讚使用者、張貼動態、上傳大頭貼等等操作，最終約開21隻API。

前後端框架

後端使用上課使用的Node express 與mongoose。前端框架這次選擇Next.js，主要原因有之前工作時摸過，對於使用Next時的file-system based router 覺得真是太香，更喜歡快速且彈性的Layout，加上這次自己能掌握後端回傳的內容，希望能將這次專案做SSR的形式。

後端這次選用JWT Toekn，所以前端也使用了NextAuth作為使用者驗證的輔助，雖然搭配Typescript時NextAuth需要設定很久～但最終結果我認為是好的。

切版使用Tailwind，元件框架鑑於之前使用過Headless UI，覺得太過彈性的系統可能適用於更大型的專案，所以選擇與Tailwind 相性很合的Next UI，並使用CVA做自訂的元件樣式管理。

開發時遇到的困難

• 要調整前端還是後端？

  • 不免俗有一些資料結構調整可以上前端開發更順利，且Next.js有比對機制不用擔心重複的API發數，但還是擔心對資料庫造成負擔，最終還是以少動資料庫為主。

• API的數量

  • 以追蹤/取消追蹤的API為例，我看到許多同學的作業會將追蹤與取消追蹤寫為同一隻API，並在node做判斷目前是要執行追蹤還是取消追蹤。但最終我希望API的method 能夠結構清楚一點（追蹤為Post/取消追蹤為Delete）所以還是將其分開，並且這樣後端的邏輯也能清楚一點，以及避免使用者連點時產生的前端狀態錯亂。

感謝ChatGPT

有魔法的時代我不想避諱有靠ChatGPT的幫忙，這次同時碰到Mongoose與Mongo shell 時語法真的大錯亂，所以最後要直接在資料庫進行操作時我都直接請ChatGPT產生段Script讓我選擇到想要的document來做異動。
關於變數命名也是與程式碼是否容易閱讀至關重要的一點，但英文單字稀缺的我常常在命名上花半天時間，現在有ChatGPT真的很方便。

當然還有許多寫功能時的輔助，但目前的確還不到完全能使用的階段，自己的專案還是得靠自己來掌握。

作業的自行優化

老實講課程的設計稿偏精簡，且沒有設計師與PDM可以一起進行畫面狀態上的討論，最後自己依照經驗做了一些優化：

• 滾動讀取

  • 因為是side project所以資料內容自然都很少，但考量到實際動態牆應該都會有無限滾動，所以把取得貼文的api新增了page的query，使用者落地時先讀取前五篇貼文，滾動到底部時才接著讀取下五篇貼文。

• 前端表單的驗證

  • 設計稿上關於表單的錯誤狀態寫的較少，但只靠後端收到的資料驗證來做阻擋容易造成多餘的api post，所以前端表單使用react-hook-form 多做幾步驗證，確認無誤時才發出api 的請求。

• 貼文圖片的LightBox

  • 因規格只有限制圖片檔案大小，並無限制圖片顯示的尺寸，怕貼文變成無限長所以我有限制貼文上顯示的圖片高度，當使用者點擊圖片時會另外展開LightBox。

  • 最終LightBox是用Next.js的平行路由 (Parallel Routes) 與軟導航 ( soft navigation ) 實現，主要靈感來自於Image Gallery Starter

結語

這個專案可以再做的後續優化還有非常多，也許是註冊新增信箱的驗證與新增第三方登入的功能，我也很想用zod來整理目前前端專案的型別驗證，果然要完整性一個專案需要花費的時間真的非常非常多。

但這次能在三個月內同時起步Node.js與Mongo DB 還是非常開心，希望自己也能在這些技能上繼續深究下去 ─=≡Σ((( つ•̀ω•́)つ