半年從編輯轉職前端工程師,我是怎麼做到的?

0
414
圖片來源:Pexels

「你下週可以做完這個功能嗎?」一年前由我來問工程師的問題,現在則是由 PM 來問我。

我是 Maureen,從新聞編輯兼數位專題 PM 變成前端工程師剛好滿一年,而在這之間,我經歷了 AppWorks School 2018 夏季學期 Web Class (2018/7 – 2018/11)。

藉由這篇文章,希望可以鼓勵跟當初的我一樣:想要轉職,卻又沒自信自己能成功的人。

沒有工程背景的我為什麼要轉職?

為何要斷炊半年學程式?這要從 2017 年,我從紙本編輯跨足到規劃新聞專題網頁說起。當時為了吸引線上讀者,我嘗試以闖關遊戲情境故事等互動體驗來呈現新聞內容,也在這一年多接觸到網頁設計師、前端工程師,像魔術師般把我天馬行空的想法全部都化為網頁。

規劃網頁的經驗多了,我腦袋冒出「既然覺得他們那麼厲害,怎麼不試著自己做做看呢?」的想法,於是開始打開 Chrome 的 Developer Tool ,試玩 HTML 和 CSS 看版面變化,也在 Udacity 上看 JavaScript 入門,同時盤算著參加資策會的前端課程來加速轉職。後來從朋友口中得知 AppWorks School 的招生消息,一看到「自學為主」和「全程免費」,就火速填完申請表交出去了。

在到 AppWorks School 面試前,我已經辭掉當時的工作,並為自己安排了「Gap Month」,到美國程式自學學校 School 42 體驗一個月的魔鬼訓練營(學習 C 語言和 Git)。當時就下定決心,如果沒有進 AppWorks School,我就要報名資策會課程,或是繼續在 School 42 自學程式直到可以成為前端工程師為止。

後來很幸運地成為 Web Class #1 的學員,在這 5 個月、每天投資至少 15 小時在寫程式的經歷中,我不只學到寫程式,更學到如何「自己解決問題」的能力,更重要的是,我很喜歡瘋狂在鍵盤上敲敲打打、藉由一行行出現的程式碼,做出心目中理想產品的自己。

學寫程式的三個階段

階段一:懵懵懂懂 ,學習如何向 Google 大神問問題

在實際進駐 AppWorks School 前,有四週的遠距預習,每週都有指定的線上課程及作業,內容包括 HTML、CSS、JavaScript,也用到前端框架 React.js 和後端框架 Node.js。當時的我每天都在崩潰邊緣、經常一天花 15 小時看教學影片、寫程式,3 小時才解決一個 bug。雖然 School 預估遠距階段,每週約需投入 15-20 小時,但實際上我每週都至少投入 60 個小時。

我在 AppWorks School 的座位。筆電後面還有大家團購的葉黃素。

後來實際到 School 之後,迎面而來的是要在三週內,按照設計稿做出能用 Facebook 註冊、信用卡結帳的電商網站。對當時連 CSS 排版方式有幾代、float 跟 flex 有什麼差異都不知道的我來說,必須在短時間內學會 「用正確的關鍵字請教 Google 大神」,因為在 AppWorks School,永遠是「自己解決第一、問 Google 第二、問同學第三、問導師第四」。

我到現在都覺得「正確的關鍵字」是一門很深奧的學問,面對同樣問題,10個人就會有 10 種問 Google 的方式。我很快就發現我無法快速解決問題的最大主因是──我老是下錯關鍵字。

於是我在卡關超過一至兩小時後,不再會問同學或導師「這個問題要如何解決?」而是「遇到這個問題,你會在 Google 下什麼關鍵字?」然後看他們如何檢視搜尋結果。這是在 AppWorks School 很寶貴的機會,如果是自己在家自學的話,很少能瞬間問到這麼多搜尋方法。

學會問 Google 後 ,我的成長速度變快,課程也進到分組專題研討,去了解更多必備知識, 包括 Cache、FP、OOP、MVC、SPA 等觀念和 Webpack、Lint Tool 等工具。我也在三天內,藉由 React.js 文檔、線上課程和從設計圖網站 Pinterest 上找靈感,做出 React.js 的 To-Do List。

(左) Pinterest 上找到的設計圖; (右) 最後的 To-Do List 成品

階段二:模仿典範,學習如何和他人協作

在完成電商網站後,我們花了兩天去閱讀導師寫的電商網站的 Source Code,並分析和自己的版本有何不同。這是我第一次體會到 Code Review 的重要性,也學到如何封裝重複的程式碼、提升開發速度。

接下來進到「團體協作專案」,我和三位同學有一週的時間,以導師的電商網站 Source Code 為基礎,再加上我們期望的新功能。特別的是,這一週的開發流程是比照業界,跑 Scrum + Trello 來管理時程和進度。

團體協作新增了會員評價、三種登入方式、掌握運送流程等新功能,並利用 Trello 來追蹤進度。

