[ MTR04 ] Final project 心得_ Parlando


Posted by vick12052002 on 2021-01-16

前言

參加「 程式導師實習計畫 」後,就一直有在想 final project 主題、方向,很嚮往可以做出一個可以簡化工作的小程式或水水的網頁,不過就是一直沒特別強烈的想法,課程就這麼日復一日來到 17 週。

找隊友

就這樣跟著課程一路來到 17 週,也是 huli 提醒我們可以開始想主題或者是找隊友共同開發( 一起發想等 ),因為是線上的課程,雖然有 70 多位的同學異地學習著,但難免還是少了些共戰的感覺( 台中很難集結小樹屋的讀書會啊~ ),所以就想說一定要組隊XD,很想要有實體同學的感覺!?再加上對於專案主題其實沒太多的想法,無法像課程內其他同學可以很有組織力的開團找人,此時 slack 上已有同學們陸續徵求隊友的消息!!!甚至好幾組都徵滿了!!!

超怕同學們都組隊完畢,因而烙單的我,為避免這種憾事發生,加上想透過期末專案檢視自己學習的成果,火速看到 huiming 徵求隊友的訊息,立馬手刀報名XD

就這樣一天,我不在是一個人,我有隊友了,而他們就是「 huiming 、 eric 」

想主題

第一次開會,因為彼此都還卡關 17 週 express 部署,我們討論專案時程,先依課程進度為主,以一週跑一次 sprint 分配前期規劃( 素材收集、撰寫spec、相關技術文件研究、 ),運用 jira 記錄每位隊友的當週目前進度(不過成效很差,很容易忘記領票XD)

幾經兩次的開會,結合三人都有音樂相關的背景或興趣,我們決定來開發個音樂品牌官網,功能結合購物車( 金流 )、後台 CRUD 商品 。

三人初步的角色分配為,前端-我、eric,後端、Wireframe:huiming

spec、mockup

大致定好主題後,我們以上述功能出發,我負責 spec 編寫,說實在憑空想想還真的蠻難的,
只能多去參考網路上公開的資源,來撰寫初版的 spec,而 huiming 透過 spec 來設計 UI flow 、 functional map,認真覺得 pm 要將每個規格都寫很清楚(例如:點擊按鈕會去跳轉到哪個頁面、如果登入失敗會出現 error message 的位置、註冊帳號的長度限制等等),真的不容易,所以寫的清楚完整的 spec 是個值得尊敬 pm 。

不過後來開始畫 mockup ,就沒有很認真的在更新 spec ,在開發上如果遇到問題,就馬上 在 discord 詢問隊友,後來發現這樣不太好,常常發生彼此忘記有某些事的存在。( 自首中 )

Wireframe 主要是由 huiming 操刀,我算是輔助,其實我們都沒什麼設計的經驗,所以參考了很多相關產業的網站,例如:鐵X角、BXSE 等,終於有個畫面的誕生。

Wireframe

有了 Wireframe 的雛形,就由我開始來填色、放入素材XD,其實蠻有趣的,在開始畫之前,有去研究 Figma ( Wireframe 是用 axure PR 畫的 ),但使用上來不太順手,部分功能需要付費解鎖,就放棄回來使用 axure PR,這段期間對於 axure PR 的操作也熟悉不少,也順利將部份頁面的 Prototype 一同完成。

mockup

突發狀況

就在 11 月的某個清晨,收到隊友 eric 的訊息,因部分原因故退出專案,覺得還蠻可惜了,下午開會沒有 eric ,我跟 huiming 有種無力感( 不知道為啥? 兩個人討論起來,就少了一些動力T__T ),希望可以順利再徵到隊員,討論了final 的進度,真的是雙方都擔心 react 的上課進度會拖延到 final 的執行,所以討論出來最晚我們年底要完成,希望自己也可以盡快趕上目前的隊員的進度。

這件事也讓我體驗到,之後進入職場,同事們可能會突然的離職或轉調,就必須去適應新的同事或工作。

隊友「 eric 」 退出,衝擊的挑戰

蹦出新滋味

當天下午 huiming 將寫好的徵隊友文案 po 到 slack 上,晚上收到有同學詢問的消息,隔天確定加入新成員「 阿嗚 」,是個課程跟在進度上的同學,一看就知道是個狠角色,ㄧ進群組也很積極地了解專案目前的進度。

狠角色的加入「 阿嗚 」

開發拉

起初在開發的過程,時程規劃的太理想,原預計在 2020 年 12 月中完成,結果完全無法,由於阿嗚的進度較快,前端的部分是由他先開發前台,而我是到12月中才拋下課程XD ,認真的開發後台。

專案內,我們是有使用到 redux,但當時的我根本還沒上到 redux 的課程,阿嗚很熱心地教我,不過要習慣 redux 的語法,真的需要一點時間,我也是邊看著阿嗚寫 user 的檔案,從模仿中學習、理解,其實 redux 也沒這麼可怕呀~

開發過程發生蠻多葩的事情,後台管理商品內的 quill 編輯器預設、上傳圖片卡關、部署版本錯亂、部署到主機上 icon 壞掉( 至今仍無解,先放放 )、後台 API 偶爾壞掉等等。

不過坑踩的越多,技術功力就越加深拉~( 前提是你要有記得,所以寫下紀錄也是很重要的 )

心得

第一版的 Parlando 終於完成了,將一個網頁從構想到有畫面、功能,真的有種感動的感覺,雖然專案規模相較市場上的產品小很多,但這次共同協作的經驗,真的很寶貴,有隊友的感覺真好內~

改進

這次開發,也有可以改進的地方,總歸出來以下幾點:

  1. 開會完,若開會完有更動需求、規格,請更新 spec
  2. 可以有效地使用 CSS framework 進行開發,減少開發成本 例如:bootstrap、Material-UI
  3. 開發前,討論所有會使用到的技術
  4. 有時間的話,可以寫測試檔,避免部署到主機上,有問題,提高 debug 的難度
  5. CI/CD 自動化部署到主機上,避免發生部署版本錯亂的問題

有人會好奇為什麼會取名為 Parlando ?
第一,因為我們是音響品牌,品牌名稱與音樂有所相關
第二,因為是義大利文,所以唸起來帶點彈舌蠻帥的XD,符合我們的品牌形象
第三,Parlando 的意思是抑揚清楚,如說自然,期許我們三人能在職場上,能抑揚清楚、如說自然地與他人分享技術、看法。

其實蠻感謝 huiming、阿嗚,不論在課程、技術上,都很常給我建議,甚至是目前在求職階段,都還是鼓勵著我( 鞭策我快去求職 ),總之,能與你們共同開發,真的很幸運,未來就各自好好在前、後端領域發展,後會有期!!

有興趣的同學們,附上專案連結 Parlando
另外兩位夥伴的心得 huiming阿嗚


#final project #程式導師







Related Posts

Day 1 Markdown & Minimal Table

Day 1 Markdown & Minimal Table

一起用 JavaScript 來複習經典排序法吧!

一起用 JavaScript 來複習經典排序法吧!

layer-list 應用 - 愛奇藝和當貝市場的 QR Code 掃描外框

layer-list 應用 - 愛奇藝和當貝市場的 QR Code 掃描外框


Comments