這五個月的實習心得

Cover工作的早晨,McDonald早餐和冰美式是我一天絕佳的動力來源。

前言

2016-03-01~2016-07-29。
實習了整整五個月,接到兵單剎那,就知道我該離開了,8/4準時入伍。

因為好久沒有記錄實習心得與過程了,這篇就來完整地寫下我這五個月的經歷吧,以後回憶起來想必也是很精彩的。

先說說我的背景,以當時剛進入公司的實力,僅能寫寫HTML、CSS,並運用簡易的jQuery實現一些介面效果,
還有一點點的node.js使用經驗,如此而已,可以說離馬上能實戰的工程師實力天差地遠。

剛進入公司時。公司丟給我一台電競筆電,開始了我的實習生涯,每周二、四、五上午九點準時報到。
WATICS離捷運科技大樓站非常近,交通上還算方便,但因為我從中壢通勤,六點多就得從清晨起來準備出發搭車,
9025是我的好夥伴,搭到台北大學站再走到捷運中山國中站搭文湖線,總時程大致要花一個半小時,所以客運就是我補眠的好時機。

初期

一開始公司人非常少,我是公司含老闆在內的第八名員工,上班氣氛也就差了些,大部分時間大家都很安靜,同事也不太理我,第一個禮拜還自己去吃中餐…

我的第一個被分派的任務是撰寫Web聊天室平台,公司是做健康管理的iOS APP,想要新增聊天室平台能和健康教練傳訊息。
面試我的Fuhua要我研究XMPP(第一篇記錄有提到),由於我對於這種協議沒有概念,XML更沒有用過,這讓我花費了非常多時間去看文件,
有好幾天一整天就這樣過了,那時常常讓我很沒心力與動力。

後來搞了三個禮拜,看了無數文件、無數範例,終於架好XMPP server,並且前端介面有初步的架構,能私人訊息、傳圖片、離線訊息等等,讓我獲得滿大的成就感,
只是因為公司完全沒有正職寫web,我也沒辦法跟人討論,一切的一切都自己搞定,這段期間我以超快速度成長,學習自我解決問題的能力,
學習如何Google出解答、Google論壇發問,以及如何在Stackoverflow找答案,我覺得這是我實習過程中很大的進步點,也是我踏入程式界很重要的軟實力,因為我相信
只有自己解決的事情,才是真正學習到。

第一個屬於自己的作品

約莫到3月底,公司叫我暫且擱緩聊天室的專案,先來幫公司寫一個文章平台,目的是讓各健身教練、醫師、健康資訊的文章能夠顯示在網站上。
起初因為對於React這個前端JavaScript library很有興趣,所以想挑戰自己使用React去寫,但過程中碰到了不少問題,那時不會用router、無法上一頁,
還有壓倒我最後的一根稻草,網站SEO,那時我還沒有Server side render的概念,在前端render,因為React是單頁式架構,只能有固定的meta data。

這時離Deadline只剩一周,毅然決然拋棄React,投向Node.js,運用Express.js Framework架設Server,運用兩個假日學習路由分配、學習後端ajax處理,
對了,還要學習Jade模板,學習綁參數,學習判斷URL、瀏覽器語言等,好在我前面幾周已培養看文件的習慣,對於英文文件也看得越來越熟悉,所以上手的非常快。

這個作品的Server開發、前端頁面處理、Javascript、後端API串接、CSS樣式、上架測試,全部由我一手包辦,在這之中我學習到了非常多:

  • Node.js
  • Express.js
  • Restful API 操作
  • AJAX
  • jQuery
  • 路由匹配
  • Jade
  • CSS
  • 網站SEO、meta data設定
  • Facebook按鈕串接

這些東西,讓我學習到一個網站是如何從無到有生成,架構出來的,也讓我體會到前端工程師的辛苦,一方面要和UI設計師溝通,另一方面也要和後端工程師搭配API串接,實在是不算輕易的工作。

文章顯示頁面

文章顯示頁面

搜尋文章頁面

搜尋頁面

Demo

中期

上述文章網站完成之後,有好一大段的空閒期可以讓我自我學習,這期間公司來了運動編輯Allen、iOS實習生Henry、UI設計實習生Louis、業務發展專員Zak,前端工程師John,和一個技術顧問Kevin,頓時之間公司也就熱鬧了起來。

我下一個被指派的工作是架設一個教練網站,讓使用者可以搜尋、追蹤健身專家或醫師,並以留言版的形式跟專家溝通互動,這是公司第一個要向使用者收費的產品,不意外的,又是我一個人做。

技術顧問的加入與前主管的離開

公司的一個很大的轉捩點,就是技術顧問Kevin的加入,讓整個公司比較有了方向,但也因此導致iOS工程師和前主管的離開(職責相似的關係吧),Kevin讓我們公司全員使用Slack作為員工溝通工具,Slack非常方便,除了直接傳訊息之外也能劃分群組,例如R&D群組、UI群組、Marketing群組等,讓公司的交流不用再透過死板的Email,再來,Kevin讓我們使用teamwork網站,在這網站上面可以看到公司全員每天負責的工作,員工自己可以新增自己正在做的工作、未來要做的工作,自己設Deadline,大家也可以在上面直接討論,非常方便。