接踵而來的「跨班協作小組」,則是混血 Web、iOS、Android 班同學,四人一起研究 Firebase,在兩天內完成好友留言板網站,學習目的是之後做個人作品時,有可能需要用到 Firebase 資料庫,也初步認識了資料結構。

這個階段的我,每天都在大量閱讀別人的程式碼、和別人共同編輯同份程式碼,這讓我能夠冷靜面對實際工作遇到 conflict(兩人的程式碼產生衝突)或是版本控制問題的狀況。

階段三:獨立自主,PM、設計、前端一手包

最後終於來到整段學習歷程的高潮──製作個人作品!

關於到底要花五週做出什麼個人作品,我考慮過要重新規劃醫院 HIS 系統(但規模太龐大!)、咖啡介紹網站(但市面上太多!),最後決定要製作一個線上書籍管理網站來解決我的長期困擾:愛買書又會忘記哪些還沒看、忘記把書借給誰、看書沒效率。

確定主題後,我蒐集了素材和決定要使用的技術,並用 Trello 管理時程,最後做出了我人生中第一次從企劃、設計、製作全包的網站「Booky」。使用者可以用筆電前鏡頭或手機相機掃書碼,把書加進網站,也能記錄閱讀和借用狀態,或是設定閱讀事件到 Google Calendar,定時提醒自己要讀書。

獨立完成 Booky ,是我能自信說出「我是前端工程師」的轉捩點,也因為面試時能夠 demo Booky,因此更能說服面試官我是有技術底的。

當初很希望做出自己滿意的作品,不論是研究掃描書碼的 JavaScript Library 或是把當時像天書般的 Google Calendar API 接進 Booky,我都非常慶幸當初沒有因為時程很趕而放棄任何一個我認為很重要的功能。

首頁書本輪播效果取經台北車站火車入口的自動借書站。

最後一哩路: 準備面試!

AppWorks School 也舉辦校友聚會,讓我們跟學長姊交流;邀請 CTO 來演講、到 91APP、ShopBack 等企業參訪,也邊開始準備面試。印象最深刻的是全班要坐在一起,導師出題,各自錄音回答,再放出來給全班聽。大家從一開始覺得聽自己的回答很恥,後來變成完全可以隨錄隨放。而後續最重要的,就是用心寫好自己的履歷、用心準備模擬面試,做足準備迎接和合作企業的 20 分鐘快速面試

履歷最終只有短短兩頁 A4,每個人在校長的督導下,一定至少改了 3 個版本。不過就是張紙,有那麼難?現在回頭看,真的很難啊!我在這個過程中,才暫時離開被程式碼淹沒四個月的腦袋,重新審視自己從編輯轉職到前端工程師,究竟有什麼優勢?企業為什麼要選我,不選寫程式四年的本科生?我對自己所使用的技術掌握度多高?除了寫程式,我能帶給企業什麼樣的附加價值?什麼樣的企業又能夠帶給我快速成長的機會?

不斷逼問自己這些問題,才能找到自己的優勢和劣勢,也才準備好面對重新求職的過程。在密密麻麻的面試期後,我最終選擇自己一直有興趣的醫療產業,負責開發給病患使用的療程管理平台,主寫 Vue,偶爾也寫 Node.js。進公司時會的技術約所需技術的三成,在 JavaScript 的基礎下,大概兩週就可以進入實際開發。現在工作半年了,不只想著要快點熟悉技術,也開始把某些功能或介面寫成同事可以共用的元件,希望可以兼顧開發速度和讓程式碼容易維護。直到今天,寫完一個功能後還是會覺得很開心,總有一種闖關成功的成就感,也渴望還可以知道更多。

寫在最後:轉職路上的收穫

回憶起在 AppWorks School 的收穫,除了技術之外,最棒的就是找到一群志同道合的好朋友,大家來自截然不同的背景,卻因為同樣熱愛程式的心而相聚。卡關時一發問就有兩、三個人衝到你旁邊看,你的問題就像他的問題,甚至願意陪你重構一段程式碼五次,以及無數次的彼此心理輔導、鼓勵。結班後大家也持續開每月讀書會,班上同學輪流主講一個自己覺得值得分享的主題;也會相揪參加程式組織的活動甚至是加入組織幫忙寫網頁。不論過多久,都覺得能在程式路遇到這群人太好了。

班上同學抽出時間將每個個人作品的 Logo 集合成班服,送給人人跪謝的校長和導師。(作者為前排中)

想到當初離開上份工作時,有位前輩聽到我要轉職前端工程師,跟我說「妳真的很勇敢,(停頓三秒),但希望我念小學的女兒以後不要學妳。」我只跟他說:「放心,我一定會做到讓你女兒想學我。」如果是文字工作者的我都可以,相信沒有人不行!

發表評論

請輸入您的評論!
請在這裡輸入您的名字