轉職前端工程師作品集 | 與團隊一起網頁開發(上) - 企劃階段

Jamie Choice
10 min readApr 21, 2023

這篇文章是我在 【前端工程師養成班】的團體專題製作紀錄。

在這個系列,我會分享工程師養成班的課程規劃、各技能的學習內容與實務應用,讓還沒走上這條路的人可以一探究竟,再決定是否要走上這條不歸路。

本篇是前端工程師養成班的團體專題製作紀錄的第一篇,團體專題製作是練習團隊開發流程的初體驗。

這系列記錄一個網站從需求蒐集彙整、多人開發、到專案驗收的過程,內容很多所以拆成三篇來寫,分別是【企劃階段】、【開發階段】、【驗收階段】。

內容包含各階段的準備項目、重點整理,以及我個人的心路歷程 (碎碎念)

前端工程師作品集 | 如何與團隊一起開發
Photo by Helena Lopes on Unsplash

關於我 | 餐飲背景,在決定報名養成班之前,對工程師、寫程式一點概念都沒有,大學科系與數理、資工、資管完全零交集。

而上課的年紀,正是鄉民熱烈討論工程師應該要退休的年紀。

這樣的背景,在半年的養成班苦讀後後成功轉職,目前在間不錯的接案公司做政府的案子,辦公室有大落地窗可以遠眺美麗華摩天輪與台北 101 ,過著朝九晚五、咖啡喝到飽、work life belance 的生活

團體專題在幹嘛?

網站開發的前端實習生

由養成班分組,一群人一起完成一個網頁作品

小組成員同時角色扮演客戶、PM、設計師、前端、後端的工作,在各種拉扯與爭執(?)中、一起練習擠出一個網頁作品

養成班規定的部分則有

  • 網站須包含資料庫的串接(個人專題是把資料寫死在畫面上)
  • 網站需可以跨裝置瀏覽( RWD)
  • 成果展那天,要可以展示網站跟簡報給面試官看

我們班的狀況滿特別的,不是所有人都有參與團體專題。

一部分的人來上課只是為了學個新技能,沒有一定要藉此轉職或就業。

而投入團隊專題製作,代表接下來的學習會受影響,以及進入將近三個月、猶如大學考前衝刺班,保證睡眠不足的生活。

所以有些人在團隊專題分組時就表明不參與、有的是分組後直接消失、有的是在小組裡表明不寫 code、只參與討論

而我們班在第一次分組後,因為不參與的人太多,各方意見聲量太大,逼得養成班要大家協調,前後調整了 2 次,才決定三個組別的小組成員,最後平均一組 5 ~6 人

我很有幸被同組成員推舉為組長,(然後養成班表示組長不能換組 T-T ),在換組事件中,有幾位表達不想離開這組,至今回想起來還是有點感動(同學大多都知道我有多 hardcore,待我這組代表開發規定多,也比較辛苦XD)

為什麼要做團體專題?

做團隊專題的好處?

  • 模擬多人開發,實習生的概念
  • 練習基本的 git 版本控管功能
  • 團隊溝通合作與解決衝突的經驗
  • 練習學到的技術,同時累積網站作品

我可以自己找組員嗎?

不行。

就跟職場無法選擇同事一樣,你無法預先知道隊友是神是豬,而不管遇到哪種隊友,都得學會面對與處理,並練習與豬同行(?)

養成班是說他們是從個人專題的成果中,參考大家的程度平均分組的,但

世界上唯一公平的事,就是沒有事情是公平的

所以其實滿多人都覺得別組的成員比較誘人,包括我自己,多想跟 coding 大神、設計大神同一組啊!

當小廢物多幸福,能躺平誰想熬夜 :)

團體專題不是養成班的表定進度嗎?為什麼會要熬夜?

在進入團體專題開發的階段,養成班還是有課程持續在進行

有的是團隊開發中,比較跟前端無關的技能。因為我們需要有作品,所以必須用最基本的程度、配合最簡單的方法,讓我們補足原本專案開發中,PM 與後端的任務。

