資策會修習前端經歷:第二部、專題工作篇

AOI's Blog
Jun 26, 2021

--

上一篇講到的主要重點放在學習與日常生活上面,這篇則是放在我是如何發想到實作一個專案的過程,還有我在團隊合作上碰到的挫折。會講到資策會提供的資源 — — 包含模擬團體面試與職場課程。另外有我當時關於就業的想法,可以跟現在的自己形成一個反差,從看衰自己,到即便自己還有進步空間,也能正向的看待一切。最後則是我的反思與行動。

前置作業:共通的部分

歸納出來幾個我必做的工作,而且這些工作在所有的專案裡面都會出現,幾個固定元素:時程表、分工內容、製作主題、使用技術、參考資料,還有 PPT 與上台報告。

製作 PPT 不是只是為了報告而已,我是有將 PPT 作為一個專案管理的工具在使用。會依造我做事的流程,分為兩次完成。第一次是先把模板與目錄做好,第二次則會在作品已經完成的差不多,再把內容通通填充進去,大概就會知道自己上台的時候該說什麼。

主題選定好,安排時程規劃,製作時的工作內容分類。動手前繪製簡單的草圖,用參考資料分析需要的元素,再想自己想加入的元件與想寫的功能有哪些。

小專題1:瓦西拉的寶藏-美術

第一個小專我是參考遊戲製作的分工,把自己做的事情分為遊戲、美術、企劃三個類型。其實實際製作的時候,有分工卻只有我一個人,我會在腦內交替角色,例如我現在畫畫,我就會告訴自己,我現在是美術。這點算是我個人比較特別的作法吧,因為我真的沒看到其他人會像我這樣,連工作角色都會去建立(該說有點獨特嗎?)。

因為企劃這件事情,在這個小專上面,比較像是另外兩個類型工作的附屬而不是主體,所以我就不為企劃這件事寫一個段落了。

包含在美術裡面的企劃工作:角色與故事背景設定、音樂風格選定。

發想時的手稿,現在看,覺得當時字寫真漂亮,我再也寫不出這麼美的字了(喂)
美術又帶點企劃的部分。
開始畫面。
遊戲畫面,想當初,為了新增那幾個按鈕,差點沒被DOM操作搞死。

小專題1:瓦西拉的寶藏-程式

想當時,只上了不到一週的JS就要寫一個小遊戲,我真的覺得很難,但我還是選擇勇敢接下這個挑戰(結果發表的時候才發現只有三分之一的人寫小專有用到JS,其他20幾人都是靜態網站…我的勇氣是梁靜茹給的嗎?)。

光是怎麼開始寫都是個問題,所以寫之前我在 MDN 找了一個教程——猜數字遊戲,來幫助我了解,如何開始寫一個遊戲。我先照著做一次,並且在腦內,創造一個會寫程式的角色。

寫完猜數字之後,我就沒有在怕寫遊戲了。抱著就算寫很爛我也要衝一發的心情,選擇了一個比較寫得出來的主題——slot老虎機。會這樣選擇原因是:容易找得到範例程式碼、遊戲規則單純容易理解,我在寫的時候比較不會把自己逼死。之後就是一行一行刻出自己要的遊戲與功能。

有碰到幾個坑,摔慘。

先是學了一下 HTML5元素 <canvas> 的使用,之後我就放棄使用它了,原因是我真的不了解怎麼來用這個元素,碰到問題也沒辦法排除。

另一個坑是陣列傳址不傳值。光這個坑我就在裡面卡了不知道幾個小時。

第三個坑是我當時真的不會讀官方文件,我有一個禮拜六整天都在看如何使用loading.io,一個下午在官方那邊翻來覆去,是真的看不懂。禮拜一去資策會的時候我跑去問老師,老師教給了我如何 de bug 的方法,教我一行一行找問題。最後是我坐我旁邊的帥哥幫我讀了官方文件,告訴我要怎麼使用,我才從這個坑裡面出來。

好,終於知道要怎麼自己 de bug 跟讀文件了(喜極而泣)。

那一行卡了好幾小時,時間飛逝啊。