這些小細節的改變讓員工間的互動變得越來越好,也讓我看到一個正常公司該有的樣子。

每天的工作都列在上面

teamwork

專家網站我用Express把基礎UI、功能、API都串接好之後就停止不動,因為我知道我不能侷限於此,一有空閒我就上網學習更多WEB知識,更深入地學習React.js,並進一步學習Redux,將30個入門影片一步步走完,追蹤Redux神人Dan Abramov,有好幾天甚至一天八小時都在學習,因為當時公司的人常常在開會,也沒什麼人在管我。

最後在網路上看到了有大學教授在開設MERN全端課程,我變立馬向教授私訊FB希望能提供投影片檔案密碼,真的是如獲至寶,裡頭的教學是繁體中文不說,還有Node.js、Express、ES6、MongoDB、Heroku、React、Redux教學!完完全全就是我需要學習的東西,而且投影片寫得循序漸進,由淺入深,我便邊實做邊研讀,也讓一直學不好Redux的我有了更紮實的基礎。

並且實做了兩個React+Redux的小作品

YouTube搜尋網

Demo
GitHub

Youtube Search

React-Redux免刷新部落格

Demo
GitHub

Blog

Blog

就這樣,我過著邊工作邊學習的階段過了整整有兩個月之久,直到公司又有新的方向出現…

後期

約莫6月中,技術顧問Kevin取代Fuhua成為公司的領導,他決定先暫緩公司的手機APP開發,現行版本把Bug修完就停止,
先來開發網頁版的應用,並要求前端工程師John用React.js來做開發。

由於是移轉手機板的應用到WEB,Ken的後端API早就做好了,我們只需要寫前端的部分即可。

但是問題來了,公司目前只有我對React.js最熟,其他工程師是完全沒碰過的,但也不可能把這份工作丟給實習生去做,畢竟這是公司的主要產品阿!
那時Ken就覺得Kevin很大膽,敢用最新的技術打掉重練,在公司正職沒有人熟React的情況下,這項決定真的是很勇敢!

不過呢,在我聽到要用React來寫,則是非常開心,這不就是我關注已久的技術嗎?這樣我就有伴可以一起學習了!
一開始,我負責幫忙John來寫這項專案,但因為John原本是寫後端的,對於前端幾乎是沒什麼概念,更別說是用最新的技術來寫,
馬上的,John遭遇了很大的困難,他沒有時間研讀React,還要在時限內盡快完成初步的登入架構,
剛開始我都叫他從頭開始學起,但他似乎覺得那會來不及,只能先找網路上範例硬幹,最後搞了很久還是不了了之。

這時候的我,也默默地做同樣的事情,因為有著一些基礎,很快地就搭建起Facebook/Google登入機制,讓工作有了個開端,並放上自己的GitHub給John參考,就這樣的我邊教John,邊自主學習更深入的Redux架構。

後來,Kevin發現時間不夠了,又找來Hunk、Ken,甚至自己要跳下來一起寫,一開始Kevin讓我跟大家講解React的架構,我就用最簡單的部落格概念跟大家一一講解,
如何拆分元件、路由的設定等等,透過每一次的講解,也讓我的觀念愈來愈清楚,概念也更加深厚。

我們照著Alan給的Wireframe分工,因為我一周只來三天,被分配到兩個頁面,Dashboard健康看板和BodyInfo健康記錄頁面,
其中Dashboard頁面主要是顯示各項資料,並結合圖表,算是滿有挑戰性的。

在這個專案的實作過程中,我也讓專案加入Redux資料框架,讓所有的共用data儲存到統一的store裡,這樣一來,可以讓React專心負責顯示的部分,資料統一管理,
也讓程式碼更簡潔易讀。

FiTobe

Demo

這個專案,讓我學習到如何用React+Redux完整實做一個功能型應用網站,用React-Router實現前端路由匹配並達成無刷新轉頁,所謂的SPA單頁面應用就是如此,
而javascript的模組化開發也讓我越來越著迷,React的元件拆寫特性也讓分工更清楚,Redux統一資料管理,讓各功能可以重用,而接下來,
就是往伺服器渲染的目標邁進了,我的實習生涯於此,也到了結尾,雖然有點可惜沒有學習到資料庫、後端開發,但是也讓我的前端開發經驗有了更深刻的基礎,
並且也練會了一套當紅的前端Framework,也算是不虛此行了。

雖然在這裡薪資待遇沒有很好,但WATICS給了我機會,使我在這五個月快速成長,不僅培養了我實戰經驗,還有與人合作的經驗,也讓我體會到真正的工作是如何,
很開心WATICS沒有讓我來打雜,五個月前我空手空腦而來,而現在,我裝著滿滿的知識與經驗在腦袋裡,準備當兵去。

WATICS,我會想念你的,有緣再相會了,是你讓我的工程師之路,又更踏進了一步。

WATICS