有的技術是專案不一定會用到、但就業市場對前端的技能需求,像是前端框架。

而我們的 Vue 的課程,就是跟團專一併進行的。

白天的課程,有些的確是讓大家跟老師一起討論出專題的內容,但大多還是單純上課,所以團專的開發跟討論時間,有八成是在下課後的時間進行( aka 表定睡覺時間)

為什麼要做團體專題?
Photo by Tim De Pauw on Unsplash

團體專題怎麼進行?

開發時間為期二個半月,一個月確認需求跟成品規格,一個半月寫程式

養成班安排了三階段報告、一次成果展,成果展同時會請有在招募前端的公司人資或團隊主管來看現場聽

針對就業後的專案開發模擬,養成班安排了完整的流程,從企劃發想、功能討論、系統分析、資料庫設計、畫面設計、團隊分工到最後的成果展現

若完全依照養成班規劃的超硬流程、配上整段期間(三個月)每天睡 4 小時的心理準備,絕對可以做出一個還算滿意的網站作品

從確定分組後,到最後成果發表為期 2 個半月的時間。

整個流程大致可分三階段

  1. 寫程式之前的企劃階段
  2. 寫程式的開發階段 | 看這篇
  3. 驗收與求職

除了前端工程師,整個流程也涵蓋了就業後,許多不同的專案成員的分工,會以這種形式來條列: “流程主題[ 職場角色 ]- 內容說明

寫程式之前的企劃階段

  • 企劃討論[ 使用者 ]- 全組討論出有興趣、需要做資料串接的網站主題、會有哪些主要功能
  • 線稿製作[ UIUX、網頁設計師 ]- 跟 【 個人專題 】一樣,規劃網站的版面配置
  • 訂出前後台功能架構 [ 使用者 vs PM、系統分析 ]- 決定主要功能,因為要串接資料庫,所以一定要有前後台、跟註冊登入功能
  • 撰寫使用者案例[ PM 、系統分析 ]- 藉由這個過程,讓團隊聚焦在主要功能、不失焦在人性本貪婪的海量需求中
- 功能聚焦在開發過程中,偏向 pm 的工作
- 對使用者( 需求方/ 客戶 )來說,功能一定是越多越好,但開發時間有限、$$也有限。如何在有限的時間跟人力下,談妥滿足使用者需求的規格,就是PM的重要性了
- 課堂上教的使用者案例的老師,正職工作是系統分析師
  • 活動圖[ PM 、系統分析 ] - 白話文就是流程圖,將前面列出的網站主要功能,用流程圖呈現,像是不同使用者登入後會跳轉到什麼畫面、使用者選擇不同選項後,網站分別會給什麼回應、或是導向哪個頁面,都是在這個階段整理
  • 首頁 mockup、logo 設計 5 個評選[ UIUX、網頁設計師 ]- 設計畫面、定義主要色系
  • 開發分工[ PM ] - 分配哪些頁面誰負責
- 有些組別是同個功能、前後端同一個人做
- 我們是大家一起討論,分頭搜集 data
- 後端部分,則是我寫 schema,然後跟某位勇者一起建立資料庫
  • 確定網站風格 [ UIUX、網頁設計師 ]
  • 第一次簡報 — 以上全部整理成簡報,專題老師檢查沒有遺漏分工、或缺少什麼在這個主題下,大眾(面試官)會期待看到的基本功能

寫程式之的開發階段

  • 建立資料庫 [ 後端 ] — schema 設計,建立資料庫,匯入資料
  • 網頁切版 [ 前端 ]- HTML, CSS, JS 的階段,讓網站有個樣子
  • 串接API [ 前端 ]- 將網頁串到資料數,將畫面上的假資料,用資料庫的真資料取代