小專題2:朝朝獨立書店-前端

前期發想的時候,就想找自己有興趣的主題,從兩個主題中:1.推廣晨跑 2.公共圖書館,選了後者,再延伸出獨立書店的構想,並且考慮要製作“會員系統”與“借閱書籍系統”。

然後,為了知道具體要做些什麼,依舊是用分工的方式,擷取出能夠做的事情。

網站企劃:製作什麼網站、資料收集(爬蟲)(照片文字、形象、CI)。

UI/UX網站視覺:線框稿、prototype、設計規範。

前端工程師:切版、SEO、RWD、語意化標籤、調教網站效能。

後端工程師:資料庫、後台、SEO自動化、爬蟲。

之後再從裡面挑選出我要做的事情的角色,然後去做我該做的事。

首先是網站企劃,主題:朝朝獨立書店;虛構設定:位於醫院附近巷子裡面的一間小店;一樓有藏書與小咖啡bar;二樓有一個活動空間可以供讀者租借使用;書本相關業務分為借閱與購買。

再來是網頁設計,畢竟是設計人,怎麼可以不自己畫LOGO呢?之後按造流程從Wireframe => prototype => 色指定,一一就定位,工具是 XD 與 AI。

再來是切版,有用到 Bootstrap, header 包含:title、nav、背景圖、主要文字、次要文字、搜尋功能; main 則有:關於我們、最新消息、讀者服務、來店資訊;footer:台灣各點、網站、社群資訊、版權、使用條款。

這張是用XD製作的設計稿。

小專題2:朝朝獨立書店-後端

小專2的時間其實非常趕,要硬生出來還要達到自己能接受的水準,為此一整個連假都沒有休息,一直在寫小專的後台,成功的達成了連假期間,還能睡眠不足的成就。

後端是用 PHP+MySQL 去實作出來的,把會員系統的範例程式一邊理解一邊轉換成自己專案需要的樣子。然後圖書借閱系統基本上是我看著實際借閱與預約流程,自己一行一行血刻出來的,也許是我連假的時候真的太努力,我寫完借閱系統之後發現我還有一點點時間,所以又手刻了分頁出來…

登入登出頁,這全部都是血汗與肝。
會員功能裡面的預約書與借閱。寫的比想像快,所以其實是有寫分頁的。

大專題製作:前期

很快就要來到分組做大專的時候了,與人合作是我在相對於自己工作的時候,比較沒有自信的部分,為了讓自己心定下來,我告訴自己:這是一個機會,一個試煉。

自我介紹的時候聊得滿愉快的,所以後來的我,都會很懷念一開始的氣氛

職場課程與模擬面試

在職場課程我其實學到滿多事情的,因為我個人求職的經驗是比較少,上完課之後,我大概知道自己的履歷要怎麼寫會比原本的更好,而且也開始對於真實的職場有個概念。

模擬面試的時候是跟組員一起團體面試的,那個時候我其實狀態比較沒那麼穩,也沒什麼自信,我說我還是想做 UI/UX ,面試官又用一些問題來考驗我們,當時有問組長一個問題,就是: 如果組內的資源有限,專案裡面需要剔除一個組員,你會選誰?

當時組長其實不想回答,被逼到最後,才把我的名字講出來。

其實當時是有點傷心,但想到他也是迫於無奈,我也只能把這種感覺往肚裡吞。後來面試的過程,我就一句話也都講不出來,結束之後,我坐在大廳,感覺自己的腦袋嗡嗡作響,頭也很痛。

對啊,我睡眠不足、很疲勞,因為學習跟做我們的作品都很重要,犧牲了睡眠時間與休息時間,四個月沒有一天有回去我的家鄉,假日跟下課後在咖啡廳寫程式,我這麼努力想做出成果,結果是不被需要嗎?當下負面的念頭很多,那個時間點是我真正出現退訓念頭的時候,但我什麼都沒說,也沒有人問我。

當天我也只是靜靜的,早點離開現場而已。

大專題製作:中期

