資深前端工程師  •  東森慕德科技股份有限公司

三月 2022 - Present

工作內容：

開發「MOOD」App，MOOD App 是個社群軟體，提供使用者紀錄生活體驗、發布真實評價，藉由 MOOD App 裡快問快答的功能，尋求廣告網友的經驗分享，並透過個人化推薦系統發掘更多感興趣話題。

MOOD App 是採用 Hybrid 的方式開發，在 MOOD App 所擔任的工作:

1. 前端實作仿 App 的元件與功能，例: App 中的 action sheet、navitaion bar 等…。
2. 串接 App api。
3. 串接後端 api。
4. 導入 TypeScript，利用 TypeScript 特性，在多人開發時可以預先阻擋傳入錯誤的參數類型，避免在上線之後，因為型別的不同導致非預期的錯誤。
5. 使用 StoryBook 建立 component，在 StoryBook 寫測試案例，後續對 component 新增新的需求調整 component 時，避免造成非預期的錯誤；此外也可以提供給公司其他同仁閱覽目前站上 component 樣式。
6. 撰寫 Unit Test。
7. 優化頁面載入資料的流程。
8. 埋設 Sentry。
9. 開發 landing page 頁面。
10. 開發官方網頁。
11. 埋設廣告版位。
12. 埋設追蹤碼。
13. 實作 SEO。
14. 參與產品的開發討論並提供意見。
15. 與東森新聞雲合作開發直播頁。

開發過程所遇到的挑戰:

1. 新增快問快答的功能:
   • 快問快答的功能包含文字顏色、背景色、大小及位置可更動，而調整文字大小與邊界的處理，都會影響目前文字所在的位置。
   • 在邊界的處理中，如果使用 JavaScript 自動斷行會導致光標的位置不如預期出現該出現的位置，此外碰到第三方庫輸入法時，偵測文字輸入完整的時機點將會不正確。
   • 例: 注音正在輸入中，會將 ㄅ、ㄆ、ㄇ 當作以輸入完整的文字，此時使用 JavaScript 做斷行處理會導致輸入的內容不正確。
   • 解決方法: 新增文字使用 div 且設定為 contenteditable，並且依當前裝置計算文字的相對位置，新增與顯示畫面需鎖定最寬，避免過大的裝置出現問題。
2. 載入圖片的效能優化:
   • 畫面中已小型卡片的貼文形式顯示，而如果同時間載入多筆圖片會導致載入效能不張還會導致其他應載入的檔案都受到影響。
   • 解決方法: 實作緩載入功能，並使用 tag picture 讓不同的瀏覽器載入不同的圖片檔 (例: WebP)，增加使用者體驗。
3. 全站資料同步:
   • 需求方希望在回到上一頁時，能夠回到在跳轉到下一頁前的狀態，而在開發中加入了 keep-alive 的功能。
   • 但在 keep-alive 在我們的架構中 api 並不會重打，所以會導致資料會有不同步的現象。
   • 例: 在第二頁點擊 a 文字愛心，此時愛心的狀態已改變，但回到上一頁愛心狀態會與第二頁的愛心狀態不同步。
   • 解決法方: 使用 new Map 將相關的資料放在同一個 pool 中，使得全部都共用相同的同一筆資料，達到解決資料不同步的問題且可節省網路流量。

MOOD App的架構為：

• Vue 3
• Laravel

使用語言：

• JavaScript
• TypeScript

使用框架：

• Vue 3
• Jest

使用工具：

• Git
• Webpack
• Vue Cli

高級前端工程師  •  PIXNET_優像數位媒體科技股份有限公司

四月 2020 - Present

工作內容：
1. 開發「叩叩」App，提供店家與部落客的媒合平台，以及提供店家可以觀看目前在網路上的聲量。
- 叩叩初期架構是由我與後端工程師和 Data team 的成員所架設，初期的人力由我負責前端與後端的工作。
- 中後期與公司中另一個美食團隊結合之後，只需負責前端的部份。
- 叩叩短短的半年開發期限內，就已有營收，所以在 2021 年度被選為城邦集團下最佳團隊，而我也在該年度被選為最佳員工。
- 叩叩的架構為：
* Laravel
* Vue 3

2 開發部落客綁定商家名片頁
- 為了將部落客的資訊顯示在叩叩 App 中，所以需讓部落客本人填寫自身的資訊提供給叩叩 App。
- 串接 Facebook 與 Instagram API，取得該部落客所授權的粉絲專頁與 Instagram 帳號，並存到資料庫中。

3. 串接 Facebook 與 Instagram API
- Facebook 和 Instagram 的數據用於部落客提供數據給店家參考。
- 撰寫綁定粉絲專頁與 Instagram 的功能。
- 與 Data team 成員串接粉絲專頁與 Instagram 顯示在前台供店家參考數據其數據更新的機制。
- 負責與其他同人共同撰寫審核文件。

4. 撰寫測試
- 網站中當廣告載入失敗時，沒有測試可以檢查與通知相關人員廣告沒有正常顯示問題，因此使用 Cypress 撰寫測試，當廣告沒有正常載入時，Slack 會出現相關的通知。

5. 改善 Webpack 打包的速度
- 改善 PIXNET 名片頁打包速度。
- 使用 speed-measure-webpack-plugin、webpack-bundle-analyzer 和 Webpack Visualizer 的套件分析，哪些模組影響到整體打包的時間。
- 在 PIXNET 名片頁觀察到，moment.js 的容量大，進而影響打包速度，將 moment.js 拔除之後，整體的時間縮短 10 秒。
- 撰寫 unit test 避免拔除 moment.js 後，自己寫的程式碼出現問題。

使用語言：
JavaScript、PHP

使用框架：
1. Angular 1.5
2. React
3. Vue 2/3
4. Laravel
5. Cypress

使用工具：
Git、tmux、Webpack、Rollup

全端工程師  •  原木科技股份有限公司

十二月 2018 - 六月 2019

工作內容：
　1. 負責維護加水站網站後台新功能的開發，串接加水站裡面的IoT設備，網頁端可即時顯示銷售狀態，擔任RD角色。

　2. 負責點餐機的介面開發，擔任RD角色。

　3. 負責101筷子販賣機的網站後台網頁與資料庫開發，串接販賣機裡面的IoT設備，網站後台可即時顯示銷售情況並且顯示每件商品的庫存、補貨通知、銀行的金流的紀錄，擔任RD角色。

　4. 負責開發Cocobar KTV的後台網頁與資料庫開發，顯示銷售紀錄、設定每部機台的歌曲售價、串接Line Pay和街口支付等服務，擔任RD角色。

使用語言：JavaScript、PHP

使用框架：Vue、Laravel

軟體工程師  •  高博思股份有限公司

九月 2018 - 十一月 2018

工作內容：
　1. 負責串接Facebook API與Google API，將Facebook粉絲團後台的數據資 料透過Google API自動生成google slide，節省粉絲團的小編做報表的時間，擔任RD角色

　2. 使用python爬蟲爬Google新聞的熱門關鍵字，將爬出來的關鍵字輸入到 Facebook搜尋中，再爬Facebook所搜尋出來的資料存到伺服器中進而將內容顯示到公司的網站中，顯示的資料包含文章與影片，擔任RD角色

　3.維護公司的網站與添加新功能，擔任RD角色

使用語言：JavaScript、Python、PHP

使用框架：Vue、Django