寫完程式之的驗收階段

  • RWD 的 mockup 驗收 [ UIUX、網頁設計師、前端工程師 ] — 根據就業之後的開發經驗,使用者想的畫面通常是桌機,如果沒有配合的設計師先設計好跨裝置的畫面,就自己從桌機延伸出可行的 pad 或手機版,但如果是自己從頭設計,在一開始設計電腦版時,就會同時考量 RWD 的便利性,直接設計桌機、pad、手機在切版時,比較好好切換的排版。
  • 網站驗收[ PM ]- 除了網頁本人以外,有時候會需要提供網頁操作或教學文件,以養成班的規劃,我們在這階段做的則是網站設計發想及網頁說明文件

企劃階段跟 【 個人專題企劃篇 】 非常類似,只是專案變大且人多嘴雜,光是網站主題、字體大小、色系、哪些功能放最後都花了不少時間在溝通討論(爭辯?)

當時無法體會養成班規劃的時程,為什麼不增加寫程式的時數,而是把企劃時間拉得得比寫程式還長,同時在剛開始當前端時,聽前輩說 “前期的溝通成本才是最重的”,雖然理解並認同但很無感

直到近期自己經手的專案,走開發後才回頭檢視內容與功能流程、以及設計稿說沒問題,到開發後才想法一堆的磨練心性開發流程後,才深深體會到企劃時間拉長的價值,以及簽訂規格同意書的重要性

企劃階段很多項目是同步進行的,沒有先後關係的任務,參考職位的不同(例如系統分析與網頁設計師),在現實世界可能會一起開工,而團體專題也是,在企劃階段,我們的網站風格跟功能架構,幾乎是同時討論進行的

企劃階段我們遇到什麼困難

企劃階段大概是整個半年養成中,個人覺得心最累的一個階段

企劃階段我們遇到什麼困難
Photo by Christian Erfurt on Unsplash

首先要在短短的時間與不同性格的人磨合,用力溝通與各種妥協,才能決定出大家有共識的主題與功能。

再來與個人開發很不一樣的地方是,一人開發,選自己喜歡的主題、規劃自己能力可以完成的功能、一切依照自己的開發步調走。

主題部分,A同學有興趣的 B同學覺得超無聊、而且跟自己未來想要工作的產業或方向也不一樣

能力部分,A同學能力很好,想要做超酷炫動畫、有趣遊戲,而且保證自己可以做得出來、但B同學光聽到這些就先冷汗一包,開始思考是不是要退課,因為A同學覺得簡單的小東西,B當初費了九牛二虎但還是沒做出來,很怕拖累大家進度。

A同學習慣按部就班,依照老師要求的進度來進行,但要花時間做很多跟前端工程師根本無關的事,B同學喜歡壓死線最後三天三夜不眠不休趕專案、但前面零進度簡報擺爛反正不影響未來找工作

各種說得出口或說不出口的原因,都在考驗團隊的合作與溝通能力

如何與團隊一起開發
Photo by Mateusz Wacławek on Unsplash

心得與結語

這個階段最辛苦的是溝通、磨合、妥協

而這些在新手前端的現實世界或許還不會發生 (那些是大人世界的責任)

畢竟要開發什麼通常是公司、團隊、主管、PM 這群人決策後告知,新手前端在這階段其實沒什麼話語權

但換個角度,這階段磨練的是職場最重視的軟技能 “溝通”,比起進入職場後哭著學習,能在實習階段跟同儕練習,我認為是很珍貴的經驗

另外的好處,則是角色扮演。扮演 UIUX 、扮演系統分析、扮演 PM,跟其他不同角色溝通。

畢竟畢業後會是以前端的身份跟這些角色合作趁這個機會,練習用不同角色思考是很難得的機會,而且或許還能發現自己未來可以考慮的其他方向。

在企劃階段就也快四千多字!讓我為你拍拍手,然後起來伸個懶腰吧!
下一篇會接續紀錄團體專題的開發階段、驗收階段的重點
如果喜歡我的文章,歡迎拍拍手讓我知道,更歡迎你追蹤並持續關注更多的分享。
我們下篇文章見!

你可能有興趣的其他文章

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Jamie Choice
Jamie Choice

Written by Jamie Choice

前端工程師 | 求職 | 轉職 | 學習成長 | 超主觀論點

No responses yet

Write a response