發現自己沒辦法融入大家,心情真的很糟糕,也影響我做專題的表現。當時家裡面也發生了一些事情,與家人處的也不是很融洽,不管是在家裡還是資策會,其實都處在巨大壓力鍋裡面。其實我知道問題是什麼,也有講出來。但被無視久了,我也漸漸感到疲憊,不在多說什麼。

就連要幫作品取名字這件事情,都要我再三拜託大家才願意一起處理,我不知道為什麼要一起做事情會有這麼難。

開會時間不定我也忍了,但在大家都在的會議上先是被無視一次,之後我想說,應該是因為我沒有引起他人注意,所以又主動去跟某人說話,第一句還沒講完就回我好,我也只能繼續說完,再完整的被敷衍過去。

我還沒開始崩壞嗎?不,已經開始了,我早晚會倒下的。但我的求救訊號沒有任何人聽到,一個也沒有。

大專題製作:後期

在分組之前都還好好的,分組之後整個人開始狀況走下波。

我嘗試要跟我的組員溝通,會關心每個人在幹嘛,而且是到每個人的旁邊直接去講的,而且都有把自己的進度講出來,但大概是我的表達方式不好吧,問題都沒有當下被處理,總是要讓我再帶回去折磨個一週才要把事情處理好。

在會議被無視,走過去直接講也不處理問題。那之後我就炸毛了,到後來,心也不在作品上了,主要是在處理家裡的事情,那陣子真的太多麻煩了,有些分身乏術,也因為長期睡眠不足(大概三個月都沒睡飽吧),精神狀態不是很好。

我知道自己在大專上其實也負責了不少事情,後台的設計切版、手刻的RWD、HTML到JSX的搬運、小小功能的程式、設計發想的部分、資料庫設計的部分、一點點的文案,都有我的份。

但我最終,是對這全部沈默以對,因為我已經筋疲力竭了,想休息,然後我什麼都不要了,只求誰都不要再來煩我,我不想再找任何人說話。

對就業這件事的反思

我最終還是要面對求職面試這件事,所以自信、講話、表達方式,都必須訓練。為了重建自己的自尊與自信,參考了這個影片。花了三個月每天對鏡子裡的自己說:

「不管過程中產出多少垃圾,我最終都會做好。」

「我既自律又健康快樂,原本的我就已經夠好,無需向他人證明。」

搭配實際的行動,後來也變得快樂又自律,固定的作息,規律的運動,身體變得很健康。

對合作這件事的反思

跟別人好好相處是一個課題,但如果我連自己都沒照顧好,那我哪有什麼本錢去跟別人搞好關係。

結業那天,我站在窗戶前面,當時我只想緊閉雙眼什麼都不看,想回去休息,自從開始做大專,想著別人的事想到失眠,很久都沒有睡個好覺,很久都沒有平靜的感覺。

當時,我看見坐我隔壁的帥哥走過來,看著我,說:「因為可能之後就很難再見到你了,所以我現在就跟你講。」

他說,他聽說了模擬面試發生的事。

告訴我模擬面試只是一個測試而已,如果我真的因此受傷且一蹶不振,不就跟他們說的一樣,抗壓性太低了嗎?我說,對,你說的事我都知道。

然後他又說,我在小專1跟小專2上面,在他看來都表現得還不錯。我說,對,我超棒這件事我都知道。

聽他講完之後,我就轉身靠在牆壁,那道眼淚不是因為難過才流的,是因為突然發現,原來我也值得受到肯定,才流的。

雖然我在合作上遇到挫折了,也要學會肯定自己,不用因為他人的態度而感到自己被減損,這樣我就可以用更健康的態度來對待人際關係。

結語-想對當初那個自己說的話

我真的要感謝我自己的堅持努力與付出。

謝謝你沒有放棄,謝謝你沒有真的退訓,也沒有放棄走前端。大腦真的很棒,居然可以在精神狀況這麼差的時候,日檢N2還能通過,為什麼這麼棒的事都沒有發現呢?

今後也會一直進步與改善,學習永不停歇。

--

--

AOI's Blog

可以叫我蜻蜓或者小葵,請多指教🙌想成為理性與感性兼具的前端工程師,但目前還停留在睡眠不足階段。想做一個獨當一面的創作者。