前言
這段時間過得很快，演算法、鐵人賽、助教以及新練習專案的打造。果然有事情需要忙碌時有意思多了! 今天會簡單介紹一下這期間所打造的練習專案，以及過程中的一些紀錄。
Vinterest – A simple Pinterest clone
作為這次的練習專案，我選擇打造一個簡易的Pinterest clone，整個專案開發期間約三周(一周MVP，兩周優化)，使用的技術可以透過github的連結去看詳細的說明，同時也可以透過這個連結去玩一下!這邊就不贅述了!
專案的主要練習重點為
- vue-apollo & Graphql的使用
- vuetify使用
- 前端切版練習
- 基本後端技術複習
基本上想盡量將重點放在前端頁面開發的細節上，可以自己手寫的部分就盡量不依賴套件，包含比較複雜的圖片計算、Lazy Loading、無線捲動以及下載功能等常見需求。Pinterest在畫面上較為單純，比較需要處理的是waterfall layout的布局，其中會包含較為複雜的計算，對於我來說是個很不錯的練習。
MVP->後續優化
一開始大概用了幾天的時間完成基本的MVP專案，其中就已經先涵蓋了最主要幾個核心功能，後續的優化其實主要重點都放在以下兩個部分
- 程式碼的重構
當時在趕MVP時，許多地方雖然局部看沒什麼問題，但用比較宏觀的角度來看就會發現有許多不必要、不合理的邏輯，像是query & mutation的集中管理、組件的切割、函數的抽離等，更別說許多畫面上的細節需要調整。由於初次接觸graphql，坦白說很多地方的邏輯都處理得有些雜亂，對於裡面一些options的使用我自己也不是很滿意，後續很大一部分的時間是花在重讀相關的文件與解決一些當時忽略的bug。 - Waterfall layout
我知道這玩意是有套件可以用的XD，但這樣的畫面計算邏輯是我以前比較少接觸的，一開始在構思時對我是個很不錯的挑戰。
最原先的作法相當的直白，我利用position absolute將每張圖片切為不同的layer，再透過載入圖片時的計算將每張圖片放在目前最短的column上即可。
看到這邊我相信有經驗人的已經知道這樣的寫法配上大量圖片的無線捲動究竟會有多麼悲劇的結果-效能表現極端的差勁。 再加上viewport變化時的欄位變動(6->4->2)，計算起來就更慢、使用者體驗就更差。
後來透過Gary大大的提示，利用flex的概念重新改寫，果然換了一條路更寬，配合上debounce的概念要處理畫面變化時重新計算顯示的欄位也比之前好多了，雖然目前仍有一些小瑕疵(效能表現還是不夠好)，但透過一些處理確實讓使用者會有著更好的體驗。 - Profile頁面
雖然Pinterest在使用者的頁面相當的單純，撇去Setting的部分根本就是一片空白，但為了基本的展示還是刻了簡單的profile頁面，這部分的組件就拆的比較讓人滿意，同時直接利用vuetify的directives也讓無線捲動的實作更加快速。 - 社群分享 & 下載功能
社群分享是後來MVP後，評審Ivan給的建議之一，雖說是社群分享功能，但我只是將該post的一些細節(圖片連結、標題、分類等)轉接各社群平台，算是較為陽春的功能。
而下載功能一開始就預計打造，但沒能在MVP時弄出來的東西，之前有利用過window.URL.createObjectURL做image preview，仔細想想應該能用相同的邏輯直接做出下載功能，想法雖然有效，但後來花了一點時間在處理cors的議題上，之後配合firebase storage以及在遠端的一些設定後應該就能完美解決目前極少數圖片下載的cors問題。 - 圖片拖拉上傳功能(in progress)
在Harry的推薦下嘗試了vue-dropzone，其中與aws3的連動我自己沒能弄出來，後來與firebase storage串接後事情就簡單很多，利用custom slot也能做出預期中的顯示效果，唯獨預覽圖片顯示&cors還需要一些設定，弄完後應該就可以正式上線了
結語
這個專案結構其實相當簡單，連後端的Models都只有User & Post兩個，透過讓他們彼此reference達到類似多對多的效果，前端撇除掉graphQL的部分，較為困難的就只有waterfall的處理，以這樣的專案規模與最後程式碼的品質來看，這段時間的利用遠遠不到有效率，在時間管理方面需要很大的加強。
但這樣的切版與新技術的練習對我自己還是相當有趣的，同時也複習了一些後端資料庫的操作，與助教、評審和同學間的交流也讓我有著很不錯的收穫，尤其看到他人的成品都會發現有些我可以偷、可以學的概念，我真是愛死學習&教學的感覺了XD 這專案還有一些後續的優化方向，會做為一個side project繼續優化，希望能從中學到更多的東西😁
Danny的學習紀錄 