Mar 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