轉職前端工程師作品集 | 與團隊一起網頁開發(上) - 企劃階段
這篇文章是我在 【前端工程師養成班】的團體專題製作紀錄。
在這個系列，我會分享工程師養成班的課程規劃、各技能的學習內容與實務應用，讓還沒走上這條路的人可以一探究竟，再決定是否要走上這條不歸路。
本篇是前端工程師養成班的團體專題製作紀錄的第一篇，團體專題製作是練習團隊開發流程的初體驗。
這系列記錄一個網站從需求蒐集彙整、多人開發、到專案驗收的過程，內容很多所以拆成三篇來寫，分別是【企劃階段】、【開發階段】、【驗收階段】。
內容包含各階段的準備項目、重點整理，以及我個人的心路歷程 (碎碎念)
關於我 | 餐飲背景，在決定報名養成班之前，對工程師、寫程式一點概念都沒有，大學科系與數理、資工、資管完全零交集。
而上課的年紀，正是鄉民熱烈討論工程師應該要退休的年紀。
這樣的背景，在半年的養成班苦讀後後成功轉職，目前在間不錯的接案公司做政府的案子，辦公室有大落地窗可以遠眺美麗華摩天輪與台北 101 ，過著朝九晚五、咖啡喝到飽、work life belance 的生活
團體專題在幹嘛？
網站開發的前端實習生
由養成班分組，一群人一起完成一個網頁作品
小組成員同時角色扮演客戶、ＰＭ、設計師、前端、後端的工作，在各種拉扯與爭執（？）中、一起練習擠出一個網頁作品
養成班規定的部分則有
- 網站須包含資料庫的串接（個人專題是把資料寫死在畫面上）
- 網站需可以跨裝置瀏覽（ ＲＷＤ）
- 成果展那天，要可以展示網站跟簡報給面試官看
我們班的狀況滿特別的，不是所有人都有參與團體專題。
一部分的人來上課只是為了學個新技能，沒有一定要藉此轉職或就業。
而投入團隊專題製作，代表接下來的學習會受影響，以及進入將近三個月、猶如大學考前衝刺班，保證睡眠不足的生活。
所以有些人在團隊專題分組時就表明不參與、有的是分組後直接消失、有的是在小組裡表明不寫 code、只參與討論
而我們班在第一次分組後，因為不參與的人太多，各方意見聲量太大，逼得養成班要大家協調，前後調整了 2 次，才決定三個組別的小組成員，最後平均一組 5 ~6 人
我很有幸被同組成員推舉為組長，（然後養成班表示組長不能換組 T-T ），在換組事件中，有幾位表達不想離開這組，至今回想起來還是有點感動（同學大多都知道我有多 hardcore，待我這組代表開發規定多，也比較辛苦ＸＤ）
為什麼要做團體專題？
做團隊專題的好處？
- 模擬多人開發，實習生的概念
- 練習基本的 git 版本控管功能
- 團隊溝通合作與解決衝突的經驗
- 練習學到的技術，同時累積網站作品
我可以自己找組員嗎？
不行。
就跟職場無法選擇同事一樣，你無法預先知道隊友是神是豬，而不管遇到哪種隊友，都得學會面對與處理，並練習與豬同行（？）
養成班是說他們是從個人專題的成果中，參考大家的程度平均分組的，但
世界上唯一公平的事，就是沒有事情是公平的
所以其實滿多人都覺得別組的成員比較誘人，包括我自己，多想跟 coding 大神、設計大神同一組啊！
當小廢物多幸福，能躺平誰想熬夜 :)
團體專題不是養成班的表定進度嗎？為什麼會要熬夜？
在進入團體專題開發的階段，養成班還是有課程持續在進行
有的是團隊開發中，比較跟前端無關的技能。因為我們需要有作品，所以必須用最基本的程度、配合最簡單的方法，讓我們補足原本專案開發中，PM 與後端的任務。
有的技術是專案不一定會用到、但就業市場對前端的技能需求，像是前端框架。
而我們的 Vue 的課程，就是跟團專一併進行的。
白天的課程，有些的確是讓大家跟老師一起討論出專題的內容，但大多還是單純上課，所以團專的開發跟討論時間，有八成是在下課後的時間進行（ aka 表定睡覺時間）
團體專題怎麼進行？
開發時間為期二個半月，一個月確認需求跟成品規格，一個半月寫程式
養成班安排了三階段報告、一次成果展，成果展同時會請有在招募前端的公司人資或團隊主管來看現場聽
針對就業後的專案開發模擬，養成班安排了完整的流程，從企劃發想、功能討論、系統分析、資料庫設計、畫面設計、團隊分工到最後的成果展現
若完全依照養成班規劃的超硬流程、配上整段期間（三個月）每天睡 4 小時的心理準備，絕對可以做出一個還算滿意的網站作品
除了前端工程師，整個流程也涵蓋了就業後，許多不同的專案成員的分工，會以這種形式來條列： “流程主題［ 職場角色 ］- 內容說明”
寫程式之前的企劃階段
- 企劃討論［ 使用者 ］- 全組討論出有興趣、需要做資料串接的網站主題、會有哪些主要功能
- 線稿製作［ UIUX、網頁設計師 ］- 跟 【 個人專題 】一樣，規劃網站的版面配置
- 訂出前後台功能架構 ［ 使用者 vs PM、系統分析 ］- 決定主要功能，因為要串接資料庫，所以一定要有前後台、跟註冊登入功能
- 撰寫使用者案例［ PM 、系統分析 ］- 藉由這個過程，讓團隊聚焦在主要功能、不失焦在人性本貪婪的海量需求中
- 功能聚焦在開發過程中，偏向 pm 的工作
- 對使用者（ 需求方/ 客戶 ）來說，功能一定是越多越好，但開發時間有限、＄＄也有限。如何在有限的時間跟人力下，談妥滿足使用者需求的規格，就是ＰＭ的重要性了
- 課堂上教的使用者案例的老師，正職工作是系統分析師- 活動圖［ PM 、系統分析 ] - 白話文就是流程圖，將前面列出的網站主要功能，用流程圖呈現，像是不同使用者登入後會跳轉到什麼畫面、使用者選擇不同選項後，網站分別會給什麼回應、或是導向哪個頁面，都是在這個階段整理
- 首頁 mockup、logo 設計 5 個評選［ UIUX、網頁設計師 ］- 設計畫面、定義主要色系
- 開發分工［ PM ] - 分配哪些頁面誰負責
- 有些組別是同個功能、前後端同一個人做
- 我們是大家一起討論，分頭搜集 data
- 後端部分，則是我寫 schema，然後跟某位勇者一起建立資料庫- 確定網站風格 [ UIUX、網頁設計師 ]
- 第一次簡報 — 以上全部整理成簡報，專題老師檢查沒有遺漏分工、或缺少什麼在這個主題下，大眾（面試官）會期待看到的基本功能
寫程式之的開發階段
- 建立資料庫 [ 後端 ] — schema 設計，建立資料庫，匯入資料
- 網頁切版 [ 前端 ]- HTML, CSS, JS 的階段，讓網站有個樣子
- 串接ＡＰＩ [ 前端 ]- 將網頁串到資料數，將畫面上的假資料，用資料庫的真資料取代
寫完程式之的驗收階段
- RWD 的 mockup 驗收 [ UIUX、網頁設計師、前端工程師 ] — 根據就業之後的開發經驗，使用者想的畫面通常是桌機，如果沒有配合的設計師先設計好跨裝置的畫面，就自己從桌機延伸出可行的 pad 或手機版，但如果是自己從頭設計，在一開始設計電腦版時，就會同時考量 RWD 的便利性，直接設計桌機、pad、手機在切版時，比較好好切換的排版。
- 網站驗收［ PM ]- 除了網頁本人以外，有時候會需要提供網頁操作或教學文件，以養成班的規劃，我們在這階段做的則是網站設計發想及網頁說明文件
企劃階段跟 【 個人專題企劃篇 】 非常類似，只是專案變大且人多嘴雜，光是網站主題、字體大小、色系、哪些功能放最後都花了不少時間在溝通討論（爭辯？）
當時無法體會養成班規劃的時程，為什麼不增加寫程式的時數，而是把企劃時間拉得得比寫程式還長，同時在剛開始當前端時，聽前輩說 “前期的溝通成本才是最重的”，雖然理解並認同但很無感
直到近期自己經手的專案，走開發後才回頭檢視內容與功能流程、以及設計稿說沒問題，到開發後才想法一堆的磨練心性開發流程後，才深深體會到企劃時間拉長的價值，以及簽訂規格同意書的重要性
企劃階段很多項目是同步進行的，沒有先後關係的任務，參考職位的不同（例如系統分析與網頁設計師），在現實世界可能會一起開工，而團體專題也是，在企劃階段，我們的網站風格跟功能架構，幾乎是同時討論進行的
企劃階段我們遇到什麼困難
企劃階段大概是整個半年養成中，個人覺得心最累的一個階段
首先要在短短的時間與不同性格的人磨合，用力溝通與各種妥協，才能決定出大家有共識的主題與功能。
再來與個人開發很不一樣的地方是，一人開發，選自己喜歡的主題、規劃自己能力可以完成的功能、一切依照自己的開發步調走。
主題部分，Ａ同學有興趣的 Ｂ同學覺得超無聊、而且跟自己未來想要工作的產業或方向也不一樣
能力部分，Ａ同學能力很好，想要做超酷炫動畫、有趣遊戲，而且保證自己可以做得出來、但Ｂ同學光聽到這些就先冷汗一包，開始思考是不是要退課，因為Ａ同學覺得簡單的小東西，Ｂ當初費了九牛二虎但還是沒做出來，很怕拖累大家進度。
Ａ同學習慣按部就班，依照老師要求的進度來進行，但要花時間做很多跟前端工程師根本無關的事，Ｂ同學喜歡壓死線最後三天三夜不眠不休趕專案、但前面零進度簡報擺爛反正不影響未來找工作
各種說得出口或說不出口的原因，都在考驗團隊的合作與溝通能力
心得與結語
這個階段最辛苦的是溝通、磨合、妥協
而這些在新手前端的現實世界或許還不會發生 （那些是大人世界的責任）
畢竟要開發什麼通常是公司、團隊、主管、PM 這群人決策後告知，新手前端在這階段其實沒什麼話語權
但換個角度，這階段磨練的是職場最重視的軟技能 “溝通”，比起進入職場後哭著學習，能在實習階段跟同儕練習，我認為是很珍貴的經驗
另外的好處，則是角色扮演。扮演 UIUX 、扮演系統分析、扮演 PM，跟其他不同角色溝通。
畢竟畢業後會是以前端的身份跟這些角色合作趁這個機會，練習用不同角色思考是很難得的機會，而且或許還能發現自己未來可以考慮的其他方向。
在企劃階段就也快四千多字！讓我為你拍拍手，然後起來伸個懶腰吧！
下一篇會接續紀錄團體專題的開發階段、驗收階段的重點
如果喜歡我的文章，歡迎拍拍手讓我知道，更歡迎你追蹤並持續關注更多的分享。
我們下篇文章見！