## 契機

筆者是一位期望能夠到真正純軟體界公司上班的非本科生轉職者，在今年因為下定決心要闖看看，但因為經歷不夠亮眼這個時候看到了 Node.js 企業班，這個班級核心概念是在已有基礎能力下也有前後端開發經歷想要更上一層樓以及增加專案作品所做的課程，而這正正是我也缺乏的！於是就給他報名下去！

## 課程介紹

其實課程主要分兩個部分，一個就是常規的課程內容提供前端框架的教學讓你一步一步的學習能夠搭建出網站，以及 Node.js 建立後端的課程，這部分每週會有一堂直播班也可以選擇影音教學。

另一個部分就是專題，你將會被分組，每組 5-6 人會以經歷經驗較接近的分在一起，接著後續到課程結束要和你的夥伴們合力完成專題。

但這邊要請畫重點，你們不會是盲目的去做專題，課程中有安排了各個里程碑如同真的實際跑專案一樣，而且這邊要講三遍很重要的事情就是，**每一組都有一個專題教練指引你！**

我們這組的教練是 ***Ray 助教***，想要了解更多可以看一下他的部落格文章 [關於我成為了 2023 Node.js 軟體工程師企業專題班教練這件事](https://israynotarray.com/learnexp/20230701/2021952545/)

## 心路歷程

在課程報名的時候，知道專題的時間為三個月以及老師校長們苦口婆心地說**這班很肝**，其實心裡已經有底，畢竟之前也有跑過時效性的 Side Project 明白在工作後還要進修以及實作會壓縮許多休息時間，但真正踏進這班完全就是肝到底！

以下各階段對應里程碑，每個里程碑都會有一個負責人，負責人就像是團隊 Team leader ，他是來統整跟聯繫各個成員的人，我們團員是每個人都會輪流擔任，在里程碑還未完成時都須負責與教練回報內容，也體驗一下當 Team leader 的壓力感。

所謂的壓力感就是負責人必須要在時間內分配好每個人工作但你也得不定時的去確認是不是跟目標的內容一樣，譬如下週要完成 API 表，現在還缺幾個很多時間是要聯繫成員一起開會然後下結論，這部分就不像被分配到任務去完成這麼輕鬆，當日子一天一天到來你不能靠自己下去做因為這樣就沒有團隊分工的意義，而是溝通協調著如何讓目標達成，就像公司內部很多問題其實都是跟人有關又再次體悟到這點。

### 初相見
首先初期你需要跟夥伴們磨合，會有破冰任務來更了解彼此，接著也有一次線下的機會與夥伴們見面，有見過實體還是跟隔著螢幕用文字溝通還是有差的。

這邊破冰任務筆者跟著夥伴們一起做了[人格分析](https://www.16personalities.com/)，我的是表演者人格，嗯，我不承認><

### 訂題目
再來開始就得好好選擇專題題目內容跟目標，這時候呢剛剛提到的教練開始來了！
老實說當初還真的無法訂定題目，教練會跟你分析各個題目的優劣讓你們討論選擇，縮短團隊猶豫期XD（我就是容易優柔寡斷～

最後我們選擇了 POS 系統，本來是想做電影訂票但當時似乎很多組別選擇想要跟其他組來點差異，霸特好像其他組也這麼想結果還蠻多組都跟著跳槽 POS 系統（？？？
另外也規劃成員負責前後端跟技術研究分配，這邊我是選擇前端。
核心的技術是後端使用 Node.js 而前端用 React.js 基底。

### 使用者故事
接著開始跑專題專案，一開始要先有使用者故事，作為產品雛型，這還是很重要的，畢竟有了使用者故事才會產生 Feature。這邊在一般工作中或者 Side Project 比較不會接觸到這塊，很多時候都預設好了 Feature ，所以當自己走過一遍其實會發現以前可能沒想到的地方。

一開始大家似乎對這塊比較不熟悉，所以都得依賴提供的範本去寫，***我是誰我想要做什麼***

這個里程碑開始更多的線下討論以及進度規劃，我們主要使用 Notion 來作為專題進度管理工具，也開始訂定每週會有一天共同討論時間，星期一回報給教練我們的進度內容，我們則是選擇星期日一起針對進度跟回報內容做確認。
- 每週一的回報，主要是在這里程碑我們目前進度進行的狀況是如何，在當中是否遇到了一些問題想請教教練提供建議，還有就是每個成員下週預期要研究的項目，最後會報告每個成員回顧當周覺得自己不錯的地方/可以改進的地方／還有認為其他成員很棒的地方。
- 看板功能來確認每個人被分配到個工作任務狀況，這是成員提議讓我們參考了敏捷開發使用任務卡來去管控專案執行的狀況。
- 增加了會議- 記錄好整理出提交的內容跟問題解決方案及負責人，這個部分對後續進行幫助非常大，也不會讓團隊們對於討論的內容有不同的見解減少一些錯誤溝通。

### 做流程及線稿圖
因為要更實體化我們功能的流程，需要搭配流程圖，這邊課程中每組都會搭配一位 UI 設計師，為了更明確讓他理解我們需要設計的部分，會先繪製線稿圖跟搭配流程以及提供風格等讓他可以為我們的專題出設計稿。

這邊流程圖跟線稿圖都是靠 [whimsical](https://whimsical.com/)
雖然也看到有用其他工具也有更強大的使用 figma ，不過我們考量速度要求還是選則 whimsical 快速產生。

- 線搞圖原則是一個人先繪製，再來就是其他成員一起討論有哪些部分需要修改，因為有些地方可能對功能都有不同的見解，這邊真的是來回討論挺多次的，也是卡關最久的里程碑（實作算是時間問題不太算卡關）
- 流程圖其實本來在之前里程碑就有先做一些，到真正去做才發現遺漏非常多，主要是依照原本列出的使用者故事來去撰寫，但當中蠻多在一個使用者故事就會有好幾個功能流程需要列出，而真正到開發，有了實際畫面才發現還是有地方會沒有想到。
- 流程圖當中其實還有泳道圖，要將一些會交互作用的流程串聯在一起，譬如前台更新了什麼後台會同步顯示等。

### 設計 API 表
有了流程圖，就能開始訂需要的 API 表，這邊還是第一次接觸才發現原來需要的 API 比想像中的還要多@@但好在課程提供了模板，這對我們之後開發時對進度還蠻有幫助的。


API主要會由後端去規劃
- 首先訂定回傳內容格式，主要會有一個共通的格式譬如

    {
	"status": "success",  // succsee,error
	"message" : "",
	"data": "" , // 要回傳的資料
    }

當訂好了內容格式，其他人就能依照這個模板去寫被分配到的 API，避免每隻 API 回傳的東西不一樣。
- 再來是資料庫 Table 的建立，一樣是共同的範本然後去延伸

 {
     "id": string
     "name": string
     "quantity": number
 }

- 這邊 API 我們會依照角色分類以及使用的方法（GET/POST/DELETE/PUT/SOCKET)分類，這樣在後續實作查找會非常方便。
- 我們前端部分也有做類似的表單，依照 layout 跟元件功能去列，這邊有部分會跟 API 表會重疊，但有些部分只有前端才會碰觸到的還是需要追蹤就可以利用這個表確認。

### 實作
好的，在來就是肝到底也要把 MVP 也就是最快可以做成能夠實現的功能的作品出來展示，這邊就是一段肝的故事。

- 這邊我們有成員提供了後端一個不一樣的 Framework 叫做 Nest.js ，這邊還花了兩週為其他成員教學，然後引入到專案裡，真的很酷！很多功能已經先封裝好不用特別在寫。為什麼提到這個呢？因為真的後端就像火箭一樣可以快速開發，當然這邊還是常常看到有夥伴半夜發 PR (到底要不要睡呀)

- 前端的部分這次嘗試用了類似 MVVM （Model–view–viewmodel）的架構，主要是想分成處理 API 的部分、處理 Store 以及 Hooks 的部分 、處理畫面的部分。為的是當有變動的時候可以最小範圍改動，並且盡可能地讓畫面跟邏輯分離，讓專案結構更為清楚在處理畫面當下不會影響到邏輯，在邏輯撰寫也不會改動到畫面，也讓分工可以更明確。

- 然後雖然前面做了很多準備，但真正做下去其實才發現還是遠遠不夠，蠻常遇到譬如設計稿這邊沒想到畫面那麼就是我們想辦法再加上去，有的 API 其實不需要或者格式缺漏什麼的。

- 還有一點，成員們只要在線上提出問題，大家都幾乎很快時間回覆跟討論方案，譬如發現畫面缺了一個元件，這時候熟悉的成員也會跳下來說這來處理然後就回傳狀況，還有後續準備的時候大家都會測試部署上去的網站哪邊還有問題或者反應時間夠不夠快，就會引用之前提到的敏捷開發，先在討論區提出問題，能夠處理的人就會在看板上發卡片開始處理。

- 我們有特別討論以及訂定 Git flow ，除了能 Code review 之外，也能讓沒跑過的成員熟悉一下，主要是有用到像是 Git commit 內容分類一致性（像 feat: xxxx)，還有發 PR 會添加 Label 管理狀態以及標註 Reviewer，減少在當中需要的溝通成本。

- 在做 Code review 過程發現，PR 的內容最好切分細一點不僅在審查時比較好審查不會漏掉，也可以讓 Debug 的時間縮短讓 PR 可以盡快完成而不容易影響到其他功能。

### 成果展示
成果發表有分線上線下，線上是在直播上報告，線下則是真的到會場上台報告，當時規則訂出時，夥伴們不約而同都說要衝線下，因為名額有限，於是比肝還更肝的故事就此產生，結果肝到線下了XD

- 為了線下呈現最好，我們修改了很多原本不在規畫內的功能，本來目標是能做完兩個角色的流程，但最後選了三個，嗯，也就是肝指數得加上去。
- 這邊後期幾乎是處理前端的部分，而且後端也一起支援來做又感動了一下。
- 選擇誰上台展示呢？這邊我們最後有三位來~~廝殺~~試講看看，最後是我驚險通過~~被推上去~~。但因為我們真的完成了核心功能，展示上沒什麼大問題呢！不愧是我們。

題外話，在線下現場感受到
- 其他組很多都做了我們沒有做到的酷功能，像是金流串接還有 QRcode 搭配 PWA 等等。
- 我覺得那組演講者用喝水等待觀眾掃描他們官網 QRcode 很有創意呢！

## 結尾回想

在上面過了那麼多的里程碑，其實除了最後實作以外其他都是不熟悉的感覺起來還蠻吃力的，有時候都會覺得啊～好想跳過直接做東西，但又想到沒那些東西該怎麼產出就作罷。

小小補充初期的二三事
- 因為班上很多同學都期望能夠導入使用 TypeScript ，這邊校長特別的發起 TypeScript 讀書會，除了讓有經驗的同學分享如何學習，也搭配了詢問 ChatGPT 來做學習筆記然後直播跟大家分享，有別於一般讀書會是跟著特定書籍然後大家一起分享，用這種方式感覺也不錯呢！

不過能一直維持里程碑進度其實也得靠每週跟教練回報，因為這個回報你會用盡洪荒之力在時間內完成，避免拖延症XD
而且好幾次遇到問題教練都會即時出現（各種冒出

- 譬如發現我們例出的功能太多的時候，教練就會告訴我們核心的角色做出來就很棒了！後續的當作許願，重點是要能完成可以展示的東西最重要。
- 還有在回報開頭會告訴我們接下來里程碑需要注意的事情，以及給予我們時程~~壓力~~推力，讓我們不要鬆懈下來忘記了最後要在時間內完成專題。
- 像我們有提出我們在專題上使用 Nest.js 教練也會建議我們提供相關的教學 PPT 分享給其他同學，也適時的鼓勵我們做得不錯，讓我們又有肝的動力。

最感謝夥伴們要肝都一起肝的決心所以也很順利的完成專題！超讚！

但還是得說這真的不是輕鬆的課程，真的很花時間跟心力，但做軟體工程，面對一直迭代的技術，肯定也得有這樣的覺悟吧！無論如何這真的是個非常難得的經歷！

最後業配一下還有我們的成果

六角企業專題班簡介
https://www.hexschool.com/2023/01/31/2023-01-31-nodejs-live-course/

成果 repo
https://github.com/alphatero/siau-kha-frontend

https://github.com/alphatero/siau-kha-backend